@bizy/core 21.8.1 → 21.8.2

package/fesm2022/bizy-core.mjs

@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
 import { inject, ChangeDetectorRef, ElementRef, EventEmitter, Output, Input, ChangeDetectionStrategy, Component, NgModule, Pipe, Renderer2, ViewChild, ViewContainerRef, RendererFactory2, Inject, Injectable, DOCUMENT as DOCUMENT$1, NgZone, ContentChildren, Directive, ContentChild, TemplateRef, HostListener } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT, registerLocaleData, DatePipe } from '@angular/common';
-import { Subscription, Subject, debounceTime, distinctUntilChanged, BehaviorSubject, fromEvent, merge, take, throttleTime, filter as filter$1, skip, auditTime, timer } from 'rxjs';
+import { Subscription, Subject, debounceTime, distinctUntilChanged, BehaviorSubject, fromEvent, merge, map as map$1, startWith, take, throttleTime, filter as filter$1, skip, auditTime, timer } from 'rxjs';
 import * as i3 from '@angular/cdk/dialog';
 import { DIALOG_DATA, DialogRef, DialogModule, Dialog } from '@angular/cdk/dialog';
 import * as i1$1 from '@angular/cdk/drag-drop';
@@ -57,11 +57,11 @@ class BizyAccordionComponent {
     }
     getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyAccordionComponent, isStandalone: true, selector: "bizy-accordion", inputs: { id: "id", customClass: "customClass", disabled: "disabled", opened: "opened" }, outputs: { openedChange: "openedChange", onSelect: "onSelect" }, ngImport: i0, template: "<button \n  type=\"button\"\n  [id]=\"id\"\n  [ngClass]=\"{'bizy-accordion--disabled': disabled}\"\n  class=\"bizy-accordion {{customClass}}\"\n  (click)=\"_onSelect($event)\"\n  (keyup.enter)=\"_onSelect($event)\">\n\n  <span class=\"bizy-accordion__content\">\n    <ng-content></ng-content>\n  </span>\n\n  <svg \n    class=\"bizy-accordion__arrow\" \n    [ngClass]=\"{'bizy-accordion__arrow--opened': opened}\"\n    viewBox=\"0 0 96 96\" \n    xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M81.8457,25.3876a6.0239,6.0239,0,0,0-8.45.7676L48,56.6257l-25.396-30.47a5.999,5.999,0,1,0-9.2114,7.6879L43.3943,69.8452a5.9969,5.9969,0,0,0,9.2114,0L82.6074,33.8431A6.0076,6.0076,0,0,0,81.8457,25.3876Z\"/>\n  </svg>\n\n</button>\n\n<span class=\"bizy-accordion__options\" [ngClass]=\"{'bizy-accordion__options--opened': opened}\">\n\n  <ng-content select=\"[accordion-option]\"></ng-content>\n\n</span>\n", styles: [":host{font-size:1rem;width:100%}:host:has(>.bizy-accordion__options:empty) .bizy-accordion>.bizy-accordion__arrow{display:none!important}.bizy-accordion{background-color:var(--bizy-accordion-background-color);border:none;display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;padding:.5rem;width:100%;cursor:pointer;position:relative;border-top-left-radius:.3rem;border-bottom:var(--bizy-accordion-border-bottom)}.bizy-accordion--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-accordion__content{background-color:inherit;width:100%;flex:1}.bizy-accordion__arrow{height:var(--bizy-accordion-arrow-height);pointer-events:none;display:block;transition:transform .1s ease;fill:var(--bizy-accordion-arrow-color);position:absolute;right:.5rem}.bizy-accordion__arrow--opened{transform:rotate(180deg);transition:transform .2s ease}.bizy-accordion__options{max-height:0;overflow:hidden;display:flex;flex-direction:column;padding-left:var(--bizy-accordion-padding-left);transition:max-height .1s ease;border-left:var(--bizy-accordion-border)}.bizy-accordion__options--opened{max-height:100dvh;transition:transform .2s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyAccordionComponent, isStandalone: true, selector: "bizy-accordion", inputs: { id: "id", customClass: "customClass", disabled: "disabled", opened: "opened" }, outputs: { openedChange: "openedChange", onSelect: "onSelect" }, ngImport: i0, template: "<button \n  type=\"button\"\n  [id]=\"id\"\n  [ngClass]=\"{'bizy-accordion--disabled': disabled}\"\n  class=\"bizy-accordion {{customClass}}\"\n  (click)=\"_onSelect($event)\"\n  (keyup.enter)=\"_onSelect($event)\">\n\n  <span class=\"bizy-accordion__content\">\n    <ng-content></ng-content>\n  </span>\n\n  <svg \n    class=\"bizy-accordion__arrow\" \n    [ngClass]=\"{'bizy-accordion__arrow--opened': opened}\"\n    viewBox=\"0 0 96 96\" \n    xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M81.8457,25.3876a6.0239,6.0239,0,0,0-8.45.7676L48,56.6257l-25.396-30.47a5.999,5.999,0,1,0-9.2114,7.6879L43.3943,69.8452a5.9969,5.9969,0,0,0,9.2114,0L82.6074,33.8431A6.0076,6.0076,0,0,0,81.8457,25.3876Z\"/>\n  </svg>\n\n</button>\n\n<span class=\"bizy-accordion__options\" [ngClass]=\"{'bizy-accordion__options--opened': opened}\">\n\n  <ng-content select=\"[accordion-option]\"></ng-content>\n\n</span>\n", styles: [":host{font-size:1rem;width:100%}:host:has(>.bizy-accordion__options:empty) .bizy-accordion>.bizy-accordion__arrow{display:none!important}.bizy-accordion{background-color:var(--bizy-accordion-background-color);border:none;display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;padding:var(--bizy-accordion-padding);width:100%;cursor:pointer;position:relative;border-top-left-radius:.3rem;border-bottom:var(--bizy-accordion-border-bottom)}.bizy-accordion--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-accordion__content{background-color:inherit;width:100%;flex:1}.bizy-accordion__arrow{height:var(--bizy-accordion-arrow-height);pointer-events:none;display:block;transition:transform .1s ease;fill:var(--bizy-accordion-arrow-color);position:absolute;right:.5rem}.bizy-accordion__arrow--opened{transform:rotate(180deg);transition:transform .2s ease}.bizy-accordion__options{max-height:0;overflow:hidden;display:flex;flex-direction:column;padding-left:var(--bizy-accordion-padding-left);transition:max-height .1s ease;border-left:var(--bizy-accordion-border)}.bizy-accordion__options--opened{max-height:100dvh;transition:transform .2s ease}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyAccordionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizy-accordion', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n  type=\"button\"\n  [id]=\"id\"\n  [ngClass]=\"{'bizy-accordion--disabled': disabled}\"\n  class=\"bizy-accordion {{customClass}}\"\n  (click)=\"_onSelect($event)\"\n  (keyup.enter)=\"_onSelect($event)\">\n\n  <span class=\"bizy-accordion__content\">\n    <ng-content></ng-content>\n  </span>\n\n  <svg \n    class=\"bizy-accordion__arrow\" \n    [ngClass]=\"{'bizy-accordion__arrow--opened': opened}\"\n    viewBox=\"0 0 96 96\" \n    xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M81.8457,25.3876a6.0239,6.0239,0,0,0-8.45.7676L48,56.6257l-25.396-30.47a5.999,5.999,0,1,0-9.2114,7.6879L43.3943,69.8452a5.9969,5.9969,0,0,0,9.2114,0L82.6074,33.8431A6.0076,6.0076,0,0,0,81.8457,25.3876Z\"/>\n  </svg>\n\n</button>\n\n<span class=\"bizy-accordion__options\" [ngClass]=\"{'bizy-accordion__options--opened': opened}\">\n\n  <ng-content select=\"[accordion-option]\"></ng-content>\n\n</span>\n", styles: [":host{font-size:1rem;width:100%}:host:has(>.bizy-accordion__options:empty) .bizy-accordion>.bizy-accordion__arrow{display:none!important}.bizy-accordion{background-color:var(--bizy-accordion-background-color);border:none;display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;padding:.5rem;width:100%;cursor:pointer;position:relative;border-top-left-radius:.3rem;border-bottom:var(--bizy-accordion-border-bottom)}.bizy-accordion--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-accordion__content{background-color:inherit;width:100%;flex:1}.bizy-accordion__arrow{height:var(--bizy-accordion-arrow-height);pointer-events:none;display:block;transition:transform .1s ease;fill:var(--bizy-accordion-arrow-color);position:absolute;right:.5rem}.bizy-accordion__arrow--opened{transform:rotate(180deg);transition:transform .2s ease}.bizy-accordion__options{max-height:0;overflow:hidden;display:flex;flex-direction:column;padding-left:var(--bizy-accordion-padding-left);transition:max-height .1s ease;border-left:var(--bizy-accordion-border)}.bizy-accordion__options--opened{max-height:100dvh;transition:transform .2s ease}\n"] }]
