@edsis/ui 0.0.2 → 21.3.6

package/fesm2022/edsis-ui-label.mjs

@@ -6,10 +6,10 @@ class LabelComponent {
     for = input(null, ...(ngDevMode ? [{ debugName: "for" }] : /* istanbul ignore next */ []));
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
     classes = computed(() => cn('text-sm font-medium leading-none text-foreground', 'peer-disabled:cursor-not-allowed peer-disabled:opacity-70', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.14", type: LabelComponent, isStandalone: true, selector: "ui-label, label[ui-label]", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.for": "for() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: LabelComponent, isStandalone: true, selector: "ui-label, label[ui-label]", inputs: { for: { classPropertyName: "for", publicName: "for", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.for": "for() || null" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: LabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LabelComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ui-label, label[ui-label]',

package/fesm2022/edsis-ui-layout-services.mjs

@@ -0,0 +1,6 @@
+export { LayoutService } from '@edsis/ui/layout';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=edsis-ui-layout-services.mjs.map

package/fesm2022/edsis-ui-layout-services.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"edsis-ui-layout-services.mjs","sources":["../../../library/ui/layout/services/edsis-ui-layout-services.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;AAEG"}

package/fesm2022/edsis-ui-layout-types.mjs

@@ -0,0 +1,6 @@
+export { UI_LAYOUT_APPEARANCE_STORAGE_KEY, UI_LAYOUT_DEFAULT_STYLE, UI_LAYOUT_DEFAULT_SURFACE, UI_LAYOUT_DEFAULT_TYPE, UI_LAYOUT_DEFAULT_WIDTH, UI_LAYOUT_STYLES, UI_LAYOUT_STYLE_STORAGE_KEY, UI_LAYOUT_SURFACES, UI_LAYOUT_SURFACE_STORAGE_KEY, UI_LAYOUT_TYPES, UI_LAYOUT_TYPE_STORAGE_KEY, UI_LAYOUT_WIDTHS, UI_LAYOUT_WIDTH_STORAGE_KEY, isUiLayoutStyle, isUiLayoutSurface, isUiLayoutType, isUiLayoutWidth } from '@edsis/ui/layout';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=edsis-ui-layout-types.mjs.map

package/fesm2022/edsis-ui-layout-types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"edsis-ui-layout-types.mjs","sources":["../../../library/ui/layout/types/edsis-ui-layout-types.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;AAEG"}

package/fesm2022/edsis-ui-layout.mjs

@@ -0,0 +1,572 @@
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, signal, Injectable, input, computed, effect, ChangeDetectionStrategy, Component, contentChild } from '@angular/core';
+import { cn } from '@edsis/ui/utils';
+import { isPlatformBrowser } from '@angular/common';
+import { UiNavComponent } from '@edsis/ui/nav';
+
+const UI_LAYOUT_TYPES = ['vertical', 'horizontal', 'empty'];
+const UI_LAYOUT_SURFACES = ['flat', 'grid', 'honeycome', 'line-vertical', 'line-horizontal'];
+const UI_LAYOUT_STYLES = ['flat', 'border-rail'];
+const UI_LAYOUT_WIDTHS = ['full', 'wide', 'container'];
+const UI_LAYOUT_DEFAULT_SURFACE = 'flat';
+const UI_LAYOUT_DEFAULT_TYPE = 'vertical';
+const UI_LAYOUT_DEFAULT_STYLE = 'flat';
+const UI_LAYOUT_DEFAULT_WIDTH = 'full';
+const UI_LAYOUT_SURFACE_STORAGE_KEY = 'layout-surface';
+const UI_LAYOUT_APPEARANCE_STORAGE_KEY = 'layout-appearance';
+const UI_LAYOUT_TYPE_STORAGE_KEY = 'layout-type';
+const UI_LAYOUT_STYLE_STORAGE_KEY = 'layout-style';
+const UI_LAYOUT_WIDTH_STORAGE_KEY = 'layout-width';
+function isUiLayoutSurface(value) {
+    return value !== null && UI_LAYOUT_SURFACES.includes(value);
+}
+function isUiLayoutType(value) {
+    return value !== null && UI_LAYOUT_TYPES.includes(value);
+}
+function isUiLayoutStyle(value) {
+    return value !== null && UI_LAYOUT_STYLES.includes(value);
+}
+function isUiLayoutWidth(value) {
+    return value !== null && UI_LAYOUT_WIDTHS.includes(value);
+}
+
+class LayoutService {
+    platformId = inject(PLATFORM_ID);
+    surfaceState = signal(this.getStoredSurface(), ...(ngDevMode ? [{ debugName: "surfaceState" }] : /* istanbul ignore next */ []));
+    typeState = signal(this.getStoredType(), ...(ngDevMode ? [{ debugName: "typeState" }] : /* istanbul ignore next */ []));
+    styleState = signal(this.getStoredStyle(), ...(ngDevMode ? [{ debugName: "styleState" }] : /* istanbul ignore next */ []));
+    widthState = signal(this.getStoredWidth(), ...(ngDevMode ? [{ debugName: "widthState" }] : /* istanbul ignore next */ []));
+    surface = this.surfaceState.asReadonly();
+    type = this.typeState.asReadonly();
+    appearance = this.styleState.asReadonly();
+    style = this.styleState.asReadonly();
+    width = this.widthState.asReadonly();
+    registerDefaults(defaults) {
+        if (defaults.surface !== undefined) {
+            this.registerSurface(defaults.surface);
+        }
+        if (defaults.appearance !== undefined) {
+            this.registerAppearance(defaults.appearance);
+        }
+        if (defaults.type !== undefined) {
+            this.registerType(defaults.type);
+        }
+        if (defaults.width !== undefined) {
+            this.registerWidth(defaults.width);
+        }
+        return this;
+    }
+    registerSurface(surface) {
+        const storedSurface = this.readStorage(UI_LAYOUT_SURFACE_STORAGE_KEY);
+        if (isUiLayoutSurface(storedSurface)) {
+            this.surfaceState.set(storedSurface);
+            return;
+        }
+        this.setSurface(surface);
+    }
+    registerType(type) {
+        const storedType = this.readStorage(UI_LAYOUT_TYPE_STORAGE_KEY);
+        if (isUiLayoutType(storedType)) {
+            this.typeState.set(storedType);
+            return;
+        }
+        this.setType(type);
+    }
+    registerAppearance(appearance) {
+        this.setAppearance(this.getStoredAppearanceOrDefault(appearance));
+    }
+    registerStyle(style) {
+        this.registerAppearance(style);
+    }
+    registerWidth(width) {
+        const storedWidth = this.readStorage(UI_LAYOUT_WIDTH_STORAGE_KEY);
+        if (isUiLayoutWidth(storedWidth)) {
+            this.widthState.set(storedWidth);
+            return;
+        }
+        this.setWidth(width);
+    }
+    setSurface(surface) {
+        this.surfaceState.set(surface);
+        this.writeStorage(UI_LAYOUT_SURFACE_STORAGE_KEY, surface);
+    }
+    setType(type) {
+        this.typeState.set(type);
+        this.writeStorage(UI_LAYOUT_TYPE_STORAGE_KEY, type);
+    }
+    setAppearance(appearance) {
+        this.styleState.set(appearance);
+        this.writeStorage(UI_LAYOUT_APPEARANCE_STORAGE_KEY, appearance);
+        this.removeStorage(UI_LAYOUT_STYLE_STORAGE_KEY);
+    }
+    setStyle(style) {
+        this.setAppearance(style);
+    }
+    setWidth(width) {
+        this.widthState.set(width);
+        this.writeStorage(UI_LAYOUT_WIDTH_STORAGE_KEY, width);
+    }
+    getStoredSurface() {
+        const value = this.readStorage(UI_LAYOUT_SURFACE_STORAGE_KEY);
+        return isUiLayoutSurface(value) ? value : UI_LAYOUT_DEFAULT_SURFACE;
+    }
+    getStoredType() {
+        const value = this.readStorage(UI_LAYOUT_TYPE_STORAGE_KEY);
+        return isUiLayoutType(value) ? value : UI_LAYOUT_DEFAULT_TYPE;
+    }
+    getStoredAppearance() {
+        const value = this.readStoredAppearance();
+        return value ?? UI_LAYOUT_DEFAULT_STYLE;
+    }
+    getStoredStyle() {
+        return this.getStoredAppearance();
+    }
+    getStoredWidth() {
+        const value = this.readStorage(UI_LAYOUT_WIDTH_STORAGE_KEY);
+        return isUiLayoutWidth(value) ? value : UI_LAYOUT_DEFAULT_WIDTH;
+    }
+    readStorage(key) {
+        const storage = this.getStorage();
+        if (!storage) {
+            return null;
+        }
+        try {
+            return storage.getItem(key);
+        }
+        catch {
+            return null;
+        }
+    }
+    removeStorage(key) {
+        const storage = this.getStorage();
+        if (!storage) {
+            return;
+        }
+        try {
+            storage.removeItem(key);
+        }
+        catch {
+            return;
+        }
+    }
+    writeStorage(key, value) {
+        const storage = this.getStorage();
+        if (!storage) {
+            return;
+        }
+        try {
+            storage.setItem(key, value);
+        }
+        catch {
+            return;
+        }
+    }
+    getStorage() {
+        if (!isPlatformBrowser(this.platformId)) {
+            return null;
+        }
+        try {
+            return localStorage;
+        }
+        catch {
+            return null;
+        }
+    }
+    readStoredAppearance() {
+        const appearance = this.readStorage(UI_LAYOUT_APPEARANCE_STORAGE_KEY);
+        if (isUiLayoutStyle(appearance)) {
+            return appearance;
+        }
+        const legacyStyle = this.readStorage(UI_LAYOUT_STYLE_STORAGE_KEY);
+        return isUiLayoutStyle(legacyStyle) ? legacyStyle : null;
+    }
+    getStoredAppearanceOrDefault(fallback) {
+        return this.readStoredAppearance() ?? fallback;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LayoutService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: LayoutService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class UiLayoutComponent {
+    layout = inject(LayoutService);
+    surface = input(null, ...(ngDevMode ? [{ debugName: "surface" }] : /* istanbul ignore next */ []));
+    appearance = input(null, ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    layoutStyleAttribute = input(null, { ...(ngDevMode ? { debugName: "layoutStyleAttribute" } : /* istanbul ignore next */ {}), alias: 'layout-style' });
+    width = input(null, ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    appearanceInput = computed(() => this.appearance() ?? this.layoutStyleAttribute(), ...(ngDevMode ? [{ debugName: "appearanceInput" }] : /* istanbul ignore next */ []));
+    resolvedSurface = computed(() => this.surface() ?? this.layout.surface(), ...(ngDevMode ? [{ debugName: "resolvedSurface" }] : /* istanbul ignore next */ []));
+    resolvedAppearance = computed(() => this.appearanceInput() ?? this.layout.appearance(), ...(ngDevMode ? [{ debugName: "resolvedAppearance" }] : /* istanbul ignore next */ []));
+    resolvedStyle = computed(() => this.layout.style(), ...(ngDevMode ? [{ debugName: "resolvedStyle" }] : /* istanbul ignore next */ []));
+    resolvedWidth = computed(() => this.width() ?? this.layout.width(), ...(ngDevMode ? [{ debugName: "resolvedWidth" }] : /* istanbul ignore next */ []));
+    isBorderRail = computed(() => this.resolvedAppearance() === 'border-rail', ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
+    showsHorizontalInsetRails = computed(() => {
+        const layoutType = this.layout.type();
+        return this.isBorderRail() && (layoutType === 'horizontal' || layoutType === 'vertical');
+    }, ...(ngDevMode ? [{ debugName: "showsHorizontalInsetRails" }] : /* istanbul ignore next */ []));
+    railPaddingClasses = computed(() => cn('h-full w-full', this.widthClasses()), ...(ngDevMode ? [{ debugName: "railPaddingClasses" }] : /* istanbul ignore next */ []));
+    railAnchorClasses = computed(() => cn('relative h-full min-h-0 min-w-0', this.frameWidthClasses()), ...(ngDevMode ? [{ debugName: "railAnchorClasses" }] : /* istanbul ignore next */ []));
+    contentShellClasses = computed(() => cn('relative z-10 h-full min-h-0 w-full min-w-0', this.isBorderRail() ? 'overflow-visible' : 'overflow-hidden'), ...(ngDevMode ? [{ debugName: "contentShellClasses" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => cn('relative isolate block h-dvh w-full min-w-0 box-border overflow-hidden text-foreground', this.surfaceClasses(), this.widthClasses(), this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    frameClasses = computed(() => cn('relative h-full min-h-0 min-w-0 border-border bg-background/55 backdrop-blur-xs', this.frameWidthClasses(), this.isBorderRail() ? 'overflow-visible border-2' : 'overflow-hidden border'), ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            const surface = this.surface();
+            if (surface !== null) {
+                this.layout.setSurface(surface);
+            }
+            else {
+                this.layout.registerSurface(UI_LAYOUT_DEFAULT_SURFACE);
+            }
+            const appearance = this.appearanceInput();
+            if (appearance !== null) {
+                this.layout.setAppearance(appearance);
+            }
+            else {
+                this.layout.registerAppearance(UI_LAYOUT_DEFAULT_STYLE);
+            }
+            const width = this.width();
+            if (width !== null) {
+                this.layout.setWidth(width);
+            }
+            else {
+                this.layout.registerWidth(UI_LAYOUT_DEFAULT_WIDTH);
+            }
+        });
+    }
+    surfaceClasses() {
+        switch (this.resolvedSurface()) {
+            case 'grid':
+                return '[--ui-layout-grid-size:2rem] bg-background bg-[linear-gradient(rgba(148,163,184,0.18)_1px,transparent_1px),linear-gradient(to_right,rgba(148,163,184,0.18)_1px,transparent_1px)] bg-position-[center_center] bg-size-[var(--ui-layout-grid-size)_var(--ui-layout-grid-size)]';
+            case 'honeycome':
+                return 'bg-background bg-[radial-gradient(circle_at_0_0,rgba(148,163,184,0.22)_1px,transparent_1.5px)] bg-position-[center_center] bg-size-[1.25rem_1.25rem]';
+            case 'line-vertical':
+                return 'bg-background bg-[linear-gradient(to_right,rgba(148,163,184,0.22)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2rem_2rem]';
+            case 'line-horizontal':
+                return 'bg-background bg-[linear-gradient(rgba(148,163,184,0.22)_1px,transparent_1px)] bg-position-[center_center] bg-size-[2rem_2rem]';
+            default:
+                return 'bg-background';
+        }
+    }
+    widthClasses() {
+        switch (this.resolvedWidth()) {
+            case 'wide':
+                return 'p-4 lg:p-12';
+            case 'container':
+                return 'p-4 lg:px-0 lg:py-16';
+            default:
+                return 'p-4';
+        }
+    }
+    frameWidthClasses() {
+        return this.resolvedWidth() === 'container' ? 'w-full lg:container lg:mx-auto' : 'w-full';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: UiLayoutComponent, isStandalone: true, selector: "ui-layout", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, layoutStyleAttribute: { classPropertyName: "layoutStyleAttribute", publicName: "layout-style", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-surface": "resolvedSurface()", "attr.data-layout-appearance": "resolvedAppearance()", "attr.data-layout-style": "resolvedStyle()", "attr.data-layout-width": "resolvedWidth()", "attr.data-layout-type": "layout.type()" } }, ngImport: i0, template: `
+    @if (isBorderRail()) {
+      <div aria-hidden="true" data-layout-rail class="pointer-events-none absolute inset-0 z-0">
+        <div [class]="railPaddingClasses()">
+          <div data-layout-rail-anchor [class]="railAnchorClasses()">
+            <div
+              data-layout-rail-top-left-horizontal
+              class="absolute top-0 right-full h-0.5 w-[calc((100vw-100%)/2)] bg-border"></div>
+            <div
+              data-layout-rail-top-left-vertical
+              class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-0.5 bg-border"></div>
+            <div
+              data-layout-rail-top-right-horizontal
+              class="absolute top-0 left-full h-0.5 w-[calc((100vw-100%)/2)] bg-border"></div>
+            <div
+              data-layout-rail-top-right-vertical
+              class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-0.5 bg-border"></div>
+            <div
+              data-layout-rail-bottom-left-horizontal
+              class="absolute bottom-0 right-full h-0.5 w-[calc((100vw-100%)/2)] bg-border"></div>
+            <div
+              data-layout-rail-bottom-left-vertical
+              class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-0.5 bg-border"></div>
+            <div
+              data-layout-rail-bottom-right-horizontal
+              class="absolute bottom-0 left-full h-0.5 w-[calc((100vw-100%)/2)] bg-border"></div>
+            <div
+              data-layout-rail-bottom-right-vertical
+              class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-0.5 bg-border"></div>
+
+            @if (showsHorizontalInsetRails()) {
+              <div data-layout-horizontal-top-rail class="absolute inset-x-0 top-12 h-0.5 bg-border"></div>
+              <div
+                data-layout-horizontal-top-left-extension
+                class="absolute top-12 right-full h-0.5 w-[calc((100vw-100%)/2)] bg-border"></div>
+              <div
+                data-layout-horizontal-top-right-extension
+                class="absolute top-12 left-full h-0.5 w-[calc((100vw-100%)/2)] bg-border"></div>
+              <div data-layout-horizontal-bottom-rail class="absolute inset-x-0 bottom-12 h-0.5 bg-border"></div>
+              <div
+                data-layout-horizontal-bottom-left-extension
+                class="absolute bottom-12 right-full h-0.5 w-[calc((100vw-100%)/2)] bg-border"></div>
+              <div
+                data-layout-horizontal-bottom-right-extension
+                class="absolute bottom-12 left-full h-0.5 w-[calc((100vw-100%)/2)] bg-border"></div>
+            }
+          </div>
+        </div>
+      </div>
+    }
+
+    <div [class]="frameClasses()">
+      <div [class]="contentShellClasses()">
+        <ng-content />
+      </div>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiLayoutComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-layout',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'hostClasses()',
+                        '[attr.data-surface]': 'resolvedSurface()',
+                        '[attr.data-layout-appearance]': 'resolvedAppearance()',
+                        '[attr.data-layout-style]': 'resolvedStyle()',
+                        '[attr.data-layout-width]': 'resolvedWidth()',
+                        '[attr.data-layout-type]': 'layout.type()',
+                    },
+                    template: `
+    @if (isBorderRail()) {
+      <div aria-hidden="true" data-layout-rail class="pointer-events-none absolute inset-0 z-0">
+        <div [class]="railPaddingClasses()">
+          <div data-layout-rail-anchor [class]="railAnchorClasses()">
+            <div
+              data-layout-rail-top-left-horizontal
+              class="absolute top-0 right-full h-0.5 w-[calc((100vw-100%)/2)] bg-border"></div>
+            <div
+              data-layout-rail-top-left-vertical
+              class="absolute bottom-full left-0 h-[calc((100dvh-100%)/2)] w-0.5 bg-border"></div>
+            <div
+              data-layout-rail-top-right-horizontal
+              class="absolute top-0 left-full h-0.5 w-[calc((100vw-100%)/2)] bg-border"></div>
+            <div
+              data-layout-rail-top-right-vertical
+              class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-0.5 bg-border"></div>
+            <div
+              data-layout-rail-bottom-left-horizontal
+              class="absolute bottom-0 right-full h-0.5 w-[calc((100vw-100%)/2)] bg-border"></div>
+            <div
+              data-layout-rail-bottom-left-vertical
+              class="absolute top-full left-0 h-[calc((100dvh-100%)/2)] w-0.5 bg-border"></div>
+            <div
+              data-layout-rail-bottom-right-horizontal
+              class="absolute bottom-0 left-full h-0.5 w-[calc((100vw-100%)/2)] bg-border"></div>
+            <div
+              data-layout-rail-bottom-right-vertical
+              class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-0.5 bg-border"></div>
+
+            @if (showsHorizontalInsetRails()) {
+              <div data-layout-horizontal-top-rail class="absolute inset-x-0 top-12 h-0.5 bg-border"></div>
+              <div
+                data-layout-horizontal-top-left-extension
+                class="absolute top-12 right-full h-0.5 w-[calc((100vw-100%)/2)] bg-border"></div>
+              <div
+                data-layout-horizontal-top-right-extension
+                class="absolute top-12 left-full h-0.5 w-[calc((100vw-100%)/2)] bg-border"></div>
+              <div data-layout-horizontal-bottom-rail class="absolute inset-x-0 bottom-12 h-0.5 bg-border"></div>
+              <div
+                data-layout-horizontal-bottom-left-extension
+                class="absolute bottom-12 right-full h-0.5 w-[calc((100vw-100%)/2)] bg-border"></div>
+              <div
+                data-layout-horizontal-bottom-right-extension
+                class="absolute bottom-12 left-full h-0.5 w-[calc((100vw-100%)/2)] bg-border"></div>
+            }
+          </div>
+        </div>
+      </div>
+    }
+
+    <div [class]="frameClasses()">
+      <div [class]="contentShellClasses()">
+        <ng-content />
+      </div>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], layoutStyleAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout-style", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class UiLayoutVerticalComponent {
+    layout = inject(LayoutService);
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('grid h-full min-h-0 w-full min-w-0 grid-cols-[auto_minmax(0,1fr)]', this.layout.style() === 'border-rail' ? 'overflow-visible' : 'overflow-hidden', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.layout.setType('vertical');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiLayoutVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: UiLayoutVerticalComponent, isStandalone: true, selector: "ui-layout-vertical", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "vertical" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiLayoutVerticalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-layout-vertical',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        'data-layout-type': 'vertical',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class UiLayoutHorizontalComponent {
+    layout = inject(LayoutService);
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.layout.setType('horizontal');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiLayoutHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: UiLayoutHorizontalComponent, isStandalone: true, selector: "ui-layout-horizontal", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "horizontal" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiLayoutHorizontalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-layout-horizontal',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        'data-layout-type': 'horizontal',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class UiLayoutEmptyComponent {
+    layout = inject(LayoutService);
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => cn('h-full min-h-0 w-full min-w-0 overflow-hidden', this.class()), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.layout.setType('empty');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiLayoutEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: UiLayoutEmptyComponent, isStandalone: true, selector: "ui-layout-empty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "empty" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiLayoutEmptyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-layout-empty',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        'data-layout-type': 'empty',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class UiLayoutNavComponent {
+    layout = inject(LayoutService);
+    projectedNav = contentChild(UiNavComponent, ...(ngDevMode ? [{ debugName: "projectedNav" }] : /* istanbul ignore next */ []));
+    ariaLabel = input('Layout navigation', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    railOffset = input(null, ...(ngDevMode ? [{ debugName: "railOffset" }] : /* istanbul ignore next */ []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    showsVerticalRail = computed(() => this.layout.type() === 'vertical' && this.layout.appearance() === 'border-rail', ...(ngDevMode ? [{ debugName: "showsVerticalRail" }] : /* istanbul ignore next */ []));
+    resolvedRailOffset = computed(() => this.railOffset() ?? this.projectedNav()?.previewRailOffset() ?? '0px', ...(ngDevMode ? [{ debugName: "resolvedRailOffset" }] : /* istanbul ignore next */ []));
+    railTransform = computed(() => `translateX(${this.resolvedRailOffset()})`, ...(ngDevMode ? [{ debugName: "railTransform" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const layoutType = this.layout.type();
+        const showsVerticalRail = this.showsVerticalRail();
+        return cn('relative block min-h-0 min-w-0', layoutType === 'horizontal' && 'h-12 min-h-12 w-full shrink-0 overflow-visible', layoutType === 'vertical' &&
+            (showsVerticalRail
+                ? 'h-full w-max max-w-full shrink-0 overflow-visible'
+                : 'h-full w-max max-w-full shrink-0 overflow-hidden'), layoutType === 'empty' && 'hidden', this.class());
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiLayoutNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: UiLayoutNavComponent, isStandalone: true, selector: "ui-layout-nav", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, railOffset: { classPropertyName: "railOffset", publicName: "railOffset", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "class": "classes()", "attr.aria-label": "ariaLabel() || null", "attr.data-layout-type": "layout.type()", "attr.data-layout-appearance": "layout.appearance()", "attr.data-layout-style": "layout.style()", "attr.data-layout-nav-rail-offset": "resolvedRailOffset()" } }, queries: [{ propertyName: "projectedNav", first: true, predicate: UiNavComponent, descendants: true, isSignal: true }], ngImport: i0, template: `
+    @if (showsVerticalRail()) {
+      <div
+        aria-hidden="true"
+        data-layout-nav-rail
+        class="pointer-events-none absolute inset-y-0 right-0 z-20 w-0.5 transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
+        [style.transform]="railTransform()">
+        <div data-layout-nav-rail-line class="absolute inset-y-0 right-0 w-0.5 bg-border"></div>
+        <div
+          data-layout-nav-rail-top
+          class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-0.5 bg-border"></div>
+        <div
+          data-layout-nav-rail-bottom
+          class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-0.5 bg-border"></div>
+      </div>
+    }
+
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiLayoutNavComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-layout-nav',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.data-layout-type]': 'layout.type()',
+                        '[attr.data-layout-appearance]': 'layout.appearance()',
+                        '[attr.data-layout-style]': 'layout.style()',
+                        '[attr.data-layout-nav-rail-offset]': 'resolvedRailOffset()',
+                    },
+                    template: `
+    @if (showsVerticalRail()) {
+      <div
+        aria-hidden="true"
+        data-layout-nav-rail
+        class="pointer-events-none absolute inset-y-0 right-0 z-20 w-0.5 transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
+        [style.transform]="railTransform()">
+        <div data-layout-nav-rail-line class="absolute inset-y-0 right-0 w-0.5 bg-border"></div>
+        <div
+          data-layout-nav-rail-top
+          class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-0.5 bg-border"></div>
+        <div
+          data-layout-nav-rail-bottom
+          class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-0.5 bg-border"></div>
+      </div>
+    }
+
+    <ng-content />
+  `,
+                }]
+        }], propDecorators: { projectedNav: [{ type: i0.ContentChild, args: [i0.forwardRef(() => UiNavComponent), { isSignal: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], railOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "railOffset", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+class UiLayoutContentComponent {
+    layout = inject(LayoutService);
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    classes = computed(() => {
+        const layoutType = this.layout.type();
+        return cn('block min-h-0 min-w-0 overflow-auto', layoutType === 'horizontal' && 'flex-1', layoutType === 'vertical' && 'h-full', layoutType === 'empty' && 'h-full w-full', this.layout.width() === 'container' && 'w-full lg:container lg:mx-auto', this.class());
+    }, ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiLayoutContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.15", type: UiLayoutContentComponent, isStandalone: true, selector: "ui-layout-content", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-layout-type": "layout.type()", "attr.data-layout-width": "layout.width()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: UiLayoutContentComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ui-layout-content',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'classes()',
+                        '[attr.data-layout-type]': 'layout.type()',
+                        '[attr.data-layout-width]': 'layout.width()',
+                    },
+                    template: `<ng-content />`,
+                }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LayoutService, UI_LAYOUT_APPEARANCE_STORAGE_KEY, UI_LAYOUT_DEFAULT_STYLE, UI_LAYOUT_DEFAULT_SURFACE, UI_LAYOUT_DEFAULT_TYPE, UI_LAYOUT_DEFAULT_WIDTH, UI_LAYOUT_STYLES, UI_LAYOUT_STYLE_STORAGE_KEY, UI_LAYOUT_SURFACES, UI_LAYOUT_SURFACE_STORAGE_KEY, UI_LAYOUT_TYPES, UI_LAYOUT_TYPE_STORAGE_KEY, UI_LAYOUT_WIDTHS, UI_LAYOUT_WIDTH_STORAGE_KEY, UiLayoutComponent, UiLayoutContentComponent, UiLayoutEmptyComponent, UiLayoutHorizontalComponent, UiLayoutNavComponent, UiLayoutVerticalComponent, isUiLayoutStyle, isUiLayoutSurface, isUiLayoutType, isUiLayoutWidth };
+//# sourceMappingURL=edsis-ui-layout.mjs.map