npm - godown - Versions diffs - 3.14.0 → 3.14.1 - Mend

godown 3.14.0 → 3.14.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.

Files changed (278) hide show

package/build/web-components/popover/definition.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Popover as Popover$1}from"./component.js";import"lit/decorators.js";import"../../internal/global-style.js";import"@godown/element";import"lit";import"../../internal/reset-style.js";import"sharekit";import"../../internal/popover.js";import"../../internal/utils.js";import"@oxc-project/runtime/helpers/decorate";Popover$1.define();var Popover=Popover$1;export{Popover as default};
+import{Popover as e}from"./component.js";e.define();var t=e;export{t as default};
 //# sourceMappingURL=definition.js.map

package/build/web-components/popover/definition.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"definition.js","sources":["../../../src/web-components/popover/definition.ts"],"sourcesContent":["import Popover from \"./component.js\";\n\nPopover.define();\n\nexport default Popover;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-popover\": Popover;\n }\n}\n"],"names":["Popover"],"mappings":"~~6TAEAA~~,~~UAAQ~~,~~QAAQ~~,~~CAEhB~~,~~IAAA,QAAeA~~"}
1	+ {"version":3,"file":"definition.js","sources":["../../../src/web-components/popover/definition.ts"],"sourcesContent":["import Popover from \"./component.js\";\n\nPopover.define();\n\nexport default Popover;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-popover\": Popover;\n }\n}\n"],"names":["Popover"],"mappings":"yCAEAA,EAAQ,SAER,IAAAA,EAAeA"}

package/build/web-components/progress/component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"AACA,cAAc,sBAAiC~~,KAAM~~;~~AAIrD~~,SAAS,mBAAkC~~,gCAAiC~~;;;;;;~~AAS5E~~,cA+CM,iBAAiB,YAAY;CACjC,AACA;CAEA,AACA;CAEA,AACA;CAEA,UAAU,UAAU,eAAe~~;AAsBpC;AAED~~,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/progress/component.ts"],"sourcesContent":["import { attr, godown, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { isNullable, Ranger } from \"sharekit\";\n\nimport { GlobalStyle, cssGlobalVars } from \"../../internal/global-style.js\";\n\nconst protoName = \"progress\";\n\n/*\n {@linkcode Progress} similar to `<progress>`.\n \n @category feedback\n /\n@godown(protoName)\n@styles(css`\n :host {\n width: 100%;\n height: 0.5em;\n border-radius: 0.25em;\n background: var(${cssGlobalVars.passive});\n color: var(${cssGlobalVars.active});\n }\n\n :host,\n [part=\"root\"] {\n display: block;\n }\n\n [part=\"root\"] {\n z-index: 1;\n position: relative;\n border-radius: inherit;\n overflow: hidden;\n }\n\n [part=\"value\"] {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n height: 100%;\n border-radius: inherit;\n transition: all 0.3s;\n animation: progress 1.8s ease-in-out infinite alternate;\n background: currentColor;\n }\n\n @keyframes progress {\n from {\n left: 0;\n }\n to {\n left: 80%;\n }\n }\n\n .static [part=\"value\"] {\n animation: none;\n }\n`)\nclass Progress extends GlobalStyle {\n @property({ type: Number })\n max = 1;\n\n @property({ type: Number })\n min = 0;\n\n @property({ type: Number })\n value: number;\n\n protected render(): TemplateResult<1> {\n let width = 20;\n let className: string;\n if (!isNullable(this.value)) {\n const ranger = new Ranger(this.min, this.max);\n const value = +this.value - this.min;\n width = (value / ranger.diff) 100;\n className = \"static\";\n }\n return html`\n <div\n part=\"root\"\n ${attr(this.observedRecord)}\n class=\"${className}\"\n >\n <i\n part=\"value\"\n style=\"width:${width}%;\"\n ></i>\n </div>\n `;\n }\n}\n\nexport default Progress;\nexport { Progress };\n"],"version":3,"file":"component.d.ts"}
1	+ {"mappings":"AACA,cAAc,sBAAiC;AAI/C,SAAS,mBAAkC;;;;;;AAS3C,cA+CM,iBAAiB,YAAY;CACjC,AACA;CAEA,AACA;CAEA,AACA;CAEA,UAAU,UAAU,eAAe;;AAwBrC,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/progress/component.ts"],"sourcesContent":["import { attr, godown, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { isNullable, Ranger } from \"sharekit\";\n\nimport { GlobalStyle, cssGlobalVars } from \"../../internal/global-style.js\";\n\nconst protoName = \"progress\";\n\n/*\n {@linkcode Progress} similar to `<progress>`.\n \n @category feedback\n /\n@godown(protoName)\n@styles(css`\n :host {\n width: 100%;\n height: 0.5em;\n border-radius: 0.25em;\n background: var(${cssGlobalVars.passive});\n color: var(${cssGlobalVars.active});\n }\n\n :host,\n [part=\"root\"] {\n display: block;\n }\n\n [part=\"root\"] {\n z-index: 1;\n position: relative;\n border-radius: inherit;\n overflow: hidden;\n }\n\n [part=\"value\"] {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n height: 100%;\n border-radius: inherit;\n transition: all 0.3s;\n animation: progress 1.8s ease-in-out infinite alternate;\n background: currentColor;\n }\n\n @keyframes progress {\n from {\n left: 0;\n }\n to {\n left: 80%;\n }\n }\n\n .static [part=\"value\"] {\n animation: none;\n }\n`)\nclass Progress extends GlobalStyle {\n @property({ type: Number })\n max = 1;\n\n @property({ type: Number })\n min = 0;\n\n @property({ type: Number })\n value: number;\n\n protected render(): TemplateResult<1> {\n let width = 20;\n let className: string;\n if (!isNullable(this.value)) {\n const ranger = new Ranger(this.min, this.max);\n const value = +this.value - this.min;\n width = (value / ranger.diff) 100;\n className = \"static\";\n }\n return html`\n <div\n part=\"root\"\n ${attr(this.observedRecord)}\n class=\"${className}\"\n >\n <i\n part=\"value\"\n style=\"width:${width}%;\"\n ></i>\n </div>\n `;\n }\n}\n\nexport default Progress;\nexport { Progress };\n"],"version":3,"file":"component.d.ts"}

package/build/web-components/progress/component.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{godown,styles,attr}from"@godown/element";import{css,html}from"lit";import{property}from"lit/decorators.js";import{isNullable,Ranger}from"sharekit";import{cssGlobalVars,GlobalStyle}from"../../internal/global-style.js";import _decorate from"@oxc-project/runtime/helpers/decorate";import"../../internal/reset-style.js";const protoName=`progress`;let Progress=class e extends GlobalStyle{constructor(...e){super(...e),this.max=1,this.min=0}render(){let e=20,d;if(!isNullable(this.value)){let f=new Ranger(this.min,this.max),p=+this.value-this.min;e=p/f.diff*100,d=`static`}return html`<div part="root" ${attr(this.observedRecord)} class="${d}"> <i part="value" style="width:${e}%;"></i> </div>`}};_decorate([property({type:Number})],Progress.prototype,`max`,void 0),_decorate([property({type:Number})],Progress.prototype,`min`,void 0),_decorate([property({type:Number})],Progress.prototype,`value`,void 0),Progress=_decorate([godown(protoName),styles(css`:host{width:100%;height:.5em;border-radius:.25em;background:var(${cssGlobalVars.passive});color:var(${cssGlobalVars.active})}:host,[part=root]{display:block}[part=root]{z-index:1;position:relative;border-radius:inherit;overflow:hidden}[part=value]{position:absolute;z-index:2;top:0;left:0;height:100%;border-radius:inherit;transition:all .3s;animation:progress 1.8s ease-in-out infinite alternate;background:currentColor}@keyframes progress{0%{left:0}to{left:80%}}.static [part=value]{animation:none}`)],Progress);var Progress$1=Progress;export{Progress,Progress$1 as default};
+import{godown as e,styles as t,attr as n}from"@godown/element";import{css as r,html as i}from"lit";import{property as a}from"lit/decorators.js";import{isNullable as o,Ranger as s}from"sharekit";import{cssGlobalVars as c,GlobalStyle as l}from"../../internal/global-style.js";import u from"@oxc-project/runtime/helpers/decorate";const d=`progress`;let f=class e extends l{constructor(...e){super(...e),this.max=1,this.min=0}render(){let e=20,t;if(!o(this.value)){let n=new s(this.min,this.max),r=+this.value-this.min;e=r/n.diff*100,t=`static`}return i`<div part="root" ${n(this.observedRecord)} class="${t}"> <i part="value" style="width:${e}%;"></i> </div>`}};u([a({type:Number})],f.prototype,`max`,void 0),u([a({type:Number})],f.prototype,`min`,void 0),u([a({type:Number})],f.prototype,`value`,void 0),f=u([e(`progress`),t(r`:host{width:100%;height:.5em;border-radius:.25em;background:var(${c.passive});color:var(${c.active})}:host,[part=root]{display:block}[part=root]{z-index:1;position:relative;border-radius:inherit;overflow:hidden}[part=value]{position:absolute;z-index:2;top:0;left:0;height:100%;border-radius:inherit;transition:all .3s;animation:progress 1.8s ease-in-out infinite alternate;background:currentColor}@keyframes progress{0%{left:0}to{left:80%}}.static [part=value]{animation:none}`)],f);var p=f;export{f as Progress,p as default};
 //# sourceMappingURL=component.js.map

package/build/web-components/progress/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"component.js","sources":["../../../src/web-components/progress/component.ts"],"sourcesContent":["import { attr, godown, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { isNullable, Ranger } from \"sharekit\";\n\nimport { GlobalStyle, cssGlobalVars } from \"../../internal/global-style.js\";\n\nconst protoName = \"progress\";\n\n/*\n {@linkcode Progress} similar to `<progress>`.\n \n @category feedback\n /\n@godown(protoName)\n@styles(css`\n :host {\n width: 100%;\n height: 0.5em;\n border-radius: 0.25em;\n background: var(${cssGlobalVars.passive});\n color: var(${cssGlobalVars.active});\n }\n\n :host,\n [part=\"root\"] {\n display: block;\n }\n\n [part=\"root\"] {\n z-index: 1;\n position: relative;\n border-radius: inherit;\n overflow: hidden;\n }\n\n [part=\"value\"] {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n height: 100%;\n border-radius: inherit;\n transition: all 0.3s;\n animation: progress 1.8s ease-in-out infinite alternate;\n background: currentColor;\n }\n\n @keyframes progress {\n from {\n left: 0;\n }\n to {\n left: 80%;\n }\n }\n\n .static [part=\"value\"] {\n animation: none;\n }\n`)\nclass Progress extends GlobalStyle {\n @property({ type: Number })\n max = 1;\n\n @property({ type: Number })\n min = 0;\n\n @property({ type: Number })\n value: number;\n\n protected render(): TemplateResult<1> {\n let width = 20;\n let className: string;\n if (!isNullable(this.value)) {\n const ranger = new Ranger(this.min, this.max);\n const value = +this.value - this.min;\n width = (value / ranger.diff) 100;\n className = \"static\";\n }\n return html`\n <div\n part=\"root\"\n ${attr(this.observedRecord)}\n class=\"${className}\"\n >\n <i\n part=\"value\"\n style=\"width:${width}%;\"\n ></i>\n </div>\n `;\n }\n}\n\nexport default Progress;\nexport { Progress };\n"],"names":["Progress","width","className: string","ranger","value","className"],"mappings":"~~mUAOA~~,~~MAAM~~,~~UAAY~~,WAOlB,~~IAAA~~,~~SAAA~~,MA+CMA,~~UAAiB~~,~~WAAY~~,oCAEjC,IAAM,OAGN,IAAM,EAKI,QAA4B,CACpC,IAAIC,EAAQ,GACRC,EACJ,GAAI,~~CAAC~~,~~WAAW~~,KAAK,~~MAAM~~,~~CAAE,~~CAC3B,IAAMC,EAAS,~~IAAI~~,~~OAAO~~,KAAK,IAAK,KAAK,KACnCC,EAAQ,CAAC,KAAK,MAAQ,KAAK,~~IACjCH~~,~~EAASG~~,~~EAAQD~~,EAAO,KAAQ,~~IAChCE~~,EAAY,~~QACb~~,~~CACD,~~MAAO,~~KAAI~~,~~CAAA~~,~~iBAGP~~,~~EAAE,~~KAAK,~~KAAK~~,~~eAAe~~,~~CAAA,QACpB,EAAEA,~~EAAU,~~gCAIJ~~,~~EAAEJ,~~EAAM,~~eAG3B~~,~~CAAC~~,~~AACF~~,~~CACF~~,~~aA/BE,SAAS,~~CAAE,KAAM,~~MAAQ~~,~~EAAC,AAAA,~~EAAA,~~SAAA,~~UAAA,MAAA,~~OAAA~~,~~YAG1B~~,~~SAAS~~,CAAE,KAAM,~~MAAQ~~,~~EAAC,AAAA,~~EAAA,~~SAAA,~~UAAA,MAAA,~~OAAA~~,~~YAG1B~~,~~SAAS~~,CAAE,KAAM,~~MAAQ~~,~~EAAC,AAAA,~~EAAA,~~SAAA,~~UAAA,QAAA,~~OAAA~~,~~CAtD5B~~,~~SAAA~~,~~UAAA~~,~~CAAA~~,~~OAAO~~,~~UAAU~~,~~CACjB,OAAO,GAAG,CAAC,gEAKQ,EAAE,cAAc,~~QAAQ,~~YAC7B~~,~~EAAE~~,~~cAAc,~~OAAO,~~yXAuCtC~~,~~CAAC~~,~~CAAC,AAAA,EAAA,SAAA,CAmCF,IAAA,WAAe~~"}
1	+ {"version":3,"file":"component.js","sources":["../../../src/web-components/progress/component.ts"],"sourcesContent":["import { attr, godown, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { isNullable, Ranger } from \"sharekit\";\n\nimport { GlobalStyle, cssGlobalVars } from \"../../internal/global-style.js\";\n\nconst protoName = \"progress\";\n\n/*\n {@linkcode Progress} similar to `<progress>`.\n \n @category feedback\n /\n@godown(protoName)\n@styles(css`\n :host {\n width: 100%;\n height: 0.5em;\n border-radius: 0.25em;\n background: var(${cssGlobalVars.passive});\n color: var(${cssGlobalVars.active});\n }\n\n :host,\n [part=\"root\"] {\n display: block;\n }\n\n [part=\"root\"] {\n z-index: 1;\n position: relative;\n border-radius: inherit;\n overflow: hidden;\n }\n\n [part=\"value\"] {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n height: 100%;\n border-radius: inherit;\n transition: all 0.3s;\n animation: progress 1.8s ease-in-out infinite alternate;\n background: currentColor;\n }\n\n @keyframes progress {\n from {\n left: 0;\n }\n to {\n left: 80%;\n }\n }\n\n .static [part=\"value\"] {\n animation: none;\n }\n`)\nclass Progress extends GlobalStyle {\n @property({ type: Number })\n max = 1;\n\n @property({ type: Number })\n min = 0;\n\n @property({ type: Number })\n value: number;\n\n protected render(): TemplateResult<1> {\n let width = 20;\n let className: string;\n if (!isNullable(this.value)) {\n const ranger = new Ranger(this.min, this.max);\n const value = +this.value - this.min;\n width = (value / ranger.diff) 100;\n className = \"static\";\n }\n return html`\n <div\n part=\"root\"\n ${attr(this.observedRecord)}\n class=\"${className}\"\n >\n <i\n part=\"value\"\n style=\"width:${width}%;\"\n ></i>\n </div>\n `;\n }\n}\n\nexport default Progress;\nexport { Progress };\n"],"names":["protoName","Progress","GlobalStyle","width","className: string","isNullable","ranger","Ranger","value","attr","className","_decorate","property","godown","styles","cssGlobalVars","Progress$1"],"mappings":"uUAOA,MAAMA,EAAY,WAOlB,IAAAC,EAAA,MA+CMA,UAAiBC,CAAY,oCAEjC,IAAM,OAGN,IAAM,EAKI,QAA4B,CACpC,IAAIC,EAAQ,GACRC,EACJ,GAAI,CAACC,EAAW,KAAK,OAAQ,CAC3B,IAAMC,EAAS,IAAIC,EAAO,KAAK,IAAK,KAAK,KACnCC,EAAQ,CAAC,KAAK,MAAQ,KAAK,IACjC,EAASA,EAAQF,EAAO,KAAQ,IAChC,EAAY,SAEd,MAAO,EAAI,oBAGLG,EAAK,KAAK,gBAAA,UACHC,EAAU,kCAIFP,EAAM,mBA1B5BQ,EAAA,CAAAC,EAAS,CAAE,KAAM,UAAAX,EAAA,UAAA,MAAA,QAGjBU,EAAA,CAAAC,EAAS,CAAE,KAAM,UAAAX,EAAA,UAAA,MAAA,QAGjBU,EAAA,CAAAC,EAAS,CAAE,KAAM,UAAAX,EAAA,UAAA,QAAA,aAtDnBY,EAAO,YACPC,EAAO,CAAG,mEAKWC,EAAc,QAAQ,cAC3BA,EAAc,OAAO,gYA0EtC,IAAAC,EAAef"}

package/build/web-components/progress/definition.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"AAAA,OAAO,cAAc~~,gBAAiB~~;~~AAItC~~,eAAe;eAEA;WACH,sBAAsB;EAC9B,mBAAmB~~;CACpB;AACF~~","names":[],"sources":["../../../../src/web-components/progress/definition.ts"],"sourcesContent":["import Progress from \"./component.js\";\n\nProgress.define();\n\nexport default Progress;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-progress\": Progress;\n }\n}\n"],"version":3,"file":"definition.d.ts"}
1	+ {"mappings":"AAAA,OAAO,cAAc;AAIrB,eAAe;eAEA;WACH,sBAAsB;EAC9B,mBAAmB","names":[],"sources":["../../../../src/web-components/progress/definition.ts"],"sourcesContent":["import Progress from \"./component.js\";\n\nProgress.define();\n\nexport default Progress;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-progress\": Progress;\n }\n}\n"],"version":3,"file":"definition.d.ts"}

package/build/web-components/progress/definition.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import Progress from"./component.js";import"@godown/element";import"lit";import"lit/decorators.js";import"sharekit";import"../../internal/global-style.js";import"../../internal/reset-style.js";import"@oxc-project/runtime/helpers/decorate";Progress.define();export{Progress as default};
+import e from"./component.js";e.define();export{e as default};
 //# sourceMappingURL=definition.js.map

package/build/web-components/progress/definition.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"definition.js","sources":["../../../src/web-components/progress/definition.ts"],"sourcesContent":["import Progress from \"./component.js\";\n\nProgress.define();\n\nexport default Progress;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-progress\": Progress;\n }\n}\n"],"names":[],"mappings":"~~+OAEA~~,~~SAAS,QAAQ~~"}
1	+ {"version":3,"file":"definition.js","sources":["../../../src/web-components/progress/definition.ts"],"sourcesContent":["import Progress from \"./component.js\";\n\nProgress.define();\n\nexport default Progress;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-progress\": Progress;\n }\n}\n"],"names":["Progress"],"mappings":"8BAEAA,EAAS"}

