primevue 4.1.1 → 4.2.0

package/imagecompare/ImageCompare.vue

@@ -12,12 +12,44 @@ import BaseImageCompare from './BaseImageCompare.vue';
 export default {
     name: 'ImageCompare',
     extends: BaseImageCompare,
+    mutationObserver: null,
+    data() {
+        return {
+            isRTL: false
+        };
+    },
+    beforeUnmount() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    },
+    mounted() {
+        this.updateDirection();
+        this.observeDirectionChanges();
+    },
     methods: {
         onSlide(event) {
             const value = event.target.value;
             const image = event.target.previousElementSibling;
 
-            image.style.clipPath = 'polygon(0 0,' + value + '% 0,' + value + '% 100%, 0 100%)';
+            if (this.isRTL) {
+                image.style.clipPath = `polygon(${100 - value}% 0, 100% 0, 100% 100%, ${100 - value}% 100%)`;
+            } else {
+                image.style.clipPath = `polygon(0 0, ${value}% 0, ${value}% 100%, 0 100%)`;
+            }
+        },
+        updateDirection() {
+            this.isRTL = !!this.$el.closest('[dir="rtl"]');
+        },
+        observeDirectionChanges() {
+            const targetNode = document.documentElement;
+            const config = { attributes: true, attributeFilter: ['dir'] };
+
+            this.mutationObserver = new MutationObserver(() => {
+                this.updateDirection();
+            });
+
+            this.mutationObserver.observe(targetNode, config);
         }
     }
 };

package/imagecompare/index.mjs

@@ -31,11 +31,45 @@ var script$1 = {
 var script = {
   name: 'ImageCompare',
   "extends": script$1,
+  mutationObserver: null,
+  data: function data() {
+    return {
+      isRTL: false
+    };
+  },
+  beforeUnmount: function beforeUnmount() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+  },
+  mounted: function mounted() {
+    this.updateDirection();
+    this.observeDirectionChanges();
+  },
   methods: {
     onSlide: function onSlide(event) {
       var value = event.target.value;
       var image = event.target.previousElementSibling;
-      image.style.clipPath = 'polygon(0 0,' + value + '% 0,' + value + '% 100%, 0 100%)';
+      if (this.isRTL) {
+        image.style.clipPath = "polygon(".concat(100 - value, "% 0, 100% 0, 100% 100%, ").concat(100 - value, "% 100%)");
+      } else {
+        image.style.clipPath = "polygon(0 0, ".concat(value, "% 0, ").concat(value, "% 100%, 0 100%)");
+      }
+    },
+    updateDirection: function updateDirection() {
+      this.isRTL = !!this.$el.closest('[dir="rtl"]');
+    },
+    observeDirectionChanges: function observeDirectionChanges() {
+      var _this = this;
+      var targetNode = document.documentElement;
+      var config = {
+        attributes: true,
+        attributeFilter: ['dir']
+      };
+      this.mutationObserver = new MutationObserver(function () {
+        _this.updateDirection();
+      });
+      this.mutationObserver.observe(targetNode, config);
     }
   }
 };

