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

package/dist/collection/components/accordion/accordion-item/accordion-item.js

@@ -1,146 +0,0 @@
-import { h, Host } from '@stencil/core';
-export class AccordionItem {
-  constructor() {
-    this.header = '';
-    this.expandIconPosition = 'end';
-    this.disabled = false;
-    this.expanded = false;
-    this.paddingReset = false;
-  }
-  openAccordion() {
-    this.expanded = !this.expanded;
-    this.accordionItemToggle.emit(this.expanded);
-  }
-  render() {
-    return (h(Host, null, h("div", { class: `sdds-accordion-item 
-        ${this.disabled ? 'disabled' : ''} 
-        ${this.expanded ? 'expanded' : ''}
-        ` }, h("div", { class: `sdds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.openAccordion() }, h("div", { class: "sdds-accordion-title" }, this.header), h("div", { class: "sdds-accordion-icon" }, h("sdds-icon", { name: "chevron_down", size: "16px" }))), h("div", { class: `sdds-accordion-panel 
-            ${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}         
-            ` }, h("slot", null)))));
-  }
-  static get is() { return "sdds-accordion-item"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["accordion-item.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["accordion-item.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "header": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The header gives users the context about the additional information available inside the panel"
-        },
-        "attribute": "header",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "expandIconPosition": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'start' | 'end'",
-          "resolved": "\"end\" | \"start\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Changes where the expand icon is placed."
-        },
-        "attribute": "expand-icon-position",
-        "reflect": false,
-        "defaultValue": "'end'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Disabled option in `boolean`."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "expanded": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set to true to expand panel open"
-        },
-        "attribute": "expanded",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "paddingReset": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When true 16px on right padding instead of 64px"
-        },
-        "attribute": "padding-reset",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "accordionItemToggle",
-        "name": "accordionItemToggle",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Fires after the accordion item is closed or opened, emitting the value (as boolean) of the current state of the accordion"
-        },
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        }
-      }];
-  }
-}

package/dist/collection/components/accordion/accordion.css

@@ -1,77 +0,0 @@
-:host {
-  display: block;
-  box-sizing: border-box;
-}
-:host * {
-  box-sizing: border-box;
-}
-:host .sdds-accordion-header-icon-start,
-:host .sdds-accordion-header-icon-end {
-  position: relative;
-}
-:host .sdds-accordion-header-icon-start::after,
-:host .sdds-accordion-header-icon-end::after {
-  content: "";
-  position: absolute;
-  width: 100%;
-  height: 0;
-  left: 0;
-  z-index: 2;
-}
-:host .sdds-accordion-header-icon-start::after,
-:host .sdds-accordion-header-icon-end::after {
-  bottom: -1px;
-  border-bottom: 1px solid transparent;
-}
-
-:host(:focus) {
-  outline: 2px solid var(--sdds-blue-400);
-  outline-offset: -2px;
-}
-:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start,
-:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end {
-  background-color: var(--sdds-accordion-bg-focus);
-  outline: none;
-}
-:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-start::after,
-:host(:focus) .sdds-accordion-item .sdds-accordion-header-icon-end::after {
-  border-color: var(--sdds-accordion-border-focus);
-}
-:host(:focus) .disabled,
-:host(:focus) .disabled * {
-  cursor: not-allowed;
-}
-:host(:focus) .disabled .sdds-accordion-header-icon-start,
-:host(:focus) .disabled .sdds-accordion-header-icon-end {
-  background-color: var(--sdds-accordion-bg);
-  outline: none;
-  pointer-events: none;
-}
-:host(:focus) .disabled .sdds-accordion-header-icon-start::after,
-:host(:focus) .disabled .sdds-accordion-header-icon-end::after {
-  border-color: transparent;
-}
-
-:host(:active) .sdds-accordion-header-icon-start,
-:host(:active) .sdds-accordion-header-icon-end {
-  background-color: var(--sdds-accordion-bg-active);
-  outline: none;
-}
-:host(:active) .disabled,
-:host(:active) .disabled * {
-  cursor: not-allowed;
-}
-:host(:active) .disabled .sdds-accordion-header-icon-start,
-:host(:active) .disabled .sdds-accordion-header-icon-end {
-  background-color: var(--sdds-accordion-bg);
-  outline: none;
-  pointer-events: none;
-}
-:host(:active) .disabled .sdds-accordion-header-icon-start::after,
-:host(:active) .disabled .sdds-accordion-header-icon-end::after {
-  border-color: transparent;
-}
-
-:host(:last-child) {
-  border-bottom: 1px solid var(--sdds-accordion-border);
-}

package/dist/collection/components/accordion/accordion.js

@@ -1,62 +0,0 @@
-import { h, Host } from '@stencil/core';
-export class Accordion {
-  constructor() {
-    this.divider = true;
-    this.modeVariant = 'primary';
-  }
-  render() {
-    return (h(Host, { class: `sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant}` }, h("slot", null)));
-  }
-  static get is() { return "sdds-accordion"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["accordion.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["accordion.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "divider": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Enable or disable divider lines between items"
-        },
-        "attribute": "divider",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "modeVariant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary'",
-          "resolved": "\"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set the variant of the the accordion."
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "'primary'"
-      }
-    };
-  }
-}

package/dist/collection/components/badge/badges.css

@@ -1,42 +0,0 @@
-:host {
-  --sdds-badges-bg-color: var(--sdds-negative);
-  --sdds-badges-color-text: var(--sdds-white);
-  box-sizing: border-box;
-  display: block;
-}
-:host * {
-  box-sizing: border-box;
-}
-
-.sdds-badges {
-  display: block;
-  border-radius: 12px;
-  background-color: var(--sdds-badges-bg-color);
-  text-align: center;
-}
-.sdds-badges.sdds-badges-sm {
-  height: 8px;
-  width: 8px;
-  line-height: 8px;
-}
-.sdds-badges.sdds-badges-lg {
-  height: 20px;
-  line-height: 20px;
-  width: 20px;
-}
-.sdds-badges.sdds-badges-pill {
-  display: inline-block;
-  width: unset;
-  padding-left: 8px;
-  padding-right: 8px;
-}
-.sdds-badges.sdds-badges-hidden {
-  display: none;
-}
-
-.sdds-badges-text {
-  font-family: var(--sdds-font-family-semi-condensed-bold);
-  font-size: 12px;
-  color: var(--sdds-badges-color-text);
-  font-weight: bold;
-}

package/dist/collection/components/badge/badges.js

@@ -1,150 +0,0 @@
-import { h } from '@stencil/core';
-export class SddsBadges {
-  constructor() {
-    this.value = '';
-    this.isVisible = true;
-    this.isSmall = false;
-    this.size = 'lg';
-    this.shape = '';
-    this.text = '';
-  }
-  watchProps() {
-    this.checkProps();
-  }
-  componentWillLoad() {
-    this.checkProps();
-    if (this.isSmall) {
-      this.size = 'sm';
-      console.warn('Prop isSmall is deprecated. Use size"small" instead');
-    }
-  }
-  checkProps() {
-    const valueAsNumber = parseInt(this.value);
-    if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
-      this.shape = this.value.toString().length >= 2 ? 'pill' : '';
-      this.size = 'lg';
-      this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
-    }
-    else {
-      // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
-      this.value !== '' && this.size !== 'sm'
-        ? console.warn('The provided value is either empty or string, please provide value as number.')
-        : '';
-    }
-  }
-  render() {
-    return (h("host", { class: `sdds-badges sdds-badges-${this.size} ${this.shape === 'pill' ? 'sdds-badges-pill' : ''} ${this.isVisible ? '' : 'sdds-badges-hidden'}` }, h("div", { class: "sdds-badges-text" }, this.text)));
-  }
-  static get is() { return "sdds-badges"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["badges.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["badges.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Value shown in badge"
-        },
-        "attribute": "value",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "isVisible": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Changes visibility of badge"
-        },
-        "attribute": "is-visible",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "isSmall": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Use size prop instead. Changes badge from large to small size"
-            }],
-          "text": ""
-        },
-        "attribute": "is-small",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'lg' | 'sm'",
-          "resolved": "\"lg\" | \"sm\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets component size."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "shape": {},
-      "text": {}
-    };
-  }
-  static get watchers() {
-    return [{
-        "propName": "value",
-        "methodName": "watchProps"
-      }, {
-        "propName": "isVisible",
-        "methodName": "watchProps"
-      }, {
-        "propName": "isSmall",
-        "methodName": "watchProps"
-      }, {
-        "propName": "size",
-        "methodName": "watchProps"
-      }];
-  }
-}

package/dist/collection/components/button/button-component.js

@@ -1,154 +0,0 @@
-import { h } from '@stencil/core';
-export class SddsButton {
-  constructor() {
-    this.text = '';
-    this.type = 'primary';
-    this.variant = 'default';
-    this.size = 'lg';
-    this.disabled = false;
-    this.fullbleed = false;
-    this.onlyIcon = false;
-  }
-  componentWillLoad() {
-    if (this.text === '') {
-      this.onlyIcon = true;
-    }
-  }
-  render() {
-    return (h("button", { class: `sdds-btn sdds-btn-${this.type}
-        ${`sdds-btn-${this.size}`}
-        ${this.disabled ? 'disabled' : ''}
-        ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}
-        ${this.variant === 'variant' ? 'sdds-on-white-bg' : ''}
-        ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}` }, h("span", { class: "sdds-btn-text" }, this.text), h("slot", { name: "icon" })));
-  }
-  static get is() { return "sdds-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "text": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Text inside a button"
-        },
-        "attribute": "text",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'primary' | 'secondary' | 'ghost' | 'danger'",
-          "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Type of button"
-        },
-        "attribute": "type",
-        "reflect": false,
-        "defaultValue": "'primary'"
-      },
-      "variant": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'default' | 'variant'",
-          "resolved": "\"default\" | \"variant\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "variant",
-        "reflect": false,
-        "defaultValue": "'default'"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'xs' | 'sm' | 'md' | 'lg'",
-          "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Control for disabled state of component"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "fullbleed": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When enabled, makes button take 100% width"
-        },
-        "attribute": "fullbleed",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "onlyIcon": {}
-    };
-  }
-}