@agorapulse/ui-components 20.1.12 → 20.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/agorapulse-ui-components-20.2.0.tgz +0 -0
  2. package/fesm2022/agorapulse-ui-components-action-dropdown.mjs +0 -1
  3. package/fesm2022/agorapulse-ui-components-action-dropdown.mjs.map +1 -1
  4. package/fesm2022/agorapulse-ui-components-labels-selector.mjs +1 -1
  5. package/fesm2022/agorapulse-ui-components-labels-selector.mjs.map +1 -1
  6. package/fesm2022/agorapulse-ui-components-select.mjs +10 -6
  7. package/fesm2022/agorapulse-ui-components-select.mjs.map +1 -1
  8. package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs +398 -0
  9. package/fesm2022/agorapulse-ui-components-selection-dropdown.mjs.map +1 -0
  10. package/fesm2022/agorapulse-ui-components-tabs.mjs +7 -21
  11. package/fesm2022/agorapulse-ui-components-tabs.mjs.map +1 -1
  12. package/fesm2022/agorapulse-ui-components.mjs +2 -0
  13. package/fesm2022/agorapulse-ui-components.mjs.map +1 -1
  14. package/index.d.ts +2 -0
  15. package/package.json +9 -5
  16. package/select/index.d.ts +4 -2
  17. package/selection-dropdown/index.d.ts +140 -0
  18. package/tabs/index.d.ts +4 -14
  19. package/agorapulse-ui-components-20.1.12.tgz +0 -0
package/fesm2022/agorapulse-ui-components-action-dropdown.mjs CHANGED
@@ -51,7 +51,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
51
51
  type: Directive,
52
52
  args: [{
53
53
  selector: '[apActionDropdownTrigger]',
54
- standalone: true,
55
54
  }]
