godown 3.13.1 → 3.13.2

package/web-components/progress/component.d.ts

@@ -1,16 +1,15 @@
 import { type TemplateResult } from "lit";
 import { GlobalStyle } from "../../internal/global-style.js";
 /**
- * {@linkcode Progress} similar to `<progress>`.
- *
- * @category feedback
- */
+* {@linkcode Progress} similar to `<progress>`.
+*
+* @category feedback
+*/
 declare class Progress extends GlobalStyle {
-    max: number;
-    min: number;
-    value: number;
-    protected render(): TemplateResult<1>;
+	max: number;
+	min: number;
+	value: number;
+	protected render(): TemplateResult<1>;
 }
 export default Progress;
 export { Progress };
-//# sourceMappingURL=component.d.ts.map

package/web-components/progress/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"__source__/","sources":["web-components/progress/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAa,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,WAAW,EAAiB,MAAM,gCAAgC,CAAC;AAI5E;;;;GAIG;AACH,cA+CM,QAAS,SAAQ,WAAW;IAEhC,GAAG,SAAK;IAGR,GAAG,SAAK;IAGR,KAAK,EAAE,MAAM,CAAC;IAEd,SAAS,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;CAsBtC;AAED,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"mappings":"AACA,cAAc,sBAAiC,KAAM;AAGrD,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, isNullable, Ranger, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\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/web-components/progress/component.js

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

package/web-components/progress/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/web-components/progress/component.ts"],"sourcesContent":null,"names":["Progress","GlobalStyle","constructor","this","max","min","render","className","width","isNullable","value","ranger","Ranger","diff","html","attr","observedRecord","__decorate","Number","prototype","godown","styles","css","cssGlobalVars","passive","active","Progress$1"],"mappings":"+RA4DA,IAAMA,EAAN,MAAMA,iBAAiBC,EAAvB,WAAAC,uBAEEC,KAAGC,IAAG,EAGND,KAAGE,IAAG,EAKI,MAAAC,GACR,IACIC,EADAC,EAAQ,GAEZ,IAAKC,EAAWN,KAAKO,OAAQ,CAC3B,MAAMC,EAAS,IAAIC,EAAOT,KAAKE,IAAKF,KAAKC,KAEzCI,IADeL,KAAKO,MAAQP,KAAKE,KAChBM,EAAOE,KAAQ,IAChCN,EAAY,SAEd,OAAOO,CAAI,oBAAAC,EAAAZ,KAAAa,0BAAAT,oCAAAC,qBAGLS,EAAA,SACgBC,gFAII,0BAGzBC,UAAA,aAAA,KACHF,EAAA,CACDG,EAtFiB,YAwDhBC,EAAAC,CAAA,wBAAAC,EAAAC,0CAAAD,EAAAE,2ZADCzB,GACO,IAAA0B,EAAA1B"}
+{"version":3,"file":"component.js","sources":["../../src/web-components/progress/component.ts"],"sourcesContent":["import { attr, godown, isNullable, Ranger, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\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":"uQAMA,MAAM,UAAY,WAOlB,IAAA,SAAA,MA+CMA,UAAiB,WAAY,oCAEjC,IAAM,OAGN,IAAM,EAKI,QAA4B,CACpC,IAAIC,EAAQ,GACRC,EACJ,IAAK,WAAW,KAAK,MAAM,CAAE,CAC3B,IAAMC,EAAS,IAAI,OAAO,KAAK,IAAK,KAAK,KACnCC,GAAS,KAAK,MAAQ,KAAK,IAEjC,AADAH,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,EA/EA,WAgDE,SAAS,CAAE,KAAM,MAAQ,EAAC,AAAA,EAAA,SAAA,UAAA,aAAA,YAG1B,SAAS,CAAE,KAAM,MAAQ,EAAC,AAAA,EAAA,SAAA,UAAA,aAAA,YAG1B,SAAS,CAAE,KAAM,MAAQ,EAAC,AAAA,EAAA,SAAA,UAAA,eAAA,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"}

package/web-components/progress/definition.d.ts

@@ -1,8 +1,7 @@
 import Progress from "./component.js";
 export default Progress;
 declare global {
-    interface HTMLElementTagNameMap {
-        "godown-progress": Progress;
-    }
+	interface HTMLElementTagNameMap {
+		"godown-progress": Progress;
+	}
 }
-//# sourceMappingURL=definition.d.ts.map

package/web-components/progress/definition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"definition.d.ts","sourceRoot":"__source__/","sources":["web-components/progress/definition.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAItC,eAAe,QAAQ,CAAC;AAExB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,QAAQ,CAAC;KAC7B;CACF"}
+{"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"}

package/web-components/progress/definition.js

@@ -1,2 +1,2 @@
-import e from"./component.js";e.define();export{e as default};
+import Progress from"./component.js";Progress.define();export{Progress as default};
 //# sourceMappingURL=definition.js.map

package/web-components/progress/definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.js","sources":["../../src/web-components/progress/definition.ts"],"sourcesContent":null,"names":["Progress","define"],"mappings":"8BAEAA,EAASC"}
+{"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":"qCAEA,SAAS,QAAQ"}

package/web-components/range/component.d.ts

@@ -3,116 +3,115 @@ import { type TemplateResult } from "lit";
 import { SuperInput } from "../../internal/super-input.js";
 type RangeValue = number | number[];
 /**
- * {@linkcode Range} is similar to `<input type="range">`.
- *
- * Value accepts number, or array.
- *
- * Number has 1 handle, the array has the number of its elements.
- *
- * @fires range - Fires when the value changes.
- * @category input
- */
+* {@linkcode Range} is similar to `<input type="range">`.
+*
+* Value accepts number, or array.
+*
+* Number has 1 handle, the array has the number of its elements.
+*
+* @fires range - Fires when the value changes.
+* @category input
+*/
 declare class Range<V extends RangeValue = RangeValue> extends SuperInput<RangeValue> {
-    /**
-     * Minimum value.
-     */
-    min: number;
-    /**
-     * Maximum value.
-     */
-    max: number;
-    /**
-     * Sliding step length.
-     */
-    step: number;
-    /**
-     * Whether to display the range vertically.
-     */
-    vertical: boolean;
-    /**
-     * Value, or each of values, will render a handle.
-     *
-     * Accepts number or array of numbers.
-     */
-    value: V;
-    /**
-     * The default of `{@linkcode this.value}`.
-     */
-    default: V;
-    protected _root: HTMLElement;
-    protected _handles: NodeListOf<HTMLElement>;
-    lastFocus?: number;
-    protected _ranger: Ranger;
-    private __focusStack;
-    get range(): V extends number ? false : true;
-    /**
-     * Return values in the form of an array.
-     */
-    get rangeValue(): number[];
-    /**
-     * Pad the value to the specified length.
-     */
-    padValue(len: number, value?: number): number[];
-    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
-    get observedRecord(): Record<string, any>;
-    protected render(): TemplateResult<1>;
-    protected _renderHandle(index: number): TemplateResult<1>;
-    private __keydownEvent;
-    /**
-     * Focuses the handle at the given index, updates the focus stack.
-     * @param index - The index of the handle to focus.
-     */
-    focusHandle(index: number): void;
-    /**
-     * Removes the focus from the currently focused handle.
-     */
-    blurHandle(): void;
-    /**
-     * Creates a keydown event handler that updates the value of the range based on arrow key presses.
-     * @param index - The index of the handle to update.
-     * @returns A function that handles the keydown event and updates the range value.
-     */
-    protected createKeydownEvent(index: number): (e: KeyboardEvent) => void;
-    /**
-     * Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.
-     * @param index - The index of the handle to focus.
-     * @returns A function that handles the mouse down event and updates the range value.
-     */
-    protected createMouseDown(index: number): (e: MouseEvent) => void;
-    /**
-     * Creates a function that sets the value of the range at the given index.
-     * @param index - The index of the value to set.
-     * @returns A function that sets the value of the range.
-     */
-    protected createSetValue(index: number): (value: number) => void;
-    /**
-     * Compute value from event.
-     * @returns The value closest to the event client position.
-     */
-    protected _computeValue({ clientX, clientY }: MouseEvent): number;
-    /**
-     * Handles the mouse down event on the root element of the range component.
-     * Computes the closest value to the mouse position, sets the value, and focuses the corresponding handle.
-     * @param e - The mouse down event object.
-     */
-    protected _handleMousedownRoot(e: MouseEvent): void;
-    /**
-     * Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.
-     * @param index - The index of the handle to focus.
-     * @returns A function that handles the mouse down event and updates the range value.
-     */
-    protected createMousedownListener(mouseMoveCallback: (arg0: number) => void): (e: MouseEvent) => void;
-    /**
-     * Creates a mouse move event handler that updates the range value based on the mouse position.
-     * @param callback - A function to call with the new value when the mouse is moved.
-     * @returns A function that handles the mouse move event and updates the range value.
-     */
-    protected createMousemoveListener(callback: (newValue: number) => void): (e: MouseEvent) => void;
-    protected _connectedInit(): void;
-    reset(): void;
-    sort(): V;
-    toSorted(): V;
+	/**
+	* Minimum value.
+	*/
+	min: number;
+	/**
+	* Maximum value.
+	*/
+	max: number;
+	/**
+	* Sliding step length.
+	*/
+	step: number;
+	/**
+	* Whether to display the range vertically.
+	*/
+	vertical: boolean;
+	/**
+	* Value, or each of values, will render a handle.
+	*
+	* Accepts number or array of numbers.
+	*/
+	value: V;
+	/**
+	* The default of `{@linkcode this.value}`.
+	*/
+	default: V;
+	protected _root: HTMLElement;
+	protected _handles: NodeListOf<HTMLElement>;
+	lastFocus?: number;
+	protected _ranger: Ranger;
+	private __focusStack;
+	get range(): V extends number ? false : true;
+	/**
+	* Return values in the form of an array.
+	*/
+	get rangeValue(): number[];
+	/**
+	* Pad the value to the specified length.
+	*/
+	padValue(len: number, value?: number): number[];
+	attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+	get observedRecord(): Record<string, any>;
+	protected render(): TemplateResult<1>;
+	protected _renderHandle(index: number): TemplateResult<1>;
+	private __keydownEvent;
+	/**
+	* Focuses the handle at the given index, updates the focus stack.
+	* @param index - The index of the handle to focus.
+	*/
+	focusHandle(index: number): void;
+	/**
+	* Removes the focus from the currently focused handle.
+	*/
+	blurHandle(): void;
+	/**
+	* Creates a keydown event handler that updates the value of the range based on arrow key presses.
+	* @param index - The index of the handle to update.
+	* @returns A function that handles the keydown event and updates the range value.
+	*/
+	protected createKeydownEvent(index: number): (e: KeyboardEvent) => void;
+	/**
+	* Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.
+	* @param index - The index of the handle to focus.
+	* @returns A function that handles the mouse down event and updates the range value.
+	*/
+	protected createMouseDown(index: number): (e: MouseEvent) => void;
+	/**
+	* Creates a function that sets the value of the range at the given index.
+	* @param index - The index of the value to set.
+	* @returns A function that sets the value of the range.
+	*/
+	protected createSetValue(index: number): (value: number) => void;
+	/**
+	* Compute value from event.
+	* @returns The value closest to the event client position.
+	*/
+	protected _computeValue({ clientX, clientY }: MouseEvent): number;
+	/**
+	* Handles the mouse down event on the root element of the range component.
+	* Computes the closest value to the mouse position, sets the value, and focuses the corresponding handle.
+	* @param e - The mouse down event object.
+	*/
+	protected _handleMousedownRoot(e: MouseEvent): void;
+	/**
+	* Creates a mouse down event handler that focuses the handle at the given index and sets the value of the range.
+	* @param index - The index of the handle to focus.
+	* @returns A function that handles the mouse down event and updates the range value.
+	*/
+	protected createMousedownListener(mouseMoveCallback: (arg0: number) => void): (e: MouseEvent) => void;
+	/**
+	* Creates a mouse move event handler that updates the range value based on the mouse position.
+	* @param callback - A function to call with the new value when the mouse is moved.
+	* @returns A function that handles the mouse move event and updates the range value.
+	*/
+	protected createMousemoveListener(callback: (newValue: number) => void): (e: MouseEvent) => void;
+	protected _connectedInit(): void;
+	reset(): void;
+	sort(): V;
+	toSorted(): V;
 }
 export default Range;
 export { Range };
-//# sourceMappingURL=component.d.ts.map

package/web-components/range/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"__source__/","sources":["web-components/range/component.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,MAAM,EAEP,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,KAAK,cAAc,EAAa,MAAM,KAAK,CAAC;AAIrD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAM3D,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,EAAE,CAAC;AAEpC;;;;;;;;;GASG;AACH,cA0FM,KAAK,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,CAAE,SAAQ,UAAU,CAAC,UAAU,CAAC;IAC3E;;OAEG;IAEH,GAAG,SAAK;IAER;;OAEG;IAEH,GAAG,SAAO;IAEV;;OAEG;IAEH,IAAI,EAAE,MAAM,CAAC;IAEb;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,KAAK,EAAE,CAAC,CAAC;IAET;;OAEG;IAEH,OAAO,EAAE,CAAC,CAAC;IAGX,SAAS,CAAC,KAAK,EAAE,WAAW,CAAC;IAG7B,SAAS,CAAC,QAAQ,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAG5C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,YAAY,CAAgB;IAEpC,IAAI,KAAK,IAAI,CAAC,SAAS,MAAM,GAAG,KAAK,GAAG,IAAI,CAE3C;IAED;;OAEG;IACH,IAAI,UAAU,IAAI,MAAM,EAAE,CAEzB;IAED;;OAEG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,SAAI,GAAG,MAAM,EAAE;IAS1C,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAOvF,IAAI,cAAc,IAAI,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAExC;IAED,SAAS,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;IAyBrC,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC;IAkBzD,OAAO,CAAC,cAAc,CAAqC;IAE3D;;;OAGG;IACH,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAchC;;OAEG;IACH,UAAU,IAAI,IAAI;IAKlB;;;;OAIG;IACH,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,OAC7B,aAAa,KAAG,IAAI;IAgBjC;;;;OAIG;IACH,SAAS,CAAC,eAAe,CAAC,KAAK,EAAE,MAAM,OAC1B,UAAU,KAAG,IAAI;IAM9B;;;;OAIG;IACH,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,WACrB,MAAM,KAAG,IAAI;IAY9B;;;OAGG;IACH,SAAS,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,UAAU,GAAG,MAAM;IAKjE;;;;OAIG;IACH,SAAS,CAAC,oBAAoB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAenD;;;;OAIG;IACH,SAAS,CAAC,uBAAuB,CAAC,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,OAC9D,UAAU,KAAG,IAAI;IAa9B;;;;OAIG;IACH,SAAS,CAAC,uBAAuB,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,OACzD,UAAU,KAAG,IAAI;IAS9B,SAAS,CAAC,cAAc,IAAI,IAAI;IAchC,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,CAAC;IAIT,QAAQ,IAAI,CAAC;CAMd;AAED,eAAe,KAAK,CAAC;AACrB,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"mappings":"AAAA,SASE,cAEK,iBAAkB;AACzB,cAAc,sBAAiC,KAAM;AAIrD,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;CAyBnC,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;;;;;;CAoBlC,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 {\n  attr,\n  tokenList,\n  godown,\n  isNullable,\n  joinDeclarations,\n  loop,\n  queryPart,\n  styles,\n  Ranger,\n  omit,\n} from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property, queryAll, state } from \"lit/decorators.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  @queryPart(\"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=\"${joinDeclarations([\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        <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=\"${joinDeclarations({\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   * 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/web-components/range/component.js

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

package/web-components/range/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/web-components/range/component.ts"],"sourcesContent":null,"names":["protoName","cssScope","scopePrefix","Range","SuperInput","constructor","this","min","max","vertical","__focusStack","range","Array","isArray","value","rangeValue","padValue","len","miss","length","fill","concat","attributeChangedCallback","name","_old","super","_ranger","Ranger","step","observedRecord","omit","ringTypeAttribute","render","from","Math","to","gap","diff","html","attr","disabled","_handleMousedownRoot","joinDeclarations","map","index","loop","_renderHandle","end","lastFocus","splice","indexOfFocusStack","push","handleItem","_handles","item","focus","__keydownEvent","blurHandle","undefined","events","remove","document","e","key","preventDefault","createSetValue","old","focusHandle","createMousedownListener","newValue","normalizeValue","dispatchCustomEvent","_computeValue","clientX","clientY","top","left","height","width","_root","getBoundingClientRect","present","reduce","acc","abs","set","mouseMoveCallback","stopPropagation","move","createMousemoveListener","add","stop","callback","call","round","reset","default","sort","toSorted","a","b","type","Number","prototype","property","Boolean","reflect","__decorate","queryPart","queryAll","state","godown","styles","css","cssGlobalVars","active","passive","background","Range$1"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../src/web-components/range/component.ts"],"sourcesContent":["import {\n  attr,\n  tokenList,\n  godown,\n  isNullable,\n  joinDeclarations,\n  loop,\n  queryPart,\n  styles,\n  Ranger,\n  omit,\n} from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\nimport { property, queryAll, state } from \"lit/decorators.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  @queryPart(\"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=\"${joinDeclarations([\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        <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=\"${joinDeclarations({\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   * 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","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","a","b"],"mappings":"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"}

