@vsn-ux/ngx-gaia 0.9.2 → 0.9.4

package/fesm2022/vsn-ux-ngx-gaia.mjs

@@ -5,7 +5,7 @@ import { LucideAngularModule, X, CircleCheck, TriangleAlert, OctagonAlert, Info,
 import { NgForm, ControlContainer, NgControl, NG_VALUE_ACCESSOR, NG_VALIDATORS, CheckboxRequiredValidator, RequiredValidator } from '@angular/forms';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import * as i1$1 from '@angular/cdk/overlay';
-import { CdkOverlayOrigin, createRepositionScrollStrategy, OverlayModule, Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { CdkOverlayOrigin, createRepositionScrollStrategy, OverlayModule, Overlay, OverlayRef, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { NgTemplateOutlet } from '@angular/common';
 import { ComponentPortal } from '@angular/cdk/portal';
 import { Subject, takeUntil, map, merge, filter, Observable, isObservable } from 'rxjs';
@@ -561,6 +561,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
         }] });
 
 const GA_FORM_CONTROL_ADAPTER = new InjectionToken('ga-form-control-adapter');
+/**
+ * @internal - This function is for internal library use only
+ */
 function injectNgControlState({ implicitChildNgControl, explicitNgControl, explicitNgForm, } = {}) {
     const gaFormControlAdapter = inject(GA_FORM_CONTROL_ADAPTER, {
         optional: true,
@@ -1244,6 +1247,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     }, template: "<div class=\"ga-calendar__header\">\n  <div class=\"ga-calendar__month-year\">\n    <button\n      type=\"button\"\n      class=\"ga-calendar__month-year-button\"\n      (click)=\"toggleMonthView()\"\n      [attr.aria-label]=\"i18n.selectMonthLabel\"\n    >\n      {{ getMonthName(viewDate().month) }}\n      <ga-icon\n        [icon]=\"viewMode() === 'month' ? icons.ChevronUp : icons.ChevronDown\"\n        size=\"16\"\n      />\n    </button>\n    <button\n      type=\"button\"\n      class=\"ga-calendar__month-year-button\"\n      (click)=\"toggleYearView()\"\n      [attr.aria-label]=\"i18n.selectYearLabel\"\n    >\n      {{ viewDate().year }}\n      <ga-icon\n        [icon]=\"viewMode() === 'year' ? icons.ChevronUp : icons.ChevronDown\"\n        size=\"16\"\n      />\n    </button>\n  </div>\n  @if (viewMode() !== 'month') {\n    <div class=\"ga-calendar__navigation\">\n      <button\n        type=\"button\"\n        class=\"ga-calendar__navigation-button\"\n        (click)=\"navigatePrevious()\"\n        [attr.aria-label]=\"i18n.previousLabel\"\n      >\n        <ga-icon [icon]=\"icons.ChevronLeft\" size=\"24\" />\n      </button>\n      <button\n        type=\"button\"\n        class=\"ga-calendar__navigation-button\"\n        (click)=\"navigateNext()\"\n        [attr.aria-label]=\"i18n.nextLabel\"\n      >\n        <ga-icon [icon]=\"icons.ChevronRight\" size=\"24\" />\n      </button>\n    </div>\n  }\n</div>\n\n@switch (viewMode()) {\n  @case ('day') {\n    <div class=\"ga-calendar__weekdays\">\n      @for (day of weekDays(); track day) {\n        <div class=\"ga-calendar__weekday\">{{ day }}</div>\n      }\n    </div>\n    <div class=\"ga-calendar__selection ga-calendar__selection--day\">\n      @for (\n        dateStruct of calendarDays();\n        track dateStruct.year + '-' + dateStruct.month + '-' + dateStruct.day\n      ) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__day\"\n          [class.ga-calendar__day--selected]=\"isSelected(dateStruct)\"\n          [class.ga-calendar__day--current]=\"isToday(dateStruct)\"\n          [class.ga-calendar__day--disabled]=\"isDateDisabled(dateStruct)\"\n          [class.ga-calendar__day--weekend]=\"isWeekend(dateStruct)\"\n          [disabled]=\"isDateDisabled(dateStruct)\"\n          (click)=\"selectDate(dateStruct)\"\n        >\n          {{ dateStruct.day }}\n        </button>\n      }\n    </div>\n  }\n  @case ('month') {\n    <div class=\"ga-calendar__selection ga-calendar__selection--month\">\n      @for (month of months(); track month.index) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__month\"\n          [class.ga-calendar__month--selected]=\"isSelectedMonth(month.index)\"\n          [class.ga-calendar__month--disabled]=\"isMonthDisabled(month.index)\"\n          [disabled]=\"isMonthDisabled(month.index)\"\n          (click)=\"selectMonth(month.index)\"\n        >\n          {{ month.shortName }}\n        </button>\n      }\n    </div>\n  }\n  @case ('year') {\n    <div class=\"ga-calendar__selection ga-calendar__selection--year\">\n      @for (year of years(); track year) {\n        <button\n          type=\"button\"\n          class=\"ga-calendar__year\"\n          [class.ga-calendar__year--selected]=\"isSelectedYear(year)\"\n          [class.ga-calendar__year--disabled]=\"isYearDisabled(year)\"\n          [disabled]=\"isYearDisabled(year)\"\n          (click)=\"selectYear(year)\"\n        >\n          {{ year }}\n        </button>\n      }\n    </div>\n  }\n}\n", styles: [":host{display:block}\n"] }]
         }] });
 
