@bizy/core 21.4.2 → 21.4.3

package/fesm2022/bizy-core.mjs

@@ -24,7 +24,7 @@ import flatpickr from 'flatpickr';
 import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect/index.js';
 import { Spanish } from 'flatpickr/dist/l10n/es.js';
 import * as i2$2 from '@angular/cdk/overlay';
-import { OverlayModule } from '@angular/cdk/overlay';
+import { OverlayModule, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import AutoNumeric from 'autonumeric';
 import Uppy from '@uppy/core';
 import es_ES from '@uppy/locales/lib/es_ES';
@@ -12732,17 +12732,18 @@ class BizyFilterSectionsComponent {
     #elementRef = inject(ElementRef);
     getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFilterSectionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyFilterSectionsComponent, isStandalone: true, selector: "bizy-filter-sections", ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;background-color:inherit;width:fit-content;max-width:90dvw;grid-template-columns:repeat(auto-fit,minmax(var(--bizy-filter-section-min-width),1fr));display:grid;gap:2rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyFilterSectionsComponent, isStandalone: true, selector: "bizy-filter-sections", ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;background-color:inherit;width:fit-content;max-width:var(--bizy-filter-max-width);grid-template-columns:repeat(auto-fit,minmax(var(--bizy-filter-section-min-width),1fr));display:grid;gap:2rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFilterSectionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizy-filter-sections', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;background-color:inherit;width:fit-content;max-width:90dvw;grid-template-columns:repeat(auto-fit,minmax(var(--bizy-filter-section-min-width),1fr));display:grid;gap:2rem}\n"] }]
+            args: [{ selector: 'bizy-filter-sections', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;background-color:inherit;width:fit-content;max-width:var(--bizy-filter-max-width);grid-template-columns:repeat(auto-fit,minmax(var(--bizy-filter-section-min-width),1fr));display:grid;gap:2rem}\n"] }]
         }] });
 
 class BizyFilterComponent {
     #elementRef = inject(ElementRef);
     #document = inject(DOCUMENT$1);
     #ref = inject(ChangeDetectorRef);
+    overlay;
     sections;
     id = `bizy-filter-${Math.random()}`;
     disabled = false;
@@ -12788,6 +12789,23 @@ class BizyFilterComponent {
             this._filterWidth = event.srcElement.offsetWidth;
         }
         this.onOpen.emit(event);
+        this.#ref.detectChanges();
+        const panel = this.overlay.overlayRef?.overlayElement;
+        if (panel) {
+            const maxWidth = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-filter-max-width');
+            panel.style.setProperty('--bizy-filter-max-width', maxWidth);
+            const sectionMinWidth = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-filter-section-min-width');
+            panel.style.setProperty('--bizy-filter-section-min-width', sectionMinWidth);
+            const inputMinWidth = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-input-min-width');
+            panel.style.setProperty('--bizy-input-min-width', inputMinWidth);
+            const inputWidth = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-input-width');
+            panel.style.setProperty('--bizy-input-width', inputWidth);
+            const inputMaxWidth = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-input-max-width');
+            panel.style.setProperty('--bizy-input-max-width', inputMaxWidth);
+            const inputBackgroundColor = this.#getClosestCssVariable(this.#elementRef.nativeElement, '--bizy-input-background-color');
+            panel.style.setProperty('--bizy-input-background-color', inputBackgroundColor);
+            this.#ref.detectChanges();
+        }
     };
     close = (event) => {
         if (event && event.target && event.target.id && event.target.id === this.id) {
@@ -12797,11 +12815,22 @@ class BizyFilterComponent {
         this.#ref.detectChanges();
     };
     getNativeElement = () => this.#elementRef?.nativeElement;
+    #getClosestCssVariable = (element, cssVariable) => {
+        while (element) {
+            const value = getComputedStyle(element).getPropertyValue(cssVariable).trim();
+            if (value) {
+                return value;
+            }
+            element = element.parentElement;
+        }
+        const rootValue = getComputedStyle(this.#document.documentElement).getPropertyValue(cssVariable).trim();
+        return rootValue || null;
+    };
     ngOnDestroy() {
         this.#subscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyFilterComponent, isStandalone: true, selector: "bizy-filter", inputs: { id: "id", disabled: "disabled", customClass: "customClass", opened: "opened" }, outputs: { onOpen: "onOpen", onChange: "onChange" }, queries: [{ propertyName: "sections", predicate: BizyFilterSectionComponent, descendants: true }], ngImport: i0, template: "<button \n    type=\"button\"\n    class=\"bizy-filter {{customClass}}\"\n    [ngClass]=\"{'bizy-filter--disabled': disabled}\"\n    [id]=\"id\"\n    (click)=\"_onOpen($event)\"\n    (keyup.enter)=\"_onOpen($event)\"\n    cdkOverlayOrigin \n    #bizyFilterTrigger=\"cdkOverlayOrigin\">\n\n    <span class=\"bizy-filter__content\">\n        <ng-content></ng-content>\n    </span>\n\n    <span class=\"bizy-filter__badge\" [ngClass]=\"{'bizy-filter__badge--visible': _activated}\"></span>\n    \n</button>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayMinWidth]=\"_filterWidth\"\n    [cdkConnectedOverlayOrigin]=\"bizyFilterTrigger\"\n    (overlayOutsideClick)=\"close($event)\"\n    [cdkConnectedOverlayOpen]=\"opened\">\n\n    <span class=\"bizy-filter__sections-wrapper\">\n\n        <bizy-filter-sections>\n    \n            <ng-content select=\"bizy-filter-section\"></ng-content>\n    \n        </bizy-filter-sections>\n\n        <ng-content select=\"bizy-filter-content\"></ng-content>\n\n    </span>\n\n</ng-template>\n", styles: [":host{font-size:1rem}.bizy-filter{font-size:1rem;width:100%;border:none;background-color:transparent;display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;cursor:pointer;padding:var(--bizy-filter-padding);color:var(--bizy-filter-color);position:relative}.bizy-filter--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-filter__badge{position:absolute;top:-.2rem;right:-.2rem;height:.5rem;width:.5rem;border-radius:50%;background-color:var(--bizy-filter-badge-color);display:none}.bizy-filter__badge--visible{display:block!important}.bizy-filter__content{font-size:1rem;display:flex;align-items:center;column-gap:.3rem;pointer-events:none}.bizy-filter__sections-wrapper{background-color:var(--bizy-filter-background-color);display:flex;flex-direction:column;overflow-y:auto;max-height:30rem;max-width:90dvw;padding:.5rem;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$2.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: BizyFilterSectionsComponent, selector: "bizy-filter-sections" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyFilterComponent, isStandalone: true, selector: "bizy-filter", inputs: { id: "id", disabled: "disabled", customClass: "customClass", opened: "opened" }, outputs: { onOpen: "onOpen", onChange: "onChange" }, queries: [{ propertyName: "sections", predicate: BizyFilterSectionComponent, descendants: true }], viewQueries: [{ propertyName: "overlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: "<button \n    type=\"button\"\n    class=\"bizy-filter {{customClass}}\"\n    [ngClass]=\"{'bizy-filter--disabled': disabled}\"\n    [id]=\"id\"\n    (click)=\"_onOpen($event)\"\n    (keyup.enter)=\"_onOpen($event)\"\n    cdkOverlayOrigin \n    #bizyFilterTrigger=\"cdkOverlayOrigin\">\n\n    <span class=\"bizy-filter__content\">\n        <ng-content></ng-content>\n    </span>\n\n    <span class=\"bizy-filter__badge\" [ngClass]=\"{'bizy-filter__badge--visible': _activated}\"></span>\n    \n</button>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayMinWidth]=\"_filterWidth\"\n    [cdkConnectedOverlayOrigin]=\"bizyFilterTrigger\"\n    (overlayOutsideClick)=\"close($event)\"\n    [cdkConnectedOverlayOpen]=\"opened\">\n\n    <span class=\"bizy-filter__sections-wrapper\">\n\n        <bizy-filter-sections>\n    \n            <ng-content select=\"bizy-filter-section\"></ng-content>\n    \n        </bizy-filter-sections>\n\n        <ng-content select=\"bizy-filter-content\"></ng-content>\n\n    </span>\n\n</ng-template>\n", styles: [":host{font-size:1rem}.bizy-filter{font-size:1rem;width:100%;border:none;background-color:transparent;display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;cursor:pointer;padding:var(--bizy-filter-padding);color:var(--bizy-filter-color);position:relative}.bizy-filter--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-filter__badge{position:absolute;top:-.2rem;right:-.2rem;height:.5rem;width:.5rem;border-radius:50%;background-color:var(--bizy-filter-badge-color);display:none}.bizy-filter__badge--visible{display:block!important}.bizy-filter__content{font-size:1rem;display:flex;align-items:center;column-gap:.3rem;pointer-events:none}.bizy-filter__sections-wrapper{background-color:var(--bizy-filter-background-color);display:flex;flex-direction:column;overflow-y:auto;max-height:30rem;max-width:90dvw;padding:.5rem;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2$2.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", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2$2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: BizyFilterSectionsComponent, selector: "bizy-filter-sections" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyFilterComponent, decorators: [{
             type: Component,
@@ -12810,7 +12839,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                         OverlayModule,
                         BizyFilterSectionsComponent
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n    type=\"button\"\n    class=\"bizy-filter {{customClass}}\"\n    [ngClass]=\"{'bizy-filter--disabled': disabled}\"\n    [id]=\"id\"\n    (click)=\"_onOpen($event)\"\n    (keyup.enter)=\"_onOpen($event)\"\n    cdkOverlayOrigin \n    #bizyFilterTrigger=\"cdkOverlayOrigin\">\n\n    <span class=\"bizy-filter__content\">\n        <ng-content></ng-content>\n    </span>\n\n    <span class=\"bizy-filter__badge\" [ngClass]=\"{'bizy-filter__badge--visible': _activated}\"></span>\n    \n</button>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayMinWidth]=\"_filterWidth\"\n    [cdkConnectedOverlayOrigin]=\"bizyFilterTrigger\"\n    (overlayOutsideClick)=\"close($event)\"\n    [cdkConnectedOverlayOpen]=\"opened\">\n\n    <span class=\"bizy-filter__sections-wrapper\">\n\n        <bizy-filter-sections>\n    \n            <ng-content select=\"bizy-filter-section\"></ng-content>\n    \n        </bizy-filter-sections>\n\n        <ng-content select=\"bizy-filter-content\"></ng-content>\n\n    </span>\n\n</ng-template>\n", styles: [":host{font-size:1rem}.bizy-filter{font-size:1rem;width:100%;border:none;background-color:transparent;display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;cursor:pointer;padding:var(--bizy-filter-padding);color:var(--bizy-filter-color);position:relative}.bizy-filter--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-filter__badge{position:absolute;top:-.2rem;right:-.2rem;height:.5rem;width:.5rem;border-radius:50%;background-color:var(--bizy-filter-badge-color);display:none}.bizy-filter__badge--visible{display:block!important}.bizy-filter__content{font-size:1rem;display:flex;align-items:center;column-gap:.3rem;pointer-events:none}.bizy-filter__sections-wrapper{background-color:var(--bizy-filter-background-color);display:flex;flex-direction:column;overflow-y:auto;max-height:30rem;max-width:90dvw;padding:.5rem;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014}\n"] }]
-        }], propDecorators: { sections: [{
+        }], propDecorators: { overlay: [{
+                type: ViewChild,
+                args: [CdkConnectedOverlay]
+            }], sections: [{
                 type: ContentChildren,
                 args: [BizyFilterSectionComponent, { descendants: true }]
             }], id: [{