@cling-se/widget 0.9.3 → 0.9.5

package/dist/template-b3af7583.js

@@ -0,0 +1,528 @@
+import { P as s, L as d, k as l } from "./main-95207159.js";
+import c from "/Users/max.antonsson/Documents/Github/cling-vue/widget/dist/assets/headerCircularGradient.image-13878.png";
+import g from "/Users/max.antonsson/Documents/Github/cling-vue/widget/dist/assets/columnGallery.image-24825.png";
+import p from "/Users/max.antonsson/Documents/Github/cling-vue/widget/dist/assets/roiCalculator.image-14704.png";
+import u from "/Users/max.antonsson/Documents/Github/cling-vue/widget/dist/assets/blank-10674.png";
+function t(e) {
+  return btoa(encodeURIComponent(e));
+}
+function $(e) {
+  return decodeURIComponent(atob(e));
+}
+const h = {
+  previewUrl: `<div style="position: relative;"><img src="${c}" style="width: 100%; height: auto;"></div>`,
+  data: {
+    html: t(`
+  <!-- Add your HTML code here -->
+  <div class="root">
+    <div class="outer-container">
+      <div class="inner-container">
+        <div class="title">Proposal Title</div>
+        <div class="text">Prepared for Name Namesson</div>
+        <div class="logo">
+          Logo
+        </div>
+      </div>
+    </div>
+  </div>
+  `),
+    css: t(`
+  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap');
+  
+  body,html {
+    margin: 0;
+    font-family: 'Poppins', sans-serif;
+    font-size: 16px;
+  }
+  
+  .root {
+    background-color: green;
+    background-image: radial-gradient(100% 150% at 13.58% 44.42%, #001855 0%, #00917d 100%);
+    position: relative;
+    display: grid;
+    place-items: center;
+    padding: 120px 100px;
+    overflow: hidden;
+  }
+  .root::before {
+    position: absolute;
+    content: '';
+    height: 100%;
+    width: 40%;
+    right: -10%;
+    top: 20%;
+    pointer-events: none;
+    border-radius: 100%;
+    background-color: rgb(0, 255, 200);
+    filter: blur(200px);
+  }
+  .root::after {
+    position: absolute;
+    content: '';
+    height: 200vh;
+    width: 200vh;
+    right: 40%;
+    top: 0;
+    transform: translateY(-40%);
+    pointer-events: none;
+    border-radius: 100%;
+    background: radial-gradient(46.29% 46.29% at 47.93% 53.28%, #00449c 0%, rgba(4, 200, 207, 0.404) 100%);
+    box-shadow: 0px 0px 250px 250px rgba(4, 76, 124, 0.8);
+  }
+  .outer-container {
+    position: relative;
+    z-index: 1;
+    background-color: red;
+    background: radial-gradient(100% 100% at 50% 0%, #220081 0%, #00b7cf 100%);
+    box-shadow: 0 20px 50px 10px rgba(0,0,0,0.1);
+    overflow: hidden;
+    width: 100%;
+    max-width: 1000px;
+  }
+  .outer-container::after {
+    content: '';
+    position: absolute;
+    pointer-events: none;
+    background: radial-gradient(46.29% 46.29% at 50% 50%, #00ffc8 0%, rgb(116, 4, 207) 100%);
+    width: 200%;
+    border-radius: 50%;
+    height: 300%;
+    top: -20%;
+    right: 15%;
+  }
+  .inner-container {
+    position: relative;
+    z-index: 1;
+    margin: 80px;
+    padding: 60px;
+    background-color: #FFFFFF;
+    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
+  }
+  .title {
+    font-size: 2.8rem;
+    font-weight: 400;
+    padding-top: 13rem;
+  }
+  .text {
+    color: #3b385f;
+    font-weight: 300;
+  }
+  .logo {
+    color: rgb(180, 180, 206);
+    position: absolute;
+    right: 40px;
+    top: 40px;
+    border: 3px solid currentColor;
+    padding: 4px;
+    line-height: 1;
+    font-size: 11px;
+    text-transform: uppercase;
+    font-weight: 700;
+  }
+    `),
+    javascript: t("")
+  }
+}, m = {
+  previewUrl: `<div style="position: relative;"><img src="${g}" style="width: 100%; height: auto;"></div>`,
+  data: {
+    html: t(`
+<div class="container">
+  <div class="header">
+    <div class="title">A title</div>
+    <div class="text">This is where you can add some more text.</div>
+  </div>
+  <div class="grid">
+    <div class="column-xs-12 column-md-4">
+      <figure class="img-container">
+        <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800" />
+      </figure>
+      <div class="img-text">
+        This is a description.
+      </div>
+    </div>
+    <div class="column-xs-12 column-md-4">
+      <figure class="img-container">
+        <img src="https://images.unsplash.com/photo-1526170286768-b3c80b34b036?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800" />
+      </figure>
+      <div class="img-text">
+        This is a description.
+      </div>
+    </div>
+    <div class="column-xs-12 column-md-4">
+      <figure class="img-container">
+        <img src="https://images.unsplash.com/photo-1526170160160-1a5eb242ab58?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=800">
+      </figure>
+      <div class="img-text">
+        This is a description.
+      </div>
+    </div>
+  </div>
+</div>
+  `),
+    css: t(`
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;700&display=swap');
+
+body, html {
+  margin: 0;
+  font-size: 16px;
+  font-family: 'Space Grotesk', sans-serif;
+}
+
+.container {
+  padding: 60px 1rem;
+}
+
+.header {
+  text-align: center;
+  padding-bottom: 40px;
+}
+
+.title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  padding-bottom: 0.25em;
+}
+
+.text {
+  color: hsla(0, 0%, 35%);
+  font-weight: 300;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-gap: 30px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.img-container {
+  width: 100%;
+  height: 400px;
+  overflow: hidden;
+  margin: 0;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.15);
+}
+
+img {
+  width: 100%;
+  height: 400px;
+  object-fit: cover;
+}
+
+.img-text {
+  font-size: 14px;
+  padding-top: 8px;
+  text-align: center;
+  color: hsla(0, 0%, 45%);
+}
+    `),
+    javascript: t("")
+  }
+}, v = {
+  previewUrl: `<div style="position: relative;"><img src="${p}" style="width: 100%; height: auto;"></div>`,
+  data: {
+    html: t(`
+<section class="root">
+  <div class="container">
+    <h2>Savings calculator</h2>
+    <h1>
+      $<span class="savings-amount"></span>
+    </h1>
+    <p>Savings per year.</p>
+    <div class="range-slider">
+      <div class="range-slider__range-base"></div>
+      <div class="range-slider__range-filled"></div>
+      <input
+        class="range-slider__range"
+        type="range"
+        value="100"
+        min="10"
+        max="500"
+        step="1"
+      />
+    </div>
+    <h4>
+      Number of seats: <span class="value-amount"></span>
+    </h4>
+  </div>
+</section>  
+  `),
+    css: t(`
+html, body {
+  margin: 0;
+  font-family: sans-serif;
+  color: white;
+}
+
+.root {
+  background-color: hsl(0, 0%, 95%);
+  padding: 100px 0;
+  background: linear-gradient(hsla(0, 0%, 0%, 0.2), hsla(0, 0%, 0%, 0.6)), url(https://images.unsplash.com/photo-1497366811353-6870744d04b2?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1400);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+.container {
+  padding: 20px;
+  text-align: center;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+h1 {
+  font-size: 4.25rem;
+  margin: 0;
+  line-height: 1.2;
+  padding: 0;
+}
+h2 {
+  font-size: 1.25rem;
+  padding: 0 0 1rem 0;
+  margin: 0;
+  color: hsl(35, 100%, 70%);
+  font-weight: normal;
+}
+
+h4 {
+  font-size: 1rem;
+  padding: 0;
+  margin: 1rem 0 0 0;
+  font-weight: normal;
+  opacity: 0.85;
+}
+
+p {
+  font-size: 18px;
+  padding: 0;
+  margin: 0;
+  line-height: 1.5;
+  padding-bottom: 3rem;
+  opacity: 0.8;
+  font-weight: lighter;
+}
+
+
+/* Input slider */
+:root {
+  --range-width: 100%;
+  --range-max-width: 460px;
+  --range-handle-color: white;
+  --range-handle-color-hover: hsl(0, 0%, 95%);
+  --range-handle-size: 34px;
+  --range-filled-color: hsl(35, 100%, 60%);
+  --range-track-color: hsla(0, 0%, 100%, 0.4);
+  --range-track-height: 10px;
+}
+.range-slider {
+  width: var(--range-width);
+  max-width: var(--range-max-width);
+  margin: 0 auto;
+  position: relative;
+  height: 2em;
+}
+
+.range-slider__range {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  position: relative;
+
+}
+.range-slider__range-base {
+  width: 100%;
+  height: var(--range-track-height);
+  border-radius: 5px;
+  background: var(--range-track-color);
+  position: absolute;
+  left: 0;
+  top: 50%;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+.range-slider__range-filled {
+  height: var(--range-track-height);
+  border-radius: 5px;
+  background: var(--range-filled-color);
+  position: absolute;
+  left: 0;
+  top: 50%;
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+/* Range Handle */
+.range-slider__range::-webkit-slider-thumb {
+  appearance: none;
+  width: var(--range-handle-size);
+  height: var(--range-handle-size);
+  border-radius: 50%;
+  background: var(--range-handle-color);
+  cursor: pointer;
+  transition: background 0.15s ease-in-out;
+  box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.2);
+}
+.range-slider__range::-webkit-slider-thumb:hover {
+  background: var(--range-handle-color-hover);
+}
+
+.range-slider__range:active::-webkit-slider-thumb {
+  background: var(--range-handle-color-hover);
+}
+
+.range-slider__range::-moz-range-thumb {
+  width: var(--range-handle-size);
+  height: var(--range-handle-size);
+  border: 0;
+  border-radius: 50%;
+  background: var(--range-handle-color);
+  cursor: pointer;
+  transition: background 0.15s ease-in-out;
+  box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.2);
+
+}
+.range-slider__range::-moz-range-thumb:hover {
+  background: var(--range-handle-color-hover);
+}
+
+.range-slider__range:active::-moz-range-thumb {
+  background: var(--range-handle-color-hover);
+}
+
+/* Focus state */
+.range-slider__range:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
+}
+
+/* Firefox Overrides */
+::-moz-range-track {
+  background: var(--range-track-color);
+  border: 0;
+}
+
+input::-moz-focus-inner,
+input::-moz-focus-outer {
+  border: 0;
+}
+    `),
+    javascript: t(`
+const inputSlider = document.querySelector('.range-slider__range');
+const sliderFill = document.querySelector('.range-slider__range-filled');
+const savingsAmount = document.querySelector('.savings-amount');
+const valueAmount = document.querySelector('.value-amount');
+
+
+function setContent(input) {
+  const newWidth = Math.min((100 * (parseInt(input.value, 10) - parseInt(input.min, 10))) / (parseInt(input.max, 10) - parseInt(input.min, 10)), 100) + '%';
+  sliderFill.style.width = newWidth;
+
+  const savingsPerSeat = 300;
+  savingsAmount.innerText = new Intl.NumberFormat().format(savingsPerSeat * input.value);
+  valueAmount.innerText = new Intl.NumberFormat().format(input.value);
+}
+
+function onInput(event) {
+  const el = event.target;
+  setContent(el);
+}
+
+inputSlider.addEventListener('input', onInput);
+
+setContent(inputSlider);
+`)
+  }
+}, f = [
+  h,
+  v,
+  m
+], r = "custom", n = () => ({
+  javascript: t(`// Add your javascript here
+// You can also access all the document data 
+// from the global variable doc
+
+// To see what's available, uncomment the line below:
+// console.log(window.doc);
+  
+// Listen to the event 'docUpdate' to detect updates on doc
+// window.addEventListener('docUpdate', function(e) {
+//   // A change has been detected on doc
+// });`),
+  html: t(`
+<!--
+  Type your HTML inside this tab.
+
+  Tip: You can access variables with the following syntax: {{PATH_TO_VARIABLE}}
+
+  For example:
+  - {{data.name}} // Prints the document name
+  - {{data.clients[0].name}} // Prints the name of the first client
+
+  To see all available data variables and paths, switch to the Data-tab,
+-->
+`),
+  css: t("/* Add your CSS code here */")
+}), b = (e) => [{
+  itemId: r,
+  itemType: r,
+  value: {
+    custom: `data.${r}-${e}`
+  },
+  parentId: "0",
+  nodeId: d()
+}], x = (e) => [{
+  key: `${r}-${e}`,
+  defaultValue: n(),
+  $ref: `${l.api.baseUrl}/schemas/custom/1.json`
+}], w = (e) => ({
+  [`data.${r}-${e}`]: n()
+}), A = ({ includeMockData: e = !1, contentData: i = null } = {}) => {
+  const a = d();
+  let o = null;
+  return typeof i == "function" ? o = i(a) : e && (o = w(a)), {
+    readView: b(a),
+    validation: x(a),
+    ...o && {
+      data: o
+    }
+  };
+};
+s.loadOptions({
+  namespaces: "customTemplate",
+  messages: {
+    en: {
+      title: "Custom"
+    },
+    sv: {
+      title: "Custom"
+    }
+  }
+});
+const y = {
+  previewUrl: `
+  <div style="position: relative;">
+  <img src="${u}" style="width: 100%; height: auto;">
+  <div class="submenu-item-badge">
+    ${s.t("customTemplate:title")}
+  </div>
+  </div>
+  `,
+  data: n()
+}, H = ({ language: e = "en" } = {}) => [y, ...f].map((i) => ({
+  previewUrl: i.previewUrl,
+  contentData: (a) => ({
+    [`data.${r}-${a}`]: i.data
+  })
+}));
+export {
+  n as a,
+  $ as b,
+  H as c,
+  t as d,
+  A as g
+};

package/dist/{throttle-d7bed81a.js → throttle-a0ce8f66.js}

@@ -1,5 +1,5 @@
-import { f as n, i as l } from "./main-2d9b8259.js";
-import { a as o } from "./CDropdownItem-05d84f95.js";
+import { f as n, i as l } from "./main-95207159.js";
+import { a as o } from "./CDropdownItem-d46bf062.js";
 var f = o, g = l, c = "Expected a function";
 function u(a, i, t) {
   var r = !0, e = !0;

package/dist/{tinycolor-ef496244.js → tinycolor-65e7dc2e.js}

@@ -1,4 +1,4 @@
-import { f as he } from "./main-2d9b8259.js";
+import { f as he } from "./main-95207159.js";
 var N = { exports: {} };
 (function(R) {
   (function(c) {