@rolatech/angular-components 20.3.0-beta.3 → 20.3.1-beta.2

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.
Files changed (5) hide show
  1. package/fesm2022/rolatech-angular-components.mjs +107 -25
  2. package/fesm2022/rolatech-angular-components.mjs.map +1 -1
  3. package/package.json +3 -3
  4. package/themes/_default.scss +22 -13
  5. package/types/rolatech-angular-components.d.ts +29 -4
package/fesm2022/rolatech-angular-components.mjs CHANGED
@@ -6,7 +6,7 @@ import * as i3 from '@angular/material/progress-spinner';
6
6
  import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
7
7
  import * as i2 from '@angular/material/select';
8
8
  import { MatSelectModule } from '@angular/material/select';
9
- import { EnumApiClient, LoadingService, MediaService, DialogService, SnackBarService, TitleService, NavigationService, BackButtonDirective } from '@rolatech/angular-services';
9
+ import { EnumApiClient, LanguageService, LoadingService, MediaService, DialogService, SnackBarService, TitleService, NavigationService, BackButtonDirective } from '@rolatech/angular-services';
10
10
  import * as i1$1 from '@angular/common';
11
11
  import { CommonModule, isPlatformBrowser, NgClass } from '@angular/common';
12
12
  import * as i3$1 from '@angular/forms';
@@ -15,7 +15,7 @@ import * as i2$1 from '@angular/material/input';
15
15
  import { MatInputModule } from '@angular/material/input';
16
16
  import * as i1$2 from '@angular/material/button';
17
17
  import { MatButtonModule } from '@angular/material/button';
18
- import * as i2$3 from '@angular/material/icon';
18
+ import * as i2$2 from '@angular/material/icon';
19
19
  import { MatIcon, MatIconModule, MatIconRegistry } from '@angular/material/icon';
20
20
  import * as i1$3 from '@angular/material/progress-bar';
21
21
  import { MatProgressBarModule, MatProgressBar } from '@angular/material/progress-bar';
@@ -24,8 +24,8 @@ import { DomSanitizer } from '@angular/platform-browser';
24
24
  import { MatDialogRef, MAT_DIALOG_DATA, MatDialogContent, MatDialogActions, MatDialogClose, MatDialogTitle, MatDialogModule, MatDialog } from '@angular/material/dialog';
25
25
  import { MatSidenavModule } from '@angular/material/sidenav';
26
26
  import { MatListModule } from '@angular/material/list';
27
- import * as i1$5 from '@angular/router';
28
- import { RouterLink, RouterLinkActive, Router, RouterEvent, NavigationEnd, ActivatedRoute, RouterModule } from '@angular/router';
27
+ import * as i1$6 from '@angular/router';
28
+ import { RouterLink, Router, RouterLinkActive, RouterEvent, NavigationEnd, ActivatedRoute, RouterModule } from '@angular/router';
29
29
  import { BreakpointObserver, LayoutModule, Breakpoints } from '@angular/cdk/layout';
30
30
  import { map, distinctUntilChanged, filter } from 'rxjs';
31
31
  import { Platform } from '@angular/cdk/platform';
@@ -47,11 +47,11 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
47
47
  import { MatChipsModule } from '@angular/material/chips';
48
48
  import { MatNativeDateModule, MatRippleModule, MatOptionModule } from '@angular/material/core';
49
49
  import { MatDatepickerModule } from '@angular/material/datepicker';
50
- import * as i2$4 from '@angular/material/divider';
50
+ import * as i2$3 from '@angular/material/divider';
51
51
  import { MatDividerModule, MatDivider } from '@angular/material/divider';
52
52
  import { MatExpansionModule } from '@angular/material/expansion';
53
53
  import { MatGridListModule } from '@angular/material/grid-list';
54
- import * as i2$2 from '@angular/material/menu';
54
+ import * as i1$4 from '@angular/material/menu';
55
55
  import { MatMenuModule } from '@angular/material/menu';
56
56
  import { MatPaginatorModule } from '@angular/material/paginator';
57
57
  import { MatRadioModule } from '@angular/material/radio';
@@ -60,7 +60,7 @@ import { MatSliderModule } from '@angular/material/slider';
60
60
  import { MatSnackBarModule } from '@angular/material/snack-bar';
61
61
  import { MatSortModule } from '@angular/material/sort';
62
62
  import { MatStepperModule } from '@angular/material/stepper';
63
- import * as i1$4 from '@angular/material/table';
63
+ import * as i1$5 from '@angular/material/table';
64
64
  import { MatTableModule } from '@angular/material/table';
65
65
  import { MatTabsModule } from '@angular/material/tabs';
66
66
  import { MatToolbarModule } from '@angular/material/toolbar';
@@ -359,6 +359,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
359
359
  args: ['class.rolatech-title']
360
360
  }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], large: [{ type: i0.Input, args: [{ isSignal: true, alias: "large", required: false }] }] } });
361
361
 
