@prioticket/design-system-web 1.0.0

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

@@ -0,0 +1,57 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lit"),e=require("lit/decorators.js");require("@material/web/switch/switch.js");require("@material/web/icon/icon.js");var n=Object.defineProperty,h=Object.getOwnPropertyDescriptor,t=(i,s,c,l)=>{for(var r=l>1?void 0:l?h(s,c):s,d=i.length-1,a;d>=0;d--)(a=i[d])&&(r=(l?a(s,c,r):a(r))||r);return l&&r&&n(s,c,r),r};exports.PdSwitch=class extends o.LitElement{constructor(){super(...arguments),this.selected=!1,this.disabled=!1,this.selectedIcon="",this.unselectedIcon="",this.showOnlySelectedIcon=!1,this.name="",this.value="on",this.ariaLabel="",this.required=!1}render(){return o.html`
+      <md-switch
+        ?selected=${this.selected}
+        ?disabled=${this.disabled}
+        ?show-only-selected-icon=${this.showOnlySelectedIcon}
+        name=${this.name}
+        value=${this.value}
+        aria-label=${this.ariaLabel}
+        ?required=${this.required}
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+      >
+        ${this.selectedIcon?o.html`<md-icon slot="selected-icon">${this.selectedIcon}</md-icon>`:""}
+        ${this.unselectedIcon?o.html`<md-icon slot="unselected-icon">${this.unselectedIcon}</md-icon>`:""}
+      </md-switch>
+    `}handleChange(s){const c=s.target;this.selected=c.selected,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{selected:this.selected}}))}handleInput(s){const c=s.target;this.selected=c.selected,this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{selected:this.selected}}))}};exports.PdSwitch.styles=o.css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    md-switch {
+      /* Apply Prioticket design system tokens */
+      --md-switch-selected-track-color: var(--md-sys-color-primary);
+      --md-switch-selected-handle-color: var(--md-sys-color-on-primary);
+      --md-switch-selected-focus-track-color: var(--md-sys-color-primary);
+      --md-switch-selected-hover-track-color: var(--md-sys-color-primary);
+      --md-switch-selected-pressed-track-color: var(--md-sys-color-primary);
+      
+      --md-switch-unselected-track-color: var(--md-sys-color-surface-variant);
+      --md-switch-unselected-handle-color: var(--md-sys-color-outline);
+      --md-switch-unselected-focus-track-color: var(--md-sys-color-surface-variant);
+      --md-switch-unselected-hover-track-color: var(--md-sys-color-surface-variant);
+      --md-switch-unselected-pressed-track-color: var(--md-sys-color-surface-variant);
+
+      --md-switch-track-shape: var(--md-sys-shape-corner-full);
+      --md-switch-handle-shape: var(--md-sys-shape-corner-full);
+
+      /* Icon colors */
+      --md-switch-selected-icon-color: var(--md-sys-color-on-primary-container);
+      --md-switch-unselected-icon-color: var(--md-sys-color-surface-container-highest);
+    }
+
+    :host([disabled]) md-switch {
+      --md-switch-disabled-selected-track-color: var(--md-sys-color-on-surface);
+      --md-switch-disabled-selected-handle-color: var(--md-sys-color-surface);
+      --md-switch-disabled-unselected-track-color: var(--md-sys-color-surface-variant);
+      --md-switch-disabled-unselected-handle-color: var(--md-sys-color-on-surface);
+      opacity: 0.38;
+    }
+
+    /* Focus styles */
+    md-switch:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: 2px;
+    }
+  `;t([e.query("md-switch")],exports.PdSwitch.prototype,"switch",2);t([e.property({type:Boolean,reflect:!0})],exports.PdSwitch.prototype,"selected",2);t([e.property({type:Boolean,reflect:!0})],exports.PdSwitch.prototype,"disabled",2);t([e.property({type:String,attribute:"selected-icon"})],exports.PdSwitch.prototype,"selectedIcon",2);t([e.property({type:String,attribute:"unselected-icon"})],exports.PdSwitch.prototype,"unselectedIcon",2);t([e.property({type:Boolean,attribute:"show-only-selected-icon"})],exports.PdSwitch.prototype,"showOnlySelectedIcon",2);t([e.property({type:String})],exports.PdSwitch.prototype,"name",2);t([e.property({type:String})],exports.PdSwitch.prototype,"value",2);t([e.property({type:String,attribute:"aria-label"})],exports.PdSwitch.prototype,"ariaLabel",2);t([e.property({type:Boolean})],exports.PdSwitch.prototype,"required",2);exports.PdSwitch=t([e.customElement("pd-switch")],exports.PdSwitch);

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

