@skyux/indicators 7.0.0-beta.10 → 7.0.0-beta.11

package/documentation.json

@@ -8619,7 +8619,7 @@
     {
       "fileName": "key-info-demo.component.spec.ts",
       "filePath": "/projects/indicators/documentation/code-examples/key-info/basic/key-info-demo.component.spec.ts",
-      "rawContents": "import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';\nimport { 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 }) {\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"
+      "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"
     },
     {
       "fileName": "key-info-demo.component.ts",
@@ -8634,12 +8634,17 @@
     {
       "fileName": "key-info-demo.component.html",
       "filePath": "/projects/indicators/documentation/code-examples/key-info/inline-help/key-info-demo.component.html",
-      "rawContents": "<sky-key-info [layout]=\"layout\">\n  <sky-key-info-value> 575 </sky-key-info-value>\n  <sky-key-info-label> New members </sky-key-info-label>\n  <sky-help-inline class=\"sky-control-help\"></sky-help-inline>\n</sky-key-info>\n"
+      "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"
+    },
+    {
+      "fileName": "key-info-demo.component.spec.ts",
+      "filePath": "/projects/indicators/documentation/code-examples/key-info/inline-help/key-info-demo.component.spec.ts",
+      "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"
     },
     {
       "fileName": "key-info-demo.component.ts",
       "filePath": "/projects/indicators/documentation/code-examples/key-info/inline-help/key-info-demo.component.ts",
-      "rawContents": "import { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-key-info-demo',\n  templateUrl: './key-info-demo.component.html',\n})\nexport class KeyInfoDemoComponent {\n  public layout = 'vertical';\n}\n"
+      "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 = this.#_value >= 100 ? 'vertical' : 'horizontal';\n  }\n\n  public get value(): number {\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"
     },
     {
       "fileName": "key-info-demo.module.ts",
@@ -8669,18 +8674,33 @@
     {
       "fileName": "status-indicator-demo.component.html",
       "filePath": "/projects/indicators/documentation/code-examples/status-indicator/basic/status-indicator-demo.component.html",
-      "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 class=\"sky-control-help\"></sky-help-inline>\n</sky-status-indicator>\n"
+      "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"
     },
     {
       "fileName": "status-indicator-demo.component.ts",
       "filePath": "/projects/indicators/documentation/code-examples/status-indicator/basic/status-indicator-demo.component.ts",
-      "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"
+      "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"
     },
     {
       "fileName": "status-indicator-demo.module.ts",
       "filePath": "/projects/indicators/documentation/code-examples/status-indicator/basic/status-indicator-demo.module.ts",
       "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"
     },
+    {
+      "fileName": "status-indicator-demo.component.html",
+      "filePath": "/projects/indicators/documentation/code-examples/status-indicator/inline-help/status-indicator-demo.component.html",
+      "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"
+    },
+    {
+      "fileName": "status-indicator-demo.component.ts",
+      "filePath": "/projects/indicators/documentation/code-examples/status-indicator/inline-help/status-indicator-demo.component.ts",
+      "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"
+    },
+    {
+      "fileName": "status-indicator-demo.module.ts",
+      "filePath": "/projects/indicators/documentation/code-examples/status-indicator/inline-help/status-indicator-demo.module.ts",
+      "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"
+    },
     {
       "fileName": "text-highlight-demo.component.html",
       "filePath": "/projects/indicators/documentation/code-examples/text-highlight/basic/text-highlight-demo.component.html",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyux/indicators",
-  "version": "7.0.0-beta.10",
+  "version": "7.0.0-beta.11",
   "author": "Blackbaud, Inc.",
   "keywords": [
     "blackbaud",
@@ -45,10 +45,10 @@
     "@angular/common": "^14.2.0",
     "@angular/core": "^14.2.0",
     "@angular/platform-browser": "^14.2.0",
-    "@skyux-sdk/testing": "7.0.0-beta.10",
-    "@skyux/core": "7.0.0-beta.10",
-    "@skyux/i18n": "7.0.0-beta.10",
-    "@skyux/theme": "7.0.0-beta.10"
+    "@skyux-sdk/testing": "7.0.0-beta.11",
+    "@skyux/core": "7.0.0-beta.11",
+    "@skyux/i18n": "7.0.0-beta.11",
+    "@skyux/theme": "7.0.0-beta.11"
   },
   "dependencies": {
     "tslib": "^2.3.1"