@scania/tegel 0.0.1-beta.6 → 0.0.1-beta.9

package/dist/components/sdds-tooltip.js

@@ -1,116 +0,0 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as createPopper } from './popper.js';
-
-const tooltipCss = ":root,.sdds-theme-light{--sdds-tooltip-background:var(--sdds-grey-800);--sdds-tooltip-color:var(--sdds-white)}.sdds-theme-dark{--sdds-tooltip-background:var(--sdds-grey-200);--sdds-tooltip-color:var(--sdds-grey-958)}.sdds-tooltip{box-sizing:border-box;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-tooltip-color);background-color:var(--sdds-tooltip-background);border-radius:4px;padding:8px;word-wrap:break-word;max-width:192px;z-index:20000;opacity:0;visibility:hidden;transition:opacity 200ms ease-in, visibility 200ms ease-in}.sdds-tooltip *{box-sizing:border-box}.sdds-tooltip.sdds-tooltip-top-left{border-radius:0 4px 4px}.sdds-tooltip.sdds-tooltip-top-right{border-radius:4px 0 4px 4px}.sdds-tooltip.sdds-tooltip-bottom-right{border-radius:4px 4px 0}.sdds-tooltip.sdds-tooltip-bottom-left{border-radius:4px 4px 4px 0}.sdds-tooltip-show{opacity:1;visibility:visible}";
-
-const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.offsetSkidding = 0;
-    this.offsetDistance = 8;
-    this.text = '';
-    this.selector = '';
-    this.mouseOverTooltip = false;
-    this.show = false;
-    this.placement = 'bottom';
-    this.target = undefined;
-  }
-  componentDidLoad() {
-    this.target = document.querySelector(this.selector);
-    const thisValue = this;
-    createPopper(this.target, this.tooltip, {
-      placement: thisValue.placement,
-      modifiers: [
-        {
-          name: 'positionCalc',
-          enabled: true,
-          phase: 'main',
-          fn({ state }) {
-            if (state.placement === 'bottom-start' || state.placement === 'right-start') {
-              thisValue.border = 'top-left';
-            }
-            else if (state.placement === 'bottom-end' || state.placement === 'left-start') {
-              thisValue.border = 'top-right';
-            }
-            else if (state.placement === 'top-end' || state.placement === 'left-end') {
-              thisValue.border = 'bottom-right';
-            }
-            else if (state.placement === 'top-start' || state.placement === 'right-end') {
-              thisValue.border = 'bottom-left';
-            }
-            else if (state.placement === 'bottom' || state.placement === 'top') {
-              thisValue.border = 'default';
-            }
-          },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: [this.offsetSkidding, this.offsetDistance],
-          },
-        },
-      ],
-    });
-    const showTooltip = () => {
-      this.show = true;
-    };
-    const hideTooltip = () => {
-      this.show = false;
-    };
-    // For tabbing over element
-    this.target.addEventListener('focusin', () => {
-      showTooltip();
-    });
-    this.target.addEventListener('focusout', () => {
-      hideTooltip();
-    });
-    // For hovering over element with selector
-    this.target.addEventListener('mouseenter', () => {
-      showTooltip();
-    });
-    this.target.addEventListener('mouseleave', () => {
-      hideTooltip();
-    });
-    // For hovering over tooltip itself:
-    if (this.mouseOverTooltip === true) {
-      this.tooltip.addEventListener('mouseenter', () => {
-        showTooltip();
-      });
-      this.tooltip.addEventListener('mouseleave', () => {
-        hideTooltip();
-      });
-    }
-  }
-  /* Slot on line 118 is added to support adding HTML elements to component */
-  render() {
-    return (h("span", { ref: (el) => (this.tooltip = el), class: `sdds-tooltip sdds-tooltip-${this.border} ${this.show ? 'sdds-tooltip-show' : ''}` }, this.text, h("slot", null)));
-  }
-  static get style() { return tooltipCss; }
-}, [1, "sdds-tooltip", {
-    "text": [1],
-    "selector": [1],
-    "mouseOverTooltip": [4, "mouse-over-tooltip"],
-    "show": [1028],
-    "placement": [1],
-    "target": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-tooltip"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-tooltip":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Tooltip);
-      }
-      break;
-  } });
-}
-
-const SddsTooltip = Tooltip;
-const defineCustomElement = defineCustomElement$1;
-
-export { SddsTooltip, defineCustomElement };

package/dist/components/table-body-cell.js

