@everymatrix/helper-accordion 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-ed89de9c.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([["helper-accordion.cjs",[[1,"helper-accordion",{"ticketHistoryFlag":[516,"ticket-history-flag"],"headerTitle":[513,"header-title"],"headerSubtitle":[513,"header-subtitle"],"description":[513],"footer":[516],"deleteTab":[516,"delete-tab"],"postMessage":[516,"post-message"],"eventName":[513,"event-name"],"collapsed":[516],"language":[513],"clientStyling":[513,"client-styling"],"clientStylingUrlContent":[513,"client-styling-url-content"],"showContent":[32],"limitStylingAppends":[32]}]]]], options);
+  });
+};
+
+exports.defineCustomElements = defineCustomElements;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,12 @@
+{
+  "entries": [
+    "./components/helper-accordion/helper-accordion.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "2.15.2",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/helper-accordion/helper-accordion.css

@@ -0,0 +1,101 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
+:host {
+  display: block;
+  font-family: "Roboto", sans-serif;
+}
+
+.Header {
+  border-radius: 5px;
+  background: #009993;
+  display: flex;
+  gap: 30px;
+  border: 1px solid #009993;
+  padding: 8px 10px;
+  user-select: none;
+  margin-bottom: 1px;
+  cursor: pointer;
+}
+.Header:hover {
+  background: #00ABA4;
+}
+.Header .Title,
+.Header .Subtitle,
+.Header .Description {
+  margin: 0;
+  font-size: 14px;
+  color: #fff;
+  text-transform: capitalize;
+}
+.Header .Expand {
+  margin-left: auto;
+  color: #FFF;
+  width: 17px;
+  height: 17px;
+  cursor: pointer;
+  text-align: center;
+  transform: rotate(90deg);
+  font-size: 20px;
+  user-select: none;
+}
+
+.HeaderTicketHistory {
+  border-radius: 4px;
+  background: #F1F1F1;
+  display: flex;
+  gap: 30px;
+  border: 1px solid #009993;
+  padding: 8px 10px;
+  user-select: none;
+  margin-bottom: 5px;
+  cursor: pointer;
+}
+.HeaderTicketHistory:hover {
+  background: #00ABA4;
+}
+.HeaderTicketHistory .Title,
+.HeaderTicketHistory .Subtitle,
+.HeaderTicketHistory .Description {
+  margin: 0;
+  font-size: 14px;
+  color: #000;
+}
+.HeaderTicketHistory .Expand {
+  margin-left: auto;
+  color: #FFF;
+  width: 17px;
+  height: 17px;
+  cursor: pointer;
+  text-align: center;
+  transform: rotate(90deg);
+  font-size: 20px;
+  user-select: none;
+}
+
+.Content {
+  border-radius: 0 0 4px 4px;
+  background: #fff;
+  border: 1px solid #009993;
+  padding: 10px 15px;
+  user-select: none;
+  color: #000;
+  margin-bottom: 10px;
+}
+
+.ActionButton {
+  cursor: pointer;
+  display: inline-block;
+  border-radius: 4px;
+  margin: 20px 0 10px;
+  text-transform: uppercase;
+  font-size: 12px;
+  text-align: center;
+  padding: 8px 20px;
+  min-width: 80px;
+  background: #FF3D00;
+  border: 1px solid #FF3D00;
+  color: #FFF;
+}
+.ActionButton:hover {
+  background: #FF6536;
+  border: 1px solid #FF3D00;
+}

package/dist/collection/components/helper-accordion/helper-accordion.js

@@ -0,0 +1,353 @@
+import { Component, Prop, h, State, Event } from '@stencil/core';
+import { translate } from '../../utils/locale.utils';
+export class Accordion {
+  constructor() {
+    /**
+   * Flag for ticket history
+   */
+    this.ticketHistoryFlag = false;
+    /**
+     * Title (top header)
+     */
+    this.headerTitle = '';
+    /**
+     * SubTitle (top header)
+     */
+    this.headerSubtitle = '';
+    /**
+     * Description
+     */
+    this.description = '';
+    /**
+     * Enables footer content
+     */
+    this.footer = false;
+    /**
+     * Enables footer button for tab deletion
+     */
+    this.deleteTab = false;
+    /**
+     * Activates postMessages as events for actions from the widget
+     */
+    this.postMessage = false;
+    /**
+     * Name of the event emitter by the action button
+     */
+    this.eventName = 'helperAccordionAction';
+    /**
+     * Collapsed
+     */
+    this.collapsed = true;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
+  }
+  // @TODO fix the `any` type :)
+  connectedCallback() {
+    this.showContent = !this.collapsed;
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  toggleContent() {
+    this.showContent = !this.showContent;
+  }
+  deleteAction() {
+    if (this.postMessage) {
+      // @TODO maybe change the name type, this one sucks
+      window.postMessage({ type: this.eventName }, window.location.href);
+    }
+    this.accordionEvent.emit();
+  }
+  render() {
+    return (h("div", { class: "Wrapper", ref: el => this.stylingContainer = el },
+      h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header', onClick: () => this.toggleContent() },
+        h("p", { class: "Title" }, this.headerTitle),
+        h("p", { class: "Subtitle" }, this.headerSubtitle),
+        h("p", { class: "Subtitle Description" }, this.description),
+        h("span", { class: "Expand" }, this.showContent ? '<' : '>')),
+      this.showContent &&
+        h("div", null,
+          h("div", { class: "Content" },
+            h("slot", { name: 'accordionContent' }),
+            this.footer && this.showContent &&
+              h("div", null, this.deleteTab &&
+                h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));
+  }
+  static get is() { return "helper-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["helper-accordion.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["helper-accordion.css"]
+  }; }
+  static get properties() { return {
+    "ticketHistoryFlag": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Flag for ticket history"
+      },
+      "attribute": "ticket-history-flag",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "headerTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Title (top header)"
+      },
+      "attribute": "header-title",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "headerSubtitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "SubTitle (top header)"
+      },
+      "attribute": "header-subtitle",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Description"
+      },
+      "attribute": "description",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "footer": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enables footer content"
+      },
+      "attribute": "footer",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "deleteTab": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enables footer button for tab deletion"
+      },
+      "attribute": "delete-tab",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "postMessage": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Activates postMessages as events for actions from the widget"
+      },
+      "attribute": "post-message",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "eventName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Name of the event emitter by the action button"
+      },
+      "attribute": "event-name",
+      "reflect": true,
+      "defaultValue": "'helperAccordionAction'"
+    },
+    "collapsed": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Collapsed"
+      },
+      "attribute": "collapsed",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Language"
+      },
+      "attribute": "language",
+      "reflect": true,
+      "defaultValue": "'en'"
+    },
+    "clientStyling": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via string"
+      },
+      "attribute": "client-styling",
+      "reflect": true,
+      "defaultValue": "''"
+    },
+    "clientStylingUrlContent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Client custom styling via url content"
+      },
+      "attribute": "client-styling-url-content",
+      "reflect": true,
+      "defaultValue": "''"
+    }
+  }; }
+  static get states() { return {
+    "showContent": {},
+    "limitStylingAppends": {}
+  }; }
+  static get events() { return [{
+      "method": "accordionEvent",
+      "name": "helperAccordionAction",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Action event"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/collection/utils/locale.utils.js

@@ -0,0 +1,23 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'hr'];
+const TRANSLATIONS = {
+  en: {
+    deleteTicket: 'Delete ticket'
+  },
+  ro: {
+    deleteTicket: 'Sterge biletul'
+  },
+  fr: {
+    deleteTicket: 'Supprimer le billet'
+  },
+  ar: {
+    deleteTicket: 'حذف التذكرة'
+  },
+  hr: {
+    deleteTicket: 'Izbriši listić'
+  }
+};
+export const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+  return ((first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : ''));
+}

package/dist/components/helper-accordion.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface HelperAccordion extends Components.HelperAccordion, HTMLElement {}
+export const HelperAccordion: {
+  prototype: HelperAccordion;
+  new (): HelperAccordion;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/helper-accordion.js

@@ -0,0 +1,162 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en', 'hr'];
+const TRANSLATIONS = {
+  en: {
+    deleteTicket: 'Delete ticket'
+  },
+  ro: {
+    deleteTicket: 'Sterge biletul'
+  },
+  fr: {
+    deleteTicket: 'Supprimer le billet'
+  },
+  ar: {
+    deleteTicket: 'حذف التذكرة'
+  },
+  hr: {
+    deleteTicket: 'Izbriši listić'
+  }
+};
+const translate = (key, customLang) => {
+  const lang = customLang;
+  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
+};
+
+const helperAccordionCss = "@import url(\"https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap\");:host{display:block;font-family:\"Roboto\", sans-serif}.Header{border-radius:5px;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:1px;cursor:pointer}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff;text-transform:capitalize}.Header .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px;cursor:pointer}.HeaderTicketHistory:hover{background:#00ABA4}.HeaderTicketHistory .Title,.HeaderTicketHistory .Subtitle,.HeaderTicketHistory .Description{margin:0;font-size:14px;color:#000}.HeaderTicketHistory .Expand{margin-left:auto;color:#FFF;width:17px;height:17px;cursor:pointer;text-align:center;transform:rotate(90deg);font-size:20px;user-select:none}.Content{border-radius:0 0 4px 4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{cursor:pointer;display:inline-block;border-radius:4px;margin:20px 0 10px;text-transform:uppercase;font-size:12px;text-align:center;padding:8px 20px;min-width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}";
+
+const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.accordionEvent = createEvent(this, "helperAccordionAction", 7);
+    /**
+   * Flag for ticket history
+   */
+    this.ticketHistoryFlag = false;
+    /**
+     * Title (top header)
+     */
+    this.headerTitle = '';
+    /**
+     * SubTitle (top header)
+     */
+    this.headerSubtitle = '';
+    /**
+     * Description
+     */
+    this.description = '';
+    /**
+     * Enables footer content
+     */
+    this.footer = false;
+    /**
+     * Enables footer button for tab deletion
+     */
+    this.deleteTab = false;
+    /**
+     * Activates postMessages as events for actions from the widget
+     */
+    this.postMessage = false;
+    /**
+     * Name of the event emitter by the action button
+     */
+    this.eventName = 'helperAccordionAction';
+    /**
+     * Collapsed
+     */
+    this.collapsed = true;
+    /**
+     * Language
+     */
+    this.language = 'en';
+    /**
+     * Client custom styling via string
+     */
+    this.clientStyling = '';
+    /**
+     * Client custom styling via url content
+     */
+    this.clientStylingUrlContent = '';
+    this.limitStylingAppends = false;
+    this.setClientStyling = () => {
+      let sheet = document.createElement('style');
+      sheet.innerHTML = this.clientStyling;
+      this.stylingContainer.prepend(sheet);
+    };
+    this.setClientStylingURL = () => {
+      let cssFile = document.createElement('style');
+      setTimeout(() => {
+        cssFile.innerHTML = this.clientStylingUrlContent;
+        this.stylingContainer.prepend(cssFile);
+      }, 1);
+    };
+  }
+  // @TODO fix the `any` type :)
+  connectedCallback() {
+    this.showContent = !this.collapsed;
+  }
+  componentDidRender() {
+    // start custom styling area
+    if (!this.limitStylingAppends && this.stylingContainer) {
+      if (this.clientStyling)
+        this.setClientStyling();
+      if (this.clientStylingUrlContent)
+        this.setClientStylingURL();
+      this.limitStylingAppends = true;
+    }
+    // end custom styling area
+  }
+  toggleContent() {
+    this.showContent = !this.showContent;
+  }
+  deleteAction() {
+    if (this.postMessage) {
+      // @TODO maybe change the name type, this one sucks
+      window.postMessage({ type: this.eventName }, window.location.href);
+    }
+    this.accordionEvent.emit();
+  }
+  render() {
+    return (h("div", { class: "Wrapper", ref: el => this.stylingContainer = el }, h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header', onClick: () => this.toggleContent() }, h("p", { class: "Title" }, this.headerTitle), h("p", { class: "Subtitle" }, this.headerSubtitle), h("p", { class: "Subtitle Description" }, this.description), h("span", { class: "Expand" }, this.showContent ? '<' : '>')), this.showContent &&
+      h("div", null, h("div", { class: "Content" }, h("slot", { name: 'accordionContent' }), this.footer && this.showContent &&
+        h("div", null, this.deleteTab &&
+          h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));
+  }
+  static get style() { return helperAccordionCss; }
+}, [1, "helper-accordion", {
+    "ticketHistoryFlag": [516, "ticket-history-flag"],
+    "headerTitle": [513, "header-title"],
+    "headerSubtitle": [513, "header-subtitle"],
+    "description": [513],
+    "footer": [516],
+    "deleteTab": [516, "delete-tab"],
+    "postMessage": [516, "post-message"],
+    "eventName": [513, "event-name"],
+    "collapsed": [516],
+    "language": [513],
+    "clientStyling": [513, "client-styling"],
+    "clientStylingUrlContent": [513, "client-styling-url-content"],
+    "showContent": [32],
+    "limitStylingAppends": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["helper-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "helper-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Accordion);
+      }
+      break;
+  } });
+}
+
+const HelperAccordion = Accordion;
+const defineCustomElement = defineCustomElement$1;
+
+export { HelperAccordion, defineCustomElement };