56
55
  }], propDecorators: { onClick: [{
57
56
  type: HostListener,
package/fesm2022/agorapulse-ui-components-action-dropdown.mjs.map CHANGED
@@ -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 standalone: true,\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.required<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 const actionDropdown = this.apActionDropdownTrigger();\n if (actionDropdown) {\n actionDropdown.toggle(this.elementRef.nativeElement);\n }\n }\n\n /** Handles keyboard events for accessibility (Enter, Space, Arrow Down, Escape) */\n @HostListener('keydown', ['$event'])\n onKeyDown(event: KeyboardEvent): void {\n const actionDropdown = this.apActionDropdownTrigger();\n if (actionDropdown) {\n switch (event.key) {\n case 'Enter':\n case ' ':\n case 'ArrowDown':\n event.preventDefault();\n actionDropdown.open(this.elementRef.nativeElement);\n break;\n\n case 'Escape':\n event.preventDefault();\n actionDropdown.close();\n break;\n }\n }\n }\n}\n","import { BadgeComponent } from '@agorapulse/ui-components/badge';\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';\nimport { ConnectedPosition, FlexibleConnectedPositionStrategy, Overlay, OverlayPositionBuilder, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n contentChild,\n effect,\n ElementRef,\n inject,\n input,\n output,\n signal,\n TemplateRef,\n viewChild,\n ViewContainerRef,\n} from '@angular/core';\nimport { take } from 'rxjs/operators';\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 /** 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}\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, CommonModule, SymbolComponent, TooltipDirective],\n providers: [withSymbols(apInfo, apFeatureLock)],\n})\nexport class ActionDropdownComponent {\n private readonly elementRef = inject(ElementRef);\n private readonly overlay = inject(Overlay);\n private readonly positionBuilder = inject(OverlayPositionBuilder);\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly viewContainerRef = inject(ViewContainerRef);\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 the dropdown is disabled and cannot be opened */\n disabled = input(false);\n /** Whether to enable large mode styling for the dropdown */\n largeModeEnabled = input(false);\n /** Whether to show a backdrop that closes the dropdown when clicked */\n showBackdrop = input(true);\n /** Custom width for the dropdown menu in pixels */\n customWidth = input<number | null>(null);\n /** Default position for the dropdown relative to the trigger element */\n defaultPosition = input<'right' | 'left'>('right');\n\n /** Emits when a dropdown item is clicked */\n itemClick = output<ActionDropdownItem>();\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\n private overlayRef: OverlayRef | null = null;\n private portal: TemplatePortal<unknown> | null = null;\n\n protected readonly isOpen = signal(false);\n protected readonly focusedIndex = signal(-1);\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 or component's element */\n open(triggerElement?: HTMLElement): void {\n const actionDropdownTemplate = this.actionDropdownTemplate();\n\n if (this.disabled() || this.isOpen() || !actionDropdownTemplate) {\n return;\n }\n\n const target = triggerElement || this.elementRef.nativeElement;\n\n if (this.overlayRef) {\n this.overlayRef.dispose();\n }\n\n const positionStrategy = this.createPositionStrategy(target);\n\n this.overlayRef = this.overlay.create({\n positionStrategy,\n hasBackdrop: this.showBackdrop(),\n backdropClass: '',\n panelClass: '',\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n });\n\n this.portal = new TemplatePortal(actionDropdownTemplate, this.viewContainerRef);\n this.overlayRef.attach(this.portal);\n\n this.isOpen.set(true);\n this.focusedIndex.set(-1);\n this.opened.emit();\n\n this.overlayRef\n .backdropClick()\n .pipe(take(1))\n .subscribe(() => {\n this.close();\n });\n\n this.overlayRef\n .keydownEvents()\n .pipe(take(1))\n .subscribe((event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.close();\n }\n });\n }\n\n /** Closes the dropdown menu and cleans up overlay resources */\n close(): void {\n if (!this.isOpen()) {\n return;\n }\n\n if (this.overlayRef) {\n this.overlayRef.dispose();\n this.overlayRef = null;\n }\n\n this.portal = null;\n this.isOpen.set(false);\n this.focusedIndex.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 /** 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 /** Creates positioning strategy for the overlay based on trigger element and default position */\n private createPositionStrategy(target: HTMLElement): FlexibleConnectedPositionStrategy {\n const defaultPosition = this.defaultPosition();\n const gap = 4;\n\n const positions: ConnectedPosition[] =\n defaultPosition === 'right'\n ? [\n // Bottom-right (default) - left border aligns with left side of trigger\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetX: 0,\n offsetY: gap,\n },\n // Bottom-left (if not enough space on right) - right border aligns with right side of trigger\n {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetX: 0,\n offsetY: gap,\n },\n // Top-right (if not enough space below) - left border aligns with left side of trigger\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n offsetX: 0,\n offsetY: -gap,\n },\n // Top-left (if not enough space below and on right) - right border aligns with right side of trigger\n {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetX: 0,\n offsetY: -gap,\n },\n ]\n : [\n // Bottom-left (default) - right border aligns with right side of trigger\n {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetX: 0,\n offsetY: gap,\n },\n // Bottom-right (if not enough space on left) - left border aligns with left side of trigger\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetX: 0,\n offsetY: gap,\n },\n // Top-left (if not enough space below) - right border aligns with right side of trigger\n {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetX: 0,\n offsetY: -gap,\n },\n // Top-right (if not enough space below and on left) - left border aligns with left side of trigger\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n offsetX: 0,\n offsetY: -gap,\n },\n ];\n\n return this.positionBuilder\n .flexibleConnectedTo(target)\n .withPositions(positions)\n .withFlexibleDimensions(true)\n .withPush(true)\n .withGrowAfterOpen(true)\n .withViewportMargin(8);\n }\n\n /** Sets up keyboard event handling for the opened dropdown */\n private setupKeyboardNavigation(): void {\n if (!this.overlayRef) {\n return;\n }\n\n const keydownEvents = this.overlayRef.keydownEvents();\n\n 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.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=\"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.required<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 const actionDropdown = this.apActionDropdownTrigger();\n if (actionDropdown) {\n actionDropdown.toggle(this.elementRef.nativeElement);\n }\n }\n\n /** Handles keyboard events for accessibility (Enter, Space, Arrow Down, Escape) */\n @HostListener('keydown', ['$event'])\n onKeyDown(event: KeyboardEvent): void {\n const actionDropdown = this.apActionDropdownTrigger();\n if (actionDropdown) {\n switch (event.key) {\n case 'Enter':\n case ' ':\n case 'ArrowDown':\n event.preventDefault();\n actionDropdown.open(this.elementRef.nativeElement);\n break;\n\n case 'Escape':\n event.preventDefault();\n actionDropdown.close();\n break;\n }\n }\n }\n}\n","import { BadgeComponent } from '@agorapulse/ui-components/badge';\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';\nimport { ConnectedPosition, FlexibleConnectedPositionStrategy, Overlay, OverlayPositionBuilder, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport { CommonModule } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n contentChild,\n effect,\n ElementRef,\n inject,\n input,\n output,\n signal,\n TemplateRef,\n viewChild,\n ViewContainerRef,\n} from '@angular/core';\nimport { take } from 'rxjs/operators';\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 /** 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}\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, CommonModule, SymbolComponent, TooltipDirective],\n providers: [withSymbols(apInfo, apFeatureLock)],\n})\nexport class ActionDropdownComponent {\n private readonly elementRef = inject(ElementRef);\n private readonly overlay = inject(Overlay);\n private readonly positionBuilder = inject(OverlayPositionBuilder);\n private readonly symbolRegistry = inject(SymbolRegistry);\n private readonly viewContainerRef = inject(ViewContainerRef);\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 the dropdown is disabled and cannot be opened */\n disabled = input(false);\n /** Whether to enable large mode styling for the dropdown */\n largeModeEnabled = input(false);\n /** Whether to show a backdrop that closes the dropdown when clicked */\n showBackdrop = input(true);\n /** Custom width for the dropdown menu in pixels */\n customWidth = input<number | null>(null);\n /** Default position for the dropdown relative to the trigger element */\n defaultPosition = input<'right' | 'left'>('right');\n\n /** Emits when a dropdown item is clicked */\n itemClick = output<ActionDropdownItem>();\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\n private overlayRef: OverlayRef | null = null;\n private portal: TemplatePortal<unknown> | null = null;\n\n protected readonly isOpen = signal(false);\n protected readonly focusedIndex = signal(-1);\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 or component's element */\n open(triggerElement?: HTMLElement): void {\n const actionDropdownTemplate = this.actionDropdownTemplate();\n\n if (this.disabled() || this.isOpen() || !actionDropdownTemplate) {\n return;\n }\n\n const target = triggerElement || this.elementRef.nativeElement;\n\n if (this.overlayRef) {\n this.overlayRef.dispose();\n }\n\n const positionStrategy = this.createPositionStrategy(target);\n\n this.overlayRef = this.overlay.create({\n positionStrategy,\n hasBackdrop: this.showBackdrop(),\n backdropClass: '',\n panelClass: '',\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n });\n\n this.portal = new TemplatePortal(actionDropdownTemplate, this.viewContainerRef);\n this.overlayRef.attach(this.portal);\n\n this.isOpen.set(true);\n this.focusedIndex.set(-1);\n this.opened.emit();\n\n this.overlayRef\n .backdropClick()\n .pipe(take(1))\n .subscribe(() => {\n this.close();\n });\n\n this.overlayRef\n .keydownEvents()\n .pipe(take(1))\n .subscribe((event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.close();\n }\n });\n }\n\n /** Closes the dropdown menu and cleans up overlay resources */\n close(): void {\n if (!this.isOpen()) {\n return;\n }\n\n if (this.overlayRef) {\n this.overlayRef.dispose();\n this.overlayRef = null;\n }\n\n this.portal = null;\n this.isOpen.set(false);\n this.focusedIndex.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 /** 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 /** Creates positioning strategy for the overlay based on trigger element and default position */\n private createPositionStrategy(target: HTMLElement): FlexibleConnectedPositionStrategy {\n const defaultPosition = this.defaultPosition();\n const gap = 4;\n\n const positions: ConnectedPosition[] =\n defaultPosition === 'right'\n ? [\n // Bottom-right (default) - left border aligns with left side of trigger\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetX: 0,\n offsetY: gap,\n },\n // Bottom-left (if not enough space on right) - right border aligns with right side of trigger\n {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetX: 0,\n offsetY: gap,\n },\n // Top-right (if not enough space below) - left border aligns with left side of trigger\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n offsetX: 0,\n offsetY: -gap,\n },\n // Top-left (if not enough space below and on right) - right border aligns with right side of trigger\n {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetX: 0,\n offsetY: -gap,\n },\n ]\n : [\n // Bottom-left (default) - right border aligns with right side of trigger\n {\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetX: 0,\n offsetY: gap,\n },\n // Bottom-right (if not enough space on left) - left border aligns with left side of trigger\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetX: 0,\n offsetY: gap,\n },\n // Top-left (if not enough space below) - right border aligns with right side of trigger\n {\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetX: 0,\n offsetY: -gap,\n },\n // Top-right (if not enough space below and on left) - left border aligns with left side of trigger\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'start',\n overlayY: 'bottom',\n offsetX: 0,\n offsetY: -gap,\n },\n ];\n\n return this.positionBuilder\n .flexibleConnectedTo(target)\n .withPositions(positions)\n .withFlexibleDimensions(true)\n .withPush(true)\n .withGrowAfterOpen(true)\n .withViewportMargin(8);\n }\n\n /** Sets up keyboard event handling for the opened dropdown */\n private setupKeyboardNavigation(): void {\n if (!this.overlayRef) {\n return;\n }\n\n const keydownEvents = this.overlayRef.keydownEvents();\n\n 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.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=\"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-labels-selector.mjs CHANGED
@@ -84,7 +84,7 @@ class LabelsSelectorComponent {
84
84
  }))));