package/build/web-components/range/component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"AACA,SAA2B,cAAc,UAAW;AACpD,cAAc,sBAAiC,KAAM;AAKrD,SAAS,kBAAkB,+BAAgC;KAMtD;;;;;;;;;;;AAYL,cA0FM,MAAM,UAAU,aAAa,oBAAoB,WAAW,YAAY;;;;CAI5E,AACA;;;;CAKA,AACA;;;;CAKA,AACA;;;;CAKA,AACA;;;;;;CAOA,AACA,OAAO;;;;CAKP,AACA,SAAS;CAET,UACU,OAAO;CAEjB,UACU,UAAU,WAAW;CAE/B,AACA;CAEA,UAAU,SAAS;CACnB,QAAQ;CAER,IAAI,SAAS,mBAAmB,QAAQ;;;;CAOxC,IAAI;;;;CAOJ,SAASA,aAAa;CAStB,yBAAyBC,cAAcC,qBAAqBC;CAO5D,IAAI,kBAAkB;CAItB,UAAU,UAAU,eAAe;CA2BnC,UAAU,cAAcC,gBAAgB,eAAe;CAkBvD,QAAQ;;;;;CAMR,YAAYA;;;;CAiBZ;;;;;;CAUA,UAAU,mBAAmBA,iBACnBC,GAAG;;;;;;CAqBb,UAAU,gBAAgBD,iBAChBE,GAAG;;;;;;CAWb,UAAU,eAAeF,iBACfG;;;;;CAgBV,UAAU,cAAc,EAAE,SAAS,SAAqB,EAAV;;;;;;CAU9C,UAAU,qBAAqBD,GAAG;;;;;;CAqBlC,UAAU,wBAAwBE,oBAAoBC,yBAC5CH,GAAG;;;;;;CAkBb,UAAU,wBAAwBI,WAAWC,6BACnCL,GAAG;CASb,UAAU;CAcV;CAIA,QAAQ;CAIR,YAAY;AAMb;AAED,eAAe;AACf,SAAS","names":["len: number","name: string","_old: string \| null","value: string \| null","index: number","e: KeyboardEvent","e: MouseEvent","value: number","mouseMoveCallback: (arg0: number) => void","arg0: number","callback: (newValue: number) => void","newValue: number"],"sources":["../../../../src/web-components/range/component.ts"],"sourcesContent":["import { attr, tokenList, godown, loop, styles } from \"@godown/element\";\nimport { isNullable, omit, Ranger } from \"sharekit\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property, query, queryAll, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport { cssGlobalVars, scopePrefix } from \"../../internal/global-style.js\";\nimport { SuperInput } from \"../../internal/super-input.js\";\nimport { ringTypeAttribute } from \"../../internal/ring.js\";\n\nconst protoName = \"range\";\nconst cssScope = scopePrefix(protoName);\n\ntype RangeValue = number \| number[];\n\n/*\n {@linkcode Range} is similar to `<input type=\"range\">`.\n \n Value accepts number, or array.\n \n Number has 1 handle, the array has the number of its elements.\n \n @fires range - Fires when the value changes.\n * @category input\n /\n@godown(protoName)\n@styles(\n css`\n :host {\n ${cssScope}--track-width: .5em;\n ${cssScope}--handle-scale: 1;\n ${cssScope}--track-background: var(${cssGlobalVars.active});\n background: var(${cssGlobalVars.passive});\n width: 100%;\n display: block;\n height: var(${cssScope}--track-width);\n }\n\n :host([contents]) [part=\"root\"] {\n width: inherit;\n }\n\n :host([vertical]) {\n height: 100%;\n width: fit-content;\n }\n\n [part=\"root\"] {\n min-height: inherit;\n position: relative;\n border-radius: inherit;\n --from: 0%;\n --to: 50%;\n }\n\n [part=\"track\"] {\n height: 100%;\n min-height: inherit;\n display: flex;\n position: absolute;\n pointer-events: none;\n border-radius: inherit;\n justify-content: space-between;\n left: min(var(--from), var(--to));\n background: var(${cssScope}--track-background);\n width: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));\n }\n\n [part~=\"handle\"] {\n width: 1em;\n height: 1em;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n position: absolute;\n border-radius: 50%;\n transform-origin: 0% 25%;\n outline: 0;\n border-style: solid;\n border-width: 0.1em;\n transform: scale(var(${cssScope}--handle-scale)) translate(-50%, -25%);\n background: var(${cssGlobalVars.background});\n border-color: currentColor;\n }\n `,\n css`\n [vertical] {\n height: inherit;\n width: var(${cssScope}--track-width);\n }\n\n [vertical] i {\n transform: translate(-25%, -50%);\n }\n\n [vertical] [part=\"track\"] {\n width: 100%;\n height: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));\n top: min(var(--from), var(--to));\n left: 0;\n }\n `,\n css`\n [part~=\"handle\"] {\n left: var(--handle);\n top: 0;\n }\n\n [vertical] [part~=\"handle\"] {\n top: var(--handle);\n left: 0;\n }\n `,\n)\nclass Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {\n /\n Minimum value.\n /\n @property({ type: Number })\n min = 0;\n\n /\n Maximum value.\n /\n @property({ type: Number })\n max = 100;\n\n /\n Sliding step length.\n /\n @property({ type: Number })\n step: number;\n\n /\n Whether to display the range vertically.\n /\n @property({ type: Boolean, reflect: true })\n vertical = false;\n\n /\n Value, or each of values, will render a handle.\n \n Accepts number or array of numbers.\n /\n @property({ type: Array })\n value: V;\n\n /\n The default of `{@linkcode this.value}`.\n /\n @property({ type: Array })\n default: V;\n\n @query(\"[part=root]\")\n protected _root: HTMLElement;\n\n @queryAll(\"[part=handle]\")\n protected _handles: NodeListOf<HTMLElement>;\n\n @state()\n lastFocus?: number;\n\n protected _ranger: Ranger;\n private __focusStack: number[] = [];\n\n get range(): V extends number ? false : true {\n return Array.isArray(this.value) as any;\n }\n\n /\n Return values in the form of an array.\n /\n get rangeValue(): number[] {\n return (this.range ? this.value : [this.value]) as number[];\n }\n\n /\n Pad the value to the specified length.\n /\n padValue(len: number, value = 0): number[] {\n const { rangeValue } = this;\n const miss = len - rangeValue.length;\n if (miss > 0) {\n return new Array(miss).fill(value).concat(rangeValue);\n }\n return rangeValue;\n }\n\n attributeChangedCallback(name: string, _old: string \| null, value: string \| null): void {\n super.attributeChangedCallback(name, _old, value);\n if (name === \"max\" \|\| name === \"min\" \|\| name === \"step\") {\n this._ranger = new Ranger(this.min, this.max, this.step);\n }\n }\n\n get observedRecord(): Record<string, any> {\n return omit(super.observedRecord, ringTypeAttribute);\n }\n\n protected render(): TemplateResult<1> {\n const rangeValue = this.padValue(2);\n const from = Math.min(...rangeValue);\n const to = Math.max(...rangeValue);\n const gap = this._ranger.diff;\n\n return html`\n <div\n part=\"root\"\n ${attr(this.observedRecord)}\n @mousedown=\"${this.disabled ? null : this._handleMousedownRoot}\"\n style=\"${styleMap(\n Object.fromEntries([\n [\"--from\", `${((from - this.min) / gap) 100}%`],\n [\"--to\", `${((to - this.min) / gap) * 100}%`],\n ...rangeValue.map(\n (value, index) => [`--handle-${index}`, `${((value - this.min) / gap) * 100}%`] as [string, string],\n ),\n ]),\n )}\"\n >\n <div part=\"track\"></div>\n ${loop(this.rangeValue.length, (index) => this._renderHandle(index))}\n </div>\n `;\n }\n\n protected _renderHandle(index: number): TemplateResult<1> {\n const { disabled, range, rangeValue } = this;\n\n // in single-handle mod (value is a number or an array with length 1),\n const end = !range \|\| (range && index === rangeValue.length - 1 && rangeValue.length === 1);\n return html`\n <i\n tabindex=\"0\"\n part=\"${tokenList(\"handle\", `handle-${index}`)}\"\n @mousedown=\"${disabled ? null : this.createMouseDown(index)}\"\n style=\"${styleMap({\n \"z-index\": this.__focusStack.indexOf(index) + 1,\n \"--handle\": `var(--${end ? \"to\" : `handle-${index}`})`,\n })}\"\n ></i>\n `;\n }\n\n private __keydownEvent: EventListenerOrEventListenerObject;\n\n /*\n Focuses the handle at the given index, updates the focus stack.\n * @param index - The index of the handle to focus.\n /\n focusHandle(index: number): void {\n this.lastFocus = index;\n const indexOfFocusStack = this.__focusStack.indexOf(index);\n if (indexOfFocusStack !== -1) {\n this.__focusStack.splice(indexOfFocusStack, 1);\n }\n this.__focusStack.push(index);\n const handleItem = this._handles.item(index);\n handleItem?.focus();\n if (!this.__keydownEvent) {\n this.__keydownEvent = this.events.add(document, \"keydown\", this.createKeydownEvent(index));\n }\n }\n\n /\n Removes the focus from the currently focused handle.\n /\n blurHandle(): void {\n this.lastFocus = undefined;\n this.__keydownEvent = this.events.remove(document, \"keydown\", this.__keydownEvent);\n }\n\n /\n Creates a keydown event handler that updates the value of the range based on arrow key presses.\n * @param index - The index of the handle to update.\n * @returns A function that handles the keydown event and updates the range value.\n /\n protected createKeydownEvent(index: number) {\n return (e: KeyboardEvent): void => {\n const { rangeValue, step } = this;\n if (rangeValue.length < 2) {\n index = 0;\n }\n const old = rangeValue[index];\n if (e.key === \"ArrowLeft\" \|\| e.key === \"ArrowDown\") {\n e.preventDefault();\n this.createSetValue(index)(old - step);\n } else if (e.key === \"ArrowRight\" \|\| e.key === \"ArrowUp\") {\n e.preventDefault();\n this.createSetValue(index)(old + step);\n }\n };\n }\n\n /\n Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.\n * @param index - The index of the handle to focus.\n * @returns A function that handles the mouse down event and updates the range value.\n /\n protected createMouseDown(index: number) {\n return (e: MouseEvent): void => {\n this.focusHandle(index);\n this.createMousedownListener(this.createSetValue(index))(e);\n };\n }\n\n /\n Creates a function that sets the value of the range at the given index.\n * @param index - The index of the value to set.\n * @returns A function that sets the value of the range.\n /\n protected createSetValue(index: number) {\n return (value: number): void => {\n const normalizeValue = this._ranger.normalize(value);\n let newValue: RangeValue = normalizeValue;\n if (this.range) {\n newValue = [...(this.value as number[])];\n newValue[index] = normalizeValue;\n }\n this.value = newValue as V;\n this.dispatchCustomEvent(\"change\", this.value);\n };\n }\n\n /\n Compute value from event.\n * @returns The value closest to the event client position.\n /\n protected _computeValue({ clientX, clientY }: MouseEvent): number {\n const { top, left, height, width } = this._root.getBoundingClientRect();\n return this._ranger.present(this.vertical ? (clientY - top) / height : (clientX - left) / width);\n }\n\n /\n Handles the mouse down event on the root element of the range component.\n * Computes the closest value to the mouse position, sets the value, and focuses the corresponding handle.\n * @param e - The mouse down event object.\n /\n protected _handleMousedownRoot(e: MouseEvent): void {\n const value = this._computeValue(e);\n const index = this.range\n ? this.rangeValue.reduce((acc, item, index) => {\n const diff = Math.abs(value - item);\n const prevDiff = Math.abs(value - this.rangeValue[acc]);\n return diff < prevDiff ? index : acc;\n }, 0)\n : 0;\n\n const set = this.createSetValue(index);\n set(value);\n this.createMousedownListener(set)(e);\n this.focusHandle(index);\n }\n\n /\n Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.\n * @param index - The index of the handle to focus.\n * @returns A function that handles the mouse down event and updates the range value.\n /\n protected createMousedownListener(mouseMoveCallback: (arg0: number) => void) {\n return (e: MouseEvent): void => {\n e.preventDefault();\n e.stopPropagation();\n const move = this.createMousemoveListener(mouseMoveCallback);\n this.events.add(document, \"mousemove\", move);\n const stop = () => {\n this.events.remove(document, \"mousemove\", move);\n this.events.remove(document, \"mouseup\", stop);\n };\n this.events.add(document, \"mouseup\", stop);\n };\n }\n\n /\n Creates a mouse move event handler that updates the range value based on the mouse position.\n * @param callback - A function to call with the new value when the mouse is moved.\n * @returns A function that handles the mouse move event and updates the range value.\n /\n protected createMousemoveListener(callback: (newValue: number) => void) {\n return (e: MouseEvent): void => {\n const value = this._computeValue(e);\n if (value !== this._ranger.restrict(value)) {\n return;\n }\n callback?.call(this, value);\n };\n }\n\n protected _connectedInit(): void {\n this._ranger = new Ranger(this.min, this.max, this.step);\n const gap = this._ranger.diff;\n this.step \|\|= gap / 100;\n if (isNullable(this.value)) {\n if (!isNullable(this.default)) {\n this.value = this.default;\n } else {\n (this.value as number) = Math.round(gap / 2 / this.step) this.step;\n }\n }\n this.default ??= this.value;\n }\n\n reset(): void {\n this.value = this.default;\n }\n\n sort(): V {\n return (this.value = this.toSorted());\n }\n\n toSorted(): V {\n if (this.range) {\n return [...(this.value as number[])].sort((a, b) => a - b) as V;\n }\n return this.value;\n }\n}\n\nexport default Range;\nexport { Range };\n"],"version":3,"file":"component.d.ts"}
1	+ {"mappings":"AACA,SAA2B,cAAc;AACzC,cAAc,sBAAiC;AAK/C,SAAS,kBAAkB;KAMtB;;;;;;;;;;;AAYL,cA0FM,MAAM,UAAU,aAAa,oBAAoB,WAAW,YAAY;;;;CAI5E,AACA;;;;CAKA,AACA;;;;CAKA,AACA;;;;CAKA,AACA;;;;;;CAOA,AACA,OAAO;;;;CAKP,AACA,SAAS;CAET,UACU,OAAO;CAEjB,UACU,UAAU,WAAW;CAE/B,AACA;CAEA,UAAU,SAAS;CACnB,QAAQ;CAER,IAAI,SAAS,mBAAmB,QAAQ;;;;CAOxC,IAAI;;;;CAOJ,SAAS,aAAa;CAStB,yBAAyB,cAAc,qBAAqB;CAO5D,IAAI,kBAAkB;CAItB,UAAU,UAAU,eAAe;CA2BnC,UAAU,cAAc,gBAAgB,eAAe;CAkBvD,QAAQ;;;;;CAMR,YAAY;;;;CAiBZ;;;;;;CAUA,UAAU,mBAAmB,iBACnB,GAAG;;;;;;CAqBb,UAAU,gBAAgB,iBAChB,GAAG;;;;;;CAWb,UAAU,eAAe,iBACf;;;;;CAgBV,UAAU,cAAc,EAAE,SAAS,WAAW;;;;;;CAU9C,UAAU,qBAAqB,GAAG;;;;;;CAqBlC,UAAU,wBAAwB,oBAAoB,yBAC5C,GAAG;;;;;;CAkBb,UAAU,wBAAwB,WAAW,6BACnC,GAAG;CASb,UAAU;CAcV;CAIA,QAAQ;CAIR,YAAY;;AAQd,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/range/component.ts"],"sourcesContent":["import { attr, tokenList, godown, loop, styles } from \"@godown/element\";\nimport { isNullable, omit, Ranger } from \"sharekit\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property, query, queryAll, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport { cssGlobalVars, scopePrefix } from \"../../internal/global-style.js\";\nimport { SuperInput } from \"../../internal/super-input.js\";\nimport { ringTypeAttribute } from \"../../internal/ring.js\";\n\nconst protoName = \"range\";\nconst cssScope = scopePrefix(protoName);\n\ntype RangeValue = number \| number[];\n\n/*\n {@linkcode Range} is similar to `<input type=\"range\">`.\n \n Value accepts number, or array.\n \n Number has 1 handle, the array has the number of its elements.\n \n @fires range - Fires when the value changes.\n * @category input\n /\n@godown(protoName)\n@styles(\n css`\n :host {\n ${cssScope}--track-width: .5em;\n ${cssScope}--handle-scale: 1;\n ${cssScope}--track-background: var(${cssGlobalVars.active});\n background: var(${cssGlobalVars.passive});\n width: 100%;\n display: block;\n height: var(${cssScope}--track-width);\n }\n\n :host([contents]) [part=\"root\"] {\n width: inherit;\n }\n\n :host([vertical]) {\n height: 100%;\n width: fit-content;\n }\n\n [part=\"root\"] {\n min-height: inherit;\n position: relative;\n border-radius: inherit;\n --from: 0%;\n --to: 50%;\n }\n\n [part=\"track\"] {\n height: 100%;\n min-height: inherit;\n display: flex;\n position: absolute;\n pointer-events: none;\n border-radius: inherit;\n justify-content: space-between;\n left: min(var(--from), var(--to));\n background: var(${cssScope}--track-background);\n width: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));\n }\n\n [part~=\"handle\"] {\n width: 1em;\n height: 1em;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n position: absolute;\n border-radius: 50%;\n transform-origin: 0% 25%;\n outline: 0;\n border-style: solid;\n border-width: 0.1em;\n transform: scale(var(${cssScope}--handle-scale)) translate(-50%, -25%);\n background: var(${cssGlobalVars.background});\n border-color: currentColor;\n }\n `,\n css`\n [vertical] {\n height: inherit;\n width: var(${cssScope}--track-width);\n }\n\n [vertical] i {\n transform: translate(-25%, -50%);\n }\n\n [vertical] [part=\"track\"] {\n width: 100%;\n height: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));\n top: min(var(--from), var(--to));\n left: 0;\n }\n `,\n css`\n [part~=\"handle\"] {\n left: var(--handle);\n top: 0;\n }\n\n [vertical] [part~=\"handle\"] {\n top: var(--handle);\n left: 0;\n }\n `,\n)\nclass Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {\n /\n Minimum value.\n /\n @property({ type: Number })\n min = 0;\n\n /\n Maximum value.\n /\n @property({ type: Number })\n max = 100;\n\n /\n Sliding step length.\n /\n @property({ type: Number })\n step: number;\n\n /\n Whether to display the range vertically.\n /\n @property({ type: Boolean, reflect: true })\n vertical = false;\n\n /\n Value, or each of values, will render a handle.\n \n Accepts number or array of numbers.\n /\n @property({ type: Array })\n value: V;\n\n /\n The default of `{@linkcode this.value}`.\n /\n @property({ type: Array })\n default: V;\n\n @query(\"[part=root]\")\n protected _root: HTMLElement;\n\n @queryAll(\"[part=handle]\")\n protected _handles: NodeListOf<HTMLElement>;\n\n @state()\n lastFocus?: number;\n\n protected _ranger: Ranger;\n private __focusStack: number[] = [];\n\n get range(): V extends number ? false : true {\n return Array.isArray(this.value) as any;\n }\n\n /\n Return values in the form of an array.\n /\n get rangeValue(): number[] {\n return (this.range ? this.value : [this.value]) as number[];\n }\n\n /\n Pad the value to the specified length.\n /\n padValue(len: number, value = 0): number[] {\n const { rangeValue } = this;\n const miss = len - rangeValue.length;\n if (miss > 0) {\n return new Array(miss).fill(value).concat(rangeValue);\n }\n return rangeValue;\n }\n\n attributeChangedCallback(name: string, _old: string \| null, value: string \| null): void {\n super.attributeChangedCallback(name, _old, value);\n if (name === \"max\" \|\| name === \"min\" \|\| name === \"step\") {\n this._ranger = new Ranger(this.min, this.max, this.step);\n }\n }\n\n get observedRecord(): Record<string, any> {\n return omit(super.observedRecord, ringTypeAttribute);\n }\n\n protected render(): TemplateResult<1> {\n const rangeValue = this.padValue(2);\n const from = Math.min(...rangeValue);\n const to = Math.max(...rangeValue);\n const gap = this._ranger.diff;\n\n return html`\n <div\n part=\"root\"\n ${attr(this.observedRecord)}\n @mousedown=\"${this.disabled ? null : this._handleMousedownRoot}\"\n style=\"${styleMap(\n Object.fromEntries([\n [\"--from\", `${((from - this.min) / gap) 100}%`],\n [\"--to\", `${((to - this.min) / gap) * 100}%`],\n ...rangeValue.map(\n (value, index) => [`--handle-${index}`, `${((value - this.min) / gap) * 100}%`] as [string, string],\n ),\n ]),\n )}\"\n >\n <div part=\"track\"></div>\n ${loop(this.rangeValue.length, (index) => this._renderHandle(index))}\n </div>\n `;\n }\n\n protected _renderHandle(index: number): TemplateResult<1> {\n const { disabled, range, rangeValue } = this;\n\n // in single-handle mod (value is a number or an array with length 1),\n const end = !range \|\| (range && index === rangeValue.length - 1 && rangeValue.length === 1);\n return html`\n <i\n tabindex=\"0\"\n part=\"${tokenList(\"handle\", `handle-${index}`)}\"\n @mousedown=\"${disabled ? null : this.createMouseDown(index)}\"\n style=\"${styleMap({\n \"z-index\": this.__focusStack.indexOf(index) + 1,\n \"--handle\": `var(--${end ? \"to\" : `handle-${index}`})`,\n })}\"\n ></i>\n `;\n }\n\n private __keydownEvent: EventListenerOrEventListenerObject;\n\n /*\n Focuses the handle at the given index, updates the focus stack.\n * @param index - The index of the handle to focus.\n /\n focusHandle(index: number): void {\n this.lastFocus = index;\n const indexOfFocusStack = this.__focusStack.indexOf(index);\n if (indexOfFocusStack !== -1) {\n this.__focusStack.splice(indexOfFocusStack, 1);\n }\n this.__focusStack.push(index);\n const handleItem = this._handles.item(index);\n handleItem?.focus();\n if (!this.__keydownEvent) {\n this.__keydownEvent = this.events.add(document, \"keydown\", this.createKeydownEvent(index));\n }\n }\n\n /\n Removes the focus from the currently focused handle.\n /\n blurHandle(): void {\n this.lastFocus = undefined;\n this.__keydownEvent = this.events.remove(document, \"keydown\", this.__keydownEvent);\n }\n\n /\n Creates a keydown event handler that updates the value of the range based on arrow key presses.\n * @param index - The index of the handle to update.\n * @returns A function that handles the keydown event and updates the range value.\n /\n protected createKeydownEvent(index: number) {\n return (e: KeyboardEvent): void => {\n const { rangeValue, step } = this;\n if (rangeValue.length < 2) {\n index = 0;\n }\n const old = rangeValue[index];\n if (e.key === \"ArrowLeft\" \|\| e.key === \"ArrowDown\") {\n e.preventDefault();\n this.createSetValue(index)(old - step);\n } else if (e.key === \"ArrowRight\" \|\| e.key === \"ArrowUp\") {\n e.preventDefault();\n this.createSetValue(index)(old + step);\n }\n };\n }\n\n /\n Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.\n * @param index - The index of the handle to focus.\n * @returns A function that handles the mouse down event and updates the range value.\n /\n protected createMouseDown(index: number) {\n return (e: MouseEvent): void => {\n this.focusHandle(index);\n this.createMousedownListener(this.createSetValue(index))(e);\n };\n }\n\n /\n Creates a function that sets the value of the range at the given index.\n * @param index - The index of the value to set.\n * @returns A function that sets the value of the range.\n /\n protected createSetValue(index: number) {\n return (value: number): void => {\n const normalizeValue = this._ranger.normalize(value);\n let newValue: RangeValue = normalizeValue;\n if (this.range) {\n newValue = [...(this.value as number[])];\n newValue[index] = normalizeValue;\n }\n this.value = newValue as V;\n this.dispatchCustomEvent(\"change\", this.value);\n };\n }\n\n /\n Compute value from event.\n * @returns The value closest to the event client position.\n /\n protected _computeValue({ clientX, clientY }: MouseEvent): number {\n const { top, left, height, width } = this._root.getBoundingClientRect();\n return this._ranger.present(this.vertical ? (clientY - top) / height : (clientX - left) / width);\n }\n\n /\n Handles the mouse down event on the root element of the range component.\n * Computes the closest value to the mouse position, sets the value, and focuses the corresponding handle.\n * @param e - The mouse down event object.\n /\n protected _handleMousedownRoot(e: MouseEvent): void {\n const value = this._computeValue(e);\n const index = this.range\n ? this.rangeValue.reduce((acc, item, index) => {\n const diff = Math.abs(value - item);\n const prevDiff = Math.abs(value - this.rangeValue[acc]);\n return diff < prevDiff ? index : acc;\n }, 0)\n : 0;\n\n const set = this.createSetValue(index);\n set(value);\n this.createMousedownListener(set)(e);\n this.focusHandle(index);\n }\n\n /\n Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.\n * @param index - The index of the handle to focus.\n * @returns A function that handles the mouse down event and updates the range value.\n /\n protected createMousedownListener(mouseMoveCallback: (arg0: number) => void) {\n return (e: MouseEvent): void => {\n e.preventDefault();\n e.stopPropagation();\n const move = this.createMousemoveListener(mouseMoveCallback);\n this.events.add(document, \"mousemove\", move);\n const stop = () => {\n this.events.remove(document, \"mousemove\", move);\n this.events.remove(document, \"mouseup\", stop);\n };\n this.events.add(document, \"mouseup\", stop);\n };\n }\n\n /\n Creates a mouse move event handler that updates the range value based on the mouse position.\n * @param callback - A function to call with the new value when the mouse is moved.\n * @returns A function that handles the mouse move event and updates the range value.\n /\n protected createMousemoveListener(callback: (newValue: number) => void) {\n return (e: MouseEvent): void => {\n const value = this._computeValue(e);\n if (value !== this._ranger.restrict(value)) {\n return;\n }\n callback?.call(this, value);\n };\n }\n\n protected _connectedInit(): void {\n this._ranger = new Ranger(this.min, this.max, this.step);\n const gap = this._ranger.diff;\n this.step \|\|= gap / 100;\n if (isNullable(this.value)) {\n if (!isNullable(this.default)) {\n this.value = this.default;\n } else {\n (this.value as number) = Math.round(gap / 2 / this.step) this.step;\n }\n }\n this.default ??= this.value;\n }\n\n reset(): void {\n this.value = this.default;\n }\n\n sort(): V {\n return (this.value = this.toSorted());\n }\n\n toSorted(): V {\n if (this.range) {\n return [...(this.value as number[])].sort((a, b) => a - b) as V;\n }\n return this.value;\n }\n}\n\nexport default Range;\nexport { Range };\n"],"version":3,"file":"component.d.ts"}

