@progressive-development/pd-forms 0.5.7 → 0.6.1

package/dist/pd-input-file.js

@@ -1,4 +1,91 @@
-import { PdInputFile } from "./src/PdInputFile.js";
-if (!customElements.get("pd-input-file")) {
-  window.customElements.define("pd-input-file", PdInputFile);
-}
+import { css, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import "@progressive-development/pd-icon/pd-icon";
+import { PdBaseInputElement } from "./pd-base-input-element.js";
+import { INPUT_TYPE_FILE } from "./pd-base-ui-input.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdInputFile = class extends PdBaseInputElement {
+  constructor() {
+    super();
+    this._inputType = INPUT_TYPE_FILE;
+  }
+  render() {
+    const inputId = `${this.id}Input`;
+    return html`
+      ${this._renderLabel(inputId)}
+      <div class="input ${this.errorMsg.length > 0 ? "error" : ""}">
+        ${this.icon ? html`<pd-icon
+              icon=${this.icon}
+              activeIcon
+              @click=${this._iconClicked}
+            ></pd-icon>` : ""}
+        <input
+          id=${inputId}
+          name=${this.name || this.valueName || this.autoCompleteName}
+          class="input-style ${this.gradient ? "gradient" : ""}"
+          type="file"
+          maxlength=${this.maxlength ?? ""}
+          accept=${this.accept ?? ""}
+          ?disabled=${this.disabled}
+          @keyup=${this._onKeyUp}
+          @blur=${this._onBlur}
+          @change=${this._onChange}
+        />
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+  _onKeyUp(e) {
+    super._onKeyUp(e);
+  }
+  _iconClicked() {
+    this.dispatchEvent(new CustomEvent("input-icon-click"));
+  }
+  _onChange() {
+    this.dispatchEvent(
+      new CustomEvent("file-change", {
+        detail: {
+          files: this.files
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  get files() {
+    var _a, _b;
+    return (_b = (_a = this.shadowRoot) == null ? void 0 : _a.getElementById(`${this.id}Input`)) == null ? void 0 : _b.files;
+  }
+};
+PdInputFile.styles = [
+  PdBaseInputElement.styles,
+  css`
+      * {
+        box-sizing: border-box;
+      }
+    `
+];
+__decorateClass([
+  property({ type: String })
+], PdInputFile.prototype, "icon", 2);
+__decorateClass([
+  property({ type: String })
+], PdInputFile.prototype, "accept", 2);
+__decorateClass([
+  property({ type: Number })
+], PdInputFile.prototype, "maxlength", 2);
+PdInputFile = __decorateClass([
+  customElement("pd-input-file")
+], PdInputFile);
+export {
+  PdInputFile
+};

package/dist/pd-input-time.d.ts

@@ -0,0 +1,10 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseInputElement } from './pd-base-input-element.js';
+export declare class PdInputTime extends PdBaseInputElement {
+    icon?: string;
+    constructor();
+    static get styles(): CSSResultGroup;
+    render(): import('lit-html').TemplateResult<1>;
+    private _iconClicked;
+}
+//# sourceMappingURL=pd-input-time.d.ts.map

package/dist/pd-input-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-input-time.d.ts","sourceRoot":"","sources":["../src/pd-input-time.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAGhE,qBACa,WAAY,SAAQ,kBAAkB;IAEjD,IAAI,CAAC,EAAE,MAAM,CAAC;;IAOd,WAAoB,MAAM,IAAI,cAAc,CAS3C;IAEQ,MAAM;IA4Bf,OAAO,CAAC,YAAY;CAGrB"}

package/dist/pd-input-time.js

@@ -1,4 +1,68 @@
-import { PdInputTime } from "./src/PdInputTime.js";
-if (!customElements.get("pd-input-time")) {
-  window.customElements.define("pd-input-time", PdInputTime);
-}
+import { css, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import "@progressive-development/pd-icon/pd-icon";
+import { PdBaseInputElement } from "./pd-base-input-element.js";
+import { INPUT_TYPE_TIME } from "./pd-base-ui-input.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdInputTime = class extends PdBaseInputElement {
+  constructor() {
+    super();
+    this._inputType = INPUT_TYPE_TIME;
+  }
+  static get styles() {
+    return [
+      PdBaseInputElement.styles,
+      css`
+        * {
+          box-sizing: border-box;
+        }
+      `
+    ];
+  }
+  render() {
+    const inputId = `${this.id}Input`;
+    return html`
+      ${this._renderLabel(inputId)}
+      <div class="input ${this.errorMsg.length > 0 ? "error" : ""}">
+        ${this.icon ? html`<pd-icon
+              icon=${this.icon}
+              activeIcon
+              @click=${this._iconClicked}
+            ></pd-icon>` : ""}
+        <input
+          id=${inputId}
+          name=${this.name || this.valueName || this.autoCompleteName}
+          class="input-style ${this.gradient ? "gradient" : ""}"
+          type="time"
+          .value=${this.value}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          @keyup=${this._onKeyUp}
+          @blur=${this._onBlur}
+        />
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+  _iconClicked() {
+    this.dispatchEvent(new CustomEvent("input-icon-click"));
+  }
+};
+__decorateClass([
+  property({ type: String })
+], PdInputTime.prototype, "icon", 2);
+PdInputTime = __decorateClass([
+  customElement("pd-input-time")
+], PdInputTime);
+export {
+  PdInputTime
+};

package/dist/pd-input.d.ts

@@ -0,0 +1,30 @@
+import { TemplateResult, CSSResultGroup } from 'lit';
+import { PdBaseInputElement } from './pd-base-input-element.js';
+export declare class PdInput extends PdBaseInputElement {
+    /**
+     * Optional icon to display inside input
+     */
+    icon: string;
+    /**
+     * If true, uses input type password
+     */
+    secret: boolean;
+    /**
+     * Minimum length constraint
+     */
+    minlength?: number;
+    /**
+     * Maximum length constraint
+     */
+    maxlength?: number;
+    /**
+     * If true, restricts input to numbers only (legacy, use type="number" langfristig)
+     */
+    onlyNumbers: boolean;
+    constructor();
+    static styles: CSSResultGroup;
+    render(): TemplateResult;
+    protected _onKeyUp(e: KeyboardEvent): void;
+    private _iconClicked;
+}
+//# sourceMappingURL=pd-input.d.ts.map

package/dist/pd-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-input.d.ts","sourceRoot":"","sources":["../src/pd-input.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAa,KAAK,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrE,OAAO,0CAA0C,CAAC;AAGlD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAIhE,qBACa,OAAQ,SAAQ,kBAAkB;IAC7C;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAO;IAEzB;;OAEG;IAEH,WAAW,UAAS;;IAOpB,OAAgB,MAAM,EAAE,cAAc,CAOpC;IAEO,MAAM,IAAI,cAAc;cAmCd,QAAQ,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAYnD,OAAO,CAAC,YAAY;CAKrB"}

package/dist/pd-input.js

@@ -1,4 +1,99 @@
-import { PdInput } from "./src/PdInput.js";
-if (!customElements.get("pd-input")) {
-  window.customElements.define("pd-input", PdInput);
-}
+import { css, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import "@progressive-development/pd-icon/pd-icon";
+import { INPUT_TYPE_TEXT } from "./pd-base-ui-input.js";
+import { PdBaseInputElement } from "./pd-base-input-element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const onlyContainsNumbers = (str) => /^\d+$/.test(str);
+let PdInput = class extends PdBaseInputElement {
+  constructor() {
+    super();
+    this.icon = "";
+    this.secret = false;
+    this.maxlength = 500;
+    this.onlyNumbers = false;
+    this._inputType = INPUT_TYPE_TEXT;
+  }
+  render() {
+    const inputId = `${this.id}Input`;
+    return html`
+      ${this._renderLabel(inputId)}
+      <div class="input ${this.errorMsg.length > 0 ? "error" : ""}">
+        ${this.icon ? html`
+              <pd-icon
+                icon=${this.icon}
+                activeIcon
+                @click=${this._iconClicked}
+              ></pd-icon>
+            ` : ""}
+        <input
+          id=${inputId}
+          name=${this.name || this.valueName || this.autoCompleteName}
+          autocomplete=${this.autoCompleteName ?? "off"}
+          class="input-style ${this.gradient ? "gradient" : ""}"
+          type=${this.secret ? "password" : "text"}
+          placeholder=${this.placeHolder}
+          .value=${this.value}
+          minlength=${this.minlength ?? ""}
+          maxlength=${this.maxlength ?? ""}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          @keyup=${this._onKeyUp}
+          @blur=${this._onBlur}
+        />
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+  _onKeyUp(e) {
+    var _a;
+    if (this.onlyNumbers && ((_a = this._input) == null ? void 0 : _a.value) && !onlyContainsNumbers(this._input.value)) {
+      this._input.value = this._input.value.replace(/\D/g, "");
+    } else {
+      super._onKeyUp(e);
+    }
+  }
+  _iconClicked() {
+    this.dispatchEvent(
+      new CustomEvent("input-icon-click", { bubbles: true, composed: true })
+    );
+  }
+};
+PdInput.styles = [
+  PdBaseInputElement.styles,
+  css`
+      * {
+        box-sizing: border-box;
+      }
+    `
+];
+__decorateClass([
+  property({ type: String })
+], PdInput.prototype, "icon", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdInput.prototype, "secret", 2);
+__decorateClass([
+  property({ type: Number })
+], PdInput.prototype, "minlength", 2);
+__decorateClass([
+  property({ type: Number })
+], PdInput.prototype, "maxlength", 2);
+__decorateClass([
+  property({ type: Boolean })
+], PdInput.prototype, "onlyNumbers", 2);
+PdInput = __decorateClass([
+  customElement("pd-input")
+], PdInput);
+export {
+  PdInput
+};

package/dist/pd-radio-group.d.ts

@@ -0,0 +1,9 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseUIInput } from './pd-base-ui-input.js';
+export declare class PdRadioGroup extends PdBaseUIInput {
+    static styles: CSSResultGroup;
+    firstUpdated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+    private _dispatchValidation;
+}
+//# sourceMappingURL=pd-radio-group.d.ts.map

package/dist/pd-radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-radio-group.d.ts","sourceRoot":"","sources":["../src/pd-radio-group.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,qBACa,YAAa,SAAQ,aAAa;IAC7C,OAAgB,MAAM,EAAE,cAAc,CAmBpC;IAEO,YAAY,IAAI,IAAI;IA4BpB,MAAM;IAgBf,OAAO,CAAC,mBAAmB;CAY5B"}

package/dist/pd-radio-group.js

@@ -1,4 +1,89 @@
-import { PdRadioGroup } from "./src/PdRadioGroup.js";
-if (!customElements.get("pd-radio-group")) {
-  window.customElements.define("pd-radio-group", PdRadioGroup);
-}
+import { css, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { PdBaseUIInput } from "./pd-base-ui-input.js";
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(result) || result;
+  return result;
+};
+let PdRadioGroup = class extends PdBaseUIInput {
+  firstUpdated() {
+    this.addEventListener("field-change", (e) => {
+      const target = e.target;
+      const checkboxes2 = this.querySelectorAll("pd-checkbox");
+      checkboxes2.forEach((el) => {
+        const isActive = el === target;
+        el.value = isActive ? "true" : "false";
+        el.readonly = isActive;
+        if (isActive) {
+          this.value = el.valueName;
+        }
+      });
+      this._dispatchValidation();
+    });
+    const checkboxes = this.querySelectorAll("pd-checkbox");
+    checkboxes.forEach((el) => {
+      if (el.value === "true") {
+        el.readonly = true;
+        this.value = el.valueName;
+      }
+    });
+  }
+  render() {
+    const radioInputId = `${this.id}RadioGroup`;
+    return html`
+      ${this._renderLabel(radioInputId)}
+      <div
+        id=${radioInputId}
+        class="group-style input ${classMap({
+      error: this.errorMsg.length > 0
+    })}"
+      >
+        <slot></slot>
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+  _dispatchValidation() {
+    this.dispatchEvent(
+      new CustomEvent("validate-form", {
+        detail: {
+          singleElement: this,
+          errorMap: /* @__PURE__ */ new Map()
+        },
+        composed: true,
+        bubbles: true
+      })
+    );
+  }
+};
+PdRadioGroup.styles = [
+  PdBaseUIInput.styles,
+  css`
+      .group-style {
+        display: flex;
+        gap: var(--pd-cb-group-gap, 20px);
+        flex-direction: var(--pd-cb-group-direction, row);
+        flex-wrap: wrap;
+        padding: var(--pd-input-label-padding, 0);
+        padding-top: 5px;
+      }
+
+      ::slotted(pd-checkbox) {
+        --pd-cb-border-col-readonly: var(
+          --pd-cb-border-col,
+          var(--pd-default-col)
+        );
+      }
+    `
+];
+PdRadioGroup = __decorateClass([
+  customElement("pd-radio-group")
+], PdRadioGroup);
+export {
+  PdRadioGroup
+};