package/imagecompare/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/imagecompare/BaseImageCompare.vue","../../src/imagecompare/ImageCompare.vue","../../src/imagecompare/ImageCompare.vue?vue&type=template&id=24903c0a&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport ImageCompareStyle from 'primevue/imagecompare/style';\n\nexport default {\n    name: 'BaseImageCompare',\n    extends: BaseComponent,\n    props: {\n        tabindex: {\n            type: Number,\n            default: 0\n        },\n        ariaLabelledby: {\n            type: String,\n            default: null\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        }\n    },\n    style: ImageCompareStyle,\n    provide() {\n        return {\n            $pcImageCompare: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <slot name=\"left\"></slot>\n        <slot name=\"right\"></slot>\n        <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" @input=\"onSlide\" :class=\"cx('slider')\" v-bind=\"ptm('slider')\" />\n    </div>\n</template>\n\n<script>\nimport BaseImageCompare from './BaseImageCompare.vue';\n\nexport default {\n    name: 'ImageCompare',\n    extends: BaseImageCompare,\n    methods: {\n        onSlide(event) {\n            const value = event.target.value;\n            const image = event.target.previousElementSibling;\n\n            image.style.clipPath = 'polygon(0 0,' + value + '% 0,' + value + '% 100%, 0 100%)';\n        }\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <slot name=\"left\"></slot>\n        <slot name=\"right\"></slot>\n        <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" @input=\"onSlide\" :class=\"cx('slider')\" v-bind=\"ptm('slider')\" />\n    </div>\n</template>\n\n<script>\nimport BaseImageCompare from './BaseImageCompare.vue';\n\nexport default {\n    name: 'ImageCompare',\n    extends: BaseImageCompare,\n    methods: {\n        onSlide(event) {\n            const value = event.target.value;\n            const image = event.target.previousElementSibling;\n\n            image.style.clipPath = 'polygon(0 0,' + value + '% 0,' + value + '% 100%, 0 100%)';\n        }\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","tabindex","type","Number","ariaLabelledby","String","ariaLabel","style","ImageCompareStyle","provide","$pcImageCompare","$parentInstance","BaseImageCompare","methods","onSlide","event","value","target","image","previousElementSibling","clipPath","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","ptmi","_renderSlot","$slots","_createElementVNode","min","max","onInput","$options","apply","arguments","ptm"],"mappings":";;;;AAIA,eAAe;AACXA,EAAAA,IAAI,EAAE,kBAAkB;AACxB,EAAA,SAAA,EAASC,aAAa;AACtBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,QAAQ,EAAE;AACNC,MAAAA,IAAI,EAAEC,MAAM;MACZ,SAAS,EAAA,CAAA;KACZ;AACDC,IAAAA,cAAc,EAAE;AACZF,MAAAA,IAAI,EAAEG,MAAM;MACZ,SAAS,EAAA,IAAA;KACZ;AACDC,IAAAA,SAAS,EAAE;AACPJ,MAAAA,IAAI,EAAEG,MAAM;MACZ,SAAS,EAAA,IAAA;AACb,KAAA;GACH;AACDE,EAAAA,KAAK,EAAEC,iBAAiB;EACxBC,OAAO,EAAA,SAAPA,OAAOA,GAAG;IACN,OAAO;AACHC,MAAAA,eAAe,EAAE,IAAI;AACrBC,MAAAA,eAAe,EAAE,IAAA;KACpB,CAAA;AACL,GAAA;AACJ,CAAC;;ACjBD,aAAe;AACXb,EAAAA,IAAI,EAAE,cAAc;AACpB,EAAA,SAAA,EAASc,QAAgB;AACzBC,EAAAA,OAAO,EAAE;AACLC,IAAAA,OAAO,EAAPA,SAAAA,OAAOA,CAACC,KAAK,EAAE;AACX,MAAA,IAAMC,KAAI,GAAID,KAAK,CAACE,MAAM,CAACD,KAAK,CAAA;AAChC,MAAA,IAAME,KAAM,GAAEH,KAAK,CAACE,MAAM,CAACE,sBAAsB,CAAA;AAEjDD,MAAAA,KAAK,CAACX,KAAK,CAACa,QAAO,GAAI,cAAe,GAAEJ,KAAM,GAAE,MAAO,GAAEA,KAAI,GAAI,iBAAiB,CAAA;AACtF,KAAA;AACJ,GAAA;AACJ,CAAC;;;ECrBG,OAAAK,SAAA,EAAA,EAAAC,kBAAA,CAIK,OAJLC,UAIK,CAAA;AAJC,IAAA,OAAA,EAAOC,IAAE,CAAAC,EAAA,CAAA,MAAA,CAAA;KAAkBD,IAAI,CAAAE,IAAA,CAAA,MAAA,CAAA,CAAA,EAAA,CACjCC,UAAwB,CAAAH,IAAA,CAAAI,MAAA,EAAA,MAAA,CAAA,EACxBD,UAAyB,CAAAH,IAAA,CAAAI,MAAA,EAAA,OAAA,CAAA,EACzBC,kBAAA,CAAgH,SAAhHN,UAAgH,CAAA;AAAzGrB,IAAAA,IAAI,EAAC,OAAM;AAAE4B,IAAAA,GAAG,EAAC,GAAE;AAAEC,IAAAA,GAAG,EAAC,KAAI;AAAEf,IAAAA,KAAK,EAAC,IAAK;IAACgB,OAAK;aAAEC,QAAO,CAAAnB,OAAA,IAAAmB,QAAA,CAAAnB,OAAA,CAAAoB,KAAA,CAAAD,QAAA,EAAAE,SAAA,CAAA,CAAA;AAAA,KAAA,CAAA;AAAG,IAAA,OAAA,EAAOX,IAAE,CAAAC,EAAA,CAAA,QAAA,CAAA;KAAoBD,IAAG,CAAAY,GAAA,CAAA,QAAA,CAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/imagecompare/BaseImageCompare.vue","../../src/imagecompare/ImageCompare.vue","../../src/imagecompare/ImageCompare.vue?vue&type=template&id=7e6a8988&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport ImageCompareStyle from 'primevue/imagecompare/style';\n\nexport default {\n    name: 'BaseImageCompare',\n    extends: BaseComponent,\n    props: {\n        tabindex: {\n            type: Number,\n            default: 0\n        },\n        ariaLabelledby: {\n            type: String,\n            default: null\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        }\n    },\n    style: ImageCompareStyle,\n    provide() {\n        return {\n            $pcImageCompare: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <slot name=\"left\"></slot>\n        <slot name=\"right\"></slot>\n        <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" @input=\"onSlide\" :class=\"cx('slider')\" v-bind=\"ptm('slider')\" />\n    </div>\n</template>\n\n<script>\nimport BaseImageCompare from './BaseImageCompare.vue';\n\nexport default {\n    name: 'ImageCompare',\n    extends: BaseImageCompare,\n    mutationObserver: null,\n    data() {\n        return {\n            isRTL: false\n        };\n    },\n    beforeUnmount() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n        }\n    },\n    mounted() {\n        this.updateDirection();\n        this.observeDirectionChanges();\n    },\n    methods: {\n        onSlide(event) {\n            const value = event.target.value;\n            const image = event.target.previousElementSibling;\n\n            if (this.isRTL) {\n                image.style.clipPath = `polygon(${100 - value}% 0, 100% 0, 100% 100%, ${100 - value}% 100%)`;\n            } else {\n                image.style.clipPath = `polygon(0 0, ${value}% 0, ${value}% 100%, 0 100%)`;\n            }\n        },\n        updateDirection() {\n            this.isRTL = !!this.$el.closest('[dir=\"rtl\"]');\n        },\n        observeDirectionChanges() {\n            const targetNode = document.documentElement;\n            const config = { attributes: true, attributeFilter: ['dir'] };\n\n            this.mutationObserver = new MutationObserver(() => {\n                this.updateDirection();\n            });\n\n            this.mutationObserver.observe(targetNode, config);\n        }\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <slot name=\"left\"></slot>\n        <slot name=\"right\"></slot>\n        <input type=\"range\" min=\"0\" max=\"100\" value=\"50\" @input=\"onSlide\" :class=\"cx('slider')\" v-bind=\"ptm('slider')\" />\n    </div>\n</template>\n\n<script>\nimport BaseImageCompare from './BaseImageCompare.vue';\n\nexport default {\n    name: 'ImageCompare',\n    extends: BaseImageCompare,\n    mutationObserver: null,\n    data() {\n        return {\n            isRTL: false\n        };\n    },\n    beforeUnmount() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n        }\n    },\n    mounted() {\n        this.updateDirection();\n        this.observeDirectionChanges();\n    },\n    methods: {\n        onSlide(event) {\n            const value = event.target.value;\n            const image = event.target.previousElementSibling;\n\n            if (this.isRTL) {\n                image.style.clipPath = `polygon(${100 - value}% 0, 100% 0, 100% 100%, ${100 - value}% 100%)`;\n            } else {\n                image.style.clipPath = `polygon(0 0, ${value}% 0, ${value}% 100%, 0 100%)`;\n            }\n        },\n        updateDirection() {\n            this.isRTL = !!this.$el.closest('[dir=\"rtl\"]');\n        },\n        observeDirectionChanges() {\n            const targetNode = document.documentElement;\n            const config = { attributes: true, attributeFilter: ['dir'] };\n\n            this.mutationObserver = new MutationObserver(() => {\n                this.updateDirection();\n            });\n\n            this.mutationObserver.observe(targetNode, config);\n        }\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","tabindex","type","Number","ariaLabelledby","String","ariaLabel","style","ImageCompareStyle","provide","$pcImageCompare","$parentInstance","BaseImageCompare","mutationObserver","data","isRTL","beforeUnmount","disconnect","mounted","updateDirection","observeDirectionChanges","methods","onSlide","event","value","target","image","previousElementSibling","clipPath","concat","$el","closest","_this","targetNode","document","documentElement","config","attributes","attributeFilter","MutationObserver","observe","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","ptmi","_renderSlot","$slots","_createElementVNode","min","max","onInput","$options","apply","arguments","ptm"],"mappings":"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"}