package/build/web-components/range/component.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{godown,styles,attr,loop,tokenList}from"@godown/element";import{Ranger,omit,isNullable}from"sharekit";import{css,html}from"lit";import{property,query,queryAll,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{scopePrefix,cssGlobalVars}from"../../internal/global-style.js";import{SuperInput}from"../../internal/super-input.js";import{ringTypeAttribute}from"../../internal/ring.js";import _decorate from"@oxc-project/runtime/helpers/decorate";import"../../internal/reset-style.js";const protoName=`range`,cssScope=scopePrefix(protoName);let Range=class e extends SuperInput{constructor(...e){super(...e),this.min=0,this.max=100,this.vertical=!1,this.__focusStack=[]}get range(){return Array.isArray(this.value)}get rangeValue(){return this.range?this.value:[this.value]}padValue(e,y=0){let{rangeValue:b}=this,x=e-b.length;return x>0?Array(x).fill(y).concat(b):b}attributeChangedCallback(e,y,b){super.attributeChangedCallback(e,y,b),(e===`max`||e===`min`||e===`step`)&&(this._ranger=new Ranger(this.min,this.max,this.step))}get observedRecord(){return omit(super.observedRecord,ringTypeAttribute)}render(){let e=this.padValue(2),y=Math.min(...e),S=Math.max(...e),C=this._ranger.diff;return html`<div part="root" ${attr(this.observedRecord)} @mousedown="${this.disabled?null:this._handleMousedownRoot}" style="${styleMap(Object.fromEntries([[`--from`,`${(y-this.min)/C*100}%`],[`--to`,`${(S-this.min)/C*100}%`],...e.map((e,y)=>[`--handle-${y}`,`${(e-this.min)/C*100}%`])]))}"> <div part="track"></div> ${loop(this.rangeValue.length,e=>this._renderHandle(e))} </div>`}_renderHandle(e){let{disabled:y,range:b,rangeValue:x}=this,C=!b||b&&e===x.length-1&&x.length===1;return html`<i tabindex="0" part="${tokenList(`handle`,`handle-${e}`)}" @mousedown="${y?null:this.createMouseDown(e)}" style="${styleMap({"z-index":this.__focusStack.indexOf(e)+1,"--handle":`var(--${C?`to`:`handle-${e}`})`})}"></i>`}focusHandle(e){this.lastFocus=e;let y=this.__focusStack.indexOf(e);y!==-1&&this.__focusStack.splice(y,1),this.__focusStack.push(e);let b=this._handles.item(e);b?.focus(),this.__keydownEvent||=this.events.add(document,`keydown`,this.createKeydownEvent(e))}blurHandle(){this.lastFocus=void 0,this.__keydownEvent=this.events.remove(document,`keydown`,this.__keydownEvent)}createKeydownEvent(e){return y=>{let{rangeValue:b,step:x}=this;b.length<2&&(e=0);let S=b[e];y.key===`ArrowLeft`||y.key===`ArrowDown`?(y.preventDefault(),this.createSetValue(e)(S-x)):(y.key===`ArrowRight`||y.key===`ArrowUp`)&&(y.preventDefault(),this.createSetValue(e)(S+x))}}createMouseDown(e){return y=>{this.focusHandle(e),this.createMousedownListener(this.createSetValue(e))(y)}}createSetValue(e){return y=>{let b=this._ranger.normalize(y),x=b;this.range&&(x=[...this.value],x[e]=b),this.value=x,this.dispatchCustomEvent(`change`,this.value)}}_computeValue({clientX:e,clientY:y}){let{top:b,left:x,height:S,width:C}=this._root.getBoundingClientRect();return this._ranger.present(this.vertical?(y-b)/S:(e-x)/C)}_handleMousedownRoot(e){let y=this._computeValue(e),b=this.range?this.rangeValue.reduce((e,b,x)=>{let S=Math.abs(y-b),C=Math.abs(y-this.rangeValue[e]);return S<C?x:e},0):0,x=this.createSetValue(b);x(y),this.createMousedownListener(x)(e),this.focusHandle(b)}createMousedownListener(e){return y=>{y.preventDefault(),y.stopPropagation();let b=this.createMousemoveListener(e);this.events.add(document,`mousemove`,b);let x=()=>{this.events.remove(document,`mousemove`,b),this.events.remove(document,`mouseup`,x)};this.events.add(document,`mouseup`,x)}}createMousemoveListener(e){return y=>{let b=this._computeValue(y);b===this._ranger.restrict(b)&&e?.call(this,b)}}_connectedInit(){this._ranger=new Ranger(this.min,this.max,this.step);let e=this._ranger.diff;this.step||=e/100,isNullable(this.value)&&(isNullable(this.default)?this.value=Math.round(e/2/this.step)*this.step:this.value=this.default),this.default??=this.value}reset(){this.value=this.default}sort(){return this.value=this.toSorted()}toSorted(){return this.range?[...this.value].sort((e,y)=>e-y):this.value}};_decorate([property({type:Number})],Range.prototype,`min`,void 0),_decorate([property({type:Number})],Range.prototype,`max`,void 0),_decorate([property({type:Number})],Range.prototype,`step`,void 0),_decorate([property({type:Boolean,reflect:!0})],Range.prototype,`vertical`,void 0),_decorate([property({type:Array})],Range.prototype,`value`,void 0),_decorate([property({type:Array})],Range.prototype,`default`,void 0),_decorate([query(`[part=root]`)],Range.prototype,`_root`,void 0),_decorate([queryAll(`[part=handle]`)],Range.prototype,`_handles`,void 0),_decorate([state()],Range.prototype,`lastFocus`,void 0),Range=_decorate([godown(protoName),styles(css`:host{${cssScope}--track-width:.5em;${cssScope}--handle-scale:1;${cssScope}--track-background:var(${cssGlobalVars.active});background:var(${cssGlobalVars.passive});width:100%;display:block;height:var(${cssScope}--track-width)}:host([contents]) [part=root]{width:inherit}:host([vertical]){height:100%;width:-moz-fit-content;width:fit-content}[part=root]{min-height:inherit;position:relative;border-radius:inherit;--from:0%;--to:50%}[part=track]{height:100%;min-height:inherit;display:flex;position:absolute;pointer-events:none;border-radius:inherit;justify-content:space-between;left:min(var(--from),var(--to));background:var(${cssScope}--track-background);width:max(calc(var(--to) - var(--from)),calc(var(--from) - var(--to)))}[part~=handle]{width:1em;height:1em;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:absolute;border-radius:50%;transform-origin:0 25%;outline:0;border-style:solid;border-width:.1em;transform:scale(var(${cssScope}--handle-scale)) translate(-50%,-25%);background:var(${cssGlobalVars.background});border-color:currentColor}`,css`[vertical]{height:inherit;width:var(${cssScope}--track-width)}[vertical] i{transform:translate(-25%,-50%)}[vertical] [part=track]{width:100%;height:max(calc(var(--to) - var(--from)),calc(var(--from) - var(--to)));top:min(var(--from),var(--to));left:0}`,css`[part~=handle]{left:var(--handle);top:0}[vertical] [part~=handle]{top:var(--handle);left:0} `)],Range);var Range$1=Range;export{Range,Range$1 as default};
+import{godown as e,styles as t,attr as n,loop as r,tokenList as i}from"@godown/element";import{Ranger as a,omit as o,isNullable as s}from"sharekit";import{css as c,html as l}from"lit";import{property as u,query as d,queryAll as f,state as p}from"lit/decorators.js";import{styleMap as m}from"lit/directives/style-map.js";import{scopePrefix as h,cssGlobalVars as g}from"../../internal/global-style.js";import{SuperInput as _}from"../../internal/super-input.js";import{ringTypeAttribute as v}from"../../internal/ring.js";import y from"@oxc-project/runtime/helpers/decorate";const b=`range`,x=h(b);let S=class e extends _{constructor(...e){super(...e),this.min=0,this.max=100,this.vertical=!1,this.__focusStack=[]}get range(){return Array.isArray(this.value)}get rangeValue(){return this.range?this.value:[this.value]}padValue(e,t=0){let{rangeValue:n}=this,r=e-n.length;return r>0?Array(r).fill(t).concat(n):n}attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),(e===`max`||e===`min`||e===`step`)&&(this._ranger=new a(this.min,this.max,this.step))}get observedRecord(){return o(super.observedRecord,v)}render(){let e=this.padValue(2),t=Math.min(...e),i=Math.max(...e),a=this._ranger.diff;return l`<div part="root" ${n(this.observedRecord)} @mousedown="${this.disabled?null:this._handleMousedownRoot}" style="${m(Object.fromEntries([[`--from`,`${(t-this.min)/a*100}%`],[`--to`,`${(i-this.min)/a*100}%`],...e.map((e,t)=>[`--handle-${t}`,`${(e-this.min)/a*100}%`])]))}"> <div part="track"></div> ${r(this.rangeValue.length,e=>this._renderHandle(e))} </div>`}_renderHandle(e){let{disabled:t,range:n,rangeValue:r}=this,a=!n||n&&e===r.length-1&&r.length===1;return l`<i tabindex="0" part="${i(`handle`,`handle-${e}`)}" @mousedown="${t?null:this.createMouseDown(e)}" style="${m({"z-index":this.__focusStack.indexOf(e)+1,"--handle":`var(--${a?`to`:`handle-${e}`})`})}"></i>`}focusHandle(e){this.lastFocus=e;let t=this.__focusStack.indexOf(e);t!==-1&&this.__focusStack.splice(t,1),this.__focusStack.push(e);let n=this._handles.item(e);n?.focus(),this.__keydownEvent||=this.events.add(document,`keydown`,this.createKeydownEvent(e))}blurHandle(){this.lastFocus=void 0,this.__keydownEvent=this.events.remove(document,`keydown`,this.__keydownEvent)}createKeydownEvent(e){return t=>{let{rangeValue:n,step:r}=this;n.length<2&&(e=0);let i=n[e];t.key===`ArrowLeft`||t.key===`ArrowDown`?(t.preventDefault(),this.createSetValue(e)(i-r)):(t.key===`ArrowRight`||t.key===`ArrowUp`)&&(t.preventDefault(),this.createSetValue(e)(i+r))}}createMouseDown(e){return t=>{this.focusHandle(e),this.createMousedownListener(this.createSetValue(e))(t)}}createSetValue(e){return t=>{let n=this._ranger.normalize(t),r=n;this.range&&(r=[...this.value],r[e]=n),this.value=r,this.dispatchCustomEvent(`change`,this.value)}}_computeValue({clientX:e,clientY:t}){let{top:n,left:r,height:i,width:a}=this._root.getBoundingClientRect();return this._ranger.present(this.vertical?(t-n)/i:(e-r)/a)}_handleMousedownRoot(e){let t=this._computeValue(e),n=this.range?this.rangeValue.reduce((e,n,r)=>{let i=Math.abs(t-n),a=Math.abs(t-this.rangeValue[e]);return i<a?r:e},0):0,r=this.createSetValue(n);r(t),this.createMousedownListener(r)(e),this.focusHandle(n)}createMousedownListener(e){return t=>{t.preventDefault(),t.stopPropagation();let n=this.createMousemoveListener(e);this.events.add(document,`mousemove`,n);let r=()=>{this.events.remove(document,`mousemove`,n),this.events.remove(document,`mouseup`,r)};this.events.add(document,`mouseup`,r)}}createMousemoveListener(e){return t=>{let n=this._computeValue(t);n===this._ranger.restrict(n)&&e?.call(this,n)}}_connectedInit(){this._ranger=new a(this.min,this.max,this.step);let e=this._ranger.diff;this.step||=e/100,s(this.value)&&(s(this.default)?this.value=Math.round(e/2/this.step)*this.step:this.value=this.default),this.default??=this.value}reset(){this.value=this.default}sort(){return this.value=this.toSorted()}toSorted(){return this.range?[...this.value].sort((e,t)=>e-t):this.value}};y([u({type:Number})],S.prototype,`min`,void 0),y([u({type:Number})],S.prototype,`max`,void 0),y([u({type:Number})],S.prototype,`step`,void 0),y([u({type:Boolean,reflect:!0})],S.prototype,`vertical`,void 0),y([u({type:Array})],S.prototype,`value`,void 0),y([u({type:Array})],S.prototype,`default`,void 0),y([d(`[part=root]`)],S.prototype,`_root`,void 0),y([f(`[part=handle]`)],S.prototype,`_handles`,void 0),y([p()],S.prototype,`lastFocus`,void 0),S=y([e(b),t(c`:host{${x}--track-width:.5em;${x}--handle-scale:1;${x}--track-background:var(${g.active});background:var(${g.passive});width:100%;display:block;height:var(${x}--track-width)}:host([contents]) [part=root]{width:inherit}:host([vertical]){height:100%;width:-moz-fit-content;width:fit-content}[part=root]{min-height:inherit;position:relative;border-radius:inherit;--from:0%;--to:50%}[part=track]{height:100%;min-height:inherit;display:flex;position:absolute;pointer-events:none;border-radius:inherit;justify-content:space-between;left:min(var(--from),var(--to));background:var(${x}--track-background);width:max(calc(var(--to) - var(--from)),calc(var(--from) - var(--to)))}[part~=handle]{width:1em;height:1em;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:absolute;border-radius:50%;transform-origin:0 25%;outline:0;border-style:solid;border-width:.1em;transform:scale(var(${x}--handle-scale)) translate(-50%,-25%);background:var(${g.background});border-color:currentColor}`,c`[vertical]{height:inherit;width:var(${x}--track-width)}[vertical] i{transform:translate(-25%,-50%)}[vertical] [part=track]{width:100%;height:max(calc(var(--to) - var(--from)),calc(var(--from) - var(--to)));top:min(var(--from),var(--to));left:0}`,c`[part~=handle]{left:var(--handle);top:0}[vertical] [part~=handle]{top:var(--handle);left:0} `)],S);var C=S;export{S as Range,C as default};
 //# sourceMappingURL=component.js.map

