@everymatrix/helper-accordion 0.0.3

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-cfe84820.js');
+
+/*
+ Stencil Client Patch Esm v2.17.0 | 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",{"headerTitle":[1,"header-title"],"headerSubtitle":[1,"header-subtitle"],"description":[1],"footer":[4],"deleteTab":[4,"delete-tab"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"language":[1],"showContent":[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.17.0",
+    "typescriptVersion": "4.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

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

@@ -0,0 +1,66 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
+:host {
+  display: block;
+  font-family: "Roboto", sans-serif;
+}
+
+.Header {
+  border-radius: 4px;
+  margin-bottom: 1px;
+  background: #009993;
+  display: flex;
+  gap: 30px;
+  border: 1px solid #009993;
+  padding: 8px 10px;
+  user-select: none;
+}
+.Header:hover {
+  background: #00ABA4;
+}
+.Header .Title,
+.Header .Subtitle,
+.Header .Description {
+  margin: 0;
+  font-size: 14px;
+  color: #fff;
+}
+.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;
+}
+
+.Content {
+  border-radius: 4px;
+  background: #fff;
+  border: 1px solid #009993;
+  padding: 10px 15px;
+  user-select: none;
+  color: #000;
+  margin-bottom: 10px;
+}
+
+.ActionButton {
+  border-radius: 4px;
+  margin-top: 10px;
+  cursor: pointer;
+  text-transform: capitalize;
+  display: block;
+  font-size: 12px;
+  text-align: center;
+  padding: 8px 20px;
+  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,262 @@
+import { Component, Prop, h, State, Event } from '@stencil/core';
+import { translate } from '../../utils/locale.utils';
+export class Accordion {
+  constructor() {
+    /**
+     * 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';
+  }
+  // @TODO fix the `any` type :)
+  connectedCallback() {
+    this.showContent = !this.collapsed;
+  }
+  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" },
+      h("div", { class: "Header" },
+        h("p", { class: "Title" }, this.headerTitle),
+        h("p", { class: "Subtitle" }, this.headerSubtitle),
+        h("p", { class: "Subtitle" }, this.description),
+        h("span", { class: "Expand", onClick: () => this.toggleContent() }, 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 {
+    "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": false,
+      "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": false,
+      "defaultValue": "''"
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Description"
+      },
+      "attribute": "description",
+      "reflect": false,
+      "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": false,
+      "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": false,
+      "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": false,
+      "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": false,
+      "defaultValue": "'helperAccordionAction'"
+    },
+    "collapsed": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Collapsed"
+      },
+      "attribute": "collapsed",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "language": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Language"
+      },
+      "attribute": "language",
+      "reflect": false,
+      "defaultValue": "'en'"
+    }
+  }; }
+  static get states() { return {
+    "showContent": {}
+  }; }
+  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,14 @@
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    deleteTicket: 'Delete ticket'
+  },
+  ro: {
+    deleteTicket: 'Sterge biletul'
+  },
+};
+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,113 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    deleteTicket: 'Delete ticket'
+  },
+  ro: {
+    deleteTicket: 'Sterge biletul'
+  },
+};
+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:4px;margin-bottom:1px;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff}.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}.Content{border-radius:4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{border-radius:4px;margin-top:10px;cursor:pointer;text-transform:capitalize;display:block;font-size:12px;text-align:center;padding:8px 20px;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);
+    /**
+     * 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';
+  }
+  // @TODO fix the `any` type :)
+  connectedCallback() {
+    this.showContent = !this.collapsed;
+  }
+  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" }, h("div", { class: "Header" }, h("p", { class: "Title" }, this.headerTitle), h("p", { class: "Subtitle" }, this.headerSubtitle), h("p", { class: "Subtitle" }, this.description), h("span", { class: "Expand", onClick: () => this.toggleContent() }, 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", {
+    "headerTitle": [1, "header-title"],
+    "headerSubtitle": [1, "header-subtitle"],
+    "description": [1],
+    "footer": [4],
+    "deleteTab": [4, "delete-tab"],
+    "postMessage": [4, "post-message"],
+    "eventName": [1, "event-name"],
+    "collapsed": [4],
+    "language": [1],
+    "showContent": [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 };

package/dist/components/index.d.ts

@@ -0,0 +1,22 @@
+/* HelperAccordion custom elements */
+export { Accordion as HelperAccordion } from '../types/components/helper-accordion/helper-accordion';
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+export * from '../types';

package/dist/components/index.js

@@ -0,0 +1,2 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
+export { HelperAccordion, defineCustomElement as defineCustomElementHelperAccordion } from './helper-accordion.js';

package/dist/esm/helper-accordion.entry.js

@@ -0,0 +1,84 @@
+import { r as registerInstance, c as createEvent, h } from './index-3e7659e3.js';
+
+const DEFAULT_LANGUAGE = 'en';
+const SUPPORTED_LANGUAGES = ['ro', 'en'];
+const TRANSLATIONS = {
+  en: {
+    deleteTicket: 'Delete ticket'
+  },
+  ro: {
+    deleteTicket: 'Sterge biletul'
+  },
+};
+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:4px;margin-bottom:1px;background:#009993;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none}.Header:hover{background:#00ABA4}.Header .Title,.Header .Subtitle,.Header .Description{margin:0;font-size:14px;color:#fff}.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}.Content{border-radius:4px;background:#fff;border:1px solid #009993;padding:10px 15px;user-select:none;color:#000;margin-bottom:10px}.ActionButton{border-radius:4px;margin-top:10px;cursor:pointer;text-transform:capitalize;display:block;font-size:12px;text-align:center;padding:8px 20px;width:80px;background:#FF3D00;border:1px solid #FF3D00;color:#FFF}.ActionButton:hover{background:#FF6536;border:1px solid #FF3D00}";
+
+const Accordion = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.accordionEvent = createEvent(this, "helperAccordionAction", 7);
+    /**
+     * 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';
+  }
+  // @TODO fix the `any` type :)
+  connectedCallback() {
+    this.showContent = !this.collapsed;
+  }
+  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" }, h("div", { class: "Header" }, h("p", { class: "Title" }, this.headerTitle), h("p", { class: "Subtitle" }, this.headerSubtitle), h("p", { class: "Subtitle" }, this.description), h("span", { class: "Expand", onClick: () => this.toggleContent() }, 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)))))));
+  }
+};
+Accordion.style = helperAccordionCss;
+
+export { Accordion as helper_accordion };

package/dist/esm/helper-accordion.js

@@ -0,0 +1,17 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-3e7659e3.js';
+
+/*
+ Stencil Client Patch Browser v2.17.0 | MIT Licensed | https://stenciljs.com
+ */
+const patchBrowser = () => {
+    const importMeta = import.meta.url;
+    const opts = {};
+    if (importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    return promiseResolve(opts);
+};
+
+patchBrowser().then(options => {
+  return bootstrapLazy([["helper-accordion",[[1,"helper-accordion",{"headerTitle":[1,"header-title"],"headerSubtitle":[1,"header-subtitle"],"description":[1],"footer":[4],"deleteTab":[4,"delete-tab"],"postMessage":[4,"post-message"],"eventName":[1,"event-name"],"collapsed":[4],"language":[1],"showContent":[32]}]]]], options);
+});