dev-process-kit 0.2.1 → 0.3.0-beta.1

package/dist/chunks/shared-CnPCm4bJ.js

@@ -0,0 +1,31 @@
+import{a5 as d,au as p,av as a,aw as f,ac as l,aa as b,ax as o,ay as n,ak as v,X as k,j as m,ah as g,al as y,aF as q,as as r}from"./shared-DdpMqkAH.js";import{o as C}from"./shared-TrlnHjrJ.js";const h=d({en:{fallbackLabel:"Select",required:"Choose one."},ja:{fallbackLabel:"\u9078\u629E",required:"\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044\u3002"}}),S=a({value:o(l(),n(1)),label:o(l(),n(1))}),w=a({options:b(S),value:f(l())}),c=i=>{const e=p(w,i),t=new Set;for(const s of e.options){if(t.has(s.value))throw new Error(`duplicate option value: ${s.value}`);t.add(s.value)}return{options:e.options,value:e.value??null}};class u extends v{static{this.formAssociated=!0}static{this.styles=[k,m,g`
+      :host {
+        display: inline-block;
+      }
+
+      .field {
+        display: flex;
+        flex-direction: column;
+        gap: 6px;
+      }
+
+      .field-label {
+        font-size: 11.5px;
+        font-weight: 600;
+        color: var(--dpk-ink-soft);
+      }
+
+      :host([block]) .dpk-rich-select {
+        width: 100%;
+      }
+
+      .error {
+        color: var(--dpk-danger);
+        font-size: 12px;
+      }
+    `]}static{this.properties={label:{type:String},placeholder:{type:String},name:{type:String,reflect:!0},required:{type:Boolean,reflect:!0},disabled:{type:Boolean,reflect:!0},block:{type:Boolean,reflect:!0}}}#n=new y(this);#h=new q(this);#l=typeof this.attachInternals=="function"?this.attachInternals():null;#i=null;#a=[];#o=null;#e="";#r="";#t=null;constructor(){super(),this.label=null,this.placeholder=null,this.name=null,this.required=!1,this.disabled=!1,this.block=!1}connectedCallback(){super.connectedCallback(),this.#i=C(this,c,e=>{this.#o===null&&(e.ok?(this.#a=e.value.options,this.#t=null,e.value.value!==null&&(this.#e=e.value.value,this.#r=e.value.value)):(this.#a=[],this.#t=e.error),this.#s(),this.requestUpdate())})}disconnectedCallback(){super.disconnectedCallback(),this.#i?.(),this.#i=null}updated(){this.#c()}get value(){return this.#e}set value(e){const t=e??"";t!==this.#e&&(this.#e=t,this.#s(),this.requestUpdate())}get options(){return this.#o??this.#a}set options(e){this.#o=e??null,this.#t=null,this.requestUpdate()}get form(){return this.#l?.form??null}formResetCallback(){this.#e=this.#r,this.#s(),this.requestUpdate()}formStateRestoreCallback(e,t){typeof e=="string"&&(this.#e=e,this.#s(),this.requestUpdate())}#s(){this.#l?.setFormValue?.(this.#e===""?null:this.#e)}#c(){if(this.required&&this.#e===""){const e=this.renderRoot.querySelector(".dpk-rich-select")??void 0;this.#l?.setValidity?.({valueMissing:!0},h(this.#n.locale).required,e)}else this.#l?.setValidity?.({})}render(){if(this.#t!==null)return r`<p class="error">${this.#t}</p>`;const e=this.getAttribute("aria-label")??this.label??h(this.#n.locale).fallbackLabel,t=this.#h.render({options:this.options,value:this.#e,onChange:s=>this.#u(s),ariaLabel:e,placeholder:this.placeholder??void 0,disabled:this.disabled});return this.label===null?t:r`
+      <div class="field">
+        <span class="field-label">${this.label}</span>
+        ${t}
+      </div>
+    `}#u(e){e!==this.#e&&(this.#e=e,this.#s(),this.requestUpdate(),this.dispatchEvent(new CustomEvent("dpk-select-change",{detail:{value:e},bubbles:!0,composed:!0})))}}const x=()=>{customElements.get("dpk-select")||customElements.define("dpk-select",u)};export{u as D,x as d,c as p};