npm - @six-group/ui-library - Versions diffs - 4.0.0-beta.1 → 4.0.0-beta.3 - Mend

@six-group/ui-library 4.0.0-beta.1 → 4.0.0-beta.3

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

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

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-2f6daa5b.js');
-const formControl = require('./form-control-2c17c573.js');
-const slot = require('./slot-ad537f24.js');
-const eventListeners = require('./event-listeners-74715e62.js');
+const index = require('./index-900437fc.js');
+const formControl = require('./form-control-d369af14.js');
+const slot = require('./slot-6e6a400f.js');
+const eventListeners = require('./event-listeners-fdfe838c.js');
 const sixTextareaCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.form-control .form-control__label{display:none}.form-control .form-control__help-text{display:none}.form-control .form-control__error-text{display:none}.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:\"*\"}.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;color:var(--six-color-danger-800);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}";
@@ -17,26 +17,44 @@ const SixTextarea = class {
     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.sixValueChange = index.createEvent(this, "six-textarea-value-change", 7);
     this.inputId = `textarea-${++id}`;
     this.labelId = `textarea-label-${id}`;
     this.helpTextId = `textarea-help-text-${id}`;
     this.errorTextId = `input-error-text-${id}`;
-    this.customErrorText = '';
-    this.customValidation = false;
     this.eventListeners = new eventListeners.EventListeners();
-    /** default value the textarea will be reverted to when reset is executed */
-    this.defaultValue = '';
+    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
+    this.handleChange = () => {
+      if (this.nativeTextarea != null) {
+        this.value = this.nativeTextarea.value;
+        this.sixChange.emit();
+      }
+    };
+    this.handleInput = () => {
+      if (this.nativeTextarea != null) {
+        this.value = this.nativeTextarea.value;
+        this.setTextareaHeight();
+        this.sixInput.emit();
+      }
+    };
+    this.handleBlur = () => {
+      this.hasFocus = false;
+      this.sixBlur.emit();
+    };
+    this.handleFocus = () => {
+      this.hasFocus = true;
+      this.sixFocus.emit();
+    };
+    this.handleSlotChange = () => {
+      this.hasLabelSlot = slot.hasSlot(this.host, 'label');
+      this.hasHelpTextSlot = slot.hasSlot(this.host, 'help-text');
+    };
     this.hasFocus = false;
     this.hasHelpTextSlot = false;
-    this.hasErrorTextSlot = false;
     this.hasLabelSlot = false;
     this.size = 'medium';
     this.name = '';
     this.value = '';
-    this.label = '';
     this.helpText = '';
-    this.errorText = '';
     this.placeholder = undefined;
     this.rows = 4;
     this.resize = 'vertical';
@@ -44,149 +62,105 @@ const SixTextarea = class {
     this.readonly = false;
     this.minlength = undefined;
     this.maxlength = undefined;
-    this.required = undefined;
+    this.required = false;
+    this.label = '';
+    this.errorText = '';
     this.invalid = false;
-    this.autocapitalize = undefined;
-    this.autocorrect = undefined;
-    this.autocomplete = undefined;
-    this.autofocus = undefined;
-    this.spellcheck = undefined;
+    this.autocapitalize = 'off';
+    this.autocorrect = 'off';
+    this.autocomplete = 'off';
+    this.autofocus = false;
+    this.spellcheck = false;
     this.inputmode = undefined;
-    this.errorOnBlur = false;
   }
   handleLabelChange() {
     this.handleSlotChange();
   }
   handleRowsChange() {
-    if (this.textarea) {
-      this.setTextareaHeight();
-    }
+    this.setTextareaHeight();
   }
   handleValueChange() {
-    if (!this.textarea) {
-      return;
+    this.value = this.getValue();
+    if (this.nativeTextarea != null) {
+      if (this.nativeTextarea.value !== this.value) {
+        this.nativeTextarea.value = this.value;
+      }
     }
-    this.textarea.value = this.value;
-    this.invalid = !this.textarea.checkValidity();
-    this.sixValueChange.emit();
   }
   connectedCallback() {
-    this.handleChange = this.handleChange.bind(this);
-    this.handleInput = this.handleInput.bind(this);
-    this.handleInvalid = this.handleInvalid.bind(this);
-    this.handleBlur = this.handleBlur.bind(this);
-    this.handleFocus = this.handleFocus.bind(this);
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-    this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);
+    var _a;
+    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.addEventListener('slotchange', this.handleSlotChange);
+    this.eventListeners.forward('six-textarea-input', 'input', this.host);
+    this.eventListeners.forward('six-textarea-change', 'change', this.host);
+    this.eventListeners.forward('six-textarea-focus', 'focus', this.host);
+    this.eventListeners.forward('six-textarea-blur', 'blur', this.host);
   }
   componentWillLoad() {
-    this.defaultValue = this.value || '';
     this.handleSlotChange();
   }
   componentDidLoad() {
     this.setTextareaHeight();
-    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());
-    this.resizeObserver.observe(this.textarea);
-    this.eventListeners.add(this.textarea, 'invalid', (event) => {
-      if (this.customValidation || (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {
-        this.customErrorText = this.textarea.validationMessage;
-      }
-      event.preventDefault();
-    });
+    if (this.nativeTextarea != null) {
+      this.resizeObserver.observe(this.nativeTextarea);
+    }
   }
   disconnectedCallback() {
-    this.resizeObserver.unobserve(this.textarea);
-    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    var _a;
+    if (this.nativeTextarea != null) {
+      this.resizeObserver.unobserve(this.nativeTextarea);
+    }
+    (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.removeEventListener('slotchange', this.handleSlotChange);
     this.eventListeners.removeAll();
   }
   /** Sets focus on the textarea. */
   async setFocus(options) {
-    this.textarea.focus(options);
+    var _a;
+    (_a = this.nativeTextarea) === null || _a === void 0 ? void 0 : _a.focus(options);
   }
   /** Removes focus fromt the textarea. */
   async removeFocus() {
-    this.textarea.blur();
+    var _a;
+    (_a = this.nativeTextarea) === null || _a === void 0 ? void 0 : _a.blur();
   }
   /** Selects all the text in the input. */
   async select() {
-    return this.textarea.select();
+    var _a;
+    return (_a = this.nativeTextarea) === null || _a === void 0 ? void 0 : _a.select();
   }
   /** Sets the start and end positions of the text selection (0-based). */
   async setSelectionRange(selectionStart, selectionEnd, selectionDirection = 'none') {
-    return this.textarea.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
+    var _a;
+    return (_a = this.nativeTextarea) === null || _a === void 0 ? void 0 : _a.setSelectionRange(selectionStart, selectionEnd, selectionDirection);
   }
   /** Replaces a range of text with a new string. */
   async setRangeText(replacement, start, end, selectMode = 'preserve') {
-    this.textarea.setRangeText(replacement, start, end, selectMode);
-    if (this.value !== this.textarea.value) {
-      this.value = this.textarea.value;
+    if (this.nativeTextarea == null)
+      return;
+    this.nativeTextarea.setRangeText(replacement, start, end, selectMode);
+    if (this.getValue() !== this.nativeTextarea.value) {
+      this.value = this.nativeTextarea.value;
       this.setTextareaHeight();
       this.sixChange.emit();
       this.sixInput.emit();
     }
   }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  async reportValidity() {
-    return this.textarea.reportValidity();
-  }
-  /** Checks for validity. */
-  async checkValidity() {
-    return this.textarea.validity.valid;
-  }
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  async setCustomValidity(message) {
-    this.customErrorText = '';
-    this.customValidation = message !== '';
-    this.textarea.setCustomValidity(message);
-    this.invalid = !this.textarea.checkValidity();
-  }
-  /** Resets the formcontrol */
-  async reset() {
-    this.value = this.defaultValue;
-    this.customErrorText = '';
-    this.customValidation = false;
-    this.textarea.setCustomValidity('');
-    this.invalid = false;
-  }
-  handleChange() {
-    this.sixChange.emit();
-  }
-  handleInput() {
-    this.value = this.textarea.value;
-    this.setTextareaHeight();
-    this.sixInput.emit();
-  }
-  handleInvalid() {
-    this.invalid = true;
-  }
-  handleBlur() {
-    this.hasFocus = false;
-    this.sixBlur.emit();
-  }
-  handleFocus() {
-    this.hasFocus = true;
-    this.sixFocus.emit();
-  }
-  handleSlotChange() {
-    this.hasLabelSlot = slot.hasSlot(this.host, 'label');
-    this.hasHelpTextSlot = slot.hasSlot(this.host, 'help-text');
-    this.hasErrorTextSlot = slot.hasSlot(this.host, 'error-text');
-  }
   setTextareaHeight() {
+    if (this.nativeTextarea == null)
+      return;
     if (this.resize === 'auto') {
-      this.textarea.style.height = 'auto';
-      this.textarea.style.height = this.textarea.scrollHeight + 'px';
+      this.nativeTextarea.style.height = 'auto';
+      this.nativeTextarea.style.height = this.nativeTextarea.scrollHeight + 'px';
     }
     else {
-      this.textarea.style.height = undefined;
+      this.nativeTextarea.style.height = undefined;
     }
   }
-  displayError() {
-    return this.invalid && (!this.errorOnBlur || !this.hasFocus);
+  getValue() {
+    var _a;
+    return ((_a = this.value) !== null && _a !== void 0 ? _a : '').toString();
   }
   render() {
-    var _a;
-    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.customErrorText ? this.customErrorText : this.errorText, hasErrorTextSlot: this.hasErrorTextSlot, size: this.size, disabled: this.disabled, required: this.required, displayError: this.displayError() }, index.h("div", { part: "base", class: {
+    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, size: this.size, disabled: this.disabled, required: this.required, displayError: this.invalid }, index.h("div", { part: "base", class: {
         textarea: true,
         // Sizes
         'textarea--small': this.size === 'small',
@@ -195,13 +169,13 @@ const SixTextarea = class {
         // States
         'textarea--disabled': this.disabled,
         'textarea--focused': this.hasFocus,
-        'textarea--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0,
+        'textarea--empty': this.getValue().length === 0,
         'textarea--invalid': this.invalid,
         // Modifiers
         '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.textarea = 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.value, 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, onInvalid: this.handleInvalid, onFocus: this.handleFocus, onBlur: this.handleBlur }))));
+      } }, 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 }))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

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 inputId = `textarea-${++id}`;\n labelId = `textarea-label-${id}`;\n helpTextId = `textarea-help-text-${id}`;\n errorTextId = `input-error-text-${id}`;\n resizeObserver: ResizeObserver;\n textarea: HTMLTextAreaElement;\n customErrorText = '';\n customValidation = false;\n\n readonly eventListeners = new EventListeners();\n\n @Element() host: HTMLSixTextareaElement;\n\n @State() hasFocus = false;\n @State() hasHelpTextSlot = false;\n @State() hasErrorTextSlot = false;\n @State() hasLabelSlot = 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 label. Alternatively, you can use the label slot. /\n @Prop() label = '';\n\n /* The textarea's help text. Alternatively, you can use the help-text slot. /\n @Prop() helpText = '';\n\n /* The textarea's error text. Alternatively, you can use the error-text slot. /\n @Prop() errorText = '';\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 /* The textarea's required attribute. /\n @Prop({ reflect: true }) required: boolean;\n\n /\n This will be true when the control is in an invalid state. Validity is determined by props such as `required`,\n * `minlength`, and `maxlength` using the browser's constraint validation API.\n /\n @Prop({ mutable: true, reflect: true }) invalid = false;\n\n /* The textarea's autocaptialize attribute. /\n @Prop() autocapitalize: string;\n\n /* The textarea's autocorrect attribute. /\n @Prop() autocorrect: string;\n\n /* The textarea's autocomplete attribute. /\n @Prop() autocomplete: string;\n\n /* The textarea's autofocus attribute. /\n @Prop() autofocus: boolean;\n\n /* The textarea's spellcheck attribute. /\n @Prop() spellcheck: boolean;\n\n /* The textarea's inputmode attribute. /\n @Prop() inputmode: 'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url';\n\n /* Set to display the error text on blur and not when typing /\n @Prop() errorOnBlur = false;\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 /\n Emitted whenever the value changes. Access the new value via event.target.value.\n * six-textarea-value-change will emit whenever the value changes.\n * So be it on textarea or when dynamically set. six-textarea-input will only be emitted when the user enters data,\n * but not when a value is dynamically set. six-textarea-change will only be emitted when the user either presses enter\n * or leaves the textarea field after entering some data.\n * /\n\n @Event({ eventName: 'six-textarea-value-change' }) sixValueChange: 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 if (this.textarea) {\n this.setTextareaHeight();\n }\n }\n\n @Watch('value')\n handleValueChange() {\n if (!this.textarea) {\n return;\n }\n this.textarea.value = this.value;\n this.invalid = !this.textarea.checkValidity();\n this.sixValueChange.emit();\n }\n\n /* default value the textarea will be reverted to when reset is executed /\n private defaultValue = '';\n\n connectedCallback() {\n this.handleChange = this.handleChange.bind(this);\n this.handleInput = this.handleInput.bind(this);\n this.handleInvalid = this.handleInvalid.bind(this);\n this.handleBlur = this.handleBlur.bind(this);\n this.handleFocus = this.handleFocus.bind(this);\n this.handleSlotChange = this.handleSlotChange.bind(this);\n\n this.host.shadowRoot.addEventListener('slotchange', this.handleSlotChange);\n }\n\n componentWillLoad() {\n this.defaultValue = this.value \|\| '';\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n this.setTextareaHeight();\n this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n this.resizeObserver.observe(this.textarea);\n this.eventListeners.add(this.textarea, 'invalid', (event) => {\n if (this.customValidation \|\| (!this.hasErrorTextSlot && !this.errorText && !this.customErrorText)) {\n this.customErrorText = this.textarea.validationMessage;\n }\n event.preventDefault();\n });\n }\n\n disconnectedCallback() {\n this.resizeObserver.unobserve(this.textarea);\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.textarea.focus(options);\n }\n\n /* Removes focus fromt the textarea. /\n @Method()\n async removeFocus() {\n this.textarea.blur();\n }\n\n /* Selects all the text in the input. /\n @Method()\n async select() {\n return this.textarea.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.textarea.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 this.textarea.setRangeText(replacement, start, end, selectMode);\n\n if (this.value !== this.textarea.value) {\n this.value = this.textarea.value;\n this.setTextareaHeight();\n this.sixChange.emit();\n this.sixInput.emit();\n }\n }\n\n /* Checks for validity and shows the browser's validation message if the control is invalid. /\n @Method()\n async reportValidity() {\n return this.textarea.reportValidity();\n }\n\n /* Checks for validity. /\n @Method()\n async checkValidity() {\n return this.textarea.validity.valid;\n }\n\n /* Sets a custom validation message. If `message` is not empty, the field will be considered invalid. /\n @Method()\n async setCustomValidity(message: string) {\n this.customErrorText = '';\n this.customValidation = message !== '';\n this.textarea.setCustomValidity(message);\n this.invalid = !this.textarea.checkValidity();\n }\n\n /* Resets the formcontrol */\n @Method()\n async reset() {\n this.value = this.defaultValue;\n this.customErrorText = '';\n this.customValidation = false;\n this.textarea.setCustomValidity('');\n this.invalid = false;\n }\n\n handleChange() {\n this.sixChange.emit();\n }\n\n handleInput() {\n this.value = this.textarea.value;\n this.setTextareaHeight();\n this.sixInput.emit();\n }\n\n handleInvalid() {\n this.invalid = true;\n }\n\n handleBlur() {\n this.hasFocus = false;\n this.sixBlur.emit();\n }\n\n handleFocus() {\n this.hasFocus = true;\n this.sixFocus.emit();\n }\n\n 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 setTextareaHeight() {\n if (this.resize === 'auto') {\n this.textarea.style.height = 'auto';\n this.textarea.style.height = this.textarea.scrollHeight + 'px';\n } else {\n this.textarea.style.height = undefined;\n }\n }\n\n displayError() {\n return this.invalid && (!this.errorOnBlur \|\| !this.hasFocus);\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.customErrorText ? this.customErrorText : this.errorText}\n hasErrorTextSlot={this.hasErrorTextSlot}\n size={this.size}\n disabled={this.disabled}\n required={this.required}\n displayError={this.displayError()}\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.value?.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.textarea = 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.value}\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 onInvalid={this.handleInvalid}\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: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\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 = '';\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 };\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 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-tile.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-2f6daa5b.js');
-const slot = require('./slot-ad537f24.js');
+const index = require('./index-900437fc.js');
+const slot = require('./slot-6e6a400f.js');
 const sixTileCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}: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-elevation-8dp)}.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}";
