@progressive-development/pd-forms 0.8.6 → 0.9.1

package/dist/pd-input-area.js

@@ -1,101 +1,8 @@
-import { css, html } from "lit";
-import { msg, str } from "@lit/localize";
-import { property, customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { PdBaseInputElement } from "./pd-base-input-element.js";
-import { INPUT_TYPE_AREA } 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 PdInputArea = class extends PdBaseInputElement {
-  constructor() {
-    super();
-    this.rows = 2;
-    this.maxlength = 500;
-    this._inputType = INPUT_TYPE_AREA;
-  }
-  connectedCallback() {
-    this._setupValidators();
-    super.connectedCallback();
-  }
-  _setupValidators() {
-    const validators = [];
-    if (this.minlength !== void 0) {
-      validators.push(
-        (value) => value.length < this.minlength ? msg(str`Mindestens ${this.minlength} Zeichen`) : null
-      );
-    }
-    if (this.maxlength !== void 0) {
-      validators.push(
-        (value) => value.length > this.maxlength ? msg(str`Maximal ${this.maxlength} Zeichen`) : null
-      );
-    }
-    this._validators = validators;
-  }
-  render() {
-    const inputAreaId = `${this.id}InputArea`;
-    return html`
-      ${this._renderLabel(inputAreaId)}
-      <div
-        class="${classMap(
-      this.getClassmap({
-        input: true
-      })
-    )}"
-      >
-        <textarea
-          id=${inputAreaId}
-          name=${this.name || this.valueName || this.autoCompleteName}
-          autocomplete=${this.autoCompleteName ?? "off"}
-          class="input-style ${this.gradient ? "gradient" : ""}"
-          rows=${this.rows}
-          cols=${this.cols ?? ""}
-          placeholder=${this.placeHolder}
-          minlength=${this.minlength ?? ""}
-          maxlength=${this.maxlength ?? ""}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          .value=${this.value}
-          @keyup=${this._onKeyUp}
-          @blur=${this._onBlur}
-          @focus=${this._onFocus}
-        ></textarea>
-      </div>
-      ${this._renderErrorMsg()}
-    `;
-  }
-};
-PdInputArea.styles = [
-  PdBaseInputElement.styles,
-  css`
-      /* override default width for area */
-      .input-style {
-        width: var(--pd-input-field-width, 240px);
-      }
-    `
-];
-__decorateClass([
-  property({ type: Number })
-], PdInputArea.prototype, "rows", 2);
-__decorateClass([
-  property({ type: Number })
-], PdInputArea.prototype, "cols", 2);
-__decorateClass([
-  property({ type: Number })
-], PdInputArea.prototype, "minlength", 2);
-__decorateClass([
-  property({ type: Number })
-], PdInputArea.prototype, "maxlength", 2);
-PdInputArea = __decorateClass([
-  customElement("pd-input-area")
-], PdInputArea);
-export {
-  PdInputArea
-};
+import { PdInputArea } from './pd-input-area/PdInputArea.js';
+
+const tag = "pd-input-area";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdInputArea);
+}
+
+export { PdInputArea };

package/dist/pd-input-file/PdInputFile.d.ts

@@ -0,0 +1,19 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseInputElement } from '../base/pd-base-input-element.js';
+/**
+ * @tagname pd-input-file
+ */
+export declare class PdInputFile extends PdBaseInputElement {
+    icon?: string;
+    accept?: string;
+    maxlength?: number;
+    static styles: CSSResultGroup;
+    constructor();
+    render(): import('lit').TemplateResult<1>;
+    private _iconClicked;
+    private _onChange;
+    get files(): FileList | null | undefined;
+    reset(): void;
+    clear(): void;
+}
+//# sourceMappingURL=PdInputFile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdInputFile.d.ts","sourceRoot":"","sources":["../../src/pd-input-file/PdInputFile.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAGtE;;GAEG;AACH,qBAAa,WAAY,SAAQ,kBAAkB;IAEjD,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,OAAgB,MAAM,EAAE,cAAc,CAOpC;;IAOO,MAAM;IAqCf,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAKjB,IAAI,KAAK,IAAI,QAAQ,GAAG,IAAI,GAAG,SAAS,CAEvC;IAEM,KAAK;IAKL,KAAK,IAAI,IAAI;CAGrB"}

