@prioticket/design-system-web 1.0.0

package/dist/components/pd-segmented-button.es.js

@@ -0,0 +1,234 @@
+import { css as u, LitElement as p, html as d } from "lit";
+import { property as n, state as g, customElement as h } from "lit/decorators.js";
+import "@material/web/icon/icon.js";
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, t = (a, e, s, i) => {
+  for (var o = i > 1 ? void 0 : i ? b(e, s) : e, c = a.length - 1, m; c >= 0; c--)
+    (m = a[c]) && (o = (i ? m(e, s, o) : m(o)) || o);
+  return i && o && y(e, s, o), o;
+};
+let r = class extends p {
+  constructor() {
+    super(...arguments), this.multiSelect = !1, this.size = "medium", this.disabled = !1, this.selectedValues = [], this._segments = [];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("segment-click", this._handleSegmentClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("segment-click", this._handleSegmentClick);
+  }
+  firstUpdated() {
+    this._updateSegments();
+  }
+  _updateSegments() {
+    const a = this.querySelectorAll("pd-segment-item");
+    this._segments = Array.from(a), this._segments.forEach((e, s) => {
+      e.disabled = this.disabled || e.disabled, e.setAttribute("data-segment-index", s.toString()), this.selectedValues.includes(e.value) && (e.selected = !0);
+    });
+  }
+  _handleSegmentClick(a) {
+    if (this.disabled) return;
+    const e = a.target, s = e.value;
+    this.multiSelect ? this.selectedValues.indexOf(s) > -1 ? (this.selectedValues = this.selectedValues.filter((o) => o !== s), e.selected = !1) : (this.selectedValues = [...this.selectedValues, s], e.selected = !0) : this.selectedValues[0] === s ? (this.selectedValues = [], e.selected = !1) : (this._segments.forEach((i) => i.selected = !1), this.selectedValues = [s], e.selected = !0), this.dispatchEvent(new CustomEvent("selectionchange", {
+      detail: {
+        selectedValues: this.selectedValues,
+        multiSelect: this.multiSelect
+      },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    return d`
+      <div class="segmented-button" role="group">
+        <slot @slotchange=${this._updateSegments}></slot>
+      </div>
+    `;
+  }
+};
+r.styles = u`
+    :host {
+      display: inline-flex;
+      font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    }
+
+    .segmented-button {
+      display: inline-flex;
+      border-radius: var(--md-segmented-button-shape, var(--md-sys-shape-corner-small, 20px));
+      border: 1px solid var(--md-sys-color-outline, #79747e);
+      overflow: hidden;
+      background: var(--md-sys-color-surface, #fef7ff);
+    }
+
+    :host([disabled]) .segmented-button {
+      border-color: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+    }
+
+    /* Size variants */
+    :host([size='small']) {
+      --md-segmented-button-container-height: var(--md-sys-button-container-height-small, 2rem);
+    }
+
+    :host([size='medium']) {
+      --md-segmented-button-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+    }
+
+    :host([size='large']) {
+      --md-segmented-button-container-height: var(--md-sys-button-container-height-large, 3rem);
+    }
+
+    ::slotted(pd-segment-item) {
+      border-right: 1px solid var(--md-sys-color-outline, #79747e);
+    }
+
+    ::slotted(pd-segment-item:last-child) {
+      border-right: none;
+    }
+
+    :host([disabled]) ::slotted(pd-segment-item) {
+      border-right-color: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+    }
+  `;
+t([
+  n({ type: Boolean, attribute: "multi-select" })
+], r.prototype, "multiSelect", 2);
+t([
+  n({ type: String, reflect: !0 })
+], r.prototype, "size", 2);
+t([
+  n({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+t([
+  n({ type: Array })
+], r.prototype, "selectedValues", 2);
+t([
+  g()
+], r.prototype, "_segments", 2);
+r = t([
+  h("pd-segmented-button")
+], r);
+let l = class extends p {
+  constructor() {
+    super(...arguments), this.value = "", this.selected = !1, this.disabled = !1, this.icon = "", this.iconOnly = !1;
+  }
+  _handleClick() {
+    this.disabled || this.dispatchEvent(new CustomEvent("segment-click", {
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    return d`
+      <button
+        class="segment ${this.selected ? "selected" : ""} ${this.iconOnly ? "icon-only" : ""}"
+        ?disabled=${this.disabled}
+        @click=${this._handleClick}
+        aria-pressed=${this.selected}
+      >
+        ${this.icon ? d`<md-icon class="segment-icon">${this.icon}</md-icon>` : ""}
+        ${this.iconOnly ? "" : d`<span class="segment-label"><slot></slot></span>`}
+      </button>
+    `;
+  }
+};
+l.styles = u`
+    :host {
+      display: inline-flex;
+    }
+
+    .segment {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--md-sys-spacing-200, 8px);
+      padding: 0 var(--md-sys-spacing-400, 16px);
+      height: var(--md-segmented-button-container-height, 2.5rem);
+      border: none;
+      background: transparent;
+      color: var(--md-sys-color-on-surface, #1d1b20);
+      font-family: inherit;
+      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+      font-weight: var(--md-sys-typescale-label-large-weight, 500);
+      cursor: pointer;
+      transition: all 150ms ease-in-out;
+      position: relative;
+      outline: none;
+      min-width: 48px;
+    }
+
+    .segment.icon-only {
+      padding: 0;
+      width: var(--md-segmented-button-container-height, 2.5rem);
+    }
+
+    .segment:hover:not(:disabled) {
+      background: var(--md-sys-color-on-surface-opacity-08, rgba(29, 27, 32, 0.08));
+    }
+
+    .segment:focus-visible {
+      background: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+      outline: 2px solid var(--md-sys-color-primary, #6750a4);
+      outline-offset: -2px;
+    }
+
+    .segment:active:not(:disabled) {
+      background: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+    }
+
+    .segment.selected {
+      background: var(--md-sys-color-secondary-container, #e8def8);
+      color: var(--md-sys-color-on-secondary-container, #1d192b);
+    }
+
+    .segment.selected:hover:not(:disabled) {
+      background: var(--md-sys-color-secondary-container, #e8def8);
+      filter: brightness(0.95);
+    }
+
+    .segment:disabled {
+      color: var(--md-sys-color-on-surface-opacity-38, rgba(29, 27, 32, 0.38));
+      cursor: not-allowed;
+    }
+
+    .segment.selected:disabled {
+      background: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+      color: var(--md-sys-color-on-surface-opacity-38, rgba(29, 27, 32, 0.38));
+    }
+
+    .segment-icon {
+      --md-icon-size: 18px;
+    }
+
+    .segment-label {
+      white-space: nowrap;
+    }
+
+    /* Accessibility */
+    @media (prefers-reduced-motion: reduce) {
+      .segment {
+        transition: none;
+      }
+    }
+  `;
+t([
+  n({ type: String })
+], l.prototype, "value", 2);
+t([
+  n({ type: Boolean, reflect: !0 })
+], l.prototype, "selected", 2);
+t([
+  n({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+t([
+  n({ type: String })
+], l.prototype, "icon", 2);
+t([
+  n({ type: Boolean, attribute: "icon-only" })
+], l.prototype, "iconOnly", 2);
+l = t([
+  h("pd-segment-item")
+], l);
+export {
+  l as PdSegmentItem,
+  r as PdSegmentedButton
+};

package/dist/components/pd-segmented-stepper.cjs.js

@@ -0,0 +1,191 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lit"),r=require("lit/decorators.js");require("@material/web/icon/icon.js");var n=Object.defineProperty,d=Object.getOwnPropertyDescriptor,i=(p,e,t,s)=>{for(var a=s>1?void 0:s?d(e,t):e,c=p.length-1,l;c>=0;c--)(l=p[c])&&(a=(s?l(e,t,a):l(a))||a);return s&&a&&n(e,t,a),a};exports.PdSegmentedStepper=class extends o.LitElement{constructor(){super(...arguments),this.activeStep=0,this.completedSteps=[],this.size="medium",this.disabled=!1,this.allowStepNavigation=!0,this._steps=[]}connectedCallback(){super.connectedCallback(),this.addEventListener("stepper-item-click",this._handleStepClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("stepper-item-click",this._handleStepClick)}firstUpdated(){this._updateSteps()}updated(e){super.updated(e),(e.has("activeStep")||e.has("completedSteps")||e.has("disabled")||e.has("allowStepNavigation"))&&this._updateSteps()}_updateSteps(){const e=this.querySelectorAll("pd-stepper-item");this._steps=Array.from(e),this._steps.forEach((t,s)=>{t.disabled=this.disabled||t.disabled,t.setAttribute("data-step-index",s.toString()),t.stepNumber=s+1,this.completedSteps.includes(s)?t.state="completed":s===this.activeStep?t.state="active":t.state="pending",t.clickable=this.allowStepNavigation&&(t.state==="completed"||t.state==="active"&&!this.disabled)})}_handleStepClick(e){if(this.disabled)return;const t=e.target,s=parseInt(t.getAttribute("data-step-index")||"0");this.allowStepNavigation&&(this.completedSteps.includes(s)||s===this.activeStep)&&this.goToStep(s)}goToStep(e){if(e>=0&&e<this._steps.length){const t=this.activeStep;this.activeStep=e,this._updateSteps(),this.dispatchEvent(new CustomEvent("stepchange",{detail:{activeStep:this.activeStep,previousStep:t,totalSteps:this._steps.length},bubbles:!0,composed:!0}))}}nextStep(){this.activeStep<this._steps.length-1&&this.goToStep(this.activeStep+1)}previousStep(){this.activeStep>0&&this.goToStep(this.activeStep-1)}completeCurrentStep(){this.completeStep(this.activeStep)}completeStep(e){this.completedSteps.includes(e)||(this.completedSteps=[...this.completedSteps,e].sort((t,s)=>t-s),this._updateSteps(),this.dispatchEvent(new CustomEvent("stepcomplete",{detail:{completedStep:e,completedSteps:this.completedSteps,totalSteps:this._steps.length},bubbles:!0,composed:!0}))),e===this.activeStep&&this.activeStep<this._steps.length-1&&this.nextStep()}reset(){this.activeStep=0,this.completedSteps=[],this._updateSteps()}render(){return o.html`
+      <div class="segmented-stepper" role="group" aria-label="Progress stepper">
+        <slot @slotchange=${this._updateSteps}></slot>
+      </div>
+    `}};exports.PdSegmentedStepper.styles=o.css`
+    :host {
+      display: inline-flex;
+      font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    }
+
+    .segmented-stepper {
+      display: inline-flex;
+      border-radius: var(--md-sys-shape-corner-small, 8px);
+      border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+      overflow: hidden;
+      background: var(--md-sys-color-surface, #fef7ff);
+    }
+
+    :host([disabled]) .segmented-stepper {
+      border-color: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+      background: var(--md-sys-color-surface-variant, #e7e0ec);
+    }
+
+    /* Size variants */
+    :host([size='small']) {
+      --md-stepper-container-height: var(--md-sys-button-container-height-small, 2rem);
+    }
+
+    :host([size='medium']) {
+      --md-stepper-container-height: var(--md-sys-button-container-height-medium, 2.5rem);
+    }
+
+    :host([size='large']) {
+      --md-stepper-container-height: var(--md-sys-button-container-height-large, 3rem);
+    }
+
+    ::slotted(pd-stepper-item) {
+      border-right: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
+    }
+
+    ::slotted(pd-stepper-item:last-child) {
+      border-right: none;
+    }
+
+    :host([disabled]) ::slotted(pd-stepper-item) {
+      border-right-color: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+    }
+  `;i([r.property({type:Number,attribute:"active-step"})],exports.PdSegmentedStepper.prototype,"activeStep",2);i([r.property({type:Array,attribute:"completed-steps"})],exports.PdSegmentedStepper.prototype,"completedSteps",2);i([r.property({type:String,reflect:!0})],exports.PdSegmentedStepper.prototype,"size",2);i([r.property({type:Boolean,reflect:!0})],exports.PdSegmentedStepper.prototype,"disabled",2);i([r.property({type:Boolean,attribute:"allow-step-navigation"})],exports.PdSegmentedStepper.prototype,"allowStepNavigation",2);i([r.state()],exports.PdSegmentedStepper.prototype,"_steps",2);exports.PdSegmentedStepper=i([r.customElement("pd-segmented-stepper")],exports.PdSegmentedStepper);exports.PdStepperItem=class extends o.LitElement{constructor(){super(...arguments),this.stepNumber=1,this.state="pending",this.disabled=!1,this.clickable=!1,this.icon=""}_handleClick(){this.disabled||!this.clickable||this.dispatchEvent(new CustomEvent("stepper-item-click",{detail:{stepNumber:this.stepNumber},bubbles:!0,composed:!0}))}render(){const e=this.state==="completed"&&!this.icon,t=this.state!=="completed"&&!this.icon;return o.html`
+      <button
+        class="step ${this.state} ${this.clickable?"clickable":""}"
+        ?disabled=${this.disabled}
+        @click=${this._handleClick}
+        aria-current=${this.state==="active"?"step":"false"}
+        aria-label="Step ${this.stepNumber}: ${this.state}"
+      >
+        <div class="step-indicator">
+          ${e?o.html`<md-icon class="check-icon">check</md-icon>`:""}
+          ${this.icon?o.html`<md-icon class="step-icon">${this.icon}</md-icon>`:""}
+          ${t?o.html`<span class="step-number">${this.stepNumber}</span>`:""}
+        </div>
+        <span class="step-label"><slot></slot></span>
+      </button>
+    `}};exports.PdStepperItem.styles=o.css`
+    :host {
+      display: inline-flex;
+    }
+
+    .step {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--md-sys-spacing-200, 8px);
+      padding: 0 var(--md-sys-spacing-300, 12px);
+      height: var(--md-stepper-container-height, 2.5rem);
+      border: none;
+      background: transparent;
+      color: var(--md-sys-color-on-surface-variant, #49454f);
+      font-family: inherit;
+      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+      font-weight: var(--md-sys-typescale-label-large-weight, 500);
+      cursor: default;
+      transition: all 150ms ease-in-out;
+      position: relative;
+      outline: none;
+      min-width: fit-content;
+    }
+
+    .step.clickable {
+      cursor: pointer;
+    }
+
+    .step.clickable:hover:not(:disabled) {
+      background: var(--md-sys-color-surface-container-highest, rgba(29, 27, 32, 0.08));
+    }
+
+    .step.clickable:focus-visible {
+      background: var(--md-sys-color-surface-container-highest, rgba(29, 27, 32, 0.12));
+      outline: 2px solid var(--md-sys-color-primary, #6750a4);
+      outline-offset: -2px;
+    }
+
+    .step.clickable:active:not(:disabled) {
+      background: var(--md-sys-color-surface-container-highest, rgba(29, 27, 32, 0.16));
+    }
+
+    /* Step states */
+    .step.pending {
+      color: var(--md-sys-color-on-surface-variant, #49454f);
+    }
+
+    .step.active {
+      background: var(--md-sys-color-primary-container, #eaddff);
+      color: var(--md-sys-color-on-primary-container, #21005d);
+      font-weight: 600;
+    }
+
+    .step.completed {
+      background: var(--md-sys-color-secondary-container, #e8def8);
+      color: var(--md-sys-color-on-secondary-container, #1d192b);
+    }
+
+    .step.disabled {
+      color: var(--md-sys-color-on-surface-opacity-38, rgba(29, 27, 32, 0.38));
+      cursor: not-allowed;
+    }
+
+    /* Step indicator */
+    .step-indicator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: var(--md-sys-color-outline-variant, #cac4d0);
+      color: var(--md-sys-color-on-surface, #1d1b20);
+      font-size: 0.75rem;
+      font-weight: 600;
+      flex-shrink: 0;
+      transition: all 150ms ease-in-out;
+    }
+
+    .step.pending .step-indicator {
+      background: var(--md-sys-color-outline-variant, #cac4d0);
+      color: var(--md-sys-color-on-surface-variant, #49454f);
+    }
+
+    .step.active .step-indicator {
+      background: var(--md-sys-color-primary, #6750a4);
+      color: var(--md-sys-color-on-primary, #ffffff);
+    }
+
+    .step.completed .step-indicator {
+      background: var(--md-sys-color-secondary, #625b71);
+      color: var(--md-sys-color-on-secondary, #ffffff);
+    }
+
+    .step.disabled .step-indicator {
+      background: var(--md-sys-color-on-surface-opacity-12, rgba(29, 27, 32, 0.12));
+      color: var(--md-sys-color-on-surface-opacity-38, rgba(29, 27, 32, 0.38));
+    }
+
+    /* Icons */
+    .check-icon,
+    .step-icon {
+      --md-icon-size: 14px;
+    }
+
+    .step-number {
+      font-size: 0.75rem;
+      font-weight: 600;
+      line-height: 1;
+    }
+
+    .step-label {
+      white-space: nowrap;
+    }
+
+    /* Accessibility */
+    @media (prefers-reduced-motion: reduce) {
+      .step,
+      .step-indicator {
+        transition: none;
+      }
+    }
+
+    /* Focus ring for keyboard navigation */
+    .step:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary, #6750a4);
+      outline-offset: 2px;
+    }
+  `;i([r.property({type:Number,attribute:"step-number"})],exports.PdStepperItem.prototype,"stepNumber",2);i([r.property({type:String,reflect:!0})],exports.PdStepperItem.prototype,"state",2);i([r.property({type:Boolean,reflect:!0})],exports.PdStepperItem.prototype,"disabled",2);i([r.property({type:Boolean})],exports.PdStepperItem.prototype,"clickable",2);i([r.property({type:String})],exports.PdStepperItem.prototype,"icon",2);exports.PdStepperItem=i([r.customElement("pd-stepper-item")],exports.PdStepperItem);