@scania/tegel 1.3.3-event-types.0 → 1.4.0

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

@@ -1,82 +1,82 @@
 import { h } from "@stencil/core";
 export class TdsDatetime {
-  constructor() {
-    this.getDefaultValue = () => {
-      const dateTimeObj = {
-        year: this.defaultValue.slice(0, 4),
-        month: this.defaultValue.slice(5, 7),
-        day: this.defaultValue.slice(8, 10),
-        hours: this.defaultValue.slice(11, 13),
-        minutes: this.defaultValue.slice(14, 16),
-      };
-      switch (this.type) {
-        case 'datetime-local':
-          return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;
-        case 'date':
-          return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;
-        case 'time':
-          return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;
-        default:
-          throw new Error('Invalid type.');
-      }
-    };
-    this.type = 'datetime-local';
-    this.value = '';
-    this.min = undefined;
-    this.max = undefined;
-    this.defaultValue = 'none';
-    this.disabled = false;
-    this.size = 'lg';
-    this.noMinWidth = false;
-    this.modeVariant = null;
-    this.name = '';
-    this.state = undefined;
-    this.autofocus = false;
-    this.label = '';
-    this.helper = '';
-    this.focusInput = undefined;
-  }
-  componentWillLoad() {
-    if (this.defaultValue !== 'none') {
-      this.value = this.getDefaultValue();
+    constructor() {
+        this.getDefaultValue = () => {
+            const dateTimeObj = {
+                year: this.defaultValue.slice(0, 4),
+                month: this.defaultValue.slice(5, 7),
+                day: this.defaultValue.slice(8, 10),
+                hours: this.defaultValue.slice(11, 13),
+                minutes: this.defaultValue.slice(14, 16),
+            };
+            switch (this.type) {
+                case 'datetime-local':
+                    return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;
+                case 'date':
+                    return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;
+                case 'time':
+                    return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;
+                default:
+                    throw new Error('Invalid type.');
+            }
+        };
+        this.type = 'datetime-local';
+        this.value = '';
+        this.min = undefined;
+        this.max = undefined;
+        this.defaultValue = 'none';
+        this.disabled = false;
+        this.size = 'lg';
+        this.noMinWidth = false;
+        this.modeVariant = null;
+        this.name = '';
+        this.state = undefined;
+        this.autofocus = false;
+        this.label = '';
+        this.helper = '';
+        this.focusInput = undefined;
+    }
+    componentWillLoad() {
+        if (this.defaultValue !== 'none') {
+            this.value = this.getDefaultValue();
+        }
+    }
+    // Listener if input enters focus state
+    handleFocusIn() {
+        this.focusInput = true;
+    }
+    // Listener if input leaves focus state
+    handleFocusOut() {
+        this.focusInput = false;
     }
-  }
-  // Listener if input enters focus state
-  handleFocusIn() {
-    this.focusInput = true;
-  }
-  // Listener if input leaves focus state
-  handleFocusOut() {
-    this.focusInput = false;
-  }
-  // Data input event in value prop
-  handleInput(e) {
-    this.value = e.target.value;
-    this.tdsChange.emit(e);
-  }
-  // Change event isn't a composed:true by default in for input
-  handleChange(e) {
-    this.tdsChange.emit(e);
-  }
-  /** Set the input as focus when clicking the whole Datetime with suffix/prefix */
-  handleFocusClick(e) {
-    this.textInput.focus();
-    this.tdsFocus.emit(e);
-  }
-  /** Set the input as focus when clicking the whole Datetime with suffix/prefix */
-  handleBlur(e) {
-    this.textInput.blur();
-    this.tdsBlur.emit(e);
-  }
-  render() {
-    let className = ' tds-datetime-input';
-    if (this.size === 'md') {
-      className += `${className}-md`;
+    // Data input event in value prop
+    handleInput(e) {
+        this.value = e.target.value;
+        this.tdsChange.emit(e);
     }
-    if (this.size === 'sm') {
-      className += `${className}-sm`;
+    // Change event isn't a composed:true by default in for input
+    handleChange(e) {
+        this.tdsChange.emit(e);
     }
-    return (h("div", { class: `
+    /** Set the input as focus when clicking the whole Datetime with suffix/prefix */
+    handleFocusClick(e) {
+        this.textInput.focus();
+        this.tdsFocus.emit(e);
+    }
+    /** Set the input as focus when clicking the whole Datetime with suffix/prefix */
+    handleBlur(e) {
+        this.textInput.blur();
+        this.tdsBlur.emit(e);
+    }
+    render() {
+        let className = ' tds-datetime-input';
+        if (this.size === 'md') {
+            className += `${className}-md`;
+        }
+        if (this.size === 'sm') {
+            className += `${className}-sm`;
+        }
+        return (h("div", { class: `
         ${this.noMinWidth ? 'tds-form-datetime-nomin' : ''}
         ${this.focusInput ? 'tds-form-datetime tds-datetime-focus' : ' tds-form-datetime'}
         ${this.value.length > 0 ? 'tds-datetime-data' : ''}
@@ -84,351 +84,351 @@ export class TdsDatetime {
         ${this.size === 'md' ? 'tds-form-datetime-md' : ''}
         ${this.size === 'sm' ? 'tds-form-datetime-sm' : ''}
         ${this.state === 'error' || this.state === 'success'
-        ? `tds-form-datetime-${this.state}`
-        : ''}
+                ? `tds-form-datetime-${this.state}`
+                : ''}
         ${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, min: this.min, max: this.max, 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" })), this.helper && (h("div", { class: "tds-datetime-helper" }, h("div", { class: "tds-helper" }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper)))));
-  }
-  static get is() { return "tds-datetime"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["datetime.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["datetime.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'datetime-local' | 'date' | 'time'",
-          "resolved": "\"date\" | \"datetime-local\" | \"time\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets input type"
-        },
-        "attribute": "type",
-        "reflect": true,
-        "defaultValue": "'datetime-local'"
-      },
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Value of the input text"
-        },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "''"
-      },
-      "min": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets min value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
-        },
-        "attribute": "min",
-        "reflect": false
-      },
-      "max": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets max value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
-        },
-        "attribute": "max",
-        "reflect": false
-      },
-      "defaultValue": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | 'none'",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM"
-        },
-        "attribute": "default-value",
-        "reflect": false,
-        "defaultValue": "'none'"
-      },
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Set input in disabled state"
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'sm' | 'md' | 'lg'",
-          "resolved": "\"lg\" | \"md\" | \"sm\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size of the input"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "'lg'"
-      },
-      "noMinWidth": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Resets min width rule"
-        },
-        "attribute": "no-min-width",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "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 Datetime component."
-        },
-        "attribute": "mode-variant",
-        "reflect": false,
-        "defaultValue": "null"
-      },
-      "name": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Name property"
-        },
-        "attribute": "name",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "state": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Error state of input"
-        },
-        "attribute": "state",
-        "reflect": false
-      },
-      "autofocus": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Autofocus for input"
-        },
-        "attribute": "autofocus",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Label text for the component"
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "helper": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Helper text for the component"
-        },
-        "attribute": "helper",
-        "reflect": false,
-        "defaultValue": "''"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "focusInput": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "tdsChange",
-        "name": "tdsChange",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Change event for the Datetime"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }, {
-        "method": "tdsBlur",
-        "name": "tdsBlur",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Blur event for the Datetime"
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global",
-              "id": "global::FocusEvent"
-            }
-          }
-        }
-      }, {
-        "method": "tdsFocus",
-        "name": "tdsFocus",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Focus event for the Datetime"
-        },
-        "complexType": {
-          "original": "FocusEvent",
-          "resolved": "FocusEvent",
-          "references": {
-            "FocusEvent": {
-              "location": "global",
-              "id": "global::FocusEvent"
+    }
+    static get is() { return "tds-datetime"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["datetime.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["datetime.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'datetime-local' | 'date' | 'time'",
+                    "resolved": "\"date\" | \"datetime-local\" | \"time\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets input type"
+                },
+                "attribute": "type",
+                "reflect": true,
+                "defaultValue": "'datetime-local'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value of the input text"
+                },
+                "attribute": "value",
+                "reflect": true,
+                "defaultValue": "''"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets min value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
+                },
+                "attribute": "min",
+                "reflect": false
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets max value. Example for different types: datetime=\"2023-01-31T00:00\" date=\"2023-01-01\" time=\"15:00\""
+                },
+                "attribute": "max",
+                "reflect": false
+            },
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | 'none'",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM"
+                },
+                "attribute": "default-value",
+                "reflect": false,
+                "defaultValue": "'none'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set input in disabled state"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the input"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'lg'"
+            },
+            "noMinWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resets min width rule"
+                },
+                "attribute": "no-min-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "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 Datetime component."
+                },
+                "attribute": "mode-variant",
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name property"
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Error state of input"
+                },
+                "attribute": "state",
+                "reflect": false
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Autofocus for input"
+                },
+                "attribute": "autofocus",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the component"
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "helper": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text for the component"
+                },
+                "attribute": "helper",
+                "reflect": false,
+                "defaultValue": "''"
             }
-          }
-        }
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "focus",
-        "method": "handleFocusIn",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "focusout",
-        "method": "handleFocusOut",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
+        };
+    }
+    static get states() {
+        return {
+            "focusInput": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tdsChange",
+                "name": "tdsChange",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Change event for the Datetime"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }, {
+                "method": "tdsBlur",
+                "name": "tdsBlur",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Blur event for the Datetime"
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "tdsFocus",
+                "name": "tdsFocus",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Focus event for the Datetime"
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "focus",
+                "method": "handleFocusIn",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "handleFocusOut",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }