iptdevs-design-system
Version:
Library common elements into IPT Plattform.
50 lines (48 loc) • 7.15 kB
JavaScript
import { Component, EventEmitter, Input, Output } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class AsideButtonComponent {
constructor() {
this.isClicked = new EventEmitter();
}
clickAction() {
this.isClicked.emit(true);
}
}
AsideButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.7", ngImport: i0, type: AsideButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
AsideButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.7", type: AsideButtonComponent, selector: "ipt-aside-button", inputs: { icon: "icon", text: "text", buttonActive: "buttonActive" }, outputs: { isClicked: "isClicked" }, ngImport: i0, template: `
<div [ngSwitch]="buttonActive">
<a *ngSwitchCase="0" class="flex-item-menu__link" (click)="clickAction()">
<img src="{{ icon }}" alt="icon_url" />
<p>{{ text }}</p>
</a>
<a *ngSwitchCase="1" class="flex-item-menu__link flex-item-active" (click)="clickAction()">
<img src="{{ icon }}" alt="icon_url" />
<p>{{ text }}</p>
</a>
</div>
`, isInline: true, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.flex-item-menu__link{cursor:pointer;width:-webkit-fill-available;width:-moz-available;text-decoration:none;display:flex;justify-items:center;padding:.4rem 1rem;transition:all .3s ease 0s;border-radius:30px;margin:15px}.flex-item-menu__link img{cursor:pointer;width:1.4rem;height:1.4rem}.flex-item-menu__link p{cursor:pointer;display:inline;font-weight:500;font-family:Poppins,sans-serif;font-size:.8rem;padding:0 .8rem;margin:auto 0;color:#fff}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px;border-radius:50px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}.flex-item-active{box-shadow:#0006 0 30px 90px;background:transparent;border:1px solid white}}@media (min-width: 1024px){.flex-item-menu__link{padding:.4rem 1rem}.flex-item-menu__link:focus{border:1px solid white}.flex-item-menu__link img{cursor:pointer;width:1.6rem;height:1.6rem}.flex-item-menu__link p{font-size:1rem;color:#fff}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}}\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: AsideButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'ipt-aside-button', template: `
<div [ngSwitch]="buttonActive">
<a *ngSwitchCase="0" class="flex-item-menu__link" (click)="clickAction()">
<img src="{{ icon }}" alt="icon_url" />
<p>{{ text }}</p>
</a>
<a *ngSwitchCase="1" class="flex-item-menu__link flex-item-active" (click)="clickAction()">
<img src="{{ icon }}" alt="icon_url" />
<p>{{ text }}</p>
</a>
</div>
`, styles: ["*{font-family:Poppins,sans-serif}@media (min-width: 320px){.flex-item-menu__link{cursor:pointer;width:-webkit-fill-available;width:-moz-available;text-decoration:none;display:flex;justify-items:center;padding:.4rem 1rem;transition:all .3s ease 0s;border-radius:30px;margin:15px}.flex-item-menu__link img{cursor:pointer;width:1.4rem;height:1.4rem}.flex-item-menu__link p{cursor:pointer;display:inline;font-weight:500;font-family:Poppins,sans-serif;font-size:.8rem;padding:0 .8rem;margin:auto 0;color:#fff}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px;border-radius:50px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}.flex-item-active{box-shadow:#0006 0 30px 90px;background:transparent;border:1px solid white}}@media (min-width: 1024px){.flex-item-menu__link{padding:.4rem 1rem}.flex-item-menu__link:focus{border:1px solid white}.flex-item-menu__link img{cursor:pointer;width:1.6rem;height:1.6rem}.flex-item-menu__link p{font-size:1rem;color:#fff}a:hover,a:focus,.flex-item-menu__link:hover,.flex-item-menu__link p:focus{color:#fff;background-color:#ffffff4f;-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);box-shadow:#0006 0 30px 90px}.flex-item-img{width:2.5rem;height:2.5rem;padding:.4rem}}\n"] }]
}], propDecorators: { icon: [{
type: Input
}], text: [{
type: Input
}], buttonActive: [{
type: Input
}], isClicked: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXNpZGUtYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2Rlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2F0b21zL2FzaWRlLWJ1dHRvbi9hc2lkZS1idXR0b24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQW9CdkUsTUFBTSxPQUFPLG9CQUFvQjtJQWxCakM7UUFzQlksY0FBUyxHQUFHLElBQUksWUFBWSxFQUFXLENBQUM7S0FLbkQ7SUFIQyxXQUFXO1FBQ1QsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDNUIsQ0FBQzs7aUhBUlUsb0JBQW9CO3FHQUFwQixvQkFBb0IsbUtBaEJyQjs7Ozs7Ozs7Ozs7O0dBWVQ7MkZBSVUsb0JBQW9CO2tCQWxCaEMsU0FBUzsrQkFDRSxrQkFBa0IsWUFDbEI7Ozs7Ozs7Ozs7OztHQVlUOzhCQUtRLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFDSSxTQUFTO3NCQUFsQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdpcHQtYXNpZGUtYnV0dG9uJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IFtuZ1N3aXRjaF09XCJidXR0b25BY3RpdmVcIj5cbiAgICAgIDxhICpuZ1N3aXRjaENhc2U9XCIwXCIgY2xhc3M9XCJmbGV4LWl0ZW0tbWVudV9fbGlua1wiIChjbGljayk9XCJjbGlja0FjdGlvbigpXCI+XG4gICAgICAgIDxpbWcgc3JjPVwie3sgaWNvbiB9fVwiIGFsdD1cImljb25fdXJsXCIgLz5cbiAgICAgICAgPHA+e3sgdGV4dCB9fTwvcD5cbiAgICAgIDwvYT5cblxuICAgICAgPGEgKm5nU3dpdGNoQ2FzZT1cIjFcIiBjbGFzcz1cImZsZXgtaXRlbS1tZW51X19saW5rIGZsZXgtaXRlbS1hY3RpdmVcIiAoY2xpY2spPVwiY2xpY2tBY3Rpb24oKVwiPlxuICAgICAgICA8aW1nIHNyYz1cInt7IGljb24gfX1cIiBhbHQ9XCJpY29uX3VybFwiIC8+XG4gICAgICAgIDxwPnt7IHRleHQgfX08L3A+XG4gICAgICA8L2E+XG4gICAgPC9kaXY+XG4gIGAsXG4gIHN0eWxlVXJsczogWycuL2FzaWRlLWJ1dHRvbi5jc3MnXVxufSlcblxuZXhwb3J0IGNsYXNzIEFzaWRlQnV0dG9uQ29tcG9uZW50IHtcbiAgQElucHV0KCkgaWNvbiE6IHN0cmluZztcbiAgQElucHV0KCkgdGV4dCE6IHN0cmluZztcbiAgQElucHV0KCkgYnV0dG9uQWN0aXZlPzogYm9vbGVhbjtcbiAgQE91dHB1dCgpIGlzQ2xpY2tlZCA9IG5ldyBFdmVudEVtaXR0ZXI8Ym9vbGVhbj4oKTtcblxuICBjbGlja0FjdGlvbigpIHtcbiAgICB0aGlzLmlzQ2xpY2tlZC5lbWl0KHRydWUpO1xuICB9XG59XG4iXX0=