@agnos-ui/angular-bootstrap 0.7.0 → 0.7.1

package/components/slider/slider.component.d.ts

@@ -100,28 +100,35 @@ export declare class SliderComponent extends BaseWidgetDirective<SliderWidget> {
     readonly showMinMaxLabels: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
     /**
      * Return the value for the 'aria-label' attribute for the handle
-     * @param value - value of the handle
      * @param sortedIndex - index of the handle in the sorted list
-     * @param index - index of the handle in the original list
      *
      * @defaultValue
      * ```ts
-     * (value: number) => '' + value
+     * () => 'Value'
+     * ```
+     */
+    readonly ariaLabel: import("@angular/core").InputSignal<((sortedIndex: number) => string) | undefined>;
+    /**
+     * Return the value for the 'aria-labelledBy' attribute for the handle
+     * @param sortedIndex - index of the handle in the sorted list
+     *
+     * @defaultValue
+     * ```ts
+     * () => ''
      * ```
      */
-    readonly ariaLabelHandle: import("@angular/core").InputSignal<((value: number, sortedIndex: number, index: number) => string) | undefined>;
+    readonly ariaLabelledBy: import("@angular/core").InputSignal<((sortedIndex: number) => string) | undefined>;
     /**
      * Return the value for the 'aria-valuetext' attribute for the handle
      * @param value - value of the handle
      * @param sortedIndex - index of the handle in the sorted list
-     * @param index - index of the handle in the original list
      *
      * @defaultValue
      * ```ts
-     * (value: number) => '' + value
+     * (value: number) => ''
      * ```
      */
-    readonly ariaValueText: import("@angular/core").InputSignal<((value: number, sortedIndex: number, index: number) => string) | undefined>;
+    readonly ariaValueText: import("@angular/core").InputSignal<((value: number, sortedIndex: number) => string) | undefined>;
     /**
      * If `true` slider value cannot be changed but the slider is still focusable
      *
@@ -183,5 +190,5 @@ export declare class SliderComponent extends BaseWidgetDirective<SliderWidget> {
     setDisabledState(isDisabled: boolean): void;
     handleBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SliderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SliderComponent, "[auSlider]", never, { "className": { "alias": "auClassName"; "required": false; "isSignal": true; }; "min": { "alias": "auMin"; "required": false; "isSignal": true; }; "max": { "alias": "auMax"; "required": false; "isSignal": true; }; "stepSize": { "alias": "auStepSize"; "required": false; "isSignal": true; }; "values": { "alias": "auValues"; "required": false; "isSignal": true; }; "rtl": { "alias": "auRtl"; "required": false; "isSignal": true; }; "showValueLabels": { "alias": "auShowValueLabels"; "required": false; "isSignal": true; }; "showMinMaxLabels": { "alias": "auShowMinMaxLabels"; "required": false; "isSignal": true; }; "ariaLabelHandle": { "alias": "auAriaLabelHandle"; "required": false; "isSignal": true; }; "ariaValueText": { "alias": "auAriaValueText"; "required": false; "isSignal": true; }; "readonly": { "alias": "auReadonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "auDisabled"; "required": false; "isSignal": true; }; "vertical": { "alias": "auVertical"; "required": false; "isSignal": true; }; "label": { "alias": "auLabel"; "required": false; "isSignal": true; }; "structure": { "alias": "auStructure"; "required": false; "isSignal": true; }; "handle": { "alias": "auHandle"; "required": false; "isSignal": true; }; }, { "valuesChange": "auValuesChange"; }, ["slotLabelFromContent", "slotStructureFromContent", "slotHandleFromContent"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SliderComponent, "[auSlider]", never, { "className": { "alias": "auClassName"; "required": false; "isSignal": true; }; "min": { "alias": "auMin"; "required": false; "isSignal": true; }; "max": { "alias": "auMax"; "required": false; "isSignal": true; }; "stepSize": { "alias": "auStepSize"; "required": false; "isSignal": true; }; "values": { "alias": "auValues"; "required": false; "isSignal": true; }; "rtl": { "alias": "auRtl"; "required": false; "isSignal": true; }; "showValueLabels": { "alias": "auShowValueLabels"; "required": false; "isSignal": true; }; "showMinMaxLabels": { "alias": "auShowMinMaxLabels"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "auAriaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "auAriaLabelledBy"; "required": false; "isSignal": true; }; "ariaValueText": { "alias": "auAriaValueText"; "required": false; "isSignal": true; }; "readonly": { "alias": "auReadonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "auDisabled"; "required": false; "isSignal": true; }; "vertical": { "alias": "auVertical"; "required": false; "isSignal": true; }; "label": { "alias": "auLabel"; "required": false; "isSignal": true; }; "structure": { "alias": "auStructure"; "required": false; "isSignal": true; }; "handle": { "alias": "auHandle"; "required": false; "isSignal": true; }; }, { "valuesChange": "auValuesChange"; }, ["slotLabelFromContent", "slotStructureFromContent", "slotHandleFromContent"], never, true, never>;
 }

package/components/slider/slider.gen.d.ts

@@ -165,28 +165,35 @@ export interface SliderState {
 export interface SliderProps {
     /**
      * Return the value for the 'aria-label' attribute for the handle
-     * @param value - value of the handle
      * @param sortedIndex - index of the handle in the sorted list
-     * @param index - index of the handle in the original list
      *
      * @defaultValue
      * ```ts
-     * (value: number) => '' + value
+     * () => 'Value'
+     * ```
+     */
+    ariaLabel: (sortedIndex: number) => string;
+    /**
+     * Return the value for the 'aria-labelledBy' attribute for the handle
+     * @param sortedIndex - index of the handle in the sorted list
+     *
+     * @defaultValue
+     * ```ts
+     * () => ''
      * ```
      */
-    ariaLabelHandle: (value: number, sortedIndex: number, index: number) => string;
+    ariaLabelledBy: (sortedIndex: number) => string;
     /**
      * Return the value for the 'aria-valuetext' attribute for the handle
      * @param value - value of the handle
      * @param sortedIndex - index of the handle in the sorted list
-     * @param index - index of the handle in the original list
      *
      * @defaultValue
      * ```ts
-     * (value: number) => '' + value
+     * (value: number) => ''
      * ```
      */
-    ariaValueText: (value: number, sortedIndex: number, index: number) => string;
+    ariaValueText: (value: number, sortedIndex: number) => string;
     /**
      * An event emitted when slider values are changed
      *
@@ -354,11 +361,15 @@ export interface SliderHandle {
     /**
      * ariaLabel of the handle
      */
-    ariaLabel: string;
+    ariaLabel: string | undefined;
     /**
      * ariaValueText of the handle
      */
-    ariaValueText: string;
+    ariaValueText: string | undefined;
+    /**
+     * aria-labelledBy of the handle
+     */
+    ariaLabelledBy: string | undefined;
 }
 /**
  * Interface representing various directives used in the slider component.

package/fesm2022/agnos-ui-angular-bootstrap.mjs

@@ -1,7 +1,7 @@
 import { widgetsConfigFactory, SlotDirective, UseDirective, ComponentTemplate, BaseWidgetDirective, auBooleanAttribute, UseMultiDirective, auNumberAttribute, useDirectiveForHost, callWidgetFactory as callWidgetFactory$1 } from '@agnos-ui/angular-headless';
 export * from '@agnos-ui/angular-headless';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, TemplateRef, Directive, viewChild, Component, ChangeDetectionStrategy, input, contentChild, output, ViewEncapsulation, forwardRef, NgModule, Injector, ApplicationRef, createComponent, EnvironmentInjector, OutputEmitterRef, Injectable } from '@angular/core';
+import { InjectionToken, inject, TemplateRef, Directive, viewChild, Component, ChangeDetectionStrategy, input, contentChild, output, ViewEncapsulation, forwardRef, signal, afterRenderEffect, NgModule, Injector, ApplicationRef, createComponent, EnvironmentInjector, OutputEmitterRef, Injectable } from '@angular/core';
 import { getModalDefaultConfig, createModal, modalOutsideClick, modalCloseButtonClick } from '@agnos-ui/core-bootstrap/components/modal';
 import { getPaginationDefaultConfig, createPagination } from '@agnos-ui/core-bootstrap/components/pagination';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -2816,13 +2816,15 @@ const _c0$3 = ["handle"];
 const _c1$3 = a0 => ({ item: a0 });
 const _c2$3 = (a0, a1) => [a0, a1];
 function SliderDefaultHandleSlotComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 2);
+    i0.ɵɵlistener("keydown", function SliderDefaultHandleSlotComponent_ng_template_0_Template_button_keydown_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onKeyDown($event)); });
     i0.ɵɵtext(1, "\u00A0");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const directives_r1 = ctx.directives;
-    const item_r2 = ctx.item;
-    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(3, _c2$3, directives_r1.handleDirective, i0.ɵɵpureFunction1(1, _c1$3, item_r2)));
+    const directives_r3 = ctx.directives;
+    const item_r4 = ctx.item;
+    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(3, _c2$3, directives_r3.handleDirective, i0.ɵɵpureFunction1(1, _c1$3, item_r4)));
 } }
 const _c3$3 = ["structure"];
 const _forTrack0 = ($index, $item) => $item.id;
@@ -2991,13 +2993,44 @@ class SliderHandleDirective {
 class SliderDefaultHandleSlotComponent {
     constructor() {
         this.handle = viewChild.required('handle');
+        /**
+         * When the element moves up the DOM Angluar removes the focus
+         * To avoid this we need to manually focus the element by calling the HTMLElement.focus
+         * after the change, afterRenderEffect is executed after each render of the component
+         * and when the signal inside is changed. On each key stroke we set the `refocus` signal
+         * to the element that needs to be focused and we put the `equal` function to always return
+         * `false` in order to trigger the change even when the element is the same
+         */
+        this.refocus = signal(undefined, { equal: () => false });
+        afterRenderEffect(() => {
+            this.refocus()?.focus();
+        });
+    }
+    /**
+     * Key handler that sets the refocus element only on the key strokes that move
+     * the element up the DOM
+     * @param event object containting key stroke and the target element
+     */
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowLeft':
+            case 'Home':
+            case 'ArrowUp':
+            case 'ArrowRight':
+            case 'End':
+                this.refocus.set(event.target);
+                break;
+            default:
+                break;
+        }
     }
     static { this.ɵfac = function SliderDefaultHandleSlotComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SliderDefaultHandleSlotComponent)(); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SliderDefaultHandleSlotComponent, selectors: [["ng-component"]], viewQuery: function SliderDefaultHandleSlotComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuerySignal(ctx.handle, _c0$3, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, decls: 2, vars: 0, consts: [["handle", ""], ["auSliderHandle", ""], [3, "auUse"]], template: function SliderDefaultHandleSlotComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 2, vars: 0, consts: [["handle", ""], ["auSliderHandle", ""], [3, "keydown", "auUse"]], template: function SliderDefaultHandleSlotComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, SliderDefaultHandleSlotComponent_ng_template_0_Template, 2, 6, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
         } }, dependencies: [UseDirective, SliderHandleDirective], encapsulation: 2, changeDetection: 0 }); }
 }
