godown 3.13.0 → 3.13.2

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

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../src/web-components/rotate/component.ts"],"sourcesContent":null,"names":["protoName","cssScope","scopePrefix","Rotate","GlobalStyle","render","html","this","_handleRotate","htmlSlot","reset","_root","style","removeProperty","e","setProperty","rotateX","rotateY","_computeOffset","__decorate","queryPart","prototype","godown","styles","css","Rotate$1"],"mappings":"uOAKA,MAAMA,EAAY,SACZC,EAAWC,EAAYF,GAoC7B,IAAMG,EAAN,MAAMA,eAAeC,EAIT,MAAAC,GACR,OAAOC,CAAI,kDAAAC,KAAAC,mBAAAC,8BAAAF,KAAAG,0EAISH,KAAAI,MAAAC,MAAAC,eAAkB,cAE9B,aAAAL,CAAAM,qDAEcP,KAAAI,MAAAC,MAAAG,YAAU,YAAA,WAAAC,iBAAAC,yDAgBlC,cAAAC,CAAAJ,0JAUUK,EAAA,CAIRC,EAAM,SACNjB,EAAAkB,UAAe,gBACflB,EAAAgB,EAAa,CACbG,EAAAtB,GAEAuB,EAAAC,CAAa,+FAAuCvB,8IAAAA,8BAAAA,yEACpDE,GACA,IAAAsB,EAAOtB"}
+{"version":3,"file":"component.js","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"],"names":["Rotate","e: MouseEvent","rotateX","rotateY","offsetX","clientX","left","offsetY","clientY","top","height","width"],"mappings":"yNAKA,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,CAEZ,AADA,KAAK,MAAM,MAAM,eAAe,YAAY,CAC5C,KAAK,MAAM,MAAM,eAAe,aAAa,AAC9C,CAES,cAAcC,EAAqB,CAC3C,GAAM,CAAE,UAAS,UAAS,CAAG,KAAK,eAAe,EAAE,CAEnD,AADA,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,IAAYK,EAAUG,EAAS,GAAKA,EAAS,EAC7CP,GAAWC,EAAUO,EAAQ,GAAKA,EAAQ,EAChD,MAAO,CAAE,UAAS,SAAS,CAC5B,CACF,EAjFA,AA8BE,UAAA,CAAA,UAAU,OAAO,AAAA,EAAA,OAAA,UAAA,eAAA,CA9BnB,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"}

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

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

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

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

package/web-components/rotate/definition.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"definition.js","sources":["../../src/web-components/rotate/definition.ts"],"sourcesContent":null,"names":["Rotate","define"],"mappings":"8BAEAA,EAAOC"}
+{"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":"mCAEA,OAAO,QAAQ"}

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

