@agorapulse/ui-components 22.2.7 → 22.2.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/agorapulse-ui-components-22.2.9.tgz +0 -0
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-action-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-avatar-group.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-avatar-group.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-datepicker.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-datepicker.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-filter-chips-list.mjs +2 -2
- package/fesm2022/agorapulse-ui-components-filter-chips-list.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-filter-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-labels.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-labels.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs +4 -4
- package/fesm2022/agorapulse-ui-components-nav-selector.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-radio-button-card.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-radio-button-card.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-select.mjs +5 -5
- package/fesm2022/agorapulse-ui-components-select.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs +1 -1
- package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs.map +1 -1
- package/fesm2022/agorapulse-ui-components-tooltip.mjs +179 -371
- package/fesm2022/agorapulse-ui-components-tooltip.mjs.map +1 -1
- package/package.json +2 -2
- package/types/agorapulse-ui-components-tooltip.d.ts +38 -33
- package/agorapulse-ui-components-22.2.7.tgz +0 -0
|
Binary file
|
|
@@ -155,7 +155,7 @@ class ActionDropdownComponent {
|
|
|
155
155
|
this.keyManager.onKeydown(event);
|
|
156
156
|
}
|
|
157
157
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
158
|
-
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 }, placement: { classPropertyName: "placement", publicName: "placement", 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: "panel", first: true, predicate: DropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "menuItems", predicate: DropdownOptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ap-dropdown-panel\n [placement]=\"placement()\"\n [showBackdrop]=\"showBackdrop()\"\n (closed)=\"onPanelClosed()\">\n <!-- Action dropdown -->\n <!-- `menu` decides the keyboard: arrows are mandatory, the items are one tab stop, and Tab exits.\n `tabindex=\"-1\"` gives the panel something to focus on opening without adding a stop. -->\n <div\n *apDropdownContent\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 <!-- Roving tabindex: only the active item is tabbable, which is what makes the menu one stop. -->\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [apDropdownOption]=\"item.label ?? ''\"\n [apDropdownOptionDisabled]=\"!!item.disabled\"\n [tabindex]=\"activeIndex() === $index ? 0 : -1\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\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</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-action-dropdown__content{padding:var(--comp-action-dropdown-padding);outline:none;z-index:1000;max-height:var(--ap-floating-available-height, none);overflow-y:auto}.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-visible{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}.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:focus-visible{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-visible{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-visible{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: "directive", type: DropdownContentDirective, selector: "ng-template[apDropdownContent]" }, { kind: "directive", type: DropdownOptionDirective, selector: "[apDropdownOption]", inputs: ["apDropdownOption", "apDropdownOptionDisabled"] }, { kind: "component", type: DropdownPanelComponent, selector: "ap-dropdown-panel", inputs: ["placement", "showBackdrop", "panelClass", "canDismiss"], outputs: ["opened", "closed"] }, { 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 });
|
|
158
|
+
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 }, placement: { classPropertyName: "placement", publicName: "placement", 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: "panel", first: true, predicate: DropdownPanelComponent, descendants: true, isSignal: true }, { propertyName: "menuItems", predicate: DropdownOptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ap-dropdown-panel\n [placement]=\"placement()\"\n [showBackdrop]=\"showBackdrop()\"\n (closed)=\"onPanelClosed()\">\n <!-- Action dropdown -->\n <!-- `menu` decides the keyboard: arrows are mandatory, the items are one tab stop, and Tab exits.\n `tabindex=\"-1\"` gives the panel something to focus on opening without adding a stop. -->\n <div\n *apDropdownContent\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 <!-- Roving tabindex: only the active item is tabbable, which is what makes the menu one stop. -->\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [apDropdownOption]=\"item.label ?? ''\"\n [apDropdownOptionDisabled]=\"!!item.disabled\"\n [tabindex]=\"activeIndex() === $index ? 0 : -1\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\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</ap-dropdown-panel>\n", styles: [":host{display:none}.ap-action-dropdown__content{padding:var(--comp-action-dropdown-padding);outline:none;z-index:1000;max-height:var(--ap-floating-available-height, none);overflow-y:auto}.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-visible{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}.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:focus-visible{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-visible{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-visible{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: "directive", type: DropdownContentDirective, selector: "ng-template[apDropdownContent]" }, { kind: "directive", type: DropdownOptionDirective, selector: "[apDropdownOption]", inputs: ["apDropdownOption", "apDropdownOptionDisabled"] }, { kind: "component", type: DropdownPanelComponent, selector: "ap-dropdown-panel", inputs: ["placement", "showBackdrop", "panelClass", "canDismiss"], outputs: ["opened", "closed"] }, { 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", "apTooltipArrow", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
159
159
|
}
|
|
160
160
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ActionDropdownComponent, decorators: [{
|
|
161
161
|
type: Component,
|
|
@@ -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 { FocusKeyManager } from '@angular/cdk/a11y';\nimport { DropdownOptionDirective, DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport { DropdownContentDirective, DropdownPanelComponent } from '@agorapulse/ui-components/dropdown-panel';\nimport { FloatingPlacement } from '@agorapulse/ui-components/floating';\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 computed,\n contentChild,\n effect,\n inject,\n Injector,\n input,\n output,\n signal,\n TemplateRef,\n untracked,\n viewChild,\n viewChildren,\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, DropdownContentDirective, DropdownOptionDirective, DropdownPanelComponent, SymbolComponent, TooltipDirective],\n providers: [withSymbols(apInfo, apFeatureLock)],\n})\nexport class ActionDropdownComponent implements DropdownOverlay {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly panel = viewChild(DropdownPanelComponent);\n\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 /** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */\n readonly placement = input<FloatingPlacement>();\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 private readonly menuItems = viewChildren(DropdownOptionDirective);\n\n /** Mirrors the key manager's active index, so the roving tabindex can be bound. */\n protected readonly activeIndex = signal(-1);\n\n private readonly keyManager = new FocusKeyManager(this.menuItems, inject(Injector)).withWrap().withTypeAhead().withHomeAndEnd();\n\n private primed = false;\n\n readonly isOpen = computed(() => this.panel()?.isOpen() ?? false);\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n this.keyManager.change.subscribe(index => this.activeIndex.set(index));\n // APG: Tab leaves a menu and closes it, rather than walking its items.\n this.keyManager.tabOut.subscribe(() => this.close());\n\n // The items only exist once the panel has stamped its template.\n effect(() => {\n const open = this.isOpen();\n const items = this.menuItems();\n untracked(() => {\n if (open && items.length > 0 && !this.primed) {\n this.primed = true;\n this.keyManager.setFirstItemActive();\n }\n });\n });\n }\n\n /** Opens the dropdown menu at the specified trigger element */\n open(triggerElement?: HTMLElement): void {\n const panel = this.panel();\n if (this.disabled() || this.isOpen() || !panel) return;\n\n panel.open(triggerElement);\n this.opened.emit();\n }\n\n close(): void {\n this.panel()?.close();\n }\n\n protected onPanelClosed(): void {\n this.primed = false;\n this.activeIndex.set(-1);\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 /** Enter and Space need nothing: focus is real, so the button fires its own click. Escape belongs to the panel. */\n onKeyDown(event: KeyboardEvent): void {\n this.keyManager.onKeydown(event);\n }\n}\n","<ap-dropdown-panel\n [placement]=\"placement()\"\n [showBackdrop]=\"showBackdrop()\"\n (closed)=\"onPanelClosed()\">\n <!-- Action dropdown -->\n <!-- `menu` decides the keyboard: arrows are mandatory, the items are one tab stop, and Tab exits.\n `tabindex=\"-1\"` gives the panel something to focus on opening without adding a stop. -->\n <div\n *apDropdownContent\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 <!-- Roving tabindex: only the active item is tabbable, which is what makes the menu one stop. -->\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [apDropdownOption]=\"item.label ?? ''\"\n [apDropdownOptionDisabled]=\"!!item.disabled\"\n [tabindex]=\"activeIndex() === $index ? 0 : -1\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\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</ap-dropdown-panel>\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 { FocusKeyManager } from '@angular/cdk/a11y';\nimport { DropdownOptionDirective, DropdownOverlay } from '@agorapulse/ui-components/dropdown-base';\nimport { DropdownContentDirective, DropdownPanelComponent } from '@agorapulse/ui-components/dropdown-panel';\nimport { FloatingPlacement } from '@agorapulse/ui-components/floating';\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 computed,\n contentChild,\n effect,\n inject,\n Injector,\n input,\n output,\n signal,\n TemplateRef,\n untracked,\n viewChild,\n viewChildren,\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, DropdownContentDirective, DropdownOptionDirective, DropdownPanelComponent, SymbolComponent, TooltipDirective],\n providers: [withSymbols(apInfo, apFeatureLock)],\n})\nexport class ActionDropdownComponent implements DropdownOverlay {\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly panel = viewChild(DropdownPanelComponent);\n\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 /** Panel placement. Unset means derived from the anchor mode, i.e. `bottom-start`. */\n readonly placement = input<FloatingPlacement>();\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 private readonly menuItems = viewChildren(DropdownOptionDirective);\n\n /** Mirrors the key manager's active index, so the roving tabindex can be bound. */\n protected readonly activeIndex = signal(-1);\n\n private readonly keyManager = new FocusKeyManager(this.menuItems, inject(Injector)).withWrap().withTypeAhead().withHomeAndEnd();\n\n private primed = false;\n\n readonly isOpen = computed(() => this.panel()?.isOpen() ?? false);\n\n constructor() {\n this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n\n this.keyManager.change.subscribe(index => this.activeIndex.set(index));\n // APG: Tab leaves a menu and closes it, rather than walking its items.\n this.keyManager.tabOut.subscribe(() => this.close());\n\n // The items only exist once the panel has stamped its template.\n effect(() => {\n const open = this.isOpen();\n const items = this.menuItems();\n untracked(() => {\n if (open && items.length > 0 && !this.primed) {\n this.primed = true;\n this.keyManager.setFirstItemActive();\n }\n });\n });\n }\n\n /** Opens the dropdown menu at the specified trigger element */\n open(triggerElement?: HTMLElement): void {\n const panel = this.panel();\n if (this.disabled() || this.isOpen() || !panel) return;\n\n panel.open(triggerElement);\n this.opened.emit();\n }\n\n close(): void {\n this.panel()?.close();\n }\n\n protected onPanelClosed(): void {\n this.primed = false;\n this.activeIndex.set(-1);\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 /** Enter and Space need nothing: focus is real, so the button fires its own click. Escape belongs to the panel. */\n onKeyDown(event: KeyboardEvent): void {\n this.keyManager.onKeydown(event);\n }\n}\n","<ap-dropdown-panel\n [placement]=\"placement()\"\n [showBackdrop]=\"showBackdrop()\"\n (closed)=\"onPanelClosed()\">\n <!-- Action dropdown -->\n <!-- `menu` decides the keyboard: arrows are mandatory, the items are one tab stop, and Tab exits.\n `tabindex=\"-1\"` gives the panel something to focus on opening without adding a stop. -->\n <div\n *apDropdownContent\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 <!-- Roving tabindex: only the active item is tabbable, which is what makes the menu one stop. -->\n <button\n type=\"button\"\n role=\"menuitem\"\n class=\"ap-action-dropdown__item\"\n [apDropdownOption]=\"item.label ?? ''\"\n [apDropdownOptionDisabled]=\"!!item.disabled\"\n [tabindex]=\"activeIndex() === $index ? 0 : -1\"\n [class.ap-action-dropdown__item--has-description]=\"item.description\"\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</ap-dropdown-panel>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
|
|
@@ -41,7 +41,7 @@ class AvatarGroupComponent {
|
|
|
41
41
|
...(ngDevMode ? [{ debugName: "hasOverflow" }] : /* istanbul ignore next */ []));
|
|
42
42
|
CustomTooltipType = CustomTooltipType;
|
|
43
43
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AvatarGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
44
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AvatarGroupComponent, isStandalone: true, selector: "ap-avatar-group", inputs: { avatars: { classPropertyName: "avatars", publicName: "avatars", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxAvatars: { classPropertyName: "maxAvatars", publicName: "maxAvatars", isSignal: true, isRequired: false, transformFunction: null }, showAvatarDescriptionTooltip: { classPropertyName: "showAvatarDescriptionTooltip", publicName: "showAvatarDescriptionTooltip", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "\"Avatar group\"" } }, ngImport: i0, template: "<div class=\"avatars-group\">\n @if (hasOverflow()) {\n <div\n class=\"overflow-counter\"\n apTooltip\n apTooltipTrigger=\"click\"\n [apTooltipType]=\"CustomTooltipType.LIST\"\n [apTooltipListItems]=\"tooltipAvatars()\"\n [attr.data-size]=\"size()\">\n <span class=\"overflow-text\">+{{ overflowCount() }}</span>\n </div>\n }\n\n <div class=\"avatars-list\">\n @for (avatar of visibleAvatars(); track $index) {\n <ap-avatar\n apTooltip\n [apTooltipType]=\"CustomTooltipType.LIST\"\n [apTooltipListItems]=\"[avatar]\"\n [profilePicture]=\"avatar.profilePicture\"\n [alt]=\"avatar.alt ?? ''\"\n [network]=\"avatar.network\"\n [size]=\"size()\"\n [username]=\"avatar.username\"\n [showInitials]=\"avatar.showInitials\"\n [bigNetwork]=\"avatar.bigNetwork ?? false\"\n [anonymous]=\"avatar.anonymous ?? false\"\n [online]=\"avatar.online ?? false\"\n [rounded]=\"avatar.rounded ?? true\" />\n }\n </div>\n</div>\n", styles: [".avatars-group,.avatars-list{display:inline-flex;flex-direction:row-reverse;align-items:center;padding-left:2px}.avatars-group ap-avatar{cursor:default}.avatars-group ap-avatar,.avatars-group .overflow-counter{margin-inline-start:-2px}.overflow-counter{display:flex;align-items:center;justify-content:center;background-color:var(--ref-color-grey-10);border-radius:24px;transition:background-color var(--ref-animation-short);cursor:pointer}.overflow-counter:focus-visible{background-color:var(--ref-color-grey-20);outline:3px solid var(--ref-color-electric-blue-100);outline-offset:1px}.overflow-counter:hover{background-color:var(--ref-color-grey-20)}.overflow-counter:active{background-color:var(--ref-color-grey-40)}.overflow-text{color:var(--ref-color-grey-80);font-family:var(--ref-font-family);font-weight:700;line-height:1em;text-align:center}.overflow-counter[data-size=\"16\"]{width:16px;height:16px}.overflow-counter[data-size=\"16\"] .overflow-text{font-size:8px}.overflow-counter[data-size=\"24\"]{width:24px;height:24px}.overflow-counter[data-size=\"24\"] .overflow-text{font-size:10px}.overflow-counter[data-size=\"32\"]{width:32px;height:32px}.overflow-counter[data-size=\"32\"] .overflow-text{font-size:12px}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { 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 });
|
|
44
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AvatarGroupComponent, isStandalone: true, selector: "ap-avatar-group", inputs: { avatars: { classPropertyName: "avatars", publicName: "avatars", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxAvatars: { classPropertyName: "maxAvatars", publicName: "maxAvatars", isSignal: true, isRequired: false, transformFunction: null }, showAvatarDescriptionTooltip: { classPropertyName: "showAvatarDescriptionTooltip", publicName: "showAvatarDescriptionTooltip", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "\"Avatar group\"" } }, ngImport: i0, template: "<div class=\"avatars-group\">\n @if (hasOverflow()) {\n <div\n class=\"overflow-counter\"\n apTooltip\n apTooltipTrigger=\"click\"\n [apTooltipType]=\"CustomTooltipType.LIST\"\n [apTooltipListItems]=\"tooltipAvatars()\"\n [attr.data-size]=\"size()\">\n <span class=\"overflow-text\">+{{ overflowCount() }}</span>\n </div>\n }\n\n <div class=\"avatars-list\">\n @for (avatar of visibleAvatars(); track $index) {\n <ap-avatar\n apTooltip\n [apTooltipType]=\"CustomTooltipType.LIST\"\n [apTooltipListItems]=\"[avatar]\"\n [profilePicture]=\"avatar.profilePicture\"\n [alt]=\"avatar.alt ?? ''\"\n [network]=\"avatar.network\"\n [size]=\"size()\"\n [username]=\"avatar.username\"\n [showInitials]=\"avatar.showInitials\"\n [bigNetwork]=\"avatar.bigNetwork ?? false\"\n [anonymous]=\"avatar.anonymous ?? false\"\n [online]=\"avatar.online ?? false\"\n [rounded]=\"avatar.rounded ?? true\" />\n }\n </div>\n</div>\n", styles: [".avatars-group,.avatars-list{display:inline-flex;flex-direction:row-reverse;align-items:center;padding-left:2px}.avatars-group ap-avatar{cursor:default}.avatars-group ap-avatar,.avatars-group .overflow-counter{margin-inline-start:-2px}.overflow-counter{display:flex;align-items:center;justify-content:center;background-color:var(--ref-color-grey-10);border-radius:24px;transition:background-color var(--ref-animation-short);cursor:pointer}.overflow-counter:focus-visible{background-color:var(--ref-color-grey-20);outline:3px solid var(--ref-color-electric-blue-100);outline-offset:1px}.overflow-counter:hover{background-color:var(--ref-color-grey-20)}.overflow-counter:active{background-color:var(--ref-color-grey-40)}.overflow-text{color:var(--ref-color-grey-80);font-family:var(--ref-font-family);font-weight:700;line-height:1em;text-align:center}.overflow-counter[data-size=\"16\"]{width:16px;height:16px}.overflow-counter[data-size=\"16\"] .overflow-text{font-size:8px}.overflow-counter[data-size=\"24\"]{width:24px;height:24px}.overflow-counter[data-size=\"24\"] .overflow-text{font-size:10px}.overflow-counter[data-size=\"32\"]{width:32px;height:32px}.overflow-counter[data-size=\"32\"] .overflow-text{font-size:12px}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipArrow", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
45
45
|
}
|
|
46
46
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AvatarGroupComponent, decorators: [{
|
|
47
47
|
type: Component,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agorapulse-ui-components-avatar-group.mjs","sources":["../../../libs/ui-components/avatar-group/src/avatar-group.component.ts","../../../libs/ui-components/avatar-group/src/avatar-group.component.html","../../../libs/ui-components/avatar-group/src/agorapulse-ui-components-avatar-group.ts"],"sourcesContent":["import { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { CustomTooltipAvatarItem, CustomTooltipType, TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nexport type AvatarGroupSize = 16 | 24 | 32;\n\n@Component({\n selector: 'ap-avatar-group',\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './avatar-group.component.html',\n styleUrls: ['./avatar-group.component.scss'],\n imports: [AvatarComponent, TooltipDirective],\n host: {\n role: 'group',\n '[attr.aria-label]': '\"Avatar group\"',\n },\n})\nexport class AvatarGroupComponent {\n avatars = input.required<CustomTooltipAvatarItem[], CustomTooltipAvatarItem[]>({\n transform: (value: CustomTooltipAvatarItem[]) => [...value].reverse(),\n });\n size = input<AvatarGroupSize>(24);\n maxAvatars = input<number>(5);\n showAvatarDescriptionTooltip = input(true);\n\n visibleAvatars = computed(() => {\n const max = this.maxAvatars();\n const all = this.avatars();\n return all.slice(0, max);\n });\n\n // avatars not displayed in the group but shown in the tooltip\n tooltipAvatars = computed(() => {\n const max = this.maxAvatars();\n const all = this.avatars();\n return all.slice(max);\n });\n\n overflowCount = computed(() => {\n const total = this.avatars().length;\n const max = this.maxAvatars();\n if (total <= max) {\n return 0;\n }\n const result = total - max;\n if (result > 99) {\n return 99;\n }\n return result;\n });\n\n hasOverflow = computed(() => this.overflowCount() > 0);\n\n protected readonly CustomTooltipType = CustomTooltipType;\n}\n","<div class=\"avatars-group\">\n @if (hasOverflow()) {\n <div\n class=\"overflow-counter\"\n apTooltip\n apTooltipTrigger=\"click\"\n [apTooltipType]=\"CustomTooltipType.LIST\"\n [apTooltipListItems]=\"tooltipAvatars()\"\n [attr.data-size]=\"size()\">\n <span class=\"overflow-text\">+{{ overflowCount() }}</span>\n </div>\n }\n\n <div class=\"avatars-list\">\n @for (avatar of visibleAvatars(); track $index) {\n <ap-avatar\n apTooltip\n [apTooltipType]=\"CustomTooltipType.LIST\"\n [apTooltipListItems]=\"[avatar]\"\n [profilePicture]=\"avatar.profilePicture\"\n [alt]=\"avatar.alt ?? ''\"\n [network]=\"avatar.network\"\n [size]=\"size()\"\n [username]=\"avatar.username\"\n [showInitials]=\"avatar.showInitials\"\n [bigNetwork]=\"avatar.bigNetwork ?? false\"\n [anonymous]=\"avatar.anonymous ?? false\"\n [online]=\"avatar.online ?? false\"\n [rounded]=\"avatar.rounded ?? true\" />\n }\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-avatar-group.mjs","sources":["../../../libs/ui-components/avatar-group/src/avatar-group.component.ts","../../../libs/ui-components/avatar-group/src/avatar-group.component.html","../../../libs/ui-components/avatar-group/src/agorapulse-ui-components-avatar-group.ts"],"sourcesContent":["import { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { CustomTooltipAvatarItem, CustomTooltipType, TooltipDirective } from '@agorapulse/ui-components/tooltip';\nimport { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\nexport type AvatarGroupSize = 16 | 24 | 32;\n\n@Component({\n selector: 'ap-avatar-group',\n changeDetection: ChangeDetectionStrategy.OnPush,\n templateUrl: './avatar-group.component.html',\n styleUrls: ['./avatar-group.component.scss'],\n imports: [AvatarComponent, TooltipDirective],\n host: {\n role: 'group',\n '[attr.aria-label]': '\"Avatar group\"',\n },\n})\nexport class AvatarGroupComponent {\n avatars = input.required<CustomTooltipAvatarItem[], CustomTooltipAvatarItem[]>({\n transform: (value: CustomTooltipAvatarItem[]) => [...value].reverse(),\n });\n size = input<AvatarGroupSize>(24);\n maxAvatars = input<number>(5);\n showAvatarDescriptionTooltip = input(true);\n\n visibleAvatars = computed(() => {\n const max = this.maxAvatars();\n const all = this.avatars();\n return all.slice(0, max);\n });\n\n // avatars not displayed in the group but shown in the tooltip\n tooltipAvatars = computed(() => {\n const max = this.maxAvatars();\n const all = this.avatars();\n return all.slice(max);\n });\n\n overflowCount = computed(() => {\n const total = this.avatars().length;\n const max = this.maxAvatars();\n if (total <= max) {\n return 0;\n }\n const result = total - max;\n if (result > 99) {\n return 99;\n }\n return result;\n });\n\n hasOverflow = computed(() => this.overflowCount() > 0);\n\n protected readonly CustomTooltipType = CustomTooltipType;\n}\n","<div class=\"avatars-group\">\n @if (hasOverflow()) {\n <div\n class=\"overflow-counter\"\n apTooltip\n apTooltipTrigger=\"click\"\n [apTooltipType]=\"CustomTooltipType.LIST\"\n [apTooltipListItems]=\"tooltipAvatars()\"\n [attr.data-size]=\"size()\">\n <span class=\"overflow-text\">+{{ overflowCount() }}</span>\n </div>\n }\n\n <div class=\"avatars-list\">\n @for (avatar of visibleAvatars(); track $index) {\n <ap-avatar\n apTooltip\n [apTooltipType]=\"CustomTooltipType.LIST\"\n [apTooltipListItems]=\"[avatar]\"\n [profilePicture]=\"avatar.profilePicture\"\n [alt]=\"avatar.alt ?? ''\"\n [network]=\"avatar.network\"\n [size]=\"size()\"\n [username]=\"avatar.username\"\n [showInitials]=\"avatar.showInitials\"\n [bigNetwork]=\"avatar.bigNetwork ?? false\"\n [anonymous]=\"avatar.anonymous ?? false\"\n [online]=\"avatar.online ?? false\"\n [rounded]=\"avatar.rounded ?? true\" />\n }\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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"}
|
|
@@ -941,7 +941,7 @@ class DatepickerSelectComponent {
|
|
|
941
941
|
// NgxDaterangepickerMd module provides none — only its forRoot() does.
|
|
942
942
|
{ provide: LOCALE_CONFIG, useValue: {} },
|
|
943
943
|
LocaleService,
|
|
944
|
-
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n The trigger is the group itself, not the row inside it: `[apDropdownTrigger]` only listens on its\n own host, and that row is content-height and sits inside the group's padding \u2014 so a click on the\n band above, below or beside it fell on nothing. The group is also what the panel should line up\n with, and `toggle()` anchors the overlay to the trigger.\n\n Nothing here is a bare `ap-input-group` child, so its `ap-symbol` ng-content slot is unused and\n the whole row lands in the default slot, in source order (icon, value, clear, chevron).\n-->\n<ap-input-group\n [apDropdownTrigger]=\"dropdown\"\n [disabled]=\"disabled()\">\n <div class=\"ap-datepicker-select__field\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n\n <!--\n The combobox is this box and not the field around it: ng-select does the same, carrying the\n role on its inner input so the clear and the arrow stay its siblings rather than its\n descendants. The field keeps [apDropdownTrigger] \u2014 it is the click surface and the overlay's\n anchor \u2014 and the directive listens on its host, so keys pressed here still reach it by\n bubbling. Being the growing box (flex: 1) also makes it the one that measures the chip row.\n -->\n <div\n #overflow=\"apOverflowCount\"\n class=\"ap-datepicker-select__values\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n apOverflowCount\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-controls]=\"dropdown.panelId\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n (blur)=\"touch.emit()\">\n @if (mode() === DatepickerMode.Multiple && chips().length > 0) {\n @for (chip of chips(); track chip.date.valueOf()) {\n <ap-tag\n apOverflowItem\n color=\"grey\"\n [mini]=\"true\"\n [clearable]=\"!disabled()\"\n (clear)=\"removeDate(chip)\">\n {{ chip.label }}\n </ap-tag>\n }\n @if (overflow.hiddenCount() > 0) {\n <ap-tag\n apOverflowCounter\n color=\"grey\"\n [mini]=\"true\">\n +{{ overflow.hiddenCount() }}\n </ap-tag>\n }\n } @else if (displayed()) {\n <span class=\"ap-datepicker-select__value\">{{ displayed() }}</span>\n } @else {\n <span class=\"ap-datepicker-select__placeholder\">{{ placeholder() }}</span>\n }\n </div>\n\n <!--\n Before the chevron, as ng-select orders its own container: value, clear, arrow. Sitting\n inside the trigger, a click here would bubble up and open the panel \u2014 hence the\n stopPropagation() in clear().\n -->\n @if (clearable() && hasValue() && !disabled()) {\n <ap-icon-button\n class=\"ap-datepicker-select__clear\"\n type=\"flat\"\n name=\"datepicker-clear\"\n symbolId=\"close\"\n ariaLabel=\"Clear selection\"\n (click)=\"clear($event)\" />\n }\n\n <span class=\"ap-datepicker-select__chevron\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n </span>\n </div>\n</ap-input-group>\n\n@if (timeZone(); as zone) {\n <div\n class=\"ap-datepicker-select__timezone\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"zone\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"clock\"\n color=\"grey\" />\n <span class=\"ap-datepicker-select__timezone-offset\">{{ timeZoneOffset() }}</span>\n </div>\n @if (timeZoneTooltip(); as tooltip) {\n <ap-symbol\n class=\"ap-datepicker-select__timezone-info\"\n size=\"sm\"\n symbolId=\"info\"\n color=\"grey-blue\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"tooltip\" />\n }\n}\n\n<ap-datepicker-dropdown\n #dropdown\n [closeOnSelect]=\"closesOnSelect()\"\n [dateLimit]=\"maxRangeDays()\"\n [placement]=\"placement()\"\n [disabled]=\"disabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [hint]=\"panelHint()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [panelFooter]=\"panelFooter()\"\n [presets]=\"presets()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"selectedPeriod()\"\n (closed)=\"onPanelClosed()\"\n (dateSelected)=\"onDateSelected($event)\"\n (opened)=\"onPanelOpened()\"\n (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-datepicker-select{display:flex;width:100%;align-items:center;gap:var(--ref-spacing-sm)}.ap-datepicker-select ap-input-group{flex:1;min-width:0}.ap-datepicker-select .ap-input-group.disabled ap-symbol{color:inherit}.ap-datepicker-select:not(.ap-datepicker-select--open) .ap-input-group:focus-within:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-default-color)}.ap-datepicker-select:not(.ap-datepicker-select--open) .ap-input-group:has(:focus-visible):not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-focused-color)}.ap-datepicker-select--open .ap-input-group,.ap-datepicker-select--open .ap-input-group:hover:not(.disabled):not(:has(input[disabled])){border-color:var(--ref-color-electric-blue-100)}.ap-datepicker-select--open .ap-datepicker-select__chevron ap-symbol{color:var(--ref-color-electric-blue-100)}.ap-datepicker-select__field{display:flex;align-self:stretch;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs);cursor:pointer;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size)}.ap-datepicker-select__field:focus-visible{outline:none}.ap-datepicker-select__values{display:flex;overflow:hidden;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__values>*{flex-shrink:0}.ap-datepicker-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ap-datepicker-select__placeholder{color:var(--sys-text-color-light)}.ap-datepicker-select__chevron{display:inline-flex;align-items:center}.ap-datepicker-select__clear{--comp-icon-button-width: var(--sys-icon-css-md);--comp-icon-button-height: var(--sys-icon-css-md);--comp-icon-button-padding: 0}.ap-datepicker-select__clear .icon-button:hover:not(.stroked):not(.locked),.ap-datepicker-select__clear .icon-button:active:not(.stroked):not(.locked){background:transparent}.ap-datepicker-select__clear .icon-button ap-symbol{width:var(--sys-icon-css-xs);min-width:var(--sys-icon-css-xs);height:var(--sys-icon-css-xs);min-height:var(--sys-icon-css-xs)}.ap-datepicker-select__clear:hover .icon-button ap-symbol{color:var(--sys-color-error-text)}.ap-datepicker-select__timezone{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__timezone-info{display:inline-flex;align-items:center}.ap-datepicker-select--multiple .ap-datepicker-select__values{gap:var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: DatepickerDropdownComponent, selector: "ap-datepicker-dropdown", inputs: ["mode", "selectedDate", "selectedDates", "selectedPeriod", "minDate", "maxDate", "dateLimit", "hint", "panelFooter", "firstDayOfWeek", "locale", "presets", "showBackdrop", "closeOnSelect", "disabled", "placement"], outputs: ["opened", "closed", "dateSelected", "periodSelected"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition", "disabled"] }, { kind: "directive", type: OverflowCountDirective, selector: "[apOverflowCount]", inputs: ["gap", "counterFallbackWidth", "minVisible"], exportAs: ["apOverflowCount"] }, { kind: "directive", type: OverflowCounterDirective, selector: "[apOverflowCounter]" }, { kind: "directive", type: OverflowItemDirective, selector: "[apOverflowItem]" }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { 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, encapsulation: i0.ViewEncapsulation.None });
|
|
944
|
+
], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n The trigger is the group itself, not the row inside it: `[apDropdownTrigger]` only listens on its\n own host, and that row is content-height and sits inside the group's padding \u2014 so a click on the\n band above, below or beside it fell on nothing. The group is also what the panel should line up\n with, and `toggle()` anchors the overlay to the trigger.\n\n Nothing here is a bare `ap-input-group` child, so its `ap-symbol` ng-content slot is unused and\n the whole row lands in the default slot, in source order (icon, value, clear, chevron).\n-->\n<ap-input-group\n [apDropdownTrigger]=\"dropdown\"\n [disabled]=\"disabled()\">\n <div class=\"ap-datepicker-select__field\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"calendar\" />\n\n <!--\n The combobox is this box and not the field around it: ng-select does the same, carrying the\n role on its inner input so the clear and the arrow stay its siblings rather than its\n descendants. The field keeps [apDropdownTrigger] \u2014 it is the click surface and the overlay's\n anchor \u2014 and the directive listens on its host, so keys pressed here still reach it by\n bubbling. Being the growing box (flex: 1) also makes it the one that measures the chip row.\n -->\n <div\n #overflow=\"apOverflowCount\"\n class=\"ap-datepicker-select__values\"\n role=\"combobox\"\n aria-haspopup=\"dialog\"\n apOverflowCount\n [attr.aria-label]=\"ariaLabel()\"\n [attr.tabindex]=\"disabled() ? -1 : 0\"\n [attr.aria-controls]=\"dropdown.panelId\"\n [attr.aria-disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n (blur)=\"touch.emit()\">\n @if (mode() === DatepickerMode.Multiple && chips().length > 0) {\n @for (chip of chips(); track chip.date.valueOf()) {\n <ap-tag\n apOverflowItem\n color=\"grey\"\n [mini]=\"true\"\n [clearable]=\"!disabled()\"\n (clear)=\"removeDate(chip)\">\n {{ chip.label }}\n </ap-tag>\n }\n @if (overflow.hiddenCount() > 0) {\n <ap-tag\n apOverflowCounter\n color=\"grey\"\n [mini]=\"true\">\n +{{ overflow.hiddenCount() }}\n </ap-tag>\n }\n } @else if (displayed()) {\n <span class=\"ap-datepicker-select__value\">{{ displayed() }}</span>\n } @else {\n <span class=\"ap-datepicker-select__placeholder\">{{ placeholder() }}</span>\n }\n </div>\n\n <!--\n Before the chevron, as ng-select orders its own container: value, clear, arrow. Sitting\n inside the trigger, a click here would bubble up and open the panel \u2014 hence the\n stopPropagation() in clear().\n -->\n @if (clearable() && hasValue() && !disabled()) {\n <ap-icon-button\n class=\"ap-datepicker-select__clear\"\n type=\"flat\"\n name=\"datepicker-clear\"\n symbolId=\"close\"\n ariaLabel=\"Clear selection\"\n (click)=\"clear($event)\" />\n }\n\n <span class=\"ap-datepicker-select__chevron\">\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"isOpen() ? 'chevron-up' : 'chevron-down'\" />\n </span>\n </div>\n</ap-input-group>\n\n@if (timeZone(); as zone) {\n <div\n class=\"ap-datepicker-select__timezone\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"zone\">\n <ap-symbol\n size=\"sm\"\n symbolId=\"clock\"\n color=\"grey\" />\n <span class=\"ap-datepicker-select__timezone-offset\">{{ timeZoneOffset() }}</span>\n </div>\n @if (timeZoneTooltip(); as tooltip) {\n <ap-symbol\n class=\"ap-datepicker-select__timezone-info\"\n size=\"sm\"\n symbolId=\"info\"\n color=\"grey-blue\"\n apTooltipPosition=\"bottom\"\n [apTooltip]=\"tooltip\" />\n }\n}\n\n<ap-datepicker-dropdown\n #dropdown\n [closeOnSelect]=\"closesOnSelect()\"\n [dateLimit]=\"maxRangeDays()\"\n [placement]=\"placement()\"\n [disabled]=\"disabled()\"\n [firstDayOfWeek]=\"firstDayOfWeek()\"\n [hint]=\"panelHint()\"\n [locale]=\"locale()\"\n [maxDate]=\"maxDate()\"\n [minDate]=\"minDate()\"\n [mode]=\"mode()\"\n [panelFooter]=\"panelFooter()\"\n [presets]=\"presets()\"\n [selectedDate]=\"selectedDate()\"\n [selectedDates]=\"selectedDates()\"\n [selectedPeriod]=\"selectedPeriod()\"\n (closed)=\"onPanelClosed()\"\n (dateSelected)=\"onDateSelected($event)\"\n (opened)=\"onPanelOpened()\"\n (periodSelected)=\"onPeriodSelected($event)\" />\n", styles: [".ap-datepicker-select{display:flex;width:100%;align-items:center;gap:var(--ref-spacing-sm)}.ap-datepicker-select ap-input-group{flex:1;min-width:0}.ap-datepicker-select .ap-input-group.disabled ap-symbol{color:inherit}.ap-datepicker-select:not(.ap-datepicker-select--open) .ap-input-group:focus-within:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-default-color)}.ap-datepicker-select:not(.ap-datepicker-select--open) .ap-input-group:has(:focus-visible):not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-focused-color)}.ap-datepicker-select--open .ap-input-group,.ap-datepicker-select--open .ap-input-group:hover:not(.disabled):not(:has(input[disabled])){border-color:var(--ref-color-electric-blue-100)}.ap-datepicker-select--open .ap-datepicker-select__chevron ap-symbol{color:var(--ref-color-electric-blue-100)}.ap-datepicker-select__field{display:flex;align-self:stretch;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs);cursor:pointer;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size)}.ap-datepicker-select__field:focus-visible{outline:none}.ap-datepicker-select__values{display:flex;overflow:hidden;flex:1;min-width:0;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__values>*{flex-shrink:0}.ap-datepicker-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ap-datepicker-select__placeholder{color:var(--sys-text-color-light)}.ap-datepicker-select__chevron{display:inline-flex;align-items:center}.ap-datepicker-select__clear{--comp-icon-button-width: var(--sys-icon-css-md);--comp-icon-button-height: var(--sys-icon-css-md);--comp-icon-button-padding: 0}.ap-datepicker-select__clear .icon-button:hover:not(.stroked):not(.locked),.ap-datepicker-select__clear .icon-button:active:not(.stroked):not(.locked){background:transparent}.ap-datepicker-select__clear .icon-button ap-symbol{width:var(--sys-icon-css-xs);min-width:var(--sys-icon-css-xs);height:var(--sys-icon-css-xs);min-height:var(--sys-icon-css-xs)}.ap-datepicker-select__clear:hover .icon-button ap-symbol{color:var(--sys-color-error-text)}.ap-datepicker-select__timezone{display:inline-flex;align-items:center;gap:var(--ref-spacing-xxs)}.ap-datepicker-select__timezone-info{display:inline-flex;align-items:center}.ap-datepicker-select--multiple .ap-datepicker-select__values{gap:var(--ref-spacing-xxxs)}\n"], dependencies: [{ kind: "component", type: DatepickerDropdownComponent, selector: "ap-datepicker-dropdown", inputs: ["mode", "selectedDate", "selectedDates", "selectedPeriod", "minDate", "maxDate", "dateLimit", "hint", "panelFooter", "firstDayOfWeek", "locale", "presets", "showBackdrop", "closeOnSelect", "disabled", "placement"], outputs: ["opened", "closed", "dateSelected", "periodSelected"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[apDropdownTrigger]", inputs: ["apDropdownTrigger"] }, { kind: "component", type: IconButtonComponent, selector: "ap-icon-button", inputs: ["ariaLabel", "name", "color", "disabled", "menuTrigger", "symbolId", "locked", "loading", "type"], outputs: ["onClick", "onFocus", "onBlur", "menuOpened", "menuClosed"] }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition", "disabled"] }, { kind: "directive", type: OverflowCountDirective, selector: "[apOverflowCount]", inputs: ["gap", "counterFallbackWidth", "minVisible"], exportAs: ["apOverflowCount"] }, { kind: "directive", type: OverflowCounterDirective, selector: "[apOverflowCounter]" }, { kind: "directive", type: OverflowItemDirective, selector: "[apOverflowItem]" }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { 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", "apTooltipArrow", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
945
945
|
}
|
|
946
946
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DatepickerSelectComponent, decorators: [{
|
|
947
947
|
type: Component,
|