@scania/tegel 0.0.2 → 0.0.32

package/dist/components/sdds-datetime.js

@@ -3,78 +3,78 @@ import { d as defineCustomElement$2 } from './icon.js';
 
 const datetimeCss = ".sdds-datetime-input[type=datetime-local]~.icon-time,.sdds-datetime-input-md[type=datetime-local]~.icon-time,.sdds-datetime-input-sm[type=datetime-local]~.icon-time{display:none}.sdds-datetime-input[type=date]~.icon-time,.sdds-datetime-input-md[type=date]~.icon-time,.sdds-datetime-input-sm[type=date]~.icon-time{display:none}.sdds-datetime-input[type=time]~.icon-datetime-local,.sdds-datetime-input-md[type=time]~.icon-datetime-local,.sdds-datetime-input-sm[type=time]~.icon-datetime-local{display:none}.sdds-datetime-input{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-datetime-color);background-color:var(--sdds-datetime-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-20) var(--sdds-spacing-element-16)}.sdds-datetime-input *{box-sizing:border-box}.sdds-datetime-input::placeholder{opacity:1;color:var(--sdds-datetime-placeholder)}.sdds-datetime-input:focus::placeholder{color:var(--sdds-datetime-placeholder-color-focus)}.sdds-datetime-input:disabled{background-color:var(--sdds-datetime-background-disabled);color:var(--sdds-datetime-color-disabled);cursor:not-allowed}.sdds-datetime-input:disabled::placeholder{color:var(--sdds-datetime-placeholder-disabled)}.sdds-datetime-input:disabled~.sdds-datetime-label-inside{color:var(--sdds-datetime-label-disabled)}.sdds-datetime-input-md{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-datetime-color);background-color:var(--sdds-datetime-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.sdds-datetime-input-md *{box-sizing:border-box}.sdds-datetime-input-md::placeholder{opacity:1;color:var(--sdds-datetime-placeholder)}.sdds-datetime-input-md:focus::placeholder{color:var(--sdds-datetime-placeholder-color-focus)}.sdds-datetime-input-md:disabled{background-color:var(--sdds-datetime-background-disabled);color:var(--sdds-datetime-color-disabled);cursor:not-allowed}.sdds-datetime-input-md:disabled::placeholder{color:var(--sdds-datetime-placeholder-disabled)}.sdds-datetime-input-md:disabled~.sdds-datetime-label-inside{color:var(--sdds-datetime-label-disabled)}.sdds-datetime-input-sm{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-datetime-color);background-color:var(--sdds-datetime-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.sdds-datetime-input-sm *{box-sizing:border-box}.sdds-datetime-input-sm::placeholder{opacity:1;color:var(--sdds-datetime-placeholder)}.sdds-datetime-input-sm:focus::placeholder{color:var(--sdds-datetime-placeholder-color-focus)}.sdds-datetime-input-sm:disabled{background-color:var(--sdds-datetime-background-disabled);color:var(--sdds-datetime-color-disabled);cursor:not-allowed}.sdds-datetime-input-sm:disabled::placeholder{color:var(--sdds-datetime-placeholder-disabled)}.sdds-datetime-input-sm:disabled~.sdds-datetime-label-inside{color:var(--sdds-datetime-label-disabled)}.sdds-datetime-container{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--sdds-datetime-background);border-bottom:1px solid var(--sdds-datetime-border-bottom);transition:border-bottom-color 200ms ease}.sdds-datetime-container:hover{border-bottom-color:var(--sdds-datetime-border-bottom-hover)}.sdds-form-datetime-md .sdds-datetime-container{height:48px}.sdds-form-datetime-sm .sdds-datetime-container{height:40px}.sdds-datetime-input-container{position:relative;width:100%}.sdds-datetime-input-container .datetime-icon{height:20px;width:20px;position:absolute;top:50%;transform:translateY(-50%);right:18px;pointer-events:none}.sdds-datetime-input-container .datetime-icon path{fill:var(--sdds-datetime-icon)}.sdds-datetime-label{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;margin-bottom:var(--sdds-spacing-element-8);color:var(--sdds-datetime-label-color)}.sdds-datetime-label-inside{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);position:absolute;pointer-events:none;color:var(--sdds-datetime-label-inside-color);left:16px}.sdds-form-datetime{display:block;min-width:208px}.sdds-form-datetime-nomin{min-width:auto}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input{padding-top:var(--sdds-spacing-element-24);padding-bottom:15px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input~.sdds-datetime-label-inside{top:20px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input::input-placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input:placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input ::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-datetime-placeholder-color-focus)}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md~.sdds-datetime-label-inside{top:16px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md::input-placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md:placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md ::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-datetime-placeholder-color-focus)}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm~.sdds-datetime-label-inside{top:16px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm::input-placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm:placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm ::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-datetime-placeholder-color-focus)}.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-focus .sdds-datetime-input-sm~.sdds-datetime-label-inside,.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data .sdds-datetime-input-sm~.sdds-datetime-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-focus .sdds-datetime-input-md~.sdds-datetime-label-inside,.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data .sdds-datetime-input-md~.sdds-datetime-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-focus .sdds-datetime-input~.sdds-datetime-label-inside,.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data .sdds-datetime-input~.sdds-datetime-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:12px}.sdds-datetime-bar{position:absolute;width:100%}.sdds-datetime-bar::before,.sdds-datetime-bar::after{content:\"\";height:2px;top:54px;width:0;position:absolute;background:var(--sdds-datetime-bar);transition:0.35s ease all}.sdds-form-datetime-md .sdds-datetime-bar::before,.sdds-form-datetime-md .sdds-datetime-bar::after{top:46px}.sdds-form-datetime-sm .sdds-datetime-bar::before,.sdds-form-datetime-sm .sdds-datetime-bar::after{top:40px}.sdds-datetime-bar::before{left:50%}.sdds-datetime-bar::after{right:50%}.sdds-datetime-focus .sdds-datetime-bar::before,.sdds-datetime-focus .sdds-datetime-bar::after{width:50%}.sdds-datetime-helper{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;flex-basis:100%;padding-top:var(--sdds-spacing-element-4);color:var(--sdds-datetime-helper)}.sdds-datetime-helper .sdds-helper{display:inline-flex;gap:8px}.sdds-form-datetime-disabled .sdds-datetime-container{border-bottom-color:transparent}.sdds-form-datetime-disabled .datetime-icon svg path{fill:var(--sdds-datetime-icon-disabled)}.sdds-form-datetime-disabled .sdds-datetime-label{color:var(--sdds-datetime-label-disabled);cursor:not-allowed}.sdds-form-datetime-success .sdds-datetime-container{border-bottom-color:var(--sdds-datetime-border-bottom-success);color:var(--sdds-datetime-color-success)}.sdds-form-datetime-success .sdds-datetime-bar::before,.sdds-form-datetime-success .sdds-datetime-bar::after{background:var(--sdds-datetime-bar-sucess)}.sdds-form-datetime-error .sdds-datetime-helper{color:var(--sdds-datetime-helper-error)}.sdds-form-datetime-error .sdds-datetime-container{border-bottom-color:var(--sdds-datetime-border-bottom-error)}.sdds-form-datetime-error .sdds-datetime-bar::before,.sdds-form-datetime-error .sdds-datetime-bar::after{background:var(--sdds-datetime-bar-error)}.sdds-form-datetime-error .datetime-icon path{fill:var(--sdds-datetime-icon-error)}.sdds-datetime-textcounter{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-datetime-textcounter);float:right}.sdds-datetime-textcounter .sdds-datetime-textcounter-divider{letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-datetime-textcounter-divider)}input[type=datetime-local]::-webkit-inner-spin-button,input[type=datetime-local]::-webkit-calendar-picker-indicator{opacity:0}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{opacity:0}input[type=time]::-webkit-inner-spin-button,input[type=time]::-webkit-calendar-picker-indicator{opacity:0}.sdds-mode-variant-primary{--sdds-datetime-background:var(--sdds-datetime-background-primary)}.sdds-mode-variant-secondary{--sdds-datetime-background:var(--sdds-datetime-background-secondary)}";
 