@@ -1,116 +1,115 @@
-import { RouteTree } from "@godown/element";
+import { Router as Mux } from "@godown/element";
 import { type PropertyValueMap, type TemplateResult } from "lit";
 import { GlobalStyle } from "../../internal/global-style.js";
 interface RouteState {
-    pathname: string;
-    params: Record<string, string>;
-    path: string;
+	pathname: string;
+	params: Record<string, string>;
+	path: string;
 }
 interface RouteResult extends RouteState {
-    component: unknown;
+	component: unknown;
 }
 interface RouteItem {
-    [key: PropertyKey]: unknown;
-    path: string;
-    render?: (state?: RouteState) => unknown;
-    component?: unknown;
+	[key: PropertyKey]: unknown;
+	path: string;
+	render?: (state?: RouteState) => unknown;
+	component?: unknown;
 }
 declare const routerTypes: {
-    readonly field: "field";
-    readonly slotted: "slotted";
-    readonly united: "united";
+	readonly field: "field";
+	readonly slotted: "slotted";
+	readonly united: "united";
 };
 type RouterType = keyof typeof routerTypes;
 /**
- * {@linkcode Router} has basic routing control.
- *
- * To switch routes, use `router-link component`.
- *
- * It has two methods to collect routes.
- *
- * 1. From field `routes`, an array, each elements require "path".
- * 2. From child elements, which have the slot attribute for matching routes.
- *
- * If only the method 1 is used, set `type` to `"field"`.
- *
- * If only the method 2 is used, set `type` to `"slotted"`.
- *
- * `type` defaults to `"united"`, which will try method 1, then method 2.
- *
- * If no routes are matched, the default value (no named slot) will be rendered.
- *
- * @slot - Display slot when there is no match.
- * @slot * - Matching slot will be displayed.
- * @category navigation
- */
+* {@linkcode Router} has basic routing control.
+*
+* To switch routes, use `router-link component`.
+*
+* It has two methods to collect routes.
+*
+* 1. From field `routes`, an array, each elements require "path".
+* 2. From child elements, which have the slot attribute for matching routes.
+*
+* If only the method 1 is used, set `type` to `"field"`.
+*
+* If only the method 2 is used, set `type` to `"slotted"`.
+*
+* `type` defaults to `"united"`, which will try method 1, then method 2.
+*
+* If no routes are matched, the default value (no named slot) will be rendered.
+*
+* @slot - Display slot when there is no match.
+* @slot * - Matching slot will be displayed.
+* @category navigation
+*/
 declare class Router extends GlobalStyle {
-    static routerInstances: Set<Router>;
-    private __fieldRouteTree;
-    private __slottedRouteTree;
-    private __cacheRecord;
-    private __routes;
-    /**
-     * Render result.
-     */
-    component: unknown | TemplateResult;
-    /**
-     * Dynamic parameters record.
-     */
-    get params(): Record<string, string>;
-    /**
-     * Value of matched path in routes.
-     */
-    path?: string;
-    /**
-     * Current pathname (equals to location.pathname).
-     */
-    pathname: string;
-    /**
-     * Rendered content when there is no match.
-     */
-    default: TemplateResult;
-    /**
-     * The type of routing sources.
-     *
-     * If field, it won't collect the slot attribute of the child elements.
-     *
-     * This property should not be changed after the rendering is complete.
-     */
-    type: RouterType;
-    /**
-     * Cache accessed records.
-     *
-     * Emptied at each re-collection.
-     */
-    cache: boolean;
-    set routes(value: RouteItem[]);
-    get routes(): RouteItem[];
-    clear(): void;
-    protected render(): unknown;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    useRouter(): RouteResult;
-    protected updated(changedProperties: PropertyValueMap<this>): void;
-    /**
-     * Get component from {@linkcode routes} by query.
-     */
-    fieldComponent(query?: string): unknown;
-    /**
-     * Get component from slotted elements by query.
-     */
-    slottedComponent(query?: string): TemplateResult<1>;
-    /**
-     * Reset the route tree, clear cache, collect routes from child elements.
-     */
-    collectSlottedRoutes(): void;
-    /**
-     * Reset the route tree, clear cache, collect routes from value.
-     */
-    collectFieldRoutes(value: typeof this.routes): void;
-    static updateAll(): void;
-    search(pathname: string): RouteTree;
-    handlePopstate: () => void;
+	static routerInstances: Set<Router>;
+	private __fieldRoute;
+	private __slottedRoute;
+	private __cacheRecord;
+	private __routes;
+	/**
+	* Render result.
+	*/
+	component: unknown | TemplateResult;
+	/**
+	* Dynamic parameters record.
+	*/
+	get params(): Record<string, string>;
+	/**
+	* Value of matched path in routes.
+	*/
+	path?: string;
+	/**
+	* Current pathname (equals to location.pathname).
+	*/
+	pathname: string;
+	/**
+	* Rendered content when there is no match.
+	*/
+	default: TemplateResult;
+	/**
+	* The type of routing sources.
+	*
+	* If field, it won't collect the slot attribute of the child elements.
+	*
+	* This property should not be changed after the rendering is complete.
+	*/
+	type: RouterType;
+	/**
+	* Cache accessed records.
+	*
+	* Emptied at each re-collection.
+	*/
+	cache: boolean;
+	set routes(value: RouteItem[]);
+	get routes(): RouteItem[];
+	clear(): void;
+	protected render(): unknown;
+	connectedCallback(): void;
+	disconnectedCallback(): void;
+	useRouter(): RouteResult;
+	protected updated(changedProperties: PropertyValueMap<this>): void;
+	/**
+	* Get component from {@linkcode routes} by query.
+	*/
+	fieldComponent(query?: string): unknown;
+	/**
+	* Get component from slotted elements by query.
+	*/
+	slottedComponent(query?: string): TemplateResult<1>;
+	/**
+	* Reset the route tree, clear cache, collect routes from child elements.
+	*/
+	collectSlottedRoutes(): void;
+	/**
+	* Reset the route tree, clear cache, collect routes from value.
+	*/
+	collectFieldRoutes(value: typeof this.routes): void;
+	static updateAll(): void;
+	search(pathname: string): Mux;
+	handlePopstate: () => void;
 }
 export default Router;
 export { Router };