package/dist/pd-range.d.ts

@@ -0,0 +1,16 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseUIInput } from './pd-base-ui-input.js';
+export declare class PdRange extends PdBaseUIInput {
+    min: number;
+    max: number;
+    step: number;
+    optionValueMapper: Record<string, string>;
+    name: string;
+    protected _input: HTMLInputElement | null | undefined;
+    static styles: CSSResultGroup;
+    constructor();
+    protected firstUpdated(): void;
+    protected _onChange(e: Event): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+//# sourceMappingURL=pd-range.d.ts.map

package/dist/pd-range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pd-range.d.ts","sourceRoot":"","sources":["../src/pd-range.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,EAAE,aAAa,EAAoB,MAAM,uBAAuB,CAAC;AAExE,qBACa,OAAQ,SAAQ,aAAa;IAExC,GAAG,EAAE,MAAM,CAAK;IAGhB,GAAG,EAAE,MAAM,CAAM;IAGjB,IAAI,SAAK;IAGT,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAG/C,IAAI,SAAM;IAGV,SAAS,CAAC,MAAM,EAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;IAEvD,OAAgB,MAAM,EAAE,cAAc,CAqJpC;;cAOiB,YAAY,IAAI,IAAI;IAIvC,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAI1B,MAAM;CA8BhB"}

package/dist/pd-range.js

@@ -1,4 +1,236 @@
-import { PdRange } from "./src/PdRange.js";
-if (!customElements.get("pd-range")) {
-  window.customElements.define("pd-range", PdRange);
-}
+import { css, html } from "lit";
+import { property, state, customElement } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { PdBaseUIInput, INPUT_TYPE_RANGE } from "./pd-base-ui-input.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let PdRange = class extends PdBaseUIInput {
+  constructor() {
+    super();
+    this.min = 0;
+    this.max = 10;
+    this.step = 1;
+    this.optionValueMapper = {};
+    this.name = "";
+    this._inputType = INPUT_TYPE_RANGE;
+  }
+  firstUpdated() {
+    var _a;
+    this._input = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("input");
+  }
+  _onChange(e) {
+    var _a;
+    this._handleChangedValue(((_a = this._input) == null ? void 0 : _a.value) ?? "", e, false);
+  }
+  render() {
+    const inputId = `${this.id}Range`;
+    const labelDetail = this.optionValueMapper[this.value] || this.value;
+    return html`
+      ${this._renderLabel(inputId, labelDetail)}
+      <div class="input-range ${classMap({ error: this.errorMsg.length > 0 })}">
+        <input
+          id=${inputId}
+          name=${this.name || this.valueName || ""}
+          class="input-range-style ${this.gradient ? "gradient" : ""}"
+          type="range"
+          .value=${this.value}
+          ?readonly=${this.readonly}
+          ?disabled=${this.disabled}
+          min=${this.min}
+          max=${this.max}
+          step=${this.step}
+          @change=${this._onChange}
+          @input=${this._onChange}
+        />
+        <div class="ticks ${this.disabled ? "disabled" : "enabled"}">
+          ${Array.from({ length: 5 }).map(
+      () => html`<span class="tick">|</span>`
+    )}
+        </div>
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+};
+PdRange.styles = [
+  PdBaseUIInput.styles,
+  css`
+      :host([disabled]) {
+        --pd-range-bg-col: grey;
+        --pd-range-thumb-col: lightgrey;
+      }
+
+      input[type="range"] {
+        -webkit-appearance: none;
+        width: var(--pd-input-field-width, 250px);
+        background: transparent;
+        background-color: var(--pd-range-bg-col, var(--pd-default-col));
+        padding: 0.5rem;
+        height: var(--pd-input-field-range-height, 1.7rem);
+        box-sizing: border-box;
+        border-radius: 0.75rem;
+      }
+
+      input[type="range"]:focus {
+        outline: none;
+      }
+
+      input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        margin-top: -6px;
+        cursor: pointer;
+        height: 15px;
+        width: 39px;
+        background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
+        border: 1px solid var(--pd-default-dark-col);
+        border-radius: 3px;
+        box-shadow:
+          1px 1px 1px #000000,
+          0px 0px 1px #0d0d0d;
+      }
+
+      input[type="range"]::-moz-range-thumb {
+        cursor: pointer;
+        height: 15px;
+        width: 39px;
+        background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
+        border: 1px solid var(--pd-default-dark-col);
+        border-radius: 3px;
+        box-shadow:
+          1px 1px 1px #000000,
+          0px 0px 1px #0d0d0d;
+      }
+
+      input[type="range"]::-ms-thumb {
+        cursor: pointer;
+        height: 15px;
+        width: 39px;
+        background: var(--pd-range-thumb-col, var(--pd-default-hover-col));
+        border: 1px solid var(--pd-default-dark-col);
+        border-radius: 3px;
+        box-shadow:
+          1px 1px 1px #000000,
+          0px 0px 1px #0d0d0d;
+      }
+
+      input[type="range"]::-webkit-slider-runnable-track {
+        width: 100%;
+        height: 8.4px;
+        cursor: pointer;
+        box-shadow:
+          1px 1px 1px #000000,
+          0px 0px 1px #0d0d0d;
+        background: var(--pd-range-track-col, var(--pd-default-light-col));
+        border: 0.2px solid #010101;
+        border-radius: 0.75rem;
+      }
+
+      input[type="range"]:focus::-webkit-slider-runnable-track {
+        background: var(
+          --pd-range-track-hover-col,
+          var(--pd-default-light-col)
+        );
+        border: 0.2px solid var(--pd-default-hover-col);
+      }
+
+      input[type="range"]::-moz-range-track {
+        width: 100%;
+        height: 8.4px;
+        cursor: pointer;
+        box-shadow:
+          1px 1px 1px #000000,
+          0px 0px 1px #0d0d0d;
+        background: var(--pd-range-track-col, var(--pd-default-light-col));
+        border-radius: 0.75rem;
+        border: 0.2px solid #010101;
+      }
+
+      input[type="range"]::-ms-track {
+        height: 8.4px;
+        width: 100%;
+        cursor: pointer;
+        background: transparent;
+        border-color: transparent;
+        color: transparent;
+        border-width: 16px 0;
+      }
+
+      input[type="range"]::-ms-fill-lower,
+      input[type="range"]::-ms-fill-upper {
+        background: var(--pd-range-track-col, var(--pd-default-light-col));
+        border: 0.2px solid #010101;
+        border-radius: 0.75rem;
+        box-shadow:
+          1px 1px 1px #000000,
+          0px 0px 1px #0d0d0d;
+      }
+
+      input[type="range"]:focus::-ms-fill-lower {
+        background: #3071a9;
+      }
+
+      input[type="range"]:focus::-ms-fill-upper {
+        background: #367ebd;
+      }
+
+      .ticks {
+        display: flex;
+        justify-content: space-between;
+        padding: 10px 30px;
+      }
+
+      .tick {
+        line-height: 5px;
+        height: 5px;
+        margin-top: -13px;
+        font-size: 8pt;
+        font-weight: bolder;
+      }
+
+      .ticks.disabled {
+        color: grey;
+      }
+
+      .ticks.enabled {
+        color: var(--pd-default-col);
+      }
+
+      @media (max-width: 650px) {
+        label {
+          font-size: 12px;
+        }
+      }
+    `
+];
+__decorateClass([
+  property({ type: Number })
+], PdRange.prototype, "min", 2);
+__decorateClass([
+  property({ type: Number })
+], PdRange.prototype, "max", 2);
+__decorateClass([
+  property({ type: Number })
+], PdRange.prototype, "step", 2);
+__decorateClass([
+  property({ type: Object })
+], PdRange.prototype, "optionValueMapper", 2);
+__decorateClass([
+  property({ type: String })
+], PdRange.prototype, "name", 2);
+__decorateClass([
+  state()
+], PdRange.prototype, "_input", 2);
+PdRange = __decorateClass([
+  customElement("pd-range")
+], PdRange);
+export {
+  PdRange
+};