@elderbyte/ngx-starter 19.1.0-beta.20 → 19.1.0-beta.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/elderbyte-ngx-starter.mjs +20 -20
- package/fesm2022/elderbyte-ngx-starter.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/components/card-organizer/card-stack/elder-card-stack.component.scss +68 -0
- package/src/lib/components/data-view/table/elder-table/elder-table.component.scss +201 -0
- package/src/lib/components/navigation/nav/nav-group/elder-nav-group.component.scss +11 -15
- package/src/lib/components/navigation/nav/nav-link/elder-nav-link.component.scss +8 -15
- package/src/lib/components/panels/toggle-panel/elder-toggle-panel.component.scss +3 -0
- package/src/lib/components/select/single/elder-select/elder-select.component.scss +21 -0
- package/src/lib/components/select-chip-list/chip-list-select/elder-chip-list-select.component.scss +0 -11
- package/theming/abstracts/_elder-design-tokens.scss +57 -41
- package/theming/abstracts/_elder-scss-variables.scss +4 -4
- package/theming/abstracts/_elder-starter-theme.scss +5 -7
- package/theming/abstracts/_elder-theme-main.scss +1 -1
- package/theming/base/_elder-common-base.scss +18 -0
- package/theming/base/_elder-fixes-base.scss +3 -28
- package/theming/components/_elder-chip-theme.scss +111 -117
- package/theming/components/_elder-select-theme.scss +44 -27
- package/theming/utilities/_elder-color-utils.scss +4 -4
- package/theming/utilities/_elder-common-utils.scss +3 -0
- package/theming/base/_elder-component-themes.scss +0 -21
- package/theming/base/_elder-m2-legacy-base.scss +0 -37
- package/theming/components/_elder-card-stack-theme.scss +0 -72
- package/theming/components/_elder-filter-chip-template-theme.scss +0 -79
- package/theming/components/_elder-multi-select-chip-options-theme.scss +0 -48
- package/theming/components/_elder-multi-select-chips-theme.scss +0 -60
- package/theming/components/_elder-nav-theme.scss +0 -24
- package/theming/components/_elder-select-base-mixin.scss +0 -28
- package/theming/components/_elder-table-theme.scss +0 -213
- package/theming/components/_legacy-elder-chip-theme.scss +0 -119
|
@@ -10082,11 +10082,11 @@ class ElderTogglePanelComponent {
|
|
|
10082
10082
|
this.showPrimary$.next(!this.showPrimary$.getValue());
|
|
10083
10083
|
}
|
|
10084
10084
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderTogglePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10085
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderTogglePanelComponent, isStandalone: true, selector: "elder-toggle-panel", queries: [{ propertyName: "primaryPanel", first: true, predicate: ElderTogglePanelPrimaryDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "secondaryPanel", first: true, predicate: ElderTogglePanelSecondaryDirective, descendants: true, read: TemplateRef, static: true }], exportAs: ["elderTogglePanel"], ngImport: i0, template: "<div class=\"layout-col full\">\n <ng-container *ngIf=\"showPrimary$ | async; then primaryPanel; else secondaryPanel\">\n </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10085
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderTogglePanelComponent, isStandalone: true, selector: "elder-toggle-panel", queries: [{ propertyName: "primaryPanel", first: true, predicate: ElderTogglePanelPrimaryDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "secondaryPanel", first: true, predicate: ElderTogglePanelSecondaryDirective, descendants: true, read: TemplateRef, static: true }], exportAs: ["elderTogglePanel"], ngImport: i0, template: "<div class=\"layout-col full\">\n <ng-container *ngIf=\"showPrimary$ | async; then primaryPanel; else secondaryPanel\">\n </ng-container>\n</div>\n", styles: [":host(.elder-main-nav-panel){background-color:var(--elder-main-nav-bg)!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10086
10086
|
}
|
|
10087
10087
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderTogglePanelComponent, decorators: [{
|
|
10088
10088
|
type: Component,
|
|
10089
|
-
args: [{ selector: 'elder-toggle-panel', exportAs: 'elderTogglePanel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, AsyncPipe], template: "<div class=\"layout-col full\">\n <ng-container *ngIf=\"showPrimary$ | async; then primaryPanel; else secondaryPanel\">\n </ng-container>\n</div>\n" }]
|
|
10089
|
+
args: [{ selector: 'elder-toggle-panel', exportAs: 'elderTogglePanel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, AsyncPipe], template: "<div class=\"layout-col full\">\n <ng-container *ngIf=\"showPrimary$ | async; then primaryPanel; else secondaryPanel\">\n </ng-container>\n</div>\n", styles: [":host(.elder-main-nav-panel){background-color:var(--elder-main-nav-bg)!important}\n"] }]
|
|
10090
10090
|
}], propDecorators: { primaryPanel: [{
|
|
10091
10091
|
type: ContentChild,
|
|
10092
10092
|
args: [ElderTogglePanelPrimaryDirective, { read: TemplateRef, static: true }]
|
|
@@ -12312,7 +12312,7 @@ class ElderCardStackComponent {
|
|
|
12312
12312
|
}
|
|
12313
12313
|
}
|
|
12314
12314
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderCardStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12315
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderCardStackComponent, isStandalone: true, selector: "elder-card-stack", inputs: { stackId: "stackId", headerEnabled: "headerEnabled", headerTitle: "headerTitle", canRemove: "canRemove", canAdd: "canAdd", canDrag: "canDrag", removeConfirmation: "removeConfirmation", canEnterPredicate: "canEnterPredicate", connectedTo: "connectedTo", autoMoveCards: "autoMoveCards", canCollapse: "canCollapse", copyOnDrag: "copyOnDrag", cardTemplate: "cardTemplate", stack: "stack" }, outputs: { requestNewCard: "requestNewCard", requestRemoveCard: "requestRemoveCard", cardClick: "cardClick", cardDropped: "cardDropped" }, queries: [{ propertyName: "cardTemplateQuery", first: true, predicate: ElderStackCardDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"layout-col full card-stack hoverme\">\n <!-- Header -->\n <header\n *ngIf=\"headerEnabled\"\n class=\"layout-row place-start-center flex-none gap-md stack-header p-md\"\n >\n <h3 class=\"mat-subtitle-2 noselect\">{{ headerTitle | translate }}</h3>\n <small class=\"mat-caption noselect\">({{ (cards$ | async)?.length }})</small>\n\n <span class=\"flex\"></span>\n\n <button *ngIf=\"canAdd\" mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n <mat-icon>add</mat-icon>\n </button>\n </header>\n <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n <!-- card list -->\n <div class=\"layout-col flex card-container\">\n <div\n class=\"layout-col gap-sm scrollable p-sm card-list\"\n [id]=\"stackId\"\n cdkDropList\n [cdkDropListDisabled]=\"!canDrag\"\n [cdkDropListData]=\"stack\"\n [cdkDropListConnectedTo]=\"connectedTo\"\n [cdkDropListEnterPredicate]=\"enterPredicate\"\n (cdkDropListEntered)=\"cardEntered($event)\"\n (cdkDropListExited)=\"cardExited($event)\"\n (cdkDropListDropped)=\"cardDrop($event)\"\n >\n <!-- card -->\n <elder-card\n *ngFor=\"let card of cards$ | async; let i = index\"\n class=\"card flex-none\"\n [ngClass]=\"cardClick.observed ? 'clickable' : 'unclickable'\"\n cdkDrag\n [cdkDragData]=\"card\"\n (click)=\"onCardSelected($event, card)\"\n >\n <div class=\"layout-row place-between-center flex\">\n <ng-container\n *ngTemplateOutlet=\"\n cardTemplate || simpleCardTemplate;\n context: { $implicit: card, index: i }\n \"\n ></ng-container>\n\n <button\n mat-icon-button\n type=\"button\"\n *ngIf=\"canRemove\"\n class=\"hide\"\n (click)=\"onRequestRemoveCard($event, card)\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </elder-card>\n </div>\n </div>\n\n <ng-template #simpleCardTemplate let-card>\n <div class=\"layout-col flex\">\n <p class=\"noselect\">{{ card }}</p>\n </div>\n </ng-template>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ElderCardComponent, selector: "elder-card", inputs: ["appearance", "float", "flat"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12315
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderCardStackComponent, isStandalone: true, selector: "elder-card-stack", inputs: { stackId: "stackId", headerEnabled: "headerEnabled", headerTitle: "headerTitle", canRemove: "canRemove", canAdd: "canAdd", canDrag: "canDrag", removeConfirmation: "removeConfirmation", canEnterPredicate: "canEnterPredicate", connectedTo: "connectedTo", autoMoveCards: "autoMoveCards", canCollapse: "canCollapse", copyOnDrag: "copyOnDrag", cardTemplate: "cardTemplate", stack: "stack" }, outputs: { requestNewCard: "requestNewCard", requestRemoveCard: "requestRemoveCard", cardClick: "cardClick", cardDropped: "cardDropped" }, queries: [{ propertyName: "cardTemplateQuery", first: true, predicate: ElderStackCardDirective, descendants: true, read: TemplateRef, static: true }], ngImport: i0, template: "<div class=\"layout-col full card-stack hoverme\">\n <!-- Header -->\n <header\n *ngIf=\"headerEnabled\"\n class=\"layout-row place-start-center flex-none gap-md stack-header p-md\"\n >\n <h3 class=\"mat-subtitle-2 noselect\">{{ headerTitle | translate }}</h3>\n <small class=\"mat-caption noselect\">({{ (cards$ | async)?.length }})</small>\n\n <span class=\"flex\"></span>\n\n <button *ngIf=\"canAdd\" mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n <mat-icon>add</mat-icon>\n </button>\n </header>\n <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n <!-- card list -->\n <div class=\"layout-col flex card-container\">\n <div\n class=\"layout-col gap-sm scrollable p-sm card-list\"\n [id]=\"stackId\"\n cdkDropList\n [cdkDropListDisabled]=\"!canDrag\"\n [cdkDropListData]=\"stack\"\n [cdkDropListConnectedTo]=\"connectedTo\"\n [cdkDropListEnterPredicate]=\"enterPredicate\"\n (cdkDropListEntered)=\"cardEntered($event)\"\n (cdkDropListExited)=\"cardExited($event)\"\n (cdkDropListDropped)=\"cardDrop($event)\"\n >\n <!-- card -->\n <elder-card\n *ngFor=\"let card of cards$ | async; let i = index\"\n class=\"card flex-none\"\n [ngClass]=\"cardClick.observed ? 'clickable' : 'unclickable'\"\n cdkDrag\n [cdkDragData]=\"card\"\n (click)=\"onCardSelected($event, card)\"\n >\n <div class=\"layout-row place-between-center flex\">\n <ng-container\n *ngTemplateOutlet=\"\n cardTemplate || simpleCardTemplate;\n context: { $implicit: card, index: i }\n \"\n ></ng-container>\n\n <button\n mat-icon-button\n type=\"button\"\n *ngIf=\"canRemove\"\n class=\"hide\"\n (click)=\"onRequestRemoveCard($event, card)\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </elder-card>\n </div>\n </div>\n\n <ng-template #simpleCardTemplate let-card>\n <div class=\"layout-col flex\">\n <p class=\"noselect\">{{ card }}</p>\n </div>\n </ng-template>\n</div>\n", styles: [".card-stack{border-radius:var(--elder-border-radius-sm);border:var(--elder-border-light)}.card-list.cdk-drop-list-dragging{border:2px dashed var(--md-sys-color-outline-variant)}.stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{border-radius:var(--elder-border-radius-sm);box-shadow:var(--mat-app-elevation-shadow-level-1);cursor:move;overflow:hidden}.card.cdk-drag-disabled.clickable{cursor:pointer}.card.cdk-drag-disabled.unclickable{cursor:default}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{transform:rotate(-90deg)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: ElderCardComponent, selector: "elder-card", inputs: ["appearance", "float", "flat"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12316
12316
|
}
|
|
12317
12317
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderCardStackComponent, decorators: [{
|
|
12318
12318
|
type: Component,
|
|
@@ -12329,7 +12329,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
12329
12329
|
NgTemplateOutlet,
|
|
12330
12330
|
AsyncPipe,
|
|
12331
12331
|
TranslateModule,
|
|
12332
|
-
], template: "<div class=\"layout-col full card-stack hoverme\">\n <!-- Header -->\n <header\n *ngIf=\"headerEnabled\"\n class=\"layout-row place-start-center flex-none gap-md stack-header p-md\"\n >\n <h3 class=\"mat-subtitle-2 noselect\">{{ headerTitle | translate }}</h3>\n <small class=\"mat-caption noselect\">({{ (cards$ | async)?.length }})</small>\n\n <span class=\"flex\"></span>\n\n <button *ngIf=\"canAdd\" mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n <mat-icon>add</mat-icon>\n </button>\n </header>\n <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n <!-- card list -->\n <div class=\"layout-col flex card-container\">\n <div\n class=\"layout-col gap-sm scrollable p-sm card-list\"\n [id]=\"stackId\"\n cdkDropList\n [cdkDropListDisabled]=\"!canDrag\"\n [cdkDropListData]=\"stack\"\n [cdkDropListConnectedTo]=\"connectedTo\"\n [cdkDropListEnterPredicate]=\"enterPredicate\"\n (cdkDropListEntered)=\"cardEntered($event)\"\n (cdkDropListExited)=\"cardExited($event)\"\n (cdkDropListDropped)=\"cardDrop($event)\"\n >\n <!-- card -->\n <elder-card\n *ngFor=\"let card of cards$ | async; let i = index\"\n class=\"card flex-none\"\n [ngClass]=\"cardClick.observed ? 'clickable' : 'unclickable'\"\n cdkDrag\n [cdkDragData]=\"card\"\n (click)=\"onCardSelected($event, card)\"\n >\n <div class=\"layout-row place-between-center flex\">\n <ng-container\n *ngTemplateOutlet=\"\n cardTemplate || simpleCardTemplate;\n context: { $implicit: card, index: i }\n \"\n ></ng-container>\n\n <button\n mat-icon-button\n type=\"button\"\n *ngIf=\"canRemove\"\n class=\"hide\"\n (click)=\"onRequestRemoveCard($event, card)\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </elder-card>\n </div>\n </div>\n\n <ng-template #simpleCardTemplate let-card>\n <div class=\"layout-col flex\">\n <p class=\"noselect\">{{ card }}</p>\n </div>\n </ng-template>\n</div>\n" }]
|
|
12332
|
+
], template: "<div class=\"layout-col full card-stack hoverme\">\n <!-- Header -->\n <header\n *ngIf=\"headerEnabled\"\n class=\"layout-row place-start-center flex-none gap-md stack-header p-md\"\n >\n <h3 class=\"mat-subtitle-2 noselect\">{{ headerTitle | translate }}</h3>\n <small class=\"mat-caption noselect\">({{ (cards$ | async)?.length }})</small>\n\n <span class=\"flex\"></span>\n\n <button *ngIf=\"canAdd\" mat-icon-button type=\"button\" (click)=\"onRequestNewCard($event)\">\n <mat-icon>add</mat-icon>\n </button>\n </header>\n <mat-divider *ngIf=\"headerEnabled\"></mat-divider>\n\n <!-- card list -->\n <div class=\"layout-col flex card-container\">\n <div\n class=\"layout-col gap-sm scrollable p-sm card-list\"\n [id]=\"stackId\"\n cdkDropList\n [cdkDropListDisabled]=\"!canDrag\"\n [cdkDropListData]=\"stack\"\n [cdkDropListConnectedTo]=\"connectedTo\"\n [cdkDropListEnterPredicate]=\"enterPredicate\"\n (cdkDropListEntered)=\"cardEntered($event)\"\n (cdkDropListExited)=\"cardExited($event)\"\n (cdkDropListDropped)=\"cardDrop($event)\"\n >\n <!-- card -->\n <elder-card\n *ngFor=\"let card of cards$ | async; let i = index\"\n class=\"card flex-none\"\n [ngClass]=\"cardClick.observed ? 'clickable' : 'unclickable'\"\n cdkDrag\n [cdkDragData]=\"card\"\n (click)=\"onCardSelected($event, card)\"\n >\n <div class=\"layout-row place-between-center flex\">\n <ng-container\n *ngTemplateOutlet=\"\n cardTemplate || simpleCardTemplate;\n context: { $implicit: card, index: i }\n \"\n ></ng-container>\n\n <button\n mat-icon-button\n type=\"button\"\n *ngIf=\"canRemove\"\n class=\"hide\"\n (click)=\"onRequestRemoveCard($event, card)\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </div>\n </elder-card>\n </div>\n </div>\n\n <ng-template #simpleCardTemplate let-card>\n <div class=\"layout-col flex\">\n <p class=\"noselect\">{{ card }}</p>\n </div>\n </ng-template>\n</div>\n", styles: [".card-stack{border-radius:var(--elder-border-radius-sm);border:var(--elder-border-light)}.card-list.cdk-drop-list-dragging{border:2px dashed var(--md-sys-color-outline-variant)}.stack-header{height:62px}.card-container{min-width:120px;min-height:0}.card-list{min-height:100%}.card{border-radius:var(--elder-border-radius-sm);box-shadow:var(--mat-app-elevation-shadow-level-1);cursor:move;overflow:hidden}.card.cdk-drag-disabled.clickable{cursor:pointer}.card.cdk-drag-disabled.unclickable{cursor:default}.hoverme .hide{visibility:hidden}.hoverme:hover .hide{visibility:visible}.rotate{transform:rotate(-90deg)}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.noselect{-webkit-user-select:none;user-select:none}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.card-list.cdk-drop-list-dragging .card:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
|
|
12333
12333
|
}], ctorParameters: () => [], propDecorators: { stackId: [{
|
|
12334
12334
|
type: Input
|
|
12335
12335
|
}], headerEnabled: [{
|
|
@@ -13925,11 +13925,11 @@ class ElderSelectionMasterCheckboxComponent {
|
|
|
13925
13925
|
**************************************************************************/
|
|
13926
13926
|
ngOnInit() { }
|
|
13927
13927
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderSelectionMasterCheckboxComponent, deps: [{ token: DataContextSelectionDirective }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13928
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderSelectionMasterCheckboxComponent, isStandalone: true, selector: "elder-selection-master-checkbox", ngImport: i0, template: "<ng-container *ngIf=\"dataContextSelection?.selectionState$ | async as selectionState\">\n <div class=\"layout-row place-start-center\" *ngIf=\"selectionState.isMultiSelection\">\n <!-- [elderBadge]=\"selectionState.count + ''\" -->\n <mat-checkbox\n (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n [checked]=\"selectionState.allSelected\"\n [indeterminate]=\"selectionState.someSelected\"\n [matBadgeHidden]=\"selectionState.count === 0\"\n [matBadge]=\"selectionState.count + ''\"\n [matBadgePosition]=\"'above before'\"\n [matBadgeOverlap]=\"true\"\n [matBadgeSize]=\"'small'\"\n >\n </mat-checkbox>\n </div>\n</ng-container>\n", styles: [".mat-badge-small.mat-badge-above .mat-badge-content{top:-6px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13928
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderSelectionMasterCheckboxComponent, isStandalone: true, selector: "elder-selection-master-checkbox", ngImport: i0, template: "<ng-container *ngIf=\"dataContextSelection?.selectionState$ | async as selectionState\">\n <div class=\"layout-row place-start-center\" *ngIf=\"selectionState.isMultiSelection\">\n <!-- [elderBadge]=\"selectionState.count + ''\" -->\n <mat-checkbox\n (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n [checked]=\"selectionState.allSelected\"\n [indeterminate]=\"selectionState.someSelected\"\n [matBadgeHidden]=\"selectionState.count === 0\"\n [matBadge]=\"selectionState.count + ''\"\n [matBadgeColor]=\"'accent'\"\n [matBadgePosition]=\"'above before'\"\n [matBadgeOverlap]=\"true\"\n [matBadgeSize]=\"'small'\"\n >\n </mat-checkbox>\n </div>\n</ng-container>\n", styles: [".mat-badge-small.mat-badge-above .mat-badge-content{top:-6px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13929
13929
|
}
|
|
13930
13930
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderSelectionMasterCheckboxComponent, decorators: [{
|
|
13931
13931
|
type: Component,
|
|
13932
|
-
args: [{ selector: 'elder-selection-master-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatCheckbox, MatBadge, AsyncPipe], template: "<ng-container *ngIf=\"dataContextSelection?.selectionState$ | async as selectionState\">\n <div class=\"layout-row place-start-center\" *ngIf=\"selectionState.isMultiSelection\">\n <!-- [elderBadge]=\"selectionState.count + ''\" -->\n <mat-checkbox\n (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n [checked]=\"selectionState.allSelected\"\n [indeterminate]=\"selectionState.someSelected\"\n [matBadgeHidden]=\"selectionState.count === 0\"\n [matBadge]=\"selectionState.count + ''\"\n [matBadgePosition]=\"'above before'\"\n [matBadgeOverlap]=\"true\"\n [matBadgeSize]=\"'small'\"\n >\n </mat-checkbox>\n </div>\n</ng-container>\n", styles: [".mat-badge-small.mat-badge-above .mat-badge-content{top:-6px}\n"] }]
|
|
13932
|
+
args: [{ selector: 'elder-selection-master-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatCheckbox, MatBadge, AsyncPipe], template: "<ng-container *ngIf=\"dataContextSelection?.selectionState$ | async as selectionState\">\n <div class=\"layout-row place-start-center\" *ngIf=\"selectionState.isMultiSelection\">\n <!-- [elderBadge]=\"selectionState.count + ''\" -->\n <mat-checkbox\n (change)=\"$event ? dataContextSelection.masterToggle() : null\"\n [checked]=\"selectionState.allSelected\"\n [indeterminate]=\"selectionState.someSelected\"\n [matBadgeHidden]=\"selectionState.count === 0\"\n [matBadge]=\"selectionState.count + ''\"\n [matBadgeColor]=\"'accent'\"\n [matBadgePosition]=\"'above before'\"\n [matBadgeOverlap]=\"true\"\n [matBadgeSize]=\"'small'\"\n >\n </mat-checkbox>\n </div>\n</ng-container>\n", styles: [".mat-badge-small.mat-badge-above .mat-badge-content{top:-6px}\n"] }]
|
|
13933
13933
|
}], ctorParameters: () => [{ type: DataContextSelectionDirective }] });
|
|
13934
13934
|
|
|
13935
13935
|
class DataContextStateIndicatorComponent {
|
|
@@ -15926,7 +15926,7 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
|
|
|
15926
15926
|
provide: ELDER_DATA_VIEW,
|
|
15927
15927
|
useExisting: forwardRef(() => ElderTableComponent),
|
|
15928
15928
|
},
|
|
15929
|
-
], queries: [{ propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "elderColumns", predicate: ElderTableColumnDirective }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "toolbarRowTemplateQuery", predicate: ElderTableToolbarDirective, read: TemplateRef }], viewQueries: [{ propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"full\" style=\"overflow: hidden\">\n <div class=\"layout-col elder-table full\">\n <!-- Toolbar Rows -->\n @for (toolbarRowTemplate of toolbarRowTemplates$ | async; track toolbarRowTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n <!-- Scrollable Table -->\n <div\n class=\"elder-table-inner layout-col {{\n isDataValid(dataContext?.data | async) ? 'flex' : ''\n }} scrollable elder-table-scroll\"\n elderInfiniteScroll\n [eventThrottle]=\"150\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"!isContinuable || !(canLoadMore$ | async)\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <table\n mat-table\n class=\"elder-mat-inner-table\"\n [trackBy]=\"trackByFn\"\n [dataSource]=\"$any(dataContext$ | async)\"\n [elderDataContextSelection]=\"dataContext$ | async\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n >\n <!-- selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef>\n <elder-selection-master-checkbox></elder-selection-master-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let entity\">\n <div class=\"layout-row place-start-center\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selectionModel.toggle(entity) : null\"\n [checked]=\"selectionModel.observeSelection(entity) | async\"\n [disabled]=\"!selectionModel.isSelectable(entity)\"\n class=\"elder-table-checkbox\"\n [class.elder-table-checkbox-visible]=\"\n (dataSelection.selectionState$ | async).anySelected\n \"\n >\n </mat-checkbox>\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n </ng-container>\n\n @if (tableModel.displayedColumnsInner$ | async; as displayedColumnsInner) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n <tr\n mat-row\n class=\"elder-table-row\"\n *matRowDef=\"let entity; columns: displayedColumnsInner\"\n [elderTableRow]=\"entity\"\n [class.dense]=\"dense\"\n [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n [class.elder-row-removing]=\"removingField && entity[removingField]\"\n [class.elder-table-row-selected]=\"\n interactionMode === 'selection' && selectionModel.observeSelection(entity) | async\n \"\n (click)=\"onItemClick(entity)\"\n (dblclick)=\"onItemDoubleClick(entity)\"\n ></tr>\n @if (showFooter) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n }\n }\n </table>\n </div>\n\n @if (!isDataValid(dataContext?.data | async)) {\n <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dataContext\">\n </elder-data-context-state-indicator>\n }\n\n <mat-progress-bar\n class=\"flex-none mt-auto\"\n [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n [color]=\"(dataContext?.status | async)?.hasError ? 'warn' : 'primary'\"\n >\n </mat-progress-bar>\n\n @if (isActivePaged) {\n @if (dataActivePaged.page | async; as page) {\n <!-- Optional Paginator Toolbar -->\n <mat-paginator\n class=\"flex-none\"\n [length]=\"dataContext?.total | async\"\n [pageIndex]=\"page?.index\"\n [pageSize]=\"page?.size\"\n [pageSizeOptions]=\"pageSizeOptions\"\n >\n </mat-paginator>\n }\n }\n\n <!-- Optional Continuation Footer -->\n @if (isContinuable) {\n <div class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n <span class=\"mat-caption noselect\" style=\"color: gray\">\n {{ (dataContext?.data | async)?.length }} / {{ total$ | async }}\n </span>\n\n <button\n mat-icon-button\n type=\"button\"\n color=\"primary\"\n [disabled]=\"!(canLoadMore$ | async)\"\n (click)=\"dataContinuable.loadMore()\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n </div>\n }\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow"], exportAs: ["elderTableRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15929
|
+
], queries: [{ propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "elderColumns", predicate: ElderTableColumnDirective }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "toolbarRowTemplateQuery", predicate: ElderTableToolbarDirective, read: TemplateRef }], viewQueries: [{ propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"full\" style=\"overflow: hidden\">\n <div class=\"layout-col elder-table full\">\n <!-- Toolbar Rows -->\n @for (toolbarRowTemplate of toolbarRowTemplates$ | async; track toolbarRowTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n <!-- Scrollable Table -->\n <div\n class=\"elder-table-inner layout-col {{\n isDataValid(dataContext?.data | async) ? 'flex' : ''\n }} scrollable elder-table-scroll\"\n elderInfiniteScroll\n [eventThrottle]=\"150\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"!isContinuable || !(canLoadMore$ | async)\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <table\n mat-table\n class=\"elder-mat-inner-table\"\n [trackBy]=\"trackByFn\"\n [dataSource]=\"$any(dataContext$ | async)\"\n [elderDataContextSelection]=\"dataContext$ | async\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n >\n <!-- selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef>\n <elder-selection-master-checkbox></elder-selection-master-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let entity\">\n <div class=\"layout-row place-start-center\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selectionModel.toggle(entity) : null\"\n [checked]=\"selectionModel.observeSelection(entity) | async\"\n [disabled]=\"!selectionModel.isSelectable(entity)\"\n class=\"elder-table-checkbox\"\n [class.elder-table-checkbox-visible]=\"\n (dataSelection.selectionState$ | async).anySelected\n \"\n >\n </mat-checkbox>\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n </ng-container>\n\n @if (tableModel.displayedColumnsInner$ | async; as displayedColumnsInner) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n <tr\n mat-row\n class=\"elder-table-row\"\n *matRowDef=\"let entity; columns: displayedColumnsInner\"\n [elderTableRow]=\"entity\"\n [class.dense]=\"dense\"\n [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n [class.elder-row-removing]=\"removingField && entity[removingField]\"\n [class.elder-table-row-selected]=\"\n interactionMode === 'selection' && selectionModel.observeSelection(entity) | async\n \"\n (click)=\"onItemClick(entity)\"\n (dblclick)=\"onItemDoubleClick(entity)\"\n ></tr>\n @if (showFooter) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n }\n }\n </table>\n </div>\n\n @if (!isDataValid(dataContext?.data | async)) {\n <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n </elder-data-context-state-indicator>\n }\n\n <mat-progress-bar\n class=\"flex-none mt-auto\"\n [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n [color]=\"(dataContext?.status | async)?.hasError ? 'warn' : 'primary'\"\n >\n </mat-progress-bar>\n\n @if (isActivePaged) {\n @if (dataActivePaged.page | async; as page) {\n <!-- Optional Paginator Toolbar -->\n <mat-paginator\n class=\"flex-none\"\n [length]=\"dataContext?.total | async\"\n [pageIndex]=\"page?.index\"\n [pageSize]=\"page?.size\"\n [pageSizeOptions]=\"pageSizeOptions\"\n >\n </mat-paginator>\n }\n }\n\n <!-- Optional Continuation Footer -->\n @if (isContinuable) {\n <div class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n <span class=\"mat-caption noselect\" style=\"color: gray\">\n {{ (dataContext?.data | async)?.length }} / {{ total$ | async }}\n </span>\n\n <button\n mat-icon-button\n type=\"button\"\n color=\"primary\"\n [disabled]=\"!(canLoadMore$ | async)\"\n (click)=\"dataContinuable.loadMore()\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n </div>\n }\n </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.elder-mat-inner-table{width:100%}.elder-table-row.dense{height:42px!important}.elder-mat-table-container{border-radius:var(--elder-border-radius-sm);overflow:hidden}.mat-column-select{overflow:initial;min-width:72px;max-width:5%;width:72px}.elder-row-removing{text-decoration:line-through}.elder-row-hidden{display:none}.elder-table-row{cursor:pointer}.elder-table-hint{color:gray}.elder-table-footer{height:var(--elder-data-element-footer-height)}.elder-table-checkbox{opacity:.25;transition:opacity .5s ease-in-out}.elder-table-row:hover .elder-table-checkbox{opacity:.9}.elder-table-checkbox-visible{opacity:1}.elder-table-inner{background-color:var(--md-sys-color-surface-container-lowest)}.elder-table-row:focus{box-shadow:none;outline-style:none}.elder-table-row:focus td{background-color:var(--elder-color-highlight-strong);border-bottom:var(--md-sys-color-tertiary-fixed)}.elder-table-row.elder-table-row-activated{background-color:var(--elder-color-highlight-strong)}.elder-table-row.elder-table-row-selected{background-color:var(--elder-color-highlight-variant)}.elder-table-row:hover{background-color:var(--elder-color-highlight-light);cursor:pointer}.elder-mat-table-flat{border:var(--elder-border-light)}.elder-table{background-color:var(--mat-table-background-color)}.elder-table .mat-mdc-paginator .mat-mdc-form-field,.elder-table .mat-mdc-paginator .mat-mdc-floating-label,.elder-table .mat-mdc-paginator .mat-mdc-select{line-height:unset}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-header-cell{padding-left:8px;padding-right:12px;overflow-wrap:normal;word-wrap:normal;word-break:normal;white-space:unset;-webkit-hyphens:auto;hyphens:auto}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:20px}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-header-cell:last-of-type{padding-right:8px}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-header-cell:last-of-type[mat-sort-header]:not([arrowposition=before]){padding-right:8px}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-header-cell[mat-sort-header][arrowposition=before]{padding-left:0}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-header-cell[mat-sort-header]:not([arrowposition=before]){padding-right:12px}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-header-cell>.mat-sort-header-container{display:inline-flex}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-cell{padding-left:8px;padding-right:12px;overflow-wrap:normal;word-wrap:normal;word-break:normal;white-space:unset;-webkit-hyphens:auto;hyphens:auto}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-cell:first-of-type{padding-left:20px}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-cell:last-of-type{padding-right:8px}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-footer-cell{padding-left:8px;padding-right:12px;font-weight:700}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-footer-cell:first-of-type{padding-left:20px}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-footer-cell:last-of-type{padding-right:8px}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-footer-cell .mat-mdc-paginator{margin-left:-8px;margin-right:-8px}.mat-mdc-row{background-color:var(--md-sys-color-surface-container-lowest)}.mat-mdc-header-row{background:var(--md-sys-color-surface-container-lowest)!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow"], exportAs: ["elderTableRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15930
15930
|
}
|
|
15931
15931
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderTableComponent, decorators: [{
|
|
15932
15932
|
type: Component,
|
|
@@ -15966,7 +15966,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
15966
15966
|
MatIconButton,
|
|
15967
15967
|
MatIcon,
|
|
15968
15968
|
AsyncPipe,
|
|
15969
|
-
], template: "<div class=\"full\" style=\"overflow: hidden\">\n <div class=\"layout-col elder-table full\">\n <!-- Toolbar Rows -->\n @for (toolbarRowTemplate of toolbarRowTemplates$ | async; track toolbarRowTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n <!-- Scrollable Table -->\n <div\n class=\"elder-table-inner layout-col {{\n isDataValid(dataContext?.data | async) ? 'flex' : ''\n }} scrollable elder-table-scroll\"\n elderInfiniteScroll\n [eventThrottle]=\"150\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"!isContinuable || !(canLoadMore$ | async)\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <table\n mat-table\n class=\"elder-mat-inner-table\"\n [trackBy]=\"trackByFn\"\n [dataSource]=\"$any(dataContext$ | async)\"\n [elderDataContextSelection]=\"dataContext$ | async\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n >\n <!-- selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef>\n <elder-selection-master-checkbox></elder-selection-master-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let entity\">\n <div class=\"layout-row place-start-center\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selectionModel.toggle(entity) : null\"\n [checked]=\"selectionModel.observeSelection(entity) | async\"\n [disabled]=\"!selectionModel.isSelectable(entity)\"\n class=\"elder-table-checkbox\"\n [class.elder-table-checkbox-visible]=\"\n (dataSelection.selectionState$ | async).anySelected\n \"\n >\n </mat-checkbox>\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n </ng-container>\n\n @if (tableModel.displayedColumnsInner$ | async; as displayedColumnsInner) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n <tr\n mat-row\n class=\"elder-table-row\"\n *matRowDef=\"let entity; columns: displayedColumnsInner\"\n [elderTableRow]=\"entity\"\n [class.dense]=\"dense\"\n [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n [class.elder-row-removing]=\"removingField && entity[removingField]\"\n [class.elder-table-row-selected]=\"\n interactionMode === 'selection' && selectionModel.observeSelection(entity) | async\n \"\n (click)=\"onItemClick(entity)\"\n (dblclick)=\"onItemDoubleClick(entity)\"\n ></tr>\n @if (showFooter) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n }\n }\n </table>\n </div>\n\n @if (!isDataValid(dataContext?.data | async)) {\n <elder-data-context-state-indicator class=\"flex
|
|
15969
|
+
], template: "<div class=\"full\" style=\"overflow: hidden\">\n <div class=\"layout-col elder-table full\">\n <!-- Toolbar Rows -->\n @for (toolbarRowTemplate of toolbarRowTemplates$ | async; track toolbarRowTemplate) {\n <ng-template\n *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n ></ng-template>\n }\n\n <!-- Scrollable Table -->\n <div\n class=\"elder-table-inner layout-col {{\n isDataValid(dataContext?.data | async) ? 'flex' : ''\n }} scrollable elder-table-scroll\"\n elderInfiniteScroll\n [eventThrottle]=\"150\"\n [offsetFactor]=\"2\"\n [ignoreScrollEvent]=\"!isContinuable || !(canLoadMore$ | async)\"\n (closeToEnd)=\"requestMoreDataZoned($event)\"\n >\n <table\n mat-table\n class=\"elder-mat-inner-table\"\n [trackBy]=\"trackByFn\"\n [dataSource]=\"$any(dataContext$ | async)\"\n [elderDataContextSelection]=\"dataContext$ | async\"\n #dataSelection=\"elderDataContextSelection\"\n [elderDataContextSelectionModel]=\"selectionModel\"\n >\n <!-- selection Column -->\n <ng-container matColumnDef=\"select\">\n <th mat-header-cell *matHeaderCellDef>\n <elder-selection-master-checkbox></elder-selection-master-checkbox>\n </th>\n <td mat-cell *matCellDef=\"let entity\">\n <div class=\"layout-row place-start-center\">\n <mat-checkbox\n (click)=\"$event.stopPropagation()\"\n (change)=\"$event ? selectionModel.toggle(entity) : null\"\n [checked]=\"selectionModel.observeSelection(entity) | async\"\n [disabled]=\"!selectionModel.isSelectable(entity)\"\n class=\"elder-table-checkbox\"\n [class.elder-table-checkbox-visible]=\"\n (dataSelection.selectionState$ | async).anySelected\n \"\n >\n </mat-checkbox>\n </div>\n </td>\n <td mat-footer-cell *matFooterCellDef></td>\n </ng-container>\n\n @if (tableModel.displayedColumnsInner$ | async; as displayedColumnsInner) {\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n <tr\n mat-row\n class=\"elder-table-row\"\n *matRowDef=\"let entity; columns: displayedColumnsInner\"\n [elderTableRow]=\"entity\"\n [class.dense]=\"dense\"\n [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n [class.elder-row-removing]=\"removingField && entity[removingField]\"\n [class.elder-table-row-selected]=\"\n interactionMode === 'selection' && selectionModel.observeSelection(entity) | async\n \"\n (click)=\"onItemClick(entity)\"\n (dblclick)=\"onItemDoubleClick(entity)\"\n ></tr>\n @if (showFooter) {\n <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n }\n }\n </table>\n </div>\n\n @if (!isDataValid(dataContext?.data | async)) {\n <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n </elder-data-context-state-indicator>\n }\n\n <mat-progress-bar\n class=\"flex-none mt-auto\"\n [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n [color]=\"(dataContext?.status | async)?.hasError ? 'warn' : 'primary'\"\n >\n </mat-progress-bar>\n\n @if (isActivePaged) {\n @if (dataActivePaged.page | async; as page) {\n <!-- Optional Paginator Toolbar -->\n <mat-paginator\n class=\"flex-none\"\n [length]=\"dataContext?.total | async\"\n [pageIndex]=\"page?.index\"\n [pageSize]=\"page?.size\"\n [pageSizeOptions]=\"pageSizeOptions\"\n >\n </mat-paginator>\n }\n }\n\n <!-- Optional Continuation Footer -->\n @if (isContinuable) {\n <div class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n <span class=\"mat-caption noselect\" style=\"color: gray\">\n {{ (dataContext?.data | async)?.length }} / {{ total$ | async }}\n </span>\n\n <button\n mat-icon-button\n type=\"button\"\n color=\"primary\"\n [disabled]=\"!(canLoadMore$ | async)\"\n (click)=\"dataContinuable.loadMore()\"\n >\n <mat-icon>keyboard_arrow_down</mat-icon>\n </button>\n </div>\n }\n </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.elder-mat-inner-table{width:100%}.elder-table-row.dense{height:42px!important}.elder-mat-table-container{border-radius:var(--elder-border-radius-sm);overflow:hidden}.mat-column-select{overflow:initial;min-width:72px;max-width:5%;width:72px}.elder-row-removing{text-decoration:line-through}.elder-row-hidden{display:none}.elder-table-row{cursor:pointer}.elder-table-hint{color:gray}.elder-table-footer{height:var(--elder-data-element-footer-height)}.elder-table-checkbox{opacity:.25;transition:opacity .5s ease-in-out}.elder-table-row:hover .elder-table-checkbox{opacity:.9}.elder-table-checkbox-visible{opacity:1}.elder-table-inner{background-color:var(--md-sys-color-surface-container-lowest)}.elder-table-row:focus{box-shadow:none;outline-style:none}.elder-table-row:focus td{background-color:var(--elder-color-highlight-strong);border-bottom:var(--md-sys-color-tertiary-fixed)}.elder-table-row.elder-table-row-activated{background-color:var(--elder-color-highlight-strong)}.elder-table-row.elder-table-row-selected{background-color:var(--elder-color-highlight-variant)}.elder-table-row:hover{background-color:var(--elder-color-highlight-light);cursor:pointer}.elder-mat-table-flat{border:var(--elder-border-light)}.elder-table{background-color:var(--mat-table-background-color)}.elder-table .mat-mdc-paginator .mat-mdc-form-field,.elder-table .mat-mdc-paginator .mat-mdc-floating-label,.elder-table .mat-mdc-paginator .mat-mdc-select{line-height:unset}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-header-cell{padding-left:8px;padding-right:12px;overflow-wrap:normal;word-wrap:normal;word-break:normal;white-space:unset;-webkit-hyphens:auto;hyphens:auto}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-header-cell:first-of-type{padding-left:20px}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-header-cell:last-of-type{padding-right:8px}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-header-cell:last-of-type[mat-sort-header]:not([arrowposition=before]){padding-right:8px}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-header-cell[mat-sort-header][arrowposition=before]{padding-left:0}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-header-cell[mat-sort-header]:not([arrowposition=before]){padding-right:12px}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-header-cell>.mat-sort-header-container{display:inline-flex}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-cell{padding-left:8px;padding-right:12px;overflow-wrap:normal;word-wrap:normal;word-break:normal;white-space:unset;-webkit-hyphens:auto;hyphens:auto}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-cell:first-of-type{padding-left:20px}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-cell:last-of-type{padding-right:8px}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-footer-cell{padding-left:8px;padding-right:12px;font-weight:700}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-footer-cell:first-of-type{padding-left:20px}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-footer-cell:last-of-type{padding-right:8px}.elder-table .elder-mat-inner-table.mat-mdc-table .mat-mdc-footer-cell .mat-mdc-paginator{margin-left:-8px;margin-right:-8px}.mat-mdc-row{background-color:var(--md-sys-color-surface-container-lowest)}.mat-mdc-header-row{background:var(--md-sys-color-surface-container-lowest)!important}\n"] }]
|
|
15970
15970
|
}], ctorParameters: () => [{ type: ElderTableModel }, { type: SelectionModel, decorators: [{
|
|
15971
15971
|
type: Optional
|
|
15972
15972
|
}] }, { type: ElderDataViewOptionsProvider, decorators: [{
|
|
@@ -22485,7 +22485,7 @@ class ElderSelectComponent extends ElderSelectBase {
|
|
|
22485
22485
|
provide: ELDER_SELECT_BASE,
|
|
22486
22486
|
useExisting: forwardRef(() => ElderSelectComponent),
|
|
22487
22487
|
},
|
|
22488
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (entityWrapped(); as entityWrapper) {\n <div class=\"layout-row place-start-center elder-flex-control\">\n @if (state(); as state) {\n @if (state?.error || icon) {\n <div class=\"elder-input-prefix-icon-container flex-none\">\n @if (icon) {\n <mat-icon\n disabled\n class=\"elder-mdc-control-icon elder-icon-small noselect clickable-icon\"\n [class.loading]=\"state.loading\"\n [color]=\"state?.error ? 'warn' : focused ? 'primary' : undefined\"\n (click)=\"onCurrentClicked(entity)\"\n >\n {{ icon }}\n </mat-icon>\n } @else if (state?.error) {\n <mat-icon\n class=\"elder-mdc-control-icon elder-icon-small noselect\"\n color=\"warn\"\n [matTooltip]=\"state?.error\"\n >\n warning\n </mat-icon>\n }\n </div>\n }\n }\n\n <!-- A dynamic input -->\n <input\n #input\n matInput\n type=\"text\"\n class=\"flex-grow elder-select-input mdc-text-field__input\"\n [disabled]=\"!!disabled\"\n [required]=\"!!required\"\n [readonly]=\"readonly || !autocomplete\"\n [name]=\"ngControl?.name + '-inner-input'\"\n [placeholder]=\"placeholderS() | translate\"\n [matAutocomplete]\n #autoTrigger=\"matAutocompleteTrigger\"\n [elderAutocomplete]=\"elderAuto\"\n [queryFilter]=\"queryFilter\"\n [filters]=\"filters\"\n [sorts]=\"sorts\"\n elderSelectOnTab\n [class.elder-select-dropdown-input]=\"!autocomplete\"\n [ngModel]=\"inputText()\"\n [ngModelOptions]=\"{ standalone: true, updateOn: 'submit' }\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus(autoTrigger)\"\n (click)=\"onInputClicked(autoTrigger)\"\n />\n\n <elder-suggestion-panel\n #elderAuto=\"elderSuggestionPanel\"\n [dataSource]=\"dataContextS()?.dataSource\"\n [valueTemplate]=\"valueTemplate\"\n enabled\n [displayPropertyResolver]=\"displayPropertyResolverS()\"\n [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n elderAutoSelectSuggestFirst\n (optionSelected)=\"onOptionSelected($any($event))\"\n ></elder-suggestion-panel>\n\n <div class=\"layout-row place-start-center flex-none\">\n @if (!selectionPopup && !autocomplete && !entityWrapper.displayRemove) {\n <mat-icon\n class=\"elder-mdc-control-icon elder-select-arrow noselect\"\n (click)=\"onInputClicked(autoTrigger)\"\n >\n arrow_drop_down\n </mat-icon>\n }\n\n @if (selectionPopup && !entityWrapper.displayRemove) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"elder-control-icon-button\"\n [disabled]=\"isLocked\"\n (click)=\"openSelectionPopup($event)\"\n aria-label=\"Search\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n </button>\n }\n\n @if (entityWrapper.displayRemove && !this.readonlyS()) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"elder-control-icon-button\"\n [disabled]=\"isLockedS()\"\n (click)=\"clear($event)\"\n aria-label=\"Clear\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-mdc-control-icon\">close</mat-icon>\n </button>\n }\n </div>\n </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 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: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { kind: "directive", type: ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderAutocomplete"] }, { kind: "component", type: ElderSuggestionPanelComponent, selector: "elder-suggestion-panel", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "optionValueConverterFn", "enabled", "valueTemplate", "dataSource", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderSuggestionPanel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "directive", type: ElderAutoSelectSuggestFirstDirective, selector: "[elderAutoSelectSuggestFirst]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
22488
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (entityWrapped(); as entityWrapper) {\n <div class=\"layout-row place-start-center elder-flex-control\">\n @if (state(); as state) {\n @if (state?.error || icon) {\n <div class=\"elder-input-prefix-icon-container flex-none\">\n @if (icon) {\n <mat-icon\n disabled\n class=\"elder-mdc-control-icon elder-icon-small noselect clickable-icon\"\n [class.loading]=\"state.loading\"\n [color]=\"state?.error ? 'warn' : focused ? 'primary' : undefined\"\n (click)=\"onCurrentClicked(entity)\"\n >\n {{ icon }}\n </mat-icon>\n } @else if (state?.error) {\n <mat-icon\n class=\"elder-mdc-control-icon elder-icon-small noselect\"\n color=\"warn\"\n [matTooltip]=\"state?.error\"\n >\n warning\n </mat-icon>\n }\n </div>\n }\n }\n\n <!-- A dynamic input -->\n <input\n #input\n matInput\n type=\"text\"\n class=\"flex-grow elder-select-input mdc-text-field__input\"\n [disabled]=\"!!disabled\"\n [required]=\"!!required\"\n [readonly]=\"readonly || !autocomplete\"\n [name]=\"ngControl?.name + '-inner-input'\"\n [placeholder]=\"placeholderS() | translate\"\n [matAutocomplete]\n #autoTrigger=\"matAutocompleteTrigger\"\n [elderAutocomplete]=\"elderAuto\"\n [queryFilter]=\"queryFilter\"\n [filters]=\"filters\"\n [sorts]=\"sorts\"\n elderSelectOnTab\n [class.elder-select-dropdown-input]=\"!autocomplete\"\n [ngModel]=\"inputText()\"\n [ngModelOptions]=\"{ standalone: true, updateOn: 'submit' }\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus(autoTrigger)\"\n (click)=\"onInputClicked(autoTrigger)\"\n />\n\n <elder-suggestion-panel\n #elderAuto=\"elderSuggestionPanel\"\n [dataSource]=\"dataContextS()?.dataSource\"\n [valueTemplate]=\"valueTemplate\"\n enabled\n [displayPropertyResolver]=\"displayPropertyResolverS()\"\n [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n elderAutoSelectSuggestFirst\n (optionSelected)=\"onOptionSelected($any($event))\"\n ></elder-suggestion-panel>\n\n <div class=\"layout-row place-start-center flex-none\">\n @if (!selectionPopup && !autocomplete && !entityWrapper.displayRemove) {\n <mat-icon\n class=\"elder-mdc-control-icon elder-select-arrow noselect\"\n (click)=\"onInputClicked(autoTrigger)\"\n >\n arrow_drop_down\n </mat-icon>\n }\n\n @if (selectionPopup && !entityWrapper.displayRemove) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"elder-control-icon-button\"\n [disabled]=\"isLocked\"\n (click)=\"openSelectionPopup($event)\"\n aria-label=\"Search\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n </button>\n }\n\n @if (entityWrapper.displayRemove && !this.readonlyS()) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"elder-control-icon-button\"\n [disabled]=\"isLockedS()\"\n (click)=\"clear($event)\"\n aria-label=\"Clear\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-mdc-control-icon\">close</mat-icon>\n </button>\n }\n </div>\n </div>\n}\n", styles: ["@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon,.elder-select-dropdown-input{cursor:pointer}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: 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: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { kind: "directive", type: ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderAutocomplete"] }, { kind: "component", type: ElderSuggestionPanelComponent, selector: "elder-suggestion-panel", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "optionValueConverterFn", "enabled", "valueTemplate", "dataSource", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderSuggestionPanel"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "directive", type: ElderAutoSelectSuggestFirstDirective, selector: "[elderAutoSelectSuggestFirst]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
22489
22489
|
}
|
|
22490
22490
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderSelectComponent, decorators: [{
|
|
22491
22491
|
type: Component,
|
|
@@ -22508,7 +22508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
22508
22508
|
ElderStopEventPropagationDirective,
|
|
22509
22509
|
TranslateModule,
|
|
22510
22510
|
ElderAutoSelectSuggestFirstDirective,
|
|
22511
|
-
], template: "@if (entityWrapped(); as entityWrapper) {\n <div class=\"layout-row place-start-center elder-flex-control\">\n @if (state(); as state) {\n @if (state?.error || icon) {\n <div class=\"elder-input-prefix-icon-container flex-none\">\n @if (icon) {\n <mat-icon\n disabled\n class=\"elder-mdc-control-icon elder-icon-small noselect clickable-icon\"\n [class.loading]=\"state.loading\"\n [color]=\"state?.error ? 'warn' : focused ? 'primary' : undefined\"\n (click)=\"onCurrentClicked(entity)\"\n >\n {{ icon }}\n </mat-icon>\n } @else if (state?.error) {\n <mat-icon\n class=\"elder-mdc-control-icon elder-icon-small noselect\"\n color=\"warn\"\n [matTooltip]=\"state?.error\"\n >\n warning\n </mat-icon>\n }\n </div>\n }\n }\n\n <!-- A dynamic input -->\n <input\n #input\n matInput\n type=\"text\"\n class=\"flex-grow elder-select-input mdc-text-field__input\"\n [disabled]=\"!!disabled\"\n [required]=\"!!required\"\n [readonly]=\"readonly || !autocomplete\"\n [name]=\"ngControl?.name + '-inner-input'\"\n [placeholder]=\"placeholderS() | translate\"\n [matAutocomplete]\n #autoTrigger=\"matAutocompleteTrigger\"\n [elderAutocomplete]=\"elderAuto\"\n [queryFilter]=\"queryFilter\"\n [filters]=\"filters\"\n [sorts]=\"sorts\"\n elderSelectOnTab\n [class.elder-select-dropdown-input]=\"!autocomplete\"\n [ngModel]=\"inputText()\"\n [ngModelOptions]=\"{ standalone: true, updateOn: 'submit' }\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus(autoTrigger)\"\n (click)=\"onInputClicked(autoTrigger)\"\n />\n\n <elder-suggestion-panel\n #elderAuto=\"elderSuggestionPanel\"\n [dataSource]=\"dataContextS()?.dataSource\"\n [valueTemplate]=\"valueTemplate\"\n enabled\n [displayPropertyResolver]=\"displayPropertyResolverS()\"\n [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n elderAutoSelectSuggestFirst\n (optionSelected)=\"onOptionSelected($any($event))\"\n ></elder-suggestion-panel>\n\n <div class=\"layout-row place-start-center flex-none\">\n @if (!selectionPopup && !autocomplete && !entityWrapper.displayRemove) {\n <mat-icon\n class=\"elder-mdc-control-icon elder-select-arrow noselect\"\n (click)=\"onInputClicked(autoTrigger)\"\n >\n arrow_drop_down\n </mat-icon>\n }\n\n @if (selectionPopup && !entityWrapper.displayRemove) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"elder-control-icon-button\"\n [disabled]=\"isLocked\"\n (click)=\"openSelectionPopup($event)\"\n aria-label=\"Search\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n </button>\n }\n\n @if (entityWrapper.displayRemove && !this.readonlyS()) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"elder-control-icon-button\"\n [disabled]=\"isLockedS()\"\n (click)=\"clear($event)\"\n aria-label=\"Clear\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-mdc-control-icon\">close</mat-icon>\n </button>\n }\n </div>\n </div>\n}\n" }]
|
|
22511
|
+
], template: "@if (entityWrapped(); as entityWrapper) {\n <div class=\"layout-row place-start-center elder-flex-control\">\n @if (state(); as state) {\n @if (state?.error || icon) {\n <div class=\"elder-input-prefix-icon-container flex-none\">\n @if (icon) {\n <mat-icon\n disabled\n class=\"elder-mdc-control-icon elder-icon-small noselect clickable-icon\"\n [class.loading]=\"state.loading\"\n [color]=\"state?.error ? 'warn' : focused ? 'primary' : undefined\"\n (click)=\"onCurrentClicked(entity)\"\n >\n {{ icon }}\n </mat-icon>\n } @else if (state?.error) {\n <mat-icon\n class=\"elder-mdc-control-icon elder-icon-small noselect\"\n color=\"warn\"\n [matTooltip]=\"state?.error\"\n >\n warning\n </mat-icon>\n }\n </div>\n }\n }\n\n <!-- A dynamic input -->\n <input\n #input\n matInput\n type=\"text\"\n class=\"flex-grow elder-select-input mdc-text-field__input\"\n [disabled]=\"!!disabled\"\n [required]=\"!!required\"\n [readonly]=\"readonly || !autocomplete\"\n [name]=\"ngControl?.name + '-inner-input'\"\n [placeholder]=\"placeholderS() | translate\"\n [matAutocomplete]\n #autoTrigger=\"matAutocompleteTrigger\"\n [elderAutocomplete]=\"elderAuto\"\n [queryFilter]=\"queryFilter\"\n [filters]=\"filters\"\n [sorts]=\"sorts\"\n elderSelectOnTab\n [class.elder-select-dropdown-input]=\"!autocomplete\"\n [ngModel]=\"inputText()\"\n [ngModelOptions]=\"{ standalone: true, updateOn: 'submit' }\"\n (blur)=\"onInputBlur($event)\"\n (focus)=\"onInputFocus(autoTrigger)\"\n (click)=\"onInputClicked(autoTrigger)\"\n />\n\n <elder-suggestion-panel\n #elderAuto=\"elderSuggestionPanel\"\n [dataSource]=\"dataContextS()?.dataSource\"\n [valueTemplate]=\"valueTemplate\"\n enabled\n [displayPropertyResolver]=\"displayPropertyResolverS()\"\n [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n elderAutoSelectSuggestFirst\n (optionSelected)=\"onOptionSelected($any($event))\"\n ></elder-suggestion-panel>\n\n <div class=\"layout-row place-start-center flex-none\">\n @if (!selectionPopup && !autocomplete && !entityWrapper.displayRemove) {\n <mat-icon\n class=\"elder-mdc-control-icon elder-select-arrow noselect\"\n (click)=\"onInputClicked(autoTrigger)\"\n >\n arrow_drop_down\n </mat-icon>\n }\n\n @if (selectionPopup && !entityWrapper.displayRemove) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"elder-control-icon-button\"\n [disabled]=\"isLocked\"\n (click)=\"openSelectionPopup($event)\"\n aria-label=\"Search\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n </button>\n }\n\n @if (entityWrapper.displayRemove && !this.readonlyS()) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"elder-control-icon-button\"\n [disabled]=\"isLockedS()\"\n (click)=\"clear($event)\"\n aria-label=\"Clear\"\n elderStopEventPropagation\n tabIndex=\"-1\"\n >\n <mat-icon class=\"elder-mdc-control-icon\">close</mat-icon>\n </button>\n }\n </div>\n </div>\n}\n", styles: ["@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon,.elder-select-dropdown-input{cursor:pointer}\n"] }]
|
|
22512
22512
|
}], ctorParameters: () => [], propDecorators: { inputRef: [{
|
|
22513
22513
|
type: ViewChild,
|
|
22514
22514
|
args: ['input']
|
|
@@ -24077,7 +24077,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
24077
24077
|
class SelectChipSpecUtil {
|
|
24078
24078
|
static { this.DefaultChipSpec = {
|
|
24079
24079
|
colorSpec: {
|
|
24080
|
-
themeColor:
|
|
24080
|
+
themeColor: 'primary',
|
|
24081
24081
|
stateColor: undefined,
|
|
24082
24082
|
levelColor: undefined,
|
|
24083
24083
|
},
|
|
@@ -24620,7 +24620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
24620
24620
|
class SelectOptionChipSpecUtil {
|
|
24621
24621
|
static { this.DefaultChipSpec = {
|
|
24622
24622
|
colorSpec: {
|
|
24623
|
-
themeColor:
|
|
24623
|
+
themeColor: 'primary',
|
|
24624
24624
|
stateColor: undefined,
|
|
24625
24625
|
levelColor: undefined,
|
|
24626
24626
|
},
|
|
@@ -26539,11 +26539,11 @@ class ElderNavListComponent {
|
|
|
26539
26539
|
}
|
|
26540
26540
|
}
|
|
26541
26541
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderNavListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26542
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderNavListComponent, isStandalone: true, selector: "elder-nav-list", inputs: { compareWith: "compareWith", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"layout-col full elder-nav-list-full\" tabindex=\"0\">\n <div\n class=\"layout-col p-sm
|
|
26542
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderNavListComponent, isStandalone: true, selector: "elder-nav-list", inputs: { compareWith: "compareWith", value: "value" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"layout-col full elder-nav-list-full\" tabindex=\"0\">\n <div\n class=\"layout-col p-sm flex scrollable mat-mdc-nav-list mat-mdc-list-base mdc-list\"\n style=\"overflow-y: scroll\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.elder-nav-list-full{min-width:120px}.elder-nav-list-full:focus{outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26543
26543
|
}
|
|
26544
26544
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderNavListComponent, decorators: [{
|
|
26545
26545
|
type: Component,
|
|
26546
|
-
args: [{ selector: 'elder-nav-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"layout-col full elder-nav-list-full\" tabindex=\"0\">\n <div\n class=\"layout-col p-sm
|
|
26546
|
+
args: [{ selector: 'elder-nav-list', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"layout-col full elder-nav-list-full\" tabindex=\"0\">\n <div\n class=\"layout-col p-sm flex scrollable mat-mdc-nav-list mat-mdc-list-base mdc-list\"\n style=\"overflow-y: scroll\"\n >\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}.scrollable{overflow-y:auto;-webkit-overflow-scrolling:touch}.elder-nav-list-full{min-width:120px}.elder-nav-list-full:focus{outline:none}\n"] }]
|
|
26547
26547
|
}], ctorParameters: () => [], propDecorators: { compareWith: [{
|
|
26548
26548
|
type: Input
|
|
26549
26549
|
}], valueChange: [{
|
|
@@ -26666,7 +26666,7 @@ class ElderNavLinkComponent {
|
|
|
26666
26666
|
return this.navList.isActive(this.value);
|
|
26667
26667
|
}
|
|
26668
26668
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderNavLinkComponent, deps: [{ token: ElderNavListComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26669
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderNavLinkComponent, isStandalone: true, selector: "elder-nav-link", inputs: { title: "title", queryParamsHandling: "queryParamsHandling", queryParams: "queryParams", icon: "icon", fontIcon: "fontIcon", fontSet: "fontSet", svgIcon: "svgIcon", routerLink: "routerLink", href: "href", target: "target", value: "value", disabled: "disabled" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.tabindex": "this.tabIndex" } }, viewQueries: [{ propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<!-- Router Link -->\n<ng-container *ngIf=\"model$ | async as model\">\n <a\n *ngIf=\"model.routerLink as routerLink\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n [routerLink]=\"routerLink\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [queryParams]=\"queryParams\"\n routerLinkActive=\"dummy\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n\n <!-- Href Link -->\n <a\n *ngIf=\"model.href as href\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n [href]=\"href\"\n [target]=\"model.hrefTarget\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n\n <!-- Simple Button -->\n <a\n *ngIf=\"!model.href && !model.routerLink\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n (click)=\"itemClick($event)\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n</ng-container>\n\n<ng-template #defaultLinkTemplate>\n <div class=\"layout-row place-start-center flex gap-md noselect\">\n <mat-icon *ngIf=\"!(!icon && !title)\" [fontIcon]=\"fontIcon\" [fontSet]=\"fontSet\">\n {{ icon }}\n </mat-icon>\n <mat-icon *ngIf=\"svgIcon\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span *ngIf=\"title\" class=\"noselect\">\n {{ title | translate }}\n </span>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".nav-link{text-decoration:none;padding-left:16px;padding-right:16px;min-height:
|
|
26669
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderNavLinkComponent, isStandalone: true, selector: "elder-nav-link", inputs: { title: "title", queryParamsHandling: "queryParamsHandling", queryParams: "queryParams", icon: "icon", fontIcon: "fontIcon", fontSet: "fontSet", svgIcon: "svgIcon", routerLink: "routerLink", href: "href", target: "target", value: "value", disabled: "disabled" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.tabindex": "this.tabIndex" } }, viewQueries: [{ propertyName: "routerLinkActive", first: true, predicate: RouterLinkActive, descendants: true }], ngImport: i0, template: "<!-- Router Link -->\n<ng-container *ngIf=\"model$ | async as model\">\n <a\n *ngIf=\"model.routerLink as routerLink\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n [routerLink]=\"routerLink\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [queryParams]=\"queryParams\"\n routerLinkActive=\"dummy\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n\n <!-- Href Link -->\n <a\n *ngIf=\"model.href as href\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n [href]=\"href\"\n [target]=\"model.hrefTarget\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n\n <!-- Simple Button -->\n <a\n *ngIf=\"!model.href && !model.routerLink\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n (click)=\"itemClick($event)\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n</ng-container>\n\n<ng-template #defaultLinkTemplate>\n <div class=\"layout-row place-start-center flex gap-md noselect\">\n <mat-icon *ngIf=\"!(!icon && !title)\" [fontIcon]=\"fontIcon\" [fontSet]=\"fontSet\">\n {{ icon }}\n </mat-icon>\n <mat-icon *ngIf=\"svgIcon\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span *ngIf=\"title\" class=\"noselect\">\n {{ title | translate }}\n </span>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".nav-link{text-decoration:none;padding-left:16px;padding-right:16px;min-height:var(--elder-nav-item-height);border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s,color .5s}.nav-link .mat-icon{height:32px;width:32px;font-size:24px;padding:4px}.nav-link.nav-link-clickable{cursor:pointer}.nav-link.nav-link-clickable:hover{background-color:var(--elder-nav-link-hover-color)!important}.nav-link.nav-link-disabled{cursor:default}.nav-link.nav-link-active{background-color:var(--elder-nav-link-active-color);color:var(--md-sys-color-primary)}.nav-link.nav-link-active .mat-icon{color:var(--md-sys-color-on-teriary)}.nav-link.nav-link-inactive,.nav-link.nav-link-inactive .mat-icon{color:var(--md-sys-color-on-surface)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26670
26670
|
}
|
|
26671
26671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderNavLinkComponent, decorators: [{
|
|
26672
26672
|
type: Component,
|
|
@@ -26679,7 +26679,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
26679
26679
|
MatIcon,
|
|
26680
26680
|
AsyncPipe,
|
|
26681
26681
|
TranslateModule,
|
|
26682
|
-
], template: "<!-- Router Link -->\n<ng-container *ngIf=\"model$ | async as model\">\n <a\n *ngIf=\"model.routerLink as routerLink\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n [routerLink]=\"routerLink\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [queryParams]=\"queryParams\"\n routerLinkActive=\"dummy\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n\n <!-- Href Link -->\n <a\n *ngIf=\"model.href as href\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n [href]=\"href\"\n [target]=\"model.hrefTarget\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n\n <!-- Simple Button -->\n <a\n *ngIf=\"!model.href && !model.routerLink\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n (click)=\"itemClick($event)\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n</ng-container>\n\n<ng-template #defaultLinkTemplate>\n <div class=\"layout-row place-start-center flex gap-md noselect\">\n <mat-icon *ngIf=\"!(!icon && !title)\" [fontIcon]=\"fontIcon\" [fontSet]=\"fontSet\">\n {{ icon }}\n </mat-icon>\n <mat-icon *ngIf=\"svgIcon\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span *ngIf=\"title\" class=\"noselect\">\n {{ title | translate }}\n </span>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".nav-link{text-decoration:none;padding-left:16px;padding-right:16px;min-height:
|
|
26682
|
+
], template: "<!-- Router Link -->\n<ng-container *ngIf=\"model$ | async as model\">\n <a\n *ngIf=\"model.routerLink as routerLink\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n [routerLink]=\"routerLink\"\n [queryParamsHandling]=\"queryParamsHandling\"\n [queryParams]=\"queryParams\"\n routerLinkActive=\"dummy\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n\n <!-- Href Link -->\n <a\n *ngIf=\"model.href as href\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n [href]=\"href\"\n [target]=\"model.hrefTarget\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n\n <!-- Simple Button -->\n <a\n *ngIf=\"!model.href && !model.routerLink\"\n matRipple\n [matRippleDisabled]=\"disabled\"\n class=\"layout-row place-start-center nav-link mdc-list-item mdc-list-item--with-one-line\"\n (click)=\"itemClick($event)\"\n [class.nav-link-clickable]=\"!disabled\"\n [class.nav-link-disabled]=\"disabled\"\n [class.nav-link-active]=\"active$ | async\"\n [class.nav-link-inactive]=\"(active$ | async) === false\"\n >\n <ng-container [ngTemplateOutlet]=\"defaultLinkTemplate\"></ng-container>\n </a>\n</ng-container>\n\n<ng-template #defaultLinkTemplate>\n <div class=\"layout-row place-start-center flex gap-md noselect\">\n <mat-icon *ngIf=\"!(!icon && !title)\" [fontIcon]=\"fontIcon\" [fontSet]=\"fontSet\">\n {{ icon }}\n </mat-icon>\n <mat-icon *ngIf=\"svgIcon\" [svgIcon]=\"svgIcon\"></mat-icon>\n <span *ngIf=\"title\" class=\"noselect\">\n {{ title | translate }}\n </span>\n <ng-content></ng-content>\n </div>\n</ng-template>\n", styles: [".nav-link{text-decoration:none;padding-left:16px;padding-right:16px;min-height:var(--elder-nav-item-height);border-radius:var(--elder-border-radius-sm);overflow:hidden;transition:background-color .5s,color .5s}.nav-link .mat-icon{height:32px;width:32px;font-size:24px;padding:4px}.nav-link.nav-link-clickable{cursor:pointer}.nav-link.nav-link-clickable:hover{background-color:var(--elder-nav-link-hover-color)!important}.nav-link.nav-link-disabled{cursor:default}.nav-link.nav-link-active{background-color:var(--elder-nav-link-active-color);color:var(--md-sys-color-primary)}.nav-link.nav-link-active .mat-icon{color:var(--md-sys-color-on-teriary)}.nav-link.nav-link-inactive,.nav-link.nav-link-inactive .mat-icon{color:var(--md-sys-color-on-surface)}\n"] }]
|
|
26683
26683
|
}], ctorParameters: () => [{ type: ElderNavListComponent }], propDecorators: { tabIndex: [{
|
|
26684
26684
|
type: HostBinding,
|
|
26685
26685
|
args: ['attr.tabindex']
|
|
@@ -26783,7 +26783,7 @@ class ElderNavGroupComponent {
|
|
|
26783
26783
|
return this.navList.isActive(this.value);
|
|
26784
26784
|
}
|
|
26785
26785
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderNavGroupComponent, deps: [{ token: ElderNavListComponent }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26786
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderNavGroupComponent, isStandalone: true, selector: "elder-nav-group", inputs: { value: "value" }, outputs: { clicked: "clicked" }, queries: [{ propertyName: "children", predicate: ElderNavLinkComponent }], ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n <div class=\"layout-col nav-group\">\n <a\n matRipple\n class=\"layout-row place-start-center nav-group-button mat-button-fill mdc-list-item mdc-list-item--with-one-line\"\n [class.nav-group-button-open]=\"state.isOpen\"\n [class.nav-group-button-closed]=\"!state.isOpen\"\n [class.nav-group-button-active]=\"active$ | async\"\n (click)=\"itemClick($event)\"\n >\n <div class=\"layout-row place-start-center gap-lg full noselect mdc-list-item__primary-text\">\n <ng-content></ng-content>\n <span class=\"flex\"></span>\n <mat-icon>{{ state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n </div>\n </a>\n\n <!-- Nested Items projection -->\n <div\n class=\"layout-col nav-group-items-container p-sm
|
|
26786
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderNavGroupComponent, isStandalone: true, selector: "elder-nav-group", inputs: { value: "value" }, outputs: { clicked: "clicked" }, queries: [{ propertyName: "children", predicate: ElderNavLinkComponent }], ngImport: i0, template: "<ng-container *ngIf=\"state$ | async as state\">\n <div class=\"layout-col nav-group\">\n <a\n matRipple\n class=\"layout-row place-start-center nav-group-button mat-button-fill mdc-list-item mdc-list-item--with-one-line\"\n [class.nav-group-button-open]=\"state.isOpen\"\n [class.nav-group-button-closed]=\"!state.isOpen\"\n [class.nav-group-button-active]=\"active$ | async\"\n (click)=\"itemClick($event)\"\n >\n <div class=\"layout-row place-start-center gap-lg full noselect mdc-list-item__primary-text\">\n <ng-content></ng-content>\n <span class=\"flex\"></span>\n <mat-icon>{{ state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n </div>\n </a>\n\n <!-- Nested Items projection -->\n <div\n class=\"layout-col nav-group-items-container p-sm\"\n [@openClose]=\"state.isOpen ? 'open' : 'closed'\"\n >\n <ng-content select=\"elder-nav-link\"></ng-content>\n </div>\n </div>\n</ng-container>\n", styles: [".nav-group-button-closed{padding-left:16px}.nav-group{min-height:var(--elder-nav-item-height)}.nav-group-button{padding-right:16px;min-height:var(--elder-nav-item-height);font-size:16px;font-weight:400;border-radius:var(--elder-border-radius-sm);cursor:pointer}.nav-group-button .mat-icon{height:24px;width:24px;font-size:24px;padding:4px}.nav-group-items-container{overflow:hidden}.nav-group-button:hover{background-color:var(--elder-nav-link-hover-color);transition:background-color .5s}.nav-group-button-open{padding-left:11px!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [
|
|
26787
26787
|
trigger('openClose', [
|
|
26788
26788
|
state('open', style({
|
|
26789
26789
|
height: '*',
|
|
@@ -26815,7 +26815,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
26815
26815
|
transition('open => closed', [animate('200ms')]),
|
|
26816
26816
|
transition('closed => open', [animate('200ms')]),
|
|
26817
26817
|
]),
|
|
26818
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatRipple, MatIcon, AsyncPipe], template: "<ng-container *ngIf=\"state$ | async as state\">\n <div class=\"layout-col nav-group\">\n <a\n matRipple\n class=\"layout-row place-start-center nav-group-button mat-button-fill mdc-list-item mdc-list-item--with-one-line\"\n [class.nav-group-button-open]=\"state.isOpen\"\n [class.nav-group-button-closed]=\"!state.isOpen\"\n [class.nav-group-button-active]=\"active$ | async\"\n (click)=\"itemClick($event)\"\n >\n <div class=\"layout-row place-start-center gap-lg full noselect mdc-list-item__primary-text\">\n <ng-content></ng-content>\n <span class=\"flex\"></span>\n <mat-icon>{{ state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n </div>\n </a>\n\n <!-- Nested Items projection -->\n <div\n class=\"layout-col nav-group-items-container p-sm
|
|
26818
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgIf, MatRipple, MatIcon, AsyncPipe], template: "<ng-container *ngIf=\"state$ | async as state\">\n <div class=\"layout-col nav-group\">\n <a\n matRipple\n class=\"layout-row place-start-center nav-group-button mat-button-fill mdc-list-item mdc-list-item--with-one-line\"\n [class.nav-group-button-open]=\"state.isOpen\"\n [class.nav-group-button-closed]=\"!state.isOpen\"\n [class.nav-group-button-active]=\"active$ | async\"\n (click)=\"itemClick($event)\"\n >\n <div class=\"layout-row place-start-center gap-lg full noselect mdc-list-item__primary-text\">\n <ng-content></ng-content>\n <span class=\"flex\"></span>\n <mat-icon>{{ state.isOpen ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</mat-icon>\n </div>\n </a>\n\n <!-- Nested Items projection -->\n <div\n class=\"layout-col nav-group-items-container p-sm\"\n [@openClose]=\"state.isOpen ? 'open' : 'closed'\"\n >\n <ng-content select=\"elder-nav-link\"></ng-content>\n </div>\n </div>\n</ng-container>\n", styles: [".nav-group-button-closed{padding-left:16px}.nav-group{min-height:var(--elder-nav-item-height)}.nav-group-button{padding-right:16px;min-height:var(--elder-nav-item-height);font-size:16px;font-weight:400;border-radius:var(--elder-border-radius-sm);cursor:pointer}.nav-group-button .mat-icon{height:24px;width:24px;font-size:24px;padding:4px}.nav-group-items-container{overflow:hidden}.nav-group-button:hover{background-color:var(--elder-nav-link-hover-color);transition:background-color .5s}.nav-group-button-open{padding-left:11px!important}\n"] }]
|
|
26819
26819
|
}], ctorParameters: () => [{ type: ElderNavListComponent }], propDecorators: { children: [{
|
|
26820
26820
|
type: ContentChildren,
|
|
26821
26821
|
args: [ElderNavLinkComponent]
|
|
@@ -27919,11 +27919,11 @@ class ElderAppHeaderComponent {
|
|
|
27919
27919
|
this.iconColor$.next(c);
|
|
27920
27920
|
}
|
|
27921
27921
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderAppHeaderComponent, deps: [{ token: ElderThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
27922
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderAppHeaderComponent, isStandalone: true, selector: "elder-app-header", inputs: { icon: "icon", svgIcon: "svgIcon", title: "title", subTitle: "subTitle", subTitleLink: "subTitleLink", version: "version", color: "color", iconColor: "iconColor" }, ngImport: i0, template: "<div class=\"elder-panel mat-primary layout-col full light\">\n <div class=\"layout-row flex-none p-lg\">\n <div class=\"layout-row place-center-center\">\n <a routerLink=\"/\" class=\"link-unstyled\">\n <mat-icon\n class=\"noselect title-icon svg-icon-inherit-color\"\n [svgIcon]=\"svgIcon\"\n [color]=\"iconColor$ | async\"\n >{{ icon }}</mat-icon\n >\n </a>\n </div>\n <div class=\"layout-col place-center-start\">\n <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n <div class=\"layout-row place-start-end gap-xs\">\n <a routerLink=\"/\" id=\"title\" class=\"noselect link-unstyled\" style=\"font-size: 28px\">{{\n title\n }}</a>\n <span class=\"mat-caption noselect\">\n <small>{{ version }}</small>\n </span>\n </div>\n </div>\n <div class=\"layout-row place-start-center\">\n <span class=\"mat-caption noselect\">\n <span *ngIf=\"!subTitleLink\">{{ subTitle }}</span>\n <a\n *ngIf=\"subTitleLink\"\n [href]=\"subTitleLink\"\n target=\"_blank\"\n style=\"text-decoration: none; color: inherit\"\n >{{ subTitle }}</a\n >\n </span>\n </div>\n </div>\n </div>\n\n <!-- Project child content here -->\n <ng-content></ng-content>\n</div>\n", styles: [".title-icon{font-size:42px;width:82px;height:82px;padding:20px}.link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
27922
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", type: ElderAppHeaderComponent, isStandalone: true, selector: "elder-app-header", inputs: { icon: "icon", svgIcon: "svgIcon", title: "title", subTitle: "subTitle", subTitleLink: "subTitleLink", version: "version", color: "color", iconColor: "iconColor" }, ngImport: i0, template: "<div class=\"elder-panel mat-primary layout-col full light\">\n <div class=\"layout-row flex-none p-lg pb-sm\">\n <div class=\"layout-row place-center-center\">\n <a routerLink=\"/\" class=\"link-unstyled\">\n <mat-icon\n class=\"noselect title-icon svg-icon-inherit-color\"\n [svgIcon]=\"svgIcon\"\n [color]=\"iconColor$ | async\"\n >{{ icon }}</mat-icon\n >\n </a>\n </div>\n <div class=\"layout-col place-center-start\">\n <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n <div class=\"layout-row place-start-end gap-xs\">\n <a routerLink=\"/\" id=\"title\" class=\"noselect link-unstyled\" style=\"font-size: 28px\">{{\n title\n }}</a>\n <span class=\"mat-caption noselect\">\n <small>{{ version }}</small>\n </span>\n </div>\n </div>\n <div class=\"layout-row place-start-center\">\n <span class=\"mat-caption noselect\">\n <span *ngIf=\"!subTitleLink\">{{ subTitle }}</span>\n <a\n *ngIf=\"subTitleLink\"\n [href]=\"subTitleLink\"\n target=\"_blank\"\n style=\"text-decoration: none; color: inherit\"\n >{{ subTitle }}</a\n >\n </span>\n </div>\n </div>\n </div>\n\n <!-- Project child content here -->\n <ng-content></ng-content>\n</div>\n", styles: [".title-icon{font-size:42px;width:82px;height:82px;padding:20px}.link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
27923
27923
|
}
|
|
27924
27924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ElderAppHeaderComponent, decorators: [{
|
|
27925
27925
|
type: Component,
|
|
27926
|
-
args: [{ selector: 'elder-app-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, NgIf, AsyncPipe, RouterLink], standalone: true, template: "<div class=\"elder-panel mat-primary layout-col full light\">\n <div class=\"layout-row flex-none p-lg\">\n <div class=\"layout-row place-center-center\">\n <a routerLink=\"/\" class=\"link-unstyled\">\n <mat-icon\n class=\"noselect title-icon svg-icon-inherit-color\"\n [svgIcon]=\"svgIcon\"\n [color]=\"iconColor$ | async\"\n >{{ icon }}</mat-icon\n >\n </a>\n </div>\n <div class=\"layout-col place-center-start\">\n <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n <div class=\"layout-row place-start-end gap-xs\">\n <a routerLink=\"/\" id=\"title\" class=\"noselect link-unstyled\" style=\"font-size: 28px\">{{\n title\n }}</a>\n <span class=\"mat-caption noselect\">\n <small>{{ version }}</small>\n </span>\n </div>\n </div>\n <div class=\"layout-row place-start-center\">\n <span class=\"mat-caption noselect\">\n <span *ngIf=\"!subTitleLink\">{{ subTitle }}</span>\n <a\n *ngIf=\"subTitleLink\"\n [href]=\"subTitleLink\"\n target=\"_blank\"\n style=\"text-decoration: none; color: inherit\"\n >{{ subTitle }}</a\n >\n </span>\n </div>\n </div>\n </div>\n\n <!-- Project child content here -->\n <ng-content></ng-content>\n</div>\n", styles: [".title-icon{font-size:42px;width:82px;height:82px;padding:20px}.link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}\n"] }]
|
|
27926
|
+
args: [{ selector: 'elder-app-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatIcon, NgIf, AsyncPipe, RouterLink], standalone: true, template: "<div class=\"elder-panel mat-primary layout-col full light\">\n <div class=\"layout-row flex-none p-lg pb-sm\">\n <div class=\"layout-row place-center-center\">\n <a routerLink=\"/\" class=\"link-unstyled\">\n <mat-icon\n class=\"noselect title-icon svg-icon-inherit-color\"\n [svgIcon]=\"svgIcon\"\n [color]=\"iconColor$ | async\"\n >{{ icon }}</mat-icon\n >\n </a>\n </div>\n <div class=\"layout-col place-center-start\">\n <div class=\"layout-col place-center-center\" style=\"width: 100%\">\n <div class=\"layout-row place-start-end gap-xs\">\n <a routerLink=\"/\" id=\"title\" class=\"noselect link-unstyled\" style=\"font-size: 28px\">{{\n title\n }}</a>\n <span class=\"mat-caption noselect\">\n <small>{{ version }}</small>\n </span>\n </div>\n </div>\n <div class=\"layout-row place-start-center\">\n <span class=\"mat-caption noselect\">\n <span *ngIf=\"!subTitleLink\">{{ subTitle }}</span>\n <a\n *ngIf=\"subTitleLink\"\n [href]=\"subTitleLink\"\n target=\"_blank\"\n style=\"text-decoration: none; color: inherit\"\n >{{ subTitle }}</a\n >\n </span>\n </div>\n </div>\n </div>\n\n <!-- Project child content here -->\n <ng-content></ng-content>\n</div>\n", styles: [".title-icon{font-size:42px;width:82px;height:82px;padding:20px}.link-unstyled{text-decoration:none;color:inherit}.elder-app-header-panel{background-color:var(--md-sys-color-primary)}\n"] }]
|
|
27927
27927
|
}], ctorParameters: () => [{ type: ElderThemeService }], propDecorators: { icon: [{
|
|
27928
27928
|
type: Input
|
|
27929
27929
|
}], svgIcon: [{
|