-//# sourceMappingURL=component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"__source__/","sources":["web-components/router/component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkC,MAAM,iBAAiB,CAAC;AAC5E,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,cAAc,EAAO,MAAM,KAAK,CAAC;AAGtE,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAE7D,UAAU,UAAU;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,IAAI,EAAE,MAAM,CAAC;CACd;AAED,UAAU,WAAY,SAAQ,UAAU;IACtC,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,SAAS;IACjB,CAAC,GAAG,EAAE,WAAW,GAAG,OAAO,CAAC;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,UAAU,KAAK,OAAO,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,WAAW;;;;CAIP,CAAC;AAEX,KAAK,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAI3C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,cAMM,MAAO,SAAQ,WAAW;IAC9B,MAAM,CAAC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAqB;IAExD,OAAO,CAAC,gBAAgB,CAA8B;IACtD,OAAO,CAAC,kBAAkB,CAA8B;IACxD,OAAO,CAAC,aAAa,CAAkC;IACvD,OAAO,CAAC,QAAQ,CAAc;IAE9B;;OAEG;IAEH,SAAS,EAAE,OAAO,GAAG,cAAc,CAAQ;IAE3C;;OAEG;IACH,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAKnC;IAED;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,QAAQ,EAAE,MAAM,CAAqB;IAErC;;OAEG;IAEH,OAAO,EAAE,cAAc,CAAc;IAErC;;;;;;OAMG;IAEH,IAAI,EAAE,UAAU,CAAsB;IAEtC;;;;OAIG;IAEH,KAAK,UAAS;IAEd,IACI,MAAM,CAAC,KAAK,EAKF,SAAS,EAAE,AALT,EAGf;IAED,IAAI,MAAM,IAAI,SAAS,EAAE,CAExB;IAED,KAAK,IAAI,IAAI;IAIb,SAAS,CAAC,MAAM,IAAI,OAAO;IAsB3B,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;IAK5B,SAAS,IAAI,WAAW;IASxB,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;IAWlE;;OAEG;IACH,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO;IAoBvC;;OAEG;IACH,gBAAgB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC,CAAC,CAAC;IAiBnD;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAQ5B;;OAEG;IACH,kBAAkB,CAAC,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,GAAG,IAAI;IAQnD,MAAM,CAAC,SAAS,IAAI,IAAI;IAMxB,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS;IAInC,cAAc,EAAE,MAAM,IAAI,CAEvB;CACJ;AAED,eAAe,MAAM,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"mappings":"AAAA,SAAS,UAAU,WAAwD,iBAAkB;AAC7F,cAAc,uBAAuB,sBAA2B,KAAM;AAGtE,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,IAAI,UAAU;;;;CAUd,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;;;;CAuBf,iBAAiBA,iBAAiB,eAAe;;;;CAoBjD;;;;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 { Router as Mux, godown, htmlSlot, omit, parseParams, styles } from \"@godown/element\";\nimport { type PropertyValueMap, type TemplateResult, css } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\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  get params(): Record<string, string> {\n    if (!this.path) {\n      return {};\n    }\n    return parseParams(this.pathname, this.path);\n  }\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    query ||= this.__fieldRoute.search(this.pathname)?.pattern;\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    query ||= this.__slottedRoute.search(this.pathname)?.pattern;\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/web-components/router/component.js

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