@watermarkinsights/ripple 3.25.0-2 → 3.25.0

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"wm-tab-list.js","sourceRoot":"","sources":["../../../../../src/components/wm-tabs/wm-tab-list/wm-tab-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forceUpdate, Component, Prop, Element, h, Watch, Listen, Host, Event, EventEmitter } from \"@stencil/core\";\r\nimport { debounce } from \"../../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-tab-list\",\r\n  styleUrl: \"wm-tab-list.scss\",\r\n  shadow: { delegatesFocus: true },\r\n})\r\nexport class TabList {\r\n  @Element() el!: any;\r\n\r\n  @Prop() customBackground?: \"dark\" | \"\";\r\n  @Prop() customPadding?: string;\r\n  @Prop() selectedTab?: string;\r\n\r\n  /**\r\n   * Delegates control to the component, which will listen for the tabSelected event, update the display of the tab panels, and update the selected tab on display. When set to false, the app must listen for the event and update the selectedTab attribute. Offers more control for devs, who may want to control when data loads or run other functions when tabs are switched.\r\n   */\r\n  @Prop() controllerEnabled: boolean = false;\r\n\r\n  /**\r\n   * Set to true when the tab list exceeds the parent width. Component will render the menu layout.\r\n   */\r\n  private get menuLayout(): boolean {\r\n    if (this.listWidth) {\r\n      return this.el.offsetWidth < this.listWidth - 24; // to take into account the negative margin on the ul\r\n    } else {\r\n      return false; // in case listWidth couldn't get computed, we render regular tabs\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted by wm-select options when tabs have the menu format\r\n   */\r\n  @Event() wmTabSelected!: EventEmitter<{ tabId: string }>;\r\n  @Event() tabSelected!: EventEmitter<{ tabId: string }>; // deprecated in favor of wmTabSelected\r\n\r\n  private get tabItems(): Array<HTMLWmTabItemElement> {\r\n    return Array.from(this.el.querySelectorAll(\"wm-tab-item\"));\r\n  }\r\n\r\n  get selectedTabItem(): HTMLWmTabItemElement {\r\n    return this.tabItems.filter((t) => t.selected)[0];\r\n  }\r\n\r\n  private getLinkEl(tab: HTMLWmTabItemElement): HTMLAnchorElement {\r\n    return tab.shadowRoot!.querySelector(\"a\")!;\r\n  }\r\n\r\n  private get panels(): Array<HTMLWmTabPanelElement> {\r\n    const allPanels = Array.from(document.querySelectorAll(\"wm-tab-panel\"));\r\n    const tabIds = this.tabItems.map((t) => t.tabId);\r\n    return allPanels.filter((p) => tabIds.includes(p.tabId));\r\n  }\r\n\r\n  private getPanel(tabId: string) {\r\n    return this.panels.find((p) => p.tabId === tabId);\r\n  }\r\n\r\n  private listWidth?: number;\r\n\r\n  private setListWidth() {\r\n    let newCalc = this.tabItems.reduce((sum, tab) => sum + tab.offsetWidth, 0);\r\n    this.listWidth = newCalc && newCalc > 0 ? newCalc : this.listWidth; // the function may return 0. In this case keep the previous value\r\n  }\r\n\r\n  @Watch(\"selectedTab\")\r\n  setSelected(id: string) {\r\n    this.tabItems.map((tab: HTMLWmTabItemElement) => (tab.selected = tab.tabId === id));\r\n    const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;\r\n    if (singlePanel) {\r\n      /**\r\n       * If the app conditionally renders content in one single tab panel rather than allocating the content to discrete panels, then the tab panels aria references needs to update whenever a new tab item is selected.\r\n       */\r\n      this.setAttributesOnPanel(this.panels[0], this.selectedTabItem);\r\n      this.panels[0].active = true;\r\n    } else {\r\n      this.panels.map((panel: HTMLWmTabPanelElement) => (panel.active = panel.tabId === id));\r\n    }\r\n  }\r\n\r\n  showItems() {\r\n    this.tabItems.map((t) => (t.show = true));\r\n  }\r\n\r\n  hideItems() {\r\n    this.tabItems.map((t) => (t.show = false));\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.el.focus = () => {\r\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the selected tab-item\r\n      this.selectedTabItem && this.selectedTabItem.focus();\r\n    };\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.setLayout(); // this require measurements of DOM elements so can't be done before first paint\r\n    const selectedTab = this.selectedTab || this.tabItems[0].tabId;\r\n    this.setSelected(selectedTab);\r\n  }\r\n\r\n  @Listen(\"tabItemLoaded\")\r\n  tabItemLoaded(ev: CustomEvent) {\r\n    this.setAriaOnPanelAndTab(ev.target as HTMLWmTabItemElement);\r\n  }\r\n\r\n  setAriaOnPanelAndTab(tab: HTMLWmTabItemElement) {\r\n    const panel = this.getPanel(tab.tabId);\r\n\r\n    // If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.\r\n    if (!panel) {\r\n      if (this.panels.length === 1) {\r\n        this.setAttributesOnTab(tab, this.panels[0]);\r\n      }\r\n    } else {\r\n      // Otherwise, set attributes on each tab item that loads and its associated panel\r\n      this.setAttributesOnPanel(panel, tab);\r\n      this.setAttributesOnTab(tab, panel);\r\n    }\r\n  }\r\n\r\n  setAttributesOnTab(tab: HTMLWmTabItemElement, panel: HTMLWmTabPanelElement) {\r\n    const link = this.getLinkEl(tab);\r\n\r\n    if (link) {\r\n      link.setAttribute(\"aria-controls\", panel.id);\r\n      link.setAttribute(\"href\", `#${panel.id}`);\r\n    }\r\n  }\r\n\r\n  removeAttributesOnTab(tab: HTMLWmTabItemElement) {\r\n    const link = this.getLinkEl(tab);\r\n\r\n    if (link) {\r\n      link.removeAttribute(\"aria-controls\");\r\n      link.removeAttribute(\"href\");\r\n    }\r\n  }\r\n\r\n  setAttributesOnPanel(panel: HTMLWmTabPanelElement, tab: HTMLWmTabItemElement) {\r\n    const link = this.getLinkEl(tab);\r\n\r\n    if (link) {\r\n      panel.setAttribute(\"aria-labelledby\", link.id);\r\n      panel.setAttribute(\"tab-id\", tab.tabId);\r\n    }\r\n  }\r\n\r\n  @Listen(\"wmTabSelected\")\r\n  handleTabSelected(ev: CustomEvent) {\r\n    if (this.controllerEnabled) {\r\n      this.setSelected(ev.detail.tabId);\r\n    }\r\n  }\r\n\r\n  @Listen(\"keydownOnTabItem\")\r\n  handleKeydown(ev: CustomEvent) {\r\n    const key = ev.detail.key;\r\n    const index = this.tabItems.indexOf(ev.detail.tabItem);\r\n\r\n    if (key === \"ArrowLeft\" || key === \"ArrowRight\") {\r\n      this.handleLeftRightArrow(index, key);\r\n    }\r\n  }\r\n\r\n  handleLeftRightArrow(index: number, key: string) {\r\n    if (key) {\r\n      index = key === \"ArrowLeft\" ? index - 1 : index + 1;\r\n    }\r\n\r\n    if (index < 0) {\r\n      index = this.tabItems.length - 1;\r\n    } else if (index === this.tabItems.length) {\r\n      index = 0;\r\n    }\r\n\r\n    const tabToFocus = this.tabItems[index];\r\n    this.getLinkEl(tabToFocus).focus();\r\n  }\r\n\r\n  /**\r\n   * Change layout if parent size drops below tab list width\r\n   */\r\n  @Listen(\"resize\", { target: \"window\" })\r\n  setLayout() {\r\n    this.debouncedSetLayout();\r\n  }\r\n\r\n  debouncedSetLayout = debounce(() => {\r\n    if (!this.listWidth) {\r\n      this.setListWidth();\r\n    }\r\n    forceUpdate(this.el);\r\n  }, 250);\r\n\r\n  renderMenuOrTabs() {\r\n    if (this.menuLayout) {\r\n      this.hideItems();\r\n      return (\r\n        <wm-select label=\"Tab Selection\" label-position=\"none\">\r\n          {this.renderOptions()}\r\n        </wm-select>\r\n      );\r\n    } else {\r\n      this.showItems();\r\n      let margins = {};\r\n      if (this.customPadding) {\r\n        margins = {\r\n          \"margin-left\": \"-\" + this.customPadding,\r\n        };\r\n      }\r\n      return (\r\n        <ul class={`tabcontainer ${this.customBackground || \"\"}`} style={margins} role=\"tablist\">\r\n          <slot></slot>\r\n        </ul>\r\n      );\r\n    }\r\n  }\r\n\r\n  renderOptions() {\r\n    return this.tabItems.map((t) => (\r\n      <wm-option\r\n        id={`tab-link-${t.tabId}`}\r\n        selected={t.tabId === this.selectedTab}\r\n        onClick={(ev) => {\r\n          ev.preventDefault();\r\n          this.wmTabSelected.emit({ tabId: t.tabId });\r\n          this.tabSelected.emit({ tabId: t.tabId }); // deprecated\r\n        }}\r\n      >\r\n        {t.textContent}\r\n      </wm-option>\r\n    ));\r\n  }\r\n\r\n  render() {\r\n    return <Host class={this.menuLayout ? \"menu\" : \"\"}>{this.renderMenuOrTabs()}</Host>;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"wm-tab-list.js","sourceRoot":"","sources":["../../../../../src/components/wm-tabs/wm-tab-list/wm-tab-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forceUpdate, Component, Prop, Element, h, Watch, Listen, Host, Event, EventEmitter } from \"@stencil/core\";\nimport { debounce } from \"../../../global/functions\";\n\n@Component({\n  tag: \"wm-tab-list\",\n  styleUrl: \"wm-tab-list.scss\",\n  shadow: { delegatesFocus: true },\n})\nexport class TabList {\n  @Element() el!: any;\n\n  @Prop() customBackground?: \"dark\" | \"\";\n  @Prop() customPadding?: string;\n  @Prop() selectedTab?: string;\n\n  /**\n   * Delegates control to the component, which will listen for the tabSelected event, update the display of the tab panels, and update the selected tab on display. When set to false, the app must listen for the event and update the selectedTab attribute. Offers more control for devs, who may want to control when data loads or run other functions when tabs are switched.\n   */\n  @Prop() controllerEnabled: boolean = false;\n\n  /**\n   * Set to true when the tab list exceeds the parent width. Component will render the menu layout.\n   */\n  private get menuLayout(): boolean {\n    if (this.listWidth) {\n      return this.el.offsetWidth < this.listWidth - 24; // to take into account the negative margin on the ul\n    } else {\n      return false; // in case listWidth couldn't get computed, we render regular tabs\n    }\n  }\n\n  /**\n   * Emitted by wm-select options when tabs have the menu format\n   */\n  @Event() wmTabSelected!: EventEmitter<{ tabId: string }>;\n  @Event() tabSelected!: EventEmitter<{ tabId: string }>; // deprecated in favor of wmTabSelected\n\n  private get tabItems(): Array<HTMLWmTabItemElement> {\n    return Array.from(this.el.querySelectorAll(\"wm-tab-item\"));\n  }\n\n  get selectedTabItem(): HTMLWmTabItemElement {\n    return this.tabItems.filter((t) => t.selected)[0];\n  }\n\n  private getLinkEl(tab: HTMLWmTabItemElement): HTMLAnchorElement {\n    return tab.shadowRoot!.querySelector(\"a\")!;\n  }\n\n  private get panels(): Array<HTMLWmTabPanelElement> {\n    const allPanels = Array.from(document.querySelectorAll(\"wm-tab-panel\"));\n    const tabIds = this.tabItems.map((t) => t.tabId);\n    return allPanels.filter((p) => tabIds.includes(p.tabId));\n  }\n\n  private getPanel(tabId: string) {\n    return this.panels.find((p) => p.tabId === tabId);\n  }\n\n  private listWidth?: number;\n\n  private setListWidth() {\n    let newCalc = this.tabItems.reduce((sum, tab) => sum + tab.offsetWidth, 0);\n    this.listWidth = newCalc && newCalc > 0 ? newCalc : this.listWidth; // the function may return 0. In this case keep the previous value\n  }\n\n  @Watch(\"selectedTab\")\n  setSelected(id: string) {\n    this.tabItems.map((tab: HTMLWmTabItemElement) => (tab.selected = tab.tabId === id));\n    const singlePanel = this.panels.length === 1 && this.tabItems.length > 1;\n    if (singlePanel) {\n      /**\n       * If the app conditionally renders content in one single tab panel rather than allocating the content to discrete panels, then the tab panels aria references needs to update whenever a new tab item is selected.\n       */\n      this.setAttributesOnPanel(this.panels[0], this.selectedTabItem);\n      this.panels[0].active = true;\n    } else {\n      this.panels.map((panel: HTMLWmTabPanelElement) => (panel.active = panel.tabId === id));\n    }\n  }\n\n  showItems() {\n    this.tabItems.map((t) => (t.show = true));\n  }\n\n  hideItems() {\n    this.tabItems.map((t) => (t.show = false));\n  }\n\n  componentWillLoad() {\n    this.el.focus = () => {\n      // in addition to delegatesFocus, we need to highjack the focus method to send focus to the selected tab-item\n      this.selectedTabItem && this.selectedTabItem.focus();\n    };\n  }\n\n  componentDidLoad() {\n    this.setLayout(); // this require measurements of DOM elements so can't be done before first paint\n    const selectedTab = this.selectedTab || this.tabItems[0].tabId;\n    this.setSelected(selectedTab);\n  }\n\n  @Listen(\"tabItemLoaded\")\n  tabItemLoaded(ev: CustomEvent) {\n    this.setAriaOnPanelAndTab(ev.target as HTMLWmTabItemElement);\n  }\n\n  setAriaOnPanelAndTab(tab: HTMLWmTabItemElement) {\n    const panel = this.getPanel(tab.tabId);\n\n    // If there's no panel, check for case where content is conditionally rendered in one panel, in which case attributes on all tabs should point to this single panel.\n    if (!panel) {\n      if (this.panels.length === 1) {\n        this.setAttributesOnTab(tab, this.panels[0]);\n      }\n    } else {\n      // Otherwise, set attributes on each tab item that loads and its associated panel\n      this.setAttributesOnPanel(panel, tab);\n      this.setAttributesOnTab(tab, panel);\n    }\n  }\n\n  setAttributesOnTab(tab: HTMLWmTabItemElement, panel: HTMLWmTabPanelElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      link.setAttribute(\"aria-controls\", panel.id);\n      link.setAttribute(\"href\", `#${panel.id}`);\n    }\n  }\n\n  removeAttributesOnTab(tab: HTMLWmTabItemElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      link.removeAttribute(\"aria-controls\");\n      link.removeAttribute(\"href\");\n    }\n  }\n\n  setAttributesOnPanel(panel: HTMLWmTabPanelElement, tab: HTMLWmTabItemElement) {\n    const link = this.getLinkEl(tab);\n\n    if (link) {\n      panel.setAttribute(\"aria-labelledby\", link.id);\n      panel.setAttribute(\"tab-id\", tab.tabId);\n    }\n  }\n\n  @Listen(\"wmTabSelected\")\n  handleTabSelected(ev: CustomEvent) {\n    if (this.controllerEnabled) {\n      this.setSelected(ev.detail.tabId);\n    }\n  }\n\n  @Listen(\"keydownOnTabItem\")\n  handleKeydown(ev: CustomEvent) {\n    const key = ev.detail.key;\n    const index = this.tabItems.indexOf(ev.detail.tabItem);\n\n    if (key === \"ArrowLeft\" || key === \"ArrowRight\") {\n      this.handleLeftRightArrow(index, key);\n    }\n  }\n\n  handleLeftRightArrow(index: number, key: string) {\n    if (key) {\n      index = key === \"ArrowLeft\" ? index - 1 : index + 1;\n    }\n\n    if (index < 0) {\n      index = this.tabItems.length - 1;\n    } else if (index === this.tabItems.length) {\n      index = 0;\n    }\n\n    const tabToFocus = this.tabItems[index];\n    this.getLinkEl(tabToFocus).focus();\n  }\n\n  /**\n   * Change layout if parent size drops below tab list width\n   */\n  @Listen(\"resize\", { target: \"window\" })\n  setLayout() {\n    this.debouncedSetLayout();\n  }\n\n  debouncedSetLayout = debounce(() => {\n    if (!this.listWidth) {\n      this.setListWidth();\n    }\n    forceUpdate(this.el);\n  }, 250);\n\n  renderMenuOrTabs() {\n    if (this.menuLayout) {\n      this.hideItems();\n      return (\n        <wm-select label=\"Tab Selection\" label-position=\"none\">\n          {this.renderOptions()}\n        </wm-select>\n      );\n    } else {\n      this.showItems();\n      let margins = {};\n      if (this.customPadding) {\n        margins = {\n          \"margin-left\": \"-\" + this.customPadding,\n        };\n      }\n      return (\n        <ul class={`tabcontainer ${this.customBackground || \"\"}`} style={margins} role=\"tablist\">\n          <slot></slot>\n        </ul>\n      );\n    }\n  }\n\n  renderOptions() {\n    return this.tabItems.map((t) => (\n      <wm-option\n        id={`tab-link-${t.tabId}`}\n        selected={t.tabId === this.selectedTab}\n        onClick={(ev) => {\n          ev.preventDefault();\n          this.wmTabSelected.emit({ tabId: t.tabId });\n          this.tabSelected.emit({ tabId: t.tabId }); // deprecated\n        }}\n      >\n        {t.textContent}\n      </wm-option>\n    ));\n  }\n\n  render() {\n    return <Host class={this.menuLayout ? \"menu\" : \"\"}>{this.renderMenuOrTabs()}</Host>;\n  }\n}\n"]}

