@skyux/indicators 9.0.0-alpha.0 → 9.0.0-alpha.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/documentation.json +162 -162
- package/package.json +5 -5
package/documentation.json
CHANGED
|
@@ -10044,139 +10044,139 @@
|
|
|
10044
10044
|
},
|
|
10045
10045
|
"codeExamples": [
|
|
10046
10046
|
{
|
|
10047
|
-
"fileName": "
|
|
10048
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10049
|
-
"rawContents": "
|
|
10047
|
+
"fileName": "wait-demo.module.ts",
|
|
10048
|
+
"filePath": "/projects/indicators/documentation/code-examples/wait/page/wait-demo.module.ts",
|
|
10049
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyWaitModule } from '@skyux/indicators';\n\nimport { WaitDemoComponent } from './wait-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyWaitModule],\n exports: [WaitDemoComponent],\n declarations: [WaitDemoComponent],\n})\nexport class WaitDemoModule {}\n"
|
|
10050
10050
|
},
|
|
10051
10051
|
{
|
|
10052
|
-
"fileName": "
|
|
10053
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10054
|
-
"rawContents": "import {
|
|
10052
|
+
"fileName": "wait-demo.component.ts",
|
|
10053
|
+
"filePath": "/projects/indicators/documentation/code-examples/wait/page/wait-demo.component.ts",
|
|
10054
|
+
"rawContents": "import { Component, OnDestroy } from '@angular/core';\nimport { SkyWaitService } from '@skyux/indicators';\n\n@Component({\n selector: 'app-wait-demo',\n templateUrl: './wait-demo.component.html',\n})\nexport class WaitDemoComponent implements OnDestroy {\n public isWaiting = false;\n\n constructor(private waitSvc: SkyWaitService) {}\n\n public ngOnDestroy(): void {\n this.waitSvc.dispose();\n }\n\n public togglePageWait(isBlocking: boolean): void {\n if (!this.isWaiting) {\n if (isBlocking) {\n this.waitSvc.beginBlockingPageWait();\n } else {\n this.waitSvc.beginNonBlockingPageWait();\n }\n } else {\n if (isBlocking) {\n this.waitSvc.endBlockingPageWait();\n } else {\n this.waitSvc.endNonBlockingPageWait();\n }\n }\n this.isWaiting = !this.isWaiting;\n }\n}\n"
|
|
10055
10055
|
},
|
|
10056
10056
|
{
|
|
10057
|
-
"fileName": "
|
|
10058
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10059
|
-
"rawContents": "import {
|
|
10057
|
+
"fileName": "wait-demo.component.spec.ts",
|
|
10058
|
+
"filePath": "/projects/indicators/documentation/code-examples/wait/page/wait-demo.component.spec.ts",
|
|
10059
|
+
"rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { TestBed } from '@angular/core/testing';\nimport { SkyWaitHarness } from '@skyux/indicators/testing';\n\nimport { WaitDemoComponent } from './wait-demo.component';\nimport { WaitDemoModule } from './wait-demo.module';\n\ndescribe('Page wait', () => {\n function setupTest() {\n const fixture = TestBed.createComponent(WaitDemoComponent);\n const rootLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);\n\n return { rootLoader, fixture };\n }\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [WaitDemoModule],\n });\n });\n\n it('should show the page wait component when the user performs an action', async () => {\n const { rootLoader, fixture } = setupTest();\n const buttons = fixture.nativeElement.querySelectorAll('.sky-btn');\n\n buttons[0].click();\n\n const waitHarness = await rootLoader.getHarness(\n SkyWaitHarness.with({ servicePageWaitType: 'blocking' })\n );\n\n await expectAsync(waitHarness.isWaiting()).toBeResolvedTo(true);\n await expectAsync(waitHarness.isFullPage()).toBeResolvedTo(true);\n await expectAsync(waitHarness.isNonBlocking()).toBeResolvedTo(false);\n });\n\n it('should show the non-blocking page wait component when the user performs an action', async () => {\n const { rootLoader, fixture } = setupTest();\n const buttons = fixture.nativeElement.querySelectorAll('.sky-btn');\n buttons[1].click();\n\n const waitHarness = await rootLoader.getHarness(\n SkyWaitHarness.with({ servicePageWaitType: 'non-blocking' })\n );\n\n await expectAsync(waitHarness.isWaiting()).toBeResolvedTo(true);\n await expectAsync(waitHarness.isFullPage()).toBeResolvedTo(true);\n await expectAsync(waitHarness.isNonBlocking()).toBeResolvedTo(true);\n });\n});\n"
|
|
10060
10060
|
},
|
|
10061
10061
|
{
|
|
10062
|
-
"fileName": "
|
|
10063
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10064
|
-
"rawContents": "
|
|
10062
|
+
"fileName": "wait-demo.component.html",
|
|
10063
|
+
"filePath": "/projects/indicators/documentation/code-examples/wait/page/wait-demo.component.html",
|
|
10064
|
+
"rawContents": "<button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n (click)=\"togglePageWait(true)\"\n>\n Show page wait\n</button>\n\n<button\n type=\"button\"\n class=\"sky-btn sky-btn-default sky-margin-inline-sm\"\n (click)=\"togglePageWait(false)\"\n>\n Show non-blocking page wait\n</button>\n"
|
|
10065
10065
|
},
|
|
10066
10066
|
{
|
|
10067
|
-
"fileName": "
|
|
10068
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10069
|
-
"rawContents": "
|
|
10067
|
+
"fileName": "wait-demo.module.ts",
|
|
10068
|
+
"filePath": "/projects/indicators/documentation/code-examples/wait/element/wait-demo.module.ts",
|
|
10069
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyWaitModule } from '@skyux/indicators';\n\nimport { WaitDemoComponent } from './wait-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyWaitModule],\n exports: [WaitDemoComponent],\n declarations: [WaitDemoComponent],\n})\nexport class WaitDemoModule {}\n"
|
|
10070
10070
|
},
|
|
10071
10071
|
{
|
|
10072
|
-
"fileName": "
|
|
10073
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10074
|
-
"rawContents": "import {
|
|
10072
|
+
"fileName": "wait-demo.component.ts",
|
|
10073
|
+
"filePath": "/projects/indicators/documentation/code-examples/wait/element/wait-demo.component.ts",
|
|
10074
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-wait-demo',\n templateUrl: './wait-demo.component.html',\n})\nexport class WaitDemoComponent {\n public isWaiting = false;\n}\n"
|
|
10075
10075
|
},
|
|
10076
10076
|
{
|
|
10077
|
-
"fileName": "
|
|
10078
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10079
|
-
"rawContents": "import {
|
|
10077
|
+
"fileName": "wait-demo.component.spec.ts",
|
|
10078
|
+
"filePath": "/projects/indicators/documentation/code-examples/wait/element/wait-demo.component.spec.ts",
|
|
10079
|
+
"rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { TestBed } from '@angular/core/testing';\nimport { SkyWaitHarness } from '@skyux/indicators/testing';\n\nimport { WaitDemoComponent } from './wait-demo.component';\nimport { WaitDemoModule } from './wait-demo.module';\n\ndescribe('Basic wait', () => {\n async function setupTest() {\n const fixture = TestBed.createComponent(WaitDemoComponent);\n\n const loader = TestbedHarnessEnvironment.loader(fixture);\n\n const waitHarness = await loader.getHarness(\n SkyWaitHarness.with({ dataSkyId: 'wait-demo' })\n );\n\n return { waitHarness, fixture };\n }\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [WaitDemoModule],\n });\n });\n\n it('should show the wait component when the user performs an action', async () => {\n const { waitHarness, fixture } = await setupTest();\n\n fixture.nativeElement.querySelector('.sky-btn').click();\n fixture.detectChanges();\n\n await expectAsync(waitHarness.isWaiting()).toBeResolvedTo(true);\n await expectAsync(waitHarness.isFullPage()).toBeResolvedTo(false);\n await expectAsync(waitHarness.isNonBlocking()).toBeResolvedTo(false);\n });\n});\n"
|
|
10080
10080
|
},
|
|
10081
10081
|
{
|
|
10082
|
-
"fileName": "
|
|
10083
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10084
|
-
"rawContents": "
|
|
10082
|
+
"fileName": "wait-demo.component.html",
|
|
10083
|
+
"filePath": "/projects/indicators/documentation/code-examples/wait/element/wait-demo.component.html",
|
|
10084
|
+
"rawContents": "<button\n type=\"button\"\n class=\"sky-btn sky-btn-default\"\n (click)=\"isWaiting = !isWaiting\"\n>\n Toggle wait\n</button>\n\n<div style=\"height: 200px; width: 200px; margin: 10px\">\n The <code>sky-wait</code> directive can apply to a large area.\n <sky-wait data-sky-id=\"wait-demo\" [isWaiting]=\"isWaiting\"> </sky-wait>\n</div>\n"
|
|
10085
10085
|
},
|
|
10086
10086
|
{
|
|
10087
|
-
"fileName": "
|
|
10088
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10089
|
-
"rawContents": "
|
|
10087
|
+
"fileName": "tokens-demo.module.ts",
|
|
10088
|
+
"filePath": "/projects/indicators/documentation/code-examples/tokens/custom/tokens-demo.module.ts",
|
|
10089
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTokensModule } from '@skyux/indicators';\n\nimport { TokensDemoComponent } from './tokens-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyTokensModule],\n exports: [TokensDemoComponent],\n declarations: [TokensDemoComponent],\n})\nexport class TokensDemoModule {}\n"
|
|
10090
10090
|
},
|
|
10091
10091
|
{
|
|
10092
|
-
"fileName": "
|
|
10093
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10094
|
-
"rawContents": "import {
|
|
10092
|
+
"fileName": "tokens-demo.component.ts",
|
|
10093
|
+
"filePath": "/projects/indicators/documentation/code-examples/tokens/custom/tokens-demo.component.ts",
|
|
10094
|
+
"rawContents": "import { Component, OnDestroy } from '@angular/core';\nimport {\n SkyToken,\n SkyTokenSelectedEventArgs,\n SkyTokensMessage,\n SkyTokensMessageType,\n} from '@skyux/indicators';\n\nimport { Subject } from 'rxjs';\n\nimport { TokensDemoItem } from './tokens-demo-item';\n\n@Component({\n selector: 'app-tokens-demo',\n templateUrl: './tokens-demo.component.html',\n})\nexport class TokensDemoComponent implements OnDestroy {\n public myTokens: SkyToken<TokensDemoItem>[] | undefined;\n public tokensController = new Subject<SkyTokensMessage>();\n public selectedToken: string | undefined = '';\n\n #defaultItems: TokensDemoItem[] = [\n { label: 'Canada' },\n { label: 'Older than 55' },\n { label: 'Employed' },\n { label: 'Added before 2018' },\n ];\n\n constructor() {\n this.myTokens = this.#getTokens(this.#defaultItems);\n }\n\n public ngOnDestroy(): void {\n this.tokensController.complete();\n }\n\n public resetTokens(): void {\n this.createTokens();\n }\n\n public changeTokens(): void {\n this.myTokens = this.#getTokens([\n { label: 'Paid' },\n { label: 'Pending' },\n { label: 'Past due' },\n ]);\n }\n\n public destroyTokens(): void {\n this.myTokens = undefined;\n }\n\n public createTokens(): void {\n this.myTokens = this.#getTokens(this.#defaultItems);\n }\n\n public onTokenSelected(\n args: SkyTokenSelectedEventArgs<TokensDemoItem>\n ): void {\n this.selectedToken = args.token?.value.label;\n }\n\n public onFocusIndexUnderRange(): void {\n console.log('Focus index was less than zero.');\n }\n\n public onFocusIndexOverRange(): void {\n console.log('Focus index was greater than the number of tokens.');\n }\n\n public focusLastToken(): void {\n this.tokensController.next({\n type: SkyTokensMessageType.FocusLastToken,\n });\n }\n\n #getTokens(data: TokensDemoItem[]): SkyToken<TokensDemoItem>[] {\n return data.map((item) => {\n return {\n value: item,\n };\n });\n }\n}\n"
|
|
10095
10095
|
},
|
|
10096
10096
|
{
|
|
10097
|
-
"fileName": "
|
|
10098
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10099
|
-
"rawContents": "import {
|
|
10097
|
+
"fileName": "tokens-demo.component.spec.ts",
|
|
10098
|
+
"filePath": "/projects/indicators/documentation/code-examples/tokens/custom/tokens-demo.component.spec.ts",
|
|
10099
|
+
"rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkyTokensHarness } from '@skyux/indicators/testing';\n\nimport { TokensDemoComponent } from './tokens-demo.component';\nimport { TokensDemoModule } from './tokens-demo.module';\n\ndescribe('Tokens basic demo', () => {\n let initialTokenLabels: string[];\n\n async function setupTest(): Promise<{\n tokensHarness: SkyTokensHarness;\n fixture: ComponentFixture<TokensDemoComponent>;\n }> {\n const fixture = TestBed.createComponent(TokensDemoComponent);\n const loader = TestbedHarnessEnvironment.loader(fixture);\n\n const tokensHarness = await loader.getHarness(\n SkyTokensHarness.with({ dataSkyId: 'demo-tokens' })\n );\n\n return { tokensHarness, fixture };\n }\n\n function clickButton(\n fixture: ComponentFixture<TokensDemoComponent>,\n buttonName: 'change' | 'destroy' | 'focus-last' | 'reset'\n ): void {\n fixture.nativeElement\n .querySelector(`.tokens-demo-${buttonName}-btn`)\n .click();\n }\n\n beforeEach(() => {\n initialTokenLabels = [\n 'Canada',\n 'Older than 55',\n 'Employed',\n 'Added before 2018',\n ];\n\n TestBed.configureTestingModule({\n imports: [NoopAnimationsModule, TokensDemoModule],\n });\n });\n\n it('should display the expected initial tokens', async () => {\n const { tokensHarness } = await setupTest();\n\n await expectAsync(tokensHarness.getTokensText()).toBeResolvedTo(\n initialTokenLabels\n );\n });\n\n it('should display the selected token label when the user selects a token', async () => {\n const { tokensHarness, fixture } = await setupTest();\n\n const employedToken = (await tokensHarness.getTokens())[2];\n await employedToken.select();\n\n expect(\n fixture.nativeElement.querySelector('.tokens-demo-selected').innerText\n ).toBe('Employed');\n });\n\n it('should change tokens when the user clicks the \"Change tokens\" button', async () => {\n const { tokensHarness, fixture } = await setupTest();\n\n clickButton(fixture, 'change');\n\n await expectAsync(tokensHarness.getTokensText()).toBeResolvedTo([\n 'Paid',\n 'Pending',\n 'Past due',\n ]);\n });\n\n it('should reset tokens when the user clicks the \"Reset tokens\" button', async () => {\n const { tokensHarness, fixture } = await setupTest();\n\n clickButton(fixture, 'change');\n\n await expectAsync(tokensHarness.getTokensText()).not.toBeResolvedTo(\n initialTokenLabels\n );\n\n clickButton(fixture, 'reset');\n\n await expectAsync(tokensHarness.getTokensText()).toBeResolvedTo(\n initialTokenLabels\n );\n });\n\n it('should destroy tokens when the user clicks the \"Destroy tokens\" button', async () => {\n const { tokensHarness, fixture } = await setupTest();\n\n clickButton(fixture, 'destroy');\n\n await expectAsync(tokensHarness.getTokens()).toBeResolvedTo([]);\n });\n\n it('should focus the last token when the user clicks the \"Focus last token\" button', async () => {\n const { tokensHarness, fixture } = await setupTest();\n\n const tokens = await tokensHarness.getTokens();\n const lastToken = tokens[tokens.length - 1];\n\n await expectAsync(lastToken.isFocused()).toBeResolvedTo(false);\n\n clickButton(fixture, 'focus-last');\n\n await expectAsync(lastToken.isFocused()).toBeResolvedTo(true);\n });\n});\n"
|
|
10100
10100
|
},
|
|
10101
10101
|
{
|
|
10102
|
-
"fileName": "
|
|
10103
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10104
|
-
"rawContents": "
|
|
10102
|
+
"fileName": "tokens-demo.component.html",
|
|
10103
|
+
"filePath": "/projects/indicators/documentation/code-examples/tokens/custom/tokens-demo.component.html",
|
|
10104
|
+
"rawContents": "<p>\n These tokens define a custom property to display their values. When users\n select a token, it emits an event.\n</p>\n\n<div class=\"sky-margin-stacked-xl\">\n <sky-tokens\n displayWith=\"label\"\n [messageStream]=\"tokensController\"\n (focusIndexOverRange)=\"onFocusIndexOverRange()\"\n (focusIndexUnderRange)=\"onFocusIndexUnderRange()\"\n (tokenSelected)=\"onTokenSelected($event)\"\n [(tokens)]=\"myTokens\"\n data-sky-id=\"demo-tokens\"\n >\n (You may also include content inside the tokens component.)\n </sky-tokens>\n</div>\n\n<div class=\"sky-margin-stacked-xl\">\n <button\n class=\"sky-btn sky-btn-default sky-margin-inline-sm tokens-demo-change-btn\"\n type=\"button\"\n (click)=\"changeTokens()\"\n >\n Change tokens\n </button>\n\n <button\n class=\"sky-btn sky-btn-default sky-margin-inline-sm tokens-demo-reset-btn\"\n type=\"button\"\n (click)=\"resetTokens()\"\n >\n Reset tokens\n </button>\n\n <button\n class=\"sky-btn sky-btn-default sky-margin-inline-sm tokens-demo-destroy-btn\"\n type=\"button\"\n (click)=\"destroyTokens()\"\n >\n Destroy tokens\n </button>\n\n <button\n class=\"sky-btn sky-btn-default sky-margin-inline-sm tokens-demo-focus-last-btn\"\n (click)=\"focusLastToken()\"\n >\n Focus last token\n </button>\n</div>\n\n<div>\n Selected token: <span class=\"tokens-demo-selected\">{{ selectedToken }}</span>\n</div>\n"
|
|
10105
10105
|
},
|
|
10106
10106
|
{
|
|
10107
|
-
"fileName": "
|
|
10108
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10109
|
-
"rawContents": "
|
|
10107
|
+
"fileName": "tokens-demo-item.ts",
|
|
10108
|
+
"filePath": "/projects/indicators/documentation/code-examples/tokens/custom/tokens-demo-item.ts",
|
|
10109
|
+
"rawContents": "export interface TokensDemoItem {\n label: string;\n}\n"
|
|
10110
10110
|
},
|
|
10111
10111
|
{
|
|
10112
|
-
"fileName": "
|
|
10113
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10114
|
-
"rawContents": "import {
|
|
10112
|
+
"fileName": "tokens-demo.module.ts",
|
|
10113
|
+
"filePath": "/projects/indicators/documentation/code-examples/tokens/basic/tokens-demo.module.ts",
|
|
10114
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyTokensModule } from '@skyux/indicators';\n\nimport { TokensDemoComponent } from './tokens-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyTokensModule],\n exports: [TokensDemoComponent],\n declarations: [TokensDemoComponent],\n})\nexport class TokensDemoModule {}\n"
|
|
10115
10115
|
},
|
|
10116
10116
|
{
|
|
10117
|
-
"fileName": "
|
|
10118
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10119
|
-
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-
|
|
10117
|
+
"fileName": "tokens-demo.component.ts",
|
|
10118
|
+
"filePath": "/projects/indicators/documentation/code-examples/tokens/basic/tokens-demo.component.ts",
|
|
10119
|
+
"rawContents": "import { Component } from '@angular/core';\nimport { SkyToken } from '@skyux/indicators';\n\nimport { TokensDemoColor } from './tokens-demo-color';\n\n@Component({\n selector: 'app-tokens-demo',\n templateUrl: './tokens-demo.component.html',\n})\nexport class TokensDemoComponent {\n public colors: SkyToken<TokensDemoColor>[] = [\n { value: { name: 'Red' } },\n { value: { name: 'Black' } },\n { value: { name: 'Blue' } },\n { value: { name: 'Brown' } },\n { value: { name: 'Green' } },\n { value: { name: 'Orange' } },\n { value: { name: 'Pink' } },\n { value: { name: 'Purple' } },\n { value: { name: 'Turquoise' } },\n { value: { name: 'White' } },\n { value: { name: 'Yellow' } },\n ];\n}\n"
|
|
10120
10120
|
},
|
|
10121
10121
|
{
|
|
10122
|
-
"fileName": "
|
|
10123
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10124
|
-
"rawContents": "import {
|
|
10122
|
+
"fileName": "tokens-demo.component.spec.ts",
|
|
10123
|
+
"filePath": "/projects/indicators/documentation/code-examples/tokens/basic/tokens-demo.component.spec.ts",
|
|
10124
|
+
"rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { NoopAnimationsModule } from '@angular/platform-browser/animations';\nimport { SkyToken } from '@skyux/indicators';\nimport { SkyTokensHarness } from '@skyux/indicators/testing';\n\nimport { TokensDemoColor } from './tokens-demo-color';\nimport { TokensDemoComponent } from './tokens-demo.component';\nimport { TokensDemoModule } from './tokens-demo.module';\n\ndescribe('Tokens basic demo', () => {\n async function setupTest(): Promise<{\n tokensHarness: SkyTokensHarness;\n fixture: ComponentFixture<TokensDemoComponent>;\n }> {\n const fixture = TestBed.createComponent(TokensDemoComponent);\n const loader = TestbedHarnessEnvironment.loader(fixture);\n\n const tokensHarness = await loader.getHarness(\n SkyTokensHarness.with({ dataSkyId: 'color-tokens' })\n );\n\n return { tokensHarness, fixture };\n }\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [NoopAnimationsModule, TokensDemoModule],\n });\n });\n\n it('should display the expected initial tokens', async () => {\n const { tokensHarness } = await setupTest();\n\n await expectAsync(tokensHarness.getTokensText()).toBeResolvedTo([\n 'Red',\n 'Black',\n 'Blue',\n 'Brown',\n 'Green',\n 'Orange',\n 'Pink',\n 'Purple',\n 'Turquoise',\n 'White',\n 'Yellow',\n ]);\n });\n\n it('should update the tokens array when one is dismissed', async () => {\n const { tokensHarness, fixture } = await setupTest();\n\n const blueToken: SkyToken<TokensDemoColor> = {\n value: { name: 'Blue' },\n };\n\n expect(fixture.componentInstance.colors).toContain(blueToken);\n\n await tokensHarness.dismissTokens({\n text: 'Blue',\n });\n\n expect(fixture.componentInstance.colors).not.toContain(blueToken);\n });\n});\n"
|
|
10125
10125
|
},
|
|
10126
10126
|
{
|
|
10127
|
-
"fileName": "
|
|
10128
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10129
|
-
"rawContents": "<sky-
|
|
10127
|
+
"fileName": "tokens-demo.component.html",
|
|
10128
|
+
"filePath": "/projects/indicators/documentation/code-examples/tokens/basic/tokens-demo.component.html",
|
|
10129
|
+
"rawContents": "<sky-tokens [(tokens)]=\"colors\" data-sky-id=\"color-tokens\"></sky-tokens>\n"
|
|
10130
10130
|
},
|
|
10131
10131
|
{
|
|
10132
|
-
"fileName": "
|
|
10133
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10134
|
-
"rawContents": "
|
|
10132
|
+
"fileName": "tokens-demo-color.ts",
|
|
10133
|
+
"filePath": "/projects/indicators/documentation/code-examples/tokens/basic/tokens-demo-color.ts",
|
|
10134
|
+
"rawContents": "export interface TokensDemoColor {\n name: string;\n}\n"
|
|
10135
10135
|
},
|
|
10136
10136
|
{
|
|
10137
|
-
"fileName": "
|
|
10138
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10139
|
-
"rawContents": "import {
|
|
10137
|
+
"fileName": "text-highlight-demo.module.ts",
|
|
10138
|
+
"filePath": "/projects/indicators/documentation/code-examples/text-highlight/basic/text-highlight-demo.module.ts",
|
|
10139
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { SkyIdModule } from '@skyux/core';\nimport { SkyCheckboxModule } from '@skyux/forms';\nimport { SkyTextHighlightModule } from '@skyux/indicators';\n\nimport { TextHighlightDemoComponent } from './text-highlight-demo.component';\n\n@NgModule({\n imports: [\n CommonModule,\n FormsModule,\n SkyCheckboxModule,\n SkyIdModule,\n SkyTextHighlightModule,\n ],\n exports: [TextHighlightDemoComponent],\n declarations: [TextHighlightDemoComponent],\n})\nexport class TextHighlightDemoModule {}\n"
|
|
10140
10140
|
},
|
|
10141
10141
|
{
|
|
10142
|
-
"fileName": "
|
|
10143
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10144
|
-
"rawContents": "import {
|
|
10142
|
+
"fileName": "text-highlight-demo.component.ts",
|
|
10143
|
+
"filePath": "/projects/indicators/documentation/code-examples/text-highlight/basic/text-highlight-demo.component.ts",
|
|
10144
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-text-highlight-demo',\n templateUrl: './text-highlight-demo.component.html',\n})\nexport class TextHighlightDemoComponent {\n public searchTerm = '';\n\n public showAdditionalContent = false;\n}\n"
|
|
10145
10145
|
},
|
|
10146
10146
|
{
|
|
10147
|
-
"fileName": "
|
|
10148
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10149
|
-
"rawContents": "<sky-
|
|
10147
|
+
"fileName": "text-highlight-demo.component.html",
|
|
10148
|
+
"filePath": "/projects/indicators/documentation/code-examples/text-highlight/basic/text-highlight-demo.component.html",
|
|
10149
|
+
"rawContents": "<div class=\"sky-form-group\" style=\"width: 200px\">\n <label [for]=\"searchTermInput.id\" class=\"sky-control-label\">\n Text to highlight\n </label>\n <br />\n <input\n class=\"sky-form-control\"\n id=\"sky-demo-search-term\"\n skyId\n type=\"text\"\n [(ngModel)]=\"searchTerm\"\n #searchTermInput=\"skyId\"\n />\n</div>\n\n<div class=\"sky-margin-stacked-lg\">\n <sky-checkbox [(ngModel)]=\"showAdditionalContent\">\n <sky-checkbox-label> Display additional content </sky-checkbox-label>\n </sky-checkbox>\n</div>\n\n<div [skyHighlight]=\"searchTerm\">\n The text that you enter is highlighted here.\n <div *ngIf=\"showAdditionalContent\">\n This additional content is highlighted too!\n </div>\n</div>\n"
|
|
10150
10150
|
},
|
|
10151
10151
|
{
|
|
10152
|
-
"fileName": "
|
|
10153
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10154
|
-
"rawContents": "import {
|
|
10152
|
+
"fileName": "status-indicator-demo.module.ts",
|
|
10153
|
+
"filePath": "/projects/indicators/documentation/code-examples/status-indicator/inline-help/status-indicator-demo.module.ts",
|
|
10154
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport {\n SkyHelpInlineModule,\n SkyStatusIndicatorModule,\n} from '@skyux/indicators';\n\nimport { StatusIndicatorDemoComponent } from './status-indicator-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyHelpInlineModule, SkyStatusIndicatorModule],\n declarations: [StatusIndicatorDemoComponent],\n exports: [StatusIndicatorDemoComponent],\n})\nexport class StatusIndicatorDemoModule {}\n"
|
|
10155
10155
|
},
|
|
10156
10156
|
{
|
|
10157
|
-
"fileName": "
|
|
10158
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10159
|
-
"rawContents": "import { Component
|
|
10157
|
+
"fileName": "status-indicator-demo.component.ts",
|
|
10158
|
+
"filePath": "/projects/indicators/documentation/code-examples/status-indicator/inline-help/status-indicator-demo.component.ts",
|
|
10159
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-status-indicator-demo',\n templateUrl: './status-indicator-demo.component.html',\n})\nexport class StatusIndicatorDemoComponent {\n public onActionClick(): void {\n alert('Help inline button clicked!');\n }\n}\n"
|
|
10160
10160
|
},
|
|
10161
10161
|
{
|
|
10162
|
-
"fileName": "
|
|
10163
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10164
|
-
"rawContents": "
|
|
10162
|
+
"fileName": "status-indicator-demo.component.html",
|
|
10163
|
+
"filePath": "/projects/indicators/documentation/code-examples/status-indicator/inline-help/status-indicator-demo.component.html",
|
|
10164
|
+
"rawContents": "<sky-status-indicator descriptionType=\"error\" indicatorType=\"danger\">\n Danger status indicator\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n</sky-status-indicator>\n\n<sky-status-indicator descriptionType=\"important-info\" indicatorType=\"info\">\n Info status indicator\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n</sky-status-indicator>\n\n<sky-status-indicator descriptionType=\"completed\" indicatorType=\"success\">\n Success status indicator\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n</sky-status-indicator>\n\n<sky-status-indicator descriptionType=\"warning\" indicatorType=\"warning\">\n Warning status indicator\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n</sky-status-indicator>\n\n<sky-status-indicator\n descriptionType=\"custom\"\n indicatorType=\"warning\"\n customDescription=\"Custom warning\"\n>\n Warning status indicator with custom screen reader description\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n</sky-status-indicator>\n"
|
|
10165
10165
|
},
|
|
10166
10166
|
{
|
|
10167
|
-
"fileName": "
|
|
10168
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10169
|
-
"rawContents": "
|
|
10167
|
+
"fileName": "status-indicator-demo.module.ts",
|
|
10168
|
+
"filePath": "/projects/indicators/documentation/code-examples/status-indicator/basic/status-indicator-demo.module.ts",
|
|
10169
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport {\n SkyHelpInlineModule,\n SkyStatusIndicatorModule,\n} from '@skyux/indicators';\n\nimport { StatusIndicatorDemoComponent } from './status-indicator-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyHelpInlineModule, SkyStatusIndicatorModule],\n declarations: [StatusIndicatorDemoComponent],\n exports: [StatusIndicatorDemoComponent],\n})\nexport class StatusIndicatorDemoModule {}\n"
|
|
10170
10170
|
},
|
|
10171
10171
|
{
|
|
10172
|
-
"fileName": "
|
|
10173
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10174
|
-
"rawContents": "import {
|
|
10172
|
+
"fileName": "status-indicator-demo.component.ts",
|
|
10173
|
+
"filePath": "/projects/indicators/documentation/code-examples/status-indicator/basic/status-indicator-demo.component.ts",
|
|
10174
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-status-indicator-demo',\n templateUrl: './status-indicator-demo.component.html',\n})\nexport class StatusIndicatorDemoComponent {\n public onActionClick(): void {\n alert('Help inline button clicked!');\n }\n}\n"
|
|
10175
10175
|
},
|
|
10176
10176
|
{
|
|
10177
|
-
"fileName": "
|
|
10178
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10179
|
-
"rawContents": "
|
|
10177
|
+
"fileName": "status-indicator-demo.component.html",
|
|
10178
|
+
"filePath": "/projects/indicators/documentation/code-examples/status-indicator/basic/status-indicator-demo.component.html",
|
|
10179
|
+
"rawContents": "<sky-status-indicator descriptionType=\"error\" indicatorType=\"danger\">\n Danger status indicator\n</sky-status-indicator>\n\n<sky-status-indicator descriptionType=\"important-info\" indicatorType=\"info\">\n Info status indicator\n</sky-status-indicator>\n\n<sky-status-indicator descriptionType=\"completed\" indicatorType=\"success\">\n Success status indicator\n</sky-status-indicator>\n\n<sky-status-indicator descriptionType=\"warning\" indicatorType=\"warning\">\n Warning status indicator\n</sky-status-indicator>\n\n<sky-status-indicator\n descriptionType=\"custom\"\n indicatorType=\"warning\"\n customDescription=\"Custom warning\"\n>\n Warning status indicator with custom screen reader description\n</sky-status-indicator>\n\n<sky-status-indicator descriptionType=\"error\" indicatorType=\"danger\">\n Status indicator with help\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n</sky-status-indicator>\n"
|
|
10180
10180
|
},
|
|
10181
10181
|
{
|
|
10182
10182
|
"fileName": "label-demo.module.ts",
|
|
@@ -10184,139 +10184,139 @@
|
|
|
10184
10184
|
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyLabelModule } from '@skyux/indicators';\n\nimport { LabelDemoComponent } from './label-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyLabelModule],\n exports: [LabelDemoComponent],\n declarations: [LabelDemoComponent],\n})\nexport class LabelDemoModule {}\n"
|
|
10185
10185
|
},
|
|
10186
10186
|
{
|
|
10187
|
-
"fileName": "
|
|
10188
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10189
|
-
"rawContents": "
|
|
10187
|
+
"fileName": "label-demo.component.ts",
|
|
10188
|
+
"filePath": "/projects/indicators/documentation/code-examples/label/basic/label-demo.component.ts",
|
|
10189
|
+
"rawContents": "import { Component, Input } from '@angular/core';\nimport { SkyIndicatorDescriptionType, SkyLabelType } from '@skyux/indicators';\n\n@Component({\n selector: 'app-label-demo',\n templateUrl: './label-demo.component.html',\n})\nexport class LabelDemoComponent {\n @Input()\n public get daysUntilDue(): number {\n return this.#_daysUntilDue;\n }\n\n public set daysUntilDue(days: number) {\n this.#_daysUntilDue = days;\n this.updateLabelProperties(this.submitted, days);\n }\n\n @Input()\n public get submitted(): boolean {\n return this.#_submitted;\n }\n\n public set submitted(submitted: boolean) {\n this.#_submitted = submitted;\n this.updateLabelProperties(submitted, this.daysUntilDue);\n }\n\n public labelType: SkyLabelType = 'info';\n public descriptionType: SkyIndicatorDescriptionType = 'attention';\n public labelText = 'Incomplete';\n public todaysDate = new Date('9/14/22');\n #_daysUntilDue = 14;\n #_submitted = false;\n\n private updateLabelProperties(submitted: boolean, days: number): void {\n if (submitted) {\n this.labelType = 'success';\n this.descriptionType = 'completed';\n this.labelText = 'Submitted';\n } else if (days <= 0) {\n this.labelType = 'danger';\n this.descriptionType = 'danger';\n this.labelText = 'Overdue';\n } else if (days <= 7) {\n this.labelType = 'warning';\n this.descriptionType = 'important-warning';\n this.labelText = 'Due soon';\n } else {\n this.labelType = 'info';\n this.descriptionType = 'attention';\n this.labelText = 'Incomplete';\n }\n }\n}\n"
|
|
10190
10190
|
},
|
|
10191
10191
|
{
|
|
10192
|
-
"fileName": "
|
|
10193
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10194
|
-
"rawContents": "import {
|
|
10192
|
+
"fileName": "label-demo.component.spec.ts",
|
|
10193
|
+
"filePath": "/projects/indicators/documentation/code-examples/label/basic/label-demo.component.spec.ts",
|
|
10194
|
+
"rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { SkyLabelHarness } from '@skyux/indicators/testing';\n\nimport { LabelDemoComponent } from './label-demo.component';\nimport { LabelDemoModule } from './label-demo.module';\n\ndescribe('Basic label', () => {\n async function setupTest(options?: {\n daysUntilDue?: number;\n submitted?: boolean;\n }): Promise<{\n labelHarness: SkyLabelHarness;\n fixture: ComponentFixture<LabelDemoComponent>;\n }> {\n const fixture = TestBed.createComponent(LabelDemoComponent);\n\n if (options?.daysUntilDue !== undefined) {\n fixture.componentInstance.daysUntilDue = options.daysUntilDue;\n }\n\n if (options?.submitted !== undefined) {\n fixture.componentInstance.submitted = options.submitted;\n }\n\n const loader = TestbedHarnessEnvironment.loader(fixture);\n\n const labelHarness = await loader.getHarness(\n SkyLabelHarness.with({ dataSkyId: 'label-demo' })\n );\n\n return { labelHarness, fixture };\n }\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [LabelDemoModule],\n });\n });\n\n it('should show an info label when submitted is false and there is more than a week until due', async () => {\n const { labelHarness, fixture } = await setupTest({ daysUntilDue: 8 });\n fixture.detectChanges();\n\n await expectAsync(labelHarness.getLabelType()).toBeResolvedTo('info');\n await expectAsync(labelHarness.getDescriptionType()).toBeResolvedTo(\n 'attention'\n );\n await expectAsync(labelHarness.getLabelText()).toBeResolvedTo('Incomplete');\n });\n\n it('should show a warning label when submitted is false and there is less than a week until due', async () => {\n const { labelHarness, fixture } = await setupTest({ daysUntilDue: 6 });\n fixture.detectChanges();\n\n await expectAsync(labelHarness.getLabelType()).toBeResolvedTo('warning');\n await expectAsync(labelHarness.getDescriptionType()).toBeResolvedTo(\n 'important-warning'\n );\n await expectAsync(labelHarness.getLabelText()).toBeResolvedTo('Due soon');\n });\n\n it('should show a danger label when submitted is false and it is past due', async () => {\n const { labelHarness, fixture } = await setupTest({ daysUntilDue: -1 });\n fixture.detectChanges();\n\n await expectAsync(labelHarness.getLabelType()).toBeResolvedTo('danger');\n await expectAsync(labelHarness.getDescriptionType()).toBeResolvedTo(\n 'danger'\n );\n await expectAsync(labelHarness.getLabelText()).toBeResolvedTo('Overdue');\n });\n\n it('should show a success label when submitted is true', async () => {\n const { labelHarness, fixture } = await setupTest({ submitted: true });\n fixture.detectChanges();\n\n await expectAsync(labelHarness.getLabelType()).toBeResolvedTo('success');\n await expectAsync(labelHarness.getDescriptionType()).toBeResolvedTo(\n 'completed'\n );\n await expectAsync(labelHarness.getLabelText()).toBeResolvedTo('Submitted');\n });\n});\n"
|
|
10195
10195
|
},
|
|
10196
10196
|
{
|
|
10197
|
-
"fileName": "
|
|
10198
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10199
|
-
"rawContents": "
|
|
10197
|
+
"fileName": "label-demo.component.html",
|
|
10198
|
+
"filePath": "/projects/indicators/documentation/code-examples/label/basic/label-demo.component.html",
|
|
10199
|
+
"rawContents": "<sky-label\n data-sky-id=\"label-demo\"\n [labelType]=\"labelType\"\n [descriptionType]=\"descriptionType\"\n>\n {{ labelText }}\n</sky-label>\n"
|
|
10200
10200
|
},
|
|
10201
10201
|
{
|
|
10202
|
-
"fileName": "
|
|
10203
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10204
|
-
"rawContents": "
|
|
10202
|
+
"fileName": "key-info-demo.module.ts",
|
|
10203
|
+
"filePath": "/projects/indicators/documentation/code-examples/key-info/inline-help/key-info-demo.module.ts",
|
|
10204
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule, SkyKeyInfoModule } from '@skyux/indicators';\n\nimport { KeyInfoDemoComponent } from './key-info-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyKeyInfoModule, SkyHelpInlineModule],\n declarations: [KeyInfoDemoComponent],\n exports: [KeyInfoDemoComponent],\n})\nexport class KeyInfoDemoModule {}\n"
|
|
10205
10205
|
},
|
|
10206
10206
|
{
|
|
10207
|
-
"fileName": "
|
|
10208
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10209
|
-
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-
|
|
10207
|
+
"fileName": "key-info-demo.component.ts",
|
|
10208
|
+
"filePath": "/projects/indicators/documentation/code-examples/key-info/inline-help/key-info-demo.component.ts",
|
|
10209
|
+
"rawContents": "import { Component, Input } from '@angular/core';\nimport { SkyKeyInfoLayoutType } from '@skyux/indicators';\n\n@Component({\n selector: 'app-key-info-demo',\n templateUrl: './key-info-demo.component.html',\n})\nexport class KeyInfoDemoComponent {\n @Input()\n public set value(value: number | undefined) {\n this.#_value = value;\n this.layout =\n this.#_value && this.#_value >= 100 ? 'vertical' : 'horizontal';\n }\n\n public get value(): number | undefined {\n return this.#_value;\n }\n\n public layout: SkyKeyInfoLayoutType = 'vertical';\n\n #_value: number | undefined = 575;\n\n public onActionClick(): void {\n alert('Help inline button clicked!');\n }\n}\n"
|
|
10210
10210
|
},
|
|
10211
10211
|
{
|
|
10212
|
-
"fileName": "
|
|
10213
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10214
|
-
"rawContents": "import {
|
|
10212
|
+
"fileName": "key-info-demo.component.spec.ts",
|
|
10213
|
+
"filePath": "/projects/indicators/documentation/code-examples/key-info/inline-help/key-info-demo.component.spec.ts",
|
|
10214
|
+
"rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { SkyKeyInfoHarness } from '@skyux/indicators/testing';\n\nimport { KeyInfoDemoComponent } from './key-info-demo.component';\nimport { KeyInfoDemoModule } from './key-info-demo.module';\n\ndescribe('Basic key info', () => {\n async function setupTest(options?: { value?: number }): Promise<{\n keyInfoHarness: SkyKeyInfoHarness;\n fixture: ComponentFixture<KeyInfoDemoComponent>;\n }> {\n const fixture = TestBed.createComponent(KeyInfoDemoComponent);\n\n if (options?.value !== undefined) {\n fixture.componentInstance.value = options.value;\n }\n\n const loader = TestbedHarnessEnvironment.loader(fixture);\n\n const keyInfoHarness = await loader.getHarness(\n SkyKeyInfoHarness.with({ dataSkyId: 'key-info-demo' })\n );\n\n return { keyInfoHarness, fixture };\n }\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [KeyInfoDemoModule],\n });\n });\n\n it('should display a vertical key info', async () => {\n const { keyInfoHarness } = await setupTest({ value: 101 });\n\n await expectAsync(keyInfoHarness.getLayout()).toBeResolvedTo('vertical');\n await expectAsync(keyInfoHarness.getValueText()).toBeResolvedTo('101');\n await expectAsync(keyInfoHarness.getLabelText()).toBeResolvedTo(\n 'New members'\n );\n });\n\n it('should display a horizontal key info', async () => {\n const { keyInfoHarness } = await setupTest({ value: 50 });\n\n await expectAsync(keyInfoHarness.getLayout()).toBeResolvedTo('horizontal');\n await expectAsync(keyInfoHarness.getValueText()).toBeResolvedTo('50');\n await expectAsync(keyInfoHarness.getLabelText()).toBeResolvedTo(\n 'New members'\n );\n });\n});\n"
|
|
10215
10215
|
},
|
|
10216
10216
|
{
|
|
10217
|
-
"fileName": "
|
|
10218
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10219
|
-
"rawContents": "<
|
|
10217
|
+
"fileName": "key-info-demo.component.html",
|
|
10218
|
+
"filePath": "/projects/indicators/documentation/code-examples/key-info/inline-help/key-info-demo.component.html",
|
|
10219
|
+
"rawContents": "<sky-key-info [layout]=\"layout\" data-sky-id=\"key-info-demo\">\n <sky-key-info-value>{{ value }}</sky-key-info-value>\n <sky-key-info-label>New members</sky-key-info-label>\n <sky-help-inline\n class=\"sky-control-help\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n</sky-key-info>\n"
|
|
10220
10220
|
},
|
|
10221
10221
|
{
|
|
10222
|
-
"fileName": "
|
|
10223
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10224
|
-
"rawContents": "import {
|
|
10222
|
+
"fileName": "key-info-demo.module.ts",
|
|
10223
|
+
"filePath": "/projects/indicators/documentation/code-examples/key-info/basic/key-info-demo.module.ts",
|
|
10224
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyKeyInfoModule } from '@skyux/indicators';\n\nimport { KeyInfoDemoComponent } from './key-info-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyKeyInfoModule],\n declarations: [KeyInfoDemoComponent],\n exports: [KeyInfoDemoComponent],\n})\nexport class KeyInfoDemoModule {}\n"
|
|
10225
10225
|
},
|
|
10226
10226
|
{
|
|
10227
|
-
"fileName": "
|
|
10228
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10229
|
-
"rawContents": "import {
|
|
10227
|
+
"fileName": "key-info-demo.component.ts",
|
|
10228
|
+
"filePath": "/projects/indicators/documentation/code-examples/key-info/basic/key-info-demo.component.ts",
|
|
10229
|
+
"rawContents": "import { Component, Input } from '@angular/core';\nimport { SkyKeyInfoLayoutType } from '@skyux/indicators';\n\n@Component({\n selector: 'app-key-info-demo',\n templateUrl: './key-info-demo.component.html',\n})\nexport class KeyInfoDemoComponent {\n @Input()\n public set value(value: number | undefined) {\n this.#_value = value;\n this.layout =\n this.#_value && this.#_value >= 100 ? 'vertical' : 'horizontal';\n }\n\n public get value(): number | undefined {\n return this.#_value;\n }\n\n public layout: SkyKeyInfoLayoutType = 'vertical';\n\n #_value: number | undefined = 575;\n}\n"
|
|
10230
10230
|
},
|
|
10231
10231
|
{
|
|
10232
|
-
"fileName": "
|
|
10233
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10234
|
-
"rawContents": "
|
|
10232
|
+
"fileName": "key-info-demo.component.spec.ts",
|
|
10233
|
+
"filePath": "/projects/indicators/documentation/code-examples/key-info/basic/key-info-demo.component.spec.ts",
|
|
10234
|
+
"rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { SkyKeyInfoHarness } from '@skyux/indicators/testing';\n\nimport { KeyInfoDemoComponent } from './key-info-demo.component';\nimport { KeyInfoDemoModule } from './key-info-demo.module';\n\ndescribe('Basic key info', () => {\n async function setupTest(options?: { value?: number }): Promise<{\n keyInfoHarness: SkyKeyInfoHarness;\n fixture: ComponentFixture<KeyInfoDemoComponent>;\n }> {\n const fixture = TestBed.createComponent(KeyInfoDemoComponent);\n\n if (options?.value !== undefined) {\n fixture.componentInstance.value = options.value;\n }\n\n const loader = TestbedHarnessEnvironment.loader(fixture);\n\n const keyInfoHarness = await loader.getHarness(\n SkyKeyInfoHarness.with({ dataSkyId: 'key-info-demo' })\n );\n\n return { keyInfoHarness, fixture };\n }\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [KeyInfoDemoModule],\n });\n });\n\n it('should display a vertical key info', async () => {\n const { keyInfoHarness } = await setupTest({ value: 101 });\n\n await expectAsync(keyInfoHarness.getLayout()).toBeResolvedTo('vertical');\n await expectAsync(keyInfoHarness.getValueText()).toBeResolvedTo('101');\n await expectAsync(keyInfoHarness.getLabelText()).toBeResolvedTo(\n 'New members'\n );\n });\n\n it('should display a horizontal key info', async () => {\n const { keyInfoHarness } = await setupTest({ value: 50 });\n\n await expectAsync(keyInfoHarness.getLayout()).toBeResolvedTo('horizontal');\n await expectAsync(keyInfoHarness.getValueText()).toBeResolvedTo('50');\n await expectAsync(keyInfoHarness.getLabelText()).toBeResolvedTo(\n 'New members'\n );\n });\n});\n"
|
|
10235
10235
|
},
|
|
10236
10236
|
{
|
|
10237
|
-
"fileName": "
|
|
10238
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10239
|
-
"rawContents": "<sky-
|
|
10237
|
+
"fileName": "key-info-demo.component.html",
|
|
10238
|
+
"filePath": "/projects/indicators/documentation/code-examples/key-info/basic/key-info-demo.component.html",
|
|
10239
|
+
"rawContents": "<sky-key-info [layout]=\"layout\" data-sky-id=\"key-info-demo\">\n <sky-key-info-value class=\"sky-font-display-3\">\n {{ value }}\n </sky-key-info-value>\n <sky-key-info-label> New members </sky-key-info-label>\n</sky-key-info>\n"
|
|
10240
10240
|
},
|
|
10241
10241
|
{
|
|
10242
|
-
"fileName": "
|
|
10243
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10244
|
-
"rawContents": "import {
|
|
10242
|
+
"fileName": "icon-button-demo.module.ts",
|
|
10243
|
+
"filePath": "/projects/indicators/documentation/code-examples/icon/icon-button/icon-button-demo.module.ts",
|
|
10244
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyIconModule } from '@skyux/indicators';\n\nimport { IconDemoComponent } from './icon-button-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyIconModule],\n declarations: [IconDemoComponent],\n exports: [IconDemoComponent],\n})\nexport class IconDemoModule {}\n"
|
|
10245
10245
|
},
|
|
10246
10246
|
{
|
|
10247
|
-
"fileName": "
|
|
10248
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10249
|
-
"rawContents": "import { Component } from '@angular/core';\
|
|
10247
|
+
"fileName": "icon-button-demo.component.ts",
|
|
10248
|
+
"filePath": "/projects/indicators/documentation/code-examples/icon/icon-button/icon-button-demo.component.ts",
|
|
10249
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-icon-demo',\n templateUrl: './icon-button-demo.component.html',\n})\nexport class IconDemoComponent {\n public textButtonClick(): void {\n alert('Text with icon button clicked');\n }\n\n public iconOnlyButtonClick(): void {\n alert('Icon only button clicked');\n }\n}\n"
|
|
10250
10250
|
},
|
|
10251
10251
|
{
|
|
10252
|
-
"fileName": "
|
|
10253
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10254
|
-
"rawContents": "import {
|
|
10252
|
+
"fileName": "icon-button-demo.component.spec.ts",
|
|
10253
|
+
"filePath": "/projects/indicators/documentation/code-examples/icon/icon-button/icon-button-demo.component.spec.ts",
|
|
10254
|
+
"rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { SkyIconHarness } from '@skyux/indicators/testing';\n\nimport { IconDemoComponent } from './icon-button-demo.component';\nimport { IconDemoModule } from './icon-button-demo.module';\n\ndescribe('Icon button', () => {\n async function setupTest(options: { dataSkyId?: string }): Promise<{\n iconHarness: SkyIconHarness;\n fixture: ComponentFixture<IconDemoComponent>;\n }> {\n const fixture = TestBed.createComponent(IconDemoComponent);\n const loader = TestbedHarnessEnvironment.loader(fixture);\n const iconHarness = await loader.getHarness(\n SkyIconHarness.with({\n dataSkyId: options?.dataSkyId,\n })\n );\n\n return { iconHarness, fixture };\n }\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [IconDemoModule],\n });\n });\n\n it('should display the icon in the text icon button', async () => {\n const { iconHarness, fixture } = await setupTest({\n dataSkyId: 'text-button-icon',\n });\n\n fixture.detectChanges();\n\n await expectAsync(iconHarness.getIconName()).toBeResolvedTo('save');\n });\n\n it('should display the icon in the icon only button', async () => {\n const { iconHarness, fixture } = await setupTest({\n dataSkyId: 'button-icon',\n });\n\n fixture.detectChanges();\n\n await expectAsync(iconHarness.getIconName()).toBeResolvedTo('edit');\n });\n});\n"
|
|
10255
10255
|
},
|
|
10256
10256
|
{
|
|
10257
|
-
"fileName": "
|
|
10258
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10259
|
-
"rawContents": "
|
|
10257
|
+
"fileName": "icon-button-demo.component.html",
|
|
10258
|
+
"filePath": "/projects/indicators/documentation/code-examples/icon/icon-button/icon-button-demo.component.html",
|
|
10259
|
+
"rawContents": "<button\n type=\"button\"\n class=\"sky-btn sky-btn-default\"\n (click)=\"textButtonClick()\"\n>\n Save\n <sky-icon\n data-sky-id=\"text-button-icon\"\n icon=\"save\"\n iconType=\"skyux\"\n ></sky-icon>\n</button>\n\n<button\n type=\"button\"\n class=\"sky-btn sky-btn-icon-borderless\"\n (click)=\"iconOnlyButtonClick()\"\n>\n <sky-icon data-sky-id=\"button-icon\" icon=\"edit\" size=\"lg\"></sky-icon>\n</button>\n"
|
|
10260
10260
|
},
|
|
10261
10261
|
{
|
|
10262
|
-
"fileName": "
|
|
10263
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10264
|
-
"rawContents": "
|
|
10262
|
+
"fileName": "icon-demo.module.ts",
|
|
10263
|
+
"filePath": "/projects/indicators/documentation/code-examples/icon/basic/icon-demo.module.ts",
|
|
10264
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyIconModule } from '@skyux/indicators';\n\nimport { IconDemoComponent } from './icon-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyIconModule],\n declarations: [IconDemoComponent],\n exports: [IconDemoComponent],\n})\nexport class IconDemoModule {}\n"
|
|
10265
10265
|
},
|
|
10266
10266
|
{
|
|
10267
|
-
"fileName": "
|
|
10268
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10269
|
-
"rawContents": "import {
|
|
10267
|
+
"fileName": "icon-demo.component.ts",
|
|
10268
|
+
"filePath": "/projects/indicators/documentation/code-examples/icon/basic/icon-demo.component.ts",
|
|
10269
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-icon-demo',\n templateUrl: './icon-demo.component.html',\n})\nexport class IconDemoComponent {}\n"
|
|
10270
10270
|
},
|
|
10271
10271
|
{
|
|
10272
|
-
"fileName": "
|
|
10273
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10274
|
-
"rawContents": "import {
|
|
10272
|
+
"fileName": "icon-demo.component.spec.ts",
|
|
10273
|
+
"filePath": "/projects/indicators/documentation/code-examples/icon/basic/icon-demo.component.spec.ts",
|
|
10274
|
+
"rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { SkyIconHarness } from '@skyux/indicators/testing';\n\nimport { IconDemoComponent } from './icon-demo.component';\nimport { IconDemoModule } from './icon-demo.module';\n\ndescribe('Basic icon', () => {\n async function setupTest(): Promise<{\n iconHarness: SkyIconHarness;\n fixture: ComponentFixture<IconDemoComponent>;\n }> {\n const fixture = TestBed.createComponent(IconDemoComponent);\n const loader = TestbedHarnessEnvironment.loader(fixture);\n const iconHarness = await loader.getHarness(\n SkyIconHarness.with({\n dataSkyId: 'icon-demo',\n })\n );\n\n return { iconHarness, fixture };\n }\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [IconDemoModule],\n });\n });\n\n it('should display the correct icon', async () => {\n const { iconHarness, fixture } = await setupTest();\n\n fixture.detectChanges();\n\n await expectAsync(iconHarness.getIconName()).toBeResolvedTo('calendar');\n await expectAsync(iconHarness.getIconType()).toBeResolvedTo('skyux');\n await expectAsync(iconHarness.getVariant()).toBeResolvedTo('solid');\n await expectAsync(iconHarness.getIconSize()).toBeResolvedTo('4x');\n await expectAsync(iconHarness.isFixedWidth()).toBeResolvedTo(true);\n });\n});\n"
|
|
10275
10275
|
},
|
|
10276
10276
|
{
|
|
10277
|
-
"fileName": "
|
|
10278
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10279
|
-
"rawContents": "
|
|
10277
|
+
"fileName": "icon-demo.component.html",
|
|
10278
|
+
"filePath": "/projects/indicators/documentation/code-examples/icon/basic/icon-demo.component.html",
|
|
10279
|
+
"rawContents": "<sky-icon icon=\"calendar\"></sky-icon>\n<sky-icon icon=\"calendar\" size=\"lg\"></sky-icon>\n<sky-icon icon=\"calendar\" size=\"2x\" iconType=\"skyux\"></sky-icon>\n<sky-icon icon=\"calendar\" iconType=\"skyux\" variant=\"line\" size=\"3x\"></sky-icon>\n<sky-icon\n data-sky-id=\"icon-demo\"\n icon=\"calendar\"\n iconType=\"skyux\"\n variant=\"solid\"\n size=\"4x\"\n [fixedWidth]=\"true\"\n></sky-icon>\n\n<div>\n <sky-icon icon=\"bars\" size=\"2x\"></sky-icon>\n</div>\n<div>\n <sky-icon icon=\"chevron-down\" size=\"2x\"></sky-icon>\n</div>\n\n<div>\n <sky-icon icon=\"bars\" size=\"2x\" [fixedWidth]=\"true\"></sky-icon>\n</div>\n<div>\n <sky-icon icon=\"chevron-down\" size=\"2x\" [fixedWidth]=\"true\"></sky-icon>\n</div>\n"
|
|
10280
10280
|
},
|
|
10281
10281
|
{
|
|
10282
|
-
"fileName": "
|
|
10283
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10284
|
-
"rawContents": "
|
|
10282
|
+
"fileName": "help-inline-demo.module.ts",
|
|
10283
|
+
"filePath": "/projects/indicators/documentation/code-examples/help-inline/basic/help-inline-demo.module.ts",
|
|
10284
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyHelpInlineModule } from '@skyux/indicators';\n\nimport { HelpInlineDemoComponent } from './help-inline-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyHelpInlineModule],\n exports: [HelpInlineDemoComponent],\n declarations: [HelpInlineDemoComponent],\n})\nexport class HelpInlineDemoModule {}\n"
|
|
10285
10285
|
},
|
|
10286
10286
|
{
|
|
10287
|
-
"fileName": "
|
|
10288
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10289
|
-
"rawContents": "import {
|
|
10287
|
+
"fileName": "help-inline-demo.component.ts",
|
|
10288
|
+
"filePath": "/projects/indicators/documentation/code-examples/help-inline/basic/help-inline-demo.component.ts",
|
|
10289
|
+
"rawContents": "import { Component } from '@angular/core';\n\n@Component({\n selector: 'app-help-inline-demo',\n templateUrl: './help-inline-demo.component.html',\n})\nexport class HelpInlineDemoComponent {\n public onActionClick(): void {\n alert('Use help inline to show supplemental information to the user.');\n }\n}\n"
|
|
10290
10290
|
},
|
|
10291
10291
|
{
|
|
10292
|
-
"fileName": "
|
|
10293
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10294
|
-
"rawContents": "import {
|
|
10292
|
+
"fileName": "help-inline-demo.component.spec.ts",
|
|
10293
|
+
"filePath": "/projects/indicators/documentation/code-examples/help-inline/basic/help-inline-demo.component.spec.ts",
|
|
10294
|
+
"rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { ComponentFixture, TestBed } from '@angular/core/testing';\nimport { SkyHelpInlineHarness } from '@skyux/indicators/testing';\n\nimport { HelpInlineDemoComponent } from './help-inline-demo.component';\nimport { HelpInlineDemoModule } from './help-inline-demo.module';\n\ndescribe('Basic help inline', () => {\n async function setupTest(): Promise<{\n helpInlineHarness: SkyHelpInlineHarness;\n fixture: ComponentFixture<HelpInlineDemoComponent>;\n }> {\n const fixture = TestBed.createComponent(HelpInlineDemoComponent);\n const loader = TestbedHarnessEnvironment.loader(fixture);\n const helpInlineHarness = await loader.getHarness(\n SkyHelpInlineHarness.with({\n dataSkyId: 'help-inline-demo',\n })\n );\n\n return { helpInlineHarness, fixture };\n }\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [HelpInlineDemoModule],\n });\n });\n\n it('should click the help inline button', async () => {\n const { helpInlineHarness, fixture } = await setupTest();\n fixture.detectChanges();\n\n const clickSpy = spyOn(fixture.componentInstance, 'onActionClick');\n await helpInlineHarness.click();\n expect(clickSpy).toHaveBeenCalled();\n });\n});\n"
|
|
10295
10295
|
},
|
|
10296
10296
|
{
|
|
10297
|
-
"fileName": "
|
|
10298
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10299
|
-
"rawContents": "
|
|
10297
|
+
"fileName": "help-inline-demo.component.html",
|
|
10298
|
+
"filePath": "/projects/indicators/documentation/code-examples/help-inline/basic/help-inline-demo.component.html",
|
|
10299
|
+
"rawContents": "<h3>\n Projected revenue\n <sky-help-inline\n data-sky-id=\"help-inline-demo\"\n (actionClick)=\"onActionClick()\"\n ></sky-help-inline>\n</h3>\n"
|
|
10300
10300
|
},
|
|
10301
10301
|
{
|
|
10302
|
-
"fileName": "
|
|
10303
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10304
|
-
"rawContents": "
|
|
10302
|
+
"fileName": "alert-demo.module.ts",
|
|
10303
|
+
"filePath": "/projects/indicators/documentation/code-examples/alert/basic/alert-demo.module.ts",
|
|
10304
|
+
"rawContents": "import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { SkyAlertModule } from '@skyux/indicators';\n\nimport { AlertDemoComponent } from './alert-demo.component';\n\n@NgModule({\n imports: [CommonModule, SkyAlertModule],\n declarations: [AlertDemoComponent],\n exports: [AlertDemoComponent],\n})\nexport class AlertDemoModule {}\n"
|
|
10305
10305
|
},
|
|
10306
10306
|
{
|
|
10307
|
-
"fileName": "
|
|
10308
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10309
|
-
"rawContents": "import {
|
|
10307
|
+
"fileName": "alert-demo.component.ts",
|
|
10308
|
+
"filePath": "/projects/indicators/documentation/code-examples/alert/basic/alert-demo.component.ts",
|
|
10309
|
+
"rawContents": "import { ChangeDetectionStrategy, Component, Input } from '@angular/core';\n\n@Component({\n selector: 'app-alert-demo',\n templateUrl: './alert-demo.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AlertDemoComponent {\n @Input()\n public days = 9;\n\n public onClosedChange(event: boolean): void {\n alert(`Alert closed with: ${event}`);\n }\n}\n"
|
|
10310
10310
|
},
|
|
10311
10311
|
{
|
|
10312
|
-
"fileName": "
|
|
10313
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10314
|
-
"rawContents": "import {
|
|
10312
|
+
"fileName": "alert-demo.component.spec.ts",
|
|
10313
|
+
"filePath": "/projects/indicators/documentation/code-examples/alert/basic/alert-demo.component.spec.ts",
|
|
10314
|
+
"rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { TestBed } from '@angular/core/testing';\nimport { SkyAlertHarness } from '@skyux/indicators/testing';\n\nimport { AlertDemoComponent } from './alert-demo.component';\nimport { AlertDemoModule } from './alert-demo.module';\n\ndescribe('Basic alert', () => {\n async function setupTest(options?: { days?: number }) {\n const fixture = TestBed.createComponent(AlertDemoComponent);\n\n if (options?.days !== undefined) {\n fixture.componentInstance.days = options.days;\n }\n\n const loader = TestbedHarnessEnvironment.loader(fixture);\n\n const alertHarness = await loader.getHarness(\n SkyAlertHarness.with({ dataSkyId: 'alert-demo' })\n );\n\n return { alertHarness, fixture };\n }\n\n beforeEach(() => {\n TestBed.configureTestingModule({\n imports: [AlertDemoModule],\n });\n });\n\n it('should show the expected alert when the number of days is 8 or more', async () => {\n const { alertHarness, fixture } = await setupTest({ days: 8 });\n fixture.detectChanges();\n\n await expectAsync(alertHarness.getAlertType()).toBeResolvedTo('warning');\n await expectAsync(alertHarness.getText()).toBeResolvedTo(\n 'Your password expires in 8 day(s)!'\n );\n await expectAsync(alertHarness.isCloseable()).toBeResolvedTo(true);\n });\n\n it('should show the expected alert when the number of days is 7 or fewer', async () => {\n const { alertHarness, fixture } = await setupTest({ days: 7 });\n fixture.detectChanges();\n\n await expectAsync(alertHarness.getAlertType()).toBeResolvedTo('danger');\n await expectAsync(alertHarness.getText()).toBeResolvedTo(\n 'Your password expires in 7 day(s)!'\n );\n await expectAsync(alertHarness.isCloseable()).toBeResolvedTo(false);\n });\n});\n"
|
|
10315
10315
|
},
|
|
10316
10316
|
{
|
|
10317
|
-
"fileName": "
|
|
10318
|
-
"filePath": "/projects/indicators/documentation/code-examples/
|
|
10319
|
-
"rawContents": "
|
|
10317
|
+
"fileName": "alert-demo.component.html",
|
|
10318
|
+
"filePath": "/projects/indicators/documentation/code-examples/alert/basic/alert-demo.component.html",
|
|
10319
|
+
"rawContents": "<sky-alert\n data-sky-id=\"alert-demo\"\n [alertType]=\"days < 8 ? 'danger' : 'warning'\"\n [closeable]=\"days >= 8\"\n [descriptionType]=\"days < 8 ? 'danger' : 'important-warning'\"\n (closedChange)=\"onClosedChange($event)\"\n>\n Your password expires in {{ days }} day(s)!\n</sky-alert>\n"
|
|
10320
10320
|
}
|
|
10321
10321
|
]
|
|
10322
10322
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyux/indicators",
|
|
3
|
-
"version": "9.0.0-alpha.
|
|
3
|
+
"version": "9.0.0-alpha.1",
|
|
4
4
|
"author": "Blackbaud, Inc.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"blackbaud",
|
|
@@ -41,10 +41,10 @@
|
|
|
41
41
|
"@angular/common": "^16.1.7",
|
|
42
42
|
"@angular/core": "^16.1.7",
|
|
43
43
|
"@angular/platform-browser": "^16.1.7",
|
|
44
|
-
"@skyux-sdk/testing": "9.0.0-alpha.
|
|
45
|
-
"@skyux/core": "9.0.0-alpha.
|
|
46
|
-
"@skyux/i18n": "9.0.0-alpha.
|
|
47
|
-
"@skyux/theme": "9.0.0-alpha.
|
|
44
|
+
"@skyux-sdk/testing": "9.0.0-alpha.1",
|
|
45
|
+
"@skyux/core": "9.0.0-alpha.1",
|
|
46
|
+
"@skyux/i18n": "9.0.0-alpha.1",
|
|
47
|
+
"@skyux/theme": "9.0.0-alpha.1"
|
|
48
48
|
},
|
|
49
49
|
"dependencies": {
|
|
50
50
|
"tslib": "^2.5.0"
|