@six-group/ui-library 3.0.0-beta.1.7 → 4.0.0-beta.0

package/dist/esm/six-tab.entry.js

@@ -1,49 +1,47 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a2605a62.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-96b1af5d.js';
 
 const sixTabCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.tab{display:inline-flex;align-items:center;font-family:var(--six-font-family);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-semibold);border-radius:4px;color:var(--six-tab-color);padding:var(--six-spacing-medium) var(--six-spacing-large);white-space:nowrap;user-select:none;cursor:pointer;transition:var(--six-transition-fast) box-shadow, var(--six-transition-fast) color}.tab:focus{outline:none}.tab:focus:not(.tab--disabled){color:var(--six-tab-color-active)}.tab.tab--active:not(.tab--disabled){color:var(--six-tab-color-active);font-weight:var(--six-font-weight-bold)}.tab.tab--closable{padding-right:var(--six-spacing-small)}.tab.tab--disabled{color:var(--six-tab-color-disabled);cursor:not-allowed}.tab:hover:not(.tab--disabled){color:var(--six-tab-color-hover)}.tab__close-button{font-size:var(--six-font-size-large);margin-left:var(--six-spacing-xx-small)}.tab__close-button::part(base){padding:var(--six-spacing-xxx-small)}";
 
-let id = 0;
-let SixTab = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.sixClose = createEvent(this, "six-tab-close", 7);
-    this.componentId = `tab-${++id}`;
-    /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */
-    this.panel = '';
-    /** Set to true to draw the tab in an active state. */
-    this.active = false;
-    /** When true, the tab will be rendered with a close icon. */
-    this.closable = false;
-    /** Set to true to draw the tab in a disabled state. */
-    this.disabled = false;
-  }
-  connectedCallback() {
-    this.handleCloseClick = this.handleCloseClick.bind(this);
-  }
-  /** Sets focus to the tab. */
-  async setFocus(options) {
-    this.tab.focus(options);
-  }
-  /** Removes focus from the tab. */
-  async removeFocus() {
-    this.tab.blur();
-  }
-  handleCloseClick() {
-    this.sixClose.emit();
-  }
-  render() {
-    return (
-    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
-    h(Host, { id: this.host.id || this.componentId }, h("div", { part: "base", ref: (el) => (this.tab = el), class: {
-        tab: true,
-        // States
-        'tab--active': this.active,
-        'tab--closable': this.closable,
-        'tab--disabled': this.disabled,
-      }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", null), this.closable && (h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" })))));
-  }
-  get host() { return getElement(this); }
-};
+let id = 0;
+const SixTab = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sixClose = createEvent(this, "six-tab-close", 7);
+    this.componentId = `tab-${++id}`;
+    this.panel = '';
+    this.active = false;
+    this.closable = false;
+    this.disabled = false;
+  }
+  connectedCallback() {
+    this.handleCloseClick = this.handleCloseClick.bind(this);
+  }
+  /** Sets focus to the tab. */
+  async setFocus(options) {
+    this.tab.focus(options);
+  }
+  /** Removes focus from the tab. */
+  async removeFocus() {
+    this.tab.blur();
+  }
+  handleCloseClick() {
+    this.sixClose.emit();
+  }
+  render() {
+    return (
+    // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels
+    h(Host, { id: this.host.id || this.componentId }, h("div", { part: "base", ref: (el) => (this.tab = el), class: {
+        tab: true,
+        // States
+        'tab--active': this.active,
+        'tab--closable': this.closable,
+        'tab--disabled': this.disabled,
+      }, role: "tab", "aria-disabled": this.disabled ? 'true' : 'false', "aria-selected": this.active ? 'true' : 'false', tabindex: this.disabled || !this.active ? '-1' : '0' }, h("slot", null), this.closable && (h("six-icon-button", { name: "close", size: "xSmall", exportparts: "base:close-button", class: "tab__close-button", onClick: this.handleCloseClick, tabIndex: -1, "aria-hidden": "true" })))));
+  }
+  get host() { return getElement(this); }
+};
 SixTab.style = sixTabCss;
 
 export { SixTab as six_tab };