@@ -12,6 +12,18 @@ const SixTile = class {
     index.registerInstance(this, hostRef);
     this.sixTileClose = index.createEvent(this, "six-tile-closed", 7);
     this.sixTileSelected = index.createEvent(this, "six-tile-selected", 7);
+    this.handleSlotChange = () => {
+      this.hasIconSlot = slot.hasSlot(this.host, 'icon');
+      this.hasLabelSlot = slot.hasSlot(this.host, 'label');
+      if (this.hasIconSlot) {
+        const slot$1 = slot.getSlot(this.host, 'icon');
+        slot$1 === null || slot$1 === void 0 ? void 0 : slot$1.addEventListener('click', this.handleClickEvent);
+      }
+      if (this.hasLabelSlot) {
+        const slot$1 = slot.getSlot(this.host, 'label');
+        slot$1 === null || slot$1 === void 0 ? void 0 : slot$1.addEventListener('click', this.handleClickEvent);
+      }
+    };
     this.handleCloseClickEvent = () => {
       this.visible = false;
       this.sixTileClose.emit();
@@ -38,24 +50,9 @@ const SixTile = class {
   async show() {
     this.visible = true;
   }
-  connectedCallback() {
-    this.handleSlotChange = this.handleSlotChange.bind(this);
-  }
   componentWillLoad() {
     this.handleSlotChange();
   }
-  handleSlotChange() {
-    this.hasIconSlot = slot.hasSlot(this.host, 'icon');
-    this.hasLabelSlot = slot.hasSlot(this.host, 'label');
-    if (this.hasIconSlot) {
-      let slot = this.host.querySelector(`[slot="icon"]`);
-      slot.addEventListener('click', this.handleClickEvent);
-    }
-    if (this.hasLabelSlot) {
-      let slot = this.host.querySelector(`[slot="label"]`);
-      slot.addEventListener('click', this.handleClickEvent);
-    }
-  }
   render() {
     return (index.h("six-tooltip", { disabled: this.disableTooltip || this.label === '', content: this.label }, index.h("div", { part: "base", class: {
         tile: true,

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

	@@ -1 +1 @@
1	- {"file":"six-tile.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,UAAU,GAAG,woEAAwoE;;MCc9oE,OAAO;;;;;~~IAkIV~~,~~0BAAqB~~,GAAG;~~MAC9B~~,IAAI,CAAC,~~OAAO~~,~~GAAG~~,~~KAAK~~,CAAC~~;MACrB~~,IAAI,CAAC,~~YAAY,CAAC,~~IAAI,EAAE,CAAC~~;KAC1B~~,CAAC;~~IAEM~~,~~qBAAgB~~,~~GAAG;MACzB~~,~~IAAI~~,CAAC,~~eAAe~~,CAAC,IAAI,EAAE,CAAC~~;KAC7B~~,CAAC;~~iBArIc~~,~~EAAE;;qBAME~~,IAAI~~;oBAGL~~,~~KAAK;0BAGU~~,~~IAAI;oBAGF~~,~~KAAK~~;~~gBAGqB~~,~~QAAQ;mBAEnD~~,~~IAAI;uBAoBA~~,~~KAAK;wBAEJ~~,~~KAAK;;;EAZ7B~~,~~MAAM~~,IAAI~~;IACR~~,~~IAAI,~~CAAC,~~OAAO~~,~~GAAG~~,~~KAAK~~,CAAC~~;GACtB;;EAID~~,~~MAAM,IAAI~~;~~IACR~~,~~IAAI~~,~~CAAC~~,~~OAAO~~,~~GAAG~~,~~IAAI~~,~~CAAC;GACrB;EAMD~~,~~iBAAiB;IACf~~,~~IAAI,~~CAAC,~~gBAAgB~~,~~GAAG~~,IAAI,CAAC,gBAAgB,CAAC,~~IAAI,~~CAAC~~,IAAI,CAAC,CAAC~~;~~GAC1D~~;~~EAED~~,~~iBAAiB;IACf~~,IAAI,CAAC,~~gBAAgB~~,EAAE~~,CAAC~~;~~GACzB;EAED~~,~~gBAAgB;IACd~~,~~IAAI~~,~~CAAC~~,~~WAAW,GAAGA,~~YAAO,CAAC,IAAI,CAAC,IAAI,EAAE,~~MAAM~~,CAAC,CAAC;~~IAC9C~~,~~IAAI~~,~~CAAC~~,~~YAAY~~,~~GAAGA~~,~~YAAO~~,~~CAAC~~,~~IAAI~~,CAAC,~~IAAI~~,EAAE,~~OAAO~~,CAAC,CAAC;~~IAEhD~~,~~IAAI,IAAI,~~CAAC,~~WAAW~~,~~EAAE~~;~~MACpB~~,IAAI,~~IAAI~~,~~GAAgB~~,~~IAAI~~,CAAC,IAAI,CAAC,~~aAAa~~,CAAC,~~eAAe~~,CAAC,CAAC;~~MACjE~~,IAAI,CAAC,~~gBAAgB~~,CAAC,~~OAAO~~,EAAE,~~IAAI~~,CAAC,~~gBAAgB~~,~~CAAC~~,~~CAAC~~;~~KACvD;IAED~~,IAAI,~~IAAI~~,~~CAAC~~,~~YAAY~~,~~EAAE~~;~~MACrB~~,~~IAAI~~,IAAI,~~GAAgB,~~IAAI,CAAC,~~IAAI~~,~~CAAC~~,~~aAAa~~,CAAC,~~gBAAgB~~,~~CAAC,CAAC~~;~~MAClE~~,IAAI,CAAC,~~gBAAgB~~,CAAC,~~OAAO~~,~~EAAE,~~IAAI,CAAC,gBAAgB,~~CAAC~~,CAAC;~~KACvD~~;~~GACF;EAED~~,MAAM;IACJ,~~QACEC~~,yBAAa,QAAQ,EAAE,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,IAClFA,iBACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;QACL,IAAI,EAAE,IAAI;QACV,eAAe,EAAE,IAAI,CAAC,OAAO;QAC7B,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACpC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QACtC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QACpC,gBAAgB,EAAE,IAAI,CAAC,QAAQ;OAChC,IAEDA,iBAAK,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,IACrCA,6BACE,KAAK,EAAE;QACL,sBAAsB,EAAE,CAAC,IAAI,CAAC,SAAS;OACxC,EACD,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAC9B,OAAO,EAAE,IAAI,CAAC,qBAAqB,GACnC,CACE,EAENA,iBAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,IAChC,IAAI,CAAC,QAAQ,KACZA,sBAAU,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAChE,IAAI,CAAC,QAAQ,CACL,CACZ,EACA,IAAI,CAAC,WAAW,IAAIA,kBAAM,IAAI,EAAC,MAAM,GAAQ,CAC1C,EAENA,iBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE;QACL,qBAAqB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;QAC5C,sBAAsB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;QAC9C,qBAAqB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;OAC7C,IAEA,IAAI,CAAC,KAAK,KACTA,iBACE,KAAK,EAAE;QACL,gBAAgB,EAAE,IAAI;OACvB,EACD,OAAO,EAAE,IAAI,CAAC,gBAAgB,IAE7B,IAAI,CAAC,KAAK,CACP,CACP,EACA,IAAI,CAAC,YAAY,IAAIA,kBAAM,IAAI,EAAC,OAAO,GAAQ,CAC5C,CACF,CACM,EACd;GACH;;;AAYH,MAAM,aAAa,GAAG,CAAC,IAAY;EACjC,OAAO;IACL,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,QAAQ;GAChB,CAAC,IAAI,CAAwB,CAAC;AACjC,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAY;EAC5B,OAAO;IACL,KAAK,EAAE,QAAQ;IACf,MAAM,EAAE,SAAS;IACjB,KAAK,EAAE,UAAU;GAClB,CAAC,IAAI,CAAsC,CAAC;AAC/C,CAAC,CAAC;;;;;","names":["hasSlot","h"],"sources":["./src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","./src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.tile {\n &--small {\n --tile-size: 80px;\n --tile-padding-size: var(--six-spacing-medium);\n }\n\n &--medium {\n --tile-size: 120px;\n --tile-padding-size: var(--six-spacing-large);\n }\n\n &--large {\n --tile-size: 160px;\n --tile-padding-size: var(--six-spacing-x-large);\n }\n\n min-height: var(--tile-size);\n width: var(--tile-size);\n\n background-color: var(--six-color-clay-50);\n\n display: inline-grid;\n grid-template-columns: 100%;\n grid-template-areas:\n 'header'\n 'middle'\n 'footer';\n\n &:not(.tile--visible) {\n visibility: hidden;\n }\n\n &--elevated {\n border: 0;\n box-shadow: var(--six-elevation-8dp);\n }\n}\n\n.tile__header {\n grid-area: header;\n height: 5%;\n justify-self: right;\n display: flex;\n justify-content: right;\n opacity: 0;\n transition: var(--six-transition-fast) opacity;\n\n .tile:hover > & {\n opacity: 1;\n }\n\n &--hidden {\n visibility: hidden;\n }\n\n six-icon-button {\n margin-top: -6px;\n margin-right: -6px;\n margin-bottom: -16px;\n }\n}\n\n.tile__body {\n grid-area: middle;\n display: grid;\n place-items: center;\n cursor: pointer;\n\n six-icon::part(base) {\n padding: 0;\n }\n\n &--small {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-medium);\n }\n\n &--medium {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-large);\n }\n\n &--large {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-x-large);\n }\n\n padding-left: var(--tile-padding-size);\n padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n grid-area: footer;\n display: flex;\n justify-content: center;\n cursor: pointer;\n font-weight: var(--six-font-weight-normal);\n color: var(--six-color-web-rock-900);\n\n &--small {\n @extend .tile__footer;\n font-size: var(--six-font-size-xxx-small);\n }\n\n &--medium {\n @extend .tile__footer;\n font-size: var(--six-font-size-xx-small);\n }\n\n &--large {\n @extend .tile__footer;\n font-size: var(--six-font-size-small);\n }\n\n .label__footer {\n overflow: hidden;\n text-overflow: ellipsis;\n width: calc(var(--tile-size) - 2em);\n text-align: center;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { hasSlot } from '../../utils/slot';\n\n/*\n @since 1.0\n * @status stable\n /\n\n@Component({\n tag: 'six-tile',\n styleUrl: 'six-tile.scss',\n shadow: true,\n})\nexport class SixTile {\n @Element() host: HTMLSixTileElement;\n\n /* The tile's label. /\n @Prop() label = '';\n\n /* The icon's name. /\n @Prop() iconName;\n\n /* Flag, whether the tile is closeable. /\n @Prop() closeable = true;\n\n /* Flag, whether the tile should cast a shadow. /\n @Prop() elevated = false;\n\n /* Enables tile tooltip for tiles /\n @Prop() disableTooltip: ~~boolean~~ = true;\n\n /* Set to true to disable the tile. /\n @Prop({ reflect: true }) disabled = false;\n\n /* The tile's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n @State() visible = true;\n\n /* Emitted when the tile was closed. /\n @Event({ eventName: 'six-tile-closed' }) sixTileClose: EventEmitter<EmptyPayload>;\n\n /* Emitted when the tile is selected. /\n @Event({ eventName: 'six-tile-selected' }) sixTileSelected: EventEmitter<EmptyPayload>;\n\n /* Hides the tile /\n @Method()\n async hide() {\n this.visible = false;\n }\n\n /* Shows the tile */\n @Method()\n async show() {\n this.visible = true;\n }\n\n @State() hasIconSlot = false;\n\n @State() hasLabelSlot = false;\n\n ~~connectedCallback~~() {\n this.handleSlotChange ~~= this.handleSlotChange.bind~~(~~this~~);\n }\n\n ~~componentWillLoad()~~ ~~{\n this.~~handleSlotChange()~~;\n }\n\n handleSlotChange()~~ {\n this.hasIconSlot = hasSlot(this.host, 'icon');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n\n if (this.hasIconSlot) {\n ~~let~~ slot: ~~HTMLElement~~ = this.host~~.querySelector(`[slot=\"~~icon~~\"]`~~);\n slot.addEventListener('click', this.handleClickEvent);\n }\n\n if (this.hasLabelSlot) {\n ~~let~~ slot: ~~HTMLElement~~ = this.host~~.querySelector(`[slot=\"~~label~~\"]`~~);\n slot.addEventListener('click', this.handleClickEvent);\n }\n }\n\n render() {\n return (\n <six-tooltip disabled={this.disableTooltip \|\| this.label === ''} content={this.label}>\n <div\n part=\"base\"\n class={{\n tile: true,\n 'tile--visible': this.visible,\n 'tile--small': this.size === 'small',\n 'tile--medium': this.size === 'medium',\n 'tile--large': this.size === 'large',\n 'tile--elevated': this.elevated,\n }}\n >\n <div part=\"header\" class=\"tile__header\">\n <six-icon-button\n class={{\n 'tile__header--hidden': !this.closeable,\n }}\n name=\"close\"\n size={closeIconSize(this.size)}\n onClick={this.handleCloseClickEvent}\n />\n </div>\n\n <div part=\"body\" class=\"tile__body\">\n {this.iconName && (\n <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n {this.iconName}\n </six-icon>\n )}\n {this.hasIconSlot && <slot name=\"icon\"></slot>}\n </div>\n\n <div\n part=\"footer\"\n class={{\n 'tile__footer--small': this.size === 'small',\n 'tile__footer--medium': this.size === 'medium',\n 'tile__footer--large': this.size === 'large',\n }}\n >\n {this.label && (\n <div\n class={{\n '.label__footer': true,\n }}\n onClick={this.handleClickEvent}\n >\n {this.label}\n </div>\n )}\n {this.hasLabelSlot && <slot name=\"label\"></slot>}\n </div>\n </div>\n </six-tooltip>\n );\n }\n\n private handleCloseClickEvent = () => {\n this.visible = false;\n this.sixTileClose.emit();\n };\n\n private handleClickEvent = () => {\n this.sixTileSelected.emit();\n };\n}\n\nconst closeIconSize = (size: string) => {\n return {\n small: 'xxSmall',\n medium: 'medium',\n large: 'medium',\n }[size] as 'xSmall' \| 'medium';\n};\n\nconst iconSize = (size: string) => {\n return {\n small: 'xLarge',\n medium: 'xxLarge',\n large: 'xxxLarge',\n }[size] as 'xLarge' \| 'xxLarge' \| 'xxxLarge';\n};\n"],"version":3}
1	+ {"file":"six-tile.entry.cjs.js","mappings":"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","names":["hasSlot","slot","getSlot","h"],"sources":["src/components/six-tile/six-tile.scss?tag=six-tile&encapsulation=shadow","src/components/six-tile/six-tile.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.tile {\n &--small {\n --tile-size: 80px;\n --tile-padding-size: var(--six-spacing-medium);\n }\n\n &--medium {\n --tile-size: 120px;\n --tile-padding-size: var(--six-spacing-large);\n }\n\n &--large {\n --tile-size: 160px;\n --tile-padding-size: var(--six-spacing-x-large);\n }\n\n min-height: var(--tile-size);\n width: var(--tile-size);\n\n background-color: var(--six-color-clay-50);\n\n display: inline-grid;\n grid-template-columns: 100%;\n grid-template-areas:\n 'header'\n 'middle'\n 'footer';\n\n &:not(.tile--visible) {\n visibility: hidden;\n }\n\n &--elevated {\n border: 0;\n box-shadow: var(--six-elevation-8dp);\n }\n}\n\n.tile__header {\n grid-area: header;\n height: 5%;\n justify-self: right;\n display: flex;\n justify-content: right;\n opacity: 0;\n transition: var(--six-transition-fast) opacity;\n\n .tile:hover > & {\n opacity: 1;\n }\n\n &--hidden {\n visibility: hidden;\n }\n\n six-icon-button {\n margin-top: -6px;\n margin-right: -6px;\n margin-bottom: -16px;\n }\n}\n\n.tile__body {\n grid-area: middle;\n display: grid;\n place-items: center;\n cursor: pointer;\n\n six-icon::part(base) {\n padding: 0;\n }\n\n &--small {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-medium);\n }\n\n &--medium {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-large);\n }\n\n &--large {\n @extend .tile__body;\n --tile-padding-size: var(--six-spacing-x-large);\n }\n\n padding-left: var(--tile-padding-size);\n padding-right: var(--tile-padding-size);\n}\n\n.tile__footer {\n grid-area: footer;\n display: flex;\n justify-content: center;\n cursor: pointer;\n font-weight: var(--six-font-weight-normal);\n color: var(--six-color-web-rock-900);\n\n &--small {\n @extend .tile__footer;\n font-size: var(--six-font-size-xxx-small);\n }\n\n &--medium {\n @extend .tile__footer;\n font-size: var(--six-font-size-xx-small);\n }\n\n &--large {\n @extend .tile__footer;\n font-size: var(--six-font-size-small);\n }\n\n .label__footer {\n overflow: hidden;\n text-overflow: ellipsis;\n width: calc(var(--tile-size) - 2em);\n text-align: center;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { getSlot, hasSlot } from '../../utils/slot';\n\n/*\n @since 1.0\n * @status stable\n /\n\n@Component({\n tag: 'six-tile',\n styleUrl: 'six-tile.scss',\n shadow: true,\n})\nexport class SixTile {\n @Element() host!: HTMLSixTileElement;\n\n /* The tile's label. /\n @Prop() label = '';\n\n /* The icon's name. /\n @Prop() iconName?: string;\n\n /* Flag, whether the tile is closeable. /\n @Prop() closeable = true;\n\n /* Flag, whether the tile should cast a shadow. /\n @Prop() elevated = false;\n\n /* Enables tile tooltip for tiles /\n @Prop() disableTooltip = true;\n\n /* Set to true to disable the tile. /\n @Prop({ reflect: true }) disabled = false;\n\n /* The tile's size. /\n @Prop({ reflect: true }) size: 'small' \| 'medium' \| 'large' = 'medium';\n\n @State() visible = true;\n\n /* Emitted when the tile was closed. /\n @Event({ eventName: 'six-tile-closed' }) sixTileClose!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the tile is selected. /\n @Event({ eventName: 'six-tile-selected' }) sixTileSelected!: EventEmitter<EmptyPayload>;\n\n /* Hides the tile /\n @Method()\n async hide() {\n this.visible = false;\n }\n\n /* Shows the tile */\n @Method()\n async show() {\n this.visible = true;\n }\n\n @State() hasIconSlot = false;\n\n @State() hasLabelSlot = false;\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n private handleSlotChange = () => {\n this.hasIconSlot = hasSlot(this.host, 'icon');\n this.hasLabelSlot = hasSlot(this.host, 'label');\n\n if (this.hasIconSlot) {\n const slot = getSlot(this.host, 'icon');\n slot?.addEventListener('click', this.handleClickEvent);\n }\n\n if (this.hasLabelSlot) {\n const slot = getSlot(this.host, 'label');\n slot?.addEventListener('click', this.handleClickEvent);\n }\n };\n\n render() {\n return (\n <six-tooltip disabled={this.disableTooltip \|\| this.label === ''} content={this.label}>\n <div\n part=\"base\"\n class={{\n tile: true,\n 'tile--visible': this.visible,\n 'tile--small': this.size === 'small',\n 'tile--medium': this.size === 'medium',\n 'tile--large': this.size === 'large',\n 'tile--elevated': this.elevated,\n }}\n >\n <div part=\"header\" class=\"tile__header\">\n <six-icon-button\n class={{\n 'tile__header--hidden': !this.closeable,\n }}\n name=\"close\"\n size={closeIconSize(this.size)}\n onClick={this.handleCloseClickEvent}\n />\n </div>\n\n <div part=\"body\" class=\"tile__body\">\n {this.iconName && (\n <six-icon onClick={this.handleClickEvent} size={iconSize(this.size)}>\n {this.iconName}\n </six-icon>\n )}\n {this.hasIconSlot && <slot name=\"icon\"></slot>}\n </div>\n\n <div\n part=\"footer\"\n class={{\n 'tile__footer--small': this.size === 'small',\n 'tile__footer--medium': this.size === 'medium',\n 'tile__footer--large': this.size === 'large',\n }}\n >\n {this.label && (\n <div\n class={{\n '.label__footer': true,\n }}\n onClick={this.handleClickEvent}\n >\n {this.label}\n </div>\n )}\n {this.hasLabelSlot && <slot name=\"label\"></slot>}\n </div>\n </div>\n </six-tooltip>\n );\n }\n\n private handleCloseClickEvent = () => {\n this.visible = false;\n this.sixTileClose.emit();\n };\n\n private handleClickEvent = () => {\n this.sixTileSelected.emit();\n };\n}\n\nconst closeIconSize = (size: string) => {\n return {\n small: 'xxSmall',\n medium: 'medium',\n large: 'medium',\n }[size] as 'xSmall' \| 'medium';\n};\n\nconst iconSize = (size: string) => {\n return {\n small: 'xLarge',\n medium: 'xxLarge',\n large: 'xxxLarge',\n }[size] as 'xLarge' \| 'xxLarge' \| 'xxxLarge';\n};\n"],"version":3}