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

package/dist/collection/components/datetime/datetime.css

@@ -1,375 +0,0 @@
-@charset "UTF-8";
-.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-bg);
-  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-focus-color);
-}
-.sdds-datetime-input:disabled {
-  background-color: var(--sdds-datetime-disabled-bg);
-  color: var(--sdds-datetime-disabled-color);
-  cursor: not-allowed;
-}
-.sdds-datetime-input:disabled::placeholder {
-  color: var(--sdds-datetime-disabled-placeholder);
-}
-.sdds-datetime-input:disabled ~  .sdds-datetime-label-inside {
-  color: var(--sdds-datetime-disabled-label);
-}
-
-.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-bg);
-  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-focus-color);
-}
-.sdds-datetime-input-md:disabled {
-  background-color: var(--sdds-datetime-disabled-bg);
-  color: var(--sdds-datetime-disabled-color);
-  cursor: not-allowed;
-}
-.sdds-datetime-input-md:disabled::placeholder {
-  color: var(--sdds-datetime-disabled-placeholder);
-}
-.sdds-datetime-input-md:disabled ~  .sdds-datetime-label-inside {
-  color: var(--sdds-datetime-disabled-label);
-}
-
-.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-bg);
-  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-focus-color);
-}
-.sdds-datetime-input-sm:disabled {
-  background-color: var(--sdds-datetime-disabled-bg);
-  color: var(--sdds-datetime-disabled-color);
-  cursor: not-allowed;
-}
-.sdds-datetime-input-sm:disabled::placeholder {
-  color: var(--sdds-datetime-disabled-placeholder);
-}
-.sdds-datetime-input-sm:disabled ~  .sdds-datetime-label-inside {
-  color: var(--sdds-datetime-disabled-label);
-}
-
-.sdds-datetime-container {
-  border-radius: 4px 4px 0 0;
-  display: flex;
-  position: relative;
-  height: 56px;
-  box-sizing: border-box;
-  background-color: var(--sdds-datetime-bg);
-  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;
-}
-
-slot[name=sdds-label]::slotted(*) {
-  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 ::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-focus-color);
-}
-.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 ::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-focus-color);
-}
-.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 ::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-focus-color);
-}
-.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-form-datetime-disabled .sdds-datetime-container {
-  border-bottom-color: transparent;
-}
-.sdds-form-datetime-disabled .datetime-icon svg path {
-  fill: var(--sdds-datetime-disabled-color);
-}
-.sdds-form-datetime-disabled slot[name=sdds-label]::slotted(*) {
-  color: var(--sdds-datetime-disabled-label);
-  cursor: not-allowed;
-}
-
-.sdds-form-datetime-success .sdds-datetime-container {
-  border-bottom-color: var(--sdds-datetime-border-bottom-success);
-}
-
-.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 slot[name=sdds-prefix]::slotted(sdds-icon),
-.sdds-form-datetime-error slot[name=sdds-suffix]::slotted(sdds-icon) {
-  color: 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);
-}
-
-slot[name=sdds-prefix]::slotted(*),
-slot[name=sdds-suffix]::slotted(*) {
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  align-self: center;
-  color: var(--sdds-datetime-ps-color);
-}
-
-slot[name=sdds-prefix]::slotted(sdds-icon),
-slot[name=sdds-suffix]::slotted(sdds-icon) {
-  font-size: 24px;
-  line-height: 0;
-}
-
-slot[name=sdds-prefix]::slotted(*) {
-  padding-left: var(--sdds-spacing-element-20);
-}
-slot[name=sdds-prefix]::slotted(*) ~ .sdds-datetime-input  {
-  padding-left: var(--sdds-spacing-element-12);
-}
-
-slot[name=sdds-suffix]::slotted(*) {
-  padding-right: var(--sdds-spacing-element-20);
-}
-
-/* datetime picker icon remove testing */
-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;
-}

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

@@ -1,251 +0,0 @@
-import { h } from '@stencil/core';
-export class Datetime {
-  constructor() {
-    this.type = 'text';
-    this.value = '';
-    this.disabled = false;
-    this.size = '';
-    this.noMinWidth = false;
-    this.name = '';
-    this.state = undefined;
-    this.autofocus = false;
-    this.focusInput = undefined;
-  }
-  // 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'}
-        ${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.state === 'error' || this.state === 'success'
-        ? `sdds-form-datetime-${this.state}`
-        : ''}
-        ` }, h("slot", { name: "sdds-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" }, h("slot", { name: "sdds-helper" }))));
-  }
-  static get is() { return "sdds-datetime"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["datetime.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["datetime.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "type": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Which input type, text, password or similar"
-        },
-        "attribute": "type",
-        "reflect": true,
-        "defaultValue": "'text'"
-      },
-      "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": "''"
-      },
-      "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' | ''",
-          "resolved": "\"\" | \"md\" | \"sm\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Size of the input"
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "noMinWidth": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "With setting"
-        },
-        "attribute": "no-min-width",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "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"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "focusInput": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "customChange",
-        "name": "customChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Change event for the datetime"
-        },
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        }
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "focus",
-        "method": "handleFocusIn",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "focusout",
-        "method": "handleFocusOut",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
-}