@everymatrix/user-action-controller 1.32.4 → 1.33.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-87049e21.js');
+
+/*
+ Stencil Client Patch Esm v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchEsm = () => {
+    return index.promiseResolve();
+};
+
+const defineCustomElements = (win, options) => {
+  if (typeof window === 'undefined') return Promise.resolve();
+  return patchEsm().then(() => {
+  return index.bootstrapLazy([["player-user-consents_2.cjs",[[1,"user-action-controller",{"endpoint":[513],"userSession":[513,"user-session"],"userId":[513,"user-id"],"lang":[1537],"includeSubmitButton":[516,"include-submit-button"],"submitButtonText":[513,"submit-button-text"],"userNoticeText":[513,"user-notice-text"],"gmVersion":[1,"gm-version"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"queryFired":[32],"readyActionsCount":[32],"activeUserActions":[32],"userActionsValidated":[32],"receivedQueryResponses":[32],"limitStylingAppends":[32],"isLoading":[32],"mandatoryActionsChecked":[32]},[[0,"userLegislationConsent","userLegislationConsentHandler"]]],[1,"player-user-consents",{"lang":[1537],"queried":[516],"consentType":[513,"consent-type"],"mandatory":[516],"consentTitle":[513,"consent-title"],"clientStyling":[1,"client-styling"],"translationUrl":[513,"translation-url"],"textContent":[32],"limitStylingAppends":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/cjs/player-user-consents_2.cjs.entry.js

@@ -0,0 +1,455 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-87049e21.js');
+
+const DEFAULT_LANGUAGE$1 = 'en';
+const TRANSLATIONS$1 = {
+  en: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+  ro: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+  hr: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+  fr: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+  cs: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+  de: {
+    termsandconditions1: "I accept the ",
+    termsandconditions2: ", I have read and understood the ",
+    termsandconditions3: " as published on this site and confirm that I am over 18 years old.",
+    tc: "Terms and Conditions",
+    privacy: "Privacy Policy",
+    sms: "I consent to receive marketing communication via SMS.",
+    emailmarketing: "I consent to receive marketing communication via Email."
+  },
+};
+const getTranslations$1 = (url) => {
+  // fetch url, get the data, replace the TRANSLATIONS content
+  return new Promise((resolve) => {
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+      Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+          TRANSLATIONS$1[item][key] = data[item][key];
+        }
+      });
+      resolve(true);
+    });
+  });
+};
+const translate$1 = (key, customLang, values) => {
+  const lang = customLang;
+  let translation = TRANSLATIONS$1[lang !== undefined ? lang : DEFAULT_LANGUAGE$1][key];
+  if (values !== undefined) {
+    for (const [key, value] of Object.entries(values.values)) {
+      const regex = new RegExp(`{${key}}`, 'g');
+      translation = translation.replace(regex, value);
+    }
+  }
+  return translation;
+};
+
+const playerUserConsentsCss = ":host{display:block}.ConsentTitle{margin-bottom:0.2rem;font-weight:600}.UserConsent:hover{cursor:pointer}.UserConsent{display:flex;align-items:baseline}.MandatoryItem{color:#f00;font-size:1.2rem}.ConsentLink{text-decoration:underline;color:var(--emfe-w-color-primary);font-weight:bold}";
+
+const PlayerUserConsents = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.userLegislationConsent = index.createEvent(this, "userLegislationConsent", 7);
+    /**
+    * Language
+    */
+    this.lang = 'en';
+    /**
+     * 'true' when parent expects component to emit it's current value
+     */
+    this.queried = false;
+    /**
+     * the type of the consent, used to determine render details
+     */
+    this.consentType = '';
+    /**
+     * wether or not this consent is mandatory. Used for render details
+     */
+    this.mandatory = false;
+    /**
+     * the title of the consent to be displayed
+     */
+    this.consentTitle = '';
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    /**
+    * Translation url
+    */
+    this.translationUrl = '';
+    /**
+     * the text content to be rendered by the component. Determined at runtime
+     */
+    this.textContent = '';
+    this.limitStylingAppends = false;
+    this.goToTermsAndConditions = () => window.postMessage({ type: 'GoToTermsAndConditions' });
+    this.goToPrivacyPolicy = () => window.postMessage({ type: 'GoToPrivacyPolicy' });
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+  }
+  handleNewTranslations() {
+    getTranslations$1(this.translationUrl);
+  }
+  async componentWillLoad() {
+    if (this.translationUrl.length > 2) {
+      await getTranslations$1(this.translationUrl);
+    }
+  }
+  userLegislationConsentHandler() {
+    this.userLegislationConsent.emit({
+      type: this.consentType,
+      value: this.checkboxInput.checked
+    });
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  determineTextContent() {
+    return this.consentType === 'termsandconditions' ?
+      index.h("p", null, translate$1('termsandconditions1', this.lang), index.h("span", { class: "ConsentLink", onClick: this.goToTermsAndConditions }, translate$1('tc', this.lang)), translate$1('termsandconditions2', this.lang), index.h("span", { class: "ConsentLink", onClick: this.goToPrivacyPolicy }, translate$1('privacy', this.lang)), translate$1('termsandconditions3', this.lang))
+      : index.h("p", null, translate$1('consentType', this.lang));
+  }
+  render() {
+    if (this.queried) {
+      this.userLegislationConsentHandler();
+    }
+    return (index.h("div", { ref: el => this.stylingContainer = el }, index.h("p", { class: "ConsentTitle" }, this.consentTitle), index.h("label", { class: "UserConsent", htmlFor: "userConsent" }, index.h("input", { ref: el => this.checkboxInput = el, id: "userConsent", type: "checkbox", onInput: () => this.userLegislationConsentHandler() }), this.determineTextContent(), this.mandatory && index.h("span", { class: "MandatoryItem" }, "*"))));
+  }
+  static get watchers() { return {
+    "translationUrl": ["handleNewTranslations"]
+  }; }
+};
+PlayerUserConsents.style = playerUserConsentsCss;
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'cz', 'de', 'hr'];
+const TRANSLATIONS = {
+  en: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+  ro: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+  hr: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+  fr: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+  cs: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+  de: {
+    termsandconditions: 'Terms and Conditions',
+    sms: 'SMS marketing',
+    emailmarketing: 'Email marketing'
+  },
+};
+const getTranslations = (url) => {
+  // fetch url, get the data, replace the TRANSLATIONS content
+  return new Promise((resolve) => {
+    fetch(url)
+      .then((res) => res.json())
+      .then((data) => {
+      Object.keys(data).forEach((item) => {
+        for (let key in data[item]) {
+          TRANSLATIONS[item][key] = data[item][key];
+        }
+      });
+      resolve(true);
+    });
+  });
+};
+const translate = (key, customLang, values) => {
+  const lang = customLang;
+  let translation = TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+  if (values !== undefined) {
+    for (const [key, value] of Object.entries(values.values)) {
+      const regex = new RegExp(`{${key}}`, 'g');
+      translation = translation.replace(regex, value);
+    }
+  }
+  return translation;
+};
+
+const userActionControllerCss = ":host{display:block}.QueryReferenceContainer{height:100%;width:100%}.UserConsentNotice{font-size:1.2rem;font-weight:200;text-align:center}.CloseButton{width:25px;height:25px;align-self:flex-end}.UserActionController{font-family:Arial, Helvetica, sans-serif;font-weight:100;height:100%;width:100%;padding:1rem 1.5rem 2rem;background-color:#fff;display:flex;flex-direction:column;justify-content:space-between;border-radius:5%}.ConsentSubmitButton{font-size:1rem;padding:0.4rem 1.4rem;background:#fff;border:2px solid #000;color:#000;border-radius:5px;align-self:flex-end}.ConsentSubmitButton:disabled{border:2px solid #ccc;color:#ccc}@media screen and (max-width: 320px){.QueryReferenceContainer{font-size:0.8rem;color:blue}}.spinner{animation:rotate 2s linear infinite;z-index:2;position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;width:50px;height:50px}.spinner .path{stroke:var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1, 150;stroke-dashoffset:0}50%{stroke-dasharray:90, 150;stroke-dashoffset:-35}100%{stroke-dasharray:90, 150;stroke-dashoffset:-124}}";
+
+const UserActionController = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+    * Language
+    */
+    this.lang = 'en';
+    /**
+     * Select GM version
+     */
+    this.gmVersion = '';
+    /**
+    * Translation url
+    */
+    this.translationUrl = '';
+    /**
+     * Client custom styling via inline style
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url
+     */
+    this.clientStylingUrl = '';
+    /**
+     * Which actions are required in order to activate the "Apply" button. Other actions are considered optional.
+     */
+    this.queryFired = false;
+    this.readyActionsCount = 0;
+    this.activeUserActions = [];
+    this.userActionsValidated = true;
+    this.receivedQueryResponses = 0;
+    this.limitStylingAppends = false;
+    this.isLoading = true;
+    this.mandatoryActionsChecked = 0;
+    //for now this variable is hardcoded bcs we have only terms and conditions mandatory and we dont receive with these new functionality the mandatory actions
+    this.mandatoryActions = ['termsandconditions'];
+    this.userActions = [];
+    this.consentTitles = {
+      termsandconditions: translate('termsandconditions', this.lang),
+      sms: translate('sms', this.lang),
+      emailmarketing: translate('emailmarketing', this.lang)
+    };
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let url = new URL(this.clientStylingUrl);
+      let cssFile = document.createElement('style');
+      fetch(url.href)
+        .then((res) => res.text())
+        .then((data) => {
+        this.clientStyling = data;
+        cssFile.innerHTML = data;
+        setTimeout(() => { this.stylingContainer.prepend(cssFile); }, 1);
+      })
+        .catch((err) => {
+        console.log('error ', err);
+      });
+    };
+  }
+  handleNewTranslations() {
+    getTranslations(this.translationUrl);
+  }
+  handleQueryResponse() {
+    if (this.receivedQueryResponses === this.activeUserActions.length) {
+      this.updateUserConsents();
+    }
+  }
+  userLegislationConsentHandler(event) {
+    const actionType = event.detail.type;
+    const actionTypeChecked = event.detail.value;
+    if (this.mandatoryActions.includes(actionType) && this.queryFired === false) {
+      actionTypeChecked === true ? this.mandatoryActionsChecked++ : this.mandatoryActionsChecked--;
+    }
+    // Register final user choices only if we're ready to update
+    if (this.queryFired) {
+      this.userActions.push({ tagCode: actionType, status: actionTypeChecked ? 'Accepted' : 'Denied' });
+      this.receivedQueryResponses++;
+    }
+  }
+  determineUserActions() {
+    const url = new URL(`${this.endpoint}/v1/player/${this.userId}/consent`);
+    const headers = new Headers();
+    headers.append('X-SessionId', this.userSession);
+    let requestOptions;
+    requestOptions = {
+      method: 'GET',
+      headers
+    };
+    if (url && requestOptions) {
+      return fetch(url.href, requestOptions)
+        .then(res => res.json())
+        .then(data => {
+        const actionItems = data.items;
+        actionItems.forEach(element => {
+          if (element.status === 'Expired') {
+            this.activeUserActions.push(element.tagCode);
+          }
+        });
+        this.isLoading = false;
+      })
+        .catch(error => {
+        console.error('Error fetching data:', error);
+        this.isLoading = false;
+      });
+    }
+    else {
+      return Promise.reject('Unsupported endpoint');
+    }
+  }
+  updateUserConsents() {
+    let url;
+    let requestOptions;
+    url = (this.gmVersion === 'gmcore')
+      ? new URL(`${this.endpoint}/v1/player/${this.userId}/consent`)
+      : new URL(`${this.endpoint}/v1/player/${this.userId}/legislation/consents`);
+    const body = (this.gmVersion === 'gmcore')
+      ? {
+        items: this.userActions
+      }
+      : {
+        consents: [
+          {
+            tagCode: "termsandconditions",
+            note: "",
+            status: 1
+          }
+        ]
+      };
+    requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+        'X-SessionId': `${this.userSession}`,
+      },
+      body: JSON.stringify(body)
+    };
+    if (url && requestOptions) {
+      fetch(url.href, requestOptions)
+        .then(res => res.json())
+        .then(() => {
+        window.postMessage({
+          type: 'WidgetNotification',
+          data: {
+            type: 'success',
+            message: 'Consent update successful!'
+          }
+        }, window.location.href);
+      })
+        .catch((err) => {
+        window.postMessage({
+          type: 'WidgetNotification',
+          data: {
+            type: 'error',
+            message: 'Server might not be responding',
+            err
+          }
+        }, window.location.href);
+      })
+        .finally(() => {
+        window.postMessage({ type: 'UserActionsCompleted' }, window.location.href);
+      });
+    }
+  }
+  handleApplyClick() {
+    this.queryFired = true;
+  }
+  async componentWillLoad() {
+    if (this.gmVersion === 'gmcore') {
+      return this.determineUserActions();
+    }
+    else {
+      this.activeUserActions = ['termsandconditions'];
+      this.isLoading = false;
+    }
+    if (this.translationUrl.length > 2) {
+      await getTranslations(this.translationUrl);
+    }
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrl)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  render() {
+    const isMandatoryPresent = this.mandatoryActions.every(action => this.activeUserActions.includes(action));
+    if (isMandatoryPresent) {
+      this.userActionsValidated = !(this.mandatoryActionsChecked === this.mandatoryActions.length);
+    }
+    else {
+      this.userActionsValidated = false;
+    }
+    return (index.h("div", { class: "QueryReferenceContainer", ref: el => this.stylingContainer = el }, this.isLoading ? (index.h("slot", { name: 'spinner' })
+      &&
+        index.h("svg", { class: "spinner", viewBox: "0 0 50 50" }, index.h("circle", { class: "path", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "5" }))) : (index.h("div", { class: "UserActionController" }, index.h("h2", { class: "UserConsentNotice" }, this.userNoticeText), index.h("div", { class: "PlayerLegislationWrapper" }, this.activeUserActions.map(action => (index.h("slot", { name: action }, index.h("player-user-consents", { lang: this.lang, "translation-url": this.translationUrl, slot: action, consentType: action, consentTitle: this.consentTitles[action], queried: this.queryFired, mandatory: this.mandatoryActions.includes(action), "client-styling": this.clientStyling }))))), this.includeSubmitButton &&
+      index.h("button", { class: "ConsentSubmitButton", disabled: this.userActionsValidated, onClick: () => this.handleApplyClick() }, this.submitButtonText)))));
+  }
+  static get watchers() { return {
+    "translationUrl": ["handleNewTranslations"],
+    "receivedQueryResponses": ["handleQueryResponse"]
+  }; }
+};
+UserActionController.style = userActionControllerCss;
+
+exports.player_user_consents = PlayerUserConsents;
+exports.user_action_controller = UserActionController;

