@rolatech/angular-components 20.0.0-beta.6 → 20.0.0-beta.8
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { inject, Component, input, Renderer2, ViewChild, Inject, booleanAttribute, ElementRef, effect, HostBinding, ViewEncapsulation, InjectionToken, makeEnvironmentProviders, PLATFORM_ID, viewChild, ChangeDetectionStrategy, contentChild, computed, NgModule, ChangeDetectorRef, output, model, HostListener, contentChildren } from '@angular/core';
|
|
3
|
-
import * as i1$
|
|
3
|
+
import * as i1$5 from '@angular/common';
|
|
4
4
|
import { CommonModule, isPlatformBrowser, NgClass } from '@angular/common';
|
|
5
5
|
import * as i2$5 from '@angular/platform-browser';
|
|
6
6
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
@@ -19,8 +19,8 @@ import { MatIcon, MatIconModule } from '@angular/material/icon';
|
|
|
19
19
|
import { MatSidenavModule } from '@angular/material/sidenav';
|
|
20
20
|
import * as i3 from '@angular/material/list';
|
|
21
21
|
import { MatListModule } from '@angular/material/list';
|
|
22
|
-
import * as
|
|
23
|
-
import { RouterLink, RouterLinkActive, RouterEvent, NavigationEnd, ActivatedRoute,
|
|
22
|
+
import * as i3$2 from '@angular/router';
|
|
23
|
+
import { RouterLink, RouterLinkActive, Router, RouterEvent, NavigationEnd, ActivatedRoute, RouterModule } from '@angular/router';
|
|
24
24
|
import { BreakpointObserver, Breakpoints, LayoutModule } from '@angular/cdk/layout';
|
|
25
25
|
import { map, distinctUntilChanged, filter } from 'rxjs';
|
|
26
26
|
import { trigger, state, transition, style, animate } from '@angular/animations';
|
|
@@ -63,7 +63,7 @@ import { MatSliderModule } from '@angular/material/slider';
|
|
|
63
63
|
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
|
64
64
|
import { MatSortModule } from '@angular/material/sort';
|
|
65
65
|
import { MatStepperModule } from '@angular/material/stepper';
|
|
66
|
-
import * as i1$
|
|
66
|
+
import * as i1$4 from '@angular/material/table';
|
|
67
67
|
import { MatTableModule } from '@angular/material/table';
|
|
68
68
|
import { MatTabsModule } from '@angular/material/tabs';
|
|
69
69
|
import { MatToolbarModule } from '@angular/material/toolbar';
|
|
@@ -1258,11 +1258,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImpor
|
|
|
1258
1258
|
}] });
|
|
1259
1259
|
|
|
1260
1260
|
class NotFoundComponent {
|
|
1261
|
-
router;
|
|
1262
1261
|
url;
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
router.events.pipe(filter((e) => e instanceof RouterEvent)).subscribe((e) => {
|
|
1262
|
+
router = inject(Router);
|
|
1263
|
+
constructor() {
|
|
1264
|
+
this.router.events.pipe(filter((e) => e instanceof RouterEvent)).subscribe((e) => {
|
|
1266
1265
|
if (e instanceof NavigationEnd) {
|
|
1267
1266
|
this.url = e.url;
|
|
1268
1267
|
}
|
|
@@ -1275,13 +1274,13 @@ class NotFoundComponent {
|
|
|
1275
1274
|
}
|
|
1276
1275
|
});
|
|
1277
1276
|
}
|
|
1278
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NotFoundComponent, deps: [
|
|
1277
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1279
1278
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.3", 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"] });
|
|
1280
1279
|
}
|
|
1281
1280
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: NotFoundComponent, decorators: [{
|
|
1282
1281
|
type: Component,
|
|
1283
1282
|
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"] }]
|
|
1284
|
-
}], ctorParameters: () => [
|
|
1283
|
+
}], ctorParameters: () => [] });
|
|
1285
1284
|
|
|
1286
1285
|
class ConfirmationDialogComponent {
|
|
1287
1286
|
data = inject(MAT_DIALOG_DATA);
|
|
@@ -1415,7 +1414,7 @@ class TableComponent {
|
|
|
1415
1414
|
this.displayedColumns = map$1(this.dataSource().columns, 'ref');
|
|
1416
1415
|
}
|
|
1417
1416
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1418
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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$
|
|
1417
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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 }] });
|
|
1419
1418
|
}
|
|
1420
1419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: TableComponent, decorators: [{
|
|
1421
1420
|
type: Component,
|
|
@@ -1452,7 +1451,7 @@ class ToolbarComponent {
|
|
|
1452
1451
|
large = input(false, { transform: booleanAttribute });
|
|
1453
1452
|
divider = input(false, { transform: booleanAttribute });
|
|
1454
1453
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1455
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ToolbarComponent, isStandalone: true, selector: "rolatech-toolbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, large: { classPropertyName: "large", publicName: "large", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.rolatech-toolbar": "this.hasClass" } }, ngImport: i0, template: "<div class=\"flex justify-between items-center\" [ngClass]=\"subtitle() ? 'h-16' : 'h-14'\">\n <ng-container>\n @if (back()) {\n <rolatech-icon-button rolatechBackButton class=\"left-button\">arrow_back</rolatech-icon-button>\n }\n @if (link()) {\n <rolatech-icon-button [routerLink]=\"link()\" class=\"left-button\">arrow_back</rolatech-icon-button>\n }\n </ng-container>\n @if (title()) {\n @if (large()) {\n <span class=\"text-2xl font-bold\" i18n>{{ title() }}</span>\n } @else {\n <span class=\"text-xl font-bold\" i18n>{{ title() }}</span>\n }\n }\n <div class=\"flex-1\"></div>\n <div class=\"flex justify-center items-center gap-3\">\n <ng-content></ng-content>\n </div>\n</div>\n@if (subtitle()) {\n <div class=\"-mt-4 mb-2 leading-none\" [ngClass]=\"back() || link() ? 'ml-[40px]' : ''\">\n <span class=\"text-sm text-[--rt-text-secondary]\" i18n>{{ subtitle() }}</span>\n </div>\n}\n@if (divider()) {\n <mat-divider></mat-divider>\n}\n", styles: ["rolatech-toolbar{display:block;padding-left:var(--rt-toolbar-padding-left, 16px);padding-right:var(--rt-toolbar-padding-right, 16px);background-color:var(--rt-base-background, #fff);border-radius:var(--rt-toolbar-border-radius, 0px);color:var(--rt-text-primary, #000)}rolatech-toolbar:has(.left-button){--rt-toolbar-padding-left: 8px;--rt-toolbar-padding-right: 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$
|
|
1454
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", type: ToolbarComponent, isStandalone: true, selector: "rolatech-toolbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, large: { classPropertyName: "large", publicName: "large", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "id": "this.hasId", "class.rolatech-toolbar": "this.hasClass" } }, ngImport: i0, template: "<div class=\"flex justify-between items-center\" [ngClass]=\"subtitle() ? 'h-16' : 'h-14'\">\n <ng-container>\n @if (back()) {\n <rolatech-icon-button rolatechBackButton class=\"left-button\">arrow_back</rolatech-icon-button>\n }\n @if (link()) {\n <rolatech-icon-button [routerLink]=\"link()\" class=\"left-button\">arrow_back</rolatech-icon-button>\n }\n </ng-container>\n @if (title()) {\n @if (large()) {\n <span class=\"text-2xl font-bold\" i18n>{{ title() }}</span>\n } @else {\n <span class=\"text-xl font-bold\" i18n>{{ title() }}</span>\n }\n }\n <div class=\"flex-1\"></div>\n <div class=\"flex justify-center items-center gap-3\">\n <ng-content></ng-content>\n </div>\n</div>\n@if (subtitle()) {\n <div class=\"-mt-4 mb-2 leading-none\" [ngClass]=\"back() || link() ? 'ml-[40px]' : ''\">\n <span class=\"text-sm text-[--rt-text-secondary]\" i18n>{{ subtitle() }}</span>\n </div>\n}\n@if (divider()) {\n <mat-divider></mat-divider>\n}\n", styles: ["rolatech-toolbar{display:block;padding-left:var(--rt-toolbar-padding-left, 16px);padding-right:var(--rt-toolbar-padding-right, 16px);background-color:var(--rt-base-background, #fff);border-radius:var(--rt-toolbar-border-radius, 0px);color:var(--rt-text-primary, #000)}rolatech-toolbar:has(.left-button){--rt-toolbar-padding-left: 8px;--rt-toolbar-padding-right: 8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconButtonComponent, selector: "rolatech-icon-button" }, { kind: "directive", type: BackButtonDirective, selector: "[rolatechBackButton]" }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1456
1455
|
}
|
|
1457
1456
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ToolbarComponent, decorators: [{
|
|
1458
1457
|
type: Component,
|
|
@@ -1748,7 +1747,7 @@ class ChipBarComponent {
|
|
|
1748
1747
|
this.scroller().nativeElement.scrollLeft += 320;
|
|
1749
1748
|
}
|
|
1750
1749
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ChipBarComponent, deps: [{ token: i2$2.MatIconRegistry }, { token: i2$5.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
|
|
1751
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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:
|
|
1750
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.3", 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: i3$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], 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 });
|
|
1752
1751
|
}
|
|
1753
1752
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.3", ngImport: i0, type: ChipBarComponent, decorators: [{
|
|
1754
1753
|
type: Component,
|