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/cjs/six-tag.cjs.entry.js CHANGED Viewed

@@ -1,17 +1,23 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d7748d51.js');
-const slot = require('./slot-1b1232a1.js');
-const executionControl = require('./execution-control-d728da70.js');
+var index = require('./index-B_stPhJp.js');
+var slot = require('./slot-DBK7c7jH.js');
+var executionControl = require('./execution-control-oU0MWBWI.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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sixClear = index.createEvent(this, "six-tag-clear", 7);
+        this.sixClear = index.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(executionControl.debounce(() => this.updateTooltip()));
         this.updateTooltip = () => {
             if (this.tooltipElement != null && this.contentSlotElement != null && this.contentElement != null) {
@@ -22,10 +28,6 @@ const SixTag = class {
         this.handleClearClick = () => {
             this.sixClear.emit();
         };
-        this.type = 'primary';
-        this.size = 'medium';
-        this.pill = false;
-        this.clearable = false;
     }
     connectedCallback() {
         if (this.contentElement != null) {
@@ -41,7 +43,7 @@ const SixTag = class {
         this.resizeObserver.disconnect();
     }
     render() {
-        return (index.h("span", { part: "base", class: {
+        return (index.h("span", { key: '24e012cb7d7021978a0ea7e8bafd4e943d8055fa', part: "base", class: {
                 tag: true,
                 // Types
                 'tag--primary': this.type === 'primary',
@@ -58,11 +60,12 @@ const SixTag = class {
                 // Modifers
                 'tag--pill': this.pill,
                 'tag--clear': this.clearable,
-            } }, index.h("six-tooltip", { ref: (el) => (this.tooltipElement = el) }, index.h("span", { ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, index.h("slot", { ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (index.h("six-icon-button", { exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
+            } }, index.h("six-tooltip", { key: '7238c4a9ddb30537cbb3999992b7df5be5e44dad', ref: (el) => (this.tooltipElement = el) }, index.h("span", { key: '05a31ceb658536854ab68494c3b45d30c1e5690f', ref: (el) => (this.contentElement = el), part: "content", class: "tag__content" }, index.h("slot", { key: '94ac8357a7e8fa4d681d5f3b6c986ef7c388320c', ref: (el) => (this.contentSlotElement = el) }))), this.clearable && (index.h("six-icon-button", { key: 'f191392816c57d663bd527df4fa00eccaa6dc545', exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
     }
 };
 SixTag.style = sixTagCss;
 exports.six_tag = SixTag;
+//# sourceMappingURL=six-tag.entry.cjs.js.map
 //# sourceMappingURL=six-tag.cjs.entry.js.map

package/dist/cjs/six-tag.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-tag.entry.cjs.js","mappings":"~~;;;;;;;;~~AAAA,MAAM,SAAS,GAAG,40EAA40E;;MCuBj1E,MAAM;;;;~~QAmBT~~,~~mBAAc~~,GAAG,IAAI,cAAc,CAACA,yBAAQ,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,GAAGC,mBAAc,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~~,QACEC,~~kBACE~~,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~~,~~IAEDA~~,~~yBAAa~~,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,~~IAClDA~~,~~kBAAM~~,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,cAAc,GAAG,EAAE,CAAC,EAAE,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,cAAc,~~IAChFA~~,~~kBAAM~~,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,kBAAkB,GAAG,EAAqB,CAAC,~~GAAI~~,CACnE,CACK,EAEb,IAAI,CAAC,SAAS,KACbA,~~6BACE~~,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":["debounce","getTextContent","h"],"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.entry.cjs.js","mappings":"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","names":["debounce","getTextContent","h"],"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/cjs/six-tag.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"six-tag.entry.cjs.js","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"],"names":["debounce","getTextContent","h"],"mappings":"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"}

package/dist/cjs/six-textarea.cjs.entry.js CHANGED Viewed

@@ -1,28 +1,64 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-B_stPhJp.js');
+var formControl = require('./form-control-BHd-Z4ot.js');
+var slot = require('./slot-DBK7c7jH.js');
+var eventListeners = require('./event-listeners-BrSR7arL.js');
-const index = require('./index-d7748d51.js');
-const formControl = require('./form-control-8d64e974.js');
-const slot = require('./slot-1b1232a1.js');
-const eventListeners = require('./event-listeners-9fb878f1.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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sixChange = index.createEvent(this, "six-textarea-change", 7);
-        this.sixInput = index.createEvent(this, "six-textarea-input", 7);
-        this.sixFocus = index.createEvent(this, "six-textarea-focus", 7);
-        this.sixBlur = index.createEvent(this, "six-textarea-blur", 7);
+        this.sixChange = index.createEvent(this, "six-textarea-change");
+        this.sixInput = index.createEvent(this, "six-textarea-input");
+        this.sixFocus = index.createEvent(this, "six-textarea-focus");
+        this.sixBlur = index.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.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;
@@ -49,32 +85,6 @@ const SixTextarea = class {
             this.hasHelpTextSlot = slot.hasSlot(this.host, 'help-text');
             this.hasErrorTextSlot = slot.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();
@@ -163,7 +173,7 @@ const SixTextarea = class {
         return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
     }
     render() {
-        return (index.h(formControl.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 }, index.h("div", { part: "base", class: {
+        return (index.h(formControl.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 }, index.h("div", { key: 'fda932e97759806d1153392d053ccdf32443b7c5', part: "base", class: {
                 textarea: true,
                 // Sizes
                 'textarea--small': this.size === 'small',
@@ -178,7 +188,7 @@ const SixTextarea = class {
                 'textarea--resize-none': this.resize === 'none',
                 'textarea--resize-vertical': this.resize === 'vertical',
                 'textarea--resize-auto': this.resize === 'auto',
-            } }, index.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 }))));
+            } }, index.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 index.getElement(this); }
     static get watchers() { return {
@@ -192,5 +202,6 @@ const SixTextarea = class {
 SixTextarea.style = sixTextareaCss;
 exports.six_textarea = SixTextarea;
+//# sourceMappingURL=six-textarea.entry.cjs.js.map
 //# sourceMappingURL=six-textarea.cjs.entry.js.map

package/dist/cjs/six-textarea.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-textarea.entry.cjs.js","mappings":"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","names":["EventListeners","hasSlot","h","FormControl"],"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.entry.cjs.js","mappings":"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","names":["EventListeners","hasSlot","h","FormControl"],"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}

package/dist/cjs/six-textarea.entry.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"six-textarea.entry.cjs.js","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"],"names":["EventListeners","hasSlot","h","FormControl"],"mappings":"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"}

package/dist/cjs/six-tile.cjs.entry.js CHANGED Viewed

@@ -1,17 +1,32 @@
 'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-d7748d51.js');
-const slot = require('./slot-1b1232a1.js');
+var index = require('./index-B_stPhJp.js');
+var slot = require('./slot-DBK7c7jH.js');
 const sixTileCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host{display:inline-block}.tile{min-height:var(--tile-size);width:var(--tile-size);background-color:var(--six-color-clay-50);display:inline-grid;grid-template-columns:100%;grid-template-areas:\"header\" \"middle\" \"footer\"}.tile--small{--tile-size:80px;--tile-padding-size:var(--six-spacing-medium)}.tile--medium{--tile-size:120px;--tile-padding-size:var(--six-spacing-large)}.tile--large{--tile-size:160px;--tile-padding-size:var(--six-spacing-x-large)}.tile:not(.tile--visible){visibility:hidden}.tile--elevated{border:0;box-shadow:var(--six-shadow-medium)}.tile__header{grid-area:header;height:5%;justify-self:right;display:flex;justify-content:right;opacity:0;transition:var(--six-transition-fast) opacity}.tile:hover>.tile__header{opacity:1}.tile__header--hidden{visibility:hidden}.tile__header six-icon-button{margin-top:-6px;margin-right:-6px;margin-bottom:-16px}.tile__body,.tile__body--large,.tile__body--medium,.tile__body--small{grid-area:middle;display:grid;place-items:center;cursor:pointer;padding-left:var(--tile-padding-size);padding-right:var(--tile-padding-size)}.tile__body six-icon::part(base),.tile__body--large six-icon::part(base),.tile__body--medium six-icon::part(base),.tile__body--small six-icon::part(base){padding:0}.tile__body--small{--tile-padding-size:var(--six-spacing-medium)}.tile__body--medium{--tile-padding-size:var(--six-spacing-large)}.tile__body--large{--tile-padding-size:var(--six-spacing-x-large)}.tile__footer,.tile__footer--large,.tile__footer--medium,.tile__footer--small{grid-area:footer;display:flex;justify-content:center;cursor:pointer;font-weight:var(--six-font-weight-normal);color:var(--six-color-web-rock-900)}.tile__footer--small{font-size:var(--six-font-size-xxx-small)}.tile__footer--medium{font-size:var(--six-font-size-xx-small)}.tile__footer--large{font-size:var(--six-font-size-small)}.tile__footer .label__footer,.tile__footer--small .label__footer,.tile__footer--medium .label__footer,.tile__footer--large .label__footer{overflow:hidden;text-overflow:ellipsis;width:calc(var(--tile-size) - 2em);text-align:center}";
 const SixTile = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.sixTileClose = index.createEvent(this, "six-tile-closed", 7);
-        this.sixTileSelected = index.createEvent(this, "six-tile-selected", 7);
+        this.sixTileClose = index.createEvent(this, "six-tile-closed");
+        this.sixTileSelected = index.createEvent(this, "six-tile-selected");
+        /** The tile's label. */
+        this.label = '';
+        /** Flag, whether the tile is closeable. */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.closeable = true;
+        /** Flag, whether the tile should cast a shadow. */
+        this.elevated = false;
+        /** Enables tile tooltip for tiles */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.disableTooltip = true;
+        /** Set to true to disable the tile. */
+        this.disabled = false;
+        /** The tile's size. */
+        this.size = 'medium';
+        this.visible = true;
+        this.hasIconSlot = false;
+        this.hasLabelSlot = false;
         this.handleSlotChange = () => {
             this.hasIconSlot = slot.hasSlot(this.host, 'icon');
             this.hasLabelSlot = slot.hasSlot(this.host, 'label');
@@ -31,16 +46,6 @@ const SixTile = class {
         this.handleClickEvent = () => {
             this.sixTileSelected.emit();
         };
-        this.label = '';
-        this.iconName = undefined;
-        this.closeable = true;
-        this.elevated = false;
-        this.disableTooltip = true;
-        this.disabled = false;
-        this.size = 'medium';
-        this.visible = true;
-        this.hasIconSlot = false;
-        this.hasLabelSlot = false;
     }
     /** Hides the tile */
     async hide() {
@@ -54,22 +59,22 @@ const SixTile = class {
         this.handleSlotChange();
     }
     render() {
-        return (index.h("six-tooltip", { disabled: this.disableTooltip || this.label === '', content: this.label }, index.h("div", { part: "base", class: {
+        return (index.h("six-tooltip", { key: '0194d16668af05616e26d0d868ac2b226bbb0cc5', disabled: this.disableTooltip || this.label === '', content: this.label }, index.h("div", { key: 'e2022a4cf90cef509e278bd7b2b8132ec8fb143d', part: "base", class: {
                 tile: true,
                 'tile--visible': this.visible,
                 'tile--small': this.size === 'small',
                 'tile--medium': this.size === 'medium',
                 'tile--large': this.size === 'large',
                 'tile--elevated': this.elevated,
-            } }, index.h("div", { part: "header", class: "tile__header" }, index.h("six-icon-button", { class: {
+            } }, index.h("div", { key: '5a5e1504034dca38b82ccf486d349325355f081c', part: "header", class: "tile__header" }, index.h("six-icon-button", { key: '9fa36a8b4235676894833aff69c0f547aeed46a0', class: {
                 'tile__header--hidden': !this.closeable,
-            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), index.h("div", { part: "body", class: "tile__body" }, this.iconName && (index.h("six-icon", { onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && index.h("slot", { name: "icon" })), index.h("div", { part: "footer", class: {
+            }, name: "close", size: closeIconSize(this.size), onClick: this.handleCloseClickEvent })), index.h("div", { key: '2fe12d6ae9aa5cb9f025d7aa7fa50b5100dd045a', part: "body", class: "tile__body" }, this.iconName && (index.h("six-icon", { key: 'df2eae92e2bcf138a6abac41b6ee6e3e088d53bb', onClick: this.handleClickEvent, size: iconSize(this.size) }, this.iconName)), this.hasIconSlot && index.h("slot", { key: '8e9cdf35cca4bfc96328dfa4fe64ea521e370c49', name: "icon" })), index.h("div", { key: 'ba212f6951348e5696e62bdced78c4a53257e6a5', part: "footer", class: {
                 'tile__footer--small': this.size === 'small',
                 'tile__footer--medium': this.size === 'medium',
                 'tile__footer--large': this.size === 'large',
-            } }, this.label && (index.h("div", { class: {
+            } }, this.label && (index.h("div", { key: '7e2c0f050272817b8cf05ad0e355b46e92b1e679', class: {
                 '.label__footer': true,
-            }, onClick: this.handleClickEvent }, this.label)), this.hasLabelSlot && index.h("slot", { name: "label" })))));
+            }, onClick: this.handleClickEvent }, this.label)), this.hasLabelSlot && index.h("slot", { key: 'bcdde55d0207915ca6747ec212666012497bbef1', name: "label" })))));
     }
     get host() { return index.getElement(this); }
 };
@@ -90,5 +95,6 @@ const iconSize = (size) => {
 SixTile.style = sixTileCss;
 exports.six_tile = SixTile;
+//# sourceMappingURL=six-tile.entry.cjs.js.map
 //# sourceMappingURL=six-tile.cjs.entry.js.map