@@ -1,102 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-
-const tableBodyCellCss = ":host(.sdds-table__body-cell){box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);display:table-cell;box-sizing:border-box;color:var(--sdds-grey-958);padding:var(--sdds-spacing-element-16);min-width:192px;vertical-align:top;background-color:transparent;transition:background-color 200ms ease}:host(.sdds-table__body-cell) *{box-sizing:border-box}:host(.sdds-table__body-cell--no-padding){padding:0}:host(.sdds-table__body-cell--hover){background-color:var(--sdds-grey-200)}:host(.sdds-table__compact){padding:var(--sdds-spacing-element-8) var(--sdds-spacing-element-16)}:host(.sdds-table--divider){border-right:1px solid var(--sdds-grey-400)}:host(.sdds-table--divider:last-of-type){border-right:none}:host(.sdds-table--no-min-width){min-width:unset}";
-
-const relevantTableProps = [
-  'verticalDividers',
-  'compactDesign',
-  'noMinWidth',
-  'whiteBackground',
-];
-const TableBodyCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.cellValue = undefined;
-    this.cellKey = undefined;
-    this.disablePadding = false;
-    this.textAlignState = undefined;
-    this.activeSorting = false;
-    this.verticalDividers = false;
-    this.compactDesign = false;
-    this.noMinWidth = false;
-    this.whiteBackground = false;
-    this.tableId = '';
-  }
-  tablePropsChangedEventListener(event) {
-    if (this.tableId === event.detail.tableId) {
-      event.detail.changed
-        .filter((changedProp) => relevantTableProps.includes(changedProp))
-        .forEach((changedProp) => {
-        if (typeof this[changedProp] === 'undefined') {
-          throw new Error(`Table prop is not supported: ${changedProp}`);
-        }
-        this[changedProp] = event.detail[changedProp];
-      });
-    }
-  }
-  // Listen to headKey from data-table-header-element
-  headCellHoverEventListener(event) {
-    const [receivedID, receivedKeyValue] = event.detail;
-    if (this.tableId === receivedID) {
-      this.activeSorting = this.cellKey === receivedKeyValue;
-    }
-  }
-  // Listen to textAlignEvent from data-table-header-element
-  textAlignEventListener(event) {
-    const [receivedID, receivedKey, receivedTextAlign] = event.detail;
-    if (this.tableId === receivedID) {
-      if (this.cellKey === receivedKey) {
-        this.textAlignState = receivedTextAlign;
-      }
-    }
-  }
-  connectedCallback() {
-    this.tableEl = this.host.closest('sdds-table');
-    this.tableId = this.tableEl.tableId;
-  }
-  componentWillLoad() {
-    relevantTableProps.forEach((tablePropName) => {
-      this[tablePropName] = this.tableEl[tablePropName];
-    });
-  }
-  render() {
-    return (h(Host, { class: {
-        'sdds-table__body-cell': true,
-        'sdds-table__body-cell--hover': this.activeSorting,
-        'sdds-table__compact': this.compactDesign,
-        'sdds-table--divider': this.verticalDividers,
-        'sdds-table--no-min-width': this.noMinWidth,
-        'sdds-table__body-cell--no-padding': this.disablePadding,
-      }, style: { textAlign: this.textAlignState } }, this.cellValue, h("slot", null)));
-  }
-  get host() { return this; }
-  static get style() { return tableBodyCellCss; }
-}, [1, "sdds-body-cell", {
-    "cellValue": [520, "cell-value"],
-    "cellKey": [520, "cell-key"],
-    "disablePadding": [516, "disable-padding"],
-    "textAlignState": [32],
-    "activeSorting": [32],
-    "verticalDividers": [32],
-    "compactDesign": [32],
-    "noMinWidth": [32],
-    "whiteBackground": [32],
-    "tableId": [32]
-  }, [[16, "tablePropsChangedEvent", "tablePropsChangedEventListener"], [16, "headCellHoverEvent", "headCellHoverEventListener"], [16, "textAlignEvent", "textAlignEventListener"]]]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-body-cell"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-body-cell":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TableBodyCell);
-      }
-      break;
-  } });
-}
-
-export { TableBodyCell as T, defineCustomElement as d };

package/dist/components/table-body-row.js

