@skyux/layout 15.0.0-alpha.14 → 15.0.0-alpha.15
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.
|
@@ -718,7 +718,7 @@ class SkyBoxComponent {
|
|
|
718
718
|
return idService.generateId();
|
|
719
719
|
},
|
|
720
720
|
},
|
|
721
|
-
], queries: [{ propertyName: "boxControls", first: true, predicate: SkyBoxControlsComponent, descendants: true }], ngImport: i0, template: "<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 }\n <ng-content select=\"sky-box-controls\" />\n </div>\n <ng-content />\n</section>\n", styles: ["sky-box:not(.sky-theme-modern *){--sky-override-box-content-padding: var(--sky-padding-even-xl);--sky-override-box-header-container-padding: var(--sky-padding-even-xl) var(--sky-padding-even-xl) 0 var(--sky-padding-even-xl);--sky-override-box-header-padding-right: var(--sky-margin-inline-xl);--sky-override-box-background-color-default: #fff}sky-box{display:block}.sky-box{--sky-background-color-page-default: var( --sky-override-box-background-color-default, var(--sky-color-background-container-base) );--sky-comp-override-list-header-background-color: initial;border-radius:var(--sky-box-border-radius);overflow:var(--sky-box-overflow)}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:var(--sky-override-box-header-container-padding, var(--sky-comp-box-header-space-inset-top) var(--sky-comp-box-header-space-inset-right) var(--sky-comp-box-header-space-inset-bottom) var(--sky-comp-box-header-space-inset-left))}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-controls{margin-left:auto}.sky-box .sky-box-header-content sky-box-controls .sky-box-controls{position:relative;top:-2px}.sky-box .sky-box-header-content .sky-box-header-right{flex:1 0;padding-right:var(--sky-override-box-header-padding-right, var(--sky-space-gap-text_action-l))}.sky-box .sky-box-header-content h2,.sky-box .sky-box-header-content h3,.sky-box .sky-box-header-content h4,.sky-box .sky-box-header-content h5{display:inline;margin-block:0}.sky-box sky-box-content .sky-box-content{padding:var(--sky-override-box-content-padding, var(--sky-comp-box-content-space-inset-top) var(--sky-comp-box-content-space-inset-right) var(--sky-comp-box-content-space-inset-bottom) var(--sky-comp-box-content-space-inset-left))}\n"], dependencies: [{ kind: "component", type: i1$3.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
721
|
+
], queries: [{ propertyName: "boxControls", first: true, predicate: SkyBoxControlsComponent, descendants: true }], ngImport: i0, template: "<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 }\n <ng-content select=\"sky-box-controls\" />\n </div>\n <ng-content />\n</section>\n", styles: ["sky-box:not(.sky-theme-modern *){--sky-override-box-content-padding: var(--sky-padding-even-xl);--sky-override-box-header-container-padding: var(--sky-padding-even-xl) var(--sky-padding-even-xl) 0 var(--sky-padding-even-xl);--sky-override-box-header-padding-right: var(--sky-margin-inline-xl);--sky-override-box-background-color-default: #fff}sky-box{display:block}.sky-box{--sky-background-color-page-default: var( --sky-override-box-background-color-default, var(--sky-color-background-container-base) );--sky-comp-override-list-header-background-color: initial;border-radius:var(--sky-box-border-radius);overflow:var(--sky-box-overflow)}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:var(--sky-override-box-header-container-padding, var(--sky-comp-box-header-space-inset-top) var(--sky-comp-box-header-space-inset-right) var(--sky-comp-box-header-space-inset-bottom) var(--sky-comp-box-header-space-inset-left))}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-controls{margin-left:auto}.sky-box .sky-box-header-content sky-box-controls .sky-box-controls{position:relative;top:-2px}.sky-box .sky-box-header-content .sky-box-header-right{flex:1 0;padding-right:var(--sky-override-box-header-padding-right, var(--sky-space-gap-text_action-l))}.sky-box .sky-box-header-content h2,.sky-box .sky-box-header-content h3,.sky-box .sky-box-header-content h4,.sky-box .sky-box-header-content h5{display:inline;margin-block:0}.sky-box sky-box-content{--sky-comp-override-repeater-first-item-space-inset-top: 0}.sky-box sky-box-content .sky-box-content{padding:var(--sky-override-box-content-padding, var(--sky-comp-box-content-space-inset-top) var(--sky-comp-box-content-space-inset-right) var(--sky-comp-box-content-space-inset-bottom) var(--sky-comp-box-content-space-inset-left))}\n"], dependencies: [{ kind: "component", type: i1$3.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i1$1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
722
722
|
}
|
|
723
723
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: SkyBoxComponent, decorators: [{
|
|
724
724
|
type: Component,
|
|
@@ -730,7 +730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
730
730
|
return idService.generateId();
|
|
731
731
|
},
|
|
732
732
|
},
|
|
733
|
-
], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<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 }\n <ng-content select=\"sky-box-controls\" />\n </div>\n <ng-content />\n</section>\n", styles: ["sky-box:not(.sky-theme-modern *){--sky-override-box-content-padding: var(--sky-padding-even-xl);--sky-override-box-header-container-padding: var(--sky-padding-even-xl) var(--sky-padding-even-xl) 0 var(--sky-padding-even-xl);--sky-override-box-header-padding-right: var(--sky-margin-inline-xl);--sky-override-box-background-color-default: #fff}sky-box{display:block}.sky-box{--sky-background-color-page-default: var( --sky-override-box-background-color-default, var(--sky-color-background-container-base) );--sky-comp-override-list-header-background-color: initial;border-radius:var(--sky-box-border-radius);overflow:var(--sky-box-overflow)}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:var(--sky-override-box-header-container-padding, var(--sky-comp-box-header-space-inset-top) var(--sky-comp-box-header-space-inset-right) var(--sky-comp-box-header-space-inset-bottom) var(--sky-comp-box-header-space-inset-left))}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-controls{margin-left:auto}.sky-box .sky-box-header-content sky-box-controls .sky-box-controls{position:relative;top:-2px}.sky-box .sky-box-header-content .sky-box-header-right{flex:1 0;padding-right:var(--sky-override-box-header-padding-right, var(--sky-space-gap-text_action-l))}.sky-box .sky-box-header-content h2,.sky-box .sky-box-header-content h3,.sky-box .sky-box-header-content h4,.sky-box .sky-box-header-content h5{display:inline;margin-block:0}.sky-box sky-box-content .sky-box-content{padding:var(--sky-override-box-content-padding, var(--sky-comp-box-content-space-inset-top) var(--sky-comp-box-content-space-inset-right) var(--sky-comp-box-content-space-inset-bottom) var(--sky-comp-box-content-space-inset-left))}\n"] }]
|
|
733
|
+
], changeDetection: ChangeDetectionStrategy.Eager, standalone: false, template: "<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 }\n <ng-content select=\"sky-box-controls\" />\n </div>\n <ng-content />\n</section>\n", styles: ["sky-box:not(.sky-theme-modern *){--sky-override-box-content-padding: var(--sky-padding-even-xl);--sky-override-box-header-container-padding: var(--sky-padding-even-xl) var(--sky-padding-even-xl) 0 var(--sky-padding-even-xl);--sky-override-box-header-padding-right: var(--sky-margin-inline-xl);--sky-override-box-background-color-default: #fff}sky-box{display:block}.sky-box{--sky-background-color-page-default: var( --sky-override-box-background-color-default, var(--sky-color-background-container-base) );--sky-comp-override-list-header-background-color: initial;border-radius:var(--sky-box-border-radius);overflow:var(--sky-box-overflow)}.sky-box .sky-box-header-content{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:var(--sky-override-box-header-container-padding, var(--sky-comp-box-header-space-inset-top) var(--sky-comp-box-header-space-inset-right) var(--sky-comp-box-header-space-inset-bottom) var(--sky-comp-box-header-space-inset-left))}.sky-box .sky-box-header-content:empty{display:none}.sky-box .sky-box-header-content sky-box-controls{margin-left:auto}.sky-box .sky-box-header-content sky-box-controls .sky-box-controls{position:relative;top:-2px}.sky-box .sky-box-header-content .sky-box-header-right{flex:1 0;padding-right:var(--sky-override-box-header-padding-right, var(--sky-space-gap-text_action-l))}.sky-box .sky-box-header-content h2,.sky-box .sky-box-header-content h3,.sky-box .sky-box-header-content h4,.sky-box .sky-box-header-content h5{display:inline;margin-block:0}.sky-box sky-box-content{--sky-comp-override-repeater-first-item-space-inset-top: 0}.sky-box sky-box-content .sky-box-content{padding:var(--sky-override-box-content-padding, var(--sky-comp-box-content-space-inset-top) var(--sky-comp-box-content-space-inset-right) var(--sky-comp-box-content-space-inset-bottom) var(--sky-comp-box-content-space-inset-left))}\n"] }]
|
|
734
734
|
}], propDecorators: { headingText: [{
|
|
735
735
|
type: Input
|
|
736
736
|
}], headingHidden: [{
|