@prioticket/design-system-web 1.0.0

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

@@ -0,0 +1,279 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lit"),a=require("lit/decorators.js"),n=require("lit/directives/class-map.js");var u=Object.defineProperty,y=Object.getOwnPropertyDescriptor,p=(c,e,t,s)=>{for(var r=s>1?void 0:s?y(e,t):e,i=c.length-1,l;i>=0;i--)(l=c[i])&&(r=(s?l(e,t,r):l(r))||r);return s&&r&&u(e,t,r),r};exports.PdStepper=class extends o.LitElement{constructor(){super(...arguments),this.steps=[],this.currentStep=0,this.orientation="horizontal",this.linear=!0,this.showContent=!0,this.alternativeLabel=!1,this._completedSteps=new Set}render(){const e=this.orientation==="vertical",t={stepper:!0,vertical:e,horizontal:!e,"alternative-label":this.alternativeLabel&&!e};return o.html`
+      <div class=${n.classMap(t)}>
+        ${this.steps.map((s,r)=>this._renderStep(s,r))}
+        ${this.showContent&&!e?this._renderContent():""}
+      </div>
+    `}_renderStep(e,t){const s=this.currentStep===t,r=this._completedSteps.has(t)||e.completed,i=e.error&&!r,l=!this.linear||t<=this.currentStep||r,d=this.orientation==="vertical",m={step:!0,active:s,completed:r||!1,error:i||!1,clickable:l||!1,optional:e.optional||!1},v=r?"✓":(t+1).toString(),h=t===this.steps.length-1;return o.html`
+      <div class=${n.classMap(m)}>
+        <div class="step-header" @click=${()=>this._handleStepClick(t,l||!1)}>
+          <div class="step-icon">
+            <span class="step-number">${i?"!":v}</span>
+          </div>
+          ${h?"":o.html`<div class="step-connector"></div>`}
+          <div class="step-label-container">
+            <span class="step-label">${e.label}</span>
+            ${e.optional?o.html`<span class="step-optional">Optional</span>`:""}
+          </div>
+        </div>
+        ${d&&this.showContent&&s&&e.content?o.html`
+          <div class="step-content">
+            ${e.content}
+          </div>
+        `:""}
+      </div>
+    `}_renderContent(){const e=this.steps[this.currentStep];return e?.content?o.html`
+      <div class="stepper-content">
+        ${e.content}
+      </div>
+    `:""}_handleStepClick(e,t){if(!t)return;const s=this.currentStep;this.currentStep=e,this.dispatchEvent(new CustomEvent("step-change",{detail:{currentStep:e,previousStep:s},bubbles:!0,composed:!0}))}completeStep(e){this._completedSteps.add(e),this.requestUpdate()}resetStep(e){this._completedSteps.delete(e),this.requestUpdate()}next(){this.currentStep<this.steps.length-1&&(this.completeStep(this.currentStep),this.currentStep++,this._dispatchStepChange())}back(){this.currentStep>0&&(this.currentStep--,this._dispatchStepChange())}_dispatchStepChange(){this.dispatchEvent(new CustomEvent("step-change",{detail:{currentStep:this.currentStep},bubbles:!0,composed:!0}))}};exports.PdStepper.styles=o.css`
+    :host {
+      display: block;
+      font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    }
+
+    .stepper {
+      display: flex;
+      position: relative;
+    }
+
+    .stepper.horizontal {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+
+    .stepper.vertical {
+      flex-direction: column;
+    }
+
+    .stepper.alternative-label .step {
+      flex-direction: column;
+      text-align: center;
+    }
+
+    /* Step container */
+    .step {
+      display: flex;
+      position: relative;
+      min-height: 72px;
+    }
+
+    .stepper.horizontal .step {
+      flex: 1;
+      flex-direction: row;
+      align-items: flex-start;
+    }
+
+    .stepper.vertical .step {
+      flex-direction: column;
+      width: 100%;
+    }
+
+    /* Step header */
+    .step-header {
+      display: flex;
+      align-items: flex-start;
+      cursor: default;
+      position: relative;
+      padding: var(--md-sys-spacing-medium, 8px);
+    }
+
+    .step.clickable .step-header {
+      cursor: pointer;
+    }
+
+    .stepper.horizontal .step-header {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      width: 100%;
+    }
+
+    .stepper.vertical .step-header {
+      flex-direction: row;
+      align-items: flex-start;
+      text-align: left;
+    }
+
+    .stepper.alternative-label .step-header {
+      flex-direction: column;
+    }
+
+    /* Step icon */
+    .step-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background-color: var(--pd-stepper-inactive-color, var(--md-sys-color-surface-variant, #f3f3f3));
+      color: var(--md-sys-color-on-surface-variant, #666);
+      border: 2px solid var(--pd-stepper-inactive-color, var(--md-sys-color-outline-variant, #ddd));
+      transition: all 0.2s ease;
+      z-index: 1;
+    }
+
+    .step.active .step-icon {
+      background-color: var(--pd-stepper-active-color, var(--md-sys-color-primary, #6750a4));
+      color: var(--md-sys-color-on-primary, #fff);
+      border-color: var(--pd-stepper-active-color, var(--md-sys-color-primary, #6750a4));
+    }
+
+    .step.completed .step-icon {
+      background-color: var(--pd-stepper-completed-color, var(--md-sys-color-primary, #6750a4));
+      color: var(--md-sys-color-on-primary, #fff);
+      border-color: var(--pd-stepper-completed-color, var(--md-sys-color-primary, #6750a4));
+    }
+
+    .step.error .step-icon {
+      background-color: var(--pd-stepper-error-color, var(--md-sys-color-error, #ba1a1a));
+      color: var(--md-sys-color-on-error, #fff);
+      border-color: var(--pd-stepper-error-color, var(--md-sys-color-error, #ba1a1a));
+    }
+
+    .step-number {
+      font-size: var(--md-sys-typescale-label-medium-size, 12px);
+      font-weight: var(--md-sys-typescale-label-medium-weight, 500);
+      line-height: 1;
+    }
+
+    /* Step connector */
+    .step-connector {
+      position: absolute;
+      background-color: var(--pd-stepper-connector-color, var(--md-sys-color-outline-variant, #ddd));
+      transition: background-color 0.2s ease;
+    }
+
+    .stepper.horizontal .step-connector {
+      height: 2px;
+      left: calc(50% + 20px);
+      right: calc(-50% + 20px);
+      top: calc(var(--md-sys-spacing-medium, 8px) + 20px);
+      width: calc(100% - 40px);
+    }
+
+    .stepper.vertical .step-connector {
+      width: 2px;
+      left: calc(var(--md-sys-spacing-medium, 8px) + 20px);
+      top: calc(var(--md-sys-spacing-medium, 8px) + 40px);
+      bottom: calc(-100% + var(--md-sys-spacing-medium, 8px));
+      height: calc(100% - 40px);
+    }
+
+    .step.completed .step-connector {
+      background-color: var(--pd-stepper-completed-color, var(--md-sys-color-primary, #6750a4));
+    }
+
+    .step.active .step-connector {
+      background-color: var(--pd-stepper-completed-color, var(--md-sys-color-primary, #6750a4));
+    }
+
+    /* Step labels */
+    .step-label-container {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .stepper.horizontal .step-label-container {
+      margin-top: var(--md-sys-spacing-small, 8px);
+      align-items: center;
+    }
+
+    .stepper.vertical .step-label-container {
+      margin-left: var(--md-sys-spacing-medium, 16px);
+      align-items: flex-start;
+      margin-top: 8px;
+    }
+
+    .step-label {
+      font-size: var(--md-sys-typescale-body-medium-size, 14px);
+      font-weight: var(--md-sys-typescale-body-medium-weight, 400);
+      color: var(--md-sys-color-on-surface-variant, #666);
+      line-height: 1.4;
+      margin: 0;
+    }
+
+    .step.active .step-label {
+      color: var(--md-sys-color-on-surface, #000);
+      font-weight: var(--md-sys-typescale-body-medium-weight, 500);
+    }
+
+    .step.completed .step-label {
+      color: var(--md-sys-color-on-surface, #000);
+    }
+
+    .step.error .step-label {
+      color: var(--pd-stepper-error-color, var(--md-sys-color-error, #ba1a1a));
+    }
+
+    .step-optional {
+      font-size: var(--md-sys-typescale-body-small-size, 12px);
+      color: var(--md-sys-color-on-surface-variant, #999);
+      font-style: italic;
+    }
+
+    /* Step content */
+    .step-content {
+      margin-left: calc(var(--md-sys-spacing-medium, 8px) + 40px + var(--md-sys-spacing-medium, 16px));
+      margin-top: var(--md-sys-spacing-medium, 16px);
+      margin-bottom: var(--md-sys-spacing-large, 24px);
+      padding: var(--md-sys-spacing-medium, 16px);
+      border-radius: var(--md-sys-shape-corner-small, 8px);
+      background-color: var(--md-sys-color-surface-container-lowest, #fff);
+    }
+
+    .stepper-content {
+      margin-top: var(--md-sys-spacing-large, 24px);
+      padding: var(--md-sys-spacing-large, 24px);
+      border-radius: var(--md-sys-shape-corner-medium, 12px);
+      background-color: var(--md-sys-color-surface-container-lowest, #fff);
+      border: 1px solid var(--md-sys-color-outline-variant, #ddd);
+    }
+
+    /* Hover states */
+    .step.clickable .step-header:hover .step-icon {
+      transform: scale(1.1);
+    }
+
+    .step.clickable .step-header:hover .step-label {
+      color: var(--md-sys-color-on-surface, #000);
+    }
+
+    /* Focus states for accessibility */
+    .step.clickable .step-header:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary, #6750a4);
+      outline-offset: 2px;
+      border-radius: var(--md-sys-shape-corner-small, 8px);
+    }
+
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+      .stepper.horizontal {
+        flex-direction: column;
+      }
+
+      .stepper.horizontal .step {
+        flex-direction: row;
+      }
+
+      .stepper.horizontal .step-header {
+        flex-direction: row;
+        text-align: left;
+      }
+
+      .stepper.horizontal .step-connector {
+        left: calc(var(--md-sys-spacing-medium, 8px) + 20px);
+        top: calc(var(--md-sys-spacing-medium, 8px) + 40px);
+        width: 2px;
+        height: calc(100% - 40px);
+        right: auto;
+      }
+
+      .stepper.horizontal .step-label-container {
+        margin-top: 8px;
+        margin-left: var(--md-sys-spacing-medium, 16px);
+        align-items: flex-start;
+      }
+    }
+  `;p([a.property({type:Array})],exports.PdStepper.prototype,"steps",2);p([a.property({type:Number})],exports.PdStepper.prototype,"currentStep",2);p([a.property({type:String})],exports.PdStepper.prototype,"orientation",2);p([a.property({type:Boolean})],exports.PdStepper.prototype,"linear",2);p([a.property({type:Boolean})],exports.PdStepper.prototype,"showContent",2);p([a.property({type:Boolean})],exports.PdStepper.prototype,"alternativeLabel",2);p([a.state()],exports.PdStepper.prototype,"_completedSteps",2);exports.PdStepper=p([a.customElement("pd-stepper")],exports.PdStepper);

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

@@ -0,0 +1,375 @@
+import { css as u, LitElement as y, html as l } from "lit";
+import { property as c, state as f, customElement as g } from "lit/decorators.js";
+import { classMap as d } from "lit/directives/class-map.js";
+var x = Object.defineProperty, b = Object.getOwnPropertyDescriptor, p = (e, t, s, r) => {
+  for (var o = r > 1 ? void 0 : r ? b(t, s) : t, i = e.length - 1, n; i >= 0; i--)
+    (n = e[i]) && (o = (r ? n(t, s, o) : n(o)) || o);
+  return r && o && x(t, s, o), o;
+};
+let a = class extends y {
+  constructor() {
+    super(...arguments), this.steps = [], this.currentStep = 0, this.orientation = "horizontal", this.linear = !0, this.showContent = !0, this.alternativeLabel = !1, this._completedSteps = /* @__PURE__ */ new Set();
+  }
+  render() {
+    const e = this.orientation === "vertical", t = {
+      stepper: !0,
+      vertical: e,
+      horizontal: !e,
+      "alternative-label": this.alternativeLabel && !e
+    };
+    return l`
+      <div class=${d(t)}>
+        ${this.steps.map((s, r) => this._renderStep(s, r))}
+        ${this.showContent && !e ? this._renderContent() : ""}
+      </div>
+    `;
+  }
+  _renderStep(e, t) {
+    const s = this.currentStep === t, r = this._completedSteps.has(t) || e.completed, o = e.error && !r, i = !this.linear || t <= this.currentStep || r, n = this.orientation === "vertical", m = {
+      step: !0,
+      active: s,
+      completed: r || !1,
+      error: o || !1,
+      clickable: i || !1,
+      optional: e.optional || !1
+    }, v = r ? "✓" : (t + 1).toString(), h = t === this.steps.length - 1;
+    return l`
+      <div class=${d(m)}>
+        <div class="step-header" @click=${() => this._handleStepClick(t, i || !1)}>
+          <div class="step-icon">
+            <span class="step-number">${o ? "!" : v}</span>
+          </div>
+          ${h ? "" : l`<div class="step-connector"></div>`}
+          <div class="step-label-container">
+            <span class="step-label">${e.label}</span>
+            ${e.optional ? l`<span class="step-optional">Optional</span>` : ""}
+          </div>
+        </div>
+        ${n && this.showContent && s && e.content ? l`
+          <div class="step-content">
+            ${e.content}
+          </div>
+        ` : ""}
+      </div>
+    `;
+  }
+  _renderContent() {
+    const e = this.steps[this.currentStep];
+    return e?.content ? l`
+      <div class="stepper-content">
+        ${e.content}
+      </div>
+    ` : "";
+  }
+  _handleStepClick(e, t) {
+    if (!t) return;
+    const s = this.currentStep;
+    this.currentStep = e, this.dispatchEvent(new CustomEvent("step-change", {
+      detail: { currentStep: e, previousStep: s },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  /** Mark a step as completed */
+  completeStep(e) {
+    this._completedSteps.add(e), this.requestUpdate();
+  }
+  /** Mark a step as incomplete */
+  resetStep(e) {
+    this._completedSteps.delete(e), this.requestUpdate();
+  }
+  /** Go to next step */
+  next() {
+    this.currentStep < this.steps.length - 1 && (this.completeStep(this.currentStep), this.currentStep++, this._dispatchStepChange());
+  }
+  /** Go to previous step */
+  back() {
+    this.currentStep > 0 && (this.currentStep--, this._dispatchStepChange());
+  }
+  _dispatchStepChange() {
+    this.dispatchEvent(new CustomEvent("step-change", {
+      detail: { currentStep: this.currentStep },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+};
+a.styles = u`
+    :host {
+      display: block;
+      font-family: var(--md-sys-typescale-body-large-font, 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    }
+
+    .stepper {
+      display: flex;
+      position: relative;
+    }
+
+    .stepper.horizontal {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+
+    .stepper.vertical {
+      flex-direction: column;
+    }
+
+    .stepper.alternative-label .step {
+      flex-direction: column;
+      text-align: center;
+    }
+
+    /* Step container */
+    .step {
+      display: flex;
+      position: relative;
+      min-height: 72px;
+    }
+
+    .stepper.horizontal .step {
+      flex: 1;
+      flex-direction: row;
+      align-items: flex-start;
+    }
+
+    .stepper.vertical .step {
+      flex-direction: column;
+      width: 100%;
+    }
+
+    /* Step header */
+    .step-header {
+      display: flex;
+      align-items: flex-start;
+      cursor: default;
+      position: relative;
+      padding: var(--md-sys-spacing-medium, 8px);
+    }
+
+    .step.clickable .step-header {
+      cursor: pointer;
+    }
+
+    .stepper.horizontal .step-header {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      width: 100%;
+    }
+
+    .stepper.vertical .step-header {
+      flex-direction: row;
+      align-items: flex-start;
+      text-align: left;
+    }
+
+    .stepper.alternative-label .step-header {
+      flex-direction: column;
+    }
+
+    /* Step icon */
+    .step-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background-color: var(--pd-stepper-inactive-color, var(--md-sys-color-surface-variant, #f3f3f3));
+      color: var(--md-sys-color-on-surface-variant, #666);
+      border: 2px solid var(--pd-stepper-inactive-color, var(--md-sys-color-outline-variant, #ddd));
+      transition: all 0.2s ease;
+      z-index: 1;
+    }
+
+    .step.active .step-icon {
+      background-color: var(--pd-stepper-active-color, var(--md-sys-color-primary, #6750a4));
+      color: var(--md-sys-color-on-primary, #fff);
+      border-color: var(--pd-stepper-active-color, var(--md-sys-color-primary, #6750a4));
+    }
+
+    .step.completed .step-icon {
+      background-color: var(--pd-stepper-completed-color, var(--md-sys-color-primary, #6750a4));
+      color: var(--md-sys-color-on-primary, #fff);
+      border-color: var(--pd-stepper-completed-color, var(--md-sys-color-primary, #6750a4));
+    }
+
+    .step.error .step-icon {
+      background-color: var(--pd-stepper-error-color, var(--md-sys-color-error, #ba1a1a));
+      color: var(--md-sys-color-on-error, #fff);
+      border-color: var(--pd-stepper-error-color, var(--md-sys-color-error, #ba1a1a));
+    }
+
+    .step-number {
+      font-size: var(--md-sys-typescale-label-medium-size, 12px);
+      font-weight: var(--md-sys-typescale-label-medium-weight, 500);
+      line-height: 1;
+    }
+
+    /* Step connector */
+    .step-connector {
+      position: absolute;
+      background-color: var(--pd-stepper-connector-color, var(--md-sys-color-outline-variant, #ddd));
+      transition: background-color 0.2s ease;
+    }
+
+    .stepper.horizontal .step-connector {
+      height: 2px;
+      left: calc(50% + 20px);
+      right: calc(-50% + 20px);
+      top: calc(var(--md-sys-spacing-medium, 8px) + 20px);
+      width: calc(100% - 40px);
+    }
+
+    .stepper.vertical .step-connector {
+      width: 2px;
+      left: calc(var(--md-sys-spacing-medium, 8px) + 20px);
+      top: calc(var(--md-sys-spacing-medium, 8px) + 40px);
+      bottom: calc(-100% + var(--md-sys-spacing-medium, 8px));
+      height: calc(100% - 40px);
+    }
+
+    .step.completed .step-connector {
+      background-color: var(--pd-stepper-completed-color, var(--md-sys-color-primary, #6750a4));
+    }
+
+    .step.active .step-connector {
+      background-color: var(--pd-stepper-completed-color, var(--md-sys-color-primary, #6750a4));
+    }
+
+    /* Step labels */
+    .step-label-container {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .stepper.horizontal .step-label-container {
+      margin-top: var(--md-sys-spacing-small, 8px);
+      align-items: center;
+    }
+
+    .stepper.vertical .step-label-container {
+      margin-left: var(--md-sys-spacing-medium, 16px);
+      align-items: flex-start;
+      margin-top: 8px;
+    }
+
+    .step-label {
+      font-size: var(--md-sys-typescale-body-medium-size, 14px);
+      font-weight: var(--md-sys-typescale-body-medium-weight, 400);
+      color: var(--md-sys-color-on-surface-variant, #666);
+      line-height: 1.4;
+      margin: 0;
+    }
+
+    .step.active .step-label {
+      color: var(--md-sys-color-on-surface, #000);
+      font-weight: var(--md-sys-typescale-body-medium-weight, 500);
+    }
+
+    .step.completed .step-label {
+      color: var(--md-sys-color-on-surface, #000);
+    }
+
+    .step.error .step-label {
+      color: var(--pd-stepper-error-color, var(--md-sys-color-error, #ba1a1a));
+    }
+
+    .step-optional {
+      font-size: var(--md-sys-typescale-body-small-size, 12px);
+      color: var(--md-sys-color-on-surface-variant, #999);
+      font-style: italic;
+    }
+
+    /* Step content */
+    .step-content {
+      margin-left: calc(var(--md-sys-spacing-medium, 8px) + 40px + var(--md-sys-spacing-medium, 16px));
+      margin-top: var(--md-sys-spacing-medium, 16px);
+      margin-bottom: var(--md-sys-spacing-large, 24px);
+      padding: var(--md-sys-spacing-medium, 16px);
+      border-radius: var(--md-sys-shape-corner-small, 8px);
+      background-color: var(--md-sys-color-surface-container-lowest, #fff);
+    }
+
+    .stepper-content {
+      margin-top: var(--md-sys-spacing-large, 24px);
+      padding: var(--md-sys-spacing-large, 24px);
+      border-radius: var(--md-sys-shape-corner-medium, 12px);
+      background-color: var(--md-sys-color-surface-container-lowest, #fff);
+      border: 1px solid var(--md-sys-color-outline-variant, #ddd);
+    }
+
+    /* Hover states */
+    .step.clickable .step-header:hover .step-icon {
+      transform: scale(1.1);
+    }
+
+    .step.clickable .step-header:hover .step-label {
+      color: var(--md-sys-color-on-surface, #000);
+    }
+
+    /* Focus states for accessibility */
+    .step.clickable .step-header:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary, #6750a4);
+      outline-offset: 2px;
+      border-radius: var(--md-sys-shape-corner-small, 8px);
+    }
+
+    /* Responsive adjustments */
+    @media (max-width: 768px) {
+      .stepper.horizontal {
+        flex-direction: column;
+      }
+
+      .stepper.horizontal .step {
+        flex-direction: row;
+      }
+
+      .stepper.horizontal .step-header {
+        flex-direction: row;
+        text-align: left;
+      }
+
+      .stepper.horizontal .step-connector {
+        left: calc(var(--md-sys-spacing-medium, 8px) + 20px);
+        top: calc(var(--md-sys-spacing-medium, 8px) + 40px);
+        width: 2px;
+        height: calc(100% - 40px);
+        right: auto;
+      }
+
+      .stepper.horizontal .step-label-container {
+        margin-top: 8px;
+        margin-left: var(--md-sys-spacing-medium, 16px);
+        align-items: flex-start;
+      }
+    }
+  `;
+p([
+  c({ type: Array })
+], a.prototype, "steps", 2);
+p([
+  c({ type: Number })
+], a.prototype, "currentStep", 2);
+p([
+  c({ type: String })
+], a.prototype, "orientation", 2);
+p([
+  c({ type: Boolean })
+], a.prototype, "linear", 2);
+p([
+  c({ type: Boolean })
+], a.prototype, "showContent", 2);
+p([
+  c({ type: Boolean })
+], a.prototype, "alternativeLabel", 2);
+p([
+  f()
+], a.prototype, "_completedSteps", 2);
+a = p([
+  g("pd-stepper")
+], a);
+export {
+  a as PdStepper
+};