package/imagecompare/style/index.mjs

@@ -2,7 +2,7 @@ import BaseStyle from '@primevue/core/base/style';
 
 var theme = function theme(_ref) {
   var dt = _ref.dt;
-  return "\n.p-imagecompare {\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    aspect-ratio: 16 / 9;\n}\n\n.p-imagecompare img {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n}\n\n.p-imagecompare img + img {\n    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);\n}\n\n.p-imagecompare-slider {\n    position: relative;\n    -webkit-appearance: none;\n    width: calc(100% + ".concat(dt('imagecompare.handle.size'), ");\n    height: 100%;\n    margin-left: calc(-1 * calc(").concat(dt('imagecompare.handle.size'), " / 2));\n    background-color: transparent;\n    outline: none;\n    transition: all ").concat(dt('imagecompare.handle.transition.duration'), ";\n}\n\n.p-imagecompare-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: ").concat(dt('imagecompare.handle.size'), ";\n    width: ").concat(dt('imagecompare.handle.size'), ";\n    background: ").concat(dt('imagecompare.handle.background'), ";\n    border: ").concat(dt('imagecompare.handle.border.width'), " solid ").concat(dt('imagecompare.handle.border.color'), ";\n    border-radius: ").concat(dt('imagecompare.handle.border.radius'), ";\n    background-size: contain;\n    cursor: ew-resize;\n    transition: all ").concat(dt('imagecompare.handle.transition.duration'), ";\n}\n\n.p-imagecompare-slider::-moz-range-thumb {\n    height: ").concat(dt('imagecompare.handle.size'), ";\n    width: ").concat(dt('imagecompare.handle.size'), ";\n    background: ").concat(dt('imagecompare.handle.background'), ";\n    border: ").concat(dt('imagecompare.handle.border.width'), " ").concat(dt('imagecompare.handle.border.style'), " ").concat(dt('imagecompare.handle.border.color'), ";\n    border-radius: ").concat(dt('imagecompare.handle.border.radius'), ";\n    background-size: contain;\n    cursor: ew-resize;\n}\n\n.p-imagecompare-slider:focus-visible::-webkit-slider-thumb {\n    box-shadow: ").concat(dt('imagecompare.handle.focus.ring.shadow'), ";\n    outline: ").concat(dt('imagecompare.handle.focus.ring.width'), " ").concat(dt('imagecompare.handle.focus.ring.style'), " ").concat(dt('imagecompare.handle.focus.ring.color'), ";\n    outline-offset: ").concat(dt('imagecompare.handle.focus.ring.offset'), ";\n}\n\n.p-imagecompare-slider:focus-visible::-moz-range-thumb {\n    box-shadow: ").concat(dt('imagecompare.handle.focus.ring.shadow'), ";\n    outline: ").concat(dt('imagecompare.handle.focus.ring.width'), " ").concat(dt('imagecompare.handle.focus.ring.style'), " ").concat(dt('imagecompare.handle.focus.ring.color'), ";\n    outline-offset: ").concat(dt('imagecompare.handle.focus.ring.offset'), ";\n}\n    \n.p-imagecompare-slider:hover {\n    width: calc(100% + ").concat(dt('imagecompare.handle.hover.size'), ");\n    margin-left: calc(-1 * calc(").concat(dt('imagecompare.handle.hover.size'), " / 2));\n}\n\n.p-imagecompare-slider:hover::-webkit-slider-thumb {\n    background: ").concat(dt('imagecompare.handle.hover.background'), ";\n    border-color: ").concat(dt('imagecompare.handle.hover.border.color'), ";\n    height: ").concat(dt('imagecompare.handle.hover.size'), ";\n    width: ").concat(dt('imagecompare.handle.hover.size'), ";\n}\n\n.p-imagecompare-slider:hover::-moz-range-thumb {\n    background: ").concat(dt('imagecompare.handle.hover.background'), ";\n    border-color: ").concat(dt('imagecompare.handle.hover.border.color'), ";\n    height: ").concat(dt('imagecompare.handle.hover.size'), ";\n    width: ").concat(dt('imagecompare.handle.hover.size'), ";\n}\n");
+  return "\n.p-imagecompare {\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    aspect-ratio: 16 / 9;\n}\n\n.p-imagecompare img {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n}\n\n.p-imagecompare img + img {\n    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);\n}\n\n.p-imagecompare:dir(rtl) img + img {\n    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);\n}\n\n.p-imagecompare-slider {\n    position: relative;\n    -webkit-appearance: none;\n    width: calc(100% + ".concat(dt('imagecompare.handle.size'), ");\n    height: 100%;\n    margin-inline-start: calc(-1 * calc(").concat(dt('imagecompare.handle.size'), " / 2));\n    background-color: transparent;\n    outline: none;\n    transition: all ").concat(dt('imagecompare.handle.transition.duration'), ";\n}\n\n.p-imagecompare-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: ").concat(dt('imagecompare.handle.size'), ";\n    width: ").concat(dt('imagecompare.handle.size'), ";\n    background: ").concat(dt('imagecompare.handle.background'), ";\n    border: ").concat(dt('imagecompare.handle.border.width'), " solid ").concat(dt('imagecompare.handle.border.color'), ";\n    border-radius: ").concat(dt('imagecompare.handle.border.radius'), ";\n    background-size: contain;\n    cursor: ew-resize;\n    transition: all ").concat(dt('imagecompare.handle.transition.duration'), ";\n}\n\n.p-imagecompare-slider::-moz-range-thumb {\n    height: ").concat(dt('imagecompare.handle.size'), ";\n    width: ").concat(dt('imagecompare.handle.size'), ";\n    background: ").concat(dt('imagecompare.handle.background'), ";\n    border: ").concat(dt('imagecompare.handle.border.width'), " ").concat(dt('imagecompare.handle.border.style'), " ").concat(dt('imagecompare.handle.border.color'), ";\n    border-radius: ").concat(dt('imagecompare.handle.border.radius'), ";\n    background-size: contain;\n    cursor: ew-resize;\n}\n\n.p-imagecompare-slider:focus-visible::-webkit-slider-thumb {\n    box-shadow: ").concat(dt('imagecompare.handle.focus.ring.shadow'), ";\n    outline: ").concat(dt('imagecompare.handle.focus.ring.width'), " ").concat(dt('imagecompare.handle.focus.ring.style'), " ").concat(dt('imagecompare.handle.focus.ring.color'), ";\n    outline-offset: ").concat(dt('imagecompare.handle.focus.ring.offset'), ";\n}\n\n.p-imagecompare-slider:focus-visible::-moz-range-thumb {\n    box-shadow: ").concat(dt('imagecompare.handle.focus.ring.shadow'), ";\n    outline: ").concat(dt('imagecompare.handle.focus.ring.width'), " ").concat(dt('imagecompare.handle.focus.ring.style'), " ").concat(dt('imagecompare.handle.focus.ring.color'), ";\n    outline-offset: ").concat(dt('imagecompare.handle.focus.ring.offset'), ";\n}\n\n.p-imagecompare-slider:hover {\n    width: calc(100% + ").concat(dt('imagecompare.handle.hover.size'), ");\n    margin-inline-start: calc(-1 * calc(").concat(dt('imagecompare.handle.hover.size'), " / 2));\n}\n\n.p-imagecompare-slider:hover::-webkit-slider-thumb {\n    background: ").concat(dt('imagecompare.handle.hover.background'), ";\n    border-color: ").concat(dt('imagecompare.handle.hover.border.color'), ";\n    height: ").concat(dt('imagecompare.handle.hover.size'), ";\n    width: ").concat(dt('imagecompare.handle.hover.size'), ";\n}\n\n.p-imagecompare-slider:hover::-moz-range-thumb {\n    background: ").concat(dt('imagecompare.handle.hover.background'), ";\n    border-color: ").concat(dt('imagecompare.handle.hover.border.color'), ";\n    height: ").concat(dt('imagecompare.handle.hover.size'), ";\n    width: ").concat(dt('imagecompare.handle.hover.size'), ";\n}\n");
 };
 var classes = {
   root: 'p-imagecompare',

package/imagecompare/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/imagecompare/style/ImageCompareStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-imagecompare {\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    aspect-ratio: 16 / 9;\n}\n\n.p-imagecompare img {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n}\n\n.p-imagecompare img + img {\n    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);\n}\n\n.p-imagecompare-slider {\n    position: relative;\n    -webkit-appearance: none;\n    width: calc(100% + ${dt('imagecompare.handle.size')});\n    height: 100%;\n    margin-left: calc(-1 * calc(${dt('imagecompare.handle.size')} / 2));\n    background-color: transparent;\n    outline: none;\n    transition: all ${dt('imagecompare.handle.transition.duration')};\n}\n\n.p-imagecompare-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: ${dt('imagecompare.handle.size')};\n    width: ${dt('imagecompare.handle.size')};\n    background: ${dt('imagecompare.handle.background')};\n    border: ${dt('imagecompare.handle.border.width')} solid ${dt('imagecompare.handle.border.color')};\n    border-radius: ${dt('imagecompare.handle.border.radius')};\n    background-size: contain;\n    cursor: ew-resize;\n    transition: all ${dt('imagecompare.handle.transition.duration')};\n}\n\n.p-imagecompare-slider::-moz-range-thumb {\n    height: ${dt('imagecompare.handle.size')};\n    width: ${dt('imagecompare.handle.size')};\n    background: ${dt('imagecompare.handle.background')};\n    border: ${dt('imagecompare.handle.border.width')} ${dt('imagecompare.handle.border.style')} ${dt('imagecompare.handle.border.color')};\n    border-radius: ${dt('imagecompare.handle.border.radius')};\n    background-size: contain;\n    cursor: ew-resize;\n}\n\n.p-imagecompare-slider:focus-visible::-webkit-slider-thumb {\n    box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};\n    outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};\n    outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};\n}\n\n.p-imagecompare-slider:focus-visible::-moz-range-thumb {\n    box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};\n    outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};\n    outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};\n}\n    \n.p-imagecompare-slider:hover {\n    width: calc(100% + ${dt('imagecompare.handle.hover.size')});\n    margin-left: calc(-1 * calc(${dt('imagecompare.handle.hover.size')} / 2));\n}\n\n.p-imagecompare-slider:hover::-webkit-slider-thumb {\n    background: ${dt('imagecompare.handle.hover.background')};\n    border-color: ${dt('imagecompare.handle.hover.border.color')};\n    height: ${dt('imagecompare.handle.hover.size')};\n    width: ${dt('imagecompare.handle.hover.size')};\n}\n\n.p-imagecompare-slider:hover::-moz-range-thumb {\n    background: ${dt('imagecompare.handle.hover.background')};\n    border-color: ${dt('imagecompare.handle.hover.border.color')};\n    height: ${dt('imagecompare.handle.hover.size')};\n    width: ${dt('imagecompare.handle.hover.size')};\n}\n`;\n\nconst classes = {\n    root: 'p-imagecompare',\n    slider: 'p-imagecompare-slider'\n};\n\nexport default BaseStyle.extend({\n    name: 'imagecompare',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","slider","BaseStyle","extend","name"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../../src/imagecompare/style/ImageCompareStyle.js"],"sourcesContent":["import BaseStyle from '@primevue/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-imagecompare {\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    aspect-ratio: 16 / 9;\n}\n\n.p-imagecompare img {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n}\n\n.p-imagecompare img + img {\n    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);\n}\n\n.p-imagecompare:dir(rtl) img + img {\n    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);\n}\n\n.p-imagecompare-slider {\n    position: relative;\n    -webkit-appearance: none;\n    width: calc(100% + ${dt('imagecompare.handle.size')});\n    height: 100%;\n    margin-inline-start: calc(-1 * calc(${dt('imagecompare.handle.size')} / 2));\n    background-color: transparent;\n    outline: none;\n    transition: all ${dt('imagecompare.handle.transition.duration')};\n}\n\n.p-imagecompare-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    height: ${dt('imagecompare.handle.size')};\n    width: ${dt('imagecompare.handle.size')};\n    background: ${dt('imagecompare.handle.background')};\n    border: ${dt('imagecompare.handle.border.width')} solid ${dt('imagecompare.handle.border.color')};\n    border-radius: ${dt('imagecompare.handle.border.radius')};\n    background-size: contain;\n    cursor: ew-resize;\n    transition: all ${dt('imagecompare.handle.transition.duration')};\n}\n\n.p-imagecompare-slider::-moz-range-thumb {\n    height: ${dt('imagecompare.handle.size')};\n    width: ${dt('imagecompare.handle.size')};\n    background: ${dt('imagecompare.handle.background')};\n    border: ${dt('imagecompare.handle.border.width')} ${dt('imagecompare.handle.border.style')} ${dt('imagecompare.handle.border.color')};\n    border-radius: ${dt('imagecompare.handle.border.radius')};\n    background-size: contain;\n    cursor: ew-resize;\n}\n\n.p-imagecompare-slider:focus-visible::-webkit-slider-thumb {\n    box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};\n    outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};\n    outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};\n}\n\n.p-imagecompare-slider:focus-visible::-moz-range-thumb {\n    box-shadow: ${dt('imagecompare.handle.focus.ring.shadow')};\n    outline: ${dt('imagecompare.handle.focus.ring.width')} ${dt('imagecompare.handle.focus.ring.style')} ${dt('imagecompare.handle.focus.ring.color')};\n    outline-offset: ${dt('imagecompare.handle.focus.ring.offset')};\n}\n\n.p-imagecompare-slider:hover {\n    width: calc(100% + ${dt('imagecompare.handle.hover.size')});\n    margin-inline-start: calc(-1 * calc(${dt('imagecompare.handle.hover.size')} / 2));\n}\n\n.p-imagecompare-slider:hover::-webkit-slider-thumb {\n    background: ${dt('imagecompare.handle.hover.background')};\n    border-color: ${dt('imagecompare.handle.hover.border.color')};\n    height: ${dt('imagecompare.handle.hover.size')};\n    width: ${dt('imagecompare.handle.hover.size')};\n}\n\n.p-imagecompare-slider:hover::-moz-range-thumb {\n    background: ${dt('imagecompare.handle.hover.background')};\n    border-color: ${dt('imagecompare.handle.hover.border.color')};\n    height: ${dt('imagecompare.handle.hover.size')};\n    width: ${dt('imagecompare.handle.hover.size')};\n}\n`;\n\nconst classes = {\n    root: 'p-imagecompare',\n    slider: 'p-imagecompare-slider'\n};\n\nexport default BaseStyle.extend({\n    name: 'imagecompare',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","slider","BaseStyle","extend","name"],"mappings":"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"}