package/build/web-components/range/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"component.js","sources":["../../../src/web-components/range/component.ts"],"sourcesContent":["import { attr, tokenList, godown, loop, styles } from \"@godown/element\";\nimport { isNullable, omit, Ranger } from \"sharekit\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property, query, queryAll, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport { cssGlobalVars, scopePrefix } from \"../../internal/global-style.js\";\nimport { SuperInput } from \"../../internal/super-input.js\";\nimport { ringTypeAttribute } from \"../../internal/ring.js\";\n\nconst protoName = \"range\";\nconst cssScope = scopePrefix(protoName);\n\ntype RangeValue = number \| number[];\n\n/*\n {@linkcode Range} is similar to `<input type=\"range\">`.\n \n Value accepts number, or array.\n \n Number has 1 handle, the array has the number of its elements.\n \n @fires range - Fires when the value changes.\n * @category input\n /\n@godown(protoName)\n@styles(\n css`\n :host {\n ${cssScope}--track-width: .5em;\n ${cssScope}--handle-scale: 1;\n ${cssScope}--track-background: var(${cssGlobalVars.active});\n background: var(${cssGlobalVars.passive});\n width: 100%;\n display: block;\n height: var(${cssScope}--track-width);\n }\n\n :host([contents]) [part=\"root\"] {\n width: inherit;\n }\n\n :host([vertical]) {\n height: 100%;\n width: fit-content;\n }\n\n [part=\"root\"] {\n min-height: inherit;\n position: relative;\n border-radius: inherit;\n --from: 0%;\n --to: 50%;\n }\n\n [part=\"track\"] {\n height: 100%;\n min-height: inherit;\n display: flex;\n position: absolute;\n pointer-events: none;\n border-radius: inherit;\n justify-content: space-between;\n left: min(var(--from), var(--to));\n background: var(${cssScope}--track-background);\n width: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));\n }\n\n [part~=\"handle\"] {\n width: 1em;\n height: 1em;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n position: absolute;\n border-radius: 50%;\n transform-origin: 0% 25%;\n outline: 0;\n border-style: solid;\n border-width: 0.1em;\n transform: scale(var(${cssScope}--handle-scale)) translate(-50%, -25%);\n background: var(${cssGlobalVars.background});\n border-color: currentColor;\n }\n `,\n css`\n [vertical] {\n height: inherit;\n width: var(${cssScope}--track-width);\n }\n\n [vertical] i {\n transform: translate(-25%, -50%);\n }\n\n [vertical] [part=\"track\"] {\n width: 100%;\n height: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));\n top: min(var(--from), var(--to));\n left: 0;\n }\n `,\n css`\n [part~=\"handle\"] {\n left: var(--handle);\n top: 0;\n }\n\n [vertical] [part~=\"handle\"] {\n top: var(--handle);\n left: 0;\n }\n `,\n)\nclass Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {\n /\n Minimum value.\n /\n @property({ type: Number })\n min = 0;\n\n /\n Maximum value.\n /\n @property({ type: Number })\n max = 100;\n\n /\n Sliding step length.\n /\n @property({ type: Number })\n step: number;\n\n /\n Whether to display the range vertically.\n /\n @property({ type: Boolean, reflect: true })\n vertical = false;\n\n /\n Value, or each of values, will render a handle.\n \n Accepts number or array of numbers.\n /\n @property({ type: Array })\n value: V;\n\n /\n The default of `{@linkcode this.value}`.\n /\n @property({ type: Array })\n default: V;\n\n @query(\"[part=root]\")\n protected _root: HTMLElement;\n\n @queryAll(\"[part=handle]\")\n protected _handles: NodeListOf<HTMLElement>;\n\n @state()\n lastFocus?: number;\n\n protected _ranger: Ranger;\n private __focusStack: number[] = [];\n\n get range(): V extends number ? false : true {\n return Array.isArray(this.value) as any;\n }\n\n /\n Return values in the form of an array.\n /\n get rangeValue(): number[] {\n return (this.range ? this.value : [this.value]) as number[];\n }\n\n /\n Pad the value to the specified length.\n /\n padValue(len: number, value = 0): number[] {\n const { rangeValue } = this;\n const miss = len - rangeValue.length;\n if (miss > 0) {\n return new Array(miss).fill(value).concat(rangeValue);\n }\n return rangeValue;\n }\n\n attributeChangedCallback(name: string, _old: string \| null, value: string \| null): void {\n super.attributeChangedCallback(name, _old, value);\n if (name === \"max\" \|\| name === \"min\" \|\| name === \"step\") {\n this._ranger = new Ranger(this.min, this.max, this.step);\n }\n }\n\n get observedRecord(): Record<string, any> {\n return omit(super.observedRecord, ringTypeAttribute);\n }\n\n protected render(): TemplateResult<1> {\n const rangeValue = this.padValue(2);\n const from = Math.min(...rangeValue);\n const to = Math.max(...rangeValue);\n const gap = this._ranger.diff;\n\n return html`\n <div\n part=\"root\"\n ${attr(this.observedRecord)}\n @mousedown=\"${this.disabled ? null : this._handleMousedownRoot}\"\n style=\"${styleMap(\n Object.fromEntries([\n [\"--from\", `${((from - this.min) / gap) 100}%`],\n [\"--to\", `${((to - this.min) / gap) * 100}%`],\n ...rangeValue.map(\n (value, index) => [`--handle-${index}`, `${((value - this.min) / gap) * 100}%`] as [string, string],\n ),\n ]),\n )}\"\n >\n <div part=\"track\"></div>\n ${loop(this.rangeValue.length, (index) => this._renderHandle(index))}\n </div>\n `;\n }\n\n protected _renderHandle(index: number): TemplateResult<1> {\n const { disabled, range, rangeValue } = this;\n\n // in single-handle mod (value is a number or an array with length 1),\n const end = !range \|\| (range && index === rangeValue.length - 1 && rangeValue.length === 1);\n return html`\n <i\n tabindex=\"0\"\n part=\"${tokenList(\"handle\", `handle-${index}`)}\"\n @mousedown=\"${disabled ? null : this.createMouseDown(index)}\"\n style=\"${styleMap({\n \"z-index\": this.__focusStack.indexOf(index) + 1,\n \"--handle\": `var(--${end ? \"to\" : `handle-${index}`})`,\n })}\"\n ></i>\n `;\n }\n\n private __keydownEvent: EventListenerOrEventListenerObject;\n\n /*\n Focuses the handle at the given index, updates the focus stack.\n * @param index - The index of the handle to focus.\n /\n focusHandle(index: number): void {\n this.lastFocus = index;\n const indexOfFocusStack = this.__focusStack.indexOf(index);\n if (indexOfFocusStack !== -1) {\n this.__focusStack.splice(indexOfFocusStack, 1);\n }\n this.__focusStack.push(index);\n const handleItem = this._handles.item(index);\n handleItem?.focus();\n if (!this.__keydownEvent) {\n this.__keydownEvent = this.events.add(document, \"keydown\", this.createKeydownEvent(index));\n }\n }\n\n /\n Removes the focus from the currently focused handle.\n /\n blurHandle(): void {\n this.lastFocus = undefined;\n this.__keydownEvent = this.events.remove(document, \"keydown\", this.__keydownEvent);\n }\n\n /\n Creates a keydown event handler that updates the value of the range based on arrow key presses.\n * @param index - The index of the handle to update.\n * @returns A function that handles the keydown event and updates the range value.\n /\n protected createKeydownEvent(index: number) {\n return (e: KeyboardEvent): void => {\n const { rangeValue, step } = this;\n if (rangeValue.length < 2) {\n index = 0;\n }\n const old = rangeValue[index];\n if (e.key === \"ArrowLeft\" \|\| e.key === \"ArrowDown\") {\n e.preventDefault();\n this.createSetValue(index)(old - step);\n } else if (e.key === \"ArrowRight\" \|\| e.key === \"ArrowUp\") {\n e.preventDefault();\n this.createSetValue(index)(old + step);\n }\n };\n }\n\n /\n Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.\n * @param index - The index of the handle to focus.\n * @returns A function that handles the mouse down event and updates the range value.\n /\n protected createMouseDown(index: number) {\n return (e: MouseEvent): void => {\n this.focusHandle(index);\n this.createMousedownListener(this.createSetValue(index))(e);\n };\n }\n\n /\n Creates a function that sets the value of the range at the given index.\n * @param index - The index of the value to set.\n * @returns A function that sets the value of the range.\n /\n protected createSetValue(index: number) {\n return (value: number): void => {\n const normalizeValue = this._ranger.normalize(value);\n let newValue: RangeValue = normalizeValue;\n if (this.range) {\n newValue = [...(this.value as number[])];\n newValue[index] = normalizeValue;\n }\n this.value = newValue as V;\n this.dispatchCustomEvent(\"change\", this.value);\n };\n }\n\n /\n Compute value from event.\n * @returns The value closest to the event client position.\n /\n protected _computeValue({ clientX, clientY }: MouseEvent): number {\n const { top, left, height, width } = this._root.getBoundingClientRect();\n return this._ranger.present(this.vertical ? (clientY - top) / height : (clientX - left) / width);\n }\n\n /\n Handles the mouse down event on the root element of the range component.\n * Computes the closest value to the mouse position, sets the value, and focuses the corresponding handle.\n * @param e - The mouse down event object.\n /\n protected _handleMousedownRoot(e: MouseEvent): void {\n const value = this._computeValue(e);\n const index = this.range\n ? this.rangeValue.reduce((acc, item, index) => {\n const diff = Math.abs(value - item);\n const prevDiff = Math.abs(value - this.rangeValue[acc]);\n return diff < prevDiff ? index : acc;\n }, 0)\n : 0;\n\n const set = this.createSetValue(index);\n set(value);\n this.createMousedownListener(set)(e);\n this.focusHandle(index);\n }\n\n /\n Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.\n * @param index - The index of the handle to focus.\n * @returns A function that handles the mouse down event and updates the range value.\n /\n protected createMousedownListener(mouseMoveCallback: (arg0: number) => void) {\n return (e: MouseEvent): void => {\n e.preventDefault();\n e.stopPropagation();\n const move = this.createMousemoveListener(mouseMoveCallback);\n this.events.add(document, \"mousemove\", move);\n const stop = () => {\n this.events.remove(document, \"mousemove\", move);\n this.events.remove(document, \"mouseup\", stop);\n };\n this.events.add(document, \"mouseup\", stop);\n };\n }\n\n /\n Creates a mouse move event handler that updates the range value based on the mouse position.\n * @param callback - A function to call with the new value when the mouse is moved.\n * @returns A function that handles the mouse move event and updates the range value.\n /\n protected createMousemoveListener(callback: (newValue: number) => void) {\n return (e: MouseEvent): void => {\n const value = this._computeValue(e);\n if (value !== this._ranger.restrict(value)) {\n return;\n }\n callback?.call(this, value);\n };\n }\n\n protected _connectedInit(): void {\n this._ranger = new Ranger(this.min, this.max, this.step);\n const gap = this._ranger.diff;\n this.step \|\|= gap / 100;\n if (isNullable(this.value)) {\n if (!isNullable(this.default)) {\n this.value = this.default;\n } else {\n (this.value as number) = Math.round(gap / 2 / this.step) this.step;\n }\n }\n this.default ??= this.value;\n }\n\n reset(): void {\n this.value = this.default;\n }\n\n sort(): V {\n return (this.value = this.toSorted());\n }\n\n toSorted(): V {\n if (this.range) {\n return [...(this.value as number[])].sort((a, b) => a - b) as V;\n }\n return this.value;\n }\n}\n\nexport default Range;\nexport { Range };\n"],"names":["Range","len: number","value","miss","len","rangeValue","new Array(miss)","name: string","_old: string \| null","value: string \| null","name","_old","from","to","gap","index","index: number","end","range","disabled","indexOfFocusStack","handleItem","e: KeyboardEvent","old","e","step","e: MouseEvent","value: number","normalizeValue","newValue: RangeValue","newValue","clientY","top","height","clientX","left","width","acc","item","diff","prevDiff","set","mouseMoveCallback: (arg0: number) => void","move","mouseMoveCallback","stop","callback: (newValue: number) => void","callback","a","b"],"mappings":"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"}
1	+ {"version":3,"file":"component.js","sources":["../../../src/web-components/range/component.ts"],"sourcesContent":["import { attr, tokenList, godown, loop, styles } from \"@godown/element\";\nimport { isNullable, omit, Ranger } from \"sharekit\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property, query, queryAll, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport { cssGlobalVars, scopePrefix } from \"../../internal/global-style.js\";\nimport { SuperInput } from \"../../internal/super-input.js\";\nimport { ringTypeAttribute } from \"../../internal/ring.js\";\n\nconst protoName = \"range\";\nconst cssScope = scopePrefix(protoName);\n\ntype RangeValue = number \| number[];\n\n/*\n {@linkcode Range} is similar to `<input type=\"range\">`.\n \n Value accepts number, or array.\n \n Number has 1 handle, the array has the number of its elements.\n \n @fires range - Fires when the value changes.\n * @category input\n /\n@godown(protoName)\n@styles(\n css`\n :host {\n ${cssScope}--track-width: .5em;\n ${cssScope}--handle-scale: 1;\n ${cssScope}--track-background: var(${cssGlobalVars.active});\n background: var(${cssGlobalVars.passive});\n width: 100%;\n display: block;\n height: var(${cssScope}--track-width);\n }\n\n :host([contents]) [part=\"root\"] {\n width: inherit;\n }\n\n :host([vertical]) {\n height: 100%;\n width: fit-content;\n }\n\n [part=\"root\"] {\n min-height: inherit;\n position: relative;\n border-radius: inherit;\n --from: 0%;\n --to: 50%;\n }\n\n [part=\"track\"] {\n height: 100%;\n min-height: inherit;\n display: flex;\n position: absolute;\n pointer-events: none;\n border-radius: inherit;\n justify-content: space-between;\n left: min(var(--from), var(--to));\n background: var(${cssScope}--track-background);\n width: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));\n }\n\n [part~=\"handle\"] {\n width: 1em;\n height: 1em;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n position: absolute;\n border-radius: 50%;\n transform-origin: 0% 25%;\n outline: 0;\n border-style: solid;\n border-width: 0.1em;\n transform: scale(var(${cssScope}--handle-scale)) translate(-50%, -25%);\n background: var(${cssGlobalVars.background});\n border-color: currentColor;\n }\n `,\n css`\n [vertical] {\n height: inherit;\n width: var(${cssScope}--track-width);\n }\n\n [vertical] i {\n transform: translate(-25%, -50%);\n }\n\n [vertical] [part=\"track\"] {\n width: 100%;\n height: max(calc(var(--to) - var(--from)), calc(var(--from) - var(--to)));\n top: min(var(--from), var(--to));\n left: 0;\n }\n `,\n css`\n [part~=\"handle\"] {\n left: var(--handle);\n top: 0;\n }\n\n [vertical] [part~=\"handle\"] {\n top: var(--handle);\n left: 0;\n }\n `,\n)\nclass Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {\n /\n Minimum value.\n /\n @property({ type: Number })\n min = 0;\n\n /\n Maximum value.\n /\n @property({ type: Number })\n max = 100;\n\n /\n Sliding step length.\n /\n @property({ type: Number })\n step: number;\n\n /\n Whether to display the range vertically.\n /\n @property({ type: Boolean, reflect: true })\n vertical = false;\n\n /\n Value, or each of values, will render a handle.\n \n Accepts number or array of numbers.\n /\n @property({ type: Array })\n value: V;\n\n /\n The default of `{@linkcode this.value}`.\n /\n @property({ type: Array })\n default: V;\n\n @query(\"[part=root]\")\n protected _root: HTMLElement;\n\n @queryAll(\"[part=handle]\")\n protected _handles: NodeListOf<HTMLElement>;\n\n @state()\n lastFocus?: number;\n\n protected _ranger: Ranger;\n private __focusStack: number[] = [];\n\n get range(): V extends number ? false : true {\n return Array.isArray(this.value) as any;\n }\n\n /\n Return values in the form of an array.\n /\n get rangeValue(): number[] {\n return (this.range ? this.value : [this.value]) as number[];\n }\n\n /\n Pad the value to the specified length.\n /\n padValue(len: number, value = 0): number[] {\n const { rangeValue } = this;\n const miss = len - rangeValue.length;\n if (miss > 0) {\n return new Array(miss).fill(value).concat(rangeValue);\n }\n return rangeValue;\n }\n\n attributeChangedCallback(name: string, _old: string \| null, value: string \| null): void {\n super.attributeChangedCallback(name, _old, value);\n if (name === \"max\" \|\| name === \"min\" \|\| name === \"step\") {\n this._ranger = new Ranger(this.min, this.max, this.step);\n }\n }\n\n get observedRecord(): Record<string, any> {\n return omit(super.observedRecord, ringTypeAttribute);\n }\n\n protected render(): TemplateResult<1> {\n const rangeValue = this.padValue(2);\n const from = Math.min(...rangeValue);\n const to = Math.max(...rangeValue);\n const gap = this._ranger.diff;\n\n return html`\n <div\n part=\"root\"\n ${attr(this.observedRecord)}\n @mousedown=\"${this.disabled ? null : this._handleMousedownRoot}\"\n style=\"${styleMap(\n Object.fromEntries([\n [\"--from\", `${((from - this.min) / gap) 100}%`],\n [\"--to\", `${((to - this.min) / gap) * 100}%`],\n ...rangeValue.map(\n (value, index) => [`--handle-${index}`, `${((value - this.min) / gap) * 100}%`] as [string, string],\n ),\n ]),\n )}\"\n >\n <div part=\"track\"></div>\n ${loop(this.rangeValue.length, (index) => this._renderHandle(index))}\n </div>\n `;\n }\n\n protected _renderHandle(index: number): TemplateResult<1> {\n const { disabled, range, rangeValue } = this;\n\n // in single-handle mod (value is a number or an array with length 1),\n const end = !range \|\| (range && index === rangeValue.length - 1 && rangeValue.length === 1);\n return html`\n <i\n tabindex=\"0\"\n part=\"${tokenList(\"handle\", `handle-${index}`)}\"\n @mousedown=\"${disabled ? null : this.createMouseDown(index)}\"\n style=\"${styleMap({\n \"z-index\": this.__focusStack.indexOf(index) + 1,\n \"--handle\": `var(--${end ? \"to\" : `handle-${index}`})`,\n })}\"\n ></i>\n `;\n }\n\n private __keydownEvent: EventListenerOrEventListenerObject;\n\n /*\n Focuses the handle at the given index, updates the focus stack.\n * @param index - The index of the handle to focus.\n /\n focusHandle(index: number): void {\n this.lastFocus = index;\n const indexOfFocusStack = this.__focusStack.indexOf(index);\n if (indexOfFocusStack !== -1) {\n this.__focusStack.splice(indexOfFocusStack, 1);\n }\n this.__focusStack.push(index);\n const handleItem = this._handles.item(index);\n handleItem?.focus();\n if (!this.__keydownEvent) {\n this.__keydownEvent = this.events.add(document, \"keydown\", this.createKeydownEvent(index));\n }\n }\n\n /\n Removes the focus from the currently focused handle.\n /\n blurHandle(): void {\n this.lastFocus = undefined;\n this.__keydownEvent = this.events.remove(document, \"keydown\", this.__keydownEvent);\n }\n\n /\n Creates a keydown event handler that updates the value of the range based on arrow key presses.\n * @param index - The index of the handle to update.\n * @returns A function that handles the keydown event and updates the range value.\n /\n protected createKeydownEvent(index: number) {\n return (e: KeyboardEvent): void => {\n const { rangeValue, step } = this;\n if (rangeValue.length < 2) {\n index = 0;\n }\n const old = rangeValue[index];\n if (e.key === \"ArrowLeft\" \|\| e.key === \"ArrowDown\") {\n e.preventDefault();\n this.createSetValue(index)(old - step);\n } else if (e.key === \"ArrowRight\" \|\| e.key === \"ArrowUp\") {\n e.preventDefault();\n this.createSetValue(index)(old + step);\n }\n };\n }\n\n /\n Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.\n * @param index - The index of the handle to focus.\n * @returns A function that handles the mouse down event and updates the range value.\n /\n protected createMouseDown(index: number) {\n return (e: MouseEvent): void => {\n this.focusHandle(index);\n this.createMousedownListener(this.createSetValue(index))(e);\n };\n }\n\n /\n Creates a function that sets the value of the range at the given index.\n * @param index - The index of the value to set.\n * @returns A function that sets the value of the range.\n /\n protected createSetValue(index: number) {\n return (value: number): void => {\n const normalizeValue = this._ranger.normalize(value);\n let newValue: RangeValue = normalizeValue;\n if (this.range) {\n newValue = [...(this.value as number[])];\n newValue[index] = normalizeValue;\n }\n this.value = newValue as V;\n this.dispatchCustomEvent(\"change\", this.value);\n };\n }\n\n /\n Compute value from event.\n * @returns The value closest to the event client position.\n /\n protected _computeValue({ clientX, clientY }: MouseEvent): number {\n const { top, left, height, width } = this._root.getBoundingClientRect();\n return this._ranger.present(this.vertical ? (clientY - top) / height : (clientX - left) / width);\n }\n\n /\n Handles the mouse down event on the root element of the range component.\n * Computes the closest value to the mouse position, sets the value, and focuses the corresponding handle.\n * @param e - The mouse down event object.\n /\n protected _handleMousedownRoot(e: MouseEvent): void {\n const value = this._computeValue(e);\n const index = this.range\n ? this.rangeValue.reduce((acc, item, index) => {\n const diff = Math.abs(value - item);\n const prevDiff = Math.abs(value - this.rangeValue[acc]);\n return diff < prevDiff ? index : acc;\n }, 0)\n : 0;\n\n const set = this.createSetValue(index);\n set(value);\n this.createMousedownListener(set)(e);\n this.focusHandle(index);\n }\n\n /\n Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.\n * @param index - The index of the handle to focus.\n * @returns A function that handles the mouse down event and updates the range value.\n /\n protected createMousedownListener(mouseMoveCallback: (arg0: number) => void) {\n return (e: MouseEvent): void => {\n e.preventDefault();\n e.stopPropagation();\n const move = this.createMousemoveListener(mouseMoveCallback);\n this.events.add(document, \"mousemove\", move);\n const stop = () => {\n this.events.remove(document, \"mousemove\", move);\n this.events.remove(document, \"mouseup\", stop);\n };\n this.events.add(document, \"mouseup\", stop);\n };\n }\n\n /\n Creates a mouse move event handler that updates the range value based on the mouse position.\n * @param callback - A function to call with the new value when the mouse is moved.\n * @returns A function that handles the mouse move event and updates the range value.\n /\n protected createMousemoveListener(callback: (newValue: number) => void) {\n return (e: MouseEvent): void => {\n const value = this._computeValue(e);\n if (value !== this._ranger.restrict(value)) {\n return;\n }\n callback?.call(this, value);\n };\n }\n\n protected _connectedInit(): void {\n this._ranger = new Ranger(this.min, this.max, this.step);\n const gap = this._ranger.diff;\n this.step \|\|= gap / 100;\n if (isNullable(this.value)) {\n if (!isNullable(this.default)) {\n this.value = this.default;\n } else {\n (this.value as number) = Math.round(gap / 2 / this.step) this.step;\n }\n }\n this.default ??= this.value;\n }\n\n reset(): void {\n this.value = this.default;\n }\n\n sort(): V {\n return (this.value = this.toSorted());\n }\n\n toSorted(): V {\n if (this.range) {\n return [...(this.value as number[])].sort((a, b) => a - b) as V;\n }\n return this.value;\n }\n}\n\nexport default Range;\nexport { Range };\n"],"names":["protoName","cssScope","scopePrefix","Range","SuperInput","miss","len","rangeValue","value","name","_old","Ranger","omit","ringTypeAttribute","from","to","gap","attr","styleMap","index","loop","end","range","tokenList","disabled","indexOfFocusStack","handleItem","old","e","step","normalizeValue","newValue: RangeValue","newValue","clientY","top","height","clientX","left","width","diff","item","prevDiff","acc","set","move","mouseMoveCallback","stop","callback","isNullable","a","b","_decorate","property","query","queryAll","state","godown","styles","cssGlobalVars","Range$1"],"mappings":"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"}