+            args: [{ selector: 'bizy-accordion', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n  type=\"button\"\n  [id]=\"id\"\n  [ngClass]=\"{'bizy-accordion--disabled': disabled}\"\n  class=\"bizy-accordion {{customClass}}\"\n  (click)=\"_onSelect($event)\"\n  (keyup.enter)=\"_onSelect($event)\">\n\n  <span class=\"bizy-accordion__content\">\n    <ng-content></ng-content>\n  </span>\n\n  <svg \n    class=\"bizy-accordion__arrow\" \n    [ngClass]=\"{'bizy-accordion__arrow--opened': opened}\"\n    viewBox=\"0 0 96 96\" \n    xmlns=\"http://www.w3.org/2000/svg\">\n    <path d=\"M81.8457,25.3876a6.0239,6.0239,0,0,0-8.45.7676L48,56.6257l-25.396-30.47a5.999,5.999,0,1,0-9.2114,7.6879L43.3943,69.8452a5.9969,5.9969,0,0,0,9.2114,0L82.6074,33.8431A6.0076,6.0076,0,0,0,81.8457,25.3876Z\"/>\n  </svg>\n\n</button>\n\n<span class=\"bizy-accordion__options\" [ngClass]=\"{'bizy-accordion__options--opened': opened}\">\n\n  <ng-content select=\"[accordion-option]\"></ng-content>\n\n</span>\n", styles: [":host{font-size:1rem;width:100%}:host:has(>.bizy-accordion__options:empty) .bizy-accordion>.bizy-accordion__arrow{display:none!important}.bizy-accordion{background-color:var(--bizy-accordion-background-color);border:none;display:flex;align-items:center;justify-content:space-between;column-gap:.5rem;padding:var(--bizy-accordion-padding);width:100%;cursor:pointer;position:relative;border-top-left-radius:.3rem;border-bottom:var(--bizy-accordion-border-bottom)}.bizy-accordion--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-accordion__content{background-color:inherit;width:100%;flex:1}.bizy-accordion__arrow{height:var(--bizy-accordion-arrow-height);pointer-events:none;display:block;transition:transform .1s ease;fill:var(--bizy-accordion-arrow-color);position:absolute;right:.5rem}.bizy-accordion__arrow--opened{transform:rotate(180deg);transition:transform .2s ease}.bizy-accordion__options{max-height:0;overflow:hidden;display:flex;flex-direction:column;padding-left:var(--bizy-accordion-padding-left);transition:max-height .1s ease;border-left:var(--bizy-accordion-border)}.bizy-accordion__options--opened{max-height:100dvh;transition:transform .2s ease}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], customClass: [{
@@ -9959,6 +9959,15 @@ const exportedForTests = { getVersion, getWindowsPlatformVersion };
 
 class BizyDeviceService {
     #device = inject(DeviceDetectorService);
+    get windowSizeChange$() {
+        return fromEvent(window, 'resize').pipe(debounceTime(200), map$1((event) => ({
+            width: event.currentTarget.innerWidth,
+            height: event.currentTarget.innerHeight
+        })), startWith({
+            width: window.innerWidth,
+            height: window.innerHeight
+        }));
+    }
     async getUserAgent() {
         try {
             const userAgent = await overrideUserAgentUsingClientHints([
@@ -10986,11 +10995,11 @@ class BizyButtonComponent {
     }
     getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyButtonComponent, isStandalone: true, selector: "bizy-button", inputs: { id: "id", disabled: "disabled", type: "type", customClass: "customClass" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<button \n    [type]=\"type\"\n    [id]=\"id\"\n    (focus)=\"_focused = true\"\n    (blur)=\"_focused = false\"\n    class=\"bizy-button {{customClass}}\"\n    [ngClass]=\"{'bizy-button--disabled': disabled}\"\n    (click)=\"_focused = true; _onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\">\n    <span class=\"bizy-button__content\" (click)=\"_focused = true; _onSelect($event); $event.stopPropagation()\">\n        <ng-content></ng-content>\n    </span>\n    \n</button>\n\n", styles: [":host{font-size:1rem;height:var(--bizy-button-height);width:var(--bizy-button-width);min-height:var(--bizy-button-min-height);min-width:var(--bizy-button-min-width);max-height:var(--bizy-button-max-height);max-width:var(--bizy-button-max-width)}.bizy-button{height:inherit;width:inherit;min-height:inherit;min-width:inherit;max-height:inherit;max-width:inherit;display:flex;justify-content:space-between;align-items:center;column-gap:.5rem;padding:var(--bizy-button-padding);border-radius:var(--bizy-button-border-radius);border:var(--bizy-button-border);cursor:pointer;background-color:var(--bizy-button-background-color)}::ng-deep .bizy-button *{color:var(--bizy-button-color);text-wrap:nowrap}.bizy-button:hover{filter:brightness(95%)}.bizy-button__content{width:100%;height:100%;display:flex;justify-content:var(--bizy-button-justify-content);align-items:var(--bizy-button-align-items);column-gap:.3rem}.bizy-button--disabled{opacity:.5;cursor:not-allowed!important;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyButtonComponent, isStandalone: true, selector: "bizy-button", inputs: { id: "id", disabled: "disabled", type: "type", customClass: "customClass" }, outputs: { onSelect: "onSelect" }, ngImport: i0, template: "<button \n    [type]=\"type\"\n    [id]=\"id\"\n    (focus)=\"_focused = true\"\n    (blur)=\"_focused = false\"\n    class=\"bizy-button {{customClass}}\"\n    [ngClass]=\"{'bizy-button--disabled': disabled}\"\n    (click)=\"_focused = true; _onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\">\n    <span class=\"bizy-button__content\" (click)=\"_focused = true; _onSelect($event); $event.stopPropagation()\">\n        <ng-content></ng-content>\n    </span>\n    \n</button>\n\n", styles: [":host{font-size:1rem;height:var(--bizy-button-height);width:var(--bizy-button-width);min-height:var(--bizy-button-min-height);min-width:var(--bizy-button-min-width);max-height:var(--bizy-button-max-height);max-width:var(--bizy-button-max-width)}.bizy-button{height:inherit;width:inherit;min-height:inherit;min-width:inherit;max-height:inherit;max-width:inherit;display:flex;justify-content:space-between;align-items:center;column-gap:.5rem;padding:var(--bizy-button-padding);border-radius:var(--bizy-button-border-radius);border:var(--bizy-button-border);cursor:pointer;background-color:var(--bizy-button-background-color)}::ng-deep .bizy-button *{color:var(--bizy-button-color);text-wrap:nowrap}.bizy-button:hover{filter:brightness(95%)}.bizy-button__content{width:100%;height:100%;display:flex;flex-direction:var(--bizy-button-flex-direction);justify-content:var(--bizy-button-justify-content);align-items:var(--bizy-button-align-items);column-gap:.3rem}.bizy-button--disabled{opacity:.5;cursor:not-allowed!important;pointer-events:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizy-button', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n    [type]=\"type\"\n    [id]=\"id\"\n    (focus)=\"_focused = true\"\n    (blur)=\"_focused = false\"\n    class=\"bizy-button {{customClass}}\"\n    [ngClass]=\"{'bizy-button--disabled': disabled}\"\n    (click)=\"_focused = true; _onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\">\n    <span class=\"bizy-button__content\" (click)=\"_focused = true; _onSelect($event); $event.stopPropagation()\">\n        <ng-content></ng-content>\n    </span>\n    \n</button>\n\n", styles: [":host{font-size:1rem;height:var(--bizy-button-height);width:var(--bizy-button-width);min-height:var(--bizy-button-min-height);min-width:var(--bizy-button-min-width);max-height:var(--bizy-button-max-height);max-width:var(--bizy-button-max-width)}.bizy-button{height:inherit;width:inherit;min-height:inherit;min-width:inherit;max-height:inherit;max-width:inherit;display:flex;justify-content:space-between;align-items:center;column-gap:.5rem;padding:var(--bizy-button-padding);border-radius:var(--bizy-button-border-radius);border:var(--bizy-button-border);cursor:pointer;background-color:var(--bizy-button-background-color)}::ng-deep .bizy-button *{color:var(--bizy-button-color);text-wrap:nowrap}.bizy-button:hover{filter:brightness(95%)}.bizy-button__content{width:100%;height:100%;display:flex;justify-content:var(--bizy-button-justify-content);align-items:var(--bizy-button-align-items);column-gap:.3rem}.bizy-button--disabled{opacity:.5;cursor:not-allowed!important;pointer-events:none}\n"] }]
+            args: [{ selector: 'bizy-button', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n    [type]=\"type\"\n    [id]=\"id\"\n    (focus)=\"_focused = true\"\n    (blur)=\"_focused = false\"\n    class=\"bizy-button {{customClass}}\"\n    [ngClass]=\"{'bizy-button--disabled': disabled}\"\n    (click)=\"_focused = true; _onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\">\n    <span class=\"bizy-button__content\" (click)=\"_focused = true; _onSelect($event); $event.stopPropagation()\">\n        <ng-content></ng-content>\n    </span>\n    \n</button>\n\n", styles: [":host{font-size:1rem;height:var(--bizy-button-height);width:var(--bizy-button-width);min-height:var(--bizy-button-min-height);min-width:var(--bizy-button-min-width);max-height:var(--bizy-button-max-height);max-width:var(--bizy-button-max-width)}.bizy-button{height:inherit;width:inherit;min-height:inherit;min-width:inherit;max-height:inherit;max-width:inherit;display:flex;justify-content:space-between;align-items:center;column-gap:.5rem;padding:var(--bizy-button-padding);border-radius:var(--bizy-button-border-radius);border:var(--bizy-button-border);cursor:pointer;background-color:var(--bizy-button-background-color)}::ng-deep .bizy-button *{color:var(--bizy-button-color);text-wrap:nowrap}.bizy-button:hover{filter:brightness(95%)}.bizy-button__content{width:100%;height:100%;display:flex;flex-direction:var(--bizy-button-flex-direction);justify-content:var(--bizy-button-justify-content);align-items:var(--bizy-button-align-items);column-gap:.3rem}.bizy-button--disabled{opacity:.5;cursor:not-allowed!important;pointer-events:none}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], disabled: [{
@@ -11407,11 +11416,11 @@ class BizyContentComponent {
     #elementRef = inject(ElementRef);
     getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyContentComponent, isStandalone: true, selector: "bizy-content", ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{flex:1;padding:var(--bizy-content-padding);width:var(--bizy-content-width);height:var(--bizy-content-height);overflow:auto;display:flex;flex-direction:var(--bizy-content-flex-direction);row-gap:var(--bizy-content-row-gap)}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizyContentComponent, isStandalone: true, selector: "bizy-content", ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{flex:1;padding:var(--bizy-content-padding);width:var(--bizy-content-width);height:var(--bizy-content-height);overflow:auto;display:flex;flex-direction:var(--bizy-content-flex-direction);gap:var(--bizy-content-gap)}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizy-content', imports: [], template: "<ng-content></ng-content>", styles: [":host{flex:1;padding:var(--bizy-content-padding);width:var(--bizy-content-width);height:var(--bizy-content-height);overflow:auto;display:flex;flex-direction:var(--bizy-content-flex-direction);row-gap:var(--bizy-content-row-gap)}\n"] }]
+            args: [{ selector: 'bizy-content', imports: [], template: "<ng-content></ng-content>", styles: [":host{flex:1;padding:var(--bizy-content-padding);width:var(--bizy-content-width);height:var(--bizy-content-height);overflow:auto;display:flex;flex-direction:var(--bizy-content-flex-direction);gap:var(--bizy-content-gap)}\n"] }]
         }] });
 
 const COMPONENTS$r = [
@@ -14291,12 +14300,13 @@ class BizyGridComponent {
         const resizeRef = this.resizeRef ? this.resizeRef : this.#renderer.parentNode(this.#elementRef.nativeElement) ? this.#renderer.parentNode(this.#elementRef.nativeElement) : this.#elementRef.nativeElement;
         this.#resizeObserver.observe(resizeRef);
         this.#subscription.add(this.notifier$.pipe(debounceTime(50)).subscribe(() => {
-            this.#updateView();
+            this.#updateView(true);
         }));
     }
-    #updateView = () => {
+    #updateView = (resize = false) => {
         this.itemTemplate = this.gridDirective.templateRef;
         const rowWidth = this.#elementRef.nativeElement.offsetWidth || this.#elementRef.nativeElement.firstChild.offsetWidth;
+        const gridHeight = this.#elementRef.nativeElement.offsetHeight || this.#elementRef.nativeElement.firstChild.offsetHeight;
         let columnWidth = 100;
         const fontSize = Number(getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('font-size').split('px')[0]);
         const rowHeightParameter = getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('--bizy-grid-row-height');
@@ -14306,6 +14316,9 @@ class BizyGridComponent {
         else if (rowHeightParameter && rowHeightParameter.includes('px')) {
             this.rowHeight = Number(rowHeightParameter.split('px')[0]);
         }
+        else if (rowHeightParameter && rowHeightParameter.includes('%')) {
+            this.rowHeight = (Number(rowHeightParameter.split('%')[0]) / 100) * gridHeight;
+        }
         let gap = 10;
         const gapParameter = getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('--bizy-grid-gap');
         if (gapParameter && gapParameter.includes('rem')) {
@@ -14314,6 +14327,9 @@ class BizyGridComponent {
         else if (gapParameter && gapParameter.includes('px')) {
             gap = Number(gapParameter.split('px')[0]);
         }
+        else if (gapParameter && gapParameter.includes('%')) {
+            gap = (Number(gapParameter.split('%')[0]) / 100) * gridHeight;
+        }
         const columnWidthParameter = getComputedStyle(this.#elementRef.nativeElement).getPropertyValue('--bizy-grid-column-width');
         if (columnWidthParameter && columnWidthParameter.includes('rem')) {
             columnWidth = fontSize * Number(columnWidthParameter.split('rem')[0]);
@@ -14321,6 +14337,9 @@ class BizyGridComponent {
         else if (columnWidthParameter && columnWidthParameter.includes('px')) {
             columnWidth = Number(columnWidthParameter.split('px')[0]);
         }
+        else if (columnWidthParameter && columnWidthParameter.includes('%')) {
+            columnWidth = (Number(columnWidthParameter.split('%')[0]) / 100) * rowWidth;
+        }
         columnWidth += gap;
         let newItemsPerRow = 0;
         const count = Math.trunc(rowWidth / (columnWidth));
@@ -14330,16 +14349,17 @@ class BizyGridComponent {
         else {
             newItemsPerRow = (count - 1) <= 0 ? 1 : count - 1;
         }
-        if (newItemsPerRow !== this.itemsPerRow || this.items.length !== (this.itemRows.length * this.itemsPerRow)) {
-            this.itemsPerRow = newItemsPerRow;
-            const itemRows = [];
-            for (let i = 0; i < this.items.length; i += this.itemsPerRow) {
-                const row = this.items.slice(i, i + this.itemsPerRow);
-                itemRows.push(row);
-            }
-            this.itemRows = itemRows;
-            this.#ref.detectChanges();
+        if (resize && newItemsPerRow === this.itemsPerRow) {
+            return;
         }
+        this.itemsPerRow = newItemsPerRow;
+        const itemRows = [];
+        for (let i = 0; i < this.items.length; i += this.itemsPerRow) {
+            const row = this.items.slice(i, i + this.itemsPerRow);
+            itemRows.push(row);
+        }
+        this.itemRows = itemRows;
+        this.#ref.detectChanges();
     };
     trackByRow(index, row) {
         if (row && row.length > 0) {
@@ -14360,11 +14380,11 @@ class BizyGridComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BizyGridComponent, isStandalone: true, selector: "bizy-grid", inputs: { resizeRef: "resizeRef" }, queries: [{ propertyName: "gridDirective", first: true, predicate: BizyGridForDirective, descendants: true }], viewQueries: [{ propertyName: "virtualScroll", first: true, predicate: ["cdkVirtualScroll"], descendants: true }, { propertyName: "content", first: true, predicate: ["gridScrollingContent"], descendants: true }], ngImport: i0, template: "<div class=\"bizy-grid\" [ngClass]=\"{'bizy-grid--empty': items && items.length === 0}\">\n\n  <cdk-virtual-scroll-viewport\n    #cdkVirtualScroll\n    class=\"bizy-grid__rows\"\n    [itemSize]=\"rowHeight\"\n    [minBufferPx]=\"rowHeight + (rowHeight * 5)\"\n    [maxBufferPx]=\"rowHeight + (rowHeight * 10)\">\n\n    <ng-content></ng-content>\n\n    <ng-template #gridScrollingContent>\n      <ng-template\n        let-item\n        let-index=\"index\"\n        let-first=\"first\"\n        let-last=\"last\"\n        let-even=\"even\"\n        let-odd=\"odd\"\n        cdkVirtualFor\n        [cdkVirtualForOf]=\"itemRows\"\n        [cdkVirtualForTrackBy]=\"trackByRow\">\n        <bizy-grid-row [rowHeight]=\"rowHeight\" [itemsPerRow]=\"itemsPerRow\">\n          @for (it of item; track it.id ?? i; let i = $index) {\n            <ng-template\n                *ngTemplateOutlet=\"itemTemplate;\n                context: { \n                    $implicit: it,\n                    index: index * itemsPerRow + i,\n                    rowIndex: index,\n                    rowFirst: first,\n                    rowLast: last,\n                    rowEven: even,\n                    rowOdd: odd\n                }\">\n            </ng-template>\n          }\n        </bizy-grid-row>\n      </ng-template>\n    </ng-template>\n  </cdk-virtual-scroll-viewport>\n\n</div>\n", styles: [":host{display:inline-block!important;min-height:var(--bizy-grid-min-height);max-height:var(--bizy-grid-max-height);height:var(--bizy-grid-height);width:var(--bizy-grid-width);flex:1;overflow-x:auto;overflow-y:hidden;font-size:1rem}:host:has(.bizy-grid--empty){height:0!important;min-height:0!important;max-height:0!important}.bizy-grid{width:inherit;height:inherit;min-width:fit-content;display:flex;flex-direction:column;row-gap:.3rem;overflow-x:clip;background-color:var(--bizy-grid-background-color)}.bizy-grid__rows{width:100%;display:flex;flex-direction:column;min-width:fit-content;overflow-x:hidden}::ng-deep .cdk-virtual-scrollable{height:100%;width:100%;overflow-y:auto!important;overflow-x:hidden!important;contain:inline-size!important}::ng-deep .cdk-virtual-scroll-content-wrapper{min-width:100%;max-width:100%}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar{width:.5rem;height:.5rem}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-grid-scroll-bar-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-grid-scroll-bar-hover-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-button{height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$2.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$2.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$2.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: BizyGridRowComponent, selector: "bizy-grid-row", inputs: ["rowHeight", "itemsPerRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BizyGridComponent, isStandalone: true, selector: "bizy-grid", inputs: { resizeRef: "resizeRef" }, queries: [{ propertyName: "gridDirective", first: true, predicate: BizyGridForDirective, descendants: true }], viewQueries: [{ propertyName: "virtualScroll", first: true, predicate: ["cdkVirtualScroll"], descendants: true }, { propertyName: "content", first: true, predicate: ["gridScrollingContent"], descendants: true }], ngImport: i0, template: "<div class=\"bizy-grid\" [ngClass]=\"{'bizy-grid--empty': items && items.length === 0}\">\n\n  <cdk-virtual-scroll-viewport\n    #cdkVirtualScroll\n    class=\"bizy-grid__rows\"\n    [itemSize]=\"rowHeight\"\n    [minBufferPx]=\"rowHeight + (rowHeight * 10)\"\n    [maxBufferPx]=\"rowHeight + (rowHeight * 20)\">\n\n    <ng-content></ng-content>\n\n    <ng-template #gridScrollingContent>\n      <ng-template\n        let-item\n        let-index=\"index\"\n        let-first=\"first\"\n        let-last=\"last\"\n        let-even=\"even\"\n        let-odd=\"odd\"\n        cdkVirtualFor\n        [cdkVirtualForOf]=\"itemRows\"\n        [cdkVirtualForTrackBy]=\"trackByRow\">\n        <bizy-grid-row [rowHeight]=\"rowHeight\" [itemsPerRow]=\"itemsPerRow\">\n          @for (it of item; track it.id ?? i; let i = $index) {\n            <ng-template\n                *ngTemplateOutlet=\"itemTemplate;\n                context: { \n                    $implicit: it,\n                    index: index * itemsPerRow + i,\n                    rowIndex: index,\n                    rowFirst: first,\n                    rowLast: last,\n                    rowEven: even,\n                    rowOdd: odd\n                }\">\n            </ng-template>\n          }\n        </bizy-grid-row>\n      </ng-template>\n    </ng-template>\n  </cdk-virtual-scroll-viewport>\n\n</div>\n", styles: [":host{display:inline-block!important;min-height:var(--bizy-grid-min-height);max-height:var(--bizy-grid-max-height);height:var(--bizy-grid-height);width:var(--bizy-grid-width);flex:1;overflow-x:auto;overflow-y:hidden;font-size:1rem}:host:has(.bizy-grid--empty){height:0!important;min-height:0!important;max-height:0!important}.bizy-grid{width:inherit;height:inherit;min-width:fit-content;display:flex;flex-direction:column;row-gap:.3rem;overflow-x:clip;background-color:var(--bizy-grid-background-color)}.bizy-grid__rows{width:100%;display:flex;flex-direction:column;min-width:fit-content;overflow-x:hidden}::ng-deep .cdk-virtual-scrollable{height:100%;width:100%;overflow-y:auto!important;overflow-x:hidden!important;contain:inline-size!important}::ng-deep .cdk-virtual-scroll-content-wrapper{min-width:100%;max-width:100%}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar{width:.5rem;height:.5rem}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-grid-scroll-bar-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-grid-scroll-bar-hover-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-button{height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2$2.ɵɵCdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2$2.ɵɵCdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2$2.ɵɵCdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: BizyGridRowComponent, selector: "bizy-grid-row", inputs: ["rowHeight", "itemsPerRow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizyGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizy-grid', imports: [CommonModule, ScrollingModule, BizyGridRowComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bizy-grid\" [ngClass]=\"{'bizy-grid--empty': items && items.length === 0}\">\n\n  <cdk-virtual-scroll-viewport\n    #cdkVirtualScroll\n    class=\"bizy-grid__rows\"\n    [itemSize]=\"rowHeight\"\n    [minBufferPx]=\"rowHeight + (rowHeight * 5)\"\n    [maxBufferPx]=\"rowHeight + (rowHeight * 10)\">\n\n    <ng-content></ng-content>\n\n    <ng-template #gridScrollingContent>\n      <ng-template\n        let-item\n        let-index=\"index\"\n        let-first=\"first\"\n        let-last=\"last\"\n        let-even=\"even\"\n        let-odd=\"odd\"\n        cdkVirtualFor\n        [cdkVirtualForOf]=\"itemRows\"\n        [cdkVirtualForTrackBy]=\"trackByRow\">\n        <bizy-grid-row [rowHeight]=\"rowHeight\" [itemsPerRow]=\"itemsPerRow\">\n          @for (it of item; track it.id ?? i; let i = $index) {\n            <ng-template\n                *ngTemplateOutlet=\"itemTemplate;\n                context: { \n                    $implicit: it,\n                    index: index * itemsPerRow + i,\n                    rowIndex: index,\n                    rowFirst: first,\n                    rowLast: last,\n                    rowEven: even,\n                    rowOdd: odd\n                }\">\n            </ng-template>\n          }\n        </bizy-grid-row>\n      </ng-template>\n    </ng-template>\n  </cdk-virtual-scroll-viewport>\n\n</div>\n", styles: [":host{display:inline-block!important;min-height:var(--bizy-grid-min-height);max-height:var(--bizy-grid-max-height);height:var(--bizy-grid-height);width:var(--bizy-grid-width);flex:1;overflow-x:auto;overflow-y:hidden;font-size:1rem}:host:has(.bizy-grid--empty){height:0!important;min-height:0!important;max-height:0!important}.bizy-grid{width:inherit;height:inherit;min-width:fit-content;display:flex;flex-direction:column;row-gap:.3rem;overflow-x:clip;background-color:var(--bizy-grid-background-color)}.bizy-grid__rows{width:100%;display:flex;flex-direction:column;min-width:fit-content;overflow-x:hidden}::ng-deep .cdk-virtual-scrollable{height:100%;width:100%;overflow-y:auto!important;overflow-x:hidden!important;contain:inline-size!important}::ng-deep .cdk-virtual-scroll-content-wrapper{min-width:100%;max-width:100%}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar{width:.5rem;height:.5rem}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-grid-scroll-bar-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-grid-scroll-bar-hover-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-button{height:1rem}\n"] }]
+            args: [{ selector: 'bizy-grid', imports: [CommonModule, ScrollingModule, BizyGridRowComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"bizy-grid\" [ngClass]=\"{'bizy-grid--empty': items && items.length === 0}\">\n\n  <cdk-virtual-scroll-viewport\n    #cdkVirtualScroll\n    class=\"bizy-grid__rows\"\n    [itemSize]=\"rowHeight\"\n    [minBufferPx]=\"rowHeight + (rowHeight * 10)\"\n    [maxBufferPx]=\"rowHeight + (rowHeight * 20)\">\n\n    <ng-content></ng-content>\n\n    <ng-template #gridScrollingContent>\n      <ng-template\n        let-item\n        let-index=\"index\"\n        let-first=\"first\"\n        let-last=\"last\"\n        let-even=\"even\"\n        let-odd=\"odd\"\n        cdkVirtualFor\n        [cdkVirtualForOf]=\"itemRows\"\n        [cdkVirtualForTrackBy]=\"trackByRow\">\n        <bizy-grid-row [rowHeight]=\"rowHeight\" [itemsPerRow]=\"itemsPerRow\">\n          @for (it of item; track it.id ?? i; let i = $index) {\n            <ng-template\n                *ngTemplateOutlet=\"itemTemplate;\n                context: { \n                    $implicit: it,\n                    index: index * itemsPerRow + i,\n                    rowIndex: index,\n                    rowFirst: first,\n                    rowLast: last,\n                    rowEven: even,\n                    rowOdd: odd\n                }\">\n            </ng-template>\n          }\n        </bizy-grid-row>\n      </ng-template>\n    </ng-template>\n  </cdk-virtual-scroll-viewport>\n\n</div>\n", styles: [":host{display:inline-block!important;min-height:var(--bizy-grid-min-height);max-height:var(--bizy-grid-max-height);height:var(--bizy-grid-height);width:var(--bizy-grid-width);flex:1;overflow-x:auto;overflow-y:hidden;font-size:1rem}:host:has(.bizy-grid--empty){height:0!important;min-height:0!important;max-height:0!important}.bizy-grid{width:inherit;height:inherit;min-width:fit-content;display:flex;flex-direction:column;row-gap:.3rem;overflow-x:clip;background-color:var(--bizy-grid-background-color)}.bizy-grid__rows{width:100%;display:flex;flex-direction:column;min-width:fit-content;overflow-x:hidden}::ng-deep .cdk-virtual-scrollable{height:100%;width:100%;overflow-y:auto!important;overflow-x:hidden!important;contain:inline-size!important}::ng-deep .cdk-virtual-scroll-content-wrapper{min-width:100%;max-width:100%}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar{width:.5rem;height:.5rem}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb{border-radius:1rem;background-color:var(--bizy-grid-scroll-bar-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--bizy-grid-scroll-bar-hover-color)}::ng-deep .cdk-virtual-scrollable::-webkit-scrollbar-button{height:1rem}\n"] }]
         }], propDecorators: { virtualScroll: [{
                 type: ViewChild,
                 args: ['cdkVirtualScroll']
@@ -15864,65 +15884,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
 class BizySectionComponent {
     #elementRef = inject(ElementRef);
     id = `bizy-section-${Math.random()}`;
+    onSelect = new EventEmitter();
     getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizySectionComponent, isStandalone: true, selector: "bizy-section", inputs: { id: "id" }, host: { properties: { "id": "id" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:flex;height:var(--bizy-section-height);width:var(--bizy-section-width);background-color:var(--bizy-section-background-color);flex-direction:var(--bizy-section-flex-direction);column-gap:var(--bizy-section-column-gap);row-gap:var(--bizy-section-row-gap);justify-content:var(--bizy-section-justify-content);align-items:var(--bizy-section-align-items);flex-wrap:var(--bizy-section-flex-wrap)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizySectionComponent, isStandalone: true, selector: "bizy-section", inputs: { id: "id" }, outputs: { onSelect: "onSelect" }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "onSelect.emit($event)", "keydown.enter": "onSelect.emit($event)" }, properties: { "id": "id" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:flex;height:var(--bizy-section-height);width:var(--bizy-section-width);background-color:var(--bizy-section-background-color);flex-direction:var(--bizy-section-flex-direction);column-gap:var(--bizy-section-column-gap);row-gap:var(--bizy-section-row-gap);justify-content:var(--bizy-section-justify-content);align-items:var(--bizy-section-align-items);flex-wrap:var(--bizy-section-flex-wrap)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySectionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-section', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[id]': 'id'
+                        '[id]': 'id',
+                        '(click)': 'onSelect.emit($event)',
+                        '(keydown.enter)': 'onSelect.emit($event)',
+                        'tabindex': '0',
+                        'role': 'button'
                     }, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:flex;height:var(--bizy-section-height);width:var(--bizy-section-width);background-color:var(--bizy-section-background-color);flex-direction:var(--bizy-section-flex-direction);column-gap:var(--bizy-section-column-gap);row-gap:var(--bizy-section-row-gap);justify-content:var(--bizy-section-justify-content);align-items:var(--bizy-section-align-items);flex-wrap:var(--bizy-section-flex-wrap)}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
+            }], onSelect: [{
+                type: Output
             }] } });
 
 class BizySectionStartComponent {
     #elementRef = inject(ElementRef);
     id = `bizy-section-start-${Math.random()}`;
+    onSelect = new EventEmitter();
     getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySectionStartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizySectionStartComponent, isStandalone: true, selector: "bizy-section-start", inputs: { id: "id" }, host: { properties: { "id": "id" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:flex;flex:var(--bizy-section-start-flex);height:var(--bizy-section-start-height);width:var(--bizy-section-start-width);background-color:var(--bizy-section-start-background-color);justify-content:var(--bizy-section-start-justify-content);align-items:var(--bizy-section-start-align-items);column-gap:var(--bizy-section-start-column-gap);row-gap:var(--bizy-section-start-row-gap)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizySectionStartComponent, isStandalone: true, selector: "bizy-section-start", inputs: { id: "id" }, outputs: { onSelect: "onSelect" }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "onSelect.emit($event)", "keydown.enter": "onSelect.emit($event)" }, properties: { "id": "id" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:flex;flex:var(--bizy-section-start-flex);height:var(--bizy-section-start-height);width:var(--bizy-section-start-width);background-color:var(--bizy-section-start-background-color);justify-content:var(--bizy-section-start-justify-content);align-items:var(--bizy-section-start-align-items);column-gap:var(--bizy-section-start-column-gap);row-gap:var(--bizy-section-start-row-gap)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySectionStartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-section-start', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[id]': 'id'
+                        '[id]': 'id',
+                        '(click)': 'onSelect.emit($event)',
+                        '(keydown.enter)': 'onSelect.emit($event)',
+                        'tabindex': '0',
+                        'role': 'button'
                     }, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:flex;flex:var(--bizy-section-start-flex);height:var(--bizy-section-start-height);width:var(--bizy-section-start-width);background-color:var(--bizy-section-start-background-color);justify-content:var(--bizy-section-start-justify-content);align-items:var(--bizy-section-start-align-items);column-gap:var(--bizy-section-start-column-gap);row-gap:var(--bizy-section-start-row-gap)}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
+            }], onSelect: [{
+                type: Output
             }] } });
 
 class BizySectionCenterComponent {
     #elementRef = inject(ElementRef);
     id = `bizy-center-start-${Math.random()}`;
+    onSelect = new EventEmitter();
     getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySectionCenterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizySectionCenterComponent, isStandalone: true, selector: "bizy-section-center", inputs: { id: "id" }, host: { properties: { "id": "id" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:flex;flex:var(--bizy-section-center-flex);height:var(--bizy-section-center-height);width:var(--bizy-section-center-width);background-color:var(--bizy-section-center-background-color);justify-content:var(--bizy-section-center-justify-content);align-items:var(--bizy-section-center-align-items);column-gap:var(--bizy-section-center-column-gap);row-gap:var(--bizy-section-center-row-gap)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizySectionCenterComponent, isStandalone: true, selector: "bizy-section-center", inputs: { id: "id" }, outputs: { onSelect: "onSelect" }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "onSelect.emit($event)", "keydown.enter": "onSelect.emit($event)" }, properties: { "id": "id" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:flex;flex:var(--bizy-section-center-flex);height:var(--bizy-section-center-height);width:var(--bizy-section-center-width);background-color:var(--bizy-section-center-background-color);justify-content:var(--bizy-section-center-justify-content);align-items:var(--bizy-section-center-align-items);column-gap:var(--bizy-section-center-column-gap);row-gap:var(--bizy-section-center-row-gap)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySectionCenterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-section-center', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[id]': 'id'
+                        '[id]': 'id',
+                        '(click)': 'onSelect.emit($event)',
+                        '(keydown.enter)': 'onSelect.emit($event)',
+                        'tabindex': '0',
+                        'role': 'button'
                     }, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:flex;flex:var(--bizy-section-center-flex);height:var(--bizy-section-center-height);width:var(--bizy-section-center-width);background-color:var(--bizy-section-center-background-color);justify-content:var(--bizy-section-center-justify-content);align-items:var(--bizy-section-center-align-items);column-gap:var(--bizy-section-center-column-gap);row-gap:var(--bizy-section-center-row-gap)}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
+            }], onSelect: [{
+                type: Output
             }] } });
 
 class BizySectionEndComponent {
     #elementRef = inject(ElementRef);
     id = `bizy-section-end-${Math.random()}`;
+    onSelect = new EventEmitter();
     getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySectionEndComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizySectionEndComponent, isStandalone: true, selector: "bizy-section-end", inputs: { id: "id" }, host: { properties: { "id": "id" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:flex;flex:var(--bizy-section-end-flex);height:var(--bizy-section-end-height);width:var(--bizy-section-end-width);background-color:var(--bizy-section-end-background-color);justify-content:var(--bizy-section-end-justify-content);align-items:var(--bizy-section-end-align-items);column-gap:var(--bizy-section-end-column-gap);row-gap:var(--bizy-section-end-row-gap)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizySectionEndComponent, isStandalone: true, selector: "bizy-section-end", inputs: { id: "id" }, outputs: { onSelect: "onSelect" }, host: { attributes: { "tabindex": "0", "role": "button" }, listeners: { "click": "onSelect.emit($event)", "keydown.enter": "onSelect.emit($event)" }, properties: { "id": "id" } }, ngImport: i0, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:flex;flex:var(--bizy-section-end-flex);height:var(--bizy-section-end-height);width:var(--bizy-section-end-width);background-color:var(--bizy-section-end-background-color);justify-content:var(--bizy-section-end-justify-content);align-items:var(--bizy-section-end-align-items);column-gap:var(--bizy-section-end-column-gap);row-gap:var(--bizy-section-end-row-gap)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySectionEndComponent, decorators: [{
             type: Component,
             args: [{ selector: 'bizy-section-end', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[id]': 'id'
+                        '[id]': 'id',
+                        '(click)': 'onSelect.emit($event)',
+                        '(keydown.enter)': 'onSelect.emit($event)',
+                        'tabindex': '0',
+                        'role': 'button'
                     }, template: "<ng-content></ng-content>", styles: [":host{font-size:1rem;display:flex;flex:var(--bizy-section-end-flex);height:var(--bizy-section-end-height);width:var(--bizy-section-end-width);background-color:var(--bizy-section-end-background-color);justify-content:var(--bizy-section-end-justify-content);align-items:var(--bizy-section-end-align-items);column-gap:var(--bizy-section-end-column-gap);row-gap:var(--bizy-section-end-row-gap)}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
+            }], onSelect: [{
+                type: Output
             }] } });
 
 const COMPONENTS$b = [
@@ -16012,11 +16060,11 @@ class BizySidebarOptionComponent {
         return this._selected;
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySidebarOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BizySidebarOptionComponent, isStandalone: true, selector: "bizy-sidebar-option", inputs: { id: "id", disabled: "disabled", selectable: "selectable", customClass: "customClass", selected: "selected" }, outputs: { selectedChange: "selectedChange", onSelect: "onSelect" }, queries: [{ propertyName: "options", predicate: BizySidebarOptionComponent }], ngImport: i0, template: "<bizy-accordion\n  class=\"{{customClass}}\"\n  [id]=\"id\"\n  customClass=\"bizy-sidebar-option {{_selected && (!options || options.length === 0) ? 'bizy-sidebar-option--selected' : ''}} {{!selectable ? 'bizy-sidebar-option--no-selectable' : ''}} {{disabled ? 'bizy-sidebar-option--disabled' : ''}}\"\n  [opened]=\"_selected\"\n  (onSelect)=\"_onSelect($event)\">\n\n  <ng-content></ng-content>\n\n  @if (options && options.length > 0) {\n    <ng-container accordion-option>\n      <ng-content select=\"bizy-sidebar-option\"></ng-content>\n    </ng-container>\n  }\n\n</bizy-accordion>", styles: [":host{font-size:1rem;direction:ltr}:host:not(:has(.bizy-sidebar-option--disabled)) ::ng-deep .bizy-sidebar-option:hover{--bizy-accordion-background-color: var(--bizy-sidebar-option-hover-color) }::ng-deep .bizy-accordion__options{position:sticky}:host ::ng-deep .bizy-accordion__options:before{content:\"\";position:absolute;inset:0;background-color:#000;opacity:.3}::ng-deep .bizy-sidebar-option--selected{--bizy-accordion-background-color: var(--bizy-sidebar-option-selected-color) !important}::ng-deep .bizy-sidebar-option--no-selectable{pointer-events:none;cursor:default!important}::ng-deep .bizy-sidebar-option--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}::ng-deep .bizy-accordion__options--opened{max-height:100%!important}\n"], dependencies: [{ kind: "component", type: BizyAccordionComponent, selector: "bizy-accordion", inputs: ["id", "customClass", "disabled", "opened"], outputs: ["openedChange", "onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: BizySidebarOptionComponent, isStandalone: true, selector: "bizy-sidebar-option", inputs: { id: "id", disabled: "disabled", selectable: "selectable", customClass: "customClass", selected: "selected" }, outputs: { selectedChange: "selectedChange", onSelect: "onSelect" }, queries: [{ propertyName: "options", predicate: BizySidebarOptionComponent }], ngImport: i0, template: "<bizy-accordion\n  class=\"{{customClass}}\"\n  [id]=\"id\"\n  customClass=\"bizy-sidebar-option {{_selected && (!options || options.length === 0) ? 'bizy-sidebar-option--selected' : ''}} {{!selectable ? 'bizy-sidebar-option--no-selectable' : ''}} {{disabled ? 'bizy-sidebar-option--disabled' : ''}}\"\n  [opened]=\"_selected\"\n  (onSelect)=\"_onSelect($event)\">\n\n  <ng-content></ng-content>\n\n  @if (options && options.length > 0) {\n    <ng-container accordion-option>\n      <ng-content select=\"bizy-sidebar-option\"></ng-content>\n    </ng-container>\n  }\n\n</bizy-accordion>", styles: [":host{font-size:1rem;direction:ltr;--bizy-accordion-padding: var(--bizy-sidebar-option-padding)}:host:not(:has(.bizy-sidebar-option--disabled)) ::ng-deep .bizy-sidebar-option:hover{--bizy-accordion-background-color: var(--bizy-sidebar-option-hover-color) }::ng-deep .bizy-accordion__options{position:sticky}:host ::ng-deep .bizy-accordion__options:before{content:\"\";position:absolute;inset:0;background-color:#000;opacity:.3}::ng-deep .bizy-sidebar-option--selected{--bizy-accordion-background-color: var(--bizy-sidebar-option-selected-color) !important}::ng-deep .bizy-sidebar-option--no-selectable{pointer-events:none;cursor:default!important}::ng-deep .bizy-sidebar-option--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}::ng-deep .bizy-accordion__options--opened{max-height:100%!important}\n"], dependencies: [{ kind: "component", type: BizyAccordionComponent, selector: "bizy-accordion", inputs: ["id", "customClass", "disabled", "opened"], outputs: ["openedChange", "onSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySidebarOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizy-sidebar-option', imports: [BizyAccordionComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bizy-accordion\n  class=\"{{customClass}}\"\n  [id]=\"id\"\n  customClass=\"bizy-sidebar-option {{_selected && (!options || options.length === 0) ? 'bizy-sidebar-option--selected' : ''}} {{!selectable ? 'bizy-sidebar-option--no-selectable' : ''}} {{disabled ? 'bizy-sidebar-option--disabled' : ''}}\"\n  [opened]=\"_selected\"\n  (onSelect)=\"_onSelect($event)\">\n\n  <ng-content></ng-content>\n\n  @if (options && options.length > 0) {\n    <ng-container accordion-option>\n      <ng-content select=\"bizy-sidebar-option\"></ng-content>\n    </ng-container>\n  }\n\n</bizy-accordion>", styles: [":host{font-size:1rem;direction:ltr}:host:not(:has(.bizy-sidebar-option--disabled)) ::ng-deep .bizy-sidebar-option:hover{--bizy-accordion-background-color: var(--bizy-sidebar-option-hover-color) }::ng-deep .bizy-accordion__options{position:sticky}:host ::ng-deep .bizy-accordion__options:before{content:\"\";position:absolute;inset:0;background-color:#000;opacity:.3}::ng-deep .bizy-sidebar-option--selected{--bizy-accordion-background-color: var(--bizy-sidebar-option-selected-color) !important}::ng-deep .bizy-sidebar-option--no-selectable{pointer-events:none;cursor:default!important}::ng-deep .bizy-sidebar-option--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}::ng-deep .bizy-accordion__options--opened{max-height:100%!important}\n"] }]
+            args: [{ selector: 'bizy-sidebar-option', imports: [BizyAccordionComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<bizy-accordion\n  class=\"{{customClass}}\"\n  [id]=\"id\"\n  customClass=\"bizy-sidebar-option {{_selected && (!options || options.length === 0) ? 'bizy-sidebar-option--selected' : ''}} {{!selectable ? 'bizy-sidebar-option--no-selectable' : ''}} {{disabled ? 'bizy-sidebar-option--disabled' : ''}}\"\n  [opened]=\"_selected\"\n  (onSelect)=\"_onSelect($event)\">\n\n  <ng-content></ng-content>\n\n  @if (options && options.length > 0) {\n    <ng-container accordion-option>\n      <ng-content select=\"bizy-sidebar-option\"></ng-content>\n    </ng-container>\n  }\n\n</bizy-accordion>", styles: [":host{font-size:1rem;direction:ltr;--bizy-accordion-padding: var(--bizy-sidebar-option-padding)}:host:not(:has(.bizy-sidebar-option--disabled)) ::ng-deep .bizy-sidebar-option:hover{--bizy-accordion-background-color: var(--bizy-sidebar-option-hover-color) }::ng-deep .bizy-accordion__options{position:sticky}:host ::ng-deep .bizy-accordion__options:before{content:\"\";position:absolute;inset:0;background-color:#000;opacity:.3}::ng-deep .bizy-sidebar-option--selected{--bizy-accordion-background-color: var(--bizy-sidebar-option-selected-color) !important}::ng-deep .bizy-sidebar-option--no-selectable{pointer-events:none;cursor:default!important}::ng-deep .bizy-sidebar-option--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}::ng-deep .bizy-accordion__options--opened{max-height:100%!important}\n"] }]
         }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [BizySidebarOptionComponent]
@@ -16139,11 +16187,11 @@ class BizySidebarFloatingOptionComponent {
         this.#optionSubscription.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySidebarFloatingOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizySidebarFloatingOptionComponent, isStandalone: true, selector: "bizy-sidebar-floating-option", inputs: { id: "id", disabled: "disabled", selectable: "selectable", offsetX: "offsetX", offsetY: "offsetY", customClass: "customClass", selected: "selected" }, outputs: { selectedChange: "selectedChange", onSelect: "onSelect" }, queries: [{ propertyName: "options", predicate: BizySidebarOptionComponent }], ngImport: i0, template: "<button \n    type=\"button\"\n    class=\"bizy-sidebar-floating-option {{customClass}}\"\n    [ngClass]=\"{'bizy-sidebar-floating-option--selected': _selected, 'bizy-sidebar-floating-option--no-selectable': !selectable, 'bizy-sidebar-floating-option--disabled': disabled}\"\n    [id]=\"id\"\n    (click)=\"_onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\"\n    cdkOverlayOrigin \n    #bizySidebarFloatingOptionTrigger=\"cdkOverlayOrigin\">\n\n    <span class=\"bizy-sidebar-floating-option__content\">\n        <ng-content></ng-content>\n    </span>\n    \n</button>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOffsetX]=\"offsetX\"\n    [cdkConnectedOverlayOffsetY]=\"offsetY\"\n    [cdkConnectedOverlayOrigin]=\"bizySidebarFloatingOptionTrigger\"\n    (overlayOutsideClick)=\"close($event)\"\n    [cdkConnectedOverlayOpen]=\"_opened && options && options.length > 0\">\n\n    <span class=\"bizy-sidebar-floating-option__options\">\n\n        <ng-content select=\"bizy-sidebar-floating-option-title\"></ng-content>\n\n        <ng-content select=\"bizy-sidebar-option\"></ng-content>\n\n    </span>\n\n</ng-template>", styles: [":host{font-size:1rem;direction:ltr}.bizy-sidebar-floating-option{background-color:var(--bizy-sidebar-floating-option-background-color);color:var(--bizy-sidebar-floating-option-color);border:none;display:flex;align-items:center;justify-content:center;column-gap:.5rem;padding:1rem;width:100%;cursor:pointer;border-top-left-radius:.3rem}.bizy-sidebar-floating-option:hover{background-color:var(--bizy-sidebar-option-hover-color)}.bizy-sidebar-floating-option--selected{background-color:var(--bizy-sidebar-option-selected-color)!important}.bizy-sidebar-floating-option--no-selectable{pointer-events:none;cursor:default!important}.bizy-sidebar-floating-option--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-sidebar-floating-option__content{font-size:1rem;display:flex;align-items:center;column-gap:.3rem;pointer-events:none}.bizy-sidebar-floating-option__options{background-color:var(--bizy-sidebar-floating-option-background-color);min-width:calc(100% + 2rem);max-width:calc(100dvw - 2rem);border-radius:.3rem;max-height:30rem;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizySidebarFloatingOptionComponent, isStandalone: true, selector: "bizy-sidebar-floating-option", inputs: { id: "id", disabled: "disabled", selectable: "selectable", offsetX: "offsetX", offsetY: "offsetY", customClass: "customClass", selected: "selected" }, outputs: { selectedChange: "selectedChange", onSelect: "onSelect" }, queries: [{ propertyName: "options", predicate: BizySidebarOptionComponent }], ngImport: i0, template: "<button \n    type=\"button\"\n    class=\"bizy-sidebar-floating-option {{customClass}}\"\n    [ngClass]=\"{'bizy-sidebar-floating-option--selected': _selected, 'bizy-sidebar-floating-option--no-selectable': !selectable, 'bizy-sidebar-floating-option--disabled': disabled}\"\n    [id]=\"id\"\n    (click)=\"_onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\"\n    cdkOverlayOrigin \n    #bizySidebarFloatingOptionTrigger=\"cdkOverlayOrigin\">\n\n    <span class=\"bizy-sidebar-floating-option__content\">\n        <ng-content></ng-content>\n    </span>\n    \n</button>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOffsetX]=\"offsetX\"\n    [cdkConnectedOverlayOffsetY]=\"offsetY\"\n    [cdkConnectedOverlayOrigin]=\"bizySidebarFloatingOptionTrigger\"\n    (overlayOutsideClick)=\"close($event)\"\n    [cdkConnectedOverlayOpen]=\"_opened && options && options.length > 0\">\n\n    <span class=\"bizy-sidebar-floating-option__options\">\n\n        <ng-content select=\"bizy-sidebar-floating-option-title\"></ng-content>\n\n        <ng-content select=\"bizy-sidebar-option\"></ng-content>\n\n    </span>\n\n</ng-template>", styles: [":host{font-size:1rem;direction:ltr}.bizy-sidebar-floating-option{background-color:var(--bizy-sidebar-floating-option-background-color);color:var(--bizy-sidebar-floating-option-color);border:none;display:flex;align-items:center;justify-content:center;column-gap:var(--bizy-sidebar-option-padding);padding:1rem;width:100%;cursor:pointer;border-top-left-radius:.3rem}.bizy-sidebar-floating-option:hover{background-color:var(--bizy-sidebar-option-hover-color)}.bizy-sidebar-floating-option--selected{background-color:var(--bizy-sidebar-option-selected-color)!important}.bizy-sidebar-floating-option--no-selectable{pointer-events:none;cursor:default!important}.bizy-sidebar-floating-option--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-sidebar-floating-option__content{font-size:1rem;display:flex;align-items:center;column-gap:.3rem;pointer-events:none}.bizy-sidebar-floating-option__options{background-color:var(--bizy-sidebar-floating-option-background-color);min-width:calc(100% + 2rem);max-width:calc(100dvw - 2rem);border-radius:.3rem;max-height:30rem;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySidebarFloatingOptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'bizy-sidebar-floating-option', imports: [CommonModule, OverlayModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n    type=\"button\"\n    class=\"bizy-sidebar-floating-option {{customClass}}\"\n    [ngClass]=\"{'bizy-sidebar-floating-option--selected': _selected, 'bizy-sidebar-floating-option--no-selectable': !selectable, 'bizy-sidebar-floating-option--disabled': disabled}\"\n    [id]=\"id\"\n    (click)=\"_onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\"\n    cdkOverlayOrigin \n    #bizySidebarFloatingOptionTrigger=\"cdkOverlayOrigin\">\n\n    <span class=\"bizy-sidebar-floating-option__content\">\n        <ng-content></ng-content>\n    </span>\n    \n</button>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOffsetX]=\"offsetX\"\n    [cdkConnectedOverlayOffsetY]=\"offsetY\"\n    [cdkConnectedOverlayOrigin]=\"bizySidebarFloatingOptionTrigger\"\n    (overlayOutsideClick)=\"close($event)\"\n    [cdkConnectedOverlayOpen]=\"_opened && options && options.length > 0\">\n\n    <span class=\"bizy-sidebar-floating-option__options\">\n\n        <ng-content select=\"bizy-sidebar-floating-option-title\"></ng-content>\n\n        <ng-content select=\"bizy-sidebar-option\"></ng-content>\n\n    </span>\n\n</ng-template>", styles: [":host{font-size:1rem;direction:ltr}.bizy-sidebar-floating-option{background-color:var(--bizy-sidebar-floating-option-background-color);color:var(--bizy-sidebar-floating-option-color);border:none;display:flex;align-items:center;justify-content:center;column-gap:.5rem;padding:1rem;width:100%;cursor:pointer;border-top-left-radius:.3rem}.bizy-sidebar-floating-option:hover{background-color:var(--bizy-sidebar-option-hover-color)}.bizy-sidebar-floating-option--selected{background-color:var(--bizy-sidebar-option-selected-color)!important}.bizy-sidebar-floating-option--no-selectable{pointer-events:none;cursor:default!important}.bizy-sidebar-floating-option--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-sidebar-floating-option__content{font-size:1rem;display:flex;align-items:center;column-gap:.3rem;pointer-events:none}.bizy-sidebar-floating-option__options{background-color:var(--bizy-sidebar-floating-option-background-color);min-width:calc(100% + 2rem);max-width:calc(100dvw - 2rem);border-radius:.3rem;max-height:30rem;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014}\n"] }]
+            args: [{ selector: 'bizy-sidebar-floating-option', imports: [CommonModule, OverlayModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button \n    type=\"button\"\n    class=\"bizy-sidebar-floating-option {{customClass}}\"\n    [ngClass]=\"{'bizy-sidebar-floating-option--selected': _selected, 'bizy-sidebar-floating-option--no-selectable': !selectable, 'bizy-sidebar-floating-option--disabled': disabled}\"\n    [id]=\"id\"\n    (click)=\"_onSelect($event)\"\n    (keyup.enter)=\"_onSelect($event)\"\n    cdkOverlayOrigin \n    #bizySidebarFloatingOptionTrigger=\"cdkOverlayOrigin\">\n\n    <span class=\"bizy-sidebar-floating-option__content\">\n        <ng-content></ng-content>\n    </span>\n    \n</button>\n\n<ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOffsetX]=\"offsetX\"\n    [cdkConnectedOverlayOffsetY]=\"offsetY\"\n    [cdkConnectedOverlayOrigin]=\"bizySidebarFloatingOptionTrigger\"\n    (overlayOutsideClick)=\"close($event)\"\n    [cdkConnectedOverlayOpen]=\"_opened && options && options.length > 0\">\n\n    <span class=\"bizy-sidebar-floating-option__options\">\n\n        <ng-content select=\"bizy-sidebar-floating-option-title\"></ng-content>\n\n        <ng-content select=\"bizy-sidebar-option\"></ng-content>\n\n    </span>\n\n</ng-template>", styles: [":host{font-size:1rem;direction:ltr}.bizy-sidebar-floating-option{background-color:var(--bizy-sidebar-floating-option-background-color);color:var(--bizy-sidebar-floating-option-color);border:none;display:flex;align-items:center;justify-content:center;column-gap:var(--bizy-sidebar-option-padding);padding:1rem;width:100%;cursor:pointer;border-top-left-radius:.3rem}.bizy-sidebar-floating-option:hover{background-color:var(--bizy-sidebar-option-hover-color)}.bizy-sidebar-floating-option--selected{background-color:var(--bizy-sidebar-option-selected-color)!important}.bizy-sidebar-floating-option--no-selectable{pointer-events:none;cursor:default!important}.bizy-sidebar-floating-option--disabled{pointer-events:none;opacity:.5;cursor:not-allowed!important}.bizy-sidebar-floating-option__content{font-size:1rem;display:flex;align-items:center;column-gap:.3rem;pointer-events:none}.bizy-sidebar-floating-option__options{background-color:var(--bizy-sidebar-floating-option-background-color);min-width:calc(100% + 2rem);max-width:calc(100dvw - 2rem);border-radius:.3rem;max-height:30rem;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014}\n"] }]
         }], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [BizySidebarOptionComponent]
@@ -16365,7 +16413,7 @@ class BizySkeletonComponent {
     BIZY_SKELETON_SHAPE = BIZY_SKELETON_SHAPE;
     getNativeElement = () => this.#elementRef?.nativeElement;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizySkeletonComponent, isStandalone: true, selector: "bizy-skeleton", inputs: { id: "id", shape: "shape", height: "height", width: "width", customClass: "customClass" }, host: { properties: { "id": "id", "style.width": "width", "style.min-width": "width", "style.height": "height", "style.min-height": "height", "class": "customClass", "style.border-radius": "shape === BIZY_SKELETON_SHAPE.CIRCLE ? \"50%\" : \"0\"" } }, ngImport: i0, template: "", styles: [":host{font-size:1rem;height:var(--bizy-skeleton-height);width:var(--bizy-skeleton-width);display:inline-block;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:bizy-skeleton-animation 1.5s infinite linear}@keyframes bizy-skeleton-animation{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.5", type: BizySkeletonComponent, isStandalone: true, selector: "bizy-skeleton", inputs: { id: "id", shape: "shape", height: "height", width: "width", customClass: "customClass" }, host: { properties: { "id": "id", "style.width": "width", "style.min-width": "width", "style.height": "height", "style.min-height": "height", "class": "customClass", "style.border-radius": "shape === BIZY_SKELETON_SHAPE.CIRCLE ? \"50%\" : \"0\"" } }, ngImport: i0, template: "", styles: [":host{font-size:1rem;height:var(--bizy-skeleton-height);width:var(--bizy-skeleton-width);display:inline-block;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#e3e3e3 75%);background-size:200% 100%;animation:bizy-skeleton-animation 1.5s infinite linear}@keyframes bizy-skeleton-animation{0%{background-position:-200% 0}to{background-position:200% 0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: BizySkeletonComponent, decorators: [{
             type: Component,
@@ -16377,7 +16425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImpor
                         '[style.min-height]': 'height',
                         '[class]': 'customClass',
                         '[style.border-radius]': 'shape === BIZY_SKELETON_SHAPE.CIRCLE ? "50%" : "0"'
-                    }, template: "", styles: [":host{font-size:1rem;height:var(--bizy-skeleton-height);width:var(--bizy-skeleton-width);display:inline-block;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#eee 75%);background-size:200% 100%;animation:bizy-skeleton-animation 1.5s infinite linear}@keyframes bizy-skeleton-animation{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
+                    }, template: "", styles: [":host{font-size:1rem;height:var(--bizy-skeleton-height);width:var(--bizy-skeleton-width);display:inline-block;background:linear-gradient(90deg,#eee 25%,#f5f5f5,#e3e3e3 75%);background-size:200% 100%;animation:bizy-skeleton-animation 1.5s infinite linear}@keyframes bizy-skeleton-animation{0%{background-position:-200% 0}to{background-position:200% 0}}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], shape: [{