@progressive-development/pd-forms 0.9.2 → 1.0.1

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

@@ -1,4 +1,4 @@
-import { css, html } from 'lit';
+import { css, nothing, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import '@progressive-development/pd-icon/pd-icon';
@@ -15,6 +15,12 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 class PdInputTime extends PdBaseInputElement {
+  constructor() {
+    super();
+    this.clickableIcon = false;
+    this.iconLabel = "";
+    this._inputType = INPUT_TYPE_TIME;
+  }
   static get styles() {
     return [
       PdBaseInputElement.styles,
@@ -25,12 +31,9 @@ class PdInputTime extends PdBaseInputElement {
       `
     ];
   }
-  constructor() {
-    super();
-    this._inputType = INPUT_TYPE_TIME;
-  }
   render() {
     const inputId = `${this.id}Input`;
+    const errorId = `${this.id}Error`;
     return html`
       ${this._renderLabel(inputId)}
       <div
@@ -40,38 +43,61 @@ class PdInputTime extends PdBaseInputElement {
       })
     )}"
       >
-        ${this.icon ? html`<pd-icon
-              icon=${this.icon}
-              activeIcon
-              @click=${this._iconClicked}
-              class="infield-icon"
-            ></pd-icon>` : ""}
+        ${this.icon ? html`
+              <pd-icon
+                icon="${this.icon}"
+                ?activeIcon="${this.clickableIcon}"
+                class="infield-icon"
+                tabindex="${this.clickableIcon ? 0 : -1}"
+                role="${this.clickableIcon ? "button" : "img"}"
+                aria-label="${this.clickableIcon ? this.iconLabel : ""}"
+                aria-hidden="${!this.clickableIcon}"
+                @click="${this.clickableIcon ? this._iconClicked : null}"
+                @keydown="${this.clickableIcon ? this._onIconKeyDown : null}"
+              ></pd-icon>
+            ` : nothing}
         <input
-          id=${inputId}
-          name=${this.name || this.valueName || this.autoCompleteName}
+          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}
+          .value="${this._value}"
+          ?readonly="${this.readonly}"
+          ?disabled="${this.disabled}"
+          aria-invalid="${this._invalid}"
+          aria-describedby="${this._errorMsg ? errorId : ""}"
+          @keyup="${this._onKeyUp}"
+          @change="${this._onChange}"
+          @blur="${this._onBlur}"
+          @focus="${this._onFocus}"
         />
       </div>
-      ${this._renderErrorMsg()}
+      ${this._renderErrorMsg(errorId)}
     `;
   }
   _onChange(e) {
     this._handleChangedValue(this._input.value, e, true);
   }
   _iconClicked() {
-    this.dispatchEvent(new CustomEvent("input-icon-click"));
+    this.dispatchEvent(
+      new CustomEvent("input-icon-click", { bubbles: true, composed: true })
+    );
+  }
+  _onIconKeyDown(event) {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      this._iconClicked();
+    }
   }
 }
 __decorateClass([
   property({ type: String })
 ], PdInputTime.prototype, "icon");
+__decorateClass([
+  property({ type: Boolean })
+], PdInputTime.prototype, "clickableIcon");
+__decorateClass([
+  property({ type: String })
+], PdInputTime.prototype, "iconLabel");
 
 export { PdInputTime };

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

@@ -0,0 +1,94 @@
+import { StoryObj } from '@storybook/web-components-vite';
+/**
+ * Args interface for pd-input-time stories.
+ */
+interface PdInputTimeArgs {
+    /** Label text displayed above the input */
+    label: string;
+    /** Initial value in HH:MM format */
+    initValue: string;
+    /** Helper text displayed on hover */
+    helperTxt: string;
+    /** Whether the field is required */
+    required: boolean;
+    /** Custom required field error message */
+    requiredMsg: string;
+    /** Whether the field is disabled */
+    disabled: boolean;
+    /** Whether the field is readonly */
+    readonly: boolean;
+    /** Icon name to display */
+    icon: string;
+    /** Whether to show gradient styling */
+    gradient: boolean;
+    /** Value name for form registration */
+    valueName: string;
+    /** Placeholder text */
+    placeHolder: string;
+}
+/**
+ * pd-input-time is a web component for time input with native browser support.
+ *
+ * ## Features
+ * - Native HTML5 time input with browser picker
+ * - Optional icon display
+ * - Form integration with validation
+ * - Required field validation
+ * - Disabled and readonly states
+ * - Helper text support via hover
+ */
+declare const meta: {
+    title: string;
+    component: string;
+    tags: string[];
+    render: (args: PdInputTimeArgs) => import('lit').TemplateResult<1>;
+    args: {
+        label: string;
+        initValue: string;
+        helperTxt: string;
+        required: false;
+        requiredMsg: string;
+        disabled: false;
+        readonly: false;
+        icon: string;
+        gradient: false;
+        valueName: string;
+        placeHolder: string;
+    };
+    parameters: {
+        actions: {
+            handles: string[];
+        };
+        pdDocs: {
+            accessibility: {
+                keyboard: {
+                    key: string;
+                    description: string;
+                }[];
+                aria: string[];
+            };
+            usage: {
+                title: string;
+                code: string;
+            }[];
+            relatedComponents: {
+                tag: string;
+                package: string;
+                reason: string;
+            }[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<PdInputTimeArgs>;
+/** Default time input with label. Interactive via Controls panel. */
+export declare const Default: Story;
+/** All visual states of the time input at a glance. */
+export declare const AllStates: Story;
+/** Time range selection with start and end times in a form row. */
+export declare const TimeRange: Story;
+/** Time input in form container with validation, reset, and value retrieval. */
+export declare const InFormContainer: Story;
+/** CSS Custom Properties -- Branded and Redesigned variants. */
+export declare const CustomStyling: Story;
+//# sourceMappingURL=pd-input-time.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pd-input-time.stories.d.ts","sourceRoot":"","sources":["../../src/pd-input-time/pd-input-time.stories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,oBAAoB,CAAC;AAC5B,OAAO,+BAA+B,CAAC;AACvC,OAAO,2CAA2C,CAAC;AACnD,OAAO,2BAA2B,CAAC;AAMnC;;GAEG;AACH,UAAU,eAAe;IACvB,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,SAAS,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,WAAW,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,oCAAoC;IACpC,QAAQ,EAAE,OAAO,CAAC;IAClB,2BAA2B;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,QAAQ,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB;AAyCD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;AAMvC,qEAAqE;AACrE,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC;AAMF,uDAAuD;AACvD,eAAO,MAAM,SAAS,EAAE,KAkFvB,CAAC;AAMF,mEAAmE;AACnE,eAAO,MAAM,SAAS,EAAE,KA2BvB,CAAC;AAMF,gFAAgF;AAChF,eAAO,MAAM,eAAe,EAAE,KAqE7B,CAAC;AAMF,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,KAuG3B,CAAC"}

package/dist/pd-panel-button/PdPanelButton.d.ts

@@ -1,49 +1,65 @@
-import { CSSResultGroup } from 'lit';
-import { PdBaseUI } from '../base/pd-base-ui';
+import { CSSResultGroup, nothing, TemplateResult } from 'lit';
+import { PdButton } from '../pd-button/PdButton.js';
 /**
- * Ein kombinierter Icon-Button mit optionalem Panel (Dropdown-artig).
+ * Button with dropdown panel functionality. Extends PdButton with panel support.
  *
- * @tag pd-panel-button
+ * @tagname pd-panel-button
+ * @summary Button with dropdown panel that opens on click.
  *
- * @slot default - Inhalt des Panels, das unter dem Button angezeigt wird.
+ * @slot - Content displayed inside the dropdown panel.
  *
- * @event button-clicked - Wird ausgelöst, wenn auf den Button geklickt wird (nur bei `panelButton = false`).
- * @event panel-button-toggled - Wird ausgelöst, wenn das Panel geöffnet oder geschlossen wird.
+ * @event panel-button-toggled - Fired when panel opens or closes. Emits `{open: boolean}`.
  *
- * @cssprop --pd-icon-button-size - Größe des Icons im Button.
- * @cssprop --pd-icon-button-bgcol - Hintergrundfarbe des Buttons.
- * @cssprop --pd-icon-button-bordercol - Randfarbe des Buttons.
- * @cssprop --pd-icon-button-padding - Innenabstand des Buttons.
- * @cssprop --pd-icon-button-gap - Abstand zwischen Icon und Text.
- * @cssprop --pd-icon-button-txtcol - Textfarbe des Buttons.
- * @cssprop --pd-icon-button-font-size - Schriftgröße des Button-Texts.
- * @cssprop --pd-icon-button-panel-bg-col - Hintergrundfarbe des Panels.
- * @cssprop --pd-icon-button-panel-min-width - Mindestbreite des Panels.
- * @cssprop --pd-icon-button-panel-max-width - Maximalbreite des Panels.
- * @cssprop --pd-panel-button-panel-padding - Innenabstand des Panelinhalts.
- * @cssprop --pd-icon-button-selected-bgcol - Hintergrundfarbe bei `selected`.
- * @cssprop --pd-icon-button-selected-txtcol - Textfarbe bei `selected`.
- * @cssprop --pd-icon-button-selected-shadow - Schatteneffekt bei `selected`.
+ * @cssprop --pd-panel-bg-col - Panel background color. Default: `--pd-default-bg-col`.
+ * @cssprop --pd-panel-min-width - Panel minimum width. Default: `auto`.
+ * @cssprop --pd-panel-max-width - Panel maximum width. Default: `300px`.
+ * @cssprop --pd-panel-padding - Panel content padding. Default: `1rem`.
+ * @cssprop --pd-panel-z-index - Panel stacking order. Default: `100`.
  */
-export declare class PdPanelButton extends PdBaseUI {
-    pdButtonIcon?: string;
-    buttonText: string;
-    value?: string;
-    panelButton: boolean;
-    loading: boolean;
-    selected: boolean;
-    primary: boolean;
-    disableOnClickTime: number;
+export declare class PdPanelButton extends PdButton {
+    /** Hide close button in the panel. */
     hideClose: boolean;
-    private _timerDisabled;
+    /** Open panel upward instead of downward. */
+    up: boolean;
+    /** Align panel to the right edge of the button. */
+    right: boolean;
+    /** @ignore */
     private _panelOpen;
+    /** @ignore - Unique ID for aria-controls */
+    private _panelId;
+    /** @ignore - Bound method reference for event listener cleanup */
+    private _boundClosePanel;
+    /** @ignore - Bound method reference for keyboard event listener */
+    private _boundHandleKeyDown;
+    /** @ignore */
+    private _buttonEl;
     static styles: CSSResultGroup;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    protected get buttonAriaExpanded(): "true" | "false";
+    protected get buttonAriaHasPopup(): "true";
+    protected get buttonAriaControls(): string;
+    /**
+     * Renders the toggle arrow inside the button (as suffix content).
+     * Uses activeIcon to switch between up/down arrow states.
+     * activeIcon=true shows arrow up (panel open), activeIcon=false shows arrow down (panel closed).
+     */
+    protected renderSuffixContent(): TemplateResult | typeof nothing;
+    /**
+     * Renders the dropdown panel after the button.
+     */
+    protected renderAfterButton(): TemplateResult | typeof nothing;
+    /**
+     * Override: Click toggles the panel instead of emitting button-clicked.
+     */
+    protected handleClick(): void;
+    /** Focuses the internal button element. */
+    focus(): void;
     private _closePanel;
-    render(): import('lit').TemplateResult<1>;
-    private _onKeyDown;
-    private _buttonClicked;
     private _togglePanel;
+    /** Handles Escape key to close the panel */
+    private _handlePanelKeyDown;
+    /** Handles keyboard events on the close button */
+    private _handleCloseButtonKeyDown;
 }
 //# sourceMappingURL=PdPanelButton.d.ts.map

package/dist/pd-panel-button/PdPanelButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PdPanelButton.d.ts","sourceRoot":"","sources":["../../src/pd-panel-button/PdPanelButton.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAGhD,OAAO,0CAA0C,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,aAAc,SAAQ,QAAQ;IAEzC,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,UAAU,EAAE,MAAM,CAAQ;IAG1B,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,WAAW,EAAE,OAAO,CAAS;IAG7B,OAAO,EAAE,OAAO,CAAS;IAGzB,QAAQ,EAAE,OAAO,CAAS;IAG1B,OAAO,EAAE,OAAO,CAAS;IAGzB,kBAAkB,EAAE,MAAM,CAAM;IAGhC,SAAS,EAAE,OAAO,CAAS;IAI3B,OAAO,CAAC,cAAc,CAAkB;IAGxC,OAAO,CAAC,UAAU,CAAkB;IAEpC,OAAgB,MAAM,EAAE,cAAc,CA2OpC;IAEF,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,WAAW,CAEjB;IAGF,MAAM;IA8CN,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,cAAc;IAsBtB,OAAO,CAAC,YAAY;CAQrB"}
+{"version":3,"file":"PdPanelButton.d.ts","sourceRoot":"","sources":["../../src/pd-panel-button/PdPanelButton.ts"],"names":[],"mappings":"AACA;;;GAGG;AAEH,OAAO,EAAa,cAAc,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAIzE,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAIpD;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,aAAc,SAAQ,QAAQ;IAKzC,sCAAsC;IAEtC,SAAS,UAAS;IAElB,6CAA6C;IAE7C,EAAE,UAAS;IAEX,mDAAmD;IAEnD,KAAK,UAAS;IAMd,cAAc;IAEd,OAAO,CAAC,UAAU,CAAS;IAE3B,4CAA4C;IAC5C,OAAO,CAAC,QAAQ,CAAkC;IAElD,kEAAkE;IAClE,OAAO,CAAC,gBAAgB,CAA+B;IAEvD,mEAAmE;IACnE,OAAO,CAAC,mBAAmB,CAAuC;IAElE,cAAc;IAEd,OAAO,CAAC,SAAS,CAAqB;IAMtC,OAAgB,MAAM,EAAE,cAAc,CA+FpC;IAMO,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAarC,cAAuB,kBAAkB,IAAI,MAAM,GAAG,OAAO,CAE5D;IAED,cAAuB,kBAAkB,IAAI,MAAM,CAElD;IAED,cAAuB,kBAAkB,IAAI,MAAM,CAElD;IAMD;;;;OAIG;cACgB,mBAAmB,IAAI,cAAc,GAAG,OAAO,OAAO;IAUzE;;OAEG;cACgB,iBAAiB,IAAI,cAAc,GAAG,OAAO,OAAO;IAgCvE;;OAEG;cACgB,WAAW,IAAI,IAAI;IAUtC,2CAA2C;IAC3B,KAAK,IAAI,IAAI;IAQ7B,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAWpB,4CAA4C;IAC5C,OAAO,CAAC,mBAAmB;IAO3B,kDAAkD;IAClD,OAAO,CAAC,yBAAyB;CAMlC"}