npm - @nanoporetech-digital/components - Versions diffs - 4.4.1 → 4.5.0 - Mend

@nanoporetech-digital/components 4.4.1 → 4.5.0

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.

Files changed (138) hide show

package/dist/collection/components/global-nav/style/global-nav.css CHANGED Viewed

@@ -23,7 +23,12 @@
   text-align: inherit;
   white-space: inherit;
   color: inherit;
-  z-index: var(--nano-layer-index-menubar, 10);
+}
+.global-nav > .sticker-trigger {
+  display: none;
+}
+.global-nav > .sticker-trigger ~ .sticker-trigger {
+  display: block;
 }
 .global-nav button {
   background: none;
@@ -276,9 +281,6 @@
   z-index: 20;
   position: relative;
 }
-.sticker-trigger + .sticker-trigger {
-  display: none;
-}
 .gn-menu {
   position: fixed;

package/dist/collection/components/icon-button/icon-button.js CHANGED Viewed

@@ -3,7 +3,11 @@
  */
 import { h } from '@stencil/core';
 import { focusVisible } from '../../utils/focus-visible';
-/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. */
+/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+ *
+ * @part base - the main control (either `<a />` or `<button />`)
+ * @part icon - a `<nano-icon />` component
+ */
 export class IconButton {
   constructor() {
     this.iconName = undefined;
@@ -12,6 +16,7 @@ export class IconButton {
     this.name = undefined;
     this.value = undefined;
     this.label = undefined;
+    this.showTooltip = false;
     this.disabled = false;
     this.href = undefined;
     this.target = undefined;
@@ -30,12 +35,18 @@ export class IconButton {
   disconnectedCallback() {
     focusVisible.unobserve(this.button);
   }
-  render() {
+  content() {
     const TagType = this.href === undefined ? 'button' : 'a';
     return (h(TagType, { part: "base", ref: (el) => (this.button = el), class: {
         'icon-button': true,
         'icon-button--disabled': this.disabled,
-      }, "aria-label": this.label, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, type: !this.href && this.type ? this.type : undefined }, h("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false })));
+      }, "aria-label": this.label, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, type: !this.href && this.type ? this.type : undefined }, h("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false, part: "icon" })));
+  }
+  render() {
+    if (this.showTooltip) {
+      return h("nano-tooltip", { content: this.label }, this.content());
+    }
+    return this.content();
   }
   static get is() { return "nano-icon-button"; }
   static get encapsulation() { return "scoped"; }
@@ -166,6 +177,26 @@ export class IconButton {
         "attribute": "label",
         "reflect": false
       },
+      "showTooltip": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "display the label as a `<nano-tooltip />`"
+        },
+        "getter": false,
+        "setter": false,
+        "attribute": "show-tooltip",
+        "reflect": false,
+        "defaultValue": "false"
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/components/icon-button/icon-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAsB,MAAM,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD~~,gGAAgG~~;~~AAOhG~~,MAAM,OAAO,UAAU;;;;gBAU0C,QAAQ;;;;~~oBAanC~~,KAAK;;;;EAUzC,wCAAwC;EAExC,KAAK,CAAC,QAAQ;IACZ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;EACtB,CAAC;EAED,gBAAgB;IACd,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EACpC,CAAC;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,MAAM;MAAE,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EACrD,CAAC;EAED,oBAAoB;IAClB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EACtC,CAAC;~~EAED~~,~~MAAM~~;~~IACJ~~,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAE,GAAW,CAAC;IAElE,OAAO,CACL,EAAC,OAAO,IACN,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;OACvC,gBACW,IAAI,CAAC,KAAK,EACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,SAAS,EAC5B,MAAM,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1D,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;MAErD,iBACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,GAAG,EAAE,IAAI,CAAC,OAAO,iBACL,MAAM,EAClB,IAAI,EAAE,KAAK,GACX,CACM,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, ComponentInterface, Method } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. /\n\n@Component({\n tag: 'nano-icon-button',\n styleUrl: 'icon-button.scss',\n scoped: true,\n})\nexport class IconButton implements ComponentInterface {\n private button: HTMLButtonElement;\n\n /* The name of the icon to draw. /\n @Prop() iconName?: string;\n\n /* An external URL of an SVG file. /\n @Prop() iconSrc?: string;\n\n /* The default behavior of the button. /\n @Prop({ reflect: true }) type: 'submit' \| 'reset' \| 'button' = 'button';\n\n /* The name of the button, submitted as a pair with the button’s value as part of the form data. /\n @Prop({ reflect: true }) name?: string;\n\n /* Defines the value associated with the button’s name when it’s submitted with the form data. /\n @Prop({ reflect: true }) value?: string;\n\n /* A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does. /\n @Prop() label!: string;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered. /\n @Prop() href: string \| undefined;\n\n /* Specifies where to display the linked URL. Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. /\n @Prop() target: string \| undefined;\n\n /* Sets focus on the internal button */\n @Method()\n async setFocus() {\n this.button.focus();\n }\n\n componentDidLoad() {\n focusVisible.observe(this.button);\n }\n\n connectedCallback() {\n if (this.button) focusVisible.observe(this.button);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.button);\n }\n\n ~~render~~() {\n const TagType = this.href === undefined ? 'button' : ('a' as any);\n\n return (\n <TagType\n part=\"base\"\n ref={(el) => (this.button = el)}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n aria-label={this.label}\n name={this.name}\n value={this.value}\n href={this.href \|\| undefined}\n target={this.href && this.target ? this.target : undefined}\n type={!this.href && this.type ? this.type : undefined}\n >\n <nano-icon\n name={this.iconName}\n src={this.iconSrc}\n aria-hidden=\"true\"\n lazy={false}\n />\n </TagType>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAsB,MAAM,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAEzD;;;;GAIG;AAOH,MAAM,OAAO,UAAU;;;;gBAU0C,QAAQ;;;;uBAaxC,KAAK;oBAGA,KAAK;;;;EAUzC,wCAAwC;EAExC,KAAK,CAAC,QAAQ;IACZ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;EACtB,CAAC;EAED,gBAAgB;IACd,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EACpC,CAAC;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,MAAM;MAAE,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EACrD,CAAC;EAED,oBAAoB;IAClB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;EACtC,CAAC;EAEO,OAAO;IACb,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAE,GAAW,CAAC;IAElE,OAAO,CACL,EAAC,OAAO,IACN,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;OACvC,gBACW,IAAI,CAAC,KAAK,EACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,SAAS,EAC5B,MAAM,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1D,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS;MAErD,iBACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,GAAG,EAAE,IAAI,CAAC,OAAO,iBACL,MAAM,EAClB,IAAI,EAAE,KAAK,EACX,IAAI,EAAC,MAAM,GACX,CACM,CACX,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,OAAO,oBAAc,OAAO,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,EAAE,CAAgB,CAAC;KAC3E;IACD,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;EACxB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, ComponentInterface, Method } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/** Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n \n @part base - the main control (either `<a />` or `<button />`)\n * @part icon - a `<nano-icon />` component\n /\n\n@Component({\n tag: 'nano-icon-button',\n styleUrl: 'icon-button.scss',\n scoped: true,\n})\nexport class IconButton implements ComponentInterface {\n private button: HTMLButtonElement;\n\n /* The name of the icon to draw. /\n @Prop() iconName?: string;\n\n /* An external URL of an SVG file. /\n @Prop() iconSrc?: string;\n\n /* The default behavior of the button. /\n @Prop({ reflect: true }) type: 'submit' \| 'reset' \| 'button' = 'button';\n\n /* The name of the button, submitted as a pair with the button’s value as part of the form data. /\n @Prop({ reflect: true }) name?: string;\n\n /* Defines the value associated with the button’s name when it’s submitted with the form data. /\n @Prop({ reflect: true }) value?: string;\n\n /* A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does. /\n @Prop() label!: string;\n\n /* display the label as a `<nano-tooltip />` /\n @Prop() showTooltip: boolean = false;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered. /\n @Prop() href: string \| undefined;\n\n /* Specifies where to display the linked URL. Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. /\n @Prop() target: string \| undefined;\n\n /* Sets focus on the internal button */\n @Method()\n async setFocus() {\n this.button.focus();\n }\n\n componentDidLoad() {\n focusVisible.observe(this.button);\n }\n\n connectedCallback() {\n if (this.button) focusVisible.observe(this.button);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.button);\n }\n\n private content() {\n const TagType = this.href === undefined ? 'button' : ('a' as any);\n\n return (\n <TagType\n part=\"base\"\n ref={(el) => (this.button = el)}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n aria-label={this.label}\n name={this.name}\n value={this.value}\n href={this.href \|\| undefined}\n target={this.href && this.target ? this.target : undefined}\n type={!this.href && this.type ? this.type : undefined}\n >\n <nano-icon\n name={this.iconName}\n src={this.iconSrc}\n aria-hidden=\"true\"\n lazy={false}\n part=\"icon\"\n />\n </TagType>\n );\n }\n\n render() {\n if (this.showTooltip) {\n return <nano-tooltip content={this.label}>{this.content()}</nano-tooltip>;\n }\n return this.content();\n }\n}\n"]}

package/dist/collection/components/tabs/tab-group.js CHANGED Viewed

@@ -9,10 +9,10 @@ import { ComponentStore, } from '../../utils/store/component-store';
 import { createColorClasses } from '../../utils/theme';
 import { displayTransition } from '../../utils/transitions';
 /**
- * A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.
+ * A traditional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.
  *
  * Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.
- * Horizonal tabs that don't fit will overflow and scroll appropriately.
+ * Horizontal tabs that don't fit will overflow and scroll appropriately.
  * Tab-content can also be swiped to change tabs.
  *
  * @slot tabs - Add `nano-tab` elements to add clickable tabs.

package/dist/collection/components/tabs/tab-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-group.js","sourceRoot":"","sources":["../../../src/components/tabs/tab-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EAEP,KAAK,EAEL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EACL,cAAc,GAEf,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;;;;;;;;;;;;;;GAgBG;AAOH,MAAM,OAAO,QAAQ;;IAWX,kBAAa,GAAW,IAAI,CAAC;IAC7B,kBAAa,GAAW,IAAI,CAAC;IAG7B,sBAAiB,GAAoC,IAAI,OAAO,EAAE,CAAC;IA0HnE,yBAAoB,GAAG,GAAG,EAAE;MAClC,IAAI,IAAI,CAAC,gBAAgB,EAAE;QACzB,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC;OAChC;WAAM;QACL,IAAI,CAAC,iBAAiB;UACpB,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC;YAChC,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW;YAC3C,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;OAChD;IACH,CAAC,CAAC;IA6HM,gBAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC1C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;MAC3C,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;MAEvC,IAAI,GAAG;QAAE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC,CAAC,CAAC;IAEM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;MAC/C,iBAAiB;MACjB,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;QACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAC3C,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;QAEvC,IAAI,GAAG,EAAE;UACP,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;UACvB,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;OACF;MAED,2BAA2B;MAC3B,IACE;QACE,WAAW;QACX,YAAY;QACZ,SAAS;QACT,WAAW;QACX,MAAM;QACN,KAAK;OACN,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EACrB;QACA,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAoB,CAAC;QAE/C,IAAI,QAAQ,IAAI,QAAQ,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,EAAE;UAC7D,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC;UACnC,IAAI,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;UAEnC,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;YACxB,KAAK,GAAG,CAAC,CAAC;WACX;eAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;YAC9B,KAAK,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;WACzB;eAAM,IACL,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,CAAC;YAC1C,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC,EAC1C;YACA,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;WAChC;eAAM,IACL,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,CAAC;YACzC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,CAAC,EAC3C;YACA,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;WAC9C;UACD,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;UAEvB,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;YACpC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;WAC/D;UACD,yEAAyE;UACzE,KAAK,CAAC,eAAe,EAAE,CAAC;UACxB,gCAAgC;UAChC,KAAK,CAAC,cAAc,EAAE,CAAC;SACxB;OACF;IACH,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAG,EAAE;MAC7B,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;QAC3B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QACpD,OAAO;OACR;MACD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK;QACzB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,KAAK,CAAC;QAC3B,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC;MACxE,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK;QACxB,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,KAAK,IAAI,CAAC,GAAG,CAAC,WAAW;QACrE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,UAAU,KAAK,CAAC,CAAC;MAE9B,IAAI,OAAO,EAAE;QACX,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC5B,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;OAC/B;WAAM,IAAI,QAAQ,EAAE;QACnB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;OAC9B;WAAM;QACL,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAC9B,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;OAC9B;IACH,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,UAAmB,KAAK,EAAE,EAAE;MACpD,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;MACpC,IAAI,OAAO,CAAC;MACZ,IAAI,OAAO;QAAE,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,QAAQ,GAAG,EAAE,CAAC;;QACtD,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,QAAQ,GAAG,EAAE,CAAC;MAEnD,IAAI;QACF,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC;UACd,IAAI,EAAE,OAAO;UACb,QAAQ,EAAE,QAAQ;SACnB,CAAC,CAAC;OACJ;MAAC,OAAO,CAAC,EAAE;QACV,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,OAAO,CAAC;OAC/B;IACH,CAAC,CAAC;IAEM,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC/C,IAAI,IAAI,CAAC,YAAY;QAAE,OAAO;MAC9B,MAAM,KAAK,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;MACtC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC;MACjC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC;IACnC,CAAC,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC7C,IAAI,IAAI,CAAC,YAAY;QAAE,OAAO;MAC9B,MAAM,KAAK,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;MACtC,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,+BAA+B;MAC/E,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,6BAA6B;MAC7E,MAAM,SAAS,GAAG,EAAE,CAAC;MAErB,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC;MACjD,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,OAAO,CAAC;MAEjD,MAAM,iBAAiB,GACrB,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,SAAS,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,SAAS,CAAC;MAE/D,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC;MACnC,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;MAEpD,IAAI,iBAAiB,EAAE;QACrB,MAAM,IAAI,GACR,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC;UACvC,CAAC,KAAK,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC;UACrC,CAAC,CAAC,CAAC;UACH,CAAC,CAAC,CAAC,CAAC,CAAC;QAET,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE;UAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC;UAE1C,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YACrC,IAAI,KAAK,GAAG,CAAC;cAAE,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;;cACjE,IAAI,CAAC,WAAW,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;WAC9D;SACF;OACF;MACD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;MAC1B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;IAC5B,CAAC,CAAC;IAEM,4BAAuB,GAAG,GAAG,EAAE;MACrC,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;MAC1E,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;IAEM,wBAAmB,GAAG,CAAC,EAAuC,EAAE,EAAE;MACxE,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;QACxE,IAAI,CAAC,oBAAoB,EAAE,CAAC;MAC9B,CAAC,EAAE,GAAG,CAAC,CAAC;MAER,oGAAoG;MACpG,MAAM,KAAK,GAAG,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;MAC5D,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACrB,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;UACrC,MAAM,EAAE,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;YACnC,UAAU,CAAC,GAAG,EAAE;cACd,IAAI,CAAC,sBAAsB,EAAE,CAAC;cAC9B,IAAI,CAAC,eAAe,EAAE,CAAC;cACvB,IAAI,CAAC,oBAAoB,EAAE,CAAC;YAC9B,CAAC,EAAE,GAAG,CAAC,CAAC;UACV,CAAC,CAAC,CAAC;UACH,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;UAErC,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE;YACf,aAAa,EAAE,IAAI;YACnB,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;WACd,CAAC,CAAC;SACJ;MACH,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;6BAlb2B,KAAK;4BACN,IAAI;2BACL,IAAI;;qBAMM,KAAK;4BAKf,KAAK;;;uBAiBM,SAAS;;;EAQ/C,mBAAmB;IACjB,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,KAAK,IAAI,CAAC,GAAG;MAAE,OAAO;IAChE,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC;IACtE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;EACzB,CAAC;EAGD,qBAAqB;IACnB,IAAI,CAAC,sBAAsB,EAAE,CAAC;EAChC,CAAC;EAGD,4BAA4B;IAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC;EAC9B,CAAC;EAGD,YAAY;IACV,IAAI,CAAC,IAAI,CAAC,QAAQ;MAAE,OAAO;IAC3B,iBAAiB,CAAC,IAAI,CAAC,QAAQ,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;EACvE,CAAC;EAGD,WAAW;IACT,IAAI,CAAC,IAAI,CAAC,OAAO;MAAE,OAAO;IAC1B,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;EACrE,CAAC;EAGD,mBAAmB;IACjB,IAAI,IAAI,CAAC,iBAAiB;MAAE,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC;;MAExE,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;QACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;MACtD,CAAC,EAAE,EAAE,CAAC,CAAC;EACX,CAAC;EAcD,qCAAqC;EAErC,KAAK,CAAC,IAAI,CAAC,KAAa;IACtB,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,KAAK,KAAK;MAAE,OAAO;IAE7D,MAAM,GAAG,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;IAEnE,IAAI,GAAG;MAAE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;EAClC,CAAC;EAED,mBAAmB;EAEnB,IAAI,gBAAgB;IAClB,OAAO,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAO,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;EAC3D,CAAC;EAED,IAAI,UAAU;IACZ,OAAO,iBAAiB,CAAqB,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;EACtE,CAAC;EAED,IAAI,YAAY;IACd,OAAO,iBAAiB,CACtB,IAAI,CAAC,IAAI,EACT,kBAAkB,CACnB,CAAC;EACJ,CAAC;EAED,IAAI,YAAY;IACd,OAAO,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;EACvD,CAAC;EAaO,YAAY,CAAC,GAAuB,EAAE,UAAU,GAAG,IAAI;IAC7D,IACE,GAAG;MACH,GAAG,KAAK,IAAI,CAAC,SAAS;MACtB,CAAC,GAAG,CAAC,QAAQ;MACb,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,GAAG,CAAC,EACnC;MACA,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;MACnC,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;MACrB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,KAAK,CAAC;MAErB,uBAAuB;MACvB,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,MAAM,GAAG,EAAE,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;MACvE,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE;QAC3B,IAAI,EAAE,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;UACpC,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC;UACjB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;SACvB;;UAAM,EAAE,CAAC,MAAM,GAAG,KAAK,CAAC;QACzB,EAAE,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;MACtC,CAAC,CAAC,CAAC;MAEH,IAAI,CAAC,sBAAsB,EAAE,CAAC;MAE9B,wEAAwE;MACxE,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE;QAChD,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;OAClE;MAED,cAAc;MACd,IAAI,UAAU,EAAE;QACd,IAAI,WAAW,EAAE;UACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAC;SACpD;QAED,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC;OACvD;KACF;EACH,CAAC;EAEO,aAAa;IACnB,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC;IACnC,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC;IAEjC,6CAA6C;IAC7C,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;MACf,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC;MACzD,IAAI,KAAK,EAAE;QACT,GAAG,CAAC,YAAY,CAAC,eAAe,EAAE,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5D,KAAK,CAAC,YAAY,CAAC,iBAAiB,EAAE,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;OAC/D;IACH,CAAC,CAAC,CAAC;EACL,CAAC;EAEO,sBAAsB;;IAC5B,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE,CAC9B,GAAG,CAAC,YAAY,CACd,WAAW,EACX,IAAI,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CACrD,CACF,CAAC;IAEF,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC;IAC9B,MAAM,KAAK,GAAG,CAAA,MAAA,GAAG,CAAC,UAAU,CAAC,aAAa,CAAC,UAAU,CAAC,0CAAE,WAAW,KAAI,CAAC,CAAC;IACzE,MAAM,MAAM,GAAG,GAAG,CAAC,YAAY,CAAC;IAChC,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IAEzC,IAAI,CAAC,IAAI,CAAC,kBAAkB;MAAE,OAAO;IAErC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC;IAE/B,QAAQ,IAAI,CAAC,SAAS,EAAE;MACtB,KAAK,KAAK;QACR,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;QACnD,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;QAC5C,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,UAAU,KAAK,CAAC;QACxE,MAAM;MAER,KAAK,OAAO;QACV,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;QAC3C,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC;QACrD,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,SAAS,KAAK,CAAC;QACvE,MAAM;KACT;EACH,CAAC;EAEO,WAAW;IACjB,IAAI,CAAC,IAAI,CAAC,GAAG;MAAE,OAAO,CAAC,CAAC;IACxB,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACjD,IAAI,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,CAAC;IACvC,OAAO,CAAC,WAAW;MACjB,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC;QACrC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC;EAC5C,CAAC;EAED,iBAAiB;EAGjB,cAAc,CAAC,EAAgD;;IAC7D,IAAI,QAAQ,GAAG,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;IACxD,MAAM,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC;IACtB,IAAI,QAAQ,GAAG,CAAC;MAAE,OAAO;IAEzB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,IAAI,KAAK,GAAG,CAAC,KAAK,CAAC,CAAC;IACpE,IAAI,CAAC,KAAK;MAAE,OAAO;IAEnB,EAAE,CAAC,wBAAwB,EAAE,CAAC;IAE9B,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC;IAChE,IAAI,OAAO,CAAC,gBAAgB;MAAE,OAAO;IAErC,uDAAuD;IACvD,IAAI,GAAG,CAAC,MAAM,EAAE;MACd,QAAQ,GAAG,QAAQ,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC;MAC7C,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,0CAAE,KAAK,CAAC;MACvD,IAAI,OAAO;QAAE,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACtC;IAED,GAAG,CAAC,MAAM,EAAE,CAAC;IACb,KAAK,CAAC,MAAM,EAAE,CAAC;IACf,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC;EAC9C,CAAC;EA0LD,gBAAgB;EAEhB,gBAAgB;IACd,qDAAqD;IACrD,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;MAC9D,IAAI,OAAO,CAAC,CAAC,CAAC,CAAC,iBAAiB,GAAG,CAAC,EAAE;QACpC,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;QAExE,IAAI,IAAI,CAAC,OAAO;UACd,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACrE,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;OACvC;IACH,CAAC,CAAC,CAAC;IACH,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC5B,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAEpC,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MACnC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACrC;IAED,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAEzD,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC;MAAE,OAAO;IAEtC,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;MAC5C,UAAU,CAAC,GAAG,EAAE;QACd,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC9B,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;MACnE,CAAC,EAAE,GAAG,CAAC,CAAC;IACV,CAAC,CAAC,CAAC;IACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;EACxC,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,KAAK;MACR,IAAI,CAAC,IAAI,CAAC,GAAG,KAAK,KAAK;QACtB,IAAI,CAAC,IAAI,CAAC,aAA0B,CAAC,GAAG,KAAK,KAAK,CAAC;IAEtD,IAAI,KAAK,CAAC,QAAQ,EAAE;MAClB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;MACxE,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;EACH,CAAC;EAED,oBAAoB;IAClB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACtC,IAAI,IAAI,CAAC,OAAO,EAAE;MAChB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;MACrC,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACvC;IACD,IAAI,IAAI,CAAC,cAAc;MAAE,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;EACnE,CAAC;EAED,MAAM;IACJ,IAAI,CAAC,KAAK,GAAI,IAAI,CAAC,IAAI,CAAC,aAA0B,CAAC,GAAG,KAAK,KAAK,CAAC;IAEjE,OAAO,CACL,EAAC,IAAI,IACH,KAAK,oBAAO,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,GAC1C,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;MAE9B,WACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC,EACjC,KAAK,EAAE;UACL,gBAAgB,EAAE,IAAI;UACtB,qBAAqB,EAAE,IAAI,CAAC,SAAS,KAAK,KAAK;UAC/C,uBAAuB,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO;UACnD,qCAAqC,EAAE,IAAI,CAAC,iBAAiB;UAC7D,0CAA0C,EAAE,CAAC,IAAI,CAAC,eAAe;UACjE,2CAA2C,EAAE,CAAC,IAAI,CAAC,gBAAgB;SACpE,EACD,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa;QAE7B,WAAK,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAC,KAAK;UAClD,IAAI,CAAC,SAAS,KAAK,KAAK,IAAI,CAC3B,cACE,KAAK,EAAE;cACL,+BAA+B,EAAE,IAAI;cACrC,qCAAqC,EAAE,IAAI;aAC5C,EACD,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;YAEzC,iBAAW,IAAI,EAAC,oBAAoB,GAAa,CAC1C,CACV;UACD,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAC,qBAAqB,EAC3B,QAAQ,EAAE,IAAI,CAAC,eAAe;YAE9B,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,EAC7B,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,sBAAsB,EAC5B,IAAI,EAAC,SAAS;cAEd,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC,EAC3C,IAAI,EAAC,sBAAsB,EAC3B,KAAK,EAAC,sCAAsC,GAC5C;cACF,YAAM,IAAI,EAAC,MAAM,EAAC,YAAY,EAAE,IAAI,CAAC,mBAAmB,GAAI,CACxD,CACF;UACL,IAAI,CAAC,SAAS,KAAK,KAAK,IAAI,CAC3B,cACE,KAAK,EAAE;cACL,+BAA+B,EAAE,IAAI;cACrC,sCAAsC,EAAE,IAAI;aAC7C,EACD,GAAG,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,EACnC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YAExC,iBAAW,IAAI,EAAC,qBAAqB,GAAa,CAC3C,CACV,CACG;QACN,YAAM,IAAI,EAAC,oBAAoB,GAAG;QAClC,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,sBAAsB,EAC5B,YAAY,EAAE,IAAI,CAAC,gBAAgB,EACnC,UAAU,EAAE,IAAI,CAAC,cAAc;UAE/B,YAAM,YAAY,EAAE,IAAI,CAAC,uBAAuB,GAAI,CAChD,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n ComponentInterface,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n Listen,\n Build,\n} from '@stencil/core';\n\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { scrollIntoView } from '../../utils/scroll';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../interface';\n\n/*\n A tradtional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n \n Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizonal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n \n @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header - a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n \n @part base - the main tab-group wrapper\n * @part nav - the bar surrounding all the tabs and nav buttons\n * @part tabs - the wrapper around the `nano-tab` components\n * @part active-tab-indicator - the active indicator line\n * @part body - the wrapper around the `nano-tab-content` components\n /\n\n@Component({\n tag: 'nano-tab-group',\n styleUrl: 'tab-group.scss',\n shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n private activeTab: HTMLNanoTabElement;\n private activePanel: HTMLNanoTabContentElement;\n private activeTabIndicator: HTMLElement;\n private nav: HTMLElement;\n private tabGroup: HTMLElement;\n private tabs: HTMLElement;\n private rightBtn: HTMLButtonElement;\n private leftBtn: HTMLButtonElement;\n\n private isRtl: boolean;\n private initialTouchX: number = null;\n private initialTouchY: number = null;\n\n private resizeObserver: ResizeObserver;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n @Element() host: HTMLNanoTabGroupElement;\n\n @State() hasScrollControls = false;\n @State() hideControlRight = true;\n @State() hideControlLeft = true;\n @State() tab: string;\n\n /\n The placement of the tabs.\n /\n @Prop() placement: 'top' \| 'start' = 'top';\n\n /\n Disables the scroll arrows that appear when tabs overflow.\n /\n @Prop() noScrollControls = false;\n\n /\n The color to use from the application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Store the currently open tab (against this ID) in the component store.\n * Use in conjunction with storeMethod\n /\n @Prop() storeId?: string;\n\n /\n The method of storage.\n * Either session storage, url hash (after the '#') or url query (after the '?').\n /\n @Prop() storeMethod: StorageMethods = 'session';\n\n /\n Disable 'swipe to change tab' on devices with touch\n /\n @Prop() disableSwipe: boolean;\n\n @Watch('tab')\n handleTabNameChange() {\n if (this.activeTab && this.activeTab.panel === this.tab) return;\n const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n this.setActiveTab(tab);\n }\n\n @Watch('placement')\n handlePlacementChange() {\n this.syncActiveTabIndicator();\n }\n\n @Watch('noScrollControls')\n handleNoScrollControlsChange() {\n this.updateScrollControls();\n }\n\n @Watch('hideControlRight')\n hideRightBtn() {\n if (!this.rightBtn) return;\n displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n }\n\n @Watch('hideControlLeft')\n hideLeftBtn() {\n if (!this.leftBtn) return;\n displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n }\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n else\n setTimeout((_) => {\n this.hideControlLeft = this.hideControlRight = true;\n }, 20);\n }\n\n /* Emitted when a tab is shown. /\n @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n /* Emitted when a tab is hidden. /\n @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n /* Emitted when the tab is closable and the close button is activated. /\n @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n /* Emitted when a closable tab is removed. /\n @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n /* Shows the specified tab panel. /\n @Method()\n async show(panel: string) {\n if (this.activeTab && this.activeTab.panel === panel) return;\n\n const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n if (tab) this.setActiveTab(tab);\n }\n\n // Internal Methods\n\n get getAllActiveTabs() {\n return this.getAllTabs.filter((el: any) => !el.disabled);\n }\n\n get getAllTabs() {\n return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n }\n\n get getAllPanels() {\n return getDirectChildren<HTMLNanoTabContentElement>(\n this.host,\n 'nano-tab-content'\n );\n }\n\n get getActiveTab() {\n return this.getAllActiveTabs.find((el) => el.active);\n }\n\n private updateScrollControls = () => {\n if (this.noScrollControls) {\n this.hasScrollControls = false;\n } else {\n this.hasScrollControls =\n ['top'].includes(this.placement) &&\n this.nav.scrollWidth > this.nav.clientWidth &&\n this.nav.scrollWidth > this.tabs.clientWidth;\n }\n };\n\n private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n if (\n tab &&\n tab !== this.activeTab &&\n !tab.disabled &&\n this.getAllActiveTabs.includes(tab)\n ) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n this.tab = tab.panel;\n\n // Sync tabs and panels\n this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n this.getAllPanels.map((el) => {\n if (el.name === this.activeTab.panel) {\n el.active = true;\n this.activePanel = el;\n } else el.active = false;\n el.removeAttribute('animation-dir');\n });\n\n this.syncActiveTabIndicator();\n\n // active tab can be changed on init - this won't be ready. No big thing\n if (this.nav && ['top'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n }\n\n // Emit events\n if (emitEvents) {\n if (previousTab) {\n this.nanoTabHide.emit({ name: previousTab.panel });\n }\n\n this.nanoTabShow.emit({ name: this.activeTab.panel });\n }\n }\n }\n\n private setAriaLabels() {\n const tabs = this.getAllActiveTabs;\n const panels = this.getAllPanels;\n\n // Link each tab with its corresponding panel\n tabs.map((tab) => {\n const panel = panels.find((el) => el.name === tab.panel);\n if (panel) {\n tab.setAttribute('aria-controls', panel.getAttribute('id'));\n panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n }\n });\n }\n\n private syncActiveTabIndicator() {\n this.getAllTabs.forEach((tab) =>\n tab.setAttribute(\n 'direction',\n this.placement === 'top' ? 'horizontal' : 'vertical'\n )\n );\n\n const tab = this.getActiveTab;\n const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth \|\| 0;\n const height = tab.clientHeight;\n const offset = getOffset(tab, this.tabs);\n\n if (!this.activeTabIndicator) return;\n\n const offsetTop = offset.top + this.nav.scrollTop;\n const offsetLeft = offset.left;\n\n switch (this.placement) {\n case 'top':\n this.activeTabIndicator.style.width = `${width}px`;\n this.activeTabIndicator.style.height = null;\n this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'start':\n this.activeTabIndicator.style.width = null;\n this.activeTabIndicator.style.height = `${height}px`;\n this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n }\n\n private getNavWidth() {\n if (!this.nav) return 0;\n const computedStyle = getComputedStyle(this.nav);\n let clientWidth = this.nav.clientWidth;\n return (clientWidth -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n }\n\n // Event handlers\n\n @Listen('nanoTabClose')\n handleTabClose(ev: CustomEvent & { target: HTMLNanoTabElement }) {\n let tabIndex = this.getAllActiveTabs.indexOf(ev.target);\n const tab = ev.target;\n if (tabIndex < 0) return;\n\n const panel = this.getAllPanels.find((el) => el.name === tab.panel);\n if (!panel) return;\n\n ev.stopImmediatePropagation();\n\n const closeEv = this.nanoTabWillClose.emit({ name: tab.panel });\n if (closeEv.defaultPrevented) return;\n\n // Show the previous tab if the tab is currently active\n if (tab.active) {\n tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;\n const prevTab = this.getAllActiveTabs[tabIndex]?.panel;\n if (prevTab) this.host.show(prevTab);\n }\n\n tab.remove();\n panel.remove();\n this.nanoTabClose.emit({ name: tab.panel });\n }\n\n private handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) this.setActiveTab(tab);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) {\n this.setActiveTab(tab);\n event.preventDefault();\n }\n }\n\n // Move focus left or right\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n const activeEl = document.activeElement as any;\n\n if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n const tabs = this.getAllActiveTabs;\n let index = tabs.indexOf(activeEl);\n\n if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = tabs.length - 1;\n } else if (\n (this.isRtl && event.key === 'ArrowRight') \|\|\n (!this.isRtl && event.key === 'ArrowLeft')\n ) {\n index = Math.max(0, index - 1);\n } else if (\n (this.isRtl && event.key === 'ArrowLeft') \|\|\n (!this.isRtl && event.key === 'ArrowRight')\n ) {\n index = Math.min(tabs.length - 1, index + 1);\n }\n tabs[index].setFocus();\n\n if (['top'].includes(this.placement)) {\n scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n }\n // need to stop bubbling otherwise it will focus on parent tabs if nested\n event.stopPropagation();\n // stop the browser moving about\n event.preventDefault();\n }\n }\n };\n\n private handleTabScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlLeft = this.hideControlRight = true;\n return;\n }\n const endRight = this.isRtl\n ? this.nav.scrollLeft === 0\n : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n const endLeft = this.isRtl\n ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n : this.nav.scrollLeft === 0;\n\n if (endLeft) {\n this.hideControlLeft = true;\n this.hideControlRight = false;\n } else if (endRight) {\n this.hideControlLeft = false;\n this.hideControlRight = true;\n } else {\n this.hideControlRight = false;\n this.hideControlLeft = false;\n }\n };\n\n private handleBtnClick = (goRight: boolean = false) => {\n const navWidth = this.getNavWidth();\n let leftAmt;\n if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n try {\n this.nav.scroll({\n left: leftAmt,\n behavior: 'smooth',\n });\n } catch (e) {\n this.nav.scrollLeft = leftAmt;\n }\n };\n\n private handleTouchStart = (event: TouchEvent) => {\n if (this.disableSwipe) return;\n const touch = event.changedTouches[0];\n this.initialTouchX = touch.pageX;\n this.initialTouchY = touch.pageY;\n };\n\n private handleTouchEnd = (event: TouchEvent) => {\n if (this.disableSwipe) return;\n const touch = event.changedTouches[0];\n const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n const threshold = 70;\n\n const xDiff = this.initialTouchX - touch.clientX;\n const yDiff = this.initialTouchY - touch.clientY;\n\n const isHorizontalSwipe =\n Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n const tabs = this.getAllActiveTabs;\n const currIndex = tabs.findIndex((el) => el.active);\n\n if (isHorizontalSwipe) {\n const toGo =\n (distX < 0 && this.placement === 'top') \|\|\n (distX > 0 && this.placement !== 'top')\n ? 1\n : -1;\n\n if (tabs[currIndex + toGo]) {\n this.setActiveTab(tabs[currIndex + toGo]);\n\n if (Math.abs(xDiff) > Math.abs(yDiff)) {\n if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n else this.activePanel.setAttribute('animation-dir', 'right');\n }\n }\n }\n this.initialTouchX = null;\n this.initialTouchY = null;\n };\n\n private handleContentSlotChange = () => {\n setTimeout(() => {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n });\n };\n\n private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n setTimeout(() => {\n this.setAriaLabels();\n this.handleTabScroll();\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n this.updateScrollControls();\n }, 500);\n\n /* maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n const nodes = ev.target.assignedElements({ flatten: true });\n nodes.forEach((node) => {\n if (!this.mutationObservers.get(node)) {\n const mo = new MutationObserver(() => {\n setTimeout(() => {\n this.syncActiveTabIndicator();\n this.handleTabScroll();\n this.updateScrollControls();\n }, 500);\n });\n this.mutationObservers.set(node, mo);\n\n mo.observe(node, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n }\n });\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n // Initial IO - watching for all content to be loaded\n const observer = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n\n if (this.storeId)\n ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n observer.unobserve(entries[0].target);\n }\n });\n observer.observe(this.host);\n focusVisible.observe(this.tabGroup);\n\n if (this.leftBtn) {\n focusVisible.observe(this.leftBtn);\n focusVisible.observe(this.rightBtn);\n }\n\n requestAnimationFrame(() => this.updateScrollControls());\n\n if (!window['ResizeObserver']) return;\n\n this.resizeObserver = new ResizeObserver(() => {\n setTimeout(() => {\n this.updateScrollControls();\n this.syncActiveTabIndicator();\n scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n }, 500);\n });\n this.resizeObserver.observe(this.nav);\n }\n\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' \|\|\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n if (Build.isServer) {\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n this.setAriaLabels();\n }\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.tabGroup);\n if (this.leftBtn) {\n focusVisible.unobserve(this.leftBtn);\n focusVisible.unobserve(this.rightBtn);\n }\n if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n }\n\n render() {\n this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color) }}\n dir={this.isRtl ? 'rtl' : null}\n >\n <div\n part=\"base\"\n ref={(el) => (this.tabGroup = el)}\n class={{\n 'nano-tab-group': true,\n 'nano-tab-group--top': this.placement === 'top',\n 'nano-tab-group--start': this.placement === 'start',\n 'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n 'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n 'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n {this.placement === 'top' && (\n <button\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--left': true,\n }}\n ref={(btn) => (this.leftBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n >\n <nano-icon name=\"light/chevron-left\"></nano-icon>\n </button>\n )}\n <div\n ref={(el) => (this.nav = el)}\n class=\"nano-tab-group__nav\"\n onScroll={this.handleTabScroll}\n >\n <div\n ref={(el) => (this.tabs = el)}\n part=\"tabs\"\n class=\"nano-tab-group__tabs\"\n role=\"tablist\"\n >\n <div\n ref={(el) => (this.activeTabIndicator = el)}\n part=\"active-tab-indicator\"\n class=\"nano-tab-group__active-tab-indicator\"\n />\n <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n </div>\n </div>\n {this.placement === 'top' && (\n <button\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--right': true,\n }}\n ref={(btn) => (this.rightBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n >\n <nano-icon name=\"light/chevron-right\"></nano-icon>\n </button>\n )}\n </div>\n <slot name=\"tab-content-header\" />\n <div\n part=\"body\"\n class=\"nano-tab-group__body\"\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <slot onSlotchange={this.handleContentSlotChange} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"tab-group.js","sourceRoot":"","sources":["../../../src/components/tabs/tab-group.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n ComponentInterface,\n Event,\n EventEmitter,\n Method,\n Prop,\n State,\n Watch,\n h,\n Host,\n Listen,\n Build,\n} from '@stencil/core';\n\nimport { getDirectChildren, getOffset } from '../../utils/dom';\nimport { focusVisible } from '../../utils/focus-visible';\nimport { scrollIntoView } from '../../utils/scroll';\nimport {\n ComponentStore,\n StorageMethods,\n} from '../../utils/store/component-store';\nimport { createColorClasses } from '../../utils/theme';\nimport { displayTransition } from '../../utils/transitions';\nimport type { Color } from '../../interface';\n\n/*\n A traditional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n \n Tabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\n * Horizontal tabs that don't fit will overflow and scroll appropriately.\n * Tab-content can also be swiped to change tabs.\n \n @slot tabs - Add `nano-tab` elements to add clickable tabs.\n * @slot tab-content-header - a header bar displayed above tab content.\n * @slot - Add `nano-tab-content` elements to add tabbable content.\n \n @part base - the main tab-group wrapper\n * @part nav - the bar surrounding all the tabs and nav buttons\n * @part tabs - the wrapper around the `nano-tab` components\n * @part active-tab-indicator - the active indicator line\n * @part body - the wrapper around the `nano-tab-content` components\n /\n\n@Component({\n tag: 'nano-tab-group',\n styleUrl: 'tab-group.scss',\n shadow: true,\n})\nexport class TabGroup implements ComponentInterface {\n private activeTab: HTMLNanoTabElement;\n private activePanel: HTMLNanoTabContentElement;\n private activeTabIndicator: HTMLElement;\n private nav: HTMLElement;\n private tabGroup: HTMLElement;\n private tabs: HTMLElement;\n private rightBtn: HTMLButtonElement;\n private leftBtn: HTMLButtonElement;\n\n private isRtl: boolean;\n private initialTouchX: number = null;\n private initialTouchY: number = null;\n\n private resizeObserver: ResizeObserver;\n private mutationObservers: WeakMap<Node, MutationObserver> = new WeakMap();\n\n @Element() host: HTMLNanoTabGroupElement;\n\n @State() hasScrollControls = false;\n @State() hideControlRight = true;\n @State() hideControlLeft = true;\n @State() tab: string;\n\n /\n The placement of the tabs.\n /\n @Prop() placement: 'top' \| 'start' = 'top';\n\n /\n Disables the scroll arrows that appear when tabs overflow.\n /\n @Prop() noScrollControls = false;\n\n /\n The color to use from the application's color palette.\n /\n @Prop() color?: Color;\n\n /\n Store the currently open tab (against this ID) in the component store.\n * Use in conjunction with storeMethod\n /\n @Prop() storeId?: string;\n\n /\n The method of storage.\n * Either session storage, url hash (after the '#') or url query (after the '?').\n /\n @Prop() storeMethod: StorageMethods = 'session';\n\n /\n Disable 'swipe to change tab' on devices with touch\n /\n @Prop() disableSwipe: boolean;\n\n @Watch('tab')\n handleTabNameChange() {\n if (this.activeTab && this.activeTab.panel === this.tab) return;\n const tab = this.getAllActiveTabs.find((el) => el.panel === this.tab);\n this.setActiveTab(tab);\n }\n\n @Watch('placement')\n handlePlacementChange() {\n this.syncActiveTabIndicator();\n }\n\n @Watch('noScrollControls')\n handleNoScrollControlsChange() {\n this.updateScrollControls();\n }\n\n @Watch('hideControlRight')\n hideRightBtn() {\n if (!this.rightBtn) return;\n displayTransition(this.rightBtn, 'is-shown', !this.hideControlRight);\n }\n\n @Watch('hideControlLeft')\n hideLeftBtn() {\n if (!this.leftBtn) return;\n displayTransition(this.leftBtn, 'is-shown', !this.hideControlLeft);\n }\n\n @Watch('hasScrollControls')\n watchScrollControls() {\n if (this.hasScrollControls) setTimeout((_) => this.handleTabScroll(), 20);\n else\n setTimeout((_) => {\n this.hideControlLeft = this.hideControlRight = true;\n }, 20);\n }\n\n /* Emitted when a tab is shown. /\n @Event() nanoTabShow: EventEmitter<{ name: string }>;\n\n /* Emitted when a tab is hidden. /\n @Event() nanoTabHide: EventEmitter<{ name: string }>;\n\n /* Emitted when the tab is closable and the close button is activated. /\n @Event() nanoTabWillClose: EventEmitter<{ name: string }>;\n\n /* Emitted when a closable tab is removed. /\n @Event() nanoTabClose: EventEmitter<{ name: string }>;\n\n /* Shows the specified tab panel. /\n @Method()\n async show(panel: string) {\n if (this.activeTab && this.activeTab.panel === panel) return;\n\n const tab = this.getAllActiveTabs.find((el) => el.panel === panel);\n\n if (tab) this.setActiveTab(tab);\n }\n\n // Internal Methods\n\n get getAllActiveTabs() {\n return this.getAllTabs.filter((el: any) => !el.disabled);\n }\n\n get getAllTabs() {\n return getDirectChildren<HTMLNanoTabElement>(this.host, 'nano-tab');\n }\n\n get getAllPanels() {\n return getDirectChildren<HTMLNanoTabContentElement>(\n this.host,\n 'nano-tab-content'\n );\n }\n\n get getActiveTab() {\n return this.getAllActiveTabs.find((el) => el.active);\n }\n\n private updateScrollControls = () => {\n if (this.noScrollControls) {\n this.hasScrollControls = false;\n } else {\n this.hasScrollControls =\n ['top'].includes(this.placement) &&\n this.nav.scrollWidth > this.nav.clientWidth &&\n this.nav.scrollWidth > this.tabs.clientWidth;\n }\n };\n\n private setActiveTab(tab: HTMLNanoTabElement, emitEvents = true) {\n if (\n tab &&\n tab !== this.activeTab &&\n !tab.disabled &&\n this.getAllActiveTabs.includes(tab)\n ) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n this.tab = tab.panel;\n\n // Sync tabs and panels\n this.getAllActiveTabs.map((el) => (el.active = el === this.activeTab));\n this.getAllPanels.map((el) => {\n if (el.name === this.activeTab.panel) {\n el.active = true;\n this.activePanel = el;\n } else el.active = false;\n el.removeAttribute('animation-dir');\n });\n\n this.syncActiveTabIndicator();\n\n // active tab can be changed on init - this won't be ready. No big thing\n if (this.nav && ['top'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n }\n\n // Emit events\n if (emitEvents) {\n if (previousTab) {\n this.nanoTabHide.emit({ name: previousTab.panel });\n }\n\n this.nanoTabShow.emit({ name: this.activeTab.panel });\n }\n }\n }\n\n private setAriaLabels() {\n const tabs = this.getAllActiveTabs;\n const panels = this.getAllPanels;\n\n // Link each tab with its corresponding panel\n tabs.map((tab) => {\n const panel = panels.find((el) => el.name === tab.panel);\n if (panel) {\n tab.setAttribute('aria-controls', panel.getAttribute('id'));\n panel.setAttribute('aria-labelledby', tab.getAttribute('id'));\n }\n });\n }\n\n private syncActiveTabIndicator() {\n this.getAllTabs.forEach((tab) =>\n tab.setAttribute(\n 'direction',\n this.placement === 'top' ? 'horizontal' : 'vertical'\n )\n );\n\n const tab = this.getActiveTab;\n const width = tab.shadowRoot.querySelector('.nanotab')?.clientWidth \|\| 0;\n const height = tab.clientHeight;\n const offset = getOffset(tab, this.tabs);\n\n if (!this.activeTabIndicator) return;\n\n const offsetTop = offset.top + this.nav.scrollTop;\n const offsetLeft = offset.left;\n\n switch (this.placement) {\n case 'top':\n this.activeTabIndicator.style.width = `${width}px`;\n this.activeTabIndicator.style.height = null;\n this.activeTabIndicator.style.transform = `translateX(${offsetLeft}px)`;\n break;\n\n case 'start':\n this.activeTabIndicator.style.width = null;\n this.activeTabIndicator.style.height = `${height}px`;\n this.activeTabIndicator.style.transform = `translateY(${offsetTop}px)`;\n break;\n }\n }\n\n private getNavWidth() {\n if (!this.nav) return 0;\n const computedStyle = getComputedStyle(this.nav);\n let clientWidth = this.nav.clientWidth;\n return (clientWidth -=\n parseFloat(computedStyle.paddingLeft) +\n parseFloat(computedStyle.paddingRight));\n }\n\n // Event handlers\n\n @Listen('nanoTabClose')\n handleTabClose(ev: CustomEvent & { target: HTMLNanoTabElement }) {\n let tabIndex = this.getAllActiveTabs.indexOf(ev.target);\n const tab = ev.target;\n if (tabIndex < 0) return;\n\n const panel = this.getAllPanels.find((el) => el.name === tab.panel);\n if (!panel) return;\n\n ev.stopImmediatePropagation();\n\n const closeEv = this.nanoTabWillClose.emit({ name: tab.panel });\n if (closeEv.defaultPrevented) return;\n\n // Show the previous tab if the tab is currently active\n if (tab.active) {\n tabIndex = tabIndex === 0 ? 1 : tabIndex - 1;\n const prevTab = this.getAllActiveTabs[tabIndex]?.panel;\n if (prevTab) this.host.show(prevTab);\n }\n\n tab.remove();\n panel.remove();\n this.nanoTabClose.emit({ name: tab.panel });\n }\n\n private handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) this.setActiveTab(tab);\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Activate a tab\n if (['Enter', ' '].includes(event.key)) {\n const target = event.target as HTMLElement;\n const tab = target.closest('nano-tab');\n\n if (tab) {\n this.setActiveTab(tab);\n event.preventDefault();\n }\n }\n\n // Move focus left or right\n if (\n [\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'ArrowDown',\n 'Home',\n 'End',\n ].includes(event.key)\n ) {\n const activeEl = document.activeElement as any;\n\n if (activeEl && activeEl.tagName.toLowerCase() === 'nano-tab') {\n const tabs = this.getAllActiveTabs;\n let index = tabs.indexOf(activeEl);\n\n if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = tabs.length - 1;\n } else if (\n (this.isRtl && event.key === 'ArrowRight') \|\|\n (!this.isRtl && event.key === 'ArrowLeft')\n ) {\n index = Math.max(0, index - 1);\n } else if (\n (this.isRtl && event.key === 'ArrowLeft') \|\|\n (!this.isRtl && event.key === 'ArrowRight')\n ) {\n index = Math.min(tabs.length - 1, index + 1);\n }\n tabs[index].setFocus();\n\n if (['top'].includes(this.placement)) {\n scrollIntoView(tabs[index], this.nav, 'horizontal', 'center');\n }\n // need to stop bubbling otherwise it will focus on parent tabs if nested\n event.stopPropagation();\n // stop the browser moving about\n event.preventDefault();\n }\n }\n };\n\n private handleTabScroll = () => {\n if (!this.hasScrollControls) {\n this.hideControlLeft = this.hideControlRight = true;\n return;\n }\n const endRight = this.isRtl\n ? this.nav.scrollLeft === 0\n : this.nav.scrollWidth - this.nav.scrollLeft === this.nav.clientWidth;\n const endLeft = this.isRtl\n ? this.nav.scrollWidth + this.nav.scrollLeft === this.nav.clientWidth\n : this.nav.scrollLeft === 0;\n\n if (endLeft) {\n this.hideControlLeft = true;\n this.hideControlRight = false;\n } else if (endRight) {\n this.hideControlLeft = false;\n this.hideControlRight = true;\n } else {\n this.hideControlRight = false;\n this.hideControlLeft = false;\n }\n };\n\n private handleBtnClick = (goRight: boolean = false) => {\n const navWidth = this.getNavWidth();\n let leftAmt;\n if (goRight) leftAmt = this.nav.scrollLeft + navWidth - 20;\n else leftAmt = this.nav.scrollLeft - navWidth + 20;\n\n try {\n this.nav.scroll({\n left: leftAmt,\n behavior: 'smooth',\n });\n } catch (e) {\n this.nav.scrollLeft = leftAmt;\n }\n };\n\n private handleTouchStart = (event: TouchEvent) => {\n if (this.disableSwipe) return;\n const touch = event.changedTouches[0];\n this.initialTouchX = touch.pageX;\n this.initialTouchY = touch.pageY;\n };\n\n private handleTouchEnd = (event: TouchEvent) => {\n if (this.disableSwipe) return;\n const touch = event.changedTouches[0];\n const distX = touch.pageX - this.initialTouchX; // get horizontal dist traveled\n const distY = touch.pageY - this.initialTouchY; // get vertical dist traveled\n const threshold = 70;\n\n const xDiff = this.initialTouchX - touch.clientX;\n const yDiff = this.initialTouchY - touch.clientY;\n\n const isHorizontalSwipe =\n Math.abs(distX) >= threshold && Math.abs(distY) <= threshold;\n\n const tabs = this.getAllActiveTabs;\n const currIndex = tabs.findIndex((el) => el.active);\n\n if (isHorizontalSwipe) {\n const toGo =\n (distX < 0 && this.placement === 'top') \|\|\n (distX > 0 && this.placement !== 'top')\n ? 1\n : -1;\n\n if (tabs[currIndex + toGo]) {\n this.setActiveTab(tabs[currIndex + toGo]);\n\n if (Math.abs(xDiff) > Math.abs(yDiff)) {\n if (xDiff > 0) this.activePanel.setAttribute('animation-dir', 'left');\n else this.activePanel.setAttribute('animation-dir', 'right');\n }\n }\n }\n this.initialTouchX = null;\n this.initialTouchY = null;\n };\n\n private handleContentSlotChange = () => {\n setTimeout(() => {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n });\n };\n\n private handleTabSlotChange = (ev: Event & { target: HTMLSlotElement }) => {\n setTimeout(() => {\n this.setAriaLabels();\n this.handleTabScroll();\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n this.updateScrollControls();\n }, 500);\n\n /* maintain a weakmap of mutation observers to maintain tab / indicator position on all changes. */\n const nodes = ev.target.assignedElements({ flatten: true });\n nodes.forEach((node) => {\n if (!this.mutationObservers.get(node)) {\n const mo = new MutationObserver(() => {\n setTimeout(() => {\n this.syncActiveTabIndicator();\n this.handleTabScroll();\n this.updateScrollControls();\n }, 500);\n });\n this.mutationObservers.set(node, mo);\n\n mo.observe(node, {\n characterData: true,\n childList: true,\n subtree: true,\n });\n }\n });\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n // Initial IO - watching for all content to be loaded\n const observer = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n\n if (this.storeId)\n ComponentStore.init(this, ['tab'], this.storeMethod, this.storeId);\n observer.unobserve(entries[0].target);\n }\n });\n observer.observe(this.host);\n focusVisible.observe(this.tabGroup);\n\n if (this.leftBtn) {\n focusVisible.observe(this.leftBtn);\n focusVisible.observe(this.rightBtn);\n }\n\n requestAnimationFrame(() => this.updateScrollControls());\n\n if (!window['ResizeObserver']) return;\n\n this.resizeObserver = new ResizeObserver(() => {\n setTimeout(() => {\n this.updateScrollControls();\n this.syncActiveTabIndicator();\n scrollIntoView(this.activeTab, this.nav, 'horizontal', 'center');\n }, 500);\n });\n this.resizeObserver.observe(this.nav);\n }\n\n connectedCallback() {\n this.isRtl =\n this.host.dir === 'rtl' \|\|\n (this.host.ownerDocument as Document).dir === 'rtl';\n\n if (Build.isServer) {\n this.setActiveTab(this.getActiveTab \|\| this.getAllActiveTabs[0], false);\n this.setAriaLabels();\n }\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.tabGroup);\n if (this.leftBtn) {\n focusVisible.unobserve(this.leftBtn);\n focusVisible.unobserve(this.rightBtn);\n }\n if (this.resizeObserver) this.resizeObserver.unobserve(this.nav);\n }\n\n render() {\n this.isRtl = (this.host.ownerDocument as Document).dir === 'rtl';\n\n return (\n <Host\n class={{ ...createColorClasses(this.color) }}\n dir={this.isRtl ? 'rtl' : null}\n >\n <div\n part=\"base\"\n ref={(el) => (this.tabGroup = el)}\n class={{\n 'nano-tab-group': true,\n 'nano-tab-group--top': this.placement === 'top',\n 'nano-tab-group--start': this.placement === 'start',\n 'nano-tab-group--has-scroll-controls': this.hasScrollControls,\n 'nano-tab-group--has-scroll-controls-left': !this.hideControlLeft,\n 'nano-tab-group--has-scroll-controls-right': !this.hideControlRight,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"nano-tab-group__nav-container\" part=\"nav\">\n {this.placement === 'top' && (\n <button\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--left': true,\n }}\n ref={(btn) => (this.leftBtn = btn)}\n onClick={() => this.handleBtnClick(false)}\n >\n <nano-icon name=\"light/chevron-left\"></nano-icon>\n </button>\n )}\n <div\n ref={(el) => (this.nav = el)}\n class=\"nano-tab-group__nav\"\n onScroll={this.handleTabScroll}\n >\n <div\n ref={(el) => (this.tabs = el)}\n part=\"tabs\"\n class=\"nano-tab-group__tabs\"\n role=\"tablist\"\n >\n <div\n ref={(el) => (this.activeTabIndicator = el)}\n part=\"active-tab-indicator\"\n class=\"nano-tab-group__active-tab-indicator\"\n />\n <slot name=\"tabs\" onSlotchange={this.handleTabSlotChange} />\n </div>\n </div>\n {this.placement === 'top' && (\n <button\n class={{\n 'nano-tab-group__scroll-button': true,\n 'nano-tab-group__scroll-button--right': true,\n }}\n ref={(btn) => (this.rightBtn = btn)}\n onClick={() => this.handleBtnClick(true)}\n >\n <nano-icon name=\"light/chevron-right\"></nano-icon>\n </button>\n )}\n </div>\n <slot name=\"tab-content-header\" />\n <div\n part=\"body\"\n class=\"nano-tab-group__body\"\n onTouchStart={this.handleTouchStart}\n onTouchEnd={this.handleTouchEnd}\n >\n <slot onSlotchange={this.handleContentSlotChange} />\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/tooltip/tooltip.js CHANGED Viewed

@@ -51,7 +51,7 @@ export class Tooltip {
     };
     this.handleTTSlotChange = () => {
       const contentDiv = this.host.querySelector(`[id="${this.componentId}"]`) ||
-        this.host.shadowRoot.getElementById(this.componentId);
+        this.defaultContent;
       Array.from(this.host.querySelectorAll('[slot="content"]'))
         .filter((elm) => elm !== contentDiv)
         .forEach((elm) => {
@@ -141,7 +141,7 @@ export class Tooltip {
     this.target = this.getTarget();
     this.popover = new Popover(this.target, this.tooltipPositioner);
     this.syncOptions();
-    const ele = this.host.shadowRoot.getElementById(this.componentId);
+    const ele = this.defaultContent;
     ele.slot = 'content';
     this.host.appendChild(ele);
     this.handleTTSlotChange();
@@ -161,7 +161,7 @@ export class Tooltip {
     return (h(Host, { onKeyDown: this.handleKeyDown, onMouseOver: this.handleMouseOver, onMouseOut: this.handleMouseOut, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.handleClick }, h("slot", { onSlotchange: this.handleSlotChange }), h("div", { ref: (el) => (this.tooltipPositioner = el), class: "tooltip-positioner" }, h("div", { part: "base", ref: (el) => (this.tooltip = el), class: {
         tooltip: true,
         'tooltip--open': this.open,
-      }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { name: "content", onSlotchange: this.handleTTSlotChange }, h("div", { id: this.componentId }, this.content)), h("div", { class: "tooltip-arrow", "data-popper-arrow": true })))));
+      }, role: "tooltip", "aria-hidden": this.open ? 'false' : 'true' }, h("slot", { name: "content", onSlotchange: this.handleTTSlotChange }, h("div", { ref: (el) => (this.defaultContent = el), id: this.componentId }, this.content)), h("div", { class: "tooltip-arrow", "data-popper-arrow": true })))));
   }
   static get is() { return "nano-tooltip"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAE1C,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;GAIG;AAMH,MAAM,OAAO,OAAO;;IACV,gBAAW,GAAG,WAAW,EAAE,EAAE,EAAE,CAAC;IAChC,cAAS,GAAG,KAAK,CAAC;IA6J1B,iBAAiB;IAET,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;OACvC;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;MAC/C,+EAA+E;MAC/E,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;QACvC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAG,EAAE;MAC7B,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,mBAAc,GAAG,GAAG,EAAE;MAC5B,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;IACjC,CAAC,CAAC;IAEM,uBAAkB,GAAG,GAAG,EAAE;MAChC,MAAM,UAAU,GACd,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,IAAI,CAAC,WAAW,IAAI,CAAC;QACrD,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;MAExD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;SACvD,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,UAAU,CAAC;SACnC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QACf,UAAU,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;MAC9B,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;mBA/LgB,EAAE;qBAkBH,KAAK;oBAGH,KAAK;oBAGL,EAAE;gBAG0B,KAAK;oBAGjC,CAAC;iBAMJ,KAAK;mBAOK,aAAa;;EAzDvC,IAAY,MAAM;IAChB,OAAO,IAAI,CAAC,OAAO,CAAC;EACtB,CAAC;EACD,IAAY,MAAM,CAAC,SAAS;IAC1B,IAAI,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE;MAC9C,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAClD;IACD,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7D,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;EAC3B,CAAC;EAmDD,gBAAgB;IACd,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;EACxC,CAAC;EAgBD,iBAAiB;EAEjB,yBAAyB;EAEzB,KAAK,CAAC,IAAI;IACR,8FAA8F;IAC9F,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,EAAE;MACnC,OAAO;KACR;IACD,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACpC,IAAI,MAAM,CAAC,gBAAgB,EAAE;MAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,OAAO;KACR;IAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACjB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;EACtB,CAAC;EAED,yBAAyB;EAEzB,KAAK,CAAC,IAAI;IACR,8FAA8F;IAC9F,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACnB,OAAO;KACR;IAED,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACpC,IAAI,MAAM,CAAC,gBAAgB,EAAE;MAC3B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,OAAO;KACR;IAED,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;EACtB,CAAC;EAED,kBAAkB;EAEV,SAAS;IACf,2DAA2D;IAC3D,MAAM,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACrD,CAAC,EAAE,EAAE,EAAE,CACL,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,OAAO;MACpC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,SAAS,CACzB,CAAC;IAEjB,IAAI,CAAC,MAAM,EAAE;MACX,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;KACxE;IAED,OAAO,MAAM,CAAC;EAChB,CAAC;EAEO,UAAU,CAAC,WAAmB;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;EACxC,CAAC;EAEO,WAAW;IACjB,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;MACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU;MAC3C,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,iBAAiB,EAAE,IAAI,CAAC,OAAO;MAC/B,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;MAC5C,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;KAC7C,CAAC,CAAC;EACL,CAAC;EA0DD,gBAAgB;EAEhB,gBAAgB;IACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;IAC/B,IAAI,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAChE,IAAI,CAAC,WAAW,EAAE,CAAC;IAEnB,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAClE,GAAG,CAAC,IAAI,GAAG,SAAS,CAAC;IACrB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAC3B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAE1B,uBAAuB;IACvB,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3C,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;EACH,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;EACzB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW;MAEzB,YAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI;MAC7C,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,EAC1C,KAAK,EAAC,oBAAoB;QAE1B,WACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAChC,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,IAAI,CAAC,IAAI;WAC3B,EACD,IAAI,EAAC,SAAS,iBACD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;UAEzC,YAAM,IAAI,EAAC,SAAS,EAAC,YAAY,EAAE,IAAI,CAAC,kBAAkB;YACxD,WAAK,EAAE,EAAE,IAAI,CAAC,WAAW,IAAG,IAAI,CAAC,OAAO,CAAO,CAC1C;UACP,WAAK,KAAK,EAAC,eAAe,8BAAyB,CAC/C,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n Watch,\n h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/*\n Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n /\n@Component({\n tag: 'nano-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip {\n private componentId = `tooltip-${++id}`;\n private isVisible = false;\n private popover: Popover;\n private tooltipPositioner: HTMLElement;\n private tooltip: any;\n\n private _target: HTMLElement;\n private get target() {\n return this._target;\n }\n private set target(newTarget) {\n if (newTarget !== this._target && this._target) {\n this._target.removeAttribute('aria-describedby');\n }\n newTarget.setAttribute('aria-describedby', this.componentId);\n this._target = newTarget;\n }\n\n @Element() host: HTMLNanoTooltipElement;\n\n /* The tooltip's content. Alternatively, you can use the content slot. /\n @Prop() content = '';\n\n /\n The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n /\n @Prop() placement:\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end' = 'top';\n\n /* Set to true to disable the tooltip so it won't show when triggered. /\n @Prop() disabled = false;\n\n /* The distance in pixels from which to offset the tooltip away from its target. /\n @Prop() distance = 10;\n\n /* Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* The distance in pixels from which to offset the tooltip along its target. /\n @Prop() skidding = 0;\n\n /\n Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto\|scroll`.\n /\n @Prop() hoist = false;\n\n /\n Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n /\n @Prop() trigger: string = 'hover focus';\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n // Events\n\n /* Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the tooltip has shown and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the tooltip has hidden and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n // Public methods\n\n /* Shows the tooltip. /\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible \|\| this.disabled) {\n return;\n }\n const slShow = this.nanoShow.emit();\n if (slShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n this.popover.show();\n }\n\n /* Hides the tooltip. */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const slHide = this.nanoHide.emit();\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.isVisible = false;\n this.open = false;\n this.popover.hide();\n }\n\n // Private methods\n\n private getTarget() {\n // Get the first child that isn't a <style> or content slot\n const target = [...Array.from(this.host.children)].find(\n (el) =>\n el.tagName.toLowerCase() !== 'style' &&\n el.getAttribute('slot') !== 'content'\n ) as HTMLElement;\n\n if (!target) {\n throw new Error('Invalid tooltip target: no child element was found.');\n }\n\n return target;\n }\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n private syncOptions() {\n this.popover.setOptions({\n strategy: this.hoist ? 'fixed' : 'absolute',\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.tooltip,\n onAfterHide: () => this.nanoAfterHide.emit(),\n onAfterShow: () => this.nanoAfterShow.emit(),\n });\n }\n\n // Event Handlers\n\n private handleBlur = () => {\n if (this.hasTrigger('focus')) {\n this.hide();\n }\n };\n\n private handleClick = () => {\n if (this.hasTrigger('click')) {\n this.open ? this.hide() : this.show();\n }\n };\n\n private handleFocus = () => {\n if (this.hasTrigger('focus')) {\n this.show();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Pressing escape when the target element has focus should dismiss the tooltip\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n };\n\n private handleMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.show();\n }\n };\n\n private handleMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n this.target = this.getTarget();\n };\n\n private handleTTSlotChange = () => {\n const contentDiv =\n this.host.querySelector(`[id=\"${this.componentId}\"]`) \|\|\n this.host.shadowRoot.getElementById(this.componentId);\n\n Array.from(this.host.querySelectorAll('[slot=\"content\"]'))\n .filter((elm) => elm !== contentDiv)\n .forEach((elm) => {\n contentDiv.appendChild(elm);\n });\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n this.target = this.getTarget();\n this.popover = new Popover(this.target, this.tooltipPositioner);\n this.syncOptions();\n\n const ele = this.host.shadowRoot.getElementById(this.componentId);\n ele.slot = 'content';\n this.host.appendChild(ele);\n this.handleTTSlotChange();\n\n // Show on init if open\n this.tooltipPositioner.hidden = !this.open;\n if (this.open) {\n this.show();\n }\n }\n\n componentDidUpdate() {\n this.syncOptions();\n }\n\n disconnectedCallback() {\n this.popover.destroy();\n }\n\n render() {\n return (\n <Host\n onKeyDown={this.handleKeyDown}\n onMouseOver={this.handleMouseOver}\n onMouseOut={this.handleMouseOut}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n >\n <slot onSlotchange={this.handleSlotChange} />\n <div\n ref={(el) => (this.tooltipPositioner = el)}\n class=\"tooltip-positioner\"\n >\n <div\n part=\"base\"\n ref={(el) => (this.tooltip = el)}\n class={{\n tooltip: true,\n 'tooltip--open': this.open,\n }}\n role=\"tooltip\"\n aria-hidden={this.open ? 'false' : 'true'}\n >\n <slot name=\"content\" onSlotchange={this.handleTTSlotChange}>\n <div id={this.componentId}>{this.content}</div>\n </slot>\n <div class=\"tooltip-arrow\" data-popper-arrow></div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAE1C,IAAI,EAAE,GAAG,CAAC,CAAC;AAEX;;;;GAIG;AAMH,MAAM,OAAO,OAAO;;IACV,gBAAW,GAAG,WAAW,EAAE,EAAE,EAAE,CAAC;IAChC,cAAS,GAAG,KAAK,CAAC;IA8J1B,iBAAiB;IAET,eAAU,GAAG,GAAG,EAAE;MACxB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;OACvC;IACH,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,kBAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;MAC/C,+EAA+E;MAC/E,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;QACvC,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,oBAAe,GAAG,GAAG,EAAE;MAC7B,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,mBAAc,GAAG,GAAG,EAAE;MAC5B,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE;QAC5B,IAAI,CAAC,IAAI,EAAE,CAAC;OACb;IACH,CAAC,CAAC;IAEM,qBAAgB,GAAG,GAAG,EAAE;MAC9B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;IACjC,CAAC,CAAC;IAEM,uBAAkB,GAAG,GAAG,EAAE;MAChC,MAAM,UAAU,GACd,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,IAAI,CAAC,WAAW,IAAI,CAAC;QACrD,IAAI,CAAC,cAAc,CAAC;MAEtB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;SACvD,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,KAAK,UAAU,CAAC;SACnC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QACf,UAAU,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;MAC9B,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;mBA/LgB,EAAE;qBAkBH,KAAK;oBAGH,KAAK;oBAGL,EAAE;gBAG0B,KAAK;oBAGjC,CAAC;iBAMJ,KAAK;mBAOK,aAAa;;EAzDvC,IAAY,MAAM;IAChB,OAAO,IAAI,CAAC,OAAO,CAAC;EACtB,CAAC;EACD,IAAY,MAAM,CAAC,SAAS;IAC1B,IAAI,SAAS,KAAK,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,EAAE;MAC9C,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;KAClD;IACD,SAAS,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAC7D,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;EAC3B,CAAC;EAmDD,gBAAgB;IACd,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;EACxC,CAAC;EAgBD,iBAAiB;EAEjB,yBAAyB;EAEzB,KAAK,CAAC,IAAI;IACR,8FAA8F;IAC9F,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,QAAQ,EAAE;MACnC,OAAO;KACR;IACD,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACpC,IAAI,MAAM,CAAC,gBAAgB,EAAE;MAC3B,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;MAClB,OAAO;KACR;IAED,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACtB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACjB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;EACtB,CAAC;EAED,yBAAyB;EAEzB,KAAK,CAAC,IAAI;IACR,8FAA8F;IAC9F,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACnB,OAAO;KACR;IAED,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;IACpC,IAAI,MAAM,CAAC,gBAAgB,EAAE;MAC3B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;MACjB,OAAO;KACR;IAED,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;IACvB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;IAClB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;EACtB,CAAC;EAED,kBAAkB;EAEV,SAAS;IACf,2DAA2D;IAC3D,MAAM,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CACrD,CAAC,EAAE,EAAE,EAAE,CACL,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,OAAO;MACpC,EAAE,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,SAAS,CACzB,CAAC;IAEjB,IAAI,CAAC,MAAM,EAAE;MACX,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;KACxE;IAED,OAAO,MAAM,CAAC;EAChB,CAAC;EAEO,UAAU,CAAC,WAAmB;IACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACzC,OAAO,QAAQ,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;EACxC,CAAC;EAEO,WAAW;IACjB,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC;MACtB,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU;MAC3C,SAAS,EAAE,IAAI,CAAC,SAAS;MACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,iBAAiB,EAAE,IAAI,CAAC,OAAO;MAC/B,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;MAC5C,WAAW,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE;KAC7C,CAAC,CAAC;EACL,CAAC;EA0DD,gBAAgB;EAEhB,gBAAgB;IACd,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;IAC/B,IAAI,CAAC,OAAO,GAAG,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;IAChE,IAAI,CAAC,WAAW,EAAE,CAAC;IAEnB,MAAM,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC;IAChC,GAAG,CAAC,IAAI,GAAG,SAAS,CAAC;IACrB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAC3B,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAE1B,uBAAuB;IACvB,IAAI,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;IAC3C,IAAI,IAAI,CAAC,IAAI,EAAE;MACb,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;EACH,CAAC;EAED,kBAAkB;IAChB,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;EACzB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,WAAW,EAAE,IAAI,CAAC,eAAe,EACjC,UAAU,EAAE,IAAI,CAAC,cAAc,EAC/B,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW;MAEzB,YAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI;MAC7C,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,iBAAiB,GAAG,EAAE,CAAC,EAC1C,KAAK,EAAC,oBAAoB;QAE1B,WACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAChC,KAAK,EAAE;YACL,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,IAAI,CAAC,IAAI;WAC3B,EACD,IAAI,EAAC,SAAS,iBACD,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;UAEzC,YAAM,IAAI,EAAC,SAAS,EAAC,YAAY,EAAE,IAAI,CAAC,kBAAkB;YACxD,WACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EACvC,EAAE,EAAE,IAAI,CAAC,WAAW,IAEnB,IAAI,CAAC,OAAO,CACT,CACD;UACP,WAAK,KAAK,EAAC,eAAe,8BAAyB,CAC/C,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n Host,\n Method,\n Prop,\n Watch,\n h,\n} from '@stencil/core';\nimport Popover from '../../utils/popover';\n\nlet id = 0;\n\n/*\n Tooltips display additional information based on a specific action.\n * @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n /\n@Component({\n tag: 'nano-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip {\n private componentId = `tooltip-${++id}`;\n private isVisible = false;\n private popover: Popover;\n private tooltipPositioner: HTMLElement;\n private tooltip: any;\n private defaultContent: HTMLElement;\n\n private _target: HTMLElement;\n private get target() {\n return this._target;\n }\n private set target(newTarget) {\n if (newTarget !== this._target && this._target) {\n this._target.removeAttribute('aria-describedby');\n }\n newTarget.setAttribute('aria-describedby', this.componentId);\n this._target = newTarget;\n }\n\n @Element() host: HTMLNanoTooltipElement;\n\n /* The tooltip's content. Alternatively, you can use the content slot. /\n @Prop() content = '';\n\n /\n The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n * inside of the viewport.\n /\n @Prop() placement:\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end' = 'top';\n\n /* Set to true to disable the tooltip so it won't show when triggered. /\n @Prop() disabled = false;\n\n /* The distance in pixels from which to offset the tooltip away from its target. /\n @Prop() distance = 10;\n\n /* Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* The distance in pixels from which to offset the tooltip along its target. /\n @Prop() skidding = 0;\n\n /\n Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto\|scroll`.\n /\n @Prop() hoist = false;\n\n /\n Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n /\n @Prop() trigger: string = 'hover focus';\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n // Events\n\n /* Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. /\n @Event() nanoShow: EventEmitter;\n\n /* Emitted after the tooltip has shown and all transitions are complete. /\n @Event() nanoAfterShow: EventEmitter;\n\n /* Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. /\n @Event() nanoHide: EventEmitter;\n\n /* Emitted after the tooltip has hidden and all transitions are complete. /\n @Event() nanoAfterHide: EventEmitter;\n\n // Public methods\n\n /* Shows the tooltip. /\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible \|\| this.disabled) {\n return;\n }\n const slShow = this.nanoShow.emit();\n if (slShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n this.popover.show();\n }\n\n /* Hides the tooltip. */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible) {\n return;\n }\n\n const slHide = this.nanoHide.emit();\n if (slHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.isVisible = false;\n this.open = false;\n this.popover.hide();\n }\n\n // Private methods\n\n private getTarget() {\n // Get the first child that isn't a <style> or content slot\n const target = [...Array.from(this.host.children)].find(\n (el) =>\n el.tagName.toLowerCase() !== 'style' &&\n el.getAttribute('slot') !== 'content'\n ) as HTMLElement;\n\n if (!target) {\n throw new Error('Invalid tooltip target: no child element was found.');\n }\n\n return target;\n }\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n private syncOptions() {\n this.popover.setOptions({\n strategy: this.hoist ? 'fixed' : 'absolute',\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.tooltip,\n onAfterHide: () => this.nanoAfterHide.emit(),\n onAfterShow: () => this.nanoAfterShow.emit(),\n });\n }\n\n // Event Handlers\n\n private handleBlur = () => {\n if (this.hasTrigger('focus')) {\n this.hide();\n }\n };\n\n private handleClick = () => {\n if (this.hasTrigger('click')) {\n this.open ? this.hide() : this.show();\n }\n };\n\n private handleFocus = () => {\n if (this.hasTrigger('focus')) {\n this.show();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Pressing escape when the target element has focus should dismiss the tooltip\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n };\n\n private handleMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.show();\n }\n };\n\n private handleMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n this.target = this.getTarget();\n };\n\n private handleTTSlotChange = () => {\n const contentDiv =\n this.host.querySelector(`[id=\"${this.componentId}\"]`) \|\|\n this.defaultContent;\n\n Array.from(this.host.querySelectorAll('[slot=\"content\"]'))\n .filter((elm) => elm !== contentDiv)\n .forEach((elm) => {\n contentDiv.appendChild(elm);\n });\n };\n\n // Stencil hooks\n\n componentDidLoad() {\n this.target = this.getTarget();\n this.popover = new Popover(this.target, this.tooltipPositioner);\n this.syncOptions();\n\n const ele = this.defaultContent;\n ele.slot = 'content';\n this.host.appendChild(ele);\n this.handleTTSlotChange();\n\n // Show on init if open\n this.tooltipPositioner.hidden = !this.open;\n if (this.open) {\n this.show();\n }\n }\n\n componentDidUpdate() {\n this.syncOptions();\n }\n\n disconnectedCallback() {\n this.popover.destroy();\n }\n\n render() {\n return (\n <Host\n onKeyDown={this.handleKeyDown}\n onMouseOver={this.handleMouseOver}\n onMouseOut={this.handleMouseOut}\n onBlur={this.handleBlur}\n onFocus={this.handleFocus}\n onClick={this.handleClick}\n >\n <slot onSlotchange={this.handleSlotChange} />\n <div\n ref={(el) => (this.tooltipPositioner = el)}\n class=\"tooltip-positioner\"\n >\n <div\n part=\"base\"\n ref={(el) => (this.tooltip = el)}\n class={{\n tooltip: true,\n 'tooltip--open': this.open,\n }}\n role=\"tooltip\"\n aria-hidden={this.open ? 'false' : 'true'}\n >\n <slot name=\"content\" onSlotchange={this.handleTTSlotChange}>\n <div\n ref={(el) => (this.defaultContent = el)}\n id={this.componentId}\n >\n {this.content}\n </div>\n </slot>\n <div class=\"tooltip-arrow\" data-popper-arrow></div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/components/icon-button.js CHANGED Viewed

@@ -3,7 +3,8 @@
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { f as focusVisible } from './focus-visible.js';
-import { d as defineCustomElement$1 } from './icon.js';
+import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$1 } from './tooltip.js';
 const iconButtonCss = ".sc-nano-icon-button-h{box-sizing:border-box}*.sc-nano-icon-button,*.sc-nano-icon-button::before,*.sc-nano-icon-button::after{box-sizing:border-box}[hidden].sc-nano-icon-button{display:none !important}.sc-nano-icon-button-h{display:inline-block;--border-radius:var(--nano-border-radius-medium, 4px);--active-color:#005c75;--hover-color:#007495;--nano-color-base:var(--color, #687576);--background:transparent;--padding:var(--nano-spacing-small, 8px)}.icon-button.sc-nano-icon-button{flex:0 0 auto;display:flex;align-items:center;border:none;border-radius:var(--border-radius);background:var(--background);font-size:inherit;color:var(--color);padding:var(--padding);cursor:pointer;-webkit-appearance:none;appearance:none;transition:box-shadow var(--nano-transition-fast, 0.1s) ease-in-out}.icon-button.sc-nano-icon-button:hover:not(.icon-button--disabled),.icon-button.sc-nano-icon-button:focus:not(.icon-button--disabled){color:var(--hover-color);--nano-color-base:var(--hover-color)}.icon-button.sc-nano-icon-button:active:not(.icon-button--disabled){color:var(--active-color);--nano-color-base:var(--active-color)}.icon-button.sc-nano-icon-button:focus{outline:none}.icon-button--disabled.sc-nano-icon-button{opacity:0.5;cursor:not-allowed;pointer-events:none}.focus-visible.icon-button.sc-nano-icon-button:focus{box-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))}";
@@ -17,6 +18,7 @@ const IconButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.name = undefined;
     this.value = undefined;
     this.label = undefined;
+    this.showTooltip = false;
     this.disabled = false;
     this.href = undefined;
     this.target = undefined;
@@ -35,12 +37,18 @@ const IconButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   disconnectedCallback() {
     focusVisible.unobserve(this.button);
   }
-  render() {
+  content() {
     const TagType = this.href === undefined ? 'button' : 'a';
     return (h(TagType, { part: "base", ref: (el) => (this.button = el), class: {
         'icon-button': true,
         'icon-button--disabled': this.disabled,
-      }, "aria-label": this.label, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, type: !this.href && this.type ? this.type : undefined }, h("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false })));
+      }, "aria-label": this.label, name: this.name, value: this.value, href: this.href || undefined, target: this.href && this.target ? this.target : undefined, type: !this.href && this.type ? this.type : undefined }, h("nano-icon", { name: this.iconName, src: this.iconSrc, "aria-hidden": "true", lazy: false, part: "icon" })));
+  }
+  render() {
+    if (this.showTooltip) {
+      return h("nano-tooltip", { content: this.label }, this.content());
+    }
+    return this.content();
   }
   static get style() { return iconButtonCss; }
 }, [2, "nano-icon-button", {
@@ -50,6 +58,7 @@ const IconButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "name": [513],
     "value": [513],
     "label": [1],
+    "showTooltip": [4, "show-tooltip"],
     "disabled": [516],
     "href": [1],
     "target": [1],
@@ -59,7 +68,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["nano-icon-button", "nano-icon"];
+  const components = ["nano-icon-button", "nano-icon", "nano-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "nano-icon-button":
       if (!customElements.get(tagName)) {
@@ -67,6 +76,11 @@ function defineCustomElement() {
       }
       break;
     case "nano-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "nano-tooltip":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

package/dist/components/icon-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"icon-button.js","mappings":"~~;;;;;;;~~AAAA,MAAM,aAAa,GAAG,65CAA65C;;~~MCUt6C~~,UAAU;;;;;;gBAU0C,QAAQ;;;;~~oBAanC~~,KAAK;;;;;EAYzC,MAAM,QAAQ;IACZ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;GACrB;EAED,gBAAgB;IACd,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACnC;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,MAAM;MAAE,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACpD;EAED,oBAAoB;IAClB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACrC;~~EAED~~,~~MAAM~~;~~IACJ~~,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAI,GAAW,CAAC;IAElE,QACE,EAAC,OAAO,IACN,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;OACvC,gBACW,IAAI,CAAC,KAAK,EACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,SAAS,EAC5B,MAAM,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EAC1D,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,IAErD,iBACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,GAAG,EAAE,IAAI,CAAC,OAAO,iBACL,MAAM,EAClB,IAAI,EAAE,KAAK,GACX,CACM,EACV;GACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["./src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=scoped","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --border-radius: defaults to #{$border-radius-medium};\n * @prop --border-radius: defaults to #{$border-radius-medium};\n * @prop --color: defaults to #{map.get($colors, palegrey)};\n * @prop --active-color: defaults to #{map.get($colors, darkblue--faded)};\n * @prop --hover-color: defaults to #{map.get($colors, blue)};\n * @prop --background: defaults to transparent;\n * @prop --padding: defaults to #{$spacing-small};\n /\n display: inline-block;\n\n --border-radius: #{$border-radius-medium};\n --active-color: #{map.get($colors, darkblue--faded)};\n --hover-color: #{map.get($colors, blue)};\n --nano-color-base: var(--color, #{map.get($colors, mediumgrey)});\n --background: transparent;\n --padding: #{$spacing-small};\n}\n\n.icon-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n border: none;\n border-radius: var(--border-radius);\n background: var(--background);\n font-size: inherit;\n color: var(--color);\n padding: var(--padding);\n cursor: pointer;\n appearance: none;\n transition: box-shadow #{$transition-xfast} ease-in-out;\n\n &:hover:not(.icon-button--disabled),\n &:focus:not(.icon-button--disabled) {\n color: var(--hover-color);\n\n --nano-color-base: var(--hover-color);\n }\n\n &:active:not(.icon-button--disabled) {\n color: var(--active-color);\n\n --nano-color-base: var(--active-color);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.icon-button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n box-shadow: #{$control-focus-style};\n}\n","import { Component, Prop, h, ComponentInterface, Method } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/* Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. /\n\n@Component({\n tag: 'nano-icon-button',\n styleUrl: 'icon-button.scss',\n scoped: true,\n})\nexport class IconButton implements ComponentInterface {\n private button: HTMLButtonElement;\n\n /* The name of the icon to draw. /\n @Prop() iconName?: string;\n\n /* An external URL of an SVG file. /\n @Prop() iconSrc?: string;\n\n /* The default behavior of the button. /\n @Prop({ reflect: true }) type: 'submit' \| 'reset' \| 'button' = 'button';\n\n /* The name of the button, submitted as a pair with the button’s value as part of the form data. /\n @Prop({ reflect: true }) name?: string;\n\n /* Defines the value associated with the button’s name when it’s submitted with the form data. /\n @Prop({ reflect: true }) value?: string;\n\n /* A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does. /\n @Prop() label!: string;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered. /\n @Prop() href: string \| undefined;\n\n /* Specifies where to display the linked URL. Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. /\n @Prop() target: string \| undefined;\n\n /* Sets focus on the internal button */\n @Method()\n async setFocus() {\n this.button.focus();\n }\n\n componentDidLoad() {\n focusVisible.observe(this.button);\n }\n\n connectedCallback() {\n if (this.button) focusVisible.observe(this.button);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.button);\n }\n\n ~~render~~() {\n const TagType = this.href === undefined ? 'button' : ('a' as any);\n\n return (\n <TagType\n part=\"base\"\n ref={(el) => (this.button = el)}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n aria-label={this.label}\n name={this.name}\n value={this.value}\n href={this.href \|\| undefined}\n target={this.href && this.target ? this.target : undefined}\n type={!this.href && this.type ? this.type : undefined}\n >\n <nano-icon\n name={this.iconName}\n src={this.iconSrc}\n aria-hidden=\"true\"\n lazy={false}\n />\n </TagType>\n );\n }\n}\n"],"version":3}
1	+ {"file":"icon-button.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,65CAA65C;;MCct6C,UAAU;;;;;;gBAU0C,QAAQ;;;;uBAaxC,KAAK;oBAGA,KAAK;;;;;EAYzC,MAAM,QAAQ;IACZ,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;GACrB;EAED,gBAAgB;IACd,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACnC;EAED,iBAAiB;IACf,IAAI,IAAI,CAAC,MAAM;MAAE,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACpD;EAED,oBAAoB;IAClB,YAAY,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;GACrC;EAEO,OAAO;IACb,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,KAAK,SAAS,GAAG,QAAQ,GAAI,GAAW,CAAC;IAElE,QACE,EAAC,OAAO,IACN,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,EAC/B,KAAK,EAAE;QACL,aAAa,EAAE,IAAI;QACnB,uBAAuB,EAAE,IAAI,CAAC,QAAQ;OACvC,gBACW,IAAI,CAAC,KAAK,EACtB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,SAAS,EAC5B,MAAM,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,SAAS,EAC1D,IAAI,EAAE,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,IAErD,iBACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,GAAG,EAAE,IAAI,CAAC,OAAO,iBACL,MAAM,EAClB,IAAI,EAAE,KAAK,EACX,IAAI,EAAC,MAAM,GACX,CACM,EACV;GACH;EAED,MAAM;IACJ,IAAI,IAAI,CAAC,WAAW,EAAE;MACpB,OAAO,oBAAc,OAAO,EAAE,IAAI,CAAC,KAAK,IAAG,IAAI,CAAC,OAAO,EAAE,CAAgB,CAAC;KAC3E;IACD,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC;GACvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/icon-button/icon-button.scss?tag=nano-icon-button&encapsulation=scoped","./src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use 'sass:map';\n@use 'sass:list';\n\n@import '../../global/style/nano-theme/base';\n@import '../../global/style/nano-theme/colours';\n@import '../../global/style/nano-theme/form';\n\n:host {\n /*\n @prop --border-radius: defaults to #{$border-radius-medium};\n * @prop --border-radius: defaults to #{$border-radius-medium};\n * @prop --color: defaults to #{map.get($colors, palegrey)};\n * @prop --active-color: defaults to #{map.get($colors, darkblue--faded)};\n * @prop --hover-color: defaults to #{map.get($colors, blue)};\n * @prop --background: defaults to transparent;\n * @prop --padding: defaults to #{$spacing-small};\n /\n display: inline-block;\n\n --border-radius: #{$border-radius-medium};\n --active-color: #{map.get($colors, darkblue--faded)};\n --hover-color: #{map.get($colors, blue)};\n --nano-color-base: var(--color, #{map.get($colors, mediumgrey)});\n --background: transparent;\n --padding: #{$spacing-small};\n}\n\n.icon-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n border: none;\n border-radius: var(--border-radius);\n background: var(--background);\n font-size: inherit;\n color: var(--color);\n padding: var(--padding);\n cursor: pointer;\n appearance: none;\n transition: box-shadow #{$transition-xfast} ease-in-out;\n\n &:hover:not(.icon-button--disabled),\n &:focus:not(.icon-button--disabled) {\n color: var(--hover-color);\n\n --nano-color-base: var(--hover-color);\n }\n\n &:active:not(.icon-button--disabled) {\n color: var(--active-color);\n\n --nano-color-base: var(--active-color);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.icon-button--disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n.focus-visible.icon-button:focus {\n box-shadow: #{$control-focus-style};\n}\n","import { Component, Prop, h, ComponentInterface, Method } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\n\n/* Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.\n \n @part base - the main control (either `<a />` or `<button />`)\n * @part icon - a `<nano-icon />` component\n /\n\n@Component({\n tag: 'nano-icon-button',\n styleUrl: 'icon-button.scss',\n scoped: true,\n})\nexport class IconButton implements ComponentInterface {\n private button: HTMLButtonElement;\n\n /* The name of the icon to draw. /\n @Prop() iconName?: string;\n\n /* An external URL of an SVG file. /\n @Prop() iconSrc?: string;\n\n /* The default behavior of the button. /\n @Prop({ reflect: true }) type: 'submit' \| 'reset' \| 'button' = 'button';\n\n /* The name of the button, submitted as a pair with the button’s value as part of the form data. /\n @Prop({ reflect: true }) name?: string;\n\n /* Defines the value associated with the button’s name when it’s submitted with the form data. /\n @Prop({ reflect: true }) value?: string;\n\n /* A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does. /\n @Prop() label!: string;\n\n /* display the label as a `<nano-tooltip />` /\n @Prop() showTooltip: boolean = false;\n\n /* Set to true to disable the button. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Contains a URL or a URL fragment that the hyperlink points to.\n * If this property is set, an anchor tag will be rendered. /\n @Prop() href: string \| undefined;\n\n /* Specifies where to display the linked URL. Only applies when an `href` is provided.\n * Special keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`. /\n @Prop() target: string \| undefined;\n\n /* Sets focus on the internal button */\n @Method()\n async setFocus() {\n this.button.focus();\n }\n\n componentDidLoad() {\n focusVisible.observe(this.button);\n }\n\n connectedCallback() {\n if (this.button) focusVisible.observe(this.button);\n }\n\n disconnectedCallback() {\n focusVisible.unobserve(this.button);\n }\n\n private content() {\n const TagType = this.href === undefined ? 'button' : ('a' as any);\n\n return (\n <TagType\n part=\"base\"\n ref={(el) => (this.button = el)}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n aria-label={this.label}\n name={this.name}\n value={this.value}\n href={this.href \|\| undefined}\n target={this.href && this.target ? this.target : undefined}\n type={!this.href && this.type ? this.type : undefined}\n >\n <nano-icon\n name={this.iconName}\n src={this.iconSrc}\n aria-hidden=\"true\"\n lazy={false}\n part=\"icon\"\n />\n </TagType>\n );\n }\n\n render() {\n if (this.showTooltip) {\n return <nano-tooltip content={this.label}>{this.content()}</nano-tooltip>;\n }\n return this.content();\n }\n}\n"],"version":3}