package/web-components/range/definition.d.ts

@@ -1,8 +1,7 @@
 import Range from "./component.js";
 export default Range;
 declare global {
-    interface HTMLElementTagNameMap {
-        "godown-range": Range;
-    }
+	interface HTMLElementTagNameMap {
+		"godown-range": Range;
+	}
 }
-//# sourceMappingURL=definition.d.ts.map

package/web-components/range/definition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"definition.d.ts","sourceRoot":"__source__/","sources":["web-components/range/definition.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,gBAAgB,CAAC;AAInC,eAAe,KAAK,CAAC;AAErB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,KAAK,CAAC;KACvB;CACF"}
+{"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"}

package/web-components/range/definition.js

@@ -1,2 +1,2 @@
-import e from"./component.js";e.define();export{e as default};
+import Range from"./component.js";Range.define();export{Range as default};
 //# sourceMappingURL=definition.js.map

package/web-components/range/definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.js","sources":["../../src/web-components/range/definition.ts"],"sourcesContent":null,"names":["Range","define"],"mappings":"8BAEAA,EAAMC"}
+{"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":"kCAEA,MAAM,QAAQ"}

package/web-components/rotate/component.d.ts

@@ -1,30 +1,29 @@
 import { type TemplateResult } from "lit";
 import { GlobalStyle } from "../../internal/global-style.js";
 /**
- * {@linkcode Rotate} Make child elements rotate.
- *
- * @category wrapper
- */
+* {@linkcode Rotate} Make child elements rotate.
+*
+* @category wrapper
+*/
 declare class Rotate extends GlobalStyle {
-    protected _root: HTMLElement;
-    protected render(): TemplateResult<1>;
-    reset(): void;
-    protected _handleRotate(e: MouseEvent): void;
-    /**
-     * Compute offset.
-     *
-     * @returns rotateX, rotateY
-     * @example
-     * ```ts
-     * const { rotateX, rotateY } = this._computeOffset(e);
-     * `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`;
-     * ```
-     */
-    protected _computeOffset(e: MouseEvent): {
-        rotateX: number;
-        rotateY: number;
-    };
+	protected _root: HTMLElement;
+	protected render(): TemplateResult<1>;
+	reset(): void;
+	protected _handleRotate(e: MouseEvent): void;
+	/**
+	* Compute offset.
+	*
+	* @returns rotateX, rotateY
+	* @example
+	* ```ts
+	* const { rotateX, rotateY } = this._computeOffset(e);
+	* `rotateX(${rotateX}rad) rotateY(${rotateY}rad)`;
+	* ```
+	*/
+	protected _computeOffset(e: MouseEvent): {
+		rotateX: number;
+		rotateY: number;
+	};
 }
 export default Rotate;
 export { Rotate };