package/dist/pd-input-file/PdInputFile.js

@@ -0,0 +1,93 @@
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import '@progressive-development/pd-icon/pd-icon';
+import { PdBaseInputElement } from '../base/pd-base-input-element.js';
+import { INPUT_TYPE_FILE } 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 PdInputFile extends PdBaseInputElement {
+  static {
+    this.styles = [
+      PdBaseInputElement.styles,
+      css`
+      * {
+        box-sizing: border-box;
+      }
+    `
+    ];
+  }
+  constructor() {
+    super();
+    this._inputType = INPUT_TYPE_FILE;
+  }
+  render() {
+    const inputId = `${this.id}Input`;
+    return html`
+      ${this._renderLabel(inputId)}
+      <div
+        class="${classMap(
+      this.getClassmap({
+        input: true
+      })
+    )}"
+      >
+        ${this.icon ? html`<pd-icon
+              icon=${this.icon}
+              activeIcon
+              @click=${this._iconClicked}
+              class="infield-icon"
+            ></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}
+          @focus=${this._onFocus}
+          @change=${this._onChange}
+        />
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+  _iconClicked() {
+    this.dispatchEvent(new CustomEvent("input-icon-click"));
+  }
+  _onChange(e) {
+    this._handleChangedValue(this._input.value, e, true);
+  }
+  get files() {
+    return this._input?.files;
+  }
+  reset() {
+    this._input.value = "";
+    super.reset();
+  }
+  clear() {
+    this.reset();
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdInputFile.prototype, "icon");
+__decorateClass([
+  property({ type: String })
+], PdInputFile.prototype, "accept");
+__decorateClass([
+  property({ type: Number })
+], PdInputFile.prototype, "maxlength");
+
+export { PdInputFile };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-input-file.d.ts","sourceRoot":"","sources":["../../src/pd-input-file/pd-input-file.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -46,4 +46,4 @@ declare const meta: {
 export default meta;
 type Story = StoryObj;
 export declare const InputFile: Story;
-//# sourceMappingURL=input-file.stories.d.ts.map
+//# sourceMappingURL=pd-input-file.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-input-file.stories.d.ts","sourceRoot":"","sources":["../../src/pd-input-file/pd-input-file.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAI3D,OAAO,oBAAoB,CAAC;AAG5B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,SAAS,EAAE,KAmFvB,CAAC"}

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

@@ -1,16 +1,2 @@
-import { CSSResultGroup } from 'lit';
-import { PdBaseInputElement } from './pd-base-input-element.js';
-export declare class PdInputFile extends PdBaseInputElement {
-    icon?: string;
-    accept?: string;
-    maxlength?: number;
-    static styles: CSSResultGroup;
-    constructor();
-    render(): import('lit-html').TemplateResult<1>;
-    private _iconClicked;
-    private _onChange;
-    get files(): FileList | null | undefined;
-    reset(): void;
-    clear(): void;
-}
-//# sourceMappingURL=pd-input-file.d.ts.map
+export * from './pd-input-file/pd-input-file'
+export {}

package/dist/pd-input-file.js

@@ -1,96 +1,8 @@
-import { css, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.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="${classMap(
-      this.getClassmap({
-        input: true
-      })
-    )}"
-      >
-        ${this.icon ? html`<pd-icon
-              icon=${this.icon}
-              activeIcon
-              @click=${this._iconClicked}
-              class="infield-icon"
-            ></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}
-          @focus=${this._onFocus}
-          @change=${this._onChange}
-        />
-      </div>
-      ${this._renderErrorMsg()}
-    `;
-  }
-  _iconClicked() {
-    this.dispatchEvent(new CustomEvent("input-icon-click"));
-  }
-  _onChange(e) {
-    this._handleChangedValue(this._input.value, e, true);
-  }
-  get files() {
-    var _a;
-    return (_a = this._input) == null ? void 0 : _a.files;
-  }
-  reset() {
-    this._input.value = "";
-    super.reset();
-  }
-  clear() {
-    this.reset();
-  }
-};
-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
-};
+import { PdInputFile } from './pd-input-file/PdInputFile.js';
+
+const tag = "pd-input-file";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdInputFile);
+}
+
+export { PdInputFile };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PdInputTime.d.ts","sourceRoot":"","sources":["../../src/pd-input-time/PdInputTime.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAGtE;;GAEG;AACH,qBAAa,WAAY,SAAQ,kBAAkB;IAEjD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,WAAoB,MAAM,IAAI,cAAc,CAS3C;;IAOQ,MAAM;IAqCf,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,YAAY;CAGrB"}

