@progressive-development/pd-forms 0.8.7 → 0.9.2

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

@@ -1,13 +1,2 @@
-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 _onInternalBlur;
-    private _onInternalFocus;
-    private _onInternalChange;
-    private _onInternalRegister;
-    private _onInternalUnRegister;
-}
-//# sourceMappingURL=pd-radio-group.d.ts.map
+export * from './pd-radio-group/pd-radio-group'
+export {}

package/dist/pd-radio-group.js

@@ -1,114 +1,8 @@
-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("pd-form-element-register", this._onInternalRegister);
-    this.addEventListener("pd-form-element-change", this._onInternalChange);
-    this.addEventListener("pd-form-element-focus", this._onInternalFocus);
-    this.addEventListener("pd-form-element-blur", this._onInternalBlur);
-    super.firstUpdated();
-  }
-  render() {
-    const radioInputId = `${this.id}RadioGroup`;
-    return html`
-      ${this._renderLabel(radioInputId)}
-      <div
-        id=${radioInputId}
-        class="${classMap(
-      this.getClassmap({
-        "group-style": true,
-        input: true
-      })
-    )}"
-      >
-        <slot></slot>
-      </div>
-      ${this._renderErrorMsg()}
-    `;
-  }
-  _onInternalBlur(e) {
-    e.stopPropagation();
-  }
-  _onInternalFocus(e) {
-    e.stopPropagation();
-  }
-  _onInternalChange(e) {
-    if (e.target !== this) {
-      e.stopPropagation();
-      const target = e.target;
-      const checkboxes = this.querySelectorAll("pd-checkbox");
-      let newValue;
-      checkboxes.forEach((el) => {
-        const isActive = el === target;
-        el.readonly = isActive;
-        el.setCheckedState(isActive ? "true" : "false");
-        if (isActive) {
-          newValue = el.valueName;
-        }
-      });
-      this.value = newValue || "";
-    }
-  }
-  _onInternalRegister(e) {
-    if (e.target !== this) {
-      e.stopPropagation();
-      if (e.detail.value === "true") {
-        this.value = e.detail.name;
-      }
-    }
-  }
-  _onInternalUnRegister(e) {
-    if (e.target !== this) {
-      e.stopPropagation();
-    }
-  }
-  /*
-    public reset(): void {
-      const checkboxes = this.querySelectorAll("pd-checkbox");
-      checkboxes.forEach((el) => {                  
-        (el as any).reset();
-      });
-      super.reset();
-    }
-  
-    public clear(): void {
-      this.reset();
-    }
-    */
-};
-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;
-      }
+import { PdRadioGroup } from './pd-radio-group/PdRadioGroup.js';
 
-      ::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
-};
+const tag = "pd-radio-group";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdRadioGroup);
+}
+
+export { PdRadioGroup };

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

@@ -0,0 +1,25 @@
+import { CSSResultGroup, PropertyValues } from 'lit';
+import { PdBaseUIInput } from '../base/pd-base-ui-input.js';
+/**
+ * @tagname pd-range
+ */
+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();
+    update(changedProps: PropertyValues<this>): void;
+    firstUpdated(): void;
+    protected _onChange(e: Event): void;
+    protected _onBlur(event: Event): void;
+    protected _onFocus(event: Event): void;
+    focus(): void;
+    render(): import('lit').TemplateResult<1>;
+    _getInitialValue(): string;
+    clear(): void;
+}
+//# sourceMappingURL=PdRange.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdRange.d.ts","sourceRoot":"","sources":["../../src/pd-range/PdRange.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhE,OAAO,EAAE,aAAa,EAAoB,MAAM,6BAA6B,CAAC;AAE9E;;GAEG;AACH,qBAAa,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;IAEV,SAAS,CAAC,MAAM,EAAG,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;IAEvD,OAAgB,MAAM,EAAE,cAAc,CAqJpC;;IAOO,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAOhD,YAAY,IAAI,IAAI;IAK7B,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAInC,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAgBrC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IActC,KAAK,IAAI,IAAI;IAIJ,MAAM;IAuCN,gBAAgB,IAAI,MAAM;IAI5B,KAAK,IAAI,IAAI;CAGrB"}

package/dist/pd-range/PdRange.js

