@progressive-development/pd-forms 0.9.1 → 1.0.0

package/dist/pd-button/PdButton.js

@@ -1,6 +1,8 @@
-import { css, html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { css, nothing, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { PdBaseUI } from '../base/pd-base-ui.js';
+import '@progressive-development/pd-icon/pd-icon';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,122 +18,521 @@ class PdButton extends PdBaseUI {
     super(...arguments);
     this.primary = false;
     this.gradient = false;
+    this.selected = false;
     this.disabled = false;
+    this.loading = false;
+    this.fullWidth = false;
     this.text = "Ok";
+    this.iconPosition = "start";
+    this.size = "md";
+    this.type = "button";
+    this._isPressed = false;
   }
   static {
+    // ============================================================================
+    // STYLES
+    // ============================================================================
     this.styles = [
       PdBaseUI.styles,
       css`
+      /* ========================================
+         HOST ELEMENT
+         ======================================== */
       :host {
+        display: inline-block;
         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
-         */
-
-        margin: 0.5rem;
-        margin-left: 0;
-        pointer-events: none;
       }
 
-      .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([full-width]) {
+        display: block;
+        width: 100%;
+      }
+
+      /* Grid span mode - fill grid cell width */
+      :host([span]) {
+        display: block;
+        width: 100%;
+      }
+
+      /* Add label-height padding to align with labeled inputs in form-row */
+      :host([row-label-padding]) {
+        padding-top: var(--pd-input-label-font-size, 1em);
+      }
+
+      :host([span]) button {
+        width: 100%;
+        /* Fit Inputs in PdFormRow */
+        --_height: var(--pd-input-field-height, 40px);
+        --_min-height: var(--pd-input-field-height, 40px);
+      }
+
+      /* Size presets via scale - these set --pd-button-scale which is read by button */
+      :host([size="sm"]) {
+        --pd-button-scale: 0.75;
+      }
+      :host([size="lg"]) {
+        --pd-button-scale: 1.25;
       }
+      :host([size="xl"]) {
+        --pd-button-scale: 1.5;
+      }
+      /* Note: size="md" intentionally omitted so external --pd-button-scale can work */
+
+      /* ========================================
+         BUTTON ELEMENT
+         ======================================== */
+      button {
+        /* Scale factor - read from host or external, default 1 */
+        --_scale: var(--pd-button-scale, 1);
 
-      :host(:not([disabled])) .button-div:hover {
-        box-shadow: var(
-          --pd-button-box-shadow-hover,
-          -1px 1px 2px var(--pd-default-dark-col)
+        /* Scale-based dimensions */
+        --_height: var(--pd-button-height, calc(2.5rem * var(--_scale)));
+        --_min-height: var(
+          --pd-button-min-height,
+          44px
+        ); /* Touch target minimum */
+        --_padding-x: var(--pd-button-padding, calc(1rem * var(--_scale)));
+        --_padding-y: calc(0.5rem * var(--_scale));
+        --_font-size: var(--pd-button-font-size, calc(1rem * var(--_scale)));
+        --_border-radius: var(--pd-button-border-radius, var(--pd-radius-md));
+        --_gap: var(--pd-button-gap, calc(0.5rem * var(--_scale)));
+        /* Backward compatibility: --pd-button-width maps to --pd-button-min-width */
+        --_width: var(--pd-button-width, var(--pd-button-min-width, auto));
+
+        /* Colors - Default state (matches pd-panel-button) */
+        --_bg-col: var(--pd-button-bg-col, var(--pd-default-col));
+        --_font-col: var(--pd-button-font-col, var(--pd-on-primary-col));
+        --_border-col: var(
+          --pd-button-border-col,
+          var(--pd-default-darker-col)
         );
-        background-color: var(
+
+        /* Colors - Hover state */
+        --_bg-col-hover: 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);
-      }
+        --_font-col-hover: var(
+          --pd-button-font-col-hover,
+          var(--pd-on-secondary-col)
+        );
 
-      :host(:not([disabled])[primary]) .button-div:hover {
-        background-color: var(
+        /* Colors - Primary state (matches pd-panel-button) */
+        --_primary-bg-col: var(
+          --pd-button-primary-bg-col,
+          var(--pd-secondary-col)
+        );
+        --_primary-font-col: var(
+          --pd-button-primary-font-col,
+          var(--pd-on-secondary-col)
+        );
+        --_primary-bg-col-hover: 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)
+
+        /* Colors - Disabled state (matches pd-panel-button) */
+        --_bg-col-disabled: var(
+          --pd-button-bg-col-disabled,
+          var(--pd-default-disabled-col)
+        );
+        --_font-col-disabled: var(
+          --pd-button-font-col-disabled,
+          var(--pd-on-disabled-col)
         );
-      }
 
-      :host([primary]) .button-div {
-        background-color: var(
-          --pd-button-primary-bg-col,
+        /* Colors - Selected state (matches pd-panel-button) */
+        --_selected-bg-col: var(
+          --pd-button-selected-bg-col,
+          var(--pd-secondary-light-col)
+        );
+        --_selected-font-col: var(
+          --pd-button-selected-font-col,
           var(--pd-default-col)
         );
-        color: var(--pd-button-primary-font-col, var(--pd-default-bg-col));
+        --_selected-shadow: var(
+          --pd-button-selected-shadow,
+          var(--pd-shadow-inset-md),
+          var(--pd-shadow-outline)
+        );
+
+        /* Gradient colors */
+        --_gradient-start: var(
+          --pd-button-gradient-start,
+          var(--pd-default-col)
+        );
+        --_gradient-end: var(--pd-button-gradient-end, var(--pd-secondary-col));
+
+        /* Focus styling */
+        --_focus-color: var(--pd-focus-ring-col);
+        --_focus-width: 2px;
+        --_focus-offset: 2px;
+
+        /* Transition timing (matches pd-panel-button) */
+        --_transition-duration: 0.3s;
+
+        /* Reset native button styles */
+        all: unset;
+        box-sizing: border-box;
+
+        /* Layout */
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--_gap);
+
+        /* Sizing - use min-height instead of height to allow growth when text wraps */
+        width: var(--_width);
+        min-width: var(--_width);
+        min-height: max(var(--_height), var(--_min-height));
+        padding: var(--_padding-y) var(--_padding-x);
+
+        /* Typography */
+        font-family: inherit;
+        font-size: var(--_font-size);
+        font-weight: var(--pd-button-font-weight, 600);
+        line-height: 1.2;
+        text-align: center;
+        white-space: var(--pd-button-white-space, nowrap);
+
+        /* Appearance */
+        background-color: var(--_bg-col);
+        background-image: linear-gradient(hsla(0, 0%, 100%, 0.15), transparent);
+        color: var(--_font-col);
+        border: 1px solid var(--_border-col);
+        border-radius: var(--_border-radius);
+        text-shadow: var(--pd-text-shadow-sm);
+
+        /* Interaction */
+        cursor: pointer;
+        user-select: none;
+        -webkit-tap-highlight-color: transparent;
+
+        /* Transitions (matches pd-panel-button) */
+        transition:
+          background-color var(--_transition-duration) ease,
+          color var(--_transition-duration) ease,
+          border-color var(--_transition-duration) ease,
+          box-shadow var(--_transition-duration) ease;
       }
 
-      :host([gradient]) .button-div {
+      :host([full-width]) button {
+        width: 100%;
+      }
+
+      /* ========================================
+         HOVER STATE
+         ======================================== */
+      button:hover:not(:disabled) {
+        background-color: var(--_bg-col-hover);
+        color: var(--_font-col-hover);
+      }
+
+      /* ========================================
+         ACTIVE/PRESSED STATE
+         Note: Using only inset box-shadow without transform
+         to prevent visual jumping on click.
+         ======================================== */
+      button:active:not(:disabled),
+      button.pressed:not(:disabled) {
+        box-shadow: var(--pd-shadow-inset-sm);
+      }
+
+      /* ========================================
+         FOCUS STATE (keyboard navigation)
+         ======================================== */
+      button:focus-visible {
+        outline: var(--_focus-width) solid var(--_focus-color);
+        outline-offset: var(--_focus-offset);
+      }
+
+      /* ========================================
+         PRIMARY VARIANT
+         ======================================== */
+      :host([primary]) button {
+        background-color: var(--_primary-bg-col);
+        color: var(--_primary-font-col);
+        text-shadow: none;
+      }
+
+      :host([primary]) button:hover:not(:disabled) {
+        background-color: var(--_primary-bg-col-hover);
+      }
+
+      /* ========================================
+         GRADIENT VARIANT
+         ======================================== */
+      :host([gradient]) button {
         background: linear-gradient(
           to right,
-          var(--my-background-gradient-color, red) 0%,
-          var(--my-background-color, blue) 100%
+          var(--_gradient-start) 0%,
+          var(--_gradient-end) 100%
         );
+        border-color: transparent;
       }
 
-      :host([disabled]) .button-div {
-        cursor: auto;
-        border-color: var(--pd-default-disabled-col);
-        background-color: var(
-          --pd-button-bg-col-disabled,
+      :host([gradient]) button:hover:not(:disabled) {
+        opacity: 0.9;
+        background: linear-gradient(
+          to right,
+          var(--_gradient-start) 0%,
+          var(--_gradient-end) 100%
+        );
+      }
+
+      /* ========================================
+         SELECTED STATE (matches pd-panel-button)
+         Used for toggle buttons and button groups.
+         ======================================== */
+      :host([selected]:not([disabled]):not([loading])) button {
+        background-color: var(--_selected-bg-col);
+        color: var(--_selected-font-col);
+        --pd-icon-col: var(--_selected-font-col);
+        --pd-icon-col-active: var(--_selected-font-col);
+        box-shadow: var(--_selected-shadow);
+        text-shadow: none;
+      }
+
+      :host([selected]:not([disabled]):not([loading])) button:hover {
+        background-color: var(--_selected-bg-col);
+        opacity: 0.9;
+      }
+
+      /* ========================================
+         DISABLED STATE (matches pd-panel-button)
+         ======================================== */
+      button:disabled,
+      :host([loading]) button {
+        background: linear-gradient(
+          to bottom,
+          var(--_bg-col-disabled),
           var(--pd-default-disabled-col)
         );
-        color: var(--pd-button-font-col-disabled, black);
-        --pd-button-border: var(--pd-button-border-disabled);
+        color: var(--_font-col-disabled);
+        border-color: var(--pd-default-disabled-col);
+        cursor: not-allowed;
+        opacity: 0.6;
+        text-shadow: none;
+        pointer-events: none;
       }
 
-      a {
+      /* ========================================
+         LOADING STATE
+         ======================================== */
+      .loader {
+        display: inline-block;
+        width: calc(1em * var(--_scale));
+        height: calc(1em * var(--_scale));
+        border: 2px solid var(--pd-secondary-col);
+        border-top-color: var(--pd-secondary-light-col);
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      /* ========================================
+         SLOTS
+         ======================================== */
+      ::slotted(*) {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .label {
         display: inline-block;
-        text-decoration: none;
-        white-space: nowrap;
-        margin: 0.5rem;
-        pointer-events: none;
+      }
+
+      /* ========================================
+         ICON STYLING
+         ======================================== */
+      .button-icon {
+        --pd-icon-size: var(
+          --pd-button-icon-size,
+          calc(1.25em * var(--_scale))
+        );
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+
+      /* Icon color inherits from button text color */
+      .button-icon {
+        --pd-icon-col: currentColor;
+        --pd-icon-col-active: currentColor;
+      }
+
+      /* Icon-only button adjustments */
+      :host([icon-only]) button {
+        padding: var(--_padding-y);
+        aspect-ratio: 1;
+        min-width: var(--_min-height);
       }
     `
     ];
   }
+  // ============================================================================
+  // RENDER
+  // ============================================================================
   render() {
+    const isInteractive = !this.disabled && !this.loading;
+    const isIconOnly = this.icon && !this.text;
+    const showIconAtStart = this.icon && this.iconPosition === "start";
+    const showIconAtEnd = this.icon && this.iconPosition === "end";
+    const buttonClasses = {
+      pressed: this._isPressed
+    };
+    if (isIconOnly) {
+      this.setAttribute("icon-only", "");
+    } else {
+      this.removeAttribute("icon-only");
+    }
     return html`
-      <div class="button-div" @click=${this._handleClick}>
-        <a ?disabled=${this.disabled}>${this.text}</a>
-      </div>
+      <button
+        part="button"
+        type="${this.type}"
+        ?disabled="${this.disabled || this.loading}"
+        aria-disabled="${this.disabled || this.loading}"
+        aria-busy="${this.loading}"
+        .ariaPressed="${this.selected ? "true" : null}"
+        aria-label="${isIconOnly ? this.iconLabel || this.icon : nothing}"
+        aria-expanded="${this.buttonAriaExpanded}"
+        aria-haspopup="${this.buttonAriaHasPopup}"
+        aria-controls="${this.buttonAriaControls}"
+        class="${classMap(buttonClasses)}"
+        @click="${this.handleClick}"
+        @mousedown="${this._handleMouseDown}"
+        @mouseup="${this._handleMouseUp}"
+        @mouseleave="${this._handleMouseUp}"
+        @keydown="${this._handleKeyDown}"
+        @keyup="${this._handleKeyUp}"
+      >
+        ${this.loading ? html`<span class="loader" part="loader"></span>` : html`
+              ${showIconAtStart ? this.renderIcon() : nothing}
+              <slot name="prefix"></slot>
+            `}
+        ${this.text ? html`<span class="label" part="label">${this.text}</span>` : nothing}
+        ${isInteractive ? html`
+              <slot name="suffix"></slot>
+              ${showIconAtEnd ? this.renderIcon() : nothing}
+              ${this.renderSuffixContent()}
+            ` : nothing}
+      </button>
+      ${this.renderAfterButton()}
     `;
   }
-  _handleClick() {
-    if (!this.disabled) {
-      this.dispatchEvent(
-        new CustomEvent("button-clicked", {
-          detail: this.value,
-          bubbles: true,
-          composed: true
-        })
-      );
+  // ============================================================================
+  // PROTECTED RENDER HOOKS (for subclasses like PdPanelButton)
+  // ============================================================================
+  /**
+   * Override point for aria-expanded attribute on the button.
+   * Used by PdPanelButton to indicate panel open state.
+   */
+  get buttonAriaExpanded() {
+    return "undefined";
+  }
+  /**
+   * Override point for aria-haspopup attribute on the button.
+   * Used by PdPanelButton to indicate dropdown behavior.
+   */
+  get buttonAriaHasPopup() {
+    return "false";
+  }
+  /**
+   * Override point for aria-controls attribute on the button.
+   * Used by PdPanelButton to link button with panel.
+   */
+  get buttonAriaControls() {
+    return nothing;
+  }
+  /**
+   * Override point for suffix content inside the button.
+   * Used by PdPanelButton for the toggle arrow.
+   */
+  renderSuffixContent() {
+    return nothing;
+  }
+  /**
+   * Override point for content rendered after the button element.
+   * Used by PdPanelButton for the dropdown panel.
+   */
+  renderAfterButton() {
+    return nothing;
+  }
+  /**
+   * Renders the icon element. Protected for subclass access.
+   */
+  renderIcon() {
+    if (!this.icon) return nothing;
+    return html`
+      <pd-icon class="button-icon" part="icon" icon="${this.icon}"></pd-icon>
+    `;
+  }
+  // ============================================================================
+  // EVENT HANDLERS
+  // ============================================================================
+  /**
+   * Handles click events on the button.
+   * Protected so subclasses like PdPanelButton can override.
+   */
+  handleClick() {
+    if (!this.disabled && !this.loading) {
+      this._emitButtonClicked();
+    }
+  }
+  /**
+   * Handles mousedown for visual pressed state.
+   */
+  _handleMouseDown() {
+    if (!this.disabled && !this.loading) {
+      this._isPressed = true;
+    }
+  }
+  /**
+   * Handles mouseup/mouseleave to reset pressed state.
+   */
+  _handleMouseUp() {
+    this._isPressed = false;
+  }
+  /**
+   * Handles keydown events for keyboard activation.
+   */
+  _handleKeyDown(event) {
+    if (this.disabled || this.loading) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this._isPressed = true;
+    }
+  }
+  /**
+   * Handles keyup events to complete keyboard activation.
+   */
+  _handleKeyUp(event) {
+    if (this.disabled || this.loading) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      this._isPressed = false;
+      this.handleClick();
     }
   }
+  /**
+   * Dispatches the button-clicked event.
+   * @fires button-clicked
+   */
+  _emitButtonClicked() {
+    this.dispatchEvent(
+      new CustomEvent("button-clicked", {
+        detail: this.value,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
 }
 __decorateClass([
   property({ type: Boolean, reflect: true })
@@ -139,14 +540,44 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], PdButton.prototype, "gradient");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdButton.prototype, "selected");
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], PdButton.prototype, "disabled");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], PdButton.prototype, "loading");
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "full-width" })
+], PdButton.prototype, "fullWidth");
 __decorateClass([
   property({ type: String })
 ], PdButton.prototype, "text");
+__decorateClass([
+  property({ type: String })
+], PdButton.prototype, "icon");
+__decorateClass([
+  property({ type: String, attribute: "icon-label" })
+], PdButton.prototype, "iconLabel");
+__decorateClass([
+  property({ type: String, attribute: "icon-position" })
+], PdButton.prototype, "iconPosition");
 __decorateClass([
   property({ type: String })
 ], PdButton.prototype, "value");
+__decorateClass([
+  property({ type: String, reflect: true })
+], PdButton.prototype, "size");
+__decorateClass([
+  property({ type: String })
+], PdButton.prototype, "type");
+__decorateClass([
+  property({ type: String, reflect: true })
+], PdButton.prototype, "span");
+__decorateClass([
+  state()
+], PdButton.prototype, "_isPressed");
 
 export { PdButton };