@skyux/indicators 12.0.0-alpha.0 → 12.0.0-alpha.2
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i1$1 from '@angular/common';
|
|
2
|
-
import { CommonModule
|
|
2
|
+
import { CommonModule } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { NgModule, EventEmitter, inject, Component, Input, Output, Injectable, input, computed, ChangeDetectionStrategy, ChangeDetectorRef, ElementRef, Directive, ViewChild, ViewChildren, EnvironmentInjector } from '@angular/core';
|
|
5
5
|
import * as i3 from '@skyux/icon';
|
|
@@ -298,11 +298,11 @@ class SkyExpansionIndicatorComponent {
|
|
|
298
298
|
}
|
|
299
299
|
}
|
|
300
300
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyExpansionIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
301
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyExpansionIndicatorComponent, isStandalone: false, selector: "sky-expansion-indicator", inputs: { direction: "direction" }, ngImport: i0, template: "<div\n aria-hidden=\"true\"\n class=\"sky-expansion-indicator\"\n [ngClass]=\"['sky-expansion-indicator-' + directionOrDefault]\"\n>\n <ng-container *skyThemeIf=\"'default'\">\n <ng-container *ngTemplateOutlet=\"icon\" />\n </ng-container>\n <ng-container *skyThemeIf=\"'modern'\">\n <span class=\"sky-expansion-indicator-glyph-container\">\n <ng-container *ngTemplateOutlet=\"icon\" />\n </span>\n </ng-container>\n</div>\n\n<ng-template #icon>\n <i class=\"sky-expansion-indicator-part sky-expansion-indicator-left\"> </i>\n <i class=\"sky-expansion-indicator-part sky-expansion-indicator-right\"> </i>\n</ng-template>\n", styles: [".sky-expansion-indicator:not(.sky-theme-modern *){display:inline-block;border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;overflow:hidden;width:24px;position:relative;vertical-align:top}.sky-expansion-indicator-part:not(.sky-theme-modern *){border-color:#cdcfd2;border-style:solid;border-width:3px 0 0 0;display:inline-block;height:10px;position:absolute;top:10px;transition:transform .25s,left .25s;vertical-align:top;width:10px}.sky-expansion-indicator-up:not(.sky-theme-modern *) .sky-expansion-indicator-left{left:7px;transform:rotate(-45deg)}.sky-expansion-indicator-up:not(.sky-theme-modern *) .sky-expansion-indicator-right{left:7px;transform:rotate(45deg)}.sky-expansion-indicator-down:not(.sky-theme-modern *) .sky-expansion-indicator-left{left:2px;transform:rotate(45deg)}.sky-expansion-indicator-down:not(.sky-theme-modern *) .sky-expansion-indicator-right{left:12px;transform:rotate(-45deg)}\n", ":host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-expansion-indicator{--sky-override-expansion-indicator-container-left: 4px;--sky-override-expansion-indicator-container-top: 3.5px;--sky-override-expansion-indicator-leg-left-left: 4px;--sky-override-expansion-indicator-leg-right-left: 10.5px;--sky-override-expansion-indicator-size: 26px;--sky-override-expansion-indicator-size-half: 13px}:host-context(.sky-theme-modern) .sky-expansion-indicator{display:inline-block;border:none;background-color:transparent;flex-shrink:0;height:var(--sky-override-expansion-indicator-size, var(--sky-size-icon-s));margin:0;overflow:hidden;position:relative;vertical-align:top;width:var(--sky-override-expansion-indicator-size, var(--sky-size-icon-s))}:host-context(.sky-theme-modern) .sky-expansion-indicator-part{background:var(--sky-color-icon-deemphasized);border:none;display:inline-block;height:2px;position:absolute;top:var(--sky-override-expansion-indicator-size-half, calc(var(--sky-size-icon-s) / 2));transition:transform .25s,left .25s;vertical-align:top;width:11px}:host-context(.sky-theme-modern) .sky-expansion-indicator-glyph-container{left:var(--sky-override-expansion-indicator-container-left, 0);display:inline-block;position:absolute;top:var(--sky-override-expansion-indicator-container-top, 1.5px);transform:scale(.68)}:host-context(.sky-theme-modern) .sky-expansion-indicator-left{border-radius:1px 0 0 1px;left:var(--sky-override-expansion-indicator-leg-left-left, 2.75px)}:host-context(.sky-theme-modern) .sky-expansion-indicator-right{border-radius:0 1px 1px 0;left:var(--sky-override-expansion-indicator-leg-right-left, 9.25px)}:host-context(.sky-theme-modern) .sky-expansion-indicator-up .sky-expansion-indicator-left{transform:rotate(-45deg)}:host-context(.sky-theme-modern) .sky-expansion-indicator-up .sky-expansion-indicator-right{transform:rotate(45deg)}:host-context(.sky-theme-modern) .sky-expansion-indicator-down .sky-expansion-indicator-left{transform:rotate(45deg)}:host-context(.sky-theme-modern) .sky-expansion-indicator-down .sky-expansion-indicator-right{transform:rotate(-45deg)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }] }); }
|
|
301
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: SkyExpansionIndicatorComponent, isStandalone: false, selector: "sky-expansion-indicator", inputs: { direction: "direction" }, hostDirectives: [{ directive: i1.SkyThemeComponentClassDirective }], ngImport: i0, template: "<div\n aria-hidden=\"true\"\n class=\"sky-expansion-indicator\"\n [ngClass]=\"['sky-expansion-indicator-' + directionOrDefault]\"\n>\n <ng-container *skyThemeIf=\"'default'\">\n <ng-container *ngTemplateOutlet=\"icon\" />\n </ng-container>\n <ng-container *skyThemeIf=\"'modern'\">\n <span class=\"sky-expansion-indicator-glyph-container\">\n <ng-container *ngTemplateOutlet=\"icon\" />\n </span>\n </ng-container>\n</div>\n\n<ng-template #icon>\n <i class=\"sky-expansion-indicator-part sky-expansion-indicator-left\"> </i>\n <i class=\"sky-expansion-indicator-part sky-expansion-indicator-right\"> </i>\n</ng-template>\n", styles: [".sky-expansion-indicator:not(.sky-theme-modern *){display:inline-block;border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;overflow:hidden;width:24px;position:relative;vertical-align:top}.sky-expansion-indicator-part:not(.sky-theme-modern *){border-color:#cdcfd2;border-style:solid;border-width:3px 0 0 0;display:inline-block;height:10px;position:absolute;top:10px;transition:transform .25s,left .25s;vertical-align:top;width:10px}.sky-expansion-indicator-up:not(.sky-theme-modern *) .sky-expansion-indicator-left{left:7px;transform:rotate(-45deg)}.sky-expansion-indicator-up:not(.sky-theme-modern *) .sky-expansion-indicator-right{left:7px;transform:rotate(45deg)}.sky-expansion-indicator-down:not(.sky-theme-modern *) .sky-expansion-indicator-left{left:2px;transform:rotate(45deg)}.sky-expansion-indicator-down:not(.sky-theme-modern *) .sky-expansion-indicator-right{left:12px;transform:rotate(-45deg)}\n", ":host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-expansion-indicator{--sky-override-expansion-indicator-container-left: 4px;--sky-override-expansion-indicator-container-top: 3.5px;--sky-override-expansion-indicator-leg-left-left: 4px;--sky-override-expansion-indicator-leg-right-left: 10.5px;--sky-override-expansion-indicator-line-height: normal;--sky-override-expansion-indicator-size: 26px;--sky-override-expansion-indicator-size-half: 13px}:host-context(.sky-theme-modern) :host.sky-cmp-theme-modern{line-height:var(--sky-override-expansion-indicator-line-height, 1)}:host-context(.sky-theme-modern) .sky-expansion-indicator{display:inline-block;border:none;background-color:transparent;flex-shrink:0;height:var(--sky-override-expansion-indicator-size, var(--sky-size-icon-s));margin:0;overflow:hidden;position:relative;vertical-align:top;width:var(--sky-override-expansion-indicator-size, var(--sky-size-icon-s))}:host-context(.sky-theme-modern) .sky-expansion-indicator-part{background:var(--sky-color-icon-deemphasized);border:none;display:inline-block;height:2px;position:absolute;top:var(--sky-override-expansion-indicator-size-half, calc(var(--sky-size-icon-s) / 2));transition:transform .25s,left .25s;vertical-align:top;width:11px}:host-context(.sky-theme-modern) .sky-expansion-indicator-glyph-container{left:var(--sky-override-expansion-indicator-container-left, 0);display:inline-block;position:absolute;top:var(--sky-override-expansion-indicator-container-top, 1.5px);transform:scale(.68)}:host-context(.sky-theme-modern) .sky-expansion-indicator-left{border-radius:1px 0 0 1px;left:var(--sky-override-expansion-indicator-leg-left-left, 2.75px)}:host-context(.sky-theme-modern) .sky-expansion-indicator-right{border-radius:0 1px 1px 0;left:var(--sky-override-expansion-indicator-leg-right-left, 9.25px)}:host-context(.sky-theme-modern) .sky-expansion-indicator-up .sky-expansion-indicator-left{transform:rotate(-45deg)}:host-context(.sky-theme-modern) .sky-expansion-indicator-up .sky-expansion-indicator-right{transform:rotate(45deg)}:host-context(.sky-theme-modern) .sky-expansion-indicator-down .sky-expansion-indicator-left{transform:rotate(45deg)}:host-context(.sky-theme-modern) .sky-expansion-indicator-down .sky-expansion-indicator-right{transform:rotate(-45deg)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }] }); }
|
|
302
302
|
}
|
|
303
303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyExpansionIndicatorComponent, decorators: [{
|
|
304
304
|
type: Component,
|
|
305
|
-
args: [{ selector: 'sky-expansion-indicator', standalone: false, template: "<div\n aria-hidden=\"true\"\n class=\"sky-expansion-indicator\"\n [ngClass]=\"['sky-expansion-indicator-' + directionOrDefault]\"\n>\n <ng-container *skyThemeIf=\"'default'\">\n <ng-container *ngTemplateOutlet=\"icon\" />\n </ng-container>\n <ng-container *skyThemeIf=\"'modern'\">\n <span class=\"sky-expansion-indicator-glyph-container\">\n <ng-container *ngTemplateOutlet=\"icon\" />\n </span>\n </ng-container>\n</div>\n\n<ng-template #icon>\n <i class=\"sky-expansion-indicator-part sky-expansion-indicator-left\"> </i>\n <i class=\"sky-expansion-indicator-part sky-expansion-indicator-right\"> </i>\n</ng-template>\n", styles: [".sky-expansion-indicator:not(.sky-theme-modern *){display:inline-block;border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;overflow:hidden;width:24px;position:relative;vertical-align:top}.sky-expansion-indicator-part:not(.sky-theme-modern *){border-color:#cdcfd2;border-style:solid;border-width:3px 0 0 0;display:inline-block;height:10px;position:absolute;top:10px;transition:transform .25s,left .25s;vertical-align:top;width:10px}.sky-expansion-indicator-up:not(.sky-theme-modern *) .sky-expansion-indicator-left{left:7px;transform:rotate(-45deg)}.sky-expansion-indicator-up:not(.sky-theme-modern *) .sky-expansion-indicator-right{left:7px;transform:rotate(45deg)}.sky-expansion-indicator-down:not(.sky-theme-modern *) .sky-expansion-indicator-left{left:2px;transform:rotate(45deg)}.sky-expansion-indicator-down:not(.sky-theme-modern *) .sky-expansion-indicator-right{left:12px;transform:rotate(-45deg)}\n", ":host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-expansion-indicator{--sky-override-expansion-indicator-container-left: 4px;--sky-override-expansion-indicator-container-top: 3.5px;--sky-override-expansion-indicator-leg-left-left: 4px;--sky-override-expansion-indicator-leg-right-left: 10.5px;--sky-override-expansion-indicator-size: 26px;--sky-override-expansion-indicator-size-half: 13px}:host-context(.sky-theme-modern) .sky-expansion-indicator{display:inline-block;border:none;background-color:transparent;flex-shrink:0;height:var(--sky-override-expansion-indicator-size, var(--sky-size-icon-s));margin:0;overflow:hidden;position:relative;vertical-align:top;width:var(--sky-override-expansion-indicator-size, var(--sky-size-icon-s))}:host-context(.sky-theme-modern) .sky-expansion-indicator-part{background:var(--sky-color-icon-deemphasized);border:none;display:inline-block;height:2px;position:absolute;top:var(--sky-override-expansion-indicator-size-half, calc(var(--sky-size-icon-s) / 2));transition:transform .25s,left .25s;vertical-align:top;width:11px}:host-context(.sky-theme-modern) .sky-expansion-indicator-glyph-container{left:var(--sky-override-expansion-indicator-container-left, 0);display:inline-block;position:absolute;top:var(--sky-override-expansion-indicator-container-top, 1.5px);transform:scale(.68)}:host-context(.sky-theme-modern) .sky-expansion-indicator-left{border-radius:1px 0 0 1px;left:var(--sky-override-expansion-indicator-leg-left-left, 2.75px)}:host-context(.sky-theme-modern) .sky-expansion-indicator-right{border-radius:0 1px 1px 0;left:var(--sky-override-expansion-indicator-leg-right-left, 9.25px)}:host-context(.sky-theme-modern) .sky-expansion-indicator-up .sky-expansion-indicator-left{transform:rotate(-45deg)}:host-context(.sky-theme-modern) .sky-expansion-indicator-up .sky-expansion-indicator-right{transform:rotate(45deg)}:host-context(.sky-theme-modern) .sky-expansion-indicator-down .sky-expansion-indicator-left{transform:rotate(45deg)}:host-context(.sky-theme-modern) .sky-expansion-indicator-down .sky-expansion-indicator-right{transform:rotate(-45deg)}\n"] }]
|
|
305
|
+
args: [{ selector: 'sky-expansion-indicator', hostDirectives: [SkyThemeComponentClassDirective], standalone: false, template: "<div\n aria-hidden=\"true\"\n class=\"sky-expansion-indicator\"\n [ngClass]=\"['sky-expansion-indicator-' + directionOrDefault]\"\n>\n <ng-container *skyThemeIf=\"'default'\">\n <ng-container *ngTemplateOutlet=\"icon\" />\n </ng-container>\n <ng-container *skyThemeIf=\"'modern'\">\n <span class=\"sky-expansion-indicator-glyph-container\">\n <ng-container *ngTemplateOutlet=\"icon\" />\n </span>\n </ng-container>\n</div>\n\n<ng-template #icon>\n <i class=\"sky-expansion-indicator-part sky-expansion-indicator-left\"> </i>\n <i class=\"sky-expansion-indicator-part sky-expansion-indicator-right\"> </i>\n</ng-template>\n", styles: [".sky-expansion-indicator:not(.sky-theme-modern *){display:inline-block;border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;overflow:hidden;width:24px;position:relative;vertical-align:top}.sky-expansion-indicator-part:not(.sky-theme-modern *){border-color:#cdcfd2;border-style:solid;border-width:3px 0 0 0;display:inline-block;height:10px;position:absolute;top:10px;transition:transform .25s,left .25s;vertical-align:top;width:10px}.sky-expansion-indicator-up:not(.sky-theme-modern *) .sky-expansion-indicator-left{left:7px;transform:rotate(-45deg)}.sky-expansion-indicator-up:not(.sky-theme-modern *) .sky-expansion-indicator-right{left:7px;transform:rotate(45deg)}.sky-expansion-indicator-down:not(.sky-theme-modern *) .sky-expansion-indicator-left{left:2px;transform:rotate(45deg)}.sky-expansion-indicator-down:not(.sky-theme-modern *) .sky-expansion-indicator-right{left:12px;transform:rotate(-45deg)}\n", ":host-context(.sky-theme-modern:not(.sky-theme-brand-blackbaud)) .sky-expansion-indicator{--sky-override-expansion-indicator-container-left: 4px;--sky-override-expansion-indicator-container-top: 3.5px;--sky-override-expansion-indicator-leg-left-left: 4px;--sky-override-expansion-indicator-leg-right-left: 10.5px;--sky-override-expansion-indicator-line-height: normal;--sky-override-expansion-indicator-size: 26px;--sky-override-expansion-indicator-size-half: 13px}:host-context(.sky-theme-modern) :host.sky-cmp-theme-modern{line-height:var(--sky-override-expansion-indicator-line-height, 1)}:host-context(.sky-theme-modern) .sky-expansion-indicator{display:inline-block;border:none;background-color:transparent;flex-shrink:0;height:var(--sky-override-expansion-indicator-size, var(--sky-size-icon-s));margin:0;overflow:hidden;position:relative;vertical-align:top;width:var(--sky-override-expansion-indicator-size, var(--sky-size-icon-s))}:host-context(.sky-theme-modern) .sky-expansion-indicator-part{background:var(--sky-color-icon-deemphasized);border:none;display:inline-block;height:2px;position:absolute;top:var(--sky-override-expansion-indicator-size-half, calc(var(--sky-size-icon-s) / 2));transition:transform .25s,left .25s;vertical-align:top;width:11px}:host-context(.sky-theme-modern) .sky-expansion-indicator-glyph-container{left:var(--sky-override-expansion-indicator-container-left, 0);display:inline-block;position:absolute;top:var(--sky-override-expansion-indicator-container-top, 1.5px);transform:scale(.68)}:host-context(.sky-theme-modern) .sky-expansion-indicator-left{border-radius:1px 0 0 1px;left:var(--sky-override-expansion-indicator-leg-left-left, 2.75px)}:host-context(.sky-theme-modern) .sky-expansion-indicator-right{border-radius:0 1px 1px 0;left:var(--sky-override-expansion-indicator-leg-right-left, 9.25px)}:host-context(.sky-theme-modern) .sky-expansion-indicator-up .sky-expansion-indicator-left{transform:rotate(-45deg)}:host-context(.sky-theme-modern) .sky-expansion-indicator-up .sky-expansion-indicator-right{transform:rotate(45deg)}:host-context(.sky-theme-modern) .sky-expansion-indicator-down .sky-expansion-indicator-left{transform:rotate(45deg)}:host-context(.sky-theme-modern) .sky-expansion-indicator-down .sky-expansion-indicator-right{transform:rotate(-45deg)}\n"] }]
|
|
306
306
|
}], propDecorators: { direction: [{
|
|
307
307
|
type: Input
|
|
308
308
|
}] } });
|
|
@@ -462,7 +462,7 @@ class SkyIllustrationComponent {
|
|
|
462
462
|
}
|
|
463
463
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: SkyIllustrationComponent, decorators: [{
|
|
464
464
|
type: Component,
|
|
465
|
-
args: [{ selector: 'sky-illustration', imports: [CommonModule
|
|
465
|
+
args: [{ selector: 'sky-illustration', imports: [CommonModule], hostDirectives: [SkyThemeComponentClassDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<img\n alt=\"\"\n class=\"sky-illustration-img\"\n loading=\"lazy\"\n [attr.data-sky-illustration-name]=\"name()\"\n [height]=\"pixelSize()\"\n [ngClass]=\"{\n 'sky-illustration-img-loaded': !!url()\n }\"\n [src]=\"url()\"\n [width]=\"pixelSize()\"\n/>\n", styles: [":host.sky-cmp-theme-default{display:block}.sky-illustration-img:not(.sky-theme-modern *){display:block}.sky-illustration-img:not(.sky-theme-modern *)[src=\"\"]{visibility:hidden}\n", ":host-context(.sky-theme-modern) :host.sky-cmp-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-illustration-img{display:block}:host-context(.sky-theme-modern) .sky-illustration-img[src=\"\"]{visibility:hidden}\n"] }]
|
|
466
466
|
}] });
|
|
467
467
|
|
|
468
468
|
class SkyIllustrationModule {
|