package/build/web-components/range/definition.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"AAAA,OAAO,WAAW~~,gBAAiB~~;~~AAInC~~,eAAe;eAEA;WACH,sBAAsB;EAC9B,gBAAgB~~;CACjB;AACF~~","names":[],"sources":["../../../../src/web-components/range/definition.ts"],"sourcesContent":["import Range from \"./component.js\";\n\nRange.define();\n\nexport default Range;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-range\": Range;\n }\n}\n"],"version":3,"file":"definition.d.ts"}
1	+ {"mappings":"AAAA,OAAO,WAAW;AAIlB,eAAe;eAEA;WACH,sBAAsB;EAC9B,gBAAgB","names":[],"sources":["../../../../src/web-components/range/definition.ts"],"sourcesContent":["import Range from \"./component.js\";\n\nRange.define();\n\nexport default Range;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-range\": Range;\n }\n}\n"],"version":3,"file":"definition.d.ts"}

package/build/web-components/range/definition.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import Range from"./component.js";import"@godown/element";import"sharekit";import"lit";import"lit/decorators.js";import"lit/directives/style-map.js";import"../../internal/global-style.js";import"../../internal/reset-style.js";import"../../internal/super-input.js";import"../../internal/ring.js";import"@oxc-project/runtime/helpers/decorate";Range.define();export{Range as default};
+import e from"./component.js";e.define();export{e as default};
 //# sourceMappingURL=definition.js.map

package/build/web-components/range/definition.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"definition.js","sources":["../../../src/web-components/range/definition.ts"],"sourcesContent":["import Range from \"./component.js\";\n\nRange.define();\n\nexport default Range;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-range\": Range;\n }\n}\n"],"names":[],"mappings":"~~qVAEA~~,~~MAAM,QAAQ~~"}
1	+ {"version":3,"file":"definition.js","sources":["../../../src/web-components/range/definition.ts"],"sourcesContent":["import Range from \"./component.js\";\n\nRange.define();\n\nexport default Range;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-range\": Range;\n }\n}\n"],"names":["Range"],"mappings":"8BAEAA,EAAM"}

package/build/web-components/rotate/component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"AACA,cAAc,sBAAiC~~,KAAM~~;~~AAErD~~,SAAS,mBAAgC~~,gCAAiC~~;;;;;;~~AAW1E~~,cA6BM,eAAe,YAAY;CAC/B,UACU,OAAO;CAEjB,UAAU,UAAU,eAAe;CAcnC;CAKA,UAAU,~~cAAcA~~,GAAG;;;;;;;;;;;CAgB3B,UAAU,~~eAAeA~~,GAAG,aAAa;EACvC;EACA~~;CACD;AAUF;AAED~~,eAAe;AACf,SAAS","names":[~~"e: MouseEvent"~~],"sources":["../../../../src/web-components/rotate/component.ts"],"sourcesContent":["import { godown, htmlSlot, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\n\nimport { GlobalStyle, scopePrefix } from \"../../internal/global-style.js\";\nimport { query } from \"lit/decorators.js\";\n\nconst protoName = \"rotate\";\nconst cssScope = scopePrefix(protoName);\n\n/*\n {@linkcode Rotate} Make child elements rotate.\n \n @category wrapper\n /\n@godown(protoName)\n@styles(css`\n :host {\n display: block;\n width: fit-content;\n transition: all 0.5s ease-in-out;\n ${cssScope}--offset: .5em;\n }\n\n div {\n position: relative;\n transition: inherit;\n transition-property: transform;\n }\n\n i {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n box-sizing: content-box;\n padding: var(${cssScope}--offset);\n margin: calc(-1 var(${cssScope}--offset));\n }\n\n [part=\"slot\"] {\n z-index: 2;\n }\n`)\nclass Rotate extends GlobalStyle {\n @query(\"[part=root]\")\n protected _root: HTMLElement;\n\n protected render(): TemplateResult<1> {\n return html`\n <div part=\"root\">\n <div\n part=\"slot\"\n @mousemove=\"${this._handleRotate}\"\n >\n ${htmlSlot()}\n </div>\n <i @mouseleave=\"${this.reset}\"></i>\n </div>\n `;\n }\n\n reset(): void {\n this._root.style.removeProperty(\"transform\");\n this._root.style.removeProperty(\"transition\");\n }\n\n protected _handleRotate(e: MouseEvent): void {\n const { rotateX, rotateY } = this._computeOffset(e);\n this._root.style.setProperty(\"transform\", `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`);\n this._root.style.setProperty(\"transition\", \"0s\");\n }\n\n /*\n Compute offset.\n \n @returns rotateX, rotateY\n * @example\n * ```ts\n * const { rotateX, rotateY } = this._computeOffset(e);\n * `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`;\n * ```\n */\n protected _computeOffset(e: MouseEvent): {\n rotateX: number;\n rotateY: number;\n } {\n const { left, top, width, height } = this._root.getBoundingClientRect();\n const { clientX, clientY } = e;\n const offsetX = clientX - left;\n const offsetY = clientY - top;\n\n const rotateX = -(offsetY - height / 2) / height / 2;\n const rotateY = (offsetX - width / 2) / width / 2;\n return { rotateX, rotateY };\n }\n}\n\nexport default Rotate;\nexport { Rotate };\n"],"version":3,"file":"component.d.ts"}
1	+ {"mappings":"AACA,cAAc,sBAAiC;AAE/C,SAAS,mBAAgC;;;;;;AAWzC,cA6BM,eAAe,YAAY;CAC/B,UACU,OAAO;CAEjB,UAAU,UAAU,eAAe;CAcnC;CAKA,UAAU,cAAc,GAAG;;;;;;;;;;;CAgB3B,UAAU,eAAe,GAAG,aAAa;EACvC;EACA;;;AAaJ,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/rotate/component.ts"],"sourcesContent":["import { godown, htmlSlot, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\n\nimport { GlobalStyle, scopePrefix } from \"../../internal/global-style.js\";\nimport { query } from \"lit/decorators.js\";\n\nconst protoName = \"rotate\";\nconst cssScope = scopePrefix(protoName);\n\n/*\n {@linkcode Rotate} Make child elements rotate.\n \n @category wrapper\n /\n@godown(protoName)\n@styles(css`\n :host {\n display: block;\n width: fit-content;\n transition: all 0.5s ease-in-out;\n ${cssScope}--offset: .5em;\n }\n\n div {\n position: relative;\n transition: inherit;\n transition-property: transform;\n }\n\n i {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n box-sizing: content-box;\n padding: var(${cssScope}--offset);\n margin: calc(-1 var(${cssScope}--offset));\n }\n\n [part=\"slot\"] {\n z-index: 2;\n }\n`)\nclass Rotate extends GlobalStyle {\n @query(\"[part=root]\")\n protected _root: HTMLElement;\n\n protected render(): TemplateResult<1> {\n return html`\n <div part=\"root\">\n <div\n part=\"slot\"\n @mousemove=\"${this._handleRotate}\"\n >\n ${htmlSlot()}\n </div>\n <i @mouseleave=\"${this.reset}\"></i>\n </div>\n `;\n }\n\n reset(): void {\n this._root.style.removeProperty(\"transform\");\n this._root.style.removeProperty(\"transition\");\n }\n\n protected _handleRotate(e: MouseEvent): void {\n const { rotateX, rotateY } = this._computeOffset(e);\n this._root.style.setProperty(\"transform\", `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`);\n this._root.style.setProperty(\"transition\", \"0s\");\n }\n\n /*\n Compute offset.\n \n @returns rotateX, rotateY\n * @example\n * ```ts\n * const { rotateX, rotateY } = this._computeOffset(e);\n * `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`;\n * ```\n */\n protected _computeOffset(e: MouseEvent): {\n rotateX: number;\n rotateY: number;\n } {\n const { left, top, width, height } = this._root.getBoundingClientRect();\n const { clientX, clientY } = e;\n const offsetX = clientX - left;\n const offsetY = clientY - top;\n\n const rotateX = -(offsetY - height / 2) / height / 2;\n const rotateY = (offsetX - width / 2) / width / 2;\n return { rotateX, rotateY };\n }\n}\n\nexport default Rotate;\nexport { Rotate };\n"],"version":3,"file":"component.d.ts"}

package/build/web-components/rotate/component.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{godown,styles,htmlSlot}from"@godown/element";import{css,html}from"lit";import{scopePrefix,GlobalStyle}from"../../internal/global-style.js";import{query}from"lit/decorators.js";import _decorate from"@oxc-project/runtime/helpers/decorate";import"../../internal/reset-style.js";import"sharekit";const protoName=`rotate`,cssScope=scopePrefix(protoName);let Rotate=class e extends GlobalStyle{render(){return html`<div part="root"> <div part="slot" @mousemove="${this._handleRotate}"> ${htmlSlot()} </div> <i @mouseleave="${this.reset}"></i> </div>`}reset(){this._root.style.removeProperty(`transform`),this._root.style.removeProperty(`transition`)}_handleRotate(e){let{rotateX:r,rotateY:i}=this._computeOffset(e);this._root.style.setProperty(`transform`,`rotateX(${r}rad) rotateY(${i}rad)`),this._root.style.setProperty(`transition`,`0s`)}_computeOffset(e){let{left:r,top:i,width:a,height:o}=this._root.getBoundingClientRect(),{clientX:s,clientY:c}=e,l=s-r,u=c-i,d=-(u-o/2)/o/2,f=(l-a/2)/a/2;return{rotateX:d,rotateY:f}}};_decorate([query(`[part=root]`)],Rotate.prototype,`_root`,void 0),Rotate=_decorate([godown(protoName),styles(css`:host{display:block;width:-moz-fit-content;width:fit-content;transition:all .5s ease-in-out;${cssScope}--offset:.5em}div{position:relative;transition:inherit;transition-property:transform}i{width:100%;height:100%;position:absolute;top:0;box-sizing:content-box;padding:var(${cssScope}--offset);margin:calc(-1*var(${cssScope}--offset))}[part=slot]{z-index:2}`)],Rotate);var Rotate$1=Rotate;export{Rotate,Rotate$1 as default};
+import{godown as e,styles as t,htmlSlot as n}from"@godown/element";import{css as r,html as i}from"lit";import{scopePrefix as a,GlobalStyle as o}from"../../internal/global-style.js";import{query as s}from"lit/decorators.js";import c from"@oxc-project/runtime/helpers/decorate";const l=`rotate`,u=a(l);let d=class e extends o{render(){return i`<div part="root"> <div part="slot" @mousemove="${this._handleRotate}"> ${n()} </div> <i @mouseleave="${this.reset}"></i> </div>`}reset(){this._root.style.removeProperty(`transform`),this._root.style.removeProperty(`transition`)}_handleRotate(e){let{rotateX:t,rotateY:n}=this._computeOffset(e);this._root.style.setProperty(`transform`,`rotateX(${t}rad) rotateY(${n}rad)`),this._root.style.setProperty(`transition`,`0s`)}_computeOffset(e){let{left:t,top:n,width:r,height:i}=this._root.getBoundingClientRect(),{clientX:a,clientY:o}=e,s=a-t,c=o-n,l=-(c-i/2)/i/2,u=(s-r/2)/r/2;return{rotateX:l,rotateY:u}}};c([s(`[part=root]`)],d.prototype,`_root`,void 0),d=c([e(l),t(r`:host{display:block;width:-moz-fit-content;width:fit-content;transition:all .5s ease-in-out;${u}--offset:.5em}div{position:relative;transition:inherit;transition-property:transform}i{width:100%;height:100%;position:absolute;top:0;box-sizing:content-box;padding:var(${u}--offset);margin:calc(-1*var(${u}--offset))}[part=slot]{z-index:2}`)],d);var f=d;export{d as Rotate,f as default};
 //# sourceMappingURL=component.js.map

package/build/web-components/rotate/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"component.js","sources":["../../../src/web-components/rotate/component.ts"],"sourcesContent":["import { godown, htmlSlot, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\n\nimport { GlobalStyle, scopePrefix } from \"../../internal/global-style.js\";\nimport { query } from \"lit/decorators.js\";\n\nconst protoName = \"rotate\";\nconst cssScope = scopePrefix(protoName);\n\n/*\n {@linkcode Rotate} Make child elements rotate.\n \n @category wrapper\n /\n@godown(protoName)\n@styles(css`\n :host {\n display: block;\n width: fit-content;\n transition: all 0.5s ease-in-out;\n ${cssScope}--offset: .5em;\n }\n\n div {\n position: relative;\n transition: inherit;\n transition-property: transform;\n }\n\n i {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n box-sizing: content-box;\n padding: var(${cssScope}--offset);\n margin: calc(-1 var(${cssScope}--offset));\n }\n\n [part=\"slot\"] {\n z-index: 2;\n }\n`)\nclass Rotate extends GlobalStyle {\n @query(\"[part=root]\")\n protected _root: HTMLElement;\n\n protected render(): TemplateResult<1> {\n return html`\n <div part=\"root\">\n <div\n part=\"slot\"\n @mousemove=\"${this._handleRotate}\"\n >\n ${htmlSlot()}\n </div>\n <i @mouseleave=\"${this.reset}\"></i>\n </div>\n `;\n }\n\n reset(): void {\n this._root.style.removeProperty(\"transform\");\n this._root.style.removeProperty(\"transition\");\n }\n\n protected _handleRotate(e: MouseEvent): void {\n const { rotateX, rotateY } = this._computeOffset(e);\n this._root.style.setProperty(\"transform\", `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`);\n this._root.style.setProperty(\"transition\", \"0s\");\n }\n\n /*\n Compute offset.\n \n @returns rotateX, rotateY\n * @example\n * ```ts\n * const { rotateX, rotateY } = this._computeOffset(e);\n * `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`;\n * ```\n */\n protected _computeOffset(e: MouseEvent): {\n rotateX: number;\n rotateY: number;\n } {\n const { left, top, width, height } = this._root.getBoundingClientRect();\n const { clientX, clientY } = e;\n const offsetX = clientX - left;\n const offsetY = clientY - top;\n\n const rotateX = -(offsetY - height / 2) / height / 2;\n const rotateY = (offsetX - width / 2) / width / 2;\n return { rotateX, rotateY };\n }\n}\n\nexport default Rotate;\nexport { Rotate };\n"],"names":["Rotate","~~e: MouseEvent~~","rotateX","rotateY","offsetX","clientX","left","offsetY","clientY","top","height","width"],"mappings":"~~2SAMA~~,~~MAAM~~,~~UAAY~~,~~SACZ~~,~~SAAW~~,~~YAAY~~,~~UAAU~~,~~CAOvC~~,~~IAAA~~,~~OAAA,~~MA6BMA,~~UAAe~~,~~WAAY~~,CAIrB,QAA4B,CACpC,MAAO,~~KAAI~~,~~CAAA,+CAIO~~,~~EAAE,~~KAAK,cAAc,~~GAEjC~~,~~EAAE~~,~~UAAU~~,~~CAAA,wBAEE,EAAE,~~KAAK,MAAM,~~aAEjC~~,~~CAAC,AACF,CAED,~~OAAc,CACZ,KAAK,MAAM,MAAM,eAAe,~~YAAY~~,~~CAC5C,~~KAAK,MAAM,MAAM,eAAe,~~aAAa~~,~~AAC9C~~,~~CAES,cAAcC,~~EAAqB,CAC3C,GAAM,CAAE,UAAS,~~UAAS~~,~~CAAG,~~KAAK,eAAe,~~EAAE~~,~~CACnD,~~KAAK,MAAM,MAAM,YAAY,YAAa,~~CAAC~~,~~QAAQ,EAAEC,~~EAAQ,~~aAAa~~,~~EAAEC,~~EAAQ,~~IAAI~~,~~CAAC,CAAC,CAC1F,~~KAAK,MAAM,MAAM,YAAY,aAAc,~~KAAK~~,~~AACjD~~,~~CAYS,eAAeF,~~EAGvB,CACA,GAAM,CAAE,OAAM,MAAK,QAAO,~~SAAQ~~,~~CAAG,~~KAAK,MAAM,~~uBAAuB~~,~~CACjE,~~CAAE,UAAS,~~UAAS~~,~~CAAG~~,~~EACvBG,~~EAAUC,EAAUC,EACpBC,EAAUC,EAAUC,EAEpBP,EAAU,EAAEK,EAAUG,EAAS,GAAKA,EAAS,EAC7CP,GAAWC,EAAUO,EAAQ,GAAKA,EAAQ,EAChD,MAAO,CAAE,UAAS,~~SAAS~~,~~CAC5B~~,~~CACF~~,~~EAnDE,UAAA,CAAA,MAAM,cAAc,AAAA,~~EAAA,~~OAAA,~~UAAA,QAAA,~~OAAA~~,~~CA9BtB~~,~~OAAA~~,~~UAAA~~,~~CAAA~~,~~OAAO~~,~~UAAU~~,~~CACjB~~,~~OAAO~~,~~GAAG~~,~~CAAC~~,~~4FAKR,EAAE,SAAS,yKAeE,EAAE,SAAS,6BACF,EAAE,SAAS,iCAMrC,CAAC,CAAC,AAAA,EAAA,OAAA,CAuDF,IAAA,SAAe~~"}
1	+ {"version":3,"file":"component.js","sources":["../../../src/web-components/rotate/component.ts"],"sourcesContent":["import { godown, htmlSlot, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\n\nimport { GlobalStyle, scopePrefix } from \"../../internal/global-style.js\";\nimport { query } from \"lit/decorators.js\";\n\nconst protoName = \"rotate\";\nconst cssScope = scopePrefix(protoName);\n\n/*\n {@linkcode Rotate} Make child elements rotate.\n \n @category wrapper\n /\n@godown(protoName)\n@styles(css`\n :host {\n display: block;\n width: fit-content;\n transition: all 0.5s ease-in-out;\n ${cssScope}--offset: .5em;\n }\n\n div {\n position: relative;\n transition: inherit;\n transition-property: transform;\n }\n\n i {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n box-sizing: content-box;\n padding: var(${cssScope}--offset);\n margin: calc(-1 var(${cssScope}--offset));\n }\n\n [part=\"slot\"] {\n z-index: 2;\n }\n`)\nclass Rotate extends GlobalStyle {\n @query(\"[part=root]\")\n protected _root: HTMLElement;\n\n protected render(): TemplateResult<1> {\n return html`\n <div part=\"root\">\n <div\n part=\"slot\"\n @mousemove=\"${this._handleRotate}\"\n >\n ${htmlSlot()}\n </div>\n <i @mouseleave=\"${this.reset}\"></i>\n </div>\n `;\n }\n\n reset(): void {\n this._root.style.removeProperty(\"transform\");\n this._root.style.removeProperty(\"transition\");\n }\n\n protected _handleRotate(e: MouseEvent): void {\n const { rotateX, rotateY } = this._computeOffset(e);\n this._root.style.setProperty(\"transform\", `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`);\n this._root.style.setProperty(\"transition\", \"0s\");\n }\n\n /*\n Compute offset.\n \n @returns rotateX, rotateY\n * @example\n * ```ts\n * const { rotateX, rotateY } = this._computeOffset(e);\n * `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`;\n * ```\n */\n protected _computeOffset(e: MouseEvent): {\n rotateX: number;\n rotateY: number;\n } {\n const { left, top, width, height } = this._root.getBoundingClientRect();\n const { clientX, clientY } = e;\n const offsetX = clientX - left;\n const offsetY = clientY - top;\n\n const rotateX = -(offsetY - height / 2) / height / 2;\n const rotateY = (offsetX - width / 2) / width / 2;\n return { rotateX, rotateY };\n }\n}\n\nexport default Rotate;\nexport { Rotate };\n"],"names":["protoName","cssScope","scopePrefix","Rotate","GlobalStyle","htmlSlot","rotateX","rotateY","offsetX","clientX","left","offsetY","clientY","top","height","width","query","godown","styles","Rotate$1"],"mappings":"oRAMA,MAAMA,EAAY,SACZC,EAAWC,EAAYF,GAO7B,IAAAG,EAAA,MA6BMA,UAAeC,CAAY,CAIrB,QAA4B,CACpC,MAAO,EAAI,kDAIS,KAAK,cAAc,KAE/BC,IAAA,0BAEc,KAAK,MAAM,eAKnC,OAAc,CACZ,KAAK,MAAM,MAAM,eAAe,aAChC,KAAK,MAAM,MAAM,eAAe,cAGxB,cAAc,EAAqB,CAC3C,GAAM,CAAE,UAAS,WAAY,KAAK,eAAe,GACjD,KAAK,MAAM,MAAM,YAAY,YAAa,WAAWC,EAAQ,eAAeC,EAAQ,OACpF,KAAK,MAAM,MAAM,YAAY,aAAc,MAanC,eAAe,EAGvB,CACA,GAAM,CAAE,OAAM,MAAK,QAAO,UAAW,KAAK,MAAM,wBAC1C,CAAE,UAAS,WAAY,EACvBC,EAAUC,EAAUC,EACpBC,EAAUC,EAAUC,EAEpBP,EAAU,EAAEK,EAAUG,EAAS,GAAKA,EAAS,EAC7CP,GAAWC,EAAUO,EAAQ,GAAKA,EAAQ,EAChD,MAAO,CAAE,UAAS,gBAjDnBC,EAAM,gBAAAb,EAAA,UAAA,QAAA,aA9BRc,EAAOjB,GACPkB,EAAO,CAAG,+FAKLjB,EAAS,2KAeIA,EAAS,+BACAA,EAAS,wCA6DrC,IAAAkB,EAAehB"}

package/build/web-components/rotate/definition.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"AAAA,OAAO,YAAY~~,gBAAiB~~;~~AAIpC~~,eAAe;eAEA;WACH,sBAAsB;EAC9B,iBAAiB~~;CAClB;AACF~~","names":[],"sources":["../../../../src/web-components/rotate/definition.ts"],"sourcesContent":["import Rotate from \"./component.js\";\n\nRotate.define();\n\nexport default Rotate;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-rotate\": Rotate;\n }\n}\n"],"version":3,"file":"definition.d.ts"}
1	+ {"mappings":"AAAA,OAAO,YAAY;AAInB,eAAe;eAEA;WACH,sBAAsB;EAC9B,iBAAiB","names":[],"sources":["../../../../src/web-components/rotate/definition.ts"],"sourcesContent":["import Rotate from \"./component.js\";\n\nRotate.define();\n\nexport default Rotate;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-rotate\": Rotate;\n }\n}\n"],"version":3,"file":"definition.d.ts"}

package/build/web-components/rotate/definition.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import Rotate from"./component.js";import"@godown/element";import"lit";import"../../internal/global-style.js";import"../../internal/reset-style.js";import"sharekit";import"lit/decorators.js";import"@oxc-project/runtime/helpers/decorate";Rotate.define();export{Rotate as default};
+import e from"./component.js";e.define();export{e as default};
 //# sourceMappingURL=definition.js.map

package/build/web-components/rotate/definition.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"definition.js","sources":["../../../src/web-components/rotate/definition.ts"],"sourcesContent":["import Rotate from \"./component.js\";\n\nRotate.define();\n\nexport default Rotate;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-rotate\": Rotate;\n }\n}\n"],"names":[],"mappings":"~~6OAEA~~,~~OAAO,QAAQ~~"}
1	+ {"version":3,"file":"definition.js","sources":["../../../src/web-components/rotate/definition.ts"],"sourcesContent":["import Rotate from \"./component.js\";\n\nRotate.define();\n\nexport default Rotate;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-rotate\": Rotate;\n }\n}\n"],"names":["Rotate"],"mappings":"8BAEAA,EAAO"}

package/build/web-components/router/component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"AACA,cAAc,uBAAuB,sBAA2B~~,KAAM~~;~~AAEtE~~,SAAS,UAAU,WAAiB~~,UAAW~~;~~AAE/C~~,SAAS,mBAAmB~~,gCAAiC~~;~~UAEnD~~,WAAW;CACnB;CACA,QAAQ;CACR~~;AACD;UAES~~,oBAAoB,WAAW;CACvC~~;AACD;UAES~~,UAAU;OACZ;CACN;CACA,~~UAAUA~~,QAAQ;CAClB~~;AACD;AAED~~,cAAM;UACJ,OAAO;UACP,SAAS;UACT,QAAQ;;KAGL,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;AA0B/B,cAMM,eAAe,YAAY;CAC/B,OAAO,iBAAiB,IAAI;CAE5B,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;;;;CAKR,AACA,qBAAqB;;;;CAKrB,SAAS;;;;CAKT,AACA;;;;CAKA,AACA;;;;CAKA,AACA,SAAS;;;;;;;;CAST,AACA,MAAM;;;;;;CAON,AACA;CAEA,IACI,OAAO,OAKG;CAAd,IAAI,UAAU;CAId;CAIA,UAAU;CAsBV;CAcA;CAKA,aAAa;CASb,UAAU,~~QAAQC~~,mBAAmB;;;;CAcrC,~~eAAeC~~;;;;CA2Bf,~~iBAAiBA~~,iBAAiB,eAAe;;;;CAwBjD;;;;CAWA,~~mBAAmBC~~,cAAc,KAAK;CAQtC,OAAO;CAMP,~~OAAOC~~,mBAAmB;CAI1B~~;AAGD;AAED~~,eAAe;AACf,SAAS","names":[~~"state?: RouteState","changedProperties: PropertyValueMap<this>","query?: string","value: typeof this.routes","pathname: string"~~],"sources":["../../../../src/web-components/router/component.ts"],"sourcesContent":["import { godown, htmlSlot, styles } from \"@godown/element\";\nimport { type PropertyValueMap, type TemplateResult, css } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { Router as Mux, omit } from \"sharekit\";\n\nimport { GlobalStyle } from \"../../internal/global-style.js\";\n\ninterface RouteState {\n pathname: string;\n params: Record<string, string>;\n path: string;\n}\n\ninterface RouteResult extends RouteState {\n component: unknown;\n}\n\ninterface RouteItem {\n [key: PropertyKey]: unknown;\n path: string;\n render?: (state?: RouteState) => unknown;\n component?: unknown;\n}\n\nconst routerTypes = {\n field: \"field\",\n slotted: \"slotted\",\n united: \"united\",\n} as const;\n\ntype RouterType = keyof typeof routerTypes;\n\nconst protoName = \"router\";\n\n/*\n {@linkcode Router} has basic routing control.\n \n To switch routes, use `router-link component`.\n \n It has two methods to collect routes.\n \n 1. From field `routes`, an array, each elements require \"path\".\n * 2. From child elements, which have the slot attribute for matching routes.\n \n If only the method 1 is used, set `type` to `\"field\"`.\n \n If only the method 2 is used, set `type` to `\"slotted\"`.\n \n `type` defaults to `\"united\"`, which will try method 1, then method 2.\n \n If no routes are matched, the default value (no named slot) will be rendered.\n \n @slot - Display slot when there is no match.\n * @slot * - Matching slot will be displayed.\n * @category navigation\n /\n@godown(protoName)\n@styles(css`\n :host {\n display: contents;\n }\n`)\nclass Router extends GlobalStyle {\n static routerInstances: Set<Router> = new Set<Router>();\n\n private __fieldRoute: Mux = new Mux();\n private __slottedRoute: Mux = new Mux();\n private __cacheRecord = new Map<string, RouteResult>();\n private __routes: RouteItem[];\n\n /\n Render result.\n /\n @state()\n component: unknown \| TemplateResult = null;\n\n /\n Dynamic parameters record.\n /\n params?: Record<string, string>;\n\n /\n Value of matched path in routes.\n /\n @state()\n path?: string;\n\n /\n Current pathname (equals to location.pathname).\n /\n @property()\n pathname: string = location.pathname;\n\n /\n Rendered content when there is no match.\n /\n @state()\n default: TemplateResult = htmlSlot();\n\n /\n The type of routing sources.\n \n If field, it won't collect the slot attribute of the child elements.\n \n This property should not be changed after the rendering is complete.\n /\n @property()\n type: RouterType = routerTypes.united;\n\n /\n Cache accessed records.\n \n Emptied at each re-collection.\n /\n @property({ type: Boolean })\n cache = false;\n\n @state()\n set routes(value) {\n this.__routes = value;\n this.collectFieldRoutes(value);\n }\n\n get routes(): RouteItem[] {\n return this.__routes;\n }\n\n clear(): void {\n this.__cacheRecord.clear();\n }\n\n protected render(): unknown {\n let cached: RouteResult \| undefined;\n if (this.cache && (cached = this.__cacheRecord.get(this.pathname))) {\n this.component = cached.component;\n this.path = cached.path;\n this.pathname = cached.pathname;\n }\n if (!cached) {\n switch (this.type) {\n case routerTypes.field:\n this.component = this.fieldComponent();\n break;\n case routerTypes.slotted:\n this.component = this.slottedComponent();\n break;\n default:\n this.component = this.fieldComponent() ?? this.slottedComponent();\n }\n }\n return this.component ?? this.default;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n Router.routerInstances.add(this);\n\n if (this.type !== \"field\") {\n this.observers.add(this, MutationObserver, this.collectSlottedRoutes, {\n attributes: true,\n attributeFilter: [\"slot\"],\n subtree: true,\n });\n this.collectSlottedRoutes();\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n Router.routerInstances.delete(this);\n }\n\n useRouter(): RouteResult {\n return {\n pathname: this.pathname,\n params: this.params,\n path: this.path,\n component: this.component,\n };\n }\n\n protected updated(changedProperties: PropertyValueMap<this>): void {\n const shouldDispatch = changedProperties.has(\"pathname\") \|\| changedProperties.has(\"path\");\n if (shouldDispatch) {\n const ur = this.useRouter();\n if (!this.__cacheRecord.has(this.pathname) && this.path) {\n this.__cacheRecord.set(this.pathname, ur);\n }\n this.dispatchCustomEvent(\"change\", ur);\n }\n }\n\n /\n Get component from {@linkcode routes} by query.\n /\n fieldComponent(query?: string): unknown {\n if (!query) {\n const mux = this.__fieldRoute.search(this.pathname);\n this.params = mux.params(this.pathname);\n query = mux.pattern;\n }\n this.path = query;\n\n if (!query) {\n return null;\n }\n\n const route = this.routes.find((r) => r.path === query);\n if (!route) {\n return null;\n }\n\n if (\"render\" in route) {\n return route.render?.(omit(this.useRouter(), \"component\")) \|\| null;\n }\n\n return route.component;\n }\n\n /\n Get component from slotted elements by query.\n /\n slottedComponent(query?: string): TemplateResult<1> {\n const slottedPaths = this._slottedNames;\n if (!query) {\n const mux = this.__fieldRoute.search(this.pathname);\n this.params = mux.params(this.pathname);\n query = mux.pattern;\n }\n this.path = query;\n\n if (!query) {\n return null;\n }\n\n this.path = slottedPaths.find((s) => s === query);\n if (!this.path) {\n return null;\n }\n\n return htmlSlot(this.path);\n }\n\n /\n Reset the route tree, clear cache, collect routes from child elements.\n /\n collectSlottedRoutes(): void {\n this.__slottedRoute = new Mux();\n this.clear();\n this._slottedNames.forEach((slotName) => {\n this.__slottedRoute.insert(slotName);\n });\n }\n\n /\n Reset the route tree, clear cache, collect routes from value.\n */\n collectFieldRoutes(value: typeof this.routes): void {\n this.__fieldRoute = new Mux();\n this.clear();\n value.forEach(({ path }) => {\n this.__fieldRoute.insert(path);\n });\n }\n\n static updateAll(): void {\n this.routerInstances.forEach((i) => {\n i.handlePopstate();\n });\n }\n\n search(pathname: string): Mux {\n return this.__fieldRoute.search(pathname) \|\| this.__slottedRoute.search(pathname);\n }\n\n handlePopstate: () => void = this.events.add(window, \"popstate\", () => {\n this.pathname = location.pathname;\n });\n}\n\nexport default Router;\nexport { Router };\n"],"version":3,"file":"component.d.ts"}
1	+ {"mappings":"AACA,cAAc,uBAAuB,sBAA2B;AAEhE,SAAS,UAAU,WAAiB;AAEpC,SAAS,mBAAmB;UAElB,WAAW;CACnB;CACA,QAAQ;CACR;;UAGQ,oBAAoB,WAAW;CACvC;;UAGQ,UAAU;OACZ;CACN;CACA,UAAU,QAAQ;CAClB;;AAGF,cAAM;UACJ,OAAO;UACP,SAAS;UACT,QAAQ;;KAGL,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;AA0B/B,cAMM,eAAe,YAAY;CAC/B,OAAO,iBAAiB,IAAI;CAE5B,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,QAAQ;;;;CAKR,AACA,qBAAqB;;;;CAKrB,SAAS;;;;CAKT,AACA;;;;CAKA,AACA;;;;CAKA,AACA,SAAS;;;;;;;;CAST,AACA,MAAM;;;;;;CAON,AACA;CAEA,IACI,OAAO,OAKG;CAAd,IAAI,UAAU;CAId;CAIA,UAAU;CAsBV;CAcA;CAKA,aAAa;CASb,UAAU,QAAQ,mBAAmB;;;;CAcrC,eAAe;;;;CA2Bf,iBAAiB,iBAAiB,eAAe;;;;CAwBjD;;;;CAWA,mBAAmB,cAAc,KAAK;CAQtC,OAAO;CAMP,OAAO,mBAAmB;CAI1B;;AAKF,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/router/component.ts"],"sourcesContent":["import { godown, htmlSlot, styles } from \"@godown/element\";\nimport { type PropertyValueMap, type TemplateResult, css } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { Router as Mux, omit } from \"sharekit\";\n\nimport { GlobalStyle } from \"../../internal/global-style.js\";\n\ninterface RouteState {\n pathname: string;\n params: Record<string, string>;\n path: string;\n}\n\ninterface RouteResult extends RouteState {\n component: unknown;\n}\n\ninterface RouteItem {\n [key: PropertyKey]: unknown;\n path: string;\n render?: (state?: RouteState) => unknown;\n component?: unknown;\n}\n\nconst routerTypes = {\n field: \"field\",\n slotted: \"slotted\",\n united: \"united\",\n} as const;\n\ntype RouterType = keyof typeof routerTypes;\n\nconst protoName = \"router\";\n\n/*\n {@linkcode Router} has basic routing control.\n \n To switch routes, use `router-link component`.\n \n It has two methods to collect routes.\n \n 1. From field `routes`, an array, each elements require \"path\".\n * 2. From child elements, which have the slot attribute for matching routes.\n \n If only the method 1 is used, set `type` to `\"field\"`.\n \n If only the method 2 is used, set `type` to `\"slotted\"`.\n \n `type` defaults to `\"united\"`, which will try method 1, then method 2.\n \n If no routes are matched, the default value (no named slot) will be rendered.\n \n @slot - Display slot when there is no match.\n * @slot * - Matching slot will be displayed.\n * @category navigation\n /\n@godown(protoName)\n@styles(css`\n :host {\n display: contents;\n }\n`)\nclass Router extends GlobalStyle {\n static routerInstances: Set<Router> = new Set<Router>();\n\n private __fieldRoute: Mux = new Mux();\n private __slottedRoute: Mux = new Mux();\n private __cacheRecord = new Map<string, RouteResult>();\n private __routes: RouteItem[];\n\n /\n Render result.\n /\n @state()\n component: unknown \| TemplateResult = null;\n\n /\n Dynamic parameters record.\n /\n params?: Record<string, string>;\n\n /\n Value of matched path in routes.\n /\n @state()\n path?: string;\n\n /\n Current pathname (equals to location.pathname).\n /\n @property()\n pathname: string = location.pathname;\n\n /\n Rendered content when there is no match.\n /\n @state()\n default: TemplateResult = htmlSlot();\n\n /\n The type of routing sources.\n \n If field, it won't collect the slot attribute of the child elements.\n \n This property should not be changed after the rendering is complete.\n /\n @property()\n type: RouterType = routerTypes.united;\n\n /\n Cache accessed records.\n \n Emptied at each re-collection.\n /\n @property({ type: Boolean })\n cache = false;\n\n @state()\n set routes(value) {\n this.__routes = value;\n this.collectFieldRoutes(value);\n }\n\n get routes(): RouteItem[] {\n return this.__routes;\n }\n\n clear(): void {\n this.__cacheRecord.clear();\n }\n\n protected render(): unknown {\n let cached: RouteResult \| undefined;\n if (this.cache && (cached = this.__cacheRecord.get(this.pathname))) {\n this.component = cached.component;\n this.path = cached.path;\n this.pathname = cached.pathname;\n }\n if (!cached) {\n switch (this.type) {\n case routerTypes.field:\n this.component = this.fieldComponent();\n break;\n case routerTypes.slotted:\n this.component = this.slottedComponent();\n break;\n default:\n this.component = this.fieldComponent() ?? this.slottedComponent();\n }\n }\n return this.component ?? this.default;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n Router.routerInstances.add(this);\n\n if (this.type !== \"field\") {\n this.observers.add(this, MutationObserver, this.collectSlottedRoutes, {\n attributes: true,\n attributeFilter: [\"slot\"],\n subtree: true,\n });\n this.collectSlottedRoutes();\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n Router.routerInstances.delete(this);\n }\n\n useRouter(): RouteResult {\n return {\n pathname: this.pathname,\n params: this.params,\n path: this.path,\n component: this.component,\n };\n }\n\n protected updated(changedProperties: PropertyValueMap<this>): void {\n const shouldDispatch = changedProperties.has(\"pathname\") \|\| changedProperties.has(\"path\");\n if (shouldDispatch) {\n const ur = this.useRouter();\n if (!this.__cacheRecord.has(this.pathname) && this.path) {\n this.__cacheRecord.set(this.pathname, ur);\n }\n this.dispatchCustomEvent(\"change\", ur);\n }\n }\n\n /\n Get component from {@linkcode routes} by query.\n /\n fieldComponent(query?: string): unknown {\n if (!query) {\n const mux = this.__fieldRoute.search(this.pathname);\n this.params = mux.params(this.pathname);\n query = mux.pattern;\n }\n this.path = query;\n\n if (!query) {\n return null;\n }\n\n const route = this.routes.find((r) => r.path === query);\n if (!route) {\n return null;\n }\n\n if (\"render\" in route) {\n return route.render?.(omit(this.useRouter(), \"component\")) \|\| null;\n }\n\n return route.component;\n }\n\n /\n Get component from slotted elements by query.\n /\n slottedComponent(query?: string): TemplateResult<1> {\n const slottedPaths = this._slottedNames;\n if (!query) {\n const mux = this.__fieldRoute.search(this.pathname);\n this.params = mux.params(this.pathname);\n query = mux.pattern;\n }\n this.path = query;\n\n if (!query) {\n return null;\n }\n\n this.path = slottedPaths.find((s) => s === query);\n if (!this.path) {\n return null;\n }\n\n return htmlSlot(this.path);\n }\n\n /\n Reset the route tree, clear cache, collect routes from child elements.\n /\n collectSlottedRoutes(): void {\n this.__slottedRoute = new Mux();\n this.clear();\n this._slottedNames.forEach((slotName) => {\n this.__slottedRoute.insert(slotName);\n });\n }\n\n /\n Reset the route tree, clear cache, collect routes from value.\n */\n collectFieldRoutes(value: typeof this.routes): void {\n this.__fieldRoute = new Mux();\n this.clear();\n value.forEach(({ path }) => {\n this.__fieldRoute.insert(path);\n });\n }\n\n static updateAll(): void {\n this.routerInstances.forEach((i) => {\n i.handlePopstate();\n });\n }\n\n search(pathname: string): Mux {\n return this.__fieldRoute.search(pathname) \|\| this.__slottedRoute.search(pathname);\n }\n\n handlePopstate: () => void = this.events.add(window, \"popstate\", () => {\n this.pathname = location.pathname;\n });\n}\n\nexport default Router;\nexport { Router };\n"],"version":3,"file":"component.d.ts"}