362
+ class PageCollectionShellComponent {
363
+ eyebrow = input(null, ...(ngDevMode ? [{ debugName: "eyebrow" }] : []));
364
+ title = input.required(...(ngDevMode ? [{ debugName: "title" }] : []));
365
+ subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : []));
366
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PageCollectionShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
367
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: PageCollectionShellComponent, isStandalone: true, selector: "rolatech-page-collection-shell", inputs: { eyebrow: { classPropertyName: "eyebrow", publicName: "eyebrow", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section class=\"page-collection-shell xl:max-w-[1024px] 2xl:max-w-[1280px] m-auto\">\n <header class=\"page-collection-shell__header\">\n <div class=\"page-collection-shell__copy\">\n @if (eyebrow()) {\n <span class=\"page-collection-shell__eyebrow\">{{ eyebrow() }}</span>\n }\n\n <h1 class=\"page-collection-shell__title\">{{ title() }}</h1>\n\n @if (subtitle()) {\n <p class=\"page-collection-shell__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n\n <div class=\"page-collection-shell__meta\">\n <ng-content select=\"[page-shell-header-meta]\"></ng-content>\n </div>\n </header>\n\n <div class=\"page-collection-shell__body\">\n <ng-content></ng-content>\n </div>\n</section>\n", styles: [":host{display:block;padding:1rem}.page-collection-shell{display:flex;flex-direction:column;gap:1rem}.page-collection-shell__header{display:grid;gap:1rem;padding:1.25rem;border:1px solid var(--rt-border-color, rgba(15, 23, 42, .08));border-radius:1.5rem;background:var(--rt-base-background, #ffffff);box-shadow:0 20px 48px -42px color-mix(in srgb,var(--rt-text-primary) 22%,transparent)}.page-collection-shell__copy{display:flex;flex-direction:column;gap:.75rem}.page-collection-shell__eyebrow{display:inline-flex;align-self:flex-start;border-radius:9999px;padding:.38rem .72rem;background:color-mix(in srgb,var(--rt-brand-color) 12%,transparent);color:var(--rt-brand-color);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.page-collection-shell__title{margin:0;color:var(--rt-text-primary);font-size:clamp(1.8rem,2.8vw,2.7rem);line-height:1.05;font-weight:800}.page-collection-shell__subtitle{margin:0;color:var(--rt-text-secondary);line-height:1.7}.page-collection-shell__meta{display:flex;flex-direction:column;gap:.85rem}.page-collection-shell__body{display:flex;flex-direction:column;gap:1rem}@media(min-width:900px){.page-collection-shell__header{grid-template-columns:minmax(0,1.6fr) minmax(17rem,.95fr);align-items:start}}@media(min-width:768px){:host{padding:1.25rem}}\n"] });
368
+ }
369
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PageCollectionShellComponent, decorators: [{
370
+ type: Component,
371
+ args: [{ selector: 'rolatech-page-collection-shell', template: "<section class=\"page-collection-shell xl:max-w-[1024px] 2xl:max-w-[1280px] m-auto\">\n <header class=\"page-collection-shell__header\">\n <div class=\"page-collection-shell__copy\">\n @if (eyebrow()) {\n <span class=\"page-collection-shell__eyebrow\">{{ eyebrow() }}</span>\n }\n\n <h1 class=\"page-collection-shell__title\">{{ title() }}</h1>\n\n @if (subtitle()) {\n <p class=\"page-collection-shell__subtitle\">{{ subtitle() }}</p>\n }\n </div>\n\n <div class=\"page-collection-shell__meta\">\n <ng-content select=\"[page-shell-header-meta]\"></ng-content>\n </div>\n </header>\n\n <div class=\"page-collection-shell__body\">\n <ng-content></ng-content>\n </div>\n</section>\n", styles: [":host{display:block;padding:1rem}.page-collection-shell{display:flex;flex-direction:column;gap:1rem}.page-collection-shell__header{display:grid;gap:1rem;padding:1.25rem;border:1px solid var(--rt-border-color, rgba(15, 23, 42, .08));border-radius:1.5rem;background:var(--rt-base-background, #ffffff);box-shadow:0 20px 48px -42px color-mix(in srgb,var(--rt-text-primary) 22%,transparent)}.page-collection-shell__copy{display:flex;flex-direction:column;gap:.75rem}.page-collection-shell__eyebrow{display:inline-flex;align-self:flex-start;border-radius:9999px;padding:.38rem .72rem;background:color-mix(in srgb,var(--rt-brand-color) 12%,transparent);color:var(--rt-brand-color);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.page-collection-shell__title{margin:0;color:var(--rt-text-primary);font-size:clamp(1.8rem,2.8vw,2.7rem);line-height:1.05;font-weight:800}.page-collection-shell__subtitle{margin:0;color:var(--rt-text-secondary);line-height:1.7}.page-collection-shell__meta{display:flex;flex-direction:column;gap:.85rem}.page-collection-shell__body{display:flex;flex-direction:column;gap:1rem}@media(min-width:900px){.page-collection-shell__header{grid-template-columns:minmax(0,1.6fr) minmax(17rem,.95fr);align-items:start}}@media(min-width:768px){:host{padding:1.25rem}}\n"] }]
372
+ }], propDecorators: { eyebrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "eyebrow", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }] } });
373
+
362
374
  class ContainerComponent {
363
375
  hasId = 'rolatech-container';
364
376
  hasClass = true;
@@ -661,6 +673,7 @@ class DrawerComponent {
661
673
  platformId = inject(PLATFORM_ID);
662
674
  breakpointObserver = inject(BreakpointObserver);
663
675
  appLayout = inject(APP_LAYOUT);
676
+ router = inject(Router);
664
677
  guideEl = viewChild('guide', ...(ngDevMode ? [{ debugName: "guideEl" }] : []));
665
678
  content = viewChild('content', ...(ngDevMode ? [{ debugName: "content" }] : []));
666
679
  scrimEl = viewChild('scrim', ...(ngDevMode ? [{ debugName: "scrimEl" }] : []));
@@ -712,10 +725,22 @@ class DrawerComponent {
712
725
  isExternal(item) {
713
726
  return !!(item.external || item.openInView || item.openinView);
714
727
  }
728
+ isRouteActive(item, defaultActive) {
729
+ if (!defaultActive) {
730
+ return false;
731
+ }
732
+ const currentUrl = this.router.url.split('?')[0].split('#')[0];
733
+ const excludes = item.activeExcludes ?? [];
734
+ return !excludes.some((entry) => currentUrl === entry || currentUrl.startsWith(`${entry}/`));
735
+ }
715
736
  isNextItemChildren(index) {
716
737
  const items = this.links() ?? [];
717
738
  return !!items[index + 1]?.children?.length;
718
739
  }
740
+ isPreviousItemChildren(index) {
741
+ const items = this.links() ?? [];
742
+ return !!items[index - 1]?.children?.length;
743
+ }
719
744
  init(isMobile) {
720
745
  this._opened = !isMobile;
721
746
  this.isMobile = isMobile;
@@ -754,7 +779,7 @@ class DrawerComponent {
754
779
  }
755
780
  }
756
781
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
757
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DrawerComponent, isStandalone: true, selector: "rolatech-drawer", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "id": "rolatech-drawer", "style.transition-duration": "200ms", "ngSkipHydration": "" }, classAttribute: "rolatech-drawer" }, 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-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-drawer\">\n <div id=\"guide-wrapper\" class=\"rolatech-drawer\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\" class=\"rolatech-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 cursor-pointer\" routerLink=\"/\">\n <span class=\"text-(--rt-brand-color)\" i18n>{{ appLayout.title }}</span>\n <span i18n>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div id=\"guide-inner-content\" class=\"rolatech-drawer\">\n <div class=\"block p-3\">\n @for (item of links(); track $index; let i = $index) {\n @if (item.children) {\n <div\n class=\"children-group flex cursor-pointer overflow-hidden my-3 py-3 border-y border-(--rt-border-color)\"\n [class.mb-0]=\"isNextItemChildren(i)\"\n >\n <div class=\"w-full\">\n <div class=\"flex items-center h-10\">\n <span class=\"ml-3 text-md font-bold\" i18n>{{ labelOf(item) }}</span>\n </div>\n <div class=\"flex flex-col\">\n @for (child of item.children; track child) {\n <a\n id=\"endpoint\"\n class=\"flex hover:bg-(--rt-10-percent-layer) min-h-11 rt-guide-entry cursor-pointer\"\n [routerLink]=\"routerLinkOf(child)\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: child.exact === false ? false : true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (child.icon) {\n <rolatech-icon class=\"ml-3 cursor-pointer\" [filled]=\"routerLink.isActive\">{{ child.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span i18n>{{ labelOf(child) }}</span>\n <span class=\"text-sm text-(--rt-text-secondary)\" i18n>{{ subtitleOf(child) }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n </div>\n </div>\n </div>\n } @else {\n @if (isExternal(item)) {\n <a\n class=\"flex hover:bg-(--rt-10-percent-layer) min-h-11\"\n [href]=\"hrefOf(item)\"\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 items-center\">\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>{{ labelOf(item) }}</span>\n <span class=\"text-sm opacity-75 text-(--rt-text-secondary)\" i18n>{{ subtitleOf(item) }}</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 rolatech-drawer-button min-h-11 rounded-xl mb-2 cursor-pointer\"\n [routerLink]=\"routerLinkOf(item)\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\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 i18n>{{ labelOf(item) }}</span>\n <span class=\"text-sm\" i18n>{{ subtitleOf(item) }}</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 cursor-pointer\"\n [routerLink]=\"routerLinkOf(item)\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: item.exact === false ? false : true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3 cursor-pointer\" [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span i18n>{{ labelOf(item) }}</span>\n <span class=\"text-sm text-(--rt-text-secondary)\" i18n>{{ subtitleOf(item) }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n }\n }\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-drawer[persistent][position=top]{width:100%}rolatech-drawer[opened]{visibility:visible}rolatech-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-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-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=left]{right:auto}rolatech-drawer[persistent][position=right]{left:auto}rolatech-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-drawer{height:100%;display:flex;flex-direction:column}#contentContainer.rolatech-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-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-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-drawer:not([persistent]) #guide-spacer{display:none}rolatech-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}.rolatech-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.rolatech-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:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}.indicator-collapsed{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.indicator-expanded{transform:rotate(180deg)}.content-collapsed{max-height:0;visibility:hidden;transition:max-height 225ms cubic-bezier(.4,0,.2,1)}.content-expanded{max-height:1000px;visibility:visible}.children-group+.children-group{border-top:0;margin-top:0}\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 }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "ngmodule", type: MatDividerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
782
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DrawerComponent, isStandalone: true, selector: "rolatech-drawer", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "id": "rolatech-drawer", "style.transition-duration": "200ms", "ngSkipHydration": "" }, classAttribute: "rolatech-drawer" }, 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-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-drawer\">\n <div id=\"guide-wrapper\" class=\"rolatech-drawer\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\" class=\"rolatech-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 cursor-pointer\" routerLink=\"/\">\n <span class=\"text-(--rt-brand-color)\" i18n>{{ appLayout.title }}</span>\n <span i18n>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div id=\"guide-inner-content\" class=\"rolatech-drawer\">\n <div class=\"block p-3\">\n @for (item of links(); track $index; let i = $index) {\n @if (item.children) {\n <div\n class=\"children-group flex cursor-pointer overflow-hidden my-3 py-3 border-b border-(--rt-border-color)\"\n [class.border-t]=\"!isPreviousItemChildren(i)\"\n [class.mt-0]=\"isPreviousItemChildren(i)\"\n [class.mb-0]=\"isNextItemChildren(i)\"\n >\n <div class=\"w-full\">\n <div class=\"flex items-center h-10\">\n <span class=\"ml-3 text-md font-bold\" i18n>{{ labelOf(item) }}</span>\n </div>\n <div class=\"flex flex-col\">\n @for (child of item.children; track child) {\n <a\n id=\"endpoint\"\n class=\"flex hover:bg-(--rt-10-percent-layer) min-h-11 rt-guide-entry cursor-pointer\"\n [class.drawer-active]=\"isRouteActive(child, routerLink.isActive)\"\n [routerLink]=\"routerLinkOf(child)\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive\n [routerLinkActiveOptions]=\"{ exact: child.exact === false ? false : true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (child.icon) {\n <rolatech-icon class=\"ml-3 cursor-pointer\" [filled]=\"isRouteActive(child, routerLink.isActive)\">{{\n child.icon\n }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span i18n>{{ labelOf(child) }}</span>\n <span class=\"text-sm text-(--rt-text-secondary)\" i18n>{{ subtitleOf(child) }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n </div>\n </div>\n </div>\n } @else {\n @if (isExternal(item)) {\n <a\n class=\"flex hover:bg-(--rt-10-percent-layer) min-h-11\"\n [href]=\"hrefOf(item)\"\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 items-center\">\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>{{ labelOf(item) }}</span>\n <span class=\"text-sm opacity-75 text-(--rt-text-secondary)\" i18n>{{ subtitleOf(item) }}</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 rolatech-drawer-button min-h-11 rounded-xl mb-2 cursor-pointer\"\n [routerLink]=\"routerLinkOf(item)\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\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 i18n>{{ labelOf(item) }}</span>\n <span class=\"text-sm\" i18n>{{ subtitleOf(item) }}</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 cursor-pointer\"\n [class.drawer-active]=\"isRouteActive(item, routerLink.isActive)\"\n [routerLink]=\"routerLinkOf(item)\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive\n [routerLinkActiveOptions]=\"{ exact: item.exact === false ? false : true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3 cursor-pointer\" [filled]=\"isRouteActive(item, routerLink.isActive)\">{{\n item.icon\n }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span i18n>{{ labelOf(item) }}</span>\n <span class=\"text-sm text-(--rt-text-secondary)\" i18n>{{ subtitleOf(item) }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n }\n }\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-drawer[persistent][position=top]{width:100%}rolatech-drawer[opened]{visibility:visible}rolatech-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-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-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=left]{right:auto}rolatech-drawer[persistent][position=right]{left:auto}rolatech-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-drawer{height:100%;display:flex;flex-direction:column}#contentContainer.rolatech-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-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-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-drawer:not([persistent]) #guide-spacer{display:none}rolatech-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}.rolatech-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.rolatech-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:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}.indicator-collapsed{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.indicator-expanded{transform:rotate(180deg)}.content-collapsed{max-height:0;visibility:hidden;transition:max-height 225ms cubic-bezier(.4,0,.2,1)}.content-expanded{max-height:1000px;visibility: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: IconComponent, selector: "rolatech-icon", inputs: ["filled"] }, { kind: "component", type: MenuIconComponent, selector: "rolatech-menu-icon" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "ngmodule", type: MatDividerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
758
783
  }