package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js

@@ -1,109 +1,109 @@
-import { Host, h } from "@stencil/core";
-import { generateId } from "../../../global/functions";
-export class TabPanel {
-  constructor() {
-    this.active = false;
-    this.tabId = "";
-  }
-  componentWillLoad() {
-    !this.el.id && this.el.setAttribute("id", generateId());
-  }
-  componentDidLoad() {
-    this.tabPanelLoaded.emit({ tabId: this.tabId });
-  }
-  toggleTabbingOn() {
-    this.el.classList.add("user-is-tabbing");
-  }
-  toggleTabbingOff() {
-    this.el.classList.remove("user-is-tabbing");
-  }
-  render() {
-    return h(Host, { role: "tabpanel", class: { "tab-hidden": !this.active } });
-  }
-  static get is() { return "wm-tab-panel"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["wm-tab-panel.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["wm-tab-panel.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "active": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Indicates whether the panel should be displayed or not."
-        },
-        "attribute": "active",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "tabId": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The id of the panel, linked to a tabItem in the tablist."
-        },
-        "attribute": "tab-id",
-        "reflect": false,
-        "defaultValue": "\"\""
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tabPanelLoaded",
-        "name": "tabPanelLoaded",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "{ tabId: string }",
-          "resolved": "{ tabId: string; }",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "keydown",
-        "method": "toggleTabbingOn",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "click",
-        "method": "toggleTabbingOff",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
-//# sourceMappingURL=wm-tab-panel.js.map
+import { Host, h } from "@stencil/core";
+import { generateId } from "../../../global/functions";
+export class TabPanel {
+  constructor() {
+    this.active = false;
+    this.tabId = "";
+  }
+  componentWillLoad() {
+    !this.el.id && this.el.setAttribute("id", generateId());
+  }
+  componentDidLoad() {
+    this.tabPanelLoaded.emit({ tabId: this.tabId });
+  }
+  toggleTabbingOn() {
+    this.el.classList.add("user-is-tabbing");
+  }
+  toggleTabbingOff() {
+    this.el.classList.remove("user-is-tabbing");
+  }
+  render() {
+    return h(Host, { role: "tabpanel", class: { "tab-hidden": !this.active } });
+  }
+  static get is() { return "wm-tab-panel"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["wm-tab-panel.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["wm-tab-panel.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates whether the panel should be displayed or not."
+        },
+        "attribute": "active",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "tabId": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The id of the panel, linked to a tabItem in the tablist."
+        },
+        "attribute": "tab-id",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tabPanelLoaded",
+        "name": "tabPanelLoaded",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "{ tabId: string }",
+          "resolved": "{ tabId: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "keydown",
+        "method": "toggleTabbingOn",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "toggleTabbingOff",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=wm-tab-panel.js.map

package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"wm-tab-panel.js","sourceRoot":"","sources":["../../../../../src/components/wm-tabs/wm-tab-panel/wm-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAgB,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAMvD,MAAM,OAAO,QAAQ;;kBAMwB,KAAK;iBAKP,EAAE;;EAI3C,iBAAiB;IACf,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;EAC1D,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;EAClD,CAAC;EAGD,eAAe;IACb,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;EAC3C,CAAC;EAGD,gBAAgB;IACd,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;EAC9C,CAAC;EAED,MAAM;IACJ,OAAO,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,GAAS,CAAC;EAC9E,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Prop, Host, h, Event, Listen, EventEmitter } from \"@stencil/core\";\r\nimport { generateId } from \"../../../global/functions\";\r\n\r\n@Component({\r\n  tag: \"wm-tab-panel\",\r\n  styleUrl: \"wm-tab-panel.scss\",\r\n})\r\nexport class TabPanel {\r\n  @Element() el!: HTMLWmTabPanelElement;\r\n\r\n  /**\r\n   * Indicates whether the panel should be displayed or not.\r\n   */\r\n  @Prop({ mutable: true }) active: boolean = false;\r\n\r\n  /**\r\n   * The id of the panel, linked to a tabItem in the tablist.\r\n   */\r\n  @Prop({ mutable: true }) tabId: string = \"\";\r\n\r\n  @Event() tabPanelLoaded!: EventEmitter<{ tabId: string }>;\r\n\r\n  componentWillLoad() {\r\n    !this.el.id && this.el.setAttribute(\"id\", generateId());\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.tabPanelLoaded.emit({ tabId: this.tabId });\r\n  }\r\n\r\n  @Listen(\"keydown\", { target: \"document\" })\r\n  toggleTabbingOn() {\r\n    this.el.classList.add(\"user-is-tabbing\");\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"document\" })\r\n  toggleTabbingOff() {\r\n    this.el.classList.remove(\"user-is-tabbing\");\r\n  }\r\n\r\n  render() {\r\n    return <Host role=\"tabpanel\" class={{ \"tab-hidden\": !this.active }}></Host>;\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"wm-tab-panel.js","sourceRoot":"","sources":["../../../../../src/components/wm-tabs/wm-tab-panel/wm-tab-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAgB,MAAM,eAAe,CAAC;AAC/F,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAMvD,MAAM,OAAO,QAAQ;;kBAMwB,KAAK;iBAKP,EAAE;;EAI3C,iBAAiB;IACf,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,IAAI,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;EAC1D,CAAC;EAED,gBAAgB;IACd,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;EAClD,CAAC;EAGD,eAAe;IACb,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;EAC3C,CAAC;EAGD,gBAAgB;IACd,IAAI,CAAC,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;EAC9C,CAAC;EAED,MAAM;IACJ,OAAO,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,GAAS,CAAC;EAC9E,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Prop, Host, h, Event, Listen, EventEmitter } from \"@stencil/core\";\nimport { generateId } from \"../../../global/functions\";\n\n@Component({\n  tag: \"wm-tab-panel\",\n  styleUrl: \"wm-tab-panel.scss\",\n})\nexport class TabPanel {\n  @Element() el!: HTMLWmTabPanelElement;\n\n  /**\n   * Indicates whether the panel should be displayed or not.\n   */\n  @Prop({ mutable: true }) active: boolean = false;\n\n  /**\n   * The id of the panel, linked to a tabItem in the tablist.\n   */\n  @Prop({ mutable: true }) tabId: string = \"\";\n\n  @Event() tabPanelLoaded!: EventEmitter<{ tabId: string }>;\n\n  componentWillLoad() {\n    !this.el.id && this.el.setAttribute(\"id\", generateId());\n  }\n\n  componentDidLoad() {\n    this.tabPanelLoaded.emit({ tabId: this.tabId });\n  }\n\n  @Listen(\"keydown\", { target: \"document\" })\n  toggleTabbingOn() {\n    this.el.classList.add(\"user-is-tabbing\");\n  }\n\n  @Listen(\"click\", { target: \"document\" })\n  toggleTabbingOff() {\n    this.el.classList.remove(\"user-is-tabbing\");\n  }\n\n  render() {\n    return <Host role=\"tabpanel\" class={{ \"tab-hidden\": !this.active }}></Host>;\n  }\n}\n"]}