@@ -0,0 +1,280 @@
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { PdBaseUIInput, INPUT_TYPE_RANGE } from '../base/pd-base-ui-input.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class PdRange extends PdBaseUIInput {
+  constructor() {
+    super();
+    this.min = 0;
+    this.max = 10;
+    this.step = 1;
+    this.optionValueMapper = {};
+    this.name = "";
+    this._inputType = INPUT_TYPE_RANGE;
+  }
+  static {
+    this.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;
+        }
+      }
+    `
+    ];
+  }
+  update(changedProps) {
+    if (changedProps.has("optionValueMapper") && !this.initValue) {
+      this._value = Object.keys(this.optionValueMapper)[0];
+    }
+    super.update(changedProps);
+  }
+  firstUpdated() {
+    this._input = this.shadowRoot?.querySelector("input");
+    super.firstUpdated();
+  }
+  _onChange(e) {
+    this._handleChangedValue(this._input?.value ?? "", e, true);
+  }
+  _onBlur(event) {
+    this._focused = false;
+    this._touched = true;
+    this.dispatchEvent(
+      new CustomEvent("pd-form-element-blur", {
+        detail: {
+          name: this.valueName || this.id || "field",
+          value: this._input?.value
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _onFocus(event) {
+    this._focused = true;
+    this.dispatchEvent(
+      new CustomEvent("pd-form-element-focus", {
+        detail: {
+          name: this.valueName || this.id || "field",
+          value: this._input?.value
+        },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  focus() {
+    this._input?.focus();
+  }
+  render() {
+    const inputId = `${this.id}Range`;
+    const labelDetail = this.optionValueMapper[this._value] || this._value;
+    return html`
+      ${this._renderLabel(inputId, labelDetail)}
+      <div
+        class="${classMap(
+      this.getClassmap({
+        "input-range": true
+      })
+    )}"
+      >
+        <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}
+          @blur=${this._onBlur}
+          @focus=${this._onFocus}
+        />
+        <div class="ticks ${this.disabled ? "disabled" : "enabled"}">
+          ${Array.from({ length: this.max - this.min + 1 }).map(
+      () => html`<span class="tick">|</span>`
+    )}
+        </div>
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+  _getInitialValue() {
+    return this.initValue || Object.keys(this.optionValueMapper)[0] || "0";
+  }
+  clear() {
+    this.reset();
+  }
+}
+__decorateClass([
+  property({ type: Number })
+], PdRange.prototype, "min");
+__decorateClass([
+  property({ type: Number })
+], PdRange.prototype, "max");
+__decorateClass([
+  property({ type: Number })
+], PdRange.prototype, "step");
+__decorateClass([
+  property({ type: Object })
+], PdRange.prototype, "optionValueMapper");
+__decorateClass([
+  property({ type: String })
+], PdRange.prototype, "name");
+
+export { PdRange };

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

@@ -0,0 +1,3 @@
+import { PdRange } from './PdRange.js';
+export { PdRange };
+//# sourceMappingURL=pd-range.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-range.d.ts","sourceRoot":"","sources":["../../src/pd-range/pd-range.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAOvC,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/{stories/range.stories.d.ts → pd-range/pd-range.stories.d.ts}

@@ -6,4 +6,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj;
 export declare const Range: Story;
-//# sourceMappingURL=range.stories.d.ts.map
+//# sourceMappingURL=pd-range.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-range.stories.d.ts","sourceRoot":"","sources":["../../src/pd-range/pd-range.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,eAAe,CAAC;AACvB,OAAO,2CAA2C,CAAC;AACnD,OAAO,+BAA+B,CAAC;AAGvC,QAAA,MAAM,IAAI;;;CAGM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAUtB,eAAO,MAAM,KAAK,EAAE,KAkFnB,CAAC"}

package/dist/pd-range.d.ts

@@ -1,22 +1,2 @@
-import { CSSResultGroup, PropertyValues } 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();
-    update(changedProps: PropertyValues<this>): void;
-    firstUpdated(): void;
-    protected _onChange(e: Event): void;
-    protected _onBlur(event: Event): void;
-    protected _onFocus(event: Event): void;
-    focus(): void;
-    render(): import('lit-html').TemplateResult<1>;
-    _getInitialValue(): string;
-    clear(): void;
-}
-//# sourceMappingURL=pd-range.d.ts.map
+export * from './pd-range/pd-range'
+export {}