+/**
+ * @internal - Internal service for form field coordination
+ */
 class GaFormFieldConnector {
     controlDisabled = signal(false);
     controlId = signal(null);
@@ -1698,10 +1704,10 @@ class GaDatepickerInputDirective {
         this.onNgChangeFn?.(newValue);
     }
     onBlur() {
+        if (this.dateStruct()) {
+            this.formatValue();
+        }
         if (compareStructs(this.dateStruct(), this.lastEmittedStruct()) !== 0) {
-            if (this.dateStruct()) {
-                this.formatValue();
-            }
             this.dateChange.emit(this.value());
             this.lastEmittedStruct.set(this.dateStruct());
         }
@@ -1721,6 +1727,8 @@ class GaDatepickerInputDirective {
         if (emitToNgModel) {
             this.onNgTouchedFn?.();
             this.onNgChangeFn?.(value);
+            this.dateInput.emit(value);
+            this.dateChange.emit(value);
         }
     }
     // ControlValueAccessor implementation
@@ -2184,6 +2192,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
         }] });
 
 let nextUniqueId$5 = 0;
+/**
+ * Internal tooltip component used by the gaTooltip directive.
+ * This component is not intended for direct use in templates.
+ * Use the [gaTooltip] directive instead.
+ * @internal
+ */
 class GaTooltipComponent {
     uniqueId = `ga-tooltip-${++nextUniqueId$5}`;
     mouseLeaveSubject = new Subject();
@@ -3807,6 +3821,7 @@ class GaSelectComponent {
     customSelectValue = contentChild(GaSelectValueComponent);
     inputSearch = viewChild('inputSearch');
     content = viewChild('ngContent', { read: ElementRef });
+    connectedOverlay = viewChild(CdkConnectedOverlay);
     id = computed(() => {
         return this.idInput() ?? this._uniqueId;
     });
@@ -3846,6 +3861,10 @@ class GaSelectComponent {
         if (formFieldConnector) {
             effect(() => formFieldConnector.controlDisabled.set(this.disabled()));
         }
+        effect(() => {
+            this.gaOptions(); // explicit call to track the option changes
+            untracked(() => this.connectedOverlay()?.overlayRef?.updatePosition());
+        });
     }
     ngAfterContentInit() {
         effect(() => {
@@ -4037,7 +4056,7 @@ class GaSelectComponent {
                 useExisting: forwardRef(() => GaSelectComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "gaOptions", predicate: GaOptionComponent, descendants: true, read: GaOptionComponent, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "customSelectValue", first: true, predicate: GaSelectValueComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["ngContent"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!textValue() || multiple())) {\n    @if (customSelectValue()) {\n      <div class=\"ga-select__value\">\n        <ng-content select=\"ga-select-value\" />\n      </div>\n    } @else {\n      <ga-select-default-value />\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"textValue()\"\n      (input)=\"open(); textValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"cdkListbox().id\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaSelectDefaultValueComponent, selector: "ga-select-default-value" }] });
+        ], queries: [{ propertyName: "gaOptions", predicate: GaOptionComponent, descendants: true, read: GaOptionComponent, isSignal: true }, { propertyName: "cdkListbox", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "customSelectValue", first: true, predicate: GaSelectValueComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: ["ngContent"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], hostDirectives: [{ directive: i1$1.CdkOverlayOrigin }, { directive: GaLabelledByFormFieldDirective, inputs: ["aria-labelledby", "aria-labelledby"] }], ngImport: i0, template: "@if (leftIcon()) {\n  <ga-icon [icon]=\"leftIcon()!\" />\n}\n\n<div class=\"ga-select__main-area\">\n  @if (hasValue() && (!textValue() || multiple())) {\n    @if (customSelectValue()) {\n      <div class=\"ga-select__value\">\n        <ng-content select=\"ga-select-value\" />\n      </div>\n    } @else {\n      <ga-select-default-value />\n    }\n  } @else if (!searchable()) {\n    <div class=\"ga-select__placeholder\">\n      {{ placeholder() }}\n    </div>\n  }\n\n  @if (searchable()) {\n    <input\n      #inputSearch\n      type=\"text\"\n      class=\"ga-select__input\"\n      aria-autocomplete=\"list\"\n      [value]=\"textValue()\"\n      (input)=\"open(); textValue.set(inputSearch.value)\"\n      (click)=\"open(); $event.stopPropagation()\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.aria-controls]=\"cdkListbox().id\"\n      [attr.aria-activedescendant]=\"activeDescendantId()\"\n      [placeholder]=\"hasValue() ? '' : placeholder()\"\n      (keydown)=\"onInputKeyDown($event)\"\n      tabindex=\"-1\"\n      [disabled]=\"disabled()\"\n    />\n  }\n</div>\n\n<div class=\"ga-select__suffix\">\n  @if (clearable() && hasValue()) {\n    <button\n      type=\"button\"\n      tabindex=\"-1\"\n      (click)=\"clearValue(); $event.stopPropagation()\"\n      [attr.aria-label]=\"clearableLabel() ?? i18n.clearLabel\"\n      style=\"font-size: 0\"\n    >\n      <ga-icon [icon]=\"icons.CircleX\" size=\"16\" />\n    </button>\n  }\n\n  <ga-icon [icon]=\"menuStatusIcon()\" class=\"ga-select__action-icon\" />\n</div>\n\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"repositionScrollStrategy\"\n  (overlayOutsideClick)=\"close()\"\n  (attach)=\"onOverlayAttach()\"\n  (detach)=\"onOverlayDetach()\"\n  (overlayKeydown)=\"onOverlayKeydown($event)\"\n>\n  <ng-content select=\"ga-select-dropdown\" />\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: GaIconModule }, { kind: "component", type: GaIconComponent, selector: "ga-icon", inputs: ["icon", "size", "color", "strokeWidth"] }, { kind: "ngmodule", type: GaButtonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "component", type: GaSelectDefaultValueComponent, selector: "ga-select-default-value" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectComponent, decorators: [{
             type: Component,
@@ -4150,11 +4169,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
                     }, template: "@if (loading()) {\n  <ga-select-dropdown-spinner />\n} @else {\n  <ng-content />\n}\n" }]
         }] });
 
+/**
+ * @internal - Internal validator provider for ga-select required validation
+ */
 const GA_SELECT_REQUIRED_VALIDATOR = {
     provide: NG_VALIDATORS,
     useExisting: forwardRef(() => GaSelectRequiredValidator),
     multi: true,
 };
+/**
+ * @internal - Internal directive for ga-select required validation
+ */
 class GaSelectRequiredValidator extends RequiredValidator {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: GaSelectRequiredValidator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: GaSelectRequiredValidator, isStandalone: true, selector: "ga-select[required][formControlName], ga-select[required][formControl], ga-select[required][ngModel]", providers: [GA_SELECT_REQUIRED_VALIDATOR], usesInheritance: true, ngImport: i0 });