@caribeng/ui 22.2.0 → 22.5.0

package/fesm2022/caribeng-ui-drawer.mjs

@@ -38,6 +38,9 @@ class CbDrawer {
         this.closeOnEscape = input(true, { ...(ngDevMode ? { debugName: "closeOnEscape" } : /* istanbul ignore next */ {}), transform: toBoolean });
         this.ariaLabel = input(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Ancho (izquierda/derecha) o alto (arriba/abajo) del panel, p. ej. `'32rem'`. */
+        this.size = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
         this.onShow = output();
         this.onHide = output();
         this.titleId = `cb-drawer-${nextUid()}-title`;
@@ -99,11 +102,12 @@ class CbDrawer {
         this.onHide.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDrawer, isStandalone: true, selector: "cb-drawer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onShow: "onShow", onHide: "onHide" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CbDrawer, isStandalone: true, selector: "cb-drawer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, dismissableMask: { classPropertyName: "dismissableMask", publicName: "dismissableMask", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", onShow: "onShow", onHide: "onHide" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ng-template #tpl>
       <div
         class="cb-drawer"
         [class]="'cb-drawer--' + position()"
+        [style.--cb-drawer-size]="size() || null"
         role="dialog"
         aria-modal="true"
         [attr.aria-labelledby]="header() ? titleId : null"
@@ -127,7 +131,7 @@ class CbDrawer {
         <footer class="cb-drawer__footer"><ng-content select="[cb-drawer-footer]" /></footer>
       </div>
     </ng-template>
-  `, isInline: true, styles: [".cb-drawer{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);box-shadow:var(--cb-shadow-lg);overflow:hidden}.cb-drawer--left,.cb-drawer--right{width:min(22rem,100vw);height:100vh}.cb-drawer--top,.cb-drawer--bottom{width:100vw;height:min(18rem,100vh)}.cb-drawer--right{animation:cb-drawer-right var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--left{animation:cb-drawer-left var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--top{animation:cb-drawer-top var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--bottom{animation:cb-drawer-bottom var(--cb-duration-normal, .22s) var(--cb-ease, ease)}@keyframes cb-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cb-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes cb-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cb-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cb-drawer{animation:none!important}}.cb-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5);border-bottom:1px solid var(--cb-color-border)}.cb-drawer__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold)}.cb-drawer__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-drawer__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-drawer__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-drawer__body{flex:1 1 auto;padding:var(--cb-space-5);overflow-y:auto}.cb-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5)}.cb-drawer__footer:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: [".cb-drawer{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);box-shadow:var(--cb-shadow-lg);overflow:hidden}.cb-drawer--left,.cb-drawer--right{width:min(var(--cb-drawer-size, 22rem),100vw);height:100vh}.cb-drawer--top,.cb-drawer--bottom{width:100vw;height:min(var(--cb-drawer-size, 18rem),100vh)}.cb-drawer--right{animation:cb-drawer-right var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--left{animation:cb-drawer-left var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--top{animation:cb-drawer-top var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--bottom{animation:cb-drawer-bottom var(--cb-duration-normal, .22s) var(--cb-ease, ease)}@keyframes cb-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cb-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes cb-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cb-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cb-drawer{animation:none!important}}.cb-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5);border-bottom:1px solid var(--cb-color-border)}.cb-drawer__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold)}.cb-drawer__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-drawer__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-drawer__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-drawer__body{flex:1 1 auto;padding:var(--cb-space-5);overflow-y:auto}.cb-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5)}.cb-drawer__footer:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: CbIcon, selector: "cb-icon", inputs: ["name", "size", "spin", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CbDrawer, decorators: [{
             type: Component,
@@ -136,6 +140,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <div
         class="cb-drawer"
         [class]="'cb-drawer--' + position()"
+        [style.--cb-drawer-size]="size() || null"
         role="dialog"
         aria-modal="true"
         [attr.aria-labelledby]="header() ? titleId : null"
@@ -159,8 +164,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         <footer class="cb-drawer__footer"><ng-content select="[cb-drawer-footer]" /></footer>
       </div>
     </ng-template>
-  `, styles: [".cb-drawer{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);box-shadow:var(--cb-shadow-lg);overflow:hidden}.cb-drawer--left,.cb-drawer--right{width:min(22rem,100vw);height:100vh}.cb-drawer--top,.cb-drawer--bottom{width:100vw;height:min(18rem,100vh)}.cb-drawer--right{animation:cb-drawer-right var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--left{animation:cb-drawer-left var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--top{animation:cb-drawer-top var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--bottom{animation:cb-drawer-bottom var(--cb-duration-normal, .22s) var(--cb-ease, ease)}@keyframes cb-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cb-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes cb-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cb-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cb-drawer{animation:none!important}}.cb-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5);border-bottom:1px solid var(--cb-color-border)}.cb-drawer__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold)}.cb-drawer__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-drawer__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-drawer__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-drawer__body{flex:1 1 auto;padding:var(--cb-space-5);overflow-y:auto}.cb-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5)}.cb-drawer__footer:empty{display:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissableMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissableMask", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
+  `, styles: [".cb-drawer{display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--cb-color-surface-raised);color:var(--cb-color-text);font-family:var(--cb-font-sans);box-shadow:var(--cb-shadow-lg);overflow:hidden}.cb-drawer--left,.cb-drawer--right{width:min(var(--cb-drawer-size, 22rem),100vw);height:100vh}.cb-drawer--top,.cb-drawer--bottom{width:100vw;height:min(var(--cb-drawer-size, 18rem),100vh)}.cb-drawer--right{animation:cb-drawer-right var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--left{animation:cb-drawer-left var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--top{animation:cb-drawer-top var(--cb-duration-normal, .22s) var(--cb-ease, ease)}.cb-drawer--bottom{animation:cb-drawer-bottom var(--cb-duration-normal, .22s) var(--cb-ease, ease)}@keyframes cb-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes cb-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes cb-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes cb-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cb-drawer{animation:none!important}}.cb-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5);border-bottom:1px solid var(--cb-color-border)}.cb-drawer__title{margin:0;font-size:var(--cb-text-lg);font-weight:var(--cb-font-weight-semibold)}.cb-drawer__close{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border:none;border-radius:var(--cb-radius-md);background:transparent;color:var(--cb-color-text-muted);cursor:pointer;transition:background var(--cb-duration-fast) var(--cb-ease)}.cb-drawer__close:hover{background:var(--cb-color-surface-hover);color:var(--cb-color-text)}.cb-drawer__close:focus-visible{outline:2px solid var(--cb-color-focus-ring);outline-offset:2px}.cb-drawer__body{flex:1 1 auto;padding:var(--cb-space-5);overflow-y:auto}.cb-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--cb-space-3);padding:var(--cb-space-4) var(--cb-space-5)}.cb-drawer__footer:empty{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }, { type: i0.Output, args: ["visibleChange"] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], dismissableMask: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissableMask", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], tpl: [{ type: i0.ViewChild, args: ['tpl', { isSignal: true }] }] } });
 let uid = 0;
 function nextUid() {
     return ++uid;