npm - @agorapulse/ui-components - Versions diffs - 22.0.7 → 22.0.9-beta.1 - Mend

@agorapulse/ui-components 22.0.7 → 22.0.9-beta.1

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.

Files changed (65) hide show

package/agorapulse-ui-components-22.0.9-beta.1.tgz ADDED Viewed

Binary file

package/fesm2022/agorapulse-ui-components-action-dropdown.mjs CHANGED Viewed

@@ -192,11 +192,11 @@ class ActionDropdownComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ActionDropdownComponent, isStandalone: true, selector: "ap-action-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, largeModeEnabled: { classPropertyName: "largeModeEnabled", publicName: "largeModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, customWidth: { classPropertyName: "customWidth", publicName: "customWidth", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", itemClick: "itemClick" }, providers: [withSymbols(apInfo, apFeatureLock)], queries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "actionDropdownTemplate", first: true, predicate: ["actionDropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #actionDropdownTemplate>\n    <!-- Action dropdown -->\n    <div\n        class=\"ap-action-dropdown__content\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"'Action dropdown'\"\n        [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n        [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n        [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n        (keydown)=\"onKeyDown($event)\">\n        <!-- Action dropdown items -->\n        @for (item of items(); track item.label) {\n            <!-- Divider -->\n            @if (item.dividerEnabled) {\n                <div\n                    class=\"ap-action-dropdown__divider\"\n                    role=\"separator\"></div>\n            }\n            <!-- Action dropdown item -->\n            <div [apTooltip]=\"item.itemTooltipText\">\n                <button\n                    type=\"button\"\n                    role=\"menuitem\"\n                    class=\"ap-action-dropdown__item\"\n                    [class.ap-action-dropdown__item--has-description]=\"item.description\"\n                    [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n                    [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n                    [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n                    [attr.aria-disabled]=\"item.disabled\"\n                    [attr.data-track]=\"item.dataTrack\"\n                    [attr.id]=\"item.id\"\n                    [disabled]=\"item.disabled\"\n                    (click)=\"onItemClick(item)\">\n                    <!-- Start icon -->\n                    @if (item.startSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-start-icon\"\n                            size=\"sm\"\n                            [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n                            [symbolId]=\"item.startSymbolId\"\n                            [apTooltip]=\"item.startSymbolTooltipText\" />\n                    }\n                    <!-- Label -->\n                    <div class=\"ap-action-dropdown__item-text-container\">\n                        <div class=\"ap-action-dropdown__item-label-container\">\n                            <div\n                                class=\"ap-action-dropdown__item-label\"\n                                [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n                                {{ item.label }}\n                            </div>\n                            <!-- Badge -->\n                            @if (item.badgeLabel) {\n                                <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n                                    {{ item.badgeLabel }}\n                                </ap-badge>\n                            }\n                        </div>\n                        <!-- Description -->\n                        <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n                    </div>\n                    <!-- End icon -->\n                    @if (item.endSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"#858FA1\"\n                            [symbolId]=\"item.endSymbolId\"\n                            [apTooltip]=\"item.endSymbolTooltipText\" />\n                    }\n                    <!-- Feature lock icon -->\n                    @if (item.featureLockEnabled) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"purple\"\n                            symbolId=\"feature-lock\" />\n                    }\n                </button>\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: [":host{display:none}.ap-action-dropdown__content{background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-action-dropdown__content.ap-action-dropdown__content--default{width:250px}.ap-action-dropdown__content.ap-action-dropdown__content--large{width:340px}.ap-action-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-action-dropdown__item{display:flex;align-items:center;width:100%;height:40px;padding:var(--comp-action-dropdown-item-padding);border:none;background:transparent;color:var(--comp-action-dropdown-item-text-color);cursor:pointer;font-family:Averta;font-size:var(--comp-action-dropdown-item-text-size);line-height:var(--comp-action-dropdown-item-text-line-height);text-align:left}.ap-action-dropdown__item:hover{background-color:var(--comp-action-dropdown-item-background-color-hover)}.ap-action-dropdown__item:focus{outline:none;background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item:disabled{cursor:not-allowed;opacity:.4}.ap-action-dropdown__item.ap-action-dropdown__item--has-description{height:auto;min-height:50px}.ap-action-dropdown__item.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode{color:var(--comp-action-dropdown-item-text-color-red-mode)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:hover{background-color:var(--comp-action-dropdown-item-background-color-red-mode-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:focus{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:hover{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:focus{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--disabled:hover{background-color:transparent}.ap-action-dropdown__item .ap-action-dropdown__item-start-icon{margin-right:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-end-icon{margin-left:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container{display:flex;flex-direction:column;flex:1;min-width:0}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container{display:flex;align-items:center;gap:var(--comp-action-dropdown-item-label-spacing);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label.ap-action-dropdown__item-label--bold{font-weight:var(--ref-font-weight-bold)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-description{color:var(--comp-action-dropdown-item-description-color);font-size:var(--comp-action-dropdown-item-description-size);line-height:var(--comp-action-dropdown-item-description-line-height)}.ap-action-dropdown__divider{height:1px;background-color:var(--comp-action-dropdown-divider-color);margin:var(--comp-action-dropdown-divider-margin)}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ActionDropdownComponent, isStandalone: true, selector: "ap-action-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, largeModeEnabled: { classPropertyName: "largeModeEnabled", publicName: "largeModeEnabled", isSignal: true, isRequired: false, transformFunction: null }, customWidth: { classPropertyName: "customWidth", publicName: "customWidth", isSignal: true, isRequired: false, transformFunction: null }, showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, defaultPosition: { classPropertyName: "defaultPosition", publicName: "defaultPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed", itemClick: "itemClick" }, providers: [withSymbols(apInfo, apFeatureLock)], queries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "actionDropdownTemplate", first: true, predicate: ["actionDropdownTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #actionDropdownTemplate>\n    <!-- Action dropdown -->\n    <div\n        class=\"ap-action-dropdown__content\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"'Action dropdown'\"\n        [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n        [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n        [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n        (keydown)=\"onKeyDown($event)\">\n        <!-- Action dropdown items -->\n        @for (item of items(); track item.label) {\n            <!-- Divider -->\n            @if (item.dividerEnabled) {\n                <div\n                    class=\"ap-action-dropdown__divider\"\n                    role=\"separator\"></div>\n            }\n            <!-- Action dropdown item -->\n            <div [apTooltip]=\"item.itemTooltipText\">\n                <button\n                    type=\"button\"\n                    role=\"menuitem\"\n                    class=\"ap-action-dropdown__item\"\n                    [class.ap-action-dropdown__item--has-description]=\"item.description\"\n                    [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n                    [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n                    [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n                    [attr.aria-disabled]=\"item.disabled\"\n                    [attr.data-track]=\"item.dataTrack\"\n                    [attr.id]=\"item.id\"\n                    [disabled]=\"item.disabled\"\n                    (click)=\"onItemClick(item)\">\n                    <!-- Start icon -->\n                    @if (item.startSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-start-icon\"\n                            size=\"sm\"\n                            [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n                            [symbolId]=\"item.startSymbolId\"\n                            [apTooltip]=\"item.startSymbolTooltipText\" />\n                    }\n                    <!-- Label -->\n                    <div class=\"ap-action-dropdown__item-text-container\">\n                        <div class=\"ap-action-dropdown__item-label-container\">\n                            <div\n                                class=\"ap-action-dropdown__item-label\"\n                                [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n                                {{ item.label }}\n                            </div>\n                            <!-- Badge -->\n                            @if (item.badgeLabel) {\n                                <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n                                    {{ item.badgeLabel }}\n                                </ap-badge>\n                            }\n                        </div>\n                        <!-- Description -->\n                        <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n                    </div>\n                    <!-- End icon -->\n                    @if (item.endSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"#858FA1\"\n                            [symbolId]=\"item.endSymbolId\"\n                            [apTooltip]=\"item.endSymbolTooltipText\" />\n                    }\n                    <!-- Feature lock icon -->\n                    @if (item.featureLockEnabled) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"purple\"\n                            symbolId=\"feature-lock\" />\n                    }\n                </button>\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: [":host{display:none}.ap-action-dropdown__content{background-color:var(--sys-color-surface-default);border-radius:var(--sys-radius-inner);box-shadow:0 4px 25px -2px #34456326,0 4px 6px -2px #34456326;padding:var(--ref-spacing-xxs) 0;outline:none;overflow:hidden;z-index:1000}.ap-action-dropdown__content.ap-action-dropdown__content--default{width:250px}.ap-action-dropdown__content.ap-action-dropdown__content--large{width:340px}.ap-action-dropdown__content:focus{outline:2px solid var(--sys-color-border-interactive-active);outline-offset:2px}.ap-action-dropdown__item{display:flex;align-items:center;width:100%;height:40px;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);border:none;background:var(--sys-color-surface-interactive-default);color:var(--sys-color-text-interactive-default);cursor:pointer;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height);text-align:left}.ap-action-dropdown__item:hover{background-color:var(--sys-color-surface-interactive-hovered)}.ap-action-dropdown__item:focus{outline:none;background-color:var(--sys-color-surface-interactive-clicked)}.ap-action-dropdown__item:disabled{cursor:not-allowed;color:var(--sys-color-text-interactive-disabled)}.ap-action-dropdown__item.ap-action-dropdown__item--has-description{height:auto;min-height:50px}.ap-action-dropdown__item.ap-action-dropdown__item--focused{background-color:var(--sys-color-surface-interactive-clicked)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode{color:var(--sys-color-text-interactive-error-default)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:hover{background-color:var(--sys-color-surface-interactive-error-hovered)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:focus{background-color:var(--sys-color-surface-interactive-error-clicked)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode.ap-action-dropdown__item--focused{background-color:var(--sys-color-surface-interactive-error-clicked)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock .ap-action-dropdown__item-end-icon{color:var(--sys-color-icon-featurelock)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:hover{background-color:var(--sys-color-surface-interactive-featurelock-active-hovered)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:focus{background-color:var(sys-color-surface-interactive-featurelock-active-clicked)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock.ap-action-dropdown__item--focused{background-color:var(sys-color-surface-interactive-featurelock-active-clicked)}.ap-action-dropdown__item.ap-action-dropdown__item--disabled:hover{background-color:var(--sys-color-surface-interactive-default)}.ap-action-dropdown__item.ap-action-dropdown__item--disabled .ap-action-dropdown__item-description{color:var(--sys-color-text-interactive-disabled)}.ap-action-dropdown__item .ap-action-dropdown__item-start-icon{margin-right:var(--sys-spacing-inline-icon-default)}.ap-action-dropdown__item .ap-action-dropdown__item-end-icon{margin-left:var(--sys-spacing-inline-icon-default);color:var(--sys-color-icon-subtle)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container{display:flex;flex-direction:column;flex:1;min-width:0}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container{display:flex;align-items:center;gap:var(--sys-spacing-inline-icon-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label.ap-action-dropdown__item-label--bold{font-weight:var(--sys-text-style-body-bold-weight)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-description{color:var(--sys-color-text-interactive-secondary);font-size:var(--sys-text-style-caption-size);line-height:var(--sys-text-style-caption-line-height)}.ap-action-dropdown__divider{height:1px;background-color:var(--sys-color-border-default);margin:var(--ref-spacing-xxs) 0}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionDropdownComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-action-dropdown', imports: [BadgeComponent, SymbolComponent, TooltipDirective], providers: [withSymbols(apInfo, apFeatureLock)], template: "<ng-template #actionDropdownTemplate>\n    <!-- Action dropdown -->\n    <div\n        class=\"ap-action-dropdown__content\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"'Action dropdown'\"\n        [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n        [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n        [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n        (keydown)=\"onKeyDown($event)\">\n        <!-- Action dropdown items -->\n        @for (item of items(); track item.label) {\n            <!-- Divider -->\n            @if (item.dividerEnabled) {\n                <div\n                    class=\"ap-action-dropdown__divider\"\n                    role=\"separator\"></div>\n            }\n            <!-- Action dropdown item -->\n            <div [apTooltip]=\"item.itemTooltipText\">\n                <button\n                    type=\"button\"\n                    role=\"menuitem\"\n                    class=\"ap-action-dropdown__item\"\n                    [class.ap-action-dropdown__item--has-description]=\"item.description\"\n                    [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n                    [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n                    [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n                    [attr.aria-disabled]=\"item.disabled\"\n                    [attr.data-track]=\"item.dataTrack\"\n                    [attr.id]=\"item.id\"\n                    [disabled]=\"item.disabled\"\n                    (click)=\"onItemClick(item)\">\n                    <!-- Start icon -->\n                    @if (item.startSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-start-icon\"\n                            size=\"sm\"\n                            [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n                            [symbolId]=\"item.startSymbolId\"\n                            [apTooltip]=\"item.startSymbolTooltipText\" />\n                    }\n                    <!-- Label -->\n                    <div class=\"ap-action-dropdown__item-text-container\">\n                        <div class=\"ap-action-dropdown__item-label-container\">\n                            <div\n                                class=\"ap-action-dropdown__item-label\"\n                                [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n                                {{ item.label }}\n                            </div>\n                            <!-- Badge -->\n                            @if (item.badgeLabel) {\n                                <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n                                    {{ item.badgeLabel }}\n                                </ap-badge>\n                            }\n                        </div>\n                        <!-- Description -->\n                        <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n                    </div>\n                    <!-- End icon -->\n                    @if (item.endSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"#858FA1\"\n                            [symbolId]=\"item.endSymbolId\"\n                            [apTooltip]=\"item.endSymbolTooltipText\" />\n                    }\n                    <!-- Feature lock icon -->\n                    @if (item.featureLockEnabled) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"purple\"\n                            symbolId=\"feature-lock\" />\n                    }\n                </button>\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: [":host{display:none}.ap-action-dropdown__content{background-color:var(--comp-action-dropdown-background-color);border-radius:var(--comp-action-dropdown-border-radius);box-shadow:var(--comp-action-dropdown-box-shadow);padding:var(--comp-action-dropdown-padding);outline:none;overflow:hidden;z-index:1000}.ap-action-dropdown__content.ap-action-dropdown__content--default{width:250px}.ap-action-dropdown__content.ap-action-dropdown__content--large{width:340px}.ap-action-dropdown__content:focus{outline:2px solid var(--comp-action-dropdown-item-background-color-focused);outline-offset:2px}.ap-action-dropdown__item{display:flex;align-items:center;width:100%;height:40px;padding:var(--comp-action-dropdown-item-padding);border:none;background:transparent;color:var(--comp-action-dropdown-item-text-color);cursor:pointer;font-family:Averta;font-size:var(--comp-action-dropdown-item-text-size);line-height:var(--comp-action-dropdown-item-text-line-height);text-align:left}.ap-action-dropdown__item:hover{background-color:var(--comp-action-dropdown-item-background-color-hover)}.ap-action-dropdown__item:focus{outline:none;background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item:disabled{cursor:not-allowed;opacity:.4}.ap-action-dropdown__item.ap-action-dropdown__item--has-description{height:auto;min-height:50px}.ap-action-dropdown__item.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode{color:var(--comp-action-dropdown-item-text-color-red-mode)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:hover{background-color:var(--comp-action-dropdown-item-background-color-red-mode-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:focus{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-red-mode-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:hover{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-hover)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:focus{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock.ap-action-dropdown__item--focused{background-color:var(--comp-action-dropdown-item-background-color-feature-lock-focused)}.ap-action-dropdown__item.ap-action-dropdown__item--disabled:hover{background-color:transparent}.ap-action-dropdown__item .ap-action-dropdown__item-start-icon{margin-right:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-end-icon{margin-left:var(--comp-action-dropdown-item-icon-spacing)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container{display:flex;flex-direction:column;flex:1;min-width:0}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container{display:flex;align-items:center;gap:var(--comp-action-dropdown-item-label-spacing);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label.ap-action-dropdown__item-label--bold{font-weight:var(--ref-font-weight-bold)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-description{color:var(--comp-action-dropdown-item-description-color);font-size:var(--comp-action-dropdown-item-description-size);line-height:var(--comp-action-dropdown-item-description-line-height)}.ap-action-dropdown__divider{height:1px;background-color:var(--comp-action-dropdown-divider-color);margin:var(--comp-action-dropdown-divider-margin)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-action-dropdown', imports: [BadgeComponent, SymbolComponent, TooltipDirective], providers: [withSymbols(apInfo, apFeatureLock)], template: "<ng-template #actionDropdownTemplate>\n    <!-- Action dropdown -->\n    <div\n        class=\"ap-action-dropdown__content\"\n        role=\"menu\"\n        tabindex=\"-1\"\n        [attr.aria-label]=\"'Action dropdown'\"\n        [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n        [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n        [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n        (keydown)=\"onKeyDown($event)\">\n        <!-- Action dropdown items -->\n        @for (item of items(); track item.label) {\n            <!-- Divider -->\n            @if (item.dividerEnabled) {\n                <div\n                    class=\"ap-action-dropdown__divider\"\n                    role=\"separator\"></div>\n            }\n            <!-- Action dropdown item -->\n            <div [apTooltip]=\"item.itemTooltipText\">\n                <button\n                    type=\"button\"\n                    role=\"menuitem\"\n                    class=\"ap-action-dropdown__item\"\n                    [class.ap-action-dropdown__item--has-description]=\"item.description\"\n                    [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n                    [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n                    [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n                    [attr.aria-disabled]=\"item.disabled\"\n                    [attr.data-track]=\"item.dataTrack\"\n                    [attr.id]=\"item.id\"\n                    [disabled]=\"item.disabled\"\n                    (click)=\"onItemClick(item)\">\n                    <!-- Start icon -->\n                    @if (item.startSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-start-icon\"\n                            size=\"sm\"\n                            [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n                            [symbolId]=\"item.startSymbolId\"\n                            [apTooltip]=\"item.startSymbolTooltipText\" />\n                    }\n                    <!-- Label -->\n                    <div class=\"ap-action-dropdown__item-text-container\">\n                        <div class=\"ap-action-dropdown__item-label-container\">\n                            <div\n                                class=\"ap-action-dropdown__item-label\"\n                                [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n                                {{ item.label }}\n                            </div>\n                            <!-- Badge -->\n                            @if (item.badgeLabel) {\n                                <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n                                    {{ item.badgeLabel }}\n                                </ap-badge>\n                            }\n                        </div>\n                        <!-- Description -->\n                        <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n                    </div>\n                    <!-- End icon -->\n                    @if (item.endSymbolId) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"#858FA1\"\n                            [symbolId]=\"item.endSymbolId\"\n                            [apTooltip]=\"item.endSymbolTooltipText\" />\n                    }\n                    <!-- Feature lock icon -->\n                    @if (item.featureLockEnabled) {\n                        <ap-symbol\n                            class=\"ap-action-dropdown__item-end-icon\"\n                            size=\"sm\"\n                            color=\"purple\"\n                            symbolId=\"feature-lock\" />\n                    }\n                </button>\n            </div>\n        }\n    </div>\n</ng-template>\n", styles: [":host{display:none}.ap-action-dropdown__content{background-color:var(--sys-color-surface-default);border-radius:var(--sys-radius-inner);box-shadow:0 4px 25px -2px #34456326,0 4px 6px -2px #34456326;padding:var(--ref-spacing-xxs) 0;outline:none;overflow:hidden;z-index:1000}.ap-action-dropdown__content.ap-action-dropdown__content--default{width:250px}.ap-action-dropdown__content.ap-action-dropdown__content--large{width:340px}.ap-action-dropdown__content:focus{outline:2px solid var(--sys-color-border-interactive-active);outline-offset:2px}.ap-action-dropdown__item{display:flex;align-items:center;width:100%;height:40px;padding:var(--ref-spacing-xxs) var(--ref-spacing-sm);border:none;background:var(--sys-color-surface-interactive-default);color:var(--sys-color-text-interactive-default);cursor:pointer;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height);text-align:left}.ap-action-dropdown__item:hover{background-color:var(--sys-color-surface-interactive-hovered)}.ap-action-dropdown__item:focus{outline:none;background-color:var(--sys-color-surface-interactive-clicked)}.ap-action-dropdown__item:disabled{cursor:not-allowed;color:var(--sys-color-text-interactive-disabled)}.ap-action-dropdown__item.ap-action-dropdown__item--has-description{height:auto;min-height:50px}.ap-action-dropdown__item.ap-action-dropdown__item--focused{background-color:var(--sys-color-surface-interactive-clicked)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode{color:var(--sys-color-text-interactive-error-default)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:hover{background-color:var(--sys-color-surface-interactive-error-hovered)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode:focus{background-color:var(--sys-color-surface-interactive-error-clicked)}.ap-action-dropdown__item.ap-action-dropdown__item--red-mode.ap-action-dropdown__item--focused{background-color:var(--sys-color-surface-interactive-error-clicked)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock .ap-action-dropdown__item-end-icon{color:var(--sys-color-icon-featurelock)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:hover{background-color:var(--sys-color-surface-interactive-featurelock-active-hovered)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock:focus{background-color:var(sys-color-surface-interactive-featurelock-active-clicked)}.ap-action-dropdown__item.ap-action-dropdown__item--feature-lock.ap-action-dropdown__item--focused{background-color:var(sys-color-surface-interactive-featurelock-active-clicked)}.ap-action-dropdown__item.ap-action-dropdown__item--disabled:hover{background-color:var(--sys-color-surface-interactive-default)}.ap-action-dropdown__item.ap-action-dropdown__item--disabled .ap-action-dropdown__item-description{color:var(--sys-color-text-interactive-disabled)}.ap-action-dropdown__item .ap-action-dropdown__item-start-icon{margin-right:var(--sys-spacing-inline-icon-default)}.ap-action-dropdown__item .ap-action-dropdown__item-end-icon{margin-left:var(--sys-spacing-inline-icon-default);color:var(--sys-color-icon-subtle)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container{display:flex;flex-direction:column;flex:1;min-width:0}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container{display:flex;align-items:center;gap:var(--sys-spacing-inline-icon-default);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-label-container .ap-action-dropdown__item-label.ap-action-dropdown__item-label--bold{font-weight:var(--sys-text-style-body-bold-weight)}.ap-action-dropdown__item .ap-action-dropdown__item-text-container .ap-action-dropdown__item-description{color:var(--sys-color-text-interactive-secondary);font-size:var(--sys-text-style-caption-size);line-height:var(--sys-text-style-caption-line-height)}.ap-action-dropdown__divider{height:1px;background-color:var(--sys-color-border-default);margin:var(--ref-spacing-xxs) 0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { actionDropdownTemplate: [{ type: i0.ViewChild, args: ['actionDropdownTemplate', { isSignal: true }] }], trigger: [{ type: i0.ContentChild, args: ['trigger', { isSignal: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], largeModeEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "largeModeEnabled", required: false }] }], customWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "customWidth", required: false }] }], showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], defaultPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPosition", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 /**

package/fesm2022/agorapulse-ui-components-action-dropdown.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agorapulse-ui-components-action-dropdown.mjs","sources":["../../../libs/ui-components/action-dropdown/src/action-dropdown-trigger.directive.ts","../../../libs/ui-components/action-dropdown/src/action-dropdown.component.ts","../../../libs/ui-components/action-dropdown/src/action-dropdown.component.html","../../../libs/ui-components/action-dropdown/src/agorapulse-ui-components-action-dropdown.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, inject, input } from '@angular/core';\nimport { ActionDropdownComponent } from './action-dropdown.component';\n\n/*\n Directive that turns any element into a trigger for an ActionDropdown component.\n * Handles click and keyboard interactions to open/close the dropdown.\n /\n@Directive({\n selector: '[apActionDropdownTrigger]',\n})\nexport class ActionDropdownTriggerDirective {\n private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n /* Reference to the ActionDropdown component that this trigger controls /\n apActionDropdownTrigger = input<ActionDropdownComponent>();\n\n /* Handles click events to toggle the dropdown /\n @HostListener('click', ['$event'])\n onClick(event: MouseEvent): void {\n event.preventDefault();\n event.stopPropagation();\n\n this.apActionDropdownTrigger()?.toggle(this.elementRef.nativeElement);\n }\n\n /* Handles keyboard events for accessibility (Enter, Space, Arrow Down, Escape) /\n @HostListener('keydown', ['$event'])\n onKeyDown(event: KeyboardEvent): void {\n const dropdown = this.apActionDropdownTrigger();\n if (!dropdown) return;\n\n switch (event.key) {\n case 'Enter':\n case ' ':\n case 'ArrowDown':\n event.preventDefault();\n dropdown.open(this.elementRef.nativeElement);\n break;\n\n case 'Escape':\n event.preventDefault();\n dropdown.close();\n break;\n }\n }\n}\n","import { BadgeColor, BadgeComponent } from '@agorapulse/ui-components/badge';\nimport { createDropdownOverlay, DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { agorapulseSymbol, apFeatureLock, apInfo, SymbolColor, SymbolComponent, SymbolRegistry, withSymbols } from '@agorapulse/ui-symbol';\n\nimport {\n ChangeDetectionStrategy,\n Component,\n contentChild,\n effect,\n inject,\n input,\n output,\n signal,\n TemplateRef,\n viewChild,\n} from '@angular/core';\n\nexport interface ActionDropdownItem {\n /* Unique identifier for the item /\n name?: string;\n /* Display text for the item /\n label?: string;\n /* Secondary text displayed below the label /\n description?: string;\n /* Text displayed in a badge next to the item /\n badgeLabel?: string;\n /* Color of the badge displayed next to the item /\n badgeColor?: BadgeColor;\n /* Whether to show a feature lock icon /\n featureLockEnabled?: boolean;\n /* Whether to apply red styling for destructive actions /\n redModeEnabled?: boolean;\n /* Tooltip text displayed when hovering over the item /\n itemTooltipText?: string;\n /* Icon symbol identifier displayed at the start of the item /\n startSymbolId?: agorapulseSymbol;\n /* Color theme for the start symbol /\n startSymbolColor?: SymbolColor;\n /* Tooltip text for the start symbol /\n startSymbolTooltipText?: string;\n /* Icon symbol identifier displayed at the end of the item /\n endSymbolId?: agorapulseSymbol;\n /* Tooltip text for the end symbol /\n endSymbolTooltipText?: string;\n /* Whether the item is disabled and non-interactive /\n disabled?: boolean;\n /* Whether to add a divider before this item /\n dividerEnabled?: boolean;\n /* Optional ID for the action button item /\n id?: string;\n /* Optional data-track attribute for analytics tracking /\n dataTrack?: string;\n}\n\n/\n A dropdown component that displays a list of actionable items with support for icons,\n * badges, tooltips, and keyboard navigation.\n /\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-action-dropdown',\n templateUrl: './action-dropdown.component.html',\n styleUrls: ['./action-dropdown.component.scss'],\n imports: [BadgeComponent, SymbolComponent, TooltipDirective],\n providers: [withSymbols(apInfo, apFeatureLock)],\n})\nexport class ActionDropdownComponent implements DropdownOverlay {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly overlay = createDropdownOverlay();\n\n actionDropdownTemplate = viewChild<TemplateRef<unknown>>('actionDropdownTemplate');\n trigger = contentChild<TemplateRef<unknown>>('trigger');\n\n /* Array of items to display in the dropdown menu /\n items = input<ActionDropdownItem[]>([]);\n /* Whether to enable large mode styling for the dropdown /\n largeModeEnabled = input(false);\n /* Custom width for the dropdown menu in pixels /\n customWidth = input<number \| null>(null);\n\n /* Whether to show a backdrop that closes the dropdown when clicked /\n showBackdrop = input(true);\n /* Whether the dropdown is disabled and cannot be opened /\n disabled = input(false);\n /* Default position for the dropdown relative to the trigger element /\n defaultPosition = input<'right' \| 'left'>('right');\n\n /* Emits when the dropdown menu is opened /\n opened = output<void>();\n /* Emits when the dropdown menu is closed /\n closed = output<void>();\n /* Emits when a dropdown item is clicked /\n itemClick = output<ActionDropdownItem>();\n\n protected readonly focusedIndex = signal(-1);\n\n readonly isOpen = this.overlay.isOpen;\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n // Set up keyboard navigation when dropdown opens\n effect(() => {\n if (this.isOpen()) {\n this.setupKeyboardNavigation();\n }\n });\n }\n\n /* Opens the dropdown menu at the specified trigger element /\n open(triggerElement?: HTMLElement): void {\n const template = this.actionDropdownTemplate();\n if (this.disabled() \|\| this.isOpen() \|\| !template) return;\n\n this.overlay.open(template, triggerElement, {\n showBackdrop: this.showBackdrop(),\n defaultPosition: this.defaultPosition(),\n onClose: () => this.close(),\n });\n this.opened.emit();\n }\n\n /* Closes the dropdown menu and cleans up overlay resources /\n close(): void {\n if (!this.isOpen()) return;\n this.focusedIndex.set(-1);\n this.overlay.close();\n this.closed.emit();\n }\n\n /* Toggles the dropdown menu open or closed state /\n toggle(triggerElement?: HTMLElement): void {\n if (this.isOpen()) {\n this.close();\n } else {\n this.open(triggerElement);\n }\n }\n\n /* Handles item click events, emitting the selected item and closing the dropdown /\n onItemClick(item: ActionDropdownItem): void {\n if (item.disabled) {\n return;\n }\n\n this.itemClick.emit(item);\n\n this.close();\n }\n\n /* Handles keyboard navigation within the dropdown menu /\n onKeyDown(event: KeyboardEvent): void {\n const items = this.items();\n const currentIndex = this.focusedIndex();\n let nextIndex: number;\n let prevIndex: number;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n this.focusedIndex.set(nextIndex);\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n this.focusedIndex.set(prevIndex);\n break;\n\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (currentIndex >= 0 && currentIndex < items.length) {\n this.onItemClick(items[currentIndex]);\n }\n break;\n\n case 'Escape':\n event.preventDefault();\n this.close();\n break;\n\n case 'Tab':\n event.preventDefault();\n if (event.shiftKey) {\n // Shift+Tab - move to previous item\n prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n this.focusedIndex.set(prevIndex);\n } else {\n // Tab - move to next item\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n this.focusedIndex.set(nextIndex);\n }\n break;\n }\n }\n\n /* Sets up keyboard event handling for the opened dropdown /\n private setupKeyboardNavigation(): void {\n const ref = this.overlay.overlayRef;\n if (!ref) return;\n\n ref.keydownEvents().subscribe((event: KeyboardEvent) => {\n this.onKeyDown(event);\n });\n }\n}\n","<ng-template #actionDropdownTemplate>\n <!-- Action dropdown -->\n <div\n class=\"ap-action-dropdown__content\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Action dropdown'\"\n [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n (keydown)=\"onKeyDown($event)\">\n <!-- Action dropdown items -->\n @for (item of items(); track item.label) {\n <!-- Divider -->\n @if (item.dividerEnabled) {\n <div\n class=\"ap-action-dropdown__divider\"\n role=\"separator\"></div>\n }\n <!-- Action dropdown item -->\n <div [apTooltip]=\"item.itemTooltipText\">\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\n [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.data-track]=\"item.dataTrack\"\n [attr.id]=\"item.id\"\n [disabled]=\"item.disabled\"\n (click)=\"onItemClick(item)\">\n <!-- Start icon -->\n @if (item.startSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-start-icon\"\n size=\"sm\"\n [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n [symbolId]=\"item.startSymbolId\"\n [apTooltip]=\"item.startSymbolTooltipText\" />\n }\n <!-- Label -->\n <div class=\"ap-action-dropdown__item-text-container\">\n <div class=\"ap-action-dropdown__item-label-container\">\n <div\n class=\"ap-action-dropdown__item-label\"\n [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n {{ item.label }}\n </div>\n <!-- Badge -->\n @if (item.badgeLabel) {\n <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n {{ item.badgeLabel }}\n </ap-badge>\n }\n </div>\n <!-- Description -->\n <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n </div>\n <!-- End icon -->\n @if (item.endSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"#858FA1\"\n [symbolId]=\"item.endSymbolId\"\n [apTooltip]=\"item.endSymbolTooltipText\" />\n }\n <!-- Feature lock icon -->\n @if (item.featureLockEnabled) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"purple\"\n symbolId=\"feature-lock\" />\n }\n </button>\n </div>\n }\n </div>\n</ng-template>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"agorapulse-ui-components-action-dropdown.mjs","sources":["../../../libs/ui-components/action-dropdown/src/action-dropdown-trigger.directive.ts","../../../libs/ui-components/action-dropdown/src/action-dropdown.component.ts","../../../libs/ui-components/action-dropdown/src/action-dropdown.component.html","../../../libs/ui-components/action-dropdown/src/agorapulse-ui-components-action-dropdown.ts"],"sourcesContent":["import { Directive, ElementRef, HostListener, inject, input } from '@angular/core';\nimport { ActionDropdownComponent } from './action-dropdown.component';\n\n/*\n Directive that turns any element into a trigger for an ActionDropdown component.\n * Handles click and keyboard interactions to open/close the dropdown.\n /\n@Directive({\n selector: '[apActionDropdownTrigger]',\n})\nexport class ActionDropdownTriggerDirective {\n private readonly elementRef = inject(ElementRef<HTMLElement>);\n\n /* Reference to the ActionDropdown component that this trigger controls /\n apActionDropdownTrigger = input<ActionDropdownComponent>();\n\n /* Handles click events to toggle the dropdown /\n @HostListener('click', ['$event'])\n onClick(event: MouseEvent): void {\n event.preventDefault();\n event.stopPropagation();\n\n this.apActionDropdownTrigger()?.toggle(this.elementRef.nativeElement);\n }\n\n /* Handles keyboard events for accessibility (Enter, Space, Arrow Down, Escape) /\n @HostListener('keydown', ['$event'])\n onKeyDown(event: KeyboardEvent): void {\n const dropdown = this.apActionDropdownTrigger();\n if (!dropdown) return;\n\n switch (event.key) {\n case 'Enter':\n case ' ':\n case 'ArrowDown':\n event.preventDefault();\n dropdown.open(this.elementRef.nativeElement);\n break;\n\n case 'Escape':\n event.preventDefault();\n dropdown.close();\n break;\n }\n }\n}\n","import { BadgeColor, BadgeComponent } from '@agorapulse/ui-components/badge';\nimport { createDropdownOverlay, DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { agorapulseSymbol, apFeatureLock, apInfo, SymbolColor, SymbolComponent, SymbolRegistry, withSymbols } from '@agorapulse/ui-symbol';\n\nimport {\n ChangeDetectionStrategy,\n Component,\n contentChild,\n effect,\n inject,\n input,\n output,\n signal,\n TemplateRef,\n viewChild,\n} from '@angular/core';\n\nexport interface ActionDropdownItem {\n /* Unique identifier for the item /\n name?: string;\n /* Display text for the item /\n label?: string;\n /* Secondary text displayed below the label /\n description?: string;\n /* Text displayed in a badge next to the item /\n badgeLabel?: string;\n /* Color of the badge displayed next to the item /\n badgeColor?: BadgeColor;\n /* Whether to show a feature lock icon /\n featureLockEnabled?: boolean;\n /* Whether to apply red styling for destructive actions /\n redModeEnabled?: boolean;\n /* Tooltip text displayed when hovering over the item /\n itemTooltipText?: string;\n /* Icon symbol identifier displayed at the start of the item /\n startSymbolId?: agorapulseSymbol;\n /* Color theme for the start symbol /\n startSymbolColor?: SymbolColor;\n /* Tooltip text for the start symbol /\n startSymbolTooltipText?: string;\n /* Icon symbol identifier displayed at the end of the item /\n endSymbolId?: agorapulseSymbol;\n /* Tooltip text for the end symbol /\n endSymbolTooltipText?: string;\n /* Whether the item is disabled and non-interactive /\n disabled?: boolean;\n /* Whether to add a divider before this item /\n dividerEnabled?: boolean;\n /* Optional ID for the action button item /\n id?: string;\n /* Optional data-track attribute for analytics tracking /\n dataTrack?: string;\n}\n\n/\n A dropdown component that displays a list of actionable items with support for icons,\n * badges, tooltips, and keyboard navigation.\n /\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-action-dropdown',\n templateUrl: './action-dropdown.component.html',\n styleUrls: ['./action-dropdown.component.scss'],\n imports: [BadgeComponent, SymbolComponent, TooltipDirective],\n providers: [withSymbols(apInfo, apFeatureLock)],\n})\nexport class ActionDropdownComponent implements DropdownOverlay {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly overlay = createDropdownOverlay();\n\n actionDropdownTemplate = viewChild<TemplateRef<unknown>>('actionDropdownTemplate');\n trigger = contentChild<TemplateRef<unknown>>('trigger');\n\n /* Array of items to display in the dropdown menu /\n items = input<ActionDropdownItem[]>([]);\n /* Whether to enable large mode styling for the dropdown /\n largeModeEnabled = input(false);\n /* Custom width for the dropdown menu in pixels /\n customWidth = input<number \| null>(null);\n\n /* Whether to show a backdrop that closes the dropdown when clicked /\n showBackdrop = input(true);\n /* Whether the dropdown is disabled and cannot be opened /\n disabled = input(false);\n /* Default position for the dropdown relative to the trigger element /\n defaultPosition = input<'right' \| 'left'>('right');\n\n /* Emits when the dropdown menu is opened /\n opened = output<void>();\n /* Emits when the dropdown menu is closed /\n closed = output<void>();\n /* Emits when a dropdown item is clicked /\n itemClick = output<ActionDropdownItem>();\n\n protected readonly focusedIndex = signal(-1);\n\n readonly isOpen = this.overlay.isOpen;\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n // Set up keyboard navigation when dropdown opens\n effect(() => {\n if (this.isOpen()) {\n this.setupKeyboardNavigation();\n }\n });\n }\n\n /* Opens the dropdown menu at the specified trigger element /\n open(triggerElement?: HTMLElement): void {\n const template = this.actionDropdownTemplate();\n if (this.disabled() \|\| this.isOpen() \|\| !template) return;\n\n this.overlay.open(template, triggerElement, {\n showBackdrop: this.showBackdrop(),\n defaultPosition: this.defaultPosition(),\n onClose: () => this.close(),\n });\n this.opened.emit();\n }\n\n /* Closes the dropdown menu and cleans up overlay resources /\n close(): void {\n if (!this.isOpen()) return;\n this.focusedIndex.set(-1);\n this.overlay.close();\n this.closed.emit();\n }\n\n /* Toggles the dropdown menu open or closed state /\n toggle(triggerElement?: HTMLElement): void {\n if (this.isOpen()) {\n this.close();\n } else {\n this.open(triggerElement);\n }\n }\n\n /* Handles item click events, emitting the selected item and closing the dropdown /\n onItemClick(item: ActionDropdownItem): void {\n if (item.disabled) {\n return;\n }\n\n this.itemClick.emit(item);\n\n this.close();\n }\n\n /* Handles keyboard navigation within the dropdown menu /\n onKeyDown(event: KeyboardEvent): void {\n const items = this.items();\n const currentIndex = this.focusedIndex();\n let nextIndex: number;\n let prevIndex: number;\n\n switch (event.key) {\n case 'ArrowDown':\n event.preventDefault();\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n this.focusedIndex.set(nextIndex);\n break;\n\n case 'ArrowUp':\n event.preventDefault();\n prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n this.focusedIndex.set(prevIndex);\n break;\n\n case 'Enter':\n case ' ':\n event.preventDefault();\n if (currentIndex >= 0 && currentIndex < items.length) {\n this.onItemClick(items[currentIndex]);\n }\n break;\n\n case 'Escape':\n event.preventDefault();\n this.close();\n break;\n\n case 'Tab':\n event.preventDefault();\n if (event.shiftKey) {\n // Shift+Tab - move to previous item\n prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n this.focusedIndex.set(prevIndex);\n } else {\n // Tab - move to next item\n nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n this.focusedIndex.set(nextIndex);\n }\n break;\n }\n }\n\n /* Sets up keyboard event handling for the opened dropdown /\n private setupKeyboardNavigation(): void {\n const ref = this.overlay.overlayRef;\n if (!ref) return;\n\n ref.keydownEvents().subscribe((event: KeyboardEvent) => {\n this.onKeyDown(event);\n });\n }\n}\n","<ng-template #actionDropdownTemplate>\n <!-- Action dropdown -->\n <div\n class=\"ap-action-dropdown__content\"\n role=\"menu\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Action dropdown'\"\n [class.ap-action-dropdown__content--default]=\"!largeModeEnabled() && !customWidth()\"\n [class.ap-action-dropdown__content--large]=\"largeModeEnabled()\"\n [style.width]=\"customWidth() ? customWidth() + 'px' : undefined\"\n (keydown)=\"onKeyDown($event)\">\n <!-- Action dropdown items -->\n @for (item of items(); track item.label) {\n <!-- Divider -->\n @if (item.dividerEnabled) {\n <div\n class=\"ap-action-dropdown__divider\"\n role=\"separator\"></div>\n }\n <!-- Action dropdown item -->\n <div [apTooltip]=\"item.itemTooltipText\">\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\n [class.ap-action-dropdown__item--focused]=\"focusedIndex() === $index\"\n [class.ap-action-dropdown__item--red-mode]=\"item.redModeEnabled\"\n [class.ap-action-dropdown__item--feature-lock]=\"item.featureLockEnabled\"\n [attr.aria-disabled]=\"item.disabled\"\n [attr.data-track]=\"item.dataTrack\"\n [attr.id]=\"item.id\"\n [disabled]=\"item.disabled\"\n (click)=\"onItemClick(item)\">\n <!-- Start icon -->\n @if (item.startSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-start-icon\"\n size=\"sm\"\n [color]=\"item.startSymbolColor ? item.startSymbolColor : item.redModeEnabled ? 'red' : 'basic-grey'\"\n [symbolId]=\"item.startSymbolId\"\n [apTooltip]=\"item.startSymbolTooltipText\" />\n }\n <!-- Label -->\n <div class=\"ap-action-dropdown__item-text-container\">\n <div class=\"ap-action-dropdown__item-label-container\">\n <div\n class=\"ap-action-dropdown__item-label\"\n [class.ap-action-dropdown__item-label--bold]=\"item.description\">\n {{ item.label }}\n </div>\n <!-- Badge -->\n @if (item.badgeLabel) {\n <ap-badge [color]=\"item.badgeColor ?? 'blue'\">\n {{ item.badgeLabel }}\n </ap-badge>\n }\n </div>\n <!-- Description -->\n <div class=\"ap-action-dropdown__item-description\">{{ item.description }}</div>\n </div>\n <!-- End icon -->\n @if (item.endSymbolId) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"#858FA1\"\n [symbolId]=\"item.endSymbolId\"\n [apTooltip]=\"item.endSymbolTooltipText\" />\n }\n <!-- Feature lock icon -->\n @if (item.featureLockEnabled) {\n <ap-symbol\n class=\"ap-action-dropdown__item-end-icon\"\n size=\"sm\"\n color=\"purple\"\n symbolId=\"feature-lock\" />\n }\n </button>\n </div>\n }\n </div>\n</ng-template>\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/agorapulse-ui-components-autocomplete.mjs CHANGED Viewed

@@ -81,7 +81,7 @@ class AutocompleteComponent {
         this.resultsLoadingSignal.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AutocompleteComponent, isStandalone: true, selector: "ap-autocomplete", inputs: { placeholder: "placeholder", label: "label", inputId: "inputId", loadingText: "loadingText", notFoundText: "notFoundText", searchFn: "searchFn", trackByFn: "trackByFn", disabled: "disabled", optionLabel: "optionLabel", optionCaption: "optionCaption", optionImageUrl: "optionImageUrl", optionValue: "optionValue", optionTextTemplate: "optionTextTemplate" }, outputs: { selectOption: "selectOption" }, viewQueries: [{ propertyName: "formField", first: true, predicate: ["formField"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"input-autocomplete-wrapper\">\n    <ap-form-field\n        #formField\n        #trigger=\"cdkOverlayOrigin\"\n        cdkOverlayOrigin>\n        <label [for]=\"inputId\">\n            {{ label }}\n        </label>\n        <ap-input-group>\n            <ap-symbol symbolId=\"search\" />\n            <input\n                apInput\n                [id]=\"inputId\"\n                [disabled]=\"disabledSignal()\"\n                [placeholder]=\"placeholder\"\n                [ngModel]=\"searchTermSignal()\"\n                (ngModelChange)=\"searchTerm$.next($event)\" />\n        </ap-input-group>\n    </ap-form-field>\n    <div class=\"search-results-wrapper\">\n        <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n            [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n            <div class=\"ap-autocomplete-search-results\">\n                @if (resultsLoadingSignal()) {\n                    <div class=\"ap-autocomplete-search-results-loading\">\n                        <ap-loader [diameter]=\"30\" />\n                        <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n                    </div>\n                } @else {\n                    @if (searchResultsSignal()?.length) {\n                        @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n                            <div\n                                class=\"ap-autocomplete-search-results-item\"\n                                tabindex=\"0\"\n                                (keydown.enter)=\"onSelectOption(option)\"\n                                (click)=\"onSelectOption(option)\">\n                                @if (!optionTextTemplate) {\n                                    @if (!optionLabel || !option[optionLabel]) {\n                                        <div class=\"option\">\n                                            <span\n                                                class=\"option-item\"\n                                                [title]=\"option\">\n                                                {{ option }}\n                                            </span>\n                                        </div>\n                                    }\n                                    @if (optionLabel && option[optionLabel]) {\n                                        <div\n                                            class=\"option\"\n                                            [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n                                            @if (!optionLabel) {\n                                                <span class=\"item\">\n                                                    {{ option }}\n                                                </span>\n                                            }\n                                            @if (optionImageUrl) {\n                                                <ap-avatar\n                                                    [size]=\"24\"\n                                                    [showInitials]=\"true\"\n                                                    [username]=\"optionLabel ? option[optionLabel] : option\"\n                                                    [profilePicture]=\"option[optionImageUrl]\" />\n                                            }\n                                            @if (optionLabel && option[optionLabel]) {\n                                                <div class=\"texts\">\n                                                    <div class=\"first-line\">\n                                                        <span\n                                                            class=\"label\"\n                                                            [title]=\"option[optionLabel]\">\n                                                            {{ option[optionLabel] }}\n                                                        </span>\n                                                    </div>\n                                                    @if (optionCaption && option[optionCaption]) {\n                                                        <span\n                                                            class=\"caption\"\n                                                            [title]=\"option[optionCaption]\">\n                                                            {{ option[optionCaption] }}\n                                                        </span>\n                                                    }\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                } @else {\n                                    <ng-container [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\" />\n                                }\n                            </div>\n                        }\n                    } @else {\n                        <div class=\"ap-autocomplete-search-results-not-found\">\n                            {{ notFoundText }}\n                        </div>\n                    }\n                }\n            </div>\n        </ng-template>\n    </div>\n</div>\n", styles: ["ap-autocomplete{display:block}ap-autocomplete .input-autocomplete-wrapper{display:flex;flex-direction:column}ap-autocomplete .search-results-wrapper{position:relative}.ap-autocomplete-search-results{width:100%;display:flex;flex-direction:column;border-radius:var(--ref-border-radius-sm);box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color);margin-top:var(--ref-spacing-xxxs);max-height:250px;overflow:auto}.ap-autocomplete-search-results-loading{display:flex;padding:var(--ref-spacing-sm) 0;flex-direction:column;justify-content:center;align-items:center;gap:var(--ref-spacing-xs)}.ap-autocomplete-search-results-loading .search-results-loading-label{font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80)}.ap-autocomplete-search-results-not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm);font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-autocomplete-search-results-item .option{display:flex;align-items:center;font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);color:var(--comp-select-one-line-text-color);line-height:var(--comp-select-one-line-text-line-height);font-family:var(--comp-select-one-line-text-font-family);gap:var(--ref-spacing-xs);min-height:24px}.ap-autocomplete-search-results-item .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item .option .texts{flex:1;overflow:auto}.ap-autocomplete-search-results-item .option .texts .first-line{display:flex}.ap-autocomplete-search-results-item .option .texts .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item .option.with-caption .texts{display:flex;flex-direction:column}.ap-autocomplete-search-results-item .option.with-caption .texts .label{color:var(--comp-select-two-line-title-text-color);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);font-weight:var(--comp-select-two-line-title-text-font-weight)}.ap-autocomplete-search-results-item .option.with-caption .texts .caption{color:var(--comp-select-two-line-caption-text-color);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);font-weight:var(--comp-select-two-line-caption-text-font-weight);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item:hover{cursor:pointer;background-color:var(--ref-color-electric-blue-10)}.ap-autocomplete-search-results-item:active{background-color:var(--ref-color-electric-blue-20)}.ap-autocomplete-search-results-item:focus{background-color:var(--ref-color-electric-blue-20)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: FormFieldComponent, selector: "ap-form-field" }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AutocompleteComponent, isStandalone: true, selector: "ap-autocomplete", inputs: { placeholder: "placeholder", label: "label", inputId: "inputId", loadingText: "loadingText", notFoundText: "notFoundText", searchFn: "searchFn", trackByFn: "trackByFn", disabled: "disabled", optionLabel: "optionLabel", optionCaption: "optionCaption", optionImageUrl: "optionImageUrl", optionValue: "optionValue", optionTextTemplate: "optionTextTemplate" }, outputs: { selectOption: "selectOption" }, viewQueries: [{ propertyName: "formField", first: true, predicate: ["formField"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"input-autocomplete-wrapper\">\n    <ap-form-field\n        #formField\n        #trigger=\"cdkOverlayOrigin\"\n        cdkOverlayOrigin>\n        <label [for]=\"inputId\">\n            {{ label }}\n        </label>\n        <ap-input-group>\n            <ap-symbol symbolId=\"search\" />\n            <input\n                apInput\n                [id]=\"inputId\"\n                [disabled]=\"disabledSignal()\"\n                [placeholder]=\"placeholder\"\n                [ngModel]=\"searchTermSignal()\"\n                (ngModelChange)=\"searchTerm$.next($event)\" />\n        </ap-input-group>\n    </ap-form-field>\n    <div class=\"search-results-wrapper\">\n        <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n            [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n            <div class=\"ap-autocomplete-search-results\">\n                @if (resultsLoadingSignal()) {\n                    <div class=\"ap-autocomplete-search-results-loading\">\n                        <ap-loader [diameter]=\"30\" />\n                        <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n                    </div>\n                } @else {\n                    @if (searchResultsSignal()?.length) {\n                        @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n                            <div\n                                class=\"ap-autocomplete-search-results-item\"\n                                tabindex=\"0\"\n                                (keydown.enter)=\"onSelectOption(option)\"\n                                (click)=\"onSelectOption(option)\">\n                                @if (!optionTextTemplate) {\n                                    @if (!optionLabel || !option[optionLabel]) {\n                                        <div class=\"option\">\n                                            <span\n                                                class=\"option-item\"\n                                                [title]=\"option\">\n                                                {{ option }}\n                                            </span>\n                                        </div>\n                                    }\n                                    @if (optionLabel && option[optionLabel]) {\n                                        <div\n                                            class=\"option\"\n                                            [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n                                            @if (!optionLabel) {\n                                                <span class=\"item\">\n                                                    {{ option }}\n                                                </span>\n                                            }\n                                            @if (optionImageUrl) {\n                                                <ap-avatar\n                                                    [size]=\"24\"\n                                                    [showInitials]=\"true\"\n                                                    [username]=\"optionLabel ? option[optionLabel] : option\"\n                                                    [profilePicture]=\"option[optionImageUrl]\" />\n                                            }\n                                            @if (optionLabel && option[optionLabel]) {\n                                                <div class=\"texts\">\n                                                    <div class=\"first-line\">\n                                                        <span\n                                                            class=\"label\"\n                                                            [title]=\"option[optionLabel]\">\n                                                            {{ option[optionLabel] }}\n                                                        </span>\n                                                    </div>\n                                                    @if (optionCaption && option[optionCaption]) {\n                                                        <span\n                                                            class=\"caption\"\n                                                            [title]=\"option[optionCaption]\">\n                                                            {{ option[optionCaption] }}\n                                                        </span>\n                                                    }\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                } @else {\n                                    <ng-container [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\" />\n                                }\n                            </div>\n                        }\n                    } @else {\n                        <div class=\"ap-autocomplete-search-results-not-found\">\n                            {{ notFoundText }}\n                        </div>\n                    }\n                }\n            </div>\n        </ng-template>\n    </div>\n</div>\n", styles: ["ap-autocomplete{display:block}ap-autocomplete .input-autocomplete-wrapper{display:flex;flex-direction:column}ap-autocomplete .search-results-wrapper{position:relative}.ap-autocomplete-search-results{width:100%;display:flex;flex-direction:column;border-radius:var(--ref-border-radius-sm);box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color);margin-top:var(--ref-spacing-xxxs);max-height:250px;overflow:auto}.ap-autocomplete-search-results-loading{display:flex;padding:var(--ref-spacing-sm) 0;flex-direction:column;justify-content:center;align-items:center;gap:var(--ref-spacing-xs)}.ap-autocomplete-search-results-loading .search-results-loading-label{font-style:italic;font-size:var(--ref-font-size-sm);color:var(--sys-color-text-interactive-secondary)}.ap-autocomplete-search-results-not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm);font-style:italic;font-size:var(--ref-font-size-sm);color:var(--sys-color-text-interactive-secondary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-autocomplete-search-results-item .option{display:flex;align-items:center;font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);color:var(--comp-select-one-line-text-color);line-height:var(--comp-select-one-line-text-line-height);font-family:var(--comp-select-one-line-text-font-family);gap:var(--ref-spacing-xs);min-height:24px}.ap-autocomplete-search-results-item .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item .option .texts{flex:1;overflow:auto}.ap-autocomplete-search-results-item .option .texts .first-line{display:flex}.ap-autocomplete-search-results-item .option .texts .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item .option.with-caption .texts{display:flex;flex-direction:column}.ap-autocomplete-search-results-item .option.with-caption .texts .label{color:var(--comp-select-two-line-title-text-color);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);font-weight:var(--comp-select-two-line-title-text-font-weight)}.ap-autocomplete-search-results-item .option.with-caption .texts .caption{color:var(--comp-select-two-line-caption-text-color);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);font-weight:var(--comp-select-two-line-caption-text-font-weight);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item:hover{cursor:pointer;background-color:var(--sys-color-surface-interactive-hovered)}.ap-autocomplete-search-results-item:active{background-color:var(--sys-color-surface-interactive-clicked)}.ap-autocomplete-search-results-item:focus{background-color:var(--sys-color-surface-interactive-clicked)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: FormFieldComponent, selector: "ap-form-field" }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
@@ -95,7 +95,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         AvatarComponent,
                         OverlayModule,
                         NgTemplateOutlet
-                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"input-autocomplete-wrapper\">\n    <ap-form-field\n        #formField\n        #trigger=\"cdkOverlayOrigin\"\n        cdkOverlayOrigin>\n        <label [for]=\"inputId\">\n            {{ label }}\n        </label>\n        <ap-input-group>\n            <ap-symbol symbolId=\"search\" />\n            <input\n                apInput\n                [id]=\"inputId\"\n                [disabled]=\"disabledSignal()\"\n                [placeholder]=\"placeholder\"\n                [ngModel]=\"searchTermSignal()\"\n                (ngModelChange)=\"searchTerm$.next($event)\" />\n        </ap-input-group>\n    </ap-form-field>\n    <div class=\"search-results-wrapper\">\n        <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n            [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n            <div class=\"ap-autocomplete-search-results\">\n                @if (resultsLoadingSignal()) {\n                    <div class=\"ap-autocomplete-search-results-loading\">\n                        <ap-loader [diameter]=\"30\" />\n                        <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n                    </div>\n                } @else {\n                    @if (searchResultsSignal()?.length) {\n                        @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n                            <div\n                                class=\"ap-autocomplete-search-results-item\"\n                                tabindex=\"0\"\n                                (keydown.enter)=\"onSelectOption(option)\"\n                                (click)=\"onSelectOption(option)\">\n                                @if (!optionTextTemplate) {\n                                    @if (!optionLabel || !option[optionLabel]) {\n                                        <div class=\"option\">\n                                            <span\n                                                class=\"option-item\"\n                                                [title]=\"option\">\n                                                {{ option }}\n                                            </span>\n                                        </div>\n                                    }\n                                    @if (optionLabel && option[optionLabel]) {\n                                        <div\n                                            class=\"option\"\n                                            [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n                                            @if (!optionLabel) {\n                                                <span class=\"item\">\n                                                    {{ option }}\n                                                </span>\n                                            }\n                                            @if (optionImageUrl) {\n                                                <ap-avatar\n                                                    [size]=\"24\"\n                                                    [showInitials]=\"true\"\n                                                    [username]=\"optionLabel ? option[optionLabel] : option\"\n                                                    [profilePicture]=\"option[optionImageUrl]\" />\n                                            }\n                                            @if (optionLabel && option[optionLabel]) {\n                                                <div class=\"texts\">\n                                                    <div class=\"first-line\">\n                                                        <span\n                                                            class=\"label\"\n                                                            [title]=\"option[optionLabel]\">\n                                                            {{ option[optionLabel] }}\n                                                        </span>\n                                                    </div>\n                                                    @if (optionCaption && option[optionCaption]) {\n                                                        <span\n                                                            class=\"caption\"\n                                                            [title]=\"option[optionCaption]\">\n                                                            {{ option[optionCaption] }}\n                                                        </span>\n                                                    }\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                } @else {\n                                    <ng-container [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\" />\n                                }\n                            </div>\n                        }\n                    } @else {\n                        <div class=\"ap-autocomplete-search-results-not-found\">\n                            {{ notFoundText }}\n                        </div>\n                    }\n                }\n            </div>\n        </ng-template>\n    </div>\n</div>\n", styles: ["ap-autocomplete{display:block}ap-autocomplete .input-autocomplete-wrapper{display:flex;flex-direction:column}ap-autocomplete .search-results-wrapper{position:relative}.ap-autocomplete-search-results{width:100%;display:flex;flex-direction:column;border-radius:var(--ref-border-radius-sm);box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color);margin-top:var(--ref-spacing-xxxs);max-height:250px;overflow:auto}.ap-autocomplete-search-results-loading{display:flex;padding:var(--ref-spacing-sm) 0;flex-direction:column;justify-content:center;align-items:center;gap:var(--ref-spacing-xs)}.ap-autocomplete-search-results-loading .search-results-loading-label{font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80)}.ap-autocomplete-search-results-not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm);font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-autocomplete-search-results-item .option{display:flex;align-items:center;font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);color:var(--comp-select-one-line-text-color);line-height:var(--comp-select-one-line-text-line-height);font-family:var(--comp-select-one-line-text-font-family);gap:var(--ref-spacing-xs);min-height:24px}.ap-autocomplete-search-results-item .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item .option .texts{flex:1;overflow:auto}.ap-autocomplete-search-results-item .option .texts .first-line{display:flex}.ap-autocomplete-search-results-item .option .texts .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item .option.with-caption .texts{display:flex;flex-direction:column}.ap-autocomplete-search-results-item .option.with-caption .texts .label{color:var(--comp-select-two-line-title-text-color);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);font-weight:var(--comp-select-two-line-title-text-font-weight)}.ap-autocomplete-search-results-item .option.with-caption .texts .caption{color:var(--comp-select-two-line-caption-text-color);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);font-weight:var(--comp-select-two-line-caption-text-font-weight);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item:hover{cursor:pointer;background-color:var(--ref-color-electric-blue-10)}.ap-autocomplete-search-results-item:active{background-color:var(--ref-color-electric-blue-20)}.ap-autocomplete-search-results-item:focus{background-color:var(--ref-color-electric-blue-20)}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"input-autocomplete-wrapper\">\n    <ap-form-field\n        #formField\n        #trigger=\"cdkOverlayOrigin\"\n        cdkOverlayOrigin>\n        <label [for]=\"inputId\">\n            {{ label }}\n        </label>\n        <ap-input-group>\n            <ap-symbol symbolId=\"search\" />\n            <input\n                apInput\n                [id]=\"inputId\"\n                [disabled]=\"disabledSignal()\"\n                [placeholder]=\"placeholder\"\n                [ngModel]=\"searchTermSignal()\"\n                (ngModelChange)=\"searchTerm$.next($event)\" />\n        </ap-input-group>\n    </ap-form-field>\n    <div class=\"search-results-wrapper\">\n        <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n            [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n            <div class=\"ap-autocomplete-search-results\">\n                @if (resultsLoadingSignal()) {\n                    <div class=\"ap-autocomplete-search-results-loading\">\n                        <ap-loader [diameter]=\"30\" />\n                        <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n                    </div>\n                } @else {\n                    @if (searchResultsSignal()?.length) {\n                        @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n                            <div\n                                class=\"ap-autocomplete-search-results-item\"\n                                tabindex=\"0\"\n                                (keydown.enter)=\"onSelectOption(option)\"\n                                (click)=\"onSelectOption(option)\">\n                                @if (!optionTextTemplate) {\n                                    @if (!optionLabel || !option[optionLabel]) {\n                                        <div class=\"option\">\n                                            <span\n                                                class=\"option-item\"\n                                                [title]=\"option\">\n                                                {{ option }}\n                                            </span>\n                                        </div>\n                                    }\n                                    @if (optionLabel && option[optionLabel]) {\n                                        <div\n                                            class=\"option\"\n                                            [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n                                            @if (!optionLabel) {\n                                                <span class=\"item\">\n                                                    {{ option }}\n                                                </span>\n                                            }\n                                            @if (optionImageUrl) {\n                                                <ap-avatar\n                                                    [size]=\"24\"\n                                                    [showInitials]=\"true\"\n                                                    [username]=\"optionLabel ? option[optionLabel] : option\"\n                                                    [profilePicture]=\"option[optionImageUrl]\" />\n                                            }\n                                            @if (optionLabel && option[optionLabel]) {\n                                                <div class=\"texts\">\n                                                    <div class=\"first-line\">\n                                                        <span\n                                                            class=\"label\"\n                                                            [title]=\"option[optionLabel]\">\n                                                            {{ option[optionLabel] }}\n                                                        </span>\n                                                    </div>\n                                                    @if (optionCaption && option[optionCaption]) {\n                                                        <span\n                                                            class=\"caption\"\n                                                            [title]=\"option[optionCaption]\">\n                                                            {{ option[optionCaption] }}\n                                                        </span>\n                                                    }\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                } @else {\n                                    <ng-container [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\" />\n                                }\n                            </div>\n                        }\n                    } @else {\n                        <div class=\"ap-autocomplete-search-results-not-found\">\n                            {{ notFoundText }}\n                        </div>\n                    }\n                }\n            </div>\n        </ng-template>\n    </div>\n</div>\n", styles: ["ap-autocomplete{display:block}ap-autocomplete .input-autocomplete-wrapper{display:flex;flex-direction:column}ap-autocomplete .search-results-wrapper{position:relative}.ap-autocomplete-search-results{width:100%;display:flex;flex-direction:column;border-radius:var(--ref-border-radius-sm);box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color);margin-top:var(--ref-spacing-xxxs);max-height:250px;overflow:auto}.ap-autocomplete-search-results-loading{display:flex;padding:var(--ref-spacing-sm) 0;flex-direction:column;justify-content:center;align-items:center;gap:var(--ref-spacing-xs)}.ap-autocomplete-search-results-loading .search-results-loading-label{font-style:italic;font-size:var(--ref-font-size-sm);color:var(--sys-color-text-interactive-secondary)}.ap-autocomplete-search-results-not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm);font-style:italic;font-size:var(--ref-font-size-sm);color:var(--sys-color-text-interactive-secondary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-autocomplete-search-results-item .option{display:flex;align-items:center;font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);color:var(--comp-select-one-line-text-color);line-height:var(--comp-select-one-line-text-line-height);font-family:var(--comp-select-one-line-text-font-family);gap:var(--ref-spacing-xs);min-height:24px}.ap-autocomplete-search-results-item .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item .option .texts{flex:1;overflow:auto}.ap-autocomplete-search-results-item .option .texts .first-line{display:flex}.ap-autocomplete-search-results-item .option .texts .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item .option.with-caption .texts{display:flex;flex-direction:column}.ap-autocomplete-search-results-item .option.with-caption .texts .label{color:var(--comp-select-two-line-title-text-color);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);font-weight:var(--comp-select-two-line-title-text-font-weight)}.ap-autocomplete-search-results-item .option.with-caption .texts .caption{color:var(--comp-select-two-line-caption-text-color);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);font-weight:var(--comp-select-two-line-caption-text-font-weight);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item:hover{cursor:pointer;background-color:var(--sys-color-surface-interactive-hovered)}.ap-autocomplete-search-results-item:active{background-color:var(--sys-color-surface-interactive-clicked)}.ap-autocomplete-search-results-item:focus{background-color:var(--sys-color-surface-interactive-clicked)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{
                 type: Input
             }], label: [{

package/fesm2022/agorapulse-ui-components-autocomplete.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agorapulse-ui-components-autocomplete.mjs","sources":["../../../libs/ui-components/autocomplete/src/autocomplete.component.ts","../../../libs/ui-components/autocomplete/src/autocomplete.component.html","../../../libs/ui-components/autocomplete/src/agorapulse-ui-components-autocomplete.ts"],"sourcesContent":["import { LoaderComponent } from '@agorapulse/ui-animations';\nimport { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { FormFieldComponent } from '@agorapulse/ui-components/form-field';\nimport { InputDirective } from '@agorapulse/ui-components/input';\nimport { InputGroupComponent } from '@agorapulse/ui-components/input-group';\nimport { SymbolComponent, SymbolRegistry, apSearch } from '@agorapulse/ui-symbol';\nimport { OverlayModule } from '@angular/cdk/overlay';\n\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n Output,\n TemplateRef,\n ViewChild,\n ViewEncapsulation,\n inject,\n signal,\n} from '@angular/core';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { BehaviorSubject, Observable, debounceTime, distinctUntilChanged, filter, fromEvent, skip, switchMap, tap } from 'rxjs';\nimport { NgTemplateOutlet } from '@angular/common';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-autocomplete',\n styleUrls: ['./autocomplete.component.scss'],\n imports: [\n SymbolComponent,\n FormFieldComponent,\n InputGroupComponent,\n FormsModule,\n LoaderComponent,\n InputDirective,\n AvatarComponent,\n OverlayModule,\n NgTemplateOutlet\n ],\n templateUrl: './autocomplete.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class AutocompleteComponent<T extends Record<string, unknown> \| string> implements AfterViewInit {\n @Input() placeholder = 'Search...';\n @Input() label = '';\n @Input() inputId = '';\n @Input() loadingText = 'Loading Items';\n @Input() notFoundText = 'No result found';\n @Input({ required: true }) searchFn!: (term: string) => Observable<T[]>;\n @Input() trackByFn: (index: number, item: T) => T \| T[keyof T] = (_: number, item: T) => item;\n @Input() set disabled(value: boolean) {\n this.disabledSignal.set(value);\n }\n @Input() optionLabel?: string;\n @Input() optionCaption?: string;\n @Input() optionImageUrl?: string;\n @Input() optionValue?: string;\n @Input() optionTextTemplate?: TemplateRef<{ option: T }>;\n\n @ViewChild('formField', { read: ElementRef }) formField!: ElementRef<FormFieldComponent>;\n\n @Output()\n selectOption: EventEmitter<unknown> = new EventEmitter<unknown>();\n\n readonly disabledSignal = signal(false);\n readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n readonly searchTerm$ = new BehaviorSubject<string>('');\n readonly searchTermSignal = toSignal(this.searchTerm$);\n readonly showResultsSignal = signal(false);\n readonly resultsLoadingSignal = signal(false);\n readonly searchResultsSignal = toSignal<any[]>(\n this.searchTerm$.pipe(\n skip(1),\n debounceTime(250),\n distinctUntilChanged(),\n tap(() => this.showResultsSignal.set(false)),\n filter(term => term.length > 0),\n tap(() => this.showResultsSignal.set(true)),\n tap(() => this.resultsLoadingSignal.set(true)),\n switchMap(term => {\n return this.searchFn(term);\n }),\n tap(() => this.resultsLoadingSignal.set(false))\n )\n );\n private readonly ngZone = inject(NgZone);\n private readonly el = inject(ElementRef);\n readonly inputWidthSignal = signal(0);\n\n constructor() {\n this.symbolRegistry.registerSymbols([apSearch]);\n this.ngZone.runOutsideAngular(() => {\n fromEvent(document, 'click')\n .pipe(takeUntilDestroyed())\n .subscribe(e => {\n const clickedInside = this.el.nativeElement.contains(e.target);\n if (!clickedInside) {\n this.ngZone.run(() => {\n this.resetAutocomplete();\n });\n }\n });\n });\n }\n\n ngAfterViewInit(): void {\n this.inputWidthSignal.set((this.formField.nativeElement as HTMLElement).offsetWidth);\n }\n\n onSelectOption(option: T) {\n if (typeof option !== 'string' && this.optionValue && option[this.optionValue]) {\n this.selectOption.emit(option[this.optionValue]);\n } else {\n this.selectOption.emit(option);\n }\n this.resetAutocomplete();\n }\n\n private resetAutocomplete() {\n this.searchTerm$.next('');\n this.showResultsSignal.set(false);\n this.resultsLoadingSignal.set(false);\n }\n}\n","<div class=\"input-autocomplete-wrapper\">\n <ap-form-field\n #formField\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin>\n <label [for]=\"inputId\">\n {{ label }}\n </label>\n <ap-input-group>\n <ap-symbol symbolId=\"search\" />\n <input\n apInput\n [id]=\"inputId\"\n [disabled]=\"disabledSignal()\"\n [placeholder]=\"placeholder\"\n [ngModel]=\"searchTermSignal()\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n </ap-input-group>\n </ap-form-field>\n <div class=\"search-results-wrapper\">\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n <div class=\"ap-autocomplete-search-results\">\n @if (resultsLoadingSignal()) {\n <div class=\"ap-autocomplete-search-results-loading\">\n <ap-loader [diameter]=\"30\" />\n <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n </div>\n } @else {\n @if (searchResultsSignal()?.length) {\n @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n <div\n class=\"ap-autocomplete-search-results-item\"\n tabindex=\"0\"\n (keydown.enter)=\"onSelectOption(option)\"\n (click)=\"onSelectOption(option)\">\n @if (!optionTextTemplate) {\n @if (!optionLabel \|\| !option[optionLabel]) {\n <div class=\"option\">\n <span\n class=\"option-item\"\n [title]=\"option\">\n {{ option }}\n </span>\n </div>\n }\n @if (optionLabel && option[optionLabel]) {\n <div\n class=\"option\"\n [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n @if (!optionLabel) {\n <span class=\"item\">\n {{ option }}\n </span>\n }\n @if (optionImageUrl) {\n <ap-avatar\n [size]=\"24\"\n [showInitials]=\"true\"\n [username]=\"optionLabel ? option[optionLabel] : option\"\n [profilePicture]=\"option[optionImageUrl]\" />\n }\n @if (optionLabel && option[optionLabel]) {\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"option[optionLabel]\">\n {{ option[optionLabel] }}\n </span>\n </div>\n @if (optionCaption && option[optionCaption]) {\n <span\n class=\"caption\"\n [title]=\"option[optionCaption]\">\n {{ option[optionCaption] }}\n </span>\n }\n </div>\n }\n </div>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\" />\n }\n </div>\n }\n } @else {\n <div class=\"ap-autocomplete-search-results-not-found\">\n {{ notFoundText }}\n </div>\n }\n }\n </div>\n </ng-template>\n </div>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"agorapulse-ui-components-autocomplete.mjs","sources":["../../../libs/ui-components/autocomplete/src/autocomplete.component.ts","../../../libs/ui-components/autocomplete/src/autocomplete.component.html","../../../libs/ui-components/autocomplete/src/agorapulse-ui-components-autocomplete.ts"],"sourcesContent":["import { LoaderComponent } from '@agorapulse/ui-animations';\nimport { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { FormFieldComponent } from '@agorapulse/ui-components/form-field';\nimport { InputDirective } from '@agorapulse/ui-components/input';\nimport { InputGroupComponent } from '@agorapulse/ui-components/input-group';\nimport { SymbolComponent, SymbolRegistry, apSearch } from '@agorapulse/ui-symbol';\nimport { OverlayModule } from '@angular/cdk/overlay';\n\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n NgZone,\n Output,\n TemplateRef,\n ViewChild,\n ViewEncapsulation,\n inject,\n signal,\n} from '@angular/core';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { BehaviorSubject, Observable, debounceTime, distinctUntilChanged, filter, fromEvent, skip, switchMap, tap } from 'rxjs';\nimport { NgTemplateOutlet } from '@angular/common';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-autocomplete',\n styleUrls: ['./autocomplete.component.scss'],\n imports: [\n SymbolComponent,\n FormFieldComponent,\n InputGroupComponent,\n FormsModule,\n LoaderComponent,\n InputDirective,\n AvatarComponent,\n OverlayModule,\n NgTemplateOutlet\n ],\n templateUrl: './autocomplete.component.html',\n encapsulation: ViewEncapsulation.None,\n})\nexport class AutocompleteComponent<T extends Record<string, unknown> \| string> implements AfterViewInit {\n @Input() placeholder = 'Search...';\n @Input() label = '';\n @Input() inputId = '';\n @Input() loadingText = 'Loading Items';\n @Input() notFoundText = 'No result found';\n @Input({ required: true }) searchFn!: (term: string) => Observable<T[]>;\n @Input() trackByFn: (index: number, item: T) => T \| T[keyof T] = (_: number, item: T) => item;\n @Input() set disabled(value: boolean) {\n this.disabledSignal.set(value);\n }\n @Input() optionLabel?: string;\n @Input() optionCaption?: string;\n @Input() optionImageUrl?: string;\n @Input() optionValue?: string;\n @Input() optionTextTemplate?: TemplateRef<{ option: T }>;\n\n @ViewChild('formField', { read: ElementRef }) formField!: ElementRef<FormFieldComponent>;\n\n @Output()\n selectOption: EventEmitter<unknown> = new EventEmitter<unknown>();\n\n readonly disabledSignal = signal(false);\n readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n readonly searchTerm$ = new BehaviorSubject<string>('');\n readonly searchTermSignal = toSignal(this.searchTerm$);\n readonly showResultsSignal = signal(false);\n readonly resultsLoadingSignal = signal(false);\n readonly searchResultsSignal = toSignal<any[]>(\n this.searchTerm$.pipe(\n skip(1),\n debounceTime(250),\n distinctUntilChanged(),\n tap(() => this.showResultsSignal.set(false)),\n filter(term => term.length > 0),\n tap(() => this.showResultsSignal.set(true)),\n tap(() => this.resultsLoadingSignal.set(true)),\n switchMap(term => {\n return this.searchFn(term);\n }),\n tap(() => this.resultsLoadingSignal.set(false))\n )\n );\n private readonly ngZone = inject(NgZone);\n private readonly el = inject(ElementRef);\n readonly inputWidthSignal = signal(0);\n\n constructor() {\n this.symbolRegistry.registerSymbols([apSearch]);\n this.ngZone.runOutsideAngular(() => {\n fromEvent(document, 'click')\n .pipe(takeUntilDestroyed())\n .subscribe(e => {\n const clickedInside = this.el.nativeElement.contains(e.target);\n if (!clickedInside) {\n this.ngZone.run(() => {\n this.resetAutocomplete();\n });\n }\n });\n });\n }\n\n ngAfterViewInit(): void {\n this.inputWidthSignal.set((this.formField.nativeElement as HTMLElement).offsetWidth);\n }\n\n onSelectOption(option: T) {\n if (typeof option !== 'string' && this.optionValue && option[this.optionValue]) {\n this.selectOption.emit(option[this.optionValue]);\n } else {\n this.selectOption.emit(option);\n }\n this.resetAutocomplete();\n }\n\n private resetAutocomplete() {\n this.searchTerm$.next('');\n this.showResultsSignal.set(false);\n this.resultsLoadingSignal.set(false);\n }\n}\n","<div class=\"input-autocomplete-wrapper\">\n <ap-form-field\n #formField\n #trigger=\"cdkOverlayOrigin\"\n cdkOverlayOrigin>\n <label [for]=\"inputId\">\n {{ label }}\n </label>\n <ap-input-group>\n <ap-symbol symbolId=\"search\" />\n <input\n apInput\n [id]=\"inputId\"\n [disabled]=\"disabledSignal()\"\n [placeholder]=\"placeholder\"\n [ngModel]=\"searchTermSignal()\"\n (ngModelChange)=\"searchTerm$.next($event)\" />\n </ap-input-group>\n </ap-form-field>\n <div class=\"search-results-wrapper\">\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n <div class=\"ap-autocomplete-search-results\">\n @if (resultsLoadingSignal()) {\n <div class=\"ap-autocomplete-search-results-loading\">\n <ap-loader [diameter]=\"30\" />\n <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n </div>\n } @else {\n @if (searchResultsSignal()?.length) {\n @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n <div\n class=\"ap-autocomplete-search-results-item\"\n tabindex=\"0\"\n (keydown.enter)=\"onSelectOption(option)\"\n (click)=\"onSelectOption(option)\">\n @if (!optionTextTemplate) {\n @if (!optionLabel \|\| !option[optionLabel]) {\n <div class=\"option\">\n <span\n class=\"option-item\"\n [title]=\"option\">\n {{ option }}\n </span>\n </div>\n }\n @if (optionLabel && option[optionLabel]) {\n <div\n class=\"option\"\n [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n @if (!optionLabel) {\n <span class=\"item\">\n {{ option }}\n </span>\n }\n @if (optionImageUrl) {\n <ap-avatar\n [size]=\"24\"\n [showInitials]=\"true\"\n [username]=\"optionLabel ? option[optionLabel] : option\"\n [profilePicture]=\"option[optionImageUrl]\" />\n }\n @if (optionLabel && option[optionLabel]) {\n <div class=\"texts\">\n <div class=\"first-line\">\n <span\n class=\"label\"\n [title]=\"option[optionLabel]\">\n {{ option[optionLabel] }}\n </span>\n </div>\n @if (optionCaption && option[optionCaption]) {\n <span\n class=\"caption\"\n [title]=\"option[optionCaption]\">\n {{ option[optionCaption] }}\n </span>\n }\n </div>\n }\n </div>\n }\n } @else {\n <ng-container [ngTemplateOutlet]=\"optionTextTemplate\" [ngTemplateOutletContext]=\"{ option: option }\" />\n }\n </div>\n }\n } @else {\n <div class=\"ap-autocomplete-search-results-not-found\">\n {{ notFoundText }}\n </div>\n }\n }\n </div>\n </ng-template>\n </div>\n</div>\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/agorapulse-ui-components-badge.mjs CHANGED Viewed

@@ -4,11 +4,11 @@ import { HostBinding, Input, ViewEncapsulation, ChangeDetectionStrategy, Compone
 class BadgeComponent {
     color = 'blue';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: BadgeComponent, isStandalone: true, selector: "ap-badge", inputs: { color: "color" }, host: { properties: { "class": "this.color" } }, ngImport: i0, template: "<ng-content />\n", styles: ["ap-badge{display:flex;padding:0 var(--comp-badge-padding-right) 0 var(--comp-badge-padding-left);font-weight:var(--comp-badge-text-style-font-weight);font-family:var(--comp-badge-text-style-font-family);line-height:var(--comp-badge-text-style-line-height);font-size:var(--comp-badge-text-style-size);height:var(--comp-badge-height);max-height:var(--comp-badge-height);border-radius:2px}ap-badge.blue{background-color:var(--comp-badge-blue-background-color);color:var(--comp-badge-blue-color)}ap-badge.orange{text-transform:uppercase;background-color:var(--comp-badge-orange-background-color);color:var(--comp-badge-orange-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: BadgeComponent, isStandalone: true, selector: "ap-badge", inputs: { color: "color" }, host: { properties: { "class": "this.color" } }, ngImport: i0, template: "<ng-content />\n", styles: ["ap-badge{display:flex;padding:0 2px;font-family:var(--sys-text-style-caption-bold-font-family);font-size:var(--sys-text-style-caption-bold-size);font-weight:var(--sys-text-style-caption-bold-weight);line-height:var(--sys-text-style-caption-bold-line-height);height:var(--ref-font-line-height-xs);max-height:var(--ref-font-line-height-xs);border-radius:2px}ap-badge.blue{background-color:var(--sys-color-surface-information);color:var(--sys-color-text-information)}ap-badge.orange{text-transform:uppercase;background-color:var(--sys-color-surface-notification);color:var(--sys-color-text-on-color)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-badge', imports: [], encapsulation: ViewEncapsulation.None, template: "<ng-content />\n", styles: ["ap-badge{display:flex;padding:0 var(--comp-badge-padding-right) 0 var(--comp-badge-padding-left);font-weight:var(--comp-badge-text-style-font-weight);font-family:var(--comp-badge-text-style-font-family);line-height:var(--comp-badge-text-style-line-height);font-size:var(--comp-badge-text-style-size);height:var(--comp-badge-height);max-height:var(--comp-badge-height);border-radius:2px}ap-badge.blue{background-color:var(--comp-badge-blue-background-color);color:var(--comp-badge-blue-color)}ap-badge.orange{text-transform:uppercase;background-color:var(--comp-badge-orange-background-color);color:var(--comp-badge-orange-color)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-badge', imports: [], encapsulation: ViewEncapsulation.None, template: "<ng-content />\n", styles: ["ap-badge{display:flex;padding:0 2px;font-family:var(--sys-text-style-caption-bold-font-family);font-size:var(--sys-text-style-caption-bold-size);font-weight:var(--sys-text-style-caption-bold-weight);line-height:var(--sys-text-style-caption-bold-line-height);height:var(--ref-font-line-height-xs);max-height:var(--ref-font-line-height-xs);border-radius:2px}ap-badge.blue{background-color:var(--sys-color-surface-information);color:var(--sys-color-text-information)}ap-badge.orange{text-transform:uppercase;background-color:var(--sys-color-surface-notification);color:var(--sys-color-text-on-color)}\n"] }]
         }], propDecorators: { color: [{
                 type: HostBinding,
                 args: ['class']

package/fesm2022/agorapulse-ui-components-badge.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"agorapulse-ui-components-badge.mjs","sources":["../../../libs/ui-components/badge/src/badge.component.ts","../../../libs/ui-components/badge/src/badge.component.html","../../../libs/ui-components/badge/src/agorapulse-ui-components-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\n\nexport type BadgeColor = 'blue' \| 'orange';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-badge',\n templateUrl: './badge.component.html',\n imports: [],\n styleUrls: ['./badge.component.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class BadgeComponent {\n @HostBinding('class')\n @Input()\n color: BadgeColor = 'blue';\n}\n","<ng-content />\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;MAYa,cAAc,CAAA;IAGvB,KAAK,GAAe,MAAM;uGAHjB,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,iJCZ3B,kBACA,EAAA,MAAA,EAAA,CAAA,~~ynBAAA~~,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDWa,cAAc,EAAA,UAAA,EAAA,CAAA;kBAR1B,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,UAAU,WAEX,EAAE,EAAA,aAAA,EAEI,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,~~ynBAAA~~,CAAA,EAAA;;sBAGpC,WAAW;uBAAC,OAAO;;sBACnB;;;AEdL;;AAEG;;;;"}
1	+ {"version":3,"file":"agorapulse-ui-components-badge.mjs","sources":["../../../libs/ui-components/badge/src/badge.component.ts","../../../libs/ui-components/badge/src/badge.component.html","../../../libs/ui-components/badge/src/agorapulse-ui-components-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';\n\nexport type BadgeColor = 'blue' \| 'orange';\n\n@Component({\n changeDetection: ChangeDetectionStrategy.OnPush,\n selector: 'ap-badge',\n templateUrl: './badge.component.html',\n imports: [],\n styleUrls: ['./badge.component.scss'],\n encapsulation: ViewEncapsulation.None,\n})\nexport class BadgeComponent {\n @HostBinding('class')\n @Input()\n color: BadgeColor = 'blue';\n}\n","<ng-content />\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './public_api';\n"],"names":[],"mappings":";;;MAYa,cAAc,CAAA;IAGvB,KAAK,GAAe,MAAM;uGAHjB,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAd,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,cAAc,iJCZ3B,kBACA,EAAA,MAAA,EAAA,CAAA,ylBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FDWa,cAAc,EAAA,UAAA,EAAA,CAAA;kBAR1B,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,UAAU,WAEX,EAAE,EAAA,aAAA,EAEI,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,ylBAAA,CAAA,EAAA;;sBAGpC,WAAW;uBAAC,OAAO;;sBACnB;;;AEdL;;AAEG;;;;"}