-const Datetime = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.customChange = createEvent(this, "customChange", 7);
-    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.defaultValue = 'none';
-    this.disabled = false;
-    this.size = '';
-    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;
-  }
-  // Data input event in value prop
-  handleInput(e) {
-    this.value = e.target.value;
-  }
-  // Change event isn't a composed:true by default in for input
-  handleChange(e) {
-    this.customChange.emit(e);
-  }
-  /** Set the input as focus when clicking the whole datetime with suffix/prefix */
-  handleFocusClick() {
-    this.textInput.focus();
-  }
-  render() {
-    let className = ' sdds-datetime-input';
-    if (this.size === 'md') {
-      className += `${className}-md`;
-    }
-    if (this.size === 'sm') {
-      className += `${className}-sm`;
-    }
+const Datetime = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.customChange = createEvent(this, "customChange", 7);
+    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.defaultValue = 'none';
+    this.disabled = false;
+    this.size = '';
+    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;
+  }
+  // Data input event in value prop
+  handleInput(e) {
+    this.value = e.target.value;
+  }
+  // Change event isn't a composed:true by default in for input
+  handleChange(e) {
+    this.customChange.emit(e);
+  }
+  /** Set the input as focus when clicking the whole datetime with suffix/prefix */
+  handleFocusClick() {
+    this.textInput.focus();
+  }
+  render() {
+    let className = ' sdds-datetime-input';
+    if (this.size === 'md') {
+      className += `${className}-md`;
+    }
+    if (this.size === 'sm') {
+      className += `${className}-sm`;
+    }
     return (h("div", { class: `
         ${this.noMinWidth ? 'sdds-form-datetime-nomin' : ''}
         ${this.focusInput ? 'sdds-form-datetime sdds-datetime-focus' : ' sdds-form-datetime'}
@@ -82,48 +82,51 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         ${this.disabled ? 'sdds-form-datetime-disabled' : ''}
         ${this.size === 'md' ? 'sdds-form-datetime-md' : ''}
         ${this.size === 'sm' ? 'sdds-form-datetime-sm' : ''}
-        ${this.state === 'error' || this.state === 'success'
-        ? `sdds-form-datetime-${this.state}`
+        ${this.state === 'error' || this.state === 'success'
+        ? `sdds-form-datetime-${this.state}`
         : ''}
         ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
-        ` }, this.label && h("div", { class: "sdds-datetime-label" }, this.label), h("div", { onClick: () => this.handleFocusClick(), 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), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z", fill: "currentColor" }))), h("div", { class: "datetime-icon icon-time" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { d: "M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z", fill: "currentColor" })))), 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)))));
-  }
-  static get style() { return datetimeCss; }
-}, [1, "sdds-datetime", {
-    "type": [513],
-    "value": [513],
-    "defaultValue": [1, "default-value"],
-    "disabled": [4],
-    "size": [1],
-    "noMinWidth": [4, "no-min-width"],
-    "modeVariant": [1, "mode-variant"],
-    "name": [1],
-    "state": [1],
-    "autofocus": [4],
-    "label": [1],
-    "helper": [1],
-    "focusInput": [32]
-  }, [[0, "focus", "handleFocusIn"], [0, "focusout", "handleFocusOut"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-datetime", "sdds-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-datetime":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Datetime);
-      }
-      break;
-    case "sdds-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+        ` }, this.label && h("div", { class: "sdds-datetime-label" }, this.label), h("div", { onClick: () => this.handleFocusClick(), 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), onChange: (e) => this.handleChange(e) }), h("div", { class: "datetime-icon icon-datetime-local" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z", fill: "currentColor" }))), h("div", { class: "datetime-icon icon-time" }, h("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { d: "M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z", fill: "currentColor" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z", fill: "currentColor" })))), 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)))));
+  }
+  static get style() { return datetimeCss; }
+}, [1, "sdds-datetime", {
+    "type": [513],
+    "value": [513],
+    "defaultValue": [1, "default-value"],
+    "disabled": [4],
+    "size": [1],
+    "noMinWidth": [4, "no-min-width"],
+    "modeVariant": [1, "mode-variant"],
+    "name": [1],
+    "state": [1],
+    "autofocus": [4],
+    "label": [1],
+    "helper": [1],
+    "focusInput": [32]
+  }, [[0, "focus", "handleFocusIn"], [0, "focusout", "handleFocusOut"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-datetime", "sdds-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-datetime":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Datetime);
+      }
+      break;
+    case "sdds-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
 }
+defineCustomElement$1();
 
 const SddsDatetime = Datetime;
 const defineCustomElement = defineCustomElement$1;
 
 export { SddsDatetime, defineCustomElement };
+
+//# sourceMappingURL=sdds-datetime.js.map

package/dist/components/sdds-datetime.js.map

@@ -0,0 +1 @@
+{"file":"sdds-datetime.js","mappings":"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","names":[],"sources":["./src/components/datetime/datetime.scss?tag=sdds-datetime&encapsulation=shadow","./src/components/datetime/datetime.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@mixin datetime-base {\n  @include sdds-box-sizing;\n\n  border-radius: 4px 4px 0 0;\n  width: 100%;\n  box-sizing: border-box;\n  margin: 0;\n  border: none;\n  outline: none;\n  height: 100%;\n  color: var(--sdds-datetime-color);\n  background-color: var(--sdds-datetime-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-datetime-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-datetime-placeholder-color-focus);\n  }\n\n  &:disabled {\n    background-color: var(--sdds-datetime-background-disabled);\n    color: var(--sdds-datetime-color-disabled);\n    cursor: not-allowed;\n\n    &::placeholder {\n      color: var(--sdds-datetime-placeholder-disabled);\n    }\n\n    ~ .sdds-datetime-label-inside {\n      color: var(--sdds-datetime-label-disabled);\n    }\n  }\n}\n\n// icons\n\n.sdds-datetime-input,\n.sdds-datetime-input-md,\n.sdds-datetime-input-sm {\n  &[type='datetime-local'] {\n    ~ .icon-time {\n      display: none;\n    }\n  }\n\n  &[type='date'] {\n    ~ .icon-time {\n      display: none;\n    }\n  }\n\n  &[type='time'] {\n    ~ .icon-datetime-local {\n      display: none;\n    }\n  }\n}\n\n//Sizes\n.sdds-datetime-input {\n  @include datetime-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-md {\n  @include datetime-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-sm {\n  @include datetime-base;\n\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  padding: var(--sdds-spacing-element-16);\n}\n\n//Container for input field and prefix/suffix\n.sdds-datetime-container {\n  border-radius: 4px 4px 0 0;\n  display: flex;\n  position: relative;\n  height: 56px;\n  box-sizing: border-box;\n  background-color: var(--sdds-datetime-background);\n  border-bottom: 1px solid var(--sdds-datetime-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  &:hover {\n    border-bottom-color: var(--sdds-datetime-border-bottom-hover);\n  }\n\n  .sdds-form-datetime-md & {\n    height: 48px;\n  }\n\n  .sdds-form-datetime-sm & {\n    height: 40px;\n  }\n}\n\n.sdds-datetime-input-container {\n  position: relative;\n  width: 100%;\n\n  .datetime-icon {\n    height: 20px;\n    width: 20px;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 18px;\n    pointer-events: none;\n\n    path {\n      fill: var(--sdds-datetime-icon);\n    }\n  }\n}\n\n.sdds-datetime-label {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-datetime-label-color);\n}\n\n.sdds-datetime-label-inside {\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  position: absolute;\n  pointer-events: none;\n  color: var(--sdds-datetime-label-inside-color);\n  left: 16px;\n}\n\n@mixin placeholder-label {\n  &::placeholder {\n    color: transparent;\n  }\n\n  &::input-placeholder {\n    color: transparent;\n  }\n\n  &:placeholder {\n    color: transparent;\n  }\n\n  ::placeholder {\n    color: transparent;\n  }\n\n  //Input field in focus\n  &:focus::placeholder {\n    transition: color 0.35s ease;\n    color: var(--sdds-datetime-placeholder-color-focus);\n  }\n}\n\n@mixin label-inside-transition {\n  transition: 0.1s ease all;\n}\n\n//Form control\n.sdds-form-datetime {\n  display: block;\n  min-width: 208px;\n\n  &-nomin {\n    min-width: auto;\n  }\n}\n\n//datetime container with label inside\n//Handling position, focus and transition for label inside\n.sdds-form-datetime.sdds-datetime-container-label-inside {\n  .sdds-datetime-input {\n    padding-top: var(--sdds-spacing-element-24);\n    padding-bottom: 15px;\n\n    ~ .sdds-datetime-label-inside {\n      top: 20px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .sdds-datetime-input-md {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .sdds-datetime-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .sdds-datetime-input-sm {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .sdds-datetime-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  &.sdds-datetime-focus,\n  &.sdds-datetime-data {\n    .sdds-datetime-input-sm ~ .sdds-datetime-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .sdds-datetime-input-md ~ .sdds-datetime-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .sdds-datetime-input ~ .sdds-datetime-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n      @include label-inside-transition;\n\n      top: 12px;\n    }\n  }\n}\n\n//datetime bottom bar when in focus\n.sdds-datetime-bar {\n  position: absolute;\n  width: 100%;\n\n  &::before,\n  &::after {\n    content: '';\n    height: 2px;\n    top: 54px;\n    width: 0;\n    position: absolute;\n    background: var(--sdds-datetime-bar);\n    transition: 0.35s ease all;\n\n    .sdds-form-datetime-md & {\n      top: 46px;\n    }\n\n    .sdds-form-datetime-sm & {\n      top: 40px;\n    }\n  }\n\n  &::before {\n    left: 50%;\n  }\n\n  &::after {\n    right: 50%;\n  }\n\n  .sdds-datetime-focus &::before,\n  .sdds-datetime-focus &::after {\n    width: 50%;\n  }\n}\n\n//Helper text\n.sdds-datetime-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  flex-basis: 100%;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-datetime-helper);\n\n  .sdds-helper {\n    display: inline-flex;\n    gap: 8px;\n  }\n}\n\n//Disabled state\n.sdds-form-datetime-disabled {\n  .sdds-datetime-container {\n    border-bottom-color: transparent;\n  }\n\n  .datetime-icon {\n    svg {\n      path {\n        fill: var(--sdds-datetime-icon-disabled);\n      }\n    }\n  }\n\n  .sdds-datetime-label {\n    color: var(--sdds-datetime-label-disabled);\n    cursor: not-allowed;\n  }\n}\n\n//Success state\n.sdds-form-datetime-success {\n  .sdds-datetime-container {\n    border-bottom-color: var(--sdds-datetime-border-bottom-success);\n    color: var(--sdds-datetime-color-success);\n  }\n\n  .sdds-datetime-bar {\n    &::before,\n    &::after {\n      background: var(--sdds-datetime-bar-sucess);\n    }\n  }\n}\n\n//Error State\n.sdds-form-datetime-error {\n  .sdds-datetime-helper {\n    color: var(--sdds-datetime-helper-error);\n  }\n\n  .sdds-datetime-container {\n    border-bottom-color: var(--sdds-datetime-border-bottom-error);\n  }\n\n  .sdds-datetime-bar {\n    &::before,\n    &::after {\n      background: var(--sdds-datetime-bar-error);\n    }\n  }\n  .datetime-icon path {\n    fill: var(--sdds-datetime-icon-error);\n  }\n}\n\n.sdds-datetime-textcounter {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-datetime-textcounter);\n  float: right;\n\n  & .sdds-datetime-textcounter-divider {\n    // font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    color: var(--sdds-datetime-textcounter-divider);\n  }\n}\n\n/* datetime picker icon remove testing */\n\ninput[type='datetime-local']::-webkit-inner-spin-button,\ninput[type='datetime-local']::-webkit-calendar-picker-indicator {\n  opacity: 0;\n}\n\ninput[type='date']::-webkit-inner-spin-button,\ninput[type='date']::-webkit-calendar-picker-indicator {\n  opacity: 0;\n}\n\ninput[type='time']::-webkit-inner-spin-button,\ninput[type='time']::-webkit-calendar-picker-indicator {\n  opacity: 0;\n}\n.sdds-mode-variant-primary {\n  --sdds-datetime-background: var(--sdds-datetime-background-primary);\n}\n.sdds-mode-variant-secondary {\n  --sdds-datetime-background: var(--sdds-datetime-background-secondary);\n}\n","import { Component, State, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-datetime',\n  styleUrl: 'datetime.scss',\n  shadow: true,\n})\nexport class Datetime {\n  /** Textinput for focus state */\n  textInput?: HTMLInputElement;\n\n  /** Which input type, text, password or similar */\n  @Prop({ reflect: true }) type: 'datetime-local' | 'date' | 'time' = 'datetime-local';\n\n  /** Value of the input text */\n  @Prop({ reflect: true }) value = '';\n\n  /** Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM */\n  @Prop() defaultValue: string | 'none' = 'none';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Size of the input */\n  @Prop() size: 'sm' | 'md' | '' = '';\n\n  /** With setting */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Set the variant of the the datetime component. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Name property */\n  @Prop() name = '';\n\n  /** Error state of input */\n  @Prop() state: string;\n\n  /** Autofocus for input */\n  @Prop() autofocus: boolean = false;\n\n  /** Label text for the component */\n  @Prop() label: string = '';\n\n  /** Helper text for the component */\n  @Prop() helper: string = '';\n\n  /** Listen to the focus state of the input */\n  @State() focusInput: boolean;\n\n  /** Change event for the datetime */\n  @Event({\n    composed: true,\n    bubbles: true,\n    cancelable: true,\n  })\n  customChange: EventEmitter;\n\n  getDefaultValue = () => {\n    const dateTimeObj = {\n      year: this.defaultValue.slice(0, 4),\n      month: this.defaultValue.slice(5, 7),\n      day: this.defaultValue.slice(8, 10),\n      hours: this.defaultValue.slice(11, 13),\n      minutes: this.defaultValue.slice(14, 16),\n    };\n    switch (this.type) {\n      case 'datetime-local':\n        return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;\n      case 'date':\n        return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;\n      case 'time':\n        return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;\n      default:\n        throw new Error('Invalid type.');\n    }\n  };\n\n  componentWillLoad() {\n    if (this.defaultValue !== 'none') {\n      this.value = this.getDefaultValue();\n    }\n  }\n\n  // Listener if input enters focus state\n  @Listen('focus')\n  handleFocusIn() {\n    this.focusInput = true;\n  }\n\n  // Listener if input leaves focus state\n  @Listen('focusout')\n  handleFocusOut() {\n    this.focusInput = false;\n  }\n\n  // Data input event in value prop\n  handleInput(e): void {\n    this.value = e.target.value;\n  }\n\n  // Change event isn't a composed:true by default in for input\n  handleChange(e: Event): void {\n    this.customChange.emit(e);\n  }\n\n  /** Set the input as focus when clicking the whole datetime with suffix/prefix */\n  handleFocusClick(): void {\n    this.textInput.focus();\n  }\n\n  render() {\n    let className = ' sdds-datetime-input';\n    if (this.size === 'md') {\n      className += `${className}-md`;\n    }\n    if (this.size === 'sm') {\n      className += `${className}-sm`;\n    }\n    return (\n      <div\n        class={`\n        ${this.noMinWidth ? 'sdds-form-datetime-nomin' : ''}\n        ${this.focusInput ? 'sdds-form-datetime sdds-datetime-focus' : ' sdds-form-datetime'}\n        ${this.value.length > 0 ? 'sdds-datetime-data' : ''}\n        ${this.disabled ? 'sdds-form-datetime-disabled' : ''}\n        ${this.size === 'md' ? 'sdds-form-datetime-md' : ''}\n        ${this.size === 'sm' ? 'sdds-form-datetime-sm' : ''}\n        ${\n          this.state === 'error' || this.state === 'success'\n            ? `sdds-form-datetime-${this.state}`\n            : ''\n        }\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}\n        `}\n      >\n        {this.label && <div class=\"sdds-datetime-label\">{this.label}</div>}\n        <div\n          onClick={() => this.handleFocusClick()}\n          class=\"sdds-datetime-container sdds-datetime-container\"\n        >\n          <div class=\"sdds-datetime-input-container\">\n            <input\n              ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n              class={className}\n              type={this.type}\n              disabled={this.disabled}\n              value={this.value}\n              autofocus={this.autofocus}\n              name={this.name}\n              onInput={(e) => this.handleInput(e)}\n              onChange={(e) => this.handleChange(e)}\n            />\n\n            <div class=\"datetime-icon icon-datetime-local\">\n              <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n\n            <div class=\"datetime-icon icon-time\">\n              <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n                <path\n                  d=\"M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z\"\n                  fill=\"currentColor\"\n                />\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </div>\n          </div>\n          <div class=\"sdds-datetime-bar\"></div>\n        </div>\n\n        <div class=\"sdds-datetime-helper\">\n          {this.helper && (\n            <div class=\"sdds-helper\">\n              {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n              {this.helper}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}