@prioticket/design-system-web 1.0.0

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

@@ -0,0 +1,333 @@
+import { css as h, LitElement as m, html as c } from "lit";
+import { property as o, state as b, customElement as u } from "lit/decorators.js";
+import "@material/web/icon/icon.js";
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (e, t, s, l) => {
+  for (var p = l > 1 ? void 0 : l ? f(t, s) : t, n = e.length - 1, d; n >= 0; n--)
+    (d = e[n]) && (p = (l ? d(t, s, p) : d(p)) || p);
+  return l && p && v(t, s, p), p;
+};
+let a = class extends m {
+  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);
+  }
+  /** Navigate to a specific step. */
+  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
+      }));
+    }
+  }
+  /** Move to the next step. */
+  nextStep() {
+    this.activeStep < this._steps.length - 1 && this.goToStep(this.activeStep + 1);
+  }
+  /** Move to the previous step. */
+  previousStep() {
+    this.activeStep > 0 && this.goToStep(this.activeStep - 1);
+  }
+  /** Mark the current step as completed and move to the next step. */
+  completeCurrentStep() {
+    this.completeStep(this.activeStep);
+  }
+  /** Mark a specific step as completed. */
+  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 all steps to pending state. */
+  reset() {
+    this.activeStep = 0, this.completedSteps = [], this._updateSteps();
+  }
+  render() {
+    return c`
+      <div class="segmented-stepper" role="group" aria-label="Progress stepper">
+        <slot @slotchange=${this._updateSteps}></slot>
+      </div>
+    `;
+  }
+};
+a.styles = h`
+    :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([
+  o({ type: Number, attribute: "active-step" })
+], a.prototype, "activeStep", 2);
+i([
+  o({ type: Array, attribute: "completed-steps" })
+], a.prototype, "completedSteps", 2);
+i([
+  o({ type: String, reflect: !0 })
+], a.prototype, "size", 2);
+i([
+  o({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled", 2);
+i([
+  o({ type: Boolean, attribute: "allow-step-navigation" })
+], a.prototype, "allowStepNavigation", 2);
+i([
+  b()
+], a.prototype, "_steps", 2);
+a = i([
+  u("pd-segmented-stepper")
+], a);
+let r = class extends m {
+  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 c`
+      <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 ? c`<md-icon class="check-icon">check</md-icon>` : ""}
+          ${this.icon ? c`<md-icon class="step-icon">${this.icon}</md-icon>` : ""}
+          ${t ? c`<span class="step-number">${this.stepNumber}</span>` : ""}
+        </div>
+        <span class="step-label"><slot></slot></span>
+      </button>
+    `;
+  }
+};
+r.styles = h`
+    :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([
+  o({ type: Number, attribute: "step-number" })
+], r.prototype, "stepNumber", 2);
+i([
+  o({ type: String, reflect: !0 })
+], r.prototype, "state", 2);
+i([
+  o({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+i([
+  o({ type: Boolean })
+], r.prototype, "clickable", 2);
+i([
+  o({ type: String })
+], r.prototype, "icon", 2);
+r = i([
+  u("pd-stepper-item")
+], r);
+export {
+  a as PdSegmentedStepper,
+  r as PdStepperItem
+};

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

@@ -0,0 +1,59 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lit"),e=require("lit/decorators.js");require("@material/web/select/filled-select.js");require("@material/web/select/outlined-select.js");require("@material/web/select/select-option.js");require("@material/web/icon/icon.js");var p=Object.defineProperty,c=Object.getOwnPropertyDescriptor,t=(n,r,i,s)=>{for(var l=s>1?void 0:s?c(r,i):r,d=n.length-1,a;d>=0;d--)(a=n[d])&&(l=(s?a(r,i,l):a(l))||l);return s&&l&&p(r,i,l),l};exports.PdSelect=class extends o.LitElement{constructor(){super(...arguments),this.variant="outlined",this.label="",this.value="",this.disabled=!1,this.required=!1,this.errorText="",this.error=!1,this.supportingText="",this.options=[],this.leadingIcon=""}handleChange(r){r.stopPropagation();const i=r.target;this.value=i.value,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleOpen(){this.trailingIcon?.classList.add("rotated")}handleClose(){this.trailingIcon?.classList.remove("rotated")}render(){const r=o.html`
+      ${this.leadingIcon?o.html`<md-icon slot="leading-icon">${this.leadingIcon}</md-icon>`:""}
+      <md-icon slot="trailing-icon">keyboard_arrow_down</md-icon>
+
+      ${this.options.map(i=>o.html`
+        <md-select-option .value=${i.value} ?disabled=${i.disabled}>
+          <div slot="headline">${i.label}</div>
+        </md-select-option>
+      `)}
+    `;return this.variant==="filled"?o.html`
+        <md-filled-select
+          .label=${this.label}
+          .value=${this.value}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          ?error=${this.error}
+          .errorText=${this.errorText}
+          .supportingText=${this.supportingText}
+          @change=${this.handleChange}
+          @opening=${this.handleOpen}
+          @closed=${this.handleClose}
+        >
+          ${r}
+        </md-filled-select>
+      `:o.html`
+      <md-outlined-select
+        .label=${this.label}
+        .value=${this.value}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        ?error=${this.error}
+        .errorText=${this.errorText}
+        .supportingText=${this.supportingText}
+        @change=${this.handleChange}
+        @opening=${this.handleOpen}
+        @closed=${this.handleClose}
+      >
+        ${r}
+      </md-outlined-select>
+    `}};exports.PdSelect.styles=o.css`
+    :host {
+      display: inline-block;
+      width: 100%;
+      --md-filled-select-text-field-container-shape: var(--md-sys-shape-corner-small);
+      --md-outlined-select-text-field-container-shape: var(--md-sys-shape-corner-small);
+    }
+    md-filled-select,
+    md-outlined-select {
+      width: 100%;
+    }
+
+    [slot="trailing-icon"] {
+      transition: transform var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized, ease);
+    }
+
+    [slot="trailing-icon"].rotated {
+      transform: rotate(180deg);
+    }
+  `;t([e.query("md-filled-select, md-outlined-select")],exports.PdSelect.prototype,"select",2);t([e.query('[slot="trailing-icon"]')],exports.PdSelect.prototype,"trailingIcon",2);t([e.property({type:String})],exports.PdSelect.prototype,"variant",2);t([e.property({type:String})],exports.PdSelect.prototype,"label",2);t([e.property({type:String,reflect:!0})],exports.PdSelect.prototype,"value",2);t([e.property({type:Boolean,reflect:!0})],exports.PdSelect.prototype,"disabled",2);t([e.property({type:Boolean})],exports.PdSelect.prototype,"required",2);t([e.property({type:String,attribute:"error-text"})],exports.PdSelect.prototype,"errorText",2);t([e.property({type:Boolean})],exports.PdSelect.prototype,"error",2);t([e.property({type:String,attribute:"supporting-text"})],exports.PdSelect.prototype,"supportingText",2);t([e.property({type:Array})],exports.PdSelect.prototype,"options",2);t([e.property({type:String,attribute:"leading-icon"})],exports.PdSelect.prototype,"leadingIcon",2);exports.PdSelect=t([e.customElement("pd-select")],exports.PdSelect);

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

@@ -0,0 +1,136 @@
+import { css as c, LitElement as u, html as l } from "lit";
+import { query as h, property as i, customElement as m } from "lit/decorators.js";
+import "@material/web/select/filled-select.js";
+import "@material/web/select/outlined-select.js";
+import "@material/web/select/select-option.js";
+import "@material/web/icon/icon.js";
+var g = Object.defineProperty, y = Object.getOwnPropertyDescriptor, t = (o, r, a, n) => {
+  for (var s = n > 1 ? void 0 : n ? y(r, a) : r, d = o.length - 1, p; d >= 0; d--)
+    (p = o[d]) && (s = (n ? p(r, a, s) : p(s)) || s);
+  return n && s && g(r, a, s), s;
+};
+let e = class extends u {
+  constructor() {
+    super(...arguments), this.variant = "outlined", this.label = "", this.value = "", this.disabled = !1, this.required = !1, this.errorText = "", this.error = !1, this.supportingText = "", this.options = [], this.leadingIcon = "";
+  }
+  handleChange(o) {
+    o.stopPropagation();
+    const r = o.target;
+    this.value = r.value, this.dispatchEvent(new CustomEvent("change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { value: this.value }
+    }));
+  }
+  handleOpen() {
+    this.trailingIcon?.classList.add("rotated");
+  }
+  handleClose() {
+    this.trailingIcon?.classList.remove("rotated");
+  }
+  render() {
+    const o = l`
+      ${this.leadingIcon ? l`<md-icon slot="leading-icon">${this.leadingIcon}</md-icon>` : ""}
+      <md-icon slot="trailing-icon">keyboard_arrow_down</md-icon>
+
+      ${this.options.map((r) => l`
+        <md-select-option .value=${r.value} ?disabled=${r.disabled}>
+          <div slot="headline">${r.label}</div>
+        </md-select-option>
+      `)}
+    `;
+    return this.variant === "filled" ? l`
+        <md-filled-select
+          .label=${this.label}
+          .value=${this.value}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          ?error=${this.error}
+          .errorText=${this.errorText}
+          .supportingText=${this.supportingText}
+          @change=${this.handleChange}
+          @opening=${this.handleOpen}
+          @closed=${this.handleClose}
+        >
+          ${o}
+        </md-filled-select>
+      ` : l`
+      <md-outlined-select
+        .label=${this.label}
+        .value=${this.value}
+        ?disabled=${this.disabled}
+        ?required=${this.required}
+        ?error=${this.error}
+        .errorText=${this.errorText}
+        .supportingText=${this.supportingText}
+        @change=${this.handleChange}
+        @opening=${this.handleOpen}
+        @closed=${this.handleClose}
+      >
+        ${o}
+      </md-outlined-select>
+    `;
+  }
+};
+e.styles = c`
+    :host {
+      display: inline-block;
+      width: 100%;
+      --md-filled-select-text-field-container-shape: var(--md-sys-shape-corner-small);
+      --md-outlined-select-text-field-container-shape: var(--md-sys-shape-corner-small);
+    }
+    md-filled-select,
+    md-outlined-select {
+      width: 100%;
+    }
+
+    [slot="trailing-icon"] {
+      transition: transform var(--md-sys-motion-duration-medium2, 300ms) var(--md-sys-motion-easing-emphasized, ease);
+    }
+
+    [slot="trailing-icon"].rotated {
+      transform: rotate(180deg);
+    }
+  `;
+t([
+  h("md-filled-select, md-outlined-select")
+], e.prototype, "select", 2);
+t([
+  h('[slot="trailing-icon"]')
+], e.prototype, "trailingIcon", 2);
+t([
+  i({ type: String })
+], e.prototype, "variant", 2);
+t([
+  i({ type: String })
+], e.prototype, "label", 2);
+t([
+  i({ type: String, reflect: !0 })
+], e.prototype, "value", 2);
+t([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+t([
+  i({ type: Boolean })
+], e.prototype, "required", 2);
+t([
+  i({ type: String, attribute: "error-text" })
+], e.prototype, "errorText", 2);
+t([
+  i({ type: Boolean })
+], e.prototype, "error", 2);
+t([
+  i({ type: String, attribute: "supporting-text" })
+], e.prototype, "supportingText", 2);
+t([
+  i({ type: Array })
+], e.prototype, "options", 2);
+t([
+  i({ type: String, attribute: "leading-icon" })
+], e.prototype, "leadingIcon", 2);
+e = t([
+  m("pd-select")
+], e);
+export {
+  e as PdSelect
+};

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

@@ -0,0 +1,42 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("lit"),t=require("lit/decorators.js");require("@material/web/slider/slider.js");var u=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=(s,a,e,i)=>{for(var l=i>1?void 0:i?n(a,e):a,d=s.length-1,o;d>=0;d--)(o=s[d])&&(l=(i?o(a,e,l):o(l))||l);return i&&l&&u(a,e,l),l};exports.PdSlider=class extends p.LitElement{constructor(){super(...arguments),this.disabled=!1,this.min=0,this.max=100,this.value=0,this.step=1,this.ticks=!1,this.labeled=!1,this.valueIndicator=!1,this.ariaLabel="",this.ariaLabelStart="",this.ariaLabelEnd=""}render(){const a=this.valueStart!==void 0||this.valueEnd!==void 0;return p.html`
+      <md-slider
+        ?disabled=${this.disabled}
+        min=${this.min}
+        max=${this.max}
+        .value=${this.value}
+        .valueStart=${this.valueStart}
+        .valueEnd=${this.valueEnd}
+        step=${this.step}
+        ?ticks=${this.ticks}
+        ?labeled=${this.labeled}
+        ?range=${a}
+        aria-label=${this.ariaLabel}
+        aria-label-start=${this.ariaLabelStart}
+        aria-label-end=${this.ariaLabelEnd}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+      ></md-slider>
+    `}handleInput(a){const e=a.target;this.value=e.value??0,e.valueStart!==void 0&&(this.valueStart=e.valueStart),e.valueEnd!==void 0&&(this.valueEnd=e.valueEnd),this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value,valueStart:this.valueStart,valueEnd:this.valueEnd}}))}handleChange(a){const e=a.target;this.value=e.value??0,e.valueStart!==void 0&&(this.valueStart=e.valueStart),e.valueEnd!==void 0&&(this.valueEnd=e.valueEnd),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value,valueStart:this.valueStart,valueEnd:this.valueEnd}}))}};exports.PdSlider.styles=p.css`
+    :host {
+      display: inline-block;
+      width: 100%;
+    }
+
+    md-slider {
+      width: 100%;
+      /* Apply Prioticket design system tokens */
+      --md-slider-handle-color: var(--md-sys-color-primary);
+      --md-slider-active-track-color: var(--md-sys-color-primary);
+      --md-slider-inactive-track-color: var(--md-sys-color-outline-variant);
+      --md-slider-handle-shape: var(--md-sys-shape-corner-full);
+      --md-slider-tick-color: var(--md-sys-color-on-surface-variant);
+      --md-slider-label-container-color: var(--md-sys-color-inverse-surface);
+      --md-slider-label-text-color: var(--md-sys-color-inverse-on-surface);
+    }
+
+    :host([disabled]) md-slider {
+      --md-slider-handle-color: var(--md-sys-color-on-surface);
+      --md-slider-active-track-color: var(--md-sys-color-on-surface);
+      opacity: 0.38;
+    }
+  `;r([t.query("md-slider")],exports.PdSlider.prototype,"slider",2);r([t.property({type:Boolean,reflect:!0})],exports.PdSlider.prototype,"disabled",2);r([t.property({type:Number})],exports.PdSlider.prototype,"min",2);r([t.property({type:Number})],exports.PdSlider.prototype,"max",2);r([t.property({type:Number})],exports.PdSlider.prototype,"value",2);r([t.property({type:Number})],exports.PdSlider.prototype,"step",2);r([t.property({type:Boolean})],exports.PdSlider.prototype,"ticks",2);r([t.property({type:Boolean})],exports.PdSlider.prototype,"labeled",2);r([t.property({type:Boolean,attribute:"value-indicator"})],exports.PdSlider.prototype,"valueIndicator",2);r([t.property({type:Number,attribute:"value-start"})],exports.PdSlider.prototype,"valueStart",2);r([t.property({type:Number,attribute:"value-end"})],exports.PdSlider.prototype,"valueEnd",2);r([t.property({type:String,attribute:"aria-label"})],exports.PdSlider.prototype,"ariaLabel",2);r([t.property({type:String,attribute:"aria-label-start"})],exports.PdSlider.prototype,"ariaLabelStart",2);r([t.property({type:String,attribute:"aria-label-end"})],exports.PdSlider.prototype,"ariaLabelEnd",2);exports.PdSlider=r([t.customElement("pd-slider")],exports.PdSlider);

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

@@ -0,0 +1,123 @@
+import { css as u, LitElement as v, html as p } from "lit";
+import { query as h, property as r, customElement as c } from "lit/decorators.js";
+import "@material/web/slider/slider.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (l, t, o, s) => {
+  for (var i = s > 1 ? void 0 : s ? b(t, o) : t, d = l.length - 1, n; d >= 0; d--)
+    (n = l[d]) && (i = (s ? n(t, o, i) : n(i)) || i);
+  return s && i && m(t, o, i), i;
+};
+let e = class extends v {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.min = 0, this.max = 100, this.value = 0, this.step = 1, this.ticks = !1, this.labeled = !1, this.valueIndicator = !1, this.ariaLabel = "", this.ariaLabelStart = "", this.ariaLabelEnd = "";
+  }
+  render() {
+    const l = this.valueStart !== void 0 || this.valueEnd !== void 0;
+    return p`
+      <md-slider
+        ?disabled=${this.disabled}
+        min=${this.min}
+        max=${this.max}
+        .value=${this.value}
+        .valueStart=${this.valueStart}
+        .valueEnd=${this.valueEnd}
+        step=${this.step}
+        ?ticks=${this.ticks}
+        ?labeled=${this.labeled}
+        ?range=${l}
+        aria-label=${this.ariaLabel}
+        aria-label-start=${this.ariaLabelStart}
+        aria-label-end=${this.ariaLabelEnd}
+        @input=${this.handleInput}
+        @change=${this.handleChange}
+      ></md-slider>
+    `;
+  }
+  handleInput(l) {
+    const t = l.target;
+    this.value = t.value ?? 0, t.valueStart !== void 0 && (this.valueStart = t.valueStart), t.valueEnd !== void 0 && (this.valueEnd = t.valueEnd), this.dispatchEvent(new CustomEvent("input", {
+      bubbles: !0,
+      composed: !0,
+      detail: { value: this.value, valueStart: this.valueStart, valueEnd: this.valueEnd }
+    }));
+  }
+  handleChange(l) {
+    const t = l.target;
+    this.value = t.value ?? 0, t.valueStart !== void 0 && (this.valueStart = t.valueStart), t.valueEnd !== void 0 && (this.valueEnd = t.valueEnd), this.dispatchEvent(new CustomEvent("change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { value: this.value, valueStart: this.valueStart, valueEnd: this.valueEnd }
+    }));
+  }
+};
+e.styles = u`
+    :host {
+      display: inline-block;
+      width: 100%;
+    }
+
+    md-slider {
+      width: 100%;
+      /* Apply Prioticket design system tokens */
+      --md-slider-handle-color: var(--md-sys-color-primary);
+      --md-slider-active-track-color: var(--md-sys-color-primary);
+      --md-slider-inactive-track-color: var(--md-sys-color-outline-variant);
+      --md-slider-handle-shape: var(--md-sys-shape-corner-full);
+      --md-slider-tick-color: var(--md-sys-color-on-surface-variant);
+      --md-slider-label-container-color: var(--md-sys-color-inverse-surface);
+      --md-slider-label-text-color: var(--md-sys-color-inverse-on-surface);
+    }
+
+    :host([disabled]) md-slider {
+      --md-slider-handle-color: var(--md-sys-color-on-surface);
+      --md-slider-active-track-color: var(--md-sys-color-on-surface);
+      opacity: 0.38;
+    }
+  `;
+a([
+  h("md-slider")
+], e.prototype, "slider", 2);
+a([
+  r({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+a([
+  r({ type: Number })
+], e.prototype, "min", 2);
+a([
+  r({ type: Number })
+], e.prototype, "max", 2);
+a([
+  r({ type: Number })
+], e.prototype, "value", 2);
+a([
+  r({ type: Number })
+], e.prototype, "step", 2);
+a([
+  r({ type: Boolean })
+], e.prototype, "ticks", 2);
+a([
+  r({ type: Boolean })
+], e.prototype, "labeled", 2);
+a([
+  r({ type: Boolean, attribute: "value-indicator" })
+], e.prototype, "valueIndicator", 2);
+a([
+  r({ type: Number, attribute: "value-start" })
+], e.prototype, "valueStart", 2);
+a([
+  r({ type: Number, attribute: "value-end" })
+], e.prototype, "valueEnd", 2);
+a([
+  r({ type: String, attribute: "aria-label" })
+], e.prototype, "ariaLabel", 2);
+a([
+  r({ type: String, attribute: "aria-label-start" })
+], e.prototype, "ariaLabelStart", 2);
+a([
+  r({ type: String, attribute: "aria-label-end" })
+], e.prototype, "ariaLabelEnd", 2);
+e = a([
+  c("pd-slider")
+], e);
+export {
+  e as PdSlider
+};