@cling-se/widget 0.9.27 → 0.9.29

package/dist/template-641a5e0d.js

@@ -1,535 +0,0 @@
-import { Y as d, P as l, c } from "./main-989855f4.js";
-import { g as o } from "./image-1b55e804.js";
-function t(e) {
-  return btoa(encodeURIComponent(e));
-}
-function y(e) {
-  return decodeURIComponent(atob(e));
-}
-const g = {
-  previewUrl: `<div style="position: relative;"><img src="${o(
-    "/account/document/custom/headerCircularGradient.image.png"
-  )}" 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("")
-  }
-}, p = {
-  previewUrl: `<div style="position: relative;"><img src="${o(
-    "/account/document/custom/columnGallery.image.png"
-  )}" 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("")
-  }
-}, u = {
-  previewUrl: `<div style="position: relative;"><img src="${o(
-    "/account/document/custom/roiCalculator.image.png"
-  )}" 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);
-`)
-  }
-}, m = [
-  g,
-  u,
-  p
-], r = "custom", s = () => ({
-  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 */")
-}), h = (e) => [
-  {
-    itemId: r,
-    itemType: r,
-    value: {
-      custom: `data.${r}-${e}`
-    },
-    parentId: "0",
-    nodeId: l()
-  }
-], v = (e) => [
-  {
-    key: `${r}-${e}`,
-    defaultValue: s(),
-    $ref: `${c.api.baseUrl}/schemas/custom/1.json`
-  }
-], b = (e) => ({
-  [`data.${r}-${e}`]: s()
-}), k = ({ includeMockData: e = !1, contentData: i = null } = {}) => {
-  const a = l();
-  let n = null;
-  return typeof i == "function" ? n = i(a) : e && (n = b(a)), {
-    readView: h(a),
-    validation: v(a),
-    ...n && { data: n }
-  };
-};
-d.loadOptions({
-  namespaces: "customTemplate",
-  messages: {
-    en: {
-      title: "Custom"
-    },
-    sv: {
-      title: "Custom"
-    }
-  }
-});
-const f = {
-  previewUrl: `
-  <div style="position: relative;">
-  <img src="${o(
-    "/account/document/custom/blank.png"
-  )}" style="width: 100%; height: auto;">
-  <div class="submenu-item-badge">
-    ${d.t("customTemplate:title")}
-  </div>
-  </div>
-  `,
-  data: s()
-}, _ = ({ language: e = "en" } = {}) => [f, ...m].map((i) => ({
-  previewUrl: i.previewUrl,
-  contentData: (a) => ({
-    [`data.${r}-${a}`]: i.data
-  })
-}));
-export {
-  t as a,
-  y as b,
-  _ as c,
-  k as d,
-  s as g
-};