package/dist/collection/components/wm-tag-input/wm-tag-input-row/wm-tag-input-row.js

@@ -1,123 +1,123 @@
-export class TagInputRow {
-  constructor() {
-    this.col1 = undefined;
-    this.col2 = undefined;
-    this.col3 = undefined;
-    this.col4 = undefined;
-    this.locked = false;
-  }
-  componentDidUpdate() {
-    this.wmTagInputRowUpdated.emit();
-  }
-  static get is() { return "wm-tag-input-row"; }
-  static get properties() {
-    return {
-      "col1": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "col1",
-        "reflect": false
-      },
-      "col2": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "col2",
-        "reflect": false
-      },
-      "col3": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "col3",
-        "reflect": false
-      },
-      "col4": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "col4",
-        "reflect": false
-      },
-      "locked": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "locked",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "wmTagInputRowUpdated",
-        "name": "wmTagInputRowUpdated",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=wm-tag-input-row.js.map
+export class TagInputRow {
+  constructor() {
+    this.col1 = undefined;
+    this.col2 = undefined;
+    this.col3 = undefined;
+    this.col4 = undefined;
+    this.locked = false;
+  }
+  componentDidUpdate() {
+    this.wmTagInputRowUpdated.emit();
+  }
+  static get is() { return "wm-tag-input-row"; }
+  static get properties() {
+    return {
+      "col1": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "col1",
+        "reflect": false
+      },
+      "col2": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "col2",
+        "reflect": false
+      },
+      "col3": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "col3",
+        "reflect": false
+      },
+      "col4": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "col4",
+        "reflect": false
+      },
+      "locked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "locked",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "wmTagInputRowUpdated",
+        "name": "wmTagInputRowUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=wm-tag-input-row.js.map

