@skyux/indicators 11.8.0 → 11.9.0

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.
Files changed (5) hide show
  1. package/documentation.json +511 -511
  2. package/esm2022/lib/modules/key-info/key-info.component.mjs +2 -2
  3. package/fesm2022/skyux-indicators.mjs +2 -2
  4. package/fesm2022/skyux-indicators.mjs.map +1 -1
  5. package/package.json +7 -7
package/esm2022/lib/modules/key-info/key-info.component.mjs CHANGED
@@ -13,11 +13,11 @@ export class SkyKeyInfoComponent {
13
13
  this.layout = 'vertical';
14
14
  }
15
15
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyKeyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
16
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyKeyInfoComponent, selector: "sky-key-info", inputs: { helpKey: "helpKey", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", layout: "layout" }, ngImport: i0, template: "<div\n class=\"sky-key-info\"\n [ngClass]=\"{\n 'sky-key-info-horizontal': layout === 'horizontal'\n }\"\n>\n <div class=\"sky-key-info-value sky-font-display-3\">\n <ng-content select=\"sky-key-info-value\" />\n </div>\n <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n <span #label=\"skyId\" skyId><ng-content select=\"sky-key-info-label\" /></span\n ><span class=\"sky-control-help-container\">\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [labelledBy]=\"label.id\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\n </span>\n </div>\n</div>\n", styles: [".sky-key-info{display:var(--sky-host-key-info-display, inline-block)}.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 var(--sky-margin-inline-xs)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
16
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyKeyInfoComponent, selector: "sky-key-info", inputs: { helpKey: "helpKey", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", layout: "layout" }, ngImport: i0, template: "<div\n class=\"sky-key-info\"\n [ngClass]=\"{\n 'sky-key-info-horizontal': layout === 'horizontal'\n }\"\n>\n <div class=\"sky-key-info-value sky-font-display-3\">\n <ng-content select=\"sky-key-info-value\" />\n </div>\n <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n <span #label=\"skyId\" skyId><ng-content select=\"sky-key-info-label\" /></span\n ><span class=\"sky-control-help-container\">\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [labelledBy]=\"label.id\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\n </span>\n </div>\n</div>\n", styles: [".sky-key-info:not(.sky-theme-modern *){--sky-override-key-info-horizontal-gap: var(--sky-margin-inline-xs)}.sky-key-info{display:var(--sky-host-key-info-display, inline-block)}.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 var(--sky-override-key-info-horizontal-gap, var(--sky-space-gap-label-s))}.sky-key-info:not(.sky-key-info-horizontal) .sky-key-info-label{padding:var(--sky-space-gap-label-0) 0 0 0}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i3.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
17
17
  }
18
18
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyKeyInfoComponent, decorators: [{
19
19
  type: Component,
20
- args: [{ selector: 'sky-key-info', template: "<div\n class=\"sky-key-info\"\n [ngClass]=\"{\n 'sky-key-info-horizontal': layout === 'horizontal'\n }\"\n>\n <div class=\"sky-key-info-value sky-font-display-3\">\n <ng-content select=\"sky-key-info-value\" />\n </div>\n <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n <span #label=\"skyId\" skyId><ng-content select=\"sky-key-info-label\" /></span\n ><span class=\"sky-control-help-container\">\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [labelledBy]=\"label.id\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\n </span>\n </div>\n</div>\n", styles: [".sky-key-info{display:var(--sky-host-key-info-display, inline-block)}.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 var(--sky-margin-inline-xs)}\n"] }]
20
+ args: [{ selector: 'sky-key-info', template: "<div\n class=\"sky-key-info\"\n [ngClass]=\"{\n 'sky-key-info-horizontal': layout === 'horizontal'\n }\"\n>\n <div class=\"sky-key-info-value sky-font-display-3\">\n <ng-content select=\"sky-key-info-value\" />\n </div>\n <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n <span #label=\"skyId\" skyId><ng-content select=\"sky-key-info-label\" /></span\n ><span class=\"sky-control-help-container\">\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [labelledBy]=\"label.id\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\n </span>\n </div>\n</div>\n", styles: [".sky-key-info:not(.sky-theme-modern *){--sky-override-key-info-horizontal-gap: var(--sky-margin-inline-xs)}.sky-key-info{display:var(--sky-host-key-info-display, inline-block)}.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 var(--sky-override-key-info-horizontal-gap, var(--sky-space-gap-label-s))}.sky-key-info:not(.sky-key-info-horizontal) .sky-key-info-label{padding:var(--sky-space-gap-label-0) 0 0 0}\n"] }]
21
21
  }], propDecorators: { helpKey: [{
22
22
  type: Input
23
23
  }], helpPopoverContent: [{
package/fesm2022/skyux-indicators.mjs CHANGED
@@ -540,11 +540,11 @@ class SkyKeyInfoComponent {
540
540
  this.layout = 'vertical';
541
541
  }
542
542
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyKeyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
543
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyKeyInfoComponent, selector: "sky-key-info", inputs: { helpKey: "helpKey", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", layout: "layout" }, ngImport: i0, template: "<div\n class=\"sky-key-info\"\n [ngClass]=\"{\n 'sky-key-info-horizontal': layout === 'horizontal'\n }\"\n>\n <div class=\"sky-key-info-value sky-font-display-3\">\n <ng-content select=\"sky-key-info-value\" />\n </div>\n <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n <span #label=\"skyId\" skyId><ng-content select=\"sky-key-info-label\" /></span\n ><span class=\"sky-control-help-container\">\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [labelledBy]=\"label.id\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\n </span>\n </div>\n</div>\n", styles: [".sky-key-info{display:var(--sky-host-key-info-display, inline-block)}.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 var(--sky-margin-inline-xs)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
543
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.5", type: SkyKeyInfoComponent, selector: "sky-key-info", inputs: { helpKey: "helpKey", helpPopoverContent: "helpPopoverContent", helpPopoverTitle: "helpPopoverTitle", layout: "layout" }, ngImport: i0, template: "<div\n class=\"sky-key-info\"\n [ngClass]=\"{\n 'sky-key-info-horizontal': layout === 'horizontal'\n }\"\n>\n <div class=\"sky-key-info-value sky-font-display-3\">\n <ng-content select=\"sky-key-info-value\" />\n </div>\n <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n <span #label=\"skyId\" skyId><ng-content select=\"sky-key-info-label\" /></span\n ><span class=\"sky-control-help-container\">\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [labelledBy]=\"label.id\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\n </span>\n </div>\n</div>\n", styles: [".sky-key-info:not(.sky-theme-modern *){--sky-override-key-info-horizontal-gap: var(--sky-margin-inline-xs)}.sky-key-info{display:var(--sky-host-key-info-display, inline-block)}.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 var(--sky-override-key-info-horizontal-gap, var(--sky-space-gap-label-s))}.sky-key-info:not(.sky-key-info-horizontal) .sky-key-info-label{padding:var(--sky-space-gap-label-0) 0 0 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.λ1, selector: "sky-help-inline", inputs: ["ariaControls", "ariaExpanded", "ariaLabel", "helpKey", "labelledBy", "labelText", "popoverContent", "popoverTitle"], outputs: ["actionClick"] }, { kind: "directive", type: i3$1.λ2, selector: "[skyId]", exportAs: ["skyId"] }] }); }
544
544
  }
545
545
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.5", ngImport: i0, type: SkyKeyInfoComponent, decorators: [{
546
546
  type: Component,
547
- args: [{ selector: 'sky-key-info', template: "<div\n class=\"sky-key-info\"\n [ngClass]=\"{\n 'sky-key-info-horizontal': layout === 'horizontal'\n }\"\n>\n <div class=\"sky-key-info-value sky-font-display-3\">\n <ng-content select=\"sky-key-info-value\" />\n </div>\n <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n <span #label=\"skyId\" skyId><ng-content select=\"sky-key-info-label\" /></span\n ><span class=\"sky-control-help-container\">\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [labelledBy]=\"label.id\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\n </span>\n </div>\n</div>\n", styles: [".sky-key-info{display:var(--sky-host-key-info-display, inline-block)}.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 var(--sky-margin-inline-xs)}\n"] }]
547
+ args: [{ selector: 'sky-key-info', template: "<div\n class=\"sky-key-info\"\n [ngClass]=\"{\n 'sky-key-info-horizontal': layout === 'horizontal'\n }\"\n>\n <div class=\"sky-key-info-value sky-font-display-3\">\n <ng-content select=\"sky-key-info-value\" />\n </div>\n <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n <span #label=\"skyId\" skyId><ng-content select=\"sky-key-info-label\" /></span\n ><span class=\"sky-control-help-container\">\n @if (helpPopoverContent || helpKey) {\n <sky-help-inline\n [labelledBy]=\"label.id\"\n [helpKey]=\"helpKey\"\n [popoverTitle]=\"helpPopoverTitle\"\n [popoverContent]=\"helpPopoverContent\"\n />\n } @else {\n <ng-content select=\".sky-control-help\" />\n }\n </span>\n </div>\n</div>\n", styles: [".sky-key-info:not(.sky-theme-modern *){--sky-override-key-info-horizontal-gap: var(--sky-margin-inline-xs)}.sky-key-info{display:var(--sky-host-key-info-display, inline-block)}.sky-key-info.sky-key-info-horizontal .sky-key-info-value,.sky-key-info.sky-key-info-horizontal .sky-key-info-label{display:inline-block}.sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 var(--sky-override-key-info-horizontal-gap, var(--sky-space-gap-label-s))}.sky-key-info:not(.sky-key-info-horizontal) .sky-key-info-label{padding:var(--sky-space-gap-label-0) 0 0 0}\n"] }]
548
548
  }], propDecorators: { helpKey: [{
549
549
  type: Input
550
550
  }], helpPopoverContent: [{