@skyux/layout
Version:
This library was generated with [Nx](https://nx.dev).
1 lines • 218 kB
Source Map (JSON)
{"version":3,"file":"skyux-layout.mjs","sources":["../../../../../libs/components/layout/src/lib/modules/action-button/action-button-adapter-service.ts","../../../../../libs/components/layout/src/lib/modules/action-button/action-button.component.ts","../../../../../libs/components/layout/src/lib/modules/action-button/action-button.component.html","../../../../../libs/components/layout/src/lib/modules/action-button/action-button-container.component.ts","../../../../../libs/components/layout/src/lib/modules/action-button/action-button-container.component.html","../../../../../libs/components/layout/src/lib/modules/action-button/action-button-details.component.ts","../../../../../libs/components/layout/src/lib/modules/action-button/action-button-details.component.html","../../../../../libs/components/layout/src/lib/modules/action-button/action-button-header.component.ts","../../../../../libs/components/layout/src/lib/modules/action-button/action-button-header.component.html","../../../../../libs/components/layout/src/lib/modules/action-button/action-button-icon.component.ts","../../../../../libs/components/layout/src/lib/modules/action-button/action-button-icon.component.html","../../../../../libs/components/layout/src/lib/modules/action-button/action-button.module.ts","../../../../../libs/components/layout/src/lib/modules/shared/sky-layout-resources.module.ts","../../../../../libs/components/layout/src/lib/modules/back-to-top/back-to-top.component.ts","../../../../../libs/components/layout/src/lib/modules/back-to-top/back-to-top.component.html","../../../../../libs/components/layout/src/lib/modules/back-to-top/back-to-top-adapter.service.ts","../../../../../libs/components/layout/src/lib/modules/back-to-top/models/back-to-top-message-type.ts","../../../../../libs/components/layout/src/lib/modules/back-to-top/back-to-top.directive.ts","../../../../../libs/components/layout/src/lib/modules/back-to-top/back-to-top.module.ts","../../../../../libs/components/layout/src/lib/modules/box/box-content.component.ts","../../../../../libs/components/layout/src/lib/modules/box/box-content.component.html","../../../../../libs/components/layout/src/lib/modules/box/box-header-id-token.ts","../../../../../libs/components/layout/src/lib/modules/box/box-controls.component.ts","../../../../../libs/components/layout/src/lib/modules/box/box-controls.component.html","../../../../../libs/components/layout/src/lib/modules/box/box-header.component.ts","../../../../../libs/components/layout/src/lib/modules/box/box-header.component.html","../../../../../libs/components/layout/src/lib/modules/box/box.component.ts","../../../../../libs/components/layout/src/lib/modules/box/box.component.html","../../../../../libs/components/layout/src/lib/modules/box/box.module.ts","../../../../../libs/components/layout/src/lib/modules/inline-delete/inline-delete-adapter.service.ts","../../../../../libs/components/layout/src/lib/modules/inline-delete/inline-delete-type.ts","../../../../../libs/components/layout/src/lib/modules/inline-delete/inline-delete.component.ts","../../../../../libs/components/layout/src/lib/modules/inline-delete/inline-delete.component.html","../../../../../libs/components/layout/src/lib/modules/inline-delete/inline-delete.module.ts","../../../../../libs/components/layout/src/lib/modules/card/card-actions.component.ts","../../../../../libs/components/layout/src/lib/modules/card/card-actions.component.html","../../../../../libs/components/layout/src/lib/modules/card/card-content.component.ts","../../../../../libs/components/layout/src/lib/modules/card/card-content.component.html","../../../../../libs/components/layout/src/lib/modules/card/card-title.component.ts","../../../../../libs/components/layout/src/lib/modules/card/card-title.component.html","../../../../../libs/components/layout/src/lib/modules/card/card.component.ts","../../../../../libs/components/layout/src/lib/modules/card/card.component.html","../../../../../libs/components/layout/src/lib/modules/card/card.module.ts","../../../../../libs/components/layout/src/lib/modules/definition-list/definition-list-content.component.ts","../../../../../libs/components/layout/src/lib/modules/definition-list/definition-list-content.component.html","../../../../../libs/components/layout/src/lib/modules/definition-list/definition-list-heading.component.ts","../../../../../libs/components/layout/src/lib/modules/definition-list/definition-list-heading.component.html","../../../../../libs/components/layout/src/lib/modules/definition-list/definition-list.service.ts","../../../../../libs/components/layout/src/lib/modules/definition-list/definition-list-label.component.ts","../../../../../libs/components/layout/src/lib/modules/definition-list/definition-list-label.component.html","../../../../../libs/components/layout/src/lib/modules/definition-list/definition-list-value.component.ts","../../../../../libs/components/layout/src/lib/modules/definition-list/definition-list-value.component.html","../../../../../libs/components/layout/src/lib/modules/definition-list/definition-list.component.ts","../../../../../libs/components/layout/src/lib/modules/definition-list/definition-list.component.html","../../../../../libs/components/layout/src/lib/modules/definition-list/definition-list.module.ts","../../../../../libs/components/layout/src/lib/modules/description-list/description-list.service.ts","../../../../../libs/components/layout/src/lib/modules/description-list/description-list-description.component.ts","../../../../../libs/components/layout/src/lib/modules/description-list/description-list-description.component.html","../../../../../libs/components/layout/src/lib/modules/description-list/description-list-term.component.ts","../../../../../libs/components/layout/src/lib/modules/description-list/description-list-term.component.html","../../../../../libs/components/layout/src/lib/modules/description-list/description-list-content.component.ts","../../../../../libs/components/layout/src/lib/modules/description-list/description-list-content.component.html","../../../../../libs/components/layout/src/lib/modules/description-list/description-list-adapter-service.ts","../../../../../libs/components/layout/src/lib/modules/description-list/description-list.component.ts","../../../../../libs/components/layout/src/lib/modules/description-list/description-list.component.html","../../../../../libs/components/layout/src/lib/modules/description-list/description-list.module.ts","../../../../../libs/components/layout/src/lib/modules/description-list/types/description-list-mode.ts","../../../../../libs/components/layout/src/lib/modules/fluid-grid/column.component.ts","../../../../../libs/components/layout/src/lib/modules/fluid-grid/column.component.html","../../../../../libs/components/layout/src/lib/modules/fluid-grid/fluid-grid.component.ts","../../../../../libs/components/layout/src/lib/modules/fluid-grid/fluid-grid.component.html","../../../../../libs/components/layout/src/lib/modules/fluid-grid/row.component.ts","../../../../../libs/components/layout/src/lib/modules/fluid-grid/row.component.html","../../../../../libs/components/layout/src/lib/modules/fluid-grid/fluid-grid.module.ts","../../../../../libs/components/layout/src/lib/modules/format/format.component.ts","../../../../../libs/components/layout/src/lib/modules/format/format.component.html","../../../../../libs/components/layout/src/lib/modules/format/format.module.ts","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary-alert.component.ts","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary-alert.component.html","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary-content.component.ts","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary-content.component.html","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary-image.component.ts","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary-image.component.html","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary-key-info.component.ts","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary-key-info.component.html","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary-status.component.ts","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary-status.component.html","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary-subtitle.component.ts","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary-subtitle.component.html","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary-title.component.ts","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary-title.component.html","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary-adapter.service.ts","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary.component.ts","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary.component.html","../../../../../libs/components/layout/src/lib/modules/page-summary/page-summary.module.ts","../../../../../libs/components/layout/src/lib/modules/text-expand/text-expand-adapter.service.ts","../../../../../libs/components/layout/src/lib/modules/text-expand/text-expand-modal-context-token.ts","../../../../../libs/components/layout/src/lib/modules/text-expand/text-expand-modal.component.ts","../../../../../libs/components/layout/src/lib/modules/text-expand/text-expand-modal.component.html","../../../../../libs/components/layout/src/lib/modules/text-expand/text-expand.component.ts","../../../../../libs/components/layout/src/lib/modules/text-expand/text-expand.component.html","../../../../../libs/components/layout/src/lib/modules/text-expand/text-expand.module.ts","../../../../../libs/components/layout/src/lib/modules/text-expand-repeater/text-expand-repeater-adapter.service.ts","../../../../../libs/components/layout/src/lib/modules/text-expand-repeater/text-expand-repeater.component.ts","../../../../../libs/components/layout/src/lib/modules/text-expand-repeater/text-expand-repeater.component.html","../../../../../libs/components/layout/src/lib/modules/text-expand-repeater/text-expand-repeater.module.ts","../../../../../libs/components/layout/src/lib/modules/toolbar/toolbar-item.component.ts","../../../../../libs/components/layout/src/lib/modules/toolbar/toolbar-item.component.html","../../../../../libs/components/layout/src/lib/modules/toolbar/toolbar-section.component.ts","../../../../../libs/components/layout/src/lib/modules/toolbar/toolbar-section.component.html","../../../../../libs/components/layout/src/lib/modules/toolbar/toolbar-view-actions.component.ts","../../../../../libs/components/layout/src/lib/modules/toolbar/toolbar-view-actions.component.html","../../../../../libs/components/layout/src/lib/modules/toolbar/toolbar.component.ts","../../../../../libs/components/layout/src/lib/modules/toolbar/toolbar.component.html","../../../../../libs/components/layout/src/lib/modules/toolbar/toolbar.module.ts","../../../../../libs/components/layout/src/skyux-layout.ts"],"sourcesContent":["import {\n ElementRef,\n Injectable,\n Renderer2,\n RendererFactory2,\n} from '@angular/core';\n\nconst RESPONSIVE_CLASS_SM = 'sky-action-button-container-sm';\nconst RESPONSIVE_CLASS_MD = 'sky-action-button-container-md';\nconst RESPONSIVE_CLASS_LG = 'sky-action-button-container-lg';\n\nconst BREAKPOINT_MD = 912;\nconst BREAKPOINT_LG = 1378;\n\n/**\n * @internal\n */\n@Injectable()\nexport class SkyActionButtonAdapterService {\n #renderer: Renderer2;\n\n constructor(rendererFactory: RendererFactory2) {\n this.#renderer = rendererFactory.createRenderer(undefined, null);\n }\n\n public getParentWidth(element: ElementRef): number | undefined {\n return (\n element.nativeElement as HTMLElement\n ).parentElement?.getBoundingClientRect().width;\n }\n\n public setResponsiveClass(element: ElementRef, width = 0): void {\n const el: any = element.nativeElement;\n const className = this.#getResponsiveClassName(width);\n\n this.#renderer.removeClass(el, RESPONSIVE_CLASS_SM);\n this.#renderer.removeClass(el, RESPONSIVE_CLASS_MD);\n this.#renderer.removeClass(el, RESPONSIVE_CLASS_LG);\n\n this.#renderer.addClass(el, className);\n }\n\n #getResponsiveClassName(width: number): string {\n if (width < BREAKPOINT_MD) {\n return RESPONSIVE_CLASS_SM;\n } else if (width >= BREAKPOINT_MD && width < BREAKPOINT_LG) {\n return RESPONSIVE_CLASS_MD;\n } else {\n return RESPONSIVE_CLASS_LG;\n }\n }\n}\n","import {\n ChangeDetectorRef,\n Component,\n EventEmitter,\n HostBinding,\n Input,\n Output,\n SkipSelf,\n ViewEncapsulation,\n} from '@angular/core';\nimport { SkyHrefChange } from '@skyux/router';\n\nimport { SkyActionButtonPermalink } from './action-button-permalink';\n\n/**\n * Creates a button to present users with an option to move forward with tasks.\n */\n@Component({\n selector: 'sky-action-button',\n styleUrls: [\n './action-button.default.component.scss',\n './action-button.modern.component.scss',\n ],\n templateUrl: './action-button.component.html',\n encapsulation: ViewEncapsulation.None,\n standalone: false,\n})\nexport class SkyActionButtonComponent {\n @HostBinding('hidden')\n public hidden = false;\n\n /**\n * The link for the action button.\n */\n @Input()\n public permalink: SkyActionButtonPermalink | undefined;\n\n /**\n * Fires when users select the action button.\n */\n @Output()\n public actionClick = new EventEmitter<any>();\n\n #changeDetector: ChangeDetectorRef;\n\n constructor(@SkipSelf() changeDetector: ChangeDetectorRef) {\n this.#changeDetector = changeDetector;\n }\n\n public buttonClicked(): void {\n this.actionClick.emit();\n }\n\n public enterPress(): void {\n this.actionClick.emit();\n }\n\n public onSkyHrefDisplayChange($event: SkyHrefChange): void {\n if (this.hidden === $event.userHasAccess) {\n setTimeout(() => {\n this.hidden = !$event.userHasAccess;\n this.#changeDetector.markForCheck();\n });\n }\n }\n}\n","@if (!!permalink?.route?.commands) {\n <a\n class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n tabindex=\"0\"\n [fragment]=\"permalink?.route?.extras?.fragment\"\n [skyThemeClass]=\"{\n 'sky-btn sky-box': 'modern'\n }\"\n [queryParams]=\"permalink?.route?.extras?.queryParams\"\n [queryParamsHandling]=\"permalink?.route?.extras?.queryParamsHandling\"\n [routerLink]=\"permalink?.route?.commands\"\n >\n <ng-container *ngTemplateOutlet=\"actionButtonContent\" />\n </a>\n} @else if (!permalink?.route && permalink?.url) {\n @if (\n !permalink?.url?.includes('://') || permalink?.url?.startsWith('https://')\n ) {\n <a\n class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n tabindex=\"0\"\n [href]=\"permalink?.url\"\n [skyThemeClass]=\"{\n 'sky-btn sky-box': 'modern'\n }\"\n >\n <ng-container *ngTemplateOutlet=\"actionButtonContent\" />\n </a>\n } @else {\n <a\n class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n tabindex=\"0\"\n [skyHref]=\"permalink?.url\"\n [skyThemeClass]=\"{\n 'sky-btn sky-box': 'modern'\n }\"\n (skyHrefChange)=\"onSkyHrefDisplayChange($event)\"\n >\n <ng-container *ngTemplateOutlet=\"actionButtonContent\" />\n </a>\n }\n} @else {\n <div\n class=\"sky-action-button sky-btn-default sky-rounded-corners\"\n tabindex=\"0\"\n role=\"button\"\n [skyThemeClass]=\"{\n 'sky-btn sky-box': 'modern'\n }\"\n (click)=\"buttonClicked()\"\n (keydown.enter)=\"enterPress()\"\n >\n <ng-container *ngTemplateOutlet=\"actionButtonContent\" />\n </div>\n}\n\n<ng-template #actionButtonContent>\n <ng-container *skyThemeIf=\"'default'\">\n <div class=\"sky-action-button-icon-header-container\">\n <ng-container *ngTemplateOutlet=\"icon\" />\n <ng-container *ngTemplateOutlet=\"header\" />\n </div>\n <ng-container *ngTemplateOutlet=\"details\" />\n </ng-container>\n\n <ng-container *skyThemeIf=\"'modern'\">\n <ng-container *ngTemplateOutlet=\"icon\" />\n <div class=\"sky-action-button-content\">\n <ng-container *ngTemplateOutlet=\"header\" />\n <div\n class=\"sky-action-button-details\"\n [skyThemeClass]=\"{\n 'sky-font-deemphasized': 'modern'\n }\"\n >\n <ng-container *ngTemplateOutlet=\"details\" />\n </div>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #icon>\n <ng-content select=\"sky-action-button-icon\" />\n</ng-template>\n\n<ng-template #header>\n <ng-content select=\"sky-action-button-header\" />\n</ng-template>\n\n<ng-template #details>\n <ng-content select=\"sky-action-button-details\" />\n</ng-template>\n","import {\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n ContentChildren,\n ElementRef,\n HostListener,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n QueryList,\n ViewChild,\n ViewEncapsulation,\n} from '@angular/core';\nimport { SkyCoreAdapterService } from '@skyux/core';\nimport { SkyThemeComponentClassDirective, SkyThemeService } from '@skyux/theme';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyActionButtonAdapterService } from './action-button-adapter-service';\nimport { SkyActionButtonComponent } from './action-button.component';\nimport { SkyActionButtonContainerAlignItemsType } from './types/action-button-container-align-items-type';\n\n/**\n * Wraps action buttons to ensures that they have consistent height and spacing.\n * @required\n */\n@Component({\n selector: 'sky-action-button-container',\n styleUrls: [\n './action-button-container.default.component.scss',\n './action-button-container.modern.component.scss',\n ],\n templateUrl: './action-button-container.component.html',\n providers: [SkyActionButtonAdapterService],\n encapsulation: ViewEncapsulation.None,\n hostDirectives: [SkyThemeComponentClassDirective],\n standalone: false,\n})\nexport class SkyActionButtonContainerComponent\n implements AfterViewInit, OnDestroy, OnInit\n{\n /**\n * How to display the action buttons inside the action button container.\n * Options are `\"center\"` or `\"left\"`.\n * @default \"center\"\n */\n @Input()\n public set alignItems(\n value: SkyActionButtonContainerAlignItemsType | undefined,\n ) {\n this.#_alignItems = value ?? 'center';\n }\n\n public get alignItems(): SkyActionButtonContainerAlignItemsType {\n return this.#_alignItems;\n }\n\n @ContentChildren(SkyActionButtonComponent)\n public actionButtons: QueryList<SkyActionButtonComponent> | undefined;\n\n @ViewChild('container', {\n read: ElementRef,\n static: true,\n })\n public containerRef: ElementRef | undefined;\n\n #ngUnsubscribe = new Subject<void>();\n\n #syncMaxHeightTimeout?: number;\n\n set #themeName(value: string) {\n this.#_themeName = value;\n this.#updateResponsiveClass();\n this.#updateHeight();\n }\n\n #_alignItems: SkyActionButtonContainerAlignItemsType = 'center';\n\n #_themeName: string | undefined;\n\n #viewInitialized = false;\n\n #actionButtonAdapterService: SkyActionButtonAdapterService;\n #changeDetector: ChangeDetectorRef;\n #coreAdapterService: SkyCoreAdapterService;\n #hostElRef: ElementRef;\n #themeSvc: SkyThemeService | undefined;\n\n constructor(\n actionButtonAdapterService: SkyActionButtonAdapterService,\n changeDetector: ChangeDetectorRef,\n coreAdapterService: SkyCoreAdapterService,\n hostElRef: ElementRef,\n @Optional() themeSvc?: SkyThemeService,\n ) {\n this.#actionButtonAdapterService = actionButtonAdapterService;\n this.#changeDetector = changeDetector;\n this.#coreAdapterService = coreAdapterService;\n this.#hostElRef = hostElRef;\n this.#themeSvc = themeSvc;\n }\n\n public ngOnInit(): void {\n /* istanbul ignore else */\n if (this.#themeSvc) {\n this.#themeSvc.settingsChange\n .pipe(takeUntil(this.#ngUnsubscribe))\n .subscribe((themeSettings) => {\n this.#themeName = themeSettings.currentSettings.theme.name;\n this.#changeDetector.markForCheck();\n });\n }\n\n // Wait for children components to complete rendering before container width is determined.\n setTimeout(() => {\n this.#updateResponsiveClass();\n });\n }\n\n public ngAfterViewInit(): void {\n // Watch for dynamic action button changes and recalculate height.\n /* istanbul ignore else */\n if (this.actionButtons) {\n this.actionButtons.changes\n .pipe(takeUntil(this.#ngUnsubscribe))\n .subscribe(() => {\n this.#updateHeight();\n });\n }\n this.#viewInitialized = true;\n this.#updateHeight();\n }\n\n public ngOnDestroy(): void {\n this.#ngUnsubscribe.next();\n this.#ngUnsubscribe.complete();\n }\n\n public onContentChange(): void {\n this.#updateHeight();\n }\n\n @HostListener('window:resize')\n public onWindowResize(): void {\n this.#updateResponsiveClass();\n }\n\n #updateHeight(delay = 0): void {\n const ref = this.containerRef;\n if (ref && this.#viewInitialized) {\n this.#coreAdapterService.resetHeight(ref, '.sky-action-button');\n if (this.#_themeName === 'modern') {\n // Wait for children components to complete rendering before height is determined.\n clearTimeout(this.#syncMaxHeightTimeout);\n this.#syncMaxHeightTimeout = setTimeout(() => {\n const selector = '.sky-action-button:not([hidden])';\n const button = ref.nativeElement.querySelector(selector);\n if (button && button.offsetHeight > 0) {\n this.#coreAdapterService.syncMaxHeight(ref, selector);\n } else if (delay < 200) {\n // Wait progressively longer between retries.\n this.#updateHeight(delay + 50);\n }\n }, delay) as unknown as number;\n }\n }\n }\n\n #updateResponsiveClass(): void {\n if (this.containerRef) {\n const parentWidth = this.#actionButtonAdapterService.getParentWidth(\n this.#hostElRef,\n );\n this.#actionButtonAdapterService.setResponsiveClass(\n this.containerRef,\n parentWidth,\n );\n }\n }\n}\n","<div #container class=\"sky-action-button-container\">\n <div\n class=\"sky-action-button-flex\"\n [ngClass]=\"{\n 'sky-action-button-flex-align-left': alignItems === 'left',\n 'sky-action-button-flex-align-center': alignItems === 'center'\n }\"\n (cdkObserveContent)=\"onContentChange()\"\n >\n <ng-content />\n </div>\n</div>\n","import { Component } from '@angular/core';\n\n/**\n * Specifies a description to display on an action button.\n */\n@Component({\n selector: 'sky-action-button-details',\n templateUrl: './action-button-details.component.html',\n standalone: false,\n})\nexport class SkyActionButtonDetailsComponent {}\n","<ng-content />\n","import { Component } from '@angular/core';\nimport { SkyThemeComponentClassDirective } from '@skyux/theme';\n\n/**\n * Specifies a header to display on an action button.\n */\n@Component({\n selector: 'sky-action-button-header',\n styleUrls: [\n './action-button-header.default.component.scss',\n './action-button-header.modern.component.scss',\n ],\n templateUrl: './action-button-header.component.html',\n hostDirectives: [SkyThemeComponentClassDirective],\n standalone: false,\n})\nexport class SkyActionButtonHeaderComponent {}\n","<div\n class=\"sky-action-button-header\"\n [skyThemeClass]=\"{\n 'sky-font-display-3': 'modern',\n 'sky-font-heading-2': 'default'\n }\"\n>\n <ng-content />\n</div>\n","import { Component, Input, inject } from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { SkyMediaQueryService } from '@skyux/core';\nimport { SkyIconModule } from '@skyux/icon';\nimport { SkyThemeModule } from '@skyux/theme';\n\n/**\n * Specifies an icon to display on the action button.\n */\n@Component({\n selector: 'sky-action-button-icon',\n styleUrls: [\n './action-button-icon.default.component.scss',\n './action-button-icon.modern.component.scss',\n ],\n templateUrl: './action-button-icon.component.html',\n imports: [SkyIconModule, SkyThemeModule],\n})\nexport class SkyActionButtonIconComponent {\n /**\n * The name of the Blackbaud SVG icon to display.\n */\n @Input({ required: true })\n public iconName!: string;\n\n protected readonly breakpoint = toSignal(\n inject(SkyMediaQueryService).breakpointChange,\n );\n}\n","<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","import { ObserversModule } from '@angular/cdk/observers';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { RouterModule } from '@angular/router';\nimport { SkyHrefModule } from '@skyux/router';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyActionButtonContainerComponent } from './action-button-container.component';\nimport { SkyActionButtonDetailsComponent } from './action-button-details.component';\nimport { SkyActionButtonHeaderComponent } from './action-button-header.component';\nimport { SkyActionButtonIconComponent } from './action-button-icon.component';\nimport { SkyActionButtonComponent } from './action-button.component';\n\n@NgModule({\n declarations: [\n SkyActionButtonComponent,\n SkyActionButtonContainerComponent,\n SkyActionButtonDetailsComponent,\n SkyActionButtonHeaderComponent,\n ],\n imports: [\n CommonModule,\n ObserversModule,\n RouterModule,\n SkyActionButtonIconComponent,\n SkyHrefModule,\n SkyThemeModule,\n ],\n exports: [\n SkyActionButtonComponent,\n SkyActionButtonContainerComponent,\n SkyActionButtonDetailsComponent,\n SkyActionButtonHeaderComponent,\n SkyActionButtonIconComponent,\n ],\n})\nexport class SkyActionButtonModule {}\n","/* istanbul ignore file */\n\n/**\n * NOTICE: DO NOT MODIFY THIS FILE!\n * The contents of this file were automatically generated by\n * the 'ng generate @skyux/i18n:lib-resources-module lib/modules/shared/sky-layout' schematic.\n * To update this file, simply rerun the command.\n */\nimport { NgModule } from '@angular/core';\nimport {\n SkyI18nModule,\n SkyLibResources,\n SkyLibResourcesService,\n} from '@skyux/i18n';\n\nconst RESOURCES: Record<string, SkyLibResources> = {\n 'EN-US': {\n skyux_back_to_top: { message: 'Back to top' },\n skyux_card_checkbox_label: { message: 'Select card' },\n skyux_definition_list_none_found: { message: 'None found.' },\n skyux_description_list_none_found: { message: 'None found.' },\n skyux_inline_delete_assistive_text: {\n message: 'Are you sure you want to delete this item?',\n },\n skyux_inline_delete_cancel: { message: 'Cancel' },\n skyux_inline_delete_confirm_deletion: { message: 'Confirm deletion' },\n skyux_inline_delete_delete: { message: 'Delete' },\n skyux_text_expand_close_text: { message: 'Close' },\n skyux_text_expand_modal_title: { message: 'Expanded view' },\n skyux_text_expand_see_less: { message: 'See less' },\n skyux_text_expand_see_more: { message: 'See more' },\n },\n 'FR-CA': {\n skyux_back_to_top: { message: 'Retour en haut' },\n skyux_card_checkbox_label: { message: 'Sélectionner la carte' },\n skyux_definition_list_none_found: { message: 'Aucun trouvé.' },\n skyux_description_list_none_found: { message: 'Aucun trouvé.' },\n skyux_inline_delete_assistive_text: {\n message: 'Êtes-vous certain de vouloir supprimer cet élément?',\n },\n skyux_inline_delete_cancel: { message: 'Annuler' },\n skyux_inline_delete_confirm_deletion: {\n message: 'Confirmer la suppression',\n },\n skyux_inline_delete_delete: { message: 'Supprimer' },\n skyux_text_expand_close_text: { message: 'Fermer' },\n skyux_text_expand_modal_title: { message: 'Vue agrandie' },\n skyux_text_expand_see_less: { message: 'Voir moins' },\n skyux_text_expand_see_more: { message: 'Voir plus' },\n },\n};\n\nSkyLibResourcesService.addResources(RESOURCES);\n\n/**\n * Import into any component library module that needs to use resource strings.\n */\n@NgModule({\n exports: [SkyI18nModule],\n})\nexport class SkyLayoutResourcesModule {}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\nimport { Observable, Subject } from 'rxjs';\n\n/**\n * @internal\n */\n@Component({\n selector: 'sky-back-to-top',\n templateUrl: './back-to-top.component.html',\n styleUrls: ['./back-to-top.component.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n standalone: false,\n})\nexport class SkyBackToTopComponent {\n public get scrollToTopClick(): Observable<void> {\n return this.#_scrollToTopClick.asObservable();\n }\n\n #_scrollToTopClick = new Subject<void>();\n\n public onScrollToTopClick(): void {\n this.#_scrollToTopClick.next();\n this.#_scrollToTopClick.complete();\n }\n}\n","<div\n class=\"sky-back-to-top\"\n [skyThemeClass]=\"{\n 'sky-shadow': 'default',\n 'sky-elevation-3': 'modern'\n }\"\n>\n <button\n class=\"sky-btn sky-btn-link-inline\"\n type=\"button\"\n (click)=\"onScrollToTopClick()\"\n >\n {{ 'skyux_back_to_top' | skyLibResources }}\n </button>\n</div>\n","import { ElementRef, Injectable, OnDestroy } from '@angular/core';\nimport { SkyAppWindowRef, SkyScrollableHostService } from '@skyux/core';\n\nimport { BehaviorSubject, Observable, Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\n/**\n * @internal\n */\n@Injectable()\nexport class SkyBackToTopDomAdapterService implements OnDestroy {\n #ngUnsubscribe = new Subject<void>();\n #scrollableHostScrollEventUnsubscribe = new Subject<void>();\n #scrollableHostService: SkyScrollableHostService;\n #windowRef: SkyAppWindowRef;\n\n constructor(\n windowRef: SkyAppWindowRef,\n scrollableHostService: SkyScrollableHostService,\n ) {\n this.#windowRef = windowRef;\n this.#scrollableHostService = scrollableHostService;\n }\n\n public ngOnDestroy(): void {\n this.#ngUnsubscribe.next();\n this.#ngUnsubscribe.complete();\n this.#scrollableHostScrollEventUnsubscribe.next();\n this.#scrollableHostScrollEventUnsubscribe.complete();\n }\n\n /**\n * This event returns a boolean on scroll indicating whether the provided element is in view.\n * @param elementRef The target element reference.\n */\n public elementInViewOnScroll(elementRef: ElementRef): Observable<boolean> {\n const scrollableHostObservable =\n this.#scrollableHostService.watchScrollableHostScrollEvents(elementRef);\n\n const isInitiallyInView = this.isElementScrolledInView(elementRef);\n const returnedObservable = new BehaviorSubject<boolean>(isInitiallyInView);\n\n scrollableHostObservable\n .pipe(takeUntil(this.#scrollableHostScrollEventUnsubscribe))\n .subscribe(() => {\n const isInView = this.isElementScrolledInView(elementRef);\n returnedObservable.next(isInView);\n });\n\n return returnedObservable;\n }\n\n /**\n * Scrolls the window or scrollable parent to the provided element.\n * @param elementRef The target element reference.\n */\n public scrollToElement(elementRef: ElementRef): void {\n /* sanity check */\n /* istanbul ignore if */\n if (!elementRef || !elementRef.nativeElement) {\n return;\n }\n\n const scrollableHost =\n this.#scrollableHostService.getScrollableHost(elementRef);\n\n if (scrollableHost instanceof Window) {\n // Scroll to top of window, but account for the body margin that allows for the omnibar if it exists.\n const bodyMarginOffset = parseInt(\n getComputedStyle(document.body).marginTop,\n 10,\n );\n const newOffsetTop =\n elementRef.nativeElement.offsetTop - bodyMarginOffset;\n this.#windowRef.nativeWindow.scrollTo(\n elementRef.nativeElement.offsetLeft,\n newOffsetTop,\n );\n } else {\n // Scroll to top of parent element.\n scrollableHost.scrollTop =\n scrollableHost.offsetTop - elementRef.nativeElement.offsetTop;\n }\n }\n\n public isElementScrolledInView(element: ElementRef): boolean {\n const parentElement =\n this.#scrollableHostService.getScrollableHost(element);\n\n if (!element.nativeElement.offsetParent) {\n return true;\n }\n const buffer = 25;\n const elementRect = element.nativeElement.getBoundingClientRect();\n\n if (parentElement instanceof HTMLElement) {\n const parentRect = parentElement.getBoundingClientRect();\n return elementRect.top > parentRect.top - buffer;\n } else {\n return elementRect.top > -buffer;\n }\n }\n}\n","/**\n * The type of message to send to the back to top component.\n */\nexport enum SkyBackToTopMessageType {\n /**\n * Scrolls the element back to the top.\n */\n BackToTop = 0,\n}\n","import {\n AfterViewInit,\n Directive,\n ElementRef,\n Input,\n OnDestroy,\n} from '@angular/core';\nimport { SkyDockItem, SkyDockService } from '@skyux/core';\n\nimport { Subject } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nimport { SkyBackToTopDomAdapterService } from './back-to-top-adapter.service';\nimport { SkyBackToTopComponent } from './back-to-top.component';\nimport { SkyBackToTopMessage } from './models/back-to-top-message';\nimport { SkyBackToTopMessageType } from './models/back-to-top-message-type';\nimport { SkyBackToTopOptions } from './models/back-to-top-options';\n\n/**\n * Associates a button with an element on the page and displays that button\n * to return to the element after users scroll away.\n */\n@Directive({\n selector: '[skyBackToTop]',\n providers: [SkyBackToTopDomAdapterService],\n standalone: false,\n})\nexport class SkyBackToTopDirective implements AfterViewInit, OnDestroy {\n /**\n * Configuration options for the back to top component.\n */\n @Input()\n public set skyBackToTop(value: SkyBackToTopOptions | '' | undefined) {\n this.#buttonHidden = !!(value && value?.buttonHidden);\n\n this.#handleBackToTopButton(this.#elementInView);\n }\n\n /**\n * The observable to send commands to the back to top component.\n * The commands respect the `SkyBackToTopMessage` type.\n */\n @Input()\n public set skyBackToTopMessageStream(\n value: Subject<SkyBackToTopMessage> | undefined,\n ) {\n if (this.#_skyBackToTopMessageStream) {\n this.#_skyBackToTopMessageStream.unsubscribe();\n }\n this.#_skyBackToTopMessageStream = value;\n this.#_skyBackToTopMessageStream\n ?.pipe(takeUntil(this.#ngUnsubscribe))\n .subscribe((message: SkyBackToTopMessage) =>\n this.#handleIncomingMessages(message),\n );\n }\n\n #buttonHidden = false;\n #dockItem: SkyDockItem<SkyBackToTopComponent> | undefined;\n #dockService: SkyDockService;\n #domAdapter: SkyBackToTopDomAdapterService;\n #elementInView = false;\n #elementRef: ElementRef;\n\n #ngUnsubscribe = new Subject<void>();\n #_skyBackToTopMessageStream: Subject<SkyBackToTopMessage> | undefined;\n\n constructor(\n dockService: SkyDockService,\n domAdapter: SkyBackToTopDomAdapterService,\n elementRef: ElementRef,\n ) {\n this.#dockService = dockService;\n this.#domAdapter = domAdapter;\n this.#elementRef = elementRef;\n }\n\n public ngAfterViewInit(): void {\n this.#elementInView = this.#domAdapter.isElementScrolledInView(\n this.#elementRef,\n );\n\n this.#handleBackToTopButton(this.#elementInView);\n this.#setBackToTopListeners();\n }\n\n public ngOnDestroy(): void {\n if (this.#dockItem) {\n this.#dockItem.destroy();\n }\n }\n\n #handleBackToTopButton(elementInView: boolean): void {\n // Add back to top button if user scrolls down and button is not hidden.\n if (\n !this.#dockItem &&\n elementInView !== undefined &&\n !elementInView &&\n !this.#buttonHidden\n ) {\n this.#addBackToTop();\n }\n // Remove back to top button if user scrolls back up.\n if (elementInView || this.#buttonHidden) {\n this.#destroyBackToTop();\n }\n }\n\n #addBackToTop(): void {\n this.#dockItem = this.#dockService.insertComponent(SkyBackToTopComponent);\n\n // Listen for clicks on the \"back to top\" button so we know when to scroll up.\n this.#dockItem.componentInstance.scrollToTopClick\n .pipe(takeUntil(this.#ngUnsubscribe))\n .subscribe(() => {\n this.#domAdapter.scrollToElement(this.#elementRef);\n });\n }\n\n #handleIncomingMessages(message: SkyBackToTopMessage): void {\n /* istanbul ignore else */\n if (message.type === SkyBackToTopMessageType.BackToTop) {\n this.#domAdapter.scrollToElement(this.#elementRef);\n }\n }\n\n #setBackToTopListeners(): void {\n /* istanbul ignore else */\n if (this.#elementRef) {\n this.#domAdapter\n .elementInViewOnScroll(this.#elementRef)\n .pipe(takeUntil(this.#ngUnsubscribe))\n .subscribe((elementInView: boolean) => {\n this.#elementInView = elementInView;\n\n this.#handleBackToTopButton(elementInView);\n });\n }\n }\n\n #destroyBackToTop(): void {\n /* istanbul ignore else */\n if (this.#dockItem) {\n this.#dockItem.destroy();\n this.#dockItem = undefined;\n }\n }\n}\n","import { NgModule } from '@angular/core';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyLayoutResourcesModule } from '../shared/sky-layout-resources.module';\n\nimport { SkyBackToTopComponent } from './back-to-top.component';\nimport { SkyBackToTopDirective } from './back-to-top.directive';\n\n@NgModule({\n declarations: [SkyBackToTopComponent, SkyBackToTopDirective],\n imports: [SkyLayoutResourcesModule, SkyThemeModule],\n exports: [SkyBackToTopComponent, SkyBackToTopDirective],\n})\nexport class SkyBackToTopModule {}\n","import { Component } from '@angular/core';\n\n/**\n * Specifies the body content to display inside the box and provides padding around that content.\n */\n@Component({\n selector: 'sky-box-content',\n templateUrl: './box-content.component.html',\n standalone: false,\n})\nexport class SkyBoxContentComponent {}\n","<div class=\"sky-box-content\">\n <ng-content />\n</div>\n","import { InjectionToken } from '@angular/core';\n\nexport const SKY_BOX_HEADER_ID = new InjectionToken<string>(\n 'SKY_BOX_HEADER_ID',\n);\n","import { Component, inject } from '@angular/core';\nimport { SkyContentInfoProvider } from '@skyux/core';\n\nimport { SKY_BOX_HEADER_ID } from './box-header-id-token';\n\n/**\n * Specifies the controls to display in upper right corner of the box. These buttons typically let users edit the box content.\n */\n@Component({\n selector: 'sky-box-controls',\n templateUrl: './box-controls.component.html',\n providers: [SkyContentInfoProvider],\n standalone: false,\n})\nexport class SkyBoxControlsComponent {\n public boxHasHeader(value: boolean): void {\n if (value) {\n this.#contentInfoProvider.patchInfo({\n descriptor: { type: 'elementId', value: this.#boxHeaderId },\n });\n } else {\n this.#contentInfoProvider.patchInfo({ descriptor: undefined });\n }\n }\n\n readonly #contentInfoProvider = inject(SkyContentInfoProvider);\n readonly #boxHeaderId = inject(SKY_BOX_HEADER_ID);\n}\n","<div class=\"sky-box-controls\">\n <ng-content />\n</div>\n","import { Component, ViewEncapsulation, inject } from '@angular/core';\nimport { SkyLogService } from '@skyux/core';\n\nimport { SKY_BOX_HEADER_ID } from './box-header-id-token';\n\n/**\n * Specifies a header for the box.\n * @deprecated Use `headingText` input on the `sky-box` component instead.\n */\n@Component({\n selector: 'sky-box-header',\n templateUrl: './box-header.component.html',\n styleUrls: ['./box-header.component.scss'],\n encapsulation: ViewEncapsulation.None,\n standalone: false,\n})\nexport class SkyBoxHeaderComponent {\n protected readonly boxHeaderId = inject(SKY_BOX_HEADER_ID);\n\n constructor() {\n inject(SkyLogService).deprecated('SkyBoxHeaderComponent', {\n deprecationMajorVersion: 10,\n replacementRecommendation:\n 'To add a header to box, use the `headingText` input on the box component instead.',\n });\n }\n}\n","<div class=\"sky-box-header\">\n <span skyTrim [id]=\"boxHeaderId\"><ng-content /></span\n ><span class=\"sky-control-help-container\"\n ><ng-content select=\".sky-control-help\"></ng-content\n ></span>\n</div>\n","import {\n Component,\n ContentChild,\n ElementRef,\n Input,\n TemplateRef,\n ViewEncapsulation,\n booleanAttribute,\n inject,\n numberAttribute,\n} from '@angular/core';\nimport { SkyIdService } from '@skyux/core';\n\nimport { SkyBoxControlsComponent } from './box-controls.component';\nimport { SKY_BOX_HEADER_ID } from './box-header-id-token';\nimport { SkyBoxHeaderComponent } from './box-header.component';\nimport { SkyBoxHeadingLevel } from './box-heading-level';\nimport { SkyBoxHeadingStyle } from './box-heading-style';\n\nfunction numberAttribute2(value: unknown): number {\n return numberAttribute(value, 2);\n}\n\n/**\n * Provides a common look-and-feel for box content with options to display a common box header, specify body content, and display common box controls.\n */\n@Component({\n selector: 'sky-box',\n templateUrl: './box.component.html',\n styleUrls: ['./box.component.scss'],\n encapsulation: ViewEncapsulation.None,\n providers: [\n {\n provide: SKY_BOX_HEADER_ID,\n useFactory(): string {\n const idService = inject(SkyIdService);\n return idService.generateId();\n },\n },\n ],\n standalone: false,\n})\nexport class SkyBoxComponent {\n /**\n * The text to display as the box's heading.\n */\n @Input()\n public set headingText(value: string | undefined) {\n this.#_headingText = value;\n\n if (this.#boxControls) {\n this.#boxControls.boxHasHeader(!!value);\n }\n }\n\n public get headingText(): string | undefined {\n return this.#_headingText;\n }\n\n /**\n * Indicates whether to hide the `headingText`.\n */\n @Input({ transform: booleanAttribute })\n public headingHidden = false;\n\n /**\n * The semantic heading level in the document structure. The default is 2.\n * @default 2\n */\n @Input({ transform: numberAttribute2 })\n public headingLevel: SkyBoxHeadingLevel = 2;\n\n /**\n * The heading [font style](https://developer.blackbaud.com/skyux/design/styles/typography#headings).\n * @default 2\n */\n @Input({ transform: numberAttribute2 })\n public set headingStyle(value: SkyBoxHeadingStyle) {\n this.headingClass = `sky-font-heading-${value}`;\n }\n\n /**\n * The content of the help popover. When specified along with `headingText`, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline)\n * button is added to the box heading. The help inline button displays a [popover](https://developer.blackbaud.com/skyux/components/popover)\n * when clicked using the specified content and optional title. This property only applies when `headingText` is also specified.\n */\n @Input()\n public helpPopoverContent: string | TemplateRef<unknown> | undefined;\n\n /**\n * The title of the help popover. This property only applies when `helpPopoverContent` is\n * also specified.\n */\n @Input()\n public helpPopoverTitle: string | undefined;\n\n /**\n * A help key that identifies the global help content to display. When specified along with `headingText`, a [help inline](https://developer.blackbaud.com/skyux/components/help-inline)\n * button is placed beside the box heading. Clicking the button invokes [global help](https://developer.blackbaud.com/skyux/learn/develop/global-help)\n * as configured by the application. This property only applies when `headingText` is also specified.\n */\n @Input()\n public helpKey: string | undefined;\n\n /**\n * The ARIA label for the box. This sets the box's `aria-label` attribute to provide a text equivalent for screen readers\n * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n * If the box includes a visible label, use `ariaLabelledBy` instead.\n * For more information about the `aria-label` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-label).\n * @deprecated Use `headingText` instead.\n */\n @Input()\n public ariaLabel: string | undefined;\n\n /**\n * The HTML element ID of the element that labels\n * the box. This sets the box's `aria-labelledby` attribute to provide a text equivalent for screen readers\n * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility).\n * If the box does not include a visible label, use `ariaLabel` instead.\n * For more information about the `aria-labelledby` attribute, see the [WAI-ARIA definition](https://www.w3.org/TR/wai-aria/#aria-labelledby).\n * @deprecated Use `headingText` instead.\n */\n @Input()\n public ariaLabelledBy: string | undefined;\n\n /**\n * The ARIA role for the box\n * [to support accessibility](https://developer.blackbaud.com/skyux/learn/accessibility)\n * by indicating what the box contains. For information about\n * how an ARIA role indicates what an item represents on a web page,\n * see the [WAI-ARIA roles model](https://www.w3.org/WAI/PF/aria/#roles).\n */\n @Input()\n public ariaRole: string | undefined;\n\n @ContentChild(SkyBoxHeaderComponent, { read: ElementRef })\n public set boxHeaderRef(value: ElementRef | undefined) {\n this.#boxHeaderRef = value;\n if (this.#boxControls) {\n this.#boxControls.boxHasHeader(!!value);\n }\n }\n\n @ContentChild(SkyBoxControlsComponent)\n public set boxControls(value: SkyBoxControlsComponent | undefined) {\n this.#boxControls = value;\n\n if (value) {\n value.boxHasHeader(!!this.headingText || !!this.#boxHeaderRef);\n }\n }\n\n public headerId = inject(SKY_BOX_HEADER_ID);\n\n protected headingClass = 'sky-font-heading-2';\n\n #_headingText: string | undefined;\n\n #boxControls: SkyBoxControlsComponent | undefined;\n #boxHeaderRef: ElementRef | undefined;\n}\n","<section\n class=\"sky-box\"\n [attr.aria-label]=\"headingText || ariaLabel\"\n [attr.aria-labelledby]=\"headingText ? headerId : ariaLabelledBy\"\n [attr.role]=\"ariaRole\"\n [skyThemeClass]=\"{\n 'sky-shadow sky-border-dark': 'default',\n 'sky-elevation-1-bordered': 'modern'\n }\"\n>\n <div class=\"sky-box-header-content\">\n @if (headingText) {\n <div class=\"sky-box-header-right\">\n @switch (headingLevel) {\n @case (3) {\n <!-- display: inline -->\n <h3\n [id]=\"headerId\"\n [class]=\"headingClass\"\n [class.sky-screen-reader-only]=\"headingHidden\"\n >{{ headingText }}</h3\n >\n }\n @case (4) {\n <!-- display: inline -->\n <h4\n [id]=\"headerId\"\n [class]=\"headingClass\"\n [class.sky-screen-reader-only]=\"headingHidden\"\n >{{ headingText }}</h4\n >\n }\n @case (5) {\n <!-- display: inline -->\n <h5\n [id]=\"headerId\"\n [class]=\"headingClass\"\n [class.sky-screen-reader-only]=\"headingHidden\"\n >{{ headingText }}</h5\n >\n }\n @default {\n <!-- display: inline -->\n <h2\n [id]=\"headerId\"\n [class]=\"headingClass\"\n [class.sky-screen-reader-only]=\"headingHidden\"\n >{{ headingText }}</h2\n >\n }\n }\n @if ((helpPopoverContent || helpKey) && !headingHidden) {\n <span class=\"sky-control-help-container\">\n <sky-help-inline\n [helpKey]=\"helpKey\"\n [labelText]=\"headingText\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n </span>\n }\n </div>\n } @else {\n <ng-content select=\"sky-box-header\" />\n }\n <ng-content select=\"sky-box-controls\" />\n </div>\n <ng-content />\n</section>\n","import { NgModule } from '@angular/core';\nimport { SkyTrimModule } from '@skyux/core';\nimport { SkyHelpInlineModule } from '@skyux/help-inline';\nimport { SkyThemeModule } from '@skyux/theme';\n\nimport { SkyBoxContentComponent } from './box-content.component';\nimport { SkyBoxControlsComponent } from './box-controls.component';\nimport { SkyBoxHeaderComponent } from './box-header.component';\nimport { SkyBoxComponent } from './box.component';\n\n@NgModule({\n declarations: [\n SkyBoxComponent,\n SkyBoxHeaderComponent,\n SkyBoxContentComponent,\n SkyBoxControlsComponent,\n ],\n imports: [SkyHelpInlineModule, SkyThemeModule, SkyTrimModule],\n exports: [\n SkyBoxComponent,\n SkyBoxHeaderComponent,\n SkyBoxContentComponent,\n SkyBoxControlsComponent,\n ],\n})\nexport class SkyBoxModule {}\n","