package/dist/collection/components/wm-tag-input/wm-tag-input-row/wm-tag-input-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"wm-tag-input-row.js","sourceRoot":"","sources":["../../../../../src/components/wm-tag-input/wm-tag-input-row/wm-tag-input-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,eAAe,CAAC;AAK9E,MAAM,OAAO,WAAW;;;;;;kBAOI,KAAK;;EAI/B,kBAAkB;IAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAAC;EACnC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"wm-tag-input-row\",\r\n})\r\nexport class TagInputRow {\r\n  @Element() el!: HTMLWmTagInputRowElement;\r\n\r\n  @Prop({ attribute: \"col1\" }) col1?: string;\r\n  @Prop({ attribute: \"col2\" }) col2?: string;\r\n  @Prop({ attribute: \"col3\" }) col3?: string;\r\n  @Prop({ attribute: \"col4\" }) col4?: string;\r\n  @Prop() locked: boolean = false;\r\n\r\n  @Event() wmTagInputRowUpdated!: EventEmitter<void>;\r\n\r\n  componentDidUpdate() {\r\n    this.wmTagInputRowUpdated.emit();\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"wm-tag-input-row.js","sourceRoot":"","sources":["../../../../../src/components/wm-tag-input/wm-tag-input-row/wm-tag-input-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,MAAM,eAAe,CAAC;AAK9E,MAAM,OAAO,WAAW;;;;;;kBAOI,KAAK;;EAI/B,kBAAkB;IAChB,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAAC;EACnC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"wm-tag-input-row\",\n})\nexport class TagInputRow {\n  @Element() el!: HTMLWmTagInputRowElement;\n\n  @Prop({ attribute: \"col1\" }) col1?: string;\n  @Prop({ attribute: \"col2\" }) col2?: string;\n  @Prop({ attribute: \"col3\" }) col3?: string;\n  @Prop({ attribute: \"col4\" }) col4?: string;\n  @Prop() locked: boolean = false;\n\n  @Event() wmTagInputRowUpdated!: EventEmitter<void>;\n\n  componentDidUpdate() {\n    this.wmTagInputRowUpdated.emit();\n  }\n}\n"]}

package/dist/collection/components/wm-tag-input/wm-tag-input.css

@@ -144,11 +144,11 @@ wm-tag-input .field-wrapper {
 }
 :host .field-wrapper.focused,
 wm-tag-input .field-wrapper.focused {
-  -webkit-box-shadow: 0 0 0 1px #20cbd4;
-  -moz-box-shadow: 0 0 0 1px #20cbd4;
-  box-shadow: 0 0 0 1px #20cbd4;
+  -webkit-box-shadow: 0 0 0 1px #19a1a9;
+  -moz-box-shadow: 0 0 0 1px #19a1a9;
+  box-shadow: 0 0 0 1px #19a1a9;
   outline: none;
-  border-color: #20cbd4;
+  border-color: #19a1a9;
 }
 :host .field-wrapper.invalid,
 wm-tag-input .field-wrapper.invalid {