@ukic/web-components 2.1.0-beta.9 → 2.3.0

package/dist/collection/components/ic-tab-panel/ic-tab-panel.js

@@ -1,12 +1,21 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { IcThemeForegroundEnum, } from "../../utils/types";
 export class TabPanel {
   constructor() {
+    this.appearance = "dark";
     this.contextId = "default";
-    this.tabPosition = undefined;
     this.panelId = undefined;
     this.selectedTab = undefined;
-    this.appearance = "dark";
+    this.tabPosition = undefined;
+  }
+  connectedCallback() {
+    this.tabPanelCreated.emit(this.host);
+  }
+  disconnectedCallback() {
+    const tabContext = document.querySelector(`ic-tab-context[context-id=${this.contextId}]`);
+    if (tabContext) {
+      tabContext.tabRemovedHandler();
+    }
   }
   render() {
     const { panelId, selectedTab, appearance } = this;
@@ -30,43 +39,52 @@ export class TabPanel {
   }
   static get properties() {
     return {
-      "contextId": {
+      "appearance": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IcThemeForegroundNoDefault",
+          "resolved": "\"dark\" | \"light\"",
+          "references": {
+            "IcThemeForegroundNoDefault": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [],
-          "text": "The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel."
+          "tags": [{
+              "name": "internal",
+              "text": "The appearance of the tabs, e.g dark, or light."
+            }],
+          "text": ""
         },
-        "attribute": "context-id",
-        "reflect": true,
-        "defaultValue": "\"default\""
+        "attribute": "appearance",
+        "reflect": false,
+        "defaultValue": "\"dark\""
       },
-      "tabPosition": {
-        "type": "number",
+      "contextId": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "number",
-          "resolved": "number",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [{
-              "name": "internal",
-              "text": "The position of the tab panel inside the tabs array in context."
+              "name": "deprecated",
+              "text": "This is no longer required.\nThe context id is passed down from `ic-tab-context`"
             }],
           "text": ""
         },
-        "attribute": "tab-position",
-        "reflect": true
+        "attribute": "context-id",
+        "reflect": true,
+        "defaultValue": "\"default\""
       },
       "panelId": {
         "type": "string",
@@ -108,34 +126,71 @@ export class TabPanel {
         "attribute": "selected-tab",
         "reflect": false
       },
-      "appearance": {
-        "type": "string",
+      "tabPosition": {
+        "type": "number",
         "mutable": false,
         "complexType": {
-          "original": "IcThemeForegroundNoDefault",
-          "resolved": "\"dark\" | \"light\"",
-          "references": {
-            "IcThemeForegroundNoDefault": {
-              "location": "import",
-              "path": "../../utils/types"
-            }
-          }
+          "original": "number",
+          "resolved": "number",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "The appearance of the tabs, e.g dark, or light."
+              "text": "The position of the tab panel inside the tabs array in context."
             }],
           "text": ""
         },
-        "attribute": "appearance",
-        "reflect": false,
-        "defaultValue": "\"dark\""
+        "attribute": "tab-position",
+        "reflect": true
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "tabPanelCreated",
+        "name": "tabPanelCreated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Emitted when a tab panel is dynamically created."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "HTMLIcTabPanelElement",
+          "resolved": "HTMLIcTabPanelElement",
+          "references": {
+            "HTMLIcTabPanelElement": {
+              "location": "global"
+            }
+          }
+        }
+      }, {
+        "method": "tabPanelRemoved",
+        "name": "tabPanelRemoved",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": "Emitted when a tab panel is unmounted."
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=ic-tab-panel.js.map

package/dist/collection/components/ic-tab-panel/ic-tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-tab-panel.js","sourceRoot":"","sources":["../../../src/components/ic-tab-panel/ic-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EACL,qBAAqB,GAEtB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,OAAO,QAAQ;;qBAM2B,SAAS;;;;sBAYL,MAAM;;EAExD,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAClD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,oBAAoB,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;OACnE,EACD,IAAI,EAAC,UAAU,EACf,MAAM,EACJ,OAAO,KAAK,SAAS,IAAI,WAAW,KAAK,SAAS;QAChD,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,WAAW,CAAC;QAC5B,CAAC,CAAC,IAAI;MAGV;QACE,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\nimport {\n  IcThemeForegroundEnum,\n  IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-tab-panel\",\n  styleUrl: \"ic-tab-panel.css\",\n  shadow: true,\n})\nexport class TabPanel {\n  @Element() host: HTMLIcTabPanelElement;\n\n  /**\n   * The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.\n   */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /** @internal The position of the tab panel inside the tabs array in context. */\n  @Prop({ reflect: true }) tabPosition?: number;\n\n  /** @internal The shared ID that links the panel and tab. */\n  @Prop({ reflect: true }) panelId?: string;\n\n  /** @internal The shared ID of the currently selected tab. */\n  @Prop() selectedTab?: string;\n\n  /** @internal The appearance of the tabs, e.g dark, or light. */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  render() {\n    const { panelId, selectedTab, appearance } = this;\n    return (\n      <Host\n        class={{\n          [\"ic-tab-panel-light\"]: appearance === IcThemeForegroundEnum.Light,\n        }}\n        role=\"tabpanel\"\n        hidden={\n          panelId !== undefined && selectedTab !== undefined\n            ? !(panelId === selectedTab)\n            : true\n        }\n      >\n        <div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-tab-panel.js","sourceRoot":"","sources":["../../../src/components/ic-tab-panel/ic-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,qBAAqB,GAEtB,MAAM,mBAAmB,CAAC;AAO3B,MAAM,OAAO,QAAQ;;sBAM+B,MAAM;qBAMV,SAAS;;;;;EA2BvD,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACvC,CAAC;EAED,oBAAoB;IAClB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CACvC,6BAA6B,IAAI,CAAC,SAAS,GAAG,CACpB,CAAC;IAC7B,IAAI,UAAU,EAAE;MACd,UAAU,CAAC,iBAAiB,EAAE,CAAC;KAChC;EACH,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;IAClD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;QACL,CAAC,oBAAoB,CAAC,EAAE,UAAU,KAAK,qBAAqB,CAAC,KAAK;OACnE,EACD,IAAI,EAAC,UAAU,EACf,MAAM,EACJ,OAAO,KAAK,SAAS,IAAI,WAAW,KAAK,SAAS;QAChD,CAAC,CAAC,CAAC,CAAC,OAAO,KAAK,WAAW,CAAC;QAC5B,CAAC,CAAC,IAAI;MAGV;QACE,eAAa,CACT,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport {\n  IcThemeForegroundEnum,\n  IcThemeForegroundNoDefault,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-tab-panel\",\n  styleUrl: \"ic-tab-panel.css\",\n  shadow: true,\n})\nexport class TabPanel {\n  @Element() host: HTMLIcTabPanelElement;\n\n  /**\n   * @internal The appearance of the tabs, e.g dark, or light.\n   */\n  @Prop() appearance?: IcThemeForegroundNoDefault = \"dark\";\n\n  /**\n   * @deprecated This is no longer required.\n   * The context id is passed down from `ic-tab-context`\n   */\n  @Prop({ reflect: true }) contextId?: string = \"default\";\n\n  /**\n   * @internal The shared ID that links the panel and tab.\n   */\n  @Prop({ reflect: true }) panelId?: string;\n\n  /**\n   * @internal The shared ID of the currently selected tab.\n   */\n  @Prop() selectedTab?: string;\n\n  /**\n   * @internal The position of the tab panel inside the tabs array in context.\n   */\n  @Prop({ reflect: true }) tabPosition?: number;\n\n  /**\n   * @internal Emitted when a tab panel is dynamically created.\n   */\n  @Event() tabPanelCreated: EventEmitter<HTMLIcTabPanelElement>;\n\n  /**\n   * @internal Emitted when a tab panel is unmounted.\n   */\n  @Event() tabPanelRemoved: EventEmitter<void>;\n\n  connectedCallback(): void {\n    this.tabPanelCreated.emit(this.host);\n  }\n\n  disconnectedCallback(): void {\n    const tabContext = document.querySelector(\n      `ic-tab-context[context-id=${this.contextId}]`\n    ) as HTMLIcTabContextElement;\n    if (tabContext) {\n      tabContext.tabRemovedHandler();\n    }\n  }\n\n  render() {\n    const { panelId, selectedTab, appearance } = this;\n    return (\n      <Host\n        class={{\n          [\"ic-tab-panel-light\"]: appearance === IcThemeForegroundEnum.Light,\n        }}\n        role=\"tabpanel\"\n        hidden={\n          panelId !== undefined && selectedTab !== undefined\n            ? !(panelId === selectedTab)\n            : true\n        }\n      >\n        <div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-tab-panel/test/basic/ic-tab-panel.spec.js

@@ -0,0 +1,65 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { TabPanel } from "../../ic-tab-panel";
+describe("ic-tab component", () => {
+  it("should not be hidden if the corresponding tab is selected", async () => {
+    const page = await newSpecPage({
+      components: [TabPanel],
+      html: `<ic-tab-panel panel-id="1" selected-tab="1" tab-position=1>IC Tab Test</ic-tab-panel>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-tab-panel panel-id="1" selected-tab="1" context-id="default" role="tabpanel" tab-position="1">
+    <mock:shadow-root>
+      <div>
+        <slot></slot>
+      </div>
+    </mock:shadow-root>
+    IC Tab Test
+  </ic-tab-panel>`);
+  });
+  it("should be hidden if the corresponding tab is not selected", async () => {
+    const page = await newSpecPage({
+      components: [TabPanel],
+      html: `<ic-tab-panel panel-id="1" selected-tab="2" tab-position=1>IC Tab Test</ic-tab-panel>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-tab-panel panel-id="1" selected-tab="2" context-id="default" hidden="" role="tabpanel" tab-position="1">
+    <mock:shadow-root>
+      <div>
+        <slot></slot>
+      </div>
+    </mock:shadow-root>
+    IC Tab Test
+  </ic-tab-panel>`);
+  });
+  it("should be hidden if selectedTab and panelId are undefined", async () => {
+    const page = await newSpecPage({
+      components: [TabPanel],
+      html: `<ic-tab-panel tab-position=1>IC Tab Test</ic-tab-panel>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-tab-panel context-id="default" hidden="" role="tabpanel" tab-position="1">
+    <mock:shadow-root>
+      <div>
+        <slot></slot>
+      </div>
+    </mock:shadow-root>
+    IC Tab Test
+  </ic-tab-panel>`);
+  });
+  it("should be hidden if selectedTab and panelId are undefined", async () => {
+    const page = await newSpecPage({
+      components: [TabPanel],
+      html: `<ic-tab-panel>IC Tab Test</ic-tab-panel>`,
+    });
+    expect(page.root)
+      .toEqualHtml(`<ic-tab-panel context-id="default" hidden="" role="tabpanel">
+    <mock:shadow-root>
+      <div>
+        <slot></slot>
+      </div>
+    </mock:shadow-root>
+    IC Tab Test
+  </ic-tab-panel>`);
+  });
+});
+//# sourceMappingURL=ic-tab-panel.spec.js.map

package/dist/collection/components/ic-tab-panel/test/basic/ic-tab-panel.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-tab-panel.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-tab-panel/test/basic/ic-tab-panel.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAE9C,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;EAChC,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,uFAAuF;KAC9F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;OACd,WAAW,CAAC;;;;;;;kBAOD,CAAC,CAAC;EAClB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,uFAAuF;KAC9F,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;OACd,WAAW,CAAC;;;;;;;kBAOD,CAAC,CAAC;EAClB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,yDAAyD;KAChE,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;OACd,WAAW,CAAC;;;;;;;kBAOD,CAAC,CAAC;EAClB,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;IACzE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,QAAQ,CAAC;MACtB,IAAI,EAAE,0CAA0C;KACjD,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;OACd,WAAW,CAAC;;;;;;;kBAOD,CAAC,CAAC;EAClB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { TabPanel } from \"../../ic-tab-panel\";\n\ndescribe(\"ic-tab component\", () => {\n  it(\"should not be hidden if the corresponding tab is selected\", async () => {\n    const page = await newSpecPage({\n      components: [TabPanel],\n      html: `<ic-tab-panel panel-id=\"1\" selected-tab=\"1\" tab-position=1>IC Tab Test</ic-tab-panel>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab-panel panel-id=\"1\" selected-tab=\"1\" context-id=\"default\" role=\"tabpanel\" tab-position=\"1\">\n    <mock:shadow-root>\n      <div>\n        <slot></slot>\n      </div>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab-panel>`);\n  });\n\n  it(\"should be hidden if the corresponding tab is not selected\", async () => {\n    const page = await newSpecPage({\n      components: [TabPanel],\n      html: `<ic-tab-panel panel-id=\"1\" selected-tab=\"2\" tab-position=1>IC Tab Test</ic-tab-panel>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab-panel panel-id=\"1\" selected-tab=\"2\" context-id=\"default\" hidden=\"\" role=\"tabpanel\" tab-position=\"1\">\n    <mock:shadow-root>\n      <div>\n        <slot></slot>\n      </div>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab-panel>`);\n  });\n\n  it(\"should be hidden if selectedTab and panelId are undefined\", async () => {\n    const page = await newSpecPage({\n      components: [TabPanel],\n      html: `<ic-tab-panel tab-position=1>IC Tab Test</ic-tab-panel>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab-panel context-id=\"default\" hidden=\"\" role=\"tabpanel\" tab-position=\"1\">\n    <mock:shadow-root>\n      <div>\n        <slot></slot>\n      </div>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab-panel>`);\n  });\n\n  it(\"should be hidden if selectedTab and panelId are undefined\", async () => {\n    const page = await newSpecPage({\n      components: [TabPanel],\n      html: `<ic-tab-panel>IC Tab Test</ic-tab-panel>`,\n    });\n\n    expect(page.root)\n      .toEqualHtml(`<ic-tab-panel context-id=\"default\" hidden=\"\" role=\"tabpanel\">\n    <mock:shadow-root>\n      <div>\n        <slot></slot>\n      </div>\n    </mock:shadow-root>\n    IC Tab Test\n  </ic-tab-panel>`);\n  });\n});\n"]}

package/dist/collection/components/ic-text-field/ic-text-field.css

@@ -448,8 +448,7 @@ video {
   display: block;
 }
 
-:host([full-width]),
-.fullwidth {
+:host(.fullwidth) {
   width: 100%;
 }
 
@@ -517,14 +516,6 @@ textarea.no-resize {
   color: var(--ic-color-secondary-text);
 }
 
-.exceeded {
-  color: var(--ic-status-error);
-}
-
-.disabled {
-  color: var(--ic-architectural-200);
-}
-
 .no-left-pad {
   padding-left: 0;
 }