@ascentgl/ads-ui 21.125.2 → 21.126.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.
|
@@ -672,6 +672,8 @@ class AdsTagComponent {
|
|
|
672
672
|
this.id = input.required(...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
673
673
|
/** Whether the tag is removeable */
|
|
674
674
|
this.removable = input(true, ...(ngDevMode ? [{ debugName: "removable" }] : []));
|
|
675
|
+
/** Optional custom color for the tag text */
|
|
676
|
+
this.textColor = input(undefined, ...(ngDevMode ? [{ debugName: "textColor" }] : []));
|
|
675
677
|
/** Show pointer cursor to indicate the tag is clickable */
|
|
676
678
|
this.clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
|
|
677
679
|
/** The text of the tag */
|
|
@@ -703,6 +705,13 @@ class AdsTagComponent {
|
|
|
703
705
|
}
|
|
704
706
|
/** @ignore */
|
|
705
707
|
getTextColor() {
|
|
708
|
+
const customTextColor = this.textColor();
|
|
709
|
+
if (customTextColor) {
|
|
710
|
+
if (this.isColor(customTextColor)) {
|
|
711
|
+
return `var(--color-${customTextColor})`;
|
|
712
|
+
}
|
|
713
|
+
return customTextColor;
|
|
714
|
+
}
|
|
706
715
|
const color = this.color();
|
|
707
716
|
if (this.isColor(color)) {
|
|
708
717
|
return contrastTextColor(this.resolvePaletteHexColor(color));
|
|
@@ -745,12 +754,12 @@ class AdsTagComponent {
|
|
|
745
754
|
return rootColorValue || '#000000';
|
|
746
755
|
}
|
|
747
756
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTagComponent, deps: [{ token: i1.AdsIconRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
748
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTagComponent, isStandalone: false, selector: "ads-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, borderWidth: { classPropertyName: "borderWidth", publicName: "borderWidth", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { remove: "remove", selected: "selected" }, ngImport: i0, template: "<div\n class=\"tag\"\n [class.clickable]=\"clickable()\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(),\n color: getTextColor(),\n 'border-width': borderWidth() + 'px',\n 'border-style': borderWidth() > 0 ? 'solid' : 'none',\n 'border-color': getBorderColor(),\n width: width(),\n }\"\n>\n <ng-content></ng-content>\n <span class=\"tag-text\" (click)=\"onSelected()\">{{ tag() }}</span>\n\n @if (removable()) {\n <ads-icon\n [id]=\"'ads-tag-' + id()\"\n name=\"cross\"\n size=\"xxxxs\"\n (click)=\"onRemove()\"\n [stroke]=\"getIconStroke()\"\n />\n }\n</div>\n", styles: [":host{display:flex}.tag{cursor:default;display:inline-flex;gap:4px;align-items:center;padding:4px;color:var(--color-white);border-radius:5px;font-size:12px;line-height:16px;font-weight:400}.tag ads-icon{cursor:pointer;stroke:var(--color-white)}.tag.clickable{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
757
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsTagComponent, isStandalone: false, selector: "ads-tag", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, borderWidth: { classPropertyName: "borderWidth", publicName: "borderWidth", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, tag: { classPropertyName: "tag", publicName: "tag", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { remove: "remove", selected: "selected" }, ngImport: i0, template: "<div\n class=\"tag\"\n [class.clickable]=\"clickable()\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(),\n color: getTextColor(),\n 'border-width': borderWidth() + 'px',\n 'border-style': borderWidth() > 0 ? 'solid' : 'none',\n 'border-color': getBorderColor(),\n width: width(),\n }\"\n>\n <ng-content></ng-content>\n <span class=\"tag-text\" [style.color]=\"getTextColor()\" (click)=\"onSelected()\">{{ tag() }}</span>\n\n @if (removable()) {\n <ads-icon\n [id]=\"'ads-tag-' + id()\"\n name=\"cross\"\n size=\"xxxxs\"\n (click)=\"onRemove()\"\n [stroke]=\"getIconStroke()\"\n />\n }\n</div>\n", styles: [":host{display:flex}.tag{cursor:default;display:inline-flex;gap:4px;align-items:center;padding:4px;color:var(--color-white);border-radius:5px;font-size:12px;line-height:16px;font-weight:400}.tag ads-icon{cursor:pointer;stroke:var(--color-white)}.tag.clickable{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
749
758
|
}
|
|
750
759
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsTagComponent, decorators: [{
|
|
751
760
|
type: Component,
|
|
752
|
-
args: [{ selector: 'ads-tag', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n class=\"tag\"\n [class.clickable]=\"clickable()\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(),\n color: getTextColor(),\n 'border-width': borderWidth() + 'px',\n 'border-style': borderWidth() > 0 ? 'solid' : 'none',\n 'border-color': getBorderColor(),\n width: width(),\n }\"\n>\n <ng-content></ng-content>\n <span class=\"tag-text\" (click)=\"onSelected()\">{{ tag() }}</span>\n\n @if (removable()) {\n <ads-icon\n [id]=\"'ads-tag-' + id()\"\n name=\"cross\"\n size=\"xxxxs\"\n (click)=\"onRemove()\"\n [stroke]=\"getIconStroke()\"\n />\n }\n</div>\n", styles: [":host{display:flex}.tag{cursor:default;display:inline-flex;gap:4px;align-items:center;padding:4px;color:var(--color-white);border-radius:5px;font-size:12px;line-height:16px;font-weight:400}.tag ads-icon{cursor:pointer;stroke:var(--color-white)}.tag.clickable{cursor:pointer}\n"] }]
|
|
753
|
-
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }, { type: i0.ElementRef }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], borderWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderWidth", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], tag: [{ type: i0.Input, args: [{ isSignal: true, alias: "tag", required: true }] }], remove: [{ type: i0.Output, args: ["remove"] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
|
|
761
|
+
args: [{ selector: 'ads-tag', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n class=\"tag\"\n [class.clickable]=\"clickable()\"\n [ngStyle]=\"{\n 'background-color': getBackgroundColor(),\n color: getTextColor(),\n 'border-width': borderWidth() + 'px',\n 'border-style': borderWidth() > 0 ? 'solid' : 'none',\n 'border-color': getBorderColor(),\n width: width(),\n }\"\n>\n <ng-content></ng-content>\n <span class=\"tag-text\" [style.color]=\"getTextColor()\" (click)=\"onSelected()\">{{ tag() }}</span>\n\n @if (removable()) {\n <ads-icon\n [id]=\"'ads-tag-' + id()\"\n name=\"cross\"\n size=\"xxxxs\"\n (click)=\"onRemove()\"\n [stroke]=\"getIconStroke()\"\n />\n }\n</div>\n", styles: [":host{display:flex}.tag{cursor:default;display:inline-flex;gap:4px;align-items:center;padding:4px;color:var(--color-white);border-radius:5px;font-size:12px;line-height:16px;font-weight:400}.tag ads-icon{cursor:pointer;stroke:var(--color-white)}.tag.clickable{cursor:pointer}\n"] }]
|
|
762
|
+
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }, { type: i0.ElementRef }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: true }] }], borderColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderColor", required: false }] }], borderWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderWidth", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], tag: [{ type: i0.Input, args: [{ isSignal: true, alias: "tag", required: true }] }], remove: [{ type: i0.Output, args: ["remove"] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
|
|
754
763
|
|
|
755
764
|
class AdsCreateTagComponent {
|
|
756
765
|
// ── Constructor ────────────────────────────────────────────────────
|
|
@@ -1008,7 +1017,7 @@ class AdsCreateTagComponent {
|
|
|
1008
1017
|
this.appendTag(tag);
|
|
1009
1018
|
}
|
|
1010
1019
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsCreateTagComponent, deps: [{ token: i1.AdsIconRegistry }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1011
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsCreateTagComponent, isStandalone: false, selector: "ads-create-tag", inputs: { limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, maxSuggestions: { classPropertyName: "maxSuggestions", publicName: "maxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, lowercase: { classPropertyName: "lowercase", publicName: "lowercase", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, alphanumeric: { classPropertyName: "alphanumeric", publicName: "alphanumeric", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tags: "tagsChange", tagCreate: "tagCreate", tagRemove: "tagRemove" }, host: { listeners: { "window:scroll": "onPageScroll()", "document:scroll": "onPageScroll()" } }, viewQueries: [{ propertyName: "addInput", first: true, predicate: ["addInput"], descendants: true, isSignal: true }, { propertyName: "editInput", first: true, predicate: ["editInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<ads-tag-container>\n @for (tag of tags(); track tag.id) {\n @if (selectedTag()?.id === tag.id) {\n <input\n #editInput\n class=\"overlay-input\"\n cdkOverlayOrigin\n #updateTrigger=\"cdkOverlayOrigin\"\n [value]=\"draftTag().tag\"\n (input)=\"onTagNameInput($event)\"\n [attr.maxlength]=\"maxlength()\"\n />\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"updateTrigger\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayOpen]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayScrollStrategy]=\"closeScrollStrategy\"\n (backdropClick)=\"hide()\"\n (detach)=\"hide()\"\n >\n <div class=\"tag-configuration\">\n <div class=\"color-picker\">\n @for (color of palette(); track color) {\n <div\n class=\"color\"\n [class.selected]=\"draftTag().color === color\"\n [style.background-color]=\"color\"\n (click)=\"onColorChange(color)\"\n ></div>\n }\n </div>\n <div class=\"actions\">\n <ads-button [variant]=\"'secondary'\" size=\"xs\" (click)=\"reset()\">{{ 'Cancel' }}</ads-button>\n <ads-button size=\"xs\" [disabled]=\"isValueInvalid()\" (click)=\"updateTag()\">\n {{ 'Save' }}\n </ads-button>\n </div>\n </div>\n </ng-template>\n } @else {\n <ads-tag\n [tag]=\"tag.tag\"\n [color]=\"tag.color\"\n [style.--color-dark]=\"tagIconDark\"\n [style.--color-white]=\"tagIconLight\"\n [id]=\"tag.id\"\n (selected)=\"onTagSelect($event)\"\n (remove)=\"onTagRemove($event)\"\n />\n }\n }\n\n <div class=\"tag-container \">\n @if (showInput()) {\n <input\n #addInput\n class=\"overlay-input\"\n cdkOverlayOrigin\n #addTrigger=\"cdkOverlayOrigin\"\n [value]=\"draftTag().tag\"\n (input)=\"onTagNameInput($event)\"\n [attr.maxlength]=\"maxlength()\"\n />\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"addTrigger\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayOpen]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayScrollStrategy]=\"closeScrollStrategy\"\n (backdropClick)=\"hide()\"\n (detach)=\"hide()\"\n >\n <div class=\"tag-configuration\">\n @if (displayedSuggestions().length > 0) {\n <div class=\"suggestions-list\">\n @for (suggestion of displayedSuggestions(); track suggestion.tag + suggestion.color) {\n <div\n class=\"suggestion-item\"\n [style.background-color]=\"suggestion.color\"\n (click)=\"onSuggestionSelect(suggestion)\"\n >\n <span\n class=\"suggestion-text\"\n [style.color]=\"contrastTextColor(suggestion.color)\"\n #textEl\n (mouseenter)=\"textEl.title = textEl.scrollWidth > textEl.clientWidth ? suggestion.tag : ''\"\n >{{ suggestion.tag }}</span>\n </div>\n }\n </div>\n }\n <div class=\"color-picker\">\n @for (color of palette(); track color) {\n <div\n class=\"color\"\n [class.selected]=\"draftTag().color === color\"\n [style.background-color]=\"color\"\n (click)=\"onColorChange(color)\"\n ></div>\n }\n </div>\n <div class=\"actions\">\n <ads-button [variant]=\"'secondary'\" size=\"xs\" (click)=\"reset()\">{{ 'Cancel' }}</ads-button>\n <ads-button size=\"xs\" [disabled]=\"isValueInvalid()\" (click)=\"addTag()\">{{ 'Add' }} </ads-button>\n </div>\n </div>\n </ng-template>\n }\n\n @if (!isLimitReached()) {\n <ads-button (click)=\"displayInput()\" size=\"xs\">\n {{ 'Add Tag' }}\n </ads-button>\n }\n </div>\n</ads-tag-container>\n", styles: [".tag-overlay-trigger{height:0;width:150px;display:flex;align-self:flex-start}input{padding:0 8px;box-sizing:border-box;background-color:var(--color-white);border:2px solid var(--color-medium);color:var(--color-dark);height:24px;border-radius:5px;width:150px}input:focus{outline:none}.tag-configuration{box-shadow:0 0 0 1px #98a1b31a,0 15px 35px -5px #11182626,0 5px 15px #00000014;border-radius:5px;background-color:var(--color-white);overflow:hidden}@media(prefers-color-scheme:dark){.tag-configuration{background-color:var(--color-muted)}.actions ::ng-deep ads-button button{background-color:var(--color-muted)!important}}.suggestions-list{max-height:96px;overflow-y:auto;overflow-x:hidden;border-bottom:1px solid var(--color-light)}.suggestion-item{height:32px;display:flex;align-items:center;padding:0 8px;cursor:pointer;overflow:hidden}.suggestion-item:hover:not(.disabled){opacity:.85}.suggestion-item.disabled{cursor:default;opacity:.4}.suggestion-text{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.color-picker{padding:12px 16px;display:grid;grid-template-columns:repeat(4,1fr);place-items:center;grid-gap:12px}.color-picker .color{position:relative;width:20px;height:20px;border-radius:50%;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.color-picker .color:after{content:\"\";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--color-primary);opacity:0;transform:scale(.8);transition:opacity .2s ease,transform .2s ease;pointer-events:none}.color-picker .color.selected{transform:scale(1.05)}.color-picker .color.selected:after{opacity:1;transform:scale(1)}.actions{border-top:1px solid var(--color-light);padding:8px 16px;display:flex;justify-content:center;gap:12px}.actions ::ng-deep ads-button button{width:52px;min-width:unset}::ng-deep .cdk-overlay-dark-backdrop{opacity:0!important}.tag-container{display:inline-flex;align-items:center;gap:16px;min-height:24px;position:relative}.tag-container ads-button{display:flex}.overlay-input{width:150px}\n"], dependencies: [{ kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type", "fullWidth"] }, { kind: "component", type: AdsTagContainerComponent, selector: "ads-tag-container" }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "clickable", "tag"], outputs: ["remove", "selected"] }] }); }
|
|
1020
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsCreateTagComponent, isStandalone: false, selector: "ads-create-tag", inputs: { limit: { classPropertyName: "limit", publicName: "limit", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, suggestions: { classPropertyName: "suggestions", publicName: "suggestions", isSignal: true, isRequired: false, transformFunction: null }, maxSuggestions: { classPropertyName: "maxSuggestions", publicName: "maxSuggestions", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, lowercase: { classPropertyName: "lowercase", publicName: "lowercase", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, alphanumeric: { classPropertyName: "alphanumeric", publicName: "alphanumeric", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tags: "tagsChange", tagCreate: "tagCreate", tagRemove: "tagRemove" }, host: { listeners: { "window:scroll": "onPageScroll()", "document:scroll": "onPageScroll()" } }, viewQueries: [{ propertyName: "addInput", first: true, predicate: ["addInput"], descendants: true, isSignal: true }, { propertyName: "editInput", first: true, predicate: ["editInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<ads-tag-container>\n @for (tag of tags(); track tag.id) {\n @if (selectedTag()?.id === tag.id) {\n <input\n #editInput\n class=\"overlay-input\"\n cdkOverlayOrigin\n #updateTrigger=\"cdkOverlayOrigin\"\n [value]=\"draftTag().tag\"\n (input)=\"onTagNameInput($event)\"\n [attr.maxlength]=\"maxlength()\"\n />\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"updateTrigger\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayOpen]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayScrollStrategy]=\"closeScrollStrategy\"\n (backdropClick)=\"hide()\"\n (detach)=\"hide()\"\n >\n <div class=\"tag-configuration\">\n <div class=\"color-picker\">\n @for (color of palette(); track color) {\n <div\n class=\"color\"\n [class.selected]=\"draftTag().color === color\"\n [style.background-color]=\"color\"\n (click)=\"onColorChange(color)\"\n ></div>\n }\n </div>\n <div class=\"actions\">\n <ads-button [variant]=\"'secondary'\" size=\"xs\" (click)=\"reset()\">{{ 'Cancel' }}</ads-button>\n <ads-button size=\"xs\" [disabled]=\"isValueInvalid()\" (click)=\"updateTag()\">\n {{ 'Save' }}\n </ads-button>\n </div>\n </div>\n </ng-template>\n } @else {\n <ads-tag\n [tag]=\"tag.tag\"\n [color]=\"tag.color\"\n [style.--color-dark]=\"tagIconDark\"\n [style.--color-white]=\"tagIconLight\"\n [id]=\"tag.id\"\n (selected)=\"onTagSelect($event)\"\n (remove)=\"onTagRemove($event)\"\n />\n }\n }\n\n <div class=\"tag-container \">\n @if (showInput()) {\n <input\n #addInput\n class=\"overlay-input\"\n cdkOverlayOrigin\n #addTrigger=\"cdkOverlayOrigin\"\n [value]=\"draftTag().tag\"\n (input)=\"onTagNameInput($event)\"\n [attr.maxlength]=\"maxlength()\"\n />\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"addTrigger\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayPush]=\"true\"\n [cdkConnectedOverlayOpen]=\"true\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayScrollStrategy]=\"closeScrollStrategy\"\n (backdropClick)=\"hide()\"\n (detach)=\"hide()\"\n >\n <div class=\"tag-configuration\">\n @if (displayedSuggestions().length > 0) {\n <div class=\"suggestions-list\">\n @for (suggestion of displayedSuggestions(); track suggestion.tag + suggestion.color) {\n <div\n class=\"suggestion-item\"\n [style.background-color]=\"suggestion.color\"\n (click)=\"onSuggestionSelect(suggestion)\"\n >\n <span\n class=\"suggestion-text\"\n [style.color]=\"contrastTextColor(suggestion.color)\"\n #textEl\n (mouseenter)=\"textEl.title = textEl.scrollWidth > textEl.clientWidth ? suggestion.tag : ''\"\n >{{ suggestion.tag }}</span>\n </div>\n }\n </div>\n }\n <div class=\"color-picker\">\n @for (color of palette(); track color) {\n <div\n class=\"color\"\n [class.selected]=\"draftTag().color === color\"\n [style.background-color]=\"color\"\n (click)=\"onColorChange(color)\"\n ></div>\n }\n </div>\n <div class=\"actions\">\n <ads-button [variant]=\"'secondary'\" size=\"xs\" (click)=\"reset()\">{{ 'Cancel' }}</ads-button>\n <ads-button size=\"xs\" [disabled]=\"isValueInvalid()\" (click)=\"addTag()\">{{ 'Add' }} </ads-button>\n </div>\n </div>\n </ng-template>\n }\n\n @if (!isLimitReached()) {\n <ads-button (click)=\"displayInput()\" size=\"xs\">\n {{ 'Add Tag' }}\n </ads-button>\n }\n </div>\n</ads-tag-container>\n", styles: [".tag-overlay-trigger{height:0;width:150px;display:flex;align-self:flex-start}input{padding:0 8px;box-sizing:border-box;background-color:var(--color-white);border:2px solid var(--color-medium);color:var(--color-dark);height:24px;border-radius:5px;width:150px}input:focus{outline:none}.tag-configuration{box-shadow:0 0 0 1px #98a1b31a,0 15px 35px -5px #11182626,0 5px 15px #00000014;border-radius:5px;background-color:var(--color-white);overflow:hidden}@media(prefers-color-scheme:dark){.tag-configuration{background-color:var(--color-muted)}.actions ::ng-deep ads-button button{background-color:var(--color-muted)!important}}.suggestions-list{max-height:96px;overflow-y:auto;overflow-x:hidden;border-bottom:1px solid var(--color-light)}.suggestion-item{height:32px;display:flex;align-items:center;padding:0 8px;cursor:pointer;overflow:hidden}.suggestion-item:hover:not(.disabled){opacity:.85}.suggestion-item.disabled{cursor:default;opacity:.4}.suggestion-text{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.color-picker{padding:12px 16px;display:grid;grid-template-columns:repeat(4,1fr);place-items:center;grid-gap:12px}.color-picker .color{position:relative;width:20px;height:20px;border-radius:50%;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.color-picker .color:after{content:\"\";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--color-primary);opacity:0;transform:scale(.8);transition:opacity .2s ease,transform .2s ease;pointer-events:none}.color-picker .color.selected{transform:scale(1.05)}.color-picker .color.selected:after{opacity:1;transform:scale(1)}.actions{border-top:1px solid var(--color-light);padding:8px 16px;display:flex;justify-content:center;gap:12px}.actions ::ng-deep ads-button button{width:52px;min-width:unset}::ng-deep .cdk-overlay-dark-backdrop{opacity:0!important}.tag-container{display:inline-flex;align-items:center;gap:16px;min-height:24px;position:relative}.tag-container ads-button{display:flex}.overlay-input{width:150px}\n"], dependencies: [{ kind: "directive", type: i3.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i3.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: AdsButtonComponent, selector: "ads-button", inputs: ["id", "variant", "disabled", "size", "type", "fullWidth"] }, { kind: "component", type: AdsTagContainerComponent, selector: "ads-tag-container" }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "textColor", "clickable", "tag"], outputs: ["remove", "selected"] }] }); }
|
|
1012
1021
|
}
|
|
1013
1022
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsCreateTagComponent, decorators: [{
|
|
1014
1023
|
type: Component,
|
|
@@ -3581,7 +3590,7 @@ class AdsDropdownComponent extends AbstractDropdownComponent {
|
|
|
3581
3590
|
return option && typeof option === 'object' && 'disableDropdownOption' in option && option.disableDropdownOption === true;
|
|
3582
3591
|
}
|
|
3583
3592
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3584
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsDropdownComponent, isStandalone: false, selector: "ads-dropdown", inputs: { displayValueFormatter: "displayValueFormatter", mode: "mode", hasEmptyValue: "hasEmptyValue", checkSelected: "checkSelected", options: "options", optionTemplate: "optionTemplate", triggerTemplate: "triggerTemplate", panelClass: "panelClass", closeOnOutOfView: "closeOnOutOfView", outOfViewRootMargin: "outOfViewRootMargin" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\" [class.shrink]=\"shrink\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"panelClassList\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + ($index + 1)\"\n [value]=\"option\"\n [ngClass]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option)\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "clickable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width", "tooltip", "tooltipHref", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3593
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsDropdownComponent, isStandalone: false, selector: "ads-dropdown", inputs: { displayValueFormatter: "displayValueFormatter", mode: "mode", hasEmptyValue: "hasEmptyValue", checkSelected: "checkSelected", options: "options", optionTemplate: "optionTemplate", triggerTemplate: "triggerTemplate", panelClass: "panelClass", closeOnOutOfView: "closeOnOutOfView", outOfViewRootMargin: "outOfViewRootMargin" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\" [class.shrink]=\"shrink\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label,\n 'suppress-validation': !showValidationError,\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"panelClassList\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + ($index + 1)\"\n [value]=\"option\"\n [ngClass]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option)\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHTML]=\"displayValueFormatter ? displayValueFormatter(option) : displayedOptions.get(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "textColor", "clickable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width", "tooltip", "tooltipHref", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3585
3594
|
}
|
|
3586
3595
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsDropdownComponent, decorators: [{
|
|
3587
3596
|
type: Component,
|
|
@@ -3808,7 +3817,7 @@ class AdsMultiSelectDropdownComponent extends AdsDropdownComponent {
|
|
|
3808
3817
|
return super.chipName(option);
|
|
3809
3818
|
}
|
|
3810
3819
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsMultiSelectDropdownComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3811
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsMultiSelectDropdownComponent, isStandalone: false, selector: "ads-multi-select-dropdown", inputs: { showChips: "showChips", showSelectAll: "showSelectAll", disableEmptyValue: "disableEmptyValue" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\" [class.shrink]=\"shrink\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"panelClassList\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showSelectAll && isAllSelected) {\n <mat-select-trigger>Select All</mat-select-trigger>\n } @else if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @if (showSelectAll) {\n <mat-option\n class=\"select-all-option checkbox\"\n [value]=\"'__SELECT_ALL__'\"\n (click)=\"onSelectAllClick($event)\"\n >\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"selectAllCheckboxControl\"\n label=\"Select All\"\n />\n </mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + ($index + 1)\"\n [value]=\"option\"\n [ngClass]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"getOptionDisplayLabel(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option) || (disableEmptyValue && isEmptyOption(option))\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"getOptionDisplayLabel(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHTML]=\"getOptionDisplayLabel(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field.chips ::ng-deep .mdc-text-field{height:auto;min-height:var(--mat-form-field-container-height)}mat-form-field.x-small ::ng-deep{--mat-form-field-container-height: 32px}mat-option:not(.mdc-list-item--disabled):hover ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):focus ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):active ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled).mat-mdc-option-active ::ng-deep .checkbox-label{color:var(--color-white)}.tag-container{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "clickable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width", "tooltip", "tooltipHref", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3820
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsMultiSelectDropdownComponent, isStandalone: false, selector: "ads-multi-select-dropdown", inputs: { showChips: "showChips", showSelectAll: "showSelectAll", disableEmptyValue: "disableEmptyValue" }, usesInheritance: true, ngImport: i0, template: "<div [ngStyle]=\"{ minWidth: containerMinWidth }\" class=\"ads-field-container\" [class.shrink]=\"shrink\">\n <div [ngStyle]=\"{ width: width }\">\n <mat-form-field\n (click)=\"onOpened()\"\n [ngClass]=\"{\n 'immediate-validation': immediateValidation,\n 'no-left-padding': !showExclamation,\n pill: mode === 'pill',\n chips: showChips && isMultiselect,\n 'success-label': canShowSuccess(),\n 'error-label': canShowError(),\n 'x-small': smallSize,\n 'wrap-trigger-text': wrapOptionText,\n 'has-label': !!label\n }\"\n [ngStyle]=\"{ width: width }\"\n >\n @if ((!showChips || valueControl.value.length === 0) && (label || required) && !smallSize) {\n <mat-label>{{ label }}</mat-label>\n }\n <!-- is required in placeholder for smoother animation -->\n <mat-select\n #panel\n [disableRipple]=\"true\"\n [id]=\"id\"\n [placeholder]=\"placeholder || ' '\"\n [panelClass]=\"panelClassList\"\n [disableOptionCentering]=\"true\"\n [required]=\"required\"\n [formControl]=\"valueControl\"\n [multiple]=\"isMultiselect\"\n >\n @if (showSelectAll && isAllSelected) {\n <mat-select-trigger>Select All</mat-select-trigger>\n } @else if (showChips && isMultiselect) {\n <mat-select-trigger>\n <div class=\"tag-container\">\n @for (option of valueControl.value; track $index) {\n <ads-tag\n [tag]=\"chipName(option)\"\n [color]=\"Colors.Medium\"\n [id]=\"'' + $index\"\n (remove)=\"onOptionRemoved(option)\"\n (click)=\"$event.stopPropagation()\"\n />\n }\n </div>\n </mat-select-trigger>\n } @else if (triggerTemplate) {\n <mat-select-trigger>\n <ng-container *ngTemplateOutlet=\"triggerTemplate; context: { option: valueControl.value }\" />\n </mat-select-trigger>\n }\n\n @if (hasEmptyValue) {\n <mat-option [value]=\"undefined\"></mat-option>\n }\n\n @if (showSelectAll) {\n <mat-option\n class=\"select-all-option checkbox\"\n [value]=\"'__SELECT_ALL__'\"\n (click)=\"onSelectAllClick($event)\"\n >\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"selectAllCheckboxControl\"\n label=\"Select All\"\n />\n </mat-option>\n }\n\n @for (option of displayedOptionsArray; track $index) {\n <mat-option\n [id]=\"id + '-option-' + ($index + 1)\"\n [value]=\"option\"\n [ngClass]=\"{\n checkbox: isMultiselect && checkSelected,\n 'wrap-text': wrapOptionText,\n }\"\n [matTooltip]=\"getOptionDisplayLabel(option)\"\n [matTooltipDisabled]=\"!showTooltip\"\n [disabled]=\"isDropdownOptionObject(option) || (disableEmptyValue && isEmptyOption(option))\"\n >\n @if (optionTemplate) {\n <ng-container *ngTemplateOutlet=\"optionTemplate; context: { option }\" />\n } @else if (isMultiselect && checkSelected) {\n <ads-checkbox\n [showFooter]=\"false\"\n width=\"100%\"\n [control]=\"createCheckboxControl(option)\"\n (change)=\"onCheckboxChange(option)\"\n [label]=\"getOptionDisplayLabel(option)\"\n />\n } @else {\n <span\n [ngClass]=\"{ 'wrap-text': wrapOptionText }\"\n [innerHTML]=\"getOptionDisplayLabel(option)\"\n ></span>\n }\n </mat-option>\n }\n </mat-select>\n\n @if (canClear) {\n <button matTextSuffix type=\"button\" mat-icon-button (click)=\"clear($event)\" class=\"action-icon\">\n <ads-icon name=\"cross\" [size]=\"smallSize ? 'xxs' : 'xs'\" [theme]=\"'iconPrimary'\" class=\"cross-icon\" />\n </button>\n }\n <button matTextSuffix type=\"button\" mat-icon-button class=\"action-icon\">\n <ads-icon\n matTextSuffix\n name=\"chevron_down\"\n [size]=\"smallSize ? 'xxs' : 'xs'\"\n [theme]=\"'iconPrimary'\"\n class=\"chevron-down\"\n />\n </button>\n </mat-form-field>\n\n @if (showFooter) {\n <div class=\"footer-container\"\n [class.dynamic]=\"!isStaticFooter\"\n [class.has-content]=\"hasFooterContent()\">\n @if (canShowError()) {\n <ads-error [error]=\"displayFirstError()\" [ngStyle]=\"{ width: width }\" />\n } @else if (canShowSuccess()) {\n <ads-success [success]=\"successMessage!\" [ngStyle]=\"{ width: width }\" />\n } @else if (hint) {\n <ads-hint [hint]=\"hint\" [control]=\"valueControl\" [ngStyle]=\"{ width: width }\" />\n }\n </div>\n }\n </div>\n\n @if (tooltip) {\n <ads-input-tooltip [tooltip]=\"tooltip\" [smallSize]=\"smallSize\" [href]=\"tooltipHref\" />\n }\n</div>\n\n", styles: [".ads-field-container{display:flex;gap:12px;align-items:flex-start}.ads-field-container.shrink{min-width:0}.ads-field-container.shrink>div{min-width:0;width:100%}.ads-field-container.shrink mat-form-field{min-width:0;width:100%}.ads-field-container.shrink .mdc-text-field,.ads-field-container.shrink .mat-mdc-form-field-flex{min-width:0}.ads-field-container.shrink .mat-mdc-form-field-infix{min-width:0;width:0;flex:1 1 0}.ads-field-container.shrink .mat-mdc-select,.ads-field-container.shrink .mat-mdc-select-trigger{min-width:0}.ads-field-container.shrink .mat-mdc-select-value{min-width:0;max-width:100%}.ads-field-container.shrink .mat-mdc-select-value-text,.ads-field-container.shrink .mat-mdc-select-placeholder{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ads-input-right-hint{position:absolute;right:40px;top:50%;transform:translateY(-50%);color:var(--color-light);font-size:.95em;pointer-events:none;z-index:2;background:transparent;white-space:nowrap}:host::ng-deep mat-form-field{--mat-form-field-filled-container-color: var(--color-white);--mat-form-field-filled-input-text-color: var(--color-medium);--mat-form-field-filled-error-label-text-color: var(--color-error);--mat-form-field-filled-error-hover-label-text-color: var(--color-error);--mat-form-field-filled-label-text-color: var(--color-medium);--mat-form-field-filled-focus-label-text-color: var(--color-medium);--mat-form-field-filled-hover-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-label-text-color: var(--color-medium);--mat-form-field-filled-disabled-container-color: var(--color-muted) !important;--mat-form-field-filled-disabled-input-text-color: var(--color-medium) !important;--mat-form-field-filled-error-focus-label-text-color: var(--color-error);--mat-form-field-filled-label-text-size: 16px}:host::ng-deep mat-form-field .mdc-floating-label--float-above{--mat-form-field-filled-label-text-size: 12px}:host::ng-deep mat-form-field .mdc-icon-button:focus-visible,:host::ng-deep mat-form-field .mat-mdc-icon-button:focus-visible{background-color:var(--color-light-30)}:host::ng-deep mat-form-field .mdc-text-field{box-sizing:border-box;border-radius:5px;outline:1px solid var(--color-light);outline-offset:-1px;align-items:center;padding:0 12px;cursor:text;height:48px}:host::ng-deep mat-form-field .mdc-text-field .cross-icon{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex{height:100%}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--no-label .mat-mdc-form-field-flex .mat-mdc-form-field-infix{align-items:center}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-outer-spin-button,:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input[type=number]{-moz-appearance:textfield}:host::ng-deep mat-form-field .mdc-text-field:not(.mdc-text-field--no-label) .mat-mdc-form-field-infix input{height:24px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-error)!important}:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-error)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid{outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .cross-icon,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .visibility-eye,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .picker{stroke:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .chevron-down,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .status_processing,:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .search-icon{color:var(--color-medium)!important}:host::ng-deep mat-form-field.suppress-validation .mdc-text-field.mdc-text-field--invalid .mdc-floating-label{color:var(--mat-form-field-filled-label-text-color)!important}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex{align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{display:flex;align-items:flex-end;width:120px}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label{width:100%}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix label .mat-mdc-form-field-required-marker{color:var(--mat-form-field-filled-error-label-text-color)}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix{display:flex;align-items:center}:host::ng-deep mat-form-field .mdc-text-field .mat-mdc-form-field-text-suffix .mat-mdc-icon-button{display:flex;align-items:center;justify-content:center}:host::ng-deep mat-form-field .action-icon{padding:0;--mat-icon-button-state-layer-size: 35px}:host::ng-deep mat-form-field .action-icon .mat-mdc-button-touch-target{height:unset;width:unset}:host::ng-deep mat-form-field .time-picker-button{cursor:default}:host::ng-deep mat-form-field .time-picker-button .mdc-icon-button__ripple{display:none!important}:host::ng-deep mat-form-field.x-small .mdc-text-field{height:24px;padding:0 8px}:host::ng-deep mat-form-field.x-small .mdc-text-field .mat-mdc-form-field-input-control{font-size:12px;line-height:16px}:host::ng-deep mat-form-field.x-small .action-icon{--mat-icon-button-state-layer-size: 18px}:host::ng-deep mat-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--mat-form-field-filled-disabled-container-color);border:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled) .mdc-text-field:hover .visibility-eye{fill:var(--color-light-30)!important}:host::ng-deep mat-form-field.read-only{pointer-events:none}:host::ng-deep mat-form-field.read-only .mdc-text-field{background-color:var(--mat-form-field-filled-container-color);cursor:default;outline:1px solid var(--color-light);outline-offset:-1px}:host::ng-deep mat-form-field.read-only .mdc-text-field input{pointer-events:none;-webkit-user-select:none;user-select:none}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only) .mdc-text-field:hover{background-color:var(--color-light-30);outline:2px solid var(--color-secondary-hover);outline-offset:-2px}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field{outline:2px solid var(--color-secondary-pressed);outline-offset:-2px;background-color:var(--color-muted)}:host::ng-deep mat-form-field:not(.mat-form-field-disabled):not(.read-only).mat-focused .mdc-text-field .visibility-eye{fill:var(--color-muted)!important}:host::ng-deep mat-form-field.immediate-validation .mdc-text-field.mdc-text-field--invalid{outline:2px solid var(--color-error);outline-offset:-2px}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{color:var(--mat-form-field-filled-label-text-color)}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper:before{content:none}:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-error-wrapper,:host::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}:host::ng-deep mat-form-field .mdc-line-ripple{display:none}:host::ng-deep mat-form-field.success-label .mat-mdc-form-field-required-marker,:host::ng-deep mat-form-field.success-label mat-label{color:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .mdc-text-field{outline:2px solid var(--color-success);outline-offset:-2px}:host::ng-deep mat-form-field.success-label .cross-icon,:host::ng-deep mat-form-field.success-label .visibility-eye,:host::ng-deep mat-form-field.success-label .picker{stroke:var(--color-success)!important}:host::ng-deep mat-form-field.success-label .chevron-down,:host::ng-deep mat-form-field.success-label .status_processing,:host::ng-deep mat-form-field.success-label .search-icon{color:var(--color-success)!important}:host::ng-deep mat-form-field.error-label mat-label{color:var(--color-error)}:host::ng-deep mat-hint{display:inline-block}:host::ng-deep .mat-mdc-form-field-hint-spacer{display:none}.info-tooltip{position:relative;top:12px}mat-error{display:flex;padding-top:2px}mat-error .error{display:flex;align-items:flex-start;gap:2px}mat-error .error ads-icon{position:relative;top:2px}:host ::ng-deep .mdc-text-field{position:relative}:host ::ng-deep input[type=number]::-webkit-outer-spin-button,:host ::ng-deep input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host ::ng-deep input[type=number]{-moz-appearance:textfield}\n", "mat-select{--mat-select-trigger-text-line-height: 24px;--mat-select-enabled-trigger-text-color: var(--color-medium);--mat-select-disabled-trigger-text-color: var(--color-medium);--mat-select-placeholder-text-color: var(--color-medium)}mat-option{--mat-option-selected-state-layer-color: var(--color-secondary);--mat-option-selected-state-label-text-color: var(--color-white);--mat-option-hover-state-layer-color: var(--color-secondary-hover);padding:0 12px}mat-option.checkbox{padding:0 12px 0 6px}mat-option:active{background-color:var(--color-secondary-pressed)!important}mat-option.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;min-height:48px;height:auto;line-height:1.4}mat-option.wrap-text span{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-option span.wrap-text{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;display:block;line-height:1.4}mat-form-field.pill ::ng-deep .mdc-text-field{border-radius:24px;padding-left:16px;background-color:var(--color-light-30)}mat-form-field.pill ::ng-deep .mdc-text-field:not(.mdc-text-field--invalid){border-color:transparent}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;min-height:24px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-select-value-text{white-space:normal!important;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field{min-height:48px;height:auto}mat-form-field.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{white-space:normal;word-wrap:break-word;overflow-wrap:break-word;line-height:1.4;height:auto;min-height:24px;padding-top:12px;padding-bottom:12px}mat-form-field.has-label.wrap-trigger-text ::ng-deep .mdc-text-field__input,mat-form-field.has-label.wrap-trigger-text ::ng-deep .mat-mdc-form-field-infix{padding-top:20px;padding-bottom:4px}mat-form-field ::ng-deep .mdc-text-field .mat-mdc-select-arrow-wrapper{display:none}mat-form-field.x-small mat-select{font-size:12px;line-height:16px}mat-form-field.x-small ::ng-deep .mat-mdc-select-placeholder{font-size:12px;line-height:16px}mat-option:hover:not(.mdc-list-item--disabled){color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled).mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option:hover:not(.mdc-list-item--disabled) ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mat-mdc-option-active{color:var(--color-white);background-color:var(--mat-option-hover-state-layer-color)!important}mat-option.mat-mdc-option-active.mdc-list-item--selected{background-color:var(--mat-option-selected-state-layer-color)!important}mat-option.mat-mdc-option-active ::ng-deep .mdc-list-item__primary-text{color:var(--color-white)!important}mat-option.mat-mdc-option-active ::ng-deep .flag-option span{color:var(--color-white)!important}mat-option.mdc-list-item--disabled{opacity:.5}mat-option ::ng-deep .mat-pseudo-checkbox{display:none}mat-option ::ng-deep .mdc-list-item__primary-text{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n", "mat-form-field.chips ::ng-deep .mdc-text-field{height:auto;min-height:var(--mat-form-field-container-height)}mat-form-field.x-small ::ng-deep{--mat-form-field-container-height: 32px}mat-option:not(.mdc-list-item--disabled):hover ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):focus ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled):active ::ng-deep .checkbox-label,mat-option:not(.mdc-list-item--disabled).mat-mdc-option-active ::ng-deep .checkbox-label{color:var(--color-white)}.tag-container{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0}\n", ".footer-container{min-height:20px;overflow:hidden}.footer-container.dynamic{min-height:0;max-height:0;opacity:0;transition:max-height .3s ease-in-out,opacity .2s ease-in-out,min-height .3s ease-in-out}.footer-container.dynamic.has-content{min-height:20px;max-height:100px;opacity:1;transition:max-height .3s ease-in-out,opacity .3s ease-in-out .1s,min-height .3s ease-in-out}::ng-deep .mat-mdc-form-field{--mat-form-field-filled-input-text-placeholder-color: var(--color-medium) !important}::ng-deep .spinner{animation:spin 1s linear infinite;transform-origin:50% 50%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i4$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i4$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$2.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }, { kind: "component", type: AdsInputTooltipComponent, selector: "ads-input-tooltip", inputs: ["tooltip", "smallSize", "href"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdsSuccessComponent, selector: "ads-success", inputs: ["success"] }, { kind: "component", type: AdsErrorComponent, selector: "ads-error", inputs: ["error"] }, { kind: "component", type: AdsHintComponent, selector: "ads-hint", inputs: ["control", "hint"] }, { kind: "component", type: AdsTagComponent, selector: "ads-tag", inputs: ["color", "borderColor", "borderWidth", "width", "id", "removable", "textColor", "clickable", "tag"], outputs: ["remove", "selected"] }, { kind: "component", type: AdsCheckboxComponent, selector: "ads-checkbox", inputs: ["indeterminate", "width", "tooltip", "tooltipHref", "size"] }, { kind: "directive", type: i13.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3812
3821
|
}
|
|
3813
3822
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsMultiSelectDropdownComponent, decorators: [{
|
|
3814
3823
|
type: Component,
|
|
@@ -4965,25 +4974,10 @@ class AdsSearchDropdownComponent extends AbstractDropdownComponent {
|
|
|
4965
4974
|
*/
|
|
4966
4975
|
super.processOptions(options);
|
|
4967
4976
|
this.allOptions = new Map(this.displayedOptions);
|
|
4968
|
-
|
|
4969
|
-
|
|
4970
|
-
|
|
4971
|
-
* Then open the panel if the input is still focused.
|
|
4972
|
-
*/
|
|
4977
|
+
// Notify Angular that the view needs to be re-checked.
|
|
4978
|
+
// Required when a parent component uses OnPush change detection,
|
|
4979
|
+
// otherwise the new options won't render until the next CD cycle.
|
|
4973
4980
|
this.cdr.markForCheck();
|
|
4974
|
-
this.cdr.detectChanges();
|
|
4975
|
-
if (this.displayedOptions.size &&
|
|
4976
|
-
document.activeElement === this.input?.nativeElement &&
|
|
4977
|
-
!this.trigger?.panelOpen) {
|
|
4978
|
-
// Defer panel opening to next microtask to ensure the autocomplete
|
|
4979
|
-
// overlay picks up rendered options after change detection completes
|
|
4980
|
-
// (required when parent uses OnPush change detection).
|
|
4981
|
-
Promise.resolve().then(() => {
|
|
4982
|
-
if (document.activeElement === this.input?.nativeElement && !this.trigger?.panelOpen) {
|
|
4983
|
-
this.trigger?.openPanel();
|
|
4984
|
-
}
|
|
4985
|
-
});
|
|
4986
|
-
}
|
|
4987
4981
|
});
|
|
4988
4982
|
}
|
|
4989
4983
|
/** @ignore */
|