@agnos-ui/angular-bootstrap 0.8.0-next.0 → 0.8.0-next.1

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, signal, afterRenderEffect, Injector, runInInjectionContext, NgModule, ApplicationRef, createComponent, EnvironmentInjector, OutputEmitterRef, Injectable } from '@angular/core';
+import { InjectionToken, inject, TemplateRef, Directive, viewChild, ChangeDetectionStrategy, Component, input, contentChild, output, ViewEncapsulation, forwardRef, Injector, runInInjectionContext, NgModule, 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';
@@ -2839,39 +2839,29 @@ function SliderDefaultTickSlotComponent_ng_template_0_Conditional_0_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", tick_r3.value, " ");
 } }
-function SliderDefaultTickSlotComponent_ng_template_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function SliderDefaultTickSlotComponent_ng_template_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 3);
-    i0.ɵɵelement(1, "circle", 4);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const state_r4 = i0.ɵɵnextContext().state;
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("stroke", state_r4.disabled() ? "var(--bs-slider-tick-disabled-color)" : "var(--bs-slider-tick-neutral-color)");
-} }
-function SliderDefaultTickSlotComponent_ng_template_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵnamespaceSVG();
-    i0.ɵɵelementStart(0, "svg", 3);
-    i0.ɵɵelement(1, "circle", 5)(2, "circle", 6);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const state_r4 = i0.ɵɵnextContext().state;
-    i0.ɵɵadvance();
-    i0.ɵɵattribute("fill", state_r4.disabled() ? "var(--bs-slider-tick-disabled-color)" : "var(--bs-slider-tick-selected-color)");
+    i0.ɵɵelement(0, "circle", 5);
 } }
 function SliderDefaultTickSlotComponent_ng_template_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(0, SliderDefaultTickSlotComponent_ng_template_0_Conditional_0_Template, 2, 7, "span", 2);
     i0.ɵɵelementStart(1, "span", 2);
-    i0.ɵɵtemplate(2, SliderDefaultTickSlotComponent_ng_template_0_Conditional_2_Template, 2, 1, ":svg:svg", 3)(3, SliderDefaultTickSlotComponent_ng_template_0_Conditional_3_Template, 3, 1, ":svg:svg", 3);
-    i0.ɵɵelementEnd();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg", 3);
+    i0.ɵɵelement(3, "circle", 4);
+    i0.ɵɵtemplate(4, SliderDefaultTickSlotComponent_ng_template_0_Conditional_4_Template, 1, 0, ":svg:circle", 5);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
+    const state_r4 = ctx.state;
     const directives_r2 = ctx.directives;
     const tick_r3 = ctx.tick;
     i0.ɵɵconditional(tick_r3.displayLabel ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(5, _c2$3, directives_r2.tickDirective, i0.ɵɵpureFunction1(3, _c4$3, tick_r3)));
+    i0.ɵɵproperty("auUse", i0.ɵɵpureFunction2(9, _c2$3, directives_r2.tickDirective, i0.ɵɵpureFunction1(7, _c4$3, tick_r3)));
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("au-slider-tick-disabled", state_r4.disabled())("au-slider-tick-selected", tick_r3.selected);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!tick_r3.selected ? 2 : 3);
+    i0.ɵɵconditional(tick_r3.selected ? 4 : -1);
 } }
 const _c5$2 = ["structure"];
 const _c6$1 = a0 => ({ option: a0 });
@@ -3056,18 +3046,6 @@ 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
@@ -3082,12 +3060,18 @@ class SliderDefaultHandleSlotComponent {
             case 'ArrowUp':
             case 'ArrowRight':
             case 'End':
-                this.refocus.set(event.target);
+                clearTimeout(this.updateTimeout);
+                this.updateTimeout = setTimeout(() => {
+                    event.target?.focus();
+                });
                 break;
             default:
                 break;
         }
     }
+    ngOnDestroy() {
+        clearTimeout(this.updateTimeout);
+    }
     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);
