@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.
24 lines • 12.2 kB
JavaScript
import { DatePipe } from '@angular/common';
import { Component, Input } from "@angular/core";
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class BookingSummaryComponent {
constructor(datePipe) {
this.datePipe = datePipe;
}
date() {
return this.datePipe.transform(this.booking.date, 'fullDate');
}
time() {
return this.datePipe.transform(this.booking.date, 'shortTime');
}
}
BookingSummaryComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: BookingSummaryComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component });
BookingSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: BookingSummaryComponent, selector: "ui-booking-summary", inputs: { booking: "booking" }, providers: [DatePipe], ngImport: i0, template: "<div class=\"booking-summary booking-{{booking.status}}\">\r\n <div class=\"booking-summary-row\">\r\n <div class=\"service\">\r\n {{booking.service}}\r\n </div>\r\n <div class=\"date\">\r\n {{date()}}\r\n </div>\r\n </div>\r\n <div class=\"booking-summary-row\">\r\n <div class=\"resource\">\r\n {{booking.resource}}\r\n </div>\r\n <div class=\"time\">\r\n {{time()}}\r\n </div>\r\n </div>\r\n <div class=\"booking-summary-row\">\r\n <div class=\"status\">\r\n {{booking.status}}\r\n </div>\r\n <div class=\"price\">\r\n {{booking.price}} €\r\n </div>\r\n </div>\r\n</div>", styles: [".booking-summary{border-color:var(--color-secondary);border-style:var(--border-style);border-width:var(--border-width);background-color:var(--color-secondary-20);border-radius:var(--border-radius);padding-top:var(--padding-v);padding-bottom:var(--padding-v);padding-left:var(--padding-h);padding-right:var(--padding-h)}.booking-summary-row{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center}.booking-summary-row>.service,.booking-summary-row>.date,.booking-summary-row>.resource,.booking-summary-row>.time,.booking-summary-row>.status,.booking-summary-row>.price{margin-top:0;margin-left:0;margin-bottom:var(--margin-v);margin-right:0}.booking-summary-row>.status,.booking-summary-row>.time,.booking-summary-row>.price{font-size:small}.booking-summary-row>.service,.booking-summary-row>.resource,.booking-summary-row>.status{font-weight:bolder}.booking-summary-row>.status{text-transform:capitalize}.booking-pending>.booking-summary-row>.status{color:var(--color-pending)}.booking-accepted>.booking-summary-row>.status{color:var(--color-accepted)}.booking-cancelled>.booking-summary-row>.status{color:var(--color-cancelled)}.booking-proposed>.booking-summary-row>.status{color:var(--color-proposed)}.booking-declined>.booking-summary-row>.status{color:var(--color-declined)}@media screen and (min-width: 768px){.booking-summary{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"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: BookingSummaryComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-booking-summary', providers: [DatePipe], template: "<div class=\"booking-summary booking-{{booking.status}}\">\r\n <div class=\"booking-summary-row\">\r\n <div class=\"service\">\r\n {{booking.service}}\r\n </div>\r\n <div class=\"date\">\r\n {{date()}}\r\n </div>\r\n </div>\r\n <div class=\"booking-summary-row\">\r\n <div class=\"resource\">\r\n {{booking.resource}}\r\n </div>\r\n <div class=\"time\">\r\n {{time()}}\r\n </div>\r\n </div>\r\n <div class=\"booking-summary-row\">\r\n <div class=\"status\">\r\n {{booking.status}}\r\n </div>\r\n <div class=\"price\">\r\n {{booking.price}} €\r\n </div>\r\n </div>\r\n</div>", styles: [".booking-summary{border-color:var(--color-secondary);border-style:var(--border-style);border-width:var(--border-width);background-color:var(--color-secondary-20);border-radius:var(--border-radius);padding-top:var(--padding-v);padding-bottom:var(--padding-v);padding-left:var(--padding-h);padding-right:var(--padding-h)}.booking-summary-row{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center}.booking-summary-row>.service,.booking-summary-row>.date,.booking-summary-row>.resource,.booking-summary-row>.time,.booking-summary-row>.status,.booking-summary-row>.price{margin-top:0;margin-left:0;margin-bottom:var(--margin-v);margin-right:0}.booking-summary-row>.status,.booking-summary-row>.time,.booking-summary-row>.price{font-size:small}.booking-summary-row>.service,.booking-summary-row>.resource,.booking-summary-row>.status{font-weight:bolder}.booking-summary-row>.status{text-transform:capitalize}.booking-pending>.booking-summary-row>.status{color:var(--color-pending)}.booking-accepted>.booking-summary-row>.status{color:var(--color-accepted)}.booking-cancelled>.booking-summary-row>.status{color:var(--color-cancelled)}.booking-proposed>.booking-summary-row>.status{color:var(--color-proposed)}.booking-declined>.booking-summary-row>.status{color:var(--color-declined)}@media screen and (min-width: 768px){.booking-summary{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"] }]
}], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { booking: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm9va2luZy1zdW1tYXJ5LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWNvbXBvbmVudHMvc3JjL3VpL2Jvb2tpbmctc3VtbWFyeS9ib29raW5nLXN1bW1hcnkuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWktY29tcG9uZW50cy9zcmMvdWkvYm9va2luZy1zdW1tYXJ5L2Jvb2tpbmctc3VtbWFyeS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDM0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQVFqRCxNQUFNLE9BQU8sdUJBQXVCO0lBSWxDLFlBQW9CLFFBQWtCO1FBQWxCLGFBQVEsR0FBUixRQUFRLENBQVU7SUFDdEMsQ0FBQztJQUVELElBQUk7UUFDRixPQUFPLElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxFQUFFLFVBQVUsQ0FBQyxDQUFDO0lBQ2hFLENBQUM7SUFFRCxJQUFJO1FBQ0YsT0FBTyxJQUFJLENBQUMsUUFBUSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxXQUFXLENBQUMsQ0FBQztJQUNqRSxDQUFDOztvSEFiVSx1QkFBdUI7d0dBQXZCLHVCQUF1Qiw2RUFGdkIsQ0FBQyxRQUFRLENBQUMsMEJDUHZCLDRvQkF5Qk07MkZEaEJPLHVCQUF1QjtrQkFObkMsU0FBUzsrQkFDRSxvQkFBb0IsYUFHbkIsQ0FBQyxRQUFRLENBQUM7K0ZBSUwsT0FBTztzQkFBdEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERhdGVQaXBlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3VpLWJvb2tpbmctc3VtbWFyeScsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2Jvb2tpbmctc3VtbWFyeS5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vYm9va2luZy1zdW1tYXJ5LmNvbXBvbmVudC5jc3MnLCAnLi4vYXNzZXRzL3N0eWxlcy90aGVtZS5jc3MnXSxcclxuICBwcm92aWRlcnM6IFtEYXRlUGlwZV1cclxufSlcclxuZXhwb3J0IGNsYXNzIEJvb2tpbmdTdW1tYXJ5Q29tcG9uZW50IHtcclxuXHJcbiAgQElucHV0KCkgcHVibGljIGJvb2tpbmchOiBCb29raW5nU3VtbWFyeU1vZGVsO1xyXG5cclxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIGRhdGVQaXBlOiBEYXRlUGlwZSkge1xyXG4gIH1cclxuXHJcbiAgZGF0ZSgpIHtcclxuICAgIHJldHVybiB0aGlzLmRhdGVQaXBlLnRyYW5zZm9ybSh0aGlzLmJvb2tpbmcuZGF0ZSwgJ2Z1bGxEYXRlJyk7XHJcbiAgfVxyXG5cclxuICB0aW1lKCkge1xyXG4gICAgcmV0dXJuIHRoaXMuZGF0ZVBpcGUudHJhbnNmb3JtKHRoaXMuYm9va2luZy5kYXRlLCAnc2hvcnRUaW1lJyk7XHJcbiAgfVxyXG59XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIEJvb2tpbmdTdW1tYXJ5TW9kZWwge1xyXG4gIHNlcnZpY2U6IHN0cmluZztcclxuICByZXNvdXJjZTogc3RyaW5nO1xyXG4gIHN0YXR1czogc3RyaW5nIHwgdW5kZWZpbmVkO1xyXG4gIHByaWNlOiBudW1iZXI7XHJcbiAgZGF0ZTogRGF0ZVxyXG59IiwiPGRpdiBjbGFzcz1cImJvb2tpbmctc3VtbWFyeSBib29raW5nLXt7Ym9va2luZy5zdGF0dXN9fVwiPlxyXG4gIDxkaXYgY2xhc3M9XCJib29raW5nLXN1bW1hcnktcm93XCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwic2VydmljZVwiPlxyXG4gICAgICB7e2Jvb2tpbmcuc2VydmljZX19XHJcbiAgICA8L2Rpdj5cclxuICAgIDxkaXYgY2xhc3M9XCJkYXRlXCI+XHJcbiAgICAgIHt7ZGF0ZSgpfX1cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG4gIDxkaXYgY2xhc3M9XCJib29raW5nLXN1bW1hcnktcm93XCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwicmVzb3VyY2VcIj5cclxuICAgICAge3tib29raW5nLnJlc291cmNlfX1cclxuICAgIDwvZGl2PlxyXG4gICAgPGRpdiBjbGFzcz1cInRpbWVcIj5cclxuICAgICAge3t0aW1lKCl9fVxyXG4gICAgPC9kaXY+XHJcbiAgPC9kaXY+XHJcbiAgPGRpdiBjbGFzcz1cImJvb2tpbmctc3VtbWFyeS1yb3dcIj5cclxuICAgIDxkaXYgY2xhc3M9XCJzdGF0dXNcIj5cclxuICAgICAge3tib29raW5nLnN0YXR1c319XHJcbiAgICA8L2Rpdj5cclxuICAgIDxkaXYgY2xhc3M9XCJwcmljZVwiPlxyXG4gICAgICB7e2Jvb2tpbmcucHJpY2V9fSAmZXVybztcclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L2Rpdj4iXX0=