@@ -3008,12 +3041,12 @@ class SliderDefaultHandleSlotComponent {
                 imports: [UseDirective, SliderHandleDirective],
                 template: `
 		<ng-template auSliderHandle #handle let-state="state" let-directives="directives" let-item="item">
-			<button [auUse]="[directives.handleDirective, {item}]">&nbsp;</button>
+			<button [auUse]="[directives.handleDirective, {item}]" (keydown)="onKeyDown($event)">&nbsp;</button>
 		</ng-template>
 	`,
             }]
-    }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultHandleSlotComponent, { className: "SliderDefaultHandleSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 63 }); })();
+    }], () => [], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultHandleSlotComponent, { className: "SliderDefaultHandleSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 65 }); })();
 /**
  * A constant representing the default slot handle for the slider component.
  */
@@ -3092,7 +3125,7 @@ class SliderDefaultStructureSlotComponent {
 	`,
             }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultStructureSlotComponent, { className: "SliderDefaultStructureSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 124 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultStructureSlotComponent, { className: "SliderDefaultStructureSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 162 }); })();
 /**
  * Represents the default slot structure for the slider component.
  */
@@ -3177,25 +3210,32 @@ class SliderComponent extends BaseWidgetDirective {
         this.showMinMaxLabels = input(undefined, { alias: 'auShowMinMaxLabels', transform: auBooleanAttribute });
         /**
          * Return the value for the 'aria-label' attribute for the handle
-         * @param value - value of the handle
          * @param sortedIndex - index of the handle in the sorted list
-         * @param index - index of the handle in the original list
          *
          * @defaultValue
          * ```ts
-         * (value: number) => '' + value
+         * () => 'Value'
          * ```
          */
-        this.ariaLabelHandle = input(undefined, { alias: 'auAriaLabelHandle' });
+        this.ariaLabel = input(undefined, { alias: 'auAriaLabel' });
+        /**
+         * Return the value for the 'aria-labelledBy' attribute for the handle
+         * @param sortedIndex - index of the handle in the sorted list
+         *
+         * @defaultValue
+         * ```ts
+         * () => ''
+         * ```
+         */
+        this.ariaLabelledBy = input(undefined, { alias: 'auAriaLabelledBy' });
         /**
          * Return the value for the 'aria-valuetext' attribute for the handle
          * @param value - value of the handle
          * @param sortedIndex - index of the handle in the sorted list
-         * @param index - index of the handle in the original list
          *
          * @defaultValue
          * ```ts
-         * (value: number) => '' + value
+         * (value: number) => ''
          * ```
          */
         this.ariaValueText = input(undefined, { alias: 'auAriaValueText' });
@@ -3289,7 +3329,7 @@ class SliderComponent extends BaseWidgetDirective {
             i0.ɵɵqueryAdvance(3);
         } }, hostBindings: function SliderComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("blur", function SliderComponent_blur_HostBindingHandler() { return ctx.handleBlur(); });
-        } }, inputs: { className: [1, "auClassName", "className"], min: [1, "auMin", "min"], max: [1, "auMax", "max"], stepSize: [1, "auStepSize", "stepSize"], values: [1, "auValues", "values"], rtl: [1, "auRtl", "rtl"], showValueLabels: [1, "auShowValueLabels", "showValueLabels"], showMinMaxLabels: [1, "auShowMinMaxLabels", "showMinMaxLabels"], ariaLabelHandle: [1, "auAriaLabelHandle", "ariaLabelHandle"], ariaValueText: [1, "auAriaValueText", "ariaValueText"], readonly: [1, "auReadonly", "readonly"], disabled: [1, "auDisabled", "disabled"], vertical: [1, "auVertical", "vertical"], label: [1, "auLabel", "label"], structure: [1, "auStructure", "structure"], handle: [1, "auHandle", "handle"] }, outputs: { valuesChange: "auValuesChange" }, features: [i0.ɵɵProvidersFeature([{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true }]), i0.ɵɵInheritDefinitionFeature], attrs: _c8$1, decls: 1, vars: 6, consts: [[3, "auSlot", "auSlotProps"]], template: function SliderComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { className: [1, "auClassName", "className"], min: [1, "auMin", "min"], max: [1, "auMax", "max"], stepSize: [1, "auStepSize", "stepSize"], values: [1, "auValues", "values"], rtl: [1, "auRtl", "rtl"], showValueLabels: [1, "auShowValueLabels", "showValueLabels"], showMinMaxLabels: [1, "auShowMinMaxLabels", "showMinMaxLabels"], ariaLabel: [1, "auAriaLabel", "ariaLabel"], ariaLabelledBy: [1, "auAriaLabelledBy", "ariaLabelledBy"], ariaValueText: [1, "auAriaValueText", "ariaValueText"], readonly: [1, "auReadonly", "readonly"], disabled: [1, "auDisabled", "disabled"], vertical: [1, "auVertical", "vertical"], label: [1, "auLabel", "label"], structure: [1, "auStructure", "structure"], handle: [1, "auHandle", "handle"] }, outputs: { valuesChange: "auValuesChange" }, features: [i0.ɵɵProvidersFeature([{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SliderComponent), multi: true }]), i0.ɵɵInheritDefinitionFeature], attrs: _c8$1, decls: 1, vars: 6, consts: [[3, "auSlot", "auSlotProps"]], template: function SliderComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵtemplate(0, SliderComponent_ng_template_0_Template, 0, 0, "ng-template", 0);
         } if (rf & 2) {
             i0.ɵɵproperty("auSlot", ctx.state.structure())("auSlotProps", i0.ɵɵpureFunction3(2, _c9, ctx.state, ctx.api, ctx.directives));
@@ -3309,7 +3349,7 @@ class SliderComponent extends BaseWidgetDirective {
                 template: ` <ng-template [auSlot]="state.structure()" [auSlotProps]="{state, api, directives}" /> `,
             }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderComponent, { className: "SliderComponent", filePath: "components/slider/slider.component.ts", lineNumber: 149 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderComponent, { className: "SliderComponent", filePath: "components/slider/slider.component.ts", lineNumber: 187 }); })();
 
 /**
  * Retrieve a shallow copy of the default Progressbar config
@@ -3876,7 +3916,7 @@ class ToastComponent extends BaseWidgetDirective {
             i0.ɵɵviewQuerySignal(ctx.slotChildren, _c2$1, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, inputs: { dismissible: [1, "auDismissible", "dismissible"], transition: [1, "auTransition", "transition"], visible: [1, "auVisible", "visible"], animatedOnInit: [1, "auAnimatedOnInit", "animatedOnInit"], animated: [1, "auAnimated", "animated"], autoHide: [1, "auAutoHide", "autoHide"], delay: [1, "auDelay", "delay"], ariaCloseButtonLabel: [1, "auAriaCloseButtonLabel", "ariaCloseButtonLabel"], children: [1, "auChildren", "children"], structure: [1, "auStructure", "structure"], header: [1, "auHeader", "header"], className: [1, "auClassName", "className"] }, outputs: { visibleChange: "auVisibleChange", hidden: "auHidden", shown: "auShown" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c3$1, ngContentSelectors: _c4$1, decls: 3, vars: 1, consts: [["content", ""], [1, "toast", 3, "d-flex", "toast-dismissible", "auUseMulti"], [1, "toast", 3, "auUseMulti"], [3, "auSlot", "auSlotProps"]], template: function ToastComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { dismissible: [1, "auDismissible", "dismissible"], transition: [1, "auTransition", "transition"], visible: [1, "auVisible", "visible"], animatedOnInit: [1, "auAnimatedOnInit", "animatedOnInit"], animated: [1, "auAnimated", "animated"], autoHide: [1, "auAutoHide", "autoHide"], delay: [1, "auDelay", "delay"], ariaCloseButtonLabel: [1, "auAriaCloseButtonLabel", "ariaCloseButtonLabel"], children: [1, "auChildren", "children"], structure: [1, "auStructure", "structure"], header: [1, "auHeader", "header"], className: [1, "auClassName", "className"] }, outputs: { visibleChange: "auVisibleChange", hidden: "auHidden", shown: "auShown" }, features: [i0.ɵɵInheritDefinitionFeature], attrs: _c3$1, ngContentSelectors: _c4$1, decls: 3, vars: 1, consts: [["content", ""], [3, "d-flex", "toast-dismissible", "auUseMulti"], [3, "auUseMulti"], [3, "auSlot", "auSlotProps"]], template: function ToastComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
             i0.ɵɵtemplate(0, ToastComponent_ng_template_0_Template, 1, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(2, ToastComponent_Conditional_2_Template, 2, 15, "div", 1);
         } if (rf & 2) {
@@ -3895,7 +3935,6 @@ class ToastComponent extends BaseWidgetDirective {
 		</ng-template>
 		@if (!state.hidden()) {
 			<div
-				class="toast"
 				[class.d-flex]="!state.header()"
 				[class.toast-dismissible]="state.dismissible()"
 				[auUseMulti]="[directives.autoHideDirective, directives.transitionDirective, directives.bodyDirective]"
@@ -3905,7 +3944,7 @@ class ToastComponent extends BaseWidgetDirective {
 		}`,
             }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ToastComponent, { className: "ToastComponent", filePath: "components/toast/toast.component.ts", lineNumber: 104 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ToastComponent, { className: "ToastComponent", filePath: "components/toast/toast.component.ts", lineNumber: 103 }); })();
 
 /**
  * Directive to control the collapse behavior of an element.