@@ -3108,8 +3092,8 @@ class SliderDefaultHandleSlotComponent {
 		</ng-template>
 	`,
             }]
-    }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultHandleSlotComponent, { className: "SliderDefaultHandleSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 65 }); })();
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultHandleSlotComponent, { className: "SliderDefaultHandleSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 64 }); })();
 /**
  * A constant representing the default slot handle for the slider component.
  */
@@ -3142,8 +3126,8 @@ class SliderDefaultTickSlotComponent {
             i0.ɵɵviewQuerySignal(ctx.tick, _c3$3, 5);
         } if (rf & 2) {
             i0.ɵɵqueryAdvance();
-        } }, decls: 2, vars: 0, consts: [["tick", ""], ["auSliderTick", ""], [3, "auUse"], ["xmlns", "http://www.w3.org/2000/svg", "fill", "none", 2, "width", "var(--bs-slider-tick-secondary-size)", "height", "var(--bs-slider-tick-primary-size)"], ["cx", "50%", "cy", "50%", "r", "45%", "fill", "white", "stroke-width", "1.5"], ["cx", "50%", "cy", "50%", "r", "50%"], ["cx", "50%", "cy", "50%", "r", "25%", "fill", "white"]], template: function SliderDefaultTickSlotComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, SliderDefaultTickSlotComponent_ng_template_0_Template, 4, 8, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
+        } }, decls: 2, vars: 0, consts: [["tick", ""], ["auSliderTick", ""], [3, "auUse"], ["xmlns", "http://www.w3.org/2000/svg"], [1, "au-slider-tick-outer"], [1, "au-slider-tick-inner", "au-slider-tick-selected"]], template: function SliderDefaultTickSlotComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, SliderDefaultTickSlotComponent_ng_template_0_Template, 5, 12, "ng-template", 1, 0, i0.ɵɵtemplateRefExtractor);
         } }, dependencies: [UseDirective, SliderTickDirective], encapsulation: 2, changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SliderDefaultTickSlotComponent, [{
@@ -3159,42 +3143,18 @@ class SliderDefaultTickSlotComponent {
 				</span>
 			}
 			<span [auUse]="[directives.tickDirective, {tick}]">
-				@if (!tick.selected) {
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						style="width: var(--bs-slider-tick-secondary-size); height: var(--bs-slider-tick-primary-size);"
-						fill="none"
-					>
-						<circle
-							cx="50%"
-							cy="50%"
-							r="45%"
-							fill="white"
-							[attr.stroke]="state.disabled() ? 'var(--bs-slider-tick-disabled-color)' : 'var(--bs-slider-tick-neutral-color)'"
-							stroke-width="1.5"
-						/>
-					</svg>
-				} @else {
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						style="width: var(--bs-slider-tick-secondary-size); height: var(--bs-slider-tick-primary-size);"
-						fill="none"
-					>
-						<circle
-							cx="50%"
-							cy="50%"
-							r="50%"
-							[attr.fill]="state.disabled() ? 'var(--bs-slider-tick-disabled-color)' : 'var(--bs-slider-tick-selected-color)'"
-						/>
-						<circle cx="50%" cy="50%" r="25%" fill="white" />
-					</svg>
-				}
+				<svg xmlns="http://www.w3.org/2000/svg">
+					<circle class="au-slider-tick-outer" [class.au-slider-tick-disabled]="state.disabled()" [class.au-slider-tick-selected]="tick.selected" />
+					@if (tick.selected) {
+						<circle class="au-slider-tick-inner au-slider-tick-selected" />
+					}
+				</svg>
 			</span>
 		</ng-template>
 	`,
             }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultTickSlotComponent, { className: "SliderDefaultTickSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 168 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultTickSlotComponent, { className: "SliderDefaultTickSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 136 }); })();
 /**
  * A constant representing the default slot tick for the slider component.
  */
@@ -3276,7 +3236,7 @@ class SliderDefaultStructureSlotComponent {
 	`,
             }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultStructureSlotComponent, { className: "SliderDefaultStructureSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 232 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderDefaultStructureSlotComponent, { className: "SliderDefaultStructureSlotComponent", filePath: "components/slider/slider.component.ts", lineNumber: 200 }); })();
 /**
  * Represents the default slot structure for the slider component.
  */
@@ -3527,7 +3487,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: 257 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SliderComponent, { className: "SliderComponent", filePath: "components/slider/slider.component.ts", lineNumber: 225 }); })();
 
 /**
  * Retrieve a shallow copy of the default Progressbar config