@skyux/layout 13.0.0-alpha.4 → 13.0.0-alpha.5

package/fesm2022/skyux-layout.mjs

@@ -3,7 +3,7 @@ import { ObserversModule } from '@angular/cdk/observers';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Output, Input, HostBinding, SkipSelf, ViewEncapsulation, Component, ElementRef, HostListener, ViewChild, ContentChildren, Optional, inject, NgModule, ChangeDetectionStrategy, Directive, InjectionToken, numberAttribute, booleanAttribute, ContentChild, TemplateRef, DOCUMENT, Inject, contentChildren, effect } from '@angular/core';
+import { Injectable, EventEmitter, Output, Input, HostBinding, SkipSelf, ViewEncapsulation, Component, ElementRef, HostListener, ViewChild, ContentChildren, Optional, inject, NgModule, ChangeDetectionStrategy, Directive, InjectionToken, numberAttribute, booleanAttribute, ContentChild, TemplateRef, contentChildren, effect, Inject } from '@angular/core';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as i3 from '@skyux/router';
@@ -276,7 +276,7 @@ class SkyActionButtonIconComponent {
         this.breakpoint = toSignal(inject(SkyMediaQueryService).breakpointChange);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyActionButtonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: SkyActionButtonIconComponent, isStandalone: true, selector: "sky-action-button-icon", inputs: { iconName: "iconName" }, ngImport: i0, template: "<div aria-hidden=\"true\" class=\"sky-action-button-icon-container\">\n  <sky-icon\n    *skyThemeIf=\"'default'\"\n    class=\"sky-action-button-icon\"\n    [iconSize]=\"breakpoint() === 'xs' ? 'xl' : 'xxxl'\"\n    [iconName]=\"iconName\"\n  />\n  <sky-icon\n    *skyThemeIf=\"'modern'\"\n    class=\"sky-action-button-icon\"\n    iconSize=\"l\"\n    [iconName]=\"iconName\"\n  />\n</div>\n", styles: [":host .sky-action-button-icon-container:not(.sky-theme-modern *){margin:0 5px}:host .sky-action-button-icon-container:not(.sky-theme-modern *) .sky-action-button-icon{color:#0974a1}:host-context(.sky-responsive-container-xs) .sky-action-button-icon-container:not(.sky-theme-modern *),:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container:not(.sky-theme-modern *),:host-context(.sky-responsive-container-md) .sky-action-button-icon-container:not(.sky-theme-modern *),:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container:not(.sky-theme-modern *){margin:0 5px}:host-context(.sky-responsive-container-xs) .sky-action-button-icon-container:not(.sky-theme-modern *) .sky-action-button-icon,:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container:not(.sky-theme-modern *) .sky-action-button-icon,:host-context(.sky-responsive-container-md) .sky-action-button-icon-container:not(.sky-theme-modern *) .sky-action-button-icon,:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container:not(.sky-theme-modern *) .sky-action-button-icon{color:#0974a1}@media (min-width: 768px){:host .sky-action-button-icon-container:not(.sky-theme-modern *){margin:0 0 20px}}:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container:not(.sky-theme-modern *),:host-context(.sky-responsive-container-md) .sky-action-button-icon-container:not(.sky-theme-modern *),:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container:not(.sky-theme-modern *){margin:0 0 20px}\n", ":host-context(.sky-theme-modern) .sky-action-button-icon-container{color:var(--sky-color-icon-action);background:var(--sky-color-background-icon_matte-action-soft);margin:0 var(--sky-space-inline-l) 0 0;border-radius:var(--sky-border-radius-round);width:calc(var(--sky-size-icon-l) + var(--sky-space-inset-thumbnail_matte-xl) * 2);height:calc(var(--sky-size-icon-l) + var(--sky-space-inset-thumbnail_matte-xl) * 2);display:flex;align-items:center;justify-content:center}:host-context(.sky-theme-modern) .sky-action-button-icon-container ::ng-deep .sky-icon{font-size:24px!important}:host-context(.sky-theme-modern) .sky-action-button-icon-container .sky-action-button-icon{color:var(--sky-color-icon-action)}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$2.λ1, selector: "sky-icon", inputs: ["icon", "iconName", "iconType", "size", "fixedWidth", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i2$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: SkyActionButtonIconComponent, isStandalone: true, selector: "sky-action-button-icon", inputs: { iconName: "iconName" }, ngImport: i0, template: "<div aria-hidden=\"true\" class=\"sky-action-button-icon-container\">\n  <sky-icon\n    *skyThemeIf=\"'default'\"\n    class=\"sky-action-button-icon\"\n    [iconSize]=\"breakpoint() === 'xs' ? 'xl' : 'xxxl'\"\n    [iconName]=\"iconName\"\n  />\n  <sky-icon\n    *skyThemeIf=\"'modern'\"\n    class=\"sky-action-button-icon\"\n    iconSize=\"l\"\n    [iconName]=\"iconName\"\n  />\n</div>\n", styles: [":host .sky-action-button-icon-container:not(.sky-theme-modern *){margin:0 5px}:host .sky-action-button-icon-container:not(.sky-theme-modern *) .sky-action-button-icon{color:#0974a1}:host-context(.sky-responsive-container-xs) .sky-action-button-icon-container:not(.sky-theme-modern *),:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container:not(.sky-theme-modern *),:host-context(.sky-responsive-container-md) .sky-action-button-icon-container:not(.sky-theme-modern *),:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container:not(.sky-theme-modern *){margin:0 5px}:host-context(.sky-responsive-container-xs) .sky-action-button-icon-container:not(.sky-theme-modern *) .sky-action-button-icon,:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container:not(.sky-theme-modern *) .sky-action-button-icon,:host-context(.sky-responsive-container-md) .sky-action-button-icon-container:not(.sky-theme-modern *) .sky-action-button-icon,:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container:not(.sky-theme-modern *) .sky-action-button-icon{color:#0974a1}@media (min-width: 768px){:host .sky-action-button-icon-container:not(.sky-theme-modern *){margin:0 0 20px}}:host-context(.sky-responsive-container-sm) .sky-action-button-icon-container:not(.sky-theme-modern *),:host-context(.sky-responsive-container-md) .sky-action-button-icon-container:not(.sky-theme-modern *),:host-context(.sky-responsive-container-lg) .sky-action-button-icon-container:not(.sky-theme-modern *){margin:0 0 20px}\n", ":host-context(.sky-theme-modern) .sky-action-button-icon-container{color:var(--sky-color-icon-action);background:var(--sky-color-background-icon_matte-action-soft);margin:0 var(--sky-space-inline-l) 0 0;border-radius:var(--sky-border-radius-round);width:calc(var(--sky-size-icon-l) + var(--sky-space-inset-thumbnail_matte-xl) * 2);height:calc(var(--sky-size-icon-l) + var(--sky-space-inset-thumbnail_matte-xl) * 2);display:flex;align-items:center;justify-content:center}:host-context(.sky-theme-modern) .sky-action-button-icon-container ::ng-deep .sky-icon{font-size:24px!important}:host-context(.sky-theme-modern) .sky-action-button-icon-container .sky-action-button-icon{color:var(--sky-color-icon-action)}\n"], dependencies: [{ kind: "ngmodule", type: SkyIconModule }, { kind: "component", type: i1$2.λ1, selector: "sky-icon", inputs: ["iconName", "variant", "iconSize"] }, { kind: "ngmodule", type: SkyThemeModule }, { kind: "directive", type: i2$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyActionButtonIconComponent, decorators: [{
             type: Component,
@@ -1985,105 +1985,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                 }]
         }] });
 
