@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.
17 lines • 7.89 kB
JavaScript
import { Component, Input } from "@angular/core";
import * as i0 from "@angular/core";
export 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
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaGVhZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3VpLWNvbXBvbmVudHMvc3JjL3VpL2hlYWRlci9oZWFkZXIuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvdWktY29tcG9uZW50cy9zcmMvdWkvaGVhZGVyL2hlYWRlci5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFPakQsTUFBTSxPQUFPLGVBQWU7OzRHQUFmLGVBQWU7Z0dBQWYsZUFBZSxpSUNQNUIscVNBUU07MkZERE8sZUFBZTtrQkFMM0IsU0FBUzsrQkFDRSxXQUFXOzhCQUtMLFFBQVE7c0JBQXZCLEtBQUs7Z0JBQ1UsU0FBUztzQkFBeEIsS0FBSztnQkFDVSxRQUFRO3NCQUF2QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ3VpLWhlYWRlcicsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL2hlYWRlci5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vaGVhZGVyLmNvbXBvbmVudC5jc3MnLCAnLi4vYXNzZXRzL3N0eWxlcy90aGVtZS5jc3MnXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgSGVhZGVyQ29tcG9uZW50IHtcclxuICBASW5wdXQoKSBwdWJsaWMgbG9nb1BhdGg6IHN0cmluZyB8IHVuZGVmaW5lZDtcclxuICBASW5wdXQoKSBwdWJsaWMgbG9nb1RpdGxlOiBzdHJpbmcgfCB1bmRlZmluZWQ7XHJcbiAgQElucHV0KCkgcHVibGljIHN1cHBsaWVyITogc3RyaW5nO1xyXG59IiwiPGRpdiBjbGFzcz1cImhlYWRlclwiPlxyXG4gIDxkaXYgY2xhc3M9XCJoZWFkZXItc3VwcGxpZXItdGl0bGVcIj5cclxuICAgIDxpbWcgc3JjPVwie3tsb2dvUGF0aH19XCIgdGl0bGU9XCJ7e2xvZ29UaXRsZX19XCIgY2xhc3M9XCJiZXRva3lvLWxvZ29cIiAvPlxyXG4gICAgPHNwYW4gY2xhc3M9XCJzdXBwbGllclwiPnt7c3VwcGxpZXJ9fTwvc3Bhbj5cclxuICA8L2Rpdj5cclxuICA8ZGl2IGNsYXNzPVwiaGVhZGVyLWJldG9reW8tdGl0bGVcIj5cclxuICAgIEJlVG9reW9cclxuICA8L2Rpdj5cclxuPC9kaXY+Il19