@skyux/indicators 5.0.0-beta.2 → 5.0.1
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/bundles/skyux-indicators-testing.umd.js +2 -2
- package/bundles/skyux-indicators-testing.umd.js.map +1 -1
- package/bundles/skyux-indicators.umd.js +655 -523
- package/bundles/skyux-indicators.umd.js.map +1 -1
- package/documentation.json +2260 -2187
- package/esm2015/modules/alert/alert.component.js +25 -14
- package/esm2015/modules/alert/alert.module.js +29 -18
- package/esm2015/modules/chevron/chevron.component.js +21 -13
- package/esm2015/modules/chevron/chevron.module.js +26 -17
- package/esm2015/modules/help-inline/help-inline.component.js +18 -11
- package/esm2015/modules/help-inline/help-inline.module.js +29 -18
- package/esm2015/modules/icon/icon-class-list.pipe.js +11 -10
- package/esm2015/modules/icon/icon-resolver.service.js +9 -11
- package/esm2015/modules/icon/icon-stack-item.js +1 -1
- package/esm2015/modules/icon/icon-stack.component.js +20 -13
- package/esm2015/modules/icon/icon.component.js +25 -16
- package/esm2015/modules/icon/icon.module.js +13 -18
- package/esm2015/modules/key-info/key-info-label.component.js +11 -7
- package/esm2015/modules/key-info/key-info-value.component.js +11 -7
- package/esm2015/modules/key-info/key-info.component.js +15 -11
- package/esm2015/modules/key-info/key-info.module.js +25 -18
- package/esm2015/modules/label/label.component.js +17 -11
- package/esm2015/modules/label/label.module.js +13 -15
- package/esm2015/modules/shared/indicator-description-type.js +1 -1
- package/esm2015/modules/shared/indicator-icon-utility.js +4 -4
- package/esm2015/modules/shared/indicator-icon.js +1 -1
- package/esm2015/modules/shared/sky-indicators-resources.module.js +44 -13
- package/esm2015/modules/status-indicator/status-indicator.component.js +28 -21
- package/esm2015/modules/status-indicator/status-indicator.module.js +26 -17
- package/esm2015/modules/text-highlight/text-highlight.directive.js +19 -16
- package/esm2015/modules/text-highlight/text-highlight.module.js +13 -14
- package/esm2015/modules/tokens/token.component.js +32 -26
- package/esm2015/modules/tokens/tokens.component.js +93 -58
- package/esm2015/modules/tokens/tokens.module.js +26 -19
- package/esm2015/modules/tokens/types/token-selected-event-args.js +1 -1
- package/esm2015/modules/tokens/types/token.js +1 -1
- package/esm2015/modules/tokens/types/tokens-message-type.js +1 -1
- package/esm2015/modules/tokens/types/tokens-message.js +1 -1
- package/esm2015/modules/wait/wait-adapter.service.js +32 -25
- package/esm2015/modules/wait/wait-page-adapter.service.js +9 -7
- package/esm2015/modules/wait/wait-page.component.js +17 -12
- package/esm2015/modules/wait/wait.component.js +31 -27
- package/esm2015/modules/wait/wait.module.js +14 -21
- package/esm2015/modules/wait/wait.service.js +10 -16
- package/esm2015/public-api.js +17 -1
- package/esm2015/skyux-indicators.js +1 -21
- package/esm2015/testing/alert-fixture.js +1 -1
- package/esm2015/testing/label-fixture.js +1 -1
- package/esm2015/testing/wait-fixture.js +1 -1
- package/fesm2015/skyux-indicators-testing.js.map +1 -1
- package/fesm2015/skyux-indicators.js +635 -496
- package/fesm2015/skyux-indicators.js.map +1 -1
- package/modules/alert/alert.component.d.ts +3 -0
- package/modules/alert/alert.module.d.ts +10 -0
- package/modules/chevron/chevron.component.d.ts +3 -0
- package/modules/chevron/chevron.module.d.ts +9 -0
- package/modules/help-inline/help-inline.component.d.ts +3 -0
- package/modules/help-inline/help-inline.module.d.ts +10 -0
- package/modules/icon/icon-class-list.pipe.d.ts +3 -0
- package/modules/icon/icon-resolver.service.d.ts +3 -0
- package/modules/icon/icon-stack.component.d.ts +3 -0
- package/modules/icon/icon.component.d.ts +3 -0
- package/modules/icon/icon.module.d.ts +9 -0
- package/modules/key-info/key-info-label.component.d.ts +3 -0
- package/modules/key-info/key-info-value.component.d.ts +3 -0
- package/modules/key-info/key-info.component.d.ts +3 -0
- package/modules/key-info/key-info.module.d.ts +8 -0
- package/modules/label/label.component.d.ts +3 -0
- package/modules/label/label.module.d.ts +7 -0
- package/modules/shared/sky-indicators-resources.module.d.ts +5 -6
- package/modules/status-indicator/status-indicator.component.d.ts +3 -0
- package/modules/status-indicator/status-indicator.module.d.ts +9 -0
- package/modules/text-highlight/text-highlight.directive.d.ts +3 -0
- package/modules/text-highlight/text-highlight.module.d.ts +5 -0
- package/modules/tokens/token.component.d.ts +3 -0
- package/modules/tokens/tokens.component.d.ts +3 -0
- package/modules/tokens/tokens.module.d.ts +10 -0
- package/modules/wait/wait-adapter.service.d.ts +3 -0
- package/modules/wait/wait-page-adapter.service.d.ts +3 -0
- package/modules/wait/wait-page.component.d.ts +3 -0
- package/modules/wait/wait.component.d.ts +3 -0
- package/modules/wait/wait.module.d.ts +9 -0
- package/modules/wait/wait.service.d.ts +3 -0
- package/package.json +7 -8
- package/public-api.d.ts +14 -0
- package/skyux-indicators.d.ts +1 -20
- package/testing/package.json +0 -1
- package/testing/skyux-indicators-testing.d.ts +1 -0
- package/esm2015/modules/alert/alert.component.ngfactory.js +0 -27
- package/esm2015/modules/alert/alert.component.ngsummary.json +0 -1
- package/esm2015/modules/alert/alert.component.scss.shim.ngstyle.js +0 -9
- package/esm2015/modules/alert/alert.module.ngfactory.js +0 -16
- package/esm2015/modules/alert/alert.module.ngsummary.json +0 -1
- package/esm2015/modules/chevron/chevron.component.ngfactory.js +0 -28
- package/esm2015/modules/chevron/chevron.component.ngsummary.json +0 -1
- package/esm2015/modules/chevron/chevron.component.scss.shim.ngstyle.js +0 -9
- package/esm2015/modules/chevron/chevron.module.ngfactory.js +0 -15
- package/esm2015/modules/chevron/chevron.module.ngsummary.json +0 -1
- package/esm2015/modules/help-inline/help-inline.component.ngfactory.js +0 -28
- package/esm2015/modules/help-inline/help-inline.component.ngsummary.json +0 -1
- package/esm2015/modules/help-inline/help-inline.component.scss.shim.ngstyle.js +0 -9
- package/esm2015/modules/help-inline/help-inline.module.ngfactory.js +0 -16
- package/esm2015/modules/help-inline/help-inline.module.ngsummary.json +0 -1
- package/esm2015/modules/icon/icon-class-list.pipe.ngsummary.json +0 -1
- package/esm2015/modules/icon/icon-resolver.service.ngsummary.json +0 -1
- package/esm2015/modules/icon/icon-stack-item.ngsummary.json +0 -1
- package/esm2015/modules/icon/icon-stack.component.ngfactory.js +0 -22
- package/esm2015/modules/icon/icon-stack.component.ngsummary.json +0 -1
- package/esm2015/modules/icon/icon-stack.component.scss.shim.ngstyle.js +0 -9
- package/esm2015/modules/icon/icon.component.ngfactory.js +0 -21
- package/esm2015/modules/icon/icon.component.ngsummary.json +0 -1
- package/esm2015/modules/icon/icon.component.scss.shim.ngstyle.js +0 -9
- package/esm2015/modules/icon/icon.module.ngfactory.js +0 -13
- package/esm2015/modules/icon/icon.module.ngsummary.json +0 -1
- package/esm2015/modules/icon/types/icon-type.ngsummary.json +0 -1
- package/esm2015/modules/icon/types/icon-variant-type.ngsummary.json +0 -1
- package/esm2015/modules/key-info/key-info-label.component.ngfactory.js +0 -16
- package/esm2015/modules/key-info/key-info-label.component.ngsummary.json +0 -1
- package/esm2015/modules/key-info/key-info-value.component.ngfactory.js +0 -16
- package/esm2015/modules/key-info/key-info-value.component.ngsummary.json +0 -1
- package/esm2015/modules/key-info/key-info.component.ngfactory.js +0 -18
- package/esm2015/modules/key-info/key-info.component.ngsummary.json +0 -1
- package/esm2015/modules/key-info/key-info.component.scss.shim.ngstyle.js +0 -9
- package/esm2015/modules/key-info/key-info.module.ngfactory.js +0 -12
- package/esm2015/modules/key-info/key-info.module.ngsummary.json +0 -1
- package/esm2015/modules/label/label-type.ngsummary.json +0 -1
- package/esm2015/modules/label/label.component.ngfactory.js +0 -22
- package/esm2015/modules/label/label.component.ngsummary.json +0 -1
- package/esm2015/modules/label/label.component.scss.shim.ngstyle.js +0 -9
- package/esm2015/modules/label/label.module.ngfactory.js +0 -14
- package/esm2015/modules/label/label.module.ngsummary.json +0 -1
- package/esm2015/modules/shared/indicator-description-type.ngsummary.json +0 -1
- package/esm2015/modules/shared/indicator-icon-type.ngsummary.json +0 -1
- package/esm2015/modules/shared/indicator-icon-utility.ngsummary.json +0 -1
- package/esm2015/modules/shared/indicator-icon.ngsummary.json +0 -1
- package/esm2015/modules/shared/sky-indicators-resources.module.ngfactory.js +0 -15
- package/esm2015/modules/shared/sky-indicators-resources.module.ngsummary.json +0 -1
- package/esm2015/modules/status-indicator/status-indicator.component.ngfactory.js +0 -25
- package/esm2015/modules/status-indicator/status-indicator.component.ngsummary.json +0 -1
- package/esm2015/modules/status-indicator/status-indicator.component.scss.shim.ngstyle.js +0 -9
- package/esm2015/modules/status-indicator/status-indicator.module.ngfactory.js +0 -16
- package/esm2015/modules/status-indicator/status-indicator.module.ngsummary.json +0 -1
- package/esm2015/modules/text-highlight/text-highlight.directive.ngsummary.json +0 -1
- package/esm2015/modules/text-highlight/text-highlight.module.ngfactory.js +0 -12
- package/esm2015/modules/text-highlight/text-highlight.module.ngsummary.json +0 -1
- package/esm2015/modules/tokens/token.component.ngfactory.js +0 -40
- package/esm2015/modules/tokens/token.component.ngsummary.json +0 -1
- package/esm2015/modules/tokens/token.component.scss.shim.ngstyle.js +0 -9
- package/esm2015/modules/tokens/tokens.component.ngfactory.js +0 -39
- package/esm2015/modules/tokens/tokens.component.ngsummary.json +0 -1
- package/esm2015/modules/tokens/tokens.component.scss.shim.ngstyle.js +0 -9
- package/esm2015/modules/tokens/tokens.module.ngfactory.js +0 -16
- package/esm2015/modules/tokens/tokens.module.ngsummary.json +0 -1
- package/esm2015/modules/tokens/types/token-selected-event-args.ngsummary.json +0 -1
- package/esm2015/modules/tokens/types/token.ngsummary.json +0 -1
- package/esm2015/modules/tokens/types/tokens-message-type.ngsummary.json +0 -1
- package/esm2015/modules/tokens/types/tokens-message.ngsummary.json +0 -1
- package/esm2015/modules/wait/wait-adapter.service.ngsummary.json +0 -1
- package/esm2015/modules/wait/wait-page-adapter.service.ngsummary.json +0 -1
- package/esm2015/modules/wait/wait-page.component.ngfactory.js +0 -21
- package/esm2015/modules/wait/wait-page.component.ngsummary.json +0 -1
- package/esm2015/modules/wait/wait-page.component.scss.shim.ngstyle.js +0 -9
- package/esm2015/modules/wait/wait.component.ngfactory.js +0 -21
- package/esm2015/modules/wait/wait.component.ngsummary.json +0 -1
- package/esm2015/modules/wait/wait.component.scss.shim.ngstyle.js +0 -9
- package/esm2015/modules/wait/wait.module.ngfactory.js +0 -15
- package/esm2015/modules/wait/wait.module.ngsummary.json +0 -1
- package/esm2015/modules/wait/wait.service.ngsummary.json +0 -1
- package/esm2015/public-api.ngsummary.json +0 -1
- package/esm2015/skyux-indicators.ngsummary.json +0 -1
- package/esm2015/testing/alert-fixture.ngsummary.json +0 -1
- package/esm2015/testing/label-fixture.ngsummary.json +0 -1
- package/esm2015/testing/public-api.ngsummary.json +0 -1
- package/esm2015/testing/skyux-indicators-testing.ngsummary.json +0 -1
- package/esm2015/testing/wait-fixture.ngsummary.json +0 -1
- package/modules/alert/alert.component.ngfactory.d.ts +0 -1
- package/modules/alert/alert.component.scss.shim.ngstyle.d.ts +0 -1
- package/modules/alert/alert.module.ngfactory.d.ts +0 -3
- package/modules/chevron/chevron.component.ngfactory.d.ts +0 -1
- package/modules/chevron/chevron.component.scss.shim.ngstyle.d.ts +0 -1
- package/modules/chevron/chevron.module.ngfactory.d.ts +0 -3
- package/modules/help-inline/help-inline.component.ngfactory.d.ts +0 -1
- package/modules/help-inline/help-inline.component.scss.shim.ngstyle.d.ts +0 -1
- package/modules/help-inline/help-inline.module.ngfactory.d.ts +0 -3
- package/modules/icon/icon-stack.component.ngfactory.d.ts +0 -1
- package/modules/icon/icon-stack.component.scss.shim.ngstyle.d.ts +0 -1
- package/modules/icon/icon.component.ngfactory.d.ts +0 -1
- package/modules/icon/icon.component.scss.shim.ngstyle.d.ts +0 -1
- package/modules/icon/icon.module.ngfactory.d.ts +0 -3
- package/modules/key-info/key-info-label.component.ngfactory.d.ts +0 -1
- package/modules/key-info/key-info-value.component.ngfactory.d.ts +0 -1
- package/modules/key-info/key-info.component.ngfactory.d.ts +0 -1
- package/modules/key-info/key-info.component.scss.shim.ngstyle.d.ts +0 -1
- package/modules/key-info/key-info.module.ngfactory.d.ts +0 -3
- package/modules/label/label.component.ngfactory.d.ts +0 -1
- package/modules/label/label.component.scss.shim.ngstyle.d.ts +0 -1
- package/modules/label/label.module.ngfactory.d.ts +0 -3
- package/modules/shared/sky-indicators-resources.module.ngfactory.d.ts +0 -3
- package/modules/status-indicator/status-indicator.component.ngfactory.d.ts +0 -1
- package/modules/status-indicator/status-indicator.component.scss.shim.ngstyle.d.ts +0 -1
- package/modules/status-indicator/status-indicator.module.ngfactory.d.ts +0 -3
- package/modules/text-highlight/text-highlight.module.ngfactory.d.ts +0 -3
- package/modules/tokens/token.component.ngfactory.d.ts +0 -1
- package/modules/tokens/token.component.scss.shim.ngstyle.d.ts +0 -1
- package/modules/tokens/tokens.component.ngfactory.d.ts +0 -1
- package/modules/tokens/tokens.component.scss.shim.ngstyle.d.ts +0 -1
- package/modules/tokens/tokens.module.ngfactory.d.ts +0 -3
- package/modules/wait/wait-page.component.ngfactory.d.ts +0 -1
- package/modules/wait/wait-page.component.scss.shim.ngstyle.d.ts +0 -1
- package/modules/wait/wait.component.ngfactory.d.ts +0 -1
- package/modules/wait/wait.component.scss.shim.ngstyle.d.ts +0 -1
- package/modules/wait/wait.module.ngfactory.d.ts +0 -3
- package/skyux-indicators.metadata.json +0 -1
- package/testing/skyux-indicators-testing.metadata.json +0 -1
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { NgModule,
|
|
2
|
+
import { NgModule, Injectable, Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, Directive, ViewChildren, Optional } from '@angular/core';
|
|
3
|
+
import * as i1$1 from '@angular/common';
|
|
3
4
|
import { CommonModule } from '@angular/common';
|
|
4
|
-
import
|
|
5
|
+
import * as i1$2 from '@skyux/i18n';
|
|
6
|
+
import { getLibStringForLocale, SkyI18nModule, SKY_LIB_RESOURCES_PROVIDERS } from '@skyux/i18n';
|
|
5
7
|
import * as i1 from '@skyux/theme';
|
|
6
|
-
import {
|
|
7
|
-
import * as
|
|
8
|
-
import { MutationObserverService
|
|
8
|
+
import { SkyThemeIconManifestModule, SkyThemeModule } from '@skyux/theme';
|
|
9
|
+
import * as i1$3 from '@skyux/core';
|
|
10
|
+
import { MutationObserverService } from '@skyux/core';
|
|
9
11
|
import { trigger, transition, style, animate } from '@angular/animations';
|
|
10
12
|
import { Subject, BehaviorSubject, defer } from 'rxjs';
|
|
11
13
|
import { takeUntil, finalize } from 'rxjs/operators';
|
|
@@ -17,7 +19,25 @@ import { takeUntil, finalize } from 'rxjs/operators';
|
|
|
17
19
|
* To update this file, simply rerun the command.
|
|
18
20
|
*/
|
|
19
21
|
const RESOURCES = {
|
|
20
|
-
'EN-US': {
|
|
22
|
+
'EN-US': {
|
|
23
|
+
skyux_alert_close: { message: 'Close the alert' },
|
|
24
|
+
skyux_chevron_collapse: { message: 'Collapse' },
|
|
25
|
+
skyux_chevron_expand: { message: 'Expand' },
|
|
26
|
+
skyux_help_inline_button_title: { message: 'Show help content' },
|
|
27
|
+
skyux_status_indicator_sr_completed: { message: 'Completed:' },
|
|
28
|
+
skyux_status_indicator_sr_error: { message: 'Error:' },
|
|
29
|
+
skyux_status_indicator_sr_important_info: {
|
|
30
|
+
message: 'Important information:',
|
|
31
|
+
},
|
|
32
|
+
skyux_status_indicator_sr_warning: { message: 'Warning:' },
|
|
33
|
+
skyux_tokens_dismiss_button_title: { message: 'Remove item' },
|
|
34
|
+
skyux_wait_aria_alt_text: { message: 'Loading.' },
|
|
35
|
+
skyux_wait_blocking_aria_alt_text: { message: 'Loading. Please wait.' },
|
|
36
|
+
skyux_wait_page_aria_alt_text: { message: 'Page loading.' },
|
|
37
|
+
skyux_wait_page_blocking_aria_alt_text: {
|
|
38
|
+
message: 'Page loading. Please wait.',
|
|
39
|
+
},
|
|
40
|
+
},
|
|
21
41
|
};
|
|
22
42
|
class SkyIndicatorsResourcesProvider {
|
|
23
43
|
getString(localeInfo, name) {
|
|
@@ -29,57 +49,28 @@ class SkyIndicatorsResourcesProvider {
|
|
|
29
49
|
*/
|
|
30
50
|
class SkyIndicatorsResourcesModule {
|
|
31
51
|
}
|
|
32
|
-
SkyIndicatorsResourcesModule
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
{ type: Component, args: [{
|
|
55
|
-
selector: 'sky-icon',
|
|
56
|
-
template: "<i *ngIf=\"icon\"\n aria-hidden=\"true\"\n class=\"sky-icon\"\n [ngClass]=\"icon | skyIconClassList:iconType:size:fixedWidth:variant\"\n>\n</i>\n",
|
|
57
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
58
|
-
styles: [":host{display:inline-block}i{display:inherit}\n"]
|
|
59
|
-
},] }
|
|
60
|
-
];
|
|
61
|
-
SkyIconComponent.propDecorators = {
|
|
62
|
-
icon: [{ type: Input }],
|
|
63
|
-
iconType: [{ type: Input }],
|
|
64
|
-
size: [{ type: Input }],
|
|
65
|
-
fixedWidth: [{ type: Input }],
|
|
66
|
-
variant: [{ type: Input }]
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
class SkyIconStackComponent {
|
|
70
|
-
}
|
|
71
|
-
SkyIconStackComponent.decorators = [
|
|
72
|
-
{ type: Component, args: [{
|
|
73
|
-
selector: 'sky-icon-stack',
|
|
74
|
-
template: "<span\n aria-hidden=\"true\"\n class=\"sky-icon-stack fa-stack\"\n [ngClass]=\"size ? 'fa-' + size + ' sky-icon-stack-size-' + size : ''\"\n>\n <i *ngIf=\"baseIcon\"\n class=\"sky-icon fa-stack-2x\"\n [ngClass]=\"baseIcon.icon | skyIconClassList:baseIcon.iconType\"\n ></i>\n <i *ngIf=\"topIcon\"\n class=\"sky-icon fa-stack-1x fa-inverse sky-icon-inverse\"\n [ngClass]=\"topIcon.icon | skyIconClassList:topIcon.iconType\"\n ></i>\n</span>\n",
|
|
75
|
-
styles: [":host{display:inline-block;vertical-align:bottom}.sky-icon-stack-size-xs.fa-stack{width:1.25em;height:1.25em;line-height:1.25em}.sky-icon-stack-size-xs .fa-stack-2x{font-size:1.25em}.sky-icon-stack-size-xs .fa-stack-1x{font-size:.625em}.fa-stack-1x.sky-i-check:before{position:relative;top:1px}.fa-stack-1x.sky-i-exclamation:before{position:relative;top:2px;left:-.5px}.sky-theme-modern.sky-theme-mode-dark .sky-icon-inverse,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-icon-inverse{color:#121212}\n"]
|
|
76
|
-
},] }
|
|
77
|
-
];
|
|
78
|
-
SkyIconStackComponent.propDecorators = {
|
|
79
|
-
size: [{ type: Input }],
|
|
80
|
-
baseIcon: [{ type: Input }],
|
|
81
|
-
topIcon: [{ type: Input }]
|
|
82
|
-
};
|
|
52
|
+
SkyIndicatorsResourcesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIndicatorsResourcesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
53
|
+
SkyIndicatorsResourcesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIndicatorsResourcesModule, exports: [SkyI18nModule] });
|
|
54
|
+
SkyIndicatorsResourcesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIndicatorsResourcesModule, providers: [
|
|
55
|
+
{
|
|
56
|
+
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
57
|
+
useClass: SkyIndicatorsResourcesProvider,
|
|
58
|
+
multi: true,
|
|
59
|
+
},
|
|
60
|
+
], imports: [SkyI18nModule] });
|
|
61
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIndicatorsResourcesModule, decorators: [{
|
|
62
|
+
type: NgModule,
|
|
63
|
+
args: [{
|
|
64
|
+
exports: [SkyI18nModule],
|
|
65
|
+
providers: [
|
|
66
|
+
{
|
|
67
|
+
provide: SKY_LIB_RESOURCES_PROVIDERS,
|
|
68
|
+
useClass: SkyIndicatorsResourcesProvider,
|
|
69
|
+
multi: true,
|
|
70
|
+
},
|
|
71
|
+
],
|
|
72
|
+
}]
|
|
73
|
+
}] });
|
|
83
74
|
|
|
84
75
|
/**
|
|
85
76
|
* @internal
|
|
@@ -110,15 +101,14 @@ class SkyIconResolverService {
|
|
|
110
101
|
return iconName;
|
|
111
102
|
}
|
|
112
103
|
}
|
|
113
|
-
SkyIconResolverService.ɵ
|
|
114
|
-
SkyIconResolverService
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
];
|
|
104
|
+
SkyIconResolverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIconResolverService, deps: [{ token: i1.SkyThemeIconManifestService }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
105
|
+
SkyIconResolverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIconResolverService, providedIn: 'root' });
|
|
106
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIconResolverService, decorators: [{
|
|
107
|
+
type: Injectable,
|
|
108
|
+
args: [{
|
|
109
|
+
providedIn: 'root',
|
|
110
|
+
}]
|
|
111
|
+
}], ctorParameters: function () { return [{ type: i1.SkyThemeIconManifestService }]; } });
|
|
122
112
|
|
|
123
113
|
/**
|
|
124
114
|
* @internal
|
|
@@ -145,34 +135,79 @@ class SkyIconClassListPipe {
|
|
|
145
135
|
return classList;
|
|
146
136
|
}
|
|
147
137
|
}
|
|
148
|
-
SkyIconClassListPipe
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
];
|
|
138
|
+
SkyIconClassListPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIconClassListPipe, deps: [{ token: SkyIconResolverService }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
139
|
+
SkyIconClassListPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIconClassListPipe, name: "skyIconClassList" });
|
|
140
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIconClassListPipe, decorators: [{
|
|
141
|
+
type: Pipe,
|
|
142
|
+
args: [{
|
|
143
|
+
name: 'skyIconClassList',
|
|
144
|
+
}]
|
|
145
|
+
}], ctorParameters: function () { return [{ type: SkyIconResolverService }]; } });
|
|
146
|
+
|
|
147
|
+
class SkyIconComponent {
|
|
148
|
+
constructor() {
|
|
149
|
+
/**
|
|
150
|
+
* Specifies the type of icon to display. Specifying `fa` will display a Font Awesome icon,
|
|
151
|
+
* while specifying `skyux` will display an icon from the custom SKY UX icon font. Note that
|
|
152
|
+
* the custom SKY UX icon font is currently in beta.
|
|
153
|
+
*/
|
|
154
|
+
this.iconType = 'fa';
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
SkyIconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
158
|
+
SkyIconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyIconComponent, selector: "sky-icon", inputs: { icon: "icon", iconType: "iconType", size: "size", fixedWidth: "fixedWidth", variant: "variant" }, ngImport: i0, template: "<i\n *ngIf=\"icon\"\n aria-hidden=\"true\"\n class=\"sky-icon\"\n [ngClass]=\"icon | skyIconClassList: iconType:size:fixedWidth:variant\"\n>\n</i>\n", styles: [":host{display:inline-block}i{display:inherit}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "skyIconClassList": SkyIconClassListPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
159
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIconComponent, decorators: [{
|
|
160
|
+
type: Component,
|
|
161
|
+
args: [{
|
|
162
|
+
selector: 'sky-icon',
|
|
163
|
+
templateUrl: './icon.component.html',
|
|
164
|
+
styleUrls: ['./icon.component.scss'],
|
|
165
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
166
|
+
}]
|
|
167
|
+
}], propDecorators: { icon: [{
|
|
168
|
+
type: Input
|
|
169
|
+
}], iconType: [{
|
|
170
|
+
type: Input
|
|
171
|
+
}], size: [{
|
|
172
|
+
type: Input
|
|
173
|
+
}], fixedWidth: [{
|
|
174
|
+
type: Input
|
|
175
|
+
}], variant: [{
|
|
176
|
+
type: Input
|
|
177
|
+
}] } });
|
|
178
|
+
|
|
179
|
+
class SkyIconStackComponent {
|
|
180
|
+
}
|
|
181
|
+
SkyIconStackComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIconStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
182
|
+
SkyIconStackComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: { size: "size", baseIcon: "baseIcon", topIcon: "topIcon" }, ngImport: i0, template: "<span\n aria-hidden=\"true\"\n class=\"sky-icon-stack fa-stack\"\n [ngClass]=\"size ? 'fa-' + size + ' sky-icon-stack-size-' + size : ''\"\n>\n <i\n *ngIf=\"baseIcon\"\n class=\"sky-icon fa-stack-2x\"\n [ngClass]=\"baseIcon.icon | skyIconClassList: baseIcon.iconType\"\n ></i>\n <i\n *ngIf=\"topIcon\"\n class=\"sky-icon fa-stack-1x fa-inverse sky-icon-inverse\"\n [ngClass]=\"topIcon.icon | skyIconClassList: topIcon.iconType\"\n ></i>\n</span>\n", styles: [":host{display:inline-block;vertical-align:bottom}.sky-icon-stack-size-xs.fa-stack{width:1.25em;height:1.25em;line-height:1.25em}.sky-icon-stack-size-xs .fa-stack-2x{font-size:1.25em}.sky-icon-stack-size-xs .fa-stack-1x{font-size:.625em}.fa-stack-1x.sky-i-check:before{position:relative;top:1px}.fa-stack-1x.sky-i-exclamation:before{position:relative;top:2px;left:-.5px}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-icon-inverse{color:#121212}.sky-theme-modern.sky-theme-mode-dark .sky-icon-inverse{color:#121212}\n"], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "skyIconClassList": SkyIconClassListPipe } });
|
|
183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIconStackComponent, decorators: [{
|
|
184
|
+
type: Component,
|
|
185
|
+
args: [{
|
|
186
|
+
selector: 'sky-icon-stack',
|
|
187
|
+
templateUrl: './icon-stack.component.html',
|
|
188
|
+
styleUrls: ['./icon-stack.component.scss'],
|
|
189
|
+
}]
|
|
190
|
+
}], propDecorators: { size: [{
|
|
191
|
+
type: Input
|
|
192
|
+
}], baseIcon: [{
|
|
193
|
+
type: Input
|
|
194
|
+
}], topIcon: [{
|
|
195
|
+
type: Input
|
|
196
|
+
}] } });
|
|
156
197
|
|
|
157
198
|
class SkyIconModule {
|
|
158
199
|
}
|
|
159
|
-
SkyIconModule
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
exports: [
|
|
171
|
-
SkyIconComponent,
|
|
172
|
-
SkyIconStackComponent
|
|
173
|
-
]
|
|
174
|
-
},] }
|
|
175
|
-
];
|
|
200
|
+
SkyIconModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
201
|
+
SkyIconModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIconModule, declarations: [SkyIconClassListPipe, SkyIconComponent, SkyIconStackComponent], imports: [CommonModule, SkyThemeIconManifestModule], exports: [SkyIconComponent, SkyIconStackComponent] });
|
|
202
|
+
SkyIconModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIconModule, imports: [[CommonModule, SkyThemeIconManifestModule]] });
|
|
203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyIconModule, decorators: [{
|
|
204
|
+
type: NgModule,
|
|
205
|
+
args: [{
|
|
206
|
+
declarations: [SkyIconClassListPipe, SkyIconComponent, SkyIconStackComponent],
|
|
207
|
+
imports: [CommonModule, SkyThemeIconManifestModule],
|
|
208
|
+
exports: [SkyIconComponent, SkyIconStackComponent],
|
|
209
|
+
}]
|
|
210
|
+
}] });
|
|
176
211
|
|
|
177
212
|
/**
|
|
178
213
|
* @internl
|
|
@@ -205,12 +240,12 @@ class SkyIndicatorIconUtility {
|
|
|
205
240
|
defaultThemeIcon: icon,
|
|
206
241
|
modernThemeBaseIcon: {
|
|
207
242
|
icon: baseIcon,
|
|
208
|
-
iconType: 'skyux'
|
|
243
|
+
iconType: 'skyux',
|
|
209
244
|
},
|
|
210
245
|
modernThemeTopIcon: {
|
|
211
246
|
icon: topIcon,
|
|
212
|
-
iconType: 'skyux'
|
|
213
|
-
}
|
|
247
|
+
iconType: 'skyux',
|
|
248
|
+
},
|
|
214
249
|
};
|
|
215
250
|
}
|
|
216
251
|
}
|
|
@@ -248,39 +283,54 @@ class SkyAlertComponent {
|
|
|
248
283
|
this.alertTopIcon = indicatorIcon.modernThemeTopIcon;
|
|
249
284
|
}
|
|
250
285
|
}
|
|
251
|
-
SkyAlertComponent
|
|
252
|
-
{ type:
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
]
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
286
|
+
SkyAlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
287
|
+
SkyAlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyAlertComponent, selector: "sky-alert", inputs: { alertType: "alertType", closeable: "closeable", closed: "closed" }, outputs: { closedChange: "closedChange" }, ngImport: i0, template: "<div\n class=\"sky-alert\"\n [skyThemeClass]=\"{\n 'sky-rounded-corners': 'default',\n 'sky-box sky-elevation-1': 'modern'\n }\"\n role=\"alert\"\n [hidden]=\"closed\"\n [ngClass]=\"{\n 'sky-alert-info': alertType === 'info',\n 'sky-alert-success': alertType === 'success',\n 'sky-alert-warning': alertType === 'warning',\n 'sky-alert-danger': alertType === 'danger',\n 'sky-alert-closeable': closeable\n }\"\n>\n <div aria-hidden=\"true\" class=\"sky-alert-icon-theme-modern\">\n <sky-icon-stack [baseIcon]=\"alertBaseIcon\" [topIcon]=\"alertTopIcon\">\n </sky-icon-stack>\n </div>\n <div class=\"sky-alert-content\">\n <ng-content></ng-content>\n </div>\n <button\n class=\"sky-alert-close\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_alert_close' | skyLibResources\"\n [hidden]=\"!closeable\"\n (click)=\"close()\"\n >\n <span aria-hidden=\"true\">\n <sky-icon class=\"sky-alert-close-icon-theme-default\" icon=\"close\">\n </sky-icon>\n <sky-icon\n class=\"sky-alert-close-icon-theme-modern\"\n icon=\"close\"\n iconType=\"skyux\"\n size=\"2x\"\n >\n </sky-icon>\n </span>\n </button>\n</div>\n", styles: ["@charset \"UTF-8\";.sky-alert{padding:0 10px;margin-bottom:20px;border-left:solid 30px;color:#212327;display:flex;flex-direction:row;align-items:center}.sky-alert .sky-alert-content{padding-top:10px;padding-bottom:10px;width:100%}.sky-alert .sky-alert-content ::ng-deep a{color:#212327cc;text-decoration:underline}.sky-alert .sky-alert-content ::ng-deep a:hover{color:#212327}.sky-alert button{margin-left:auto;width:32px;height:32px}.sky-alert.sky-alert-info{background-color:#81d4f7;border-color:#00b4f1}.sky-alert.sky-alert-info:before{content:\"\\f06a\";font-family:FontAwesome;margin-left:-31px;margin-right:20px;color:#fff}.sky-alert.sky-alert-success{background-color:#b7da9b;border-color:#72bf44}.sky-alert.sky-alert-success:before{content:\"\\f00c\";font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff}.sky-alert.sky-alert-warning{background-color:#ffd597;border-color:#fbb034}.sky-alert.sky-alert-warning:before{content:\"\\f071\";font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff}.sky-alert.sky-alert-danger{background-color:#f7a08f;border-color:#ef4044}.sky-alert.sky-alert-danger:before{content:\"\\f071\";font-family:FontAwesome;margin-left:-32px;margin-right:19px;color:#fff}.sky-alert-close{cursor:pointer;font-weight:bold;line-height:1;margin:0;padding:0;color:#212327;opacity:.8;border:none;background-color:transparent;display:none}.sky-alert-close:hover{opacity:1}.sky-alert-closeable .sky-alert-close{display:block}.sky-alert-close-icon-theme-modern,.sky-alert-icon-theme-modern{display:none}:host-context(.sky-theme-modern) .sky-alert{border-left-width:7px}:host-context(.sky-theme-modern) .sky-alert .sky-alert-content{padding:15px}:host-context(.sky-theme-modern) .sky-alert.sky-alert-info{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-alert-info:before,:host-context(.sky-theme-modern) .sky-alert-success:before,:host-context(.sky-theme-modern) .sky-alert-warning:before,:host-context(.sky-theme-modern) .sky-alert-danger:before{display:none}:host-context(.sky-theme-modern) .sky-alert-info .sky-alert-icon-theme-modern{color:#00b4f1}:host-context(.sky-theme-modern) .sky-alert-success .sky-alert-icon-theme-modern{color:#72bf44}:host-context(.sky-theme-modern) .sky-alert-warning .sky-alert-icon-theme-modern{color:#fbb034}:host-context(.sky-theme-modern) .sky-alert-danger .sky-alert-icon-theme-modern{color:#ef4044}:host-context(.sky-theme-modern) .sky-alert-icon-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-alert-close-icon-theme-default{display:none}:host-context(.sky-theme-modern) .sky-alert-close-icon-theme-modern{display:inline}.sky-theme-modern .sky-alert{border-left-width:7px}.sky-theme-modern .sky-alert .sky-alert-content{padding:15px}.sky-theme-modern .sky-alert.sky-alert-info{background-color:#c1e8fb}.sky-theme-modern .sky-alert-info:before,.sky-theme-modern .sky-alert-success:before,.sky-theme-modern .sky-alert-warning:before,.sky-theme-modern .sky-alert-danger:before{display:none}.sky-theme-modern .sky-alert-info .sky-alert-icon-theme-modern{color:#00b4f1}.sky-theme-modern .sky-alert-success .sky-alert-icon-theme-modern{color:#72bf44}.sky-theme-modern .sky-alert-warning .sky-alert-icon-theme-modern{color:#fbb034}.sky-theme-modern .sky-alert-danger .sky-alert-icon-theme-modern{color:#ef4044}.sky-theme-modern .sky-alert-icon-theme-modern{display:block}.sky-theme-modern .sky-alert-close-icon-theme-default{display:none}.sky-theme-modern .sky-alert-close-icon-theme-modern{display:inline}\n"], components: [{ type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }, { type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "skyLibResources": i1$2.SkyLibResourcesPipe } });
|
|
288
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyAlertComponent, decorators: [{
|
|
289
|
+
type: Component,
|
|
290
|
+
args: [{
|
|
291
|
+
selector: 'sky-alert',
|
|
292
|
+
styleUrls: ['./alert.component.scss'],
|
|
293
|
+
templateUrl: './alert.component.html',
|
|
294
|
+
}]
|
|
295
|
+
}], propDecorators: { alertType: [{
|
|
296
|
+
type: Input
|
|
297
|
+
}], closeable: [{
|
|
298
|
+
type: Input
|
|
299
|
+
}], closed: [{
|
|
300
|
+
type: Input
|
|
301
|
+
}], closedChange: [{
|
|
302
|
+
type: Output
|
|
303
|
+
}] } });
|
|
264
304
|
|
|
265
305
|
class SkyAlertModule {
|
|
266
306
|
}
|
|
267
|
-
SkyAlertModule
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
]
|
|
307
|
+
SkyAlertModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyAlertModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
308
|
+
SkyAlertModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyAlertModule, declarations: [SkyAlertComponent], imports: [CommonModule,
|
|
309
|
+
SkyI18nModule,
|
|
310
|
+
SkyIconModule,
|
|
311
|
+
SkyIndicatorsResourcesModule,
|
|
312
|
+
SkyThemeModule], exports: [SkyAlertComponent] });
|
|
313
|
+
SkyAlertModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyAlertModule, imports: [[
|
|
314
|
+
CommonModule,
|
|
315
|
+
SkyI18nModule,
|
|
316
|
+
SkyIconModule,
|
|
317
|
+
SkyIndicatorsResourcesModule,
|
|
318
|
+
SkyThemeModule,
|
|
319
|
+
]] });
|
|
320
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyAlertModule, decorators: [{
|
|
321
|
+
type: NgModule,
|
|
322
|
+
args: [{
|
|
323
|
+
declarations: [SkyAlertComponent],
|
|
324
|
+
imports: [
|
|
325
|
+
CommonModule,
|
|
326
|
+
SkyI18nModule,
|
|
327
|
+
SkyIconModule,
|
|
328
|
+
SkyIndicatorsResourcesModule,
|
|
329
|
+
SkyThemeModule,
|
|
330
|
+
],
|
|
331
|
+
exports: [SkyAlertComponent],
|
|
332
|
+
}]
|
|
333
|
+
}] });
|
|
284
334
|
|
|
285
335
|
class SkyChevronComponent {
|
|
286
336
|
constructor() {
|
|
@@ -294,37 +344,49 @@ class SkyChevronComponent {
|
|
|
294
344
|
this.directionChange.emit(this.direction);
|
|
295
345
|
}
|
|
296
346
|
}
|
|
297
|
-
SkyChevronComponent
|
|
298
|
-
{ type:
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
]
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
}
|
|
347
|
+
SkyChevronComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyChevronComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
348
|
+
SkyChevronComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyChevronComponent, selector: "sky-chevron", inputs: { direction: "direction", disabled: "disabled" }, outputs: { directionChange: "directionChange" }, ngImport: i0, template: "<button\n class=\"sky-chevron\"\n type=\"button\"\n [attr.aria-label]=\"\n (direction === 'down' ? 'skyux_chevron_expand' : 'skyux_chevron_collapse')\n | skyLibResources\n \"\n [disabled]=\"disabled\"\n [ngClass]=\"['sky-chevron-' + direction]\"\n [skyThemeClass]=\"{\n 'sky-btn sky-btn-icon-borderless': 'modern'\n }\"\n (click)=\"chevronClick($event)\"\n>\n <ng-container *skyThemeIf=\"'default'\">\n <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n </ng-container>\n <ng-container *skyThemeIf=\"'modern'\">\n <span class=\"chevron-glyph-container\">\n <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n </span>\n </ng-container>\n</button>\n\n<ng-template #icon>\n <i aria-hidden=\"true\" class=\"sky-chevron-part sky-chevron-left\"> </i>\n <i aria-hidden=\"true\" class=\"sky-chevron-part sky-chevron-right\"> </i>\n</ng-template>\n", styles: ["button{background:lightblue}.sky-chevron{border:none;background-color:transparent;flex-shrink:0;height:24px;margin:0;overflow:hidden;width:24px;cursor:pointer;position:relative;vertical-align:top}.sky-chevron:hover .sky-chevron-part{border-color:#979ba2}.sky-chevron-part{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-chevron-up .sky-chevron-left{left:7px;transform:rotate(-45deg)}.sky-chevron-up .sky-chevron-right{left:7px;transform:rotate(45deg)}.sky-chevron-down .sky-chevron-left{left:2px;transform:rotate(45deg)}.sky-chevron-down .sky-chevron-right{left:12px;transform:rotate(-45deg)}:host-context(.sky-theme-modern) .sky-chevron{height:26px;width:26px}:host-context(.sky-theme-modern) .sky-chevron-part{background:#686c73;border:none;height:2px;width:11px;top:13px}:host-context(.sky-theme-modern) .chevron-glyph-container{transform:scale(.68);display:inline-block;position:absolute;top:3.5px;left:4px}:host-context(.sky-theme-modern) .sky-chevron-left{border-radius:1px 0 0 1px}:host-context(.sky-theme-modern) .sky-chevron-right{border-radius:0 1px 1px 0}:host-context(.sky-theme-modern) .sky-chevron-left{left:4px}:host-context(.sky-theme-modern) .sky-chevron-right{left:10.5px}.sky-theme-modern .sky-chevron{height:26px;width:26px}.sky-theme-modern .sky-chevron-part{background:#686c73;border:none;height:2px;width:11px;top:13px}.sky-theme-modern .chevron-glyph-container{transform:scale(.68);display:inline-block;position:absolute;top:3.5px;left:4px}.sky-theme-modern .sky-chevron-left{border-radius:1px 0 0 1px}.sky-theme-modern .sky-chevron-right{border-radius:0 1px 1px 0}.sky-theme-modern .sky-chevron-left{left:4px}.sky-theme-modern .sky-chevron-right{left:10.5px}\n"], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.λ2, selector: "[skyThemeClass]", inputs: ["class", "skyThemeClass"] }, { type: i1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }, { type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "skyLibResources": i1$2.SkyLibResourcesPipe } });
|
|
349
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyChevronComponent, decorators: [{
|
|
350
|
+
type: Component,
|
|
351
|
+
args: [{
|
|
352
|
+
selector: 'sky-chevron',
|
|
353
|
+
styleUrls: ['./chevron.component.scss'],
|
|
354
|
+
templateUrl: './chevron.component.html',
|
|
355
|
+
}]
|
|
356
|
+
}], propDecorators: { directionChange: [{
|
|
357
|
+
type: Output
|
|
358
|
+
}], direction: [{
|
|
359
|
+
type: Input
|
|
360
|
+
}], disabled: [{
|
|
361
|
+
type: Input
|
|
362
|
+
}] } });
|
|
309
363
|
|
|
310
364
|
class SkyChevronModule {
|
|
311
365
|
}
|
|
312
|
-
SkyChevronModule
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
366
|
+
SkyChevronModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyChevronModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
367
|
+
SkyChevronModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyChevronModule, declarations: [SkyChevronComponent], imports: [CommonModule,
|
|
368
|
+
SkyI18nModule,
|
|
369
|
+
SkyIndicatorsResourcesModule,
|
|
370
|
+
SkyThemeModule], exports: [SkyChevronComponent] });
|
|
371
|
+
SkyChevronModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyChevronModule, imports: [[
|
|
372
|
+
CommonModule,
|
|
373
|
+
SkyI18nModule,
|
|
374
|
+
SkyIndicatorsResourcesModule,
|
|
375
|
+
SkyThemeModule,
|
|
376
|
+
]] });
|
|
377
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyChevronModule, decorators: [{
|
|
378
|
+
type: NgModule,
|
|
379
|
+
args: [{
|
|
380
|
+
declarations: [SkyChevronComponent],
|
|
381
|
+
imports: [
|
|
382
|
+
CommonModule,
|
|
383
|
+
SkyI18nModule,
|
|
384
|
+
SkyIndicatorsResourcesModule,
|
|
385
|
+
SkyThemeModule,
|
|
386
|
+
],
|
|
387
|
+
exports: [SkyChevronComponent],
|
|
388
|
+
}]
|
|
389
|
+
}] });
|
|
328
390
|
|
|
329
391
|
class SkyHelpInlineComponent {
|
|
330
392
|
constructor() {
|
|
@@ -337,36 +399,48 @@ class SkyHelpInlineComponent {
|
|
|
337
399
|
this.actionClick.emit();
|
|
338
400
|
}
|
|
339
401
|
}
|
|
340
|
-
SkyHelpInlineComponent
|
|
341
|
-
{ type:
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
}
|
|
402
|
+
SkyHelpInlineComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyHelpInlineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
403
|
+
SkyHelpInlineComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyHelpInlineComponent, selector: "sky-help-inline", outputs: { actionClick: "actionClick" }, ngImport: i0, template: "<button\n class=\"sky-help-inline\"\n type=\"button\"\n [attr.aria-label]=\"'skyux_help_inline_button_title' | skyLibResources\"\n (click)=\"onClick()\"\n>\n <sky-icon *skyThemeIf=\"'default'\" icon=\"info-circle\"> </sky-icon>\n <sky-icon-stack\n *skyThemeIf=\"'modern'\"\n size=\"xs\"\n [baseIcon]=\"{\n icon: 'circle-solid',\n iconType: 'skyux'\n }\"\n [topIcon]=\"{\n icon: 'help-i',\n iconType: 'skyux'\n }\"\n >\n </sky-icon-stack>\n</button>\n", styles: [".sky-help-inline{color:#0974a1;font-size:15px;background-color:transparent;border:none;display:inline-block}.sky-help-inline:hover{color:#065171;transition:color .15s;cursor:pointer}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-2x{font-size:16px}:host-context(.sky-theme-modern) .sky-help-inline ::ng-deep .fa-stack-1x{font-size:10px}.sky-theme-modern .sky-help-inline ::ng-deep .fa-stack-2x{font-size:16px}.sky-theme-modern .sky-help-inline ::ng-deep .fa-stack-1x{font-size:10px}\n"], components: [{ type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }], directives: [{ type: i1.λ3, selector: "[skyThemeIf]", inputs: ["skyThemeIf"] }], pipes: { "skyLibResources": i1$2.SkyLibResourcesPipe } });
|
|
404
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyHelpInlineComponent, decorators: [{
|
|
405
|
+
type: Component,
|
|
406
|
+
args: [{
|
|
407
|
+
selector: 'sky-help-inline',
|
|
408
|
+
templateUrl: './help-inline.component.html',
|
|
409
|
+
styleUrls: ['./help-inline.component.scss'],
|
|
410
|
+
}]
|
|
411
|
+
}], propDecorators: { actionClick: [{
|
|
412
|
+
type: Output
|
|
413
|
+
}] } });
|
|
350
414
|
|
|
351
415
|
class SkyHelpInlineModule {
|
|
352
416
|
}
|
|
353
|
-
SkyHelpInlineModule
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
]
|
|
417
|
+
SkyHelpInlineModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyHelpInlineModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
418
|
+
SkyHelpInlineModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyHelpInlineModule, declarations: [SkyHelpInlineComponent], imports: [CommonModule,
|
|
419
|
+
SkyI18nModule,
|
|
420
|
+
SkyIconModule,
|
|
421
|
+
SkyIndicatorsResourcesModule,
|
|
422
|
+
SkyThemeModule], exports: [SkyHelpInlineComponent] });
|
|
423
|
+
SkyHelpInlineModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyHelpInlineModule, imports: [[
|
|
424
|
+
CommonModule,
|
|
425
|
+
SkyI18nModule,
|
|
426
|
+
SkyIconModule,
|
|
427
|
+
SkyIndicatorsResourcesModule,
|
|
428
|
+
SkyThemeModule,
|
|
429
|
+
]] });
|
|
430
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyHelpInlineModule, decorators: [{
|
|
431
|
+
type: NgModule,
|
|
432
|
+
args: [{
|
|
433
|
+
declarations: [SkyHelpInlineComponent],
|
|
434
|
+
imports: [
|
|
435
|
+
CommonModule,
|
|
436
|
+
SkyI18nModule,
|
|
437
|
+
SkyIconModule,
|
|
438
|
+
SkyIndicatorsResourcesModule,
|
|
439
|
+
SkyThemeModule,
|
|
440
|
+
],
|
|
441
|
+
exports: [SkyHelpInlineComponent],
|
|
442
|
+
}]
|
|
443
|
+
}] });
|
|
370
444
|
|
|
371
445
|
/**
|
|
372
446
|
* Specifies a label to display in smaller, plain text under or beside the value.
|
|
@@ -374,12 +448,15 @@ SkyHelpInlineModule.decorators = [
|
|
|
374
448
|
*/
|
|
375
449
|
class SkyKeyInfoLabelComponent {
|
|
376
450
|
}
|
|
377
|
-
SkyKeyInfoLabelComponent
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
451
|
+
SkyKeyInfoLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyKeyInfoLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
452
|
+
SkyKeyInfoLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyKeyInfoLabelComponent, selector: "sky-key-info-label", ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
|
|
453
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyKeyInfoLabelComponent, decorators: [{
|
|
454
|
+
type: Component,
|
|
455
|
+
args: [{
|
|
456
|
+
selector: 'sky-key-info-label',
|
|
457
|
+
template: '<ng-content></ng-content>',
|
|
458
|
+
}]
|
|
459
|
+
}] });
|
|
383
460
|
|
|
384
461
|
/**
|
|
385
462
|
* Specifies a value to display in larger, bold text.
|
|
@@ -387,12 +464,15 @@ SkyKeyInfoLabelComponent.decorators = [
|
|
|
387
464
|
*/
|
|
388
465
|
class SkyKeyInfoValueComponent {
|
|
389
466
|
}
|
|
390
|
-
SkyKeyInfoValueComponent
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
467
|
+
SkyKeyInfoValueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyKeyInfoValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
468
|
+
SkyKeyInfoValueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyKeyInfoValueComponent, selector: "sky-key-info-value", ngImport: i0, template: '<ng-content></ng-content>', isInline: true });
|
|
469
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyKeyInfoValueComponent, decorators: [{
|
|
470
|
+
type: Component,
|
|
471
|
+
args: [{
|
|
472
|
+
selector: 'sky-key-info-value',
|
|
473
|
+
template: '<ng-content></ng-content>',
|
|
474
|
+
}]
|
|
475
|
+
}] });
|
|
396
476
|
|
|
397
477
|
class SkyKeyInfoComponent {
|
|
398
478
|
constructor() {
|
|
@@ -404,36 +484,44 @@ class SkyKeyInfoComponent {
|
|
|
404
484
|
this.layout = 'vertical';
|
|
405
485
|
}
|
|
406
486
|
}
|
|
407
|
-
SkyKeyInfoComponent
|
|
408
|
-
{ type:
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
}
|
|
487
|
+
SkyKeyInfoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyKeyInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
488
|
+
SkyKeyInfoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyKeyInfoComponent, selector: "sky-key-info", inputs: { 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-headline\">\n <ng-content select=\"sky-key-info-value\"> </ng-content>\n </div>\n <div class=\"sky-key-info-label sky-field-label sky-font-data-label\">\n <ng-content select=\"sky-key-info-label\"> </ng-content>\n </div>\n</div>\n", styles: [".sky-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 5px}:host-context(.sky-theme-modern) .sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}.sky-theme-modern .sky-key-info.sky-key-info-horizontal .sky-key-info-label{padding:0 0 0 5px}\n"], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
489
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyKeyInfoComponent, decorators: [{
|
|
490
|
+
type: Component,
|
|
491
|
+
args: [{
|
|
492
|
+
selector: 'sky-key-info',
|
|
493
|
+
templateUrl: './key-info.component.html',
|
|
494
|
+
styleUrls: ['./key-info.component.scss'],
|
|
495
|
+
}]
|
|
496
|
+
}], propDecorators: { layout: [{
|
|
497
|
+
type: Input
|
|
498
|
+
}] } });
|
|
417
499
|
|
|
418
500
|
class SkyKeyInfoModule {
|
|
419
501
|
}
|
|
420
|
-
SkyKeyInfoModule
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
502
|
+
SkyKeyInfoModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyKeyInfoModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
503
|
+
SkyKeyInfoModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyKeyInfoModule, declarations: [SkyKeyInfoComponent,
|
|
504
|
+
SkyKeyInfoLabelComponent,
|
|
505
|
+
SkyKeyInfoValueComponent], imports: [CommonModule], exports: [SkyKeyInfoComponent,
|
|
506
|
+
SkyKeyInfoLabelComponent,
|
|
507
|
+
SkyKeyInfoValueComponent] });
|
|
508
|
+
SkyKeyInfoModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyKeyInfoModule, imports: [[CommonModule]] });
|
|
509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyKeyInfoModule, decorators: [{
|
|
510
|
+
type: NgModule,
|
|
511
|
+
args: [{
|
|
512
|
+
declarations: [
|
|
513
|
+
SkyKeyInfoComponent,
|
|
514
|
+
SkyKeyInfoLabelComponent,
|
|
515
|
+
SkyKeyInfoValueComponent,
|
|
516
|
+
],
|
|
517
|
+
imports: [CommonModule],
|
|
518
|
+
exports: [
|
|
519
|
+
SkyKeyInfoComponent,
|
|
520
|
+
SkyKeyInfoLabelComponent,
|
|
521
|
+
SkyKeyInfoValueComponent,
|
|
522
|
+
],
|
|
523
|
+
}]
|
|
524
|
+
}] });
|
|
437
525
|
|
|
438
526
|
class SkyLabelComponent {
|
|
439
527
|
/**
|
|
@@ -454,33 +542,32 @@ class SkyLabelComponent {
|
|
|
454
542
|
this.topIcon = indicatorIcon.modernThemeTopIcon;
|
|
455
543
|
}
|
|
456
544
|
}
|
|
457
|
-
SkyLabelComponent
|
|
458
|
-
{ type:
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
}
|
|
545
|
+
SkyLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
546
|
+
SkyLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyLabelComponent, selector: "sky-label", inputs: { labelType: "labelType" }, ngImport: i0, template: "<span class=\"sky-label\" [ngClass]=\"'sky-label-' + labelType\">\n <span class=\"sky-label-icon-theme-default\">\n <sky-icon [icon]=\"icon\"></sky-icon>\n </span>\n <span class=\"sky-label-icon-theme-modern\">\n <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n </sky-icon-stack>\n </span>\n <span class=\"sky-label-text\">\n <ng-content></ng-content>\n </span>\n</span>\n", styles: [".sky-label{color:#212327;display:inline;border-radius:10rem;font-weight:400;line-height:2.2;margin:0 3px;padding:.3em .6em;white-space:nowrap}.sky-label-success{background-color:#b7da9b}.sky-label-info{background-color:#81d4f7}.sky-label-warning{background-color:#ffd597}.sky-label-danger{background-color:#f7a08f}.sky-label-text{display:inline-block;padding-left:5px}.sky-label-icon-theme-modern{display:none}:host-context(.sky-theme-modern) .sky-label{align-items:center;display:inline-flex;line-height:1}:host-context(.sky-theme-modern) .sky-label.sky-label-info{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-label.sky-label-info,:host-context(.sky-theme-modern) .sky-label.sky-label-success{padding:4px 15px 4px 6px}:host-context(.sky-theme-modern) .sky-label.sky-label-warning,:host-context(.sky-theme-modern) .sky-label.sky-label-danger{padding:4px 15px 4px 9px}:host-context(.sky-theme-modern) .sky-label-icon-theme-default{display:none}:host-context(.sky-theme-modern) .sky-label-icon-theme-modern{display:block}:host-context(.sky-theme-modern) .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}:host-context(.sky-theme-modern) .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}:host-context(.sky-theme-modern) .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}:host-context(.sky-theme-modern) .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}.sky-theme-modern .sky-label{align-items:center;display:inline-flex;line-height:1}.sky-theme-modern .sky-label.sky-label-info{background-color:#c1e8fb}.sky-theme-modern .sky-label.sky-label-info,.sky-theme-modern .sky-label.sky-label-success{padding:4px 15px 4px 6px}.sky-theme-modern .sky-label.sky-label-warning,.sky-theme-modern .sky-label.sky-label-danger{padding:4px 15px 4px 9px}.sky-theme-modern .sky-label-icon-theme-default{display:none}.sky-theme-modern .sky-label-icon-theme-modern{display:block}.sky-theme-modern .sky-label-info .sky-label-icon-theme-modern{color:#00b4f1}.sky-theme-modern .sky-label-success .sky-label-icon-theme-modern{color:#72bf44}.sky-theme-modern .sky-label-warning .sky-label-icon-theme-modern{color:#fbb034}.sky-theme-modern .sky-label-danger .sky-label-icon-theme-modern{color:#ef4044}\n"], components: [{ type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyLabelComponent, decorators: [{
|
|
548
|
+
type: Component,
|
|
549
|
+
args: [{
|
|
550
|
+
selector: 'sky-label',
|
|
551
|
+
templateUrl: './label.component.html',
|
|
552
|
+
styleUrls: ['./label.component.scss'],
|
|
553
|
+
}]
|
|
554
|
+
}], propDecorators: { labelType: [{
|
|
555
|
+
type: Input
|
|
556
|
+
}] } });
|
|
467
557
|
|
|
468
558
|
class SkyLabelModule {
|
|
469
559
|
}
|
|
470
|
-
SkyLabelModule
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
SkyIconModule
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
]
|
|
482
|
-
},] }
|
|
483
|
-
];
|
|
560
|
+
SkyLabelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyLabelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
561
|
+
SkyLabelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyLabelModule, declarations: [SkyLabelComponent], imports: [CommonModule, SkyIconModule], exports: [SkyLabelComponent] });
|
|
562
|
+
SkyLabelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyLabelModule, imports: [[CommonModule, SkyIconModule]] });
|
|
563
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyLabelModule, decorators: [{
|
|
564
|
+
type: NgModule,
|
|
565
|
+
args: [{
|
|
566
|
+
declarations: [SkyLabelComponent],
|
|
567
|
+
imports: [CommonModule, SkyIconModule],
|
|
568
|
+
exports: [SkyLabelComponent],
|
|
569
|
+
}]
|
|
570
|
+
}] });
|
|
484
571
|
|
|
485
572
|
const INDICATOR_TYPE_DEFAULT = 'warning';
|
|
486
573
|
class SkyStatusIndicatorComponent {
|
|
@@ -540,7 +627,10 @@ class SkyStatusIndicatorComponent {
|
|
|
540
627
|
this.descriptionComputed = this.customDescription;
|
|
541
628
|
break;
|
|
542
629
|
default:
|
|
543
|
-
this.resources
|
|
630
|
+
this.resources
|
|
631
|
+
.getString('skyux_status_indicator_sr_' +
|
|
632
|
+
this.descriptionType.replace(/-/g, '_'))
|
|
633
|
+
.subscribe((value) => {
|
|
544
634
|
this.descriptionComputed = value;
|
|
545
635
|
this.changeDetector.markForCheck();
|
|
546
636
|
});
|
|
@@ -552,42 +642,50 @@ class SkyStatusIndicatorComponent {
|
|
|
552
642
|
}
|
|
553
643
|
}
|
|
554
644
|
}
|
|
555
|
-
SkyStatusIndicatorComponent
|
|
556
|
-
{ type:
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
]
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
};
|
|
645
|
+
SkyStatusIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyStatusIndicatorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
|
|
646
|
+
SkyStatusIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyStatusIndicatorComponent, selector: "sky-status-indicator", inputs: { indicatorType: "indicatorType", descriptionType: "descriptionType", customDescription: "customDescription" }, ngImport: i0, template: "<div *ngIf=\"descriptionType\" class=\"sky-status-indicator\">\n <div\n aria-hidden=\"true\"\n class=\"sky-margin-inline-xs sky-status-indicator-icon\"\n [ngClass]=\"'sky-status-indicator-icon-' + indicatorType\"\n >\n <span class=\"sky-status-indicator-icon-default\">\n <sky-icon [icon]=\"icon\"></sky-icon>\n </span>\n <span class=\"sky-status-indicator-icon-modern\">\n <sky-icon-stack size=\"xs\" [baseIcon]=\"baseIcon\" [topIcon]=\"topIcon\">\n </sky-icon-stack>\n </span>\n </div>\n <div class=\"sky-status-indicator-message-wrapper\">\n <span *ngIf=\"descriptionComputed\" class=\"sky-screen-reader-only\">\n {{ descriptionComputed }}\n </span>\n <span class=\"sky-status-indicator-message\">\n <ng-content></ng-content>\n </span>\n </div>\n</div>\n", styles: [".sky-status-indicator{align-items:baseline;display:flex}.sky-status-indicator-icon{flex-shrink:1}.sky-status-indicator-icon-modern{display:none}.sky-status-indicator-icon-info{color:#00b4f1}.sky-status-indicator-icon-success{color:#72bf44}.sky-status-indicator-icon-warning{color:#fbb034}.sky-status-indicator-icon-danger{color:#ef4044}:host-context(.sky-theme-modern) .sky-status-indicator-icon-default{display:none}:host-context(.sky-theme-modern) .sky-status-indicator-icon-modern{display:inline}.sky-theme-modern .sky-status-indicator-icon-default{display:none}.sky-theme-modern .sky-status-indicator-icon-modern{display:inline}\n"], components: [{ type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }, { type: SkyIconStackComponent, selector: "sky-icon-stack", inputs: ["size", "baseIcon", "topIcon"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
647
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyStatusIndicatorComponent, decorators: [{
|
|
648
|
+
type: Component,
|
|
649
|
+
args: [{
|
|
650
|
+
selector: 'sky-status-indicator',
|
|
651
|
+
templateUrl: './status-indicator.component.html',
|
|
652
|
+
styleUrls: ['./status-indicator.component.scss'],
|
|
653
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
654
|
+
}]
|
|
655
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$2.SkyLibResourcesService }]; }, propDecorators: { indicatorType: [{
|
|
656
|
+
type: Input
|
|
657
|
+
}], descriptionType: [{
|
|
658
|
+
type: Input
|
|
659
|
+
}], customDescription: [{
|
|
660
|
+
type: Input
|
|
661
|
+
}] } });
|
|
572
662
|
|
|
573
663
|
class SkyStatusIndicatorModule {
|
|
574
664
|
}
|
|
575
|
-
SkyStatusIndicatorModule
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
665
|
+
SkyStatusIndicatorModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyStatusIndicatorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
666
|
+
SkyStatusIndicatorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyStatusIndicatorModule, declarations: [SkyStatusIndicatorComponent], imports: [CommonModule,
|
|
667
|
+
SkyI18nModule,
|
|
668
|
+
SkyIconModule,
|
|
669
|
+
SkyIndicatorsResourcesModule], exports: [SkyStatusIndicatorComponent] });
|
|
670
|
+
SkyStatusIndicatorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyStatusIndicatorModule, imports: [[
|
|
671
|
+
CommonModule,
|
|
672
|
+
SkyI18nModule,
|
|
673
|
+
SkyIconModule,
|
|
674
|
+
SkyIndicatorsResourcesModule,
|
|
675
|
+
]] });
|
|
676
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyStatusIndicatorModule, decorators: [{
|
|
677
|
+
type: NgModule,
|
|
678
|
+
args: [{
|
|
679
|
+
declarations: [SkyStatusIndicatorComponent],
|
|
680
|
+
imports: [
|
|
681
|
+
CommonModule,
|
|
682
|
+
SkyI18nModule,
|
|
683
|
+
SkyIconModule,
|
|
684
|
+
SkyIndicatorsResourcesModule,
|
|
685
|
+
],
|
|
686
|
+
exports: [SkyStatusIndicatorComponent],
|
|
687
|
+
}]
|
|
688
|
+
}] });
|
|
591
689
|
|
|
592
690
|
const className = 'sky-highlight-mark';
|
|
593
691
|
// Need to add the following to classes which contain static methods.
|
|
@@ -649,7 +747,11 @@ class SkyTextHighlightDirective {
|
|
|
649
747
|
observeDom() {
|
|
650
748
|
/* istanbul ignore else */
|
|
651
749
|
if (this.observer) {
|
|
652
|
-
const config = {
|
|
750
|
+
const config = {
|
|
751
|
+
attributes: false,
|
|
752
|
+
childList: true,
|
|
753
|
+
characterData: true,
|
|
754
|
+
};
|
|
653
755
|
this.observer.observe(this.el.nativeElement, config);
|
|
654
756
|
}
|
|
655
757
|
}
|
|
@@ -707,34 +809,30 @@ class SkyTextHighlightDirective {
|
|
|
707
809
|
}
|
|
708
810
|
}
|
|
709
811
|
}
|
|
710
|
-
SkyTextHighlightDirective
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
skyHighlight: [{ type: Input }]
|
|
721
|
-
};
|
|
812
|
+
SkyTextHighlightDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTextHighlightDirective, deps: [{ token: i0.ElementRef }, { token: i1$3.MutationObserverService }], target: i0.ɵɵFactoryTarget.Directive });
|
|
813
|
+
SkyTextHighlightDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: SkyTextHighlightDirective, selector: "[skyHighlight]", inputs: { skyHighlight: "skyHighlight" }, usesOnChanges: true, ngImport: i0 });
|
|
814
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTextHighlightDirective, decorators: [{
|
|
815
|
+
type: Directive,
|
|
816
|
+
args: [{
|
|
817
|
+
selector: '[skyHighlight]',
|
|
818
|
+
}]
|
|
819
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$3.MutationObserverService }]; }, propDecorators: { skyHighlight: [{
|
|
820
|
+
type: Input
|
|
821
|
+
}] } });
|
|
722
822
|
|
|
723
823
|
class SkyTextHighlightModule {
|
|
724
824
|
}
|
|
725
|
-
SkyTextHighlightModule
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
SkyTextHighlightDirective
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
},] }
|
|
737
|
-
];
|
|
825
|
+
SkyTextHighlightModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTextHighlightModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
826
|
+
SkyTextHighlightModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTextHighlightModule, declarations: [SkyTextHighlightDirective], exports: [SkyTextHighlightDirective] });
|
|
827
|
+
SkyTextHighlightModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTextHighlightModule, providers: [MutationObserverService] });
|
|
828
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTextHighlightModule, decorators: [{
|
|
829
|
+
type: NgModule,
|
|
830
|
+
args: [{
|
|
831
|
+
declarations: [SkyTextHighlightDirective],
|
|
832
|
+
exports: [SkyTextHighlightDirective],
|
|
833
|
+
providers: [MutationObserverService],
|
|
834
|
+
}]
|
|
835
|
+
}] });
|
|
738
836
|
|
|
739
837
|
class SkyTokenComponent {
|
|
740
838
|
constructor(elementRef, resourcesService) {
|
|
@@ -770,7 +868,7 @@ class SkyTokenComponent {
|
|
|
770
868
|
this._ariaLabel = value;
|
|
771
869
|
}
|
|
772
870
|
get ariaLabel() {
|
|
773
|
-
return this._ariaLabel || this.getString('skyux_tokens_dismiss_button_title');
|
|
871
|
+
return (this._ariaLabel || this.getString('skyux_tokens_dismiss_button_title'));
|
|
774
872
|
}
|
|
775
873
|
/**
|
|
776
874
|
* Indicates whether users can remove the token from the list by selecting the close button
|
|
@@ -792,13 +890,13 @@ class SkyTokenComponent {
|
|
|
792
890
|
this._focusable = value;
|
|
793
891
|
}
|
|
794
892
|
get focusable() {
|
|
795
|
-
return
|
|
893
|
+
return this._focusable !== false;
|
|
796
894
|
}
|
|
797
895
|
/**
|
|
798
896
|
* @internal
|
|
799
897
|
*/
|
|
800
898
|
get tabIndex() {
|
|
801
|
-
return
|
|
899
|
+
return this.focusable ? 0 : -1;
|
|
802
900
|
}
|
|
803
901
|
dismissToken(event) {
|
|
804
902
|
event.stopPropagation();
|
|
@@ -812,26 +910,29 @@ class SkyTokenComponent {
|
|
|
812
910
|
return this.resourcesService.getStringForLocale({ locale: 'en-US' }, key);
|
|
813
911
|
}
|
|
814
912
|
}
|
|
815
|
-
SkyTokenComponent
|
|
816
|
-
{ type:
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
]
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
913
|
+
SkyTokenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTokenComponent, deps: [{ token: i0.ElementRef }, { token: i1$2.SkyLibResourcesService }], target: i0.ɵɵFactoryTarget.Component });
|
|
914
|
+
SkyTokenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyTokenComponent, selector: "sky-token", inputs: { disabled: "disabled", ariaLabel: "ariaLabel", dismissible: "dismissible", focusable: "focusable" }, outputs: { dismiss: "dismiss", tokenFocus: "tokenFocus" }, ngImport: i0, template: "<div\n class=\"sky-token sky-btn sky-btn-default\"\n role=\"button\"\n [attr.aria-disabled]=\"disabled\"\n [attr.tabindex]=\"tabIndex\"\n [ngClass]=\"{\n 'sky-btn-disabled': disabled,\n 'sky-token-dismissable': dismissible,\n 'sky-token-active': tokenActive && !closeActive\n }\"\n (document:mouseup)=\"tokenActive = false\"\n (focus)=\"tokenFocus.emit()\"\n (mousedown)=\"tokenActive = true\"\n>\n <ng-content> </ng-content>\n <button\n *ngIf=\"dismissible\"\n class=\"sky-btn sky-token-btn-close\"\n type=\"button\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.tabindex]=\"tabIndex\"\n [attr.title]=\"ariaLabel\"\n [disabled]=\"disabled\"\n [ngClass]=\"{\n 'sky-token-btn-close-active': closeActive\n }\"\n (click)=\"dismissToken($event)\"\n (document:mouseup)=\"closeActive = false\"\n (mousedown)=\"closeActive = true\"\n >\n <sky-icon class=\"sky-token-btn-close-icon-default\" icon=\"times\"> </sky-icon>\n <sky-icon\n class=\"sky-token-btn-close-icon-modern\"\n icon=\"close\"\n iconType=\"skyux\"\n >\n </sky-icon>\n </button>\n</div>\n", styles: [".sky-token{background-color:#c1e8fb;border:1px solid #00b4f1;overflow:hidden;padding:2px 8px;display:inline-block;-webkit-user-select:none;user-select:none}.sky-token:hover,.sky-token:focus{background-color:#91d6f8;border-color:#008ebe;cursor:pointer}.sky-token:focus{box-shadow:0 0 8px #00b4f199;border:1px solid #00b4f1;outline:none}.sky-btn-disabled{cursor:default;-webkit-user-select:none;user-select:none}.sky-token-btn-close{background:transparent;padding:0;border:0;margin-left:2px;opacity:.9}.sky-token-btn-close:hover,.sky-token-btn-close:focus{opacity:1}.sky-token-btn-close-icon-modern{display:none}:host-context(.sky-theme-modern) .sky-token{align-items:center;display:inline-flex;padding:1px 5px;font-size:14px}:host-context(.sky-theme-modern) .sky-token.sky-btn-disabled{color:#212327}:host-context(.sky-theme-modern) .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7}:host-context(.sky-theme-modern) .sky-token.sky-token-dismissable{padding-right:1px}:host-context(.sky-theme-modern) .sky-token:hover:not(:active){border:none;box-shadow:inset 0 0 0 1px #1870b8}:host-context(.sky-theme-modern) .sky-token.sky-token-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-token:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-token:focus,:host-context(.sky-theme-modern) .sky-token:hover{background-color:#c1e8fb}:host-context(.sky-theme-modern) .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px}:host-context(.sky-theme-modern) .sky-token-btn-close:hover{border:none;box-shadow:inset 0 0 0 1px transparent}:host-context(.sky-theme-modern) .sky-token-btn-close.sky-token-btn-close-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}:host-context(.sky-theme-modern) .sky-token-btn-close:focus{outline:none}:host-context(.sky-theme-modern) .sky-token-btn-close:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}:host-context(.sky-theme-modern) .sky-token-btn-close-icon-default{display:none}:host-context(.sky-theme-modern) .sky-token-btn-close-icon-modern{display:inline-block;width:100%}.sky-theme-modern .sky-token{align-items:center;display:inline-flex;padding:1px 5px;font-size:14px}.sky-theme-modern .sky-token.sky-btn-disabled{color:#212327}.sky-theme-modern .sky-token:not(.sky-btn-disabled){border:none;box-shadow:inset 0 0 0 1px #81d4f7}.sky-theme-modern .sky-token.sky-token-dismissable{padding-right:1px}.sky-theme-modern .sky-token:hover:not(:active){border:none;box-shadow:inset 0 0 0 1px #1870b8}.sky-theme-modern .sky-token.sky-token-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-token:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token:focus,.sky-theme-modern .sky-token:hover{background-color:#c1e8fb}.sky-theme-modern .sky-token-btn-close{align-items:center;border-radius:5px;display:flex;height:20px;margin-left:5px;width:20px}.sky-theme-modern .sky-token-btn-close:hover{border:none;box-shadow:inset 0 0 0 1px transparent}.sky-theme-modern .sky-token-btn-close.sky-token-btn-close-active{border:none;box-shadow:inset 0 0 0 2px #1870b8}.sky-theme-modern .sky-token-btn-close:focus{outline:none}.sky-theme-modern .sky-token-btn-close:focus:not(:active){border:none;box-shadow:inset 0 0 0 2px #1870b8,0 1px 3px #0000004d}.sky-theme-modern .sky-token-btn-close-icon-default{display:none}.sky-theme-modern .sky-token-btn-close-icon-modern{display:inline-block;width:100%}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token{background-color:#c1e8fb}:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token,:host-context(.sky-theme-modern.sky-theme-mode-dark) .sky-token-btn-close{color:#212327}.sky-theme-modern.sky-theme-mode-dark .sky-token{background-color:#c1e8fb}.sky-theme-modern.sky-theme-mode-dark .sky-token,.sky-theme-modern.sky-theme-mode-dark .sky-token-btn-close{color:#212327}\n"], components: [{ type: SkyIconComponent, selector: "sky-icon", inputs: ["icon", "iconType", "size", "fixedWidth", "variant"] }], directives: [{ type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
915
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTokenComponent, decorators: [{
|
|
916
|
+
type: Component,
|
|
917
|
+
args: [{
|
|
918
|
+
selector: 'sky-token',
|
|
919
|
+
templateUrl: './token.component.html',
|
|
920
|
+
styleUrls: ['./token.component.scss'],
|
|
921
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
922
|
+
}]
|
|
923
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.SkyLibResourcesService }]; }, propDecorators: { disabled: [{
|
|
924
|
+
type: Input
|
|
925
|
+
}], ariaLabel: [{
|
|
926
|
+
type: Input
|
|
927
|
+
}], dismissible: [{
|
|
928
|
+
type: Input
|
|
929
|
+
}], focusable: [{
|
|
930
|
+
type: Input
|
|
931
|
+
}], dismiss: [{
|
|
932
|
+
type: Output
|
|
933
|
+
}], tokenFocus: [{
|
|
934
|
+
type: Output
|
|
935
|
+
}] } });
|
|
835
936
|
|
|
836
937
|
var SkyTokensMessageType;
|
|
837
938
|
(function (SkyTokensMessageType) {
|
|
@@ -911,7 +1012,7 @@ class SkyTokensComponent {
|
|
|
911
1012
|
this._dismissible = value;
|
|
912
1013
|
}
|
|
913
1014
|
get dismissible() {
|
|
914
|
-
return
|
|
1015
|
+
return this._dismissible !== false;
|
|
915
1016
|
}
|
|
916
1017
|
/**
|
|
917
1018
|
* Specifies the token property to display for each item in the tokens list.
|
|
@@ -933,7 +1034,7 @@ class SkyTokensComponent {
|
|
|
933
1034
|
this._focusable = value;
|
|
934
1035
|
}
|
|
935
1036
|
get focusable() {
|
|
936
|
-
return
|
|
1037
|
+
return this._focusable !== false;
|
|
937
1038
|
}
|
|
938
1039
|
/**
|
|
939
1040
|
* Specifies an array of tokens to include in the list.
|
|
@@ -989,12 +1090,16 @@ class SkyTokensComponent {
|
|
|
989
1090
|
switch (event.key) {
|
|
990
1091
|
case 'Left':
|
|
991
1092
|
case 'ArrowLeft':
|
|
992
|
-
this.messageStream.next({
|
|
1093
|
+
this.messageStream.next({
|
|
1094
|
+
type: SkyTokensMessageType.FocusPreviousToken,
|
|
1095
|
+
});
|
|
993
1096
|
event.preventDefault();
|
|
994
1097
|
break;
|
|
995
1098
|
case 'Right':
|
|
996
1099
|
case 'ArrowRight':
|
|
997
|
-
this.messageStream.next({
|
|
1100
|
+
this.messageStream.next({
|
|
1101
|
+
type: SkyTokensMessageType.FocusNextToken,
|
|
1102
|
+
});
|
|
998
1103
|
event.preventDefault();
|
|
999
1104
|
break;
|
|
1000
1105
|
}
|
|
@@ -1006,7 +1111,7 @@ class SkyTokensComponent {
|
|
|
1006
1111
|
}
|
|
1007
1112
|
}
|
|
1008
1113
|
removeToken(token) {
|
|
1009
|
-
this.tokens = this.tokens.filter(t => t !== token);
|
|
1114
|
+
this.tokens = this.tokens.filter((t) => t !== token);
|
|
1010
1115
|
this.changeDetector.detectChanges();
|
|
1011
1116
|
}
|
|
1012
1117
|
focusPreviousToken() {
|
|
@@ -1022,9 +1127,8 @@ class SkyTokensComponent {
|
|
|
1022
1127
|
this.focusActiveToken();
|
|
1023
1128
|
}
|
|
1024
1129
|
focusActiveToken() {
|
|
1025
|
-
const tokenComponent = this.tokenComponents
|
|
1026
|
-
.
|
|
1027
|
-
return (this.activeIndex === i);
|
|
1130
|
+
const tokenComponent = this.tokenComponents.find((_comp, i) => {
|
|
1131
|
+
return this.activeIndex === i;
|
|
1028
1132
|
});
|
|
1029
1133
|
if (tokenComponent) {
|
|
1030
1134
|
tokenComponent.focusElement();
|
|
@@ -1067,79 +1171,114 @@ class SkyTokensComponent {
|
|
|
1067
1171
|
}
|
|
1068
1172
|
notifyTokenSelected(token) {
|
|
1069
1173
|
this.tokenSelected.emit({
|
|
1070
|
-
token
|
|
1174
|
+
token,
|
|
1071
1175
|
});
|
|
1072
1176
|
}
|
|
1073
1177
|
}
|
|
1074
|
-
SkyTokensComponent
|
|
1075
|
-
{ type:
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1178
|
+
SkyTokensComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTokensComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1179
|
+
SkyTokensComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyTokensComponent, selector: "sky-tokens", inputs: { disabled: "disabled", dismissible: "dismissible", displayWith: "displayWith", trackWith: "trackWith", focusable: "focusable", tokens: "tokens", messageStream: "messageStream" }, outputs: { focusIndexOverRange: "focusIndexOverRange", focusIndexUnderRange: "focusIndexUnderRange", tokenSelected: "tokenSelected", tokensChange: "tokensChange" }, viewQueries: [{ propertyName: "tokenComponents", predicate: SkyTokenComponent, descendants: true }], ngImport: i0, template: "<div\n *ngIf=\"tokens\"\n class=\"sky-tokens\"\n [@blockAnimationOnLoad]\n [attr.role]=\"tokens && tokens.length ? 'list' : null\"\n>\n <sky-token\n *ngFor=\"let token of tokens; let i = index; trackBy: trackTokenFn\"\n role=\"listitem\"\n [@.disabled]=\"!trackWith\"\n [@dismiss]\n [disabled]=\"disabled\"\n [dismissible]=\"dismissible\"\n [focusable]=\"focusable\"\n (dismiss)=\"removeToken(token)\"\n (click)=\"onTokenClick(token)\"\n (keydown)=\"onTokenKeyDown($event)\"\n (keyup.enter)=\"selectToken(token); $event.preventDefault()\"\n (tokenFocus)=\"activeIndex = i\"\n >\n {{ token.value[displayWith] }}\n </sky-token>\n <div class=\"sky-tokens-content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.sky-tokens{display:flex;flex-wrap:wrap;align-items:baseline;margin:-2px}.sky-tokens .sky-tokens-content,.sky-tokens ::ng-deep sky-token{flex:0 0 auto;display:inline-flex;padding:2px}.sky-tokens .sky-tokens-content{flex-grow:1;flex-basis:0px}.sky-tokens .sky-tokens-content:before{content:\"\\200b\"}\n"], components: [{ type: SkyTokenComponent, selector: "sky-token", inputs: ["disabled", "ariaLabel", "dismissible", "focusable"], outputs: ["dismiss", "tokenFocus"] }], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [
|
|
1180
|
+
trigger('blockAnimationOnLoad', [transition(':enter', [])]),
|
|
1181
|
+
trigger('dismiss', [
|
|
1182
|
+
transition(':enter', [
|
|
1183
|
+
style({
|
|
1184
|
+
opacity: 0,
|
|
1185
|
+
width: 0,
|
|
1186
|
+
}),
|
|
1187
|
+
animate('150ms ease-in', style({
|
|
1188
|
+
opacity: 1,
|
|
1189
|
+
width: '*',
|
|
1190
|
+
})),
|
|
1191
|
+
]),
|
|
1192
|
+
transition(':leave', [
|
|
1193
|
+
animate('150ms ease-in', style({
|
|
1194
|
+
opacity: 0,
|
|
1195
|
+
width: 0,
|
|
1196
|
+
})),
|
|
1197
|
+
]),
|
|
1198
|
+
]),
|
|
1199
|
+
], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1200
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTokensComponent, decorators: [{
|
|
1201
|
+
type: Component,
|
|
1202
|
+
args: [{
|
|
1203
|
+
selector: 'sky-tokens',
|
|
1204
|
+
templateUrl: './tokens.component.html',
|
|
1205
|
+
styleUrls: ['./tokens.component.scss'],
|
|
1206
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1207
|
+
animations: [
|
|
1208
|
+
trigger('blockAnimationOnLoad', [transition(':enter', [])]),
|
|
1209
|
+
trigger('dismiss', [
|
|
1210
|
+
transition(':enter', [
|
|
1211
|
+
style({
|
|
1212
|
+
opacity: 0,
|
|
1213
|
+
width: 0,
|
|
1214
|
+
}),
|
|
1215
|
+
animate('150ms ease-in', style({
|
|
1216
|
+
opacity: 1,
|
|
1217
|
+
width: '*',
|
|
1218
|
+
})),
|
|
1219
|
+
]),
|
|
1220
|
+
transition(':leave', [
|
|
1221
|
+
animate('150ms ease-in', style({
|
|
1222
|
+
opacity: 0,
|
|
1223
|
+
width: 0,
|
|
1224
|
+
})),
|
|
1225
|
+
]),
|
|
1093
1226
|
]),
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
]
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
};
|
|
1227
|
+
],
|
|
1228
|
+
}]
|
|
1229
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
1230
|
+
type: Input
|
|
1231
|
+
}], dismissible: [{
|
|
1232
|
+
type: Input
|
|
1233
|
+
}], displayWith: [{
|
|
1234
|
+
type: Input
|
|
1235
|
+
}], trackWith: [{
|
|
1236
|
+
type: Input
|
|
1237
|
+
}], focusable: [{
|
|
1238
|
+
type: Input
|
|
1239
|
+
}], tokens: [{
|
|
1240
|
+
type: Input
|
|
1241
|
+
}], messageStream: [{
|
|
1242
|
+
type: Input
|
|
1243
|
+
}], focusIndexOverRange: [{
|
|
1244
|
+
type: Output
|
|
1245
|
+
}], focusIndexUnderRange: [{
|
|
1246
|
+
type: Output
|
|
1247
|
+
}], tokenSelected: [{
|
|
1248
|
+
type: Output
|
|
1249
|
+
}], tokensChange: [{
|
|
1250
|
+
type: Output
|
|
1251
|
+
}], tokenComponents: [{
|
|
1252
|
+
type: ViewChildren,
|
|
1253
|
+
args: [SkyTokenComponent]
|
|
1254
|
+
}] } });
|
|
1122
1255
|
|
|
1123
1256
|
class SkyTokensModule {
|
|
1124
1257
|
}
|
|
1125
|
-
SkyTokensModule
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
SkyTokensComponent
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1258
|
+
SkyTokensModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTokensModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1259
|
+
SkyTokensModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTokensModule, declarations: [SkyTokenComponent, SkyTokensComponent], imports: [CommonModule,
|
|
1260
|
+
SkyI18nModule,
|
|
1261
|
+
SkyIconModule,
|
|
1262
|
+
SkyIndicatorsResourcesModule], exports: [SkyTokenComponent, SkyTokensComponent] });
|
|
1263
|
+
SkyTokensModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTokensModule, imports: [[
|
|
1264
|
+
CommonModule,
|
|
1265
|
+
SkyI18nModule,
|
|
1266
|
+
SkyIconModule,
|
|
1267
|
+
SkyIndicatorsResourcesModule,
|
|
1268
|
+
]] });
|
|
1269
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyTokensModule, decorators: [{
|
|
1270
|
+
type: NgModule,
|
|
1271
|
+
args: [{
|
|
1272
|
+
declarations: [SkyTokenComponent, SkyTokensComponent],
|
|
1273
|
+
imports: [
|
|
1274
|
+
CommonModule,
|
|
1275
|
+
SkyI18nModule,
|
|
1276
|
+
SkyIconModule,
|
|
1277
|
+
SkyIndicatorsResourcesModule,
|
|
1278
|
+
],
|
|
1279
|
+
exports: [SkyTokenComponent, SkyTokensComponent],
|
|
1280
|
+
}]
|
|
1281
|
+
}] });
|
|
1143
1282
|
|
|
1144
1283
|
// Need to add the following to classes which contain static methods.
|
|
1145
1284
|
// See: https://github.com/ng-packagr/ng-packagr/issues/641
|
|
@@ -1162,7 +1301,9 @@ class SkyWaitAdapterService {
|
|
|
1162
1301
|
this.renderer.removeStyle(waitEl.nativeElement.parentElement, 'position');
|
|
1163
1302
|
}
|
|
1164
1303
|
setBusyState(waitEl, isFullPage, isWaiting, isNonBlocking = false, waitComponentId) {
|
|
1165
|
-
const busyEl = isFullPage
|
|
1304
|
+
const busyEl = isFullPage
|
|
1305
|
+
? document.body
|
|
1306
|
+
: waitEl.nativeElement.parentElement;
|
|
1166
1307
|
if (!isNonBlocking) {
|
|
1167
1308
|
if (isWaiting) {
|
|
1168
1309
|
this.renderer.setAttribute(busyEl, 'aria-busy', 'true');
|
|
@@ -1187,7 +1328,7 @@ class SkyWaitAdapterService {
|
|
|
1187
1328
|
});
|
|
1188
1329
|
SkyWaitAdapterService.busyElements[waitComponentId] = {
|
|
1189
1330
|
listener: endListenerFunc,
|
|
1190
|
-
busyEl: undefined
|
|
1331
|
+
busyEl: undefined,
|
|
1191
1332
|
};
|
|
1192
1333
|
}
|
|
1193
1334
|
else {
|
|
@@ -1210,7 +1351,7 @@ class SkyWaitAdapterService {
|
|
|
1210
1351
|
});
|
|
1211
1352
|
SkyWaitAdapterService.busyElements[waitComponentId] = {
|
|
1212
1353
|
listener: endListenerFunc,
|
|
1213
|
-
busyEl: busyEl
|
|
1354
|
+
busyEl: busyEl,
|
|
1214
1355
|
};
|
|
1215
1356
|
}
|
|
1216
1357
|
}
|
|
@@ -1233,10 +1374,12 @@ class SkyWaitAdapterService {
|
|
|
1233
1374
|
// Find the next navigable element that isn't waiting
|
|
1234
1375
|
const startingIndex = focussable.indexOf(targetElement);
|
|
1235
1376
|
let curIndex = startingIndex + modifier;
|
|
1236
|
-
while (focussable[curIndex] &&
|
|
1377
|
+
while (focussable[curIndex] &&
|
|
1378
|
+
this.isElementBusyOrHidden(focussable[curIndex])) {
|
|
1237
1379
|
curIndex += modifier;
|
|
1238
1380
|
}
|
|
1239
|
-
if (focussable[curIndex] &&
|
|
1381
|
+
if (focussable[curIndex] &&
|
|
1382
|
+
!this.isElementBusyOrHidden(focussable[curIndex])) {
|
|
1240
1383
|
focussable[curIndex].focus();
|
|
1241
1384
|
}
|
|
1242
1385
|
else {
|
|
@@ -1253,7 +1396,8 @@ class SkyWaitAdapterService {
|
|
|
1253
1396
|
}
|
|
1254
1397
|
/* istanbul ignore else */
|
|
1255
1398
|
/* sanity check */
|
|
1256
|
-
if (focussable[curIndex] &&
|
|
1399
|
+
if (focussable[curIndex] &&
|
|
1400
|
+
!this.isElementBusyOrHidden(focussable[curIndex])) {
|
|
1257
1401
|
focussable[curIndex].focus();
|
|
1258
1402
|
}
|
|
1259
1403
|
else {
|
|
@@ -1266,13 +1410,13 @@ class SkyWaitAdapterService {
|
|
|
1266
1410
|
}
|
|
1267
1411
|
isShift(event) {
|
|
1268
1412
|
// Determine if shift+tab was used based on element order
|
|
1269
|
-
const elements = this.getFocussableElements().filter(elem => !this.isElementHidden(elem));
|
|
1413
|
+
const elements = this.getFocussableElements().filter((elem) => !this.isElementHidden(elem));
|
|
1270
1414
|
const previousInd = elements.indexOf(event.relatedTarget);
|
|
1271
1415
|
const currentInd = elements.indexOf(event.target);
|
|
1272
|
-
return previousInd === currentInd + 1
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1416
|
+
return (previousInd === currentInd + 1 ||
|
|
1417
|
+
(previousInd === 0 && currentInd === elements.length - 1) ||
|
|
1418
|
+
previousInd > currentInd ||
|
|
1419
|
+
!event.relatedTarget);
|
|
1276
1420
|
}
|
|
1277
1421
|
isElementHidden(element) {
|
|
1278
1422
|
const style = window.getComputedStyle(element);
|
|
@@ -1305,15 +1449,17 @@ class SkyWaitAdapterService {
|
|
|
1305
1449
|
// Select all possible focussable elements
|
|
1306
1450
|
const focussableElements = 'a[href], ' +
|
|
1307
1451
|
'area[href], ' +
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1452
|
+
"input:not([disabled]):not([tabindex='-1']), " +
|
|
1453
|
+
"button:not([disabled]):not([tabindex='-1']), " +
|
|
1454
|
+
"select:not([disabled]):not([tabindex='-1']), " +
|
|
1455
|
+
"textarea:not([disabled]):not([tabindex='-1']), " +
|
|
1312
1456
|
'iframe, object, embed, ' +
|
|
1313
|
-
|
|
1457
|
+
"*[tabindex]:not([tabindex='-1']), " +
|
|
1314
1458
|
'*[contenteditable=true]';
|
|
1315
1459
|
this.focussableElements = Array.prototype.filter.call(document.body.querySelectorAll(focussableElements), (element) => {
|
|
1316
|
-
return element.offsetWidth > 0 ||
|
|
1460
|
+
return (element.offsetWidth > 0 ||
|
|
1461
|
+
element.offsetHeight > 0 ||
|
|
1462
|
+
element === document.activeElement);
|
|
1317
1463
|
});
|
|
1318
1464
|
return this.focussableElements;
|
|
1319
1465
|
}
|
|
@@ -1327,12 +1473,11 @@ class SkyWaitAdapterService {
|
|
|
1327
1473
|
}
|
|
1328
1474
|
SkyWaitAdapterService.isPageWaitActive = false;
|
|
1329
1475
|
SkyWaitAdapterService.busyElements = {};
|
|
1330
|
-
SkyWaitAdapterService
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
];
|
|
1476
|
+
SkyWaitAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitAdapterService, deps: [{ token: i0.RendererFactory2 }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1477
|
+
SkyWaitAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitAdapterService });
|
|
1478
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitAdapterService, decorators: [{
|
|
1479
|
+
type: Injectable
|
|
1480
|
+
}], ctorParameters: function () { return [{ type: i0.RendererFactory2 }]; } });
|
|
1336
1481
|
|
|
1337
1482
|
let nextId = 0;
|
|
1338
1483
|
class SkyWaitComponent {
|
|
@@ -1367,10 +1512,11 @@ class SkyWaitComponent {
|
|
|
1367
1512
|
* @default false
|
|
1368
1513
|
*/
|
|
1369
1514
|
set isFullPage(value) {
|
|
1515
|
+
/* istanbul ignore else: untestable */
|
|
1370
1516
|
if (value) {
|
|
1371
1517
|
this.adapterService.removeWaitBounds(this.elRef);
|
|
1372
1518
|
}
|
|
1373
|
-
else
|
|
1519
|
+
else if (!value && this._isWaiting) {
|
|
1374
1520
|
this.adapterService.setWaitBounds(this.elRef);
|
|
1375
1521
|
}
|
|
1376
1522
|
this._isFullPage = value;
|
|
@@ -1388,8 +1534,8 @@ class SkyWaitComponent {
|
|
|
1388
1534
|
}
|
|
1389
1535
|
/* istanbul ignore else */
|
|
1390
1536
|
if (this.resourceService) {
|
|
1391
|
-
const type =
|
|
1392
|
-
const blocking =
|
|
1537
|
+
const type = this.isFullPage ? '_page' : '';
|
|
1538
|
+
const blocking = this.isNonBlocking ? '' : '_blocking';
|
|
1393
1539
|
const key = `skyux_wait${type}${blocking}_aria_alt_text`;
|
|
1394
1540
|
this.resourceService.getString(key).subscribe((value) => {
|
|
1395
1541
|
this.ariaLabelStream.next(value);
|
|
@@ -1397,67 +1543,62 @@ class SkyWaitComponent {
|
|
|
1397
1543
|
}
|
|
1398
1544
|
}
|
|
1399
1545
|
}
|
|
1400
|
-
SkyWaitComponent
|
|
1401
|
-
{ type:
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
]
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
]
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
};
|
|
1546
|
+
SkyWaitComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitComponent, deps: [{ token: i0.ElementRef }, { token: SkyWaitAdapterService }, { token: i1$2.SkyLibResourcesService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1547
|
+
SkyWaitComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyWaitComponent, selector: "sky-wait", inputs: { ariaLabel: "ariaLabel", isWaiting: "isWaiting", isFullPage: "isFullPage", isNonBlocking: "isNonBlocking" }, providers: [SkyWaitAdapterService], ngImport: i0, template: "<div class=\"sky-wait-container\">\n <div\n *ngIf=\"isWaiting\"\n class=\"sky-wait-mask\"\n [attr.aria-label]=\"ariaLabelStream | async\"\n [ngClass]=\"{\n 'sky-wait-mask-loading-fixed': isFullPage,\n 'sky-wait-mask-loading-non-blocking': isNonBlocking,\n 'sky-wait-mask-loading-blocking': !isNonBlocking\n }\"\n >\n <div class=\"sky-wait\">\n <div class=\"sky-wait-double-bounce1\"></div>\n <div class=\"sky-wait-double-bounce2\"></div>\n </div>\n </div>\n</div>\n", styles: [".sky-wait-mask-loading-blocking{margin:auto;position:absolute;top:0;right:0;left:0;bottom:0;background-color:#ffffffb3;z-index:1000}.sky-wait-mask-loading-fixed{position:fixed}.sky-wait{width:50px;height:50px;margin-top:-25px;margin-left:-25px;position:absolute;top:50%;left:50%}.sky-wait-mask-loading-non-blocking{bottom:0}.sky-wait-mask-loading-non-blocking .sky-wait{top:auto;right:auto;bottom:0;left:0;margin-left:auto;margin-right:auto}.sky-wait-double-bounce1,.sky-wait-double-bounce2{width:100%;height:100%;border-radius:50%;background-color:#72bf44;opacity:.6;position:absolute;top:0;left:0;animation:sk-bounce 2s infinite ease-in-out}.sky-wait-double-bounce2{animation-delay:-1s}@keyframes sk-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.sky-wait-container.sky-wait-active{position:relative}\n"], directives: [{ type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1$1.AsyncPipe } });
|
|
1548
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitComponent, decorators: [{
|
|
1549
|
+
type: Component,
|
|
1550
|
+
args: [{
|
|
1551
|
+
selector: 'sky-wait',
|
|
1552
|
+
templateUrl: './wait.component.html',
|
|
1553
|
+
styleUrls: ['./wait.component.scss'],
|
|
1554
|
+
providers: [SkyWaitAdapterService],
|
|
1555
|
+
}]
|
|
1556
|
+
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: SkyWaitAdapterService }, { type: i1$2.SkyLibResourcesService, decorators: [{
|
|
1557
|
+
type: Optional
|
|
1558
|
+
}] }]; }, propDecorators: { ariaLabel: [{
|
|
1559
|
+
type: Input
|
|
1560
|
+
}], isWaiting: [{
|
|
1561
|
+
type: Input
|
|
1562
|
+
}], isFullPage: [{
|
|
1563
|
+
type: Input
|
|
1564
|
+
}], isNonBlocking: [{
|
|
1565
|
+
type: Input
|
|
1566
|
+
}] } });
|
|
1421
1567
|
|
|
1422
1568
|
/**
|
|
1423
1569
|
* @internal
|
|
1424
1570
|
*/
|
|
1425
1571
|
class SkyWaitPageComponent {
|
|
1426
1572
|
}
|
|
1427
|
-
SkyWaitPageComponent
|
|
1428
|
-
{ type:
|
|
1429
|
-
|
|
1430
|
-
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1573
|
+
SkyWaitPageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1574
|
+
SkyWaitPageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: SkyWaitPageComponent, selector: "sky-wait-page", inputs: { hasBlockingWait: "hasBlockingWait", hasNonBlockingWait: "hasNonBlockingWait" }, ngImport: i0, template: "<div class=\"sky-wait-page\">\n <sky-wait\n [isFullPage]=\"true\"\n [isNonBlocking]=\"true\"\n [isWaiting]=\"hasNonBlockingWait\"\n >\n </sky-wait>\n <sky-wait [isFullPage]=\"true\" [isWaiting]=\"hasBlockingWait\"> </sky-wait>\n</div>\n", styles: [".sky-wait-page ::ng-deep .sky-wait-mask-loading-fixed{z-index:2000}\n"], components: [{ type: SkyWaitComponent, selector: "sky-wait", inputs: ["ariaLabel", "isWaiting", "isFullPage", "isNonBlocking"] }] });
|
|
1575
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitPageComponent, decorators: [{
|
|
1576
|
+
type: Component,
|
|
1577
|
+
args: [{
|
|
1578
|
+
selector: 'sky-wait-page',
|
|
1579
|
+
templateUrl: './wait-page.component.html',
|
|
1580
|
+
styleUrls: ['./wait-page.component.scss'],
|
|
1581
|
+
}]
|
|
1582
|
+
}], propDecorators: { hasBlockingWait: [{
|
|
1583
|
+
type: Input
|
|
1584
|
+
}], hasNonBlockingWait: [{
|
|
1585
|
+
type: Input
|
|
1586
|
+
}] } });
|
|
1438
1587
|
|
|
1439
1588
|
class SkyWaitModule {
|
|
1440
1589
|
}
|
|
1441
|
-
SkyWaitModule
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
CommonModule,
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
]
|
|
1452
|
-
|
|
1453
|
-
SkyWaitComponent,
|
|
1454
|
-
SkyWaitPageComponent
|
|
1455
|
-
],
|
|
1456
|
-
entryComponents: [
|
|
1457
|
-
SkyWaitPageComponent
|
|
1458
|
-
]
|
|
1459
|
-
},] }
|
|
1460
|
-
];
|
|
1590
|
+
SkyWaitModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1591
|
+
SkyWaitModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitModule, declarations: [SkyWaitComponent, SkyWaitPageComponent], imports: [CommonModule, SkyI18nModule, SkyIndicatorsResourcesModule], exports: [SkyWaitComponent] });
|
|
1592
|
+
SkyWaitModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitModule, imports: [[CommonModule, SkyI18nModule, SkyIndicatorsResourcesModule]] });
|
|
1593
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitModule, decorators: [{
|
|
1594
|
+
type: NgModule,
|
|
1595
|
+
args: [{
|
|
1596
|
+
declarations: [SkyWaitComponent, SkyWaitPageComponent],
|
|
1597
|
+
imports: [CommonModule, SkyI18nModule, SkyIndicatorsResourcesModule],
|
|
1598
|
+
exports: [SkyWaitComponent],
|
|
1599
|
+
entryComponents: [SkyWaitPageComponent],
|
|
1600
|
+
}]
|
|
1601
|
+
}] });
|
|
1461
1602
|
|
|
1462
1603
|
/**
|
|
1463
1604
|
* @internal
|
|
@@ -1473,12 +1614,14 @@ class SkyWaitPageAdapterService {
|
|
|
1473
1614
|
}
|
|
1474
1615
|
}
|
|
1475
1616
|
}
|
|
1476
|
-
SkyWaitPageAdapterService.ɵ
|
|
1477
|
-
SkyWaitPageAdapterService
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1617
|
+
SkyWaitPageAdapterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitPageAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1618
|
+
SkyWaitPageAdapterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitPageAdapterService, providedIn: 'root' });
|
|
1619
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitPageAdapterService, decorators: [{
|
|
1620
|
+
type: Injectable,
|
|
1621
|
+
args: [{
|
|
1622
|
+
providedIn: 'root',
|
|
1623
|
+
}]
|
|
1624
|
+
}] });
|
|
1482
1625
|
|
|
1483
1626
|
// Need to add the following to classes which contain static methods.
|
|
1484
1627
|
// See: https://github.com/ng-packagr/ng-packagr/issues/641
|
|
@@ -1626,22 +1769,18 @@ class SkyWaitService {
|
|
|
1626
1769
|
}
|
|
1627
1770
|
SkyWaitService.pageWaitBlockingCount = 0;
|
|
1628
1771
|
SkyWaitService.pageWaitNonBlockingCount = 0;
|
|
1629
|
-
SkyWaitService.ɵ
|
|
1630
|
-
SkyWaitService
|
|
1631
|
-
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
{ type: ApplicationRef },
|
|
1638
|
-
{ type: SkyWaitPageAdapterService },
|
|
1639
|
-
{ type: SkyAppWindowRef }
|
|
1640
|
-
];
|
|
1772
|
+
SkyWaitService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitService, deps: [{ token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: SkyWaitPageAdapterService }, { token: i1$3.SkyAppWindowRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1773
|
+
SkyWaitService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitService, providedIn: 'root' });
|
|
1774
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: SkyWaitService, decorators: [{
|
|
1775
|
+
type: Injectable,
|
|
1776
|
+
args: [{
|
|
1777
|
+
providedIn: 'root',
|
|
1778
|
+
}]
|
|
1779
|
+
}], ctorParameters: function () { return [{ type: i0.ComponentFactoryResolver }, { type: i0.ApplicationRef }, { type: SkyWaitPageAdapterService }, { type: i1$3.SkyAppWindowRef }]; } });
|
|
1641
1780
|
|
|
1642
1781
|
/**
|
|
1643
1782
|
* Generated bundle index. Do not edit.
|
|
1644
1783
|
*/
|
|
1645
1784
|
|
|
1646
|
-
export { SkyAlertModule, SkyChevronModule, SkyHelpInlineModule, SkyIconModule, SkyKeyInfoModule, SkyLabelModule, SkyStatusIndicatorModule, SkyTextHighlightModule, SkyTokensMessageType, SkyTokensModule, SkyWaitModule, SkyWaitService, SkyAlertComponent as
|
|
1785
|
+
export { SkyAlertModule, SkyChevronModule, SkyHelpInlineModule, SkyIconModule, SkyKeyInfoModule, SkyLabelModule, SkyStatusIndicatorModule, SkyTextHighlightModule, SkyTokensMessageType, SkyTokensModule, SkyWaitModule, SkyWaitService, SkyAlertComponent as λ1, SkyStatusIndicatorComponent as λ10, SkyTextHighlightDirective as λ11, SkyTokenComponent as λ12, SkyTokensComponent as λ13, SkyWaitComponent as λ14, SkyChevronComponent as λ2, SkyHelpInlineComponent as λ3, SkyIconComponent as λ4, SkyIconStackComponent as λ5, SkyKeyInfoLabelComponent as λ6, SkyKeyInfoValueComponent as λ7, SkyKeyInfoComponent as λ8, SkyLabelComponent as λ9 };
|
|
1647
1786
|
//# sourceMappingURL=skyux-indicators.js.map
|