@skyux/layout 15.0.0-alpha.10 → 15.0.0-alpha.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/skyux-layout.mjs +58 -8
- package/fesm2022/skyux-layout.mjs.map +1 -1
- package/package.json +10 -10
- package/types/skyux-layout.d.ts +19 -2
|
@@ -3,7 +3,7 @@ import { ObserversModule } from '@angular/cdk/observers';
|
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i0 from '@angular/core';
|
|
6
|
-
import { inject, RendererFactory2, Injectable, EventEmitter, ChangeDetectorRef, Output, Input, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, ElementRef, HostListener, ViewChild, ContentChildren, NgModule, Directive, InjectionToken, numberAttribute, booleanAttribute, ContentChild, signal, TemplateRef,
|
|
6
|
+
import { inject, RendererFactory2, Injectable, EventEmitter, ChangeDetectorRef, Output, Input, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, ElementRef, HostListener, ViewChild, ContentChildren, NgModule, Directive, InjectionToken, numberAttribute, booleanAttribute, ContentChild, signal, TemplateRef, input, computed, contentChildren, effect, DestroyRef, viewChild, afterRenderEffect } from '@angular/core';
|
|
7
7
|
import * as i2 from '@angular/router';
|
|
8
8
|
import { RouterModule } from '@angular/router';
|
|
9
9
|
import * as i3 from '@skyux/router';
|
|
@@ -347,6 +347,22 @@ const RESOURCES = {
|
|
|
347
347
|
skyux_text_expand_see_less: { message: 'See less' },
|
|
348
348
|
skyux_text_expand_see_more: { message: 'See more' },
|
|
349
349
|
},
|
|
350
|
+
ES: {
|
|
351
|
+
skyux_back_to_top: { message: 'Volver arriba' },
|
|
352
|
+
skyux_card_checkbox_label: { message: 'Seleccionar tarjeta' },
|
|
353
|
+
skyux_definition_list_none_found: { message: 'No se encontró ninguno.' },
|
|
354
|
+
skyux_description_list_none_found: { message: 'No se encontró ninguno.' },
|
|
355
|
+
skyux_inline_delete_assistive_text: {
|
|
356
|
+
message: '¿Está seguro de que desea eliminar este elemento?',
|
|
357
|
+
},
|
|
358
|
+
skyux_inline_delete_cancel: { message: 'Cancelar' },
|
|
359
|
+
skyux_inline_delete_confirm_deletion: { message: 'Confirmar eliminación' },
|
|
360
|
+
skyux_inline_delete_delete: { message: 'Borrar' },
|
|
361
|
+
skyux_text_expand_close_text: { message: 'Cerrar' },
|
|
362
|
+
skyux_text_expand_modal_title: { message: 'Vista expandida' },
|
|
363
|
+
skyux_text_expand_see_less: { message: 'Ver menos' },
|
|
364
|
+
skyux_text_expand_see_more: { message: 'Ver más' },
|
|
365
|
+
},
|
|
350
366
|
'FR-CA': {
|
|
351
367
|
skyux_back_to_top: { message: 'Retour en haut' },
|
|
352
368
|
skyux_card_checkbox_label: { message: 'Sélectionner la carte' },
|
|
@@ -967,11 +983,11 @@ class SkyInlineDeleteComponent {
|
|
|
967
983
|
this.#changeDetector.detectChanges();
|
|
968
984
|
}
|
|
969
985
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInlineDeleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
970
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: SkyInlineDeleteComponent, isStandalone: false, selector: "sky-inline-delete", inputs: { pending: "pending" }, outputs: { cancelTriggered: "cancelTriggered", deleteTriggered: "deleteTriggered" }, providers: [SkyCoreAdapterService, SkyInlineDeleteAdapterService], viewQueries: [{ propertyName: "deleteButton", first: true, predicate: ["delete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"sky-inline-delete sky-inline-delete-{{ type }}\"\n role=\"alertdialog\"\n skyAnimationEndHandler\n emitOnAnimateEnter\n animate.enter=\"sky-inline-delete-entering\"\n animate.leave=\"sky-inline-delete-leaving\"\n [animationTrigger]=\"enterAnimationTrigger()\"\n [attr.aria-describedby]=\"assistiveTextId\"\n [attr.aria-label]=\"'skyux_inline_delete_confirm_deletion' | skyLibResources\"\n (animationEnd)=\"onAnimationEnd()\"\n>\n <span\n class=\"sky-inline-delete-assistive-text sky-screen-reader-only\"\n [id]=\"assistiveTextId\"\n >\n {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}\n </span>\n <sky-wait class=\"sky-inline-delete-wait\" [isWaiting]=\"pending\" />\n <div class=\"sky-inline-delete-content\">\n <div class=\"sky-inline-delete-content-animation-container\">\n <button\n #delete\n class=\"sky-btn sky-btn-danger sky-inline-delete-button\"\n type=\"button\"\n (click)=\"onDeleteClick()\"\n >\n {{ 'skyux_inline_delete_delete' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"onCancelClick()\"\n >\n {{ 'skyux_inline_delete_cancel' | skyLibResources }}\n </button>\n </div>\n </div>\n</div>\n", styles: [".sky-inline-delete:not(.sky-theme-modern *){--sky-override-inline-delete-background-color: rgba(0, 0, 0, .5);--sky-override-inline-delete-border: 2px solid #ef4044;--sky-override-inline-delete-button-margin-right: 10px;--sky-override-inline-delete-content-left: 20px;--sky-override-inline-delete-content-padding: 0}.sky-inline-delete{position:absolute!important;top:0;left:0;width:100%;height:100%;background-color:var(--sky-override-inline-delete-background-color, var(--sky-color-background-scrim));z-index:999;border:var(--sky-override-inline-delete-border, var(--sky-border-width-selected-m) solid var(--sky-color-border-danger))}.sky-inline-delete-button{margin-right:var(--sky-override-inline-delete-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-inline-delete-card .sky-inline-delete-content{position:absolute;bottom:10px;text-align:center;width:100%}.sky-inline-delete-standard .sky-inline-delete-content{position:absolute;top:50%;transform:translateY(-50%);left:var(--sky-override-inline-delete-content-left, 0);padding:var(--sky-override-inline-delete-content-padding, var(--sky-space-inset-horizontal-top-l) var(--sky-space-inset-horizontal-right-l) var(--sky-space-inset-horizontal-bottom-l) var(--sky-space-inset-horizontal-left-l))}.sky-inline-delete-wait{height:100%}@keyframes sky-inline-delete-enter-overlay{0%{opacity:0}to{opacity:1}}@keyframes sky-inline-delete-enter-content{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes sky-inline-delete-leave-overlay{0%{opacity:1}to{opacity:0}}@keyframes sky-inline-delete-leave-content{0%{transform:scale(1)}to{transform:scale(0)}}.sky-inline-delete-entering{animation:sky-inline-delete-enter-overlay var(--sky-global-duration-medium) ease-in-out}.sky-inline-delete-entering .sky-inline-delete-content-animation-container{animation:sky-inline-delete-enter-content var(--sky-global-duration-medium) ease-in-out}.sky-inline-delete-leaving{animation:sky-inline-delete-leave-overlay var(--sky-global-duration-medium) ease-in-out forwards}.sky-inline-delete-leaving .sky-inline-delete-content-animation-container{animation:sky-inline-delete-leave-content var(--sky-global-duration-medium) ease-in-out forwards}\n"], dependencies: [{ kind: "directive", type: i2$2._SkyAnimationEndHandlerDirective, selector: "[skyAnimationEndHandler]", inputs: ["emitOnAnimateEnter", "animationTrigger"], outputs: ["animationEnd"] }, { kind: "component", type: i2$3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i2$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
986
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: SkyInlineDeleteComponent, isStandalone: false, selector: "sky-inline-delete", inputs: { pending: "pending" }, outputs: { cancelTriggered: "cancelTriggered", deleteTriggered: "deleteTriggered" }, providers: [SkyCoreAdapterService, SkyInlineDeleteAdapterService], viewQueries: [{ propertyName: "deleteButton", first: true, predicate: ["delete"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n class=\"sky-inline-delete sky-inline-delete-{{ type }}\"\n role=\"alertdialog\"\n skyAnimationEndHandler\n emitOnAnimateEnter\n animate.enter=\"sky-inline-delete-entering\"\n animate.leave=\"sky-inline-delete-leaving\"\n [animationTrigger]=\"enterAnimationTrigger()\"\n [attr.aria-describedby]=\"assistiveTextId\"\n [attr.aria-label]=\"'skyux_inline_delete_confirm_deletion' | skyLibResources\"\n (animationEnd)=\"onAnimationEnd()\"\n>\n <span\n class=\"sky-inline-delete-assistive-text sky-screen-reader-only\"\n [id]=\"assistiveTextId\"\n >\n {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}\n </span>\n <sky-wait class=\"sky-inline-delete-wait\" [isWaiting]=\"pending\" />\n <div class=\"sky-inline-delete-content\">\n <div class=\"sky-inline-delete-content-animation-container\">\n <button\n #delete\n class=\"sky-btn sky-btn-danger sky-inline-delete-button\"\n type=\"button\"\n (click)=\"onDeleteClick()\"\n >\n {{ 'skyux_inline_delete_delete' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-default sky-inline-delete-cancel-button\"\n type=\"button\"\n (click)=\"onCancelClick()\"\n >\n {{ 'skyux_inline_delete_cancel' | skyLibResources }}\n </button>\n </div>\n </div>\n</div>\n", styles: [".sky-inline-delete:not(.sky-theme-modern *){--sky-override-inline-delete-background-color: rgba(0, 0, 0, .5);--sky-override-inline-delete-border: 2px solid #ef4044;--sky-override-inline-delete-button-margin-right: 10px;--sky-override-inline-delete-cancel-button-background-color-active-hover: #eeeeef;--sky-override-inline-delete-cancel-button-background-color-base-disabled-focus: #ffffff;--sky-override-inline-delete-cancel-button-opacity-disabled: .65;--sky-override-inline-delete-content-left: 20px;--sky-override-inline-delete-content-padding: 0}.sky-inline-delete{position:absolute!important;top:0;left:0;width:100%;height:100%;background-color:var(--sky-override-inline-delete-background-color, var(--sky-color-background-scrim));z-index:999;border:var(--sky-override-inline-delete-border, var(--sky-border-width-selected-m) solid var(--sky-color-border-danger))}.sky-inline-delete-button{margin-right:var(--sky-override-inline-delete-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-inline-delete-cancel-button{background-color:var(--sky-override-inline-delete-cancel-button-background-color-base-disabled-focus, var(--sky-color-background-action-secondary-on_scrim-base))}.sky-inline-delete-cancel-button:active{background-color:var(--sky-override-inline-delete-cancel-button-background-color-active-hover, var(--sky-color-background-action-secondary-on_scrim-active))}.sky-inline-delete-cancel-button:hover{background-color:var(--sky-override-inline-delete-cancel-button-background-color-active-hover, var(--sky-color-background-action-secondary-on_scrim-hover))}.sky-inline-delete-cancel-button:focus-visible{background-color:var(--sky-override-inline-delete-cancel-button-background-color-base-disabled-focus, var(--sky-color-background-action-secondary-on_scrim-focus))}.sky-inline-delete-cancel-button.sky-btn-disabled,.sky-inline-delete-cancel-button.sky-btn-disabled:hover,.sky-inline-delete-cancel-button.sky-btn-disabled:focus-visible,.sky-inline-delete-cancel-button.sky-btn-disabled.sky-btn-focus,.sky-inline-delete-cancel-button.sky-btn-disabled:active,.sky-inline-delete-cancel-button.sky-btn-disabled.sky-btn-active,.sky-inline-delete-cancel-button[disabled],.sky-inline-delete-cancel-button[disabled]:hover,.sky-inline-delete-cancel-button[disabled]:focus-visible,.sky-inline-delete-cancel-button[disabled].sky-btn-focus,.sky-inline-delete-cancel-button[disabled]:active,.sky-inline-delete-cancel-button[disabled].sky-btn-active{background-color:var(--sky-override-inline-delete-cancel-button-background-color-base-disabled-focus, var(--sky-color-background-action-secondary-on_scrim-disabled));opacity:var(--sky-override-inline-delete-cancel-button-opacity-disabled, 1)}.sky-inline-delete-card .sky-inline-delete-content{position:absolute;bottom:10px;text-align:center;width:100%}.sky-inline-delete-standard .sky-inline-delete-content{position:absolute;top:50%;transform:translateY(-50%);left:var(--sky-override-inline-delete-content-left, 0);padding:var(--sky-override-inline-delete-content-padding, var(--sky-space-inset-horizontal-top-l) var(--sky-space-inset-horizontal-right-l) var(--sky-space-inset-horizontal-bottom-l) var(--sky-space-inset-horizontal-left-l))}.sky-inline-delete-wait{height:100%}@keyframes sky-inline-delete-enter-overlay{0%{opacity:0}to{opacity:1}}@keyframes sky-inline-delete-enter-content{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes sky-inline-delete-leave-overlay{0%{opacity:1}to{opacity:0}}@keyframes sky-inline-delete-leave-content{0%{transform:scale(1)}to{transform:scale(0)}}.sky-inline-delete-entering{animation:sky-inline-delete-enter-overlay var(--sky-global-duration-medium) ease-in-out}.sky-inline-delete-entering .sky-inline-delete-content-animation-container{animation:sky-inline-delete-enter-content var(--sky-global-duration-medium) ease-in-out}.sky-inline-delete-leaving{animation:sky-inline-delete-leave-overlay var(--sky-global-duration-medium) ease-in-out forwards}.sky-inline-delete-leaving .sky-inline-delete-content-animation-container{animation:sky-inline-delete-leave-content var(--sky-global-duration-medium) ease-in-out forwards}\n"], dependencies: [{ kind: "directive", type: i2$2._SkyAnimationEndHandlerDirective, selector: "[skyAnimationEndHandler]", inputs: ["emitOnAnimateEnter", "animationTrigger"], outputs: ["animationEnd"] }, { kind: "component", type: i2$3.λ14, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking", "screenReaderCompletedText"] }, { kind: "pipe", type: i2$1.SkyLibResourcesPipe, name: "skyLibResources" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
971
987
|
}
|
|
972
988
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyInlineDeleteComponent, decorators: [{
|
|
973
989
|
type: Component,
|
|
974
|
-
args: [{ selector: 'sky-inline-delete', providers: [SkyCoreAdapterService, SkyInlineDeleteAdapterService], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div\n class=\"sky-inline-delete sky-inline-delete-{{ type }}\"\n role=\"alertdialog\"\n skyAnimationEndHandler\n emitOnAnimateEnter\n animate.enter=\"sky-inline-delete-entering\"\n animate.leave=\"sky-inline-delete-leaving\"\n [animationTrigger]=\"enterAnimationTrigger()\"\n [attr.aria-describedby]=\"assistiveTextId\"\n [attr.aria-label]=\"'skyux_inline_delete_confirm_deletion' | skyLibResources\"\n (animationEnd)=\"onAnimationEnd()\"\n>\n <span\n class=\"sky-inline-delete-assistive-text sky-screen-reader-only\"\n [id]=\"assistiveTextId\"\n >\n {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}\n </span>\n <sky-wait class=\"sky-inline-delete-wait\" [isWaiting]=\"pending\" />\n <div class=\"sky-inline-delete-content\">\n <div class=\"sky-inline-delete-content-animation-container\">\n <button\n #delete\n class=\"sky-btn sky-btn-danger sky-inline-delete-button\"\n type=\"button\"\n (click)=\"onDeleteClick()\"\n >\n {{ 'skyux_inline_delete_delete' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-default\"\n type=\"button\"\n (click)=\"onCancelClick()\"\n >\n {{ 'skyux_inline_delete_cancel' | skyLibResources }}\n </button>\n </div>\n </div>\n</div>\n", styles: [".sky-inline-delete:not(.sky-theme-modern *){--sky-override-inline-delete-background-color: rgba(0, 0, 0, .5);--sky-override-inline-delete-border: 2px solid #ef4044;--sky-override-inline-delete-button-margin-right: 10px;--sky-override-inline-delete-content-left: 20px;--sky-override-inline-delete-content-padding: 0}.sky-inline-delete{position:absolute!important;top:0;left:0;width:100%;height:100%;background-color:var(--sky-override-inline-delete-background-color, var(--sky-color-background-scrim));z-index:999;border:var(--sky-override-inline-delete-border, var(--sky-border-width-selected-m) solid var(--sky-color-border-danger))}.sky-inline-delete-button{margin-right:var(--sky-override-inline-delete-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-inline-delete-card .sky-inline-delete-content{position:absolute;bottom:10px;text-align:center;width:100%}.sky-inline-delete-standard .sky-inline-delete-content{position:absolute;top:50%;transform:translateY(-50%);left:var(--sky-override-inline-delete-content-left, 0);padding:var(--sky-override-inline-delete-content-padding, var(--sky-space-inset-horizontal-top-l) var(--sky-space-inset-horizontal-right-l) var(--sky-space-inset-horizontal-bottom-l) var(--sky-space-inset-horizontal-left-l))}.sky-inline-delete-wait{height:100%}@keyframes sky-inline-delete-enter-overlay{0%{opacity:0}to{opacity:1}}@keyframes sky-inline-delete-enter-content{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes sky-inline-delete-leave-overlay{0%{opacity:1}to{opacity:0}}@keyframes sky-inline-delete-leave-content{0%{transform:scale(1)}to{transform:scale(0)}}.sky-inline-delete-entering{animation:sky-inline-delete-enter-overlay var(--sky-global-duration-medium) ease-in-out}.sky-inline-delete-entering .sky-inline-delete-content-animation-container{animation:sky-inline-delete-enter-content var(--sky-global-duration-medium) ease-in-out}.sky-inline-delete-leaving{animation:sky-inline-delete-leave-overlay var(--sky-global-duration-medium) ease-in-out forwards}.sky-inline-delete-leaving .sky-inline-delete-content-animation-container{animation:sky-inline-delete-leave-content var(--sky-global-duration-medium) ease-in-out forwards}\n"] }]
|
|
990
|
+
args: [{ selector: 'sky-inline-delete', providers: [SkyCoreAdapterService, SkyInlineDeleteAdapterService], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div\n class=\"sky-inline-delete sky-inline-delete-{{ type }}\"\n role=\"alertdialog\"\n skyAnimationEndHandler\n emitOnAnimateEnter\n animate.enter=\"sky-inline-delete-entering\"\n animate.leave=\"sky-inline-delete-leaving\"\n [animationTrigger]=\"enterAnimationTrigger()\"\n [attr.aria-describedby]=\"assistiveTextId\"\n [attr.aria-label]=\"'skyux_inline_delete_confirm_deletion' | skyLibResources\"\n (animationEnd)=\"onAnimationEnd()\"\n>\n <span\n class=\"sky-inline-delete-assistive-text sky-screen-reader-only\"\n [id]=\"assistiveTextId\"\n >\n {{ 'skyux_inline_delete_assistive_text' | skyLibResources }}\n </span>\n <sky-wait class=\"sky-inline-delete-wait\" [isWaiting]=\"pending\" />\n <div class=\"sky-inline-delete-content\">\n <div class=\"sky-inline-delete-content-animation-container\">\n <button\n #delete\n class=\"sky-btn sky-btn-danger sky-inline-delete-button\"\n type=\"button\"\n (click)=\"onDeleteClick()\"\n >\n {{ 'skyux_inline_delete_delete' | skyLibResources }}\n </button>\n <button\n class=\"sky-btn sky-btn-default sky-inline-delete-cancel-button\"\n type=\"button\"\n (click)=\"onCancelClick()\"\n >\n {{ 'skyux_inline_delete_cancel' | skyLibResources }}\n </button>\n </div>\n </div>\n</div>\n", styles: [".sky-inline-delete:not(.sky-theme-modern *){--sky-override-inline-delete-background-color: rgba(0, 0, 0, .5);--sky-override-inline-delete-border: 2px solid #ef4044;--sky-override-inline-delete-button-margin-right: 10px;--sky-override-inline-delete-cancel-button-background-color-active-hover: #eeeeef;--sky-override-inline-delete-cancel-button-background-color-base-disabled-focus: #ffffff;--sky-override-inline-delete-cancel-button-opacity-disabled: .65;--sky-override-inline-delete-content-left: 20px;--sky-override-inline-delete-content-padding: 0}.sky-inline-delete{position:absolute!important;top:0;left:0;width:100%;height:100%;background-color:var(--sky-override-inline-delete-background-color, var(--sky-color-background-scrim));z-index:999;border:var(--sky-override-inline-delete-border, var(--sky-border-width-selected-m) solid var(--sky-color-border-danger))}.sky-inline-delete-button{margin-right:var(--sky-override-inline-delete-button-margin-right, var(--sky-space-gap-action_group-m))}.sky-inline-delete-cancel-button{background-color:var(--sky-override-inline-delete-cancel-button-background-color-base-disabled-focus, var(--sky-color-background-action-secondary-on_scrim-base))}.sky-inline-delete-cancel-button:active{background-color:var(--sky-override-inline-delete-cancel-button-background-color-active-hover, var(--sky-color-background-action-secondary-on_scrim-active))}.sky-inline-delete-cancel-button:hover{background-color:var(--sky-override-inline-delete-cancel-button-background-color-active-hover, var(--sky-color-background-action-secondary-on_scrim-hover))}.sky-inline-delete-cancel-button:focus-visible{background-color:var(--sky-override-inline-delete-cancel-button-background-color-base-disabled-focus, var(--sky-color-background-action-secondary-on_scrim-focus))}.sky-inline-delete-cancel-button.sky-btn-disabled,.sky-inline-delete-cancel-button.sky-btn-disabled:hover,.sky-inline-delete-cancel-button.sky-btn-disabled:focus-visible,.sky-inline-delete-cancel-button.sky-btn-disabled.sky-btn-focus,.sky-inline-delete-cancel-button.sky-btn-disabled:active,.sky-inline-delete-cancel-button.sky-btn-disabled.sky-btn-active,.sky-inline-delete-cancel-button[disabled],.sky-inline-delete-cancel-button[disabled]:hover,.sky-inline-delete-cancel-button[disabled]:focus-visible,.sky-inline-delete-cancel-button[disabled].sky-btn-focus,.sky-inline-delete-cancel-button[disabled]:active,.sky-inline-delete-cancel-button[disabled].sky-btn-active{background-color:var(--sky-override-inline-delete-cancel-button-background-color-base-disabled-focus, var(--sky-color-background-action-secondary-on_scrim-disabled));opacity:var(--sky-override-inline-delete-cancel-button-opacity-disabled, 1)}.sky-inline-delete-card .sky-inline-delete-content{position:absolute;bottom:10px;text-align:center;width:100%}.sky-inline-delete-standard .sky-inline-delete-content{position:absolute;top:50%;transform:translateY(-50%);left:var(--sky-override-inline-delete-content-left, 0);padding:var(--sky-override-inline-delete-content-padding, var(--sky-space-inset-horizontal-top-l) var(--sky-space-inset-horizontal-right-l) var(--sky-space-inset-horizontal-bottom-l) var(--sky-space-inset-horizontal-left-l))}.sky-inline-delete-wait{height:100%}@keyframes sky-inline-delete-enter-overlay{0%{opacity:0}to{opacity:1}}@keyframes sky-inline-delete-enter-content{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes sky-inline-delete-leave-overlay{0%{opacity:1}to{opacity:0}}@keyframes sky-inline-delete-leave-content{0%{transform:scale(1)}to{transform:scale(0)}}.sky-inline-delete-entering{animation:sky-inline-delete-enter-overlay var(--sky-global-duration-medium) ease-in-out}.sky-inline-delete-entering .sky-inline-delete-content-animation-container{animation:sky-inline-delete-enter-content var(--sky-global-duration-medium) ease-in-out}.sky-inline-delete-leaving{animation:sky-inline-delete-leave-overlay var(--sky-global-duration-medium) ease-in-out forwards}.sky-inline-delete-leaving .sky-inline-delete-content-animation-container{animation:sky-inline-delete-leave-content var(--sky-global-duration-medium) ease-in-out forwards}\n"] }]
|
|
975
991
|
}], propDecorators: { pending: [{
|
|
976
992
|
type: Input
|
|
977
993
|
}], cancelTriggered: [{
|
|
@@ -1749,13 +1765,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
1749
1765
|
*/
|
|
1750
1766
|
class SkyFluidGridComponent {
|
|
1751
1767
|
constructor() {
|
|
1768
|
+
this.#logSvc = inject(SkyLogService);
|
|
1769
|
+
this.#disableMargin = signal(undefined, /* @ts-ignore */
|
|
1770
|
+
...(ngDevMode ? [{ debugName: "#disableMargin" }] : /* istanbul ignore next */ []));
|
|
1752
1771
|
/**
|
|
1753
|
-
*
|
|
1772
|
+
* Whether to add padding inside the fluid grid container so its content is
|
|
1773
|
+
* inset from the container's outer left and right edges. When `false`,
|
|
1774
|
+
* the fluid grid's content extends to the edges of its container.
|
|
1754
1775
|
* @default false
|
|
1755
1776
|
*/
|
|
1756
|
-
this.
|
|
1777
|
+
this.inset = input(false, { ...(ngDevMode ? { debugName: "inset" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
1778
|
+
/**
|
|
1779
|
+
* Whether the fluid grid's outer left and right margin should be hidden.
|
|
1780
|
+
* The deprecated `disableMargin` input, when explicitly set, takes
|
|
1781
|
+
* precedence over `inset` so apps mid-migration keep their existing
|
|
1782
|
+
* behavior until `disableMargin` is removed.
|
|
1783
|
+
*/
|
|
1784
|
+
this.noMargin = computed(() => this.#disableMargin() ?? !this.inset(), /* @ts-ignore */
|
|
1785
|
+
...(ngDevMode ? [{ debugName: "noMargin" }] : /* istanbul ignore next */ []));
|
|
1757
1786
|
this.#_gutterSize = 'large';
|
|
1758
1787
|
}
|
|
1788
|
+
#logSvc;
|
|
1789
|
+
#disableMargin;
|
|
1790
|
+
/**
|
|
1791
|
+
* Disables the outer left and right margin of the fluid grid container.
|
|
1792
|
+
* @deprecated Use `inset` instead. Note that the values are inverted:
|
|
1793
|
+
* setting `disableMargin` to `true` is equivalent to setting `inset` to
|
|
1794
|
+
* `false`.
|
|
1795
|
+
*/
|
|
1796
|
+
set disableMargin(value) {
|
|
1797
|
+
this.#disableMargin.set(value);
|
|
1798
|
+
if (value !== undefined) {
|
|
1799
|
+
this.#logSvc.deprecated('SkyFluidGridComponent.disableMargin', {
|
|
1800
|
+
deprecationMajorVersion: 15,
|
|
1801
|
+
replacementRecommendation: 'Use the `inset` input instead. Note that the values are inverted: setting `disableMargin` to `true` is equivalent to setting `inset` to `false`.',
|
|
1802
|
+
});
|
|
1803
|
+
}
|
|
1804
|
+
}
|
|
1805
|
+
/* istanbul ignore next */
|
|
1806
|
+
get disableMargin() {
|
|
1807
|
+
return this.#disableMargin();
|
|
1808
|
+
}
|
|
1759
1809
|
/**
|
|
1760
1810
|
* The type that defines the size of the padding
|
|
1761
1811
|
* between columns.
|
|
@@ -1769,14 +1819,14 @@ class SkyFluidGridComponent {
|
|
|
1769
1819
|
}
|
|
1770
1820
|
#_gutterSize;
|
|
1771
1821
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFluidGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1772
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1822
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: SkyFluidGridComponent, isStandalone: false, selector: "sky-fluid-grid", inputs: { disableMargin: { classPropertyName: "disableMargin", publicName: "disableMargin", isSignal: false, isRequired: false, transformFunction: null }, inset: { classPropertyName: "inset", publicName: "inset", isSignal: true, isRequired: false, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"sky-fluid-grid\"\n [ngClass]=\"{\n 'sky-fluid-grid-gutter-size-small': gutterSize === 'small',\n 'sky-fluid-grid-gutter-size-medium': gutterSize === 'medium',\n 'sky-fluid-grid-gutter-size-large': gutterSize === 'large',\n 'sky-fluid-grid-no-margin': noMargin()\n }\"\n>\n <ng-content />\n</div>\n", styles: [".sky-fluid-grid:not(.sky-theme-modern *){--sky-override-fluid-grid-gutter-size-small: 5px;--sky-override-fluid-grid-gutter-size-medium: 10px;--sky-override-fluid-grid-gutter-size-large: 15px;--sky-override-fluid-grid-top-bottom: 0}.sky-fluid-grid-gutter-size-small{padding:var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-top-s)) var(--sky-override-fluid-grid-gutter-size-small, var(--sky-space-inset-horizontal-right-s)) var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-bottom-s)) var(--sky-override-fluid-grid-gutter-size-small, var(--sky-space-inset-horizontal-left-s))}.sky-fluid-grid-gutter-size-medium{padding:var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-top-m)) var(--sky-override-fluid-grid-gutter-size-medium, var(--sky-space-inset-horizontal-right-m)) var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-bottom-m)) var(--sky-override-fluid-grid-gutter-size-medium, var(--sky-space-inset-horizontal-left-m))}.sky-fluid-grid-gutter-size-large{padding:var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-top-xl)) var(--sky-override-fluid-grid-gutter-size-large, var(--sky-space-inset-horizontal-right-xl)) var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-bottom-xl)) var(--sky-override-fluid-grid-gutter-size-large, var(--sky-space-inset-horizontal-left-xl))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1773
1823
|
}
|
|
1774
1824
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyFluidGridComponent, decorators: [{
|
|
1775
1825
|
type: Component,
|
|
1776
|
-
args: [{ selector: 'sky-fluid-grid', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div\n class=\"sky-fluid-grid\"\n [ngClass]=\"{\n 'sky-fluid-grid-gutter-size-small': gutterSize === 'small',\n 'sky-fluid-grid-gutter-size-medium': gutterSize === 'medium',\n 'sky-fluid-grid-gutter-size-large': gutterSize === 'large',\n 'sky-fluid-grid-no-margin':
|
|
1826
|
+
args: [{ selector: 'sky-fluid-grid', changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<div\n class=\"sky-fluid-grid\"\n [ngClass]=\"{\n 'sky-fluid-grid-gutter-size-small': gutterSize === 'small',\n 'sky-fluid-grid-gutter-size-medium': gutterSize === 'medium',\n 'sky-fluid-grid-gutter-size-large': gutterSize === 'large',\n 'sky-fluid-grid-no-margin': noMargin()\n }\"\n>\n <ng-content />\n</div>\n", styles: [".sky-fluid-grid:not(.sky-theme-modern *){--sky-override-fluid-grid-gutter-size-small: 5px;--sky-override-fluid-grid-gutter-size-medium: 10px;--sky-override-fluid-grid-gutter-size-large: 15px;--sky-override-fluid-grid-top-bottom: 0}.sky-fluid-grid-gutter-size-small{padding:var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-top-s)) var(--sky-override-fluid-grid-gutter-size-small, var(--sky-space-inset-horizontal-right-s)) var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-bottom-s)) var(--sky-override-fluid-grid-gutter-size-small, var(--sky-space-inset-horizontal-left-s))}.sky-fluid-grid-gutter-size-medium{padding:var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-top-m)) var(--sky-override-fluid-grid-gutter-size-medium, var(--sky-space-inset-horizontal-right-m)) var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-bottom-m)) var(--sky-override-fluid-grid-gutter-size-medium, var(--sky-space-inset-horizontal-left-m))}.sky-fluid-grid-gutter-size-large{padding:var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-top-xl)) var(--sky-override-fluid-grid-gutter-size-large, var(--sky-space-inset-horizontal-right-xl)) var(--sky-override-fluid-grid-top-bottom, var(--sky-space-inset-horizontal-bottom-xl)) var(--sky-override-fluid-grid-gutter-size-large, var(--sky-space-inset-horizontal-left-xl))}\n"] }]
|
|
1777
1827
|
}], propDecorators: { disableMargin: [{
|
|
1778
1828
|
type: Input
|
|
1779
|
-
}], gutterSize: [{
|
|
1829
|
+
}], inset: [{ type: i0.Input, args: [{ isSignal: true, alias: "inset", required: false }] }], gutterSize: [{
|
|
1780
1830
|
type: Input
|
|
1781
1831
|
}] } });
|
|
1782
1832
|
|