@ascentgl/ads-ui 21.103.0 → 21.104.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.
|
@@ -7192,6 +7192,8 @@ class AdsChipComponent {
|
|
|
7192
7192
|
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
7193
7193
|
/** Show delete icon before text */
|
|
7194
7194
|
this.deletable = input(false, ...(ngDevMode ? [{ debugName: "deletable" }] : []));
|
|
7195
|
+
/** Show pointer cursor to indicate the chip is clickable */
|
|
7196
|
+
this.clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable" }] : []));
|
|
7195
7197
|
/** Enable dropdown mode */
|
|
7196
7198
|
this.dropdown = input(false, ...(ngDevMode ? [{ debugName: "dropdown" }] : []));
|
|
7197
7199
|
/** Dropdown options when dropdown mode is enabled */
|
|
@@ -7247,12 +7249,12 @@ class AdsChipComponent {
|
|
|
7247
7249
|
this.closeDropdown();
|
|
7248
7250
|
}
|
|
7249
7251
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsChipComponent, deps: [{ token: i1.AdsIconRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7250
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsChipComponent, isStandalone: false, selector: "ads-chip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCheckedIcon: { classPropertyName: "showCheckedIcon", publicName: "showCheckedIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, dropdown: { classPropertyName: "dropdown", publicName: "dropdown", isSignal: true, isRequired: false, transformFunction: null }, dropdownOptions: { classPropertyName: "dropdownOptions", publicName: "dropdownOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted", selected: "selected", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div\n class=\"chip\"\n [class.disabled]=\"disabled()\"\n [class.dropdown-chip]=\"dropdown()\"\n [class.dropdown-open]=\"isDropdownOpen\"\n tabindex=\"0\"\n [id]=\"id()\"\n (click)=\"onSelected()\"\n>\n @if (showCheckedIcon()) {\n <ads-icon name=\"check\" />\n }\n @if (title()) {\n <span>{{ title() }}</span>\n } @else {\n <span>\n <ng-content></ng-content>\n </span>\n }\n @if (dropdown()) {\n <ads-icon\n name=\"dropdown_arrow\"\n class=\"dropdown-arrow\"\n />\n @if (isDropdownOpen) {\n <div class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n @for (option of dropdownOptions(); track option.id) {\n <div class=\"dropdown-option\" (click)=\"selectOption(option)\">\n {{ option.label }}\n </div>\n }\n </div>\n }\n }\n @if (deletable()) {\n <ads-icon name=\"cross\" class=\"chip-delete\" (click)=\"onDelete($event)\" />\n }\n</div>\n", styles: [":host{display:flex;height:32px;position:relative}.chip{display:inline-flex;justify-content:space-between;align-items:center;padding:8px 16px;font-size:12px;line-height:16px;font-weight:400;color:var(--color-medium);background-color:var(--color-muted);border-radius:100px;gap:8px;position:relative}.chip ads-icon{width:10px!important;height:10px!important;stroke:var(--color-medium)}.chip .chip-delete{cursor:pointer}.chip .dropdown-arrow{cursor:pointer;transition:transform .2s ease;fill:var(--color-medium)}.chip span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.2;max-height:2.4em}.chip.dropdown-chip{cursor:pointer}.chip .dropdown-menu{position:absolute;top:100%;left:0;min-width:100%;background-color:var(--color-white);border-radius:0 0 5px 5px;box-shadow:0 2px 8px #00000026;z-index:1000;overflow:hidden}.chip .dropdown-menu .dropdown-option{padding:12px;font-size:16px;line-height:21px;color:var(--color-dark);cursor:pointer;white-space:nowrap}.chip .dropdown-menu .dropdown-option:hover{background-color:var(--color-secondary-hover);color:var(--color-white)}.chip .dropdown-menu .dropdown-option:active{color:var(--color-white);background-color:var(--color-secondary-pressed)}.chip.disabled{background-color:var(--color-light-30);color:var(--color-medium-50)}.chip.disabled .chip-delete,.chip.disabled .dropdown-arrow{cursor:default}.chip.disabled ads-icon{stroke:var(--color-medium-50)}.chip.disabled .dropdown-arrow{fill:var(--color-medium-50)}.chip:not(.disabled):not(.dropdown-open):hover{background-color:var(--color-primary-hover);color:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):hover ads-icon{stroke:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):hover .dropdown-arrow{fill:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):focus:active{background-color:var(--color-primary-pressed);color:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):focus:active ads-icon{stroke:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):focus:active .dropdown-arrow{fill:var(--color-white)}\n"], dependencies: [{ kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
|
|
7252
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AdsChipComponent, isStandalone: false, selector: "ads-chip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showCheckedIcon: { classPropertyName: "showCheckedIcon", publicName: "showCheckedIcon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, dropdown: { classPropertyName: "dropdown", publicName: "dropdown", isSignal: true, isRequired: false, transformFunction: null }, dropdownOptions: { classPropertyName: "dropdownOptions", publicName: "dropdownOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleted: "deleted", selected: "selected", optionSelected: "optionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div\n class=\"chip\"\n [class.disabled]=\"disabled()\"\n [class.clickable]=\"clickable()\"\n [class.dropdown-chip]=\"dropdown()\"\n [class.dropdown-open]=\"isDropdownOpen\"\n tabindex=\"0\"\n [id]=\"id()\"\n (click)=\"onSelected()\"\n>\n @if (showCheckedIcon()) {\n <ads-icon name=\"check\" />\n }\n @if (title()) {\n <span>{{ title() }}</span>\n } @else {\n <span>\n <ng-content></ng-content>\n </span>\n }\n @if (dropdown()) {\n <ads-icon\n name=\"dropdown_arrow\"\n class=\"dropdown-arrow\"\n />\n @if (isDropdownOpen) {\n <div class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n @for (option of dropdownOptions(); track option.id) {\n <div class=\"dropdown-option\" (click)=\"selectOption(option)\">\n {{ option.label }}\n </div>\n }\n </div>\n }\n }\n @if (deletable()) {\n <ads-icon name=\"cross\" class=\"chip-delete\" (click)=\"onDelete($event)\" />\n }\n</div>\n", styles: [":host{display:flex;height:32px;position:relative}.chip{display:inline-flex;justify-content:space-between;align-items:center;padding:8px 16px;font-size:12px;line-height:16px;font-weight:400;color:var(--color-medium);background-color:var(--color-muted);border-radius:100px;gap:8px;position:relative}.chip ads-icon{width:10px!important;height:10px!important;stroke:var(--color-medium)}.chip .chip-delete{cursor:pointer}.chip .dropdown-arrow{cursor:pointer;transition:transform .2s ease;fill:var(--color-medium)}.chip span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.2;max-height:2.4em}.chip.clickable,.chip.dropdown-chip{cursor:pointer}.chip .dropdown-menu{position:absolute;top:100%;left:0;min-width:100%;background-color:var(--color-white);border-radius:0 0 5px 5px;box-shadow:0 2px 8px #00000026;z-index:1000;overflow:hidden}.chip .dropdown-menu .dropdown-option{padding:12px;font-size:16px;line-height:21px;color:var(--color-dark);cursor:pointer;white-space:nowrap}.chip .dropdown-menu .dropdown-option:hover{background-color:var(--color-secondary-hover);color:var(--color-white)}.chip .dropdown-menu .dropdown-option:active{color:var(--color-white);background-color:var(--color-secondary-pressed)}.chip.disabled{background-color:var(--color-light-30);color:var(--color-medium-50)}.chip.disabled .chip-delete,.chip.disabled .dropdown-arrow{cursor:default}.chip.disabled ads-icon{stroke:var(--color-medium-50)}.chip.disabled .dropdown-arrow{fill:var(--color-medium-50)}.chip:not(.disabled):not(.dropdown-open):hover,.chip:not(.disabled):not(.dropdown-open):focus-visible{background-color:var(--color-primary-hover);color:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):hover ads-icon,.chip:not(.disabled):not(.dropdown-open):focus-visible ads-icon{stroke:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):hover .dropdown-arrow,.chip:not(.disabled):not(.dropdown-open):focus-visible .dropdown-arrow{fill:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):focus-visible{outline:none}.chip:not(.disabled):not(.dropdown-open):focus:active{background-color:var(--color-primary-pressed);color:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):focus:active ads-icon{stroke:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):focus:active .dropdown-arrow{fill:var(--color-white)}\n"], dependencies: [{ kind: "component", type: i1.AdsIconComponent, selector: "ads-icon", inputs: ["size", "name", "color", "theme", "stroke"] }] }); }
|
|
7251
7253
|
}
|
|
7252
7254
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AdsChipComponent, decorators: [{
|
|
7253
7255
|
type: Component,
|
|
7254
|
-
args: [{ selector: 'ads-chip', standalone: false, template: "<div\n class=\"chip\"\n [class.disabled]=\"disabled()\"\n [class.dropdown-chip]=\"dropdown()\"\n [class.dropdown-open]=\"isDropdownOpen\"\n tabindex=\"0\"\n [id]=\"id()\"\n (click)=\"onSelected()\"\n>\n @if (showCheckedIcon()) {\n <ads-icon name=\"check\" />\n }\n @if (title()) {\n <span>{{ title() }}</span>\n } @else {\n <span>\n <ng-content></ng-content>\n </span>\n }\n @if (dropdown()) {\n <ads-icon\n name=\"dropdown_arrow\"\n class=\"dropdown-arrow\"\n />\n @if (isDropdownOpen) {\n <div class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n @for (option of dropdownOptions(); track option.id) {\n <div class=\"dropdown-option\" (click)=\"selectOption(option)\">\n {{ option.label }}\n </div>\n }\n </div>\n }\n }\n @if (deletable()) {\n <ads-icon name=\"cross\" class=\"chip-delete\" (click)=\"onDelete($event)\" />\n }\n</div>\n", styles: [":host{display:flex;height:32px;position:relative}.chip{display:inline-flex;justify-content:space-between;align-items:center;padding:8px 16px;font-size:12px;line-height:16px;font-weight:400;color:var(--color-medium);background-color:var(--color-muted);border-radius:100px;gap:8px;position:relative}.chip ads-icon{width:10px!important;height:10px!important;stroke:var(--color-medium)}.chip .chip-delete{cursor:pointer}.chip .dropdown-arrow{cursor:pointer;transition:transform .2s ease;fill:var(--color-medium)}.chip span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.2;max-height:2.4em}.chip.dropdown-chip{cursor:pointer}.chip .dropdown-menu{position:absolute;top:100%;left:0;min-width:100%;background-color:var(--color-white);border-radius:0 0 5px 5px;box-shadow:0 2px 8px #00000026;z-index:1000;overflow:hidden}.chip .dropdown-menu .dropdown-option{padding:12px;font-size:16px;line-height:21px;color:var(--color-dark);cursor:pointer;white-space:nowrap}.chip .dropdown-menu .dropdown-option:hover{background-color:var(--color-secondary-hover);color:var(--color-white)}.chip .dropdown-menu .dropdown-option:active{color:var(--color-white);background-color:var(--color-secondary-pressed)}.chip.disabled{background-color:var(--color-light-30);color:var(--color-medium-50)}.chip.disabled .chip-delete,.chip.disabled .dropdown-arrow{cursor:default}.chip.disabled ads-icon{stroke:var(--color-medium-50)}.chip.disabled .dropdown-arrow{fill:var(--color-medium-50)}.chip:not(.disabled):not(.dropdown-open):hover{background-color:var(--color-primary-hover);color:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):hover ads-icon{stroke:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):hover .dropdown-arrow{fill:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):focus:active{background-color:var(--color-primary-pressed);color:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):focus:active ads-icon{stroke:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):focus:active .dropdown-arrow{fill:var(--color-white)}\n"] }]
|
|
7255
|
-
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }, { type: i0.ElementRef }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showCheckedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckedIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], deletable: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletable", required: false }] }], dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdown", required: false }] }], dropdownOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownOptions", required: false }] }], deleted: [{ type: i0.Output, args: ["deleted"] }], selected: [{ type: i0.Output, args: ["selected"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], onDocumentClick: [{
|
|
7256
|
+
args: [{ selector: 'ads-chip', standalone: false, template: "<div\n class=\"chip\"\n [class.disabled]=\"disabled()\"\n [class.clickable]=\"clickable()\"\n [class.dropdown-chip]=\"dropdown()\"\n [class.dropdown-open]=\"isDropdownOpen\"\n tabindex=\"0\"\n [id]=\"id()\"\n (click)=\"onSelected()\"\n>\n @if (showCheckedIcon()) {\n <ads-icon name=\"check\" />\n }\n @if (title()) {\n <span>{{ title() }}</span>\n } @else {\n <span>\n <ng-content></ng-content>\n </span>\n }\n @if (dropdown()) {\n <ads-icon\n name=\"dropdown_arrow\"\n class=\"dropdown-arrow\"\n />\n @if (isDropdownOpen) {\n <div class=\"dropdown-menu\" (click)=\"$event.stopPropagation()\">\n @for (option of dropdownOptions(); track option.id) {\n <div class=\"dropdown-option\" (click)=\"selectOption(option)\">\n {{ option.label }}\n </div>\n }\n </div>\n }\n }\n @if (deletable()) {\n <ads-icon name=\"cross\" class=\"chip-delete\" (click)=\"onDelete($event)\" />\n }\n</div>\n", styles: [":host{display:flex;height:32px;position:relative}.chip{display:inline-flex;justify-content:space-between;align-items:center;padding:8px 16px;font-size:12px;line-height:16px;font-weight:400;color:var(--color-medium);background-color:var(--color-muted);border-radius:100px;gap:8px;position:relative}.chip ads-icon{width:10px!important;height:10px!important;stroke:var(--color-medium)}.chip .chip-delete{cursor:pointer}.chip .dropdown-arrow{cursor:pointer;transition:transform .2s ease;fill:var(--color-medium)}.chip span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.2;max-height:2.4em}.chip.clickable,.chip.dropdown-chip{cursor:pointer}.chip .dropdown-menu{position:absolute;top:100%;left:0;min-width:100%;background-color:var(--color-white);border-radius:0 0 5px 5px;box-shadow:0 2px 8px #00000026;z-index:1000;overflow:hidden}.chip .dropdown-menu .dropdown-option{padding:12px;font-size:16px;line-height:21px;color:var(--color-dark);cursor:pointer;white-space:nowrap}.chip .dropdown-menu .dropdown-option:hover{background-color:var(--color-secondary-hover);color:var(--color-white)}.chip .dropdown-menu .dropdown-option:active{color:var(--color-white);background-color:var(--color-secondary-pressed)}.chip.disabled{background-color:var(--color-light-30);color:var(--color-medium-50)}.chip.disabled .chip-delete,.chip.disabled .dropdown-arrow{cursor:default}.chip.disabled ads-icon{stroke:var(--color-medium-50)}.chip.disabled .dropdown-arrow{fill:var(--color-medium-50)}.chip:not(.disabled):not(.dropdown-open):hover,.chip:not(.disabled):not(.dropdown-open):focus-visible{background-color:var(--color-primary-hover);color:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):hover ads-icon,.chip:not(.disabled):not(.dropdown-open):focus-visible ads-icon{stroke:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):hover .dropdown-arrow,.chip:not(.disabled):not(.dropdown-open):focus-visible .dropdown-arrow{fill:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):focus-visible{outline:none}.chip:not(.disabled):not(.dropdown-open):focus:active{background-color:var(--color-primary-pressed);color:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):focus:active ads-icon{stroke:var(--color-white)}.chip:not(.disabled):not(.dropdown-open):focus:active .dropdown-arrow{fill:var(--color-white)}\n"] }]
|
|
7257
|
+
}], ctorParameters: () => [{ type: i1.AdsIconRegistry }, { type: i0.ElementRef }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showCheckedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckedIcon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], deletable: [{ type: i0.Input, args: [{ isSignal: true, alias: "deletable", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], dropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdown", required: false }] }], dropdownOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownOptions", required: false }] }], deleted: [{ type: i0.Output, args: ["deleted"] }], selected: [{ type: i0.Output, args: ["selected"] }], optionSelected: [{ type: i0.Output, args: ["optionSelected"] }], onDocumentClick: [{
|
|
7256
7258
|
type: HostListener,
|
|
7257
7259
|
args: ['document:click', ['$event']]
|
|
7258
7260
|
}] } });
|