@rolatech/angular-components 17.2.49 → 17.2.51
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/app-drawer/app-drawer.component.mjs +3 -3
- package/esm2022/lib/icon/icon.component.mjs +17 -5
- package/esm2022/lib/icon-button/icon-button.component.mjs +1 -1
- package/esm2022/lib/mini-guide/mini-guide.component.mjs +2 -2
- package/esm2022/lib/tabs/tabs.component.mjs +3 -3
- package/esm2022/lib/toolbar/toolbar.component.mjs +3 -3
- package/fesm2022/rolatech-angular-components.mjs +24 -12
- package/fesm2022/rolatech-angular-components.mjs.map +1 -1
- package/lib/icon/icon.component.d.ts +5 -1
- package/package.json +1 -1
- package/themes/_default.scss +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ViewEncapsulation, HostBinding, InjectionToken, makeEnvironmentProviders,
|
|
2
|
+
import { input, booleanAttribute, inject, ElementRef, effect, Component, ViewEncapsulation, HostBinding, InjectionToken, makeEnvironmentProviders, Renderer2, PLATFORM_ID, viewChild, ChangeDetectionStrategy, contentChild, computed, Inject, NgModule, ChangeDetectorRef, output, HostListener, contentChildren, model } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, isPlatformBrowser, NgClass } from '@angular/common';
|
|
5
5
|
import * as i2$1 from '@angular/material/icon';
|
|
@@ -72,13 +72,25 @@ import { map as map$1 } from 'lodash';
|
|
|
72
72
|
|
|
73
73
|
class IconComponent {
|
|
74
74
|
hasClass = true;
|
|
75
|
+
filled = input(false, { transform: booleanAttribute });
|
|
76
|
+
el = inject(ElementRef);
|
|
77
|
+
constructor() {
|
|
78
|
+
effect(() => {
|
|
79
|
+
if (this.filled()) {
|
|
80
|
+
this.el.nativeElement.setAttribute('filled', '');
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
this.el.nativeElement.removeAttribute('filled');
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
}
|
|
75
87
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
76
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
88
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.2", type: IconComponent, isStandalone: true, selector: "rolatech-icon", inputs: { filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rolatech-icon": "this.hasClass" } }, ngImport: i0, template: "<mat-icon>\n <ng-content></ng-content>\n</mat-icon>\n", styles: [".rolatech-icon{display:inline-flex;align-items:center;justify-content:center;position:relative;vertical-align:middle;width:var(--rolatech-icon-width, 24px);height:var(--rolatech-icon-height, 24px)}.rolatech-icon mat-icon{font-family:Material Symbols Rounded}.rolatech-icon[filled] mat-icon{font-family:Material Symbols Rounded Filled}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
77
89
|
}
|
|
78
90
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: IconComponent, decorators: [{
|
|
79
91
|
type: Component,
|
|
80
|
-
args: [{ selector: 'rolatech-icon', standalone: true, imports: [CommonModule, MatIcon], encapsulation: ViewEncapsulation.None, template: "<mat-icon>\n <ng-content></ng-content>\n</mat-icon>\n", styles: [".rolatech-icon{display:inline-flex;align-items:center;justify-content:center;position:relative;vertical-align:middle;width:var(--rolatech-icon-width, 24px);height:var(--rolatech-icon-height, 24px)}\n"] }]
|
|
81
|
-
}], propDecorators: { hasClass: [{
|
|
92
|
+
args: [{ selector: 'rolatech-icon', standalone: true, imports: [CommonModule, MatIcon], encapsulation: ViewEncapsulation.None, template: "<mat-icon>\n <ng-content></ng-content>\n</mat-icon>\n", styles: [".rolatech-icon{display:inline-flex;align-items:center;justify-content:center;position:relative;vertical-align:middle;width:var(--rolatech-icon-width, 24px);height:var(--rolatech-icon-height, 24px)}.rolatech-icon mat-icon{font-family:Material Symbols Rounded}.rolatech-icon[filled] mat-icon{font-family:Material Symbols Rounded Filled}\n"] }]
|
|
93
|
+
}], ctorParameters: () => [], propDecorators: { hasClass: [{
|
|
82
94
|
type: HostBinding,
|
|
83
95
|
args: ['class.rolatech-icon']
|
|
84
96
|
}] } });
|
|
@@ -86,7 +98,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
|
|
|
86
98
|
class IconButtonComponent {
|
|
87
99
|
hasClass = true;
|
|
88
100
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: IconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
89
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: IconButtonComponent, isStandalone: true, selector: "rolatech-icon-button", host: { properties: { "class.rolatech-icon-button": "this.hasClass" } }, ngImport: i0, template: "<button\n id=\"button\"\n class=\"w-10 h-10 p-2 inline-block relative cursor-pointer hover:bg-gray-100 rounded-full rolatech-icon-button\"\n onclick=\"this.blur()\"\n>\n <!-- <ng-content select=\"rolatech-icon\"></ng-content> -->\n <rolatech-icon>\n <ng-content></ng-content>\n </rolatech-icon>\n</button>\n", styles: [".rolatech-icon-button{--rolatech-icon-button-icon-width: 24px;--rolatech-icon-button-icon-height: 24px;color:var(--rolatech-spec-icon-active-other);width:40px;height:40px;box-sizing:border-box}button.rolatech-icon-button{vertical-align:middle;color:inherit;outline:none;background:none;margin:0;border:none;padding:0;width:100%;height:100%;line-height:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "rolatech-icon" }], encapsulation: i0.ViewEncapsulation.None });
|
|
101
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", type: IconButtonComponent, isStandalone: true, selector: "rolatech-icon-button", host: { properties: { "class.rolatech-icon-button": "this.hasClass" } }, ngImport: i0, template: "<button\n id=\"button\"\n class=\"w-10 h-10 p-2 inline-block relative cursor-pointer hover:bg-gray-100 rounded-full rolatech-icon-button\"\n onclick=\"this.blur()\"\n>\n <!-- <ng-content select=\"rolatech-icon\"></ng-content> -->\n <rolatech-icon>\n <ng-content></ng-content>\n </rolatech-icon>\n</button>\n", styles: [".rolatech-icon-button{--rolatech-icon-button-icon-width: 24px;--rolatech-icon-button-icon-height: 24px;color:var(--rolatech-spec-icon-active-other);width:40px;height:40px;box-sizing:border-box}button.rolatech-icon-button{vertical-align:middle;color:inherit;outline:none;background:none;margin:0;border:none;padding:0;width:100%;height:100%;line-height:0;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
90
102
|
}
|
|
91
103
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: IconButtonComponent, decorators: [{
|
|
92
104
|
type: Component,
|
|
@@ -302,7 +314,7 @@ class AppDrawerComponent {
|
|
|
302
314
|
}
|
|
303
315
|
}
|
|
304
316
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AppDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
305
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AppDrawerComponent, isStandalone: true, selector: "rolatech-app-drawer", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-app-drawer": "this.hasClass", "style.transition-duration": "this.duration" } }, viewQueries: [{ propertyName: "guideEl", first: true, predicate: ["guide"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "scrimEl", first: true, predicate: ["scrim"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"scrim\" #scrim class=\"tp-rolatech-app-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"tp-rolatech-app-drawer\">\n <div id=\"guide-wrapper\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-icon-button #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\">menu</rolatech-icon-button>\n <div class=\"text-black text-lg sm:text-xl font-bold\" routerLink=\"/\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div id=\"guide-inner-content\" class=\"flex flex-col rolatech-app\">\n @if (completed) {\n <div class=\"flex p-3 flex-col gap-2\">\n @for (item of links(); track $index) {\n @if (item.children) {\n <div class=\"cursor-pointer\">\n <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n <span class=\"ml-3\">{{ item.title }}</span>\n <div class=\"flex-1\"></div>\n <rolatech-icon\n style=\"transition-duration:.5s;transform: {{ panelOpenState ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n >expand_more</rolatech-icon\n >\n </div>\n <div class=\"flex flex-col pl-8\" [@heightAnimation]=\"panelOpenState === true ? 'open' : 'closed'\">\n @for (child of item.children; track child) {\n <a\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-3\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <span class=\"text-sm\">{{ child.title }}</span>\n </a>\n }\n </div>\n </div>\n } @else {\n @if (item.openinView) {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [href]=\"item.link\"\n target=\"_blank\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm opacity-75\">{{ item.subtitle }}</span>\n </div>\n </div>\n <rolatech-icon class=\"scale-90\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-app-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility}rolatech-app-drawer[persistent]{width:var(--app-drawer-width, 256px)}rolatech-app-drawer[persistent][position=top]{width:100%}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer:not(:has(#drawer-menu-button)){padding-left:16px}rolatech-app-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--app-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-app-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-app-drawer[position=top] #contentContainer #guide-inner-content div{display:flex!important;flex-direction:row!important;overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin;height:56px;align-items:center}rolatech-app-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-app-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-app-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=left]{right:auto}rolatech-app-drawer[persistent][position=right]{left:auto}rolatech-app-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-app-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-app-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#contentContainer.tp-rolatech-app-drawer{position:absolute;top:0;bottom:0;width:var(--app-drawer-width, 256px);padding:var(--app-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;background-color:#fff;background-color:var(--app-drawer-content-container-background-color, white)}#contentContainer.tp-rolatech-app-drawer[opened]{transform:translateZ(0)}#guide-inner-content.rolatech-app{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.tp-rolatech-app-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--app-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.tp-rolatech-app-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-app-drawer:not([persistent]) #guide-spacer{display:none}rolatech-app-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:#0000000d;border-radius:8px;font-weight:500}.content{display:flex;flex-direction:column;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconButtonComponent, selector: "rolatech-icon-button" }, { kind: "component", type: IconComponent, selector: "rolatech-icon" }], animations: [heightAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
317
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: AppDrawerComponent, isStandalone: true, selector: "rolatech-app-drawer", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-app-drawer": "this.hasClass", "style.transition-duration": "this.duration" } }, viewQueries: [{ propertyName: "guideEl", first: true, predicate: ["guide"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }, { propertyName: "scrimEl", first: true, predicate: ["scrim"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["header"], descendants: true, isSignal: true }], ngImport: i0, template: "<div id=\"scrim\" #scrim class=\"tp-rolatech-app-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"tp-rolatech-app-drawer\">\n <div id=\"guide-wrapper\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-icon-button #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\">menu</rolatech-icon-button>\n <div class=\"text-black text-lg sm:text-xl font-bold\" routerLink=\"/\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div id=\"guide-inner-content\" class=\"flex flex-col rolatech-app\">\n @if (completed) {\n <div class=\"flex p-3 flex-col gap-2\">\n @for (item of links(); track $index) {\n @if (item.children) {\n <div class=\"cursor-pointer\">\n <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n <span class=\"ml-3\">{{ item.title }}</span>\n <div class=\"flex-1\"></div>\n <rolatech-icon\n style=\"transition-duration:.5s;transform: {{ panelOpenState ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n >expand_more</rolatech-icon\n >\n </div>\n <div class=\"flex flex-col pl-8\" [@heightAnimation]=\"panelOpenState === true ? 'open' : 'closed'\">\n @for (child of item.children; track child) {\n <a\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-3\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <span class=\"text-sm\">{{ child.title }}</span>\n </a>\n }\n </div>\n </div>\n } @else {\n @if (item.openinView) {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [href]=\"item.link\"\n target=\"_blank\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm opacity-75\">{{ item.subtitle }}</span>\n </div>\n </div>\n <rolatech-icon class=\"scale-90\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\" [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-app-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility}rolatech-app-drawer[persistent]{width:var(--app-drawer-width, 256px)}rolatech-app-drawer[persistent][position=top]{width:100%}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer:not(:has(#drawer-menu-button)){padding-left:16px}rolatech-app-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--app-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-app-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-app-drawer[position=top] #contentContainer #guide-inner-content div{display:flex!important;flex-direction:row!important;overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin;height:56px;align-items:center}rolatech-app-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-app-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-app-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=left]{right:auto}rolatech-app-drawer[persistent][position=right]{left:auto}rolatech-app-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-app-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-app-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#contentContainer.tp-rolatech-app-drawer{position:absolute;top:0;bottom:0;width:var(--app-drawer-width, 256px);padding:var(--app-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;background-color:#fff;background-color:var(--app-drawer-content-container-background-color, white)}#contentContainer.tp-rolatech-app-drawer[opened]{transform:translateZ(0)}#guide-inner-content.rolatech-app{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.tp-rolatech-app-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--app-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.tp-rolatech-app-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-app-drawer:not([persistent]) #guide-spacer{display:none}rolatech-app-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:#0000000d;border-radius:8px;font-weight:500}.content{display:flex;flex-direction:column;overflow:visible}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: IconButtonComponent, selector: "rolatech-icon-button" }, { kind: "component", type: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }], animations: [heightAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
306
318
|
}
|
|
307
319
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: AppDrawerComponent, decorators: [{
|
|
308
320
|
type: Component,
|
|
@@ -316,7 +328,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
|
|
|
316
328
|
RouterLinkActive,
|
|
317
329
|
IconButtonComponent,
|
|
318
330
|
IconComponent,
|
|
319
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [heightAnimation], template: "<div id=\"scrim\" #scrim class=\"tp-rolatech-app-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"tp-rolatech-app-drawer\">\n <div id=\"guide-wrapper\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-icon-button #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\">menu</rolatech-icon-button>\n <div class=\"text-black text-lg sm:text-xl font-bold\" routerLink=\"/\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div id=\"guide-inner-content\" class=\"flex flex-col rolatech-app\">\n @if (completed) {\n <div class=\"flex p-3 flex-col gap-2\">\n @for (item of links(); track $index) {\n @if (item.children) {\n <div class=\"cursor-pointer\">\n <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n <span class=\"ml-3\">{{ item.title }}</span>\n <div class=\"flex-1\"></div>\n <rolatech-icon\n style=\"transition-duration:.5s;transform: {{ panelOpenState ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n >expand_more</rolatech-icon\n >\n </div>\n <div class=\"flex flex-col pl-8\" [@heightAnimation]=\"panelOpenState === true ? 'open' : 'closed'\">\n @for (child of item.children; track child) {\n <a\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-3\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <span class=\"text-sm\">{{ child.title }}</span>\n </a>\n }\n </div>\n </div>\n } @else {\n @if (item.openinView) {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [href]=\"item.link\"\n target=\"_blank\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm opacity-75\">{{ item.subtitle }}</span>\n </div>\n </div>\n <rolatech-icon class=\"scale-90\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-app-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility}rolatech-app-drawer[persistent]{width:var(--app-drawer-width, 256px)}rolatech-app-drawer[persistent][position=top]{width:100%}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer:not(:has(#drawer-menu-button)){padding-left:16px}rolatech-app-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--app-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-app-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-app-drawer[position=top] #contentContainer #guide-inner-content div{display:flex!important;flex-direction:row!important;overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin;height:56px;align-items:center}rolatech-app-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-app-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-app-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=left]{right:auto}rolatech-app-drawer[persistent][position=right]{left:auto}rolatech-app-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-app-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-app-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#contentContainer.tp-rolatech-app-drawer{position:absolute;top:0;bottom:0;width:var(--app-drawer-width, 256px);padding:var(--app-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;background-color:#fff;background-color:var(--app-drawer-content-container-background-color, white)}#contentContainer.tp-rolatech-app-drawer[opened]{transform:translateZ(0)}#guide-inner-content.rolatech-app{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.tp-rolatech-app-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--app-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.tp-rolatech-app-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-app-drawer:not([persistent]) #guide-spacer{display:none}rolatech-app-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:#0000000d;border-radius:8px;font-weight:500}.content{display:flex;flex-direction:column;overflow:visible}\n"] }]
|
|
331
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [heightAnimation], template: "<div id=\"scrim\" #scrim class=\"tp-rolatech-app-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"tp-rolatech-app-drawer\">\n <div id=\"guide-wrapper\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-icon-button #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\">menu</rolatech-icon-button>\n <div class=\"text-black text-lg sm:text-xl font-bold\" routerLink=\"/\">\n <span class=\"text-orange-600\">{{ appLayout.title }}</span>\n <span>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div id=\"guide-inner-content\" class=\"flex flex-col rolatech-app\">\n @if (completed) {\n <div class=\"flex p-3 flex-col gap-2\">\n @for (item of links(); track $index) {\n @if (item.children) {\n <div class=\"cursor-pointer\">\n <div class=\"flex items-center h-11 mr-2\" (click)=\"panelOpenState = !panelOpenState\">\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n <span class=\"ml-3\">{{ item.title }}</span>\n <div class=\"flex-1\"></div>\n <rolatech-icon\n style=\"transition-duration:.5s;transform: {{ panelOpenState ? 'rotate(180deg)' : 'rotate(0deg)' }};\"\n >expand_more</rolatech-icon\n >\n </div>\n <div class=\"flex flex-col pl-8\" [@heightAnimation]=\"panelOpenState === true ? 'open' : 'closed'\">\n @for (child of item.children; track child) {\n <a\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-3\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <span class=\"text-sm\">{{ child.title }}</span>\n </a>\n }\n </div>\n </div>\n } @else {\n @if (item.openinView) {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [href]=\"item.link\"\n target=\"_blank\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm opacity-75\">{{ item.subtitle }}</span>\n </div>\n </div>\n <rolatech-icon class=\"scale-90\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n <a\n class=\"flex hover:bg-gray-100 min-h-11\"\n [routerLink]=\"item.link\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3\" [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span>{{ item.title }}</span>\n <span class=\"text-sm\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n }\n }\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-app-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility}rolatech-app-drawer[persistent]{width:var(--app-drawer-width, 256px)}rolatech-app-drawer[persistent][position=top]{width:100%}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer:not(:has(#drawer-menu-button)){padding-left:16px}rolatech-app-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--app-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-app-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-app-drawer[position=top] #contentContainer #guide-inner-content div{display:flex!important;flex-direction:row!important;overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin;height:56px;align-items:center}rolatech-app-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-app-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-app-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=left]{right:auto}rolatech-app-drawer[persistent][position=right]{left:auto}rolatech-app-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-app-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-app-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-app-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-app-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#contentContainer.tp-rolatech-app-drawer{position:absolute;top:0;bottom:0;width:var(--app-drawer-width, 256px);padding:var(--app-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;background-color:#fff;background-color:var(--app-drawer-content-container-background-color, white)}#contentContainer.tp-rolatech-app-drawer[opened]{transform:translateZ(0)}#guide-inner-content.rolatech-app{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.tp-rolatech-app-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--app-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.tp-rolatech-app-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-app-drawer:not([persistent]) #guide-spacer{display:none}rolatech-app-drawer:not([persistent]){z-index:2030}.drawer-active{background-color:#0000000d;border-radius:8px;font-weight:500}.content{display:flex;flex-direction:column;overflow:visible}\n"] }]
|
|
320
332
|
}], propDecorators: { hostId: [{
|
|
321
333
|
type: HostBinding,
|
|
322
334
|
args: ['id']
|
|
@@ -385,7 +397,7 @@ class MiniGuideComponent {
|
|
|
385
397
|
this.opened ? this.close() : this.open();
|
|
386
398
|
}
|
|
387
399
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MiniGuideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
388
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: MiniGuideComponent, isStandalone: true, selector: "rolatech-mini-guide", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.rolatech-mini-guide": "this.hasClass" } }, ngImport: i0, template: "<div id=\"items\" class=\"w-16 mt-[6px]\" style=\"transition-duration: 200ms\">\n @for (item of items(); track $index) {\n <div>\n <a\n [routerLink]=\"item.link\"\n routerLinkActive=\"min-guide-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"flex flex-col justify-center items-center py-4\"\n >\n <rolatech-icon>{{ item.icon }}</rolatech-icon>\n @if (title()) {\n <span class=\"text-xs mt-1 max-w-full truncate\">{{ item.title }}</span>\n }\n </a>\n </div>\n }\n</div>\n", styles: [".rolatech-mini-guide{position:fixed;left:0;top:var(--rolatech-toolbar-height, 56px);bottom:0;width:var(--rolatech-mini-guide-width, 72px);box-sizing:border-box;display:inline-block;background-color:var(--rolatech-spec-base-background, #fff);z-index:2028;padding:0 4px}.min-guide-active{background-color:#0000000d;border-radius:8px;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "rolatech-icon" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
400
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: MiniGuideComponent, isStandalone: true, selector: "rolatech-mini-guide", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.rolatech-mini-guide": "this.hasClass" } }, ngImport: i0, template: "<div id=\"items\" class=\"w-16 mt-[6px]\" style=\"transition-duration: 200ms\">\n @for (item of items(); track $index) {\n <div>\n <a\n [routerLink]=\"item.link\"\n routerLinkActive=\"min-guide-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"flex flex-col justify-center items-center py-4\"\n >\n <rolatech-icon>{{ item.icon }}</rolatech-icon>\n @if (title()) {\n <span class=\"text-xs mt-1 max-w-full truncate\">{{ item.title }}</span>\n }\n </a>\n </div>\n }\n</div>\n", styles: [".rolatech-mini-guide{position:fixed;left:0;top:var(--rolatech-toolbar-height, 56px);bottom:0;width:var(--rolatech-mini-guide-width, 72px);box-sizing:border-box;display:inline-block;background-color:var(--rolatech-spec-base-background, #fff);z-index:2028;padding:0 4px}.min-guide-active{background-color:#0000000d;border-radius:8px;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
389
401
|
}
|
|
390
402
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: MiniGuideComponent, decorators: [{
|
|
391
403
|
type: Component,
|
|
@@ -1242,11 +1254,11 @@ class ToolbarComponent {
|
|
|
1242
1254
|
subtitle = input();
|
|
1243
1255
|
back = input(false, { transform: booleanAttribute });
|
|
1244
1256
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1245
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: ToolbarComponent, isStandalone: true, selector: "rolatech-toolbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"px-4\">\n <div class=\"flex justify-between items-center h-14\">\n @if (back()) {\n <div class=\"-ml-2\">\n <rolatech-icon-button rolatechBackButton> arrow_back </rolatech-icon-button>\n </div>\n }\n @if (title()) {\n <span class=\"text-xl font-medium\">{{ title() }}</span>\n }\n <div class=\"flex-1\"></div>\n <div class=\"flex justify-center items-center\">\n <ng-content></ng-content>\n </div>\n </div>\n @if (subtitle()) {\n <div class=\"-mt-
|
|
1257
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: ToolbarComponent, isStandalone: true, selector: "rolatech-toolbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"px-4\">\n <div class=\"flex justify-between items-center h-14\">\n @if (back()) {\n <div class=\"-ml-2\">\n <rolatech-icon-button rolatechBackButton> arrow_back </rolatech-icon-button>\n </div>\n }\n @if (title()) {\n <span class=\"text-xl font-medium\">{{ title() }}</span>\n }\n <div class=\"flex-1\"></div>\n <div class=\"flex justify-center items-center\">\n <ng-content></ng-content>\n </div>\n </div>\n @if (subtitle()) {\n <div class=\"-mt-3\">\n <span class=\"text-sm text-gray-500\">{{ subtitle() }}</span>\n </div>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IconButtonComponent, selector: "rolatech-icon-button" }, { kind: "directive", type: BackButtonDirective, selector: "[rolatechBackButton]" }] });
|
|
1246
1258
|
}
|
|
1247
1259
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
1248
1260
|
type: Component,
|
|
1249
|
-
args: [{ selector: 'rolatech-toolbar', standalone: true, imports: [CommonModule, IconButtonComponent, BackButtonDirective], template: "<div class=\"px-4\">\n <div class=\"flex justify-between items-center h-14\">\n @if (back()) {\n <div class=\"-ml-2\">\n <rolatech-icon-button rolatechBackButton> arrow_back </rolatech-icon-button>\n </div>\n }\n @if (title()) {\n <span class=\"text-xl font-medium\">{{ title() }}</span>\n }\n <div class=\"flex-1\"></div>\n <div class=\"flex justify-center items-center\">\n <ng-content></ng-content>\n </div>\n </div>\n @if (subtitle()) {\n <div class=\"-mt-
|
|
1261
|
+
args: [{ selector: 'rolatech-toolbar', standalone: true, imports: [CommonModule, IconButtonComponent, BackButtonDirective], template: "<div class=\"px-4\">\n <div class=\"flex justify-between items-center h-14\">\n @if (back()) {\n <div class=\"-ml-2\">\n <rolatech-icon-button rolatechBackButton> arrow_back </rolatech-icon-button>\n </div>\n }\n @if (title()) {\n <span class=\"text-xl font-medium\">{{ title() }}</span>\n }\n <div class=\"flex-1\"></div>\n <div class=\"flex justify-center items-center\">\n <ng-content></ng-content>\n </div>\n </div>\n @if (subtitle()) {\n <div class=\"-mt-3\">\n <span class=\"text-sm text-gray-500\">{{ subtitle() }}</span>\n </div>\n }\n</div>\n" }]
|
|
1250
1262
|
}] });
|
|
1251
1263
|
|
|
1252
1264
|
class ImageComponent {
|
|
@@ -1346,11 +1358,11 @@ class TabsComponent {
|
|
|
1346
1358
|
return offset;
|
|
1347
1359
|
}
|
|
1348
1360
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1349
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: TabsComponent, isStandalone: true, selector: "rolatech-tabs", inputs: { select: { classPropertyName: "select", publicName: "select", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "selectChange" }, host: { properties: { "class.rolatech-tabs": "this.hasClass" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "selectionBar", first: true, predicate: ["selectionBar"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n @for (tab of tabs(); track $index) {\n <ng-content select=\"rolatech-tab\"></ng-content>\n }\n </div>\n <!-- <ng-content></ng-content> -->\n</div>\n<!-- <rolatech-icon-button>chevron_right</rolatech-icon-button> -->\n", styles: ["rolatech-tabs{display:flex;flex-direction:row;align-items:center;font-weight:500;height:44px}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--paper-tabs-selection-bar-color, #ffff8d)
|
|
1361
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", type: TabsComponent, isStandalone: true, selector: "rolatech-tabs", inputs: { select: { classPropertyName: "select", publicName: "select", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "selectChange" }, host: { properties: { "class.rolatech-tabs": "this.hasClass" } }, queries: [{ propertyName: "tabs", predicate: TabComponent, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "selectionBar", first: true, predicate: ["selectionBar"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n @for (tab of tabs(); track $index) {\n <ng-content select=\"rolatech-tab\"></ng-content>\n }\n </div>\n <!-- <ng-content></ng-content> -->\n</div>\n<!-- <rolatech-icon-button>chevron_right</rolatech-icon-button> -->\n", styles: ["rolatech-tabs{display:flex;flex-direction:row;align-items:center;font-weight:500;height:44px}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--paper-tabs-selection-bar-color, #ffff8d);transform:scale(0);transform-origin:left center;transition:-webkit-transform;transition:transform}rolatech-tab[style-target=host]{margin-left:8px;margin-right:32px;padding:0;color:#ea580c}.selection-bar[style-target=selection-bar]{transition:width .15s cubic-bezier(.4,0,1,1),left .15s cubic-bezier(.4,0,1,1)}.selection-bar[style-target=selection-bar]{border-width:0;background-color:var(--ytcms-policies-app-paper-tab-color, rgb(234, 88, 12));border-radius:3px 3px 0 0;height:3px;margin-left:8px;right:auto;transform:none}#tabsContainer{position:relative}#tabsContent>:not(#selectionBar){height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
|
|
1350
1362
|
}
|
|
1351
1363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TabsComponent, decorators: [{
|
|
1352
1364
|
type: Component,
|
|
1353
|
-
args: [{ selector: 'rolatech-tabs', standalone: true, imports: [CommonModule, IconButtonComponent], encapsulation: ViewEncapsulation.None, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n @for (tab of tabs(); track $index) {\n <ng-content select=\"rolatech-tab\"></ng-content>\n }\n </div>\n <!-- <ng-content></ng-content> -->\n</div>\n<!-- <rolatech-icon-button>chevron_right</rolatech-icon-button> -->\n", styles: ["rolatech-tabs{display:flex;flex-direction:row;align-items:center;font-weight:500;height:44px}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--paper-tabs-selection-bar-color, #ffff8d)
|
|
1365
|
+
args: [{ selector: 'rolatech-tabs', standalone: true, imports: [CommonModule, IconButtonComponent], encapsulation: ViewEncapsulation.None, template: "<!-- <rolatech-icon-button>chevron_left</rolatech-icon-button> -->\n<div id=\"tabsContainer\" class=\"h-full\">\n <div id=\"tabsContent\" class=\"flex flex-row h-full\" style-target=\"selection-bar\">\n <div #selectionBar id=\"selectionBar\" class=\"selection-bar\"></div>\n @for (tab of tabs(); track $index) {\n <ng-content select=\"rolatech-tab\"></ng-content>\n }\n </div>\n <!-- <ng-content></ng-content> -->\n</div>\n<!-- <rolatech-icon-button>chevron_right</rolatech-icon-button> -->\n", styles: ["rolatech-tabs{display:flex;flex-direction:row;align-items:center;font-weight:500;height:44px}.selection-bar{position:absolute;height:0;bottom:0;left:0;right:0;border-bottom:2px solid var(--paper-tabs-selection-bar-color, #ffff8d);transform:scale(0);transform-origin:left center;transition:-webkit-transform;transition:transform}rolatech-tab[style-target=host]{margin-left:8px;margin-right:32px;padding:0;color:#ea580c}.selection-bar[style-target=selection-bar]{transition:width .15s cubic-bezier(.4,0,1,1),left .15s cubic-bezier(.4,0,1,1)}.selection-bar[style-target=selection-bar]{border-width:0;background-color:var(--ytcms-policies-app-paper-tab-color, rgb(234, 88, 12));border-radius:3px 3px 0 0;height:3px;margin-left:8px;right:auto;transform:none}#tabsContainer{position:relative}#tabsContent>:not(#selectionBar){height:100%}\n"] }]
|
|
1354
1366
|
}], propDecorators: { hasClass: [{
|
|
1355
1367
|
type: HostBinding,
|
|
1356
1368
|
args: ['class.rolatech-tabs']
|