@betokyo/ui-components
Version:
As part of a school project, the BeTokyo UI components library allows us to reuse components in each of our web apps.
27 lines • 9.78 kB
JavaScript
import { Component, EventEmitter, Input, Output } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class ServiceListComponent {
constructor() {
this.clickHandler = new EventEmitter();
}
onClickHandler(id) {
this.clickHandler.emit(new ServiceSelectedEvent(id));
}
}
ServiceListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ServiceListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ServiceListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ServiceListComponent, selector: "ui-service-list", inputs: { services: "services" }, outputs: { clickHandler: "clickHandler" }, ngImport: i0, template: "<div class=\"service-list\">\n <div *ngFor=\"let service of services\" class=\"service\" (click)=\"onClickHandler(service.id)\">\n <div class=\"service-details\">\n <h2>{{service.name}}</h2>\n <p>{{service.description}}</p>\n </div>\n <div class=\"service-price\">\n <strong>{{service.price}} €</strong>\n </div>\n </div>\n</div>", styles: [".service-list{display:flex;flex-flow:column wrap;gap:20px 0}.service{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;padding-left:var(--padding-h);padding-right:var(--padding-h);padding-top:var(--padding-v);padding-bottom:var(--padding-v);border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color-secondary);cursor:pointer;background-color:var(--color-secondary-20)}.service:hover{background-color:var(--color-secondary-50)}.service:active{background-color:var(--color-secondary-80)}.service-details{width:85%}.service-price{width:15%;text-align:right}@media screen and (min-width: 480px){.service-list{max-width:var(--max-width)}}\n", ":host{--color-pending: #FCD64F;--color-accepted: #82C784;--color-cancelled: #A22A44;--color-proposed: #F79F4D;--color-declined: #E6E6E6;--color-ended: #B2CCD6;--color-text: #FFFFFF;--color-base: #000000;--color-available: #2ECC71;--color-disabled: #D2D2D2;--color-primary: #1D2C54;--color-primary-80: rgba(29, 44, 84, .8);--color-primary-50: rgba(29, 44, 84, .5);--color-primary-20: rgba(29, 44, 84, .2);--color-secondary: #D9D9D9;--color-secondary-80: rgba(217, 217, 217, .8);--color-secondary-50: rgba(217, 217, 217, .5);--color-secondary-20: rgba(217, 217, 217, .2);--color-danger: #A22A44;--color-danger-80: rgba(162, 42, 68, .8);--color-danger-50: rgba(162, 42, 68, .5);--color-danger-20: rgba(162, 42, 68, .2);--color-light: #D9D9D9;--color-light-80: rgba(217, 217, 217, .8);--color-light-50: rgba(217, 217, 217, .5);--color-light-20: rgba(217, 217, 217, .2);--color-dark: #000000;--color-dark-80: rgba(0, 0, 0, .8);--color-dark-50: rgba(0, 0, 0, .5);--color-dark-20: rgba(0, 0, 0, .2);--max-width: 315px;--margin-v: 10px;--padding-h: 20px;--padding-v: 15px;--padding: 10px;--small-padding: 5px;--border-radius: 5px;--border-width: 1px;--border-style: solid;--large-mobile: 414px;--mobile-w: 480px;--tablet-w: 768px;--laptop-w: 1024px}h1{font-family:DM Sans,sans-serif;font-size:2em;margin:5px 0}h2{font-family:Dhyana,sans-serif;font-size:1.4em;margin:5px 0}h3{font-family:Dhyana,sans-serif;font-size:1.2em;margin:5px 0}.element-title{font-family:Doppio One,sans-serif;font-size:16px;font-weight:700;line-height:140%}.description-text{font-family:Dhyana,sans-serif;font-size:24px;line-height:140%}.card-text{font-family:Dhyana,sans-serif;font-size:16px;line-height:140%}html,body,div,p,span,button,link{color:var(--color-dark-80);font-family:Dhyana,sans-serif}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ServiceListComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-service-list', template: "<div class=\"service-list\">\n <div *ngFor=\"let service of services\" class=\"service\" (click)=\"onClickHandler(service.id)\">\n <div class=\"service-details\">\n <h2>{{service.name}}</h2>\n <p>{{service.description}}</p>\n </div>\n <div class=\"service-price\">\n <strong>{{service.price}} €</strong>\n </div>\n </div>\n</div>", styles: [".service-list{display:flex;flex-flow:column wrap;gap:20px 0}.service{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;padding-left:var(--padding-h);padding-right:var(--padding-h);padding-top:var(--padding-v);padding-bottom:var(--padding-v);border-radius:var(--border-radius);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--color-secondary);cursor:pointer;background-color:var(--color-secondary-20)}.service:hover{background-color:var(--color-secondary-50)}.service:active{background-color:var(--color-secondary-80)}.service-details{width:85%}.service-price{width:15%;text-align:right}@media screen and (min-width: 480px){.service-list{max-width:var(--max-width)}}\n", ":host{--color-pending: #FCD64F;--color-accepted: #82C784;--color-cancelled: #A22A44;--color-proposed: #F79F4D;--color-declined: #E6E6E6;--color-ended: #B2CCD6;--color-text: #FFFFFF;--color-base: #000000;--color-available: #2ECC71;--color-disabled: #D2D2D2;--color-primary: #1D2C54;--color-primary-80: rgba(29, 44, 84, .8);--color-primary-50: rgba(29, 44, 84, .5);--color-primary-20: rgba(29, 44, 84, .2);--color-secondary: #D9D9D9;--color-secondary-80: rgba(217, 217, 217, .8);--color-secondary-50: rgba(217, 217, 217, .5);--color-secondary-20: rgba(217, 217, 217, .2);--color-danger: #A22A44;--color-danger-80: rgba(162, 42, 68, .8);--color-danger-50: rgba(162, 42, 68, .5);--color-danger-20: rgba(162, 42, 68, .2);--color-light: #D9D9D9;--color-light-80: rgba(217, 217, 217, .8);--color-light-50: rgba(217, 217, 217, .5);--color-light-20: rgba(217, 217, 217, .2);--color-dark: #000000;--color-dark-80: rgba(0, 0, 0, .8);--color-dark-50: rgba(0, 0, 0, .5);--color-dark-20: rgba(0, 0, 0, .2);--max-width: 315px;--margin-v: 10px;--padding-h: 20px;--padding-v: 15px;--padding: 10px;--small-padding: 5px;--border-radius: 5px;--border-width: 1px;--border-style: solid;--large-mobile: 414px;--mobile-w: 480px;--tablet-w: 768px;--laptop-w: 1024px}h1{font-family:DM Sans,sans-serif;font-size:2em;margin:5px 0}h2{font-family:Dhyana,sans-serif;font-size:1.4em;margin:5px 0}h3{font-family:Dhyana,sans-serif;font-size:1.2em;margin:5px 0}.element-title{font-family:Doppio One,sans-serif;font-size:16px;font-weight:700;line-height:140%}.description-text{font-family:Dhyana,sans-serif;font-size:24px;line-height:140%}.card-text{font-family:Dhyana,sans-serif;font-size:16px;line-height:140%}html,body,div,p,span,button,link{color:var(--color-dark-80);font-family:Dhyana,sans-serif}\n"] }]
}], propDecorators: { services: [{
type: Input
}], clickHandler: [{
type: Output
}] } });
export class ServiceSelectedEvent {
constructor(id) {
this.id = id;
}
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VydmljZS1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWNvbXBvbmVudHMvc3JjL3VpL3NlcnZpY2UtbGlzdC9zZXJ2aWNlLWxpc3QuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWktY29tcG9uZW50cy9zcmMvdWkvc2VydmljZS1saXN0L3NlcnZpY2UtbGlzdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFPdkUsTUFBTSxPQUFPLG9CQUFvQjtJQUxqQztRQVFtQixpQkFBWSxHQUFHLElBQUksWUFBWSxFQUF3QixDQUFDO0tBSzFFO0lBSEMsY0FBYyxDQUFDLEVBQVU7UUFDdkIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsSUFBSSxvQkFBb0IsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQ3ZELENBQUM7O2lIQVBVLG9CQUFvQjtxR0FBcEIsb0JBQW9CLG9JQ1BqQyw2V0FVTTsyRkRITyxvQkFBb0I7a0JBTGhDLFNBQVM7K0JBQ0UsaUJBQWlCOzhCQU1YLFFBQVE7c0JBQXZCLEtBQUs7Z0JBQ1csWUFBWTtzQkFBNUIsTUFBTTs7QUFlVCxNQUFNLE9BQU8sb0JBQW9CO0lBQy9CLFlBQW1CLEVBQVU7UUFBVixPQUFFLEdBQUYsRUFBRSxDQUFRO0lBQUksQ0FBQztDQUNuQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSBcIkBhbmd1bGFyL2NvcmVcIjtcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAndWktc2VydmljZS1saXN0JyxcclxuICB0ZW1wbGF0ZVVybDogJy4vc2VydmljZS1saXN0LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybHM6IFsnLi9zZXJ2aWNlLWxpc3QuY29tcG9uZW50LmNzcycsICcuLi9hc3NldHMvc3R5bGVzL3RoZW1lLmNzcyddXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBTZXJ2aWNlTGlzdENvbXBvbmVudCB7XHJcblxyXG4gIEBJbnB1dCgpIHB1YmxpYyBzZXJ2aWNlcyE6IFNlcnZpY2VEdG9Nb2RlbFtdO1xyXG4gIEBPdXRwdXQoKSBwdWJsaWMgY2xpY2tIYW5kbGVyID0gbmV3IEV2ZW50RW1pdHRlcjxTZXJ2aWNlU2VsZWN0ZWRFdmVudD4oKTtcclxuXHJcbiAgb25DbGlja0hhbmRsZXIoaWQ6IHN0cmluZyk6IHZvaWQge1xyXG4gICAgdGhpcy5jbGlja0hhbmRsZXIuZW1pdChuZXcgU2VydmljZVNlbGVjdGVkRXZlbnQoaWQpKTtcclxuICB9XHJcbn1cclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgU2VydmljZUR0b01vZGVsIHtcclxuICBpZDogc3RyaW5nO1xyXG4gIG5hbWU6IHN0cmluZztcclxuICBkZXNjcmlwdGlvbjogc3RyaW5nO1xyXG4gIHByaWNlOiBudW1iZXI7XHJcbiAgYXZhaWxhYmxlOiBib29sZWFuO1xyXG59XHJcblxyXG5leHBvcnQgY2xhc3MgU2VydmljZVNlbGVjdGVkRXZlbnQge1xyXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBpZDogc3RyaW5nKSB7IH1cclxufSIsIjxkaXYgY2xhc3M9XCJzZXJ2aWNlLWxpc3RcIj5cbiAgPGRpdiAqbmdGb3I9XCJsZXQgc2VydmljZSBvZiBzZXJ2aWNlc1wiIGNsYXNzPVwic2VydmljZVwiIChjbGljayk9XCJvbkNsaWNrSGFuZGxlcihzZXJ2aWNlLmlkKVwiPlxuICAgIDxkaXYgY2xhc3M9XCJzZXJ2aWNlLWRldGFpbHNcIj5cbiAgICAgIDxoMj57e3NlcnZpY2UubmFtZX19PC9oMj5cbiAgICAgIDxwPnt7c2VydmljZS5kZXNjcmlwdGlvbn19PC9wPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJzZXJ2aWNlLXByaWNlXCI+XG4gICAgICA8c3Ryb25nPnt7c2VydmljZS5wcmljZX19ICZldXJvOzwvc3Ryb25nPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PiJdfQ==