-/**
- * @internal
- */
-class SkyPageThemeAdapterService {
-    #styleEl;
-    #document;
-    constructor(document) {
-        this.#document = document;
-    }
-    /**
-     * We can't use ViewEncapsulation.None for this behavior because Angular does
-     * not remove `style` tags from the HEAD element after route changes.
-     * @see https://github.com/angular/angular/issues/16670
-     */
-    addTheme() {
-        if (!this.#styleEl) {
-            this.#styleEl = this.#document.createElement('style');
-            this.#styleEl.appendChild(this.#document.createTextNode('body:not(.sky-theme-modern) { background-color: #fff; }'));
-            this.#document.head.appendChild(this.#styleEl);
-        }
-    }
-    removeTheme() {
-        if (this.#styleEl) {
-            this.#styleEl.remove();
-            this.#styleEl = undefined;
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyPageThemeAdapterService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyPageThemeAdapterService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyPageThemeAdapterService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }] });
-
-/**
- * Displays page contents using the specified layout.
- * @docsId SkyPageComponentLegacy
- * @deprecated Use the `sky-page` component in `@skyux/pages` instead.
- */
-class SkyPageComponent {
-    /**
-     * The page layout. Use `auto` to allow the page contents
-     * to expand beyond the bottom of the browser window. Use `fit`
-     * to constrain the page contents to the available viewport.
-     */
-    set layout(value) {
-        this.#_layout = value || 'auto';
-    }
-    get layout() {
-        return this.#_layout;
-    }
-    #themeAdapter;
-    #_layout = 'auto';
-    #logger = inject(SkyLogService);
-    constructor(themeAdapter) {
-        this.#logger.deprecated('SkyPageComponent', {
-            deprecationMajorVersion: 8,
-            moreInfoUrl: 'https://developer.blackbaud.com/skyux/components/page',
-            replacementRecommendation: 'Use the `sky-page` component in `@skyux/pages` instead.',
-        });
-        this.#themeAdapter = themeAdapter;
-    }
-    ngOnInit() {
-        this.#themeAdapter.addTheme();
-    }
-    ngOnDestroy() {
-        this.#themeAdapter.removeTheme();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyPageComponent, deps: [{ token: SkyPageThemeAdapterService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: SkyPageComponent, isStandalone: false, selector: "sky-page", inputs: { layout: "layout" }, providers: [SkyPageThemeAdapterService], ngImport: i0, template: "<div [ngClass]=\"'sky-layout-host-' + layout\">\n  <ng-content />\n</div>\n", styles: [".sky-layout-host-fit{position:absolute;left:var(--sky-viewport-left);top:var(--sky-viewport-top);right:var(--sky-viewport-right);bottom:var(--sky-viewport-bottom)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyPageComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'sky-page', providers: [SkyPageThemeAdapterService], standalone: false, template: "<div [ngClass]=\"'sky-layout-host-' + layout\">\n  <ng-content />\n</div>\n", styles: [".sky-layout-host-fit{position:absolute;left:var(--sky-viewport-left);top:var(--sky-viewport-top);right:var(--sky-viewport-right);bottom:var(--sky-viewport-bottom)}\n"] }]
-        }], ctorParameters: () => [{ type: SkyPageThemeAdapterService }], propDecorators: { layout: [{
-                type: Input
-            }] } });
-
-/**
- * @docsId SkyPageModuleLegacy
- * @deprecated Use the SkyPageModule in `@skyux/pages` instead.
- */
-class SkyPageModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyPageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.5", ngImport: i0, type: SkyPageModule, declarations: [SkyPageComponent], imports: [CommonModule], exports: [SkyPageComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyPageModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: SkyPageModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [SkyPageComponent],
-                    imports: [CommonModule],
-                    exports: [SkyPageComponent],
-                }]
-        }] });
-
 /**
  * Displays messages that require immediate attention as [alerts](https://developer.blackbaud.com/skyux/components/alert) within
  * the page summary.
@@ -3012,5 +2913,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SkyActionButtonModule, SkyBackToTopMessageType, SkyBackToTopModule, SkyBoxModule, SkyCardModule, SkyDefinitionListModule, SkyDescriptionListMode, SkyDescriptionListModule, SkyFluidGridModule, SkyFormatModule, SkyInlineDeleteModule, SkyInlineDeleteType, SkyPageModule, SkyPageSummaryModule, SkyTextExpandModule, SkyTextExpandRepeaterModule, SkyToolbarModule, SkyActionButtonComponent as λ1, SkyCardActionsComponent as λ10, SkyCardContentComponent as λ11, SkyCardTitleComponent as λ12, SkyDefinitionListComponent as λ13, SkyDefinitionListContentComponent as λ14, SkyDefinitionListHeadingComponent as λ15, SkyDefinitionListLabelComponent as λ16, SkyDefinitionListValueComponent as λ17, SkyDescriptionListComponent as λ18, SkyDescriptionListTermComponent as λ19, SkyActionButtonContainerComponent as λ2, SkyDescriptionListDescriptionComponent as λ20, SkyDescriptionListContentComponent as λ21, SkyFluidGridComponent as λ22, SkyRowComponent as λ23, SkyColumnComponent as λ24, SkyFormatComponent as λ25, SkyPageComponent as λ26, SkyPageSummaryComponent as λ27, SkyPageSummaryAlertComponent as λ28, SkyPageSummaryContentComponent as λ29, SkyActionButtonDetailsComponent as λ3, SkyPageSummaryImageComponent as λ30, SkyPageSummaryKeyInfoComponent as λ31, SkyPageSummaryStatusComponent as λ32, SkyPageSummarySubtitleComponent as λ33, SkyPageSummaryTitleComponent as λ34, SkyTextExpandComponent as λ35, SkyTextExpandRepeaterComponent as λ36, SkyToolbarComponent as λ37, SkyToolbarSectionComponent as λ38, SkyToolbarItemComponent as λ39, SkyActionButtonHeaderComponent as λ4, SkyToolbarViewActionsComponent as λ40, SkyBoxComponent as λ41, SkyBoxHeaderComponent as λ42, SkyBoxContentComponent as λ43, SkyBoxControlsComponent as λ44, SkyActionButtonIconComponent as λ5, SkyBackToTopComponent as λ6, SkyBackToTopDirective as λ7, SkyInlineDeleteComponent as λ8, SkyCardComponent as λ9 };
+export { SkyActionButtonModule, SkyBackToTopMessageType, SkyBackToTopModule, SkyBoxModule, SkyCardModule, SkyDefinitionListModule, SkyDescriptionListMode, SkyDescriptionListModule, SkyFluidGridModule, SkyFormatModule, SkyInlineDeleteModule, SkyInlineDeleteType, SkyPageSummaryModule, SkyTextExpandModule, SkyTextExpandRepeaterModule, SkyToolbarModule, SkyActionButtonComponent as λ1, SkyCardActionsComponent as λ10, SkyCardContentComponent as λ11, SkyCardTitleComponent as λ12, SkyDefinitionListComponent as λ13, SkyDefinitionListContentComponent as λ14, SkyDefinitionListHeadingComponent as λ15, SkyDefinitionListLabelComponent as λ16, SkyDefinitionListValueComponent as λ17, SkyDescriptionListComponent as λ18, SkyDescriptionListTermComponent as λ19, SkyActionButtonContainerComponent as λ2, SkyDescriptionListDescriptionComponent as λ20, SkyDescriptionListContentComponent as λ21, SkyFluidGridComponent as λ22, SkyRowComponent as λ23, SkyColumnComponent as λ24, SkyFormatComponent as λ25, SkyPageSummaryComponent as λ27, SkyPageSummaryAlertComponent as λ28, SkyPageSummaryContentComponent as λ29, SkyActionButtonDetailsComponent as λ3, SkyPageSummaryImageComponent as λ30, SkyPageSummaryKeyInfoComponent as λ31, SkyPageSummaryStatusComponent as λ32, SkyPageSummarySubtitleComponent as λ33, SkyPageSummaryTitleComponent as λ34, SkyTextExpandComponent as λ35, SkyTextExpandRepeaterComponent as λ36, SkyToolbarComponent as λ37, SkyToolbarSectionComponent as λ38, SkyToolbarItemComponent as λ39, SkyActionButtonHeaderComponent as λ4, SkyToolbarViewActionsComponent as λ40, SkyBoxComponent as λ41, SkyBoxHeaderComponent as λ42, SkyBoxContentComponent as λ43, SkyBoxControlsComponent as λ44, SkyActionButtonIconComponent as λ5, SkyBackToTopComponent as λ6, SkyBackToTopDirective as λ7, SkyInlineDeleteComponent as λ8, SkyCardComponent as λ9 };
 //# sourceMappingURL=skyux-layout.mjs.map