@agorapulse/ui-components 17.2.4 → 17.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/agorapulse-ui-components-17.2.5.tgz +0 -0
- package/esm2022/input-search/input-search.component.mjs +3 -3
- package/esm2022/labels-selector/labels-selector.component.mjs +2 -2
- package/esm2022/phone-number-input/phone-number-input.component.mjs +2 -2
- package/esm2022/select/dropdown-item-multiple-one-line/dropdown-item-multiple-one-line.component.mjs +4 -3
- package/esm2022/select/dropdown-item-multiple-two-lines/dropdown-item-multiple-two-lines.component.mjs +4 -3
- package/esm2022/select/dropdown-item-single-one-line/dropdown-item-single-one-line.component.mjs +4 -3
- package/esm2022/select/dropdown-item-single-two-lines/dropdown-item-single-two-lines.component.mjs +4 -3
- package/esm2022/select/select-label-multiple/select-label-multiple.component.mjs +4 -3
- package/esm2022/select/select-label-single/select-label-single.component.mjs +5 -4
- package/esm2022/snackbars-thread/component/snackbars-thread.component.mjs +14 -6
- package/esm2022/snackbars-thread/model/snackbars-thread.model.mjs +1 -1
- package/esm2022/snackbars-thread/service/snackbars-thread.service.mjs +2 -1
- package/fesm2022/agorapulse-ui-components-input-search.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-input-search.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-labels-selector.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-labels-selector.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-phone-number-input.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-phone-number-input.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-select.mjs +18 -12
- package/fesm2022/agorapulse-ui-components-select.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-snackbars-thread.mjs +14 -5
- package/fesm2022/agorapulse-ui-components-snackbars-thread.mjs.map +1 -1
- package/package.json +31 -31
- package/select/dropdown-item-multiple-one-line/dropdown-item-multiple-one-line.component.d.ts +2 -1
- package/select/dropdown-item-multiple-two-lines/dropdown-item-multiple-two-lines.component.d.ts +2 -1
- package/select/dropdown-item-single-one-line/dropdown-item-single-one-line.component.d.ts +2 -1
- package/select/dropdown-item-single-two-lines/dropdown-item-single-two-lines.component.d.ts +2 -1
- package/select/select-label-multiple/select-label-multiple.component.d.ts +2 -1
- package/select/select-label-single/select-label-single.component.d.ts +2 -1
- package/snackbars-thread/component/snackbars-thread.component.d.ts +2 -1
- package/snackbars-thread/model/snackbars-thread.model.d.ts +1 -0
- package/agorapulse-ui-components-17.2.4.tgz +0 -0
|
@@ -76,6 +76,7 @@ class DropdownItemMultipleOneLineComponent {
|
|
|
76
76
|
onlyEnabled = false;
|
|
77
77
|
onlyText;
|
|
78
78
|
isFeatureLocked = input(false);
|
|
79
|
+
roundedAvatar = input(true);
|
|
79
80
|
selectOnly = new EventEmitter();
|
|
80
81
|
lockedFeatureClicked = output();
|
|
81
82
|
checkbox;
|
|
@@ -90,11 +91,11 @@ class DropdownItemMultipleOneLineComponent {
|
|
|
90
91
|
this.checkbox.focus();
|
|
91
92
|
}
|
|
92
93
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemMultipleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
93
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemMultipleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n #checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <span\n class=\"option-item\"\n [class.feature-locked-label]=\"isFeatureLocked()\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n }\n\n @if (onlyEnabled && !disabled) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n\n </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
94
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemMultipleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n #checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <span\n class=\"option-item\"\n [class.feature-locked-label]=\"isFeatureLocked()\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n }\n\n @if (onlyEnabled && !disabled) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n\n </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
94
95
|
}
|
|
95
96
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemMultipleOneLineComponent, decorators: [{
|
|
96
97
|
type: Component,
|
|
97
|
-
args: [{ selector: 'ap-dropdown-item-multiple-one-line', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective, SymbolComponent, SymbolComponent], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n #checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <span\n class=\"option-item\"\n [class.feature-locked-label]=\"isFeatureLocked()\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n }\n\n @if (onlyEnabled && !disabled) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n\n </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%}\n"] }]
|
|
98
|
+
args: [{ selector: 'ap-dropdown-item-multiple-one-line', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective, SymbolComponent, SymbolComponent], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n #checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <span\n class=\"option-item\"\n [class.feature-locked-label]=\"isFeatureLocked()\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n }\n\n @if (onlyEnabled && !disabled) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n\n </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%}\n"] }]
|
|
98
99
|
}], propDecorators: { text: [{
|
|
99
100
|
type: Input,
|
|
100
101
|
args: [{ required: true }]
|
|
@@ -144,6 +145,7 @@ class DropdownItemMultipleTwoLinesComponent {
|
|
|
144
145
|
onlyEnabled = false;
|
|
145
146
|
onlyText;
|
|
146
147
|
isFeatureLocked = input(false);
|
|
148
|
+
roundedAvatar = input(true);
|
|
147
149
|
selectOnly = new EventEmitter();
|
|
148
150
|
lockedFeatureClicked = output();
|
|
149
151
|
checkbox;
|
|
@@ -158,11 +160,11 @@ class DropdownItemMultipleTwoLinesComponent {
|
|
|
158
160
|
this.checkbox.focus();
|
|
159
161
|
}
|
|
160
162
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
161
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemMultipleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <div class=\"texts\" [class.feature-locked-label]=\"isFeatureLocked()\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n </div>\n <span\n class=\"caption\"\n [title]=\"caption\">\n {{ caption }}\n </span>\n </div>\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n }\n\n @if (onlyEnabled && !disabled) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-multiple-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
163
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemMultipleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <div class=\"texts\" [class.feature-locked-label]=\"isFeatureLocked()\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n </div>\n <span\n class=\"caption\"\n [title]=\"caption\">\n {{ caption }}\n </span>\n </div>\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n }\n\n @if (onlyEnabled && !disabled) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-multiple-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
162
164
|
}
|
|
163
165
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, decorators: [{
|
|
164
166
|
type: Component,
|
|
165
|
-
args: [{ selector: 'ap-dropdown-item-multiple-two-lines', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <div class=\"texts\" [class.feature-locked-label]=\"isFeatureLocked()\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n </div>\n <span\n class=\"caption\"\n [title]=\"caption\">\n {{ caption }}\n </span>\n </div>\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n }\n\n @if (onlyEnabled && !disabled) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-multiple-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
|
|
167
|
+
args: [{ selector: 'ap-dropdown-item-multiple-two-lines', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <div class=\"texts\" [class.feature-locked-label]=\"isFeatureLocked()\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n </div>\n <span\n class=\"caption\"\n [title]=\"caption\">\n {{ caption }}\n </span>\n </div>\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n }\n\n @if (onlyEnabled && !disabled) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-multiple-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
|
|
166
168
|
}], propDecorators: { text: [{
|
|
167
169
|
type: Input,
|
|
168
170
|
args: [{ required: true }]
|
|
@@ -212,6 +214,7 @@ class DropdownItemSingleOneLineComponent {
|
|
|
212
214
|
badgeText;
|
|
213
215
|
dividerEnabled = false;
|
|
214
216
|
network = undefined;
|
|
217
|
+
roundedAvatar = input(true);
|
|
215
218
|
isFeatureLocked = input(false);
|
|
216
219
|
lockedFeatureClicked = output();
|
|
217
220
|
onClick($event) {
|
|
@@ -221,11 +224,11 @@ class DropdownItemSingleOneLineComponent {
|
|
|
221
224
|
}
|
|
222
225
|
}
|
|
223
226
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemSingleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
224
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemSingleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-single-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\" [class.feature-locked-option]=\"isFeatureLocked()\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"showAvatarInitials\"\n [network]=\"network\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <span\n class=\"option-item\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n } @else if (selected) {\n <ap-symbol\n class=\"option-selected\"\n symbolId=\"check\"\n color=\"electric-blue\"\n size=\"sm\" />\n }\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}ap-dropdown-item-single-one-line .option-item{width:100%}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
227
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemSingleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-single-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\" [class.feature-locked-option]=\"isFeatureLocked()\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"showAvatarInitials\"\n [network]=\"network\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <span\n class=\"option-item\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n } @else if (selected) {\n <ap-symbol\n class=\"option-selected\"\n symbolId=\"check\"\n color=\"electric-blue\"\n size=\"sm\" />\n }\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}ap-dropdown-item-single-one-line .option-item{width:100%}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
225
228
|
}
|
|
226
229
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemSingleOneLineComponent, decorators: [{
|
|
227
230
|
type: Component,
|
|
228
|
-
args: [{ selector: 'ap-dropdown-item-single-one-line', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\" [class.feature-locked-option]=\"isFeatureLocked()\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"showAvatarInitials\"\n [network]=\"network\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <span\n class=\"option-item\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n } @else if (selected) {\n <ap-symbol\n class=\"option-selected\"\n symbolId=\"check\"\n color=\"electric-blue\"\n size=\"sm\" />\n }\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}ap-dropdown-item-single-one-line .option-item{width:100%}\n"] }]
|
|
231
|
+
args: [{ selector: 'ap-dropdown-item-single-one-line', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\" [class.feature-locked-option]=\"isFeatureLocked()\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"showAvatarInitials\"\n [network]=\"network\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <span\n class=\"option-item\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n } @else if (selected) {\n <ap-symbol\n class=\"option-selected\"\n symbolId=\"check\"\n color=\"electric-blue\"\n size=\"sm\" />\n }\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}ap-dropdown-item-single-one-line .option-item{width:100%}\n"] }]
|
|
229
232
|
}], propDecorators: { text: [{
|
|
230
233
|
type: Input,
|
|
231
234
|
args: [{ required: true }]
|
|
@@ -264,6 +267,7 @@ class DropdownItemSingleTwoLinesComponent {
|
|
|
264
267
|
badgeText;
|
|
265
268
|
dividerEnabled = false;
|
|
266
269
|
network = undefined;
|
|
270
|
+
roundedAvatar = input(true);
|
|
267
271
|
isFeatureLocked = input(false);
|
|
268
272
|
lockedFeatureClicked = output();
|
|
269
273
|
onClick($event) {
|
|
@@ -273,11 +277,11 @@ class DropdownItemSingleTwoLinesComponent {
|
|
|
273
277
|
}
|
|
274
278
|
}
|
|
275
279
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
276
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemSingleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-single-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\"\n [network]=\"network\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n </div>\n <span\n class=\"caption\"\n [title]=\"caption\">\n {{ caption }}\n </span>\n </div>\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n } @else if (selected) {\n <ap-symbol\n class=\"option-selected\"\n symbolId=\"check\"\n color=\"electric-blue\"\n size=\"sm\" />\n }\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
280
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: DropdownItemSingleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-single-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\"\n [network]=\"network\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n </div>\n <span\n class=\"caption\"\n [title]=\"caption\">\n {{ caption }}\n </span>\n </div>\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n } @else if (selected) {\n <ap-symbol\n class=\"option-selected\"\n symbolId=\"check\"\n color=\"electric-blue\"\n size=\"sm\" />\n }\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
277
281
|
}
|
|
278
282
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, decorators: [{
|
|
279
283
|
type: Component,
|
|
280
|
-
args: [{ selector: 'ap-dropdown-item-single-two-lines', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\"\n [network]=\"network\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n </div>\n <span\n class=\"caption\"\n [title]=\"caption\">\n {{ caption }}\n </span>\n </div>\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n } @else if (selected) {\n <ap-symbol\n class=\"option-selected\"\n symbolId=\"check\"\n color=\"electric-blue\"\n size=\"sm\" />\n }\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
|
|
284
|
+
args: [{ selector: 'ap-dropdown-item-single-two-lines', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\"\n [network]=\"network\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\" />\n }\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n </div>\n <span\n class=\"caption\"\n [title]=\"caption\">\n {{ caption }}\n </span>\n </div>\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n } @else if (selected) {\n <ap-symbol\n class=\"option-selected\"\n symbolId=\"check\"\n color=\"electric-blue\"\n size=\"sm\" />\n }\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
|
|
281
285
|
}], propDecorators: { text: [{
|
|
282
286
|
type: Input,
|
|
283
287
|
args: [{ required: true }]
|
|
@@ -379,6 +383,7 @@ class SelectLabelMultipleComponent {
|
|
|
379
383
|
bindValue = input('');
|
|
380
384
|
bindAvatarUrl = input('');
|
|
381
385
|
bindSymbolId = input('');
|
|
386
|
+
roundedAvatar = input(true);
|
|
382
387
|
removeItem = output();
|
|
383
388
|
elementRef = inject(ElementRef);
|
|
384
389
|
injector = inject(EnvironmentInjector);
|
|
@@ -433,11 +438,11 @@ class SelectLabelMultipleComponent {
|
|
|
433
438
|
this.hiddenCount.set(hiddenCount);
|
|
434
439
|
}
|
|
435
440
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectLabelMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
436
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindAvatarUrl: { classPropertyName: "bindAvatarUrl", publicName: "bindAvatarUrl", isSignal: true, isRequired: false, transformFunction: null }, bindSymbolId: { classPropertyName: "bindSymbolId", publicName: "bindSymbolId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"multiple-item\">\n @for (item of selectedLabels(); track trackByItem($index, item)) {\n @if (displayType() === 'label') {\n <ap-label\n class=\"item\"\n color=\"blue\"\n removable=\"true\"\n [content]=\"item.label\"\n (remove)=\"removeItem.emit(item.value)\" />\n }\n\n @if (displayType() === 'tag') {\n <ap-tag\n class=\"item text-item\"\n clearable=\"true\"\n color=\"grey\"\n (clear)=\"removeItem.emit(item.value)\">\n @if (item.avatarUrl) {\n <ap-avatar\n [size]=\"16\"\n [profilePicture]=\"item.avatarUrl\"\n [username]=\"item.label\"\n [showInitials]=\"true\" />\n } @else if (item.symbolId) {\n <ap-symbol\n size=\"sm\"\n [attr.symbol-id]=\"item.symbolId\"\n [symbolId]=\"item.symbolId\" />\n }\n {{ item.label }}\n </ap-tag>\n }\n }\n</div>\n\n@if (hiddenCount() > 0) {\n <div class=\"remaining\">\n @if (displayType() === 'tag') {\n <ap-tag\n class=\"text-item\"\n color=\"grey\"\n clearable=\"false\">\n +{{ hiddenCount() }}\n </ap-tag>\n }\n @if (displayType() === 'label') {\n <ap-label\n color=\"blue\"\n removable=\"false\"\n [content]=\"'+' + hiddenCount()\" />\n }\n </div>\n}\n", styles: ["ap-select-label-multiple{display:flex}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "color", "mini"], outputs: ["clear"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
441
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindAvatarUrl: { classPropertyName: "bindAvatarUrl", publicName: "bindAvatarUrl", isSignal: true, isRequired: false, transformFunction: null }, bindSymbolId: { classPropertyName: "bindSymbolId", publicName: "bindSymbolId", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"multiple-item\">\n @for (item of selectedLabels(); track trackByItem($index, item)) {\n @if (displayType() === 'label') {\n <ap-label\n class=\"item\"\n color=\"blue\"\n removable=\"true\"\n [content]=\"item.label\"\n (remove)=\"removeItem.emit(item.value)\" />\n }\n\n @if (displayType() === 'tag') {\n <ap-tag\n class=\"item text-item\"\n clearable=\"true\"\n color=\"grey\"\n (clear)=\"removeItem.emit(item.value)\">\n @if (item.avatarUrl) {\n <ap-avatar\n [size]=\"16\"\n [rounded]=\"roundedAvatar()\"\n [profilePicture]=\"item.avatarUrl\"\n [username]=\"item.label\"\n [showInitials]=\"true\" />\n } @else if (item.symbolId) {\n <ap-symbol\n size=\"sm\"\n [attr.symbol-id]=\"item.symbolId\"\n [symbolId]=\"item.symbolId\" />\n }\n {{ item.label }}\n </ap-tag>\n }\n }\n</div>\n\n@if (hiddenCount() > 0) {\n <div class=\"remaining\">\n @if (displayType() === 'tag') {\n <ap-tag\n class=\"text-item\"\n color=\"grey\"\n clearable=\"false\">\n +{{ hiddenCount() }}\n </ap-tag>\n }\n @if (displayType() === 'label') {\n <ap-label\n color=\"blue\"\n removable=\"false\"\n [content]=\"'+' + hiddenCount()\" />\n }\n </div>\n}\n", styles: ["ap-select-label-multiple{display:flex}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "color", "mini"], outputs: ["clear"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
437
442
|
}
|
|
438
443
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectLabelMultipleComponent, decorators: [{
|
|
439
444
|
type: Component,
|
|
440
|
-
args: [{ selector: 'ap-select-label-multiple', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelComponent, TagComponent, AvatarComponent, SymbolComponent], template: "<div class=\"multiple-item\">\n @for (item of selectedLabels(); track trackByItem($index, item)) {\n @if (displayType() === 'label') {\n <ap-label\n class=\"item\"\n color=\"blue\"\n removable=\"true\"\n [content]=\"item.label\"\n (remove)=\"removeItem.emit(item.value)\" />\n }\n\n @if (displayType() === 'tag') {\n <ap-tag\n class=\"item text-item\"\n clearable=\"true\"\n color=\"grey\"\n (clear)=\"removeItem.emit(item.value)\">\n @if (item.avatarUrl) {\n <ap-avatar\n [size]=\"16\"\n [profilePicture]=\"item.avatarUrl\"\n [username]=\"item.label\"\n [showInitials]=\"true\" />\n } @else if (item.symbolId) {\n <ap-symbol\n size=\"sm\"\n [attr.symbol-id]=\"item.symbolId\"\n [symbolId]=\"item.symbolId\" />\n }\n {{ item.label }}\n </ap-tag>\n }\n }\n</div>\n\n@if (hiddenCount() > 0) {\n <div class=\"remaining\">\n @if (displayType() === 'tag') {\n <ap-tag\n class=\"text-item\"\n color=\"grey\"\n clearable=\"false\">\n +{{ hiddenCount() }}\n </ap-tag>\n }\n @if (displayType() === 'label') {\n <ap-label\n color=\"blue\"\n removable=\"false\"\n [content]=\"'+' + hiddenCount()\" />\n }\n </div>\n}\n", styles: ["ap-select-label-multiple{display:flex}\n"] }]
|
|
445
|
+
args: [{ selector: 'ap-select-label-multiple', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelComponent, TagComponent, AvatarComponent, SymbolComponent], template: "<div class=\"multiple-item\">\n @for (item of selectedLabels(); track trackByItem($index, item)) {\n @if (displayType() === 'label') {\n <ap-label\n class=\"item\"\n color=\"blue\"\n removable=\"true\"\n [content]=\"item.label\"\n (remove)=\"removeItem.emit(item.value)\" />\n }\n\n @if (displayType() === 'tag') {\n <ap-tag\n class=\"item text-item\"\n clearable=\"true\"\n color=\"grey\"\n (clear)=\"removeItem.emit(item.value)\">\n @if (item.avatarUrl) {\n <ap-avatar\n [size]=\"16\"\n [rounded]=\"roundedAvatar()\"\n [profilePicture]=\"item.avatarUrl\"\n [username]=\"item.label\"\n [showInitials]=\"true\" />\n } @else if (item.symbolId) {\n <ap-symbol\n size=\"sm\"\n [attr.symbol-id]=\"item.symbolId\"\n [symbolId]=\"item.symbolId\" />\n }\n {{ item.label }}\n </ap-tag>\n }\n }\n</div>\n\n@if (hiddenCount() > 0) {\n <div class=\"remaining\">\n @if (displayType() === 'tag') {\n <ap-tag\n class=\"text-item\"\n color=\"grey\"\n clearable=\"false\">\n +{{ hiddenCount() }}\n </ap-tag>\n }\n @if (displayType() === 'label') {\n <ap-label\n color=\"blue\"\n removable=\"false\"\n [content]=\"'+' + hiddenCount()\" />\n }\n </div>\n}\n", styles: ["ap-select-label-multiple{display:flex}\n"] }]
|
|
441
446
|
}] });
|
|
442
447
|
|
|
443
448
|
class SelectLabelSingleComponent {
|
|
@@ -446,12 +451,13 @@ class SelectLabelSingleComponent {
|
|
|
446
451
|
avatarUrl;
|
|
447
452
|
network = undefined;
|
|
448
453
|
showAvatarInitials = true;
|
|
454
|
+
roundedAvatar = input(true);
|
|
449
455
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectLabelSingleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
450
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: SelectLabelSingleComponent, isStandalone: true, selector: "ap-select-label-single", inputs: { displayType: "displayType", label: "label", avatarUrl: "avatarUrl", network: "network", showAvatarInitials: "showAvatarInitials" }, ngImport: i0, template: "@switch (displayType) {\n @case ('text') {\n <span\n class=\"text-item\"\n [title]=\"label\">\n {{ label }}\n </span>\n }\n @case ('label') {\n <ap-label\n color=\"blue\"\n [removable]=\"false\"\n [content]=\"label\" />\n }\n @case ('tag') {\n <ap-tag\n class=\"text-item\"\n color=\"grey\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"16\"\n [username]=\"label\"\n [showInitials]=\"true\"\n [profilePicture]=\"avatarUrl\" />\n }\n {{ label }}\n </ap-tag>\n }\n @case ('withAvatar') {\n <ap-avatar\n [size]=\"24\"\n [username]=\"label\"\n [showInitials]=\"showAvatarInitials\"\n [profilePicture]=\"avatarUrl\"\n [network]=\"network\" />\n <span class=\"text-item\">\n {{ label }}\n </span>\n }\n}\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "color", "mini"], outputs: ["clear"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
456
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: SelectLabelSingleComponent, isStandalone: true, selector: "ap-select-label-single", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: true, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (displayType) {\n @case ('text') {\n <span\n class=\"text-item\"\n [title]=\"label\">\n {{ label }}\n </span>\n }\n @case ('label') {\n <ap-label\n color=\"blue\"\n [removable]=\"false\"\n [content]=\"label\" />\n }\n @case ('tag') {\n <ap-tag\n class=\"text-item\"\n color=\"grey\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"16\"\n [username]=\"label\"\n [showInitials]=\"true\"\n [profilePicture]=\"avatarUrl\" />\n }\n {{ label }}\n </ap-tag>\n }\n @case ('withAvatar') {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [username]=\"label\"\n [showInitials]=\"showAvatarInitials\"\n [profilePicture]=\"avatarUrl\"\n [network]=\"network\" />\n <span class=\"text-item\">\n {{ label }}\n </span>\n }\n}\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "color", "mini"], outputs: ["clear"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
451
457
|
}
|
|
452
458
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectLabelSingleComponent, decorators: [{
|
|
453
459
|
type: Component,
|
|
454
|
-
args: [{ selector: 'ap-select-label-single', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelComponent, TagComponent, AvatarComponent], template: "@switch (displayType) {\n @case ('text') {\n <span\n class=\"text-item\"\n [title]=\"label\">\n {{ label }}\n </span>\n }\n @case ('label') {\n <ap-label\n color=\"blue\"\n [removable]=\"false\"\n [content]=\"label\" />\n }\n @case ('tag') {\n <ap-tag\n class=\"text-item\"\n color=\"grey\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [size]=\"16\"\n [username]=\"label\"\n [showInitials]=\"true\"\n [profilePicture]=\"avatarUrl\" />\n }\n {{ label }}\n </ap-tag>\n }\n @case ('withAvatar') {\n <ap-avatar\n [size]=\"24\"\n [username]=\"label\"\n [showInitials]=\"showAvatarInitials\"\n [profilePicture]=\"avatarUrl\"\n [network]=\"network\" />\n <span class=\"text-item\">\n {{ label }}\n </span>\n }\n}\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"] }]
|
|
460
|
+
args: [{ selector: 'ap-select-label-single', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelComponent, TagComponent, AvatarComponent], template: "@switch (displayType) {\n @case ('text') {\n <span\n class=\"text-item\"\n [title]=\"label\">\n {{ label }}\n </span>\n }\n @case ('label') {\n <ap-label\n color=\"blue\"\n [removable]=\"false\"\n [content]=\"label\" />\n }\n @case ('tag') {\n <ap-tag\n class=\"text-item\"\n color=\"grey\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"16\"\n [username]=\"label\"\n [showInitials]=\"true\"\n [profilePicture]=\"avatarUrl\" />\n }\n {{ label }}\n </ap-tag>\n }\n @case ('withAvatar') {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [username]=\"label\"\n [showInitials]=\"showAvatarInitials\"\n [profilePicture]=\"avatarUrl\"\n [network]=\"network\" />\n <span class=\"text-item\">\n {{ label }}\n </span>\n }\n}\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"] }]
|
|
455
461
|
}], propDecorators: { displayType: [{
|
|
456
462
|
type: Input
|
|
457
463
|
}], label: [{
|