@scania/tegel 0.0.7 → 0.0.9

package/dist/collection/components/datetime/datetime.js

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-export class Datetime {
+export class TdsDatetime {
   constructor() {
     this.getDefaultValue = () => {
       const dateTimeObj = {
@@ -50,24 +50,24 @@ export class Datetime {
   // Data input event in value prop
   handleInput(e) {
     this.value = e.target.value;
-    this.sddsChange.emit(e);
+    this.tdsChange.emit(e);
   }
   // Change event isn't a composed:true by default in for input
   handleChange(e) {
-    this.sddsChange.emit(e);
+    this.tdsChange.emit(e);
   }
-  /** Set the input as focus when clicking the whole datetime with suffix/prefix */
+  /** Set the input as focus when clicking the whole Datetime with suffix/prefix */
   handleFocusClick(e) {
     this.textInput.focus();
-    this.sddsFocus.emit(e);
+    this.tdsFocus.emit(e);
   }
-  /** Set the input as focus when clicking the whole datetime with suffix/prefix */
+  /** Set the input as focus when clicking the whole Datetime with suffix/prefix */
   handleBlur(e) {
     this.textInput.blur();
-    this.sddsBlur.emit(e);
+    this.tdsBlur.emit(e);
   }
   render() {
-    let className = ' sdds-datetime-input';
+    let className = ' tds-datetime-input';
     if (this.size === 'md') {
       className += `${className}-md`;
     }
@@ -75,19 +75,19 @@ export class Datetime {
       className += `${className}-sm`;
     }
     return (h("div", { class: `
-        ${this.noMinWidth ? 'sdds-form-datetime-nomin' : ''}
-        ${this.focusInput ? 'sdds-form-datetime sdds-datetime-focus' : ' sdds-form-datetime'}
-        ${this.value.length > 0 ? 'sdds-datetime-data' : ''}
-        ${this.disabled ? 'sdds-form-datetime-disabled' : ''}
-        ${this.size === 'md' ? 'sdds-form-datetime-md' : ''}
-        ${this.size === 'sm' ? 'sdds-form-datetime-sm' : ''}
+        ${this.noMinWidth ? 'tds-form-datetime-nomin' : ''}
+        ${this.focusInput ? 'tds-form-datetime tds-datetime-focus' : ' tds-form-datetime'}
+        ${this.value.length > 0 ? 'tds-datetime-data' : ''}
+        ${this.disabled ? 'tds-form-datetime-disabled' : ''}
+        ${this.size === 'md' ? 'tds-form-datetime-md' : ''}
+        ${this.size === 'sm' ? 'tds-form-datetime-sm' : ''}
         ${this.state === 'error' || this.state === 'success'
-        ? `sdds-form-datetime-${this.state}`
+        ? `tds-form-datetime-${this.state}`
         : ''}
-        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
-        ` }, this.label && (h("label", { htmlFor: this.name, class: "sdds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "sdds-datetime-container sdds-datetime-container" }, h("div", { class: "sdds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("sdds-icon", { size: "20px", name: "calendar" })), h("div", { class: "datetime-icon icon-time" }, h("sdds-icon", { size: "20px", name: "clock" }))), h("div", { class: "sdds-datetime-bar" })), h("div", { class: "sdds-datetime-helper" }, this.helper && (h("div", { class: "sdds-helper" }, this.state === 'error' && h("sdds-icon", { name: "error", size: "16px" }), this.helper)))));
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}
+        ` }, this.label && (h("label", { htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { class: "tds-datetime-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("tds-icon", { size: "20px", name: "calendar" })), h("div", { class: "datetime-icon icon-time" }, h("tds-icon", { size: "20px", name: "clock" }))), h("div", { class: "tds-datetime-bar" })), h("div", { class: "tds-datetime-helper" }, this.helper && (h("div", { class: "tds-helper" }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper)))));
   }
-  static get is() { return "sdds-datetime"; }
+  static get is() { return "tds-datetime"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
@@ -221,7 +221,7 @@ export class Datetime {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set the variant of the datetime component."
+          "text": "Set the variant of the Datetime component."
         },
         "attribute": "mode-variant",
         "reflect": false,
@@ -325,14 +325,14 @@ export class Datetime {
   }
   static get events() {
     return [{
-        "method": "sddsChange",
-        "name": "sddsChange",
+        "method": "tdsChange",
+        "name": "tdsChange",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Change event for the datetime"
+          "text": "Change event for the Datetime"
         },
         "complexType": {
           "original": "any",
@@ -340,14 +340,14 @@ export class Datetime {
           "references": {}
         }
       }, {
-        "method": "sddsBlur",
-        "name": "sddsBlur",
+        "method": "tdsBlur",
+        "name": "tdsBlur",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Blur event for the datetime"
+          "text": "Blur event for the Datetime"
         },
         "complexType": {
           "original": "FocusEvent",
@@ -359,14 +359,14 @@ export class Datetime {
           }
         }
       }, {
-        "method": "sddsFocus",
-        "name": "sddsFocus",
+        "method": "tdsFocus",
+        "name": "tdsFocus",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Focus event for the datetime"
+          "text": "Focus event for the Datetime"
         },
         "complexType": {
           "original": "FocusEvent",

package/dist/collection/components/divider/divider.css

@@ -0,0 +1,16 @@
+.divider {
+  box-sizing: border-box;
+}
+.divider * {
+  box-sizing: border-box;
+}
+.divider.horizontal {
+  background-color: var(--tds-divider-background);
+  width: 100%;
+  height: 1px;
+}
+.divider.vertical {
+  background-color: var(--tds-divider-background);
+  height: 100%;
+  width: 1px;
+}

package/dist/collection/components/divider/divider.js

@@ -6,16 +6,16 @@ export class Divider {
   render() {
     return (h(Host, { role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { class: `divider ${this.orientation}` })));
   }
-  static get is() { return "sdds-divider"; }
+  static get is() { return "tds-divider"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["divider-component.scss"]
+      "$": ["divider.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["divider-component.css"]
+      "$": ["divider.css"]
     };
   }
   static get properties() {

package/dist/collection/components/divider/divider.spec.js

@@ -0,0 +1,28 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { Divider } from './divider';
+describe('tds-divider', () => {
+  it('renders a horizontal divider by default', async () => {
+    const page = await newSpecPage({
+      components: [Divider],
+      html: '<tds-divider></tds-divider>',
+      supportsShadowDom: true,
+    });
+    const { root } = page;
+    const divElement = root.shadowRoot.querySelector('div');
+    expect(divElement).not.toBeNull();
+    expect(root.getAttribute('role')).toBe('separator');
+    expect(root.getAttribute('aria-orientation')).toBeFalsy();
+  });
+  it('renders a vertical divider when orientation is set to "vertical"', async () => {
+    const page = await newSpecPage({
+      components: [Divider],
+      html: '<tds-divider orientation="vertical"></tds-divider>',
+      supportsShadowDom: true,
+    });
+    const { root } = page;
+    const divElement = root.shadowRoot.querySelector('div');
+    expect(divElement).not.toBeNull();
+    expect(root.getAttribute('role')).toBe('separator');
+    expect(root.getAttribute('aria-orientation')).toBe('vertical');
+  });
+});

package/dist/collection/components/dropdown/dropdown-filter/dropdown-filter.js

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-export class DropdownFilter {
+export class TdsDropdownFilter {
   constructor() {
     this.dataOptions = [];
     this.filteredContent = [];
@@ -41,8 +41,8 @@ export class DropdownFilter {
     this.selectedOptionState = event.detail.value;
     this.selectedLabel = event.detail.label;
     this.selectedValue = event.detail.value;
-    // Reset list when search is done and user have selected one option
-    // To match with animation time for option list to fadeout first
+    // Reset list when search is done and the user has selected one option
+    // To match with animation time for an option list to fadeout first
     setTimeout(() => {
       this.filteredContent = this.dataOptions;
     }, 200);
@@ -63,23 +63,23 @@ export class DropdownFilter {
     });
   }
   setOptionsContent() {
-    const newList = this.filteredContent.map((obj) => (h("sdds-dropdown-option", { tabindex: "0", value: obj.value, class: `${this.selectedOptionState === obj.value ? 'selected' : ''}` }, obj.label)));
+    const newList = this.filteredContent.map((obj) => (h("tds-dropdown-option", { tabindex: "0", value: obj.value, class: `${this.selectedOptionState === obj.value ? 'selected' : ''}` }, obj.label)));
     if (newList.length > 0) {
       return newList;
     }
-    return (h("sdds-dropdown-option", { tabindex: "-1", value: "no-result", class: "sdds-option--no-result" }, "No result"));
+    return (h("tds-dropdown-option", { tabindex: "-1", value: "no-result", class: "tds-option--no-result" }, "No result"));
   }
-  /** Use this method to reset the dropdown. Then it will go back to its initial state. */
+  /** Use this method to reset the Dropdown. Then it will go back to its initial state. */
   async resetOption() {
     var _a;
     await ((_a = this.dropdownRef) === null || _a === void 0 ? void 0 : _a.resetOption());
   }
   render() {
     return (h(Host, { "selected-value": this.selectedValue, "selected-text": this.selectedLabel, class: `
-      ${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}
-     ` }, h("sdds-dropdown", { ref: (el) => (this.dropdownRef = el), exportparts: "dropdown-filter-disabled", size: this.size, label: this.label, disabled: this.disabled, labelPosition: this.labelPosition, helper: this.helper, state: this.state, placeholder: this.placeholder, defaultOption: this.defaultOption, selectedOption: this.selectedOption, type: "filter", tabindex: this.disabled ? '-1' : null, openDirection: this.openDirection }, this.setOptionsContent())));
+      ${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}
+     ` }, h("tds-dropdown", { ref: (el) => (this.dropdownRef = el), exportparts: "dropdown-filter-disabled", size: this.size, label: this.label, disabled: this.disabled, labelPosition: this.labelPosition, helper: this.helper, state: this.state, placeholder: this.placeholder, defaultOption: this.defaultOption, selectedOption: this.selectedOption, type: "filter", tabindex: this.disabled ? '-1' : null, openDirection: this.openDirection }, this.setOptionsContent())));
   }
-  static get is() { return "sdds-dropdown-filter"; }
+  static get is() { return "tds-dropdown-filter"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -105,7 +105,7 @@ export class DropdownFilter {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Set the variant of the dropdown."
+          "text": "Set the variant of the Dropdown."
         },
         "attribute": "mode-variant",
         "reflect": false,
@@ -123,7 +123,7 @@ export class DropdownFilter {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Placeholder text for dropdown with no selected item"
+          "text": "Placeholder text for Dropdown with no selected item"
         },
         "attribute": "placeholder",
         "reflect": false,
@@ -141,7 +141,7 @@ export class DropdownFilter {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Label for dropdown with no selected item"
+          "text": "Label for Dropdown with no selected item"
         },
         "attribute": "label",
         "reflect": false
@@ -175,7 +175,7 @@ export class DropdownFilter {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Direction that the dropdown will open. Default is auto."
+          "text": "Direction that the Dropdown will open. Default is auto."
         },
         "attribute": "open-direction",
         "reflect": false,
@@ -228,7 +228,7 @@ export class DropdownFilter {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Controls the size of dropdown. 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated"
+          "text": "Controls the size of the Dropdown.\n'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated"
         },
         "attribute": "size",
         "reflect": false,
@@ -300,7 +300,7 @@ export class DropdownFilter {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Add helper text in the bottom of dropdown"
+          "text": "Add helper text in the bottom of Dropdown"
         },
         "attribute": "helper",
         "reflect": false,
@@ -350,7 +350,7 @@ export class DropdownFilter {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "Use this method to reset the dropdown. Then it will go back to its initial state.",
+          "text": "Use this method to reset the Dropdown. Then it will go back to its initial state.",
           "tags": []
         }
       }
@@ -364,13 +364,13 @@ export class DropdownFilter {
   }
   static get listeners() {
     return [{
-        "name": "internalSddsSearch",
+        "name": "internalTdsSearch",
         "method": "updateOptionsContent",
         "target": undefined,
         "capture": false,
         "passive": false
       }, {
-        "name": "internalSddsSelect",
+        "name": "internalTdsSelect",
         "method": "selectOptionHandler",
         "target": undefined,
         "capture": false,

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js

@@ -1,5 +1,5 @@
 import { h, Host, } from '@stencil/core';
-export class DropdownOption {
+export class TdsDropdownOption {
   constructor() {
     this.innerValue = undefined;
     this.selected = false;
@@ -24,13 +24,13 @@ export class DropdownOption {
   componentWillLoad() {
     this.innerValue = this.value;
     this.isMultiSelectOption = this.host
-      .closest('sdds-dropdown')
-      .classList.contains('sdds-dropdown-multiselect');
+      .closest('tds-dropdown')
+      .classList.contains('tds-dropdown-multiselect');
   }
   handleClick(value) {
     if (!this.disabled) {
       const listOptions = value.parent.childNodes;
-      this.internalSddsSelect.emit(value);
+      this.internalTdsSelect.emit(value);
       if (!this.isMultiSelectOption) {
         listOptions.forEach((optionEl) => {
           optionEl.selected = false;
@@ -63,10 +63,10 @@ export class DropdownOption {
         });
       }, class: {
         'selected': this.selected,
-        'sdds-dropdown-option-disabled': this.disabled,
-      }, tabindex: "-1", "aria-disabled": this.disabled }, this.isMultiSelectOption && (h("div", { class: "sdds-checkbox-item sdds-option-checkbox" }, h("label", { class: "sdds-form-label" }, h("input", { class: "sdds-form-input", type: "checkbox", checked: this.selected, disabled: this.disabled })))), h("span", { class: "sdds-option-label" }, h("slot", null)), !this.isMultiSelectOption && (h("span", { class: "sdds-option-checkmark" }, h("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 3L4 6L9 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
+        'tds-dropdown-option-disabled': this.disabled,
+      }, tabindex: "-1", "aria-disabled": this.disabled }, this.isMultiSelectOption && (h("div", { class: "tds-checkbox-item tds-option-checkbox" }, h("tds-checkbox", { checked: this.selected, disabled: this.disabled }))), h("span", { class: "tds-option-label" }, h("slot", null)), !this.isMultiSelectOption && (h("span", { class: "tds-option-checkmark" }, h("svg", { width: "10", height: "7", viewBox: "0 0 10 7", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M1 3L4 6L9 1", stroke: "currentColor", "stroke-width": "1.25", "stroke-linecap": "round", "stroke-linejoin": "round" }))))));
   }
-  static get is() { return "sdds-dropdown-option"; }
+  static get is() { return "tds-dropdown-option"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
@@ -92,7 +92,7 @@ export class DropdownOption {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Selected set to true if selected"
+          "text": "Set to true if selected"
         },
         "attribute": "selected",
         "reflect": false,
@@ -142,23 +142,23 @@ export class DropdownOption {
   }
   static get events() {
     return [{
-        "method": "internalSddsSelect",
-        "name": "internalSddsSelect",
+        "method": "internalTdsSelect",
+        "name": "internalTdsSelect",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [{
               "name": "internal",
-              "text": "Fires on click on one of the dropdown items"
+              "text": "Fires on click on one of the Dropdown items"
             }],
           "text": ""
         },
         "complexType": {
-          "original": "{\n    value: string | number;\n    label: string | number;\n    parent: HTMLSddsDropdownElement;\n  }",
-          "resolved": "{ value: string | number; label: string | number; parent: HTMLSddsDropdownElement; }",
+          "original": "{\n    value: string | number;\n    label: string | number;\n    parent: HTMLTdsDropdownElement;\n  }",
+          "resolved": "{ value: string | number; label: string | number; parent: HTMLTdsDropdownElement; }",
           "references": {
-            "HTMLSddsDropdownElement": {
+            "HTMLTdsDropdownElement": {
               "location": "global"
             }
           }