759
784
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DrawerComponent, decorators: [{
760
785
  type: Component,
@@ -772,7 +797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
772
797
  class: 'rolatech-drawer',
773
798
  'style.transition-duration': '200ms',
774
799
  ngSkipHydration: '',
775
- }, template: "<div id=\"scrim\" #scrim class=\"rolatech-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-drawer\">\n <div id=\"guide-wrapper\" class=\"rolatech-drawer\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\" class=\"rolatech-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 cursor-pointer\" routerLink=\"/\">\n <span class=\"text-(--rt-brand-color)\" i18n>{{ appLayout.title }}</span>\n <span i18n>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div id=\"guide-inner-content\" class=\"rolatech-drawer\">\n <div class=\"block p-3\">\n @for (item of links(); track $index; let i = $index) {\n @if (item.children) {\n <div\n class=\"children-group flex cursor-pointer overflow-hidden my-3 py-3 border-y border-(--rt-border-color)\"\n [class.mb-0]=\"isNextItemChildren(i)\"\n >\n <div class=\"w-full\">\n <div class=\"flex items-center h-10\">\n <span class=\"ml-3 text-md font-bold\" i18n>{{ labelOf(item) }}</span>\n </div>\n <div class=\"flex flex-col\">\n @for (child of item.children; track child) {\n <a\n id=\"endpoint\"\n class=\"flex hover:bg-(--rt-10-percent-layer) min-h-11 rt-guide-entry cursor-pointer\"\n [routerLink]=\"routerLinkOf(child)\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: child.exact === false ? false : true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (child.icon) {\n <rolatech-icon class=\"ml-3 cursor-pointer\" [filled]=\"routerLink.isActive\">{{ child.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span i18n>{{ labelOf(child) }}</span>\n <span class=\"text-sm text-(--rt-text-secondary)\" i18n>{{ subtitleOf(child) }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n </div>\n </div>\n </div>\n } @else {\n @if (isExternal(item)) {\n <a\n class=\"flex hover:bg-(--rt-10-percent-layer) min-h-11\"\n [href]=\"hrefOf(item)\"\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 items-center\">\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>{{ labelOf(item) }}</span>\n <span class=\"text-sm opacity-75 text-(--rt-text-secondary)\" i18n>{{ subtitleOf(item) }}</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 rolatech-drawer-button min-h-11 rounded-xl mb-2 cursor-pointer\"\n [routerLink]=\"routerLinkOf(item)\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\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 i18n>{{ labelOf(item) }}</span>\n <span class=\"text-sm\" i18n>{{ subtitleOf(item) }}</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 cursor-pointer\"\n [routerLink]=\"routerLinkOf(item)\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive=\"drawer-active\"\n [routerLinkActiveOptions]=\"{ exact: item.exact === false ? false : true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3 cursor-pointer\" [filled]=\"routerLink.isActive\">{{ item.icon }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span i18n>{{ labelOf(item) }}</span>\n <span class=\"text-sm text-(--rt-text-secondary)\" i18n>{{ subtitleOf(item) }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n }\n }\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-drawer[persistent][position=top]{width:100%}rolatech-drawer[opened]{visibility:visible}rolatech-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-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-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=left]{right:auto}rolatech-drawer[persistent][position=right]{left:auto}rolatech-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-drawer{height:100%;display:flex;flex-direction:column}#contentContainer.rolatech-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-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-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-drawer:not([persistent]) #guide-spacer{display:none}rolatech-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}.rolatech-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.rolatech-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:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}.indicator-collapsed{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.indicator-expanded{transform:rotate(180deg)}.content-collapsed{max-height:0;visibility:hidden;transition:max-height 225ms cubic-bezier(.4,0,.2,1)}.content-expanded{max-height:1000px;visibility:visible}.children-group+.children-group{border-top:0;margin-top:0}\n"] }]
800
+ }, template: "<div id=\"scrim\" #scrim class=\"rolatech-drawer\" (click)=\"close()\"></div>\n<div id=\"contentContainer\" #content class=\"rolatech-drawer\">\n <div id=\"guide-wrapper\" class=\"rolatech-drawer\">\n <div id=\"guide-spacer\"></div>\n <div id=\"guide-content\" class=\"rolatech-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 cursor-pointer\" routerLink=\"/\">\n <span class=\"text-(--rt-brand-color)\" i18n>{{ appLayout.title }}</span>\n <span i18n>{{ appLayout.subtitle }}</span>\n </div>\n </div>\n <div id=\"guide-inner-content\" class=\"rolatech-drawer\">\n <div class=\"block p-3\">\n @for (item of links(); track $index; let i = $index) {\n @if (item.children) {\n <div\n class=\"children-group flex cursor-pointer overflow-hidden my-3 py-3 border-b border-(--rt-border-color)\"\n [class.border-t]=\"!isPreviousItemChildren(i)\"\n [class.mt-0]=\"isPreviousItemChildren(i)\"\n [class.mb-0]=\"isNextItemChildren(i)\"\n >\n <div class=\"w-full\">\n <div class=\"flex items-center h-10\">\n <span class=\"ml-3 text-md font-bold\" i18n>{{ labelOf(item) }}</span>\n </div>\n <div class=\"flex flex-col\">\n @for (child of item.children; track child) {\n <a\n id=\"endpoint\"\n class=\"flex hover:bg-(--rt-10-percent-layer) min-h-11 rt-guide-entry cursor-pointer\"\n [class.drawer-active]=\"isRouteActive(child, routerLink.isActive)\"\n [routerLink]=\"routerLinkOf(child)\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive\n [routerLinkActiveOptions]=\"{ exact: child.exact === false ? false : true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (child.icon) {\n <rolatech-icon class=\"ml-3 cursor-pointer\" [filled]=\"isRouteActive(child, routerLink.isActive)\">{{\n child.icon\n }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span i18n>{{ labelOf(child) }}</span>\n <span class=\"text-sm text-(--rt-text-secondary)\" i18n>{{ subtitleOf(child) }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n </div>\n </div>\n </div>\n } @else {\n @if (isExternal(item)) {\n <a\n class=\"flex hover:bg-(--rt-10-percent-layer) min-h-11\"\n [href]=\"hrefOf(item)\"\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 items-center\">\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>{{ labelOf(item) }}</span>\n <span class=\"text-sm opacity-75 text-(--rt-text-secondary)\" i18n>{{ subtitleOf(item) }}</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 rolatech-drawer-button min-h-11 rounded-xl mb-2 cursor-pointer\"\n [routerLink]=\"routerLinkOf(item)\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\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 i18n>{{ labelOf(item) }}</span>\n <span class=\"text-sm\" i18n>{{ subtitleOf(item) }}</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 cursor-pointer\"\n [class.drawer-active]=\"isRouteActive(item, routerLink.isActive)\"\n [routerLink]=\"routerLinkOf(item)\"\n (click)=\"this.isPersistent ? '' : this.close()\"\n routerLinkActive\n [routerLinkActiveOptions]=\"{ exact: item.exact === false ? false : true }\"\n #routerLink=\"routerLinkActive\"\n >\n <div class=\"flex justify-between items-center w-full\">\n <div class=\"flex justify-start items-center\">\n @if (item.icon) {\n <rolatech-icon class=\"ml-3 cursor-pointer\" [filled]=\"isRouteActive(item, routerLink.isActive)\">{{\n item.icon\n }}</rolatech-icon>\n }\n <div class=\"flex flex-col ml-3\">\n <span i18n>{{ labelOf(item) }}</span>\n <span class=\"text-sm text-(--rt-text-secondary)\" i18n>{{ subtitleOf(item) }}</span>\n </div>\n </div>\n </div>\n </a>\n }\n }\n }\n }\n </div>\n </div>\n </div>\n </div>\n</div>\n", styles: ["rolatech-drawer{position:fixed;z-index:1;inset:-120px 0;visibility:hidden;transition-property:visibility;transition-duration:.2s;touch-action:pan-y}rolatech-drawer[persistent]{width:var(--rt-drawer-width, 256px)}rolatech-drawer[persistent][position=top]{width:100%}rolatech-drawer[opened]{visibility:visible}rolatech-drawer[position=top] #contentContainer{left:0;right:0;width:100%;height:var(--rt-topbar-height, 56px);transform:translate3d(0,-100%,0)}rolatech-drawer[position=top] #contentContainer #guide-inner-content{height:56px}rolatech-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-drawer[position=bottom] #contentContainer{left:0;right:0;transform:translate3d(0,100%,0)}rolatech-drawer[position=left] #contentContainer{left:0;transform:translate3d(-100%,0,0)}rolatech-drawer[position=right] #contentContainer{right:0;transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=left]{right:auto}rolatech-drawer[persistent][position=right]{left:auto}rolatech-drawer[persistent][position=top] #contentContainer{transform:translate3d(0,-100%,0)}rolatech-drawer[persistent][position=left] #contentContainer{transform:translate3d(-100%,0,0)}rolatech-drawer[persistent][position=right] #contentContainer{transform:translate3d(100%,0,0)}rolatech-drawer[persistent][position=top] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=left] #contentContainer[opened]{transform:translateZ(0)}rolatech-drawer[persistent][position=right] #contentContainer[opened]{transform:translateZ(0)}[hidden]{display:none!important}#guide-wrapper.rolatech-drawer{height:100%;display:flex;flex-direction:column}#contentContainer.rolatech-drawer{position:absolute;top:0;bottom:0;width:var(--rt-drawer-width, 256px);padding:var(--rt-drawer-content-padding, 120px 0);transition-property:transform;color:var(--rt-drawer-content-container-color, #000);background-color:var(--rt-drawer-content-container-background-color, #fff);transition-duration:.2s}#contentContainer.rolatech-drawer[opened]{transform:translateZ(0)}#guide-content.rolatech-drawer{background:var(--rt-base-background);flex:1;flex-basis:.000000001px;display:flex;flex-direction:column}#guide-inner-content.rolatech-drawer{overflow:hidden;flex:1;flex-basis:.000000001px;overflow-y:auto;scrollbar-color:transparent transparent;scrollbar-width:thin}#scrim.rolatech-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-drawer{opacity:1}#guide-spacer{margin-top:var(--ytd-masthead-height, 56px)}rolatech-drawer:not([persistent]) #guide-spacer{display:none}rolatech-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}.rolatech-drawer-button{background-color:var(--rt-brand-color, #000);color:var(--rt-brand-color-inverse, #fff)}.rolatech-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:hover{background-color:var(--rt-drawer-active-background-color);border-radius:10px}.indicator-collapsed{transform:rotate(0);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.indicator-expanded{transform:rotate(180deg)}.content-collapsed{max-height:0;visibility:hidden;transition:max-height 225ms cubic-bezier(.4,0,.2,1)}.content-expanded{max-height:1000px;visibility:visible}\n"] }]
776
801
  }], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], guideEl: [{ type: i0.ViewChild, args: ['guide', { isSignal: true }] }], content: [{ type: i0.ViewChild, args: ['content', { isSignal: true }] }], scrimEl: [{ type: i0.ViewChild, args: ['scrim', { isSignal: true }] }], headerEl: [{ type: i0.ViewChild, args: ['header', { isSignal: true }] }] } });