+
+//# sourceMappingURL=six-tab.entry.js.map

package/dist/esm/six-tab.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-tab.entry.js","mappings":";;AAAA,MAAM,SAAS,GAAG,ikCAAikC;;ACGnlC,IAAI,EAAE,GAAG,CAAC,CAAC;MAmBE,MAAM;;;;IACjB,gBAAW,GAAG,OAAO,EAAE,EAAE,EAAE,CAAC;iBAMK,EAAE;kBAGD,KAAK;oBAGpB,KAAK;oBAGY,KAAK;;EAKzC,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC1D;;EAID,MAAM,QAAQ,CAAC,OAAsB;IACnC,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;GACzB;;EAID,MAAM,WAAW;IACf,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC;GACjB;EAED,gBAAgB;IACd,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;GACtB;EAED,MAAM;IACJ;;IAEE,EAAC,IAAI,IAAC,EAAE,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,IACxC,WACE,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,EAC5B,KAAK,EAAE;QACL,GAAG,EAAE,IAAI;;QAGT,aAAa,EAAE,IAAI,CAAC,MAAM;QAC1B,eAAe,EAAE,IAAI,CAAC,QAAQ;QAC9B,eAAe,EAAE,IAAI,CAAC,QAAQ;OAC/B,EACD,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,mBAChC,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC7C,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,GAAG,GAAG,IAEpD,eAAQ,EACP,IAAI,CAAC,QAAQ,KACZ,uBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAC,mBAAmB,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAAC,iBACA,MAAM,GAClB,CACH,CACG,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/six-tab/six-tab.scss?tag=six-tab&encapsulation=shadow","./src/components/six-tab/six-tab.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: inline-block;\n}\n\n.tab {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--six-font-family);\n  font-size: var(--six-font-size-small);\n  font-weight: var(--six-font-weight-semibold);\n  border-radius: 4px;\n  color: var(--six-tab-color);\n  padding: var(--six-spacing-medium) var(--six-spacing-large);\n  white-space: nowrap;\n  user-select: none;\n  cursor: pointer;\n  transition: var(--six-transition-fast) box-shadow, var(--six-transition-fast) color;\n\n  &:focus {\n    outline: none;\n  }\n\n  &:focus:not(.tab--disabled) {\n    color: var(--six-tab-color-active);\n  }\n\n  &.tab--active:not(.tab--disabled) {\n    color: var(--six-tab-color-active);\n    font-weight: var(--six-font-weight-bold);\n  }\n\n  &.tab--closable {\n    padding-right: var(--six-spacing-small);\n  }\n\n  &.tab--disabled {\n    color: var(--six-tab-color-disabled);\n    cursor: not-allowed;\n  }\n\n  &:hover:not(.tab--disabled) {\n    color: var(--six-tab-color-hover);\n  }\n}\n\n.tab__close-button {\n  font-size: var(--six-font-size-large);\n  margin-left: var(--six-spacing-xx-small);\n\n  &::part(base) {\n    padding: var(--six-spacing-xxx-small);\n  }\n}\n","import { Component, Element, Event, EventEmitter, Host, Method, Prop, h } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/**\n * @since 1.0\n * @status stable\n *\n * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n *\n * @slot - The tab's label.\n *\n * @part base - The component's base wrapper.\n * @part close-button - The close button, which is the icon button's base wrapper.\n */\n\n@Component({\n  tag: 'six-tab',\n  styleUrl: 'six-tab.scss',\n  shadow: true,\n})\nexport class SixTab {\n  componentId = `tab-${++id}`;\n  tab: HTMLElement;\n\n  @Element() host: HTMLSixTabElement;\n\n  /** The name of the tab panel the tab will control. The panel must be located in the same tab group. */\n  @Prop({ reflect: true }) panel = '';\n\n  /** Set to true to draw the tab in an active state. */\n  @Prop({ reflect: true }) active = false;\n\n  /** When true, the tab will be rendered with a close icon. */\n  @Prop() closable = false;\n\n  /** Set to true to draw the tab in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Emitted when the tab is closable and the close button is activated. */\n  @Event({ eventName: 'six-tab-close' }) sixClose: EventEmitter<EmptyPayload>;\n\n  connectedCallback() {\n    this.handleCloseClick = this.handleCloseClick.bind(this);\n  }\n\n  /** Sets focus to the tab. */\n  @Method()\n  async setFocus(options?: FocusOptions) {\n    this.tab.focus(options);\n  }\n\n  /** Removes focus from the tab. */\n  @Method()\n  async removeFocus() {\n    this.tab.blur();\n  }\n\n  handleCloseClick() {\n    this.sixClose.emit();\n  }\n\n  render() {\n    return (\n      // If the user didn't provide an ID, we'll set one so we can link tabs and tab panels with aria labels\n      <Host id={this.host.id || this.componentId}>\n        <div\n          part=\"base\"\n          ref={(el) => (this.tab = el)}\n          class={{\n            tab: true,\n\n            // States\n            'tab--active': this.active,\n            'tab--closable': this.closable,\n            'tab--disabled': this.disabled,\n          }}\n          role=\"tab\"\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-selected={this.active ? 'true' : 'false'}\n          tabindex={this.disabled || !this.active ? '-1' : '0'}\n        >\n          <slot />\n          {this.closable && (\n            <six-icon-button\n              name=\"close\"\n              size=\"xSmall\"\n              exportparts=\"base:close-button\"\n              class=\"tab__close-button\"\n              onClick={this.handleCloseClick}\n              tabIndex={-1}\n              aria-hidden=\"true\"\n            />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,95 +1,100 @@
-import { r as registerInstance, h, H as Host, c as createEvent } from './index-a2605a62.js';
-import { S as SortDirection, F as FilterMode } from './types-33d15673.js';
+import { r as registerInstance, h, H as Host, c as createEvent } from './index-96b1af5d.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) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-};
+const SixTableCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, 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) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-};
+const SixTableHeader = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, 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(SortDirection));
-const getNextFilterState = getNextState(Object.values(FilterMode));
+const getNextState = (states) => (current) => {
+  const next = states.indexOf(current) + 1;
+  return states[next < states.length ? next : 0];
+};
+const getNextSortState = getNextState(['none', 'asc', 'desc']);
+const getNextFilterState = getNextState(Object.values(['eq', 'ne', 'in', 'ni']));
 
