npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.e433304 → 0.0.0-insider.e8b5a11 - Mend

@six-group/ui-library 0.0.0-insider.e433304 → 0.0.0-insider.e8b5a11

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 (2448) hide show

package/dist/components/six-tab.js CHANGED Viewed

@@ -1,20 +1,24 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './six-icon2.js';
-import { d as defineCustomElement$2 } from './six-icon-button2.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-BAe7gBEi.js';
+import { d as defineCustomElement$3 } from './p-DyBhkgST.js';
+import { d as defineCustomElement$2 } from './p-DfVxkvir.js';
 const sixTabCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:flex}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;width:100%}.tab:focus{outline:none}.tab:focus-visible{outline:var(--six-focus-ring);outline-offset:calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset))}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}.tab__indicator{position:absolute}.tab__indicator.tab__indicator--active{background-color:var(--six-tab-border-color-active)}.tab--top{margin-bottom:var(--six-spacing-xxx-small)}.tab__indicator--top{width:100%;bottom:0;height:var(--six-tab-border-width)}.tab--bottom{margin-top:var(--six-spacing-xxx-small)}.tab__indicator--bottom{width:100%;top:0;height:var(--six-tab-border-width)}.tab--left{margin-right:var(--six-spacing-xxx-small)}.tab__indicator--left{height:100%;right:0;top:0;width:var(--six-tab-border-width)}.tab--right{margin-left:var(--six-spacing-xxx-small)}.tab__indicator--right{height:100%;left:0;top:0;width:var(--six-tab-border-width)}";
 let id = 0;