85
85
  }
86
86
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LabelsSelectorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
87
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: LabelsSelectorComponent, isStandalone: true, selector: "ap-labels-selector", inputs: { addLabelEnabled: "addLabelEnabled", disabled: "disabled", initialLabels: "initialLabels", translation: "translation", loadingOnSearch: "loadingOnSearch", multipleEnabled: "multipleEnabled", searchLabelsFunction: "searchLabelsFunction" }, outputs: { createLabel: "createLabel", addLabel: "addLabel", deleteLabel: "deleteLabel", selectLabels: "selectLabels", searchErrorMessage: "searchErrorMessage" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select\n #select\n class=\"labels-select\"\n apSelectMultiple\n appendTo=\"body\"\n [clearable]=\"false\"\n [disabled]=\"disabled\"\n [items]=\"labels$ | async\"\n [loading]=\"labelsLoading\"\n [minTermLength]=\"0\"\n [multiple]=\"true\"\n [placeholder]=\"translation.placeholder\"\n [typeahead]=\"labelsInput$\"\n [(ngModel)]=\"labels\"\n (change)=\"onLabelsChange()\"\n (add)=\"onAddLabel($event)\"\n (remove)=\"onDeleteLabel($event)\"\n (open)=\"onOpen()\">\n <ng-template\n let-items=\"items\"\n let-clear=\"clear\"\n ng-multi-label-tmp>\n <ap-select-label-multiple\n displayType=\"label\"\n [selectedItems]=\"items\"\n (removeItem)=\"clear($event)\" />\n </ng-template>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ap-dropdown-item-multiple-one-line\n [text]=\"item\"\n [htmlId]=\"item$.htmlId\"\n [selected]=\"item$.selected\" />\n </ng-template>\n <ng-template\n let-searchTerm=\"searchTerm\"\n ng-header-tmp>\n <ap-dropdown-search-form\n [searchPlaceholder]=\"translation.searchPlaceholder ?? translation.placeholder\"\n [createText]=\"translation.createLabel\"\n [createNewEnabled]=\"addLabelEnabled\"\n [select]=\"select\"\n (createNew)=\"onCreateLabel($event)\" />\n </ng-template>\n</ng-select>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{max-width:260px;display:flex}.labels-select{width:260px}.labels-select .labels-wrapper{margin-bottom:5px;max-width:221px}::ng-deep .labels-select.ng-select .ng-select-container .ng-value-container{overflow-y:auto;overflow-x:hidden;max-height:171px;padding-left:6px!important;gap:4px}::ng-deep .ng-option{color:#344563!important}::ng-deep .ng-option.ng-option-marked{color:#178dfe!important}.add-label{display:flex;align-items:center;color:#178dfe}.add-label .add-label-icon{padding-right:8px}.add-label-preview{text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: ApSelectModule }, { kind: "directive", type: i2.SelectMultipleDirective, selector: "ng-select[apSelectMultiple]" }, { kind: "component", type: i2.DropdownItemMultipleOneLineComponent, selector: "ap-dropdown-item-multiple-one-line", inputs: ["text", "selected", "htmlId", "disabled", "avatarUrl", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "onlyEnabled", "onlyText", "isFeatureLocked", "roundedAvatar", "network", "symbolColor", "symbolTooltipText"], outputs: ["selectOnly", "lockedFeatureClicked"] }, { kind: "component", type: i2.SelectLabelMultipleComponent, selector: "ap-select-label-multiple", inputs: ["displayType", "selectedItems", "bindLabel", "bindValue", "bindAvatarUrl", "bindSymbolId", "roundedAvatar", "bindNetwork"], outputs: ["removeItem"] }, { kind: "component", type: i2.DropdownSearchFormComponent, selector: "ap-dropdown-search-form", inputs: ["searchPlaceholder", "createNewEnabled", "createText", "select"], outputs: ["createNew"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i3.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
87
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: LabelsSelectorComponent, isStandalone: true, selector: "ap-labels-selector", inputs: { addLabelEnabled: "addLabelEnabled", disabled: "disabled", initialLabels: "initialLabels", translation: "translation", loadingOnSearch: "loadingOnSearch", multipleEnabled: "multipleEnabled", searchLabelsFunction: "searchLabelsFunction" }, outputs: { createLabel: "createLabel", addLabel: "addLabel", deleteLabel: "deleteLabel", selectLabels: "selectLabels", searchErrorMessage: "searchErrorMessage" }, viewQueries: [{ propertyName: "select", first: true, predicate: ["select"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select\n #select\n class=\"labels-select\"\n apSelectMultiple\n appendTo=\"body\"\n [clearable]=\"false\"\n [disabled]=\"disabled\"\n [items]=\"labels$ | async\"\n [loading]=\"labelsLoading\"\n [minTermLength]=\"0\"\n [multiple]=\"true\"\n [placeholder]=\"translation.placeholder\"\n [typeahead]=\"labelsInput$\"\n [(ngModel)]=\"labels\"\n (change)=\"onLabelsChange()\"\n (add)=\"onAddLabel($event)\"\n (remove)=\"onDeleteLabel($event)\"\n (open)=\"onOpen()\">\n <ng-template\n let-items=\"items\"\n let-clear=\"clear\"\n ng-multi-label-tmp>\n <ap-select-label-multiple\n displayType=\"label\"\n [selectedItems]=\"items\"\n (removeItem)=\"clear($event)\" />\n </ng-template>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ap-dropdown-item-multiple-one-line\n [text]=\"item\"\n [htmlId]=\"item$.htmlId\"\n [selected]=\"item$.selected\" />\n </ng-template>\n <ng-template\n let-searchTerm=\"searchTerm\"\n ng-header-tmp>\n <ap-dropdown-search-form\n [searchPlaceholder]=\"translation.searchPlaceholder ?? translation.placeholder\"\n [createText]=\"translation.createLabel\"\n [createNewEnabled]=\"addLabelEnabled\"\n [select]=\"select\"\n (createNew)=\"onCreateLabel($event)\" />\n </ng-template>\n</ng-select>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{max-width:260px;display:flex}.labels-select{width:260px}.labels-select .labels-wrapper{margin-bottom:5px;max-width:221px}::ng-deep .labels-select.ng-select .ng-select-container .ng-value-container{overflow-y:auto;overflow-x:hidden;max-height:171px;padding-left:6px!important;gap:4px}::ng-deep .ng-option{color:#344563!important}::ng-deep .ng-option.ng-option-marked{color:#178dfe!important}.add-label{display:flex;align-items:center;color:#178dfe}.add-label .add-label-icon{padding-right:8px}.add-label-preview{text-overflow:ellipsis;display:block;white-space:nowrap;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: ApSelectModule }, { kind: "directive", type: i2.SelectMultipleDirective, selector: "ng-select[apSelectMultiple]" }, { kind: "component", type: i2.DropdownItemMultipleOneLineComponent, selector: "ap-dropdown-item-multiple-one-line", inputs: ["text", "selected", "htmlId", "disabled", "avatarUrl", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "onlyEnabled", "onlyText", "isFeatureLocked", "roundedAvatar", "network", "symbolColor", "symbolTooltipText"], outputs: ["selectOnly", "selectionChange", "lockedFeatureClicked"] }, { kind: "component", type: i2.SelectLabelMultipleComponent, selector: "ap-select-label-multiple", inputs: ["displayType", "selectedItems", "bindLabel", "bindValue", "bindAvatarUrl", "bindSymbolId", "roundedAvatar", "bindNetwork"], outputs: ["removeItem"] }, { kind: "component", type: i2.DropdownSearchFormComponent, selector: "ap-dropdown-search-form", inputs: ["searchPlaceholder", "createNewEnabled", "createText", "select"], outputs: ["createNew"] }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i3.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
88
88
  }
89
89
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: LabelsSelectorComponent, decorators: [{
90
90
  type: Component,
package/fesm2022/agorapulse-ui-components-labels-selector.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"agorapulse-ui-components-labels-selector.mjs","sources":["../../../libs/ui-components/labels-selector/src/labels-selector.component.ts","../../../libs/ui-components/labels-selector/src/labels-selector.component.html","../../../libs/ui-components/labels-selector/src/agorapulse-ui-components-labels-selector.ts"],"sourcesContent":["import { LabelComponent } from '@agorapulse/ui-components/labels';\nimport { ApSelectModule } from '@agorapulse/ui-components/select';\nimport { SymbolComponent, SymbolRegistry, apAddCircleBoldAlternate } from '@agorapulse/ui-symbol';\nimport { AsyncPipe } from '@angular/common';\nimport { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgSelectComponent } from '@ng-select/ng-select';\nimport { Observable, Subject } from 'rxjs';\nimport { catchError, debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';\n\nexport interface LabelsSelectorTranslation {\n placeholder: string;\n createLabel: string;\n searchPlaceholder?: string;\n}\n\n@Component({\n selector: 'ap-labels-selector',\n templateUrl: './labels-selector.component.html',\n styleUrls: ['./labels-selector.component.scss'],\n imports: [SymbolComponent, ApSelectModule, LabelComponent, FormsModule, AsyncPipe],\n})\nexport class LabelsSelectorComponent implements OnInit, OnChanges {\n @Input() addLabelEnabled: boolean = true;\n @Input() disabled: boolean = false;\n @Input() initialLabels: string[] = [];\n @Input() translation!: LabelsSelectorTranslation;\n @Input() loadingOnSearch: boolean = true;\n @Input() multipleEnabled: boolean = true;\n @Input({\n required: true,\n })\n searchLabelsFunction!: (val: string) => Observable<string[]>;\n\n @Output() createLabel = new EventEmitter<string>();\n @Output() addLabel = new EventEmitter<string>();\n @Output() deleteLabel = new EventEmitter<string>();\n @Output() selectLabels = new EventEmitter<string[]>();\n @Output() searchErrorMessage = new EventEmitter<string>();\n\n @ViewChild('select') select!: NgSelectComponent;\n\n labels: string[] = [];\n labelsInput$: Subject<string> = new Subject<string>();\n labels$!: Observable<string[]>;\n labelsLoading = false;\n\n constructor(\n private changeDetectorRef: ChangeDetectorRef,\n public symbolRegistry: SymbolRegistry\n ) {\n this.symbolRegistry.registerSymbols([apAddCircleBoldAlternate]);\n }\n\n ngOnInit(): void {\n this.labels = this.initialLabels;\n this.setSearchFunction();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.initialLabels?.currentValue) {\n this.labels = this.initialLabels;\n }\n }\n\n onCreateLabel(label: string): void {\n if (label && this.initialLabels.indexOf(label) === -1) {\n const handleTag = (item: string) => this.select.itemsList.addItem(item);\n this.select.select(handleTag(label));\n }\n this.createLabel.emit(label);\n }\n\n onDeleteLabel(label: string) {\n this.deleteLabel.emit(label);\n }\n\n onAddLabel(label: string) {\n this.addLabel.emit(label);\n }\n\n onOpen(): void {\n this.labelsInput$.next('');\n }\n\n onLabelsChange(): void {\n if (!this.multipleEnabled && this.labels.length > 1) {\n this.labels = [this.labels[this.labels.length - 1]];\n }\n this.selectLabels.emit(this.labels);\n this.changeDetectorRef.markForCheck();\n }\n\n setSearchFunction(): void {\n this.labels$ = this.labelsInput$.pipe(\n debounceTime(this.loadingOnSearch ? 400 : 0),\n distinctUntilChanged(),\n tap(() => {\n this.labelsLoading = true;\n }),\n switchMap((term: string) =>\n this.searchLabelsFunction(term).pipe(\n catchError(response => {\n this.searchErrorMessage.emit(response.error ? response.error.message : 'Error');\n return [];\n }),\n map(response => {\n this.labelsLoading = false;\n if (!response || Object.keys(response).length == 0) {\n return [];\n }\n return response;\n })\n )\n )\n );\n }\n}\n","<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select\n #select\n class=\"labels-select\"\n apSelectMultiple\n appendTo=\"body\"\n [clearable]=\"false\"\n [disabled]=\"disabled\"\n [items]=\"labels$ | async\"\n [loading]=\"labelsLoading\"\n [minTermLength]=\"0\"\n [multiple]=\"true\"\n [placeholder]=\"translation.placeholder\"\n [typeahead]=\"labelsInput$\"\n [(ngModel)]=\"labels\"\n (change)=\"onLabelsChange()\"\n (add)=\"onAddLabel($event)\"\n (remove)=\"onDeleteLabel($event)\"\n (open)=\"onOpen()\">\n <ng-template\n let-items=\"items\"\n let-clear=\"clear\"\n ng-multi-label-tmp>\n <ap-select-label-multiple\n displayType=\"label\"\n [selectedItems]=\"items\"\n (removeItem)=\"clear($event)\" />\n </ng-template>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ap-dropdown-item-multiple-one-line\n [text]=\"item\"\n [htmlId]=\"item$.htmlId\"\n [selected]=\"item$.selected\" />\n </ng-template>\n <ng-template\n let-searchTerm=\"searchTerm\"\n ng-header-tmp>\n <ap-dropdown-search-form\n [searchPlaceholder]=\"translation.searchPlaceholder ?? translation.placeholder\"\n [createText]=\"translation.createLabel\"\n [createNewEnabled]=\"addLabelEnabled\"\n [select]=\"select\"\n (createNew)=\"onCreateLabel($event)\" />\n </ng-template>\n</ng-select>\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-labels-selector.mjs","sources":["../../../libs/ui-components/labels-selector/src/labels-selector.component.ts","../../../libs/ui-components/labels-selector/src/labels-selector.component.html","../../../libs/ui-components/labels-selector/src/agorapulse-ui-components-labels-selector.ts"],"sourcesContent":["import { LabelComponent } from '@agorapulse/ui-components/labels';\nimport { ApSelectModule } from '@agorapulse/ui-components/select';\nimport { SymbolComponent, SymbolRegistry, apAddCircleBoldAlternate } from '@agorapulse/ui-symbol';\nimport { AsyncPipe } from '@angular/common';\nimport { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { NgSelectComponent } from '@ng-select/ng-select';\nimport { Observable, Subject } from 'rxjs';\nimport { catchError, debounceTime, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';\n\nexport interface LabelsSelectorTranslation {\n placeholder: string;\n createLabel: string;\n searchPlaceholder?: string;\n}\n\n@Component({\n selector: 'ap-labels-selector',\n templateUrl: './labels-selector.component.html',\n styleUrls: ['./labels-selector.component.scss'],\n imports: [SymbolComponent, ApSelectModule, LabelComponent, FormsModule, AsyncPipe],\n})\nexport class LabelsSelectorComponent implements OnInit, OnChanges {\n @Input() addLabelEnabled: boolean = true;\n @Input() disabled: boolean = false;\n @Input() initialLabels: string[] = [];\n @Input() translation!: LabelsSelectorTranslation;\n @Input() loadingOnSearch: boolean = true;\n @Input() multipleEnabled: boolean = true;\n @Input({\n required: true,\n })\n searchLabelsFunction!: (val: string) => Observable<string[]>;\n\n @Output() createLabel = new EventEmitter<string>();\n @Output() addLabel = new EventEmitter<string>();\n @Output() deleteLabel = new EventEmitter<string>();\n @Output() selectLabels = new EventEmitter<string[]>();\n @Output() searchErrorMessage = new EventEmitter<string>();\n\n @ViewChild('select') select!: NgSelectComponent;\n\n labels: string[] = [];\n labelsInput$: Subject<string> = new Subject<string>();\n labels$!: Observable<string[]>;\n labelsLoading = false;\n\n constructor(\n private changeDetectorRef: ChangeDetectorRef,\n public symbolRegistry: SymbolRegistry\n ) {\n this.symbolRegistry.registerSymbols([apAddCircleBoldAlternate]);\n }\n\n ngOnInit(): void {\n this.labels = this.initialLabels;\n this.setSearchFunction();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.initialLabels?.currentValue) {\n this.labels = this.initialLabels;\n }\n }\n\n onCreateLabel(label: string): void {\n if (label && this.initialLabels.indexOf(label) === -1) {\n const handleTag = (item: string) => this.select.itemsList.addItem(item);\n this.select.select(handleTag(label));\n }\n this.createLabel.emit(label);\n }\n\n onDeleteLabel(label: string) {\n this.deleteLabel.emit(label);\n }\n\n onAddLabel(label: string) {\n this.addLabel.emit(label);\n }\n\n onOpen(): void {\n this.labelsInput$.next('');\n }\n\n onLabelsChange(): void {\n if (!this.multipleEnabled && this.labels.length > 1) {\n this.labels = [this.labels[this.labels.length - 1]];\n }\n this.selectLabels.emit(this.labels);\n this.changeDetectorRef.markForCheck();\n }\n\n setSearchFunction(): void {\n this.labels$ = this.labelsInput$.pipe(\n debounceTime(this.loadingOnSearch ? 400 : 0),\n distinctUntilChanged(),\n tap(() => {\n this.labelsLoading = true;\n }),\n switchMap((term: string) =>\n this.searchLabelsFunction(term).pipe(\n catchError(response => {\n this.searchErrorMessage.emit(response.error ? response.error.message : 'Error');\n return [];\n }),\n map(response => {\n this.labelsLoading = false;\n if (!response || Object.keys(response).length == 0) {\n return [];\n }\n return response;\n })\n )\n )\n );\n }\n}\n","<!-- @JRA [multiple]=\"false\" break the component display and behavior, we use [maxSelectedItems]=\"1\" as efficient workaround -->\n<ng-select\n #select\n class=\"labels-select\"\n apSelectMultiple\n appendTo=\"body\"\n [clearable]=\"false\"\n [disabled]=\"disabled\"\n [items]=\"labels$ | async\"\n [loading]=\"labelsLoading\"\n [minTermLength]=\"0\"\n [multiple]=\"true\"\n [placeholder]=\"translation.placeholder\"\n [typeahead]=\"labelsInput$\"\n [(ngModel)]=\"labels\"\n (change)=\"onLabelsChange()\"\n (add)=\"onAddLabel($event)\"\n (remove)=\"onDeleteLabel($event)\"\n (open)=\"onOpen()\">\n <ng-template\n let-items=\"items\"\n let-clear=\"clear\"\n ng-multi-label-tmp>\n <ap-select-label-multiple\n displayType=\"label\"\n [selectedItems]=\"items\"\n (removeItem)=\"clear($event)\" />\n </ng-template>\n <ng-template\n let-item=\"item\"\n let-item$=\"item$\"\n ng-option-tmp>\n <ap-dropdown-item-multiple-one-line\n [text]=\"item\"\n [htmlId]=\"item$.htmlId\"\n [selected]=\"item$.selected\" />\n </ng-template>\n <ng-template\n let-searchTerm=\"searchTerm\"\n ng-header-tmp>\n <ap-dropdown-search-form\n [searchPlaceholder]=\"translation.searchPlaceholder ?? translation.placeholder\"\n [createText]=\"translation.createLabel\"\n [createNewEnabled]=\"addLabelEnabled\"\n [select]=\"select\"\n (createNew)=\"onCreateLabel($event)\" />\n </ng-template>\n</ng-select>\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-select.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { Input, ViewEncapsulation, Component, input, EventEmitter, output, HostListener, ViewChild, Output, ChangeDetectionStrategy, signal, TemplateRef, inject, ElementRef, EnvironmentInjector, computed, runInInjectionContext, effect, Renderer2, ViewContainerRef, Directive, NgModule } from '@angular/core';
2
+ import { Input, ViewEncapsulation, Component, input, output, HostListener, ViewChild, ChangeDetectionStrategy, EventEmitter, Output, signal, TemplateRef, inject, ElementRef, EnvironmentInjector, computed, runInInjectionContext, effect, Renderer2, ViewContainerRef, Directive, NgModule } from '@angular/core';
3
3
  import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
4
4
  import { BadgeComponent } from '@agorapulse/ui-components/badge';
5
5
  import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
@@ -78,7 +78,8 @@ class DropdownItemMultipleOneLineComponent {
78
78
  network = input(...(ngDevMode ? [undefined, { debugName: "network" }] : []));
79
79
  symbolColor = input(...(ngDevMode ? [undefined, { debugName: "symbolColor" }] : []));
80
80
  symbolTooltipText = input(...(ngDevMode ? [undefined, { debugName: "symbolTooltipText" }] : []));
81
- selectOnly = new EventEmitter();
81
+ selectOnly = output();
82
+ selectionChange = output();
82
83
  lockedFeatureClicked = output();
83
84
  checkbox;
84
85
  onClick($event) {
@@ -91,12 +92,17 @@ class DropdownItemMultipleOneLineComponent {
91
92
  this.selectOnly.emit();
92
93
  this.checkbox.focus();
93
94
  }
95
+ onCheckboxChange(checked) {
96
+ if (typeof checked === 'boolean') {
97
+ this.selectionChange.emit(checked);
98
+ }
99
+ }
94
100
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DropdownItemMultipleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
95
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DropdownItemMultipleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, symbolColor: { classPropertyName: "symbolColor", publicName: "symbolColor", isSignal: true, isRequired: false, transformFunction: null }, symbolTooltipText: { classPropertyName: "symbolTooltipText", publicName: "symbolTooltipText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n #checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\"\n [network]=\"network()\"/>\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\"\n [color]=\"symbolColor() ?? ''\"\n [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\n }\n <span\n class=\"option-item\"\n [class.feature-locked-label]=\"isFeatureLocked()\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n }\n\n @if (onlyEnabled && !disabled && !isFeatureLocked()) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n\n </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
101
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: DropdownItemMultipleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, symbolColor: { classPropertyName: "symbolColor", publicName: "symbolColor", isSignal: true, isRequired: false, transformFunction: null }, symbolTooltipText: { classPropertyName: "symbolTooltipText", publicName: "symbolTooltipText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", selectionChange: "selectionChange", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div\n class=\"option multiple\"\n [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n #checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\"\n (change)=\"onCheckboxChange($event)\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\"\n [network]=\"network()\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\"\n [color]=\"symbolColor() ?? ''\"\n [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\n }\n <span\n class=\"option-item\"\n [class.feature-locked-label]=\"isFeatureLocked()\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n </ap-checkbox>\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\" />\n }\n\n @if (onlyEnabled && !disabled && !isFeatureLocked()) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n</div>\n\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs);width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox{width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
96
102
  }
97
103
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: DropdownItemMultipleOneLineComponent, decorators: [{
98
104
  type: Component,
99
- args: [{ selector: 'ap-dropdown-item-multiple-one-line', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective, SymbolComponent, SymbolComponent], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple\" [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n #checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\"\n [network]=\"network()\"/>\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\"\n [color]=\"symbolColor() ?? ''\"\n [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\n }\n <span\n class=\"option-item\"\n [class.feature-locked-label]=\"isFeatureLocked()\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\"/>\n }\n\n @if (onlyEnabled && !disabled && !isFeatureLocked()) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n\n </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%}\n"] }]
105
+ args: [{ selector: 'ap-dropdown-item-multiple-one-line', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, BadgeComponent, TooltipDirective, SymbolComponent, SymbolComponent], template: "<div\n class=\"disabled-opaque\"\n [apTooltip]=\"disabledTooltip\"\n [apTooltipDisabled]=\"!disabled\"></div>\n<div\n class=\"option multiple\"\n [class.feature-locked-option]=\"isFeatureLocked()\">\n <ap-checkbox\n #checkbox\n [checked]=\"selected\"\n [disabled]=\"disabled || isFeatureLocked()\"\n [name]=\"'option-selection-' + htmlId\"\n (change)=\"onCheckboxChange($event)\">\n @if (avatarUrl !== undefined) {\n <ap-avatar\n [rounded]=\"roundedAvatar()\"\n [size]=\"24\"\n [profilePicture]=\"avatarUrl\"\n [username]=\"text\"\n [showInitials]=\"true\"\n [network]=\"network()\" />\n }\n @if (symbolId) {\n <ap-symbol\n size=\"sm\"\n [symbolId]=\"symbolId\"\n [color]=\"symbolColor() ?? ''\"\n [apTooltip]=\"symbolTooltipText() ? symbolTooltipText() : undefined\" />\n }\n <span\n class=\"option-item\"\n [class.feature-locked-label]=\"isFeatureLocked()\"\n [title]=\"text\">\n {{ text }}\n </span>\n @if (badgeText) {\n <ap-badge color=\"blue\">\n {{ badgeText }}\n </ap-badge>\n }\n </ap-checkbox>\n\n @if (isFeatureLocked()) {\n <ap-symbol\n symbolId=\"feature-lock\"\n color=\"purple\"\n size=\"sm\" />\n }\n\n @if (onlyEnabled && !disabled && !isFeatureLocked()) {\n <button\n class=\"standalone-link\"\n type=\"button\"\n (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n {{ onlyText }}\n </button>\n }\n</div>\n\n@if (dividerEnabled) {\n <div class=\"divider\"></div>\n}\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs);width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox{width:100%}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-one-line .option-item{width:100%}\n"] }]
100
106
  }], propDecorators: { text: [{
101
107
  type: Input,
102
108
  args: [{ required: true }]
@@ -122,8 +128,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImpor
122
128
  type: Input
123
129
  }], onlyText: [{
124
130
  type: Input
125
- }], selectOnly: [{
126
- type: Output
127
131
  }], checkbox: [{
128
132
  type: ViewChild,
129
133
  args: [CheckboxComponent]