@skyux/layout 15.0.0 → 15.0.2

package/fesm2022/skyux-layout.mjs

@@ -92,12 +92,10 @@ class SkyActionButtonComponent {
         this.actionClick.emit();
     }
     onSkyHrefDisplayChange($event) {
-        if (this.hidden === $event.userHasAccess) {
-            setTimeout(() => {
-                this.hidden = !$event.userHasAccess;
-                this.#changeDetector.markForCheck();
-            });
-        }
+        setTimeout(() => {
+            this.hidden = !$event.userHasAccess;
+            this.#changeDetector.markForCheck();
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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;--sky-comp-override-inline-link-text-decoration-line: var( --sky-font-text_decoration-standalone_link-base );--sky-comp-override-inline-link-text-decoration-line-hover: var( --sky-font-text_decoration-standalone_link-hover );--sky-comp-override-inline-link-text-decoration-line-active: var( --sky-font-text_decoration-standalone_link-active );--sky-comp-override-inline-link-text-decoration-line-focus: var( --sky-font-text_decoration-standalone_link-focus );--sky-comp-override-inline-link-text-decoration-line-disabled: var( --sky-font-text_decoration-standalone_link-disabled );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", "browserUrl", "routerLink"] }, { kind: "directive", type: i3.λ1, selector: "[skyHref]", inputs: ["skyHref", "queryParams", "skyHrefElse"], outputs: ["skyHrefChange"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { kind: "directive", type: i1$1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }