npm - @piveau/piveau-hub-ui-modules - Versions diffs - 80.0.0-alpha.7 → 80.0.0-alpha.8 - Mend

@piveau/piveau-hub-ui-modules 80.0.0-alpha.7 → 80.0.0-alpha.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/dist/data-provider-interface/HappyFlowComponents/ui/Dropdown.vue.mjs ADDED Viewed

@@ -0,0 +1,56 @@
+import { ref as d, openBlock as t, createElementBlock as r, createBlock as f, isRef as _, unref as s, createCommentVNode as a, createTextVNode as k, createElementVNode as u, Fragment as v, renderList as y, toDisplayString as x } from "vue";
+import { onClickOutside as w } from "../../../external/@vueuse/core/index";
+import g from "./TextButtonSmall.vue.mjs";
+import "./Dropdown.vue2.mjs";
+import C from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const D = { class: "dropdownV3" }, B = {
+  key: 1,
+  class: "dropdownWrapper"
+}, S = { class: "dropdown" }, b = ["onClick"], V = {
+  __name: "Dropdown",
+  props: {
+    text: {
+      type: String,
+      required: !0
+    },
+    type: {
+      type: String,
+      required: !0
+    },
+    data: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(c) {
+    const i = d();
+    d("#0172AD");
+    let e = d(!1);
+    const p = c, m = (n) => n;
+    return w(i, (n) => {
+      e.value = !1;
+    }), (n, o) => (t(), r("div", D, [
+      p.type === "textButtonSmall" ? (t(), f(g, {
+        key: 0,
+        buttonText: "Dropdown",
+        onClick: o[0] || (o[0] = (l) => _(e) ? e.value = !s(e) : e = !s(e)),
+        ref_key: "accActive",
+        ref: i
+      }, null, 512)) : a("", !0),
+      o[1] || (o[1] = k()),
+      s(e) ? (t(), r("div", B, [
+        u("ul", S, [
+          (t(!0), r(v, null, y(c.data, (l, q) => (t(), r("li", {
+            onClick: (A) => m(l)
+          }, [
+            u("button", null, x(l["@value"]), 1)
+          ], 8, b))), 256))
+        ])
+      ])) : a("", !0)
+    ]));
+  }
+}, $ = /* @__PURE__ */ C(V, [["__scopeId", "data-v-5182bd6a"]]);
+export {
+  $ as default
+};
+//# sourceMappingURL=Dropdown.vue.mjs.map

package/dist/data-provider-interface/HappyFlowComponents/ui/Dropdown.vue.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Dropdown.vue.mjs","sources":["../../../../lib/data-provider-interface/HappyFlowComponents/ui/Dropdown.vue"],"sourcesContent":["<template>\n <div class=\"dropdownV3\">\n <TextButtonSmall v-if=\"props.type === 'textButtonSmall'\" buttonText=\"Dropdown\" @click=\"toggleDropdown = !toggleDropdown\" ref=\"accActive\"></TextButtonSmall>\n <div class=\"dropdownWrapper\" v-if=\"toggleDropdown\">\n <ul class=\"dropdown\">\n <li v-for=\"item, i in data\" @click=\"handleClick(item)\"><button>{{ item['@value'] }}</button></li>\n </ul>\n </div>\n </div>\n \n</template>\n<script setup>\nimport { ref } from 'vue';\nimport { onClickOutside } from '@vueuse/core'\nimport TextButtonSmall from \"./TextButtonSmall.vue\";\n\nconst accActive = ref()\nlet fill = ref('#0172AD')\nlet toggleDropdown = ref(false)\n\nconst props = defineProps({\n text: {\n type: String,\n required: true\n },\n type: {\n type: String,\n required: true\n },\n data: {\n type: Object,\n required: true\n }\n});\nconst handleClick = (item) => {\n return item\n}\n\nonClickOutside(accActive, event => {\n toggleDropdown.value = false\n})\n</script>\n<style scoped>\nbutton {\n all: unset\n}\n\n.dropdownWrapper {\n position: absolute;\n top: 2.5rem;\n}\n\n.active {\n rotate: 180deg;\n}\n\n.dropdown {\n display: flex;\n width: 192px;\n padding: var(--Spacing-2, 8px) 0px;\n flex-direction: column;\n align-items: flex-start;\n z-index: 999;\n\n border-radius: var(--Border-Radius, 8px);\n background: var(--Colour-neutral-Neutral5, #FAFAFB);\n\n /* Elevation light/1 */\n box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);\n\n list-style: none;\n\n &:focus {\n border: 2px solid var(--Focused, #0196D8);\n }\n\n li {\n display: flex;\n padding: var(--Spacing-2, 8px) var(--Spacing-4, 24px);\n align-items: flex-start;\n gap: var(--Spacing-3, 16px);\n align-self: stretch;\n\n button {\n width: 100%;\n }\n\n\n &:hover {\n background: var(--Colour-neutral-Neutral20, #E6E7E9);\n }\n\n &:active {\n background: var(--neutral-10, #F1F1F3);\n }\n\n &:focus {\n border: 2px solid var(--Focused, #0196D8);\n }\n }\n}\n\n.dropdownV3 {\n\n position: relative;\n display: inline-flex;\n padding: var(--Spacing-1, 4px) var(--Spacing-2, 8px);\n align-items: center;\n gap: var(--Spacing-2, 8px);\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n\n &:focus {\n border-radius: 4px;\n border: 2px solid var(--Focused, #0196D8);\n }\n\n span {\n color: var(--blue-80, #0172AD);\n text-align: center;\n \n font-family:var(--font-family-secondary);\n font-size: var(--copy-large-regular-font-size);\n font-style: normal;\n font-weight: var(--copy-large-regular-font-weight);\n line-height: var(--copy-large-regular-line-height);\n\n /* 24px */\n &:hover {\n color: var(--blue-100, #003F6F);\n }\n\n &:active {\n color: var(--Colour-blue-Blue60, #009FE3);\n }\n\n\n }\n}\n</style>"],"names":["accActive","ref","toggleDropdown","props","__props","handleClick","item","onClickOutside","event"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,UAAMA,IAAYC,EAAI;AACX,IAAAA,EAAI,SAAS;AACxB,QAAIC,IAAiBD,EAAI,EAAK;AAE9B,UAAME,IAAQC,GAcRC,IAAc,CAACC,MACVA;AAGX,WAAAC,EAAeP,GAAW,CAAAQ,MAAS;AAC/B,MAAAN,EAAe,QAAQ;AAAA,IAC3B,CAAC;;;;;;;;;;;;;;;;;;;;;"}

package/dist/data-provider-interface/HappyFlowComponents/ui/Dropdown.vue2.mjs ADDED Viewed

@@ -0,0 +1,5 @@
+const _ = "";
+export {
+  _ as default
+};
+//# sourceMappingURL=Dropdown.vue2.mjs.map

package/dist/data-provider-interface/HappyFlowComponents/ui/Dropdown.vue2.mjs.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"Dropdown.vue2.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/data-provider-interface/HappyFlowComponents/ui/StateTag.vue.mjs CHANGED Viewed

@@ -1,9 +1,11 @@
+import "../../config/styles/variables.css.mjs";
+import "../../config/styles/typography.css.mjs";
 import { openBlock as s, createElementBlock as r, normalizeClass as l, createCommentVNode as a, createTextVNode as o, createElementVNode as m, toDisplayString as n } from "vue";
 import d from "../img/Ellipse2Published.svg.mjs";
-import c from "../img/Ellipse2Warning.svg.mjs";
+import p from "../img/Ellipse2Warning.svg.mjs";
 import _ from "../img/Ellipse2Error.svg.mjs";
 import "./StateTag.vue2.mjs";
-import p from "../../../_virtual/_plugin-vue_export-helper.mjs";
+import c from "../../../_virtual/_plugin-vue_export-helper.mjs";
 const u = {
   name: "StateTag",
   props: {
@@ -38,7 +40,7 @@ const u = {
 }, g = {
   key: 1,
   class: "dot",
-  src: c,
+  src: p,
   alt: ""
 }, y = {
   key: 2,
@@ -59,8 +61,8 @@ function S(b, t, e, k, z, i) {
     m("span", C, n(e.label), 1)
   ], 2);
 }
-const v = /* @__PURE__ */ p(u, [["render", S], ["__scopeId", "data-v-67175e5c"]]);
+const E = /* @__PURE__ */ c(u, [["render", S], ["__scopeId", "data-v-a14672a0"]]);
 export {
-  v as default
+  E as default
 };
 //# sourceMappingURL=StateTag.vue.mjs.map

package/dist/data-provider-interface/HappyFlowComponents/ui/StateTag.vue.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StateTag.vue.mjs","sources":["../../../../lib/data-provider-interface/HappyFlowComponents/ui/StateTag.vue"],"sourcesContent":["<template>\n <div class=\"state-tag\" :class=\"[stateClass, sizeClass]\">\n <img\n v-if=\"state === 'published'\"\n class=\"dot\"\n src=\"../img/Ellipse2Published.svg\"\n alt=\"\"\n />\n <img\n v-if=\"state === 'draft'\"\n class=\"dot\"\n src=\"../img/Ellipse2Warning.svg\"\n alt=\"\"\n />\n <img\n v-if=\"state === 'error'\"\n class=\"dot\"\n src=\"../img/Ellipse2Error.svg\"\n alt=\"\"\n />\n\n <span class=\"label\">{{ label }}</span>\n </div>\n</template>\n\n<script>\nexport default {\n name: \"StateTag\",\n props: {\n label: {\n type: String,\n required: true,\n },\n state: {\n type: String,\n required: true, // \"published\", \"draft\", \"error\", \"hvd\", \"geopolitical\"\n },\n size: {\n type: String,\n default: \"table\", // \"table\", \"page\", or other custom sizes\n },\n },\n computed: {\n stateClass() {\n return `state-tag--${this.state}`;\n },\n sizeClass() {\n return `state-tag--${this.size}`;\n },\n },\n};\n</script>\n\n<style scoped>\n.state-tag {\n font-size: 14px;\n font-weight: 500;\n display: inline-flex;\n padding: var(--Spacing-1, 4px) var(--Spacing-2, 8px);\n align-items: center;\n gap: var(--Spacing-1, 4px);\n border-radius: ~~32px;\~~n background: var(--background-success, #c2eaaf);\n color: var(--text-success, #3d6e26);\n}\n\n.state-tag--published {\n background: var(--background-success, #c2eaaf);\n color: var(--text-success, #3d6e26);\n\n font-family: var(--font-family-secondary);\n font-size: var(--copy-mini-~~regular~~-font-size);\n font-style: normal;\n font-weight: var(--copy-~~button~~-s-font-weight);\n line-height: var(--copy-~~button~~-s-line-height);\n}\n\n.state-tag--draft {\n border-radius: ~~32px;\~~n background: var(--background-warning, #ffd7a7);\n\n font-family: var(--font-family-secondary);\n font-size: var(--copy-mini-~~regular~~-font-size);\n font-style: normal;\n font-weight: var(--copy-~~button~~-s-font-weight);\n line-height: var(--copy-~~button~~-s-line-height);\n color: var(--text-warning, #7c501c);\n}\n\n.state-tag--error {\n border-radius: ~~32px;\~~n background: var(--background-error, #ffc7cb);\n font-family: var(--font-family-secondary);\n font-size: var(--copy-mini-~~regular~~-font-size);\n font-style: normal;\n font-weight: var(--copy-~~button~~-s-font-weight);\n line-height: var(--copy-~~button~~-s-line-height);\n color: var(--text-error, #a9242c);\n}\n\n.dot {\n display: inline-block;\n width: 6px;\n height: 6px;\n}\n\n.state-tag--page {\n padding: var(--Spacing-1, 4px) var(--Spacing-3, 16px);\n align-items: center;\n gap: var(--Spacing-1, 4px);\n font-family: var(--font-family-secondary);;\n font-size: ~~15px~~;\n font-style: normal;\n font-weight: 600;\n line-height: ~~160%;\~~n}\n\n.state-tag--hvd {\n display: inline-flex;\n padding: var(--Spacing-1, 4px) var(--Spacing-2, 8px);\n align-items: center;\n background: var(--hvd-background);\n font-style: normal;\n color: var(--hvd-text);\n font-size: var(--caption-font-size, 0.75rem);\n line-height: var(--caption-line-height, 1.125rem);\n font-weight: var(--caption-font-weight, 700);\n border-radius: var(--Border-Radius, 8px);\n}\n\n.state-tag--geopolitical {\n display: inline-flex;\n padding: var(--Spacing-1, 4px) var(--Spacing-2, 8px);\n align-items: center;\n background: var(--blue-20, #D4EDFC);\n font-style: normal;\n color: var(--Colour-blue-Blue90, #015184);\n font-size: var(--caption-font-size, 0.75rem);\n line-height: var(--caption-line-height, 1.125rem);\n font-weight: var(--caption-font-weight, 700);\n border-radius: var(--Border-Radius, 8px);\n}\n</style>\n"],"names":["_sfc_main","_imports_0","_imports_1","_imports_2","_hoisted_4","_createElementBlock","_normalizeClass","$options","$props","_openBlock","_hoisted_1","_createCommentVNode","_cache","_createTextVNode","_hoisted_2","_hoisted_3","_createElementVNode","_toDisplayString"],"mappings":"~~;;;;;;AA0BA~~,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IACD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;AAAA,IACX;AAAA,IACD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IACV;AAAA,EACF;AAAA,EACD,UAAU;AAAA,IACR,aAAa;AACX,aAAO,cAAc,KAAK,KAAK;AAAA,IAChC;AAAA,IACD,YAAY;AACV,aAAO,cAAc,KAAK,IAAI;AAAA,IAC/B;AAAA,EACF;AACH;~~EAlDA~~,KAAA;AAAA,EAIM,OAAM;AAAA,EACN,KAAAC;AAAA,EACA,KAAI;;EANV,KAAA;AAAA,EAUM,OAAM;AAAA,EACN,KAAAC;AAAA,EACA,KAAI;;EAZV,KAAA;AAAA,EAgBM,OAAM;AAAA,EACN,KAAAC;AAAA,EACA,KAAI;GAGAC,IAAA,EAAA,OAAM,QAAO;;cApBrBC,EAqBM,OAAA;AAAA,IArBD,OADPC,EACa,CAAA,aAAqB,CAAAC,EAAA,YAAYA,EAAS,SAAA,CAAA,CAAA;AAAA;IAE3CC,EAAK,UAAA,eADbC,KAAAJ,EAKE,OALFK,CAKE,KAPNC,EAAA,IAAA,EAAA;AAAA,IAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAAA;AAAA,IASYL,EAAK,UAAA,WADbC,KAAAJ,EAKE,OALFS,CAKE,KAbNH,EAAA,IAAA,EAAA;AAAA,IAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAAA;AAAA,IAeYL,EAAK,UAAA,WADbC,KAAAJ,EAKE,OALFU,CAKE,KAnBNJ,EAAA,IAAA,EAAA;AAAA,IAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAAA;AAAA,IAqBIG,EAAsC,QAAtCZ,GAAsCa,EAAfT,EAAK,KAAA,GAAA,CAAA;AAAA;;;"}
1	+ {"version":3,"file":"StateTag.vue.mjs","sources":["../../../../lib/data-provider-interface/HappyFlowComponents/ui/StateTag.vue"],"sourcesContent":["<template>\n <div class=\"state-tag\" :class=\"[stateClass, sizeClass]\">\n <img\n v-if=\"state === 'published'\"\n class=\"dot\"\n src=\"../img/Ellipse2Published.svg\"\n alt=\"\"\n />\n <img\n v-if=\"state === 'draft'\"\n class=\"dot\"\n src=\"../img/Ellipse2Warning.svg\"\n alt=\"\"\n />\n <img\n v-if=\"state === 'error'\"\n class=\"dot\"\n src=\"../img/Ellipse2Error.svg\"\n alt=\"\"\n />\n\n <span class=\"label\">{{ label }}</span>\n </div>\n</template>\n\n<script>\nimport \"../../config/styles/variables.css\";\nimport \"../../config/styles/typography.css\";\n\nexport default {\n name: \"StateTag\",\n props: {\n label: {\n type: String,\n required: true,\n },\n state: {\n type: String,\n required: true, // \"published\", \"draft\", \"error\", \"hvd\", \"geopolitical\"\n },\n size: {\n type: String,\n default: \"table\", // \"table\", \"page\", or other custom sizes\n },\n },\n computed: {\n stateClass() {\n return `state-tag--${this.state}`;\n },\n sizeClass() {\n return `state-tag--${this.size}`;\n },\n },\n};\n</script>\n\n<style scoped>\n.state-tag {\n font-size: 14px;\n font-weight: 500;\n display: inline-flex;\n padding: var(--Spacing-1, 4px) var(--Spacing-2, 8px);\n align-items: center;\n gap: var(--Spacing-1, 4px);\n border-radius: var(--Button-Radius, 24px);;\n background: var(--background-success, #c2eaaf);\n color: var(--text-success, #3d6e26);\n}\n\n.state-tag--published {\n background: var(--background-success, #c2eaaf);\n color: var(--text-success, #3d6e26);\n\n font-family: var(--font-family-secondary);\n font-size: var(--copy-mini-semi-bold-font-size);\n font-style: normal;\n font-weight: var(--copy-mini-semi-bold-font-weight);\n line-height: var(--copy-mini-semi-bold-line-height);\n}\n\n.state-tag--draft {\n border-radius: var(--Button-Radius, 24px);;\n background: var(--background-warning, #ffd7a7);\n\n font-family: var(--font-family-secondary);\n font-size: var(--copy-mini-semi-bold-font-size);\n font-style: normal;\n font-weight: var(--copy-mini-semi-bold-font-weight);\n line-height: var(--copy-mini-semi-bold-line-height);\n color: var(--text-warning, #7c501c);\n}\n\n.state-tag--error {\n border-radius: var(--Button-Radius, 24px);;\n background: var(--background-error, #ffc7cb);\n font-family: var(--font-family-secondary);\n font-size: var(--copy-mini-semi-bold-font-size);\n font-style: normal;\n font-weight: var(--copy-mini-semi-bold-font-weight);\n line-height: var(--copy-mini-semi-bold-line-height);\n color: var(--text-error, #a9242c);\n}\n\n.dot {\n display: inline-block;\n width: 6px;\n height: 6px;\n}\n\n.state-tag--page {\n padding: var(--Spacing-1, 4px) var(--Spacing-3, 16px);\n align-items: center;\n gap: var(--Spacing-1, 4px);\n font-family: var(--font-family-secondary);;\n font-size: var(--copy-small-semi-bold-font-size);\n font-style: normal;\n font-weight: var(--copy-small-semi-bold-font-weight, 600);\n line-height: var(--copy-small-semi-bold-line-height);\n}\n\n.state-tag--hvd {\n font-family: var(--font-family-secondary);\n display: inline-flex;\n padding: var(--Spacing-1, 4px) var(--Spacing-2, 8px);\n align-items: center;\n background: var(--hvd-background);\n font-style: normal;\n color: var(--hvd-text);\n font-size: var(--caption-font-size, 0.75rem);\n line-height: var(--caption-line-height, 1.125rem);\n font-weight: var(--caption-font-weight, 700);\n border-radius: var(--Border-Radius, 8px);\n text-transform: uppercase;\n}\n\n.state-tag--geopolitical {\n display: inline-flex;\n padding: var(--Spacing-1, 4px) var(--Spacing-2, 8px);\n align-items: center;\n background: var(--blue-20, #D4EDFC);\n font-style: normal;\n color: var(--Colour-blue-Blue90, #015184);\n font-size: var(--caption-font-size, 0.75rem);\n line-height: var(--caption-line-height, 1.125rem);\n font-weight: var(--caption-font-weight, 700);\n border-radius: var(--Border-Radius, 8px);\n}\n</style>\n"],"names":["_sfc_main","_imports_0","_imports_1","_imports_2","_hoisted_4","_createElementBlock","_normalizeClass","$options","$props","_openBlock","_hoisted_1","_createCommentVNode","_cache","_createTextVNode","_hoisted_2","_hoisted_3","_createElementVNode","_toDisplayString"],"mappings":";;;;;;;;AA6BA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,IACD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA;AAAA,IACX;AAAA,IACD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IACV;AAAA,EACF;AAAA,EACD,UAAU;AAAA,IACR,aAAa;AACX,aAAO,cAAc,KAAK,KAAK;AAAA,IAChC;AAAA,IACD,YAAY;AACV,aAAO,cAAc,KAAK,IAAI;AAAA,IAC/B;AAAA,EACF;AACH;EArDA,KAAA;AAAA,EAIM,OAAM;AAAA,EACN,KAAAC;AAAA,EACA,KAAI;;EANV,KAAA;AAAA,EAUM,OAAM;AAAA,EACN,KAAAC;AAAA,EACA,KAAI;;EAZV,KAAA;AAAA,EAgBM,OAAM;AAAA,EACN,KAAAC;AAAA,EACA,KAAI;GAGAC,IAAA,EAAA,OAAM,QAAO;;cApBrBC,EAqBM,OAAA;AAAA,IArBD,OADPC,EACa,CAAA,aAAqB,CAAAC,EAAA,YAAYA,EAAS,SAAA,CAAA,CAAA;AAAA;IAE3CC,EAAK,UAAA,eADbC,KAAAJ,EAKE,OALFK,CAKE,KAPNC,EAAA,IAAA,EAAA;AAAA,IAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAAA;AAAA,IASYL,EAAK,UAAA,WADbC,KAAAJ,EAKE,OALFS,CAKE,KAbNH,EAAA,IAAA,EAAA;AAAA,IAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAAA;AAAA,IAeYL,EAAK,UAAA,WADbC,KAAAJ,EAKE,OALFU,CAKE,KAnBNJ,EAAA,IAAA,EAAA;AAAA,IAAAC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAAA;AAAA,IAqBIG,EAAsC,QAAtCZ,GAAsCa,EAAfT,EAAK,KAAA,GAAA,CAAA;AAAA;;;"}

package/dist/data-provider-interface/HappyFlowComponents/ui/SwitchV3.vue.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import "../../config/styles/variables.css.mjs";
-import { openBlock as s, createElementBlock as t, withDirectives as f, createElementVNode as c, vModelCheckbox as u, createTextVNode as d, normalizeStyle as n, createCommentVNode as a, normalizeClass as C } from "vue";
+import { openBlock as s, createElementBlock as t, withDirectives as f, createElementVNode as a, vModelCheckbox as u, createTextVNode as d, normalizeStyle as n, createCommentVNode as c, normalizeClass as C } from "vue";
 import v from "../img/CheckBoldBlue60.svg.mjs";
 import p from "../img/CrossoutNeutral10.svg.mjs";
 import k from "../img/CrossoutNeutral30.svg.mjs";
@@ -45,27 +45,27 @@ const x = {
     },
     handleMouseUp() {
       this.disabled || this.stateLock || (this.stateLock = !0, this.sliderPadding = "0 var(--Spacing-1, 4px)", this.circlePadding = "12px", setTimeout(() => {
-        this.stateLock = !1, this.isChecked || (this.circlePadding = "8px", this.hasIcon && (this.circlePadding = "12px", this.sliderPadding = "0 2px")), this.handleStyleOnHover();
+        this.stateLock = !1, this.isChecked || (this.circlePadding = "8px", this.hasIcon && (this.circlePadding = "12px", this.sliderPadding = "0 2px")), this.showHoverCircle && this.handleStyleOnHover();
       }, 10));
     },
     onHover() {
       this.stateLock || this.disabled || this.handleStyleOnHover();
     },
     onLeave() {
-      this.stateLock || this.disabled || (this.showHoverCircle = !1, this.isChecked ? (this.circleColor = "var(--neutral-0, #ffffff)", this.sliderBackgroundColor = "var(--blue-60, #009fe3)") : (this.circleColor = "var(--neutral-60, #687178)", this.sliderBackgroundColor = "var(--neutral-20, #e6e7e9)"));
+      this.stateLock || this.disabled || (this.showHoverCircle = !1, this.isChecked ? (this.circleColor = "var(--neutral-0, #ffffff)", this.sliderBackgroundColor = "var(--blue-60, #009fe3)") : (this.circleColor = "var(--neutral-60, #687178)", this.sliderBackgroundColor = "var(--neutral-20, #e6e7e9)"), this.handleMouseUp());
     },
     handleStyleOnHover() {
-      this.showHoverCircle = !0, this.isChecked ? (this.circleColor = "var(--blue-20, rgba(0, 159, 227, 0.2))", this.hoverCircleColor = "var(--state-layer-primary-opacity-8, rgba(0, 159, 227, 0.08))", this.leftHoverCircle = "16px", this.topHoverCircle = "-4px", this.sliderBackgroundColor = "var(--blue-60, #009fe3)", this.zHoverCircle = "-1") : (this.circleColor = "var(--neutral-60, #687178)", this.hoverCircleColor = "var(--state-layer-primary-opacity-8, rgba(0, 159, 227, 0.08))", this.leftHoverCircle = "-8px", this.topHoverCircle = "-6px", this.sliderBackgroundColor = "var(--neutral-0, #ffffff)", this.circleColor = "var(--neutral-80)", this.zHoverCircle = "100", this.hasIcon && (this.leftHoverCircle = "-6px", this.topHoverCircle = "-6px"));
+      this.showHoverCircle = !0, this.isChecked ? (this.circleColor = "var(--blue-20, rgba(0, 159, 227, 0.2))", this.hoverCircleColor = "var(--state-layer-primary-opacity-8, rgba(0, 159, 227, 0.08))", this.leftHoverCircle = "16px", this.topHoverCircle = "-4px", this.sliderBackgroundColor = "var(--blue-60, #009fe3)", this.zHoverCircle = "-1") : (this.circleColor = "var(--neutral-60, #687178)", this.hoverCircleColor = "var(--state-layer-on-surface-opacity-8, rgba(11, 26, 37, 0.08))", this.leftHoverCircle = "-8px", this.topHoverCircle = "-6px", this.sliderBackgroundColor = "var(--neutral-0, #ffffff)", this.circleColor = "var(--neutral-80)", this.zHoverCircle = "100", this.hasIcon && (this.leftHoverCircle = "-6px", this.topHoverCircle = "-6px"));
     }
   },
   mounted() {
     this.defaultChecked ? (this.isChecked = !0, this.circleColor = "var(--neutral-0, #ffffff)", this.sliderBackgroundColor = "var(--blue-60, #009fe3)") : (this.isChecked = !1, this.circleColor = "var(--neutral-60, #687178)", this.sliderBackgroundColor = "var(--neutral-20, #e6e7e9)", this.circlePadding = "8px", this.hasIcon && (this.circlePadding = "12px", this.sliderPadding = "0 2px")), this.disabled && (this.circleColor = "var(--neutral-5, #d9d9d9)", this.sliderBackgroundColor = "var(--neutral-30, #f0f0f0)", this.sliderBorder = "var(--neutral-30)", this.isChecked || (this.circleColor = "var(--neutral-60, #d9d9d9)", this.sliderBackgroundColor = "var(--neutral-10)", this.sliderBorder = "2px solid var(--neutral-30, #D5D7DA)", this.circleOpacity = "0.38"));
   }
-}, b = ["disabled"], y = {
+}, b = ["disabled"], H = {
   key: 0,
   src: v,
   alt: "On Icon"
-}, H = {
+}, y = {
   key: 1,
   src: p,
   alt: "Off Icon"
@@ -78,7 +78,7 @@ const x = {
   src: g,
   alt: "Off Icon"
 };
-function P(h, e, i, w, r, o) {
+function w(h, e, i, P, r, o) {
   return s(), t("label", {
     class: "switch",
     onMousedown: e[1] || (e[1] = (...l) => o.handleMouseDown && o.handleMouseDown(...l)),
@@ -86,7 +86,7 @@ function P(h, e, i, w, r, o) {
     onMouseover: e[3] || (e[3] = (...l) => o.onHover && o.onHover(...l)),
     onMouseleave: e[4] || (e[4] = (...l) => o.onLeave && o.onLeave(...l))
   }, [
-    f(c("input", {
+    f(a("input", {
       type: "checkbox",
       "onUpdate:modelValue": e[0] || (e[0] = (l) => r.isChecked = l),
       disabled: i.disabled
@@ -94,7 +94,7 @@ function P(h, e, i, w, r, o) {
       [u, r.isChecked]
     ]),
     e[9] || (e[9] = d()),
-    c("span", {
+    a("span", {
       class: "slider",
       style: n({
         backgroundColor: r.sliderBackgroundColor,
@@ -111,9 +111,9 @@ function P(h, e, i, w, r, o) {
           top: r.topHoverCircle,
           "z-index": r.zHoverCircle
         })
-      }, null, 4)) : a("", !0),
+      }, null, 4)) : c("", !0),
       e[8] || (e[8] = d()),
-      c("span", {
+      a("span", {
         class: C(["icon-wrapper", {
           "icon-present": i.hasIcon,
           "icon-absent": !i.hasIcon,
@@ -127,18 +127,18 @@ function P(h, e, i, w, r, o) {
           opacity: h.circleOpacity
         })
       }, [
-        r.isChecked && i.hasIcon && !i.disabled ? (s(), t("img", y)) : a("", !0),
+        r.isChecked && i.hasIcon && !i.disabled ? (s(), t("img", H)) : c("", !0),
         e[5] || (e[5] = d()),
-        !r.isChecked && i.hasIcon && !i.disabled ? (s(), t("img", H)) : a("", !0),
+        !r.isChecked && i.hasIcon && !i.disabled ? (s(), t("img", y)) : c("", !0),
         e[6] || (e[6] = d()),
-        !r.isChecked && i.hasIcon && i.disabled ? (s(), t("img", B)) : a("", !0),
+        !r.isChecked && i.hasIcon && i.disabled ? (s(), t("img", B)) : c("", !0),
         e[7] || (e[7] = d()),
-        r.isChecked && i.hasIcon && i.disabled ? (s(), t("img", I)) : a("", !0)
+        r.isChecked && i.hasIcon && i.disabled ? (s(), t("img", I)) : c("", !0)
       ], 6)
     ], 4)
   ], 32);
 }
-const U = /* @__PURE__ */ m(x, [["render", P], ["__scopeId", "data-v-4311a715"]]);
+const U = /* @__PURE__ */ m(x, [["render", w], ["__scopeId", "data-v-35e96719"]]);
 export {
   U as default
 };

package/dist/data-provider-interface/HappyFlowComponents/ui/SwitchV3.vue.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SwitchV3.vue.mjs","sources":["../../../../lib/data-provider-interface/HappyFlowComponents/ui/SwitchV3.vue"],"sourcesContent":["<template>\n <label\n class=\"switch\"\n @mousedown=\"handleMouseDown\"\n @mouseup=\"handleMouseUp\"\n @mouseover=\"onHover\"\n @mouseleave=\"onLeave\"\n >\n <input type=\"checkbox\" v-model=\"isChecked\" :disabled=\"disabled\" />\n <span\n class=\"slider\"\n :style=\"{\n backgroundColor: sliderBackgroundColor,\n padding: sliderPadding,\n border: sliderBorder,\n }\"\n >\n <!-- Hover Circle -->\n <span\n v-if=\"!disabled && showHoverCircle\"\n class=\"hover-circle\"\n :style=\"{\n backgroundColor: hoverCircleColor,\n left: leftHoverCircle,\n top: topHoverCircle,\n 'z-index': zHoverCircle,\n }\"\n ></span>\n\n <span\n class=\"icon-wrapper\"\n :class=\"{\n 'icon-present': hasIcon,\n 'icon-absent': !hasIcon,\n active: isChecked,\n }\"\n :style=\"{\n backgroundColor: circleColor,\n padding: circlePadding,\n height: circleHeight,\n width: circleWidth,\n opacity: circleOpacity\n }\"\n >\n <img\n v-if=\"isChecked && hasIcon && !disabled\"\n src=\"../img/CheckBoldBlue60.svg\"\n alt=\"On Icon\"\n />\n <img\n v-if=\"!isChecked && hasIcon && !disabled\"\n src=\"../img/CrossoutNeutral10.svg\"\n alt=\"Off Icon\"\n />\n <img\n v-if=\"!isChecked && hasIcon && disabled\"\n src=\"../img/CrossoutNeutral30.svg\"\n alt=\"Off Icon\"\n />\n <img\n v-if=\"isChecked && hasIcon && disabled\"\n src=\"../img/CheckBoldNeutral30.svg\"\n alt=\"Off Icon\"\n />\n </span>\n </span>\n </label>\n</template>\n\n<script>\nimport \"../../config/styles/variables.css\";\n\nexport default {\n name: \"SwitchV3\",\n data() {\n return {\n isChecked: this.defaultChecked,\n circleColor: \"var(--neutral-0, #ffffff)\",\n sliderBackgroundColor: \"var(--neutral-20, #e6e7e9)\",\n hoverCircleColor: \"\",\n showHoverCircle: false,\n leftHoverCircle: \"16px\",\n topHoverCircle: \"-4px\",\n zHoverCircle: \"-1\",\n stateLock: false,\n sliderPadding: \"0 var(--Spacing-1, 4px)\",\n circlePadding: \"12px\",\n circleHeight: \"2px\",\n circleWidth: \"2px\",\n };\n },\n props: {\n defaultChecked: {\n type: Boolean,\n default: false,\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n hasIcon: {\n type: Boolean,\n default: false,\n },\n },\n methods: {\n handleMouseDown() {\n if (this.disabled \|\| this.stateLock) return;\n\n this.circlePadding = \"14px\";\n this.hoverCircleColor =\n \"var( --state-layer-primary-opacity-12, rgba(0, 159, 227, 0.12))\";\n \n if (this.isChecked) {\n this.sliderPadding = \"0px 2px\";\n } else {\n this.sliderPadding = \"0px 10px 0px 0px\";\n\n if (!this.hasIcon) {\n this.leftHoverCircle = \"-6px\";\n }\n }\n },\n handleMouseUp() {\n if (this.disabled \|\| this.stateLock) return;\n\n this.stateLock = true;\n this.sliderPadding = \"0 var(--Spacing-1, 4px)\";\n\n this.circlePadding = \"12px\";\n\n setTimeout(() => {\n this.stateLock = false;\n\n if (!this.isChecked) {\n this.circlePadding = \"8px\";\n\n //OFF with icon\n if (this.hasIcon) {\n this.circlePadding = \"12px\";\n this.sliderPadding = \"0 2px\";\n }\n }\n\n this.handleStyleOnHover();\n }, 10);\n },\n onHover() {\n if (this.stateLock \|\| this.disabled) return;\n\n this.handleStyleOnHover();\n },\n onLeave() {\n if (this.stateLock \|\| this.disabled) return;\n\n this.showHoverCircle = false;\n\n if (this.isChecked) {\n this.circleColor = \"var(--neutral-0, #ffffff)\";\n this.sliderBackgroundColor = \"var(--blue-60, #009fe3)\";\n } else {\n this.circleColor = \"var(--neutral-60, #687178)\";\n this.sliderBackgroundColor = \"var(--neutral-20, #e6e7e9)\";\n }\n },\n handleStyleOnHover() {\n this.showHoverCircle = true;\n\n // switch ON\n if (this.isChecked) {\n this.circleColor = \"var(--blue-20, rgba(0, 159, 227, 0.2))\";\n this.hoverCircleColor = \"var(--state-layer-primary-opacity-8, rgba(0, 159, 227, 0.08))\";\n this.leftHoverCircle = \"16px\";\n this.topHoverCircle = \"-4px\";\n this.sliderBackgroundColor = \"var(--blue-60, #009fe3)\";\n this.zHoverCircle = \"-1\";\n }\n // switch OFF\n else {\n this.circleColor = \"var(--neutral-60, #687178)\";\n this.hoverCircleColor =\n \"var(--state-layer-primary-opacity-8, rgba(0, 159, 227, 0.08))\";\n this.leftHoverCircle = \"-8px\";\n this.topHoverCircle = \"-6px\";\n this.sliderBackgroundColor = \"var(--neutral-0, #ffffff)\";\n this.circleColor = \"var(--neutral-80)\";\n this.zHoverCircle = \"100\";\n\n if (this.hasIcon) {\n this.leftHoverCircle = \"-6px\";\n this.topHoverCircle = \"-6px\";\n }\n }\n },\n },\n mounted() {\n // switch ON\n if (this.defaultChecked) {\n this.isChecked = true;\n this.circleColor = \"var(--neutral-0, #ffffff)\";\n this.sliderBackgroundColor = \"var(--blue-60, #009fe3)\";\n } else {\n /** switch OFF /\n this.isChecked = false;\n this.circleColor = \"var(--neutral-60, #687178)\";\n this.sliderBackgroundColor = \"var(--neutral-20, #e6e7e9)\";\n this.circlePadding = \"8px\";\n\n // OFF and has icon\n if (this.hasIcon) {\n this.circlePadding = \"12px\";\n this.sliderPadding = \"0 2px\";\n }\n }\n\n if (this.disabled) {\n this.circleColor = \"var(--neutral-5, #d9d9d9)\";\n this.sliderBackgroundColor = \"var(--neutral-30, #f0f0f0)\";\n this.sliderBorder = \"var(--neutral-30)\";\n if (!this.isChecked) {\n this.circleColor = \"var(--neutral-60, #d9d9d9)\";\n this.sliderBackgroundColor = \"var(--neutral-10)\";\n this.sliderBorder = \"2px solid var(--neutral-30, #D5D7DA)\";\n this.circleOpacity = \"0.38\"\n }\n }\n },\n};\n</script>\n\n<style scoped>\n.switch {\n position: relative;\n display: inline-block;\n width: 52px;\n height: 32px;\n z-index: 1;\n}\n\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n position: relative;\n cursor: pointer;\n width: 52px;\n height: 32px;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 var(--Spacing-1, 4px);\n background: var(--blue-60, #009fe3);\n border-radius: var(--Button-Radius, 24px);\n transition: background-color 0.2s ease, justify-content 0.2s ease,\n padding 0.2s ease;\n}\n\n/ Hover Circle /\n.hover-circle {\n position: absolute;\n top: -4px;\n left: 16px;\n width: 40px;\n height: 40px;\n background-color: var(--blue-20, rgba(0, 159, 227, 0.2));\n border-radius: 50%;\n pointer-events: none;\n z-index: -1;\n}\n\n/ Circle (inside the slider) /\n.icon-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 12px;\n background-color: var(--neutral-0, #ffffff);\n border-radius: var(--Button-Radius, 24px);\n z-index: 2;\n transition: transform 0.2s ease, padding 0.1s ease;\n}\n\n/* Circle, icon present, not active /\n.icon-wrapper.icon-present {\n height: 2px;\n width: 2px;\n padding: 12px;\n background-color: var(--neutral-60, #687178);\n transition: background-color 0.2s ease, padding 0.2s ease;\n}\n\n/* Circle: icon present active /\n.icon-wrapper.icon-present.active {\n height: 2px;\n width: 2px;\n padding: 12px;\n background-color: var(--neutral-0, #ffffff);\n transition: background-color 0.2s ease, padding 0.2s ease;\n}\n\n/ circle, icon not present /\n.icon-wrapper.icon-absent {\n padding: 12px;\n background-color: var(--neutral-60, #687178);\n transition: background-color 0.2s ease, padding 0.2s ease;\n}\n\n/ circle, icon not present but active /\n.icon-wrapper.icon-absent.active {\n padding: 12px;\n background-color: var(--neutral-0, #ffffff);\n transition: background-color 0.2s ease, padding 0.2s ease;\n}\n\n.icon-wrapper img {\n height: 14px;\n width: 14px;\n pointer-events: none;\n}\n\n/ checked followed by class slider /\ninput:checked + .slider {\n justify-content: flex-end;\n position: relative;\n border: none;\n transition: box-shadow 0.2s ease, background-color 0.2s ease,\n justify-content 0.2s ease, padding 0.2s ease;\n}\n\n/* needed to keep border when sliding /\ninput:checked + .slider::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: inherit;\n box-shadow: inset 0 0 0 2px var(--blue-60, #009fe3);\n pointer-events: none;\n transition: box-shadow 0.4s ease, padding 0.2s ease;\n}\n\n/ Prevent ::before styles when disabled /\ninput:disabled + .slider::before {\n content: none;\n box-shadow: none;\n}\n\n/ not \"checked\", must be followed by class slider /\ninput:not(:checked) + .slider {\n background: var(--neutral-20, #e6e7e9);\n border-radius: var(--Button-Radius, 24px);\n border: 2px solid var(--neutral-60, #687178);\n}\n\n/ focus styles /\ninput:focus + .slider {\n outline: none;\n position: relative;\n}\n\ninput:not(:checked):focus-visible + .slider::after {\n content: \"\";\n position: absolute;\n width: 60px;\n height: 40px;\n top: -6px; \n left: -6px;\n border-radius: inherit; \n border: 2px solid var(--Focused, rgba(0, 159, 227, 0.3)); \n background-color: transparent; \n pointer-events: none; \n z-index: 1; \n}\n\n/ Focus ring for the checked state */\ninput:checked:focus-visible + .slider::after {\n content: \"\";\n position: absolute;\n width: 60px; \n height: 40px; \n top: -4px; \n left: -4px;\n border-radius: inherit; \n border: 2px solid var(--Focused, rgba(0, 159, 227, 0.3)); \n background-color: transparent;\n pointer-events: none;\n z-index: 1;\n transition: all 0.2s ease;\n}\n</style>\n"],"names":["_sfc_main","_hoisted_1","_imports_0","_imports_1","_imports_2","_imports_3","_createElementBlock","$options","args","_createElementVNode","_cache","$event","$data","$props","_createTextVNode","_normalizeStyle","_ctx","_createCommentVNode","_normalizeClass","_openBlock","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5"],"mappings":"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"}
1	+ {"version":3,"file":"SwitchV3.vue.mjs","sources":["../../../../lib/data-provider-interface/HappyFlowComponents/ui/SwitchV3.vue"],"sourcesContent":["<template>\n <label\n class=\"switch\"\n @mousedown=\"handleMouseDown\"\n @mouseup=\"handleMouseUp\"\n @mouseover=\"onHover\"\n @mouseleave=\"onLeave\"\n >\n <input type=\"checkbox\" v-model=\"isChecked\" :disabled=\"disabled\" />\n <span\n class=\"slider\"\n :style=\"{\n backgroundColor: sliderBackgroundColor,\n padding: sliderPadding,\n border: sliderBorder,\n }\"\n >\n <!-- Hover Circle -->\n <span\n v-if=\"!disabled && showHoverCircle\"\n class=\"hover-circle\"\n :style=\"{\n backgroundColor: hoverCircleColor,\n left: leftHoverCircle,\n top: topHoverCircle,\n 'z-index': zHoverCircle,\n }\"\n ></span>\n\n <span\n class=\"icon-wrapper\"\n :class=\"{\n 'icon-present': hasIcon,\n 'icon-absent': !hasIcon,\n active: isChecked,\n }\"\n :style=\"{\n backgroundColor: circleColor,\n padding: circlePadding,\n height: circleHeight,\n width: circleWidth,\n opacity: circleOpacity\n }\"\n >\n <img\n v-if=\"isChecked && hasIcon && !disabled\"\n src=\"../img/CheckBoldBlue60.svg\"\n alt=\"On Icon\"\n />\n <img\n v-if=\"!isChecked && hasIcon && !disabled\"\n src=\"../img/CrossoutNeutral10.svg\"\n alt=\"Off Icon\"\n />\n <img\n v-if=\"!isChecked && hasIcon && disabled\"\n src=\"../img/CrossoutNeutral30.svg\"\n alt=\"Off Icon\"\n />\n <img\n v-if=\"isChecked && hasIcon && disabled\"\n src=\"../img/CheckBoldNeutral30.svg\"\n alt=\"Off Icon\"\n />\n </span>\n </span>\n </label>\n</template>\n\n<script>\nimport \"../../config/styles/variables.css\";\n\nexport default {\n name: \"SwitchV3\",\n data() {\n return {\n isChecked: this.defaultChecked,\n circleColor: \"var(--neutral-0, #ffffff)\",\n sliderBackgroundColor: \"var(--neutral-20, #e6e7e9)\",\n hoverCircleColor: \"\",\n showHoverCircle: false,\n leftHoverCircle: \"16px\",\n topHoverCircle: \"-4px\",\n zHoverCircle: \"-1\",\n stateLock: false,\n sliderPadding: \"0 var(--Spacing-1, 4px)\",\n circlePadding: \"12px\",\n circleHeight: \"2px\",\n circleWidth: \"2px\",\n };\n },\n props: {\n defaultChecked: {\n type: Boolean,\n default: false,\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n hasIcon: {\n type: Boolean,\n default: false,\n },\n },\n methods: {\n handleMouseDown() {\n if (this.disabled \|\| this.stateLock) return;\n\n this.circlePadding = \"14px\";\n this.hoverCircleColor =\n \"var( --state-layer-primary-opacity-12, rgba(0, 159, 227, 0.12))\";\n \n if (this.isChecked) {\n this.sliderPadding = \"0px 2px\";\n } else {\n this.sliderPadding = \"0px 10px 0px 0px\";\n\n if (!this.hasIcon) {\n this.leftHoverCircle = \"-6px\";\n }\n }\n },\n handleMouseUp() {\n if (this.disabled \|\| this.stateLock) return;\n\n this.stateLock = true;\n this.sliderPadding = \"0 var(--Spacing-1, 4px)\";\n\n this.circlePadding = \"12px\";\n\n setTimeout(() => {\n this.stateLock = false;\n\n if (!this.isChecked) {\n this.circlePadding = \"8px\";\n\n //OFF with icon\n if (this.hasIcon) {\n this.circlePadding = \"12px\";\n this.sliderPadding = \"0 2px\";\n }\n }\n if(this.showHoverCircle)\n this.handleStyleOnHover();\n }, 10);\n },\n onHover() {\n if (this.stateLock \|\| this.disabled) return;\n\n this.handleStyleOnHover();\n },\n onLeave() {\n if (this.stateLock \|\| this.disabled) return;\n\n this.showHoverCircle = false;\n\n if (this.isChecked) {\n this.circleColor = \"var(--neutral-0, #ffffff)\";\n this.sliderBackgroundColor = \"var(--blue-60, #009fe3)\";\n } else {\n this.circleColor = \"var(--neutral-60, #687178)\";\n this.sliderBackgroundColor = \"var(--neutral-20, #e6e7e9)\";\n }\n\n // BE AWARE THAT AN EVENT HAS TO BE FIRED WHEN MOUSEDOWN!!\n this.handleMouseUp()\n },\n handleStyleOnHover() {\n this.showHoverCircle = true;\n\n // switch ON\n if (this.isChecked) {\n this.circleColor = \"var(--blue-20, rgba(0, 159, 227, 0.2))\";\n this.hoverCircleColor = \"var(--state-layer-primary-opacity-8, rgba(0, 159, 227, 0.08))\";\n this.leftHoverCircle = \"16px\";\n this.topHoverCircle = \"-4px\";\n this.sliderBackgroundColor = \"var(--blue-60, #009fe3)\";\n this.zHoverCircle = \"-1\";\n }\n // switch OFF\n else {\n this.circleColor = \"var(--neutral-60, #687178)\";\n this.hoverCircleColor =\n \"var(--state-layer-on-surface-opacity-8, rgba(11, 26, 37, 0.08))\";\n this.leftHoverCircle = \"-8px\";\n this.topHoverCircle = \"-6px\";\n this.sliderBackgroundColor = \"var(--neutral-0, #ffffff)\";\n this.circleColor = \"var(--neutral-80)\";\n this.zHoverCircle = \"100\";\n\n if (this.hasIcon) {\n this.leftHoverCircle = \"-6px\";\n this.topHoverCircle = \"-6px\";\n }\n }\n },\n },\n mounted() {\n // switch ON\n if (this.defaultChecked) {\n this.isChecked = true;\n this.circleColor = \"var(--neutral-0, #ffffff)\";\n this.sliderBackgroundColor = \"var(--blue-60, #009fe3)\";\n } else {\n /** switch OFF /\n this.isChecked = false;\n this.circleColor = \"var(--neutral-60, #687178)\";\n this.sliderBackgroundColor = \"var(--neutral-20, #e6e7e9)\";\n this.circlePadding = \"8px\";\n\n // OFF and has icon\n if (this.hasIcon) {\n this.circlePadding = \"12px\";\n this.sliderPadding = \"0 2px\";\n }\n }\n\n if (this.disabled) {\n this.circleColor = \"var(--neutral-5, #d9d9d9)\";\n this.sliderBackgroundColor = \"var(--neutral-30, #f0f0f0)\";\n this.sliderBorder = \"var(--neutral-30)\";\n if (!this.isChecked) {\n this.circleColor = \"var(--neutral-60, #d9d9d9)\";\n this.sliderBackgroundColor = \"var(--neutral-10)\";\n this.sliderBorder = \"2px solid var(--neutral-30, #D5D7DA)\";\n this.circleOpacity = \"0.38\"\n }\n }\n },\n};\n</script>\n\n<style scoped>\n.switch {\n position: relative;\n display: inline-block;\n width: 52px;\n height: 32px;\n z-index: 1;\n}\n\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.slider {\n position: relative;\n cursor: pointer;\n width: 52px;\n height: 32px;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding: 0 var(--Spacing-1, 4px);\n background: var(--blue-60, #009fe3);\n border-radius: var(--Button-Radius, 24px);\n transition: background-color 0.2s ease, justify-content 0.2s ease,\n padding 0.2s ease;\n}\n\n/ Hover Circle /\n.hover-circle {\n position: absolute;\n top: -4px;\n left: 16px;\n width: 40px;\n height: 40px;\n background-color: var(--blue-20, rgba(0, 159, 227, 0.2));\n border-radius: 50%;\n pointer-events: none;\n z-index: -1;\n}\n\n/ Circle (inside the slider) /\n.icon-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 12px;\n background-color: var(--neutral-0, #ffffff);\n border-radius: var(--Button-Radius, 24px);\n z-index: 2;\n transition: transform 0.2s ease, padding 0.1s ease;\n}\n\n/* Circle, icon present, not active /\n.icon-wrapper.icon-present {\n height: 2px;\n width: 2px;\n padding: 12px;\n background-color: var(--neutral-60, #687178);\n transition: background-color 0.2s ease, padding 0.2s ease;\n}\n\n/* Circle: icon present active /\n.icon-wrapper.icon-present.active {\n height: 2px;\n width: 2px;\n padding: 12px;\n background-color: var(--neutral-0, #ffffff);\n transition: background-color 0.2s ease, padding 0.2s ease;\n}\n\n/ circle, icon not present /\n.icon-wrapper.icon-absent {\n padding: 12px;\n background-color: var(--neutral-60, #687178);\n transition: background-color 0.2s ease, padding 0.2s ease;\n}\n\n/ circle, icon not present but active /\n.icon-wrapper.icon-absent.active {\n padding: 12px;\n background-color: var(--neutral-0, #ffffff);\n transition: background-color 0.2s ease, padding 0.2s ease;\n}\n\n.icon-wrapper img {\n height: 16px;\n width: 16px;\n pointer-events: none;\n}\n\n/ checked followed by class slider /\ninput:checked + .slider {\n justify-content: flex-end;\n position: relative;\n border: none;\n transition: box-shadow 0.2s ease, background-color 0.2s ease,\n justify-content 0.2s ease, padding 0.2s ease;\n}\n\n/* needed to keep border when sliding /\ninput:checked + .slider::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: inherit;\n box-shadow: inset 0 0 0 2px var(--blue-60, #009fe3);\n pointer-events: none;\n transition: box-shadow 0.4s ease, padding 0.2s ease;\n}\n\n/ Prevent ::before styles when disabled /\ninput:disabled + .slider::before {\n content: none;\n box-shadow: none;\n}\n\n/ not \"checked\", must be followed by class slider /\ninput:not(:checked) + .slider {\n background: var(--neutral-20, #e6e7e9);\n border-radius: var(--Button-Radius, 24px);\n border: 2px solid var(--neutral-60, #687178);\n}\n\n/ focus styles /\ninput:focus + .slider {\n outline: none;\n position: relative;\n}\n\ninput:not(:checked):focus-visible + .slider::after {\n content: \"\";\n position: absolute;\n width: 60px;\n height: 40px;\n top: -6px; \n left: -6px;\n border-radius: inherit; \n border: 2px solid var(--Focused, rgba(0, 159, 227, 0.3)); \n background-color: transparent; \n pointer-events: none; \n z-index: 1; \n}\n\n/ Focus ring for the checked state */\ninput:checked:focus-visible + .slider::after {\n content: \"\";\n position: absolute;\n width: 60px; \n height: 40px; \n top: -4px; \n left: -4px;\n border-radius: inherit; \n border: 2px solid var(--Focused, rgba(0, 159, 227, 0.3)); \n background-color: transparent;\n pointer-events: none;\n z-index: 1;\n transition: all 0.2s ease;\n}\n</style>\n"],"names":["_sfc_main","_hoisted_1","_imports_0","_imports_1","_imports_2","_imports_3","_createElementBlock","$options","args","_createElementVNode","_cache","$event","$data","$props","_createTextVNode","_normalizeStyle","_ctx","_createCommentVNode","_normalizeClass","_openBlock","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5"],"mappings":"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"}

package/dist/data-provider-interface/HappyFlowComponents/ui/SwitchV3.vue2.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
-const _ = "";
+const e = "";
 export {
-  _ as default
+  e as default
 };
 //# sourceMappingURL=SwitchV3.vue2.mjs.map

package/dist/data-provider-interface/HappyFlowComponents/ui/Toast.vue.mjs CHANGED Viewed

@@ -1,12 +1,12 @@
 import { ref as p, openBlock as a, createElementBlock as l, normalizeClass as u, createElementVNode as o, createTextVNode as s, toDisplayString as m, createVNode as n } from "vue";
-import f from "../img/x-circleFill.svg.mjs";
-import c from "../img/InfoFill.svg.mjs";
+import c from "../img/x-circleFill.svg.mjs";
+import f from "../img/InfoFill.svg.mjs";
 import d from "../img/CheckCircleFill.svg.mjs";
 import y from "../img/WarningFill.svg.mjs";
 import g from "./TextButtonSmall.vue.mjs";
 import v from "./CrossOutButton.vue.mjs";
 import "./Toast.vue2.mjs";
-const x = { class: "imgTextWrap" }, _ = ["src"], B = { class: "d-flex" }, W = {
+const x = { class: "imgTextWrap" }, T = ["src"], _ = { class: "d-flex" }, W = {
   __name: "Toast",
   props: {
     text: {
@@ -20,7 +20,7 @@ const x = { class: "imgTextWrap" }, _ = ["src"], B = { class: "d-flex" }, W = {
   },
   setup(i) {
     const r = p(), t = i;
-    return t.type === "info" && (r.value = c), t.type === "success" && (r.value = d), t.type === "warning" && (r.value = y), t.type === "error" && (r.value = f), (S, e) => (a(), l("div", {
+    return t.type === "info" && (r.value = f), t.type === "success" && (r.value = d), t.type === "warning" && (r.value = y), t.type === "error" && (r.value = c), (B, e) => (a(), l("div", {
       class: u(["toastBody", {
         error: t.type === "error",
         warning: t.type === "warning",
@@ -32,15 +32,18 @@ const x = { class: "imgTextWrap" }, _ = ["src"], B = { class: "d-flex" }, W = {
         o("img", {
           src: r.value,
           alt: ""
-        }, null, 8, _),
+        }, null, 8, T),
         e[0] || (e[0] = s()),
         o("span", null, m(t.text.value), 1)
       ]),
       e[2] || (e[2] = s()),
-      o("div", B, [
-        n(g, { buttonText: "Aktionen" }),
+      o("div", _, [
+        n(g, {
+          buttonText: "Aktionen",
+          class: "m-auto"
+        }),
         e[1] || (e[1] = s()),
-        n(v)
+        n(v, { type: "inToast" })
       ])
     ], 2));
   }

package/dist/data-provider-interface/HappyFlowComponents/ui/Toast.vue.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toast.vue.mjs","sources":["../../../../lib/data-provider-interface/HappyFlowComponents/ui/Toast.vue"],"sourcesContent":["<template>\n <div class=\"toastBody\" :class=\"{\n 'error': props.type === 'error',\n 'warning': props.type === 'warning',\n 'info': props.type === 'info',\n 'success': props.type === 'success',\n }\">\n <div class=\"imgTextWrap\">\n <img :src=\"src\" alt=\"\">\n <span>{{ props.text.value }}</span>\n </div>\n <div class=\"d-flex\">\n <TextButtonSmall buttonText=\"Aktionen\" />\n <CrossOutButton />\n </div>\n </div>\n</template>\n<script setup>\nimport { ref, computed } from 'vue';\nimport Error from '../img/x-circleFill.svg'\nimport Info from '../img/InfoFill.svg'\nimport Success from '../img/CheckCircleFill.svg'\nimport Warning from '../img/WarningFill.svg'\nimport TextButtonSmall from \"./TextButtonSmall.vue\";\nimport CrossOutButton from \"./CrossOutButton.vue\";\n\nconst src = ref()\nconst props = defineProps({\n text: {\n type: String,\n required: true\n },\n type: {\n type: String,\n required: true\n\n }\n});\nconst fillSrc = (() => {\n if (props.type === \"info\") {\n src.value = Info\n }\n if (props.type === \"success\") {\n src.value = Success\n }\n if (props.type === \"warning\") {\n src.value = Warning\n }\n if (props.type === \"error\") {\n src.value = Error\n }\n\n})();\n</script>\n<style>\n.imgTextWrap {\n display: flex;\n align-items: center;\n gap: var(--Spacing-2, 8px);\n}\n\n.actionWrap {\n display: flex;\n align-items: center;\n gap: var(--Spacing-3, 16px);\n}\n\n.toastBody {\n display: flex;\n width: 772px;\n height: 72px;\n padding: var(--Spacing-3, 16px);\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n\n color: var(--Colour-neutral-Neutral80, #3D4952);\n\n /* Copy/Copy-Large-SemiBold /\n font-family: Inter;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 26px;\n\n / 162.5% /\n div {\n display: flex;\n align-items: center;\n }\n}\n\n.error {\n border-radius: var(--Border-Radius, 8px);\n border: 1px solid var(--fill-error, #E53B46);\n background: var(--Colour-red-Red20, #FFEFF0);\n\n / Elevation light/3 /\n box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);\n}\n\n.warning {\n border-radius: var(--Border-Radius, 8px);\n border: 1px solid var(--fill-warning, #FFA741);\n background: var(--Colour-orange-Orange20, #FFEEDB);\n\n / Elevation light/3 /\n box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);\n}\n\n.info {\n border-radius: var(--Border-Radius, 8px);\n border: 1px solid var(--Colour-blue-Blue50, #2BAFE9);\n background: var(--Colour-blue-Blue20, #D4EDFC);\n\n / Elevation light/3 /\n box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);\n}\n\n.success {\n border-radius: var(--Border-Radius, 8px);\n border: 1px solid var(--fill-success, #70CC44);\n background: var(--Colour-green-Green20, #E8F8E1);\n\n / Elevation light/3 */\n box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);\n}\n</style>"],"names":["src","ref","props","__props","Info","Success","Warning","Error"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0BA,UAAMA,IAAMC,EAAI,GACVC,IAAQC;AAWE,WACRD,EAAM,SAAS,WACfF,EAAI,QAAQI,IAEZF,EAAM,SAAS,cACfF,EAAI,QAAQK,IAEZH,EAAM,SAAS,cACfF,EAAI,QAAQM,IAEZJ,EAAM,SAAS,YACfF,EAAI,QAAQO~~;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"Toast.vue.mjs","sources":["../../../../lib/data-provider-interface/HappyFlowComponents/ui/Toast.vue"],"sourcesContent":["<template>\n <div class=\"toastBody\" :class=\"{\n 'error': props.type === 'error',\n 'warning': props.type === 'warning',\n 'info': props.type === 'info',\n 'success': props.type === 'success',\n }\">\n <div class=\"imgTextWrap\">\n <img :src=\"src\" alt=\"\">\n <span>{{ props.text.value }}</span>\n </div>\n <div class=\"d-flex\">\n <TextButtonSmall buttonText=\"Aktionen\" class=\"m-auto\" />\n <CrossOutButton :type=\"'inToast'\" />\n </div>\n </div>\n</template>\n<script setup>\nimport { ref, computed } from 'vue';\nimport Error from '../img/x-circleFill.svg'\nimport Info from '../img/InfoFill.svg'\nimport Success from '../img/CheckCircleFill.svg'\nimport Warning from '../img/WarningFill.svg'\nimport TextButtonSmall from \"./TextButtonSmall.vue\";\nimport CrossOutButton from \"./CrossOutButton.vue\";\n\nconst src = ref()\nconst props = defineProps({\n text: {\n type: String,\n required: true\n },\n type: {\n type: String,\n required: true\n\n }\n});\nconst fillSrc = (() => {\n if (props.type === \"info\") {\n src.value = Info\n }\n if (props.type === \"success\") {\n src.value = Success\n }\n if (props.type === \"warning\") {\n src.value = Warning\n }\n if (props.type === \"error\") {\n src.value = Error\n }\n\n})();\n</script>\n<style>\n.imgTextWrap {\n display: flex;\n align-items: center;\n gap: var(--Spacing-2, 8px);\n}\n\n.actionWrap {\n display: flex;\n align-items: center;\n gap: var(--Spacing-3, 16px);\n}\n\n.toastBody {\n display: flex;\n width: 772px;\n height: 72px;\n padding: var(--Spacing-3, 16px);\n justify-content: space-between;\n align-items: center;\n flex-shrink: 0;\n\n color: var(--Colour-neutral-Neutral80, #3D4952);\n\n /* Copy/Copy-Large-SemiBold /\n font-family: Inter;\n font-size: 16px;\n font-style: normal;\n font-weight: 600;\n line-height: 26px;\n\n / 162.5% /\n div {\n display: flex;\n align-items: center;\n }\n}\n\n.error {\n border-radius: var(--Border-Radius, 8px);\n border: 1px solid var(--fill-error, #E53B46);\n background: var(--Colour-red-Red20, #FFEFF0);\n\n / Elevation light/3 /\n box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);\n}\n\n.warning {\n border-radius: var(--Border-Radius, 8px);\n border: 1px solid var(--fill-warning, #FFA741);\n background: var(--Colour-orange-Orange20, #FFEEDB);\n\n / Elevation light/3 /\n box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);\n}\n\n.info {\n border-radius: var(--Border-Radius, 8px);\n border: 1px solid var(--Colour-blue-Blue50, #2BAFE9);\n background: var(--Colour-blue-Blue20, #D4EDFC);\n\n / Elevation light/3 /\n box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);\n}\n\n.success {\n border-radius: var(--Border-Radius, 8px);\n border: 1px solid var(--fill-success, #70CC44);\n background: var(--Colour-green-Green20, #E8F8E1);\n\n / Elevation light/3 */\n box-shadow: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px 0px rgba(0, 0, 0, 0.30);\n}\n</style>"],"names":["src","ref","props","__props","Info","Success","Warning","Error"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA0BA,UAAMA,IAAMC,EAAI,GACVC,IAAQC;AAWE,WACRD,EAAM,SAAS,WACfF,EAAI,QAAQI,IAEZF,EAAM,SAAS,cACfF,EAAI,QAAQK,IAEZH,EAAM,SAAS,cACfF,EAAI,QAAQM,IAEZJ,EAAM,SAAS,YACfF,EAAI,QAAQO;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}