@prioticket/design-system-web 1.0.0

package/dist/components/pd-dialog.es.js

@@ -0,0 +1,285 @@
+import { css as m, LitElement as p, html as i } from "lit";
+import { property as o, query as h, customElement as y } from "lit/decorators.js";
+import "@material/web/dialog/dialog.js";
+import "@material/web/button/text-button.js";
+import "@material/web/button/filled-button.js";
+import "@material/web/icon/icon.js";
+var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor, e = (n, s, d, l) => {
+  for (var a = l > 1 ? void 0 : l ? u(s, d) : s, r = n.length - 1, c; r >= 0; r--)
+    (c = n[r]) && (a = (l ? c(s, d, a) : c(a)) || a);
+  return l && a && g(s, d, a), a;
+};
+let t = class extends p {
+  constructor() {
+    super(...arguments), this.open = !1, this.size = "medium", this.variant = "custom", this.headline = "", this.primaryAction = "", this.secondaryAction = "", this.closableByBackdrop = !0, this.showCloseButton = !1;
+  }
+  /** Opens the dialog. */
+  openDialog() {
+    this.open = !0, this.dialogElement?.show?.();
+  }
+  /** Closes the dialog. */
+  closeDialog() {
+    this.open = !1, this.dialogElement?.close?.();
+  }
+  /** Toggles the dialog open state. */
+  toggle() {
+    this.open ? this.closeDialog() : this.openDialog();
+  }
+  handleDialogOpen() {
+    this.open = !0, this.dispatchEvent(new CustomEvent("open", {
+      detail: { dialog: this },
+      bubbles: !0
+    }));
+  }
+  handleDialogClose() {
+    this.open = !1, this.dispatchEvent(new CustomEvent("closed", {
+      detail: { dialog: this },
+      bubbles: !0
+    }));
+  }
+  handlePrimaryAction() {
+    this.dispatchEvent(new CustomEvent("primary-action", {
+      detail: { dialog: this },
+      bubbles: !0
+    }));
+  }
+  handleSecondaryAction() {
+    this.dispatchEvent(new CustomEvent("secondary-action", {
+      detail: { dialog: this },
+      bubbles: !0
+    })), this.closeDialog();
+  }
+  render() {
+    return i`
+      <md-dialog
+        ?open=${this.open}
+        ?no-focus-trap=${!this.closableByBackdrop}
+        @open=${this.handleDialogOpen}
+        @closed=${this.handleDialogClose}
+        @cancel=${(n) => {
+      this.closableByBackdrop || n.preventDefault();
+    }}
+      >
+        ${this.headline || this.showCloseButton ? i`
+          <div slot="headline" class="headline-container">
+            ${this.headline ? i`<span class="headline-text">${this.headline}</span>` : ""}
+            ${this.showCloseButton ? i`
+              <md-text-button
+                class="close-button"
+                @click=${this.closeDialog}
+                aria-label="Close dialog"
+              >
+                <md-icon slot="icon">close</md-icon>
+              </md-text-button>
+            ` : ""}
+          </div>
+        ` : ""}
+
+        <div slot="content" class="content-container">
+          <slot></slot>
+        </div>
+
+        ${this.primaryAction || this.secondaryAction ? i`
+          <div slot="actions" class="actions-container">
+            ${this.secondaryAction ? i`
+              <md-text-button
+                class="secondary-action"
+                @click=${this.handleSecondaryAction}
+              >
+                ${this.secondaryAction}
+              </md-text-button>
+            ` : ""}
+            ${this.primaryAction ? i`
+              <md-filled-button
+                class="primary-action"
+                @click=${this.handlePrimaryAction}
+              >
+                ${this.primaryAction}
+              </md-filled-button>
+            ` : ""}
+            <slot name="actions"></slot>
+          </div>
+        ` : i`<slot name="actions" slot="actions"></slot>`}
+      </md-dialog>
+    `;
+  }
+};
+t.styles = m`
+    :host {
+      /* Set default shape for ALL Prioticket dialogs to match card styling */
+      --md-dialog-container-shape: var(--md-sys-shape-corner-small);
+    }
+
+    md-dialog {
+      /* Dialog transitions and animations */
+      transition: all 200ms ease-in-out;
+      
+      /* Material Web dialog customization */
+      --md-dialog-headline-color: var(--md-sys-color-on-surface);
+      --md-dialog-supporting-text-color: var(--md-sys-color-on-surface-variant);
+      --md-dialog-container-color: var(--md-sys-color-surface);
+    }
+
+    .headline-container {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--md-sys-spacing-400, 16px);
+      width: 100%;
+    }
+
+    .headline-text {
+      font-family: var(--md-sys-typescale-headline-small-font);
+      font-size: var(--md-sys-typescale-headline-small-size);
+      font-weight: var(--md-sys-typescale-headline-small-weight);
+      line-height: var(--md-sys-typescale-headline-small-line-height);
+      color: var(--md-sys-color-on-surface);
+      flex: 1;
+    }
+
+    .close-button {
+      flex-shrink: 0;
+      --md-text-button-label-text-size: 0; /* Hide text, show only icon */
+    }
+
+    .content-container {
+      font-family: var(--md-sys-typescale-body-medium-font);
+      font-size: var(--md-sys-typescale-body-medium-size);
+      font-weight: var(--md-sys-typescale-body-medium-weight);
+      line-height: var(--md-sys-typescale-body-medium-line-height);
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .actions-container {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      align-items: center;
+    }
+
+    /* --- Size Variants --- */
+    :host([size='small']) md-dialog {
+      --md-dialog-container-max-width: var(--md-sys-dialog-container-max-width-small, 320px);
+    }
+
+    :host([size='medium']) md-dialog {
+      --md-dialog-container-max-width: var(--md-sys-dialog-container-max-width-medium, 560px);
+    }
+
+    :host([size='large']) md-dialog {
+      --md-dialog-container-max-width: var(--md-sys-dialog-container-max-width-large, 800px);
+    }
+
+    :host([size='fullscreen']) md-dialog {
+      --md-dialog-container-max-width: var(--md-sys-dialog-container-max-width-fullscreen, 100vw);
+      --md-dialog-container-max-height: var(--md-sys-dialog-container-max-height-fullscreen, 100vh);
+      --md-dialog-container-inset-block-start: 0;
+      --md-dialog-container-inset-inline-start: 0;
+      --md-dialog-container-inset-inline-end: 0;
+      --md-dialog-container-inset-block-end: 0;
+    }
+
+    /* --- Variant Styles --- */
+    :host([variant='alert']) .content-container {
+      padding: var(--md-sys-padding-200, 8px) 0;
+    }
+
+    :host([variant='confirm']) .actions-container {
+      gap: var(--md-sys-spacing-300, 12px);
+    }
+
+    :host([variant='form']) .content-container {
+      padding: var(--md-sys-padding-400, 16px) 0;
+    }
+
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+      md-dialog {
+        --md-dialog-container-inset-inline-start: var(--md-sys-spacing-400, 16px);
+        --md-dialog-container-inset-inline-end: var(--md-sys-spacing-400, 16px);
+      }
+
+      :host([size='small']) md-dialog,
+      :host([size='medium']) md-dialog,
+      :host([size='large']) md-dialog {
+        --md-dialog-container-max-width: calc(100vw - var(--md-sys-spacing-800, 32px));
+      }
+
+      :host([size='fullscreen']) md-dialog {
+        --md-dialog-container-inset-inline-start: 0;
+        --md-dialog-container-inset-inline-end: 0;
+      }
+
+      .actions-container {
+        flex-direction: column-reverse;
+        gap: var(--md-sys-spacing-200, 8px);
+      }
+
+      .actions-container md-filled-button,
+      .actions-container md-text-button {
+        width: var(--md-sys-dialog-action-button-width-mobile, 100%);
+        --md-filled-button-container-width: var(--md-sys-dialog-action-button-width-mobile, 100%);
+        --md-text-button-container-width: var(--md-sys-dialog-action-button-width-mobile, 100%);
+      }
+    }
+
+    /* Enhanced Material Web styling */
+    md-dialog::part(scrim) {
+      --md-dialog-scrim-opacity: 0.32;
+    }
+
+    /* Button styling to match pd-button component */
+    .primary-action,
+    .secondary-action,
+    .close-button {
+      /* Apply same border radius as pd-button component */
+      --md-filled-button-container-shape: var(--md-sys-shape-corner-small);
+      --md-text-button-container-shape: var(--md-sys-shape-corner-small);
+      /* Smooth transitions like pd-button */
+      transition: all 150ms ease-in-out;
+    }
+
+    /* Focus and interaction states */
+    .primary-action {
+      --md-filled-button-hover-state-layer-color: var(--md-sys-color-primary);
+      --md-filled-button-pressed-state-layer-color: var(--md-sys-color-primary);
+    }
+
+    .secondary-action {
+      --md-text-button-hover-state-layer-color: var(--md-sys-color-primary);
+      --md-text-button-pressed-state-layer-color: var(--md-sys-color-primary);
+    }
+  `;
+e([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "open", 2);
+e([
+  o({ type: String })
+], t.prototype, "size", 2);
+e([
+  o({ type: String })
+], t.prototype, "variant", 2);
+e([
+  o({ type: String })
+], t.prototype, "headline", 2);
+e([
+  o({ type: String, attribute: "primary-action" })
+], t.prototype, "primaryAction", 2);
+e([
+  o({ type: String, attribute: "secondary-action" })
+], t.prototype, "secondaryAction", 2);
+e([
+  o({ type: Boolean, attribute: "closable-by-backdrop" })
+], t.prototype, "closableByBackdrop", 2);
+e([
+  o({ type: Boolean, attribute: "show-close-button" })
+], t.prototype, "showCloseButton", 2);
+e([
+  h("md-dialog")
+], t.prototype, "dialogElement", 2);
+t = e([
+  y("pd-dialog")
+], t);
+export {
+  t as PdDialog
+};

package/dist/components/pd-expandable-card.cjs.js

@@ -0,0 +1,134 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("lit"),t=require("lit/decorators.js");require("@material/web/icon/icon.js");require("@material/web/iconbutton/icon-button.js");var c=Object.defineProperty,p=Object.getOwnPropertyDescriptor,d=(o,e,n,s)=>{for(var a=s>1?void 0:s?p(e,n):e,r=o.length-1,i;r>=0;r--)(i=o[r])&&(a=(s?i(e,n,a):i(a))||a);return s&&a&&c(e,n,a),a};exports.PdExpandableCard=class extends l.LitElement{constructor(){super(...arguments),this.variant="elevated",this.expanded=!1,this.expandIcon="keyboard_arrow_down",this.collapseIcon="keyboard_arrow_up",this.headerClickable=!1,this._expanded=!1}connectedCallback(){super.connectedCallback(),this._expanded=this.expanded}toggle(){this._expanded=!this._expanded,this._dispatchExpandEvent()}expand(){this._expanded||(this._expanded=!0,this._dispatchExpandEvent())}collapse(){this._expanded&&(this._expanded=!1,this._dispatchExpandEvent())}_dispatchExpandEvent(){const e=this._expanded?"expand":"collapse";this.dispatchEvent(new CustomEvent(e,{detail:{expanded:this._expanded},bubbles:!0,composed:!0}))}_handleToggle(){this.toggle()}_handleHeaderClick(e){this.headerClickable&&(e.target.closest("md-icon-button")||this.toggle())}render(){const e=`card ${this.variant}`;return l.html`
+      <div class="${e}">
+        <div 
+          class="header ${this.headerClickable?"clickable":""}" 
+          @click=${this._handleHeaderClick}
+        >
+          <div class="header-content">
+            <slot name="header"></slot>
+          </div>
+          <md-icon-button
+            class="expand-button"
+            @click=${this._handleToggle}
+            aria-label=${this._expanded?"Collapse":"Expand"}
+          >
+            <md-icon class="expand-icon ${this._expanded?"expanded":""}">${this.expandIcon}</md-icon>
+          </md-icon-button>
+        </div>
+        
+        <div class="content ${this._expanded?"expanded":"collapsed"}">
+          <div class="content-inner">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `}};exports.PdExpandableCard.styles=l.css`
+    :host {
+      display: block;
+      font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    }
+
+    .card {
+      border-radius: var(--md-sys-shape-corner-small, 12px);
+      overflow: hidden;
+      transition: all var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-standard, ease);
+      position: relative;
+    }
+
+    .card.elevated {
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #000000);
+      box-shadow: var(--md-sys-elevation-level1, 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15));
+    }
+
+    .card.filled {
+      background: var(--md-sys-color-surface-variant, #f3f3f3);
+      color: var(--md-sys-color-on-surface-variant, #000000);
+    }
+
+    .card.outlined {
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #000000);
+      border: 1px solid var(--md-sys-color-outline, #cccccc);
+    }
+
+    /* Header */
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--md-sys-spacing-400, 16px);
+      min-height: 48px;
+    }
+
+    .header.clickable {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .header.clickable:hover {
+      background: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.08));
+    }
+
+    .header-content {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: var(--md-sys-spacing-300, 12px);
+    }
+
+    /* Expand button */
+    .expand-button {
+      flex-shrink: 0;
+      --md-icon-button-icon-size: 24px;
+      --md-icon-button-state-layer-size: 40px;
+    }
+
+    .expand-icon {
+      transition: transform var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized, ease);
+    }
+
+    .expand-icon.expanded {
+      transform: rotate(180deg);
+    }
+
+    /* Content */
+    .content {
+      overflow: hidden;
+      transition: all var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized, ease);
+    }
+
+    .content.collapsed {
+      max-height: 0;
+      opacity: 0;
+    }
+
+    .content.expanded {
+      max-height: 1000px; /* Large enough for most content */
+      opacity: 1;
+    }
+
+    .content-inner {
+      padding: 0 var(--md-sys-spacing-400, 16px) var(--md-sys-spacing-400, 16px);
+    }
+
+    /* Accessibility */
+    @media (prefers-reduced-motion: reduce) {
+      .card,
+      .expand-icon,
+      .content {
+        transition: none;
+      }
+    }
+
+    /* Focus styles */
+    .expand-button:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary, #6750a4);
+      outline-offset: 2px;
+    }
+
+    .header.clickable:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary, #6750a4);
+      outline-offset: -2px;
+    }
+  `;d([t.property({type:String})],exports.PdExpandableCard.prototype,"variant",2);d([t.property({type:Boolean})],exports.PdExpandableCard.prototype,"expanded",2);d([t.property({type:String,attribute:"expand-icon"})],exports.PdExpandableCard.prototype,"expandIcon",2);d([t.property({type:String,attribute:"collapse-icon"})],exports.PdExpandableCard.prototype,"collapseIcon",2);d([t.property({type:Boolean,attribute:"header-clickable"})],exports.PdExpandableCard.prototype,"headerClickable",2);d([t.state()],exports.PdExpandableCard.prototype,"_expanded",2);exports.PdExpandableCard=d([t.customElement("pd-expandable-card")],exports.PdExpandableCard);

package/dist/components/pd-expandable-card.es.js

@@ -0,0 +1,205 @@
+import { css as l, LitElement as p, html as m } from "lit";
+import { property as o, state as x, customElement as h } from "lit/decorators.js";
+import "@material/web/icon/icon.js";
+import "@material/web/iconbutton/icon-button.js";
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, s = (a, n, r, d) => {
+  for (var t = d > 1 ? void 0 : d ? f(n, r) : n, i = a.length - 1, c; i >= 0; i--)
+    (c = a[i]) && (t = (d ? c(n, r, t) : c(t)) || t);
+  return d && t && v(n, r, t), t;
+};
+let e = class extends p {
+  constructor() {
+    super(...arguments), this.variant = "elevated", this.expanded = !1, this.expandIcon = "keyboard_arrow_down", this.collapseIcon = "keyboard_arrow_up", this.headerClickable = !1, this._expanded = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._expanded = this.expanded;
+  }
+  /** Toggles the expanded state */
+  toggle() {
+    this._expanded = !this._expanded, this._dispatchExpandEvent();
+  }
+  /** Expands the card */
+  expand() {
+    this._expanded || (this._expanded = !0, this._dispatchExpandEvent());
+  }
+  /** Collapses the card */
+  collapse() {
+    this._expanded && (this._expanded = !1, this._dispatchExpandEvent());
+  }
+  _dispatchExpandEvent() {
+    const a = this._expanded ? "expand" : "collapse";
+    this.dispatchEvent(new CustomEvent(a, {
+      detail: { expanded: this._expanded },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _handleToggle() {
+    this.toggle();
+  }
+  _handleHeaderClick(a) {
+    this.headerClickable && (a.target.closest("md-icon-button") || this.toggle());
+  }
+  render() {
+    const a = `card ${this.variant}`;
+    return m`
+      <div class="${a}">
+        <div 
+          class="header ${this.headerClickable ? "clickable" : ""}" 
+          @click=${this._handleHeaderClick}
+        >
+          <div class="header-content">
+            <slot name="header"></slot>
+          </div>
+          <md-icon-button
+            class="expand-button"
+            @click=${this._handleToggle}
+            aria-label=${this._expanded ? "Collapse" : "Expand"}
+          >
+            <md-icon class="expand-icon ${this._expanded ? "expanded" : ""}">${this.expandIcon}</md-icon>
+          </md-icon-button>
+        </div>
+        
+        <div class="content ${this._expanded ? "expanded" : "collapsed"}">
+          <div class="content-inner">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+e.styles = l`
+    :host {
+      display: block;
+      font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    }
+
+    .card {
+      border-radius: var(--md-sys-shape-corner-small, 12px);
+      overflow: hidden;
+      transition: all var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-standard, ease);
+      position: relative;
+    }
+
+    .card.elevated {
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #000000);
+      box-shadow: var(--md-sys-elevation-level1, 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15));
+    }
+
+    .card.filled {
+      background: var(--md-sys-color-surface-variant, #f3f3f3);
+      color: var(--md-sys-color-on-surface-variant, #000000);
+    }
+
+    .card.outlined {
+      background: var(--md-sys-color-surface, #ffffff);
+      color: var(--md-sys-color-on-surface, #000000);
+      border: 1px solid var(--md-sys-color-outline, #cccccc);
+    }
+
+    /* Header */
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--md-sys-spacing-400, 16px);
+      min-height: 48px;
+    }
+
+    .header.clickable {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .header.clickable:hover {
+      background: var(--md-sys-color-primary-container, rgba(103, 80, 164, 0.08));
+    }
+
+    .header-content {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: var(--md-sys-spacing-300, 12px);
+    }
+
+    /* Expand button */
+    .expand-button {
+      flex-shrink: 0;
+      --md-icon-button-icon-size: 24px;
+      --md-icon-button-state-layer-size: 40px;
+    }
+
+    .expand-icon {
+      transition: transform var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized, ease);
+    }
+
+    .expand-icon.expanded {
+      transform: rotate(180deg);
+    }
+
+    /* Content */
+    .content {
+      overflow: hidden;
+      transition: all var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized, ease);
+    }
+
+    .content.collapsed {
+      max-height: 0;
+      opacity: 0;
+    }
+
+    .content.expanded {
+      max-height: 1000px; /* Large enough for most content */
+      opacity: 1;
+    }
+
+    .content-inner {
+      padding: 0 var(--md-sys-spacing-400, 16px) var(--md-sys-spacing-400, 16px);
+    }
+
+    /* Accessibility */
+    @media (prefers-reduced-motion: reduce) {
+      .card,
+      .expand-icon,
+      .content {
+        transition: none;
+      }
+    }
+
+    /* Focus styles */
+    .expand-button:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary, #6750a4);
+      outline-offset: 2px;
+    }
+
+    .header.clickable:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary, #6750a4);
+      outline-offset: -2px;
+    }
+  `;
+s([
+  o({ type: String })
+], e.prototype, "variant", 2);
+s([
+  o({ type: Boolean })
+], e.prototype, "expanded", 2);
+s([
+  o({ type: String, attribute: "expand-icon" })
+], e.prototype, "expandIcon", 2);
+s([
+  o({ type: String, attribute: "collapse-icon" })
+], e.prototype, "collapseIcon", 2);
+s([
+  o({ type: Boolean, attribute: "header-clickable" })
+], e.prototype, "headerClickable", 2);
+s([
+  x()
+], e.prototype, "_expanded", 2);
+e = s([
+  h("pd-expandable-card")
+], e);
+export {
+  e as PdExpandableCard
+};