@rolatech/angular-components 17.4.24 → 17.4.26
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/index.mjs +2 -1
- package/esm2022/lib/app-drawer/app-drawer.component.mjs +3 -3
- package/esm2022/lib/chip-bar/chip-bar.component.mjs +100 -14
- package/esm2022/lib/input/input.component.mjs +3 -3
- package/fesm2022/rolatech-angular-components.mjs +94 -14
- package/fesm2022/rolatech-angular-components.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/lib/chip-bar/chip-bar.component.d.ts +23 -6
- package/package.json +1 -1
- package/themes/_default.scss +1 -1
|
@@ -67,6 +67,7 @@ import * as i2$3 from '@rolatech/angular-services';
|
|
|
67
67
|
import { LoadingService, DialogService, SnackBarService, BackButtonDirective } from '@rolatech/angular-services';
|
|
68
68
|
import * as i3$1 from '@angular/forms';
|
|
69
69
|
import { FormsModule } from '@angular/forms';
|
|
70
|
+
import * as i2$4 from '@angular/platform-browser';
|
|
70
71
|
import { DomSanitizer, Title } from '@angular/platform-browser';
|
|
71
72
|
import { map as map$1 } from 'lodash';
|
|
72
73
|
|
|
@@ -339,7 +340,7 @@ class AppDrawerComponent {
|
|
|
339
340
|
}
|
|
340
341
|
}
|
|
341
342
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AppDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
342
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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=\"rt-app-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rt-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-menu-icon #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\"></rolatech-menu-icon>\n <div class=\"text-[--rt-text-primary] text-lg md: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 id=\"endpoint\"\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-3 rt-guide-entry-renderer\"\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-[--rt-10-percent-layer] 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 mr-3\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n @if (item.button) {\n <a\n class=\"flex app-drawer-button min-h-11 rounded-xl mr-4\"\n [routerLink]=\"item.link\"\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\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n } @else {\n <a\n id=\"endpoint\"\n class=\"flex hover:bg-[--rt-10-percent-layer] min-h-11 rt-guide-entry-renderer\"\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 }\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;transition-duration:.2s;touch-action:pan-y}rolatech-app-drawer[persistent]{width:var(--rt-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(--rt-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.rt-app-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rt-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.rt-app-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--rt-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.rt-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:var(--rt-drawer-active-background-color, rgba(0, 0, 0, .05));font-weight:500;border-radius:10px}.content{display:flex;flex-direction:column;overflow:visible}.app-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.app-drawer-button:hover{box-shadow:0 1px 3px #3c40434d,0 4px 8px 3px #3c404326;background-color:var(--rt-brand-color, #c2e7ff)}#endpoint.rt-guide-entry-renderer:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\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: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }, { kind: "component", type: MenuIconComponent, selector: "rolatech-menu-icon" }, { kind: "ngmodule", type: MatButtonModule }], animations: [heightAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
343
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.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=\"rolatech-app-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-app-drawer\">\n <div id=\"guide-wrapper\" class=\"rolatech-app-drawer\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\" class=\"rolatech-app-drawer\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-menu-icon #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\"></rolatech-menu-icon>\n <div class=\"text-[--rt-text-primary] text-lg md: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=\"rolatech-app-drawer\">\n @if (completed) {\n <div>\n <div class=\"block p-3\">\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 id=\"endpoint\"\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-3 rt-guide-entry-renderer\"\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-[--rt-10-percent-layer] 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 mr-3\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n @if (item.button) {\n <a\n class=\"flex app-drawer-button min-h-11 rounded-xl mr-4\"\n [routerLink]=\"item.link\"\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\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n } @else {\n <a\n id=\"endpoint\"\n class=\"flex hover:bg-[--rt-10-percent-layer] min-h-11 rt-guide-entry-renderer\"\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 }\n </div>\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;transition-duration:.2s;touch-action:pan-y}rolatech-app-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-app-drawer[persistent][position=top]{width:100%}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-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}#guide-wrapper.rolatech-app-drawer{height:100%;display:flexbox;display:flex;flex-direction:column}#contentContainer.rolatech-app-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-app-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-app-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-app-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-app-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--rt-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.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:var(--rt-drawer-active-background-color, rgba(0, 0, 0, .05));font-weight:500;border-radius:10px}.content{display:flex;flex-direction:column;overflow:visible}.app-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.app-drawer-button:hover{box-shadow:0 1px 3px #3c40434d,0 4px 8px 3px #3c404326;background-color:var(--rt-brand-color, #c2e7ff)}#endpoint.rt-guide-entry-renderer:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\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: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }, { kind: "component", type: MenuIconComponent, selector: "rolatech-menu-icon" }, { kind: "ngmodule", type: MatButtonModule }], animations: [heightAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
343
344
|
}
|
|
344
345
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AppDrawerComponent, decorators: [{
|
|
345
346
|
type: Component,
|
|
@@ -355,7 +356,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
|
|
|
355
356
|
IconComponent,
|
|
356
357
|
MenuIconComponent,
|
|
357
358
|
MatButtonModule,
|
|
358
|
-
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [heightAnimation], template: "<div id=\"scrim\" #scrim class=\"
|
|
359
|
+
], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: [heightAnimation], template: "<div id=\"scrim\" #scrim class=\"rolatech-app-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-app-drawer\">\n <div id=\"guide-wrapper\" class=\"rolatech-app-drawer\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\" class=\"rolatech-app-drawer\">\n <div id=\"header\" #header class=\"flex pl-4 h-14 items-center\">\n <rolatech-menu-icon #menuButton (click)=\"this.toggle()\" onclick=\"this.blur()\"></rolatech-menu-icon>\n <div class=\"text-[--rt-text-primary] text-lg md: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=\"rolatech-app-drawer\">\n @if (completed) {\n <div>\n <div class=\"block p-3\">\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 id=\"endpoint\"\n [routerLink]=\"child.link\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n class=\"p-3 rt-guide-entry-renderer\"\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-[--rt-10-percent-layer] 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 mr-3\">open_in_new</rolatech-icon>\n </div>\n </a>\n } @else {\n @if (item.button) {\n <a\n class=\"flex app-drawer-button min-h-11 rounded-xl mr-4\"\n [routerLink]=\"item.link\"\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\">{{ item.subtitle }}</span>\n </div>\n </div>\n </div>\n </a>\n } @else {\n <a\n id=\"endpoint\"\n class=\"flex hover:bg-[--rt-10-percent-layer] min-h-11 rt-guide-entry-renderer\"\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 }\n </div>\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;transition-duration:.2s;touch-action:pan-y}rolatech-app-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-app-drawer[persistent][position=top]{width:100%}rolatech-app-drawer[opened]{visibility:visible}rolatech-app-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-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}#guide-wrapper.rolatech-app-drawer{height:100%;display:flexbox;display:flex;flex-direction:column}#contentContainer.rolatech-app-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;transition-duration:0ms;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-app-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-app-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-app-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-app-drawer{position:absolute;inset:0;transition-property:opacity;transform:translateZ(0);transition-duration:.2s;opacity:0;background:var(--rt-drawer-scrim-background, rgba(0, 0, 0, .5))}#scrim.visible.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:var(--rt-drawer-active-background-color, rgba(0, 0, 0, .05));font-weight:500;border-radius:10px}.content{display:flex;flex-direction:column;overflow:visible}.app-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.app-drawer-button:hover{box-shadow:0 1px 3px #3c40434d,0 4px 8px 3px #3c404326;background-color:var(--rt-brand-color, #c2e7ff)}#endpoint.rt-guide-entry-renderer:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}\n"] }]
|
|
359
360
|
}], propDecorators: { hostId: [{
|
|
360
361
|
type: HostBinding,
|
|
361
362
|
args: ['id']
|
|
@@ -1425,23 +1426,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
|
|
|
1425
1426
|
args: [{ selector: 'rolatech-content', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n", styles: ["rolatech-content{padding-left:var(--rt-content-padding-left, 0px);padding-right:var(--rt-content-padding-right, 0px)}\n"] }]
|
|
1426
1427
|
}] });
|
|
1427
1428
|
|
|
1429
|
+
const CHEVRON_LEFT = `
|
|
1430
|
+
<svg
|
|
1431
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1432
|
+
height="24"
|
|
1433
|
+
viewBox="0 0 24 24"
|
|
1434
|
+
width="24"
|
|
1435
|
+
focusable="false"
|
|
1436
|
+
style="pointer-events: none; display: inherit; width: 100%; height: 100%"
|
|
1437
|
+
>
|
|
1438
|
+
<path d="M14.96 18.96 8 12l6.96-6.96.71.71L9.41 12l6.25 6.25-.7.71z"></path>
|
|
1439
|
+
</svg>
|
|
1440
|
+
`;
|
|
1441
|
+
const CHEVRON_RIGHT = `
|
|
1442
|
+
<svg
|
|
1443
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1444
|
+
height="24"
|
|
1445
|
+
viewBox="0 0 24 24"
|
|
1446
|
+
width="24"
|
|
1447
|
+
focusable="false"
|
|
1448
|
+
style="pointer-events: none; display: inherit; width: 100%; height: 100%"
|
|
1449
|
+
>
|
|
1450
|
+
<path d="m9.4 18.4-.7-.7 5.6-5.6-5.7-5.7.7-.7 6.4 6.4-6.3 6.3z"></path>
|
|
1451
|
+
</svg>
|
|
1452
|
+
`;
|
|
1428
1453
|
class ChipBarComponent {
|
|
1429
1454
|
hasId = 'rolatech-chip-bar';
|
|
1430
1455
|
hasClass = true;
|
|
1456
|
+
el = inject(ElementRef);
|
|
1457
|
+
renderer = inject(Renderer2);
|
|
1458
|
+
resizeObserver;
|
|
1459
|
+
chips = viewChild('chips', { read: ElementRef });
|
|
1460
|
+
scroller = viewChild.required('scroller', { read: ElementRef });
|
|
1461
|
+
constructor(iconRegistry, sanitizer) {
|
|
1462
|
+
// Note that we provide the icon here as a string literal here due to a limitation in
|
|
1463
|
+
// Stackblitz. If you want to provide the icon from a URL, you can use:
|
|
1464
|
+
// `iconRegistry.addSvgIcon('thumbs-up', sanitizer.bypassSecurityTrustResourceUrl('icon.svg'));`
|
|
1465
|
+
iconRegistry.addSvgIconLiteral('chevron_left', sanitizer.bypassSecurityTrustHtml(CHEVRON_LEFT));
|
|
1466
|
+
iconRegistry.addSvgIconLiteral('chevron_right', sanitizer.bypassSecurityTrustHtml(CHEVRON_RIGHT));
|
|
1467
|
+
}
|
|
1431
1468
|
router = input('../courses/categories/');
|
|
1432
|
-
items = [
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1469
|
+
items = input([]);
|
|
1470
|
+
fluid = input(false, { transform: booleanAttribute });
|
|
1471
|
+
platformId = inject(PLATFORM_ID);
|
|
1472
|
+
clientWidth = 0;
|
|
1473
|
+
scrollWidth = 0;
|
|
1474
|
+
scrollLeft = 0;
|
|
1475
|
+
ngAfterViewInit() {
|
|
1476
|
+
this.clientWidth = this.el.nativeElement.clientWidth;
|
|
1477
|
+
this.scrollWidth = this.scroller()?.nativeElement.scrollWidth;
|
|
1478
|
+
this.el.nativeElement.setAttribute('at-start', '');
|
|
1479
|
+
this.el.nativeElement.setAttribute('fluid-width', '');
|
|
1480
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
1481
|
+
this.resizeObserver = new ResizeObserver((entries) => {
|
|
1482
|
+
for (let entry of entries) {
|
|
1483
|
+
this.setCustomProperties(entry.contentRect.width);
|
|
1484
|
+
this.init();
|
|
1485
|
+
}
|
|
1486
|
+
});
|
|
1487
|
+
this.resizeObserver.observe(this.el.nativeElement);
|
|
1488
|
+
}
|
|
1489
|
+
}
|
|
1490
|
+
setCustomProperties(width) {
|
|
1491
|
+
this.clientWidth = width;
|
|
1492
|
+
this.el.nativeElement.style.setProperty('--rt-rich-grid-chips-bar-width', width + 'px');
|
|
1493
|
+
}
|
|
1494
|
+
init() {
|
|
1495
|
+
if (this.clientWidth + this.scrollLeft > this.scrollWidth) {
|
|
1496
|
+
this.el.nativeElement.setAttribute('at-end', '');
|
|
1497
|
+
}
|
|
1498
|
+
else {
|
|
1499
|
+
this.el.nativeElement.removeAttribute('at-end', '');
|
|
1500
|
+
}
|
|
1501
|
+
}
|
|
1502
|
+
onScroll(event) {
|
|
1503
|
+
this.scrollLeft = event.target.scrollLeft;
|
|
1504
|
+
this.init();
|
|
1505
|
+
if (this.scrollLeft > 0) {
|
|
1506
|
+
this.el.nativeElement.removeAttribute('at-start', '');
|
|
1507
|
+
}
|
|
1508
|
+
else {
|
|
1509
|
+
this.el.nativeElement.setAttribute('at-start', '');
|
|
1510
|
+
}
|
|
1511
|
+
}
|
|
1512
|
+
leftArrowClick() {
|
|
1513
|
+
this.scroller().nativeElement.scrollLeft -= 320;
|
|
1514
|
+
}
|
|
1515
|
+
rightArrowClick() {
|
|
1516
|
+
this.scroller().nativeElement.scrollLeft += 320;
|
|
1517
|
+
}
|
|
1518
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ChipBarComponent, deps: [{ token: i2$1.MatIconRegistry }, { token: i2$4.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
1519
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: ChipBarComponent, isStandalone: true, selector: "rolatech-chip-bar", inputs: { router: { classPropertyName: "router", publicName: "router", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.rolatech-chip-bar": "this.hasClass" } }, viewQueries: [{ propertyName: "chips", first: true, predicate: ["chips"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div id=\"chips-wrapper\" class=\"rolatech-chip-bar\">\n <div id=\"chips-content\" class=\"rolatech-chip-bar\">\n <div id=\"left-arrow\" class=\"rolatech-chip-bar\">\n <div id=\"left-arrow-button\" class=\"rolatech-chip-bar\">\n <button mat-icon-button (click)=\"leftArrowClick()\">\n <mat-icon>chevron_left</mat-icon>\n <!-- <mat-icon svgIcon=\"chevron_left\"></mat-icon> -->\n\n <!-- <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n focusable=\"false\"\n style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n >\n <path d=\"M14.96 18.96 8 12l6.96-6.96.71.71L9.41 12l6.25 6.25-.7.71z\"></path>\n </svg> -->\n </button>\n </div>\n </div>\n <div\n id=\"scroll-container\"\n #scroller\n class=\"rolatech-chip-bar overflow-x-scroll overflow-y-hidden scrollbar-hide\"\n (scroll)=\"onScroll($event)\"\n >\n <div id=\"chips\" #chips class=\"rolatech-chip-bar inline-block\">\n @for (link of items(); track link; let index = $index) {\n <a\n id=\"chip-item\"\n class=\"rolatech-chip-bar h-8 cursor-pointer bg-[--rt-10-percent-layer] rounded-md inline-flex items-center px-3 m-3 ml-0\"\n routerLinkActive=\"chip-bar-active\"\n [routerLink]=\"[router(), link.link]\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n >\n <span class=\"px-3 text-md\">{{ link.name }}</span>\n </a>\n }\n </div>\n </div>\n <div id=\"right-arrow\" class=\"rolatech-chip-bar\">\n <div id=\"right-arrow-button\" class=\"rolatech-chip-bar\">\n <button mat-icon-button (click)=\"rightArrowClick()\">\n <mat-icon>chevron_right</mat-icon>\n <!-- <mat-icon svgIcon=\"chevron_right\"></mat-icon> -->\n\n <!-- <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n focusable=\"false\"\n style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n >\n <path d=\"m9.4 18.4-.7-.7 5.6-5.6-5.7-5.7.7-.7 6.4 6.4-6.3 6.3z\"></path>\n </svg> -->\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}rolatech-chip-bar{--rt-chips-bar-base-height: 56px;display:flex;width:100%;padding-left:var(--rt-chip-bar-padding-left, 0px);padding-right:var(--rt-chip-bar-padding-right, 0px);background-color:var(--rt-chip-bar-barckground-color, #fff);color:var(--rt-chip-bar-color, #000);height:var(--rt-chips-bar-base-height)}.chip-bar-active{border-radius:var(--rt-chip-bar-border-radius, 8px);color:var(--rt-chip-bar-active-color, orangered)}@media (max-width: 768px){.chip-bar-active{border-radius:var(--rt-chip-bar-border-radius, 8px);background-color:#000;color:#fff}}#scroll-container.rolatech-chip-bar{scroll-behavior:smooth;position:relative;white-space:nowrap}#chips-wrapper.rolatech-chip-bar{position:fixed;top:var(--rt-rich-grid-chips-bar-top, 56px);width:var(--rt-rich-grid-chips-bar-width);background-color:var(--rt-base-background);z-index:2000;display:flexbox;display:flex;justify-content:center}rolatech-chip-bar[fluid-width] #chips-content.rolatech-chip-bar{max-width:calc(var(--ytd-rich-grid-content-max-width) + 48px);padding:0 24px}#chips-content.rolatech-chip-bar{box-sizing:border-box;width:100%;display:flex}#chips.rolatech-chip-bar{transition-duration:.15s;transition-timing-function:cubic-bezier(.05,0,0,1);will-change:transform;white-space:nowrap}#left-arrow.rolatech-chip-bar,#right-arrow.rolatech-chip-bar{position:absolute;height:100%;z-index:2020;display:flexbox;display:flex;flex-direction:row;justify-content:center}#left-arrow.rolatech-chip-bar{top:0;left:0}#right-arrow.rolatech-chip-bar{top:0;right:0}#left-arrow-button.rolatech-chip-bar,#right-arrow-button.rolatech-chip-bar{background-color:var(--rt-base-background);display:flexbox;display:flex;flex-direction:column;justify-content:center}#right-arrow.rolatech-chip-bar:before{height:100%;width:50px;content:\"\";pointer-events:none}rolatech-chip-bar[at-start] #left-arrow.rolatech-chip-bar{display:none}rolatech-chip-bar[at-end] #right-arrow.rolatech-chip-bar{display:none}#left-arrow.rolatech-chip-bar:after,#right-arrow.rolatech-chip-bar:before{height:100%;width:50px;content:\"\";pointer-events:none}#left-arrow.rolatech-chip-bar:after{background:linear-gradient(to right,var(--rt-base-background) 20%,rgba(255,255,255,0) 80%)}#right-arrow.rolatech-chip-bar:before{background:linear-gradient(to left,var(--rt-base-background) 20%,rgba(255,255,255,0) 80%)}#chip-item.rolatech-chip-bar{margin:12px 12px 12px 0}#chip-item.rolatech-chip-bar:last-of-type{margin-right:0}#chip-item:not([selected]):hover,#chip-item:not([selected]):focus{background-color:var(--rt-20-percent-layer)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$4.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1440
1520
|
}
|
|
1441
1521
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ChipBarComponent, decorators: [{
|
|
1442
1522
|
type: Component,
|
|
1443
|
-
args: [{ selector: 'rolatech-chip-bar', standalone: true, imports: [CommonModule, RouterModule], encapsulation: ViewEncapsulation.None, template: "<div\n
|
|
1444
|
-
}], propDecorators: { hasId: [{
|
|
1523
|
+
args: [{ selector: 'rolatech-chip-bar', standalone: true, imports: [CommonModule, RouterModule, IconButtonComponent, MatButtonModule, MatIconModule], encapsulation: ViewEncapsulation.None, template: "<div id=\"chips-wrapper\" class=\"rolatech-chip-bar\">\n <div id=\"chips-content\" class=\"rolatech-chip-bar\">\n <div id=\"left-arrow\" class=\"rolatech-chip-bar\">\n <div id=\"left-arrow-button\" class=\"rolatech-chip-bar\">\n <button mat-icon-button (click)=\"leftArrowClick()\">\n <mat-icon>chevron_left</mat-icon>\n <!-- <mat-icon svgIcon=\"chevron_left\"></mat-icon> -->\n\n <!-- <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n focusable=\"false\"\n style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n >\n <path d=\"M14.96 18.96 8 12l6.96-6.96.71.71L9.41 12l6.25 6.25-.7.71z\"></path>\n </svg> -->\n </button>\n </div>\n </div>\n <div\n id=\"scroll-container\"\n #scroller\n class=\"rolatech-chip-bar overflow-x-scroll overflow-y-hidden scrollbar-hide\"\n (scroll)=\"onScroll($event)\"\n >\n <div id=\"chips\" #chips class=\"rolatech-chip-bar inline-block\">\n @for (link of items(); track link; let index = $index) {\n <a\n id=\"chip-item\"\n class=\"rolatech-chip-bar h-8 cursor-pointer bg-[--rt-10-percent-layer] rounded-md inline-flex items-center px-3 m-3 ml-0\"\n routerLinkActive=\"chip-bar-active\"\n [routerLink]=\"[router(), link.link]\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n >\n <span class=\"px-3 text-md\">{{ link.name }}</span>\n </a>\n }\n </div>\n </div>\n <div id=\"right-arrow\" class=\"rolatech-chip-bar\">\n <div id=\"right-arrow-button\" class=\"rolatech-chip-bar\">\n <button mat-icon-button (click)=\"rightArrowClick()\">\n <mat-icon>chevron_right</mat-icon>\n <!-- <mat-icon svgIcon=\"chevron_right\"></mat-icon> -->\n\n <!-- <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n focusable=\"false\"\n style=\"pointer-events: none; display: inherit; width: 100%; height: 100%\"\n >\n <path d=\"m9.4 18.4-.7-.7 5.6-5.6-5.7-5.7.7-.7 6.4 6.4-6.3 6.3z\"></path>\n </svg> -->\n </button>\n </div>\n </div>\n </div>\n</div>\n", styles: [".scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}rolatech-chip-bar{--rt-chips-bar-base-height: 56px;display:flex;width:100%;padding-left:var(--rt-chip-bar-padding-left, 0px);padding-right:var(--rt-chip-bar-padding-right, 0px);background-color:var(--rt-chip-bar-barckground-color, #fff);color:var(--rt-chip-bar-color, #000);height:var(--rt-chips-bar-base-height)}.chip-bar-active{border-radius:var(--rt-chip-bar-border-radius, 8px);color:var(--rt-chip-bar-active-color, orangered)}@media (max-width: 768px){.chip-bar-active{border-radius:var(--rt-chip-bar-border-radius, 8px);background-color:#000;color:#fff}}#scroll-container.rolatech-chip-bar{scroll-behavior:smooth;position:relative;white-space:nowrap}#chips-wrapper.rolatech-chip-bar{position:fixed;top:var(--rt-rich-grid-chips-bar-top, 56px);width:var(--rt-rich-grid-chips-bar-width);background-color:var(--rt-base-background);z-index:2000;display:flexbox;display:flex;justify-content:center}rolatech-chip-bar[fluid-width] #chips-content.rolatech-chip-bar{max-width:calc(var(--ytd-rich-grid-content-max-width) + 48px);padding:0 24px}#chips-content.rolatech-chip-bar{box-sizing:border-box;width:100%;display:flex}#chips.rolatech-chip-bar{transition-duration:.15s;transition-timing-function:cubic-bezier(.05,0,0,1);will-change:transform;white-space:nowrap}#left-arrow.rolatech-chip-bar,#right-arrow.rolatech-chip-bar{position:absolute;height:100%;z-index:2020;display:flexbox;display:flex;flex-direction:row;justify-content:center}#left-arrow.rolatech-chip-bar{top:0;left:0}#right-arrow.rolatech-chip-bar{top:0;right:0}#left-arrow-button.rolatech-chip-bar,#right-arrow-button.rolatech-chip-bar{background-color:var(--rt-base-background);display:flexbox;display:flex;flex-direction:column;justify-content:center}#right-arrow.rolatech-chip-bar:before{height:100%;width:50px;content:\"\";pointer-events:none}rolatech-chip-bar[at-start] #left-arrow.rolatech-chip-bar{display:none}rolatech-chip-bar[at-end] #right-arrow.rolatech-chip-bar{display:none}#left-arrow.rolatech-chip-bar:after,#right-arrow.rolatech-chip-bar:before{height:100%;width:50px;content:\"\";pointer-events:none}#left-arrow.rolatech-chip-bar:after{background:linear-gradient(to right,var(--rt-base-background) 20%,rgba(255,255,255,0) 80%)}#right-arrow.rolatech-chip-bar:before{background:linear-gradient(to left,var(--rt-base-background) 20%,rgba(255,255,255,0) 80%)}#chip-item.rolatech-chip-bar{margin:12px 12px 12px 0}#chip-item.rolatech-chip-bar:last-of-type{margin-right:0}#chip-item:not([selected]):hover,#chip-item:not([selected]):focus{background-color:var(--rt-20-percent-layer)}\n"] }]
|
|
1524
|
+
}], ctorParameters: () => [{ type: i2$1.MatIconRegistry }, { type: i2$4.DomSanitizer }], propDecorators: { hasId: [{
|
|
1445
1525
|
type: HostBinding,
|
|
1446
1526
|
args: ['id']
|
|
1447
1527
|
}], hasClass: [{
|
|
@@ -1533,11 +1613,11 @@ class InputComponent {
|
|
|
1533
1613
|
title = model();
|
|
1534
1614
|
placeholder = input('Title');
|
|
1535
1615
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1536
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", type: InputComponent, isStandalone: true, selector: "rolatech-input", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange" }, ngImport: i0, template: "<div class=\"rt-input-wrapper\">\n <input class=\"rt__input\" [placeholder]=\"placeholder()\" [(ngModel)]=\"title\" />\n</div>\n", styles: ["rolatech-input{width:100
|
|
1616
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", type: InputComponent, isStandalone: true, selector: "rolatech-input", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { title: "titleChange" }, ngImport: i0, template: "<div class=\"rt-input-wrapper\">\n <input class=\"rt__input\" [placeholder]=\"placeholder()\" [(ngModel)]=\"title\" />\n</div>\n", styles: ["rolatech-input{width:100%;padding:8px}.rt-input-wrapper{width:100%;z-index:0;padding:12px;background-color:var(--rt-additive-background, #fff);border-radius:var(--rt-input-rounded, 8px);border:1px solid var(--rt-brand-color)}.rt__input{box-shadow:none;background:none;border-radius:0;width:100%;min-width:0;border:none;display:block}.rt__input:focus-visible{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1537
1617
|
}
|
|
1538
1618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: InputComponent, decorators: [{
|
|
1539
1619
|
type: Component,
|
|
1540
|
-
args: [{ selector: 'rolatech-input', standalone: true, imports: [CommonModule, FormsModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"rt-input-wrapper\">\n <input class=\"rt__input\" [placeholder]=\"placeholder()\" [(ngModel)]=\"title\" />\n</div>\n", styles: ["rolatech-input{width:100
|
|
1620
|
+
args: [{ selector: 'rolatech-input', standalone: true, imports: [CommonModule, FormsModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"rt-input-wrapper\">\n <input class=\"rt__input\" [placeholder]=\"placeholder()\" [(ngModel)]=\"title\" />\n</div>\n", styles: ["rolatech-input{width:100%;padding:8px}.rt-input-wrapper{width:100%;z-index:0;padding:12px;background-color:var(--rt-additive-background, #fff);border-radius:var(--rt-input-rounded, 8px);border:1px solid var(--rt-brand-color)}.rt__input{box-shadow:none;background:none;border-radius:0;width:100%;min-width:0;border:none;display:block}.rt__input:focus-visible{outline:none}\n"] }]
|
|
1541
1621
|
}] });
|
|
1542
1622
|
|
|
1543
1623
|
/**
|