@six-group/ui-library 3.0.0-beta.1.7

package/dist/cjs/six-table-cell_4.cjs.entry.js

@@ -0,0 +1,102 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-341df120.js');
+const types = require('./types-65e5c95b.js');
+
+const sixTableCellCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:table-cell;padding:var(--six-spacing-medium);font-size:var(--six-font-size-small)}";
+
+let SixTableCell = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
+SixTableCell.style = sixTableCellCss;
+
+const sixTableHeaderCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:table-header-group;cursor:pointer;font-family:var(--six-font-family);font-weight:var(--six-font-weight-bold);color:var(--six-table-header-color);border-bottom:solid 2px var(--six-table-header-border-color);padding:0.75rem}";
+
+let SixTableHeader = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
+SixTableHeader.style = sixTableHeaderCss;
+
+const getNextState = (states) => (current) => {
+  const next = states.indexOf(current) + 1;
+  return states[next < states.length ? next : 0];
+};
+const getNextSortState = getNextState(Object.values(types.SortDirection));
+const getNextFilterState = getNextState(Object.values(types.FilterMode));
+
+const createSortModel = (key, value) => {
+  return { [key]: value };
+};
+const createFilterModel = (key, filter, value) => {
+  return { [key]: { [filter]: value } };
+};
+
+const SortIcon = {
+  [types.SortDirection.Asc]: 'arrow_drop_up',
+  [types.SortDirection.Desc]: 'arrow_drop_down',
+  [types.SortDirection.None]: 'swap_vert',
+};
+const FilterIcon = {
+  [types.FilterMode.Equals]: '=',
+  [types.FilterMode.NotEquals]: '&ne;',
+  [types.FilterMode.Includes]: '&isin;',
+  [types.FilterMode.NotIncludes]: '&notin;',
+};
+
+const sixTableHeaderCellCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:table-cell;padding:var(--six-spacing-medium) var(--six-spacing-medium) var(--six-spacing-x-small);font-size:var(--six-font-size-small)}six-icon{vertical-align:text-top;width:1.5rem}.header:hover .header__trigger-icon,.header--selected .header__trigger-icon{opacity:1}.header__trigger-icon{color:var(--six-color-web-rock-600);opacity:0}.header__trigger-icon-box{float:right}[slot=prefix]{font-size:1.5em}six-dropdown::part(panel){overflow:inherit}";
+
+let SixTableHeaderCell = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sortUpdated = index.createEvent(this, "six-table-header-cell-sort-updated", 7);
+    this.filterUpdated = index.createEvent(this, "six-table-header-cell-filter-updated", 7);
+    this.handleSortNext = () => {
+      this.sortUpdated.emit(createSortModel(this.name, getNextSortState(this.sort)));
+    };
+    this.handleFilterNext = () => {
+      this.filterUpdated.emit(createFilterModel(this.name, getNextFilterState(this.filter), this.inputElement.value));
+    };
+    this.handleFilterChange = () => {
+      this.filterUpdated.emit(createFilterModel(this.name, this.filter, this.inputElement.value));
+    };
+    this.handleFilterClear = () => {
+      this.filterUpdated.emit(createFilterModel(this.name, this.filter, undefined));
+      this.filterRef.hide();
+    };
+  }
+  render() {
+    const sort = this.sort && (index.h("six-icon", { filled: true, class: { 'header__trigger-icon': this.sort === types.SortDirection.None }, onClick: this.handleSortNext, "data-testid": `table-sort-${this.name}` }, SortIcon[this.sort]));
+    const filter = this.filter && (index.h("six-dropdown", { ref: (el) => (this.filterRef = el), hoist: true, "data-testid": `table-filter-${this.name}` }, index.h("six-icon", { slot: "trigger", class: "header__trigger-icon" }, "filter_alt"), index.h("six-input", { ref: (el) => (this.inputElement = el), value: this.value, "onSix-input-input": this.handleFilterChange }, index.h("six-icon-button", { slot: "prefix", html: FilterIcon[this.filter], onClick: this.handleFilterNext, "data-testid": `table-filter-prefix-${this.name}` }), index.h("six-icon-button", { slot: "suffix", name: "clear", label: "Clear", onClick: this.handleFilterClear, "data-testid": `table-filter-suffix-${this.name}` }))));
+    return (index.h(index.Host, null, index.h("div", { class: { header: true, 'header--selected': this.value !== undefined } }, index.h("slot", null), index.h("div", { class: "header__trigger-icon-box" }, sort, filter))));
+  }
+};
+SixTableHeaderCell.style = sixTableHeaderCellCss;
+
+const sixTableRowCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:table-row;font-family:var(--six-font-family)}:host(:hover){background-color:var(--six-table-row-background-color-hover)}";
+
+let SixTableRow = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("slot", null)));
+  }
+};
+SixTableRow.style = sixTableRowCss;
+
+exports.six_table_cell = SixTableCell;
+exports.six_table_header = SixTableHeader;
+exports.six_table_header_cell = SixTableHeaderCell;
+exports.six_table_row = SixTableRow;

