ten-protons-datepicker 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/wc.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -44,7 +44,7 @@ el.addEventListener('change', (e) => console.log(e.detail)); // also: open, clos
|
|
|
44
44
|
await el.ready; // resolves with the underlying Datepicker
|
|
45
45
|
```
|
|
46
46
|
|
|
47
|
-
The input is styled out of the box to match the calendar (border, radius and colours, light and dark, red border on invalid input). Restyle it with `::part(input)` and `::part(toggle)`, e.g. `ten-protons-datepicker::part(input) { border-radius: 0 }`. The calendar button is the web component's own icon, so `showIcon` doesn't apply to it.
|
|
47
|
+
The input is styled out of the box to match the calendar (border, radius and colours, light and dark, red border on invalid input). Restyle it with `::part(input)` and `::part(toggle)`, e.g. `ten-protons-datepicker::part(input) { border-radius: 0 }`. The calendar button is the web component's own icon (at the start of the field, like `showIcon` on a plain input), so `showIcon` doesn't apply to it.
|
|
48
48
|
|
|
49
49
|
### Vue
|
|
50
50
|
|
package/dist/wc.js
CHANGED
|
@@ -73,4 +73,4 @@ import {a as a$1}from'./chunk-MTBE7EMZ.js';import'./chunk-CUGUCENC.js';import'./
|
|
|
73
73
|
--tp-accent:#4c8dff;--tp-accent-fg:#0b1220;--tp-range:#1b2f52;--tp-focus:#79a8ff;--tp-shadow:0 8px 24px rgba(0,0,0,.5)
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
|
-
`;var v={range:()=>import('./range.js'),multiple:()=>import('./multiple.js')},k=()=>import('./time.js'),o=e=>e??void 0,u=e=>e===null?void 0:Number(e),a=e=>e===null?void 0:e!=="false",w=e=>e===null?void 0:e.split(",").map(Number),h=e=>e.split(/\s*[/,;]\s*/).filter(Boolean),g={mode:["mode",o],locale:["locale",o],min:["minDate",o],max:["maxDate",o],"date-format":["dateFormat",o],"first-day":["firstDayOfWeek",u],position:["position",o],theme:["theme",o],"number-of-months":["numberOfMonths",u],"show-other-months":["showOtherMonths",a],"allow-input":["allowInput",a],"close-on-select":["closeOnSelect",a],"disabled-days":["disabledDaysOfWeek",w],"output-timestamp":["outputTimestamp",a],"enable-time":["enableTime",a],"value-in-utc":["valueInUtc",a],inline:["inline",a]},y=["change","open","close","monthChange","yearChange"],x='<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg>',E=":host{display:inline-block}:host([hidden]){display:none}.wrap{position:relative;display:flex;align-items:center}input{box-sizing:border-box;width:100%;padding:.5rem .75rem;padding-inline-
|
|
76
|
+
`;var v={range:()=>import('./range.js'),multiple:()=>import('./multiple.js')},k=()=>import('./time.js'),o=e=>e??void 0,u=e=>e===null?void 0:Number(e),a=e=>e===null?void 0:e!=="false",w=e=>e===null?void 0:e.split(",").map(Number),h=e=>e.split(/\s*[/,;]\s*/).filter(Boolean),g={mode:["mode",o],locale:["locale",o],min:["minDate",o],max:["maxDate",o],"date-format":["dateFormat",o],"first-day":["firstDayOfWeek",u],position:["position",o],theme:["theme",o],"number-of-months":["numberOfMonths",u],"show-other-months":["showOtherMonths",a],"allow-input":["allowInput",a],"close-on-select":["closeOnSelect",a],"disabled-days":["disabledDaysOfWeek",w],"output-timestamp":["outputTimestamp",a],"enable-time":["enableTime",a],"value-in-utc":["valueInUtc",a],inline:["inline",a]},y=["change","open","close","monthChange","yearChange"],x='<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M8 3v4M16 3v4M3 10h18"/></svg>',E=":host{display:inline-block}:host([hidden]){display:none}.wrap{position:relative;display:flex;align-items:center}input{box-sizing:border-box;width:100%;padding:.5rem .75rem;padding-inline-start:2.25rem;font:inherit;color:var(--tp-fg);background:var(--tp-bg);border:1px solid var(--tp-border);border-radius:var(--tp-radius)}input:disabled{opacity:.6}input[aria-invalid=true]{border-color:#d1242f}.toggle{position:absolute;inset-inline-start:.25rem;display:grid;place-items:center;width:1.75rem;height:1.75rem;padding:0;border:0;border-radius:.25rem;background:none;color:var(--tp-fg);cursor:pointer}.toggle:disabled{opacity:.4;cursor:default}:host([inline]) .toggle{display:none}",D=typeof HTMLElement>"u"?class{}:HTMLElement,n=class extends D{constructor(){super();this.ready=Promise.resolve(null);this.picker=null;this.extra={};this.gen=0;this.internals=this.attachInternals?.();let t=this.root=this.attachShadow({mode:"open",delegatesFocus:true});t.innerHTML=`<style>${l}${c}${E}</style><div class="wrap" part="wrap"><input part="input"><button type="button" class="toggle" part="toggle" aria-haspopup="dialog">${x}</button></div>`,this.wrap=t.querySelector(".wrap"),this.input=t.querySelector("input"),this.toggleBtn=t.querySelector("button"),this.iso=document.createElement("input"),this.toggleBtn.addEventListener("click",()=>this.picker?.toggle());}get value(){return this.iso.value}set value(t){this.setAttribute("value",t);}set options(t){this.extra={...this.extra,...t},this.apply();}open(){this.picker?.open();}close(){this.picker?.close();}toggle(){this.picker?.toggle();}connectedCallback(){this.ready=this.init();}disconnectedCallback(){this.teardown();}attributeChangedCallback(t,i,r){if(t==="placeholder")this.input.placeholder=r??"";else if(t==="label")r===null?this.input.removeAttribute("aria-label"):this.input.setAttribute("aria-label",r);else if(t==="disabled")this.setDisabled(r!==null);else if(this.picker)t==="value"?this.setValue(r):t==="inline"?(this.teardown(),this.ready=this.init()):this.apply();else return}formResetCallback(){this.setValue(this.getAttribute("value"));}formDisabledCallback(t){this.setDisabled(t);}opts(){let t={};for(let[i,[r,s]]of Object.entries(g))t[r]=s(this.getAttribute(i));return {...t,...this.extra}}async load({mode:t,enableTime:i}){await Promise.all([t&&v[t]?.(),i&&k()]);}async init(){if(this.picker)return this.picker;let t=++this.gen;if(await this.load(this.opts()),t!==this.gen||!this.isConnected)return null;let i=this.getAttribute("value"),r=this.picker=new a$1(this.input,{...this.opts(),showIcon:false,selected:i?h(i):null,isoInput:this.iso,anchor:this.wrap,appendTo:this.root});for(let s of y)r.addEventListener(s,b=>{s==="change"&&this.syncForm(),this.dispatchEvent(new CustomEvent(s,{detail:b.detail,bubbles:true,composed:true}));});return this.toggleBtn.setAttribute("aria-label",r.strings.label),this.setDisabled(this.hasAttribute("disabled")),this.syncForm(),r}teardown(){this.gen++,this.picker?.destroy(),this.picker=null;}async apply(){let t=this.opts();await this.load(t),this.picker&&(this.picker.setOptions(t),this.syncForm(),this.toggleBtn.setAttribute("aria-label",this.picker.strings.label));}setValue(t){this.picker?.setDate(t?h(t):[]),this.syncForm();}setDisabled(t){this.input.disabled=this.toggleBtn.disabled=t,t&&this.picker?.close();}syncForm(){this.internals?.setFormValue?.(this.iso.value||null);}};n.formAssociated=true,n.observedAttributes=[...Object.keys(g),"value","placeholder","label","disabled"];var M={"ten-protons-datepicker":class extends n{},"x-datepicker":n};if(typeof customElements<"u")for(let[e,p]of Object.entries(M))customElements.get(e)||customElements.define(e,p);export{n as XDatepicker};
|