package/build/web-components/router/component.js CHANGED Viewed

@@ -1,3 +1,3 @@
-import{godown,styles,htmlSlot}from"@godown/element";import{css}from"lit";import{state,property}from"lit/decorators.js";import{Router as Router$2,omit}from"sharekit";import{GlobalStyle}from"../../internal/global-style.js";import _decorate from"@oxc-project/runtime/helpers/decorate";import"../../internal/reset-style.js";var _Router;const routerTypes={field:`field`,slotted:`slotted`,united:`united`},protoName=`router`;let Router=_Router=class e extends GlobalStyle{constructor(...e){super(...e),this.__fieldRoute=new Router$2,this.__slottedRoute=new Router$2,this.__cacheRecord=new Map,this.component=null,this.pathname=location.pathname,this.default=htmlSlot(),this.type=routerTypes.united,this.cache=!1,this.handlePopstate=this.events.add(window,`popstate`,()=>{this.pathname=location.pathname})}set routes(e){this.__routes=e,this.collectFieldRoutes(e)}get routes(){return this.__routes}clear(){this.__cacheRecord.clear()}render(){let e;if(this.cache&&(e=this.__cacheRecord.get(this.pathname))&&(this.component=e.component,this.path=e.path,this.pathname=e.pathname),!e)switch(this.type){case routerTypes.field:this.component=this.fieldComponent();break;case routerTypes.slotted:this.component=this.slottedComponent();break;default:this.component=this.fieldComponent()??this.slottedComponent()}return this.component??this.default}connectedCallback(){super.connectedCallback(),_Router.routerInstances.add(this),this.type!==`field`&&(this.observers.add(this,MutationObserver,this.collectSlottedRoutes,{attributes:!0,attributeFilter:[`slot`],subtree:!0}),this.collectSlottedRoutes())}disconnectedCallback(){super.disconnectedCallback(),_Router.routerInstances.delete(this)}useRouter(){return{pathname:this.pathname,params:this.params,path:this.path,component:this.component}}updated(e){let m=e.has(`pathname`)||e.has(`path`);if(m){let e=this.useRouter();!this.__cacheRecord.has(this.pathname)&&this.path&&this.__cacheRecord.set(this.pathname,e),this.dispatchCustomEvent(`change`,e)}}fieldComponent(e){if(!e){let m=this.__fieldRoute.search(this.pathname);this.params=m.params(this.pathname),e=m.pattern}if(this.path=e,!e)return null;let m=this.routes.find(m=>m.path===e);return m?`render`in m?m.render?.(omit(this.useRouter(),`component`))||null:m.component:null}slottedComponent(e){let m=this._slottedNames;if(!e){let m=this.__fieldRoute.search(this.pathname);this.params=m.params(this.pathname),e=m.pattern}return this.path=e,!e||(this.path=m.find(m=>m===e),!this.path)?null:htmlSlot(this.path)}collectSlottedRoutes(){this.__slottedRoute=new Router$2,this.clear(),this._slottedNames.forEach(e=>{this.__slottedRoute.insert(e)})}collectFieldRoutes(e){this.__fieldRoute=new Router$2,this.clear(),e.forEach(({path:e})=>{this.__fieldRoute.insert(e)})}static updateAll(){this.routerInstances.forEach(e=>{e.handlePopstate()})}search(e){return this.__fieldRoute.search(e)||this.__slottedRoute.search(e)}};_decorate([state()],Router.prototype,`component`,void 0),_decorate([state()],Router.prototype,`path`,void 0),_decorate([property()],Router.prototype,`pathname`,void 0),_decorate([state()],Router.prototype,`default`,void 0),_decorate([property()],Router.prototype,`type`,void 0),_decorate([property({type:Boolean})],Router.prototype,`cache`,void 0),_decorate([state()],Router.prototype,`routes`,null),Router=_Router=_decorate([godown(protoName),styles(css`:host{display:contents}
-`)],Router),Router.routerInstances=new Set;var Router$1=Router;export{Router,Router$1 as default};
+import{godown as e,styles as t,htmlSlot as n}from"@godown/element";import{css as r}from"lit";import{state as i,property as a}from"lit/decorators.js";import{Router as o,omit as s}from"sharekit";import{GlobalStyle as c}from"../../internal/global-style.js";import l from"@oxc-project/runtime/helpers/decorate";var u;const d={field:`field`,slotted:`slotted`,united:`united`},f=`router`;let p=u=class e extends c{constructor(...e){super(...e),this.__fieldRoute=new o,this.__slottedRoute=new o,this.__cacheRecord=new Map,this.component=null,this.pathname=location.pathname,this.default=n(),this.type=d.united,this.cache=!1,this.handlePopstate=this.events.add(window,`popstate`,()=>{this.pathname=location.pathname})}set routes(e){this.__routes=e,this.collectFieldRoutes(e)}get routes(){return this.__routes}clear(){this.__cacheRecord.clear()}render(){let e;if(this.cache&&(e=this.__cacheRecord.get(this.pathname))&&(this.component=e.component,this.path=e.path,this.pathname=e.pathname),!e)switch(this.type){case d.field:this.component=this.fieldComponent();break;case d.slotted:this.component=this.slottedComponent();break;default:this.component=this.fieldComponent()??this.slottedComponent()}return this.component??this.default}connectedCallback(){super.connectedCallback(),u.routerInstances.add(this),this.type!==`field`&&(this.observers.add(this,MutationObserver,this.collectSlottedRoutes,{attributes:!0,attributeFilter:[`slot`],subtree:!0}),this.collectSlottedRoutes())}disconnectedCallback(){super.disconnectedCallback(),u.routerInstances.delete(this)}useRouter(){return{pathname:this.pathname,params:this.params,path:this.path,component:this.component}}updated(e){let t=e.has(`pathname`)||e.has(`path`);if(t){let e=this.useRouter();!this.__cacheRecord.has(this.pathname)&&this.path&&this.__cacheRecord.set(this.pathname,e),this.dispatchCustomEvent(`change`,e)}}fieldComponent(e){if(!e){let t=this.__fieldRoute.search(this.pathname);this.params=t.params(this.pathname),e=t.pattern}if(this.path=e,!e)return null;let t=this.routes.find(t=>t.path===e);return t?`render`in t?t.render?.(s(this.useRouter(),`component`))||null:t.component:null}slottedComponent(e){let t=this._slottedNames;if(!e){let t=this.__fieldRoute.search(this.pathname);this.params=t.params(this.pathname),e=t.pattern}return this.path=e,!e||(this.path=t.find(t=>t===e),!this.path)?null:n(this.path)}collectSlottedRoutes(){this.__slottedRoute=new o,this.clear(),this._slottedNames.forEach(e=>{this.__slottedRoute.insert(e)})}collectFieldRoutes(e){this.__fieldRoute=new o,this.clear(),e.forEach(({path:e})=>{this.__fieldRoute.insert(e)})}static updateAll(){this.routerInstances.forEach(e=>{e.handlePopstate()})}search(e){return this.__fieldRoute.search(e)||this.__slottedRoute.search(e)}};p.routerInstances=new Set,l([i()],p.prototype,`component`,void 0),l([i()],p.prototype,`path`,void 0),l([a()],p.prototype,`pathname`,void 0),l([i()],p.prototype,`default`,void 0),l([a()],p.prototype,`type`,void 0),l([a({type:Boolean})],p.prototype,`cache`,void 0),l([i()],p.prototype,`routes`,null),p=u=l([e(`router`),t(r`:host{display:contents}
+`)],p);var m=p;export{p as Router,m as default};
 //# sourceMappingURL=component.js.map

package/build/web-components/router/component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"component.js","sources":["../../../src/web-components/router/component.ts"],"sourcesContent":["import { godown, htmlSlot, styles } from \"@godown/element\";\nimport { type PropertyValueMap, type TemplateResult, css } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { Router as Mux, omit } from \"sharekit\";\n\nimport { GlobalStyle } from \"../../internal/global-style.js\";\n\ninterface RouteState {\n pathname: string;\n params: Record<string, string>;\n path: string;\n}\n\ninterface RouteResult extends RouteState {\n component: unknown;\n}\n\ninterface RouteItem {\n [key: PropertyKey]: unknown;\n path: string;\n render?: (state?: RouteState) => unknown;\n component?: unknown;\n}\n\nconst routerTypes = {\n field: \"field\",\n slotted: \"slotted\",\n united: \"united\",\n} as const;\n\ntype RouterType = keyof typeof routerTypes;\n\nconst protoName = \"router\";\n\n/*\n {@linkcode Router} has basic routing control.\n \n To switch routes, use `router-link component`.\n \n It has two methods to collect routes.\n \n 1. From field `routes`, an array, each elements require \"path\".\n * 2. From child elements, which have the slot attribute for matching routes.\n \n If only the method 1 is used, set `type` to `\"field\"`.\n \n If only the method 2 is used, set `type` to `\"slotted\"`.\n \n `type` defaults to `\"united\"`, which will try method 1, then method 2.\n \n If no routes are matched, the default value (no named slot) will be rendered.\n \n @slot - Display slot when there is no match.\n * @slot * - Matching slot will be displayed.\n * @category navigation\n /\n@godown(protoName)\n@styles(css`\n :host {\n display: contents;\n }\n`)\nclass Router extends GlobalStyle {\n static routerInstances: Set<Router> = new Set<Router>();\n\n private __fieldRoute: Mux = new Mux();\n private __slottedRoute: Mux = new Mux();\n private __cacheRecord = new Map<string, RouteResult>();\n private __routes: RouteItem[];\n\n /\n Render result.\n /\n @state()\n component: unknown \| TemplateResult = null;\n\n /\n Dynamic parameters record.\n /\n params?: Record<string, string>;\n\n /\n Value of matched path in routes.\n /\n @state()\n path?: string;\n\n /\n Current pathname (equals to location.pathname).\n /\n @property()\n pathname: string = location.pathname;\n\n /\n Rendered content when there is no match.\n /\n @state()\n default: TemplateResult = htmlSlot();\n\n /\n The type of routing sources.\n \n If field, it won't collect the slot attribute of the child elements.\n \n This property should not be changed after the rendering is complete.\n /\n @property()\n type: RouterType = routerTypes.united;\n\n /\n Cache accessed records.\n \n Emptied at each re-collection.\n /\n @property({ type: Boolean })\n cache = false;\n\n @state()\n set routes(value) {\n this.__routes = value;\n this.collectFieldRoutes(value);\n }\n\n get routes(): RouteItem[] {\n return this.__routes;\n }\n\n clear(): void {\n this.__cacheRecord.clear();\n }\n\n protected render(): unknown {\n let cached: RouteResult \| undefined;\n if (this.cache && (cached = this.__cacheRecord.get(this.pathname))) {\n this.component = cached.component;\n this.path = cached.path;\n this.pathname = cached.pathname;\n }\n if (!cached) {\n switch (this.type) {\n case routerTypes.field:\n this.component = this.fieldComponent();\n break;\n case routerTypes.slotted:\n this.component = this.slottedComponent();\n break;\n default:\n this.component = this.fieldComponent() ?? this.slottedComponent();\n }\n }\n return this.component ?? this.default;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n Router.routerInstances.add(this);\n\n if (this.type !== \"field\") {\n this.observers.add(this, MutationObserver, this.collectSlottedRoutes, {\n attributes: true,\n attributeFilter: [\"slot\"],\n subtree: true,\n });\n this.collectSlottedRoutes();\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n Router.routerInstances.delete(this);\n }\n\n useRouter(): RouteResult {\n return {\n pathname: this.pathname,\n params: this.params,\n path: this.path,\n component: this.component,\n };\n }\n\n protected updated(changedProperties: PropertyValueMap<this>): void {\n const shouldDispatch = changedProperties.has(\"pathname\") \|\| changedProperties.has(\"path\");\n if (shouldDispatch) {\n const ur = this.useRouter();\n if (!this.__cacheRecord.has(this.pathname) && this.path) {\n this.__cacheRecord.set(this.pathname, ur);\n }\n this.dispatchCustomEvent(\"change\", ur);\n }\n }\n\n /\n Get component from {@linkcode routes} by query.\n /\n fieldComponent(query?: string): unknown {\n if (!query) {\n const mux = this.__fieldRoute.search(this.pathname);\n this.params = mux.params(this.pathname);\n query = mux.pattern;\n }\n this.path = query;\n\n if (!query) {\n return null;\n }\n\n const route = this.routes.find((r) => r.path === query);\n if (!route) {\n return null;\n }\n\n if (\"render\" in route) {\n return route.render?.(omit(this.useRouter(), \"component\")) \|\| null;\n }\n\n return route.component;\n }\n\n /\n Get component from slotted elements by query.\n /\n slottedComponent(query?: string): TemplateResult<1> {\n const slottedPaths = this._slottedNames;\n if (!query) {\n const mux = this.__fieldRoute.search(this.pathname);\n this.params = mux.params(this.pathname);\n query = mux.pattern;\n }\n this.path = query;\n\n if (!query) {\n return null;\n }\n\n this.path = slottedPaths.find((s) => s === query);\n if (!this.path) {\n return null;\n }\n\n return htmlSlot(this.path);\n }\n\n /\n Reset the route tree, clear cache, collect routes from child elements.\n /\n collectSlottedRoutes(): void {\n this.__slottedRoute = new Mux();\n this.clear();\n this._slottedNames.forEach((slotName) => {\n this.__slottedRoute.insert(slotName);\n });\n }\n\n /\n Reset the route tree, clear cache, collect routes from value.\n */\n collectFieldRoutes(value: typeof this.routes): void {\n this.__fieldRoute = new Mux();\n this.clear();\n value.forEach(({ path }) => {\n this.__fieldRoute.insert(path);\n });\n }\n\n static updateAll(): void {\n this.routerInstances.forEach((i) => {\n i.handlePopstate();\n });\n }\n\n search(pathname: string): Mux {\n return this.__fieldRoute.search(pathname) \|\| this.__slottedRoute.search(pathname);\n }\n\n handlePopstate: () => void = this.events.add(window, \"popstate\", () => {\n this.pathname = location.pathname;\n });\n}\n\nexport default Router;\nexport { Router };\n"],"names":["Router","Mux","value","cached: RouteResult \| undefined","cached","changedProperties: PropertyValueMap<this>","shouldDispatch","changedProperties","ur","query?: string","query","mux","route","r","slottedPaths","s","slotName","value: typeof this.routes","path","i","pathname: string","pathname"],"mappings":"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"}
1	+ {"version":3,"file":"component.js","sources":["../../../src/web-components/router/component.ts"],"sourcesContent":["import { godown, htmlSlot, styles } from \"@godown/element\";\nimport { type PropertyValueMap, type TemplateResult, css } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { Router as Mux, omit } from \"sharekit\";\n\nimport { GlobalStyle } from \"../../internal/global-style.js\";\n\ninterface RouteState {\n pathname: string;\n params: Record<string, string>;\n path: string;\n}\n\ninterface RouteResult extends RouteState {\n component: unknown;\n}\n\ninterface RouteItem {\n [key: PropertyKey]: unknown;\n path: string;\n render?: (state?: RouteState) => unknown;\n component?: unknown;\n}\n\nconst routerTypes = {\n field: \"field\",\n slotted: \"slotted\",\n united: \"united\",\n} as const;\n\ntype RouterType = keyof typeof routerTypes;\n\nconst protoName = \"router\";\n\n/*\n {@linkcode Router} has basic routing control.\n \n To switch routes, use `router-link component`.\n \n It has two methods to collect routes.\n \n 1. From field `routes`, an array, each elements require \"path\".\n * 2. From child elements, which have the slot attribute for matching routes.\n \n If only the method 1 is used, set `type` to `\"field\"`.\n \n If only the method 2 is used, set `type` to `\"slotted\"`.\n \n `type` defaults to `\"united\"`, which will try method 1, then method 2.\n \n If no routes are matched, the default value (no named slot) will be rendered.\n \n @slot - Display slot when there is no match.\n * @slot * - Matching slot will be displayed.\n * @category navigation\n /\n@godown(protoName)\n@styles(css`\n :host {\n display: contents;\n }\n`)\nclass Router extends GlobalStyle {\n static routerInstances: Set<Router> = new Set<Router>();\n\n private __fieldRoute: Mux = new Mux();\n private __slottedRoute: Mux = new Mux();\n private __cacheRecord = new Map<string, RouteResult>();\n private __routes: RouteItem[];\n\n /\n Render result.\n /\n @state()\n component: unknown \| TemplateResult = null;\n\n /\n Dynamic parameters record.\n /\n params?: Record<string, string>;\n\n /\n Value of matched path in routes.\n /\n @state()\n path?: string;\n\n /\n Current pathname (equals to location.pathname).\n /\n @property()\n pathname: string = location.pathname;\n\n /\n Rendered content when there is no match.\n /\n @state()\n default: TemplateResult = htmlSlot();\n\n /\n The type of routing sources.\n \n If field, it won't collect the slot attribute of the child elements.\n \n This property should not be changed after the rendering is complete.\n /\n @property()\n type: RouterType = routerTypes.united;\n\n /\n Cache accessed records.\n \n Emptied at each re-collection.\n /\n @property({ type: Boolean })\n cache = false;\n\n @state()\n set routes(value) {\n this.__routes = value;\n this.collectFieldRoutes(value);\n }\n\n get routes(): RouteItem[] {\n return this.__routes;\n }\n\n clear(): void {\n this.__cacheRecord.clear();\n }\n\n protected render(): unknown {\n let cached: RouteResult \| undefined;\n if (this.cache && (cached = this.__cacheRecord.get(this.pathname))) {\n this.component = cached.component;\n this.path = cached.path;\n this.pathname = cached.pathname;\n }\n if (!cached) {\n switch (this.type) {\n case routerTypes.field:\n this.component = this.fieldComponent();\n break;\n case routerTypes.slotted:\n this.component = this.slottedComponent();\n break;\n default:\n this.component = this.fieldComponent() ?? this.slottedComponent();\n }\n }\n return this.component ?? this.default;\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n Router.routerInstances.add(this);\n\n if (this.type !== \"field\") {\n this.observers.add(this, MutationObserver, this.collectSlottedRoutes, {\n attributes: true,\n attributeFilter: [\"slot\"],\n subtree: true,\n });\n this.collectSlottedRoutes();\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback();\n Router.routerInstances.delete(this);\n }\n\n useRouter(): RouteResult {\n return {\n pathname: this.pathname,\n params: this.params,\n path: this.path,\n component: this.component,\n };\n }\n\n protected updated(changedProperties: PropertyValueMap<this>): void {\n const shouldDispatch = changedProperties.has(\"pathname\") \|\| changedProperties.has(\"path\");\n if (shouldDispatch) {\n const ur = this.useRouter();\n if (!this.__cacheRecord.has(this.pathname) && this.path) {\n this.__cacheRecord.set(this.pathname, ur);\n }\n this.dispatchCustomEvent(\"change\", ur);\n }\n }\n\n /\n Get component from {@linkcode routes} by query.\n /\n fieldComponent(query?: string): unknown {\n if (!query) {\n const mux = this.__fieldRoute.search(this.pathname);\n this.params = mux.params(this.pathname);\n query = mux.pattern;\n }\n this.path = query;\n\n if (!query) {\n return null;\n }\n\n const route = this.routes.find((r) => r.path === query);\n if (!route) {\n return null;\n }\n\n if (\"render\" in route) {\n return route.render?.(omit(this.useRouter(), \"component\")) \|\| null;\n }\n\n return route.component;\n }\n\n /\n Get component from slotted elements by query.\n /\n slottedComponent(query?: string): TemplateResult<1> {\n const slottedPaths = this._slottedNames;\n if (!query) {\n const mux = this.__fieldRoute.search(this.pathname);\n this.params = mux.params(this.pathname);\n query = mux.pattern;\n }\n this.path = query;\n\n if (!query) {\n return null;\n }\n\n this.path = slottedPaths.find((s) => s === query);\n if (!this.path) {\n return null;\n }\n\n return htmlSlot(this.path);\n }\n\n /\n Reset the route tree, clear cache, collect routes from child elements.\n /\n collectSlottedRoutes(): void {\n this.__slottedRoute = new Mux();\n this.clear();\n this._slottedNames.forEach((slotName) => {\n this.__slottedRoute.insert(slotName);\n });\n }\n\n /\n Reset the route tree, clear cache, collect routes from value.\n */\n collectFieldRoutes(value: typeof this.routes): void {\n this.__fieldRoute = new Mux();\n this.clear();\n value.forEach(({ path }) => {\n this.__fieldRoute.insert(path);\n });\n }\n\n static updateAll(): void {\n this.routerInstances.forEach((i) => {\n i.handlePopstate();\n });\n }\n\n search(pathname: string): Mux {\n return this.__fieldRoute.search(pathname) \|\| this.__slottedRoute.search(pathname);\n }\n\n handlePopstate: () => void = this.events.add(window, \"popstate\", () => {\n this.pathname = location.pathname;\n });\n}\n\nexport default Router;\nexport { Router };\n"],"names":["routerTypes","protoName","Router","GlobalStyle","Mux","htmlSlot","value","cached: RouteResult \| undefined","cached","_Router","shouldDispatch","changedProperties","ur","query","mux","route","r","omit","slottedPaths","s","slotName","path","i","pathname","_decorate","state","property","godown","styles","Router$1"],"mappings":"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"}