package/dist/cjs/six-table.cjs.entry.js

@@ -0,0 +1,168 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-341df120.js');
+const types = require('./types-65e5c95b.js');
+
+const assertions = [
+  (value) => typeof value === 'object',
+  (value) => typeof value.columns === 'object',
+  (value) => Array.isArray(value.rows),
+  (value) => value.sort === undefined || typeof value.sort === 'object',
+];
+const apply = (value) => (f) => f(value);
+const isData = (value) => assertions.every(apply(value));
+
+const Invalid = {
+  Term: (value) => typeof value !== 'string' || value.length < 1,
+};
+
+const modes = {
+  [types.FilterMode.Includes]: (a, b) => a.includes(b),
+  [types.FilterMode.NotIncludes]: (a, b) => !a.includes(b),
+  [types.FilterMode.Equals]: (a, b) => a === b,
+  [types.FilterMode.NotEquals]: (a, b) => a !== b,
+};
+const filterBy = (filterModel = {}) => (item) => {
+  var _a;
+  const keys = Object.keys(filterModel);
+  if (keys.length === 0) {
+    return true;
+  }
+  for (const key of keys) {
+    const filter = filterModel[key];
+    if (!filter) {
+      return true;
+    }
+    for (const [mode, term] of Object.entries(filter)) {
+      if (Invalid.Term(term)) {
+        continue;
+      }
+      const value = String((_a = item[key]) !== null && _a !== void 0 ? _a : '');
+      if (Invalid.Term(value)) {
+        continue;
+      }
+      if (!modes[mode](value, term)) {
+        return false;
+      }
+    }
+  }
+  return true;
+};
+
+const unordered = (value) => value === types.SortDirection.None;
+const DEFAULT_COMPARATOR = (a, b) => String(a).localeCompare(String(b));
+const sortBy = (sort = {}, compare = {}) => (items) => {
+  const values = Object.values(sort);
+  if (values.length === 0 || values.every(unordered)) {
+    return items;
+  }
+  return [...items].sort((a, b) => {
+    return Object.entries(sort).reduce((acc, [k, v], index) => {
+      if (v === types.SortDirection.None) {
+        return acc;
+      }
+      const comparator = compare[k];
+      const direction = {
+        [types.SortDirection.Asc]: +1,
+        [types.SortDirection.Desc]: -1,
+      }[v];
+      if (comparator) {
+        return acc + direction * (comparator(a, b) << index);
+      }
+      return acc + direction * (DEFAULT_COMPARATOR(a[k], b[k]) << index);
+    }, 0);
+  });
+};
+
+const quickFilterBy = (keys, value) => (item) => {
+  if (Invalid.Term(value)) {
+    return true;
+  }
+  const term = value.toLowerCase();
+  const source = keys
+    .map((key) => { var _a; return (_a = item[key]) !== null && _a !== void 0 ? _a : ''; })
+    .map(String)
+    .join()
+    .toLowerCase();
+  return source.includes(term);
+};
+
+const propOr = (k) => (o = {}, defaults) => o[k] || defaults;
+const fromData = ({ data, handleRowClick, handleCellClick }) => {
+  if (!isData(data)) {
+    return;
+  }
+  const keys = Object.keys(data.columns);
+  const columns = keys.map((key) => {
+    const byKey = propOr(key);
+    const sort = byKey(data.sort, undefined);
+    const [[filter, value] = []] = Object.entries(byKey(data.filter, {}));
+    return (index.h("six-table-header-cell", { name: key, sort: sort, filter: filter, value: value }, data.columns[key]));
+  });
+  const quickFilter = quickFilterBy(Object.keys(data.columns), data.quickFilter);
+  const filter = filterBy(data.filter);
+  const sort = sortBy(data.sort, data.compare);
+  const rows = sort(data.rows.filter(quickFilter).filter(filter)).map((item, index$1) => {
+    const cells = keys.map((key) => {
+      const renderer = data.render && data.render[key];
+      // HTML is not escaped, responsibility lays on the caller
+      const html = typeof renderer === 'function' ? renderer(item) : String(item[key]);
+      return (index.h("six-table-cell", { onClick: handleCellClick(item, key), "data-testid": `table-cell-${key}-${index$1}`, innerHTML: html }));
+    });
+    return (index.h("six-table-row", { onClick: handleRowClick(item), "data-testid": `table-row-${index$1}` }, cells));
+  });
+  return (index.h(index.Fragment, null,
+    index.h("six-table-header", { "data-testid": "table-header" }, columns),
+    rows));
+};
+
+const sixTableCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:table;border-collapse:collapse;user-select:none;border:none;width:100%;height:100%}:host([loading]){border-collapse:separate}:host([striped]) six-table-row:nth-child(odd):not(:hover),:host([striped]) ::slotted(six-table-row:nth-child(odd):not(:hover)){background-color:var(--six-table-row-background-color)}:host(:not(striped)) ::slotted(six-table-row){border-bottom:solid 1px var(--six-table-row-border-color)}.loading{position:absolute;background-color:var(--six-table-background-color);top:0;left:0;width:100%;height:100%}.loading six-spinner{top:calc(50% - 0.5em);left:50%;transform:scale(3)}";
+
+let SixTable = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.tableReady = index.createEvent(this, "six-table-ready", 7);
+    this.tableRowClicked = index.createEvent(this, "six-table-row-clicked", 7);
+    this.tableCellClicked = index.createEvent(this, "six-table-cell-clicked", 7);
+    /** Set to true to stripe the table. */
+    this.striped = false;
+    /** Set to true to display loading indicator. */
+    this.loading = false;
+    this.data = {
+      columns: {},
+      rows: [],
+    };
+    this.handleRowClick = (item) => (event) => {
+      this.tableRowClicked.emit({ event, item });
+    };
+    this.handleCellClick = (item, key) => (event) => {
+      this.tableCellClicked.emit({ event, item, key });
+    };
+    console.warn('six-table will be removed with the next table. Use fate table instead. In case of any question contact Daniel Häusler');
+  }
+  handleData({ detail }) {
+    if (!isData(detail)) {
+      return;
+    }
+    this.data = detail;
+  }
+  async setData(value) {
+    if (!isData(value)) {
+      return;
+    }
+    this.data = value;
+  }
+  componentDidLoad() {
+    this.tableReady.emit();
+  }
+  render() {
+    const loading = this.loading && (index.h("div", { class: "loading" }, index.h("six-spinner", { "data-testid": "loading-spinner" })));
+    return (index.h(index.Host, null, index.h("slot", null, fromData(this)), loading));
+  }
+  get host() { return index.getElement(this); }
+};
+SixTable.style = sixTableCss;
+
+exports.six_table = SixTable;