@@ -1,119 +0,0 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const tableBodyRowCss = ":root,.sdds-theme-light{--sdds-checkbox-color:var(--sdds-grey-900);--sdds-checkbox-interaction-01:var(--sdds-blue-800);--sdds-checkbox-interaction-02:var(--sdds-white);--sdds-checkbox-bg-hover:var(--sdds-blue-800);--sdds-checkbox-bg-focus:var(--sdds-blue-800);--sdds-checkbox-disabled:var(--sdds-grey-400);--sdds-checkbox-bg-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-bg-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-500);--sdds-checkbox-color-disabled-after:var(--sdds-grey-500)}:root .sdds-theme-dark,.sdds-theme-light .sdds-theme-dark{--sdds-checkbox-color:var(--sdds-white);--sdds-checkbox-interaction-01:var(--sdds-white);--sdds-checkbox-interaction-02:var(--sdds-grey-958);--sdds-checkbox-bg-hover:white;--sdds-checkbox-bg-focus:white;--sdds-checkbox-disabled:white;--sdds-checkbox-bg-img:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-bg-img-disabled:url(\"data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>\");--sdds-checkbox-border-color-disabled-after:var(--sdds-grey-700);--sdds-checkbox-color-disabled-after:var(--sdds-grey-700)}.sdds-checkbox-item{box-sizing:border-box;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-checkbox-text);display:flex;align-items:center;margin-left:-4px}.sdds-checkbox-item *{box-sizing:border-box}.sdds-checkbox-item .sdds-form-input[type=checkbox]{appearance:none;outline:none;margin:0;border:0;border-radius:2px;width:24px;height:24px;position:relative;cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]+label{color:var(--sdds-checkbox-color);padding-left:var(--sdds-spacing-element-8);padding-top:var(--sdds-spacing-element-4);padding-bottom:var(--sdds-spacing-element-4);cursor:pointer}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{content:\"\";position:absolute;box-sizing:border-box;border-radius:2px}.sdds-checkbox-item .sdds-form-input[type=checkbox]::before{width:24px;height:24px;left:0;top:0}.sdds-checkbox-item .sdds-form-input[type=checkbox]::after{border:1px solid var(--sdds-checkbox-interaction-01);background-color:var(--sdds-checkbox-interaction-02);width:16px;height:16px;left:4px;top:4px}.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before{background-color:var(--sdds-checkbox-bg-hover);opacity:0.12}.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before{background-color:var(--sdds-checkbox-bg-focus);opacity:0.24;animation:cb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled{cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after{border-color:var(--sdds-checkbox-border-color-disabled-after)}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label{color:var(--sdds-grey-600);cursor:not-allowed}.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before{display:none}.sdds-form-input[type=checkbox]:checked::after{background-image:var(--sdds-checkbox-bg-img);background-color:var(--sdds-checkbox-interaction-01);background-repeat:no-repeat;background-position:center}.sdds-form-input[type=checkbox]:checked:disabled:hover::before,.sdds-form-input[type=checkbox]:checked:disabled::before,.sdds-form-input[type=checkbox]:checked.disabled:hover::before,.sdds-form-input[type=checkbox]:checked.disabled::before{display:block;width:16px;height:16px;left:4px;top:4px;border:1px solid #b0b7c4}.sdds-form-input[type=checkbox]:checked:disabled::after,.sdds-form-input[type=checkbox]:checked.disabled::after{background-image:var(--sdds-checkbox-bg-img-disabled);background-color:var(--sdds-checkbox-interaction-02);color:var(--sdds-checkbox-color-disabled-after)}@keyframes cb-focus{0%{transform:scale(0);opacity:0}50%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}:host(.sdds-table__row){box-sizing:border-box;display:table-row;border-bottom:1px solid var(--sdds-grey-400);background-color:var(--sdds-white);transition:background-color 200ms ease}:host(.sdds-table__row) *{box-sizing:border-box}:host(.sdds-table__row) .sdds-table__body-cell--checkbox{min-width:48px;width:48px;padding:0}:host(.sdds-table__row:hover){background-color:var(--sdds-grey-100)}:host(.sdds-table__row--selected){background-color:var(--sdds-grey-300)}:host(.sdds-table__row--selected:hover){background-color:var(--sdds-grey-400)}:host(.sdds-table__row--hidden){display:none}:host(.sdds-table__row--expended){width:100%;background-color:pink}:host .sdds-form-label--data-table{width:100%;height:48px;display:flex;justify-content:center;align-items:center;cursor:pointer}:host(.sdds-table__compact) .sdds-form-label--data-table{height:32px}:host(.sdds-table--divider) .sdds-table__body-cell--checkbox{border-right:1px solid var(--sdds-grey-400)}:host(.sdds-table--on-white-bg){background-color:var(--sdds-grey-50)}:host(.sdds-table--on-white-bg:hover){background-color:var(--sdds-grey-200)}";
-
-const relevantTableProps = [
-  'enableMultiselect',
-  'verticalDividers',
-  'compactDesign',
-  'whiteBackground',
-];
-const TableBodyRow = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.bodyRowToTable = createEvent(this, "bodyRowToTable", 7);
-    this.runPaginationEvent = createEvent(this, "runPaginationEvent", 7);
-    this.enableMultiselect = false;
-    this.bodyCheckBoxStatus = false;
-    this.mainCheckBoxStatus = false;
-    this.verticalDividers = false;
-    this.compactDesign = false;
-    this.noMinWidth = false;
-    this.whiteBackground = false;
-    this.tableId = '';
-  }
-  bodyCheckBoxClicked(event) {
-    const row = this.host;
-    this.bodyCheckBoxStatus = event.currentTarget.checked;
-    if (this.bodyCheckBoxStatus === true) {
-      row.classList.add('sdds-table__row--selected');
-    }
-    else {
-      row.classList.remove('sdds-table__row--selected');
-    }
-    this.bodyRowToTable.emit(this.bodyCheckBoxStatus);
-  }
-  bodyCheckBoxStatusUpdater(status) {
-    this.mainCheckBoxStatus = status;
-    this.bodyCheckBoxStatus = this.mainCheckBoxStatus;
-    const row = this.host;
-    if (this.bodyCheckBoxStatus === true) {
-      row.classList.add('sdds-table__row--selected');
-    }
-    else {
-      row.classList.remove('sdds-table__row--selected');
-    }
-    this.bodyRowToTable.emit(this.bodyCheckBoxStatus);
-  }
-  tablePropsChangedEventListener(event) {
-    if (this.tableId === event.detail.tableId) {
-      event.detail.changed
-        .filter((changedProp) => relevantTableProps.includes(changedProp))
-        .forEach((changedProp) => {
-        if (typeof this[changedProp] === 'undefined') {
-          throw new Error(`Table prop is not supported: ${changedProp}`);
-        }
-        this[changedProp] = event.detail[changedProp];
-      });
-    }
-  }
-  headCheckboxListener(event) {
-    if (this.tableId === event.detail[0]) {
-      this.bodyCheckBoxStatusUpdater(event.detail[1]);
-    }
-  }
-  updateBodyCheckboxesEventListener(event) {
-    const [receivedID, receivedBodyCheckboxStatus] = event.detail;
-    if (this.tableId === receivedID) {
-      this.bodyCheckBoxStatusUpdater(receivedBodyCheckboxStatus);
-    }
-  }
-  connectedCallback() {
-    this.tableEl = this.host.closest('sdds-table');
-    this.tableId = this.tableEl.tableId;
-  }
-  componentWillLoad() {
-    relevantTableProps.forEach((tablePropName) => {
-      this[tablePropName] = this.tableEl[tablePropName];
-    });
-  }
-  componentDidLoad() {
-    this.runPaginationEvent.emit(this.tableId);
-  }
-  render() {
-    return (h(Host, { class: {
-        'sdds-table__row': true,
-        'sdds-table__compact': this.compactDesign,
-        'sdds-table--divider': this.verticalDividers,
-        'sdds-table--on-white-bg': this.whiteBackground,
-      } }, this.enableMultiselect && (h("td", { class: "sdds-table__body-cell sdds-table__body-cell--checkbox" }, h("div", { class: "sdds-checkbox-item" }, h("label", { class: "sdds-form-label sdds-form-label--data-table" }, h("input", { class: "sdds-form-input", type: "checkbox", onChange: (event) => this.bodyCheckBoxClicked(event), checked: this.bodyCheckBoxStatus }))))), h("slot", null)));
-  }
-  get host() { return this; }
-  static get style() { return tableBodyRowCss; }
-}, [1, "sdds-table-body-row", {
-    "enableMultiselect": [32],
-    "bodyCheckBoxStatus": [32],
-    "mainCheckBoxStatus": [32],
-    "verticalDividers": [32],
-    "compactDesign": [32],
-    "noMinWidth": [32],
-    "whiteBackground": [32],
-    "tableId": [32]
-  }, [[16, "tablePropsChangedEvent", "tablePropsChangedEventListener"], [16, "mainCheckboxSelectedEvent", "headCheckboxListener"], [16, "updateBodyCheckboxesEvent", "updateBodyCheckboxesEventListener"]]]);
-function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-table-body-row"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-table-body-row":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TableBodyRow);
-      }
-      break;
-  } });
-}
-
-export { TableBodyRow as T, defineCustomElement as d };