777
802
 
778
803
  class MiniGuideComponent {
@@ -936,6 +961,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
936
961
  }, template: "<ng-content select=\"rolatech-topbar\"></ng-content>\n<ng-content select=\"rolatech-drawer\"></ng-content>\n<ng-content select=\"rolatech-mini-guide\"></ng-content>\n<ng-content select=\"rolatech-page\"></ng-content>\n<ng-content select=\"rolatech-footer\"></ng-content>\n", styles: ["rolatech-layout{--rt-persistent-guide-width: 256px;--rt-mini-guide-width: 72px;display:flex;flex-direction:column;width:100%;height:100dvh;position:relative;background-color:var(--rt-layout-background-color, #fff);color:var(--rt-layout-color, #000)}rolatech-layout rolatech-drawer[persistent][opened][position=top]~rolatech-page{margin-top:56px}rolatech-layout rolatech-drawer[persistent][opened][position=left]~rolatech-page{margin-left:var(--rt-persistent-guide-width)}rolatech-layout rolatech-drawer[persistent][opened][position=right]~rolatech-page{margin-right:var(--rt-persistent-guide-width)}rolatech-layout rolatech-mini-guide[mini-guide-visible]~rolatech-page{margin-left:var(--rt-mini-guide-width)}rolatech-page{display:block;margin-top:56px;flex:1 1 auto}rolatech-page[mini-guide-visible] .content{margin-left:72px}\n"] }]
937
962
  }], ctorParameters: () => [], propDecorators: { topbar: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TopbarComponent), { isSignal: true }] }], drawer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => DrawerComponent), { isSignal: true }] }], page: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AppPageComponent), { isSignal: true }] }], guide: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MiniGuideComponent), { isSignal: true }] }] } });
938
963
 