-const SixTab$1 = /*@__PURE__*/ proxyCustomElement(class SixTab extends HTMLElement {
+const SixTab$1 = /*@__PURE__*/ proxyCustomElement(class SixTab extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.sixClose = createEvent(this, "six-tab-close", 7);
+        this.sixClose = createEvent(this, "six-tab-close");
         this.componentId = `tab-${++id}`;
+        /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
         this.panel = '';
+        /** Set to true to draw the tab in an active state. */
         this.active = false;
+        /** When true, the tab will be rendered with a close icon. */
         this.closable = false;
+        /** Set to true to draw the tab in a disabled state. */
         this.disabled = false;
     }
     connectedCallback() {
@@ -39,7 +43,7 @@ const SixTab$1 = /*@__PURE__*/ proxyCustomElement(class SixTab extends HTMLEleme
         const placement = (_a = tabGroup === null || tabGroup === void 0 ? void 0 : tabGroup.placement) !== null && _a !== void 0 ? _a : 'top';
         return (
         // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels
-        h(Host, { id: this.host.id || this.componentId }, h("div", { part: "base", ref: (el) => (this.tab = el), class: {
+        h(Host, { key: '1d5d5e515bd7491370ca506c0613dc5787692a54', id: this.host.id || this.componentId }, h("div", { key: 'e13f65d6a2d3d70f7b4463b8c685d857020f3597', part: "base", ref: (el) => (this.tab = el), class: {
                 tab: true,
                 // Placements
                 'tab--top': placement === 'top',
@@ -50,7 +54,7 @@ const SixTab$1 = /*@__PURE__*/ proxyCustomElement(class SixTab extends HTMLEleme
                 'tab--active': this.active,
                 'tab--closable': this.closable,
                 'tab--disabled': this.disabled,
-            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", null), this.closable && (h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { class: {
+            }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", { key: '6fde6d26cb76ba8bd62fd0bf6535b3b34b699c2c' }), this.closable && (h("six-icon-button", { key: 'be5edcec20b6f91ca0c6f3bd1ac96372bf579e7f', name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" }))), h("div", { key: 'c1fd8a1b882d7f43b36797156e5e2ef8682b1431', part: this.active ? 'active-tab-indicator' : '', class: {
                 tab__indicator: true,
                 'tab__indicator--active': this.active,
                 // Placements
@@ -98,5 +102,6 @@ const SixTab = SixTab$1;
 const defineCustomElement = defineCustomElement$1;
 export { SixTab, defineCustomElement };
+//# sourceMappingURL=six-tab.js.map
 //# sourceMappingURL=six-tab.js.map

package/dist/components/six-tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-tab.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,orDAAorD;;ACGtsD,IAAI,EAAE,GAAG,CAAC~~,CAAC~~;~~MAmBEA~~,QAAM~~;;;;;;QACT~~,~~gBAAW~~,GAAG,OAAO,EAAE,EAAE,EAAE,~~CAAC;qBAMH~~,EAAE~~;sBAGD~~,~~KAAK;wBAGpB~~,KAAK~~;wBAGY~~,KAAK;;~~IAKzC~~,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,~~CAAC;KAC1D;;IAID,~~MAAM,QAAQ,CAAC,OAAsB;;QACnC,~~MAAA~~,IAAI,CAAC,GAAG,~~0CAAE~~,KAAK,CAAC,OAAO,CAAC,~~CAAC;KAC1B;;IAID~~,MAAM,WAAW;;QACf,~~MAAA~~,IAAI,CAAC,GAAG,~~0CAAE~~,IAAI,EAAE,~~CAAC;KAClB;IAEO~~,~~gBAAgB~~;~~QACtB~~,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,~~CAAC;KACtB;IAED~~,~~MAAM~~;;QACJ,MAAM,QAAQ,GAAkC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC~~,CAAC~~;~~QACnF~~,MAAM,SAAS,GAAG,~~MAAA~~,QAAQ,~~aAAR~~,QAAQ,~~uBAAR~~,QAAQ,CAAE,SAAS,~~mCAAI~~,KAAK~~,CAAC~~;~~QAC/C~~;;QAEE,~~EAAC~~,IAAI,~~IAAC~~,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,~~IACxC~~,~~WACE~~,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;~~gBACL~~,GAAG,EAAE,IAAI;;gBAGT,UAAU,EAAE,SAAS,KAAK,KAAK;gBAC/B,aAAa,EAAE,SAAS,KAAK,QAAQ;gBACrC,WAAW,EAAE,SAAS,KAAK,MAAM;gBACjC,YAAY,EAAE,SAAS,KAAK,OAAO;;gBAGnC,aAAa,EAAE,IAAI,CAAC,MAAM;gBAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;gBAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;~~aAC~~/B,EACD,IAAI,EAAC,KAAK,~~mBACK~~,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,~~mBAChC~~,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,~~IAEpD~~,~~eAAQ~~,EACP,IAAI,CAAC,QAAQ,KACZ,~~uBACE~~,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,~~CAAC~~,~~CAAC~~,~~iBACA~~,MAAM,~~GAClB~~,CACH,CACG,EACN,~~WACE~~,KAAK,EAAE;~~gBACL~~,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,MAAM;;gBAGrC,qBAAqB,EAAE,SAAS,KAAK,KAAK;gBAC1C,wBAAwB,EAAE,SAAS,KAAK,QAAQ;gBAChD,sBAAsB,EAAE,SAAS,KAAK,MAAM;gBAC5C,uBAAuB,EAAE,SAAS,KAAK,OAAO;aAC/C,~~GACI~~,CACF~~,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SixTab"],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: flex;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-semibold);\n color: var(--six-tab-color);\n padding: var(--six-spacing-medium) var(--six-spacing-large);\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n width: 100%;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\n }\n\n &.tab--active:not(.tab--disabled) {\n color: var(--six-tab-color-active);\n font-weight: var(--six-font-weight-bold);\n }\n\n &.tab--closable {\n padding-right: var(--six-spacing-small);\n }\n\n &.tab--disabled {\n color: var(--six-tab-color-disabled);\n cursor: not-allowed;\n }\n\n &:hover:not(.tab--disabled) {\n color: var(--six-tab-color-hover);\n }\n}\n\n.tab__close-button {\n font-size: var(--six-font-size-large);\n margin-left: var(--six-spacing-xx-small);\n\n &::part(base) {\n padding: var(--six-spacing-xxx-small);\n }\n}\n\n// TAB INDICATOR\n.tab__indicator {\n position: absolute;\n &.tab__indicator--active {\n background-color: var(--six-tab-border-color-active);\n }\n}\n\n// TOP\n.tab--top {\n margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n width: 100%;\n bottom: 0;\n height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n width: 100%;\n top: 0;\n height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n height: 100%;\n right: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n height: 100%;\n left: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The tab's label.\n \n @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n /\n\n@Component({\n tag: 'six-tab',\n styleUrl: 'six-tab.scss',\n shadow: true,\n})\nexport class SixTab {\n private componentId = `tab-${++id}`;\n private tab?: HTMLElement;\n\n @Element() host!: HTMLSixTabElement;\n\n /* The name of the tab panel the tab will control. The panel must be located in the same tab group. /\n @Prop({ reflect: true }) panel = '';\n\n /* Set to true to draw the tab in an active state. /\n @Prop({ reflect: true }) active = false;\n\n /* When true, the tab will be rendered with a close icon. /\n @Prop() closable = false;\n\n /* Set to true to draw the tab in a disabled state. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Emitted when the tab is closable and the close button is activated. /\n @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n }\n\n /* Sets focus to the tab. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.tab?.focus(options);\n }\n\n /* Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab?.blur();\n }\n\n private handleCloseClick() {\n this.sixClose.emit();\n }\n\n render() {\n const tabGroup: HTMLSixTabGroupElement \| null = this.host.closest('six-tab-group');\n const placement = tabGroup?.placement ?? 'top';\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id \|\| this.componentId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n tab: true,\n\n // Placements\n 'tab--top': placement === 'top',\n 'tab--bottom': placement === 'bottom',\n 'tab--left': placement === 'left',\n 'tab--right': placement === 'right',\n\n // States\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled \|\| !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <six-icon-button\n name=\"close\"\n size=\"xSmall\"\n exportparts=\"base:close-button\"\n class=\"tab__close-button\"\n onClick={this.handleCloseClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div\n class={{\n tab__indicator: true,\n 'tab__indicator--active': this.active,\n\n // Placements\n 'tab__indicator--top': placement === 'top',\n 'tab__indicator--bottom': placement === 'bottom',\n 'tab__indicator--left': placement === 'left',\n 'tab__indicator--right': placement === 'right',\n }}\n ></div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-tab.js","mappings":"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","names":["SixTab","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: flex;\n}\n\n.tab {\n display: inline-flex;\n align-items: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-small);\n font-weight: var(--six-font-weight-semibold);\n color: var(--six-tab-color);\n padding: var(--six-spacing-medium) var(--six-spacing-large);\n white-space: nowrap;\n user-select: none;\n cursor: pointer;\n width: 100%;\n\n &:focus {\n outline: none;\n }\n\n &:focus-visible {\n outline: var(--six-focus-ring);\n outline-offset: calc(-1 * var(--six-focus-ring-width) - var(--six-focus-ring-offset));\n }\n\n &.tab--active:not(.tab--disabled) {\n color: var(--six-tab-color-active);\n font-weight: var(--six-font-weight-bold);\n }\n\n &.tab--closable {\n padding-right: var(--six-spacing-small);\n }\n\n &.tab--disabled {\n color: var(--six-tab-color-disabled);\n cursor: not-allowed;\n }\n\n &:hover:not(.tab--disabled) {\n color: var(--six-tab-color-hover);\n }\n}\n\n.tab__close-button {\n font-size: var(--six-font-size-large);\n margin-left: var(--six-spacing-xx-small);\n\n &::part(base) {\n padding: var(--six-spacing-xxx-small);\n }\n}\n\n// TAB INDICATOR\n.tab__indicator {\n position: absolute;\n &.tab__indicator--active {\n background-color: var(--six-tab-border-color-active);\n }\n}\n\n// TOP\n.tab--top {\n margin-bottom: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--top {\n width: 100%;\n bottom: 0;\n height: var(--six-tab-border-width);\n}\n\n// BOTTOM\n.tab--bottom {\n margin-top: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--bottom {\n width: 100%;\n top: 0;\n height: var(--six-tab-border-width);\n}\n\n// LEFT\n.tab--left {\n margin-right: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--left {\n height: 100%;\n right: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n\n// RIGHT\n.tab--right {\n margin-left: var(--six-spacing-xxx-small);\n}\n\n.tab__indicator--right {\n height: 100%;\n left: 0;\n top: 0;\n width: var(--six-tab-border-width);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The tab's label.\n \n @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n /\n\n@Component({\n tag: 'six-tab',\n styleUrl: 'six-tab.scss',\n shadow: true,\n})\nexport class SixTab {\n private componentId = `tab-${++id}`;\n private tab?: HTMLElement;\n\n @Element() host!: HTMLSixTabElement;\n\n /* The name of the tab panel the tab will control. The panel must be located in the same tab group. /\n @Prop({ reflect: true }) panel = '';\n\n /* Set to true to draw the tab in an active state. /\n @Prop({ reflect: true }) active = false;\n\n /* When true, the tab will be rendered with a close icon. /\n @Prop() closable = false;\n\n /* Set to true to draw the tab in a disabled state. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Emitted when the tab is closable and the close button is activated. /\n @Event({ eventName: 'six-tab-close' }) sixClose!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.handleCloseClick = this.handleCloseClick.bind(this);\n }\n\n /* Sets focus to the tab. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.tab?.focus(options);\n }\n\n /* Removes focus from the tab. */\n @Method()\n async removeFocus() {\n this.tab?.blur();\n }\n\n private handleCloseClick() {\n this.sixClose.emit();\n }\n\n render() {\n const tabGroup: HTMLSixTabGroupElement \| null = this.host.closest('six-tab-group');\n const placement = tabGroup?.placement ?? 'top';\n return (\n // If the user didn't provide an ID, we'll set one, so we can link tabs and tab panels with aria labels\n <Host id={this.host.id \|\| this.componentId}>\n <div\n part=\"base\"\n ref={(el) => (this.tab = el)}\n class={{\n tab: true,\n\n // Placements\n 'tab--top': placement === 'top',\n 'tab--bottom': placement === 'bottom',\n 'tab--left': placement === 'left',\n 'tab--right': placement === 'right',\n\n // States\n 'tab--active': this.active,\n 'tab--closable': this.closable,\n 'tab--disabled': this.disabled,\n }}\n role=\"tab\"\n aria-disabled={this.disabled ? 'true' : 'false'}\n aria-selected={this.active ? 'true' : 'false'}\n tabindex={this.disabled \|\| !this.active ? '-1' : '0'}\n >\n <slot />\n {this.closable && (\n <six-icon-button\n name=\"close\"\n size=\"xSmall\"\n exportparts=\"base:close-button\"\n class=\"tab__close-button\"\n onClick={this.handleCloseClick}\n tabIndex={-1}\n aria-hidden=\"true\"\n />\n )}\n </div>\n <div\n part={this.active ? 'active-tab-indicator' : ''}\n class={{\n tab__indicator: true,\n 'tab__indicator--active': this.active,\n\n // Placements\n 'tab__indicator--top': placement === 'top',\n 'tab__indicator--bottom': placement === 'bottom',\n 'tab__indicator--left': placement === 'left',\n 'tab__indicator--right': placement === 'right',\n }}\n ></div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/six-tag.js CHANGED Viewed

@@ -1,18 +1,26 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { a as getTextContent } from './slot.js';
-import { a as debounce } from './execution-control.js';
-import { d as defineCustomElement$4 } from './six-icon2.js';
-import { d as defineCustomElement$3 } from './six-icon-button2.js';
-import { d as defineCustomElement$2 } from './six-tooltip2.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-BAe7gBEi.js';
+import { a as getTextContent } from './p-j3oIB5oT.js';
+import { a as debounce } from './p-CKhg9ibv.js';
+import { d as defineCustomElement$4 } from './p-DyBhkgST.js';
+import { d as defineCustomElement$3 } from './p-DfVxkvir.js';
+import { d as defineCustomElement$2 } from './p-CCzcCSym.js';
 const sixTagCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block;overflow:hidden}.tag{display:flex;align-items:center;border:solid 1px;font-family:var(--six-font-family);line-height:1;white-space:nowrap;user-select:none;cursor:default}.tag__content{text-overflow:ellipsis;overflow:hidden}.tag__clear::part(base){color:inherit;padding:0}.tag--info{color:var(--six-color-white);background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900)}.tag--success{color:var(--six-color-web-rock-900);border-color:var(--six-color-success-500);background-color:var(--six-color-success-500)}.tag--primary{color:var(--six-color-web-rock-900);border-color:var(--six-color-clay-50);background-color:var(--six-color-clay-50)}.tag--warning{color:var(--six-color-web-rock-900);border-color:var(--six-color-warning-700);background-color:var(--six-color-warning-700)}.tag--danger{color:var(--six-color-white);border-color:var(--six-color-danger-800);background-color:var(--six-color-danger-800)}.tag--action{color:var(--six-color-white);border-color:var(--six-color-action-500);background-color:var(--six-color-action-500)}.tag--small{font-size:var(--six-button-font-size-small);height:calc(var(--six-height-small) * 0.8);line-height:calc(var(--six-height-small) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-small);padding:0 var(--six-spacing-x-small)}.tag--small .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xxx-small))}.tag--medium{font-size:var(--six-button-font-size-medium);height:calc(var(--six-height-medium) * 0.8);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-medium);padding:0 var(--six-spacing-small)}.tag--medium .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-xx-small))}.tag--large{font-size:var(--six-button-font-size-large);height:calc(var(--six-height-large) * 0.8);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2);border-radius:var(--six-input-border-radius-large);padding:0 var(--six-spacing-medium)}.tag--large .tag__clear{margin-left:var(--six-spacing-xx-small);margin-right:calc(-1 * var(--six-spacing-x-small))}.tag--pill{border-radius:var(--six-border-radius-pill)}";
-const SixTag$1 = /*@__PURE__*/ proxyCustomElement(class SixTag extends HTMLElement {
+const SixTag$1 = /*@__PURE__*/ proxyCustomElement(class SixTag extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.sixClear = createEvent(this, "six-tag-clear", 7);
+        this.sixClear = createEvent(this, "six-tag-clear");
+        /** The tag's type. */
+        this.type = 'primary';
+        /** The tag's size. */
+        this.size = 'medium';
+        /** Set to true to draw a pill-style tag with rounded edges. */
+        this.pill = false;
+        /** Set to true to make the tag clearable. */
+        this.clearable = false;
         this.resizeObserver = new ResizeObserver(debounce(() => this.updateTooltip()));
         this.updateTooltip = () => {
             if (this.tooltipElement != null && this.contentSlotElement != null && this.contentElement != null) {
@@ -23,10 +31,6 @@ const SixTag$1 = /*@__PURE__*/ proxyCustomElement(class SixTag extends HTMLEleme
         this.handleClearClick = () => {
             this.sixClear.emit();
         };
-        this.type = 'primary';
-        this.size = 'medium';
-        this.pill = false;
-        this.clearable = false;
     }
     connectedCallback() {
         if (this.contentElement != null) {
@@ -42,7 +46,7 @@ const SixTag$1 = /*@__PURE__*/ proxyCustomElement(class SixTag extends HTMLEleme
         this.resizeObserver.disconnect();
     }
     render() {
-        return (h("span", { part: "base", class: {
+        return (h("span", { key: '24e012cb7d7021978a0ea7e8bafd4e943d8055fa', part: "base", class: {
                 tag: true,
                 // Types
                 'tag--primary': this.type === 'primary',
@@ -59,7 +63,7 @@ const SixTag$1 = /*@__PURE__*/ proxyCustomElement(class SixTag extends HTMLEleme
                 // Modifers
                 'tag--pill': this.pill,
                 'tag--clear': this.clearable,
-            } }, h("six-tooltip", { ref: (el) => (this.tooltipElement = el) }, h("span", { ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, h("slot", { ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (h("six-icon-button", { exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
+            } }, h("six-tooltip", { key: '7238c4a9ddb30537cbb3999992b7df5be5e44dad', ref: (el) => (this.tooltipElement = el) }, h("span", { key: '05a31ceb658536854ab68494c3b45d30c1e5690f', ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, h("slot", { key: '94ac8357a7e8fa4d681d5f3b6c986ef7c388320c', ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (h("six-icon-button", { key: 'f191392816c57d663bd527df4fa00eccaa6dc545', exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
     }
     static get style() { return sixTagCss; }
 }, [1, "six-tag", {
@@ -101,5 +105,6 @@ const SixTag = SixTag$1;
 const defineCustomElement = defineCustomElement$1;
 export { SixTag, defineCustomElement };
+//# sourceMappingURL=six-tag.js.map
 //# sourceMappingURL=six-tag.js.map

package/dist/components/six-tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-tag.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,40EAA40E;;MCuBj1EA,QAAM;;;;;;~~QAmBT~~,~~mBAAc~~,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC~~,CAAC~~;~~QAkB1E~~,~~kBAAa~~,GAAG;~~YACtB~~,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,EAAE;gBACjG,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,kBAAkB,CAAC~~,CAAC~~;~~gBACtE~~,IAAI,CAAC,cAAc,CAAC,QAAQ,GAAG,EAAE,IAAI,CAAC,cAAc,CAAC,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,~~CAAC~~;~~aACrG;SACF~~,~~CAAC;QAEM~~,~~qBAAgB~~,GAAG;~~YACzB~~,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE~~,CAAC~~;~~SACtB~~,~~CAAC~~;~~oBA5CyG,SAAS~~;~~oBAGtD~~,~~QAAQ;oBAGtC~~,~~KAAK~~;~~yBAGA~~,~~KAAK;;IAU1C~~,~~iBAAiB;QACf,~~IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,EAAE;YAC/B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,~~CAAC;SAClD;KACF;IAED~~,~~gBAAgB~~;~~QACd~~,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,EAAE;YAC/B,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,~~CAAC;SAClD;KACF;IAED~~,~~oBAAoB~~;~~QAClB~~,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,~~CAAC;KAClC;IAaD~~,~~MAAM~~;~~QACJ~~,QACE,~~YACE~~,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;~~gBACL~~,GAAG,EAAE,IAAI;;~~gBAGT~~,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;~~gBACvC~~,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;~~gBACvC~~,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;~~gBACjC~~,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;~~gBACvC~~,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;~~gBACrC~~,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;~~gBACrC~~,WAAW,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;;~~gBAGjC~~,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;~~gBACnC~~,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;~~gBACrC~~,YAAY,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;;gBAGnC,WAAW,EAAE,IAAI,CAAC,IAAI;gBACtB,YAAY,EAAE,IAAI,CAAC,SAAS;~~aAC7B~~,~~IAED~~,~~mBAAa~~,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,~~IAClD~~,~~YAAM~~,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EAAE,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,cAAc,~~IAChF~~,~~YAAM~~,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,kBAAkB,GAAG,EAAqB,CAAC,~~GAAI~~,CACnE,CACK,EAEb,IAAI,CAAC,SAAS,KACb,~~uBACE~~,WAAW,EAAC,mBAAmB,EAC/B,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,IAAI,CAAC,gBAAgB,~~GAC9B~~,CACH,CACI~~,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["SixTag"],"sources":["src/components/six-tag/six-tag.scss?tag=six-tag&encapsulation=shadow","src/components/six-tag/six-tag.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n overflow: hidden;\n}\n\n.tag {\n display: flex;\n align-items: center;\n border: solid 1px;\n font-family: var(--six-font-family);\n line-height: 1;\n white-space: nowrap;\n user-select: none;\n cursor: default;\n}\n\n.tag__content {\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.tag__clear::part(base) {\n color: inherit;\n padding: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--info {\n color: var(--six-color-white);\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n}\n\n.tag--success {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-success-500);\n background-color: var(--six-color-success-500);\n}\n\n.tag--primary {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-clay-50);\n background-color: var(--six-color-clay-50);\n}\n\n.tag--warning {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-warning-700);\n background-color: var(--six-color-warning-700);\n}\n\n.tag--danger {\n color: var(--six-color-white);\n border-color: var(--six-color-danger-800);\n background-color: var(--six-color-danger-800);\n}\n\n.tag--action {\n color: var(--six-color-white);\n border-color: var(--six-color-action-500);\n background-color: var(--six-color-action-500);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--small {\n font-size: var(--six-button-font-size-small);\n height: calc(var(--six-height-small) * 0.8);\n line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-small);\n padding: 0 var(--six-spacing-x-small);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-xxx-small));\n }\n}\n\n.tag--medium {\n font-size: var(--six-button-font-size-medium);\n height: calc(var(--six-height-medium) * 0.8);\n line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-medium);\n padding: 0 var(--six-spacing-small);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-xx-small));\n }\n}\n\n.tag--large {\n font-size: var(--six-button-font-size-large);\n height: calc(var(--six-height-large) * 0.8);\n line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-large);\n padding: 0 var(--six-spacing-medium);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-x-small));\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--pill {\n border-radius: var(--six-border-radius-pill);\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getTextContent } from '../../utils/slot';\nimport { debounce } from '../../utils/execution-control';\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The tag's content.\n \n @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n /\n\n@Component({\n tag: 'six-tag',\n styleUrl: 'six-tag.scss',\n shadow: true,\n})\nexport class SixTag {\n /* The tag's type. /\n @Prop({ reflect: true }) type: 'primary' \| 'success' \| 'info' \| 'warning' \| 'danger' \| 'action' \| 'text' = 'primary';\n\n /* The tag's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Set to true to draw a pill-style tag with rounded edges. /\n @Prop({ reflect: true }) pill = false;\n\n /* Set to true to make the tag clearable. /\n @Prop({ reflect: true }) clearable = false;\n\n /* Emitted when the clear button is activated. */\n @Event({ eventName: 'six-tag-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n private contentSlotElement: HTMLSlotElement \| undefined;\n private tooltipElement: HTMLSixTooltipElement \| undefined;\n private contentElement: HTMLElement \| undefined;\n private resizeObserver = new ResizeObserver(debounce(() => this.updateTooltip()));\n\n connectedCallback() {\n if (this.contentElement != null) {\n this.resizeObserver.observe(this.contentElement);\n }\n }\n\n componentDidLoad() {\n if (this.contentElement != null) {\n this.resizeObserver.observe(this.contentElement);\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n private updateTooltip = () => {\n if (this.tooltipElement != null && this.contentSlotElement != null && this.contentElement != null) {\n this.tooltipElement.content = getTextContent(this.contentSlotElement);\n this.tooltipElement.disabled = !(this.contentElement.offsetWidth < this.contentElement.scrollWidth);\n }\n };\n\n private handleClearClick = () => {\n this.sixClear.emit();\n };\n\n render() {\n return (\n <span\n part=\"base\"\n class={{\n tag: true,\n\n // Types\n 'tag--primary': this.type === 'primary',\n 'tag--success': this.type === 'success',\n 'tag--info': this.type === 'info',\n 'tag--warning': this.type === 'warning',\n 'tag--danger': this.type === 'danger',\n 'tag--action': this.type === 'action',\n 'tag--text': this.type === 'text',\n\n // Sizes\n 'tag--small': this.size === 'small',\n 'tag--medium': this.size === 'medium',\n 'tag--large': this.size === 'large',\n\n // Modifers\n 'tag--pill': this.pill,\n 'tag--clear': this.clearable,\n }}\n >\n <six-tooltip ref={(el) => (this.tooltipElement = el)}>\n <span ref={(el) => (this.contentElement = el)} part=\"content\" class=\"tag__content\">\n <slot ref={(el) => (this.contentSlotElement = el as HTMLSlotElement)} />\n </span>\n </six-tooltip>\n\n {this.clearable && (\n <six-icon-button\n exportparts=\"base:clear-button\"\n size=\"xSmall\"\n name=\"clear\"\n class=\"tag__clear\"\n onClick={this.handleClearClick}\n />\n )}\n </span>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-tag.js","mappings":"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","names":["SixTag","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-tag/six-tag.scss?tag=six-tag&encapsulation=shadow","src/components/six-tag/six-tag.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n overflow: hidden;\n}\n\n.tag {\n display: flex;\n align-items: center;\n border: solid 1px;\n font-family: var(--six-font-family);\n line-height: 1;\n white-space: nowrap;\n user-select: none;\n cursor: default;\n}\n\n.tag__content {\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.tag__clear::part(base) {\n color: inherit;\n padding: 0;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--info {\n color: var(--six-color-white);\n background-color: var(--six-color-web-rock-900);\n border-color: var(--six-color-web-rock-900);\n}\n\n.tag--success {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-success-500);\n background-color: var(--six-color-success-500);\n}\n\n.tag--primary {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-clay-50);\n background-color: var(--six-color-clay-50);\n}\n\n.tag--warning {\n color: var(--six-color-web-rock-900);\n border-color: var(--six-color-warning-700);\n background-color: var(--six-color-warning-700);\n}\n\n.tag--danger {\n color: var(--six-color-white);\n border-color: var(--six-color-danger-800);\n background-color: var(--six-color-danger-800);\n}\n\n.tag--action {\n color: var(--six-color-white);\n border-color: var(--six-color-action-500);\n background-color: var(--six-color-action-500);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--small {\n font-size: var(--six-button-font-size-small);\n height: calc(var(--six-height-small) * 0.8);\n line-height: calc(var(--six-height-small) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-small);\n padding: 0 var(--six-spacing-x-small);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-xxx-small));\n }\n}\n\n.tag--medium {\n font-size: var(--six-button-font-size-medium);\n height: calc(var(--six-height-medium) * 0.8);\n line-height: calc(var(--six-height-medium) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-medium);\n padding: 0 var(--six-spacing-small);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-xx-small));\n }\n}\n\n.tag--large {\n font-size: var(--six-button-font-size-large);\n height: calc(var(--six-height-large) * 0.8);\n line-height: calc(var(--six-height-large) - var(--six-border-width) * 2);\n border-radius: var(--six-input-border-radius-large);\n padding: 0 var(--six-spacing-medium);\n\n .tag__clear {\n margin-left: var(--six-spacing-xx-small);\n margin-right: calc(-1 * var(--six-spacing-x-small));\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.tag--pill {\n border-radius: var(--six-border-radius-pill);\n}\n","import { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getTextContent } from '../../utils/slot';\nimport { debounce } from '../../utils/execution-control';\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The tag's content.\n \n @part base - The component's base wrapper.\n * @part content - The tag content.\n * @part clear-button - The clear button.\n /\n\n@Component({\n tag: 'six-tag',\n styleUrl: 'six-tag.scss',\n shadow: true,\n})\nexport class SixTag {\n /* The tag's type. /\n @Prop({ reflect: true }) type: 'primary' \| 'success' \| 'info' \| 'warning' \| 'danger' \| 'action' \| 'text' = 'primary';\n\n /* The tag's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Set to true to draw a pill-style tag with rounded edges. /\n @Prop({ reflect: true }) pill = false;\n\n /* Set to true to make the tag clearable. /\n @Prop({ reflect: true }) clearable = false;\n\n /* Emitted when the clear button is activated. */\n @Event({ eventName: 'six-tag-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n private contentSlotElement: HTMLSlotElement \| undefined;\n private tooltipElement: HTMLSixTooltipElement \| undefined;\n private contentElement: HTMLElement \| undefined;\n private resizeObserver = new ResizeObserver(debounce(() => this.updateTooltip()));\n\n connectedCallback() {\n if (this.contentElement != null) {\n this.resizeObserver.observe(this.contentElement);\n }\n }\n\n componentDidLoad() {\n if (this.contentElement != null) {\n this.resizeObserver.observe(this.contentElement);\n }\n }\n\n disconnectedCallback() {\n this.resizeObserver.disconnect();\n }\n\n private updateTooltip = () => {\n if (this.tooltipElement != null && this.contentSlotElement != null && this.contentElement != null) {\n this.tooltipElement.content = getTextContent(this.contentSlotElement);\n this.tooltipElement.disabled = !(this.contentElement.offsetWidth < this.contentElement.scrollWidth);\n }\n };\n\n private handleClearClick = () => {\n this.sixClear.emit();\n };\n\n render() {\n return (\n <span\n part=\"base\"\n class={{\n tag: true,\n\n // Types\n 'tag--primary': this.type === 'primary',\n 'tag--success': this.type === 'success',\n 'tag--info': this.type === 'info',\n 'tag--warning': this.type === 'warning',\n 'tag--danger': this.type === 'danger',\n 'tag--action': this.type === 'action',\n 'tag--text': this.type === 'text',\n\n // Sizes\n 'tag--small': this.size === 'small',\n 'tag--medium': this.size === 'medium',\n 'tag--large': this.size === 'large',\n\n // Modifers\n 'tag--pill': this.pill,\n 'tag--clear': this.clearable,\n }}\n >\n <six-tooltip ref={(el) => (this.tooltipElement = el)}>\n <span ref={(el) => (this.contentElement = el)} part=\"content\" class=\"tag__content\">\n <slot ref={(el) => (this.contentSlotElement = el as HTMLSlotElement)} />\n </span>\n </six-tooltip>\n\n {this.clearable && (\n <six-icon-button\n exportparts=\"base:clear-button\"\n size=\"xSmall\"\n name=\"clear\"\n class=\"tag__clear\"\n onClick={this.handleClearClick}\n />\n )}\n </span>\n );\n }\n}\n"],"version":3}

package/dist/components/six-textarea.js CHANGED Viewed

@@ -1,27 +1,65 @@
-import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { F as FormControl } from './form-control.js';
-import { h as hasSlot } from './slot.js';
-import { E as EventListeners } from './event-listeners.js';
-import { d as defineCustomElement$2 } from './six-error2.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './p-BAe7gBEi.js';
+import { F as FormControl } from './p-Cc_nfyAl.js';
+import { h as hasSlot } from './p-j3oIB5oT.js';
+import { E as EventListeners } from './p-C4h4qpGl.js';
+import { d as defineCustomElement$2 } from './p-Cku9xxcT.js';
-const sixTextareaCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{display:block}.textarea{display:flex;align-items:center;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);line-height:var(--six-line-height-normal);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.textarea:hover:not(.textarea--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.textarea:hover:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-hover)}.textarea.textarea--focused:not(.textarea--disabled){background-color:var(--six-input-background-color-focus);box-shadow:var(--six-input-focus-shadow);border-color:var(--six-input-border-color-focus);color:var(--six-input-color-focus)}.textarea.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-focus)}.textarea.textarea--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.textarea.textarea--disabled .textarea__control{color:var(--six-input-color-disabled)}.textarea.textarea--disabled .textarea__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.textarea__control{flex:1 1 auto;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--sl-input-color);border:none;background:none;box-shadow:none;cursor:inherit;-webkit-appearance:none}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.textarea__control:focus{outline:none}.textarea--invalid:not(.textarea--disabled):not(.textarea--focused){border-color:var(--six-input-border-color-danger)}.textarea--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--six-input-spacing-small)}.textarea--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium)}.textarea--medium .textarea__control{padding:0.5em var(--six-input-spacing-medium)}.textarea--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large)}.textarea--large .textarea__control{padding:0.5em var(--six-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none}";
+const sixTextareaCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none;text-align:left}.form-control--has-label .form-control__label{display:inline-block;color:var(--six-input-label-color);font-weight:var(--six-font-weight-bold);margin-bottom:var(--six-spacing-x-small)}.form-control--has-label .form-control__label__required::after{color:var(--six-color-danger-800);content:\"*\";transform:scale(1.1);margin-left:var(--six-spacing-xxx-small);position:absolute}.form-control--has-label.form-control--small .form-control__label{font-size:var(--six-input-label-font-size-small)}.form-control--has-label.form-control--medium .form-control__label{font-size:var(--six-input-label-font-size-medium)}.form-control--has-label.form-control--large .form-control_label{font-size:var(--six-input-label-font-size-large)}.form-control--has-help-text .form-control__help-text{display:block;color:var(--six-input-help-text-color);margin-top:var(--six-spacing-x-small)}.form-control--has-help-text .form-control__help-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-help-text.form-control--small .form-control__help-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-help-text.form-control--medium .form-control__help-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-help-text.form-control--large .form-control__help-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--has-error-text .form-control__error-text{display:block;margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text .form-control__error-text ::slotted(*){margin-top:var(--six-spacing-xxx-small)}.form-control--has-error-text.form-control--small .form-control__error-text{font-size:var(--six-input-help-text-font-size-small)}.form-control--has-error-text.form-control--medium .form-control__error-text{font-size:var(--six-input-help-text-font-size-medium)}.form-control--has-error-text.form-control--large .form-control__error-text{font-size:var(--six-input-help-text-font-size-large)}.form-control--disabled .form-control__help-text{color:var(--six-input-help-text-color-disabled)}.form-control--disabled .form-control__label{color:var(--six-input-label-color-disabled)}.form-control--invalid:not(.form-control--disabled) .form-control__label{color:var(--six-input-label-color)}:host{--height:100%;display:block}.textarea{display:flex;align-items:center;position:relative;width:100%;font-family:var(--six-font-family);font-weight:var(--six-input-font-weight);line-height:var(--six-line-height-normal);letter-spacing:var(--six-input-letter-spacing);background-color:var(--six-input-background-color);border:solid var(--six-border-width) var(--six-input-border-color);vertical-align:middle;transition:var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:text}.textarea:hover:not(.textarea--disabled){background-color:var(--six-input-background-color-hover);border-color:var(--six-input-border-color-hover)}.textarea:hover:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-hover)}.textarea.textarea--focused:not(.textarea--disabled){background-color:var(--six-input-background-color-focus);box-shadow:var(--six-input-focus-shadow);border-color:var(--six-input-border-color-focus);color:var(--six-input-color-focus)}.textarea.textarea--focused:not(.textarea--disabled) .textarea__control{color:var(--six-input-color-focus)}.textarea.textarea--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);cursor:not-allowed}.textarea.textarea--disabled .textarea__control{color:var(--six-input-color-disabled)}.textarea.textarea--disabled .textarea__control::placeholder{color:var(--six-input-placeholder-color-disabled)}.textarea__control{flex:1 1 auto;height:calc(var(--height) - 2 * var(--six-border-width));font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1.4;color:var(--sl-input-color);border:none;background:none;box-shadow:none;cursor:inherit;-webkit-appearance:none}.textarea__control::-webkit-search-decoration,.textarea__control::-webkit-search-cancel-button,.textarea__control::-webkit-search-results-button,.textarea__control::-webkit-search-results-decoration{-webkit-appearance:none}.textarea__control::placeholder{color:var(--six-input-placeholder-color);user-select:none}.textarea__control:focus{outline:none}.textarea--invalid:not(.textarea--disabled):not(.textarea--focused){border-color:var(--six-input-border-color-danger)}.textarea--small{border-radius:var(--six-input-border-radius-small);font-size:var(--six-input-font-size-small)}.textarea--small .textarea__control{padding:0.5em var(--six-input-spacing-small)}.textarea--medium{border-radius:var(--six-input-border-radius-medium);font-size:var(--six-input-font-size-medium)}.textarea--medium .textarea__control{padding:0.5em var(--six-input-spacing-medium)}.textarea--large{border-radius:var(--six-input-border-radius-large);font-size:var(--six-input-font-size-large)}.textarea--large .textarea__control{padding:0.5em var(--six-input-spacing-large)}.textarea--resize-none .textarea__control{resize:none}.textarea--resize-vertical .textarea__control{resize:vertical}.textarea--resize-auto .textarea__control{height:auto;resize:none}";
 let id = 0;
-const SixTextarea$1 = /*@__PURE__*/ proxyCustomElement(class SixTextarea extends HTMLElement {
+const SixTextarea$1 = /*@__PURE__*/ proxyCustomElement(class SixTextarea extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.sixChange = createEvent(this, "six-textarea-change", 7);
-        this.sixInput = createEvent(this, "six-textarea-input", 7);
-        this.sixFocus = createEvent(this, "six-textarea-focus", 7);
-        this.sixBlur = createEvent(this, "six-textarea-blur", 7);
+        this.sixChange = createEvent(this, "six-textarea-change");
+        this.sixInput = createEvent(this, "six-textarea-input");
+        this.sixFocus = createEvent(this, "six-textarea-focus");
+        this.sixBlur = createEvent(this, "six-textarea-blur");
         this.inputId = `textarea-${++id}`;
         this.labelId = `textarea-label-${id}`;
         this.helpTextId = `textarea-help-text-${id}`;
         this.errorTextId = `input-error-text-${id}`;
         this.eventListeners = new EventListeners();
         this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
+        this.hasFocus = false;
+        this.hasHelpTextSlot = false;
+        this.hasLabelSlot = false;
+        this.hasErrorTextSlot = false;
+        /** The textarea's size. */
+        this.size = 'medium';
+        /** The textarea's name attribute. */
+        this.name = '';
+        /** The textarea's value attribute. */
+        this.value = '';
+        /** The textarea's help text. Alternatively, you can use the help-text slot. */
+        this.helpText = '';
+        /** The number of rows to display by default. */
+        this.rows = 4;
+        /** Controls how the textarea can be resized. */
+        this.resize = 'vertical';
+        /** Set to true to disable the textarea. */
+        this.disabled = false;
+        /** Set to true for a readonly textarea. */
+        this.readonly = false;
+        /** Set to true to show an asterisk beneath the label. */
+        this.required = false;
+        /** The label text. */
+        this.label = '';
+        /** The error message shown, if `invalid` is set to true.  */
+        this.errorText = '';
+        /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
+        this.invalid = false;
+        /** The textarea's autocaptialize attribute. */
+        this.autocapitalize = 'off';
+        /** The textarea's autocorrect attribute. */
+        this.autocorrect = 'off';
+        /** The textarea's autocomplete attribute. */
+        this.autocomplete = 'off';
+        /** The textarea's autofocus attribute. */
+        this.autofocus = false;
+        /** The textarea's spellcheck attribute. */
+        this.spellcheck = false;
         this.handleChange = () => {
             if (this.nativeTextarea != null) {
                 this.value = this.nativeTextarea.value;
@@ -48,32 +86,6 @@ const SixTextarea$1 = /*@__PURE__*/ proxyCustomElement(class SixTextarea extends
             this.hasHelpTextSlot = hasSlot(this.host, 'help-text');
             this.hasErrorTextSlot = hasSlot(this.host, 'error-text');
         };
-        this.hasFocus = false;
-        this.hasHelpTextSlot = false;
-        this.hasLabelSlot = false;
-        this.hasErrorTextSlot = false;
-        this.size = 'medium';
-        this.name = '';
-        this.value = '';
-        this.helpText = '';
-        this.placeholder = undefined;
-        this.rows = 4;
-        this.resize = 'vertical';
-        this.disabled = false;
-        this.readonly = false;
-        this.minlength = undefined;
-        this.maxlength = undefined;
-        this.required = false;
-        this.label = '';
-        this.errorText = '';
-        this.errorTextCount = undefined;
-        this.invalid = false;
-        this.autocapitalize = 'off';
-        this.autocorrect = 'off';
-        this.autocomplete = 'off';
-        this.autofocus = false;
-        this.spellcheck = false;
-        this.inputmode = undefined;
     }
     handleLabelChange() {
         this.handleSlotChange();
@@ -162,7 +174,7 @@ const SixTextarea$1 = /*@__PURE__*/ proxyCustomElement(class SixTextarea extends
         return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
     }
     render() {
-        return (h(FormControl, { inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { part: "base", class: {
+        return (h(FormControl, { key: '36e8187cd215fa03099633fcb238f0113e116ceb', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, helpTextId: this.helpTextId, helpText: this.helpText, hasHelpTextSlot: this.hasHelpTextSlot, errorTextId: this.errorTextId, errorText: this.errorText, errorTextCount: this.errorTextCount, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, h("div", { key: 'fda932e97759806d1153392d053ccdf32443b7c5', part: "base", class: {
                 textarea: true,
                 // Sizes
                 'textarea--small': this.size === 'small',
@@ -177,7 +189,7 @@ const SixTextarea$1 = /*@__PURE__*/ proxyCustomElement(class SixTextarea extends
                 'textarea--resize-none': this.resize === 'none',
                 'textarea--resize-vertical': this.resize === 'vertical',
                 'textarea--resize-auto': this.resize === 'auto',
-            } }, h("textarea", { part: "textarea", ref: (el) => (this.nativeTextarea = el), id: this.inputId, class: "textarea__control", name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, rows: this.rows, minLength: this.minlength, maxLength: this.maxlength, value: this.getValue(), autoCapitalize: this.autocapitalize, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }))));
+            } }, h("textarea", { key: '1d96b1c2b2da7b76b7b405e2294b71ffc88d9edf', part: "textarea", ref: (el) => (this.nativeTextarea = el), id: this.inputId, class: "textarea__control", name: this.name, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, rows: this.rows, minLength: this.minlength, maxLength: this.maxlength, value: this.getValue(), autoCapitalize: this.autocapitalize, autoCorrect: this.autocorrect, autoFocus: this.autofocus, spellcheck: this.spellcheck, required: this.required, inputMode: this.inputmode, "aria-labelledby": this.labelId, onChange: this.handleChange, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur }))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -250,5 +262,6 @@ const SixTextarea = SixTextarea$1;
 const defineCustomElement = defineCustomElement$1;
 export { SixTextarea, defineCustomElement };
+//# sourceMappingURL=six-textarea.js.map
 //# sourceMappingURL=six-textarea.js.map

package/dist/components/six-textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-textarea.js","mappings":"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","names":["SixTextarea"],"sources":["src/components/six-textarea/six-textarea.scss?tag=six-textarea&encapsulation=shadow","src/components/six-textarea/six-textarea.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n:host {\n display: block;\n}\n\n.textarea {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n font-family: var(--six-font-family);\n font-weight: var(--six-input-font-weight);\n line-height: var(--six-line-height-normal);\n letter-spacing: var(--six-input-letter-spacing);\n background-color: var(--six-input-background-color);\n border: solid var(--six-border-width) var(--six-input-border-color);\n vertical-align: middle;\n transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: text;\n\n &:hover:not(.textarea--disabled) {\n background-color: var(--six-input-background-color-hover);\n border-color: var(--six-input-border-color-hover);\n\n .textarea__control {\n color: var(--six-input-color-hover);\n }\n }\n\n &.textarea--focused:not(.textarea--disabled) {\n background-color: var(--six-input-background-color-focus);\n box-shadow: var(--six-input-focus-shadow);\n border-color: var(--six-input-border-color-focus);\n color: var(--six-input-color-focus);\n\n .textarea__control {\n color: var(--six-input-color-focus);\n }\n }\n\n &.textarea--disabled {\n background-color: var(--six-input-background-color-disabled);\n border-color: var(--six-input-border-color-disabled);\n cursor: not-allowed;\n\n .textarea__control {\n color: var(--six-input-color-disabled);\n\n &::placeholder {\n color: var(--six-input-placeholder-color-disabled);\n }\n }\n }\n}\n\n.textarea__control {\n flex: 1 1 auto;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: 1.4;\n color: var(--sl-input-color);\n border: none;\n background: none;\n box-shadow: none;\n cursor: inherit;\n -webkit-appearance: none;\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--six-input-placeholder-color);\n user-select: none;\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.textarea--invalid:not(.textarea--disabled):not(.textarea--focused) {\n border-color: var(--six-input-border-color-danger);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--small {\n border-radius: var(--six-input-border-radius-small);\n font-size: var(--six-input-font-size-small);\n\n .textarea__control {\n padding: 0.5em var(--six-input-spacing-small);\n }\n}\n\n.textarea--medium {\n border-radius: var(--six-input-border-radius-medium);\n font-size: var(--six-input-font-size-medium);\n\n .textarea__control {\n padding: 0.5em var(--six-input-spacing-medium);\n }\n}\n\n.textarea--large {\n border-radius: var(--six-input-border-radius-large);\n font-size: var(--six-input-font-size-large);\n\n .textarea__control {\n padding: 0.5em var(--six-input-spacing-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Resize types\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--resize-none .textarea__control {\n resize: none;\n}\n\n.textarea--resize-vertical .textarea__control {\n resize: vertical;\n}\n\n.textarea--resize-auto .textarea__control {\n height: auto;\n resize: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot label - The textarea's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n /\n@Component({\n tag: 'six-textarea',\n styleUrl: 'six-textarea.scss',\n shadow: true,\n})\nexport class SixTextarea {\n private inputId = `textarea-${++id}`;\n private labelId = `textarea-label-${id}`;\n private helpTextId = `textarea-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeTextarea?: HTMLTextAreaElement;\n private eventListeners = new EventListeners();\n private resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n @Element() host!: HTMLSixTextareaElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasErrorTextSlot = false;\n\n /* The textarea's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* The textarea's name attribute. /\n @Prop({ reflect: true }) name = '';\n\n /* The textarea's value attribute. /\n @Prop({ mutable: true, reflect: true }) value = '';\n\n /* The textarea's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* The textarea's placeholder text. /\n @Prop() placeholder?: string;\n\n /* The number of rows to display by default. /\n @Prop() rows = 4;\n\n /* Controls how the textarea can be resized. /\n @Prop() resize: 'none' \| 'vertical' \| 'auto' = 'vertical';\n\n /* Set to true to disable the textarea. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set to true for a readonly textarea. /\n @Prop({ reflect: true }) readonly = false;\n\n /* The minimum length of input that will be considered valid. /\n @Prop({ reflect: true }) minlength?: number;\n\n /* The maximum length of input that will be considered valid. /\n @Prop({ reflect: true }) maxlength?: number;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The textarea's autocaptialize attribute. /\n @Prop() autocapitalize = 'off';\n\n /* The textarea's autocorrect attribute. /\n @Prop() autocorrect: 'on' \| 'off' = 'off';\n\n /* The textarea's autocomplete attribute. /\n @Prop() autocomplete = 'off';\n\n /* The textarea's autofocus attribute. /\n @Prop() autofocus = false;\n\n /* The textarea's spellcheck attribute. /\n @Prop() spellcheck = false;\n\n /* The textarea's inputmode attribute. /\n @Prop() inputmode?: 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url';\n\n /* Emitted when the control's value changes. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control receives input. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-textarea-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n @Watch('helpText')\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('rows')\n handleRowsChange() {\n this.setTextareaHeight();\n }\n\n @Watch('value')\n handleValueChange() {\n this.value = this.getValue();\n if (this.nativeTextarea != null) {\n if (this.nativeTextarea.value !== this.value) {\n this.nativeTextarea.value = this.value;\n }\n }\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-textarea-input', 'input', this.host);\n this.eventListeners.forward('six-textarea-change', 'change', this.host);\n this.eventListeners.forward('six-textarea-focus', 'focus', this.host);\n this.eventListeners.forward('six-textarea-blur', 'blur', this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n this.setTextareaHeight();\n if (this.nativeTextarea != null) {\n this.resizeObserver.observe(this.nativeTextarea);\n }\n }\n\n disconnectedCallback() {\n if (this.nativeTextarea != null) {\n this.resizeObserver.unobserve(this.nativeTextarea);\n }\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n /* Sets focus on the textarea. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeTextarea?.focus(options);\n }\n\n /* Removes focus fromt the textarea. /\n @Method()\n async removeFocus() {\n this.nativeTextarea?.blur();\n }\n\n /* Selects all the text in the input. /\n @Method()\n async select() {\n return this.nativeTextarea?.select();\n }\n\n /* Sets the start and end positions of the text selection (0-based). /\n @Method()\n async setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' \| 'backward' \| 'none' = 'none'\n ) {\n return this.nativeTextarea?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /* Replaces a range of text with a new string. */\n @Method()\n async setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n if (this.nativeTextarea == null) return;\n\n this.nativeTextarea.setRangeText(replacement, start, end, selectMode);\n if (this.getValue() !== this.nativeTextarea.value) {\n this.value = this.nativeTextarea.value;\n this.setTextareaHeight();\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n private handleChange = () => {\n if (this.nativeTextarea != null) {\n this.value = this.nativeTextarea.value;\n this.sixChange.emit();\n }\n };\n\n private handleInput = () => {\n if (this.nativeTextarea != null) {\n this.value = this.nativeTextarea.value;\n this.setTextareaHeight();\n this.sixInput.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleSlotChange = () => {\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n private setTextareaHeight() {\n if (this.nativeTextarea == null) return;\n\n if (this.resize === 'auto') {\n this.nativeTextarea.style.height = 'auto';\n this.nativeTextarea.style.height = this.nativeTextarea.scrollHeight + 'px';\n } else {\n (this.nativeTextarea.style.height as string \| undefined) = undefined;\n }\n }\n\n private getValue(): string {\n return (this.value ?? '').toString();\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n textarea: true,\n\n // Sizes\n 'textarea--small': this.size === 'small',\n 'textarea--medium': this.size === 'medium',\n 'textarea--large': this.size === 'large',\n\n // States\n 'textarea--disabled': this.disabled,\n 'textarea--focused': this.hasFocus,\n 'textarea--empty': this.getValue().length === 0,\n 'textarea--invalid': this.invalid,\n\n // Modifiers\n 'textarea--resize-none': this.resize === 'none',\n 'textarea--resize-vertical': this.resize === 'vertical',\n 'textarea--resize-auto': this.resize === 'auto',\n }}\n >\n <textarea\n part=\"textarea\"\n ref={(el) => (this.nativeTextarea = el)}\n id={this.inputId}\n class=\"textarea__control\"\n name={this.name}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readOnly={this.readonly}\n rows={this.rows}\n minLength={this.minlength}\n maxLength={this.maxlength}\n value={this.getValue()}\n autoCapitalize={this.autocapitalize}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n spellcheck={this.spellcheck}\n required={this.required}\n inputMode={this.inputmode}\n aria-labelledby={this.labelId}\n onChange={this.handleChange}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-textarea.js","mappings":"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","names":["SixTextarea","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/six-textarea/six-textarea.scss?tag=six-textarea&encapsulation=shadow","src/components/six-textarea/six-textarea.tsx"],"sourcesContent":["@import 'src/global/component';\n@import '../../functional-components/form-control/form-control';\n\n/*\n @prop --height: The textarea height.\n /\n:host {\n --height: 100%;\n display: block;\n}\n\n.textarea {\n display: flex;\n align-items: center;\n position: relative;\n width: 100%;\n font-family: var(--six-font-family);\n font-weight: var(--six-input-font-weight);\n line-height: var(--six-line-height-normal);\n letter-spacing: var(--six-input-letter-spacing);\n background-color: var(--six-input-background-color);\n border: solid var(--six-border-width) var(--six-input-border-color);\n vertical-align: middle;\n transition: var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;\n cursor: text;\n\n &:hover:not(.textarea--disabled) {\n background-color: var(--six-input-background-color-hover);\n border-color: var(--six-input-border-color-hover);\n\n .textarea__control {\n color: var(--six-input-color-hover);\n }\n }\n\n &.textarea--focused:not(.textarea--disabled) {\n background-color: var(--six-input-background-color-focus);\n box-shadow: var(--six-input-focus-shadow);\n border-color: var(--six-input-border-color-focus);\n color: var(--six-input-color-focus);\n\n .textarea__control {\n color: var(--six-input-color-focus);\n }\n }\n\n &.textarea--disabled {\n background-color: var(--six-input-background-color-disabled);\n border-color: var(--six-input-border-color-disabled);\n cursor: not-allowed;\n\n .textarea__control {\n color: var(--six-input-color-disabled);\n\n &::placeholder {\n color: var(--six-input-placeholder-color-disabled);\n }\n }\n }\n}\n\n.textarea__control {\n flex: 1 1 auto;\n height: calc(var(--height) - 2 var(--six-border-width));\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n line-height: 1.4;\n color: var(--sl-input-color);\n border: none;\n background: none;\n box-shadow: none;\n cursor: inherit;\n -webkit-appearance: none;\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--six-input-placeholder-color);\n user-select: none;\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.textarea--invalid:not(.textarea--disabled):not(.textarea--focused) {\n border-color: var(--six-input-border-color-danger);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Size modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--small {\n border-radius: var(--six-input-border-radius-small);\n font-size: var(--six-input-font-size-small);\n\n .textarea__control {\n padding: 0.5em var(--six-input-spacing-small);\n }\n}\n\n.textarea--medium {\n border-radius: var(--six-input-border-radius-medium);\n font-size: var(--six-input-font-size-medium);\n\n .textarea__control {\n padding: 0.5em var(--six-input-spacing-medium);\n }\n}\n\n.textarea--large {\n border-radius: var(--six-input-border-radius-large);\n font-size: var(--six-input-font-size-large);\n\n .textarea__control {\n padding: 0.5em var(--six-input-spacing-large);\n }\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Resize types\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.textarea--resize-none .textarea__control {\n resize: none;\n}\n\n.textarea--resize-vertical .textarea__control {\n resize: vertical;\n}\n\n.textarea--resize-auto .textarea__control {\n height: auto;\n resize: none;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport FormControl from '../../functional-components/form-control/form-control';\nimport { hasSlot } from '../../utils/slot';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot label - The textarea's label. Alternatively, you can use the label prop.\n * @slot help-text - Help text that describes how to use the input.\n * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part base - The component's base wrapper.\n * @part form-control - The form control that wraps the label, textarea, and help text.\n * @part label - The textarea label.\n * @part textarea - The textarea control.\n * @part help-text - The textarea help text.\n /\n@Component({\n tag: 'six-textarea',\n styleUrl: 'six-textarea.scss',\n shadow: true,\n})\nexport class SixTextarea {\n private inputId = `textarea-${++id}`;\n private labelId = `textarea-label-${id}`;\n private helpTextId = `textarea-help-text-${id}`;\n private errorTextId = `input-error-text-${id}`;\n private nativeTextarea?: HTMLTextAreaElement;\n private eventListeners = new EventListeners();\n private resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n @Element() host!: HTMLSixTextareaElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasLabelSlot = false;\n @State() hasErrorTextSlot = false;\n\n /* The textarea's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* The textarea's name attribute. /\n @Prop({ reflect: true }) name = '';\n\n /* The textarea's value attribute. /\n @Prop({ mutable: true, reflect: true }) value = '';\n\n /* The textarea's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* The textarea's placeholder text. /\n @Prop() placeholder?: string;\n\n /* The number of rows to display by default. /\n @Prop() rows = 4;\n\n /* Controls how the textarea can be resized. /\n @Prop() resize: 'none' \| 'vertical' \| 'auto' = 'vertical';\n\n /* Set to true to disable the textarea. /\n @Prop({ reflect: true }) disabled = false;\n\n /* Set to true for a readonly textarea. /\n @Prop({ reflect: true }) readonly = false;\n\n /* The minimum length of input that will be considered valid. /\n @Prop({ reflect: true }) minlength?: number;\n\n /* The maximum length of input that will be considered valid. /\n @Prop({ reflect: true }) maxlength?: number;\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /* The label text. /\n @Prop() label = '';\n\n /* The error message shown, if `invalid` is set to true. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The textarea's autocaptialize attribute. /\n @Prop() autocapitalize = 'off';\n\n /* The textarea's autocorrect attribute. /\n @Prop() autocorrect: 'on' \| 'off' = 'off';\n\n /* The textarea's autocomplete attribute. /\n @Prop() autocomplete = 'off';\n\n /* The textarea's autofocus attribute. /\n @Prop() autofocus = false;\n\n /* The textarea's spellcheck attribute. /\n @Prop() spellcheck = false;\n\n /* The textarea's inputmode attribute. /\n @Prop() inputmode?: 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url';\n\n /* Emitted when the control's value changes. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-change' }) sixChange!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control receives input. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-input' }) sixInput!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control gains focus. /\n @Event({ eventName: 'six-textarea-focus' }) sixFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the control loses focus. Access the new value via event.target.value. /\n @Event({ eventName: 'six-textarea-blur' }) sixBlur!: EventEmitter<EmptyPayload>;\n\n @Watch('helpText')\n @Watch('errorText')\n @Watch('label')\n handleLabelChange() {\n this.handleSlotChange();\n }\n\n @Watch('rows')\n handleRowsChange() {\n this.setTextareaHeight();\n }\n\n @Watch('value')\n handleValueChange() {\n this.value = this.getValue();\n if (this.nativeTextarea != null) {\n if (this.nativeTextarea.value !== this.value) {\n this.nativeTextarea.value = this.value;\n }\n }\n }\n\n connectedCallback() {\n this.host.shadowRoot?.addEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.forward('six-textarea-input', 'input', this.host);\n this.eventListeners.forward('six-textarea-change', 'change', this.host);\n this.eventListeners.forward('six-textarea-focus', 'focus', this.host);\n this.eventListeners.forward('six-textarea-blur', 'blur', this.host);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n this.setTextareaHeight();\n if (this.nativeTextarea != null) {\n this.resizeObserver.observe(this.nativeTextarea);\n }\n }\n\n disconnectedCallback() {\n if (this.nativeTextarea != null) {\n this.resizeObserver.unobserve(this.nativeTextarea);\n }\n this.host.shadowRoot?.removeEventListener('slotchange', this.handleSlotChange);\n this.eventListeners.removeAll();\n }\n\n /* Sets focus on the textarea. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.nativeTextarea?.focus(options);\n }\n\n /* Removes focus fromt the textarea. /\n @Method()\n async removeFocus() {\n this.nativeTextarea?.blur();\n }\n\n /* Selects all the text in the input. /\n @Method()\n async select() {\n return this.nativeTextarea?.select();\n }\n\n /* Sets the start and end positions of the text selection (0-based). /\n @Method()\n async setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' \| 'backward' \| 'none' = 'none'\n ) {\n return this.nativeTextarea?.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n }\n\n /* Replaces a range of text with a new string. */\n @Method()\n async setRangeText(\n replacement: string,\n start: number,\n end: number,\n selectMode: 'select' \| 'start' \| 'end' \| 'preserve' = 'preserve'\n ) {\n if (this.nativeTextarea == null) return;\n\n this.nativeTextarea.setRangeText(replacement, start, end, selectMode);\n if (this.getValue() !== this.nativeTextarea.value) {\n this.value = this.nativeTextarea.value;\n this.setTextareaHeight();\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n private handleChange = () => {\n if (this.nativeTextarea != null) {\n this.value = this.nativeTextarea.value;\n this.sixChange.emit();\n }\n };\n\n private handleInput = () => {\n if (this.nativeTextarea != null) {\n this.value = this.nativeTextarea.value;\n this.setTextareaHeight();\n this.sixInput.emit();\n }\n };\n\n private handleBlur = () => {\n this.hasFocus = false;\n this.sixBlur.emit();\n };\n\n private handleFocus = () => {\n this.hasFocus = true;\n this.sixFocus.emit();\n };\n\n private handleSlotChange = () => {\n this.hasLabelSlot = hasSlot(this.host, 'label');\n this.hasHelpTextSlot = hasSlot(this.host, 'help-text');\n this.hasErrorTextSlot = hasSlot(this.host, 'error-text');\n };\n\n private setTextareaHeight() {\n if (this.nativeTextarea == null) return;\n\n if (this.resize === 'auto') {\n this.nativeTextarea.style.height = 'auto';\n this.nativeTextarea.style.height = this.nativeTextarea.scrollHeight + 'px';\n } else {\n (this.nativeTextarea.style.height as string \| undefined) = undefined;\n }\n }\n\n private getValue(): string {\n return (this.value ?? '').toString();\n }\n\n render() {\n return (\n <FormControl\n inputId={this.inputId}\n label={this.label}\n labelId={this.labelId}\n hasLabelSlot={this.hasLabelSlot}\n helpTextId={this.helpTextId}\n helpText={this.helpText}\n hasHelpTextSlot={this.hasHelpTextSlot}\n errorTextId={this.errorTextId}\n errorText={this.errorText}\n errorTextCount={this.errorTextCount}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n displayError={this.invalid}\n >\n <div\n part=\"base\"\n class={{\n textarea: true,\n\n // Sizes\n 'textarea--small': this.size === 'small',\n 'textarea--medium': this.size === 'medium',\n 'textarea--large': this.size === 'large',\n\n // States\n 'textarea--disabled': this.disabled,\n 'textarea--focused': this.hasFocus,\n 'textarea--empty': this.getValue().length === 0,\n 'textarea--invalid': this.invalid,\n\n // Modifiers\n 'textarea--resize-none': this.resize === 'none',\n 'textarea--resize-vertical': this.resize === 'vertical',\n 'textarea--resize-auto': this.resize === 'auto',\n }}\n >\n <textarea\n part=\"textarea\"\n ref={(el) => (this.nativeTextarea = el)}\n id={this.inputId}\n class=\"textarea__control\"\n name={this.name}\n placeholder={this.placeholder}\n disabled={this.disabled}\n readOnly={this.readonly}\n rows={this.rows}\n minLength={this.minlength}\n maxLength={this.maxlength}\n value={this.getValue()}\n autoCapitalize={this.autocapitalize}\n autoCorrect={this.autocorrect}\n autoFocus={this.autofocus}\n spellcheck={this.spellcheck}\n required={this.required}\n inputMode={this.inputmode}\n aria-labelledby={this.labelId}\n onChange={this.handleChange}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n </div>\n </FormControl>\n );\n }\n}\n"],"version":3}