@agorapulse/ui-components 22.0.33 → 22.1.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.
- package/agorapulse-ui-components-22.1.0.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-autocomplete.mjs +5 -3
- package/fesm2022/agorapulse-ui-components-autocomplete.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-datepicker.mjs +3 -2
- package/fesm2022/agorapulse-ui-components-datepicker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-directives.mjs +140 -2
- package/fesm2022/agorapulse-ui-components-directives.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs +7 -2
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-input-search.mjs +4 -3
- package/fesm2022/agorapulse-ui-components-input-search.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-media-display-overlay.mjs +3 -3
- package/fesm2022/agorapulse-ui-components-media-display-overlay.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-popmenu.mjs +3 -2
- package/fesm2022/agorapulse-ui-components-popmenu.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-radio-button-card.mjs +3 -2
- package/fesm2022/agorapulse-ui-components-radio-button-card.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-select.mjs +5 -4
- package/fesm2022/agorapulse-ui-components-select.mjs.map +1 -1
- package/package.json +1 -1
- package/types/agorapulse-ui-components-directives.d.ts +63 -1
- package/agorapulse-ui-components-22.0.33.tgz +0 -0
|
@@ -6,6 +6,7 @@ import { BadgeComponent } from '@agorapulse/ui-components/badge';
|
|
|
6
6
|
import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
|
|
7
7
|
import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
|
|
8
8
|
import { AvatarComponent } from '@agorapulse/ui-components/avatar';
|
|
9
|
+
import { StopPropagationDirective } from '@agorapulse/ui-components/directives';
|
|
9
10
|
import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';
|
|
10
11
|
import { Subscription, BehaviorSubject, filter } from 'rxjs';
|
|
11
12
|
import { InputSearchComponent } from '@agorapulse/ui-components/input-search';
|
|
@@ -413,11 +414,11 @@ class DropdownItemMultipleOneLineComponent {
|
|
|
413
414
|
this.checkbox.focus();
|
|
414
415
|
}
|
|
415
416
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DropdownItemMultipleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
416
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: false, isRequired: false, 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 }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, symbolColor: { classPropertyName: "symbolColor", publicName: "symbolColor", isSignal: true, isRequired: false, transformFunction: null }, symbolTooltipText: { classPropertyName: "symbolTooltipText", publicName: "symbolTooltipText", 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 ?? selectMultiple?.maxItemsTooltip()\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div\n class=\"option multiple\"\n [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n #checkbox\n class=\"centered\"\n fullyControlled\n [checked]=\"selected\"\n [indeterminate]=\"indeterminate\"\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 [network]=\"network()\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\"\n [color]=\"symbolColor() ?? ''\"\n [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\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 </ap-checkbox>\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\" />\n }\n\n @if (onlyEnabled && !disabled && !isFeatureLocked()) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault();
|
|
417
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: false, isRequired: false, 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 }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, symbolColor: { classPropertyName: "symbolColor", publicName: "symbolColor", isSignal: true, isRequired: false, transformFunction: null }, symbolTooltipText: { classPropertyName: "symbolTooltipText", publicName: "symbolTooltipText", 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 ?? selectMultiple?.maxItemsTooltip()\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div\n class=\"option multiple\"\n [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n #checkbox\n class=\"centered\"\n fullyControlled\n [checked]=\"selected\"\n [indeterminate]=\"indeterminate\"\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 [network]=\"network()\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\"\n [color]=\"symbolColor() ?? ''\"\n [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\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 </ap-checkbox>\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\" />\n }\n\n @if (onlyEnabled && !disabled && !isFeatureLocked()) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n apStopPropagation\n (click)=\"$event.preventDefault(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n</div>\n\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);width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox{width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;flex-direction:row;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%;word-break:break-word}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "fullyControlled", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: StopPropagationDirective, selector: "[apStopPropagation]" }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
417
418
|
}
|
|
418
419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DropdownItemMultipleOneLineComponent, decorators: [{
|
|
419
420
|
type: Component,
|
|
420
|
-
args: [{ selector: 'ap-dropdown-item-multiple-one-line', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip ?? selectMultiple?.maxItemsTooltip()\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div\n class=\"option multiple\"\n [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n #checkbox\n class=\"centered\"\n fullyControlled\n [checked]=\"selected\"\n [indeterminate]=\"indeterminate\"\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 [network]=\"network()\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\"\n [color]=\"symbolColor() ?? ''\"\n [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\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 </ap-checkbox>\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\" />\n }\n\n @if (onlyEnabled && !disabled && !isFeatureLocked()) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault();
|
|
421
|
+
args: [{ selector: 'ap-dropdown-item-multiple-one-line', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, StopPropagationDirective, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip ?? selectMultiple?.maxItemsTooltip()\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div\n class=\"option multiple\"\n [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n #checkbox\n class=\"centered\"\n fullyControlled\n [checked]=\"selected\"\n [indeterminate]=\"indeterminate\"\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 [network]=\"network()\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\"\n [color]=\"symbolColor() ?? ''\"\n [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\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 </ap-checkbox>\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\" />\n }\n\n @if (onlyEnabled && !disabled && !isFeatureLocked()) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n apStopPropagation\n (click)=\"$event.preventDefault(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n</div>\n\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);width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox{width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;flex-direction:row;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%;word-break:break-word}\n"] }]
|
|
421
422
|
}], ctorParameters: () => [], propDecorators: { text: [{
|
|
422
423
|
type: Input,
|
|
423
424
|
args: [{ required: true }]
|
|
@@ -495,11 +496,11 @@ class DropdownItemMultipleTwoLinesComponent {
|
|
|
495
496
|
this.checkbox.focus();
|
|
496
497
|
}
|
|
497
498
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
498
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, symbolColor: { classPropertyName: "symbolColor", publicName: "symbolColor", isSignal: true, isRequired: false, transformFunction: null }, symbolTooltipText: { classPropertyName: "symbolTooltipText", publicName: "symbolTooltipText", 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 ?? selectMultiple?.maxItemsTooltip()\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n class=\"centered\"\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 [network]=\"network()\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\"\n [color]=\"symbolColor() ?? ''\"\n [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\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();
|
|
499
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, symbolColor: { classPropertyName: "symbolColor", publicName: "symbolColor", isSignal: true, isRequired: false, transformFunction: null }, symbolTooltipText: { classPropertyName: "symbolTooltipText", publicName: "symbolTooltipText", 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 ?? selectMultiple?.maxItemsTooltip()\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n class=\"centered\"\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 [network]=\"network()\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\"\n [color]=\"symbolColor() ?? ''\"\n [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\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 apStopPropagation\n (click)=\"$event.preventDefault(); 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: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "fullyControlled", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: StopPropagationDirective, selector: "[apStopPropagation]" }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
499
500
|
}
|
|
500
501
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, decorators: [{
|
|
501
502
|
type: Component,
|
|
502
|
-
args: [{ selector: 'ap-dropdown-item-multiple-two-lines', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip ?? selectMultiple?.maxItemsTooltip()\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n class=\"centered\"\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 [network]=\"network()\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\"\n [color]=\"symbolColor() ?? ''\"\n [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\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();
|
|
503
|
+
args: [{ selector: 'ap-dropdown-item-multiple-two-lines', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, StopPropagationDirective, TooltipDirective], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip ?? selectMultiple?.maxItemsTooltip()\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n class=\"centered\"\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 [network]=\"network()\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\"\n [color]=\"symbolColor() ?? ''\"\n [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\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 apStopPropagation\n (click)=\"$event.preventDefault(); 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"] }]
|
|
503
504
|
}], ctorParameters: () => [], propDecorators: { text: [{
|
|
504
505
|
type: Input,
|
|
505
506
|
args: [{ required: true }]
|