globuswebcomponents 1.4.6 → 1.4.7
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.
- package/dist/cjs/gb-comment-item.cjs.entry.js +1 -1
- package/dist/cjs/gb-comment-item.cjs.entry.js.map +1 -1
- package/dist/cjs/gb-comment-item.entry.cjs.js.map +1 -1
- package/dist/cjs/gb-comment.cjs.entry.js +25 -25
- package/dist/cjs/gb-comment.cjs.entry.js.map +1 -1
- package/dist/cjs/gb-comment.entry.cjs.js.map +1 -1
- package/dist/collection/components/gb-comment/gb-comment.js +26 -26
- package/dist/collection/components/gb-comment/gb-comment.js.map +1 -1
- package/dist/collection/components/gb-comment-item/gb-comment-item.js +1 -1
- package/dist/collection/components/gb-comment-item/gb-comment-item.js.map +1 -1
- package/dist/components/gb-comment-item.js +1 -1
- package/dist/components/gb-comment.js +26 -26
- package/dist/components/gb-comment.js.map +1 -1
- package/dist/components/{p-B7nOhRrD.js → p-B9DT0cx2.js} +3 -3
- package/dist/components/{p-B7nOhRrD.js.map → p-B9DT0cx2.js.map} +1 -1
- package/dist/docs.json +2 -2
- package/dist/esm/gb-comment-item.entry.js +1 -1
- package/dist/esm/gb-comment-item.entry.js.map +1 -1
- package/dist/esm/gb-comment.entry.js +25 -25
- package/dist/esm/gb-comment.entry.js.map +1 -1
- package/dist/globuscomponents/gb-comment-item.entry.esm.js.map +1 -1
- package/dist/globuscomponents/gb-comment.entry.esm.js.map +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-d1f71a55.entry.js → p-08fd2d09.entry.js} +2 -2
- package/dist/globuscomponents/p-08fd2d09.entry.js.map +1 -0
- package/dist/globuscomponents/{p-ce184479.entry.js → p-aca9380c.entry.js} +2 -2
- package/dist/globuscomponents/{p-ce184479.entry.js.map → p-aca9380c.entry.js.map} +1 -1
- package/package.json +1 -1
- package/dist/globuscomponents/p-d1f71a55.entry.js.map +0 -1
|
@@ -14,7 +14,7 @@ const GbCommentItem = class {
|
|
|
14
14
|
this.connector = false;
|
|
15
15
|
}
|
|
16
16
|
render() {
|
|
17
|
-
return (index.h("div", { key: '
|
|
17
|
+
return (index.h("div", { key: '140246c8712dfb3951f166c0b4bea08287f94a07', class: "comment-item" }, index.h("div", { key: '0dcc3386724de20c4ec4f7314fd95c43d992a991', class: "left" }, index.h("div", { key: '2cb496d87c2486d07b20c555919ce2018b2442fa', class: "comment-bullet" }), this.connector && index.h("hr", { key: '249dc4c9db97c92be2a3b70c9b13991c7f8a1ff7', class: "line" })), index.h("div", { key: '003b75e5c4bb5dd1ed2132a896b092ad488c278f', class: "comment-content" }, index.h("div", { key: 'badb12e36e0415fc764b87cfcacc7e00aad9ac24', class: "reviewer-info" }, index.h("p", { key: '094a7b0561e51c839333097f67ae581e2057623c', class: "text-sm-semi-bold" }, this.author, " (", this.role, ")")), index.h("div", { key: 'ce5b2ea65f4ae70c79be7942c71f02d168b4508d', class: "comment-text" }, index.h("p", { key: '7714298dccaf52a282049bbb225c0100aefa8da3', class: "text-sm-regular" }, this.comment)), index.h("div", { key: '6ce92aff55a65c4d9a53e12dd577fa68be3ddbc8', class: "timestamp" }, index.h("p", { key: 'f11788b60a7e20dd1d4e3c51d74b080c20e53736', class: "text-xs-regular" }, " ", this.timestamp)))));
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
20
|
GbCommentItem.style = gbCommentItemCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gb-comment-item.entry.cjs.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,kyuEAAkyuE;;MCQ9yuE,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAW,EAAE;AACnB,QAAA,IAAI,CAAA,IAAA,
|
|
1
|
+
{"file":"gb-comment-item.entry.cjs.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,kyuEAAkyuE;;MCQ9yuE,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAW,EAAE;AACnB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;AACpB,QAAA,IAAS,CAAA,SAAA,GAAW,EAAE;AACtB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAuBnC;IArBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACjBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAO,CAAA,EACjC,IAAI,CAAC,SAAS,IAAIA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,MAAM,GAAE,CAC/B,EACRA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAAE,IAAI,CAAC,MAAM,QAAI,IAAI,CAAC,IAAI,MAAM,CACxD,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAAE,IAAI,CAAC,OAAO,CAAK,CACzC,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,OAAG,IAAI,CAAC,SAAS,CAAK,CAC5C,CACF,CACF;;;;;;;","names":["h"],"sources":["src/components/gb-comment-item/gb-comment-item.css?tag=gb-comment-item&encapsulation=shadow","src/components/gb-comment-item/gb-comment-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.comment-item {\r\n display: flex;\r\n gap: 12px;\r\n align-items: flex-start;\r\n color: red;\r\n position: relative; \r\n align-items: flex-start;\r\n padding-left: var(--spacing-12);\r\n margin-bottom: -1rem;\r\n}\r\n\r\n.comment-item:not(:last-child)::before {\r\n content: '';\r\n position: absolute;\r\n left: 10px;\r\n top: 16px;\r\n width: 2px;\r\n height: 100%;\r\n background-color: #064E94;\r\n}\r\n\r\n.comment-bullet {\r\n width: 12px;\r\n height: 12px;\r\n border-radius: var(--rounded-full);\r\n background: var(--color-icon-information, #064E94);\r\n margin: 5px;\r\n}\r\n\r\n.line{\r\n background-color: #064E94;\r\n width: 0.5px;\r\n height: 4.5rem;\r\n padding: 1px;\r\n border: none;\r\n margin-top: -5px;\r\n left: 10px;\r\n top: 16px;\r\n}\r\n\r\n.left{\r\n display: flex;\r\n align-items: center;\r\n flex-direction: column;\r\n\r\n}\r\n\r\n.comment-wrapper{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n align-self: stretch;\r\n}\r\n\r\n\r\n.comment-content {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-1);\r\n padding-bottom: var(--spacing-6);\r\n}\r\n\r\n.comments-container {\r\n padding: 16px;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: var(--spacing-4);\r\n border-radius: 12px;\r\n border: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n /* transition: 1s ease-in-out; */\r\n}\r\n\r\n.comment-content {\r\n flex: 1;\r\n}\r\n\r\n.reviewer-info {\r\n color: var(--color-text-information, #064E94);\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-size: var(--Font-Size-T-sm, 14px);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Semi-Bold, 600);\r\n line-height: var(--Font-Line-height-T-sm, 21px);\r\n letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}\r\n\r\n.comment-text {\r\n color: var(--color-text-information, #064E94);\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-size: var(--Font-Size-T-sm, 14px);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Regular, 400);\r\n line-height: var(--Font-Line-height-T-sm, 21px);\r\n letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}\r\n\r\n.timestamp {\r\n color: var(--color-text-information, #064E94);\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-size: var(--Font-Size-T-xs, 12px);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Regular, 400);\r\n line-height: var(--Font-Line-height-T-xs, 18px); \r\n letter-spacing: var(--Font-Letter-spacing-T-xs, 0px);\r\n margin-bottom: 10px;\r\n}\r\n\r\n","import { Component, h, Prop } from '@stencil/core';\r\n \r\n@Component({\r\n tag: 'gb-comment-item',\r\n styleUrl: 'gb-comment-item.css',\r\n shadow: true,\r\n})\r\n\r\nexport class GbCommentItem { \r\n @Prop() author: string = '';\r\n @Prop() role: string = '';\r\n @Prop() comment: string = '';\r\n @Prop() timestamp: string = '';\r\n @Prop() connector: boolean = false;\r\n\r\n render() {\r\n return (\r\n <div class=\"comment-item\">\r\n <div class=\"left\">\r\n <div class=\"comment-bullet\"></div>\r\n {this.connector && <hr class=\"line\"/>}\r\n </div>\r\n <div class=\"comment-content\">\r\n <div class=\"reviewer-info\">\r\n <p class=\"text-sm-semi-bold\">{this.author} ({this.role})</p>\r\n </div>\r\n <div class=\"comment-text\">\r\n <p class=\"text-sm-regular\">{this.comment}</p>\r\n </div>\r\n <div class=\"timestamp\">\r\n <p class=\"text-xs-regular\"> {this.timestamp}</p>\r\n </div>\r\n </div>\r\n </div>\r\n )\r\n }\r\n}"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gb-comment-item.entry.cjs.js","sources":["src/components/gb-comment-item/gb-comment-item.css?tag=gb-comment-item&encapsulation=shadow","src/components/gb-comment-item/gb-comment-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.comment-item {\r\n display: flex;\r\n gap: 12px;\r\n align-items: flex-start;\r\n color: red;\r\n position: relative; \r\n align-items: flex-start;\r\n padding-left: var(--spacing-12);\r\n margin-bottom: -1rem;\r\n}\r\n\r\n.comment-item:not(:last-child)::before {\r\n content: '';\r\n position: absolute;\r\n left: 10px;\r\n top: 16px;\r\n width: 2px;\r\n height: 100%;\r\n background-color: #064E94;\r\n}\r\n\r\n.comment-bullet {\r\n width: 12px;\r\n height: 12px;\r\n border-radius: var(--rounded-full);\r\n background: var(--color-icon-information, #064E94);\r\n margin: 5px;\r\n}\r\n\r\n.line{\r\n background-color: #064E94;\r\n width: 0.5px;\r\n height: 4.5rem;\r\n padding: 1px;\r\n border: none;\r\n margin-top: -5px;\r\n left: 10px;\r\n top: 16px;\r\n}\r\n\r\n.left{\r\n display: flex;\r\n align-items: center;\r\n flex-direction: column;\r\n\r\n}\r\n\r\n.comment-wrapper{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n align-self: stretch;\r\n}\r\n\r\n\r\n.comment-content {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-1);\r\n padding-bottom: var(--spacing-6);\r\n}\r\n\r\n.comments-container {\r\n padding: 16px;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: var(--spacing-4);\r\n border-radius: 12px;\r\n border: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n /* transition: 1s ease-in-out; */\r\n}\r\n\r\n.comment-content {\r\n flex: 1;\r\n}\r\n\r\n.reviewer-info {\r\n color: var(--color-text-information, #064E94);\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-size: var(--Font-Size-T-sm, 14px);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Semi-Bold, 600);\r\n line-height: var(--Font-Line-height-T-sm, 21px);\r\n letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}\r\n\r\n.comment-text {\r\n color: var(--color-text-information, #064E94);\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-size: var(--Font-Size-T-sm, 14px);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Regular, 400);\r\n line-height: var(--Font-Line-height-T-sm, 21px);\r\n letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}\r\n\r\n.timestamp {\r\n color: var(--color-text-information, #064E94);\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-size: var(--Font-Size-T-xs, 12px);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Regular, 400);\r\n line-height: var(--Font-Line-height-T-xs, 18px); \r\n letter-spacing: var(--Font-Letter-spacing-T-xs, 0px);\r\n margin-bottom: 10px;\r\n}\r\n\r\n","import { Component, h, Prop } from '@stencil/core';\r\n \r\n@Component({\r\n tag: 'gb-comment-item',\r\n styleUrl: 'gb-comment-item.css',\r\n shadow: true,\r\n})\r\n\r\nexport class GbCommentItem { \r\n @Prop() author: string = '';\r\n @Prop() role: string ='';\r\n @Prop() comment: string = '';\r\n @Prop() timestamp: string = '';\r\n @Prop() connector: boolean = false;\r\n\r\n render() {\r\n return (\r\n <div class=\"comment-item\">\r\n <div class=\"left\">\r\n <div class=\"comment-bullet\"></div>\r\n {this.connector && <hr class=\"line\"/>}\r\n </div>\r\n <div class=\"comment-content\">\r\n <div class=\"reviewer-info\">\r\n <p class=\"text-sm-semi-bold\">{this.author} ({this.role})</p>\r\n </div>\r\n <div class=\"comment-text\">\r\n <p class=\"text-sm-regular\">{this.comment}</p>\r\n </div>\r\n <div class=\"timestamp\">\r\n <p class=\"text-xs-regular\"> {this.timestamp}</p>\r\n </div>\r\n </div>\r\n </div>\r\n )\r\n }\r\n}"],"names":["h"],"mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,kyuEAAkyuE;;MCQ9yuE,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAW,EAAE;AACnB,QAAA,IAAI,CAAA,IAAA,
|
|
1
|
+
{"version":3,"file":"gb-comment-item.entry.cjs.js","sources":["src/components/gb-comment-item/gb-comment-item.css?tag=gb-comment-item&encapsulation=shadow","src/components/gb-comment-item/gb-comment-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.comment-item {\r\n display: flex;\r\n gap: 12px;\r\n align-items: flex-start;\r\n color: red;\r\n position: relative; \r\n align-items: flex-start;\r\n padding-left: var(--spacing-12);\r\n margin-bottom: -1rem;\r\n}\r\n\r\n.comment-item:not(:last-child)::before {\r\n content: '';\r\n position: absolute;\r\n left: 10px;\r\n top: 16px;\r\n width: 2px;\r\n height: 100%;\r\n background-color: #064E94;\r\n}\r\n\r\n.comment-bullet {\r\n width: 12px;\r\n height: 12px;\r\n border-radius: var(--rounded-full);\r\n background: var(--color-icon-information, #064E94);\r\n margin: 5px;\r\n}\r\n\r\n.line{\r\n background-color: #064E94;\r\n width: 0.5px;\r\n height: 4.5rem;\r\n padding: 1px;\r\n border: none;\r\n margin-top: -5px;\r\n left: 10px;\r\n top: 16px;\r\n}\r\n\r\n.left{\r\n display: flex;\r\n align-items: center;\r\n flex-direction: column;\r\n\r\n}\r\n\r\n.comment-wrapper{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n align-self: stretch;\r\n}\r\n\r\n\r\n.comment-content {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-1);\r\n padding-bottom: var(--spacing-6);\r\n}\r\n\r\n.comments-container {\r\n padding: 16px;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: var(--spacing-4);\r\n border-radius: 12px;\r\n border: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n /* transition: 1s ease-in-out; */\r\n}\r\n\r\n.comment-content {\r\n flex: 1;\r\n}\r\n\r\n.reviewer-info {\r\n color: var(--color-text-information, #064E94);\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-size: var(--Font-Size-T-sm, 14px);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Semi-Bold, 600);\r\n line-height: var(--Font-Line-height-T-sm, 21px);\r\n letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}\r\n\r\n.comment-text {\r\n color: var(--color-text-information, #064E94);\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-size: var(--Font-Size-T-sm, 14px);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Regular, 400);\r\n line-height: var(--Font-Line-height-T-sm, 21px);\r\n letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}\r\n\r\n.timestamp {\r\n color: var(--color-text-information, #064E94);\r\n font-family: var(--Font-Family-Body, Sora);\r\n font-size: var(--Font-Size-T-xs, 12px);\r\n font-style: normal;\r\n font-weight: var(--Font-Weight-Regular, 400);\r\n line-height: var(--Font-Line-height-T-xs, 18px); \r\n letter-spacing: var(--Font-Letter-spacing-T-xs, 0px);\r\n margin-bottom: 10px;\r\n}\r\n\r\n","import { Component, h, Prop } from '@stencil/core';\r\n \r\n@Component({\r\n tag: 'gb-comment-item',\r\n styleUrl: 'gb-comment-item.css',\r\n shadow: true,\r\n})\r\n\r\nexport class GbCommentItem { \r\n @Prop() author: string = '';\r\n @Prop() role: string = '';\r\n @Prop() comment: string = '';\r\n @Prop() timestamp: string = '';\r\n @Prop() connector: boolean = false;\r\n\r\n render() {\r\n return (\r\n <div class=\"comment-item\">\r\n <div class=\"left\">\r\n <div class=\"comment-bullet\"></div>\r\n {this.connector && <hr class=\"line\"/>}\r\n </div>\r\n <div class=\"comment-content\">\r\n <div class=\"reviewer-info\">\r\n <p class=\"text-sm-semi-bold\">{this.author} ({this.role})</p>\r\n </div>\r\n <div class=\"comment-text\">\r\n <p class=\"text-sm-regular\">{this.comment}</p>\r\n </div>\r\n <div class=\"timestamp\">\r\n <p class=\"text-xs-regular\"> {this.timestamp}</p>\r\n </div>\r\n </div>\r\n </div>\r\n )\r\n }\r\n}"],"names":["h"],"mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,kyuEAAkyuE;;MCQ9yuE,aAAa,GAAA,MAAA;AAN1B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAM,CAAA,MAAA,GAAW,EAAE;AACnB,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AACjB,QAAA,IAAO,CAAA,OAAA,GAAW,EAAE;AACpB,QAAA,IAAS,CAAA,SAAA,GAAW,EAAE;AACtB,QAAA,IAAS,CAAA,SAAA,GAAY,KAAK;AAuBnC;IArBC,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACjBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAO,CAAA,EACjC,IAAI,CAAC,SAAS,IAAIA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,MAAM,GAAE,CAC/B,EACRA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1BA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAAE,IAAI,CAAC,MAAM,QAAI,IAAI,CAAC,IAAI,MAAM,CACxD,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAAE,IAAI,CAAC,OAAO,CAAK,CACzC,EACNA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAG,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,OAAG,IAAI,CAAC,SAAS,CAAK,CAC5C,CACF,CACF;;;;;;;"}
|
|
@@ -17,30 +17,30 @@ const ReviewersComments = class {
|
|
|
17
17
|
this.noCommentText = "No comment yet";
|
|
18
18
|
this.noCommentTextSub = "No reviewer has left a comment yet, you will be notified when a comment drops";
|
|
19
19
|
this.comments = [
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
20
|
+
// {
|
|
21
|
+
// author: 'Prince Ogheneriere',
|
|
22
|
+
// role: 'Authorizer',
|
|
23
|
+
// comment: 'This is error and fraud free. I concur',
|
|
24
|
+
// timestamp: '07-Oct-2024 6:00PM' ,
|
|
25
|
+
// },
|
|
26
|
+
// {
|
|
27
|
+
// author: 'Prince Ogheneriere',
|
|
28
|
+
// role: 'Authorizer',
|
|
29
|
+
// comment: 'This is error and fraud free. I concur',
|
|
30
|
+
// timestamp: '07-Oct-2024 6:00PM',
|
|
31
|
+
// },
|
|
32
|
+
// {
|
|
33
|
+
// author: 'Prince Ogheneriere',
|
|
34
|
+
// role: 'Authorizer',
|
|
35
|
+
// comment: 'I concur to the transactions in this call-over',
|
|
36
|
+
// timestamp: '07-Oct-2024 6:00PM',
|
|
37
|
+
// },
|
|
38
|
+
// {
|
|
39
|
+
// author: 'Gideon',
|
|
40
|
+
// role: 'Designer',
|
|
41
|
+
// comment: 'I concur to the transactions in this call-over',
|
|
42
|
+
// timestamp: '07-Nov-2024 6:00PM',
|
|
43
|
+
// },
|
|
44
44
|
];
|
|
45
45
|
}
|
|
46
46
|
toggleComments() {
|
|
@@ -55,7 +55,7 @@ const ReviewersComments = class {
|
|
|
55
55
|
const hasComments = this.comments && this.comments.length > 0;
|
|
56
56
|
const patternSrc = index.getAssetPath(`assets/background_pattern.svg`);
|
|
57
57
|
const illustrationSrc = index.getAssetPath(`assets/illustration.svg`);
|
|
58
|
-
return (index.h("div", { key: '
|
|
58
|
+
return (index.h("div", { key: 'f9a5092ed6886cacd8e32da30ee5164eecff8307', class: `comments-container ${!hasComments ? 'no-comments-state' : ''}` }, index.h("div", { key: 'd9b2fc257ebc1b828ccc556c25e83deb408fb729', class: `header ${this.state}` }, index.h("div", { key: 'c9ebbdca447cfc873f1a1f7bc17a50a80a604a46', class: "title-section" }, index.h("svg", { key: '25463eebfa9e77b6b920e5eeaa80dfe773411389', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "info-icon" }, index.h("path", { key: 'ff297900f80a4c5d455b01db6aff1aac5ecfaeca', opacity: "0.4", d: "M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50271 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03143 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03143 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50271 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z", fill: "#064E94" }), index.h("path", { key: '9f4676f5f930359126ed6a5377e9cc47ead7e565', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.6819 10.5273C11.9289 10.5605 12.2707 10.6494 12.5607 10.9394C12.8507 11.2294 12.9396 11.5711 12.9728 11.8182C13.0003 12.0228 13.0001 12.2608 13 12.4606C13 12.474 13 12.4871 13 12.5V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V12.5C10.4477 12.5 10 12.0523 10 11.5C10 10.9477 10.4477 10.5 11 10.5C11.0129 10.5 11.0261 10.5 11.0394 10.5C11.2393 10.4999 11.4772 10.4997 11.6819 10.5273Z", fill: "#064E94" }), index.h("path", { key: 'c0d4e4492488e08ae836baa500269964b589ff20', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.9999 7.5C10.9999 6.94772 11.4456 6.5 11.9954 6.5H12.0044C12.5542 6.5 12.9999 6.94772 12.9999 7.5C12.9999 8.05228 12.5542 8.5 12.0044 8.5H11.9954C11.4456 8.5 10.9999 8.05228 10.9999 7.5Z", fill: "#064E94" })), index.h("h2", { key: 'f54558bb90644545a957a5889773e6517805751a', class: "text-md-semi-bold heading" }, this.heading)), index.h("gb-button", { key: 'f70a43c3b56084857d87b338475c3f9c853c9908', size: 'sm', hierarchy: 'link_color', icon: 'default', onClick: () => this.toggleComments() }, this.state === 'expanded' ? (index.h("p", null, "Hide Comments")) : (index.h("p", null, "Show Comments")))), this.state === 'expanded' && (hasComments ? (index.h("div", { class: "comments-wrapper" }, this.comments.map((comment, index$1) => (index.h("gb-comment-item", { key: index$1, author: comment.author, role: comment.role, comment: comment.comment, timestamp: comment.timestamp, connector: this.comments.length > 1 && index$1 < this.comments.length - 1 ? true : false }))))) : (index.h("div", { class: "container" }, index.h("div", { class: "frame" }, index.h("img", { src: patternSrc, alt: "", class: "empty_state_pattern" }), index.h("div", { class: "empty_state" }, index.h("div", { class: "content" }, index.h("img", { src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), index.h("div", { class: "text" }, index.h("p", { class: "main-text text-lg-semi-bold" }, this.noCommentText), index.h("p", { class: "sub-text text-sm-regular" }, this.noCommentTextSub))))))))));
|
|
59
59
|
}
|
|
60
60
|
};
|
|
61
61
|
ReviewersComments.style = gbCommentCss;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gb-comment.entry.cjs.js","mappings":"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","names":["getAssetPath","h","index"],"sources":["src/components/gb-comment/gb-comment.css?tag=gb-comment&encapsulation=shadow","src/components/gb-comment/gb-comment.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n display: block;\r\n\r\n}\r\n\r\n.alpha-mask {\r\n mask-type: alpha;\r\n}\r\n\r\n.comments-container {\r\n padding: 16px;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: var(--spacing-4);\r\n border-radius: 12px;\r\n border: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n /* transition: 1s ease-in-out; */\r\n}\r\n\r\n.header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: fit-content;\r\n padding: 0.5rem;\r\n}\r\n\r\n.header.expanded{\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.header.collased{\r\n margin-bottom: 0;\r\n}\r\n\r\n.title-section {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n}\r\n\r\n.info-icon {\r\n width: 24px;\r\n height: 24px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.heading{\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.comments-wrapper{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n align-self: stretch;\r\n\r\n}\r\n\r\n.no-comments-state-images{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n \r\n}\r\n\r\n.comments-container.no-comments-state {\r\n height: fit-content;\r\n}\r\n\r\n.no-comment-text-wrapper span{\r\n display: flex;\r\n justify-content: center;\r\n}\r\n\r\n.empty_state_pattern{\r\n position: absolute;\r\n top: 0;\r\n width: 400px;\r\n height: 120px;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n.empty_state{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-3);\r\n flex-shrink: 0;\r\n align-self: stretch;\r\n}\r\n\r\n.text{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.content{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: var(--spacing-5);\r\n align-self: stretch;\r\n}\r\n\r\n.frame{\r\n display: flex;\r\n justify-content: center;\r\n position: relative;\r\n}\r\n\r\n.container{\r\n position: relative;\r\n}\r\n\r\n.main-text{\r\n color: var(--color-text-bold, #202939);\r\n \r\n}\r\n\r\n.sub-text{\r\n color: var(--color-text, #4B5565);\r\n}\r\n","import { Component, Prop, h, getAssetPath } from '@stencil/core';\r\n\r\nexport enum State {\r\n Expanded = 'expanded',\r\n Collapsed = 'collapsed'\r\n}\r\n\r\n@Component({\r\n tag: 'gb-comment', \r\n styleUrl: 'gb-comment.css',\r\n shadow: true \r\n})\r\n\r\nexport class ReviewersComments {\r\n @Prop() heading: string = \"Reviewers' comment\";\r\n @Prop({mutable: true}) state: State = State.Expanded;\r\n @Prop() noCommentText: string = \"No comment yet\"\r\n @Prop () noCommentTextSub: string = \"No reviewer has left a comment yet, you will be notified when a comment drops\"\r\n @Prop() comments:any[] = [\r\n {\r\n author: 'Prince Ogheneriere',\r\n role: 'Authorizer',\r\n comment: 'This is error and fraud free. I concur',\r\n timestamp: '07-Oct-2024 6:00PM' ,\r\n },\r\n // {\r\n // author: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'This is error and fraud free. I concur',\r\n // timestamp: '07-Oct-2024 6:00PM',\r\n \r\n // },\r\n // {\r\n // author: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'I concur to the transactions in this call-over',\r\n // timestamp: '07-Oct-2024 6:00PM',\r\n // },\r\n // {\r\n // author: 'Gideon',\r\n // role: 'Designer',\r\n // comment: 'I concur to the transactions in this call-over',\r\n // timestamp: '07-Nov-2024 6:00PM',\r\n // },\r\n \r\n ]; \r\n\r\n toggleComments() {\r\n if(this.state === State.Expanded) {\r\n this.state = State.Collapsed;\r\n } else if(this.state === State.Collapsed) {\r\n this.state = State.Expanded;\r\n }\r\n }\r\n\r\n render() {\r\n const hasComments = this.comments && this.comments.length > 0;\r\n const patternSrc = getAssetPath(`assets/background_pattern.svg`);\r\n const illustrationSrc = getAssetPath(`assets/illustration.svg`);\r\n\r\n \r\n\r\n return (\r\n <div class={`comments-container ${!hasComments ? 'no-comments-state' : ''}`}>\r\n <div class={`header ${this.state}`}>\r\n <div class=\"title-section\">\r\n <svg \r\n width=\"24\" \r\n height=\"24\" \r\n viewBox=\"0 0 24 24\" \r\n fill=\"none\" \r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"info-icon\"\r\n >\r\n <path \r\n opacity=\"0.4\" \r\n d=\"M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50271 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03143 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03143 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50271 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z\" \r\n fill=\"#064E94\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\" \r\n clip-rule=\"evenodd\" \r\n d=\"M11.6819 10.5273C11.9289 10.5605 12.2707 10.6494 12.5607 10.9394C12.8507 11.2294 12.9396 11.5711 12.9728 11.8182C13.0003 12.0228 13.0001 12.2608 13 12.4606C13 12.474 13 12.4871 13 12.5V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V12.5C10.4477 12.5 10 12.0523 10 11.5C10 10.9477 10.4477 10.5 11 10.5C11.0129 10.5 11.0261 10.5 11.0394 10.5C11.2393 10.4999 11.4772 10.4997 11.6819 10.5273Z\" \r\n fill=\"#064E94\"\r\n />\r\n <path \r\n fill-rule=\"evenodd\" \r\n clip-rule=\"evenodd\" \r\n d=\"M10.9999 7.5C10.9999 6.94772 11.4456 6.5 11.9954 6.5H12.0044C12.5542 6.5 12.9999 6.94772 12.9999 7.5C12.9999 8.05228 12.5542 8.5 12.0044 8.5H11.9954C11.4456 8.5 10.9999 8.05228 10.9999 7.5Z\" \r\n fill=\"#064E94\"\r\n />\r\n </svg>\r\n <h2 class=\"text-md-semi-bold heading\">{this.heading}</h2>\r\n </div>\r\n \r\n <gb-button size='sm' hierarchy='link_color' icon='default' onClick={() => this.toggleComments()}>\r\n {this.state === 'expanded'? (<p>Hide Comments</p>):(<p>Show Comments</p>)} \r\n </gb-button>\r\n </div>\r\n\r\n {this.state === 'expanded' && (\r\n hasComments ? (\r\n <div class=\"comments-wrapper\">\r\n {this.comments.map((comment, index) => (\r\n <gb-comment-item \r\n key={index} \r\n author={comment.author} \r\n role={comment.role} \r\n comment={comment.comment} \r\n timestamp={comment.timestamp} \r\n \r\n connector={this.comments.length>1&&index<this.comments.length-1?true:false}\r\n /> \r\n ))}\r\n </div>\r\n ) : ( \r\n <div class=\"container\">\r\n <div class=\"frame\">\r\n <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\r\n <div class=\"empty_state\">\r\n <div class=\"content\">\r\n <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\r\n <div class=\"text\">\r\n <p class=\"main-text text-lg-semi-bold\">{this.noCommentText}</p>\r\n <p class=\"sub-text text-sm-regular\">{this.noCommentTextSub}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n )\r\n )}\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
|
|
1
|
+
{"file":"gb-comment.entry.cjs.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,q4tEAAq4tE;;ACE15tE,IAAY,KAGX;AAHD,CAAA,UAAY,KAAK,EAAA;AACf,IAAA,KAAA,CAAA,UAAA,CAAA,GAAA,UAAqB;AACrB,IAAA,KAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACzB,CAAC,EAHW,KAAK,KAAL,KAAK,GAGhB,EAAA,CAAA,CAAA;MAQY,iBAAiB,GAAA,MAAA;AAN9B,IAAA,WAAA,CAAA,OAAA,EAAA;;AAOU,QAAA,IAAO,CAAA,OAAA,GAAW,oBAAoB;AACvB,QAAA,IAAA,CAAA,KAAK,GAAU,KAAK,CAAC,QAAQ;AAC5C,QAAA,IAAa,CAAA,aAAA,GAAW,gBAAgB;AACvC,QAAA,IAAgB,CAAA,gBAAA,GAAW,+EAA+E;QAC3G,IAAA,CAAA,QAAQ,GAAU;;;;;;;;;;;;;;;;;;;;;;;;;SA2BzB;AA2FF;IAzFC,cAAc,GAAA;QACZ,IAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,QAAQ,EAAE;AAChC,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,SAAS;;aACvB,IAAG,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC,SAAS,EAAE;AACxC,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,QAAQ;;;IAI/B,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC;AAC7D,QAAA,MAAM,UAAU,GAAGA,kBAAY,CAAC,CAAA,6BAAA,CAA+B,CAAC;AAChE,QAAA,MAAM,eAAe,GAAGA,kBAAY,CAAC,CAAA,uBAAA,CAAyB,CAAC;QAI/D,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,mBAAA,EAAsB,CAAC,WAAW,GAAG,mBAAmB,GAAG,EAAE,CAAA,CAAE,EAAA,EACzEA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAU,OAAA,EAAA,IAAI,CAAC,KAAK,CAAE,CAAA,EAAA,EAChCA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxBA,OACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,WAAW,EAAA,EAEjBA,OACE,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAC,KAAK,EACb,CAAC,EAAC,gzBAAgzB,EAClzB,IAAI,EAAC,SAAS,EACd,CAAA,EACFA,OACY,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAA,EAAA,SAAS,EACT,WAAA,EAAA,SAAS,EACnB,CAAC,EAAC,4ZAA4Z,EAC9Z,IAAI,EAAC,SAAS,EACd,CAAA,EACFA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAA,EACY,SAAS,EAAA,WAAA,EACT,SAAS,EACnB,CAAC,EAAC,+LAA+L,EACjM,IAAI,EAAC,SAAS,EAAA,CACd,CACE,EACNA,OAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EAAE,IAAI,CAAC,OAAO,CAAM,CACrD,EAENA,OAAA,CAAA,WAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,EAAA,EAC5F,IAAI,CAAC,KAAK,KAAK,UAAU,IAAGA,OAAoB,CAAA,GAAA,EAAA,IAAA,EAAA,eAAA,CAAA,KAAGA,OAAoB,CAAA,GAAA,EAAA,IAAA,EAAA,eAAA,CAAA,CAAC,CAC/D,CACR,EAEL,IAAI,CAAC,KAAK,KAAK,UAAU,KACxB,WAAW,IACTA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC1B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAEC,OAAK,MAChCD,OACE,CAAA,iBAAA,EAAA,EAAA,GAAG,EAAEC,OAAK,EACV,MAAM,EAAE,OAAO,CAAC,MAAM,EACtB,IAAI,EAAE,OAAO,CAAC,IAAI,EAClB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,SAAS,EAAE,OAAO,CAAC,SAAS,EAE5B,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAC,CAAC,IAAEA,OAAK,GAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAC,CAAC,GAAC,IAAI,GAAC,KAAK,EAAA,CAC1E,CACH,CAAC,CACE,KAEPD,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,WAAW,EAAA,EACpBA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,OAAO,EAAA,EACjBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,EAAC,KAAK,EAAC,qBAAqB,EAAG,CAAA,EAC3DA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,eAAe,EAAE,GAAG,EAAC,WAAW,EAAC,KAAK,EAAC,WAAW,EAAG,CAAA,EAC/DA,OAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACfA,OAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,6BAA6B,IAAE,IAAI,CAAC,aAAa,CAAK,EAC/DA,OAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,0BAA0B,EAAE,EAAA,IAAI,CAAC,gBAAgB,CAAK,CAC3D,CACF,CACF,CACF,CACD,CAEN,CACF,CACG;;;;;;;","names":["getAssetPath","h","index"],"sources":["src/components/gb-comment/gb-comment.css?tag=gb-comment&encapsulation=shadow","src/components/gb-comment/gb-comment.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n display: block;\r\n\r\n}\r\n\r\n.alpha-mask {\r\n mask-type: alpha;\r\n}\r\n\r\n.comments-container {\r\n padding: 16px;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: var(--spacing-4);\r\n border-radius: 12px;\r\n border: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n /* transition: 1s ease-in-out; */\r\n}\r\n\r\n.header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: fit-content;\r\n padding: 0.5rem;\r\n}\r\n\r\n.header.expanded{\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.header.collased{\r\n margin-bottom: 0;\r\n}\r\n\r\n.title-section {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n}\r\n\r\n.info-icon {\r\n width: 24px;\r\n height: 24px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.heading{\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.comments-wrapper{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n align-self: stretch;\r\n\r\n}\r\n\r\n.no-comments-state-images{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n \r\n}\r\n\r\n.comments-container.no-comments-state {\r\n height: fit-content;\r\n}\r\n\r\n.no-comment-text-wrapper span{\r\n display: flex;\r\n justify-content: center;\r\n}\r\n\r\n.empty_state_pattern{\r\n position: absolute;\r\n top: 0;\r\n width: 400px;\r\n height: 120px;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n.empty_state{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-3);\r\n flex-shrink: 0;\r\n align-self: stretch;\r\n}\r\n\r\n.text{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.content{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: var(--spacing-5);\r\n align-self: stretch;\r\n}\r\n\r\n.frame{\r\n display: flex;\r\n justify-content: center;\r\n position: relative;\r\n}\r\n\r\n.container{\r\n position: relative;\r\n}\r\n\r\n.main-text{\r\n color: var(--color-text-bold, #202939);\r\n \r\n}\r\n\r\n.sub-text{\r\n color: var(--color-text, #4B5565);\r\n}\r\n","import { Component, Prop, h, getAssetPath } from '@stencil/core';\r\n\r\nexport enum State {\r\n Expanded = 'expanded',\r\n Collapsed = 'collapsed'\r\n}\r\n\r\n@Component({\r\n tag: 'gb-comment', \r\n styleUrl: 'gb-comment.css',\r\n shadow: true \r\n})\r\n\r\nexport class ReviewersComments {\r\n @Prop() heading: string = \"Reviewers' comment\";\r\n @Prop({mutable: true}) state: State = State.Expanded;\r\n @Prop() noCommentText: string = \"No comment yet\"\r\n @Prop () noCommentTextSub: string = \"No reviewer has left a comment yet, you will be notified when a comment drops\"\r\n @Prop() comments: any[] = [\r\n // {\r\n // author: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'This is error and fraud free. I concur',\r\n // timestamp: '07-Oct-2024 6:00PM' ,\r\n // },\r\n // {\r\n // author: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'This is error and fraud free. I concur',\r\n // timestamp: '07-Oct-2024 6:00PM',\r\n \r\n // },\r\n // {\r\n // author: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'I concur to the transactions in this call-over',\r\n // timestamp: '07-Oct-2024 6:00PM',\r\n // },\r\n // {\r\n // author: 'Gideon',\r\n // role: 'Designer',\r\n // comment: 'I concur to the transactions in this call-over',\r\n // timestamp: '07-Nov-2024 6:00PM',\r\n // },\r\n \r\n ]; \r\n\r\n toggleComments() {\r\n if(this.state === State.Expanded) {\r\n this.state = State.Collapsed;\r\n } else if(this.state === State.Collapsed) {\r\n this.state = State.Expanded;\r\n }\r\n }\r\n\r\n render() {\r\n const hasComments = this.comments && this.comments.length > 0;\r\n const patternSrc = getAssetPath(`assets/background_pattern.svg`);\r\n const illustrationSrc = getAssetPath(`assets/illustration.svg`);\r\n\r\n \r\n\r\n return (\r\n <div class={`comments-container ${!hasComments ? 'no-comments-state' : ''}`}>\r\n <div class={`header ${this.state}`}>\r\n <div class=\"title-section\">\r\n <svg \r\n width=\"24\" \r\n height=\"24\" \r\n viewBox=\"0 0 24 24\" \r\n fill=\"none\" \r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"info-icon\"\r\n >\r\n <path \r\n opacity=\"0.4\" \r\n d=\"M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50271 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03143 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03143 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50271 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z\" \r\n fill=\"#064E94\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\" \r\n clip-rule=\"evenodd\" \r\n d=\"M11.6819 10.5273C11.9289 10.5605 12.2707 10.6494 12.5607 10.9394C12.8507 11.2294 12.9396 11.5711 12.9728 11.8182C13.0003 12.0228 13.0001 12.2608 13 12.4606C13 12.474 13 12.4871 13 12.5V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V12.5C10.4477 12.5 10 12.0523 10 11.5C10 10.9477 10.4477 10.5 11 10.5C11.0129 10.5 11.0261 10.5 11.0394 10.5C11.2393 10.4999 11.4772 10.4997 11.6819 10.5273Z\" \r\n fill=\"#064E94\"\r\n />\r\n <path \r\n fill-rule=\"evenodd\" \r\n clip-rule=\"evenodd\" \r\n d=\"M10.9999 7.5C10.9999 6.94772 11.4456 6.5 11.9954 6.5H12.0044C12.5542 6.5 12.9999 6.94772 12.9999 7.5C12.9999 8.05228 12.5542 8.5 12.0044 8.5H11.9954C11.4456 8.5 10.9999 8.05228 10.9999 7.5Z\" \r\n fill=\"#064E94\"\r\n />\r\n </svg>\r\n <h2 class=\"text-md-semi-bold heading\">{this.heading}</h2>\r\n </div>\r\n \r\n <gb-button size='sm' hierarchy='link_color' icon='default' onClick={() => this.toggleComments()}>\r\n {this.state === 'expanded'? (<p>Hide Comments</p>):(<p>Show Comments</p>)} \r\n </gb-button>\r\n </div>\r\n\r\n {this.state === 'expanded' && (\r\n hasComments ? (\r\n <div class=\"comments-wrapper\">\r\n {this.comments.map((comment, index) => (\r\n <gb-comment-item \r\n key={index} \r\n author={comment.author} \r\n role={comment.role} \r\n comment={comment.comment} \r\n timestamp={comment.timestamp} \r\n \r\n connector={this.comments.length>1&&index<this.comments.length-1?true:false}\r\n /> \r\n ))}\r\n </div>\r\n ) : ( \r\n <div class=\"container\">\r\n <div class=\"frame\">\r\n <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\r\n <div class=\"empty_state\">\r\n <div class=\"content\">\r\n <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\r\n <div class=\"text\">\r\n <p class=\"main-text text-lg-semi-bold\">{this.noCommentText}</p>\r\n <p class=\"sub-text text-sm-regular\">{this.noCommentTextSub}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n )\r\n )}\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gb-comment.entry.cjs.js","sources":["src/components/gb-comment/gb-comment.css?tag=gb-comment&encapsulation=shadow","src/components/gb-comment/gb-comment.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n display: block;\r\n\r\n}\r\n\r\n.alpha-mask {\r\n mask-type: alpha;\r\n}\r\n\r\n.comments-container {\r\n padding: 16px;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: var(--spacing-4);\r\n border-radius: 12px;\r\n border: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n /* transition: 1s ease-in-out; */\r\n}\r\n\r\n.header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: fit-content;\r\n padding: 0.5rem;\r\n}\r\n\r\n.header.expanded{\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.header.collased{\r\n margin-bottom: 0;\r\n}\r\n\r\n.title-section {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n}\r\n\r\n.info-icon {\r\n width: 24px;\r\n height: 24px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.heading{\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.comments-wrapper{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n align-self: stretch;\r\n\r\n}\r\n\r\n.no-comments-state-images{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n \r\n}\r\n\r\n.comments-container.no-comments-state {\r\n height: fit-content;\r\n}\r\n\r\n.no-comment-text-wrapper span{\r\n display: flex;\r\n justify-content: center;\r\n}\r\n\r\n.empty_state_pattern{\r\n position: absolute;\r\n top: 0;\r\n width: 400px;\r\n height: 120px;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n.empty_state{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-3);\r\n flex-shrink: 0;\r\n align-self: stretch;\r\n}\r\n\r\n.text{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.content{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: var(--spacing-5);\r\n align-self: stretch;\r\n}\r\n\r\n.frame{\r\n display: flex;\r\n justify-content: center;\r\n position: relative;\r\n}\r\n\r\n.container{\r\n position: relative;\r\n}\r\n\r\n.main-text{\r\n color: var(--color-text-bold, #202939);\r\n \r\n}\r\n\r\n.sub-text{\r\n color: var(--color-text, #4B5565);\r\n}\r\n","import { Component, Prop, h, getAssetPath } from '@stencil/core';\r\n\r\nexport enum State {\r\n Expanded = 'expanded',\r\n Collapsed = 'collapsed'\r\n}\r\n\r\n@Component({\r\n tag: 'gb-comment', \r\n styleUrl: 'gb-comment.css',\r\n shadow: true \r\n})\r\n\r\nexport class ReviewersComments {\r\n @Prop() heading: string = \"Reviewers' comment\";\r\n @Prop({mutable: true}) state: State = State.Expanded;\r\n @Prop() noCommentText: string = \"No comment yet\"\r\n @Prop () noCommentTextSub: string = \"No reviewer has left a comment yet, you will be notified when a comment drops\"\r\n @Prop() comments:any[] = [\r\n {\r\n author: 'Prince Ogheneriere',\r\n role: 'Authorizer',\r\n comment: 'This is error and fraud free. I concur',\r\n timestamp: '07-Oct-2024 6:00PM' ,\r\n },\r\n // {\r\n // author: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'This is error and fraud free. I concur',\r\n // timestamp: '07-Oct-2024 6:00PM',\r\n \r\n // },\r\n // {\r\n // author: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'I concur to the transactions in this call-over',\r\n // timestamp: '07-Oct-2024 6:00PM',\r\n // },\r\n // {\r\n // author: 'Gideon',\r\n // role: 'Designer',\r\n // comment: 'I concur to the transactions in this call-over',\r\n // timestamp: '07-Nov-2024 6:00PM',\r\n // },\r\n \r\n ]; \r\n\r\n toggleComments() {\r\n if(this.state === State.Expanded) {\r\n this.state = State.Collapsed;\r\n } else if(this.state === State.Collapsed) {\r\n this.state = State.Expanded;\r\n }\r\n }\r\n\r\n render() {\r\n const hasComments = this.comments && this.comments.length > 0;\r\n const patternSrc = getAssetPath(`assets/background_pattern.svg`);\r\n const illustrationSrc = getAssetPath(`assets/illustration.svg`);\r\n\r\n \r\n\r\n return (\r\n <div class={`comments-container ${!hasComments ? 'no-comments-state' : ''}`}>\r\n <div class={`header ${this.state}`}>\r\n <div class=\"title-section\">\r\n <svg \r\n width=\"24\" \r\n height=\"24\" \r\n viewBox=\"0 0 24 24\" \r\n fill=\"none\" \r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"info-icon\"\r\n >\r\n <path \r\n opacity=\"0.4\" \r\n d=\"M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50271 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03143 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03143 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50271 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z\" \r\n fill=\"#064E94\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\" \r\n clip-rule=\"evenodd\" \r\n d=\"M11.6819 10.5273C11.9289 10.5605 12.2707 10.6494 12.5607 10.9394C12.8507 11.2294 12.9396 11.5711 12.9728 11.8182C13.0003 12.0228 13.0001 12.2608 13 12.4606C13 12.474 13 12.4871 13 12.5V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V12.5C10.4477 12.5 10 12.0523 10 11.5C10 10.9477 10.4477 10.5 11 10.5C11.0129 10.5 11.0261 10.5 11.0394 10.5C11.2393 10.4999 11.4772 10.4997 11.6819 10.5273Z\" \r\n fill=\"#064E94\"\r\n />\r\n <path \r\n fill-rule=\"evenodd\" \r\n clip-rule=\"evenodd\" \r\n d=\"M10.9999 7.5C10.9999 6.94772 11.4456 6.5 11.9954 6.5H12.0044C12.5542 6.5 12.9999 6.94772 12.9999 7.5C12.9999 8.05228 12.5542 8.5 12.0044 8.5H11.9954C11.4456 8.5 10.9999 8.05228 10.9999 7.5Z\" \r\n fill=\"#064E94\"\r\n />\r\n </svg>\r\n <h2 class=\"text-md-semi-bold heading\">{this.heading}</h2>\r\n </div>\r\n \r\n <gb-button size='sm' hierarchy='link_color' icon='default' onClick={() => this.toggleComments()}>\r\n {this.state === 'expanded'? (<p>Hide Comments</p>):(<p>Show Comments</p>)} \r\n </gb-button>\r\n </div>\r\n\r\n {this.state === 'expanded' && (\r\n hasComments ? (\r\n <div class=\"comments-wrapper\">\r\n {this.comments.map((comment, index) => (\r\n <gb-comment-item \r\n key={index} \r\n author={comment.author} \r\n role={comment.role} \r\n comment={comment.comment} \r\n timestamp={comment.timestamp} \r\n \r\n connector={this.comments.length>1&&index<this.comments.length-1?true:false}\r\n /> \r\n ))}\r\n </div>\r\n ) : ( \r\n <div class=\"container\">\r\n <div class=\"frame\">\r\n <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\r\n <div class=\"empty_state\">\r\n <div class=\"content\">\r\n <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\r\n <div class=\"text\">\r\n <p class=\"main-text text-lg-semi-bold\">{this.noCommentText}</p>\r\n <p class=\"sub-text text-sm-regular\">{this.noCommentTextSub}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n )\r\n )}\r\n </div>\r\n );\r\n }\r\n}"],"names":["getAssetPath","h","index"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"gb-comment.entry.cjs.js","sources":["src/components/gb-comment/gb-comment.css?tag=gb-comment&encapsulation=shadow","src/components/gb-comment/gb-comment.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n display: block;\r\n\r\n}\r\n\r\n.alpha-mask {\r\n mask-type: alpha;\r\n}\r\n\r\n.comments-container {\r\n padding: 16px;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: var(--spacing-4);\r\n border-radius: 12px;\r\n border: 1px solid var(--color-border-infromation-subtle, #9AC7F4);\r\n background: var(--color-background-information-subtlest, #E4F0FC);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n /* transition: 1s ease-in-out; */\r\n}\r\n\r\n.header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n height: fit-content;\r\n padding: 0.5rem;\r\n}\r\n\r\n.header.expanded{\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.header.collased{\r\n margin-bottom: 0;\r\n}\r\n\r\n.title-section {\r\n display: flex;\r\n align-items: center;\r\n gap: 1rem;\r\n}\r\n\r\n.info-icon {\r\n width: 24px;\r\n height: 24px;\r\n flex-shrink: 0;\r\n}\r\n\r\n.heading{\r\n color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.comments-wrapper{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: var(--spacing-none);\r\n align-self: stretch;\r\n\r\n}\r\n\r\n.no-comments-state-images{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n \r\n}\r\n\r\n.comments-container.no-comments-state {\r\n height: fit-content;\r\n}\r\n\r\n.no-comment-text-wrapper span{\r\n display: flex;\r\n justify-content: center;\r\n}\r\n\r\n.empty_state_pattern{\r\n position: absolute;\r\n top: 0;\r\n width: 400px;\r\n height: 120px;\r\n mix-blend-mode: multiply;\r\n}\r\n\r\n.empty_state{\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-3);\r\n flex-shrink: 0;\r\n align-self: stretch;\r\n}\r\n\r\n.text{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.content{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: var(--spacing-5);\r\n align-self: stretch;\r\n}\r\n\r\n.frame{\r\n display: flex;\r\n justify-content: center;\r\n position: relative;\r\n}\r\n\r\n.container{\r\n position: relative;\r\n}\r\n\r\n.main-text{\r\n color: var(--color-text-bold, #202939);\r\n \r\n}\r\n\r\n.sub-text{\r\n color: var(--color-text, #4B5565);\r\n}\r\n","import { Component, Prop, h, getAssetPath } from '@stencil/core';\r\n\r\nexport enum State {\r\n Expanded = 'expanded',\r\n Collapsed = 'collapsed'\r\n}\r\n\r\n@Component({\r\n tag: 'gb-comment', \r\n styleUrl: 'gb-comment.css',\r\n shadow: true \r\n})\r\n\r\nexport class ReviewersComments {\r\n @Prop() heading: string = \"Reviewers' comment\";\r\n @Prop({mutable: true}) state: State = State.Expanded;\r\n @Prop() noCommentText: string = \"No comment yet\"\r\n @Prop () noCommentTextSub: string = \"No reviewer has left a comment yet, you will be notified when a comment drops\"\r\n @Prop() comments: any[] = [\r\n // {\r\n // author: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'This is error and fraud free. I concur',\r\n // timestamp: '07-Oct-2024 6:00PM' ,\r\n // },\r\n // {\r\n // author: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'This is error and fraud free. I concur',\r\n // timestamp: '07-Oct-2024 6:00PM',\r\n \r\n // },\r\n // {\r\n // author: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'I concur to the transactions in this call-over',\r\n // timestamp: '07-Oct-2024 6:00PM',\r\n // },\r\n // {\r\n // author: 'Gideon',\r\n // role: 'Designer',\r\n // comment: 'I concur to the transactions in this call-over',\r\n // timestamp: '07-Nov-2024 6:00PM',\r\n // },\r\n \r\n ]; \r\n\r\n toggleComments() {\r\n if(this.state === State.Expanded) {\r\n this.state = State.Collapsed;\r\n } else if(this.state === State.Collapsed) {\r\n this.state = State.Expanded;\r\n }\r\n }\r\n\r\n render() {\r\n const hasComments = this.comments && this.comments.length > 0;\r\n const patternSrc = getAssetPath(`assets/background_pattern.svg`);\r\n const illustrationSrc = getAssetPath(`assets/illustration.svg`);\r\n\r\n \r\n\r\n return (\r\n <div class={`comments-container ${!hasComments ? 'no-comments-state' : ''}`}>\r\n <div class={`header ${this.state}`}>\r\n <div class=\"title-section\">\r\n <svg \r\n width=\"24\" \r\n height=\"24\" \r\n viewBox=\"0 0 24 24\" \r\n fill=\"none\" \r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"info-icon\"\r\n >\r\n <path \r\n opacity=\"0.4\" \r\n d=\"M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50271 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03143 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03143 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50271 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z\" \r\n fill=\"#064E94\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\" \r\n clip-rule=\"evenodd\" \r\n d=\"M11.6819 10.5273C11.9289 10.5605 12.2707 10.6494 12.5607 10.9394C12.8507 11.2294 12.9396 11.5711 12.9728 11.8182C13.0003 12.0228 13.0001 12.2608 13 12.4606C13 12.474 13 12.4871 13 12.5V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V12.5C10.4477 12.5 10 12.0523 10 11.5C10 10.9477 10.4477 10.5 11 10.5C11.0129 10.5 11.0261 10.5 11.0394 10.5C11.2393 10.4999 11.4772 10.4997 11.6819 10.5273Z\" \r\n fill=\"#064E94\"\r\n />\r\n <path \r\n fill-rule=\"evenodd\" \r\n clip-rule=\"evenodd\" \r\n d=\"M10.9999 7.5C10.9999 6.94772 11.4456 6.5 11.9954 6.5H12.0044C12.5542 6.5 12.9999 6.94772 12.9999 7.5C12.9999 8.05228 12.5542 8.5 12.0044 8.5H11.9954C11.4456 8.5 10.9999 8.05228 10.9999 7.5Z\" \r\n fill=\"#064E94\"\r\n />\r\n </svg>\r\n <h2 class=\"text-md-semi-bold heading\">{this.heading}</h2>\r\n </div>\r\n \r\n <gb-button size='sm' hierarchy='link_color' icon='default' onClick={() => this.toggleComments()}>\r\n {this.state === 'expanded'? (<p>Hide Comments</p>):(<p>Show Comments</p>)} \r\n </gb-button>\r\n </div>\r\n\r\n {this.state === 'expanded' && (\r\n hasComments ? (\r\n <div class=\"comments-wrapper\">\r\n {this.comments.map((comment, index) => (\r\n <gb-comment-item \r\n key={index} \r\n author={comment.author} \r\n role={comment.role} \r\n comment={comment.comment} \r\n timestamp={comment.timestamp} \r\n \r\n connector={this.comments.length>1&&index<this.comments.length-1?true:false}\r\n /> \r\n ))}\r\n </div>\r\n ) : ( \r\n <div class=\"container\">\r\n <div class=\"frame\">\r\n <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\r\n <div class=\"empty_state\">\r\n <div class=\"content\">\r\n <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\r\n <div class=\"text\">\r\n <p class=\"main-text text-lg-semi-bold\">{this.noCommentText}</p>\r\n <p class=\"sub-text text-sm-regular\">{this.noCommentTextSub}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n )\r\n )}\r\n </div>\r\n );\r\n }\r\n}"],"names":["getAssetPath","h","index"],"mappings":"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"}
|
|
@@ -11,30 +11,30 @@ export class ReviewersComments {
|
|
|
11
11
|
this.noCommentText = "No comment yet";
|
|
12
12
|
this.noCommentTextSub = "No reviewer has left a comment yet, you will be notified when a comment drops";
|
|
13
13
|
this.comments = [
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
14
|
+
// {
|
|
15
|
+
// author: 'Prince Ogheneriere',
|
|
16
|
+
// role: 'Authorizer',
|
|
17
|
+
// comment: 'This is error and fraud free. I concur',
|
|
18
|
+
// timestamp: '07-Oct-2024 6:00PM' ,
|
|
19
|
+
// },
|
|
20
|
+
// {
|
|
21
|
+
// author: 'Prince Ogheneriere',
|
|
22
|
+
// role: 'Authorizer',
|
|
23
|
+
// comment: 'This is error and fraud free. I concur',
|
|
24
|
+
// timestamp: '07-Oct-2024 6:00PM',
|
|
25
|
+
// },
|
|
26
|
+
// {
|
|
27
|
+
// author: 'Prince Ogheneriere',
|
|
28
|
+
// role: 'Authorizer',
|
|
29
|
+
// comment: 'I concur to the transactions in this call-over',
|
|
30
|
+
// timestamp: '07-Oct-2024 6:00PM',
|
|
31
|
+
// },
|
|
32
|
+
// {
|
|
33
|
+
// author: 'Gideon',
|
|
34
|
+
// role: 'Designer',
|
|
35
|
+
// comment: 'I concur to the transactions in this call-over',
|
|
36
|
+
// timestamp: '07-Nov-2024 6:00PM',
|
|
37
|
+
// },
|
|
38
38
|
];
|
|
39
39
|
}
|
|
40
40
|
toggleComments() {
|
|
@@ -49,7 +49,7 @@ export class ReviewersComments {
|
|
|
49
49
|
const hasComments = this.comments && this.comments.length > 0;
|
|
50
50
|
const patternSrc = getAssetPath(`assets/background_pattern.svg`);
|
|
51
51
|
const illustrationSrc = getAssetPath(`assets/illustration.svg`);
|
|
52
|
-
return (h("div", { key: '
|
|
52
|
+
return (h("div", { key: 'f9a5092ed6886cacd8e32da30ee5164eecff8307', class: `comments-container ${!hasComments ? 'no-comments-state' : ''}` }, h("div", { key: 'd9b2fc257ebc1b828ccc556c25e83deb408fb729', class: `header ${this.state}` }, h("div", { key: 'c9ebbdca447cfc873f1a1f7bc17a50a80a604a46', class: "title-section" }, h("svg", { key: '25463eebfa9e77b6b920e5eeaa80dfe773411389', width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "info-icon" }, h("path", { key: 'ff297900f80a4c5d455b01db6aff1aac5ecfaeca', opacity: "0.4", d: "M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50271 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03143 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03143 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50271 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z", fill: "#064E94" }), h("path", { key: '9f4676f5f930359126ed6a5377e9cc47ead7e565', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.6819 10.5273C11.9289 10.5605 12.2707 10.6494 12.5607 10.9394C12.8507 11.2294 12.9396 11.5711 12.9728 11.8182C13.0003 12.0228 13.0001 12.2608 13 12.4606C13 12.474 13 12.4871 13 12.5V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V12.5C10.4477 12.5 10 12.0523 10 11.5C10 10.9477 10.4477 10.5 11 10.5C11.0129 10.5 11.0261 10.5 11.0394 10.5C11.2393 10.4999 11.4772 10.4997 11.6819 10.5273Z", fill: "#064E94" }), h("path", { key: 'c0d4e4492488e08ae836baa500269964b589ff20', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.9999 7.5C10.9999 6.94772 11.4456 6.5 11.9954 6.5H12.0044C12.5542 6.5 12.9999 6.94772 12.9999 7.5C12.9999 8.05228 12.5542 8.5 12.0044 8.5H11.9954C11.4456 8.5 10.9999 8.05228 10.9999 7.5Z", fill: "#064E94" })), h("h2", { key: 'f54558bb90644545a957a5889773e6517805751a', class: "text-md-semi-bold heading" }, this.heading)), h("gb-button", { key: 'f70a43c3b56084857d87b338475c3f9c853c9908', size: 'sm', hierarchy: 'link_color', icon: 'default', onClick: () => this.toggleComments() }, this.state === 'expanded' ? (h("p", null, "Hide Comments")) : (h("p", null, "Show Comments")))), this.state === 'expanded' && (hasComments ? (h("div", { class: "comments-wrapper" }, this.comments.map((comment, index) => (h("gb-comment-item", { key: index, author: comment.author, role: comment.role, comment: comment.comment, timestamp: comment.timestamp, connector: this.comments.length > 1 && index < this.comments.length - 1 ? true : false }))))) : (h("div", { class: "container" }, h("div", { class: "frame" }, h("img", { src: patternSrc, alt: "", class: "empty_state_pattern" }), h("div", { class: "empty_state" }, h("div", { class: "content" }, h("img", { src: illustrationSrc, alt: "bell-icon", class: "bell_icon" }), h("div", { class: "text" }, h("p", { class: "main-text text-lg-semi-bold" }, this.noCommentText), h("p", { class: "sub-text text-sm-regular" }, this.noCommentTextSub))))))))));
|
|
53
53
|
}
|
|
54
54
|
static get is() { return "gb-comment"; }
|
|
55
55
|
static get encapsulation() { return "shadow"; }
|
|
@@ -167,7 +167,7 @@ export class ReviewersComments {
|
|
|
167
167
|
},
|
|
168
168
|
"getter": false,
|
|
169
169
|
"setter": false,
|
|
170
|
-
"defaultValue": "[\r\n {\r\n
|
|
170
|
+
"defaultValue": "[\r\n // {\r\n // author: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'This is error and fraud free. I concur',\r\n // timestamp: '07-Oct-2024 6:00PM' ,\r\n // },\r\n // {\r\n // author: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'This is error and fraud free. I concur',\r\n // timestamp: '07-Oct-2024 6:00PM',\r\n \r\n // },\r\n // {\r\n // author: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'I concur to the transactions in this call-over',\r\n // timestamp: '07-Oct-2024 6:00PM',\r\n // },\r\n // {\r\n // author: 'Gideon',\r\n // role: 'Designer',\r\n // comment: 'I concur to the transactions in this call-over',\r\n // timestamp: '07-Nov-2024 6:00PM',\r\n // },\r\n \r\n ]"
|
|
171
171
|
}
|
|
172
172
|
};
|
|
173
173
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gb-comment.js","sourceRoot":"","sources":["../../../src/components/gb-comment/gb-comment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAEjE,MAAM,CAAN,IAAY,KAGX;AAHD,WAAY,KAAK;IACf,8BAAqB,CAAA;IACrB,gCAAuB,CAAA;AACzB,CAAC,EAHW,KAAK,KAAL,KAAK,QAGhB;AAQD,MAAM,OAAO,iBAAiB;IAN9B;QAOU,YAAO,GAAW,oBAAoB,CAAC;QACxB,UAAK,GAAU,KAAK,CAAC,QAAQ,CAAC;QAC7C,kBAAa,GAAW,gBAAgB,CAAA;QACvC,qBAAgB,GAAW,+EAA+E,CAAA;QAC3G,aAAQ,
|
|
1
|
+
{"version":3,"file":"gb-comment.js","sourceRoot":"","sources":["../../../src/components/gb-comment/gb-comment.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, getAssetPath } from '@stencil/core';\r\n\r\nexport enum State {\r\n Expanded = 'expanded',\r\n Collapsed = 'collapsed'\r\n}\r\n\r\n@Component({\r\n tag: 'gb-comment', \r\n styleUrl: 'gb-comment.css',\r\n shadow: true \r\n})\r\n\r\nexport class ReviewersComments {\r\n @Prop() heading: string = \"Reviewers' comment\";\r\n @Prop({mutable: true}) state: State = State.Expanded;\r\n @Prop() noCommentText: string = \"No comment yet\"\r\n @Prop () noCommentTextSub: string = \"No reviewer has left a comment yet, you will be notified when a comment drops\"\r\n @Prop() comments: any[] = [\r\n // {\r\n // author: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'This is error and fraud free. I concur',\r\n // timestamp: '07-Oct-2024 6:00PM' ,\r\n // },\r\n // {\r\n // author: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'This is error and fraud free. I concur',\r\n // timestamp: '07-Oct-2024 6:00PM',\r\n \r\n // },\r\n // {\r\n // author: 'Prince Ogheneriere',\r\n // role: 'Authorizer',\r\n // comment: 'I concur to the transactions in this call-over',\r\n // timestamp: '07-Oct-2024 6:00PM',\r\n // },\r\n // {\r\n // author: 'Gideon',\r\n // role: 'Designer',\r\n // comment: 'I concur to the transactions in this call-over',\r\n // timestamp: '07-Nov-2024 6:00PM',\r\n // },\r\n \r\n ]; \r\n\r\n toggleComments() {\r\n if(this.state === State.Expanded) {\r\n this.state = State.Collapsed;\r\n } else if(this.state === State.Collapsed) {\r\n this.state = State.Expanded;\r\n }\r\n }\r\n\r\n render() {\r\n const hasComments = this.comments && this.comments.length > 0;\r\n const patternSrc = getAssetPath(`assets/background_pattern.svg`);\r\n const illustrationSrc = getAssetPath(`assets/illustration.svg`);\r\n\r\n \r\n\r\n return (\r\n <div class={`comments-container ${!hasComments ? 'no-comments-state' : ''}`}>\r\n <div class={`header ${this.state}`}>\r\n <div class=\"title-section\">\r\n <svg \r\n width=\"24\" \r\n height=\"24\" \r\n viewBox=\"0 0 24 24\" \r\n fill=\"none\" \r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"info-icon\"\r\n >\r\n <path \r\n opacity=\"0.4\" \r\n d=\"M12.0572 1.75C14.2479 1.74999 15.9686 1.74998 17.312 1.93059C18.6886 2.11568 19.7809 2.50271 20.6391 3.36091C21.4973 4.21911 21.8843 5.31137 22.0694 6.68802C22.25 8.03143 22.25 9.7521 22.25 11.9428V11.9428V12.0572V12.0572C22.25 14.2479 22.25 15.9686 22.0694 17.312C21.8843 18.6886 21.4973 19.7809 20.6391 20.6391C19.7809 21.4973 18.6886 21.8843 17.312 22.0694C15.9686 22.25 14.2479 22.25 12.0572 22.25H12.0572H11.9428H11.9428C9.7521 22.25 8.03143 22.25 6.68802 22.0694C5.31137 21.8843 4.21911 21.4973 3.36091 20.6391C2.50271 19.7809 2.11568 18.6886 1.93059 17.312C1.74998 15.9686 1.74999 14.2479 1.75 12.0572V11.9428C1.74999 9.75212 1.74998 8.03144 1.93059 6.68802C2.11568 5.31137 2.50272 4.21911 3.36091 3.36091C4.21911 2.50272 5.31137 2.11568 6.68802 1.93059C8.03144 1.74998 9.75212 1.74999 11.9428 1.75H12.0572Z\" \r\n fill=\"#064E94\"\r\n />\r\n <path\r\n fill-rule=\"evenodd\" \r\n clip-rule=\"evenodd\" \r\n d=\"M11.6819 10.5273C11.9289 10.5605 12.2707 10.6494 12.5607 10.9394C12.8507 11.2294 12.9396 11.5711 12.9728 11.8182C13.0003 12.0228 13.0001 12.2608 13 12.4606C13 12.474 13 12.4871 13 12.5V16.5C13 17.0523 12.5523 17.5 12 17.5C11.4477 17.5 11 17.0523 11 16.5V12.5C10.4477 12.5 10 12.0523 10 11.5C10 10.9477 10.4477 10.5 11 10.5C11.0129 10.5 11.0261 10.5 11.0394 10.5C11.2393 10.4999 11.4772 10.4997 11.6819 10.5273Z\" \r\n fill=\"#064E94\"\r\n />\r\n <path \r\n fill-rule=\"evenodd\" \r\n clip-rule=\"evenodd\" \r\n d=\"M10.9999 7.5C10.9999 6.94772 11.4456 6.5 11.9954 6.5H12.0044C12.5542 6.5 12.9999 6.94772 12.9999 7.5C12.9999 8.05228 12.5542 8.5 12.0044 8.5H11.9954C11.4456 8.5 10.9999 8.05228 10.9999 7.5Z\" \r\n fill=\"#064E94\"\r\n />\r\n </svg>\r\n <h2 class=\"text-md-semi-bold heading\">{this.heading}</h2>\r\n </div>\r\n \r\n <gb-button size='sm' hierarchy='link_color' icon='default' onClick={() => this.toggleComments()}>\r\n {this.state === 'expanded'? (<p>Hide Comments</p>):(<p>Show Comments</p>)} \r\n </gb-button>\r\n </div>\r\n\r\n {this.state === 'expanded' && (\r\n hasComments ? (\r\n <div class=\"comments-wrapper\">\r\n {this.comments.map((comment, index) => (\r\n <gb-comment-item \r\n key={index} \r\n author={comment.author} \r\n role={comment.role} \r\n comment={comment.comment} \r\n timestamp={comment.timestamp} \r\n \r\n connector={this.comments.length>1&&index<this.comments.length-1?true:false}\r\n /> \r\n ))}\r\n </div>\r\n ) : ( \r\n <div class=\"container\">\r\n <div class=\"frame\">\r\n <img src={patternSrc} alt=\"\" class=\"empty_state_pattern\" />\r\n <div class=\"empty_state\">\r\n <div class=\"content\">\r\n <img src={illustrationSrc} alt=\"bell-icon\" class=\"bell_icon\" />\r\n <div class=\"text\">\r\n <p class=\"main-text text-lg-semi-bold\">{this.noCommentText}</p>\r\n <p class=\"sub-text text-sm-regular\">{this.noCommentTextSub}</p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n \r\n )\r\n )}\r\n </div>\r\n );\r\n }\r\n}"]}
|
|
@@ -8,7 +8,7 @@ export class GbCommentItem {
|
|
|
8
8
|
this.connector = false;
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
|
-
return (h("div", { key: '
|
|
11
|
+
return (h("div", { key: '140246c8712dfb3951f166c0b4bea08287f94a07', class: "comment-item" }, h("div", { key: '0dcc3386724de20c4ec4f7314fd95c43d992a991', class: "left" }, h("div", { key: '2cb496d87c2486d07b20c555919ce2018b2442fa', class: "comment-bullet" }), this.connector && h("hr", { key: '249dc4c9db97c92be2a3b70c9b13991c7f8a1ff7', class: "line" })), h("div", { key: '003b75e5c4bb5dd1ed2132a896b092ad488c278f', class: "comment-content" }, h("div", { key: 'badb12e36e0415fc764b87cfcacc7e00aad9ac24', class: "reviewer-info" }, h("p", { key: '094a7b0561e51c839333097f67ae581e2057623c', class: "text-sm-semi-bold" }, this.author, " (", this.role, ")")), h("div", { key: 'ce5b2ea65f4ae70c79be7942c71f02d168b4508d', class: "comment-text" }, h("p", { key: '7714298dccaf52a282049bbb225c0100aefa8da3', class: "text-sm-regular" }, this.comment)), h("div", { key: '6ce92aff55a65c4d9a53e12dd577fa68be3ddbc8', class: "timestamp" }, h("p", { key: 'f11788b60a7e20dd1d4e3c51d74b080c20e53736', class: "text-xs-regular" }, " ", this.timestamp)))));
|
|
12
12
|
}
|
|
13
13
|
static get is() { return "gb-comment-item"; }
|
|
14
14
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gb-comment-item.js","sourceRoot":"","sources":["../../../src/components/gb-comment-item/gb-comment-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,aAAa;IAN1B;QAOU,WAAM,GAAW,EAAE,CAAC;QACpB,SAAI,
|
|
1
|
+
{"version":3,"file":"gb-comment-item.js","sourceRoot":"","sources":["../../../src/components/gb-comment-item/gb-comment-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,aAAa;IAN1B;QAOU,WAAM,GAAW,EAAE,CAAC;QACpB,SAAI,GAAW,EAAE,CAAC;QAClB,YAAO,GAAW,EAAE,CAAC;QACrB,cAAS,GAAW,EAAE,CAAC;QACvB,cAAS,GAAY,KAAK,CAAC;KAuBpC;IArBC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,cAAc;YACvB,4DAAK,KAAK,EAAC,MAAM;gBACjB,4DAAK,KAAK,EAAC,gBAAgB,GAAO;gBACjC,IAAI,CAAC,SAAS,IAAI,2DAAI,KAAK,EAAC,MAAM,GAAE,CAC/B;YACR,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,4DAAK,KAAK,EAAC,eAAe;oBACxB,0DAAG,KAAK,EAAC,mBAAmB;wBAAE,IAAI,CAAC,MAAM;;wBAAI,IAAI,CAAC,IAAI;4BAAM,CACxD;gBACN,4DAAK,KAAK,EAAC,cAAc;oBACvB,0DAAG,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,OAAO,CAAK,CACzC;gBACN,4DAAK,KAAK,EAAC,WAAW;oBACpB,0DAAG,KAAK,EAAC,iBAAiB;;wBAAG,IAAI,CAAC,SAAS,CAAK,CAC5C,CACF,CACF,CACL,CAAA;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\r\n \r\n@Component({\r\n tag: 'gb-comment-item',\r\n styleUrl: 'gb-comment-item.css',\r\n shadow: true,\r\n})\r\n\r\nexport class GbCommentItem { \r\n @Prop() author: string = '';\r\n @Prop() role: string = '';\r\n @Prop() comment: string = '';\r\n @Prop() timestamp: string = '';\r\n @Prop() connector: boolean = false;\r\n\r\n render() {\r\n return (\r\n <div class=\"comment-item\">\r\n <div class=\"left\">\r\n <div class=\"comment-bullet\"></div>\r\n {this.connector && <hr class=\"line\"/>}\r\n </div>\r\n <div class=\"comment-content\">\r\n <div class=\"reviewer-info\">\r\n <p class=\"text-sm-semi-bold\">{this.author} ({this.role})</p>\r\n </div>\r\n <div class=\"comment-text\">\r\n <p class=\"text-sm-regular\">{this.comment}</p>\r\n </div>\r\n <div class=\"timestamp\">\r\n <p class=\"text-xs-regular\"> {this.timestamp}</p>\r\n </div>\r\n </div>\r\n </div>\r\n )\r\n }\r\n}"]}
|