@agnos-ui/angular/fesm2022/agnos-ui-angular.mjs.map

Bootstrap-based widget library for Angular.

{"version":3,"file":"agnos-ui-angular.mjs","sources":["../../src/components/modal/modal.component.ts","../../src/components/pagination/pagination.component.ts","../../src/components/rating/rating.component.ts","../../src/components/select/select.component.ts","../../src/components/alert/alert.component.ts","../../src/components/accordion/accordion.component.ts","../../src/components/slider/slider.component.ts","../../src/components/progressbar/progressbar.component.ts","../../src/components/toast/toast.component.ts","../../src/agnos-ui-angular.module.ts","../../src/components/modal/modal.service.ts","../../src/index.ts","../../src/agnos-ui-angular.ts"],"sourcesContent":["import type {ModalBeforeCloseEvent, ModalContext, ModalProps, ModalWidget, SlotContent, TransitionFn} from '@agnos-ui/angular-headless';\nimport {\n\tBaseWidgetDirective,\n\tCachedProperty,\n\tComponentTemplate,\n\tSlotDefaultDirective,\n\tSlotDirective,\n\tUseDirective,\n\tauBooleanAttribute,\n\tcallWidgetFactory,\n\tcreateModal,\n\tmergeDirectives,\n} from '@agnos-ui/angular-headless';\nimport {writable} from '@amadeus-it-group/tansu';\nimport type {AfterContentChecked} from '@angular/core';\nimport {\n\tChangeDetectionStrategy,\n\tComponent,\n\tContentChild,\n\tDirective,\n\tEventEmitter,\n\tInput,\n\tOutput,\n\tTemplateRef,\n\tViewChild,\n\tinject,\n} from '@angular/core';\n\n/**\n * Directive to provide the slot structure for the modal widget.\n */\n@Directive({selector: 'ng-template[auModalStructure]', standalone: true})\nexport class ModalStructureDirective<Data> {\n\tpublic templateRef = inject(TemplateRef<ModalContext<Data>>);\n\tstatic ngTemplateContextGuard<Data>(dir: ModalStructureDirective<Data>, context: unknown): context is ModalContext<Data> {\n\t\treturn true;\n\t}\n}\n\n/**\n * Directive to provide the slot header for the modal widget.\n */\n@Directive({selector: 'ng-template[auModalHeader]', standalone: true})\nexport class ModalHeaderDirective<Data> {\n\tpublic templateRef = inject(TemplateRef<ModalContext<Data>>);\n\tstatic ngTemplateContextGuard<Data>(_dir: ModalHeaderDirective<Data>, context: unknown): context is ModalContext<Data> {\n\t\treturn true;\n\t}\n}\n\n/**\n * Directive to provide the slot title for the modal widget.\n */\n@Directive({selector: 'ng-template[auModalTitle]', standalone: true})\nexport class ModalTitleDirective<Data> {\n\tpublic templateRef = inject(TemplateRef<ModalContext<Data>>);\n\tstatic ngTemplateContextGuard<Data>(_dir: ModalTitleDirective<Data>, context: unknown): context is ModalContext<Data> {\n\t\treturn true;\n\t}\n}\n\n/**\n * Directive to provide the default slot for the modal widget.\n */\n@Directive({selector: 'ng-template[auModalBody]', standalone: true})\nexport class ModalBodyDirective<Data> {\n\tpublic templateRef = inject(TemplateRef<ModalContext<Data>>);\n\tstatic ngTemplateContextGuard<Data>(_dir: ModalBodyDirective<Data>, context: unknown): context is ModalContext<Data> {\n\t\treturn true;\n\t}\n}\n\n/**\n * Directive to provide the slot footer for the modal widget.\n */\n@Directive({selector: 'ng-template[auModalFooter]', standalone: true})\nexport class ModalFooterDirective<Data> {\n\tpublic templateRef = inject(TemplateRef<ModalContext<Data>>);\n\tstatic ngTemplateContextGuard<Data>(_dir: ModalFooterDirective<Data>, context: unknown): context is ModalContext<Data> {\n\t\treturn true;\n\t}\n}\n\n/**\n * Component containing the default slots for the modal.\n */\n@Component({\n\tstandalone: true,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\timports: [SlotDirective, ModalHeaderDirective, ModalStructureDirective],\n\ttemplate: `\n\t\t<ng-template auModalHeader #header let-state=\"state\" let-widget=\"widget\">\n\t\t\t<h5 class=\"modal-title\">\n\t\t\t\t<ng-template [auSlot]=\"state.slotTitle\" [auSlotProps]=\"{state, widget}\"></ng-template>\n\t\t\t</h5>\n\t\t\t@if (state.closeButton) {\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclass=\"btn-close\"\n\t\t\t\t\t[attr.aria-label]=\"state.ariaCloseButtonLabel\"\n\t\t\t\t\t(click)=\"widget.actions.closeButtonClick($event)\"\n\t\t\t\t></button>\n\t\t\t}\n\t\t</ng-template>\n\t\t<ng-template auModalStructure #structure let-state=\"state\" let-widget=\"widget\">\n\t\t\t@if (state.slotTitle) {\n\t\t\t\t<div class=\"modal-header\">\n\t\t\t\t\t<ng-template [auSlot]=\"state.slotHeader\" [auSlotProps]=\"{state, widget}\"></ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t\t<div class=\"modal-body\">\n\t\t\t\t<ng-template [auSlot]=\"state.slotDefault\" [auSlotProps]=\"{state, widget}\"></ng-template>\n\t\t\t</div>\n\t\t\t@if (state.slotFooter) {\n\t\t\t\t<div class=\"modal-footer\">\n\t\t\t\t\t<ng-template [auSlot]=\"state.slotFooter\" [auSlotProps]=\"{state, widget}\"></ng-template>\n\t\t\t\t</div>\n\t\t\t}\n\t\t</ng-template>\n\t`,\n})\nexport class ModalDefaultSlotsComponent<Data> {\n\t@ViewChild('header', {static: true}) header: TemplateRef<ModalContext<Data>>;\n\t@ViewChild('structure', {static: true}) structure: TemplateRef<ModalContext<Data>>;\n}\n\n/**\n * Default slot for modal header.\n */\nexport const modalDefaultSlotHeader = new ComponentTemplate(ModalDefaultSlotsComponent, 'header');\n\n/**\n * Default slot for modal structure.\n */\nexport const modalDefaultSlotStructure = new ComponentTemplate(ModalDefaultSlotsComponent, 'structure');\n\nconst defaultConfig: Partial<ModalProps<any>> = {\n\tslotHeader: modalDefaultSlotHeader,\n\tslotStructure: modalDefaultSlotStructure,\n};\n\n/**\n * Modal component.\n */\n@Component({\n\tselector: '[auModal]',\n\tstandalone: true,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\timports: [UseDirective, SlotDirective, SlotDefaultDirective],\n\ttemplate: `\n\t\t<ng-template [auSlotDefault]=\"defaultSlots\"><ng-content></ng-content></ng-template>\n\t\t@if (!state().backdropHidden) {\n\t\t\t<div class=\"modal-backdrop {{ state().backdropClass }}\" [auUse]=\"backdropDirective\"></div>\n\t\t}\n\t\t@if (!state().hidden) {\n\t\t\t<div class=\"modal d-block {{ state().className }}\" [auUse]=\"modalDirective\" (click)=\"widget.actions.modalClick($event)\">\n\t\t\t\t<div class=\"modal-dialog\">\n\t\t\t\t\t<div class=\"modal-content\">\n\t\t\t\t\t\t<ng-template [auSlot]=\"state().slotStructure\" [auSlotProps]=\"{state: state(), widget}\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t}\n\t`,\n})\nexport class ModalComponent<Data> extends BaseWidgetDirective<ModalWidget<Data>> implements AfterContentChecked {\n\t/**\n\t * Whether the modal and its backdrop (if present) should be animated when shown or hidden.\n\t */\n\t@Input({alias: 'auAnimation', transform: auBooleanAttribute}) animation: boolean | undefined;\n\n\t/**\n\t * The transition to use for the backdrop behind the modal (if present).\n\t */\n\t@Input('auBackdropTransition') backdropTransition: TransitionFn | undefined;\n\n\t/**\n\t * The transition to use for the modal.\n\t */\n\t@Input('auModalTransition') modalTransition: TransitionFn | undefined;\n\n\t/**\n\t * Whether the modal should be visible when the transition is completed.\n\t */\n\t@Input({alias: 'auVisible', transform: auBooleanAttribute}) visible: boolean | undefined;\n\n\t/**\n\t * Whether a backdrop should be created behind the modal.\n\t */\n\t@Input({alias: 'auBackdrop', transform: auBooleanAttribute}) backdrop: boolean | undefined;\n\n\t/**\n\t * Whether the modal should be closed when clicking on the viewport outside the modal.\n\t */\n\t@Input({alias: 'auCloseOnOutsideClick', transform: auBooleanAttribute}) closeOnOutsideClick: boolean | undefined;\n\n\t/**\n\t * Which element should contain the modal and backdrop DOM elements.\n\t * If it is not null, the modal and backdrop DOM elements are moved to the specified container.\n\t * Otherwise, they stay where the widget is located.\n\t */\n\t@Input('auContainer') container: HTMLElement | null | undefined;\n\n\t/**\n\t * Value of the aria-label attribute to put on the close button.\n\t */\n\t@Input('auAriaCloseButtonLabel') ariaCloseButtonLabel: string | undefined;\n\n\t/**\n\t * Classes to add on the backdrop DOM element.\n\t */\n\t@Input('auBackdropClass') backdropClass: string | undefined;\n\n\t/**\n\t * Whether to display the close button.\n\t */\n\t@Input({alias: 'auCloseButton', transform: auBooleanAttribute}) closeButton: boolean | undefined;\n\n\t/**\n\t * CSS classes to be applied on the widget main container\n\t */\n\t@Input('auClassName') className: string | undefined;\n\n\t@Input('auSlotStructure') slotStructure: SlotContent<ModalContext<Data>>;\n\t@ContentChild(ModalStructureDirective, {static: false})\n\tslotStructureFromContent: ModalStructureDirective<Data> | null;\n\n\t@Input('auSlotHeader') slotHeader: SlotContent<ModalContext<Data>>;\n\t@ContentChild(ModalHeaderDirective, {static: false})\n\tslotHeaderFromContent: ModalHeaderDirective<Data> | null;\n\n\t@Input('auSlotTitle') slotTitle: SlotContent<ModalContext<Data>>;\n\t@ContentChild(ModalTitleDirective, {static: false})\n\tslotTitleFromContent: ModalTitleDirective<Data> | null;\n\n\t@Input('auSlotDefault') slotDefault: SlotContent<ModalContext<Data>>;\n\t@ContentChild(ModalBodyDirective, {static: false})\n\tslotDefaultFromContent: ModalBodyDirective<Data> | null;\n\n\t@Input('auSlotFooter') slotFooter: SlotContent<ModalContext<Data>>;\n\t@ContentChild(ModalFooterDirective, {static: false})\n\tslotFooterFromContent: ModalFooterDirective<Data> | null;\n\n\t/**\n\t * Data to use in content slots\n\t */\n\t@Input('auContentData') contentData: Data | undefined;\n\n\t/**\n\t * Event to be triggered when the visible property changes.\n\t */\n\t@Output('auVisibleChange') visibleChange = new EventEmitter<boolean>();\n\n\t/**\n\t * Event to be triggered when the modal is about to be closed (i.e. the close method was called).\n\t */\n\t@Output('auBeforeClose') beforeClose = new EventEmitter<ModalBeforeCloseEvent>();\n\n\t/**\n\t * Event to be triggered when the transition is completed and the modal is not visible.\n\t */\n\t@Output('auHidden') hidden = new EventEmitter<void>();\n\n\t/**\n\t * Event to be triggered when the transition is completed and the modal is visible.\n\t */\n\t@Output('auShown') shown = new EventEmitter<void>();\n\n\treadonly defaultSlots = writable(defaultConfig);\n\n\treadonly _widget = callWidgetFactory<ModalWidget<Data>>({\n\t\tfactory: createModal,\n\t\twidgetName: 'modal',\n\t\tdefaultConfig: this.defaultSlots,\n\t\tevents: {\n\t\t\tonShown: () => this.shown.emit(),\n\t\t\tonHidden: () => this.hidden.emit(),\n\t\t\tonBeforeClose: (event) => this.beforeClose.emit(event),\n\t\t\tonVisibleChange: (event) => this.visibleChange.emit(event),\n\t\t},\n\t});\n\n\t@CachedProperty\n\tget modalDirective() {\n\t\treturn mergeDirectives(this._widget.directives.modalPortalDirective, this._widget.directives.modalDirective);\n\t}\n\n\t@CachedProperty\n\tget backdropDirective() {\n\t\treturn mergeDirectives(this._widget.directives.backdropPortalDirective, this._widget.directives.backdropDirective);\n\t}\n\n\tngAfterContentChecked(): void {\n\t\tthis._widget.patchSlots({\n\t\t\tslotDefault: this.slotDefaultFromContent?.templateRef,\n\t\t\tslotFooter: this.slotFooterFromContent?.templateRef,\n\t\t\tslotHeader: this.slotHeaderFromContent?.templateRef,\n\t\t\tslotStructure: this.slotStructureFromContent?.templateRef,\n\t\t\tslotTitle: this.slotTitleFromContent?.templateRef,\n\t\t});\n\t}\n}\n","import type {PaginationContext, PaginationNumberContext, PaginationProps, PaginationWidget, SlotContent} from '@agnos-ui/angular-headless';\nimport {\n\tBaseWidgetDirective,\n\tComponentTemplate,\n\tSlotDirective,\n\tauBooleanAttribute,\n\tauNumberAttribute,\n\tcallWidgetFactory,\n\tcreatePagination,\n} from '@agnos-ui/angular-headless';\nimport type {AfterContentChecked} from '@angular/core';\nimport {\n\tChangeDetectionStrategy,\n\tComponent,\n\tContentChild,\n\tDirective,\n\tEventEmitter,\n\tInput,\n\tOutput,\n\tTemplateRef,\n\tViewChild,\n\tViewEncapsulation,\n\tinject,\n} from '@angular/core';\n\n/**\n * A directive to use to give the 'ellipsis' link template to the pagination component\n */\n@Directive({selector: 'ng-template[auPaginationEllipsis]', standalone: true})\nexport class PaginationEllipsisDirective {\n\tpublic templateRef = inject(TemplateRef<PaginationContext>);\n\tstatic ngTemplateContextGuard(_dir: PaginationEllipsisDirective, context: unknown): context is PaginationContext {\n\t\treturn true;\n\t}\n}\n\n/**\n * A directive to use to give the 'first' link template to the pagination component\n */\n@Directive({selector: 'ng-template[auPaginationFirst]', standalone: true})\nexport class PaginationFirstDirective {\n\tpublic templateRef = inject(TemplateRef<PaginationContext>);\n\tstatic ngTemplateContextGuard(_dir: PaginationFirstDirective, context: unknown): context is PaginationContext {\n\t\treturn true;\n\t}\n}\n\n/**\n * A directive to use to give the 'last' link template to the pagination component\n */\n@Directive({selector: 'ng-template[auPaginationLast]', standalone: true})\nexport class PaginationLastDirective {\n\tpublic templateRef = inject(TemplateRef<PaginationContext>);\n\tstatic ngTemplateContextGuard(_dir: PaginationLastDirective, context: unknown): context is PaginationContext {\n\t\treturn true;\n\t}\n}\n\n/**\n * A directive to use to give the 'next' link template to the pagination component\n */\n@Directive({selector: 'ng-template[auPaginationNext]', standalone: true})\nexport class PaginationNextDirective {\n\tpublic templateRef = inject(TemplateRef<PaginationContext>);\n\tstatic ngTemplateContextGuard(_dir: PaginationNextDirective, context: unknown): context is PaginationContext {\n\t\treturn true;\n\t}\n}\n\n/**\n * A directive to use to give the page 'number' template to the pagination component\n */\n@Directive({selector: 'ng-template[auPaginationNumber]', standalone: true})\nexport class PaginationNumberDirective {\n\tpublic templateRef = inject(TemplateRef<PaginationNumberContext>);\n\tstatic ngTemplateContextGuard(_dir: PaginationNumberDirective, context: unknown): context is PaginationNumberContext {\n\t\treturn true;\n\t}\n}\n\n/**\n * A directive to use to give the 'previous' link template to the pagination component\n */\n@Directive({selector: 'ng-template[auPaginationPrevious]', standalone: true})\nexport class PaginationPreviousDirective {\n\tpublic templateRef = inject(TemplateRef<PaginationContext>);\n\tstatic ngTemplateContextGuard(_dir: PaginationPreviousDirective, context: unknown): context is PaginationContext {\n\t\treturn true;\n\t}\n}\n\n/**\n * A directive to use to give the 'Pages' template for the Pages slot\n */\n@Directive({selector: 'ng-template[auPaginationPages]', standalone: true})\nexport class PaginationPagesDirective {\n\tpublic templateRef = inject(TemplateRef<PaginationContext>);\n\tstatic ngTemplateContextGuard(_dir: PaginationPagesDirective, context: unknown): context is PaginationContext {\n\t\treturn true;\n\t}\n}\n\n/**\n * Directive to provide the slot structure for the pagination widget.\n */\n@Directive({selector: 'ng-template[auPaginationStructure]', standalone: true})\nexport class PaginationStructureDirective {\n\tpublic templateRef = inject(TemplateRef<PaginationContext>);\n\tstatic ngTemplateContextGuard(dir: PaginationStructureDirective, context: unknown): context is PaginationContext {\n\t\treturn true;\n\t}\n}\n\n@Component({\n\tstandalone: true,\n\timports: [SlotDirective, PaginationPagesDirective, PaginationStructureDirective],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\ttemplate: `\n\t\t<ng-template auPaginationPages #pages let-state=\"state\" let-widget=\"widget\">\n\t\t\t@for (page of state.pages; track page; let i = $index) {\n\t\t\t\t<li\n\t\t\t\t\tclass=\"page-item\"\n\t\t\t\t\t[class.active]=\"page === state.page\"\n\t\t\t\t\t[class.disabled]=\"widget.api.isEllipsis(page) || state.disabled\"\n\t\t\t\t\t[attr.aria-current]=\"page === state.page ? 'page' : null\"\n\t\t\t\t>\n\t\t\t\t\t@if (widget.api.isEllipsis(page)) {\n\t\t\t\t\t\t<a class=\"page-link au-ellipsis\" tabindex=\"-1\" aria-disabled=\"true\">\n\t\t\t\t\t\t\t<ng-template [auSlot]=\"state.slotEllipsis\" [auSlotProps]=\"{state, widget}\"></ng-template>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t} @else {\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t[attr.aria-label]=\"state.pagesLabel[i]\"\n\t\t\t\t\t\t\tclass=\"page-link au-page\"\n\t\t\t\t\t\t\t[attr.href]=\"state.pagesHrefs[i]\"\n\t\t\t\t\t\t\t(click)=\"widget.actions.select(page, $event)\"\n\t\t\t\t\t\t\t[attr.tabindex]=\"state.disabled ? '-1' : null\"\n\t\t\t\t\t\t\t[attr.aria-disabled]=\"state.disabled ? 'true' : null\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ng-template [auSlot]=\"state.slotNumberLabel\" [auSlotProps]=\"{state, widget, displayedPage: page}\"></ng-template>\n\t\t\t\t\t\t\t@if (state.page === page) {\n\t\t\t\t\t\t\t\t<span class=\"visually-hidden\">{{ state.activeLabel }}</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t}\n\t\t\t\t</li>\n\t\t\t}\n\t\t</ng-template>\n\t\t<ng-template auPaginationStructure #structure let-state=\"state\" let-widget=\"widget\">\n\t\t\t<ul [class]=\"'au-pagination pagination' + (state.size ? ' pagination-' + state.size : '') + ' ' + state.className\">\n\t\t\t\t@if (state.boundaryLinks) {\n\t\t\t\t\t<li class=\"page-item\" [class.disabled]=\"state.previousDisabled\">\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t[attr.aria-label]=\"state.ariaFirstLabel\"\n\t\t\t\t\t\t\tclass=\"page-link au-first\"\n\t\t\t\t\t\t\t[attr.href]=\"state.pagesHrefs[0]\"\n\t\t\t\t\t\t\t(click)=\"widget.actions.first($event)\"\n\t\t\t\t\t\t\t[attr.tabindex]=\"state.previousDisabled ? '-1' : null\"\n\t\t\t\t\t\t\t[attr.aria-disabled]=\"state.previousDisabled ? 'true' : null\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<ng-template [auSlot]=\"state.slotFirst\" [auSlotProps]=\"{widget, state}\"></ng-template>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t\t@if (state.directionLinks) {\n\t\t\t\t\t<li class=\"page-item\" [class.disabled]=\"state.previousDisabled\">\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t[attr.aria-label]=\"state.ariaPreviousLabel\"\n\t\t\t\t\t\t\tclass=\"page-link au-previous\"\n\t\t\t\t\t\t\t[attr.href]=\"state.directionsHrefs.previous\"\n\t\t\t\t\t\t\t(click)=\"widget.actions.previous($event)\"\n\t\t\t\t\t\t\t[attr.tabindex]=\"state.previousDisabled ? '-1' : null\"\n\t\t\t\t\t\t\t[attr.aria-disabled]=\"state.previousDisabled ? 'true' : null\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<ng-template [auSlot]=\"state.slotPrevious\" [auSlotProps]=\"{widget, state}\"></ng-template>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t\t<ng-template [auSlot]=\"state.slotPages\" [auSlotProps]=\"{widget, state}\"></ng-template>\n\t\t\t\t@if (state.directionLinks) {\n\t\t\t\t\t<li class=\"page-item\" [class.disabled]=\"state.nextDisabled\">\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t[attr.aria-label]=\"state.ariaNextLabel\"\n\t\t\t\t\t\t\tclass=\"page-link au-next\"\n\t\t\t\t\t\t\t[attr.href]=\"state.directionsHrefs.next\"\n\t\t\t\t\t\t\t(click)=\"widget.actions.next($event)\"\n\t\t\t\t\t\t\t[attr.tabindex]=\"state.nextDisabled ? '-1' : null\"\n\t\t\t\t\t\t\t[attr.aria-disabled]=\"state.nextDisabled ? 'true' : null\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<ng-template [auSlot]=\"state.slotNext\" [auSlotProps]=\"{widget, state}\"></ng-template>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t\t@if (state.boundaryLinks) {\n\t\t\t\t\t<li class=\"page-item\" [class.disabled]=\"state.nextDisabled\">\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t[attr.aria-label]=\"state.ariaLastLabel\"\n\t\t\t\t\t\t\tclass=\"page-link au-last\"\n\t\t\t\t\t\t\t[attr.href]=\"state.pagesHrefs.at(-1)\"\n\t\t\t\t\t\t\t(click)=\"widget.actions.last($event)\"\n\t\t\t\t\t\t\t[attr.tabindex]=\"state.nextDisabled ? '-1' : null\"\n\t\t\t\t\t\t\t[attr.aria-disabled]=\"state.nextDisabled ? 'true' : null\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t<ng-template [auSlot]=\"state.slotLast\" [auSlotProps]=\"{widget, state}\"></ng-template>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t}\n\t\t\t</ul>\n\t\t\t<div aria-live=\"polite\" class=\"visually-hidden\">Current page is {{ state.page }}</div>\n\t\t</ng-template>\n\t`,\n})\nexport class PaginationDefaultSlotsComponent {\n\t@ViewChild('pages', {static: true}) pages: TemplateRef<PaginationContext>;\n\t@ViewChild('structure', {static: true}) structure: TemplateRef<PaginationContext>;\n}\n/**\n * The default slot for the pages\n */\nexport const paginationDefaultSlotPages = new ComponentTemplate(PaginationDefaultSlotsComponent, 'pages');\n/**\n * The default slot for the structure\n */\nexport const paginationDefaultSlotStructure = new ComponentTemplate(PaginationDefaultSlotsComponent, 'structure');\n\nconst defaultConfig: Partial<PaginationProps> = {\n\tslotStructure: paginationDefaultSlotStructure,\n\tslotPages: paginationDefaultSlotPages,\n};\n\n@Component({\n\tselector: '[auPagination]',\n\tstandalone: true,\n\timports: [SlotDirective],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\thost: {\n\t\t'[attr.aria-label]': 'state().ariaLabel',\n\t},\n\tencapsulation: ViewEncapsulation.None,\n\ttemplate: `<ng-template [auSlotProps]=\"{state: state(), widget}\" [auSlot]=\"state().slotStructure\"></ng-template>`,\n})\nexport class PaginationComponent extends BaseWidgetDirective<PaginationWidget> implements AfterContentChecked {\n\t/**\n\t * Provide the label for each \"Page\" page button.\n\t * This is used for accessibility purposes.\n\t * for I18n, we suggest to use the global configuration\n\t * override any configuration parameters provided for this\n\t * @param processPage - The current page number\n\t * @param pageCount - The total number of pages\n\t */\n\t@Input('auAriaPageLabel') ariaPageLabel: ((processPage: number, pageCount: number) => string) | undefined;\n\n\t/**\n\t * The label for the nav element.\n\t *\n\t * for I18n, we suggest to use the global configuration\n\t * override any configuration parameters provided for this\n\t * @defaultValue 'Page navigation'\n\t */\n\t@Input('auAriaLabel') ariaLabel: string | undefined;\n\n\t/**\n\t * The label for the \"active\" page.\n\t * for I18n, we suggest to use the global configuration\n\t * override any configuration parameters provided for this\n\t * @defaultValue '(current)'\n\t */\n\t@Input('auActiveLabel') activeLabel: string | undefined;\n\n\t/**\n\t * The label for the \"First\" page button.\n\t * for I18n, we suggest to use the global configuration\n\t * override any configuration parameters provided for this\n\t * @defaultValue 'Action link for first page'\n\t */\n\t@Input('auAriaFirstLabel') ariaFirstLabel: string | undefined;\n\n\t/**\n\t * The label for the \"Previous\" page button.\n\t * for I18n, we suggest to use the global configuration\n\t * override any configuration parameters provided for this\n\t * @defaultValue 'Action link for previous page'\n\t */\n\t@Input('auAriaPreviousLabel') ariaPreviousLabel: string | undefined;\n\n\t/**\n\t * The label for the \"Next\" page button.\n\t * for I18n, we suggest to use the global configuration\n\t * override any configuration parameters provided for this\n\t * @defaultValue 'Action link for next page'\n\t */\n\t@Input('auAriaNextLabel') ariaNextLabel: string | undefined;\n\n\t/**\n\t * The label for the \"Last\" page button.\n\t * for I18n, we suggest to use the global configuration\n\t * override any configuration parameters provided for this\n\t * @defaultValue 'Action link for last page'\n\t */\n\t@Input('auAriaLastLabel') ariaLastLabel: string | undefined;\n\n\t/**\n\t * Factory function providing the href for a \"Page\" page anchor,\n\t * based on the current page number\n\t * @param pageNumber - The index to use in the link\n\t *\n\t */\n\t@Input('auPageLink') pageLink: ((pageNumber: number) => string) | undefined;\n\n\treadonly _widget = callWidgetFactory({\n\t\tfactory: createPagination,\n\t\twidgetName: 'pagination',\n\t\tdefaultConfig,\n\t\tevents: {\n\t\t\tonPageChange: (page: number) => this.pageChange.emit(page),\n\t\t},\n\t});\n\n\t@Input('auSlotEllipsis') slotEllipsis: SlotContent<PaginationContext>;\n\t@ContentChild(PaginationEllipsisDirective, {static: false})\n\tslotEllipsisFromContent: PaginationEllipsisDirective | undefined;\n\n\t@Input('auSlotFirst') slotFirst: SlotContent<PaginationContext>;\n\t@ContentChild(PaginationFirstDirective, {static: false})\n\tslotFirstFromContent: PaginationFirstDirective | undefined;\n\n\t@Input('auSlotPrevious') slotPrevious: SlotContent<PaginationContext>;\n\t@ContentChild(PaginationPreviousDirective, {static: false})\n\tslotPreviousFromContent: PaginationPreviousDirective | undefined;\n\n\t@Input('auSlotNext') slotNext: SlotContent<PaginationContext>;\n\t@ContentChild(PaginationNextDirective, {static: false})\n\tslotNextFromContent: PaginationNextDirective | undefined;\n\n\t@Input('auSlotLast') slotLast: SlotContent<PaginationContext>;\n\t@ContentChild(PaginationLastDirective, {static: false})\n\tslotLastFromContent: PaginationLastDirective | undefined;\n\n\t@Input('auSlotPages') slotPages: SlotContent<PaginationContext>;\n\t@ContentChild(PaginationPagesDirective, {static: false})\n\tslotPagesFromContent: PaginationPagesDirective | undefined;\n\n\t@Input('auSlotNumberLabel') slotNumberLabel: SlotContent<PaginationNumberContext>;\n\t@ContentChild(PaginationNumberDirective, {static: false})\n\tslotNumberLabelFromContent: PaginationNumberDirective | undefined;\n\n\t@Input('auSlotStructure') slotStructure: SlotContent<PaginationContext>;\n\t@ContentChild(PaginationStructureDirective, {static: false})\n\tslotStructureFromContent: PaginationStructureDirective | undefined;\n\n\t/**\n\t * If `true`, pagination links will be disabled.\n\t */\n\t@Input({alias: 'auDisabled', transform: auBooleanAttribute}) disabled: boolean | undefined;\n\n\t/**\n\t * If `true`, the \"First\" and \"Last\" page links are shown.\n\t */\n\t@Input({alias: 'auBoundaryLinks', transform: auBooleanAttribute}) boundaryLinks: boolean | undefined;\n\n\t/**\n\t * If `true`, the \"Next\" and \"Previous\" page links are shown.\n\t */\n\t@Input({alias: 'auDirectionLinks', transform: auBooleanAttribute}) directionLinks: boolean | undefined;\n\n\t/**\n\t * The number of items in your paginated collection.\n\t *\n\t * Note, that this is not the number of pages. Page numbers are calculated dynamically based on\n\t * `collectionSize` and `pageSize`. Ex. if you have 100 items in your collection and displaying 20 items per page,\n\t * you'll end up with 5 pages.\n\t * Whatever the collectionSize the page number is of minimum 1.\n\t * @defaultValue 0\n\t */\n\t@Input({alias: 'auCollectionSize', transform: auNumberAttribute}) collectionSize: number | undefined;\n\n\t/**\n\t * The current page.\n\t *\n\t * Page numbers start with `1`.\n\t * @defaultValue 1\n\t */\n\t@Input({alias: 'auPage', transform: auNumberAttribute}) page: number | undefined;\n\n\t/**\n\t * The number of items per page.\n\t * @defaultValue 10\n\t */\n\t@Input({alias: 'auPageSize', transform: auNumberAttribute}) pageSize: number | undefined;\n\n\t/**\n\t * The pagination display size.\n\t *\n\t * Bootstrap currently supports small and large sizes.\n\t * @defaultValue null\n\t */\n\t@Input('auSize') size: 'sm' | 'lg' | null | undefined;\n\n\t/**\n\t * pagesFactory returns a function computing the array of pages to be displayed\n\t * as number (-1 are treated as ellipsis).\n\t * Use Page slot to customize the pages view and not this\n\t */\n\t@Input('auPagesFactory') pagesFactory: ((page: number, pageCount: number) => number[]) | undefined;\n\n\t/**\n\t * An event fired when the page is changed.\n\t *\n\t * Event payload is the number of the newly selected page.\n\t *\n\t * Page numbers start with `1`.\n\t */\n\t@Output('auPageChange') pageChange = new EventEmitter<number>();\n\n\t/**\n\t * CSS classes to be applied on the widget main container\n\t */\n\t@Input('auClassName') className: string | undefined;\n\n\tngAfterContentChecked(): void {\n\t\tthis._widget.patchSlots({\n\t\t\tslotEllipsis: this.slotEllipsisFromContent?.templateRef,\n\t\t\tslotFirst: this.slotFirstFromContent?.templateRef,\n\t\t\tslotLast: this.slotLastFromContent?.templateRef,\n\t\t\tslotNext: this.slotNextFromContent?.templateRef,\n\t\t\tslotNumberLabel: this.slotNumberLabelFromContent?.templateRef,\n\t\t\tslotPages: this.slotPagesFromContent?.templateRef,\n\t\t\tslotPrevious: this.slotPreviousFromContent?.templateRef,\n\t\t\tslotStructure: this.slotStructureFromContent?.templateRef,\n\t\t});\n\t}\n}\n","import type {AdaptSlotContentProps, RatingWidget, SlotContent, StarContext} from '@agnos-ui/angular-headless';\nimport {BaseWidgetDirective, SlotDirective, auBooleanAttribute, auNumberAttribute, callWidgetFactory, createRating} from '@agnos-ui/angular-headless';\nimport type {AfterContentChecked} from '@angular/core';\nimport {\n\tChangeDetectionStrategy,\n\tComponent,\n\tContentChild,\n\tDirective,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tOutput,\n\tTemplateRef,\n\tViewEncapsulation,\n\tforwardRef,\n\tinject,\n} from '@angular/core';\nimport type {ControlValueAccessor} from '@angular/forms';\nimport {NG_VALUE_ACCESSOR} from '@angular/forms';\n\n@Directive({selector: 'ng-template[auRatingStar]', standalone: true})\nexport class RatingStarDirective {\n\tpublic templateRef = inject(TemplateRef<AdaptSlotContentProps<StarContext>>);\n\tstatic ngTemplateContextGuard(_dir: RatingStarDirective, context: unknown): context is StarContext {\n\t\treturn true;\n\t}\n}\n\n@Component({\n\tselector: '[auRating]',\n\tstandalone: true,\n\timports: [SlotDirective],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tencapsulation: ViewEncapsulation.None,\n\thost: {\n\t\tclass: 'd-inline-flex au-rating',\n\t\t'[tabindex]': 'state().tabindex',\n\t\trole: 'slider',\n\t\t'aria-valuemin': '0',\n\t\t'[attr.aria-valuemax]': 'state().maxRating',\n\t\t'[attr.aria-valuenow]': 'state().visibleRating',\n\t\t'[attr.aria-valuetext]': 'state().ariaValueText',\n\t\t'[attr.aria-disabled]': 'state().disabled ? true : null',\n\t\t'[attr.aria-readonly]': 'state().readonly ? true : null',\n\t\t'[attr.aria-label]': 'state().ariaLabel || null',\n\t\t'(blur)': 'onTouched()',\n\t\t'(keydown)': '_widget.actions.handleKey($event)',\n\t\t'(mouseleave)': '_widget.actions.leave()',\n\t\t'[class]': 'state().className',\n\t},\n\ttemplate: `\n\t\t@for (item of state().stars; track trackByIndex(index); let index = $index) {\n\t\t\t<span class=\"visually-hidden\">({{ index < state().visibleRating ? '*' : ' ' }})</span>\n\t\t\t<span\n\t\t\t\tclass=\"au-rating-star\"\n\t\t\t\t(mouseenter)=\"_widget.actions.hover(index + 1)\"\n\t\t\t\t(click)=\"_widget.actions.click(index + 1)\"\n\t\t\t\t[style.cursor]=\"state().isInteractive ? 'pointer' : 'default'\"\n\t\t\t>\n\t\t\t\t<ng-template [auSlot]=\"state().slotStar\" [auSlotProps]=\"state().stars[index]\"></ng-template>\n\t\t\t</span>\n\t\t}\n\t`,\n\tproviders: [{provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true}],\n})\nexport class RatingComponent extends BaseWidgetDirective<RatingWidget> implements ControlValueAccessor, AfterContentChecked {\n\treadonly _widget = callWidgetFactory({\n\t\tfactory: createRating,\n\t\twidgetName: 'rating',\n\t\tevents: {\n\t\t\tonHover: (event) => this.hover.emit(event),\n\t\t\tonLeave: (event) => this.leave.emit(event),\n\t\t\tonRatingChange: (rating: number) => {\n\t\t\t\tthis.ratingChange.emit(rating);\n\t\t\t\tthis.onChange(rating);\n\t\t\t},\n\t\t},\n\t});\n\n\tonChange = (_: any) => {};\n\tonTouched = () => {};\n\n\t// TODO angular is failing when adding this host binding in decorator part\n\t@HostBinding('[attr.aria-labelledby]') get hostAriaLabelledBy() {\n\t\treturn this.state().ariaLabelledBy || null;\n\t}\n\n\t/**\n\t * Return the value for the 'aria-valuetext' attribute.\n\t */\n\t@Input('auAriaValueTextFn') ariaValueTextFn: ((rating: number, maxRating: number) => string) | undefined;\n\n\t/**\n\t * If `true`, the rating is disabled.\n\t */\n\t@Input({alias: 'auDisabled', transform: auBooleanAttribute}) disabled: boolean | undefined;\n\n\t/**\n\t * The maximum rating that can be given.\n\t */\n\t@Input({alias: 'auMaxRating', transform: auNumberAttribute}) maxRating: number | undefined;\n\n\t/**\n\t * The current rating. Could be a decimal value like `3.75`.\n\t */\n\t@Input({alias: 'auRating', transform: auNumberAttribute}) rating: number | undefined;\n\n\t/**\n\t * If `true`, the rating can't be changed.\n\t */\n\t@Input({alias: 'auReadonly', transform: auBooleanAttribute}) readonly: boolean | undefined;\n\n\t/**\n\t * Define if the rating can be reset.\n\t *\n\t * If set to true, the user can 'unset' the rating value by cliking on the current rating value.\n\t */\n\t@Input({alias: 'auResettable', transform: auBooleanAttribute}) resettable: boolean | undefined;\n\n\t@Input('auSlotStar') slotStar: SlotContent<AdaptSlotContentProps<StarContext>>;\n\t@ContentChild(RatingStarDirective, {static: false}) slotStarFromContent: RatingStarDirective | undefined;\n\n\t/**\n\t * Allows setting a custom rating tabindex.\n\t * If the component is disabled, `tabindex` will still be set to `-1`.\n\t */\n\t@Input({alias: 'auTabindex', transform: auNumberAttribute}) tabindex: number | undefined;\n\n\t/**\n\t * CSS classes to be applied on the widget main container\n\t */\n\t@Input('auClassName') className: string | undefined;\n\n\t/**\n\t * The aria label\n\t */\n\t@Input('auAriaLabel') ariaLabel: string | undefined;\n\n\t/**\n\t * The aria labelled by\n\t */\n\t@Input('auAriaLabelledBy') ariaLabelledBy: string | undefined;\n\n\t/**\n\t * An event emitted when the user is hovering over a given rating.\n\t *\n\t * Event payload is equal to the rating being hovered over.\n\t */\n\t@Output('auHover') hover = new EventEmitter<number>();\n\n\t/**\n\t * An event emitted when the user stops hovering over a given rating.\n\t *\n\t * Event payload is equal to the rating of the last item being hovered over.\n\t */\n\t@Output('auLeave') leave = new EventEmitter<number>();\n\n\t/**\n\t * An event emitted when the rating is changed.\n\t *\n\t * Event payload is equal to the newly selected rating.\n\t */\n\t@Output('auRatingChange') ratingChange = new EventEmitter<number>();\n\n\twriteValue(value: any): void {\n\t\tthis._widget.patch({rating: value});\n\t}\n\n\tregisterOnChange(fn: (value: any) => any): void {\n\t\tthis.onChange = fn;\n\t}\n\n\tregisterOnTouched(fn: () => any): void {\n\t\tthis.onTouched = fn;\n\t}\n\n\tsetDisabledState(disabled: boolean): void {\n\t\tthis._widget.patch({disabled});\n\t}\n\n\tngAfterContentChecked(): void {\n\t\tthis._widget.patchSlots({\n\t\t\tslotStar: this.slotStarFromContent?.templateRef,\n\t\t});\n\t}\n\n\ttrackByIndex(index: number) {\n\t\treturn index;\n\t}\n}\n","import type {AdaptSlotContentProps, ItemContext, SelectItemContext, SelectWidget, SlotContent} from '@agnos-ui/angular-headless';\nimport {\n\tBaseWidgetDirective,\n\tCachedProperty,\n\tSlotDirective,\n\tUseDirective,\n\tauBooleanAttribute,\n\tcallWidgetFactory,\n\tcreateSelect,\n\tmergeDirectives,\n\tuseDirectiveForHost,\n} from '@agnos-ui/angular-headless';\nimport type {AfterContentChecked} from '@angular/core';\nimport {ChangeDetectionStrategy, Component, ContentChild, Directive, EventEmitter, Input, Output, TemplateRef, inject} from '@angular/core';\nimport type {Placement} from '@floating-ui/dom';\n\n@Directive({selector: 'ng-template[auSelectBadgeLabel]', standalone: true})\nexport class SelectBadgeLabelDirective<Item> {\n\tpublic templateRef = inject(TemplateRef<AdaptSlotContentProps<SelectItemContext<Item>>>);\n\tstatic ngTemplateContextGuard<Item>(_dir: SelectBadgeLabelDirective<Item>, context: unknown): context is SelectItemContext<Item> {\n\t\treturn true;\n\t}\n}\n\n@Directive({selector: 'ng-template[auSelectItem]', standalone: true})\nexport class SelectItemDirective<Item> {\n\tpublic templateRef = inject(TemplateRef<AdaptSlotContentProps<SelectItemContext<Item>>>);\n\tstatic ngTemplateContextGuard<Item>(_dir: SelectItemDirective<Item>, context: unknown): context is SelectItemContext<Item> {\n\t\treturn true;\n\t}\n}\n\n@Component({\n\tstandalone: true,\n\timports: [UseDirective, SlotDirective],\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\tselector: '[auSelect]',\n\thost: {\n\t\t'[class]': '\"au-select dropdown border border-1 p-1 mb-3 d-block\" + state().className',\n\t},\n\ttemplate: `\n\t\t@if (state(); as state) {\n\t\t\t<div\n\t\t\t\t[auUse]=\"controlContainerDirective\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\tclass=\"d-flex align-items-center flex-wrap\"\n\t\t\t\t[attr.aria-controls]=\"state.id + '-menu'\"\n\t\t\t\taria-haspopup=\"listbox\"\n\t\t\t\t[attr.aria-expanded]=\"state.open\"\n\t\t\t>\n\t\t\t\t@if (state.selectedContexts; as selectedContexts) {\n\t\t\t\t\t@for (itemContext of selectedContexts; track itemCtxTrackBy($index, itemContext)) {\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t\t\tclass=\"au-select-badge me-1\"\n\t\t\t\t\t\t\t[class]=\"state.badgeClassName\"\n\t\t\t\t\t\t\t(keydown)=\"_widget.actions.onBadgeKeydown($event, itemContext.item)\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ng-template [auSlot]=\"state.slotBadgeLabel\" [auSlotProps]=\"{state, widget, itemContext}\"></ng-template>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t<input\n\t\t\t\t\tattr.id=\"{{ state.id }}\"\n\t\t\t\t\tattr.aria-label=\"{{ state.ariaLabel }}\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tclass=\"au-select-input flex-grow-1 border-0\"\n\t\t\t\t\t[value]=\"state.filterText\"\n\t\t\t\t\taria-autocomplete=\"list\"\n\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\tautoCapitalize=\"none\"\n\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t(input)=\"_widget.actions.onInput($event)\"\n\t\t\t\t\t(keydown)=\"_widget.actions.onInputKeydown($event)\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t@if (state.open && state.visibleItems.length) {\n\t\t\t\t<ul\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t[id]=\"state.id + '-menu'\"\n\t\t\t\t\t[auUse]=\"menuDirective\"\n\t\t\t\t\t[class]=\"'dropdown-menu show ' + (menuClassName || '')\"\n\t\t\t\t\t[attr.data-popper-placement]=\"state.placement\"\n\t\t\t\t\t(mousedown)=\"$event.preventDefault()\"\n\t\t\t\t>\n\t\t\t\t\t@for (itemContext of state.visibleItems; track itemCtxTrackBy($index, itemContext)) {\n\t\t\t\t\t\t<li\n\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t[attr.aria-selected]=\"itemContext.selected\"\n\t\t\t\t\t\t\tclass=\"au-select-item dropdown-item position-relative \"\n\t\t\t\t\t\t\t[class.text-bg-primary]=\"itemContext === state.highlighted\"\n\t\t\t\t\t\t\t[class.selected]=\"itemContext.selected\"\n\t\t\t\t\t\t\t(click)=\"widget.api.toggleItem(itemContext.item)\"\n\t\t\t\t\t\t\t[style.cursor]=\"'pointer'\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ng-template [auSlot]=\"state.slotItem\" [auSlotProps]=\"{state, widget, itemContext}\"></ng-template>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t}\n\t\t\t\t</ul>\n\t\t\t}\n\t\t}\n\t`,\n})\nexport class SelectComponent<Item> extends BaseWidgetDirective<SelectWidget<Item>> implements AfterContentChecked {\n\t/**\n\t * aria-label used for the input inside the select\n\t */\n\t@Input('auAriaLabel') ariaLabel: string | undefined;\n\n\t/**\n\t * id used for the input inside the select\n\t */\n\t@Input('auId') id: string | undefined;\n\n\t/**\n\t * List of available items for the dropdown\n\t */\n\t@Input('auItems') items: Item[] | undefined;\n\n\t/**\n\t * List of allowed placements for the dropdown.\n\t * This refers to the [allowedPlacements from floating UI](https://floating-ui.com/docs/autoPlacement#allowedplacements), given the different [Placement possibilities](https://floating-ui.com/docs/computePosition#placement).\n\t */\n\t@Input('auAllowedPlacements') allowedPlacements: Placement[] | undefined;\n\n\t/**\n\t * true if the select is open\n\t */\n\t@Input({alias: 'auOpen', transform: auBooleanAttribute}) open: boolean | undefined;\n\n\t/**\n\t * Filtered text to be display in the filter input\n\t */\n\t@Input('auFilterText') filterText: string | undefined;\n\n\t/**\n\t * CSS classes to be applied on the widget main container\n\t */\n\t@Input('auClassName') className: string | undefined;\n\n\t/**\n\t * true if the select is disabled\n\t */\n\t@Input({alias: 'auDisabled', transform: auBooleanAttribute}) disabled: boolean | undefined;\n\n\t/**\n\t * List of selected item ids\n\t */\n\t@Input('auSelected') selected: Item[] | undefined;\n\n\t/**\n\t * true if a loading process is being done\n\t */\n\t@Input({alias: 'auLoading', transform: auBooleanAttribute}) loading: boolean | undefined;\n\n\t/**\n\t * Custom function to get the id of an item\n\t * By default, the item is returned\n\t */\n\t@Input('auItemIdFn') itemIdFn: ((item: Item) => string) | undefined;\n\n\t/**\n\t * Class to be added on the dropdown menu container\n\t */\n\t@Input('auMenuClassName') menuClassName: string | undefined;\n\n\t@Input('auSlotBadgeLabel') slotBadgeLabel: SlotContent<SelectItemContext<Item>>;\n\t@ContentChild(SelectBadgeLabelDirective, {static: false}) slotSelectBadgeLabelFromContent: SelectBadgeLabelDirective<Item> | undefined;\n\n\t@Input('auSlotItem') slotItem: SlotContent<SelectItemContext<Item>>;\n\t@ContentChild(SelectItemDirective, {static: false}) slotSelectItemFromContent: SelectItemDirective<Item> | undefined;\n\n\t/**\n\t * Callback called when the text filter change\n\t */\n\t@Output('auFilterTextChange') filterTextChange = new EventEmitter<string>();\n\n\t/**\n\t * Callback called when the selection change\n\t */\n\t@Output('auSelectedChange') selectedChange = new EventEmitter<Item[]>();\n\n\t/**\n\t * Callback called dropdown open state change\n\t */\n\t@Output('auOpenChange') openChange = new EventEmitter<boolean>();\n\n\t/**\n\t * Class to be added on menu items\n\t */\n\t@Input('auMenuItemClassName') menuItemClassName: string | undefined;\n\n\t/**\n\t * Class to be added on selected items (displayed in the input zone)\n\t */\n\t@Input('auBadgeClassName') badgeClassName: string | undefined;\n\n\t/**\n\t * Retrieves navigable elements within an HTML element containing badges and the input.\n\t */\n\t@Input('auNavSelector') navSelector: ((node: HTMLElement) => NodeListOf<HTMLSpanElement | HTMLInputElement>) | undefined;\n\n\treadonly _widget = callWidgetFactory<SelectWidget<Item>>({\n\t\tfactory: createSelect,\n\t\twidgetName: 'select',\n\t\tevents: {\n\t\t\tonOpenChange: (event) => this.openChange.emit(event),\n\t\t\tonSelectedChange: (event) => this.selectedChange.emit(event),\n\t\t\tonFilterTextChange: (event) => this.filterTextChange.emit(event),\n\t\t},\n\t\tafterInit: () => {\n\t\t\tuseDirectiveForHost(this._widget.directives.referenceDirective);\n\t\t},\n\t});\n\n\t@CachedProperty\n\tget menuDirective() {\n\t\treturn mergeDirectives(this._widget.directives.hasFocusDirective, this._widget.directives.floatingDirective);\n\t}\n\n\t@CachedProperty\n\tget controlContainerDirective() {\n\t\treturn mergeDirectives(this._widget.directives.hasFocusDirective, this._widget.directives.inputContainerDirective);\n\t}\n\n\titemCtxTrackBy(_: number, itemContext: ItemContext<Item>) {\n\t\treturn itemContext.id;\n\t}\n\n\tngAfterContentChecked(): void {\n\t\tthis._widget.patchSlots({\n\t\t\tslotBadgeLabel: this.slotSelectBadgeLabelFromContent?.templateRef,\n\t\t\tslotItem: this.slotSelectItemFromContent?.templateRef,\n\t\t});\n\t}\n}\n","import type {AlertContext, AlertProps, AlertWidget, SlotContent, TransitionFn} from '@agnos-ui/angular-headless';\nimport {\n\tBaseWidgetDirective,\n\tComponentTemplate,\n\tSlotDefaultDirective,\n\tSlotDirective,\n\tUseDirective,\n\tauBooleanAttribute,\n\tcallWidgetFactory,\n\tcreateAlert,\n} from '@agnos-ui/angular-headless';\nimport {type WritableSignal, writable} from '@amadeus-it-group/tansu';\nimport type {AfterContentChecked} from '@angular/core';\nimport {\n\tChangeDetectionStrategy,\n\tComponent,\n\tContentChild,\n\tDirective,\n\tEventEmitter,\n\tInput,\n\tOutput,\n\tTemplateRef,\n\tViewChild,\n\tinject,\n} from '@angular/core';\n\n@Directive({selector: 'ng-template[auAlertBody]', standalone: true})\nexport class AlertBodyDirective {\n\tpublic templateRef = inject(TemplateRef<AlertContext>);\n\tstatic ngTemplateContextGuard(dir: AlertBodyDirective, context: unknown): context is AlertContext {\n\t\treturn true;\n\t}\n}\n\n@Directive({selector: 'ng-template[auAlertStructure]', standalone: true})\nexport class AlertStructureDirective {\n\tpublic templateRef = inject(TemplateRef<AlertContext>);\n\tstatic ngTemplateContextGuard(dir: AlertStructureDirective, context: unknown): context is AlertContext {\n\t\treturn true;\n\t}\n}\n@Component({\n\tstandalone: true,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\timports: [SlotDirective, AlertStructureDirective],\n\ttemplate: ` <ng-template auAlertStructure #structure let-state=\"state\" let-widget=\"widget\">\n\t\t<div class=\"alert-body\">\n\t\t\t<ng-template [auSlot]=\"state.slotDefault\" [auSlotProps]=\"{state, widget}\"></ng-template>\n\t\t</div>\n\t\t@if (state.dismissible) {\n\t\t\t<button type=\"button\" class=\"btn-close\" (click)=\"widget.api.close()\" [attr.aria-label]=\"state.ariaCloseButtonLabel\"></button>\n\t\t}\n\t</ng-template>`,\n})\nexport class AlertDefaultSlotsComponent {\n\t@ViewChild('structure', {static: true}) structure: TemplateRef<AlertContext>;\n}\n\nexport const alertDefaultSlotStructure = new ComponentTemplate(AlertDefaultSlotsComponent, 'structure');\n\nexport type PartialAlertProps = Partial<AlertProps>;\nconst defaultConfig: PartialAlertProps = {\n\tslotStructure: alertDefaultSlotStructure,\n};\n\n@Component({\n\tselector: '[auAlert]',\n\tstandalone: true,\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\timports: [SlotDirective, UseDirective, SlotDefaultDirective],\n\ttemplate: ` <ng-template [auSlotDefault]=\"defaultSlots\">\n\t\t\t<ng-content></ng-content>\n\t\t</ng-template>\n\n\t\t@if (!state().hidden) {\n\t\t\t<div\n\t\t\t\t[auUse]=\"widget.directives.transitionDirective\"\n\t\t\t\tclass=\"au-alert alert alert-{{ state().type }} {{ state().className }} {{ state().dismissible ? 'alert-dismissible' : '' }}\"\n\t\t\t\trole=\"alert\"\n\t\t\t>\n\t\t\t\t<ng-template [auSlot]=\"state().slotStructure\" [auSlotProps]=\"{state: state(), widget}\"></ng-template>\n\t\t\t</div>\n\t\t}`,\n})\nexport class AlertComponent extends BaseWidgetDirective<AlertWidget> implements AfterContentChecked {\n\t/**\n\t * Type of the alert.\n\t * There are the following types: 'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.\n\t */\n\t@Input('auType')\n\ttype: string | undefined;\n\n\t/**\n\t * If `true`, alert can be dismissed by the user.\n\t * The close button (×) will be displayed and you can be notified of the event with the (close) output.\n\t */\n\t@Input({alias: 'auDismissible', transform: auBooleanAttribute})\n\tdismissible: boolean | undefined;\n\n\t/**\n\t * The transition function will be executed when the alert is displayed or hidden.\n\t *\n\t * Depending on the value of CommonAlertProps.animationOnInit, the animation can be optionally skipped during the showing process.\n\t */\n\t@Input('auTransition')\n\ttransition: TransitionFn | undefined;\n\n\t/**\n\t * If `true` the alert is visible to the user\n\t */\n\t@Input({alias: 'auVisible', transform: auBooleanAttribute})\n\tvisible: boolean | undefined;\n\n\t/**\n\t * If `true`, alert opening will be animated.\n\t *\n\t * Animation is triggered  when the `.open()` function is called\n\t * or the visible prop is changed\n\t */\n\t@Input({alias: 'auAnimationOnInit', transform: auBooleanAttribute})\n\tanimationOnInit: boolean | undefined;\n\n\t/**\n\t * If `true`, alert closing will be animated.\n\t *\n\t * Animation is triggered  when clicked on the close button (×),\n\t * via the `.close()` function or the visible prop is changed\n\t */\n\t@Input({alias: 'auAnimation', transform: auBooleanAttribute})\n\tanimation: boolean | undefined;\n\n\t/**\n\t * Accessibility close button label\n\t */\n\t@Input('auAriaCloseButtonLabel') ariaCloseButtonLabel: string | undefined;\n\n\t@Input('auSlotDefault') slotDefault: SlotContent<AlertContext>;\n\t@ContentChild(AlertBodyDirective, {static: false})\n\tslotDefaultFromContent: AlertBodyDirective | null;\n\n\t@Input('auSlotStructure') slotStructure: SlotContent<AlertContext>;\n\t@ContentChild(AlertStructureDirective, {static: false}) slotStructureFromContent: AlertStructureDirective | undefined;\n\n\t/**\n\t * Callback called when the alert visibility changed.\n\t */\n\t@Output('auVisibleChange') visibleChange = new EventEmitter<boolean>();\n\n\t/**\n\t * Callback called when the alert is hidden.\n\t */\n\t@Output('auHidden') hidden = new EventEmitter<void>();\n\n\t/**\n\t * Callback called when the alert is shown.\n\t */\n\t@Output('auShown') shown = new EventEmitter<void>();\n\n\treadonly defaultSlots: WritableSignal<PartialAlertProps> = writable(defaultConfig);\n\t/**\n\t * CSS classes to be applied on the widget main container\n\t */\n\t@Input('auClassName') className: string | undefined;\n\n\treadonly _widget = callWidgetFactory({\n\t\tfactory: createAlert,\n\t\twidgetName: 'alert',\n\t\tdefaultConfig: this.defaultSlots,\n\t\tevents: {\n\t\t\tonVisibleChange: (event) => this.visibleChange.emit(event),\n\t\t\tonShown: () => this.shown.emit(),\n\t\t\tonHidden: () => this.hidden.emit(),\n\t\t},\n\t});\n\n\tngAfterContentChecked(): void {\n\t\tthis._widget.patchSlots({\n\t\t\tslotDefault: this.slotDefaultFromContent?.templateRef,\n\t\t\tslotStructure: this.slotStructureFromContent?.templateRef,\n\t\t});\n\t}\n}\n","import type {\n\tAccordionItemContext,\n\tAccordionItemProps,\n\tAccordionItemWidget,\n\tAccordionWidget,\n\tAdaptSlotContentProps,\n\tSlotContent,\n\tTransitionFn,\n} from '@agnos-ui/angular-headless';\nimport {\n\tBaseWidgetDirective,\n\tC