@telcomdev/ui 0.1.27 → 0.1.28

package/fesm2022/telcomdev-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, Injectable, inject, HostBinding, Input, booleanAttribute, EventEmitter, Output, ViewChild, Injector, ChangeDetectorRef, signal, input, model, output, computed, forwardRef, InjectionToken, ElementRef, HostListener, Directive, EnvironmentInjector, DestroyRef, effect, TemplateRef, ViewChildren, ContentChildren, ViewContainerRef, Renderer2, numberAttribute } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injectable, inject, HostBinding, Input, booleanAttribute, EventEmitter, Output, ViewChild, Injector, ChangeDetectorRef, signal, input, model, output, computed, forwardRef, InjectionToken, ElementRef, HostListener, Directive, EnvironmentInjector, ContentChild, DestroyRef, effect, TemplateRef, ViewChildren, ContentChildren, ViewContainerRef, Renderer2, numberAttribute } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { FORM_FIELD } from '@angular/forms/signals';
@@ -5718,6 +5718,272 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 type: Input
             }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
+class TdLayoutHeaderSlot {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdLayoutHeaderSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: TdLayoutHeaderSlot, isStandalone: true, selector: "[tdLayoutHeader]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdLayoutHeaderSlot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdLayoutHeader]',
+                }]
+        }] });
+class TdLayoutSidebarSlot {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdLayoutSidebarSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: TdLayoutSidebarSlot, isStandalone: true, selector: "[tdLayoutSidebar]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdLayoutSidebarSlot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdLayoutSidebar]',
+                }]
+        }] });
+class TdLayoutContentSlot {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdLayoutContentSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: TdLayoutContentSlot, isStandalone: true, selector: "[tdLayoutContent]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdLayoutContentSlot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdLayoutContent]',
+                }]
+        }] });
+class TdLayoutFooterSlot {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdLayoutFooterSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: TdLayoutFooterSlot, isStandalone: true, selector: "[tdLayoutFooter]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdLayoutFooterSlot, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdLayoutFooter]',
+                }]
+        }] });
+class TdLayout {
+    headerSlot;
+    sidebarSlot;
+    footerSlot;
+    sidebarOpenState = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sidebarOpenState" }] : /* istanbul ignore next */ []));
+    mobile = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mobile" }] : /* istanbul ignore next */ []));
+    fillViewport = true;
+    closeSidebarOnBackdrop = true;
+    mobileBreakpoint = 960;
+    sidebarPlacement = 'auto';
+    headerSpan = 'content';
+    footerSpan = 'content';
+    set sidebarOpen(value) {
+        this.sidebarOpenState.set(value);
+    }
+    get sidebarOpen() {
+        return this.sidebarOpenState();
+    }
+    sidebarOpenChange = new EventEmitter();
+    get hasHeader() {
+        return !!this.headerSlot;
+    }
+    get hasSidebar() {
+        return !!this.sidebarSlot;
+    }
+    get hasFooter() {
+        return !!this.footerSlot;
+    }
+    ngAfterContentInit() {
+        this.syncViewport();
+    }
+    syncViewport() {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        this.mobile.set(window.innerWidth <= this.mobileBreakpoint);
+    }
+    sidebarAsOverlay() {
+        if (this.sidebarPlacement === 'overlay') {
+            return true;
+        }
+        if (this.sidebarPlacement === 'inline') {
+            return false;
+        }
+        return this.mobile();
+    }
+    headerFullWidth() {
+        return this.headerSpan === 'full';
+    }
+    footerFullWidth() {
+        return this.footerSpan === 'full';
+    }
+    openSidebar() {
+        this.setSidebarOpen(true);
+    }
+    closeSidebar() {
+        this.setSidebarOpen(false);
+    }
+    toggleSidebar() {
+        this.setSidebarOpen(!this.sidebarOpen);
+    }
+    setSidebarOpen(value) {
+        if (this.sidebarOpen === value) {
+            return;
+        }
+        this.sidebarOpenState.set(value);
+        this.sidebarOpenChange.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdLayout, isStandalone: true, selector: "td-layout, td-shell", inputs: { fillViewport: ["fillViewport", "fillViewport", booleanAttribute], closeSidebarOnBackdrop: ["closeSidebarOnBackdrop", "closeSidebarOnBackdrop", booleanAttribute], mobileBreakpoint: "mobileBreakpoint", sidebarPlacement: "sidebarPlacement", headerSpan: "headerSpan", footerSpan: "footerSpan", sidebarOpen: "sidebarOpen" }, outputs: { sidebarOpenChange: "sidebarOpenChange" }, host: { listeners: { "window:resize": "syncViewport()" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: TdLayoutHeaderSlot, descendants: true }, { propertyName: "sidebarSlot", first: true, predicate: TdLayoutSidebarSlot, descendants: true }, { propertyName: "footerSlot", first: true, predicate: TdLayoutFooterSlot, descendants: true }], ngImport: i0, template: `
+    <div
+      class="td-layout"
+      [class.td-layout--viewport]="fillViewport"
+      [class.td-layout--mobile]="mobile()"
+      [class.td-layout--sidebar]="hasSidebar"
+      [class.td-layout--sidebar-overlay]="sidebarAsOverlay()"
+      [class.td-layout--sidebar-open]="sidebarOpen"
+      [class.td-layout--header-full]="headerFullWidth()"
+      [class.td-layout--footer-full]="footerFullWidth()"
+    >
+      @if (hasHeader && headerFullWidth()) {
+        <div class="td-layout__header td-layout__header--full">
+          <ng-content select="[tdLayoutHeader]"></ng-content>
+        </div>
+      }
+
+      <div class="td-layout__body">
+        @if (hasSidebar && sidebarAsOverlay() && sidebarOpen && closeSidebarOnBackdrop) {
+          <button
+            type="button"
+            class="td-layout__backdrop"
+            aria-label="Cerrar navegación"
+            (click)="closeSidebar()"
+          ></button>
+        }
+
+        @if (hasSidebar) {
+          <aside class="td-layout__sidebar" [attr.aria-hidden]="sidebarAsOverlay() && !sidebarOpen">
+            <ng-content select="[tdLayoutSidebar]"></ng-content>
+          </aside>
+        }
+
+        <div class="td-layout__main">
+          @if (hasHeader && !headerFullWidth()) {
+            <div class="td-layout__header td-layout__header--content">
+              <ng-content select="[tdLayoutHeader]"></ng-content>
+            </div>
+          }
+
+          <main class="td-layout__content">
+            <ng-content select="[tdLayoutContent]"></ng-content>
+            <ng-content></ng-content>
+          </main>
+
+          @if (hasFooter && !footerFullWidth()) {
+            <div class="td-layout__footer td-layout__footer--content">
+              <ng-content select="[tdLayoutFooter]"></ng-content>
+            </div>
+          }
+        </div>
+      </div>
+
+      @if (hasFooter && footerFullWidth()) {
+        <div class="td-layout__footer td-layout__footer--full">
+          <ng-content select="[tdLayoutFooter]"></ng-content>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;min-width:0}.td-layout,.td-layout *{box-sizing:border-box}.td-layout{position:relative;display:grid;min-width:0;min-height:0;grid-template-rows:auto minmax(0,1fr) auto}.td-layout--viewport{min-height:100dvh}.td-layout__header,.td-layout__body,.td-layout__main,.td-layout__content,.td-layout__footer{min-width:0}.td-layout__body{position:relative;display:grid;min-width:0;min-height:0;grid-template-columns:auto minmax(0,1fr)}.td-layout__main{display:grid;min-width:0;min-height:0;grid-template-rows:auto minmax(0,1fr) auto}.td-layout__content,.td-layout__sidebar{min-width:0;min-height:0}.td-layout__sidebar{position:relative;z-index:4}.td-layout__header,.td-layout__footer{position:relative;z-index:3}.td-layout__backdrop{position:absolute;inset:0;z-index:3;border:0;background:#0f172a57;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);cursor:pointer}.td-layout:not(.td-layout--sidebar) .td-layout__body{grid-template-columns:minmax(0,1fr)}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__body{grid-template-columns:minmax(0,1fr)}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__sidebar{position:absolute;inset:0 auto 0 0;width:min(86vw,22rem);max-width:100%;transform:translate(-108%);transition:transform .18s ease,visibility .18s ease;visibility:hidden;pointer-events:none}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__sidebar{transform:translate(0);visibility:visible;pointer-events:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdLayout, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-layout, td-shell', template: `
+    <div
+      class="td-layout"
+      [class.td-layout--viewport]="fillViewport"
+      [class.td-layout--mobile]="mobile()"
+      [class.td-layout--sidebar]="hasSidebar"
+      [class.td-layout--sidebar-overlay]="sidebarAsOverlay()"
+      [class.td-layout--sidebar-open]="sidebarOpen"
+      [class.td-layout--header-full]="headerFullWidth()"
+      [class.td-layout--footer-full]="footerFullWidth()"
+    >
+      @if (hasHeader && headerFullWidth()) {
+        <div class="td-layout__header td-layout__header--full">
+          <ng-content select="[tdLayoutHeader]"></ng-content>
+        </div>
+      }
+
+      <div class="td-layout__body">
+        @if (hasSidebar && sidebarAsOverlay() && sidebarOpen && closeSidebarOnBackdrop) {
+          <button
+            type="button"
+            class="td-layout__backdrop"
+            aria-label="Cerrar navegación"
+            (click)="closeSidebar()"
+          ></button>
+        }
+
+        @if (hasSidebar) {
+          <aside class="td-layout__sidebar" [attr.aria-hidden]="sidebarAsOverlay() && !sidebarOpen">
+            <ng-content select="[tdLayoutSidebar]"></ng-content>
+          </aside>
+        }
+
+        <div class="td-layout__main">
+          @if (hasHeader && !headerFullWidth()) {
+            <div class="td-layout__header td-layout__header--content">
+              <ng-content select="[tdLayoutHeader]"></ng-content>
+            </div>
+          }
+
+          <main class="td-layout__content">
+            <ng-content select="[tdLayoutContent]"></ng-content>
+            <ng-content></ng-content>
+          </main>
+
+          @if (hasFooter && !footerFullWidth()) {
+            <div class="td-layout__footer td-layout__footer--content">
+              <ng-content select="[tdLayoutFooter]"></ng-content>
+            </div>
+          }
+        </div>
+      </div>
+
+      @if (hasFooter && footerFullWidth()) {
+        <div class="td-layout__footer td-layout__footer--full">
+          <ng-content select="[tdLayoutFooter]"></ng-content>
+        </div>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0}.td-layout,.td-layout *{box-sizing:border-box}.td-layout{position:relative;display:grid;min-width:0;min-height:0;grid-template-rows:auto minmax(0,1fr) auto}.td-layout--viewport{min-height:100dvh}.td-layout__header,.td-layout__body,.td-layout__main,.td-layout__content,.td-layout__footer{min-width:0}.td-layout__body{position:relative;display:grid;min-width:0;min-height:0;grid-template-columns:auto minmax(0,1fr)}.td-layout__main{display:grid;min-width:0;min-height:0;grid-template-rows:auto minmax(0,1fr) auto}.td-layout__content,.td-layout__sidebar{min-width:0;min-height:0}.td-layout__sidebar{position:relative;z-index:4}.td-layout__header,.td-layout__footer{position:relative;z-index:3}.td-layout__backdrop{position:absolute;inset:0;z-index:3;border:0;background:#0f172a57;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);cursor:pointer}.td-layout:not(.td-layout--sidebar) .td-layout__body{grid-template-columns:minmax(0,1fr)}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__body{grid-template-columns:minmax(0,1fr)}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__sidebar{position:absolute;inset:0 auto 0 0;width:min(86vw,22rem);max-width:100%;transform:translate(-108%);transition:transform .18s ease,visibility .18s ease;visibility:hidden;pointer-events:none}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__sidebar{transform:translate(0);visibility:visible;pointer-events:auto}\n"] }]
+        }], propDecorators: { headerSlot: [{
+                type: ContentChild,
+                args: [TdLayoutHeaderSlot]
+            }], sidebarSlot: [{
+                type: ContentChild,
+                args: [TdLayoutSidebarSlot]
+            }], footerSlot: [{
+                type: ContentChild,
+                args: [TdLayoutFooterSlot]
+            }], fillViewport: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], closeSidebarOnBackdrop: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], mobileBreakpoint: [{
+                type: Input
+            }], sidebarPlacement: [{
+                type: Input
+            }], headerSpan: [{
+                type: Input
+            }], footerSpan: [{
+                type: Input
+            }], sidebarOpen: [{
+                type: Input
+            }], sidebarOpenChange: [{
+                type: Output
+            }], syncViewport: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
 let radioSequence = 0;
 class TdRadioGroup {
     cdr = inject(ChangeDetectorRef);
@@ -8137,5 +8403,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlert, TdAlerta, TdAutocompleteSelect, TdBadge, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFileUpload, TdFileViewer, TdFileViewerService, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdMenu, TdRadioGroup, TdSelect, TdSidebar, TdTab, TdTabs, TdTextarea, TdThemeService, TdTooltip, TelcomdevUi, createTdFormControlBridge };
+export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlert, TdAlerta, TdAutocompleteSelect, TdBadge, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFileUpload, TdFileViewer, TdFileViewerService, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdLayout, TdLayoutContentSlot, TdLayoutFooterSlot, TdLayoutHeaderSlot, TdLayoutSidebarSlot, TdMenu, TdRadioGroup, TdSelect, TdSidebar, TdTab, TdTabs, TdTextarea, TdThemeService, TdTooltip, TelcomdevUi, createTdFormControlBridge };
 //# sourceMappingURL=telcomdev-ui.mjs.map