package/dist/cjs/six-tag.cjs.entry.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-341df120.js');
+
+const sixTagCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.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__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)}";
+
+let SixTag = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.sixClear = index.createEvent(this, "six-tag-clear", 7);
+    /** 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;
+  }
+  connectedCallback() {
+    this.handleClearClick = this.handleClearClick.bind(this);
+  }
+  handleClearClick() {
+    this.sixClear.emit();
+  }
+  render() {
+    return (index.h("span", { ref: (el) => (this.tag = el), part: "base", class: {
+        tag: true,
+        // Types
+        'tag--primary': this.type === 'primary',
+        'tag--success': this.type === 'success',
+        'tag--info': this.type === 'info',
+        'tag--warning': this.type === 'warning',
+        'tag--danger': this.type === 'danger',
+        'tag--action': this.type === 'action',
+        'tag--text': this.type === 'text',
+        // Sizes
+        'tag--small': this.size === 'small',
+        'tag--medium': this.size === 'medium',
+        'tag--large': this.size === 'large',
+        // Modifers
+        'tag--pill': this.pill,
+        'tag--clear': this.clearable,
+      } }, index.h("span", { part: "content", class: "tag__content" }, index.h("slot", null)), this.clearable && (index.h("six-icon-button", { exportparts: "base:clear-button", size: "xSmall", name: "clear", class: "tag__clear", onClick: this.handleClearClick }))));
+  }
+};
+SixTag.style = sixTagCss;
+
+exports.six_tag = SixTag;

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

@@ -0,0 +1,222 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-341df120.js');
+const formControl = require('./form-control-9e4dffd1.js');
+const slot = require('./slot-8abe833c.js');
+const eventListeners = require('./event-listeners-4a8d66d5.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}";
+
+let id = 0;
+let 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.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();
+    this.hasFocus = false;
+    this.hasHelpTextSlot = false;
+    this.hasErrorTextSlot = false;
+    this.hasLabelSlot = 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 label. Alternatively, you can use the label slot. */
+    this.label = '';
+    /** The textarea's help text. Alternatively, you can use the help-text slot. */
+    this.helpText = '';
+    /** The textarea's error text. Alternatively, you can use the error-text slot. */
+    this.errorText = '';
+    /** 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;
+    /**
+     * This will be true when the control is in an invalid state. Validity is determined by props such as `required`,
+     * `minlength`, and `maxlength` using the browser's constraint validation API.
+     */
+    this.invalid = false;
+    /** Set to display the error text on blur and not when typing */
+    this.errorOnBlur = false;
+    /** default value the textarea will be reverted to when reset is executed */
+    this.defaultValue = '';
+  }
+  handleLabelChange() {
+    this.handleSlotChange();
+  }
+  handleRowsChange() {
+    if (this.textarea) {
+      this.setTextareaHeight();
+    }
+  }
+  handleValueChange() {
+    if (!this.textarea) {
+      return;
+    }
+    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);
+  }
+  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();
+    });
+  }
+  disconnectedCallback() {
+    this.resizeObserver.unobserve(this.textarea);
+    this.host.shadowRoot.removeEventListener('slotchange', this.handleSlotChange);
+    this.eventListeners.removeAll();
+  }
+  /** Sets focus on the textarea. */
+  async setFocus(options) {
+    this.textarea.focus(options);
+  }
+  /** Removes focus fromt the textarea. */
+  async removeFocus() {
+    this.textarea.blur();
+  }
+  /** Selects all the text in the input. */
+  async select() {
+    return this.textarea.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);
+  }
+  /** 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;
+      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.resize === 'auto') {
+      this.textarea.style.height = 'auto';
+      this.textarea.style.height = this.textarea.scrollHeight + 'px';
+    }
+    else {
+      this.textarea.style.height = undefined;
+    }
+  }
+  displayError() {
+    return this.invalid && (!this.errorOnBlur || !this.hasFocus);
+  }
+  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: {
+        textarea: true,
+        // Sizes
+        'textarea--small': this.size === 'small',
+        'textarea--medium': this.size === 'medium',
+        'textarea--large': this.size === 'large',
+        // States
+        'textarea--disabled': this.disabled,
+        'textarea--focused': this.hasFocus,
+        'textarea--empty': ((_a = this.value) === null || _a === void 0 ? void 0 : _a.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 }))));
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "helpText": ["handleLabelChange"],
+    "errorText": ["handleLabelChange"],
+    "label": ["handleLabelChange"],
+    "rows": ["handleRowsChange"],
+    "value": ["handleValueChange"]
+  }; }
+};
+SixTextarea.style = sixTextareaCss;
+
+exports.six_textarea = SixTextarea;

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

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-341df120.js');
+const slot = require('./slot-8abe833c.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}";
+
+let 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);
+    /** The tile's label. */
+    this.label = '';
+    /** Flag, whether the tile is closeable. */
+    this.closeable = true;
+    /** Flag, whether the tile should cast a shadow. */
+    this.elevated = false;
+    /** Enables tile tooltip for tiles */
+    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.handleCloseClickEvent = () => {
+      this.visible = false;
+      this.sixTileClose.emit();
+    };
+    this.handleClickEvent = () => {
+      this.sixTileSelected.emit();
+    };
+  }
+  /** Hides the tile */
+  async hide() {
+    this.visible = false;
+  }
+  /** Shows the tile */
+  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,
+        '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: {
+        '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: {
+        'tile__footer--small': this.size === 'small',
+        'tile__footer--medium': this.size === 'medium',
+        'tile__footer--large': this.size === 'large',
+      } }, this.label && (index.h("div", { class: {
+        '.label__footer': true,
+      }, onClick: this.handleClickEvent }, this.label)), this.hasLabelSlot && index.h("slot", { name: "label" })))));
+  }
+  get host() { return index.getElement(this); }
+};
+const closeIconSize = (size) => {
+  return {
+    small: 'xxSmall',
+    medium: 'medium',
+    large: 'medium',
+  }[size];
+};
+const iconSize = (size) => {
+  return {
+    small: 'xLarge',
+    medium: 'xxLarge',
+    large: 'xxxLarge',
+  }[size];
+};
+SixTile.style = sixTileCss;
+
+exports.six_tile = SixTile;