@progressive-development/pd-forms 0.8.7 → 0.9.2

package/dist/pd-button.js

@@ -1,154 +1,8 @@
-import { css, html } from "lit";
-import { property, customElement } from "lit/decorators.js";
-import { PdBaseUI } from "./pd-base-ui.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 PdButton = class extends PdBaseUI {
-  constructor() {
-    super(...arguments);
-    this.primary = false;
-    this.gradient = false;
-    this.disabled = false;
-    this.text = "Ok";
-  }
-  render() {
-    return html`
-      <div class="button-div" @click=${this._handleClick}>
-        <a ?disabled=${this.disabled}>${this.text}</a>
-      </div>
-    `;
-  }
-  _handleClick() {
-    if (!this.disabled) {
-      this.dispatchEvent(
-        new CustomEvent("button-clicked", {
-          detail: this.value,
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-  }
-};
-PdButton.styles = [
-  PdBaseUI.styles,
-  css`
-      :host {
-        font-family: var(--pd-default-font-title-family);
-        font-size: var(--pd-button-font-size, 1em);
-        font-weight: var(--pd-button-font-weight, normal);
-        /*        
-         height: 100%;         
-         width: 100%; => Ohne diese Angabe eht die % Angaben icht
-         */
+import { PdButton } from './pd-button/PdButton.js';
 
-        margin: 0.5rem;
-        margin-left: 0;
-        pointer-events: none;
-      }
+const tag = "pd-button";
+if (!customElements.get(tag)) {
+  customElements.define(tag, PdButton);
+}
 
-      .button-div {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: var(--pd-button-width, 140px);
-        height: var(--pd-button-height, 2rem);
-        border-radius: var(--pd-border-radius, 1px);
-        background-color: var(--pd-button-bg-col, var(--pd-default-dark-col));
-        color: var(--pd-button-font-col, var(--pd-default-bg-col));
-        border: var(--pd-button-border, 0);
-        cursor: pointer;
-        box-shadow: var(--pd-button-box-shadow, none);
-        pointer-events: all;
-      }
-
-      :host(:not([disabled])) .button-div:hover {
-        box-shadow: var(
-          --pd-button-box-shadow-hover,
-          -1px 1px 2px var(--pd-default-dark-col)
-        );
-        background-color: var(
-          --pd-button-bg-col-hover,
-          var(--pd-default-hover-col)
-        );
-        color: var(--pd-button-font-col-hover, var(--pd-default-dark-col));
-        transition: background-color 0.4s ease 0s;
-        --pd-button-border: var(--pd-button-border-hover);
-      }
-
-      :host(:not([disabled])[primary]) .button-div:hover {
-        background-color: var(
-          --pd-button-primary-bg-col-hover,
-          var(--pd-default-hover-col)
-        );
-        color: var(
-          --pd-button-primary-font-col-hover,
-          var(--pd-default-bg-col)
-        );
-      }
-
-      :host([primary]) .button-div {
-        background-color: var(
-          --pd-button-primary-bg-col,
-          var(--pd-default-col)
-        );
-        color: var(--pd-button-primary-font-col, var(--pd-default-bg-col));
-      }
-
-      :host([gradient]) .button-div {
-        background: linear-gradient(
-          to right,
-          var(--my-background-gradient-color, red) 0%,
-          var(--my-background-color, blue) 100%
-        );
-      }
-
-      :host([disabled]) .button-div {
-        cursor: auto;
-        border-color: var(--pd-default-disabled-col);
-        background-color: var(
-          --pd-button-bg-col-disabled,
-          var(--pd-default-disabled-col)
-        );
-        color: var(--pd-button-font-col-disabled, black);
-        --pd-button-border: var(--pd-button-border-disabled);
-      }
-
-      a {
-        display: inline-block;
-        text-decoration: none;
-        white-space: nowrap;
-        margin: 0.5rem;
-        pointer-events: none;
-      }
-    `
-];
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], PdButton.prototype, "primary", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], PdButton.prototype, "gradient", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], PdButton.prototype, "disabled", 2);
-__decorateClass([
-  property({ type: String })
-], PdButton.prototype, "text", 2);
-__decorateClass([
-  property({ type: String })
-], PdButton.prototype, "value", 2);
-PdButton = __decorateClass([
-  customElement("pd-button")
-], PdButton);
-export {
-  PdButton
-};
+export { PdButton };

package/dist/pd-checkbox/PdCheckbox.d.ts

@@ -0,0 +1,18 @@
+import { CSSResultGroup } from 'lit';
+import { PdBaseUIInput } from '../base/pd-base-ui-input';
+/**
+ * @tagname pd-checkbox
+ */
+export declare class PdCheckbox extends PdBaseUIInput {
+    checkType: "CHECK" | "RADIO" | "SWITCH";
+    static styles: CSSResultGroup;
+    constructor();
+    setCheckedState(newValue: "true" | "false"): void;
+    render(): import('lit').TemplateResult<1>;
+    private _onClick;
+    private _onKeyPress;
+    private _onLinkClick;
+    protected _getInitialValue(reset?: boolean): string;
+    clear(): void;
+}
+//# sourceMappingURL=PdCheckbox.d.ts.map

