iptdevs-design-system
Version:
Library common elements into IPT Plattform.
64 lines (62 loc) • 6.94 kB
JavaScript
import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class LevelButtonComponent {
constructor() {
this.isClicked = new EventEmitter();
}
clickAction() {
this.isClicked.emit(true);
}
}
LevelButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LevelButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
LevelButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: LevelButtonComponent, selector: "ipt-level-button", inputs: { level: "level", buttonActive: "buttonActive", idColor: "idColor" }, outputs: { isClicked: "isClicked" }, ngImport: i0, template: `
<div [ngSwitch]="buttonActive">
<button
*ngSwitchCase="0"
(click)="clickAction()"
id="level"
class="courses"
>
<p class="p-level">{{ level }}</p>
</button>
<button
*ngSwitchCase="1"
(click)="clickAction()"
id="{{ idColor }}"
class="courses">
<p class="p-level p-level-active">{{ level }}</p>
</button>
</div>
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.courses{cursor:pointer;text-decoration:none;display:flex;border-radius:3px;width:100%;height:30px;box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset;border:none;outline:none;align-items:center;background-color:transparent;color:#1c77f7}.p-level{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}#level-1{background-color:#02eed8}#level-2{background-color:#61acff}#level-3{background-color:#f168f4}#level-4{background-color:#ff3737}#level-5{background-color:#004dfa}#level-6{background-color:#14c25a}#level-7{background-color:#a052da}#level-8{background-color:#f2583d}#level-9{background-color:#291d26}#level-10{background-color:#1c77f7}.p-level-active{color:#fff}}@media (min-width: 375px){.courses{height:40px}.p-level{font-size:18px}}@media (min-width: 425px){.courses{height:30px}}@media (min-width: 768px){.courses{height:40px}}@media (min-width: 1024px){.courses{transition:.6s}.courses:active{transform:scale(1.05);box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset}.p-level{font-weight:700}}@media (min-width: 1440px){.p-level{font-weight:600}}\n"], dependencies: [{ kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: LevelButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'ipt-level-button', template: `
<div [ngSwitch]="buttonActive">
<button
*ngSwitchCase="0"
(click)="clickAction()"
id="level"
class="courses"
>
<p class="p-level">{{ level }}</p>
</button>
<button
*ngSwitchCase="1"
(click)="clickAction()"
id="{{ idColor }}"
class="courses">
<p class="p-level p-level-active">{{ level }}</p>
</button>
</div>
`, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.courses{cursor:pointer;text-decoration:none;display:flex;border-radius:3px;width:100%;height:30px;box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset;border:none;outline:none;align-items:center;background-color:transparent;color:#1c77f7}.p-level{display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px}#level-1{background-color:#02eed8}#level-2{background-color:#61acff}#level-3{background-color:#f168f4}#level-4{background-color:#ff3737}#level-5{background-color:#004dfa}#level-6{background-color:#14c25a}#level-7{background-color:#a052da}#level-8{background-color:#f2583d}#level-9{background-color:#291d26}#level-10{background-color:#1c77f7}.p-level-active{color:#fff}}@media (min-width: 375px){.courses{height:40px}.p-level{font-size:18px}}@media (min-width: 425px){.courses{height:30px}}@media (min-width: 768px){.courses{height:40px}}@media (min-width: 1024px){.courses{transition:.6s}.courses:active{transform:scale(1.05);box-shadow:#06182c66 0 0 0 2px,#06182ca6 0 4px 6px -1px,#ffffff14 0 1px inset}.p-level{font-weight:700}}@media (min-width: 1440px){.p-level{font-weight:600}}\n"] }]
}], propDecorators: { level: [{
type: Input
}], buttonActive: [{
type: Input
}], idColor: [{
type: Input
}], isClicked: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGV2ZWwtYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2Rlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2F0b21zL2xldmVsLWJ1dHRvbi9sZXZlbC1idXR0b24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQTJCdkUsTUFBTSxPQUFPLG9CQUFvQjtJQXpCakM7UUE4QlksY0FBUyxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7S0FNbkQ7SUFKQyxXQUFXO1FBQ1QsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDNUIsQ0FBQzs7aUhBVFUsb0JBQW9CO3FHQUFwQixvQkFBb0IsMktBdkJyQjs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW1CVDsyRkFJVSxvQkFBb0I7a0JBekJoQyxTQUFTOytCQUNFLGtCQUFrQixZQUNsQjs7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQW1CVDs4QkFNUSxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0ksU0FBUztzQkFBbEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2lwdC1sZXZlbC1idXR0b24nLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxkaXYgW25nU3dpdGNoXT1cImJ1dHRvbkFjdGl2ZVwiPlxuICAgICAgPGJ1dHRvblxuICAgICAgICAqbmdTd2l0Y2hDYXNlPVwiMFwiXG4gICAgICAgIChjbGljayk9XCJjbGlja0FjdGlvbigpXCJcbiAgICAgICAgaWQ9XCJsZXZlbFwiXG4gICAgICAgIGNsYXNzPVwiY291cnNlc1wiXG4gICAgICA+XG4gICAgICA8cCBjbGFzcz1cInAtbGV2ZWxcIj57eyBsZXZlbCB9fTwvcD5cbiAgICAgIDwvYnV0dG9uPlxuXG4gICAgICA8YnV0dG9uXG4gICAgICAgICpuZ1N3aXRjaENhc2U9XCIxXCJcbiAgICAgICAgKGNsaWNrKT1cImNsaWNrQWN0aW9uKClcIlxuICAgICAgICBpZD1cInt7IGlkQ29sb3IgfX1cIlxuICAgICAgICBjbGFzcz1cImNvdXJzZXNcIj5cbiAgICAgIDxwIGNsYXNzPVwicC1sZXZlbCBwLWxldmVsLWFjdGl2ZVwiPnt7IGxldmVsIH19PC9wPlxuICAgICAgPC9idXR0b24+XG4gICAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlVXJsczogWycuL2xldmVsLWJ1dHRvbi5jc3MnXSxcbn0pXG5cbmV4cG9ydCBjbGFzcyBMZXZlbEJ1dHRvbkNvbXBvbmVudCB7XG5cbiAgQElucHV0KCkgbGV2ZWwhOiBzdHJpbmc7XG4gIEBJbnB1dCgpIGJ1dHRvbkFjdGl2ZSE6IGJvb2xlYW47XG4gIEBJbnB1dCgpIGlkQ29sb3IhOiBzdHJpbmc7XG4gIEBPdXRwdXQoKSBpc0NsaWNrZWQgPSBuZXcgRXZlbnRFbWl0dGVyPGJvb2xlYW4+KCk7XG5cbiAgY2xpY2tBY3Rpb24oKSB7XG4gICAgdGhpcy5pc0NsaWNrZWQuZW1pdCh0cnVlKTtcbiAgfVxuXG59XG4iXX0=