@@ -0,0 +1,126 @@
+import { css as h, LitElement as m, html as n } from "lit";
+import { query as p, property as s, customElement as u } from "lit/decorators.js";
+import "@material/web/switch/switch.js";
+import "@material/web/icon/icon.js";
+var y = Object.defineProperty, v = Object.getOwnPropertyDescriptor, t = (r, c, i, l) => {
+  for (var o = l > 1 ? void 0 : l ? v(c, i) : c, d = r.length - 1, a; d >= 0; d--)
+    (a = r[d]) && (o = (l ? a(c, i, o) : a(o)) || o);
+  return l && o && y(c, i, o), o;
+};
+let e = class extends m {
+  constructor() {
+    super(...arguments), this.selected = !1, this.disabled = !1, this.selectedIcon = "", this.unselectedIcon = "", this.showOnlySelectedIcon = !1, this.name = "", this.value = "on", this.ariaLabel = "", this.required = !1;
+  }
+  render() {
+    return n`
+      <md-switch
+        ?selected=${this.selected}
+        ?disabled=${this.disabled}
+        ?show-only-selected-icon=${this.showOnlySelectedIcon}
+        name=${this.name}
+        value=${this.value}
+        aria-label=${this.ariaLabel}
+        ?required=${this.required}
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+      >
+        ${this.selectedIcon ? n`<md-icon slot="selected-icon">${this.selectedIcon}</md-icon>` : ""}
+        ${this.unselectedIcon ? n`<md-icon slot="unselected-icon">${this.unselectedIcon}</md-icon>` : ""}
+      </md-switch>
+    `;
+  }
+  handleChange(r) {
+    const c = r.target;
+    this.selected = c.selected, this.dispatchEvent(new CustomEvent("change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { selected: this.selected }
+    }));
+  }
+  handleInput(r) {
+    const c = r.target;
+    this.selected = c.selected, this.dispatchEvent(new CustomEvent("input", {
+      bubbles: !0,
+      composed: !0,
+      detail: { selected: this.selected }
+    }));
+  }
+};
+e.styles = h`
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    md-switch {
+      /* Apply Prioticket design system tokens */
+      --md-switch-selected-track-color: var(--md-sys-color-primary);
+      --md-switch-selected-handle-color: var(--md-sys-color-on-primary);
+      --md-switch-selected-focus-track-color: var(--md-sys-color-primary);
+      --md-switch-selected-hover-track-color: var(--md-sys-color-primary);
+      --md-switch-selected-pressed-track-color: var(--md-sys-color-primary);
+      
+      --md-switch-unselected-track-color: var(--md-sys-color-surface-variant);
+      --md-switch-unselected-handle-color: var(--md-sys-color-outline);
+      --md-switch-unselected-focus-track-color: var(--md-sys-color-surface-variant);
+      --md-switch-unselected-hover-track-color: var(--md-sys-color-surface-variant);
+      --md-switch-unselected-pressed-track-color: var(--md-sys-color-surface-variant);
+
+      --md-switch-track-shape: var(--md-sys-shape-corner-full);
+      --md-switch-handle-shape: var(--md-sys-shape-corner-full);
+
+      /* Icon colors */
+      --md-switch-selected-icon-color: var(--md-sys-color-on-primary-container);
+      --md-switch-unselected-icon-color: var(--md-sys-color-surface-container-highest);
+    }
+
+    :host([disabled]) md-switch {
+      --md-switch-disabled-selected-track-color: var(--md-sys-color-on-surface);
+      --md-switch-disabled-selected-handle-color: var(--md-sys-color-surface);
+      --md-switch-disabled-unselected-track-color: var(--md-sys-color-surface-variant);
+      --md-switch-disabled-unselected-handle-color: var(--md-sys-color-on-surface);
+      opacity: 0.38;
+    }
+
+    /* Focus styles */
+    md-switch:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: 2px;
+    }
+  `;
+t([
+  p("md-switch")
+], e.prototype, "switch", 2);
+t([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "selected", 2);
+t([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+t([
+  s({ type: String, attribute: "selected-icon" })
+], e.prototype, "selectedIcon", 2);
+t([
+  s({ type: String, attribute: "unselected-icon" })
+], e.prototype, "unselectedIcon", 2);
+t([
+  s({ type: Boolean, attribute: "show-only-selected-icon" })
+], e.prototype, "showOnlySelectedIcon", 2);
+t([
+  s({ type: String })
+], e.prototype, "name", 2);
+t([
+  s({ type: String })
+], e.prototype, "value", 2);
+t([
+  s({ type: String, attribute: "aria-label" })
+], e.prototype, "ariaLabel", 2);
+t([
+  s({ type: Boolean })
+], e.prototype, "required", 2);
+e = t([
+  u("pd-switch")
+], e);
+export {
+  e as PdSwitch
+};

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

@@ -0,0 +1,32 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("lit"),i=require("lit/decorators.js");require("@material/web/tabs/tabs.js");require("@material/web/tabs/primary-tab.js");require("@material/web/tabs/secondary-tab.js");require("@material/web/icon/icon.js");var d=Object.defineProperty,b=Object.getOwnPropertyDescriptor,o=(l,t,a,e)=>{for(var s=e>1?void 0:e?b(t,a):t,n=l.length-1,c;n>=0;n--)(c=l[n])&&(s=(e?c(t,a,s):c(s))||s);return e&&s&&d(t,a,s),s};exports.PdTabs=class extends r.LitElement{constructor(){super(...arguments),this.activeTabIndex=0,this.autoActivate=!1,this.tabs=[],this.slottedTabs=[]}connectedCallback(){super.connectedCallback(),setTimeout(()=>this.collectTabsFromSlot(),0)}firstUpdated(){this.collectTabsFromSlot(),this.updateComplete.then(()=>this.forceActiveTabUpdate())}collectTabsFromSlot(){const t=this.shadowRoot?.querySelector("slot");if(!t)return;const a=t.assignedElements({flatten:!0}),e=[];a.forEach(s=>{if(s.tagName==="PD-TAB"){const n=s;e.push({label:n.textContent?.trim()||"",icon:n.getAttribute("icon")||void 0,secondary:n.hasAttribute("secondary"),inlineIcon:n.hasAttribute("inline-icon"),ariaLabel:n.getAttribute("aria-label")||void 0})}}),this.slottedTabs=e,this.requestUpdate()}handleSlotChange(){this.collectTabsFromSlot(),this.updateComplete.then(()=>this.forceActiveTabUpdate())}forceActiveTabUpdate(){const t=this.shadowRoot?.querySelector("md-tabs");t&&this.activeTabIndex!==void 0&&(t.activeTabIndex=this.activeTabIndex)}renderTab(t,a){const e=t.icon?r.html`<md-icon slot="icon">${t.icon}</md-icon>`:"";return t.secondary?r.html`
+        <md-secondary-tab
+          ?inline-icon=${t.inlineIcon}
+          aria-label=${t.ariaLabel||t.label}
+        >
+          ${e}
+          ${t.label}
+        </md-secondary-tab>
+      `:r.html`
+      <md-primary-tab
+        ?inline-icon=${t.inlineIcon}
+        aria-label=${t.ariaLabel||t.label}
+      >
+        ${e}
+        ${t.label}
+      </md-primary-tab>
+    `}updated(t){super.updated(t),t.has("activeTabIndex")&&this.updateComplete.then(()=>this.forceActiveTabUpdate())}render(){const t=this.tabs.length>0?this.tabs:this.slottedTabs;return r.html`
+      <md-tabs
+        .activeTabIndex=${this.activeTabIndex}
+        ?auto-activate=${this.autoActivate}
+        @change=${this.handleChange}
+      >
+        ${t.map((a,e)=>this.renderTab(a,e))}
+      </md-tabs>
+      <div style="display: none;">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `}handleChange(t){const a=t.target;this.activeTabIndex=a.activeTabIndex,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{activeTabIndex:this.activeTabIndex}}))}};o([i.property({type:Number,attribute:"active-tab-index"})],exports.PdTabs.prototype,"activeTabIndex",2);o([i.property({type:Boolean,attribute:"auto-activate"})],exports.PdTabs.prototype,"autoActivate",2);o([i.property({type:Array})],exports.PdTabs.prototype,"tabs",2);o([i.state()],exports.PdTabs.prototype,"slottedTabs",2);exports.PdTabs=o([i.customElement("pd-tabs")],exports.PdTabs);exports.PdTab=class extends r.LitElement{constructor(){super(...arguments),this.secondary=!1,this.inlineIcon=!1,this.icon="",this.ariaLabel=""}render(){return r.html`<slot></slot>`}};exports.PdTab.styles=r.css`
+    :host {
+      display: none;
+    }
+  `;o([i.property({type:Boolean})],exports.PdTab.prototype,"secondary",2);o([i.property({type:Boolean,attribute:"inline-icon"})],exports.PdTab.prototype,"inlineIcon",2);o([i.property({type:String})],exports.PdTab.prototype,"icon",2);o([i.property({type:String,attribute:"aria-label"})],exports.PdTab.prototype,"ariaLabel",2);exports.PdTab=o([i.customElement("pd-tab")],exports.PdTab);

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

