@elderbyte/ngx-starter 19.10.0 → 19.11.0
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.
|
@@ -15445,12 +15445,14 @@ class ElderChipLabelDirective {
|
|
|
15445
15445
|
this.themeColor = input(undefined, {
|
|
15446
15446
|
alias: 'color',
|
|
15447
15447
|
});
|
|
15448
|
+
this.chipSize = input('medium');
|
|
15448
15449
|
this.cssClasses = computed(() => this.buildClassesString({
|
|
15449
15450
|
themeColor: this.themeColor(),
|
|
15450
15451
|
stateColor: this.stateColor(),
|
|
15451
15452
|
levelColor: this.levelColor(),
|
|
15452
15453
|
namedColor: this.namedColor(),
|
|
15453
15454
|
}));
|
|
15455
|
+
this.sizeClass = computed(() => this.chipSize() === 'small' ? 'elder-chip-small' : '');
|
|
15454
15456
|
}
|
|
15455
15457
|
/***************************************************************************
|
|
15456
15458
|
* *
|
|
@@ -15458,9 +15460,10 @@ class ElderChipLabelDirective {
|
|
|
15458
15460
|
* *
|
|
15459
15461
|
**************************************************************************/
|
|
15460
15462
|
buildClassesString(colorSpec) {
|
|
15461
|
-
|
|
15463
|
+
const colorClasses = this.buildClasses(colorSpec)
|
|
15462
15464
|
.filter((cls) => !!cls)
|
|
15463
15465
|
.join(' ');
|
|
15466
|
+
return (colorClasses + ' ' + this.sizeClass()).trim();
|
|
15464
15467
|
}
|
|
15465
15468
|
buildClasses(colorSpec) {
|
|
15466
15469
|
return [this.baseClass, this.resolveColorClass(colorSpec) ?? 'none'];
|
|
@@ -15517,7 +15520,7 @@ class ElderChipLabelDirective {
|
|
|
15517
15520
|
}
|
|
15518
15521
|
}
|
|
15519
15522
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderChipLabelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
15520
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", type: ElderChipLabelDirective, isStandalone: true, selector: "[elderChipLabel]", inputs: { stateColor: { classPropertyName: "stateColor", publicName: "stateColor", isSignal: true, isRequired: false, transformFunction: null }, levelColor: { classPropertyName: "levelColor", publicName: "levelColor", isSignal: true, isRequired: false, transformFunction: null }, namedColor: { classPropertyName: "namedColor", publicName: "namedColor", isSignal: true, isRequired: false, transformFunction: null }, themeColor: { classPropertyName: "themeColor", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses()" } }, ngImport: i0 }); }
|
|
15523
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", type: ElderChipLabelDirective, isStandalone: true, selector: "[elderChipLabel]", inputs: { stateColor: { classPropertyName: "stateColor", publicName: "stateColor", isSignal: true, isRequired: false, transformFunction: null }, levelColor: { classPropertyName: "levelColor", publicName: "levelColor", isSignal: true, isRequired: false, transformFunction: null }, namedColor: { classPropertyName: "namedColor", publicName: "namedColor", isSignal: true, isRequired: false, transformFunction: null }, themeColor: { classPropertyName: "themeColor", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, chipSize: { classPropertyName: "chipSize", publicName: "chipSize", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses()" } }, ngImport: i0 }); }
|
|
15521
15524
|
}
|
|
15522
15525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderChipLabelDirective, decorators: [{
|
|
15523
15526
|
type: Directive,
|
|
@@ -15645,7 +15648,7 @@ class ElderBadgeComponent {
|
|
|
15645
15648
|
return this.chipAvatarTemplate$.getValue();
|
|
15646
15649
|
}
|
|
15647
15650
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15648
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ElderBadgeComponent, isStandalone: true, selector: "elder-badge", inputs: { appearance: "appearance", value: "value", colorSpec: "colorSpec", badgeColor: "badgeColor", avatarSpec: "avatarSpec", setCssClass: ["cssClass", "setCssClass"], chipTemplate: "chipTemplate", chipAvatarTemplate: "chipAvatarTemplate" }, queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderBadgeChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderBadgeChipAvatarDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"templates$ | async as templates\">\n <ng-container *ngIf=\"badgeModel$ | async as badgeModel\">\n <mat-chip\n elderChipLabel\n highlighted\n [color]=\"badgeModel.colorSpec?.theme\"\n [stateColor]=\"badgeModel.colorSpec?.state\"\n [levelColor]=\"badgeModel.colorSpec?.level\"\n [class]=\"'elder-badge fill ' + elementClass\"\n >\n <mat-chip-avatar clasS=\"elder-badge-avatar\" *ngIf=\"templates.avatar || badgeModel.showAvatar\">\n <ng-container\n *ngTemplateOutlet=\"\n templates.avatar || simpleAvatarTemplate;\n context: { $implicit: badgeModel }\n \"\n >\n </ng-container>\n </mat-chip-avatar>\n\n <ng-container\n *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: { $implicit: badgeModel }\"\n >\n </ng-container>\n\n <ng-content></ng-content>\n </mat-chip>\n </ng-container>\n</ng-container>\n\n<ng-template #simpleChipTemplate let-badgeModel>\n <!--\n <span class=\"elder-chip-text\">{{badgeModel.value | elderTruncate:20}}</span>\n -->\n {{ badgeModel.value | elderTruncate: 20 }}\n</ng-template>\n\n<ng-template #simpleAvatarTemplate let-badgeModel>\n <mat-icon>{{ badgeModel.avatarSpec?.icon }}</mat-icon>\n</ng-template>\n", styles: [".elder-badge{position:absolute!important;width:unset!important;max-width:unset!important;--mdc-chip-container-shape-radius: 10px}.elder-badge.mat-mdc-standard-chip{height:auto}.elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:var(--mat-badge-text-size, 12px);font-weight:var(--mat-badge-text-weight, 600)}.elder-badge .mdc-evolution-chip,.elder-badge .mdc-evolution-chip__cell,.elder-badge .mdc-evolution-chip__action{justify-content:center}.elder-badge.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:0;padding-right:0}.mat-badge-small .elder-badge.mat-badge-content{border-radius:16px;min-width:16px}.mat-badge-small.mat-badge-above .elder-badge.mat-badge-content{top:-7px!important}.mat-badge-small.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-small.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-small .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 3px!important}.mat-badge-small .elder-badge.mat-badge-content{line-height:14px!important}.mat-badge-medium .elder-badge.mat-badge-content{border-radius:22px;min-width:22px}.mat-badge-medium.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-medium.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-medium .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-medium .elder-badge.mat-badge-content{line-height:20px!important}.mat-badge-large .elder-badge.mat-badge-content{border-radius:28px;min-width:28px}.mat-badge-large.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-large.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-large .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-large .elder-badge.mat-badge-content{line-height:26px!important}.elder-badge.mat-badge-content{transform:unset!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["stateColor", "levelColor", "namedColor", "color"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { 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: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
15651
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ElderBadgeComponent, isStandalone: true, selector: "elder-badge", inputs: { appearance: "appearance", value: "value", colorSpec: "colorSpec", badgeColor: "badgeColor", avatarSpec: "avatarSpec", setCssClass: ["cssClass", "setCssClass"], chipTemplate: "chipTemplate", chipAvatarTemplate: "chipAvatarTemplate" }, queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderBadgeChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderBadgeChipAvatarDirective, descendants: true, read: TemplateRef }], ngImport: i0, template: "<ng-container *ngIf=\"templates$ | async as templates\">\n <ng-container *ngIf=\"badgeModel$ | async as badgeModel\">\n <mat-chip\n elderChipLabel\n highlighted\n [color]=\"badgeModel.colorSpec?.theme\"\n [stateColor]=\"badgeModel.colorSpec?.state\"\n [levelColor]=\"badgeModel.colorSpec?.level\"\n [class]=\"'elder-badge fill ' + elementClass\"\n >\n <mat-chip-avatar clasS=\"elder-badge-avatar\" *ngIf=\"templates.avatar || badgeModel.showAvatar\">\n <ng-container\n *ngTemplateOutlet=\"\n templates.avatar || simpleAvatarTemplate;\n context: { $implicit: badgeModel }\n \"\n >\n </ng-container>\n </mat-chip-avatar>\n\n <ng-container\n *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: { $implicit: badgeModel }\"\n >\n </ng-container>\n\n <ng-content></ng-content>\n </mat-chip>\n </ng-container>\n</ng-container>\n\n<ng-template #simpleChipTemplate let-badgeModel>\n <!--\n <span class=\"elder-chip-text\">{{badgeModel.value | elderTruncate:20}}</span>\n -->\n {{ badgeModel.value | elderTruncate: 20 }}\n</ng-template>\n\n<ng-template #simpleAvatarTemplate let-badgeModel>\n <mat-icon>{{ badgeModel.avatarSpec?.icon }}</mat-icon>\n</ng-template>\n", styles: [".elder-badge{position:absolute!important;width:unset!important;max-width:unset!important;--mdc-chip-container-shape-radius: 10px}.elder-badge.mat-mdc-standard-chip{height:auto}.elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:var(--mat-badge-text-size, 12px);font-weight:var(--mat-badge-text-weight, 600)}.elder-badge .mdc-evolution-chip,.elder-badge .mdc-evolution-chip__cell,.elder-badge .mdc-evolution-chip__action{justify-content:center}.elder-badge.mdc-evolution-chip--with-avatar.mdc-evolution-chip--with-primary-graphic .mdc-evolution-chip__graphic{padding-left:0;padding-right:0}.mat-badge-small .elder-badge.mat-badge-content{border-radius:16px;min-width:16px}.mat-badge-small.mat-badge-above .elder-badge.mat-badge-content{top:-7px!important}.mat-badge-small.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-small.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-small .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 3px!important}.mat-badge-small .elder-badge.mat-badge-content{line-height:14px!important}.mat-badge-medium .elder-badge.mat-badge-content{border-radius:22px;min-width:22px}.mat-badge-medium.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-medium.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-medium .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-medium .elder-badge.mat-badge-content{line-height:20px!important}.mat-badge-large .elder-badge.mat-badge-content{border-radius:28px;min-width:28px}.mat-badge-large.mat-badge-overlap.mat-badge-after .elder-badge.mat-badge-content{right:-5px;transform:translate(100%)!important}.mat-badge-large.mat-badge-overlap.mat-badge-before .elder-badge.mat-badge-content{left:-5px;transform:translate(-100%)!important}.mat-badge-large .elder-badge.mat-mdc-standard-chip .mdc-evolution-chip__action--primary{padding:0 6px!important}.mat-badge-large .elder-badge.mat-badge-content{line-height:26px!important}.elder-badge.mat-badge-content{transform:unset!important}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["stateColor", "levelColor", "namedColor", "color", "chipSize"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { 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: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
15649
15652
|
}
|
|
15650
15653
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderBadgeComponent, decorators: [{
|
|
15651
15654
|
type: Component,
|
|
@@ -25666,7 +25669,7 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
|
|
|
25666
25669
|
provide: ELDER_SELECT_BASE,
|
|
25667
25670
|
useExisting: forwardRef(() => ElderMultiSelectChipsComponent),
|
|
25668
25671
|
},
|
|
25669
|
-
], queries: [{ propertyName: "_customChipInput", first: true, predicate: MatFormFieldControl, descendants: true }, { propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_chipInput", first: true, predicate: ElderSelectComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n <mat-chip-set\n #chips\n [class.mat-mdc-chip-set-stacked]=\"stacked\"\n cdkDropList\n [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n (cdkDropListDropped)=\"drop($event)\"\n [cdkDropListDisabled]=\"!allowSorting\"\n >\n @if (icon) {\n <div class=\"elder-input-prefix-icon-container flex-none\">\n <mat-icon\n disabled\n class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n [class.loading]=\"state()?.loading\"\n >\n {{ icon }}\n </mat-icon>\n </div>\n }\n\n @for (chipModel of selectChips(); track chipModel.id) {\n <mat-chip-row\n elderChipLabel\n highlighted\n class=\"noselect clickable-chip\"\n [value]=\"resolveChipValue(chipModel.value)\"\n [color]=\"chipModel.colorSpec?.themeColor\"\n [levelColor]=\"chipModel.colorSpec?.levelColor\"\n [stateColor]=\"chipModel.colorSpec?.stateColor\"\n [namedColor]=\"chipModel.colorSpec?.namedColor\"\n [removable]=\"chipModel.removable\"\n (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n (click)=\"onCurrentClicked(chipModel.value)\"\n cdkDrag\n [cdkDragData]=\"chipModel.value\"\n [cdkDragDisabled]=\"!allowSorting\"\n >\n @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n </ng-container>\n </mat-chip-avatar>\n }\n\n <ng-container\n *ngTemplateOutlet=\"\n templates()?.chip || simpleChipTemplate;\n context: { $implicit: chipModel }\n \"\n >\n </ng-container>\n\n @if (chipModel.trailingSpec?.icon; as trailingIcon) {\n <mat-icon\n matChipTrailingIcon\n class=\"elder-trailing-icon\"\n [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n >{{ trailingIcon }}</mat-icon\n >\n }\n\n @if (chipModel.removable) {\n <mat-icon matChipRemove (click)=\"onClickRemoveChip($event, chipModel.value)\">\n cancel\n </mat-icon>\n }\n </mat-chip-row>\n }\n\n <div class=\"layout-row place-start-center elder-chip-input\">\n <!-- [matChipInputFor]=\"chips\" -->\n <ng-container *ngTemplateOutlet=\"templates()?.input || selectInput\"> </ng-container>\n\n @if (selectionPopup) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"elder-control-icon-button elder-browse-icon\"\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 </div>\n </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n <!-- mat-mdc-chip-input -->\n <elder-select\n autocomplete\n elderClearSelect\n class=\"elder-chip-input-select flex\"\n [data]=\"dataContextS()\"\n [disabled]=\"!!disabled\"\n [required]=\"!!required\"\n [readonly]=\"!!readonly\"\n [placeholder]=\"placeholderS()\"\n (entityUpdated)=\"appendEntity($event)\"\n [displayPropertyResolver]=\"displayPropertyResolverS()\"\n [valueTemplate]=\"valueTemplate\"\n [queryFilter]=\"queryFilter\"\n [filters]=\"filters\"\n [sorts]=\"sorts\"\n [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["stateColor", "levelColor", "namedColor", "color"] }, { 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: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated", "entity"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
25672
|
+
], queries: [{ propertyName: "_customChipInput", first: true, predicate: MatFormFieldControl, descendants: true }, { propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_chipInput", first: true, predicate: ElderSelectComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n <mat-chip-set\n #chips\n [class.mat-mdc-chip-set-stacked]=\"stacked\"\n cdkDropList\n [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n (cdkDropListDropped)=\"drop($event)\"\n [cdkDropListDisabled]=\"!allowSorting\"\n >\n @if (icon) {\n <div class=\"elder-input-prefix-icon-container flex-none\">\n <mat-icon\n disabled\n class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n [class.loading]=\"state()?.loading\"\n >\n {{ icon }}\n </mat-icon>\n </div>\n }\n\n @for (chipModel of selectChips(); track chipModel.id) {\n <mat-chip-row\n elderChipLabel\n highlighted\n class=\"noselect clickable-chip\"\n [value]=\"resolveChipValue(chipModel.value)\"\n [color]=\"chipModel.colorSpec?.themeColor\"\n [levelColor]=\"chipModel.colorSpec?.levelColor\"\n [stateColor]=\"chipModel.colorSpec?.stateColor\"\n [namedColor]=\"chipModel.colorSpec?.namedColor\"\n [removable]=\"chipModel.removable\"\n (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n (click)=\"onCurrentClicked(chipModel.value)\"\n cdkDrag\n [cdkDragData]=\"chipModel.value\"\n [cdkDragDisabled]=\"!allowSorting\"\n >\n @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n </ng-container>\n </mat-chip-avatar>\n }\n\n <ng-container\n *ngTemplateOutlet=\"\n templates()?.chip || simpleChipTemplate;\n context: { $implicit: chipModel }\n \"\n >\n </ng-container>\n\n @if (chipModel.trailingSpec?.icon; as trailingIcon) {\n <mat-icon\n matChipTrailingIcon\n class=\"elder-trailing-icon\"\n [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n >{{ trailingIcon }}</mat-icon\n >\n }\n\n @if (chipModel.removable) {\n <mat-icon matChipRemove (click)=\"onClickRemoveChip($event, chipModel.value)\">\n cancel\n </mat-icon>\n }\n </mat-chip-row>\n }\n\n <div class=\"layout-row place-start-center elder-chip-input\">\n <!-- [matChipInputFor]=\"chips\" -->\n <ng-container *ngTemplateOutlet=\"templates()?.input || selectInput\"> </ng-container>\n\n @if (selectionPopup) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"elder-control-icon-button elder-browse-icon\"\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 </div>\n </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n <!-- mat-mdc-chip-input -->\n <elder-select\n autocomplete\n elderClearSelect\n class=\"elder-chip-input-select flex\"\n [data]=\"dataContextS()\"\n [disabled]=\"!!disabled\"\n [required]=\"!!required\"\n [readonly]=\"!!readonly\"\n [placeholder]=\"placeholderS()\"\n (entityUpdated)=\"appendEntity($event)\"\n [displayPropertyResolver]=\"displayPropertyResolverS()\"\n [valueTemplate]=\"valueTemplate\"\n [queryFilter]=\"queryFilter\"\n [filters]=\"filters\"\n [sorts]=\"sorts\"\n [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { 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: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["stateColor", "levelColor", "namedColor", "color", "chipSize"] }, { 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: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated", "entity"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
25670
25673
|
}
|
|
25671
25674
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
|
|
25672
25675
|
type: Component,
|
|
@@ -26250,7 +26253,7 @@ class ElderMultiSelectChipOptionsComponent extends ElderMultiSelectBase {
|
|
|
26250
26253
|
provide: ELDER_SELECT_BASE,
|
|
26251
26254
|
useExisting: forwardRef(() => ElderMultiSelectChipOptionsComponent),
|
|
26252
26255
|
},
|
|
26253
|
-
], queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_listBox", first: true, predicate: MatChipListbox, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n <mat-chip-listbox #chips [class.mat-mdc-chip-set-stacked]=\"stacked\" [multiple]=\"multiple\">\n @if (state(); as state) {\n @if (icon) {\n <div class=\"elder-input-prefix-icon-container flex-none\">\n <mat-icon\n disabled\n class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n [class.loading]=\"state.loading\"\n >\n {{ icon }}\n </mat-icon>\n </div>\n }\n }\n\n <ng-content></ng-content>\n\n @for (chipModel of selectChips(); track chipModel.id) {\n <mat-chip-option\n class=\"noselect\"\n [value]=\"resolveChipValue(chipModel.value)\"\n elderChipLabel\n [levelColor]=\"chipModel.colorSpec?.levelColor\"\n [stateColor]=\"chipModel.colorSpec?.stateColor\"\n [namedColor]=\"chipModel.colorSpec?.namedColor\"\n [color]=\"chipModel.colorSpec?.themeColor\"\n [selectable]=\"!chipModel.locked\"\n [disabled]=\"chipModel.locked\"\n [selected]=\"chipModel.selected\"\n (selectionChange)=\"selectionChanged($event, chipModel.value)\"\n >\n @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n </ng-container>\n </mat-chip-avatar>\n }\n\n <ng-container\n *ngTemplateOutlet=\"\n templates()?.chip || simpleChipTemplate;\n context: { $implicit: chipModel }\n \"\n >\n </ng-container>\n\n @if (chipModel.trailingSpec?.icon) {\n <mat-icon\n matChipTrailingIcon\n class=\"elder-trailing-icon\"\n [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n >{{ chipModel.trailingSpec?.icon }}\n </mat-icon>\n }\n </mat-chip-option>\n }\n\n <div class=\"layout-row place-start-center elder-chip-input\">\n @if (selectionPopup) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"elder-control-icon-button elder-browse-icon\"\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 </div>\n </mat-chip-listbox>\n</div>\n\n<ng-template #simpleChipTemplate let-chipModel>\n <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["stateColor", "levelColor", "namedColor", "color"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26256
|
+
], queries: [{ propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_listBox", first: true, predicate: MatChipListbox, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n <mat-chip-listbox #chips [class.mat-mdc-chip-set-stacked]=\"stacked\" [multiple]=\"multiple\">\n @if (state(); as state) {\n @if (icon) {\n <div class=\"elder-input-prefix-icon-container flex-none\">\n <mat-icon\n disabled\n class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n [class.loading]=\"state.loading\"\n >\n {{ icon }}\n </mat-icon>\n </div>\n }\n }\n\n <ng-content></ng-content>\n\n @for (chipModel of selectChips(); track chipModel.id) {\n <mat-chip-option\n class=\"noselect\"\n [value]=\"resolveChipValue(chipModel.value)\"\n elderChipLabel\n [levelColor]=\"chipModel.colorSpec?.levelColor\"\n [stateColor]=\"chipModel.colorSpec?.stateColor\"\n [namedColor]=\"chipModel.colorSpec?.namedColor\"\n [color]=\"chipModel.colorSpec?.themeColor\"\n [selectable]=\"!chipModel.locked\"\n [disabled]=\"chipModel.locked\"\n [selected]=\"chipModel.selected\"\n (selectionChange)=\"selectionChanged($event, chipModel.value)\"\n >\n @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n </ng-container>\n </mat-chip-avatar>\n }\n\n <ng-container\n *ngTemplateOutlet=\"\n templates()?.chip || simpleChipTemplate;\n context: { $implicit: chipModel }\n \"\n >\n </ng-container>\n\n @if (chipModel.trailingSpec?.icon) {\n <mat-icon\n matChipTrailingIcon\n class=\"elder-trailing-icon\"\n [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n >{{ chipModel.trailingSpec?.icon }}\n </mat-icon>\n }\n </mat-chip-option>\n }\n\n <div class=\"layout-row place-start-center elder-chip-input\">\n @if (selectionPopup) {\n <button\n mat-icon-button\n type=\"button\"\n class=\"elder-control-icon-button elder-browse-icon\"\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 </div>\n </mat-chip-listbox>\n</div>\n\n<ng-template #simpleChipTemplate let-chipModel>\n <span class=\"elder-chip-text\">{{ chipModel.displayText | elderTruncate: 20 }}</span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["stateColor", "levelColor", "namedColor", "color", "chipSize"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26254
26257
|
}
|
|
26255
26258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderMultiSelectChipOptionsComponent, decorators: [{
|
|
26256
26259
|
type: Component,
|