{"version":3,"file":"index.mjs","sources":["../../../../src/effects/attr/index.ts"],"sourcesContent":["import { camelToDash } from \"../../render/dom/utils/camel-to-dash\"\nimport { MotionValue } from \"../../value\"\nimport { numberValueTypes } from \"../../value/types/maps/number\"\nimport { getValueAsType } from \"../../value/types/utils/get-as-type\"\nimport { MotionValueState } from \"../MotionValueState\"\nimport { createSelectorEffect } from \"../utils/create-dom-effect\"\nimport { createEffect } from \"../utils/create-effect\"\n\nfunction canSetAsProperty(element: HTMLElement | SVGElement, name: string) {\n    if (!(name in element)) return false\n\n    const descriptor =\n        Object.getOwnPropertyDescriptor(Object.getPrototypeOf(element), name) ||\n        Object.getOwnPropertyDescriptor(element, name)\n\n    // Check if it has a setter\n    return descriptor && typeof descriptor.set === \"function\"\n}\n\n/**\n * `name` is the attribute written when it differs from the key the value\n * is stored under, e.g. `attrX` -> `x`. Numbers take the attribute's\n * default unit (`x: 100` -> `\"100px\"`), as they do when key and name match.\n */\nexport const addAttrValue = (\n    element: HTMLElement | SVGElement,\n    state: MotionValueState,\n    key: string,\n    value: MotionValue,\n    name: string = key\n) => {\n    const isProp = canSetAsProperty(element, name)\n    if (!isProp && (name.startsWith(\"data\") || name.startsWith(\"aria\"))) {\n        name = camelToDash(name)\n    }\n\n    const type = numberValueTypes[key] || numberValueTypes[name]\n\n    /**\n     * Set attribute directly via property if available\n     */\n    const render = isProp\n        ? () => {\n              ;(element as any)[name] = getValueAsType(\n                  value.get(),\n                  numberValueTypes[key]\n              )\n          }\n        : () => {\n              const v = getValueAsType(value.get(), type)\n              if (v === null || v === undefined) {\n                  element.removeAttribute(name)\n              } else {\n                  element.setAttribute(name, String(v))\n              }\n          }\n\n    return state.set(key, value, render)\n}\n\nexport const attrEffect = /*@__PURE__*/ createSelectorEffect(\n    /*@__PURE__*/ createEffect(addAttrValue)\n)\n"],"names":[],"mappings":";;;;;;AAQA,SAAS,gBAAgB,CAAC,OAAiC,EAAE,IAAY,EAAA;AACrE,IAAA,IAAI,EAAE,IAAI,IAAI,OAAO,CAAC;AAAE,QAAA,OAAO,KAAK;AAEpC,IAAA,MAAM,UAAU,GACZ,MAAM,CAAC,wBAAwB,CAAC,MAAM,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC;AACrE,QAAA,MAAM,CAAC,wBAAwB,CAAC,OAAO,EAAE,IAAI,CAAC;;IAGlD,OAAO,UAAU,IAAI,OAAO,UAAU,CAAC,GAAG,KAAK,UAAU;AAC7D;AAEA;;;;AAIG;AACI,MAAM,YAAY,GAAG,CACxB,OAAiC,EACjC,KAAuB,EACvB,GAAW,EACX,KAAkB,EAClB,IAAA,GAAe,GAAG,KAClB;IACA,MAAM,MAAM,GAAG,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC;AAC9C,IAAA,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE;AACjE,QAAA,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC;IAC5B;IAEA,MAAM,IAAI,GAAG,gBAAgB,CAAC,GAAG,CAAC,IAAI,gBAAgB,CAAC,IAAI,CAAC;AAE5D;;AAEG;IACH,MAAM,MAAM,GAAG;UACT,MAAK;AACC,YAAA,OAAe,CAAC,IAAI,CAAC,GAAG,cAAc,CACpC,KAAK,CAAC,GAAG,EAAE,EACX,gBAAgB,CAAC,GAAG,CAAC,CACxB;QACL;UACA,MAAK;YACD,MAAM,CAAC,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG,EAAE,EAAE,IAAI,CAAC;YAC3C,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,SAAS,EAAE;AAC/B,gBAAA,OAAO,CAAC,eAAe,CAAC,IAAI,CAAC;YACjC;iBAAO;gBACH,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;YACzC;AACJ,QAAA,CAAC;IAEP,OAAO,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,EAAE,MAAM,CAAC;AACxC;AAEO,MAAM,UAAU,iBAAiB,oBAAoB;AACxD,cAAc,YAAY,CAAC,YAAY,CAAC;;;;"}