@skyux/layout
Version:
This library was generated with [Nx](https://nx.dev).
282 lines (276 loc) • 300 kB
JavaScript
import * as i5 from '@angular/cdk/observers';
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, signal, TemplateRef, contentChildren, effect, Inject, input, computed, viewChild, ChangeDetectorRef, afterRenderEffect } from '@angular/core';
import * as i2 from '@angular/router';
import { RouterModule } from '@angular/router';
import * as i3 from '@skyux/router';
import { SkyHrefModule } from '@skyux/router';
import * as i2$1 from '@skyux/theme';
import { SkyThemeComponentClassDirective, SkyThemeModule } from '@skyux/theme';
import { Subject, BehaviorSubject, forkJoin } from 'rxjs';
import { takeUntil, take } from 'rxjs/operators';
import * as i1$1 from '@skyux/core';
import { SkyMediaQueryService, SkyContentInfoProvider, SkyLogService, SkyIdService, SkyTrimModule, SkyCoreAdapterService, _SkyAnimationEndHandlerDirective, SkyIdModule, _SkyTransitionEndHandlerDirective } from '@skyux/core';
import { toSignal } from '@angular/core/rxjs-interop';
import * as i1$2 from '@skyux/icon';
import { SkyIconModule } from '@skyux/icon';
import * as i5$1 from '@skyux/i18n';
import { SkyLibResourcesService, SkyI18nModule } from '@skyux/i18n';
import * as i1$3 from '@skyux/help-inline';
import { SkyHelpInlineModule } from '@skyux/help-inline';
import * as i3$2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i4 from '@skyux/forms';
import { SkyCheckboxModule } from '@skyux/forms';
import * as i3$1 from '@skyux/indicators';
import { SkyWaitModule } from '@skyux/indicators';
import * as i1$4 from '@skyux/modals';
import { SkyModalModule } from '@skyux/modals';
const RESPONSIVE_CLASS_SM = 'sky-action-button-container-sm';
const RESPONSIVE_CLASS_MD = 'sky-action-button-container-md';
const RESPONSIVE_CLASS_LG = 'sky-action-button-container-lg';
const BREAKPOINT_MD = 912;
const BREAKPOINT_LG = 1378;
/**
* @internal
*/
class SkyActionButtonAdapterService {
#renderer;
constructor(rendererFactory) {
this.#renderer = rendererFactory.createRenderer(undefined, null);
}
getParentWidth(element) {
return element.nativeElement.parentElement?.getBoundingClientRect().width;
}
setResponsiveClass(element, width = 0) {
const el = element.nativeElement;
const className = this.#getResponsiveClassName(width);
this.#renderer.removeClass(el, RESPONSIVE_CLASS_SM);
this.#renderer.removeClass(el, RESPONSIVE_CLASS_MD);
this.#renderer.removeClass(el, RESPONSIVE_CLASS_LG);
this.#renderer.addClass(el, className);
}
#getResponsiveClassName(width) {
if (width < BREAKPOINT_MD) {
return RESPONSIVE_CLASS_SM;
}
else if (width >= BREAKPOINT_MD && width < BREAKPOINT_LG) {
return RESPONSIVE_CLASS_MD;
}
else {
return RESPONSIVE_CLASS_LG;
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionButtonAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionButtonAdapterService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionButtonAdapterService, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: i0.RendererFactory2 }] });
/**
* Creates a button to present users with an option to move forward with tasks.
*/
class SkyActionButtonComponent {
#changeDetector;
constructor(changeDetector) {
this.hidden = false;
/**
* Fires when users select the action button.
*/
this.actionClick = new EventEmitter();
this.#changeDetector = changeDetector;
}
buttonClicked() {
this.actionClick.emit();
}
enterPress() {
this.actionClick.emit();
}
onSkyHrefDisplayChange($event) {
if (this.hidden === $event.userHasAccess) {
setTimeout(() => {
this.hidden = !$event.userHasAccess;
this.#changeDetector.markForCheck();
});
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionButtonComponent, deps: [{ token: i0.ChangeDetectorRef, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: SkyActionButtonComponent, isStandalone: false, selector: "sky-action-button", inputs: { permalink: "permalink" }, outputs: { actionClick: "actionClick" }, host: { properties: { "hidden": "this.hidden" } }, ngImport: i0, template: "@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", styles: [".sky-action-button:not(.sky-theme-modern *){--sky-action-button-padding: 20px 20px 30px;--sky-action-button-max-width: none;--sky-action-button-margin-bottom: 20px;--sky-action-button-icon-header-container-flex-direction: unset;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;cursor:pointer;text-align:center;text-decoration:none!important;display:block;padding:var(--sky-action-button-padding);max-width:var(--sky-action-button-max-width)}.sky-action-button:not(.sky-theme-modern *):hover{border-color:#c2c4c6}.sky-action-button:not(.sky-theme-modern *) .sky-action-button-icon-header-container{display:flex;flex-direction:var(--sky-action-button-icon-header-container-flex-direction);justify-content:center;margin-bottom:var(--sky-action-button-margin-bottom)}.sky-responsive-container-xs .sky-action-button:not(.sky-theme-modern *),.sky-responsive-container-sm .sky-action-button:not(.sky-theme-modern *),.sky-responsive-container-md .sky-action-button:not(.sky-theme-modern *),.sky-responsive-container-lg .sky-action-button:not(.sky-theme-modern *){--sky-action-button-padding: 20px 20px 30px;--sky-action-button-max-width: none;--sky-action-button-margin-bottom: 20px;--sky-action-button-icon-header-container-flex-direction: unset;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;cursor:pointer;text-align:center;text-decoration:none!important;display:block;padding:var(--sky-action-button-padding);max-width:var(--sky-action-button-max-width)}.sky-responsive-container-xs .sky-action-button:not(.sky-theme-modern *):hover,.sky-responsive-container-sm .sky-action-button:not(.sky-theme-modern *):hover,.sky-responsive-container-md .sky-action-button:not(.sky-theme-modern *):hover,.sky-responsive-container-lg .sky-action-button:not(.sky-theme-modern *):hover{border-color:#c2c4c6}.sky-responsive-container-xs .sky-action-button:not(.sky-theme-modern *) .sky-action-button-icon-header-container,.sky-responsive-container-sm .sky-action-button:not(.sky-theme-modern *) .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button:not(.sky-theme-modern *) .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button:not(.sky-theme-modern *) .sky-action-button-icon-header-container{display:flex;flex-direction:var(--sky-action-button-icon-header-container-flex-direction);justify-content:center;margin-bottom:var(--sky-action-button-margin-bottom)}@media(min-width:768px){.sky-action-button:not(.sky-theme-modern *){--sky-action-button-padding: 30px 20px;--sky-action-button-max-width: 236px;--sky-action-button-margin-bottom: 0;--sky-action-button-icon-header-container-flex-direction: column}}.sky-responsive-container-sm .sky-action-button:not(.sky-theme-modern *),.sky-responsive-container-md .sky-action-button:not(.sky-theme-modern *),.sky-responsive-container-lg .sky-action-button:not(.sky-theme-modern *){--sky-action-button-padding: 30px 20px;--sky-action-button-max-width: 236px;--sky-action-button-margin-bottom: 0;--sky-action-button-icon-header-container-flex-direction: column}\n", ".sky-theme-modern .sky-action-button{cursor:pointer;text-decoration:none!important;max-width:446px;display:flex;flex-flow:row nowrap;padding:var(--sky-comp-action_button-space-inset-top) var(--sky-comp-action_button-space-inset-right) var(--sky-comp-action_button-space-inset-bottom) var(--sky-comp-action_button-space-inset-left);text-align:left;border:none;margin:0}.sky-theme-modern .sky-action-button .sky-action-button-content{flex:1 1 auto;margin:0 var(--sky-space-inline-s) 0 0;white-space:initial}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i2$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'sky-action-button', encapsulation: ViewEncapsulation.None, standalone: false, template: "@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", styles: [".sky-action-button:not(.sky-theme-modern *){--sky-action-button-padding: 20px 20px 30px;--sky-action-button-max-width: none;--sky-action-button-margin-bottom: 20px;--sky-action-button-icon-header-container-flex-direction: unset;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;cursor:pointer;text-align:center;text-decoration:none!important;display:block;padding:var(--sky-action-button-padding);max-width:var(--sky-action-button-max-width)}.sky-action-button:not(.sky-theme-modern *):hover{border-color:#c2c4c6}.sky-action-button:not(.sky-theme-modern *) .sky-action-button-icon-header-container{display:flex;flex-direction:var(--sky-action-button-icon-header-container-flex-direction);justify-content:center;margin-bottom:var(--sky-action-button-margin-bottom)}.sky-responsive-container-xs .sky-action-button:not(.sky-theme-modern *),.sky-responsive-container-sm .sky-action-button:not(.sky-theme-modern *),.sky-responsive-container-md .sky-action-button:not(.sky-theme-modern *),.sky-responsive-container-lg .sky-action-button:not(.sky-theme-modern *){--sky-action-button-padding: 20px 20px 30px;--sky-action-button-max-width: none;--sky-action-button-margin-bottom: 20px;--sky-action-button-icon-header-container-flex-direction: unset;border-top:1px solid #cdcfd2;border-bottom:1px solid #cdcfd2;border-left:1px solid #cdcfd2;border-right:1px solid #cdcfd2;cursor:pointer;text-align:center;text-decoration:none!important;display:block;padding:var(--sky-action-button-padding);max-width:var(--sky-action-button-max-width)}.sky-responsive-container-xs .sky-action-button:not(.sky-theme-modern *):hover,.sky-responsive-container-sm .sky-action-button:not(.sky-theme-modern *):hover,.sky-responsive-container-md .sky-action-button:not(.sky-theme-modern *):hover,.sky-responsive-container-lg .sky-action-button:not(.sky-theme-modern *):hover{border-color:#c2c4c6}.sky-responsive-container-xs .sky-action-button:not(.sky-theme-modern *) .sky-action-button-icon-header-container,.sky-responsive-container-sm .sky-action-button:not(.sky-theme-modern *) .sky-action-button-icon-header-container,.sky-responsive-container-md .sky-action-button:not(.sky-theme-modern *) .sky-action-button-icon-header-container,.sky-responsive-container-lg .sky-action-button:not(.sky-theme-modern *) .sky-action-button-icon-header-container{display:flex;flex-direction:var(--sky-action-button-icon-header-container-flex-direction);justify-content:center;margin-bottom:var(--sky-action-button-margin-bottom)}@media(min-width:768px){.sky-action-button:not(.sky-theme-modern *){--sky-action-button-padding: 30px 20px;--sky-action-button-max-width: 236px;--sky-action-button-margin-bottom: 0;--sky-action-button-icon-header-container-flex-direction: column}}.sky-responsive-container-sm .sky-action-button:not(.sky-theme-modern *),.sky-responsive-container-md .sky-action-button:not(.sky-theme-modern *),.sky-responsive-container-lg .sky-action-button:not(.sky-theme-modern *){--sky-action-button-padding: 30px 20px;--sky-action-button-max-width: 236px;--sky-action-button-margin-bottom: 0;--sky-action-button-icon-header-container-flex-direction: column}\n", ".sky-theme-modern .sky-action-button{cursor:pointer;text-decoration:none!important;max-width:446px;display:flex;flex-flow:row nowrap;padding:var(--sky-comp-action_button-space-inset-top) var(--sky-comp-action_button-space-inset-right) var(--sky-comp-action_button-space-inset-bottom) var(--sky-comp-action_button-space-inset-left);text-align:left;border:none;margin:0}.sky-theme-modern .sky-action-button .sky-action-button-content{flex:1 1 auto;margin:0 var(--sky-space-inline-s) 0 0;white-space:initial}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef, decorators: [{
type: SkipSelf
}] }], propDecorators: { hidden: [{
type: HostBinding,
args: ['hidden']
}], permalink: [{
type: Input
}], actionClick: [{
type: Output
}] } });
/**
* Wraps action buttons to ensures that they have consistent height and spacing.
* @required
*/
class SkyActionButtonContainerComponent {
/**
* How to display the action buttons inside the action button container.
* Options are `"center"` or `"left"`.
* @default "center"
*/
set alignItems(value) {
this.#_alignItems = value ?? 'center';
}
get alignItems() {
return this.#_alignItems;
}
#ngUnsubscribe = new Subject();
#syncMaxHeightTimeout;
set #themeName(value) {
this.#_themeName = value;
this.#updateResponsiveClass();
this.#updateHeight();
}
#_alignItems = 'center';
#_themeName;
#viewInitialized = false;
#actionButtonAdapterService;
#changeDetector;
#coreAdapterService;
#hostElRef;
#themeSvc;
constructor(actionButtonAdapterService, changeDetector, coreAdapterService, hostElRef, themeSvc) {
this.#actionButtonAdapterService = actionButtonAdapterService;
this.#changeDetector = changeDetector;
this.#coreAdapterService = coreAdapterService;
this.#hostElRef = hostElRef;
this.#themeSvc = themeSvc;
}
ngOnInit() {
/* istanbul ignore else */
if (this.#themeSvc) {
this.#themeSvc.settingsChange
.pipe(takeUntil(this.#ngUnsubscribe))
.subscribe((themeSettings) => {
this.#themeName = themeSettings.currentSettings.theme.name;
this.#changeDetector.markForCheck();
});
}
// Wait for children components to complete rendering before container width is determined.
setTimeout(() => {
this.#updateResponsiveClass();
});
}
ngAfterViewInit() {
// Watch for dynamic action button changes and recalculate height.
/* istanbul ignore else */
if (this.actionButtons) {
this.actionButtons.changes
.pipe(takeUntil(this.#ngUnsubscribe))
.subscribe(() => {
this.#updateHeight();
});
}
this.#viewInitialized = true;
this.#updateHeight();
}
ngOnDestroy() {
this.#ngUnsubscribe.next();
this.#ngUnsubscribe.complete();
}
onContentChange() {
this.#updateHeight();
}
onWindowResize() {
this.#updateResponsiveClass();
}
#updateHeight(delay = 0) {
const ref = this.containerRef;
if (ref && this.#viewInitialized) {
this.#coreAdapterService.resetHeight(ref, '.sky-action-button');
if (this.#_themeName === 'modern') {
// Wait for children components to complete rendering before height is determined.
clearTimeout(this.#syncMaxHeightTimeout);
this.#syncMaxHeightTimeout = setTimeout(() => {
const selector = '.sky-action-button:not([hidden])';
const button = ref.nativeElement.querySelector(selector);
if (button && button.offsetHeight > 0) {
this.#coreAdapterService.syncMaxHeight(ref, selector);
}
else if (delay < 200) {
// Wait progressively longer between retries.
this.#updateHeight(delay + 50);
}
}, delay);
}
}
}
#updateResponsiveClass() {
if (this.containerRef) {
const parentWidth = this.#actionButtonAdapterService.getParentWidth(this.#hostElRef);
this.#actionButtonAdapterService.setResponsiveClass(this.containerRef, parentWidth);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionButtonContainerComponent, deps: [{ token: SkyActionButtonAdapterService }, { token: i0.ChangeDetectorRef }, { token: i1$1.SkyCoreAdapterService }, { token: i0.ElementRef }, { token: i2$1.SkyThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyActionButtonContainerComponent, isStandalone: false, selector: "sky-action-button-container", inputs: { alignItems: "alignItems" }, host: { listeners: { "window:resize": "onWindowResize()" } }, providers: [SkyActionButtonAdapterService], queries: [{ propertyName: "actionButtons", predicate: SkyActionButtonComponent }], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ElementRef, static: true }], hostDirectives: [{ directive: i2$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<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", styles: [":host.sky-cmp-theme-default{display:block}.sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button{display:block}.sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex .sky-action-button{height:100%;min-width:236px;margin-left:10px;margin-right:10px}.sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex{display:block;padding:0;margin:-20px 0}.sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button{margin:20px 0}.sky-responsive-container-xs .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex,.sky-responsive-container-sm .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex,.sky-responsive-container-md .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex,.sky-responsive-container-lg .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex{display:block;padding:0;margin:-20px 0}.sky-responsive-container-xs .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button,.sky-responsive-container-sm .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button,.sky-responsive-container-md .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button,.sky-responsive-container-lg .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button{margin:20px 0}@media(min-width:768px){.sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:0;margin:-10px 0}.sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex.sky-action-button-flex-align-center{justify-content:center}.sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex.sky-action-button-flex-align-left{justify-content:flex-start}.sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button{margin:10px 0}}.sky-responsive-container-sm .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex,.sky-responsive-container-md .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex,.sky-responsive-container-lg .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:0;margin:-10px 0}.sky-responsive-container-sm .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex.sky-action-button-flex-align-center,.sky-responsive-container-md .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex.sky-action-button-flex-align-center,.sky-responsive-container-lg .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex.sky-action-button-flex-align-center{justify-content:center}.sky-responsive-container-sm .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex.sky-action-button-flex-align-left,.sky-responsive-container-md .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex.sky-action-button-flex-align-left,.sky-responsive-container-lg .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex.sky-action-button-flex-align-left{justify-content:flex-start}.sky-responsive-container-sm .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button,.sky-responsive-container-md .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button,.sky-responsive-container-lg .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button{margin:10px 0}\n", ":host-context(.sky-theme-modern) :host.sky-cmp-theme-modern{display:block}.sky-theme-modern .sky-action-button-container{margin:0 auto}.sky-theme-modern .sky-action-button-container.sky-action-button-container-sm{max-width:446px}.sky-theme-modern .sky-action-button-container.sky-action-button-container-md{max-width:912px}.sky-theme-modern .sky-action-button-container.sky-action-button-container-lg{max-width:1378px}.sky-theme-modern .sky-action-button-container .sky-action-button-flex sky-action-button{display:block}.sky-theme-modern .sky-action-button-container .sky-action-button-flex .sky-action-button{height:auto;min-width:auto;margin:0}.sky-theme-modern .sky-action-button-container .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:0;margin:0 0 calc(var(--sky-space-gap-action_group-xl) * -1) calc(var(--sky-space-gap-action_group-xl) * -1)}.sky-theme-modern .sky-action-button-container .sky-action-button-flex sky-action-button{margin:0 0 var(--sky-space-gap-action_group-xl) var(--sky-space-gap-action_group-xl);flex:0 1 446px}.sky-responsive-container-xs .sky-theme-modern .sky-action-button-container .sky-action-button-flex,.sky-responsive-container-sm .sky-theme-modern .sky-action-button-container .sky-action-button-flex,.sky-responsive-container-md .sky-theme-modern .sky-action-button-container .sky-action-button-flex,.sky-responsive-container-lg .sky-theme-modern .sky-action-button-container .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:0;margin:0 0 calc(var(--sky-space-gap-action_group-xl) * -1) calc(var(--sky-space-gap-action_group-xl) * -1)}.sky-responsive-container-xs .sky-theme-modern .sky-action-button-container .sky-action-button-flex sky-action-button,.sky-responsive-container-sm .sky-theme-modern .sky-action-button-container .sky-action-button-flex sky-action-button,.sky-responsive-container-md .sky-theme-modern .sky-action-button-container .sky-action-button-flex sky-action-button,.sky-responsive-container-lg .sky-theme-modern .sky-action-button-container .sky-action-button-flex sky-action-button{margin:0 0 var(--sky-space-gap-action_group-xl) var(--sky-space-gap-action_group-xl);flex:0 1 446px}@media(min-width:768px){.sky-theme-modern .sky-action-button-container .sky-action-button-flex.sky-action-button-flex-align-center{justify-content:center}.sky-theme-modern .sky-action-button-container .sky-action-button-flex.sky-action-button-flex-align-left{justify-content:flex-start}}.sky-responsive-container-sm .sky-theme-modern .sky-action-button-container .sky-action-button-flex.sky-action-button-flex-align-center,.sky-responsive-container-md .sky-theme-modern .sky-action-button-container .sky-action-button-flex.sky-action-button-flex-align-center,.sky-responsive-container-lg .sky-theme-modern .sky-action-button-container .sky-action-button-flex.sky-action-button-flex-align-center{justify-content:center}.sky-responsive-container-sm .sky-theme-modern .sky-action-button-container .sky-action-button-flex.sky-action-button-flex-align-left,.sky-responsive-container-md .sky-theme-modern .sky-action-button-container .sky-action-button-flex.sky-action-button-flex-align-left,.sky-responsive-container-lg .sky-theme-modern .sky-action-button-container .sky-action-button-flex.sky-action-button-flex-align-left{justify-content:flex-start}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionButtonContainerComponent, decorators: [{
type: Component,
args: [{ selector: 'sky-action-button-container', providers: [SkyActionButtonAdapterService], encapsulation: ViewEncapsulation.None, hostDirectives: [SkyThemeComponentClassDirective], standalone: false, template: "<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", styles: [":host.sky-cmp-theme-default{display:block}.sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button{display:block}.sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex .sky-action-button{height:100%;min-width:236px;margin-left:10px;margin-right:10px}.sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex{display:block;padding:0;margin:-20px 0}.sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button{margin:20px 0}.sky-responsive-container-xs .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex,.sky-responsive-container-sm .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex,.sky-responsive-container-md .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex,.sky-responsive-container-lg .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex{display:block;padding:0;margin:-20px 0}.sky-responsive-container-xs .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button,.sky-responsive-container-sm .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button,.sky-responsive-container-md .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button,.sky-responsive-container-lg .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button{margin:20px 0}@media(min-width:768px){.sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:0;margin:-10px 0}.sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex.sky-action-button-flex-align-center{justify-content:center}.sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex.sky-action-button-flex-align-left{justify-content:flex-start}.sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button{margin:10px 0}}.sky-responsive-container-sm .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex,.sky-responsive-container-md .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex,.sky-responsive-container-lg .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:0;margin:-10px 0}.sky-responsive-container-sm .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex.sky-action-button-flex-align-center,.sky-responsive-container-md .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex.sky-action-button-flex-align-center,.sky-responsive-container-lg .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex.sky-action-button-flex-align-center{justify-content:center}.sky-responsive-container-sm .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex.sky-action-button-flex-align-left,.sky-responsive-container-md .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex.sky-action-button-flex-align-left,.sky-responsive-container-lg .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex.sky-action-button-flex-align-left{justify-content:flex-start}.sky-responsive-container-sm .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button,.sky-responsive-container-md .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button,.sky-responsive-container-lg .sky-action-button-container:not(.sky-theme-modern *) .sky-action-button-flex sky-action-button{margin:10px 0}\n", ":host-context(.sky-theme-modern) :host.sky-cmp-theme-modern{display:block}.sky-theme-modern .sky-action-button-container{margin:0 auto}.sky-theme-modern .sky-action-button-container.sky-action-button-container-sm{max-width:446px}.sky-theme-modern .sky-action-button-container.sky-action-button-container-md{max-width:912px}.sky-theme-modern .sky-action-button-container.sky-action-button-container-lg{max-width:1378px}.sky-theme-modern .sky-action-button-container .sky-action-button-flex sky-action-button{display:block}.sky-theme-modern .sky-action-button-container .sky-action-button-flex .sky-action-button{height:auto;min-width:auto;margin:0}.sky-theme-modern .sky-action-button-container .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:0;margin:0 0 calc(var(--sky-space-gap-action_group-xl) * -1) calc(var(--sky-space-gap-action_group-xl) * -1)}.sky-theme-modern .sky-action-button-container .sky-action-button-flex sky-action-button{margin:0 0 var(--sky-space-gap-action_group-xl) var(--sky-space-gap-action_group-xl);flex:0 1 446px}.sky-responsive-container-xs .sky-theme-modern .sky-action-button-container .sky-action-button-flex,.sky-responsive-container-sm .sky-theme-modern .sky-action-button-container .sky-action-button-flex,.sky-responsive-container-md .sky-theme-modern .sky-action-button-container .sky-action-button-flex,.sky-responsive-container-lg .sky-theme-modern .sky-action-button-container .sky-action-button-flex{display:flex;flex-flow:row wrap;padding:0;margin:0 0 calc(var(--sky-space-gap-action_group-xl) * -1) calc(var(--sky-space-gap-action_group-xl) * -1)}.sky-responsive-container-xs .sky-theme-modern .sky-action-button-container .sky-action-button-flex sky-action-button,.sky-responsive-container-sm .sky-theme-modern .sky-action-button-container .sky-action-button-flex sky-action-button,.sky-responsive-container-md .sky-theme-modern .sky-action-button-container .sky-action-button-flex sky-action-button,.sky-responsive-container-lg .sky-theme-modern .sky-action-button-container .sky-action-button-flex sky-action-button{margin:0 0 var(--sky-space-gap-action_group-xl) var(--sky-space-gap-action_group-xl);flex:0 1 446px}@media(min-width:768px){.sky-theme-modern .sky-action-button-container .sky-action-button-flex.sky-action-button-flex-align-center{justify-content:center}.sky-theme-modern .sky-action-button-container .sky-action-button-flex.sky-action-button-flex-align-left{justify-content:flex-start}}.sky-responsive-container-sm .sky-theme-modern .sky-action-button-container .sky-action-button-flex.sky-action-button-flex-align-center,.sky-responsive-container-md .sky-theme-modern .sky-action-button-container .sky-action-button-flex.sky-action-button-flex-align-center,.sky-responsive-container-lg .sky-theme-modern .sky-action-button-container .sky-action-button-flex.sky-action-button-flex-align-center{justify-content:center}.sky-responsive-container-sm .sky-theme-modern .sky-action-button-container .sky-action-button-flex.sky-action-button-flex-align-left,.sky-responsive-container-md .sky-theme-modern .sky-action-button-container .sky-action-button-flex.sky-action-button-flex-align-left,.sky-responsive-container-lg .sky-theme-modern .sky-action-button-container .sky-action-button-flex.sky-action-button-flex-align-left{justify-content:flex-start}\n"] }]
}], ctorParameters: () => [{ type: SkyActionButtonAdapterService }, { type: i0.ChangeDetectorRef }, { type: i1$1.SkyCoreAdapterService }, { type: i0.ElementRef }, { type: i2$1.SkyThemeService, decorators: [{
type: Optional
}] }], propDecorators: { alignItems: [{
type: Input
}], actionButtons: [{
type: ContentChildren,
args: [SkyActionButtonComponent]
}], containerRef: [{
type: ViewChild,
args: ['container', {
read: ElementRef,
static: true,
}]
}], onWindowResize: [{
type: HostListener,
args: ['window:resize']
}] } });
/**
* Specifies a description to display on an action button.
*/
class SkyActionButtonDetailsComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionButtonDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyActionButtonDetailsComponent, isStandalone: false, selector: "sky-action-button-details", ngImport: i0, template: "<ng-content />\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionButtonDetailsComponent, decorators: [{
type: Component,
args: [{ selector: 'sky-action-button-details', standalone: false, template: "<ng-content />\n" }]
}] });
/**
* Specifies a header to display on an action button.
*/
class SkyActionButtonHeaderComponent {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionButtonHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: SkyActionButtonHeaderComponent, isStandalone: false, selector: "sky-action-button-header", hostDirectives: [{ directive: i2$1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<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", styles: [":host .sky-action-button-header:not(.sky-theme-modern *){margin:0 5px}:host-context(.sky-responsive-container-xs) .sky-action-button-header:not(.sky-theme-modern *),:host-context(.sky-responsive-container-sm) .sky-action-button-header:not(.sky-theme-modern *),:host-context(.sky-responsive-container-md) .sky-action-button-header:not(.sky-theme-modern *),:host-context(.sky-responsive-container-lg) .sky-action-button-header:not(.sky-theme-modern *){margin:0 5px}@media(min-width:768px){:host .sky-action-button-header:not(.sky-theme-modern *){margin:0 0 20px}}:host-context(.sky-responsive-container-sm) .sky-action-button-header:not(.sky-theme-modern *),:host-context(.sky-responsive-container-md) .sky-action-button-header:not(.sky-theme-modern *),:host-context(.sky-responsive-container-lg) .sky-action-button-header:not(.sky-theme-modern *){margin:0 0 20px}\n", ":host-context(.sky-theme-modern) .sky-action-button-header{margin:0 0 var(--sky-space-stacked-s) 0}\n"], dependencies: [{ kind: "directive", type: i2$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionButtonHeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'sky-action-button-header', hostDirectives: [SkyThemeComponentClassDirective], standalone: false, template: "<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", styles: [":host .sky-action-button-header:not(.sky-theme-modern *){margin:0 5px}:host-context(.sky-responsive-container-xs) .sky-action-button-header:not(.sky-theme-modern *),:host-context(.sky-responsive-container-sm) .sky-action-button-header:not(.sky-theme-modern *),:host-context(.sky-responsive-container-md) .sky-action-button-header:not(.sky-theme-modern *),:host-context(.sky-responsive-container-lg) .sky-action-button-header:not(.sky-theme-modern *){margin:0 5px}@media(min-width:768px){:host .sky-action-button-header:not(.sky-theme-modern *){margin:0 0 20px}}:host-context(.sky-responsive-container-sm) .sky-action-button-header:not(.sky-theme-modern *),:host-context(.sky-responsive-container-md) .sky-action-button-header:not(.sky-theme-modern *),:host-context(.sky-responsive-container-lg) .sky-action-button-header:not(.sky-theme-modern *){margin:0 0 20px}\n", ":host-context(.sky-theme-modern) .sky-action-button-header{margin:0 0 var(--sky-space-stacked-s) 0}\n"] }]
}] });
/**
* Specifies an icon to display on the action button.
*/
class SkyActionButtonIconComponent {
constructor() {
this.breakpoint = toSignal(inject(SkyMediaQueryService).breakpointChange);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: SkyActionButtonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", 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: "21.2.0", ngImport: i0, type: SkyActionButtonIconComponent, decorators: [{
type: Component,
args: [{ selector: 'sky-action-button-icon', imports: [SkyIconModule, SkyThemeModule], 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)