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

package/dist/collection/components/popover-canvas/popover-canvas.js

@@ -1,190 +0,0 @@
-import { Host, h } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
-export class PopoverCanvas {
-  constructor() {
-    this.selector = '';
-    this.show = false;
-    this.placement = 'auto';
-    this.offsetSkidding = 0;
-    this.offsetDistance = 8;
-    this.target = undefined;
-  }
-  handleOutsideClick() {
-    if (this.show) {
-      this.show = false;
-    }
-  }
-  componentDidLoad() {
-    this.target = document.querySelector(this.selector);
-    const _this = this;
-    createPopper(this.target, this.popoverCanvasElement, {
-      placement: _this.placement,
-      modifiers: [
-        {
-          name: 'positionCalc',
-          enabled: true,
-          phase: 'main',
-          fn({ state }) {
-            console.log('popover fn', state);
-          },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: [this.offsetSkidding, this.offsetDistance],
-          },
-        },
-      ],
-    });
-    const showCanvas = () => {
-      this.show = true;
-    };
-    const hideCanvas = () => {
-      this.show = false;
-    };
-    this.target.addEventListener('mousedown', event => {
-      event.stopPropagation();
-      if (this.show) {
-        hideCanvas();
-      }
-      else {
-        showCanvas();
-      }
-    });
-    this.popoverCanvasElement.addEventListener('mousemove', event => {
-      event.stopPropagation();
-    });
-    this.popoverCanvasElement.addEventListener('mousedown', event => {
-      event.stopPropagation();
-    });
-  }
-  render() {
-    return (h(Host, { class: `sdds-popover-canvas ${this.show ? 'sdds-popover-canvas-show' : ''}` }, h("slot", null)));
-  }
-  static get is() { return "sdds-popover-canvas"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["popover-canvas.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["popover-canvas.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "selector": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The CSS-selector that will trigger this Popover Canvas"
-        },
-        "attribute": "selector",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "show": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Decides if the Popover Canvas should be visible from the start"
-        },
-        "attribute": "show",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Placement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-          "references": {
-            "Placement": {
-              "location": "import",
-              "path": "@popperjs/core"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Decides the placement of the Popover Canvas"
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'auto'"
-      },
-      "offsetSkidding": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets the offset skidding"
-        },
-        "attribute": "offset-skidding",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "offsetDistance": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets the offset distance"
-        },
-        "attribute": "offset-distance",
-        "reflect": false,
-        "defaultValue": "8"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "target": {}
-    };
-  }
-  static get elementRef() { return "popoverCanvasElement"; }
-  static get listeners() {
-    return [{
-        "name": "mousedown",
-        "method": "handleOutsideClick",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}

package/dist/collection/components/popover-menu/popover-menu.css

@@ -1,19 +0,0 @@
-:host {
-  box-sizing: border-box;
-  overflow: hidden;
-  width: 160px;
-  background-color: var(--sdds-popover-bg-default);
-  padding: 16px;
-  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-  display: none;
-  z-index: 20000;
-}
-:host * {
-  box-sizing: border-box;
-}
-
-:host(.sdds-popover-menu-show) {
-  opacity: 1;
-  display: block;
-}

package/dist/collection/components/popover-menu/popover-menu.js

@@ -1,189 +0,0 @@
-import { Host, h } from '@stencil/core';
-import { createPopper } from '@popperjs/core';
-export class PopoverMenu {
-  constructor() {
-    this.selector = '';
-    this.show = false;
-    this.placement = 'auto';
-    this.offsetSkidding = 0;
-    this.offsetDistance = 8;
-    this.target = undefined;
-  }
-  handleOutsideClick() {
-    if (this.show) {
-      this.show = false;
-    }
-  }
-  componentDidLoad() {
-    this.target = document.querySelector(this.selector);
-    const _this = this;
-    createPopper(this.target, this.popoverMenuElement, {
-      strategy: 'fixed',
-      placement: _this.placement,
-      modifiers: [
-        {
-          name: 'positionCalc',
-          enabled: true,
-          phase: 'main',
-          fn({}) { },
-        },
-        {
-          name: 'offset',
-          options: {
-            offset: [this.offsetSkidding, this.offsetDistance],
-          },
-        },
-      ],
-    });
-    const showMenu = () => {
-      this.show = true;
-    };
-    const hideMenu = () => {
-      this.show = false;
-    };
-    this.target.addEventListener('mousedown', event => {
-      event.stopPropagation();
-      if (this.show) {
-        hideMenu();
-      }
-      else {
-        showMenu();
-      }
-    });
-    this.popoverMenuElement.addEventListener('mousemove', event => {
-      event.stopPropagation();
-    });
-    this.popoverMenuElement.addEventListener('mousedown', event => {
-      event.stopPropagation();
-    });
-  }
-  render() {
-    return (h(Host, { class: `sdds-popover-menu ${this.show ? 'sdds-popover-menu-show' : ''}` }, h("slot", null)));
-  }
-  static get is() { return "sdds-popover-menu"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["popover-menu.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["popover-menu.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "selector": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The CSS-selector that will trigger this Popover Menu"
-        },
-        "attribute": "selector",
-        "reflect": false,
-        "defaultValue": "''"
-      },
-      "show": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Decides if the Popover Menu should be visible from the start"
-        },
-        "attribute": "show",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "placement": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "Placement",
-          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-          "references": {
-            "Placement": {
-              "location": "import",
-              "path": "@popperjs/core"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Decides the placement of the Popover Menu"
-        },
-        "attribute": "placement",
-        "reflect": false,
-        "defaultValue": "'auto'"
-      },
-      "offsetSkidding": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets the offset skidding"
-        },
-        "attribute": "offset-skidding",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "offsetDistance": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Sets the offset distance"
-        },
-        "attribute": "offset-distance",
-        "reflect": false,
-        "defaultValue": "8"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "target": {}
-    };
-  }
-  static get elementRef() { return "popoverMenuElement"; }
-  static get listeners() {
-    return [{
-        "name": "mousedown",
-        "method": "handleOutsideClick",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}

package/dist/collection/components/slider/slider.css

@@ -1,260 +0,0 @@
-sdds-slider {
-  box-sizing: border-box;
-  width: 100%;
-  --sdds-slider-inputfield-bg: var(--sdds-white);
-}
-sdds-slider * {
-  box-sizing: border-box;
-}
-sdds-slider input[type=range].sdds-slider-native-element {
-  display: none;
-}
-
-.sdds-slider-wrapper {
-  width: 100%;
-}
-.sdds-slider-wrapper.read-only {
-  pointer-events: none;
-}
-
-.sdds-slider {
-  width: 100%;
-  display: flex;
-  flex-wrap: nowrap;
-  padding-top: 65px;
-}
-.sdds-slider .sdds-slider-inner {
-  width: 100%;
-  height: 20px;
-  position: relative;
-}
-.sdds-slider .sdds-slider__controls {
-  position: relative;
-  top: -25px;
-}
-.sdds-slider .sdds-slider__controls .sdds-slider__control {
-  cursor: pointer;
-}
-.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus {
-  padding: 18px 18px 18px 0;
-}
-.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus {
-  padding: 18px 0 18px 18px;
-}
-.sdds-slider .sdds-slider__input-values {
-  position: relative;
-  top: -25px;
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-}
-.sdds-slider .sdds-slider__input-values .sdds-slider__input-value {
-  user-select: none;
-  padding: 18px;
-  color: var(--sdds-grey-700);
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-}
-.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper {
-  background-color: var(--sdds-slider-inputfield-bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field {
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-grey-700);
-  border: 0;
-  background-color: transparent;
-  text-align: center;
-  padding: 12px;
-  box-shadow: inset 0 -1px 0 var(--sdds-grey-400);
-  border-radius: 4px 4px 0 0;
-}
-.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:hover {
-  box-shadow: inset 0 -1px 0 var(--sdds-grey-600);
-}
-.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:focus {
-  box-shadow: inset 0 -2px 0 var(--sdds-blue-400);
-  outline: 0;
-}
-.sdds-slider label {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  user-select: none;
-  position: absolute;
-  color: var(--sdds-grey-958);
-  top: -16px;
-  transform: translateY(-100%);
-}
-.sdds-slider label.offset {
-  top: -35px;
-}
-.sdds-slider .sdds-slider__value {
-  font: var(--sdds-detail-01);
-  letter-spacing: var(--sdds-detail-01-ls);
-  user-select: none;
-  border-radius: 4px;
-  padding: 8px;
-  position: absolute;
-  transform: translate(-50%, -100%);
-  top: -24px;
-  background-color: var(--sdds-grey-800);
-  color: var(--sdds-white);
-}
-.sdds-slider .sdds-slider__value svg {
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  top: 34px;
-}
-.sdds-slider .sdds-slider__scrubber {
-  position: absolute;
-}
-.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner {
-  width: 20px;
-  height: 20px;
-  border-radius: 100%;
-  background-color: var(--sdds-blue-800);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  cursor: pointer;
-  z-index: 10;
-}
-.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner::before {
-  content: " ";
-  display: none;
-  width: 48px;
-  height: 48px;
-  background-color: var(--sdds-blue-800);
-  position: absolute;
-  border-radius: 100%;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner:hover::before {
-  display: block;
-  opacity: 0.08;
-}
-.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed {
-  width: 24px;
-  height: 24px;
-}
-.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed::before {
-  display: block;
-  opacity: 0.16 !important;
-}
-.sdds-slider .sdds-slider__value-dividers-wrapper {
-  position: relative;
-  width: 100%;
-  pointer-events: none;
-}
-.sdds-slider .sdds-slider__value-dividers {
-  pointer-events: none;
-  position: absolute;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-}
-.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider {
-  transform: translateY(-50%);
-  height: 16px;
-  background-color: var(--sdds-grey-400);
-  width: 1px;
-}
-.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider span {
-  display: block;
-  user-select: none;
-  color: var(-sdds-grey-700);
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  position: relative;
-  top: -7px;
-  left: 50%;
-  transform: translate(-50%, -100%);
-  width: 50px;
-  text-align: center;
-}
-.sdds-slider .sdds-slider__track {
-  width: 100%;
-  height: 2px;
-  border-radius: 1px;
-  background-color: var(--sdds-grey-400);
-  position: relative;
-}
-.sdds-slider .sdds-slider__track:focus {
-  outline: 0;
-}
-.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner {
-  width: 24px;
-  height: 24px;
-}
-.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner::before {
-  display: block;
-  opacity: 0.08;
-}
-.sdds-slider .sdds-slider__track .sdds-slider__track-fill {
-  background-color: var(--sdds-blue-800);
-  border-radius: 2px;
-  height: 4px;
-  position: absolute;
-  left: 0;
-  top: -1px;
-}
-.sdds-slider.disabled {
-  cursor: not-allowed;
-}
-.sdds-slider.disabled > * {
-  pointer-events: none;
-}
-.sdds-slider.disabled label {
-  color: var(--sdds-grey-400);
-}
-.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control {
-  cursor: default;
-}
-.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg path, .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg path {
-  fill: var(--sdds-grey-400);
-}
-.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value {
-  color: var(--sdds-grey-400);
-}
-.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper {
-  pointer-events: none;
-}
-.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field {
-  color: var(--sdds-grey-400);
-  pointer-events: none;
-}
-.sdds-slider.disabled .sdds-slider__value {
-  display: none;
-}
-.sdds-slider.disabled .sdds-slider__track .sdds-slider__track-fill {
-  background-color: var(--sdds-grey-400);
-}
-.sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span {
-  color: var(--sdds-grey-400);
-}
-.sdds-slider.disabled .sdds-slider__scrubber {
-  pointer-events: none;
-}
-.sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner {
-  background: var(--sdds-grey-400);
-  cursor: default;
-}
-.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner {
-  width: 16px;
-  height: 16px;
-}
-.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner::before {
-  width: 40px;
-  height: 40px;
-}
-.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed {
-  width: 20px;
-  height: 20px;
-}