package/dist/cjs/user-action-controller.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const index = require('./index-87049e21.js');
+
+/*
+ Stencil Client Patch Browser v2.15.2 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('user-action-controller.cjs.js', document.baseURI).href));
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return index.promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return index.bootstrapLazy([["player-user-consents_2.cjs",[[1,"user-action-controller",{"endpoint":[513],"userSession":[513,"user-session"],"userId":[513,"user-id"],"lang":[1537],"includeSubmitButton":[516,"include-submit-button"],"submitButtonText":[513,"submit-button-text"],"userNoticeText":[513,"user-notice-text"],"gmVersion":[1,"gm-version"],"translationUrl":[513,"translation-url"],"clientStyling":[1537,"client-styling"],"clientStylingUrl":[513,"client-styling-url"],"queryFired":[32],"readyActionsCount":[32],"activeUserActions":[32],"userActionsValidated":[32],"receivedQueryResponses":[32],"limitStylingAppends":[32],"isLoading":[32],"mandatoryActionsChecked":[32]},[[0,"userLegislationConsent","userLegislationConsentHandler"]]],[1,"player-user-consents",{"lang":[1537],"queried":[516],"consentType":[513,"consent-type"],"mandatory":[516],"consentTitle":[513,"consent-title"],"clientStyling":[1,"client-styling"],"translationUrl":[513,"translation-url"],"textContent":[32],"limitStylingAppends":[32]}]]]], options);
+});

package/dist/collection/collection-manifest.json

@@ -0,0 +1,19 @@
+{
+  "entries": [
+    "./components/user-action-controller/user-action-controller.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [
+    {
+      "name": "@everymatrix/player-user-consents",
+      "tags": [
+        "player-user-consents"
+      ]
+    }
+  ],
+  "bundles": []
+}

package/dist/collection/components/user-action-controller/user-action-controller.css

@@ -0,0 +1,89 @@
+:host {
+  display: block;
+}
+
+.QueryReferenceContainer {
+  height: 100%;
+  width: 100%;
+}
+
+.UserConsentNotice {
+  font-size: 1.2rem;
+  font-weight: 200;
+  text-align: center;
+}
+
+.CloseButton {
+  width: 25px;
+  height: 25px;
+  align-self: flex-end;
+}
+
+.UserActionController {
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 100;
+  height: 100%;
+  width: 100%;
+  padding: 1rem 1.5rem 2rem;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 5%;
+}
+
+.ConsentSubmitButton {
+  font-size: 1rem;
+  padding: 0.4rem 1.4rem;
+  background: #fff;
+  border: 2px solid #000;
+  color: #000;
+  border-radius: 5px;
+  align-self: flex-end;
+}
+.ConsentSubmitButton:disabled {
+  border: 2px solid #ccc;
+  color: #ccc;
+}
+
+@media screen and (max-width: 320px) {
+  .QueryReferenceContainer {
+    font-size: 0.8rem;
+    color: blue;
+  }
+}
+.spinner {
+  animation: rotate 2s linear infinite;
+  z-index: 2;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -25px 0 0 -25px;
+  width: 50px;
+  height: 50px;
+}
+.spinner .path {
+  stroke: var(--emfe-w-login-color-primary, var(--emfe-w-color-primary, #D0046C));
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}