package/dist/pd-input-time/PdInputTime.js

@@ -0,0 +1,77 @@
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import '@progressive-development/pd-icon/pd-icon';
+import { PdBaseInputElement } from '../base/pd-base-input-element.js';
+import { INPUT_TYPE_TIME } 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 PdInputTime extends PdBaseInputElement {
+  static get styles() {
+    return [
+      PdBaseInputElement.styles,
+      css`
+        * {
+          box-sizing: border-box;
+        }
+      `
+    ];
+  }
+  constructor() {
+    super();
+    this._inputType = INPUT_TYPE_TIME;
+  }
+  render() {
+    const inputId = `${this.id}Input`;
+    return html`
+      ${this._renderLabel(inputId)}
+      <div
+        class="${classMap(
+      this.getClassmap({
+        input: true
+      })
+    )}"
+      >
+        ${this.icon ? html`<pd-icon
+              icon=${this.icon}
+              activeIcon
+              @click=${this._iconClicked}
+              class="infield-icon"
+            ></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}
+          @change=${this._onChange}
+          @blur=${this._onBlur}
+          @focus=${this._onFocus}
+        />
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+  _onChange(e) {
+    this._handleChangedValue(this._input.value, e, true);
+  }
+  _iconClicked() {
+    this.dispatchEvent(new CustomEvent("input-icon-click"));
+  }
+}
+__decorateClass([
+  property({ type: String })
+], PdInputTime.prototype, "icon");
+
+export { PdInputTime };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-input-time.d.ts","sourceRoot":"","sources":["../../src/pd-input-time/pd-input-time.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

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

package/dist/pd-input-time.js

@@ -1,81 +1,8 @@
-import { css, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.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 {
-  static get styles() {
-    return [
-      PdBaseInputElement.styles,
-      css`
-        * {
-          box-sizing: border-box;
-        }
-      `
-    ];
-  }
-  constructor() {
-    super();
-    this._inputType = INPUT_TYPE_TIME;
-  }
-  render() {
-    const inputId = `${this.id}Input`;
-    return html`
-      ${this._renderLabel(inputId)}
-      <div
-        class="${classMap(
-      this.getClassmap({
-        input: true
-      })
-    )}"
-      >
-        ${this.icon ? html`<pd-icon
-              icon=${this.icon}
-              activeIcon
-              @click=${this._iconClicked}
-              class="infield-icon"
-            ></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}
-          @change=${this._onChange}
-          @blur=${this._onBlur}
-          @focus=${this._onFocus}
-        />
-      </div>
-      ${this._renderErrorMsg()}
-    `;
-  }
-  _onChange(e) {
-    this._handleChangedValue(this._input.value, e, true);
-  }
-  _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
-};
+import { PdInputTime } from './pd-input-time/PdInputTime.js';
+
+const tag = "pd-input-time";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdInputTime);
+}
+
+export { PdInputTime };

package/dist/pd-input.d.ts

@@ -1,32 +1,2 @@
-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;
-    static styles: CSSResultGroup;
-    constructor();
-    connectedCallback(): void;
-    private _setupValidators;
-    render(): TemplateResult;
-    protected _onKeyUp(e: KeyboardEvent): void;
-    private _iconClicked;
-}
-//# sourceMappingURL=pd-input.d.ts.map
+export * from './pd-input/pd-input'
+export {}