@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.
379 lines • 65.2 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { DatePipe, CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
class ButtonComponent {
constructor() {
this.type = 'primary';
this.size = 'medium';
this.clickHandler = new EventEmitter();
}
onClickHandler(event) {
this.clickHandler.emit(event);
}
get cssStyle() {
return [
`button--${this.type}`,
`button--${this.size}`,
].join(' ');
}
}
ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ButtonComponent, selector: "ui-button", inputs: { type: "type", size: "size", label: "label" }, outputs: { clickHandler: "clickHandler" }, ngImport: i0, template: "<button\r\n type=\"button\"\r\n class=\"button {{cssStyle}}\"\r\n (click)=\"onClickHandler($event)\">\r\n {{ label }}\r\n</button> ", styles: [".button{border:0;cursor:pointer;transition:background-color .3s ease;border-style:var(--border-style)}.button--primary{background-color:var(--color-primary);color:var(--color-text)}.button--primary:hover{background-color:var(--color-primary-50);color:var(--color-primary)}.button--primary:active{background-color:var(--color-primary-80);color:var(--color-text)}.button--secondary{background-color:var(--color-secondary);color:var(--color-base)}.button--secondary:hover{background-color:var(--color-secondary-20);border-color:var(--color-secondary);border-width:var(--border-with);color:var(--color-base)}.button--secondary:active{background-color:var(--color-secondary-50);color:var(--color-base)}.button--danger{background-color:var(--color-danger);color:var(--color-text)}.button--danger:hover{background-color:var(--color-danger-20);color:var(--color-danger)}.button--danger:active{background-color:var(--color-danger-80);color:var(--color-text)}.button--light{background-color:var(--color-light-20);border-color:var(--color-light);border-width:var(--border-with);color:var(--color-base)}.button--light:hover{background-color:var(--color-text);border-color:var(--color-light);border-width:var(--border-with);color:var(--color-base)}.button--light:active{background-color:var(--color-light-50);border-color:var(--color-light);border-width:var(--border-with);color:var(--color-base)}.button--dark{background-color:var(--color-dark);color:var(--color-text)}.button--dark:hover{background-color:var(--color-dark-50);color:var(--color-text)}.button--dark:active{background-color:var(--color-dark-80);color:var(--color-text)}.button--large{width:275px;height:70px;padding:12px 24px;font-size:16px}.button--medium{min-width:137px;height:50px;padding:11px 20px;font-size:14px}.button--small{min-width:115px;height:40px;padding:10px 16px;font-size:12px}@media screen and (min-width: 375px){.button--large{min-width:315px}.button--medium{min-width:155px}.button--small{min-width:115px}}@media screen and (min-width: 414px){.button--large{min-width:380px}.button--medium{min-width:190px}.button--small{min-width:150px}}\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: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-button', template: "<button\r\n type=\"button\"\r\n class=\"button {{cssStyle}}\"\r\n (click)=\"onClickHandler($event)\">\r\n {{ label }}\r\n</button> ", styles: [".button{border:0;cursor:pointer;transition:background-color .3s ease;border-style:var(--border-style)}.button--primary{background-color:var(--color-primary);color:var(--color-text)}.button--primary:hover{background-color:var(--color-primary-50);color:var(--color-primary)}.button--primary:active{background-color:var(--color-primary-80);color:var(--color-text)}.button--secondary{background-color:var(--color-secondary);color:var(--color-base)}.button--secondary:hover{background-color:var(--color-secondary-20);border-color:var(--color-secondary);border-width:var(--border-with);color:var(--color-base)}.button--secondary:active{background-color:var(--color-secondary-50);color:var(--color-base)}.button--danger{background-color:var(--color-danger);color:var(--color-text)}.button--danger:hover{background-color:var(--color-danger-20);color:var(--color-danger)}.button--danger:active{background-color:var(--color-danger-80);color:var(--color-text)}.button--light{background-color:var(--color-light-20);border-color:var(--color-light);border-width:var(--border-with);color:var(--color-base)}.button--light:hover{background-color:var(--color-text);border-color:var(--color-light);border-width:var(--border-with);color:var(--color-base)}.button--light:active{background-color:var(--color-light-50);border-color:var(--color-light);border-width:var(--border-with);color:var(--color-base)}.button--dark{background-color:var(--color-dark);color:var(--color-text)}.button--dark:hover{background-color:var(--color-dark-50);color:var(--color-text)}.button--dark:active{background-color:var(--color-dark-80);color:var(--color-text)}.button--large{width:275px;height:70px;padding:12px 24px;font-size:16px}.button--medium{min-width:137px;height:50px;padding:11px 20px;font-size:14px}.button--small{min-width:115px;height:40px;padding:10px 16px;font-size:12px}@media screen and (min-width: 375px){.button--large{min-width:315px}.button--medium{min-width:155px}.button--small{min-width:115px}}@media screen and (min-width: 414px){.button--large{min-width:380px}.button--medium{min-width:190px}.button--small{min-width:150px}}\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: { type: [{
type: Input
}], size: [{
type: Input
}], label: [{
type: Input
}], clickHandler: [{
type: Output
}] } });
class NavbarComponent {
constructor() {
this.clickHandler = new EventEmitter();
}
onClickHandler(item) {
this.items.forEach(item => item.active = false);
item.active = true;
this.clickHandler.emit({
item: item
});
}
}
NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NavbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: NavbarComponent, selector: "ui-navbar", inputs: { logoPath: "logoPath", logoTitle: "logoTitle", items: "items" }, outputs: { clickHandler: "clickHandler" }, ngImport: i0, template: "<nav class=\"navbar\">\r\n <img class=\"navbar-logo\" src=\"{{logoPath}}\" title=\"{{logoTitle}}\" />\r\n <button type=\"button\" *ngFor=\"let item of items\" class=\"navbar-button {{item.active ? 'active' : ''}}\"\r\n title=\"{{item.label}}\" (click)=\"onClickHandler(item)\">\r\n <i *ngIf=\"item.icon\" class=\"icon {{ item.icon }}\"></i>\r\n <span>{{ item.label }}</span>\r\n </button>\r\n</nav>", styles: [".navbar{position:fixed;bottom:0;left:0}.navbar{background-color:var(--color-primary-20);width:100%;height:70px;display:flex;justify-content:space-around;align-items:center}.active{color:var(--color-primary)!important}.navbar-logo{width:50px;height:50px;cursor:pointer}.navbar-button{background-color:transparent;border:0;cursor:pointer;color:var(--color-primary-50);font-size:2em}.navbar-button>span{display:none}@media only screen and (min-width: 481px){.navbar{width:100%;height:70px;justify-content:flex-start;padding-left:15px;gap:15px}.navbar-logo{width:50px;height:50px}.navbar-button{align-items:center;display:flex;flex-flow:row wrap;justify-content:flex-start;gap:10px;font-size:large;font-weight:bolder}.navbar-button>span{display:unset}}@media only screen and (min-width: 481px){.navbar{position:fixed;top:0;left:0}.navbar-button{font-size:medium;font-weight:700}}\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"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: NavbarComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-navbar', template: "<nav class=\"navbar\">\r\n <img class=\"navbar-logo\" src=\"{{logoPath}}\" title=\"{{logoTitle}}\" />\r\n <button type=\"button\" *ngFor=\"let item of items\" class=\"navbar-button {{item.active ? 'active' : ''}}\"\r\n title=\"{{item.label}}\" (click)=\"onClickHandler(item)\">\r\n <i *ngIf=\"item.icon\" class=\"icon {{ item.icon }}\"></i>\r\n <span>{{ item.label }}</span>\r\n </button>\r\n</nav>", styles: [".navbar{position:fixed;bottom:0;left:0}.navbar{background-color:var(--color-primary-20);width:100%;height:70px;display:flex;justify-content:space-around;align-items:center}.active{color:var(--color-primary)!important}.navbar-logo{width:50px;height:50px;cursor:pointer}.navbar-button{background-color:transparent;border:0;cursor:pointer;color:var(--color-primary-50);font-size:2em}.navbar-button>span{display:none}@media only screen and (min-width: 481px){.navbar{width:100%;height:70px;justify-content:flex-start;padding-left:15px;gap:15px}.navbar-logo{width:50px;height:50px}.navbar-button{align-items:center;display:flex;flex-flow:row wrap;justify-content:flex-start;gap:10px;font-size:large;font-weight:bolder}.navbar-button>span{display:unset}}@media only screen and (min-width: 481px){.navbar{position:fixed;top:0;left:0}.navbar-button{font-size:medium;font-weight:700}}\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: { logoPath: [{
type: Input
}], logoTitle: [{
type: Input
}], items: [{
type: Input
}], clickHandler: [{
type: Output
}] } });
const MONTHS = ['january', 'february', 'march', 'april', 'may', 'june', 'july', 'august', 'september', 'october', 'november', 'december'];
const DAYS = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'];
class CalendarComponent {
constructor() {
this.clickHandler = new EventEmitter();
this.changeHandler = new EventEmitter();
}
ngOnInit() {
if (this.months === undefined) {
this.months = [...MONTHS];
}
if (this.days === undefined) {
this.days = [...DAYS];
}
}
onClickHandler(day) {
if (day.month !== undefined) {
this.clickHandler.emit(new DateSelectedEvent(this.schedule.year, day.month, day.date));
}
}
onNextHandler() {
if (this.schedule.month == 12) {
this.changeHandler.emit({
month: 1,
year: this.schedule.year + 1
});
}
else {
this.changeHandler.emit({
month: this.schedule.month + 1,
year: this.schedule.year
});
}
}
onPrevHandler() {
if (this.schedule.month == 1) {
this.changeHandler.emit({
month: 12,
year: this.schedule.year - 1
});
}
else {
this.changeHandler.emit({
month: this.schedule.month - 1,
year: this.schedule.year
});
}
}
isPrevDisabled() {
return this.schedule.month <= (new Date().getMonth() + 1);
}
month() {
if (this.month !== undefined) {
return this.months[this.schedule.month - 1];
}
throw new Error('Unknown month');
}
scheduleDays() {
return [
...this.getPrevDays(),
...this.getScheduleDays(),
...this.getNextDays()
];
}
getScheduleDays() {
const today = new Date();
const currentMonth = today.getMonth() + 1;
if (currentMonth < this.schedule.month) {
return this.schedule.days.map(day => {
return Object.assign(Object.assign({}, day), { month: this.schedule.month });
});
}
if (currentMonth > this.schedule.month) {
return this.schedule.days.map(day => {
return Object.assign(Object.assign({}, day), { available: false, month: this.schedule.month });
});
}
const todayDate = today.getDate();
return this.schedule.days.map(day => {
return (day.date >= todayDate) ? Object.assign(Object.assign({}, day), { month: this.schedule.month }) : Object.assign(Object.assign({}, day), { available: false, month: this.schedule.month });
});
}
getPrevDays() {
const current = new Date(`${this.schedule.year}-${this.schedule.month}-01`);
const days = [];
const lastDayOfMonth = new Date(current);
lastDayOfMonth.setDate(current.getDate() - 1);
const dayOfWeek = lastDayOfMonth.getDay();
const month = lastDayOfMonth.getMonth() + 1;
if (dayOfWeek < 6) {
Array.from(Array(dayOfWeek + 1).keys()).forEach(() => {
days.push({ date: lastDayOfMonth.getDate(), available: false, month: month });
lastDayOfMonth.setDate(lastDayOfMonth.getDate() - 1);
});
}
return [...days.reverse()];
}
getNextDays() {
const current = new Date(`${this.schedule.year}-${this.schedule.month}-01`);
const days = [];
const firstDayOfMonth = new Date(current);
firstDayOfMonth.setMonth(current.getMonth() + 1);
const dayOfWeek = firstDayOfMonth.getDay();
const month = firstDayOfMonth.getMonth() + 1;
if (dayOfWeek > 0) {
Array.from(Array(7 - dayOfWeek).keys()).forEach(x => {
days.push({ date: x + 1, month: month, available: true });
});
}
return [...days];
}
}
CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: CalendarComponent, selector: "ui-calendar", inputs: { months: "months", days: "days", schedule: "schedule" }, outputs: { clickHandler: "clickHandler", changeHandler: "changeHandler" }, ngImport: i0, template: "<div class=\"calendar\">\n <nav class=\"calendar-nav\">\n <button type=\"button\" class=\"calendar-nav-button\" (click)=\"onPrevHandler()\" [disabled]=\"isPrevDisabled()\">\n <\n </button>\n <span class=\"calendar-nav-title\">\n {{ month() }} {{schedule.year}}\n </span>\n <button type=\"button\" class=\"calendar-nav-button\" (click)=\"onNextHandler()\">\n >\n </button>\n </nav>\n <div class=\"calendar-header-row\">\n <span *ngFor=\"let dayName of days\" class=\"calendar-header-title\">\n {{dayName}}\n </span>\n </div>\n <div class=\"calendar-body-row\">\n <button type=\"button\" *ngFor=\"let day of scheduleDays()\" class=\"calendar-day-button\" [disabled]=\"!day.available\"\n (click)=\"onClickHandler(day)\">{{day.date}}</button>\n </div>\n</div>", styles: [".calendar{color:var(--color-primary)}.calendar-nav{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;margin-left:auto;margin-right:auto;margin-top:var(--margin-v);margin-bottom:var(--margin-v)}.calendar-nav-title{text-transform:capitalize;font-size:small;font-weight:bolder;color:var(--color-primary)}.calendar-nav-button{cursor:pointer;padding:10px 14px;font-weight:700;border-radius:20px;border-width:0;background-color:var(--color-secondary)}.calendar-nav-button[disabled]{background-color:var(--color-secondary-80);color:var(--color-disabled)}.calendar-header-row{display:flex;flex-flow:row;justify-content:space-between;margin-left:auto;margin-right:auto;margin-top:var(--margin-v);margin-bottom:var(--margin-v)}.calendar-header-title{width:calc(100%/7);text-align:center;text-transform:uppercase;font-size:small;color:var(--color-primary)}.calendar-body-row{display:flex;flex-flow:row wrap;justify-content:flex-start}.calendar-day-button{width:calc(100%/7);padding:var(--padding);cursor:pointer;border-width:var(--boder-width);border-style:var(--border-style);border-color:transparent;border-radius:var(--border-radius);background-color:transparent}.calendar-day-button:hover:enabled{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-text)}.calendar-day-button[disabled]{color:var(--color-disabled);text-decoration:line-through}@media screen and (min-width: 414px){.calendar{max-width:var(--max-width);margin:auto}}\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: CalendarComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-calendar', template: "<div class=\"calendar\">\n <nav class=\"calendar-nav\">\n <button type=\"button\" class=\"calendar-nav-button\" (click)=\"onPrevHandler()\" [disabled]=\"isPrevDisabled()\">\n <\n </button>\n <span class=\"calendar-nav-title\">\n {{ month() }} {{schedule.year}}\n </span>\n <button type=\"button\" class=\"calendar-nav-button\" (click)=\"onNextHandler()\">\n >\n </button>\n </nav>\n <div class=\"calendar-header-row\">\n <span *ngFor=\"let dayName of days\" class=\"calendar-header-title\">\n {{dayName}}\n </span>\n </div>\n <div class=\"calendar-body-row\">\n <button type=\"button\" *ngFor=\"let day of scheduleDays()\" class=\"calendar-day-button\" [disabled]=\"!day.available\"\n (click)=\"onClickHandler(day)\">{{day.date}}</button>\n </div>\n</div>", styles: [".calendar{color:var(--color-primary)}.calendar-nav{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;margin-left:auto;margin-right:auto;margin-top:var(--margin-v);margin-bottom:var(--margin-v)}.calendar-nav-title{text-transform:capitalize;font-size:small;font-weight:bolder;color:var(--color-primary)}.calendar-nav-button{cursor:pointer;padding:10px 14px;font-weight:700;border-radius:20px;border-width:0;background-color:var(--color-secondary)}.calendar-nav-button[disabled]{background-color:var(--color-secondary-80);color:var(--color-disabled)}.calendar-header-row{display:flex;flex-flow:row;justify-content:space-between;margin-left:auto;margin-right:auto;margin-top:var(--margin-v);margin-bottom:var(--margin-v)}.calendar-header-title{width:calc(100%/7);text-align:center;text-transform:uppercase;font-size:small;color:var(--color-primary)}.calendar-body-row{display:flex;flex-flow:row wrap;justify-content:flex-start}.calendar-day-button{width:calc(100%/7);padding:var(--padding);cursor:pointer;border-width:var(--boder-width);border-style:var(--border-style);border-color:transparent;border-radius:var(--border-radius);background-color:transparent}.calendar-day-button:hover:enabled{border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-text)}.calendar-day-button[disabled]{color:var(--color-disabled);text-decoration:line-through}@media screen and (min-width: 414px){.calendar{max-width:var(--max-width);margin:auto}}\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: { months: [{
type: Input
}], days: [{
type: Input
}], schedule: [{
type: Input
}], clickHandler: [{
type: Output
}], changeHandler: [{
type: Output
}] } });
class DateSelectedEvent {
constructor(year, month, date) {
this.year = year;
this.month = month;
this.date = date;
}
toString() {
return `${this.year}-${this.toTwoString(this.month)}-${this.toTwoString(this.date)}`;
}
toTwoString(n) {
return n < 10 ? `0${n}` : `${n}`;
}
}
class TurnScheduleComponent {
constructor() {
this.clickHandler = new EventEmitter();
}
ngOnInit() {
const temp = [];
this.resources = this.schedule.turns.map(turn => {
const length = turn.resources.length;
return turn.resources.map(resource => new ResourceSummary(resource.id, resource.name, length));
}).reduce(x => temp.concat(x));
}
onClickHandler(resource, time) {
this.clickHandler.emit(new TurnSelectedEvent(resource.id, new Date(`${this.schedule.date}T${time}:00`)));
}
isDisabled(resource) {
return resource.status !== 'available';
}
getStyle(resources) {
if (resources === undefined) {
return `width:100%;`;
}
return `width: ${(100 / (resources.length)) - 2}%;`;
}
date() {
return new Date(this.schedule.date).toLocaleDateString();
}
}
TurnScheduleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: TurnScheduleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
TurnScheduleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: TurnScheduleComponent, selector: "ui-turn-schedule", inputs: { title: "title", schedule: "schedule" }, outputs: { clickHandler: "clickHandler" }, ngImport: i0, template: "<div class=\"turn-schedule\">\n <header class=\"turn-schedule-header\">\n <h3>{{title}}</h3>\n <h3>{{date()}}</h3>\n </header>\n <div class=\"turn-schedule-body\">\n <div class=\"turn-schedule-resources\">\n <span class=\"turn-schedule-title\"\n *ngFor=\"let resource of resources;\"\n [style]=\"resource.getStyle()\">\n {{resource.name}}\n </span>\n </div>\n <div class=\"turn-schedule-hours\" *ngFor=\"let turn of schedule.turns\">\n <button class=\"turn-schedule-button\"\n type=\"button\"\n *ngFor=\"let resource of turn.resources\"\n [disabled]=\"isDisabled(resource)\"\n [style]=\"getStyle(resources)\"\n (click)=\"onClickHandler(resource, turn.time)\">\n {{turn.time}}\n </button>\n </div>\n </div>\n</div>\n", styles: [".turn-schedule-header{display:flex;flex-flow:row wrap;justify-content:space-between;padding-top:var(--padding);padding-bottom:var(--padding);padding-left:0;padding-right:0;color:var(--color-primary)}.turn-schedule-resources{width:100%;display:flex;flex-flow:row wrap;justify-content:space-between;margin-bottom:var(--margin-v)}.turn-schedule-title{padding:10px 5px;background-color:var(--color-primary);color:var(--color-text);text-align:center;cursor:pointer}.turn-schedule-hours{display:flex;flex-flow:row wrap;justify-content:space-between;margin-bottom:var(--margin-v)}.turn-schedule-button{background-color:var(--color-primary-50);border:0;padding:15px 0;width:-moz-fit-content;width:fit-content;text-align:center;cursor:pointer}.turn-schedule-button:disabled{background-color:var(--color-secondary-50)}.turn-schedule-button:hover:not(:disabled){background-color:var(--color-primary-20)}.turn-schedule-button:active:not(:disabled){background-color:var(--color-primary-80);color:var(--color-text)}@media screen and (min-width: 480px){.turn-schedule{max-width:var(--max-width);margin-left:auto;margin-right:auto}}\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: TurnScheduleComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-turn-schedule', template: "<div class=\"turn-schedule\">\n <header class=\"turn-schedule-header\">\n <h3>{{title}}</h3>\n <h3>{{date()}}</h3>\n </header>\n <div class=\"turn-schedule-body\">\n <div class=\"turn-schedule-resources\">\n <span class=\"turn-schedule-title\"\n *ngFor=\"let resource of resources;\"\n [style]=\"resource.getStyle()\">\n {{resource.name}}\n </span>\n </div>\n <div class=\"turn-schedule-hours\" *ngFor=\"let turn of schedule.turns\">\n <button class=\"turn-schedule-button\"\n type=\"button\"\n *ngFor=\"let resource of turn.resources\"\n [disabled]=\"isDisabled(resource)\"\n [style]=\"getStyle(resources)\"\n (click)=\"onClickHandler(resource, turn.time)\">\n {{turn.time}}\n </button>\n </div>\n </div>\n</div>\n", styles: [".turn-schedule-header{display:flex;flex-flow:row wrap;justify-content:space-between;padding-top:var(--padding);padding-bottom:var(--padding);padding-left:0;padding-right:0;color:var(--color-primary)}.turn-schedule-resources{width:100%;display:flex;flex-flow:row wrap;justify-content:space-between;margin-bottom:var(--margin-v)}.turn-schedule-title{padding:10px 5px;background-color:var(--color-primary);color:var(--color-text);text-align:center;cursor:pointer}.turn-schedule-hours{display:flex;flex-flow:row wrap;justify-content:space-between;margin-bottom:var(--margin-v)}.turn-schedule-button{background-color:var(--color-primary-50);border:0;padding:15px 0;width:-moz-fit-content;width:fit-content;text-align:center;cursor:pointer}.turn-schedule-button:disabled{background-color:var(--color-secondary-50)}.turn-schedule-button:hover:not(:disabled){background-color:var(--color-primary-20)}.turn-schedule-button:active:not(:disabled){background-color:var(--color-primary-80);color:var(--color-text)}@media screen and (min-width: 480px){.turn-schedule{max-width:var(--max-width);margin-left:auto;margin-right:auto}}\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: { title: [{
type: Input
}], schedule: [{
type: Input
}], clickHandler: [{
type: Output
}] } });
class ResourceSummary {
constructor(id, name, length) {
this.id = id;
this.name = name;
this.length = length;
}
getStyle() {
return `width: ${(100 / this.length) - 5}%`;
}
}
class TurnSelectedEvent {
constructor(resourceId, datetime) {
this.resourceId = resourceId;
this.datetime = datetime;
}
}
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
}] } });
class ServiceSelectedEvent {
constructor(id) {
this.id = id;
}
}
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
}] } });
class HeaderComponent {
}
HeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: HeaderComponent, selector: "ui-header", inputs: { logoPath: "logoPath", logoTitle: "logoTitle", supplier: "supplier" }, ngImport: i0, template: "<div class=\"header\">\r\n <div class=\"header-supplier-title\">\r\n <img src=\"{{logoPath}}\" title=\"{{logoTitle}}\" class=\"betokyo-logo\" />\r\n <span class=\"supplier\">{{supplier}}</span>\r\n </div>\r\n <div class=\"header-betokyo-title\">\r\n BeTokyo\r\n </div>\r\n</div>", styles: [".header{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;font-weight:bolder;font-size:larger;color:var(--color-primary);padding-bottom:var(--padding-v);border-bottom-color:var(--color-secondary-80);border-bottom-width:var(--border-width);border-bottom-style:var(--border-style)}.header-supplier-title{display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center;gap:10px}.betokyo-logo{width:50px;height:50px}@media only screen and (min-width: 414px){.header{max-width:var(--max-width);margin-left:auto;margin-right:auto}}\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: HeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'ui-header', template: "<div class=\"header\">\r\n <div class=\"header-supplier-title\">\r\n <img src=\"{{logoPath}}\" title=\"{{logoTitle}}\" class=\"betokyo-logo\" />\r\n <span class=\"supplier\">{{supplier}}</span>\r\n </div>\r\n <div class=\"header-betokyo-title\">\r\n BeTokyo\r\n </div>\r\n</div>", styles: [".header{display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;font-weight:bolder;font-size:larger;color:var(--color-primary);padding-bottom:var(--padding-v);border-bottom-color:var(--color-secondary-80);border-bottom-width:var(--border-width);border-bottom-style:var(--border-style)}.header-supplier-title{display:flex;flex-flow:row wrap;justify-content:flex-start;align-items:center;gap:10px}.betokyo-logo{width:50px;height:50px}@media only screen and (min-width: 414px){.header{max-width:var(--max-width);margin-left:auto;margin-right:auto}}\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: { logoPath: [{
type: Input
}], logoTitle: [{
type: Input
}], supplier: [{
type: Input
}] } });
class BeTokyoModule {
}
BeTokyoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: BeTokyoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
BeTokyoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: BeTokyoModule, declarations: [ButtonComponent,
NavbarComponent,
CalendarComponent,
TurnScheduleComponent,
ServiceListComponent,
BookingSummaryComponent,
HeaderComponent], imports: [CommonModule,
BrowserModule], exports: [ButtonComponent,
NavbarComponent,
CalendarComponent,
TurnScheduleComponent,
ServiceListComponent,
BookingSummaryComponent,
HeaderComponent] });
BeTokyoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: BeTokyoModule, imports: [CommonModule,
BrowserModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: BeTokyoModule, decorators: [{
type: NgModule,
args: [{
declarations: [
ButtonComponent,
NavbarComponent,
CalendarComponent,
TurnScheduleComponent,
ServiceListComponent,
BookingSummaryComponent,
HeaderComponent
],
imports: [
CommonModule,
BrowserModule
],
exports: [
ButtonComponent,
NavbarComponent,
CalendarComponent,
TurnScheduleComponent,
ServiceListComponent,
BookingSummaryComponent,
HeaderComponent
]
}]
}] });
/*
* Public API Surface of ui-components
*/
/**
* Generated bundle index. Do not edit.
*/
export { BeTokyoModule, BookingSummaryComponent, ButtonComponent, CalendarComponent, DateSelectedEvent, HeaderComponent, NavbarComponent, ServiceListComponent, ServiceSelectedEvent, TurnScheduleComponent, TurnSelectedEvent };
//# sourceMappingURL=betokyo-ui-components.mjs.map