@@ -0,0 +1,139 @@
+import { css as u, LitElement as p, html as c } from "lit";
+import { property as r, state as m, customElement as h } from "lit/decorators.js";
+import "@material/web/tabs/tabs.js";
+import "@material/web/tabs/primary-tab.js";
+import "@material/web/tabs/secondary-tab.js";
+import "@material/web/icon/icon.js";
+var v = Object.defineProperty, T = Object.getOwnPropertyDescriptor, o = (t, a, i, s) => {
+  for (var e = s > 1 ? void 0 : s ? T(a, i) : a, d = t.length - 1, b; d >= 0; d--)
+    (b = t[d]) && (e = (s ? b(a, i, e) : b(e)) || e);
+  return s && e && v(a, i, e), e;
+};
+let l = class extends p {
+  constructor() {
+    super(...arguments), this.activeTabIndex = 0, this.autoActivate = !1, this.tabs = [], this.slottedTabs = [];
+  }
+  connectedCallback() {
+    super.connectedCallback(), setTimeout(() => this.collectTabsFromSlot(), 0);
+  }
+  firstUpdated() {
+    this.collectTabsFromSlot(), this.updateComplete.then(() => this.forceActiveTabUpdate());
+  }
+  collectTabsFromSlot() {
+    const t = this.shadowRoot?.querySelector("slot");
+    if (!t) return;
+    const a = t.assignedElements({ flatten: !0 }), i = [];
+    a.forEach((s) => {
+      if (s.tagName === "PD-TAB") {
+        const e = s;
+        i.push({
+          label: e.textContent?.trim() || "",
+          icon: e.getAttribute("icon") || void 0,
+          secondary: e.hasAttribute("secondary"),
+          inlineIcon: e.hasAttribute("inline-icon"),
+          ariaLabel: e.getAttribute("aria-label") || void 0
+        });
+      }
+    }), this.slottedTabs = i, this.requestUpdate();
+  }
+  handleSlotChange() {
+    this.collectTabsFromSlot(), this.updateComplete.then(() => this.forceActiveTabUpdate());
+  }
+  forceActiveTabUpdate() {
+    const t = this.shadowRoot?.querySelector("md-tabs");
+    t && this.activeTabIndex !== void 0 && (t.activeTabIndex = this.activeTabIndex);
+  }
+  renderTab(t, a) {
+    const i = t.icon ? c`<md-icon slot="icon">${t.icon}</md-icon>` : "";
+    return t.secondary ? c`
+        <md-secondary-tab
+          ?inline-icon=${t.inlineIcon}
+          aria-label=${t.ariaLabel || t.label}
+        >
+          ${i}
+          ${t.label}
+        </md-secondary-tab>
+      ` : c`
+      <md-primary-tab
+        ?inline-icon=${t.inlineIcon}
+        aria-label=${t.ariaLabel || t.label}
+      >
+        ${i}
+        ${t.label}
+      </md-primary-tab>
+    `;
+  }
+  updated(t) {
+    super.updated(t), t.has("activeTabIndex") && this.updateComplete.then(() => this.forceActiveTabUpdate());
+  }
+  render() {
+    const t = this.tabs.length > 0 ? this.tabs : this.slottedTabs;
+    return c`
+      <md-tabs
+        .activeTabIndex=${this.activeTabIndex}
+        ?auto-activate=${this.autoActivate}
+        @change=${this.handleChange}
+      >
+        ${t.map((a, i) => this.renderTab(a, i))}
+      </md-tabs>
+      <div style="display: none;">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+  }
+  handleChange(t) {
+    const a = t.target;
+    this.activeTabIndex = a.activeTabIndex, this.dispatchEvent(new CustomEvent("change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { activeTabIndex: this.activeTabIndex }
+    }));
+  }
+};
+o([
+  r({ type: Number, attribute: "active-tab-index" })
+], l.prototype, "activeTabIndex", 2);
+o([
+  r({ type: Boolean, attribute: "auto-activate" })
+], l.prototype, "autoActivate", 2);
+o([
+  r({ type: Array })
+], l.prototype, "tabs", 2);
+o([
+  m()
+], l.prototype, "slottedTabs", 2);
+l = o([
+  h("pd-tabs")
+], l);
+let n = class extends p {
+  constructor() {
+    super(...arguments), this.secondary = !1, this.inlineIcon = !1, this.icon = "", this.ariaLabel = "";
+  }
+  render() {
+    return c`<slot></slot>`;
+  }
+};
+n.styles = u`
+    :host {
+      display: none;
+    }
+  `;
+o([
+  r({ type: Boolean })
+], n.prototype, "secondary", 2);
+o([
+  r({ type: Boolean, attribute: "inline-icon" })
+], n.prototype, "inlineIcon", 2);
+o([
+  r({ type: String })
+], n.prototype, "icon", 2);
+o([
+  r({ type: String, attribute: "aria-label" })
+], n.prototype, "ariaLabel", 2);
+n = o([
+  h("pd-tab")
+], n);
+export {
+  n as PdTab,
+  l as PdTabs
+};

package/dist/components/pd-text-field.cjs.js

@@ -0,0 +1,86 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("lit"),a=require("lit/static-html.js"),t=require("lit/decorators.js");require("@material/web/textfield/filled-text-field.js");require("@material/web/textfield/outlined-text-field.js");require("@material/web/icon/icon.js");var x=Object.defineProperty,h=Object.getOwnPropertyDescriptor,r=(s,o,l,p)=>{for(var e=p>1?void 0:p?h(o,l):o,d=s.length-1,n;d>=0;d--)(n=s[d])&&(e=(p?n(o,l,e):n(e))||e);return p&&e&&x(o,l,e),e};exports.PdTextField=class extends i.LitElement{constructor(){super(...arguments),this.variant="outlined",this.label="",this.placeholder="",this.value="",this.supportingText="",this.errorText="",this.prefixText="",this.suffixText="",this.disabled=!1,this.readonly=!1,this.required=!1,this.error=!1,this.type="text",this.rows=2,this.cols=20,this.leadingIcon="",this.trailingIcon=""}getTextFieldTemplate(){const o=this.leadingIcon?i.html`<md-icon slot="leadingicon">${this.leadingIcon}</md-icon>`:"",l=this.trailingIcon?i.html`<md-icon slot="trailingicon">${this.trailingIcon}</md-icon>`:"",p=i.html`${o}${l}`,e={label:this.label||"",placeholder:this.placeholder||"",value:this.value||"","supporting-text":this.supportingText||"","error-text":this.errorText||"","prefix-text":this.prefixText||"","suffix-text":this.suffixText||"",disabled:this.disabled,required:this.required,error:this.error,maxlength:this.maxlength,minlength:this.minlength};if(this.type==="textarea"){const d=this.variant==="filled"?"md-filled-text-field":"md-outlined-text-field",n=a.unsafeStatic(d);return a.html`
+        <${n}
+          type="textarea"
+          rows=${this.rows}
+          cols=${this.cols}
+          .label=${e.label}
+          .placeholder=${e.placeholder}
+          .value=${e.value}
+          supporting-text=${e["supporting-text"]}
+          error-text=${e["error-text"]}
+          prefix-text=${e["prefix-text"]}
+          suffix-text=${e["suffix-text"]}
+          maxlength=${e.maxlength||i.nothing}
+          minlength=${e.minlength||i.nothing}
+          ?disabled=${e.disabled}
+          ?required=${e.required}
+          ?error=${e.error}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        >
+          ${p}
+        </${n}>
+      `}else return this.variant==="filled"?i.html`
+        <md-filled-text-field
+          type=${this.type||"text"}
+          .label=${e.label}
+          .placeholder=${e.placeholder}
+          .value=${e.value}
+          supporting-text=${e["supporting-text"]}
+          error-text=${e["error-text"]}
+          prefix-text=${e["prefix-text"]}
+          suffix-text=${e["suffix-text"]}
+          ?disabled=${e.disabled}
+          ?required=${e.required}
+          ?error=${e.error}
+          maxlength=${e.maxlength||i.nothing}
+          minlength=${e.minlength||i.nothing}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        >
+          ${p}
+        </md-filled-text-field>
+      `:i.html`
+        <md-outlined-text-field
+          type=${this.type||"text"}
+          .label=${e.label}
+          .placeholder=${e.placeholder}
+          .value=${e.value}
+          supporting-text=${e["supporting-text"]}
+          error-text=${e["error-text"]}
+          prefix-text=${e["prefix-text"]}
+          suffix-text=${e["suffix-text"]}
+          ?disabled=${e.disabled}
+          ?required=${e.required}
+          ?error=${e.error}
+          maxlength=${e.maxlength||i.nothing}
+          minlength=${e.minlength||i.nothing}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        >
+          ${p}
+        </md-outlined-text-field>
+      `}render(){return this.getTextFieldTemplate()}_handleInput(o){const l=o.target;this.value=l.value,this.dispatchEvent(new CustomEvent("input",{detail:{value:l.value},bubbles:!0}))}_handleChange(o){const l=o.target;this.value=l.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:l.value},bubbles:!0}))}};exports.PdTextField.styles=i.css`
+    :host {
+      display: block;
+      width: 100%;
+      /* Set default shape for ALL Prioticket text fields */
+      --md-filled-text-field-container-shape: var(--md-sys-shape-corner-small);
+      --md-outlined-text-field-container-shape: var(--md-sys-shape-corner-small);
+    }
+
+    md-filled-text-field,
+    md-outlined-text-field {
+      width: 100%;
+      display: block;
+      /* Transition for smooth visual feedback */
+      transition: all 150ms ease-in-out;
+    }
+
+    /* Textarea specific styling */
+    md-filled-text-field[type="textarea"],
+    md-outlined-text-field[type="textarea"] {
+      min-height: 100px;
+      resize: vertical;
+    }
+  `;r([t.property({type:String})],exports.PdTextField.prototype,"variant",2);r([t.property({type:String})],exports.PdTextField.prototype,"label",2);r([t.property({type:String})],exports.PdTextField.prototype,"placeholder",2);r([t.property({type:String})],exports.PdTextField.prototype,"value",2);r([t.property({type:String,attribute:"supporting-text"})],exports.PdTextField.prototype,"supportingText",2);r([t.property({type:String,attribute:"error-text"})],exports.PdTextField.prototype,"errorText",2);r([t.property({type:String,attribute:"prefix-text"})],exports.PdTextField.prototype,"prefixText",2);r([t.property({type:String,attribute:"suffix-text"})],exports.PdTextField.prototype,"suffixText",2);r([t.property({type:Boolean})],exports.PdTextField.prototype,"disabled",2);r([t.property({type:Boolean})],exports.PdTextField.prototype,"readonly",2);r([t.property({type:Boolean})],exports.PdTextField.prototype,"required",2);r([t.property({type:Boolean})],exports.PdTextField.prototype,"error",2);r([t.property({type:String})],exports.PdTextField.prototype,"type",2);r([t.property({type:Number})],exports.PdTextField.prototype,"rows",2);r([t.property({type:Number})],exports.PdTextField.prototype,"cols",2);r([t.property({type:String})],exports.PdTextField.prototype,"leadingIcon",2);r([t.property({type:String})],exports.PdTextField.prototype,"trailingIcon",2);r([t.property({type:Number})],exports.PdTextField.prototype,"maxlength",2);r([t.property({type:Number})],exports.PdTextField.prototype,"minlength",2);exports.PdTextField=r([t.customElement("pd-text-field")],exports.PdTextField);

package/dist/components/pd-text-field.es.js

@@ -0,0 +1,202 @@
+import { css as x, LitElement as u, html as d, nothing as p } from "lit";
+import { unsafeStatic as f, html as g } from "lit/static-html.js";
+import { property as i, customElement as m } from "lit/decorators.js";
+import "@material/web/textfield/filled-text-field.js";
+import "@material/web/textfield/outlined-text-field.js";
+import "@material/web/icon/icon.js";
+var c = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (n, l, a, t) => {
+  for (var o = t > 1 ? void 0 : t ? y(l, a) : l, s = n.length - 1, h; s >= 0; s--)
+    (h = n[s]) && (o = (t ? h(l, a, o) : h(o)) || o);
+  return t && o && c(l, a, o), o;
+};
+let e = class extends u {
+  constructor() {
+    super(...arguments), this.variant = "outlined", this.label = "", this.placeholder = "", this.value = "", this.supportingText = "", this.errorText = "", this.prefixText = "", this.suffixText = "", this.disabled = !1, this.readonly = !1, this.required = !1, this.error = !1, this.type = "text", this.rows = 2, this.cols = 20, this.leadingIcon = "", this.trailingIcon = "";
+  }
+  getTextFieldTemplate() {
+    const n = this.leadingIcon ? d`<md-icon slot="leadingicon">${this.leadingIcon}</md-icon>` : "", l = this.trailingIcon ? d`<md-icon slot="trailingicon">${this.trailingIcon}</md-icon>` : "", a = d`${n}${l}`, t = {
+      label: this.label || "",
+      placeholder: this.placeholder || "",
+      value: this.value || "",
+      "supporting-text": this.supportingText || "",
+      "error-text": this.errorText || "",
+      "prefix-text": this.prefixText || "",
+      "suffix-text": this.suffixText || "",
+      disabled: this.disabled,
+      required: this.required,
+      error: this.error,
+      maxlength: this.maxlength,
+      minlength: this.minlength
+    };
+    if (this.type === "textarea") {
+      const o = this.variant === "filled" ? "md-filled-text-field" : "md-outlined-text-field", s = f(o);
+      return g`
+        <${s}
+          type="textarea"
+          rows=${this.rows}
+          cols=${this.cols}
+          .label=${t.label}
+          .placeholder=${t.placeholder}
+          .value=${t.value}
+          supporting-text=${t["supporting-text"]}
+          error-text=${t["error-text"]}
+          prefix-text=${t["prefix-text"]}
+          suffix-text=${t["suffix-text"]}
+          maxlength=${t.maxlength || p}
+          minlength=${t.minlength || p}
+          ?disabled=${t.disabled}
+          ?required=${t.required}
+          ?error=${t.error}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        >
+          ${a}
+        </${s}>
+      `;
+    } else return this.variant === "filled" ? d`
+        <md-filled-text-field
+          type=${this.type || "text"}
+          .label=${t.label}
+          .placeholder=${t.placeholder}
+          .value=${t.value}
+          supporting-text=${t["supporting-text"]}
+          error-text=${t["error-text"]}
+          prefix-text=${t["prefix-text"]}
+          suffix-text=${t["suffix-text"]}
+          ?disabled=${t.disabled}
+          ?required=${t.required}
+          ?error=${t.error}
+          maxlength=${t.maxlength || p}
+          minlength=${t.minlength || p}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        >
+          ${a}
+        </md-filled-text-field>
+      ` : d`
+        <md-outlined-text-field
+          type=${this.type || "text"}
+          .label=${t.label}
+          .placeholder=${t.placeholder}
+          .value=${t.value}
+          supporting-text=${t["supporting-text"]}
+          error-text=${t["error-text"]}
+          prefix-text=${t["prefix-text"]}
+          suffix-text=${t["suffix-text"]}
+          ?disabled=${t.disabled}
+          ?required=${t.required}
+          ?error=${t.error}
+          maxlength=${t.maxlength || p}
+          minlength=${t.minlength || p}
+          @input=${this._handleInput}
+          @change=${this._handleChange}
+        >
+          ${a}
+        </md-outlined-text-field>
+      `;
+  }
+  render() {
+    return this.getTextFieldTemplate();
+  }
+  _handleInput(n) {
+    const l = n.target;
+    this.value = l.value, this.dispatchEvent(new CustomEvent("input", {
+      detail: { value: l.value },
+      bubbles: !0
+    }));
+  }
+  _handleChange(n) {
+    const l = n.target;
+    this.value = l.value, this.dispatchEvent(new CustomEvent("change", {
+      detail: { value: l.value },
+      bubbles: !0
+    }));
+  }
+};
+e.styles = x`
+    :host {
+      display: block;
+      width: 100%;
+      /* Set default shape for ALL Prioticket text fields */
+      --md-filled-text-field-container-shape: var(--md-sys-shape-corner-small);
+      --md-outlined-text-field-container-shape: var(--md-sys-shape-corner-small);
+    }
+
+    md-filled-text-field,
+    md-outlined-text-field {
+      width: 100%;
+      display: block;
+      /* Transition for smooth visual feedback */
+      transition: all 150ms ease-in-out;
+    }
+
+    /* Textarea specific styling */
+    md-filled-text-field[type="textarea"],
+    md-outlined-text-field[type="textarea"] {
+      min-height: 100px;
+      resize: vertical;
+    }
+  `;
+r([
+  i({ type: String })
+], e.prototype, "variant", 2);
+r([
+  i({ type: String })
+], e.prototype, "label", 2);
+r([
+  i({ type: String })
+], e.prototype, "placeholder", 2);
+r([
+  i({ type: String })
+], e.prototype, "value", 2);
+r([
+  i({ type: String, attribute: "supporting-text" })
+], e.prototype, "supportingText", 2);
+r([
+  i({ type: String, attribute: "error-text" })
+], e.prototype, "errorText", 2);
+r([
+  i({ type: String, attribute: "prefix-text" })
+], e.prototype, "prefixText", 2);
+r([
+  i({ type: String, attribute: "suffix-text" })
+], e.prototype, "suffixText", 2);
+r([
+  i({ type: Boolean })
+], e.prototype, "disabled", 2);
+r([
+  i({ type: Boolean })
+], e.prototype, "readonly", 2);
+r([
+  i({ type: Boolean })
+], e.prototype, "required", 2);
+r([
+  i({ type: Boolean })
+], e.prototype, "error", 2);
+r([
+  i({ type: String })
+], e.prototype, "type", 2);
+r([
+  i({ type: Number })
+], e.prototype, "rows", 2);
+r([
+  i({ type: Number })
+], e.prototype, "cols", 2);
+r([
+  i({ type: String })
+], e.prototype, "leadingIcon", 2);
+r([
+  i({ type: String })
+], e.prototype, "trailingIcon", 2);
+r([
+  i({ type: Number })
+], e.prototype, "maxlength", 2);
+r([
+  i({ type: Number })
+], e.prototype, "minlength", 2);
+e = r([
+  m("pd-text-field")
+], e);
+export {
+  e as PdTextField
+};