964
+ class AppShellComponent {
965
+ links = input([], ...(ngDevMode ? [{ debugName: "links" }] : []));
966
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AppShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
967
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: AppShellComponent, isStandalone: true, selector: "rolatech-app-shell", inputs: { links: { classPropertyName: "links", publicName: "links", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
968
+ <rolatech-layout>
969
+ <rolatech-topbar>
970
+ <ng-content select="[shell-topbar]"></ng-content>
971
+ </rolatech-topbar>
972
+
973
+ <rolatech-drawer [links]="links()"></rolatech-drawer>
974
+
975
+ <rolatech-page>
976
+ <ng-content></ng-content>
977
+ </rolatech-page>
978
+
979
+ <ng-content select="[shell-footer]"></ng-content>
980
+ </rolatech-layout>
981
+ `, isInline: true, dependencies: [{ kind: "component", type: LayoutComponent, selector: "rolatech-layout" }, { kind: "component", type: TopbarComponent, selector: "rolatech-topbar", inputs: ["link"] }, { kind: "component", type: DrawerComponent, selector: "rolatech-drawer", inputs: ["links", "position", "opened"] }, { kind: "component", type: AppPageComponent, selector: "rolatech-page" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
982
+ }
983
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: AppShellComponent, decorators: [{
984
+ type: Component,
985
+ args: [{
986
+ selector: 'rolatech-app-shell',
987
+ imports: [LayoutComponent, TopbarComponent, DrawerComponent, AppPageComponent],
988
+ template: `
989
+ <rolatech-layout>
990
+ <rolatech-topbar>
991
+ <ng-content select="[shell-topbar]"></ng-content>
992
+ </rolatech-topbar>
993
+
994
+ <rolatech-drawer [links]="links()"></rolatech-drawer>
995
+
996
+ <rolatech-page>
997
+ <ng-content></ng-content>
998
+ </rolatech-page>
999
+
1000
+ <ng-content select="[shell-footer]"></ng-content>
1001
+ </rolatech-layout>
1002
+ `,
1003
+ changeDetection: ChangeDetectionStrategy.OnPush,
1004
+ }]
1005
+ }], propDecorators: { links: [{ type: i0.Input, args: [{ isSignal: true, alias: "links", required: false }] }] } });
1006
+
939
1007
  class FooterComponent {
940
1008
  hostId = 'rolatech-footer';
941
1009
  hasClass = true;
@@ -945,11 +1013,11 @@ class FooterComponent {
945
1013
  fTitle = computed(() => this.title() || this.config.name, ...(ngDevMode ? [{ debugName: "fTitle" }] : []));
946
1014
  fCopyright = computed(() => this.copyright() || this.config.name, ...(ngDevMode ? [{ debugName: "fCopyright" }] : []));
947
1015
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
948
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: FooterComponent, isStandalone: true, selector: "rolatech-footer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-footer": "this.hasClass" } }, ngImport: i0, template: "<div class=\"bg-(--rt-base-background) flex flex-col justify-between px-5 md:px-16 py-6\">\n <div class=\"flex flex-col md:flex-row md:gap-10 gap-3 py-3\">\n <ng-content></ng-content>\n </div>\n <div class=\"flex justify-between items-end\">\n <div class=\"cursor-pointer\">\n <a href=\"/\" target=\"_blank\" class=\"text-lg font-bold\">{{ fTitle() }}</a>\n </div>\n <span class=\"text-sm\">\u00A9{{ fCopyright() }}</span>\n </div>\n</div>\n", styles: ["rolatech-footer{width:100%;display:var(--rt-footer-display, block)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
1016
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: FooterComponent, isStandalone: true, selector: "rolatech-footer", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, copyright: { classPropertyName: "copyright", publicName: "copyright", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hostId", "class.rolatech-footer": "this.hasClass" } }, ngImport: i0, template: "<div class=\"bg-(--rt-base-background) flex flex-col justify-between px-5 md:px-16 py-6 gap-4\">\n <div class=\"order-2 flex flex-col gap-3 md:flex-row md:items-end md:justify-between\">\n <div class=\"flex flex-col gap-3 md:flex-row md:items-end md:gap-4\">\n <div class=\"cursor-pointer\">\n <a href=\"/\" target=\"_blank\" class=\"text-lg font-bold\">{{ fTitle() }}</a>\n </div>\n <ng-content select=\"[footer-left]\"></ng-content>\n </div>\n\n <div class=\"flex flex-col gap-3 md:flex-row md:items-center md:justify-end md:gap-4\">\n <ng-content select=\"[footer-right]\"></ng-content>\n <span class=\"text-sm\">\u00A9{{ fCopyright() }}</span>\n </div>\n </div>\n\n <div class=\"order-1 flex flex-col gap-3 py-3 md:flex-row md:gap-10\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["rolatech-footer{width:100%;display:var(--rt-footer-display, block)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], encapsulation: i0.ViewEncapsulation.None });
949
1017
  }
950
1018
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FooterComponent, decorators: [{
951
1019
  type: Component,
952
- args: [{ selector: 'rolatech-footer', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"bg-(--rt-base-background) flex flex-col justify-between px-5 md:px-16 py-6\">\n <div class=\"flex flex-col md:flex-row md:gap-10 gap-3 py-3\">\n <ng-content></ng-content>\n </div>\n <div class=\"flex justify-between items-end\">\n <div class=\"cursor-pointer\">\n <a href=\"/\" target=\"_blank\" class=\"text-lg font-bold\">{{ fTitle() }}</a>\n </div>\n <span class=\"text-sm\">\u00A9{{ fCopyright() }}</span>\n </div>\n</div>\n", styles: ["rolatech-footer{width:100%;display:var(--rt-footer-display, block)}\n"] }]
1020
+ args: [{ selector: 'rolatech-footer', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"bg-(--rt-base-background) flex flex-col justify-between px-5 md:px-16 py-6 gap-4\">\n <div class=\"order-2 flex flex-col gap-3 md:flex-row md:items-end md:justify-between\">\n <div class=\"flex flex-col gap-3 md:flex-row md:items-end md:gap-4\">\n <div class=\"cursor-pointer\">\n <a href=\"/\" target=\"_blank\" class=\"text-lg font-bold\">{{ fTitle() }}</a>\n </div>\n <ng-content select=\"[footer-left]\"></ng-content>\n </div>\n\n <div class=\"flex flex-col gap-3 md:flex-row md:items-center md:justify-end md:gap-4\">\n <ng-content select=\"[footer-right]\"></ng-content>\n <span class=\"text-sm\">\u00A9{{ fCopyright() }}</span>\n </div>\n </div>\n\n <div class=\"order-1 flex flex-col gap-3 py-3 md:flex-row md:gap-10\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["rolatech-footer{width:100%;display:var(--rt-footer-display, block)}\n"] }]
953
1021
  }], propDecorators: { hostId: [{
954
1022
  type: HostBinding,
955
1023
  args: ['id']
@@ -958,6 +1026,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
958
1026
  args: ['class.rolatech-footer']
959
1027
  }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], copyright: [{ type: i0.Input, args: [{ isSignal: true, alias: "copyright", required: false }] }] } });
960
1028
 
1029
+ class FooterLanguageSwitcherComponent {
1030
+ language = inject(LanguageService);
1031
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FooterLanguageSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1032
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FooterLanguageSwitcherComponent, isStandalone: true, selector: "rolatech-footer-language-switcher", ngImport: i0, template: "<button\n type=\"button\"\n class=\"rt-footer-language-trigger\"\n [matMenuTriggerFor]=\"languageMenu\"\n aria-haspopup=\"menu\"\n aria-label=\"Choose language\"\n>\n <span class=\"rt-footer-language-trigger__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n <path\n d=\"M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2Zm6.93 9h-3.03a15.6 15.6 0 0 0-1.22-5.05A8.04 8.04 0 0 1 18.93 11Zm-6.93 9c-.86 0-2.35-2.15-3.02-5h6.04c-.67 2.85-2.16 5-3.02 5Zm-3.38-7a13.44 13.44 0 0 1 0-2h6.76a13.44 13.44 0 0 1 0 2H8.62Zm-4.55-2h3.03c.14-1.79.56-3.5 1.22-5.05A8.04 8.04 0 0 0 4.07 11Zm3.03 2H4.07a8.04 8.04 0 0 0 4.25 5.05A15.6 15.6 0 0 1 7.1 13Zm7.58 5.05A15.6 15.6 0 0 0 15.9 13h3.03a8.04 8.04 0 0 1-4.25 5.05ZM12 4c.86 0 2.35 2.15 3.02 5H8.98C9.65 6.15 11.14 4 12 4Z\"\n ></path>\n </svg>\n </span>\n <span class=\"rt-footer-language-trigger__label\">{{ language.currentOption().label }}</span>\n <span class=\"rt-footer-language-trigger__chevron\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n <path d=\"M7 10l5 5 5-5z\"></path>\n </svg>\n </span>\n</button>\n\n<mat-menu #languageMenu=\"matMenu\" yPosition=\"above\" xPosition=\"after\">\n @for (option of language.options; track option.code) {\n <a\n mat-menu-item\n class=\"rt-footer-language-menu__item\"\n [class.is-active]=\"language.isActive(option.code)\"\n [href]=\"language.hrefFor(option.code)\"\n [attr.aria-current]=\"language.isActive(option.code) ? 'page' : null\"\n (click)=\"language.set(option.code)\"\n >\n <span>{{ option.label }}</span>\n @if (language.isActive(option.code)) {\n <span class=\"rt-footer-language-menu__check\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n <path d=\"M9 16.17 4.83 12 3.41 13.41 9 19l12-12-1.41-1.41z\"></path>\n </svg>\n </span>\n }\n </a>\n }\n</mat-menu>\n", styles: ["rolatech-footer-language-switcher{display:inline-flex}.rt-footer-language-trigger{display:inline-flex;align-items:center;gap:.65rem;padding:.6rem .95rem;border:1px solid var(--rt-border-color, rgba(0, 0, 0, .12));border-radius:999px;background:var(--rt-raised-background, #fff);color:var(--rt-text-color, inherit);cursor:pointer;font-size:.875rem;line-height:1;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.rt-footer-language-trigger:hover{background:var(--rt-10-percent-layer, rgba(0, 0, 0, .06));border-color:var(--rt-brand-color, rgba(0, 0, 0, .3))}.rt-footer-language-trigger__icon,.rt-footer-language-trigger__chevron,.rt-footer-language-menu__check{display:inline-flex;width:1rem;height:1rem;flex:0 0 auto}.rt-footer-language-trigger__icon svg,.rt-footer-language-trigger__chevron svg,.rt-footer-language-menu__check svg{width:100%;height:100%;fill:currentColor}.rt-footer-language-trigger__label{font-weight:500}.rt-footer-language-menu__item{min-width:10rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.rt-footer-language-menu__item.is-active{color:var(--rt-brand-color, #111827);font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], encapsulation: i0.ViewEncapsulation.None });
1033
+ }
1034
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FooterLanguageSwitcherComponent, decorators: [{
1035
+ type: Component,
1036
+ args: [{ selector: 'rolatech-footer-language-switcher', imports: [CommonModule, MatMenuModule], encapsulation: ViewEncapsulation.None, template: "<button\n type=\"button\"\n class=\"rt-footer-language-trigger\"\n [matMenuTriggerFor]=\"languageMenu\"\n aria-haspopup=\"menu\"\n aria-label=\"Choose language\"\n>\n <span class=\"rt-footer-language-trigger__icon\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n <path\n d=\"M12 2c5.52 0 10 4.48 10 10s-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2Zm6.93 9h-3.03a15.6 15.6 0 0 0-1.22-5.05A8.04 8.04 0 0 1 18.93 11Zm-6.93 9c-.86 0-2.35-2.15-3.02-5h6.04c-.67 2.85-2.16 5-3.02 5Zm-3.38-7a13.44 13.44 0 0 1 0-2h6.76a13.44 13.44 0 0 1 0 2H8.62Zm-4.55-2h3.03c.14-1.79.56-3.5 1.22-5.05A8.04 8.04 0 0 0 4.07 11Zm3.03 2H4.07a8.04 8.04 0 0 0 4.25 5.05A15.6 15.6 0 0 1 7.1 13Zm7.58 5.05A15.6 15.6 0 0 0 15.9 13h3.03a8.04 8.04 0 0 1-4.25 5.05ZM12 4c.86 0 2.35 2.15 3.02 5H8.98C9.65 6.15 11.14 4 12 4Z\"\n ></path>\n </svg>\n </span>\n <span class=\"rt-footer-language-trigger__label\">{{ language.currentOption().label }}</span>\n <span class=\"rt-footer-language-trigger__chevron\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n <path d=\"M7 10l5 5 5-5z\"></path>\n </svg>\n </span>\n</button>\n\n<mat-menu #languageMenu=\"matMenu\" yPosition=\"above\" xPosition=\"after\">\n @for (option of language.options; track option.code) {\n <a\n mat-menu-item\n class=\"rt-footer-language-menu__item\"\n [class.is-active]=\"language.isActive(option.code)\"\n [href]=\"language.hrefFor(option.code)\"\n [attr.aria-current]=\"language.isActive(option.code) ? 'page' : null\"\n (click)=\"language.set(option.code)\"\n >\n <span>{{ option.label }}</span>\n @if (language.isActive(option.code)) {\n <span class=\"rt-footer-language-menu__check\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 24 24\" focusable=\"false\">\n <path d=\"M9 16.17 4.83 12 3.41 13.41 9 19l12-12-1.41-1.41z\"></path>\n </svg>\n </span>\n }\n </a>\n }\n</mat-menu>\n", styles: ["rolatech-footer-language-switcher{display:inline-flex}.rt-footer-language-trigger{display:inline-flex;align-items:center;gap:.65rem;padding:.6rem .95rem;border:1px solid var(--rt-border-color, rgba(0, 0, 0, .12));border-radius:999px;background:var(--rt-raised-background, #fff);color:var(--rt-text-color, inherit);cursor:pointer;font-size:.875rem;line-height:1;white-space:nowrap;transition:background-color .2s ease,border-color .2s ease,color .2s ease}.rt-footer-language-trigger:hover{background:var(--rt-10-percent-layer, rgba(0, 0, 0, .06));border-color:var(--rt-brand-color, rgba(0, 0, 0, .3))}.rt-footer-language-trigger__icon,.rt-footer-language-trigger__chevron,.rt-footer-language-menu__check{display:inline-flex;width:1rem;height:1rem;flex:0 0 auto}.rt-footer-language-trigger__icon svg,.rt-footer-language-trigger__chevron svg,.rt-footer-language-menu__check svg{width:100%;height:100%;fill:currentColor}.rt-footer-language-trigger__label{font-weight:500}.rt-footer-language-menu__item{min-width:10rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.rt-footer-language-menu__item.is-active{color:var(--rt-brand-color, #111827);font-weight:600}\n"] }]
1037
+ }] });
1038
+
961
1039
  class ConsoleLayoutComponent {
962
1040
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ConsoleLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
963
1041
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: ConsoleLayoutComponent, isStandalone: true, selector: "rolatech-console-layout", ngImport: i0, template: "<p>console-layout works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
@@ -976,7 +1054,7 @@ class TopbarAvatarMenuComponent {
976
1054
  this.menu().focusFirstItem('mouse');
977
1055
  }
978
1056
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TopbarAvatarMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
979
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: TopbarAvatarMenuComponent, isStandalone: true, selector: "rolatech-topbar-avatar-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex\">\n <a\n class=\"flex justify-center items-center rounded-full overflow-hidden cursor-pointer hover:outline-(--rt-raised-background) outline outline-transparent outline-4\"\n [matMenuTriggerFor]=\"menu()\"\n (click)=\"openMenu()\"\n >\n <div class=\"bg-(--rt-brand-color) w-9 h-9\">\n @if (avatar()) {\n <img class=\"w-9 h-9 object-cover\" [src]=\"avatar()\" alt />\n }\n </div>\n </a>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i2$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
1057
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: TopbarAvatarMenuComponent, isStandalone: true, selector: "rolatech-topbar-avatar-menu", inputs: { menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null }, avatar: { classPropertyName: "avatar", publicName: "avatar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex\">\n <a\n class=\"flex justify-center items-center rounded-full overflow-hidden cursor-pointer hover:outline-(--rt-raised-background) outline outline-transparent outline-4\"\n [matMenuTriggerFor]=\"menu()\"\n (click)=\"openMenu()\"\n >\n <div class=\"bg-(--rt-brand-color) w-9 h-9\">\n @if (avatar()) {\n <img class=\"w-9 h-9 object-cover\" [src]=\"avatar()\" alt />\n }\n </div>\n </a>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
980
1058
  }
981
1059
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TopbarAvatarMenuComponent, decorators: [{
982
1060
  type: Component,
@@ -1019,7 +1097,7 @@ class MediaPreviewDialogComponent {
1019
1097
  this.nextDisabled = this.selected === this.data.media.length - 1;
1020
1098
  }
1021
1099
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MediaPreviewDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1022
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MediaPreviewDialogComponent, isStandalone: true, selector: "rolatech-media-preview-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n <div class=\"h-16 flex justify-between items-center px-5\">\n @if (data.title) {\n <div class=\"text-md font-medium\">{{ data.title }}</div>\n }\n <div class=\"cursor-pointer\" (click)=\"close()\">\n <mat-icon fontIcon=\"close\"></mat-icon>\n </div>\n </div>\n <mat-divider></mat-divider>\n <div class=\"flex-1 overflow-hidden overflow-y-auto\">\n <div class=\"p-3 flex justify-center items-center\">\n <img class=\"object-cover\" [src]=\"data.media[selected].url\" alt />\n </div>\n </div>\n <mat-divider></mat-divider>\n <div class=\"h-16 flex justify-between items-center px-5\">\n <button mat-flat-button [disabled]=\"prevDisabled\" (click)=\"prev()\">Prev</button>\n <div>{{ selected + 1 }} / {{ data.media.length }}</div>\n <button mat-flat-button [disabled]=\"nextDisabled\" (click)=\"next()\">Next</button>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
1100
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MediaPreviewDialogComponent, isStandalone: true, selector: "rolatech-media-preview-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n <div class=\"h-16 flex justify-between items-center px-5\">\n @if (data.title) {\n <div class=\"text-md font-medium\">{{ data.title }}</div>\n }\n <div class=\"cursor-pointer\" (click)=\"close()\">\n <mat-icon fontIcon=\"close\"></mat-icon>\n </div>\n </div>\n <mat-divider></mat-divider>\n <div class=\"flex-1 overflow-hidden overflow-y-auto\">\n <div class=\"p-3 flex justify-center items-center\">\n <img class=\"object-cover\" [src]=\"data.media[selected].url\" alt />\n </div>\n </div>\n <mat-divider></mat-divider>\n <div class=\"h-16 flex justify-between items-center px-5\">\n <button mat-flat-button [disabled]=\"prevDisabled\" (click)=\"prev()\">Prev</button>\n <div>{{ selected + 1 }} / {{ data.media.length }}</div>\n <button mat-flat-button [disabled]=\"nextDisabled\" (click)=\"next()\">Next</button>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] });
1023
1101
  }
1024
1102
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MediaPreviewDialogComponent, decorators: [{
1025
1103
  type: Component,
@@ -1096,7 +1174,7 @@ class MediaUploadComponent {
1096
1174
  }
1097
1175
  }
1098
1176
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MediaUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1099
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MediaUploadComponent, isStandalone: true, selector: "rolatech-media-upload", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", upload: "upload" }, ngImport: i0, template: "<div class=\"bg-(--rt-raised-background) rounded p-6 min-h-[320px] flex items-center justify-center\">\n @if (isUploading()) {\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"p-3\">\n <mat-icon>upload</mat-icon>\n </div>\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"font-lg font-bold py-3\">{{ title() }}</div>\n <div class=\"font-sm text-(--rt-text-secondary)\">{{ subtitle() }}</div>\n <div class=\"font-sm text-(--rt-text-secondary)\">{{ description() }}</div>\n </div>\n <div class=\"py-2\">\n <input style=\"display: none\" type=\"file\" (change)=\"onUpload($event)\" #fileInput />\n <button mat-flat-button (click)=\"fileInput.click()\" i18n>Upload</button>\n </div>\n </div>\n } @else {\n <rolatech-spinner title=\"Uploading\"></rolatech-spinner>\n }\n</div>\n<div class=\"flex flex-row\">\n @for (media of media; track $index) {\n <div (click)=\"onMediaClick($index)\" class=\"inline-flex flex-row mt-3 mr-3 cursor-pointer rounded-md\">\n <img class=\"rounded-md aspect-video object-cover w-32\" [src]=\"media.url\" alt />\n </div>\n }\n</div>\n", styles: [".mat-icon{transform:scale(2)}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i1$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }] });
1177
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MediaUploadComponent, isStandalone: true, selector: "rolatech-media-upload", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, isUploading: { classPropertyName: "isUploading", publicName: "isUploading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", upload: "upload" }, ngImport: i0, template: "<div class=\"bg-(--rt-raised-background) rounded p-6 min-h-[320px] flex items-center justify-center\">\n @if (isUploading()) {\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"p-3\">\n <mat-icon>upload</mat-icon>\n </div>\n <div class=\"flex flex-col items-center justify-center\">\n <div class=\"font-lg font-bold py-3\">{{ title() }}</div>\n <div class=\"font-sm text-(--rt-text-secondary)\">{{ subtitle() }}</div>\n <div class=\"font-sm text-(--rt-text-secondary)\">{{ description() }}</div>\n </div>\n <div class=\"py-2\">\n <input style=\"display: none\" type=\"file\" (change)=\"onUpload($event)\" #fileInput />\n <button mat-flat-button (click)=\"fileInput.click()\" i18n>Upload</button>\n </div>\n </div>\n } @else {\n <rolatech-spinner title=\"Uploading\"></rolatech-spinner>\n }\n</div>\n<div class=\"flex flex-row\">\n @for (media of media; track $index) {\n <div (click)=\"onMediaClick($index)\" class=\"inline-flex flex-row mt-3 mr-3 cursor-pointer rounded-md\">\n <img class=\"rounded-md aspect-video object-cover w-32\" [src]=\"media.url\" alt />\n </div>\n }\n</div>\n", styles: [".mat-icon{transform:scale(2)}\n"], dependencies: [{ kind: "ngmodule", type: AngularCommonModule }, { kind: "ngmodule", type: AngularComponentsModule }, { kind: "component", type: i1$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SpinnerComponent, selector: "rolatech-spinner", inputs: ["title"] }] });
1100
1178
  }
1101
1179
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MediaUploadComponent, decorators: [{
1102
1180
  type: Component,
@@ -1142,7 +1220,7 @@ class StorageFileUploadComponent {
1142
1220
  this.file = null;
1143
1221
  }
1144
1222
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StorageFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1145
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: StorageFileUploadComponent, isStandalone: true, selector: "rolatech-storage-file-upload", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output" }, ngImport: i0, template: "<div>\n <mat-form-field>\n <mat-label>\u6807\u9898</mat-label>\n <input matInput placeholder=\"\u8F93\u5165\u6807\u9898\" [(ngModel)]=\"title\" />\n </mat-form-field>\n\n <div class=\"mt-2\">\n <input #fileInput class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n <button mat-raised-button (click)=\"fileInput.click()\">\u9009\u62E9\u6587\u4EF6</button>\n </div>\n @if (file) {\n <div class=\"p-2 flex justify-between items-center\">\n <div>{{ file.name }}</div>\n <button matSuffix mat-icon-button (click)=\"removeFile()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n }\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { 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"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
1223
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: StorageFileUploadComponent, isStandalone: true, selector: "rolatech-storage-file-upload", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { output: "output" }, ngImport: i0, template: "<div>\n <mat-form-field>\n <mat-label>\u6807\u9898</mat-label>\n <input matInput placeholder=\"\u8F93\u5165\u6807\u9898\" [(ngModel)]=\"title\" />\n </mat-form-field>\n\n <div class=\"mt-2\">\n <input #fileInput class=\"hidden\" type=\"file\" (change)=\"selectFiles($event)\" />\n <button mat-raised-button (click)=\"fileInput.click()\">\u9009\u62E9\u6587\u4EF6</button>\n </div>\n @if (file) {\n <div class=\"p-2 flex justify-between items-center\">\n <div>{{ file.name }}</div>\n <button matSuffix mat-icon-button (click)=\"removeFile()\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n }\n</div>\n", styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { 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"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
1146
1224
  }
1147
1225
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: StorageFileUploadComponent, decorators: [{
1148
1226
  type: Component,
@@ -1180,7 +1258,7 @@ class MenuUserComponent {
1180
1258
  // });
1181
1259
  }
1182
1260
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MenuUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1183
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MenuUserComponent, isStandalone: true, selector: "rolatech-menu-user", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"min-w-[256px]\">\n @if (user()) {\n <div class=\"px-6 py-3\">\n <div class=\"flex flex-row items-center\">\n <div class=\"mr-3 w-14 h-14 rounded-full bg-(--rt-brand-color)\">\n @if (user().avatar) {\n <img [src]=\"user().avatar\" class=\"w-14 h-14 object-cover rounded-full\" alt />\n }\n </div>\n <div class=\"flex flex-col\">\n <div>\n <div class=\"text-lg font-bold\">{{ title() ? title() : user().name }}</div>\n <div class=\"formated-string\">\n @if (subtitle()) {\n <span>&#64;{{ subtitle() }}</span>\n } @else {\n <span>&#64;{{ user().username }}</span>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n\n <div class=\"flex justify-between items-center\">\n <a mat-menu-item [href]=\"myaccountUrl\" target=\"_blank\" class=\"px-6\">\n <span class=\"flex justify-between items-center\">\n <span class=\"pl-2\" i18n> Manage account </span>\n <span class=\"flex\"> <mat-icon>open_in_new</mat-icon></span>\n </span>\n </a>\n </div>\n</div>\n", styles: ["rolatech-menu-user{background-color:var(--rt-menu-background, #fff);color:var(--rt-text-primary, #000)}.formated-string{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
1261
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MenuUserComponent, isStandalone: true, selector: "rolatech-menu-user", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"min-w-[256px]\">\n @if (user()) {\n <div class=\"px-6 py-3\">\n <div class=\"flex flex-row items-center\">\n <div class=\"mr-3 w-14 h-14 rounded-full bg-(--rt-brand-color)\">\n @if (user().avatar) {\n <img [src]=\"user().avatar\" class=\"w-14 h-14 object-cover rounded-full\" alt />\n }\n </div>\n <div class=\"flex flex-col\">\n <div>\n <div class=\"text-lg font-bold\">{{ title() ? title() : user().name }}</div>\n <div class=\"formated-string\">\n @if (subtitle()) {\n <span>&#64;{{ subtitle() }}</span>\n } @else {\n <span>&#64;{{ user().username }}</span>\n }\n </div>\n </div>\n </div>\n </div>\n </div>\n }\n\n <div class=\"flex justify-between items-center\">\n <a mat-menu-item [href]=\"myaccountUrl\" target=\"_blank\" class=\"px-6\">\n <span class=\"flex justify-between items-center\">\n <span class=\"pl-2\" i18n> Manage account </span>\n <span class=\"flex\"> <mat-icon>open_in_new</mat-icon></span>\n </span>\n </a>\n </div>\n</div>\n", styles: ["rolatech-menu-user{background-color:var(--rt-menu-background, #fff);color:var(--rt-text-primary, #000)}.formated-string{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
1184
1262
  }
1185
1263
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MenuUserComponent, decorators: [{
1186
1264
  type: Component,
@@ -1333,7 +1411,7 @@ class MediaListItemComponent {
1333
1411
  this.deleteMedia.emit(media);
1334
1412
  }
1335
1413
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MediaListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1336
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MediaListItemComponent, isStandalone: true, selector: "rolatech-media-list-item", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: true, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", deleteMedia: "deleteMedia" }, host: { attributes: { "id": "rolatech-media-list-item" }, classAttribute: "rolatech-media-list-item" }, ngImport: i0, template: "<div\n class=\"group media-list-item rounded-md relative hasImage focus:outline-none focus:shadow-outline bg-(--rt-raised-background) cursor-pointer text-transparent hover:text-white shadow-sm\"\n>\n <div class=\"absolute z-30 right-0 p-1 group-hover:bg-white\">\n <div class=\"flex-1\"></div>\n <div class=\"w-full\">\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"beforeMenu\"\n class=\"ml-auto focus:outline-none hover:bg-(--rt-base-background) p-1 group-hover:bg-white\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item (click)=\"onDeleteMedia(media())\">\n <span i18n>Delete</span>\n </button>\n </mat-menu>\n </div>\n </div>\n <div id=\"thumbnail\" class=\"thumbnail\">\n <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media().url\" [alt]=\"media().alt\" />\n </div>\n <section\n (click)=\"onMediaItemClick(media())\"\n class=\"flex flex-col text-xs wrap-break-words w-full h-full z-20 absolute top-0\"\n ></section>\n</div>\n<div class=\"w-full py-1\">\n @if (uploading()) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n }\n</div>\n", styles: ["rolatech-media-list-item{--rt-media-item-margin: 16px;margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}.media-list-item{cursor:pointer;width:100%;aspect-ratio:16/9}.tile-media{height:100%;width:100%;object-fit:cover;display:inline-block;background-color:transparent}#thumbnail.thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block;position:absolute;border-radius:8px;inset:0}.hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}rolatech-media-list-item{--rt-media-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], encapsulation: i0.ViewEncapsulation.None });
1414
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MediaListItemComponent, isStandalone: true, selector: "rolatech-media-list-item", inputs: { media: { classPropertyName: "media", publicName: "media", isSignal: true, isRequired: true, transformFunction: null }, uploadProgress: { classPropertyName: "uploadProgress", publicName: "uploadProgress", isSignal: true, isRequired: false, transformFunction: null }, uploading: { classPropertyName: "uploading", publicName: "uploading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mediaItemClick: "mediaItemClick", deleteMedia: "deleteMedia" }, host: { attributes: { "id": "rolatech-media-list-item" }, classAttribute: "rolatech-media-list-item" }, ngImport: i0, template: "<div\n class=\"group media-list-item rounded-md relative hasImage focus:outline-none focus:shadow-outline bg-(--rt-raised-background) cursor-pointer text-transparent hover:text-white shadow-sm\"\n>\n <div class=\"absolute z-30 right-0 p-1 group-hover:bg-white\">\n <div class=\"flex-1\"></div>\n <div class=\"w-full\">\n <button\n mat-icon-button\n [matMenuTriggerFor]=\"beforeMenu\"\n class=\"ml-auto focus:outline-none hover:bg-(--rt-base-background) p-1 group-hover:bg-white\"\n >\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #beforeMenu=\"matMenu\" xPosition=\"before\">\n <button mat-menu-item (click)=\"onDeleteMedia(media())\">\n <span i18n>Delete</span>\n </button>\n </mat-menu>\n </div>\n </div>\n <div id=\"thumbnail\" class=\"thumbnail\">\n <img class=\"tile-media\" (click)=\"onMediaItemClick(media)\" [src]=\"media().url\" [alt]=\"media().alt\" />\n </div>\n <section\n (click)=\"onMediaItemClick(media())\"\n class=\"flex flex-col text-xs wrap-break-words w-full h-full z-20 absolute top-0\"\n ></section>\n</div>\n<div class=\"w-full py-1\">\n @if (uploading()) {\n <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n }\n</div>\n", styles: ["rolatech-media-list-item{--rt-media-item-margin: 16px;margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}.media-list-item{cursor:pointer;width:100%;aspect-ratio:16/9}.tile-media{height:100%;width:100%;object-fit:cover;display:inline-block;background-color:transparent}#thumbnail.thumbnail{height:100%;position:relative;margin-left:auto;margin-right:auto;overflow:hidden;display:block;position:absolute;border-radius:8px;inset:0}.hasImage:hover section{background-color:#05050566}.hasImage:hover button:hover{background:#05050573}rolatech-media-list-item{--rt-media-item-margin: 16px;display:flex;position:relative;cursor:pointer;flex-direction:column;margin-left:calc(var(--rt-media-item-margin) / 2);margin-right:calc(var(--rt-media-item-margin) / 2);width:calc(100% / var(--rt-media-items-per-row) - var(--rt-media-item-margin))}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$4.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$4.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$4.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], encapsulation: i0.ViewEncapsulation.None });
1337
1415
  }
1338
1416
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MediaListItemComponent, decorators: [{
1339
1417
  type: Component,
@@ -1346,6 +1424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
1346
1424
  class NotFoundComponent {
1347
1425
  url;
1348
1426
  router = inject(Router);
1427
+ language = inject(LanguageService);
1349
1428
  constructor() {
1350
1429
  this.router.events.pipe(filter((e) => e instanceof RouterEvent)).subscribe((e) => {
1351
1430
  if (e instanceof NavigationEnd) {
@@ -1360,12 +1439,15 @@ class NotFoundComponent {
1360
1439
  }
1361
1440
  });
1362
1441
  }
1442
+ homeUrl() {
1443
+ return this.language.currentOption().routePrefix;
1444
+ }
1363
1445
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1364
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: NotFoundComponent, isStandalone: true, selector: "rolatech-not-found", ngImport: i0, template: "<div class=\"not-found-content\">\n <p>\n <b>404.</b>\n <ins>That\u2019s an error.</ins>\n </p>\n <p>\n The requested URL <code>{{ url }}</code> not found on this server.\n </p>\n <a href=\"/\">return home</a>\n</div>\n", styles: ["p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}.not-found-content{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}.not-found-content a{text-decoration:underline}\n"] });
1446
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: NotFoundComponent, isStandalone: true, selector: "rolatech-not-found", ngImport: i0, template: "<div class=\"not-found-content\">\n <p>\n <b>404.</b>\n <ins>That\u2019s an error.</ins>\n </p>\n <p>\n The requested URL <code>{{ url }}</code> not found on this server.\n </p>\n <a [href]=\"homeUrl()\">return home</a>\n</div>\n", styles: ["p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}.not-found-content{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}.not-found-content a{text-decoration:underline}\n"] });
1365
1447
  }
1366
1448
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NotFoundComponent, decorators: [{
1367
1449
  type: Component,
1368
- args: [{ selector: 'rolatech-not-found', template: "<div class=\"not-found-content\">\n <p>\n <b>404.</b>\n <ins>That\u2019s an error.</ins>\n </p>\n <p>\n The requested URL <code>{{ url }}</code> not found on this server.\n </p>\n <a href=\"/\">return home</a>\n</div>\n", styles: ["p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}.not-found-content{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}.not-found-content a{text-decoration:underline}\n"] }]
1450
+ args: [{ selector: 'rolatech-not-found', template: "<div class=\"not-found-content\">\n <p>\n <b>404.</b>\n <ins>That\u2019s an error.</ins>\n </p>\n <p>\n The requested URL <code>{{ url }}</code> not found on this server.\n </p>\n <a [href]=\"homeUrl()\">return home</a>\n</div>\n", styles: ["p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}.not-found-content{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}.not-found-content a{text-decoration:underline}\n"] }]
1369
1451
  }], ctorParameters: () => [] });
1370
1452
 
1371
1453
  class ConfirmationDialogComponent {
@@ -1456,7 +1538,7 @@ class LocationSelectorComponent {
1456
1538
  }
1457
1539
  selectionChange(event) { }
1458
1540
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: LocationSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1459
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: LocationSelectorComponent, isStandalone: true, selector: "rolatech-location-selector", outputs: { output: "output" }, ngImport: i0, template: "<div class=\"h-full\">\n <div class=\"relative h-full\">\n <div id=\"map-container\" class=\"h-full\"></div>\n <div class=\"absolute bg-white z-[9999] top-[30px] left-[30px]\">\n <div class=\"flex gap-3 px-3 pt-3\">\n <mat-form-field appearance=\"fill\" [style.width.px]=\"180\">\n <mat-label>\u57CE\u5E02</mat-label>\n <mat-select #select=\"matSelect\" [(ngModel)]=\"region\" (selectionChange)=\"selectionChange($event)\">\n @for (city of cities; track city) {\n <mat-option [value]=\"city\">\n {{ city }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n <mat-form-field>\n <input matInput placeholder=\"\u8F93\u5165\u5173\u952E\u5B57\u641C\u7D22\" (input)=\"onSearchChange($event)\" />\n </mat-form-field>\n </div>\n <div class=\"max-h-[320px] overflow-scroll pb-3 bg-white\">\n @for (item of lists; track item; let index = $index) {\n <div (click)=\"setLocation(index)\" class=\"cursor-pointer\">\n <div class=\"p-3 flex items-center gap-2 hover:bg-(--rt-raised-background)\">\n <mat-icon fontIcon=\"location_on\"></mat-icon>\n <div class=\"text-sm font-thin\">{{ item.title }}</div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["mat-form-field{width:100%;margin-bottom:-1.25em}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }] });
1541
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: LocationSelectorComponent, isStandalone: true, selector: "rolatech-location-selector", outputs: { output: "output" }, ngImport: i0, template: "<div class=\"h-full\">\n <div class=\"relative h-full\">\n <div id=\"map-container\" class=\"h-full\"></div>\n <div class=\"absolute bg-white z-[9999] top-[30px] left-[30px]\">\n <div class=\"flex gap-3 px-3 pt-3\">\n <mat-form-field appearance=\"fill\" [style.width.px]=\"180\">\n <mat-label>\u57CE\u5E02</mat-label>\n <mat-select #select=\"matSelect\" [(ngModel)]=\"region\" (selectionChange)=\"selectionChange($event)\">\n @for (city of cities; track city) {\n <mat-option [value]=\"city\">\n {{ city }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n <mat-form-field>\n <input matInput placeholder=\"\u8F93\u5165\u5173\u952E\u5B57\u641C\u7D22\" (input)=\"onSearchChange($event)\" />\n </mat-form-field>\n </div>\n <div class=\"max-h-[320px] overflow-scroll pb-3 bg-white\">\n @for (item of lists; track item; let index = $index) {\n <div (click)=\"setLocation(index)\" class=\"cursor-pointer\">\n <div class=\"p-3 flex items-center gap-2 hover:bg-(--rt-raised-background)\">\n <mat-icon fontIcon=\"location_on\"></mat-icon>\n <div class=\"text-sm font-thin\">{{ item.title }}</div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: ["mat-form-field{width:100%;margin-bottom:-1.25em}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }] });
1460
1542
  }
1461
1543
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: LocationSelectorComponent, decorators: [{
1462
1544
  type: Component,
@@ -1615,7 +1697,7 @@ class TableComponent {
1615
1697
  this.displayedColumns = map$1(this.dataSource().columns, 'ref');
1616
1698
  }
1617
1699
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1618
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: TableComponent, isStandalone: true, selector: "rolatech-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource().data\">\n @for (column of dataSource().columns; track $index) {\n <ng-container [matColumnDef]=\"column.ref\" sticky>\n <th mat-header-cell *matHeaderCellDef>{{ column.name }}</th>\n <td mat-cell *matCellDef=\"let item\">{{ item[column.ref] }}</td>\n </ng-container>\n }\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n</table>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$4.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$4.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$4.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$4.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$4.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$4.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$4.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$4.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$4.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$4.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: RouterModule }] });
1700
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: TableComponent, isStandalone: true, selector: "rolatech-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<table mat-table [dataSource]=\"dataSource().data\">\n @for (column of dataSource().columns; track $index) {\n <ng-container [matColumnDef]=\"column.ref\" sticky>\n <th mat-header-cell *matHeaderCellDef>{{ column.name }}</th>\n <td mat-cell *matCellDef=\"let item\">{{ item[column.ref] }}</td>\n </ng-container>\n }\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n <tr mat-row *matRowDef=\"let row; columns: displayedColumns\"></tr>\n</table>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: RouterModule }] });
1619
1701
  }
1620
1702
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: TableComponent, decorators: [{
1621
1703
  type: Component,
@@ -1626,7 +1708,7 @@ class PaginatorComponent {
1626
1708
  prevClick() { }
1627
1709
  nextClick() { }
1628
1710
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1629
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: PaginatorComponent, isStandalone: true, selector: "rolatech-paginator", ngImport: i0, template: "<div class=\"flex h-14 items-center\">\n <button mat-icon-button (click)=\"prevClick()\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n <div></div>\n <button mat-icon-button (click)=\"nextClick()\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
1711
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: PaginatorComponent, isStandalone: true, selector: "rolatech-paginator", ngImport: i0, template: "<div class=\"flex h-14 items-center\">\n <button mat-icon-button (click)=\"prevClick()\">\n <mat-icon>chevron_left</mat-icon>\n </button>\n <div></div>\n <button mat-icon-button (click)=\"nextClick()\">\n <mat-icon>chevron_right</mat-icon>\n </button>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
1630
1712
  }
1631
1713
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: PaginatorComponent, decorators: [{
1632
1714
  type: Component,
@@ -2045,7 +2127,7 @@ class ChipBarComponent {
2045
2127
  this.scroller().nativeElement.scrollLeft += 320;
2046
2128
  }
2047
2129
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ChipBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2048
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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 }, fixed: { classPropertyName: "fixed", publicName: "fixed", 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, 0px);padding-right:var(--rt-chip-bar-padding, 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}rolatech-chip-bar[fixed] #chips-wrapper.rolatech-chip-bar{position:fixed;top:var(--rt-rich-grid-chips-bar-top, 56px)}#chips-wrapper.rolatech-chip-bar{position:relative;width:var(--rt-rich-grid-chips-bar-width);background-color:var(--rt-base-background);z-index:2000;display:flex;justify-content:center}rolatech-chip-bar[fluid-width] #chips-content.rolatech-chip-bar{max-width:calc(var(--rt-rich-grid-content-max-width) + 2 * var(--rt-chip-bar-padding));padding-left:var(--rt-chip-bar-padding, 0px);padding-right:var(--rt-chip-bar-padding, 0px)}#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: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: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$5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
2130
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", 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 }, fixed: { classPropertyName: "fixed", publicName: "fixed", 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, 0px);padding-right:var(--rt-chip-bar-padding, 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}rolatech-chip-bar[fixed] #chips-wrapper.rolatech-chip-bar{position:fixed;top:var(--rt-rich-grid-chips-bar-top, 56px)}#chips-wrapper.rolatech-chip-bar{position:relative;width:var(--rt-rich-grid-chips-bar-width);background-color:var(--rt-base-background);z-index:2000;display:flex;justify-content:center}rolatech-chip-bar[fluid-width] #chips-content.rolatech-chip-bar{max-width:calc(var(--rt-rich-grid-content-max-width) + 2 * var(--rt-chip-bar-padding));padding-left:var(--rt-chip-bar-padding, 0px);padding-right:var(--rt-chip-bar-padding, 0px)}#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: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: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$6.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$6.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None });
2049
2131
  }
2050
2132
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ChipBarComponent, decorators: [{
2051
2133
  type: Component,
@@ -2123,7 +2205,7 @@ class ImagePreviewDialogComponent {
2123
2205
  this.nextDisabled = this.selected === this.data.media.length - 1;
2124
2206
  }
2125
2207
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ImagePreviewDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2126
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ImagePreviewDialogComponent, isStandalone: true, selector: "rolatech-image-preview-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n <div class=\"h-16 flex justify-between items-center p-5\">\n @if (data.title) {\n <div class=\"text-lg font-bold\">{{ data.title }}</div>\n }\n <div class=\"cursor-pointer\" (click)=\"close()\">\n <mat-icon fontIcon=\"close\"></mat-icon>\n </div>\n </div>\n <mat-divider></mat-divider>\n <div class=\"flex justify-center items-center overflow-hidden\">\n <div class=\"p-3 flex items-center justify-center h-full\">\n <img class=\"object-contain p-3 h-full\" [src]=\"data.media[selected].url\" alt />\n </div>\n </div>\n <div class=\"flex-1\"></div>\n <mat-divider></mat-divider>\n <div class=\"h-16 flex justify-between items-center p-5\">\n <button mat-flat-button [disabled]=\"prevDisabled\" (click)=\"prev()\">Prev</button>\n <div>{{ selected + 1 }} / {{ data.media.length }}</div>\n <button mat-flat-button [disabled]=\"nextDisabled\" (click)=\"next()\">Next</button>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$4.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], encapsulation: i0.ViewEncapsulation.None });
2208
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ImagePreviewDialogComponent, isStandalone: true, selector: "rolatech-image-preview-dialog", ngImport: i0, template: "<div class=\"flex flex-col h-full overflow-hidden\">\n <div class=\"h-16 flex justify-between items-center p-5\">\n @if (data.title) {\n <div class=\"text-lg font-bold\">{{ data.title }}</div>\n }\n <div class=\"cursor-pointer\" (click)=\"close()\">\n <mat-icon fontIcon=\"close\"></mat-icon>\n </div>\n </div>\n <mat-divider></mat-divider>\n <div class=\"flex justify-center items-center overflow-hidden\">\n <div class=\"p-3 flex items-center justify-center h-full\">\n <img class=\"object-contain p-3 h-full\" [src]=\"data.media[selected].url\" alt />\n </div>\n </div>\n <div class=\"flex-1\"></div>\n <mat-divider></mat-divider>\n <div class=\"h-16 flex justify-between items-center p-5\">\n <button mat-flat-button [disabled]=\"prevDisabled\" (click)=\"prev()\">Prev</button>\n <div>{{ selected + 1 }} / {{ data.media.length }}</div>\n <button mat-flat-button [disabled]=\"nextDisabled\" (click)=\"next()\">Next</button>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i2$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }], encapsulation: i0.ViewEncapsulation.None });
2127
2209
  }
2128
2210
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ImagePreviewDialogComponent, decorators: [{
2129
2211
  type: Component,
@@ -2568,5 +2650,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
2568
2650
  * Generated bundle index. Do not edit.
2569
2651
  */
2570
2652
 
2571
- export { APP_LAYOUT, AcceptDialogComponent, AccordionComponent, AngularComponentsModule, AppPageComponent, AvatarComponent, BaseComponent, ChatBox, ChipBarComponent, ConfirmationComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, ContainerComponent, ContentComponent, ConversationContent, ConversationHeader, ConversationInput, ConversationMessage, DrawerComponent, EditorComponent, EmptyComponent, EnumSelect, FilterComponent, FolderComponent, FooterComponent, IconButtonComponent, IconComponent, ImageComponent, ImagePlaceholderComponent, ImagePreviewDialogComponent, InputComponent, LayoutComponent, ListComponent, Loading, LocationSelectorComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuIconComponent, MenuUserComponent, MiniGuideComponent, NotFoundComponent, PaginatorComponent, PanelComponent, PanelHeaderComponent, PdfViewerComponent, RejectDialogComponent, ResizableContainerComponent, RichGridMediaComponent, RichItemComponent, RichLabelComponent, RichViewComponent, SearchBar, SearchIcon, Skeleton, SpinnerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TabComponent, TableComponent, TabsComponent, ThumbnailComponent, TitleComponent, ToolbarComponent, TopbarAvatarMenuComponent, TopbarComponent, VideoUpload, WechatConnectDialogComponent, provideAngularLayout };
2653
+ export { APP_LAYOUT, AcceptDialogComponent, AccordionComponent, AngularComponentsModule, AppPageComponent, AppShellComponent, AvatarComponent, BaseComponent, ChatBox, ChipBarComponent, ConfirmationComponent, ConfirmationDialogComponent, ConsoleLayoutComponent, ContainerComponent, ContentComponent, ConversationContent, ConversationHeader, ConversationInput, ConversationMessage, DrawerComponent, EditorComponent, EmptyComponent, EnumSelect, FilterComponent, FolderComponent, FooterComponent, FooterLanguageSwitcherComponent, IconButtonComponent, IconComponent, ImageComponent, ImagePlaceholderComponent, ImagePreviewDialogComponent, InputComponent, LayoutComponent, ListComponent, Loading, LocationSelectorComponent, MaterialModule, MediaListComponent, MediaListItemComponent, MediaPreviewComponent, MediaPreviewDialogComponent, MediaUploadComponent, MediaUploadDialogComponent, MenuIconComponent, MenuUserComponent, MiniGuideComponent, NotFoundComponent, PageCollectionShellComponent, PaginatorComponent, PanelComponent, PanelHeaderComponent, PdfViewerComponent, RejectDialogComponent, ResizableContainerComponent, RichGridMediaComponent, RichItemComponent, RichLabelComponent, RichViewComponent, SearchBar, SearchIcon, Skeleton, SpinnerComponent, StorageBucketCreateComponent, StorageFileUploadComponent, StorageFolderCreateComponent, TabComponent, TableComponent, TabsComponent, ThumbnailComponent, TitleComponent, ToolbarComponent, TopbarAvatarMenuComponent, TopbarComponent, VideoUpload, WechatConnectDialogComponent, provideAngularLayout };
2572
2654
  //# sourceMappingURL=rolatech-angular-components.mjs.map