-//# sourceMappingURL=component.d.ts.map

package/web-components/rotate/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"__source__/","sources":["web-components/rotate/component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,cAAc,EAAa,MAAM,KAAK,CAAC;AAErD,OAAO,EAAE,WAAW,EAAe,MAAM,gCAAgC,CAAC;AAK1E;;;;GAIG;AACH,cA6BM,MAAO,SAAQ,WAAW;IAE9B,SAAS,CAAC,KAAK,EAAE,WAAW,CAAC;IAE7B,SAAS,CAAC,MAAM,IAAI,cAAc,CAAC,CAAC,CAAC;IAcrC,KAAK,IAAI,IAAI;IAKb,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAM5C;;;;;;;;;OASG;IACH,SAAS,CAAC,cAAc,CAAC,CAAC,EAAE,UAAU,GAAG;QACvC,OAAO,EAAE,MAAM,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;KACjB;CAUF;AAED,eAAe,MAAM,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"mappings":"AACA,cAAc,sBAAiC,KAAM;AAErD,SAAS,mBAAgC,gCAAiC;;;;;;AAU1E,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, queryPart, styles } from \"@godown/element\";\nimport { type TemplateResult, css, html } from \"lit\";\n\nimport { GlobalStyle, scopePrefix } from \"../../internal/global-style.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  @queryPart(\"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/web-components/rotate/component.js

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