package/dist/pd-checkbox/PdCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdCheckbox.d.ts","sourceRoot":"","sources":["../../src/pd-checkbox/PdCheckbox.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAIhD,OAAO,0CAA0C,CAAC;AAElD,OAAO,EAAE,aAAa,EAAoB,MAAM,0BAA0B,CAAC;AAG3E;;GAEG;AACH,qBAAa,UAAW,SAAQ,aAAa;IAE3C,SAAS,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAW;IAElD,OAAgB,MAAM,EAAE,cAAc,CAiMpC;;IAOK,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAI/C,MAAM;IAuCf,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,YAAY;IAIpB,SAAS,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM;IAM5C,KAAK,IAAI,IAAI;CAGrB"}

package/dist/pd-checkbox/PdCheckbox.js

@@ -0,0 +1,279 @@
+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 { PdBaseUIInput, INPUT_TYPE_CHECK } from '../base/pd-base-ui-input.js';
+import { pdIcons } from '@progressive-development/pd-icon';
+
+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 PdCheckbox extends PdBaseUIInput {
+  constructor() {
+    super();
+    this.checkType = "CHECK";
+    this._inputType = INPUT_TYPE_CHECK;
+  }
+  static {
+    this.styles = [
+      PdBaseUIInput.styles,
+      css`
+      :host {
+        display: inline-block;
+
+        /* active checkbox */
+        --pd-icon-bg-col-active: var(
+          --pd-cb-bg-col,
+          var(--pd-default-lightest-col)
+        );
+        --pd-icon-col-active: var(
+          --pd-cb-col,
+          var(--pd-default-success-dark-col)
+        );
+
+        /* inactive checkbox */
+        --pd-icon-bg-col: var(
+          --pd-cb-unset-bg-col,
+          var(--pd-default-lightest-col)
+        );
+        --pd-icon-col: var(--pd-cb-col, var(--pd-default-error-dark-col));
+
+        --pd-icon-bg-col-hover: var(
+          --pd-cb-bg-col,
+          var(--pd-default-light-col)
+        );
+      }
+
+      :host([checkType="SWITCH"]) {
+        /* derzeit keine Angaben */
+      }
+
+      .div-container {
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+      }
+
+      .div-container.disabled {
+        opacity: 0.7;
+        cursor: auto;
+      }
+
+      .div-container.readonly {
+        cursor: auto;
+      }
+
+      .label {
+        margin-left: 0.1rem;
+        color: var(--pd-cb-font-col, var(--pd-default-font-input-col));
+        font-family: var(--pd-default-font-input-family);
+        text-align: left;
+        font-size: var(--pd-default-font-input-size);
+      }
+
+      .readonly .label {
+        color: var(--pd-cb-font-col-readonly, #4d4d4d);
+      }
+
+      .disabled .label {
+        color: var(--pd-cb-font-col-disabled, #4d4d4d);
+      }
+
+      /*
+       * Class checkbox for icon and a element (checkbox case)
+       */
+      .checkbox {
+        display: flex;
+        border-radius: 4px;
+        line-height: 0;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .checkbox pd-icon {
+        --pd-icon-size: 1.3rem;
+        margin-right: 0.2rem;
+        margin-bottom: 0.2rem;
+        border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
+        border-radius: var(--pd-cb-border-radius, 3px);
+      }
+
+      .readonly .checkbox pd-icon,
+      .disabled .checkbox pd-icon {
+        border-color: var(--pd-cb-border-col-readonly, darkgrey);
+      }
+
+      /*
+       * Class Radio for icon and a element (radio group case)
+       */
+      .radio-outer .label {
+        margin-left: 0.7rem;
+      }
+
+      .radio {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .radio pd-icon {
+        --pd-icon-size: 1.5rem;
+        --pd-icon-round-padding: 0.1rem;
+        border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
+      }
+
+      .readonly .radio pd-icon,
+      .disabled .radio pd-icon {
+        border-color: var(--pd-cb-border-col-readonly, darkgrey);
+      }
+
+      /* Switch styles */
+      .switch {
+        height: var(--pd-cb-switch-height);
+        position: relative;
+        outline: 0;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+      }
+
+      .switch .label {
+        margin-left: 0.5rem;
+      }
+
+      .switch-paddle {
+        display: inline-block;
+        vertical-align: baseline;
+        margin: 0;
+        position: relative;
+        min-width: 4.1rem;
+        max-width: 4.1rem;
+        height: 1.9rem;
+        border-radius: 0;
+        background: var(--pd-cb-switch-paddle-col, var(--pd-default-col));
+        cursor: pointer;
+      }
+
+      .switch-paddle pd-icon {
+        --pd-icon-size: 1.25rem;
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: block;
+        -webkit-transform: translate3d(0, 0, 0);
+        transform: translate3d(0, 0, 0);
+        border: 2px solid var(--pd-cb-border-col, var(--pd-default-col));
+        box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
+        border-radius: var(--pd-cb-border-radius, 4px);
+        -webkit-transition: all 0.25s ease-out;
+        transition: all 0.25s ease-out;
+        content: "";
+      }
+
+      .disabled .switch-paddle {
+        cursor: auto;
+      }
+
+      .readonly .switch-paddle {
+        cursor: auto;
+        max-width: 2rem;
+        min-width: 2rem;
+        background: none;
+
+        /* Prüfen TODO
+        --pd-icon-bg: transparent;
+        --pd-icon-fill: var(--card-dark-red);
+        --pd-icon-fill-hover: var(--pd-icon-fill);
+        --pd-icon-fill-active: var(--card-medium-green);
+        */
+      }
+
+      .readonly .switch-paddle pd-icon {
+        border-color: var(--pd-cb-border-col-readonly, transparent);
+      }
+
+      .readonly .isChecked.switch-paddle pd-icon {
+        transform: translate3d(0, 0, 0);
+        left: 0rem;
+      }
+
+      .isChecked.switch-paddle pd-icon {
+        left: 2.25rem;
+      }
+
+      @media (min-width: 580px) {
+        :host {
+          font-size: 1rem;
+        }
+      }
+    `
+    ];
+  }
+  setCheckedState(newValue) {
+    this._value = newValue;
+  }
+  render() {
+    const checked = this._value === "true";
+    const inputId = `${this.id}Check`;
+    const classMapVal = {
+      disabled: this.disabled,
+      switch: this.checkType === "SWITCH",
+      "radio-outer": this.checkType === "RADIO",
+      readonly: this.readonly,
+      "div-container": true
+    };
+    const aClassMap = {
+      "switch-paddle": this.checkType === "SWITCH",
+      checkbox: this.checkType === "CHECK",
+      radio: this.checkType === "RADIO",
+      isChecked: checked,
+      isUnchecked: !checked
+    };
+    return html`
+      ${this._renderLabel(inputId)}
+      <div @click=${this._onClick} class=${classMap(classMapVal)}>
+        <div class=${classMap(aClassMap)}>
+          <pd-icon
+            icon=${this.checkType === "SWITCH" ? pdIcons.ICON_CHECKBOX : this.checkType === "RADIO" ? pdIcons.ICON_CIRCLE : pdIcons.ICON_CHECKBOX_ONLY_CHECK}
+            class="${this.checkType === "RADIO" ? "round" : ""}"
+            ?activeIcon=${checked}
+          ></pd-icon>
+        </div>
+        <span class="label"><slot></slot></span>
+      </div>
+      ${this._renderErrorMsg()}
+    `;
+  }
+  _onClick(event) {
+    if (this.disabled || this.readonly) return;
+    const checked = this._value === "true";
+    this._handleChangedValue(!checked ? "true" : "false", event, true);
+  }
+  _onKeyPress(event) {
+    event.preventDefault();
+    if (event.key === " " || event.code === "Space") {
+      this._onClick(event);
+    }
+  }
+  _onLinkClick(event) {
+    event.preventDefault();
+  }
+  _getInitialValue(reset) {
+    return reset ? this.initValue || "false" : this.initValue || this._value || "false";
+  }
+  clear() {
+    this.reset();
+  }
+}
+__decorateClass([
+  property({ type: String, reflect: true })
+], PdCheckbox.prototype, "checkType");
+
+export { PdCheckbox };

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

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

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

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

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

