@everymatrix/helper-accordion 0.1.2 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -19,12 +19,16 @@ const translate = (key, customLang) => {
19
19
  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
20
20
  };
21
21
 
22
- 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}";
22
+ 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 4px 0 0;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}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px}.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}";
23
23
 
24
24
  const Accordion = class {
25
25
  constructor(hostRef) {
26
26
  index.registerInstance(this, hostRef);
27
27
  this.accordionEvent = index.createEvent(this, "helperAccordionAction", 7);
28
+ /**
29
+ * Flag for ticket history
30
+ */
31
+ this.ticketHistoryFlag = false;
28
32
  /**
29
33
  * Title (top header)
30
34
  */
@@ -77,7 +81,7 @@ const Accordion = class {
77
81
  this.accordionEvent.emit();
78
82
  }
79
83
  render() {
80
- return (index.h("div", { class: "Wrapper" }, index.h("div", { class: "Header" }, index.h("p", { class: "Title" }, this.headerTitle), index.h("p", { class: "Subtitle" }, this.headerSubtitle), index.h("p", { class: "Subtitle" }, this.description), index.h("span", { class: "Expand", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')), this.showContent &&
84
+ return (index.h("div", { class: "Wrapper" }, index.h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header' }, index.h("p", { class: "Title" }, this.headerTitle), index.h("p", { class: "Subtitle" }, this.headerSubtitle), index.h("p", { class: "Subtitle" }, this.description), index.h("span", { class: "Expand", onClick: () => this.toggleContent() }, this.showContent ? '<' : '>')), this.showContent &&
81
85
  index.h("div", null, index.h("div", { class: "Content" }, index.h("slot", { name: 'accordionContent' }), this.footer && this.showContent &&
82
86
  index.h("div", null, this.deleteTab &&
83
87
  index.h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));
@@ -15,5 +15,5 @@ const patchBrowser = () => {
15
15
  };
16
16
 
17
17
  patchBrowser().then(options => {
18
- 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);
18
+ return index.bootstrapLazy([["helper-accordion.cjs",[[1,"helper-accordion",{"ticketHistoryFlag":[4,"ticket-history-flag"],"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);
19
19
  });
@@ -14,7 +14,7 @@ const patchEsm = () => {
14
14
  const defineCustomElements = (win, options) => {
15
15
  if (typeof window === 'undefined') return Promise.resolve();
16
16
  return patchEsm().then(() => {
17
- 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);
17
+ return index.bootstrapLazy([["helper-accordion.cjs",[[1,"helper-accordion",{"ticketHistoryFlag":[4,"ticket-history-flag"],"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);
18
18
  });
19
19
  };
20
20
 
@@ -5,8 +5,7 @@
5
5
  }
6
6
 
7
7
  .Header {
8
- border-radius: 4px;
9
- margin-bottom: 1px;
8
+ border-radius: 4px 4px 0 0;
10
9
  background: #009993;
11
10
  display: flex;
12
11
  gap: 30px;
@@ -36,8 +35,40 @@
36
35
  user-select: none;
37
36
  }
38
37
 
39
- .Content {
38
+ .HeaderTicketHistory {
40
39
  border-radius: 4px;
40
+ background: #F1F1F1;
41
+ display: flex;
42
+ gap: 30px;
43
+ border: 1px solid #009993;
44
+ padding: 8px 10px;
45
+ user-select: none;
46
+ margin-bottom: 5px;
47
+ }
48
+ .HeaderTicketHistory:hover {
49
+ background: #00ABA4;
50
+ }
51
+ .HeaderTicketHistory .Title,
52
+ .HeaderTicketHistory .Subtitle,
53
+ .HeaderTicketHistory .Description {
54
+ margin: 0;
55
+ font-size: 14px;
56
+ color: #000;
57
+ }
58
+ .HeaderTicketHistory .Expand {
59
+ margin-left: auto;
60
+ color: #FFF;
61
+ width: 17px;
62
+ height: 17px;
63
+ cursor: pointer;
64
+ text-align: center;
65
+ transform: rotate(90deg);
66
+ font-size: 20px;
67
+ user-select: none;
68
+ }
69
+
70
+ .Content {
71
+ border-radius: 0 0 4px 4px;
41
72
  background: #fff;
42
73
  border: 1px solid #009993;
43
74
  padding: 10px 15px;
@@ -47,15 +78,15 @@
47
78
  }
48
79
 
49
80
  .ActionButton {
50
- border-radius: 4px;
51
- margin-top: 10px;
52
81
  cursor: pointer;
53
- text-transform: capitalize;
54
- display: block;
82
+ display: inline-block;
83
+ border-radius: 4px;
84
+ margin: 20px 0 10px;
85
+ text-transform: uppercase;
55
86
  font-size: 12px;
56
87
  text-align: center;
57
88
  padding: 8px 20px;
58
- width: 80px;
89
+ min-width: 80px;
59
90
  background: #FF3D00;
60
91
  border: 1px solid #FF3D00;
61
92
  color: #FFF;
@@ -2,6 +2,10 @@ import { Component, Prop, h, State, Event } from '@stencil/core';
2
2
  import { translate } from '../../utils/locale.utils';
3
3
  export class Accordion {
4
4
  constructor() {
5
+ /**
6
+ * Flag for ticket history
7
+ */
8
+ this.ticketHistoryFlag = false;
5
9
  /**
6
10
  * Title (top header)
7
11
  */
@@ -55,7 +59,7 @@ export class Accordion {
55
59
  }
56
60
  render() {
57
61
  return (h("div", { class: "Wrapper" },
58
- h("div", { class: "Header" },
62
+ h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : 'Header' },
59
63
  h("p", { class: "Title" }, this.headerTitle),
60
64
  h("p", { class: "Subtitle" }, this.headerSubtitle),
61
65
  h("p", { class: "Subtitle" }, this.description),
@@ -77,6 +81,24 @@ export class Accordion {
77
81
  "$": ["helper-accordion.css"]
78
82
  }; }
79
83
  static get properties() { return {
84
+ "ticketHistoryFlag": {
85
+ "type": "boolean",
86
+ "mutable": false,
87
+ "complexType": {
88
+ "original": "boolean",
89
+ "resolved": "boolean",
90
+ "references": {}
91
+ },
92
+ "required": false,
93
+ "optional": false,
94
+ "docs": {
95
+ "tags": [],
96
+ "text": "Flag for ticket history"
97
+ },
98
+ "attribute": "ticket-history-flag",
99
+ "reflect": false,
100
+ "defaultValue": "false"
101
+ },
80
102
  "headerTitle": {
81
103
  "type": "string",
82
104
  "mutable": false,
@@ -15,7 +15,7 @@ const translate = (key, customLang) => {
15
15
  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
16
16
  };
17
17
 
18
- 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}";
18
+ 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 4px 0 0;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}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px}.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}";
19
19
 
20
20
  const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
21
21
  constructor() {
@@ -23,6 +23,10 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
23
23
  this.__registerHost();
24
24
  this.__attachShadow();
25
25
  this.accordionEvent = createEvent(this, "helperAccordionAction", 7);
26
+ /**
27
+ * Flag for ticket history
28
+ */
29
+ this.ticketHistoryFlag = false;
26
30
  /**
27
31
  * Title (top header)
28
32
  */
@@ -75,13 +79,14 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
75
79
  this.accordionEvent.emit();
76
80
  }
77
81
  render() {
78
- 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 &&
82
+ return (h("div", { class: "Wrapper" }, h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : '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 &&
79
83
  h("div", null, h("div", { class: "Content" }, h("slot", { name: 'accordionContent' }), this.footer && this.showContent &&
80
84
  h("div", null, this.deleteTab &&
81
85
  h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));
82
86
  }
83
87
  static get style() { return helperAccordionCss; }
84
88
  }, [1, "helper-accordion", {
89
+ "ticketHistoryFlag": [4, "ticket-history-flag"],
85
90
  "headerTitle": [1, "header-title"],
86
91
  "headerSubtitle": [1, "header-subtitle"],
87
92
  "description": [1],
@@ -15,12 +15,16 @@ const translate = (key, customLang) => {
15
15
  return TRANSLATIONS[lang !== undefined && SUPPORTED_LANGUAGES.includes(lang) ? lang : DEFAULT_LANGUAGE][key];
16
16
  };
17
17
 
18
- 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}";
18
+ 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 4px 0 0;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}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px}.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}";
19
19
 
20
20
  const Accordion = class {
21
21
  constructor(hostRef) {
22
22
  registerInstance(this, hostRef);
23
23
  this.accordionEvent = createEvent(this, "helperAccordionAction", 7);
24
+ /**
25
+ * Flag for ticket history
26
+ */
27
+ this.ticketHistoryFlag = false;
24
28
  /**
25
29
  * Title (top header)
26
30
  */
@@ -73,7 +77,7 @@ const Accordion = class {
73
77
  this.accordionEvent.emit();
74
78
  }
75
79
  render() {
76
- 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 &&
80
+ return (h("div", { class: "Wrapper" }, h("div", { class: this.ticketHistoryFlag === true ? 'HeaderTicketHistory' : '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 &&
77
81
  h("div", null, h("div", { class: "Content" }, h("slot", { name: 'accordionContent' }), this.footer && this.showContent &&
78
82
  h("div", null, this.deleteTab &&
79
83
  h("span", { class: "ActionButton", onClick: () => this.deleteAction() }, translate('deleteTicket', this.language)))))));
@@ -13,5 +13,5 @@ const patchBrowser = () => {
13
13
  };
14
14
 
15
15
  patchBrowser().then(options => {
16
- 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);
16
+ return bootstrapLazy([["helper-accordion",[[1,"helper-accordion",{"ticketHistoryFlag":[4,"ticket-history-flag"],"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);
17
17
  });
@@ -10,7 +10,7 @@ const patchEsm = () => {
10
10
  const defineCustomElements = (win, options) => {
11
11
  if (typeof window === 'undefined') return Promise.resolve();
12
12
  return patchEsm().then(() => {
13
- 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);
13
+ return bootstrapLazy([["helper-accordion",[[1,"helper-accordion",{"ticketHistoryFlag":[4,"ticket-history-flag"],"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);
14
14
  });
15
15
  };
16
16
 
@@ -1 +1 @@
1
- import{p as e,b as t}from"./p-e6ddfc6c.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-797268f3",[[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]}]]]],e)));
1
+ import{p as e,b as t}from"./p-e6ddfc6c.js";(()=>{const t=import.meta.url,a={};return""!==t&&(a.resourcesUrl=new URL(".",t).href),e(a)})().then((e=>t([["p-b6a654d9",[[1,"helper-accordion",{ticketHistoryFlag:[4,"ticket-history-flag"],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]}]]]],e)));
@@ -0,0 +1 @@
1
+ import{r as t,c as e,h as i}from"./p-e6ddfc6c.js";const o=["ro","en"],r={en:{deleteTicket:"Delete ticket"},ro:{deleteTicket:"Sterge biletul"}},s=class{constructor(i){t(this,i),this.accordionEvent=e(this,"helperAccordionAction",7),this.ticketHistoryFlag=!1,this.headerTitle="",this.headerSubtitle="",this.description="",this.footer=!1,this.deleteTab=!1,this.postMessage=!1,this.eventName="helperAccordionAction",this.collapsed=!0,this.language="en"}connectedCallback(){this.showContent=!this.collapsed}toggleContent(){this.showContent=!this.showContent}deleteAction(){this.postMessage&&window.postMessage({type:this.eventName},window.location.href),this.accordionEvent.emit()}render(){return i("div",{class:"Wrapper"},i("div",{class:!0===this.ticketHistoryFlag?"HeaderTicketHistory":"Header"},i("p",{class:"Title"},this.headerTitle),i("p",{class:"Subtitle"},this.headerSubtitle),i("p",{class:"Subtitle"},this.description),i("span",{class:"Expand",onClick:()=>this.toggleContent()},this.showContent?"<":">")),this.showContent&&i("div",null,i("div",{class:"Content"},i("slot",{name:"accordionContent"}),this.footer&&this.showContent&&i("div",null,this.deleteTab&&i("span",{class:"ActionButton",onClick:()=>this.deleteAction()},(()=>{const t=this.language;return r[void 0!==t&&o.includes(t)?t:"en"].deleteTicket})())))))}};s.style='@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 4px 0 0;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}.HeaderTicketHistory{border-radius:4px;background:#F1F1F1;display:flex;gap:30px;border:1px solid #009993;padding:8px 10px;user-select:none;margin-bottom:5px}.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}';export{s as helper_accordion}
@@ -1,5 +1,9 @@
1
1
  import { EventEmitter } from '../../stencil-public-runtime';
2
2
  export declare class Accordion {
3
+ /**
4
+ * Flag for ticket history
5
+ */
6
+ ticketHistoryFlag: boolean;
3
7
  /**
4
8
  * Title (top header)
5
9
  */
@@ -43,6 +43,10 @@ export namespace Components {
43
43
  * Activates postMessages as events for actions from the widget
44
44
  */
45
45
  "postMessage": boolean;
46
+ /**
47
+ * Flag for ticket history
48
+ */
49
+ "ticketHistoryFlag": boolean;
46
50
  }
47
51
  }
48
52
  declare global {
@@ -98,6 +102,10 @@ declare namespace LocalJSX {
98
102
  * Activates postMessages as events for actions from the widget
99
103
  */
100
104
  "postMessage"?: boolean;
105
+ /**
106
+ * Flag for ticket history
107
+ */
108
+ "ticketHistoryFlag"?: boolean;
101
109
  }
102
110
  interface IntrinsicElements {
103
111
  "helper-accordion": HelperAccordion;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/helper-accordion",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "main": "./dist/index.cjs.js",
5
5
  "module": "./dist/index.js",
6
6
  "es2015": "./dist/esm/index.mjs",
@@ -1 +0,0 @@
1
- import{r as t,c as e,h as o}from"./p-e6ddfc6c.js";const i=["ro","en"],s={en:{deleteTicket:"Delete ticket"},ro:{deleteTicket:"Sterge biletul"}},r=class{constructor(o){t(this,o),this.accordionEvent=e(this,"helperAccordionAction",7),this.headerTitle="",this.headerSubtitle="",this.description="",this.footer=!1,this.deleteTab=!1,this.postMessage=!1,this.eventName="helperAccordionAction",this.collapsed=!0,this.language="en"}connectedCallback(){this.showContent=!this.collapsed}toggleContent(){this.showContent=!this.showContent}deleteAction(){this.postMessage&&window.postMessage({type:this.eventName},window.location.href),this.accordionEvent.emit()}render(){return o("div",{class:"Wrapper"},o("div",{class:"Header"},o("p",{class:"Title"},this.headerTitle),o("p",{class:"Subtitle"},this.headerSubtitle),o("p",{class:"Subtitle"},this.description),o("span",{class:"Expand",onClick:()=>this.toggleContent()},this.showContent?"<":">")),this.showContent&&o("div",null,o("div",{class:"Content"},o("slot",{name:"accordionContent"}),this.footer&&this.showContent&&o("div",null,this.deleteTab&&o("span",{class:"ActionButton",onClick:()=>this.deleteAction()},(()=>{const t=this.language;return s[void 0!==t&&i.includes(t)?t:"en"].deleteTicket})())))))}};r.style='@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}';export{r as helper_accordion}