@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.
30 lines • 10.5 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export 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
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2YmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWNvbXBvbmVudHMvc3JjL3VpL25hdmJhci9uYXZiYXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWktY29tcG9uZW50cy9zcmMvdWkvbmF2YmFyL25hdmJhci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFPdkUsTUFBTSxPQUFPLGVBQWU7SUFMNUI7UUFVbUIsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBZSxDQUFDO0tBU2pFO0lBUEMsY0FBYyxDQUFDLElBQWdCO1FBQzdCLElBQUksQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUMsQ0FBQztRQUNoRCxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztRQUNuQixJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQztZQUNyQixJQUFJLEVBQUUsSUFBSTtTQUNYLENBQUMsQ0FBQTtJQUNKLENBQUM7OzRHQWJVLGVBQWU7Z0dBQWYsZUFBZSxzS0NQNUIsNFpBT007MkZEQU8sZUFBZTtrQkFMM0IsU0FBUzsrQkFDRSxXQUFXOzhCQU1MLFFBQVE7c0JBQXZCLEtBQUs7Z0JBQ1UsU0FBUztzQkFBeEIsS0FBSztnQkFDVSxLQUFLO3NCQUFwQixLQUFLO2dCQUNXLFlBQVk7c0JBQTVCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICd1aS1uYXZiYXInLFxuICB0ZW1wbGF0ZVVybDogXCIuL25hdmJhci5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFsnLi9uYXZiYXIuY29tcG9uZW50LmNzcycsICcuLi9hc3NldHMvc3R5bGVzL3RoZW1lLmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIE5hdmJhckNvbXBvbmVudCB7XG4gIFxuICBASW5wdXQoKSBwdWJsaWMgbG9nb1BhdGg6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgcHVibGljIGxvZ29UaXRsZTogc3RyaW5nIHwgdW5kZWZpbmVkO1xuICBASW5wdXQoKSBwdWJsaWMgaXRlbXMhOiBOYXZiYXJJdGVtW107XG4gIEBPdXRwdXQoKSBwdWJsaWMgY2xpY2tIYW5kbGVyID0gbmV3IEV2ZW50RW1pdHRlcjxOYXZiYXJFdmVudD4oKTtcblxuICBvbkNsaWNrSGFuZGxlcihpdGVtOiBOYXZiYXJJdGVtKXtcbiAgICB0aGlzLml0ZW1zLmZvckVhY2goaXRlbSA9PiBpdGVtLmFjdGl2ZSA9IGZhbHNlKTtcbiAgICBpdGVtLmFjdGl2ZSA9IHRydWU7XG4gICAgdGhpcy5jbGlja0hhbmRsZXIuZW1pdCh7XG4gICAgICBpdGVtOiBpdGVtXG4gICAgfSlcbiAgfVxufVxuXG5leHBvcnQgaW50ZXJmYWNlIE5hdmJhckl0ZW0ge1xuICBpY29uOiBzdHJpbmc7XG4gIGxhYmVsOiBzdHJpbmc7ICBcbiAgYWN0aXZlOiBib29sZWFuIHwgdW5kZWZpbmVkO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIE5hdmJhckV2ZW50IHtcbiAgaXRlbTogTmF2YmFySXRlbVxufSIsIjxuYXYgY2xhc3M9XCJuYXZiYXJcIj5cclxuICA8aW1nIGNsYXNzPVwibmF2YmFyLWxvZ29cIiBzcmM9XCJ7e2xvZ29QYXRofX1cIiB0aXRsZT1cInt7bG9nb1RpdGxlfX1cIiAvPlxyXG4gIDxidXR0b24gdHlwZT1cImJ1dHRvblwiICpuZ0Zvcj1cImxldCBpdGVtIG9mIGl0ZW1zXCIgY2xhc3M9XCJuYXZiYXItYnV0dG9uIHt7aXRlbS5hY3RpdmUgPyAnYWN0aXZlJyA6ICcnfX1cIlxyXG4gICAgdGl0bGU9XCJ7e2l0ZW0ubGFiZWx9fVwiIChjbGljayk9XCJvbkNsaWNrSGFuZGxlcihpdGVtKVwiPlxyXG4gICAgPGkgKm5nSWY9XCJpdGVtLmljb25cIiBjbGFzcz1cImljb24ge3sgaXRlbS5pY29uIH19XCI+PC9pPlxyXG4gICAgPHNwYW4+e3sgaXRlbS5sYWJlbCB9fTwvc3Bhbj5cclxuICA8L2J1dHRvbj5cclxuPC9uYXY+Il19