@@ -26,4 +26,4 @@ type Story = StoryObj;
 export declare const Checkbox: Story;
 export declare const SwitchTemplate: Story;
 export declare const RadioTemplate: Story;
-//# sourceMappingURL=checkbox.stories.d.ts.map
+//# sourceMappingURL=pd-checkbox.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-checkbox.stories.d.ts","sourceRoot":"","sources":["../../src/pd-checkbox/pd-checkbox.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE3D,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2CAA2C,CAAC;AAGnD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAeM,CAAC;AAEjB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,eAAO,MAAM,QAAQ,EAAE,KA8CtB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA8B5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA4B3B,CAAC"}

package/dist/pd-checkbox.d.ts

@@ -1,15 +1,2 @@
-import { CSSResultGroup } from 'lit';
-import { PdBaseUIInput } from './pd-base-ui-input';
-export declare class PdCheckbox extends PdBaseUIInput {
-    checkType: "CHECK" | "RADIO" | "SWITCH";
-    static styles: CSSResultGroup;
-    constructor();
-    setCheckedState(newValue: "true" | "false"): void;
-    render(): import('lit-html').TemplateResult<1>;
-    private _onClick;
-    private _onKeyPress;
-    private _onLinkClick;
-    protected _getInitialValue(reset?: boolean): string;
-    clear(): void;
-}
-//# sourceMappingURL=pd-checkbox.d.ts.map
+export * from './pd-checkbox/pd-checkbox'
+export {}