@progressive-development/pd-forms 0.5.7 → 0.6.0

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
+};

package/dist/pd-select.d.ts

@@ -0,0 +1,14 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseInputElement } from './pd-base-input-element.js';
+import { PdSelectOption } from './types.js';
+export declare class PdSelect extends PdBaseInputElement {
+    values: PdSelectOption[];
+    constructor();
+    static styles: CSSResultGroup;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Empty, reserved for possible future enhancements on keyup for select.
+     */
+    protected _onSelectKeyUp(): void;
+}
+//# sourceMappingURL=pd-select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-select.d.ts","sourceRoot":"","sources":["../src/pd-select.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAE5C,qBACa,QAAS,SAAQ,kBAAkB;IAE9C,MAAM,EAAE,cAAc,EAAE,CAAM;;IAO9B,OAAgB,MAAM,EAAE,cAAc,CA0DpC;IAEO,MAAM;IA6Bf;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,IAAI;CAGjC"}

package/dist/pd-select.js

@@ -1,4 +1,121 @@
-import { PdSelect } from "./src/PdSelect.js";
-if (!customElements.get("pd-select")) {
-  window.customElements.define("pd-select", PdSelect);
-}
+import { css, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { INPUT_TYPE_SELECT } 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;
+};
+let PdSelect = class extends PdBaseInputElement {
+  constructor() {
+    super();
+    this.values = [];
+    this._inputType = INPUT_TYPE_SELECT;
+  }
+  render() {
+    const selectId = `${this.id}Select`;
+    return html`
+      ${this._renderLabel(selectId)}
+      <div class="input ${this.errorMsg.length > 0 ? "error" : ""}">
+        <select
+          id=${selectId}
+          class="input-style select-css ${this.gradient ? "gradient" : ""}"
+          ?disabled=${this.disabled}
+          name=${this.name || this.valueName || this.autoCompleteName}
+          autocomplete=${this.autoCompleteName ?? "off"}
+          @change=${this._onKeyUp}
+          @keyup=${this._onSelectKeyUp}
+          @blur=${this._onBlur}
+        >
+          ${this.values.map(
+      (val) => html`
+              <option value=${val.value} ?selected=${this.value == val.value}>
+                ${val.name}
+              </option>
+            `
+    )}
+        </select>
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+  /**
+   * Empty, reserved for possible future enhancements on keyup for select.
+   */
+  _onSelectKeyUp() {
+  }
+};
+PdSelect.styles = [
+  PdBaseInputElement.styles,
+  css`
+      .select-css {
+        display: block;
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        appearance: none;
+        padding: 5px;
+        background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
+        background-repeat: no-repeat, repeat;
+        background-position:
+          right 0.5em top 50%,
+          0 0;
+        background-size:
+          0.65em auto,
+          100%;
+        max-width: 100%;
+      }
+
+      .select-css::-ms-expand {
+        display: none;
+      }
+
+      .select-css option {
+        font-weight: normal;
+        text-indent: 5px;
+      }
+
+      .gradient {
+        background-image:
+          url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
+          linear-gradient(
+            to bottom,
+            var(--my-background-gradient-color),
+            var(--my-background-color)
+          );
+        background-color: var(--my-background-color);
+      }
+
+      .error .gradient {
+        background-image:
+          url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),
+          linear-gradient(
+            to bottom,
+            var(--my-background-gradient-color) 10%,
+            #f5979b 100%
+          );
+        background-repeat: no-repeat, repeat;
+        background-position:
+          right 0.5em top 50%,
+          0 0;
+        background-size:
+          0.65em auto,
+          100%;
+        background-color: var(--my-error-background-color);
+      }
+    `
+];
+__decorateClass([
+  property({ type: Array })
+], PdSelect.prototype, "values", 2);
+PdSelect = __decorateClass([
+  customElement("pd-select")
+], PdSelect);
+export {
+  PdSelect
+};

package/dist/stories/01_index.stories.d.ts

@@ -0,0 +1,58 @@
+import { StoryObj } from '@storybook/web-components';
+declare const meta: {
+    title: string;
+    argTypes: {
+        backgroundColor: {
+            control: "color";
+        };
+        onClick: {
+            action: string;
+        };
+        size: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+        };
+        gradient: {
+            control: "boolean";
+        };
+        primaryColor: {
+            control: "color";
+        };
+        secondaryColor: {
+            control: "color";
+        };
+        thirdColor: {
+            control: "color";
+        };
+        textColor: {
+            control: "color";
+        };
+        highlightColor: {
+            control: "color";
+        };
+        errorColor: {
+            control: "color";
+        };
+        errorBackgroundColor: {
+            control: "color";
+        };
+        borderRadius: {
+            control: "text";
+        };
+        displayFont: {
+            control: "text";
+        };
+        fontSize: {
+            control: "text";
+        };
+        inputHeigth: {
+            control: "text";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj;
+export declare const FormExamples: Story;
+//# sourceMappingURL=01_index.stories.d.ts.map

package/dist/stories/01_index.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"01_index.stories.d.ts","sourceRoot":"","sources":["../../src/stories/01_index.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEhE,OAAO,iBAAiB,CAAC;AACzB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,iBAAiB,CAAC;AAGzB,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAGtB,eAAO,MAAM,YAAY,EAAE,KAgL1B,CAAC"}