-const createSortModel = (key, value) => {
-  return { [key]: value };
-};
-const createFilterModel = (key, filter, value) => {
-  return { [key]: { [filter]: value } };
+const createSortModel = (key, value) => {
+  return { [key]: value };
+};
+const createFilterModel = (key, filter, value) => {
+  return { [key]: { [filter]: value } };
 };
 
-const SortIcon = {
-  [SortDirection.Asc]: 'arrow_drop_up',
-  [SortDirection.Desc]: 'arrow_drop_down',
-  [SortDirection.None]: 'swap_vert',
-};
-const FilterIcon = {
-  [FilterMode.Equals]: '=',
-  [FilterMode.NotEquals]: '&ne;',
-  [FilterMode.Includes]: '&isin;',
-  [FilterMode.NotIncludes]: '&notin;',
+const SortIcon = {
+  ['asc']: 'arrow_drop_up',
+  ['desc']: 'arrow_drop_down',
+  ['none']: 'swap_vert',
+};
+const FilterIcon = {
+  ['eq']: '=',
+  ['ne']: '&ne;',
+  ['in']: '&isin;',
+  ['ni']: '&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) {
-    registerInstance(this, hostRef);
-    this.sortUpdated = createEvent(this, "six-table-header-cell-sort-updated", 7);
-    this.filterUpdated = 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 && (h("six-icon", { filled: true, class: { 'header__trigger-icon': this.sort === SortDirection.None }, onClick: this.handleSortNext, "data-testid": `table-sort-${this.name}` }, SortIcon[this.sort]));
-    const filter = this.filter && (h("six-dropdown", { ref: (el) => (this.filterRef = el), hoist: true, "data-testid": `table-filter-${this.name}` }, h("six-icon", { slot: "trigger", class: "header__trigger-icon" }, "filter_alt"), h("six-input", { ref: (el) => (this.inputElement = el), value: this.value, "onSix-input-input": this.handleFilterChange }, h("six-icon-button", { slot: "prefix", html: FilterIcon[this.filter], onClick: this.handleFilterNext, "data-testid": `table-filter-prefix-${this.name}` }), h("six-icon-button", { slot: "suffix", name: "clear", label: "Clear", onClick: this.handleFilterClear, "data-testid": `table-filter-suffix-${this.name}` }))));
-    return (h(Host, null, h("div", { class: { header: true, 'header--selected': this.value !== undefined } }, h("slot", null), h("div", { class: "header__trigger-icon-box" }, sort, filter))));
-  }
-};
+const SixTableHeaderCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.sortUpdated = createEvent(this, "six-table-header-cell-sort-updated", 7);
+    this.filterUpdated = 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();
+    };
+    this.name = undefined;
+    this.sort = undefined;
+    this.filter = undefined;
+    this.value = undefined;
+  }
+  render() {
+    const sort = this.sort && (h("six-icon", { filled: true, class: { 'header__trigger-icon': this.sort === 'none' }, onClick: this.handleSortNext, "data-testid": `table-sort-${this.name}` }, SortIcon[this.sort]));
+    const filter = this.filter && (h("six-dropdown", { ref: (el) => (this.filterRef = el), hoist: true, "data-testid": `table-filter-${this.name}` }, h("six-icon", { slot: "trigger", class: "header__trigger-icon" }, "filter_alt"), h("six-input", { ref: (el) => (this.inputElement = el), value: this.value, "onSix-input-input": this.handleFilterChange }, h("six-icon-button", { slot: "prefix", html: FilterIcon[this.filter], onClick: this.handleFilterNext, "data-testid": `table-filter-prefix-${this.name}` }), h("six-icon-button", { slot: "suffix", name: "clear", label: "Clear", onClick: this.handleFilterClear, "data-testid": `table-filter-suffix-${this.name}` }))));
+    return (h(Host, null, h("div", { class: { header: true, 'header--selected': this.value !== undefined } }, h("slot", null), 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) {
-    registerInstance(this, hostRef);
-  }
-  render() {
-    return (h(Host, null, h("slot", null)));
-  }
-};
+const SixTableRow = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+};
 SixTableRow.style = sixTableRowCss;
 
 export { SixTableCell as six_table_cell, SixTableHeader as six_table_header, SixTableHeaderCell as six_table_header_cell, SixTableRow as six_table_row };
+
+//# sourceMappingURL=six-table-cell_4.entry.js.map

package/dist/esm/six-table-cell_4.entry.js.map

@@ -0,0 +1 @@
+{"file":"six-table-cell.six-table-header.six-table-header-cell.six-table-row.entry.js","mappings":"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","names":[],"sources":["./src/components/six-table-cell/six-table-cell.scss?tag=six-table-cell&encapsulation=shadow","./src/components/six-table-cell/six-table-cell.tsx","./src/components/six-table-header/six-table-header.scss?tag=six-table-header&encapsulation=shadow","./src/components/six-table-header/six-table-header.tsx","./src/components/six-table-header-cell/util/get-next-state.ts","./src/components/six-table-header-cell/util/create-model.ts","./src/components/six-table-header-cell/icons.ts","./src/components/six-table-header-cell/six-table-header-cell.scss?tag=six-table-header-cell&encapsulation=shadow","./src/components/six-table-header-cell/six-table-header-cell.tsx","./src/components/six-table-row/six-table-row.scss?tag=six-table-row&encapsulation=shadow","./src/components/six-table-row/six-table-row.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n  display: table-cell;\n  padding: var(--six-spacing-medium);\n  font-size: var(--six-font-size-small);\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the content of the cell.\n */\n\n@Component({\n  tag: 'six-table-cell',\n  styleUrl: 'six-table-cell.scss',\n  shadow: true,\n})\nexport class SixTableCell {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n","@import 'src/global/component';\n\n:host {\n  display: table-header-group;\n  cursor: pointer;\n  font-family: var(--six-font-family);\n  font-weight: var(--six-font-weight-bold);\n  color: var(--six-table-header-color);\n  border-bottom: solid 2px var(--six-table-header-border-color);\n  padding: 0.75rem;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the cells of the header.\n */\n\n@Component({\n  tag: 'six-table-header',\n  styleUrl: 'six-table-header.scss',\n  shadow: true,\n})\nexport class SixTableHeader {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n","import { FilterMode, SortDirection } from '../types';\n\nconst getNextState =\n  <T>(states: T[]) =>\n  (current: T): T => {\n    const next = states.indexOf(current) + 1;\n    return states[next < states.length ? next : 0];\n  };\n\nexport const getNextSortState = getNextState(['none', 'asc', 'desc'] as SortDirection[]);\nexport const getNextFilterState = getNextState(Object.values(['eq', 'ne', 'in', 'ni'] as FilterMode[]));\n","import { Item, SortModel, FilterModel } from '../../six-table/types';\nimport { SortDirection, FilterMode } from '../types';\n\nexport const createSortModel = <T extends Item>(key: keyof T, value: SortDirection): SortModel<T> => {\n  return { [key]: value } as any;\n};\n\nexport const createFilterModel = <T extends Item>(key: keyof T, filter: FilterMode, value: string): FilterModel<T> => {\n  return { [key]: { [filter]: value } } as any;\n};\n","import { FilterMode, SortDirection } from './types';\n\nexport const SortIcon: Record<SortDirection, string> = {\n  ['asc']: 'arrow_drop_up',\n  ['desc']: 'arrow_drop_down',\n  ['none']: 'swap_vert',\n};\n\nexport const FilterIcon: Record<FilterMode, string> = {\n  ['eq']: '=',\n  ['ne']: '&ne;',\n  ['in']: '&isin;',\n  ['ni']: '&notin;',\n};\n","@import 'src/global/component';\n\n:host {\n  display: table-cell;\n  padding: var(--six-spacing-medium) var(--six-spacing-medium) var(--six-spacing-x-small);\n  font-size: var(--six-font-size-small);\n}\n\nsix-icon {\n  vertical-align: text-top;\n  width: 1.5rem;\n}\n\n.header {\n  &:hover,\n  &--selected {\n    .header__trigger-icon {\n      opacity: 1;\n    }\n  }\n\n  &__trigger-icon {\n    color: var(--six-color-web-rock-600);\n    opacity: 0;\n  }\n\n  &__trigger-icon-box {\n    float: right;\n  }\n}\n\n[slot='prefix'] {\n  font-size: 1.5em;\n}\n\nsix-dropdown::part(panel) {\n  overflow: inherit;\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { FilterMode, SortDirection } from './types';\nimport { FilterModel, Item, SortModel } from '../six-table/types';\nimport { getNextFilterState, getNextSortState } from './util/get-next-state';\nimport { createFilterModel, createSortModel } from './util/create-model';\nimport { FilterIcon, SortIcon } from './icons';\n\nexport type SixTableHeaderCellSortUpdatedPayload = SortModel<Item>;\nexport type SixTableHeaderCellFilterUpdatedPayload = FilterModel<Item>;\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the label of the header field.\n */\n\n@Component({\n  tag: 'six-table-header-cell',\n  styleUrl: 'six-table-header-cell.scss',\n  shadow: true,\n})\nexport class SixTableHeaderCell {\n  filterRef: HTMLSixDropdownElement;\n\n  /** Table row property name. Used in the custom events to identify the row. */\n  @Prop() name: keyof Item;\n  /** Sort direction. Applied only when set. */\n  @Prop() sort: SortDirection;\n  /** Filter mode. Applied only when set. */\n  @Prop() filter: FilterMode;\n  /** Filter value. Applied only when filter mode is set. */\n  @Prop() value: string;\n\n  /** Emitted when sort model is updated. */\n  @Event({ eventName: 'six-table-header-cell-sort-updated' })\n  sortUpdated: EventEmitter<SixTableHeaderCellSortUpdatedPayload>;\n  /** Emitted when filter model is updated. */\n  @Event({ eventName: 'six-table-header-cell-filter-updated' })\n  filterUpdated: EventEmitter<SixTableHeaderCellFilterUpdatedPayload>;\n\n  inputElement: HTMLSixInputElement;\n\n  handleSortNext = () => {\n    this.sortUpdated.emit(createSortModel(this.name, getNextSortState(this.sort)));\n  };\n\n  handleFilterNext = () => {\n    this.filterUpdated.emit(createFilterModel(this.name, getNextFilterState(this.filter), this.inputElement.value));\n  };\n\n  handleFilterChange = () => {\n    this.filterUpdated.emit(createFilterModel(this.name, this.filter, this.inputElement.value));\n  };\n\n  handleFilterClear = () => {\n    this.filterUpdated.emit(createFilterModel(this.name, this.filter, undefined));\n    this.filterRef.hide();\n  };\n\n  render() {\n    const sort = this.sort && (\n      <six-icon\n        filled={true}\n        class={{ 'header__trigger-icon': this.sort === 'none' }}\n        onClick={this.handleSortNext}\n        data-testid={`table-sort-${this.name}`}\n      >\n        {SortIcon[this.sort]}\n      </six-icon>\n    );\n\n    const filter = this.filter && (\n      <six-dropdown ref={(el) => (this.filterRef = el)} hoist data-testid={`table-filter-${this.name}`}>\n        <six-icon slot=\"trigger\" class=\"header__trigger-icon\">\n          filter_alt\n        </six-icon>\n        <six-input\n          ref={(el) => (this.inputElement = el)}\n          value={this.value}\n          onSix-input-input={this.handleFilterChange}\n        >\n          <six-icon-button\n            slot=\"prefix\"\n            html={FilterIcon[this.filter]}\n            onClick={this.handleFilterNext}\n            data-testid={`table-filter-prefix-${this.name}`}\n          />\n          <six-icon-button\n            slot=\"suffix\"\n            name=\"clear\"\n            label=\"Clear\"\n            onClick={this.handleFilterClear}\n            data-testid={`table-filter-suffix-${this.name}`}\n          />\n        </six-input>\n      </six-dropdown>\n    );\n\n    return (\n      <Host>\n        <div class={{ header: true, 'header--selected': this.value !== undefined }}>\n          <slot />\n          <div class=\"header__trigger-icon-box\">\n            {sort}\n            {filter}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import 'src/global/component';\n\n:host {\n  display: table-row;\n  font-family: var(--six-font-family);\n}\n\n:host(:hover) {\n  background-color: var(--six-table-row-background-color-hover);\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the cells of the row.\n */\n\n@Component({\n  tag: 'six-table-row',\n  styleUrl: 'six-table-row.scss',\n  shadow: true,\n})\nexport class SixTableRow {\n  render() {\n    return (\n      <Host>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,164 +1,163 @@
-import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-a2605a62.js';
-import { F as FilterMode, S as SortDirection } from './types-33d15673.js';
+import { h, F as Fragment, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-96b1af5d.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 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 Invalid = {
+  Term: (value) => typeof value !== 'string' || value.length < 1,
 };
 
-const modes = {
-  [FilterMode.Includes]: (a, b) => a.includes(b),
-  [FilterMode.NotIncludes]: (a, b) => !a.includes(b),
-  [FilterMode.Equals]: (a, b) => a === b,
-  [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 modes = {
+  in: (a, b) => a.includes(b),
+  ni: (a, b) => !a.includes(b),
+  eq: (a, b) => a === b,
+  ne: (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 === 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 === SortDirection.None) {
-        return acc;
-      }
-      const comparator = compare[k];
-      const direction = {
-        [SortDirection.Asc]: +1,
-        [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 unordered = (value) => value === '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 === 'none') {
+        return acc;
+      }
+      const comparator = compare[k];
+      const direction = {
+        asc: +1,
+        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 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 (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) => {
-    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 (h("six-table-cell", { onClick: handleCellClick(item, key), "data-testid": `table-cell-${key}-${index}`, innerHTML: html }));
-    });
-    return (h("six-table-row", { onClick: handleRowClick(item), "data-testid": `table-row-${index}` }, cells));
-  });
-  return (h(Fragment, null,
-    h("six-table-header", { "data-testid": "table-header" }, columns),
-    rows));
+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 (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) => {
+    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 (h("six-table-cell", { onClick: handleCellClick(item, key), "data-testid": `table-cell-${key}-${index}`, innerHTML: html }));
+    });
+    return (h("six-table-row", { onClick: handleRowClick(item), "data-testid": `table-row-${index}` }, cells));
+  });
+  return (h(Fragment, null,
+    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) {
-    registerInstance(this, hostRef);
-    this.tableReady = createEvent(this, "six-table-ready", 7);
-    this.tableRowClicked = createEvent(this, "six-table-row-clicked", 7);
-    this.tableCellClicked = 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 && (h("div", { class: "loading" }, h("six-spinner", { "data-testid": "loading-spinner" })));
-    return (h(Host, null, h("slot", null, fromData(this)), loading));
-  }
-  get host() { return getElement(this); }
-};
+const SixTable = class {
+  handleData({ detail }) {
+    if (!isData(detail)) {
+      return;
+    }
+    this.data = detail;
+  }
+  async setData(value) {
+    if (!isData(value)) {
+      return;
+    }
+    this.data = value;
+  }
+  componentDidLoad() {
+    this.tableReady.emit();
+  }
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tableReady = createEvent(this, "six-table-ready", 7);
+    this.tableRowClicked = createEvent(this, "six-table-row-clicked", 7);
+    this.tableCellClicked = createEvent(this, "six-table-cell-clicked", 7);
+    this.handleRowClick = (item) => (event) => {
+      this.tableRowClicked.emit({ event, item });
+    };
+    this.handleCellClick = (item, key) => (event) => {
+      this.tableCellClicked.emit({ event, item, key });
+    };
+    this.striped = false;
+    this.loading = false;
+    this.data = {
+      columns: {},
+      rows: [],
+    };
+    console.warn('six-table will be removed with the next table. Use fate table instead. In case of any question contact Daniel Häusler');
+  }
+  render() {
+    const loading = this.loading && (h("div", { class: "loading" }, h("six-spinner", { "data-testid": "loading-spinner" })));
+    return (h(Host, null, h("slot", null, fromData(this)), loading));
+  }
+  get host() { return getElement(this); }
+};
 SixTable.style = sixTableCss;
 
 export { SixTable as six_table };
+
+//# sourceMappingURL=six-table.entry.js.map