package/build/web-components/router/definition.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"AAAA,OAAO,YAAY~~,gBAAiB~~;~~AAIpC~~,eAAe;eAEA;WACH,sBAAsB;EAC9B,iBAAiB~~;CAClB;AACF~~","names":[],"sources":["../../../../src/web-components/router/definition.ts"],"sourcesContent":["import Router from \"./component.js\";\n\nRouter.define();\n\nexport default Router;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-router\": Router;\n }\n}\n"],"version":3,"file":"definition.d.ts"}
1	+ {"mappings":"AAAA,OAAO,YAAY;AAInB,eAAe;eAEA;WACH,sBAAsB;EAC9B,iBAAiB","names":[],"sources":["../../../../src/web-components/router/definition.ts"],"sourcesContent":["import Router from \"./component.js\";\n\nRouter.define();\n\nexport default Router;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-router\": Router;\n }\n}\n"],"version":3,"file":"definition.d.ts"}

package/build/web-components/router/definition.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import Router from"./component.js";import"@godown/element";import"lit";import"lit/decorators.js";import"sharekit";import"../../internal/global-style.js";import"../../internal/reset-style.js";import"@oxc-project/runtime/helpers/decorate";Router.define();export{Router as default};
+import e from"./component.js";e.define();export{e as default};
 //# sourceMappingURL=definition.js.map

package/build/web-components/router/definition.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"definition.js","sources":["../../../src/web-components/router/definition.ts"],"sourcesContent":["import Router from \"./component.js\";\n\nRouter.define();\n\nexport default Router;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-router\": Router;\n }\n}\n"],"names":[],"mappings":"~~6OAEA~~,~~OAAO,QAAQ~~"}
1	+ {"version":3,"file":"definition.js","sources":["../../../src/web-components/router/definition.ts"],"sourcesContent":["import Router from \"./component.js\";\n\nRouter.define();\n\nexport default Router;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"godown-router\": Router;\n }\n}\n"],"names":["Router"],"mappings":"8BAEAA,EAAO"}

package/build/web-components/select/component.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"mappings":"AAEA,cAAc,sBAA0C~~,KAAM~~;~~AAG9D~~,OAAO,WAAW~~,uBAAwB~~;;;;;;;;;;~~AA4B1C~~,cAiCM,eAAe,MAAM;CACzB,AACA;CAEA,AACA;CAEA,AACA;CAEA,AACA,QAAQ;EACN;EACA~~;CACD;CAED~~,AACA,UAAU;CAEV,UAAU,aAAa;CACvB,UAAU;CACV,UAAU;CAEV,UAAU,UAAU,eAAe;CAuCnC,UAAU,iBAAiB,eAAe;CAM1C,UAAU;CAkBV,UAAU;CAMV;CAKA,~~OAAOA~~,~~eAAeC~~,gBAAgB,IAAI;CAiB1C;CAOA;CAeA;CAQA,~~MAAMC~~,UAAU;CAMhB~~;AAKD;AAED~~,eAAe;AACf,SAAS","names":[~~"value: string","label: string","options?: FocusOptions"~~],"sources":["../../../../src/web-components/select/component.ts"],"sourcesContent":["import { type HandlerEvent, attr, godown, htmlSlot, styles } from \"@godown/element\";\nimport svgCaretDown from \"../../internal/icons/caret-down.js\";\nimport { type TemplateResult, css, html, nothing } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\n\nimport Input from \"../input/component.js\";\nimport { hidePopover, showPopover } from \"../../internal/popover.js\";\nimport { memoize } from \"../../internal/utils.js\";\n\nconst supportsPositionArea = memoize(() => CSS.supports(\"position-area:top\"));\n\nfunction updateSelected(element: HTMLElement \| null, operation: 0 \| 1) {\n if (element) {\n const name = \"selected\";\n if (operation) {\n element.setAttribute(name, \"\");\n } else {\n element.removeAttribute(name);\n }\n }\n}\n\nconst protoName = \"select\";\n\n/*\n {@linkcode Select} is similar to `<select>`.\n \n @fires input - Fires when the input value changes.\n * @fires change - Fires when the input value changes.\n * @fires select - Fires when select an option.\n * @slot - Options.\n * @category input\n */\n@godown(protoName)\n@styles(css`\n [part=\"root\"] {\n position: relative;\n anchor-name: --select;\n }\n\n label {\n display: contents;\n }\n\n [part=\"popover\"] {\n border: 0;\n width: 100%;\n background: none;\n position-anchor: --select;\n position-area: bottom center;\n position-try-fallbacks: flip-block;\n }\n\n [part=\"input\"] {\n text-overflow: ellipsis;\n }\n\n @supports not (position-area: top) {\n [part=\"popover\"] {\n left: 0;\n top: 100%;\n display: none;\n position: absolute;\n }\n }\n`)\nclass Select extends Input {\n @property()\n text: string;\n\n @property({ type: Boolean })\n multiple = false;\n\n @property({ type: Boolean })\n noEdit = false;\n\n @property({ type: Array })\n values: {\n value: string;\n label?: string;\n }[] = [];\n\n @query(\"[part=popover]\")\n _popover: HTMLElement;\n\n protected lastChecked: HTMLElement;\n protected defaultText: string;\n protected optionsVisible = false;\n\n protected render(): TemplateResult<1> {\n const inputNoEdit = this.noEdit \|\| this.disabled;\n return html`\n <label\n part=\"root\"\n ${attr(this.observedRecord)}\n >\n ${[\n this._renderPrefix(),\n this.noEdit\n ? html`\n <input style=\"position: absolute;inset: 0;opacity: 0;\" />\n `\n : \"\",\n html`\n <input\n part=\"input\"\n .value=\"${this.text}\"\n ?autofocus=\"${this.autofocus}\"\n ?disabled=\"${inputNoEdit}\"\n autocapitalize=\"${this.autocapitalize \|\| nothing}\"\n autocomplete=\"${this.autocomplete \|\| nothing}\"\n placeholder=\"${this.placeholder \|\| nothing}\"\n @input=\"${inputNoEdit ? null : this._handleInput}\"\n @change=\"${inputNoEdit ? null : this._handleChange}\"\n />\n `,\n this._renderSuffix(),\n ]}\n <div\n part=\"popover\"\n popover=\"${supportsPositionArea() ? \"manual\" : nothing}\"\n >\n ${htmlSlot()}\n </div>\n </label>\n `;\n }\n\n protected _renderSuffix(): TemplateResult<1> {\n return html`\n <i part=\"suffix\">${htmlSlot(\"suffix\", svgCaretDown())}</i>\n `;\n }\n\n protected firstUpdated(): void {\n this.events.add(this._slot, \"click\", (e: HandlerEvent<HTMLOptionElement>) => {\n const { target } = e;\n if (target.tagName !== \"OPTION\") {\n return;\n }\n e.preventDefault();\n const { label, value } = target;\n const operation = this.select(value, label);\n if (!this.multiple) {\n updateSelected(this.lastChecked, 0);\n this.hideOptions();\n }\n updateSelected(target, operation);\n this.lastChecked = target;\n });\n }\n\n protected _connectedInit(): void {\n this.default = this.value ??= \"\";\n this.defaultText = this.text ??= \"\";\n this.events.add(this, \"focus\", this.showOptions);\n }\n\n reset(): void {\n this.value = this.default;\n this.text = this.defaultText;\n }\n\n select(value: string, label: string): 0 \| 1 {\n label \|\|= value;\n let operation: 0 \| 1 = 0;\n const i = this.values.findIndex((s) => s.value === value);\n if (i > -1) {\n this.values.splice(i, 1);\n } else {\n this.values.push({ value, label });\n operation = 1;\n }\n this.checkValues();\n this.value = this.values.map((s) => s.value).join(\",\");\n this.text = this.values.map((s) => s.label).join(\", \");\n this.dispatchCustomEvent(\"select\", this.value);\n return operation;\n }\n\n checkValues(): void {\n if (!this.multiple && this.values.length > 1) {\n this.values.splice(0, this.values.length - 1);\n this.requestUpdate();\n }\n }\n\n showOptions(): void {\n if (this.optionsVisible) {\n return;\n }\n showPopover(this._popover);\n const listener = (e) => {\n if (!this.contains(e.target)) {\n this.hideOptions();\n this.events.remove(document, \"click\", listener);\n }\n };\n this.events.add(document, \"click\", listener);\n this.optionsVisible = true;\n }\n\n hideOptions(): void {\n if (!this.optionsVisible) {\n return;\n }\n hidePopover(this._popover);\n this.optionsVisible = false;\n }\n\n focus(options?: FocusOptions): void {\n super.focus();\n this._input.focus(options);\n this.showOptions();\n }\n\n blur(): void {\n super.blur();\n this._input.blur();\n hidePopover(this._popover);\n }\n}\n\nexport default Select;\nexport { Select };\n"],"version":3,"file":"component.d.ts"}
1	+ {"mappings":"AAEA,cAAc,sBAA0C;AAGxD,OAAO,WAAW;;;;;;;;;;AA4BlB,cAiCM,eAAe,MAAM;CACzB,AACA;CAEA,AACA;CAEA,AACA;CAEA,AACA,QAAQ;EACN;EACA;;CAGF,AACA,UAAU;CAEV,UAAU,aAAa;CACvB,UAAU;CACV,UAAU;CAEV,UAAU,UAAU,eAAe;CAuCnC,UAAU,iBAAiB,eAAe;CAM1C,UAAU;CAkBV,UAAU;CAMV;CAKA,OAAO,eAAe,gBAAgB,IAAI;CAiB1C;CAOA;CAeA;CAQA,MAAM,UAAU;CAMhB;;AAOF,eAAe;AACf,SAAS","names":[],"sources":["../../../../src/web-components/select/component.ts"],"sourcesContent":["import { type HandlerEvent, attr, godown, htmlSlot, styles } from \"@godown/element\";\nimport svgCaretDown from \"../../internal/icons/caret-down.js\";\nimport { type TemplateResult, css, html, nothing } from \"lit\";\nimport { property, query } from \"lit/decorators.js\";\n\nimport Input from \"../input/component.js\";\nimport { hidePopover, showPopover } from \"../../internal/popover.js\";\nimport { memoize } from \"../../internal/utils.js\";\n\nconst supportsPositionArea = memoize(() => CSS.supports(\"position-area:top\"));\n\nfunction updateSelected(element: HTMLElement \| null, operation: 0 \| 1) {\n if (element) {\n const name = \"selected\";\n if (operation) {\n element.setAttribute(name, \"\");\n } else {\n element.removeAttribute(name);\n }\n }\n}\n\nconst protoName = \"select\";\n\n/*\n {@linkcode Select} is similar to `<select>`.\n \n @fires input - Fires when the input value changes.\n * @fires change - Fires when the input value changes.\n * @fires select - Fires when select an option.\n * @slot - Options.\n * @category input\n */\n@godown(protoName)\n@styles(css`\n [part=\"root\"] {\n position: relative;\n anchor-name: --select;\n }\n\n label {\n display: contents;\n }\n\n [part=\"popover\"] {\n border: 0;\n width: 100%;\n background: none;\n position-anchor: --select;\n position-area: bottom center;\n position-try-fallbacks: flip-block;\n }\n\n [part=\"input\"] {\n text-overflow: ellipsis;\n }\n\n @supports not (position-area: top) {\n [part=\"popover\"] {\n left: 0;\n top: 100%;\n display: none;\n position: absolute;\n }\n }\n`)\nclass Select extends Input {\n @property()\n text: string;\n\n @property({ type: Boolean })\n multiple = false;\n\n @property({ type: Boolean })\n noEdit = false;\n\n @property({ type: Array })\n values: {\n value: string;\n label?: string;\n }[] = [];\n\n @query(\"[part=popover]\")\n _popover: HTMLElement;\n\n protected lastChecked: HTMLElement;\n protected defaultText: string;\n protected optionsVisible = false;\n\n protected render(): TemplateResult<1> {\n const inputNoEdit = this.noEdit \|\| this.disabled;\n return html`\n <label\n part=\"root\"\n ${attr(this.observedRecord)}\n >\n ${[\n this._renderPrefix(),\n this.noEdit\n ? html`\n <input style=\"position: absolute;inset: 0;opacity: 0;\" />\n `\n : \"\",\n html`\n <input\n part=\"input\"\n .value=\"${this.text}\"\n ?autofocus=\"${this.autofocus}\"\n ?disabled=\"${inputNoEdit}\"\n autocapitalize=\"${this.autocapitalize \|\| nothing}\"\n autocomplete=\"${this.autocomplete \|\| nothing}\"\n placeholder=\"${this.placeholder \|\| nothing}\"\n @input=\"${inputNoEdit ? null : this._handleInput}\"\n @change=\"${inputNoEdit ? null : this._handleChange}\"\n />\n `,\n this._renderSuffix(),\n ]}\n <div\n part=\"popover\"\n popover=\"${supportsPositionArea() ? \"manual\" : nothing}\"\n >\n ${htmlSlot()}\n </div>\n </label>\n `;\n }\n\n protected _renderSuffix(): TemplateResult<1> {\n return html`\n <i part=\"suffix\">${htmlSlot(\"suffix\", svgCaretDown())}</i>\n `;\n }\n\n protected firstUpdated(): void {\n this.events.add(this._slot, \"click\", (e: HandlerEvent<HTMLOptionElement>) => {\n const { target } = e;\n if (target.tagName !== \"OPTION\") {\n return;\n }\n e.preventDefault();\n const { label, value } = target;\n const operation = this.select(value, label);\n if (!this.multiple) {\n updateSelected(this.lastChecked, 0);\n this.hideOptions();\n }\n updateSelected(target, operation);\n this.lastChecked = target;\n });\n }\n\n protected _connectedInit(): void {\n this.default = this.value ??= \"\";\n this.defaultText = this.text ??= \"\";\n this.events.add(this, \"focus\", this.showOptions);\n }\n\n reset(): void {\n this.value = this.default;\n this.text = this.defaultText;\n }\n\n select(value: string, label: string): 0 \| 1 {\n label \|\|= value;\n let operation: 0 \| 1 = 0;\n const i = this.values.findIndex((s) => s.value === value);\n if (i > -1) {\n this.values.splice(i, 1);\n } else {\n this.values.push({ value, label });\n operation = 1;\n }\n this.checkValues();\n this.value = this.values.map((s) => s.value).join(\",\");\n this.text = this.values.map((s) => s.label).join(\", \");\n this.dispatchCustomEvent(\"select\", this.value);\n return operation;\n }\n\n checkValues(): void {\n if (!this.multiple && this.values.length > 1) {\n this.values.splice(0, this.values.length - 1);\n this.requestUpdate();\n }\n }\n\n showOptions(): void {\n if (this.optionsVisible) {\n return;\n }\n showPopover(this._popover);\n const listener = (e) => {\n if (!this.contains(e.target)) {\n this.hideOptions();\n this.events.remove(document, \"click\", listener);\n }\n };\n this.events.add(document, \"click\", listener);\n this.optionsVisible = true;\n }\n\n hideOptions(): void {\n if (!this.optionsVisible) {\n return;\n }\n hidePopover(this._popover);\n this.optionsVisible = false;\n }\n\n focus(options?: FocusOptions): void {\n super.focus();\n this._input.focus(options);\n this.showOptions();\n }\n\n blur(): void {\n super.blur();\n this._input.blur();\n hidePopover(this._popover);\n }\n}\n\nexport default Select;\nexport { Select };\n"],"version":3,"file":"component.d.ts"}