@genexus/genexus-ide-ui 1.1.44 → 1.1.46
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/gx-ide-plugin-details.cjs.entry.js +1 -1
- package/dist/cjs/gx-ide-plugin-details.cjs.entry.js.map +1 -1
- package/dist/cjs/gx-ide-select-user-team.cjs.entry.js +1 -1
- package/dist/cjs/gx-ide-select-user-team.cjs.entry.js.map +1 -1
- package/dist/cjs/gx-ide-start-page.cjs.entry.js +1 -1
- package/dist/cjs/gx-ide-start-page.cjs.entry.js.map +1 -1
- package/dist/collection/components/plugin-details/plugin-details.css +3 -1
- package/dist/collection/components/select-user-team/select-user-team.css +0 -2
- package/dist/collection/components/start-page/start-page.css +27 -5
- package/dist/collection/pages/assets/images/plugin/python-logo.svg +16 -0
- package/dist/components/gx-ide-plugin-details.js +1 -1
- package/dist/components/gx-ide-plugin-details.js.map +1 -1
- package/dist/components/gx-ide-select-user-team.js +1 -1
- package/dist/components/gx-ide-select-user-team.js.map +1 -1
- package/dist/components/gx-ide-start-page.js +1 -1
- package/dist/components/gx-ide-start-page.js.map +1 -1
- package/dist/esm/gx-ide-plugin-details.entry.js +1 -1
- package/dist/esm/gx-ide-plugin-details.entry.js.map +1 -1
- package/dist/esm/gx-ide-select-user-team.entry.js +1 -1
- package/dist/esm/gx-ide-select-user-team.entry.js.map +1 -1
- package/dist/esm/gx-ide-start-page.entry.js +1 -1
- package/dist/esm/gx-ide-start-page.entry.js.map +1 -1
- package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
- package/dist/genexus-ide-ui/{p-60302626.entry.js → p-18bbaa49.entry.js} +26 -26
- package/dist/genexus-ide-ui/p-18bbaa49.entry.js.map +1 -0
- package/dist/genexus-ide-ui/{p-4cc2b3e6.entry.js → p-6f5cf136.entry.js} +6 -6
- package/dist/genexus-ide-ui/p-6f5cf136.entry.js.map +1 -0
- package/dist/genexus-ide-ui/{p-d67ff6a5.entry.js → p-8ec19a9a.entry.js} +43 -43
- package/dist/genexus-ide-ui/{p-d67ff6a5.entry.js.map → p-8ec19a9a.entry.js.map} +1 -1
- package/package.json +1 -1
- package/dist/genexus-ide-ui/p-4cc2b3e6.entry.js.map +0 -1
- package/dist/genexus-ide-ui/p-60302626.entry.js.map +0 -1
|
@@ -2,7 +2,7 @@ import { g as getAssetPath, r as registerInstance, h, H as Host, a as getElement
|
|
|
2
2
|
import { g as getIconPath } from './MERCURY_ASSETS-ccf43ae3.js';
|
|
3
3
|
import { L as Locale } from './locale-e5107fad.js';
|
|
4
4
|
|
|
5
|
-
const pluginDetailsCss = ":host{display:grid;block-size:100%;grid-template-areas:\"header header\" \"main aside\";grid-template-rows:max-content 1fr;grid-template-columns:1fr 280px;row-gap:12px}.section{display:contents}.header{display:grid;grid-area:header;grid-template-areas:\"plugin-icon plugin-details\";grid-template-columns:64px 1fr;column-gap:16px;padding:24px 24px 16px 24px}.plugin__icon{grid-area:plugin-icon;
|
|
5
|
+
const pluginDetailsCss = ":host{display:grid;block-size:100%;grid-template-areas:\"header header\" \"main aside\";grid-template-rows:max-content 1fr;grid-template-columns:1fr 280px;row-gap:12px}.section{display:contents}.header{display:grid;grid-area:header;grid-template-areas:\"plugin-icon plugin-details\";grid-template-columns:64px 1fr;column-gap:16px;padding:24px 24px 16px 24px}.plugin__icon{grid-area:plugin-icon;inline-size:100%;block-size:auto;display:block}.plugin__details{grid-area:plugin-details;display:flex;flex-direction:column;gap:8px}.plugin__publisher{display:flex;align-items:center;gap:4px}.plugin__description{line-height:1.5}.plugin__actions-container{margin-block-start:8px;align-items:center}.action-button{min-inline-size:100px}.action-button.more-versions-available{border-start-end-radius:0 !important;border-end-end-radius:0 !important}.installed-container{display:flex;align-items:center;gap:6px}.installed-container ch-image{--ch-image-size:20px}.main{grid-area:main}.docsTab{block-size:100%}.aside{grid-area:aside;overflow:auto;border-block-start:1px solid var(--items-container__border-color)}.fields__list{list-style:none;padding:0;margin:0;font-size:12px}.plugin__info-category{display:flex;flex-direction:column;gap:8px}.plugin__info-category:not(:first-child){padding-block-start:16px;margin-block-start:16px;border-block-start:1px solid var(--mer-border-color__on-elevation--01)}.fields__list:not(.fields__list--as-tags){display:flex;flex-direction:column;gap:8px}.fields__list:not(.fields__list--as-tags) .field__li{display:flex;gap:16px}.fields__list--as-tags{display:flex;flex-wrap:wrap;gap:6px}.fields__list--as-tags .field__li{border:1px solid var(--mer-border-color__on-elevation--01);padding:2px 8px;border-radius:4px;text-transform:lowercase}.fields__list--as-tags .field__link{color:var(--mer-text__on-surface)}.fields__list--as-tags .field__link:hover{color:var(--mer-accent__primary)}.fields__list--as-tags .field__link:active{color:var(--mer-accent__primary--hover)}.field__name,.field__value{flex:1}.field__link{color:var(--mer-accent__primary)}.field__link:hover{color:var(--mer-accent__primary--hover)}.field__link:active{color:var(--mer-accent__primary--active)}.docsTab{background-color:transparent !important}.dropdown.button-icon-only::part(expandable-button){padding:calc( ( var(--control__block-size) - 2 * var(--control__border-width) - var(--mer-icon__box--md) ) / 2 ) !important;border-start-start-radius:0 !important;border-end-start-radius:0 !important}.version-buttons-container{display:flex;align-items:center;gap:1px}ch-markdown-viewer{block-size:100%;overflow:auto}.text-underline{text-decoration:underline}";
|
|
6
6
|
|
|
7
7
|
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
8
8
|
if (kind === "a" && !f)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gx-ide-plugin-details.entry.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,2jFAA2jF;;;;;;;;;;;;;;;;;;;ACgBplF,MAAM,SAAS,GAAG,WAAW,CAAC;IAC5B,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,cAAc;CAC1B,CAAC,CAAC;AACH,MAAM,iBAAiB,GAAG,WAAW,CAAC;IACpC,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,cAAc;IACpB,SAAS,EAAE,YAAY;CACxB,CAAC,CAAC;AACH,MAAM,iBAAiB,GAAG,WAAW,CAAC;IACpC,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,cAAc;IACpB,SAAS,EAAE,SAAS;CACrB,CAAC,CAAC;AAEH;AACA,MAAM,kBAAkB,GAAG,YAAY,CACrC,uDAAuD,CACxD,CAAC;AAEF,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,qBAAqB;IACrB,mBAAmB;IACnB,qBAAqB;IACrB,iBAAiB;IACjB,iBAAiB;IACjB,qBAAqB;IACrB,gBAAgB;IAChB,YAAY;IACZ,cAAc;IACd,eAAe;IACf,kBAAkB;CACnB,CAAC;MAQW,kBAAkB;;;;;;;QAK7B,sDAAsB;QAEtB,uDAA+C;;;QAI/C,yDAAmD,IAAI,GAAG,EAAE,EAAC;QAkE7D,uDAA4B;;YAC1B,MAAM,0BAA0B,GAAoB,MAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,0CAAE,GAAG,CACzE,OAAO;gBACL,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC;aAC1C,CACF,CAAC;YACF,OAAO,0BAA0B,CAAC;SACnC,EAAC;QAEF,yDAA8B,CAC5B,KAEE;YAEF,MAAM,eAAe,GAAG,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;YACxC,IAAI,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;SACvC,EAAC;QAEF,oDAAyB;YACvB,QACE,cAAQ,KAAK,EAAC,iBAAiB,EAAC,OAAO,EAAE,uBAAA,IAAI,mDAAyB,IACnE,uBAAA,IAAI,2CAAiB,CAAC,OAAO,CAAC,SAAS,CACjC,EACT;SACH,EAAC;QAEF,oDAAyB;YACvB,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB,EAAC;QAEF,mDAAwB,CAAC,EAAU,KAAK;YACtC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;SAC1B,EAAC;QAEF,8CAAmB,CAAC,IAAY,KAAK,CAAC,KAAiB;YACrD,IAAI,IAAI,CAAC,gBAAgB,EAAE;gBACzB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;aAC7B;SACF,EAAC;QAEF,sDAA2B;YACzB,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B,EAAC;QAEF,kDAAuB;;YACrB,IAAI,mBAAmB,CAAC;YACxB,IAAI,mBAAmB,GAAG,8BAA8B,CAAC;YACzD,IAAI,oBAAoB,CAAC;YACzB,MAAM,oBAAoB,GAAG,MAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,0CAAE,MAAM,CAAC;YAExD,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;gBACxB,mBAAmB,GAAG,uBAAA,IAAI,2CAAiB,CAAC,OAAO,CAAC,OAAO,CAAC;gBAC5D,oBAAoB,GAAG,uBAAA,IAAI,iDAAuB,CAAC;aACpD;iBAAM,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;gBAClC,mBAAmB,GAAG,GAAG,uBAAA,IAAI,2CAAiB,CAAC,OAAO,CAAC,QAAQ,IAC7D,IAAI,CAAC,IAAI,CAAC,aACZ,EAAE,CAAC;gBACH,oBAAoB,GAAG,uBAAA,IAAI,gDAAsB,MAA1B,IAAI,EACzB,IAAI,CAAC,IAAI,CAAC,aAAa,CACxB,CAAC;aACH;iBAAM;gBACL,mBAAmB,GAAG,uBAAA,IAAI,2CAAiB,CAAC,OAAO,CAAC,SAAS,CAAC;aAC/D;YAED,IAAI,oBAAoB,EAAE;gBACxB,mBAAmB,GAAG,GAAG,mBAAmB,0BAA0B,CAAC;aACxE;YAED,OAAO;gBACL,WAAK,KAAK,EAAC,2BAA2B,IACpC,cAAQ,KAAK,EAAE,mBAAmB,EAAE,OAAO,EAAE,oBAAoB,IAC9D,mBAAmB,CACb,EACR,oBAAoB,IACnB,6BACE,KAAK,EAAC,0CAA0C,EAChD,UAAU,EAAC,aAAa,EACxB,WAAW,EAAC,cAAc,EAC1B,KAAK,EAAE,uBAAA,IAAI,oDAA0B,MAA9B,IAAI,CAA4B,EACvC,aAAa,EAAE,uBAAA,IAAI,sDAA4B,IAE/C,gBAAU,GAAG,EAAE,iBAAiB,EAAE,KAAK,EAAC,SAAS,GAAY,CACvC,IACtB,IAAI,CACJ;aACP,CAAC;SACH,EAAC;QAEF,yDAA8B,CAC5B,KAIE;YAEF,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,aAAa,CAAC;SACjD,EAAC;QAEF,qDAA0B;YACxB,OAAO,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,aAAa;gBACxC,IAAI,aAAa,CAAC,EAAE,KAAK,IAAI,CAAC,aAAa,EAAE;oBAC3C,MAAM,aAAa,GAAG,uBAAA,IAAI,sDAA4B,CAAC,GAAG,CACxD,aAAa,CAAC,EAAE,CACjB,CAAC;oBAEF,QACE,0BACE,GAAG,EAAE,CAAC,EAA+B,MAClC,uBAAA,IAAI,wCAAqB,EAAiC,MAAA,CAAC,EAE9D,IAAI,EAAE,aAAa,CAAC,EAAE,EACtB,GAAG,EAAE,aAAa,CAAC,EAAE,EACrB,KAAK,EAAC,kCAAkC,EACxC,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,aAAa,GACA,EACtB;iBACH;aACF,CAAC,CAAC;SACJ,EAAC;QAEF,+CAAoB,CAAC,KAAa;YAChC,OAAO,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;SACjD,EAAC;QAEF,4CAAiB,CACf,IAAY,EACZ,KAAa,EACb,QAAiB,EACjB,UAAmB;YAEnB,QACE,SACE,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,QAAQ,EACf,OAAO,EAAE,uBAAA,IAAI,2CAAiB,MAArB,IAAI,EAAkB,IAAI,CAAC,EACpC,KAAK,EAAE,QAAQ,IAEd,UAAU,IAAI,gBAAU,GAAG,EAAE,UAAU,EAAE,KAAK,EAAC,SAAS,GAAY,EACpE,KAAK,CACJ,EACJ;SACH,EAAC;QAEF,iDAAsB;YACpB,OAAO,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,YAAY;gBAC9C,QACE,WAAK,KAAK,EAAC,uBAAuB,IAChC,UAAI,KAAK,EAAC,sBAAsB,IAAE,YAAY,CAAC,IAAI,CAAM,EACzD,UACE,KAAK,EAAE;wBACL,cAAc,EAAE,IAAI;wBACpB,uBAAuB,EAAE,YAAY,CAAC,aAAa;qBACpD,IAEA,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK;;oBAE5B,MAAM,UAAU,GACd,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ;0BAC1B,KAAK,CAAC,KAAgB;0BACvB,uBAAA,IAAI,yCAAe,MAAnB,IAAI,EACD,KAAK,CAAC,KAAkB,CAAC,GAAG,EAC5B,KAAK,CAAC,KAAkB,CAAC,IAAI,EAC9B,aAAa,CACd,CAAC;oBACR,QACE,UAAI,KAAK,EAAC,WAAW,IAClB,KAAK,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,aAAa;;;4BAGtC;gCACE,YAAM,KAAK,EAAC,8BAA8B,IACvC,KAAK,CAAC,IAAI,CACN;gCACP,YAAM,KAAK,EAAC,6BAA6B,IACtC,UAAU,CACN;6BACR;0BACD,UAAU,CACX,EACL;iBACH,CAAC,CACC,CACD,EACN;aACH,CAAC,CAAC;SACJ,EAAC;4BAzPgC,EAAE;;;;;;;IAwBpC,MAAM,iBAAiB;;QACrB,uBAAA,IAAI,uCAAoB,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;QAElE,IAAI,MAAA,IAAI,CAAC,IAAI,CAAC,WAAW,0CAAE,MAAM,EAAE;YACjC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,CAAC;gBAC1D,MAAM,UAAU,GAAG,uBAAA,IAAI,4CAAkB,MAAtB,IAAI,EAAmB,UAAU,CAAC,IAAI,CAAC,CAAC;gBAE3D,uBAAA,IAAI,sDAA4B,CAAC,GAAG,CAAC,UAAU,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;gBAErE,IAAI,CAAC,KAAK,CAAC,EAAE;oBACX,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC;iBACjC;gBACD,OAAO;oBACL,EAAE,EAAE,UAAU;oBACd,IAAI,EAAE,UAAU,CAAC,IAAI;iBACN,CAAC;aACnB,CAAC,CAAC;SACJ;KACF;IAED,gBAAgB;QACd,uBAAA,IAAI,4CAAkB,CAAC,gBAAgB,CAAC,OAAO,EAAE,KAAK;;;;;YAKpD,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAmB,CAAC;YAEnD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,YAAY,iBAAiB,CAE/C,CAAC;YAEd,IAAI,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,EAAE;gBACd,uBAAA,IAAI,2CAAiB,MAArB,IAAI,EAAkB,IAAI,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC;aACzC;SACF,CAAC,CAAC;KACJ;IA+LD,MAAM;QACJ,MAAM,mBAAmB,GACvB,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS;aACnB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAErD,MAAM,iBAAiB,GAAI,IAAI,CAAC,IAAI,CAAC,IAAiB,CAAC,IAAI,CAAC;QAC5D,MAAM,gBAAgB,GAAI,IAAI,CAAC,IAAI,CAAC,IAAiB,CAAC,GAAG,CAAC;QAC1D,MAAM,YAAY,GAAG,iBAAiB,IAAI,gBAAgB,CAAC;QAC3D,MAAM,SAAS,GAAG,iBAAiB,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC;QAEtD,MAAM,iBAAiB,GAAI,IAAI,CAAC,IAAI,CAAC,SAAsB,CAAC,IAAI,CAAC;QACjE,MAAM,gBAAgB,GAAI,IAAI,CAAC,IAAI,CAAC,SAAsB,CAAC,GAAG,CAAC;QAC/D,MAAM,gBAAgB,GAAG,iBAAiB,IAAI,gBAAgB,CAAC;QAC/D,MAAM,aAAa,GAAG,iBAAiB,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;QAE/D,QACE,EAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,IAClB,gBAAU,KAAK,EAAE,WAAW,GAAa,EACzC,eAAS,KAAK,EAAC,SAAS,IACtB,cAAQ,KAAK,EAAC,QAAQ,IACpB,WACE,KAAK,EAAC,cAAc,EACpB,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,kBAAkB,EAC5C,GAAG,EAAC,uBAAuB,GAC3B,EACF,WAAK,KAAK,EAAC,iBAAiB,IACzB,YAAY,IACX,UAAI,KAAK,EAAC,oBAAoB,IAC3B,uBAAA,IAAI,yCAAe,MAAnB,IAAI,EACH,gBAAgB,EAChB,SAAmB,EACnB,gBAAgB,CACjB,CACE,KAEL,UAAI,KAAK,EAAC,WAAW,IAAE,SAAS,CAAM,CACvC,EACA,gBAAgB,IACf,uBAAA,IAAI,yCAAe,MAAnB,IAAI,EACF,gBAAgB,EAChB,SAAmB,EACnB,mDAAmD,EACnD,SAAS,CACV,KAED,SAAG,KAAK,EAAC,oCAAoC,IAC3C,gBAAU,GAAG,EAAE,SAAS,EAAE,KAAK,EAAC,SAAS,GAAY,EACpD,aAAa,CACZ,CACL,EAED,SAAG,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,IAAI,CAAC,WAAW,CAAK,EAC1D,WAAK,KAAK,EAAC,0CAA0C,IAClD,mBAAmB,IAClB,uBAAA,IAAI,+CAAqB,MAAzB,IAAI,CAAuB;;QAG3B,SAAG,KAAK,EAAC,0CAA0C,IACjD,gBACE,GAAG,EAAE,iBAAiB,EACtB,KAAK,EAAC,SAAS,GACL,EACX,uBAAA,IAAI,2CAAiB,CAAC,OAAO,CAAC,SAAS,CACtC,CACL,EACA,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,uBAAA,IAAI,iDAAuB,MAA3B,IAAI,CAAyB,CACjD,CACF,CACC,EACT,WAAK,KAAK,EAAC,MAAM,IACd,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,KAC3B,qBACE,KAAK,EAAC,wBAAwB,EAC9B,eAAe,EAAC,aAAa,EAC7B,QAAQ,EAAC,MAAM,EACf,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,oBAAoB,EAAE,uBAAA,IAAI,sDAA4B,EACtD,UAAU,EAAE,IAAI,CAAC,aAAa,IAE7B,uBAAA,IAAI,kDAAwB,MAA5B,IAAI,CAA0B,CACjB,CACjB,CACG,EACN,WAAK,KAAK,EAAC,+BAA+B,IACvC,uBAAA,IAAI,8CAAoB,MAAxB,IAAI,CAAsB,CACvB,CACE,CAEL,EACP;KACH;;;;;;;;;","names":[],"sources":["src/components/plugin-details/plugin-details.scss?tag=gx-ide-plugin-details&encapsulation=shadow","src/components/plugin-details/plugin-details.tsx"],"sourcesContent":[":host {\n display: grid;\n block-size: 100%;\n grid-template-areas:\n \"header header\"\n \"main aside\";\n grid-template-rows: max-content 1fr;\n grid-template-columns: 1fr 280px;\n row-gap: 12px;\n}\n\n.section {\n display: contents;\n}\n\n// header\n.header {\n display: grid;\n grid-area: header;\n grid-template-areas: \"plugin-icon plugin-details\";\n grid-template-columns: 64px 1fr;\n column-gap: 16px;\n padding: 24px 24px 16px 24px;\n}\n.plugin__icon {\n grid-area: plugin-icon;\n max-width: 100%;\n}\n.plugin__details {\n grid-area: plugin-details;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.plugin__publisher {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.plugin__description {\n line-height: 1.5; // WA: Text appears too tight.\n}\n.plugin__actions-container {\n margin-block-start: 8px;\n align-items: center;\n}\n.action-button {\n min-inline-size: 100px;\n\n &.more-versions-available {\n border-start-end-radius: 0 !important;\n border-end-end-radius: 0 !important;\n }\n}\n.installed-container {\n display: flex;\n align-items: center;\n gap: 6px;\n\n // WA Biggest Mercury icon (icon-md) looks small in this case.\n // Mercury should expose more icon sizes.\n ch-image {\n --ch-image-size: 20px;\n }\n}\n\n// main\n.main {\n grid-area: main;\n}\n.docsTab {\n block-size: 100%;\n}\n\n// aside\n.aside {\n grid-area: aside;\n overflow: auto;\n border-block-start: 1px solid var(--items-container__border-color);\n}\n.fields__list {\n list-style: none;\n padding: 0;\n margin: 0;\n font-size: 12px;\n}\n.plugin__info-category {\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n &:not(:first-child) {\n $space: 16px;\n padding-block-start: $space;\n margin-block-start: $space;\n border-block-start: 1px solid var(--mer-border-color__on-elevation--01);\n }\n}\n.fields__list:not(.fields__list--as-tags) {\n display: flex;\n flex-direction: column;\n gap: 8px;\n .field__li {\n display: flex;\n gap: 16px;\n }\n}\n.fields__list--as-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n\n .field__li {\n border: 1px solid var(--mer-border-color__on-elevation--01);\n padding: 2px 8px;\n border-radius: 4px;\n\n text-transform: lowercase;\n }\n .field__link {\n color: var(--mer-text__on-surface);\n\n &:hover {\n color: var(--mer-accent__primary);\n }\n &:active {\n color: var(--mer-accent__primary--hover);\n }\n }\n}\n\n.field__name,\n.field__value {\n flex: 1;\n}\n// WA: Link styles should be defined Mercury\n.field__link {\n color: var(--mer-accent__primary);\n &:hover {\n color: var(--mer-accent__primary--hover);\n }\n &:active {\n color: var(--mer-accent__primary--active);\n }\n}\n// WA: Remove tab elevation background color\n.docsTab {\n background-color: transparent !important;\n}\n\n// WA: Styles for \"button-icon-only\" should be defined on mercury\n.dropdown.button-icon-only::part(expandable-button) {\n padding: calc(\n (\n var(--control__block-size) - 2 * var(--control__border-width) -\n var(--mer-icon__box--md)\n ) / 2\n ) !important;\n border-start-start-radius: 0 !important;\n border-end-start-radius: 0 !important;\n}\n\n.version-buttons-container {\n display: flex;\n align-items: center;\n gap: 1px;\n}\n\nch-markdown-viewer {\n block-size: 100%;\n overflow: auto;\n}\n\n// WA: Need text with underline. This should be defined on Mercury\n.text-underline {\n text-decoration: underline;\n}\n","import {\n Component,\n Host,\n State,\n Prop,\n Element,\n h,\n getAssetPath,\n JSX\n} from \"@stencil/core\";\n\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { Locale } from \"../../common/locale\";\nimport { ActionMenuModel, TabModel } from \"@genexus/chameleon-controls-library\";\nimport { TabItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/tab/types\";\n\nconst USER_ICON = getIconPath({\n category: \"system\",\n name: \"user\",\n colorType: \"on-elevation\"\n});\nconst CHEVRON_DOWN_ICON = getIconPath({\n category: \"system\",\n name: \"chevron-down\",\n colorType: \"on-primary\"\n});\nconst CHECK_CIRCLE_ICON = getIconPath({\n category: \"system\",\n name: \"check-circle\",\n colorType: \"success\"\n});\n\n// plugin icon if no iconUri was provided\nconst EXTENSION_ICON_IMG = getAssetPath(\n `./gx-ide-assets/plugin-manager/images/plugin-icon.svg`\n);\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"chameleon/scrollbar\",\n \"components/button\",\n \"components/dropdown\",\n \"components/edit\",\n \"components/icon\",\n \"components/list-box\",\n \"components/tab\",\n \"utils/form\",\n \"utils/layout\",\n \"utils/spacing\",\n \"utils/typography\"\n];\n\n@Component({\n tag: \"gx-ide-plugin-details\",\n styleUrl: \"plugin-details.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/plugin-details\"]\n})\nexport class GxIdePluginDetails {\n /**\n * The component hard-coded strings translations.\n */\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n\n #chMarkdownViewer: HTMLChMarkdownViewerElement;\n\n // A map between docSection \"id\", and docSection \"description\".\n // \"id\" is generated inside this component.\n #docSectionIdDescriptionMap: Map<string, string> = new Map();\n\n @Element() el: HTMLGxIdePluginDetailsElement;\n\n @State() docsTabModel: TabModel = [];\n @State() selectedTabId: string;\n\n /**\n * Specifies all the information related to a plugin.\n */\n @Prop() readonly data!: PluginDetailsData;\n\n /**\n * Callback that should be invoked when the user performs the install or update action.\n * Receives an optional version string when a specific version is selected.\n */\n @Prop() readonly installCallback!: (version?: string) => Promise<void>;\n\n /**\n * Callback that should be invoked when the user attempts to open any link displayed in this component.\n */\n @Prop() readonly openLinkCallback!: (url: string) => Promise<void>;\n\n /**\n * Callback that should be invoked when the user performs the uninstall action.\n */\n @Prop() readonly uninstallCallback!: () => Promise<void>;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n if (this.data.docSections?.length) {\n this.docsTabModel = this.data.docSections.map((docSection, i) => {\n const formatedId = this.#returnFormatedId(docSection.name);\n\n this.#docSectionIdDescriptionMap.set(formatedId, docSection.content);\n\n if (i === 0) {\n this.selectedTabId = formatedId;\n }\n return {\n id: formatedId,\n name: docSection.name\n } as TabItemModel;\n });\n }\n }\n\n componentDidLoad() {\n this.#chMarkdownViewer.addEventListener(\"click\", event => {\n // Listens for clicks on links inside <ch-markdown-viewer>.\n // If a link (<a>) is clicked and openLinkCallback is defined,\n // it prevents the default navigation and delegates the event\n // to this.#openLinkHandler, passing the link's href.\n const path = event.composedPath() as EventTarget[];\n\n const link = path.find(el => el instanceof HTMLAnchorElement) as\n | HTMLAnchorElement\n | undefined;\n\n if (link?.href) {\n this.#openLinkHandler(link.href)(event);\n }\n });\n }\n\n #versionsMenuOptionsModel = (): ActionMenuModel => {\n const versionsToUpdateMenusModel: ActionMenuModel = this.data.versions?.map(\n version => {\n return { id: version, caption: version };\n }\n );\n return versionsToUpdateMenusModel;\n };\n\n #menuVersionSelectedHandler = (\n event: CustomEvent<{\n id?: string;\n }>\n ) => {\n const selectedVersion = event.detail.id;\n this.installCallback(selectedVersion);\n };\n\n #renderUninstallButton = (): JSX.Element => {\n return (\n <button class=\"button-tertiary\" onClick={this.#uninstallClickedHandler}>\n {this.#componentLocale.actions.uninstall}\n </button>\n );\n };\n\n #installClickedHandler = () => {\n this.installCallback();\n };\n\n #updateVersionHandler = (id: string) => () => {\n this.installCallback(id);\n };\n\n #openLinkHandler = (link: string) => (event: MouseEvent) => {\n if (this.openLinkCallback) {\n event.preventDefault();\n this.openLinkCallback(link);\n }\n };\n\n #uninstallClickedHandler = () => {\n this.uninstallCallback();\n };\n\n #renderActionButtons = (): JSX.Element => {\n let actionButtonCaption;\n let actionButtonClasses = \"button-primary action-button\";\n let actionButtonCallback;\n const moreVersionsToUpdate = this.data.versions?.length;\n\n if (!this.data.installed) {\n actionButtonCaption = this.#componentLocale.actions.install;\n actionButtonCallback = this.#installClickedHandler;\n } else if (this.data.updateVersion) {\n actionButtonCaption = `${this.#componentLocale.actions.updateTo} ${\n this.data.updateVersion\n }`;\n actionButtonCallback = this.#updateVersionHandler(\n this.data.updateVersion\n );\n } else {\n actionButtonCaption = this.#componentLocale.actions.installed;\n }\n\n if (moreVersionsToUpdate) {\n actionButtonClasses = `${actionButtonClasses} more-versions-available`;\n }\n\n return [\n <div class=\"version-buttons-container\">\n <button class={actionButtonClasses} onClick={actionButtonCallback}>\n {actionButtonCaption}\n </button>\n {moreVersionsToUpdate ? (\n <ch-action-menu-render\n class=\"dropdown button-primary button-icon-only\"\n blockAlign=\"outside-end\"\n inlineAlign=\"inside-start\"\n model={this.#versionsMenuOptionsModel()}\n onButtonClick={this.#menuVersionSelectedHandler}\n >\n <ch-image src={CHEVRON_DOWN_ICON} class=\"icon-md\"></ch-image>\n </ch-action-menu-render>\n ) : null}\n </div>\n ];\n };\n\n #tabSelectionChangedHandler = (\n event: CustomEvent<{\n lastSelectedIndex: number;\n newSelectedId: string;\n newSelectedIndex: number;\n }>\n ): void => {\n this.selectedTabId = event.detail.newSelectedId;\n };\n\n #renderDocSectionsSlots = (): JSX.Element => {\n return this.docsTabModel.map(docSectionTab => {\n if (docSectionTab.id === this.selectedTabId) {\n const markdownValue = this.#docSectionIdDescriptionMap.get(\n docSectionTab.id\n );\n\n return (\n <ch-markdown-viewer\n ref={(el: HTMLChMarkdownViewerElement) =>\n (this.#chMarkdownViewer = el as HTMLChMarkdownViewerElement)\n }\n slot={docSectionTab.id}\n key={docSectionTab.id}\n class=\"markdown spacing-body scrollable\"\n theme=\"components/markdown-viewer\"\n value={markdownValue}\n ></ch-markdown-viewer>\n );\n }\n });\n };\n\n #returnFormatedId = (rawId: string): string => {\n return rawId.toLowerCase().replace(/\\s+/g, \"-\");\n };\n\n #renderLinkTag = (\n href: string,\n label: string,\n cssClass?: string,\n chImageSrc?: string\n ): HTMLAnchorElement => {\n return (\n <a\n href={href}\n target=\"_blank\"\n onClick={this.#openLinkHandler(href)}\n class={cssClass}\n >\n {chImageSrc && <ch-image src={chImageSrc} class=\"icon-md\"></ch-image>}\n {label}\n </a>\n );\n };\n\n #renderAsideContent = (): JSX.Element => {\n return this.data.infoCategories.map(infoCategory => {\n return (\n <div class=\"plugin__info-category\">\n <h3 class=\"subtitle-semi-bold-s\">{infoCategory.name}</h3>\n <ul\n class={{\n \"fields__list\": true,\n \"fields__list--as-tags\": infoCategory.displayAsTags\n }}\n >\n {infoCategory.fields.map(field => {\n // If the field name isn’t specified, only the value is shown — usually a link.\n const fieldValue: string | HTMLAnchorElement =\n typeof field.value === \"string\"\n ? (field.value as string)\n : this.#renderLinkTag(\n (field.value as LinkData).url,\n (field.value as LinkData).text,\n \"field__link\"\n );\n return (\n <li class=\"field__li\">\n {field.name && !infoCategory.displayAsTags\n ? // displaysAsTags forces the items to be displayed as tags\n // no span.field__name and span.field__value\n [\n <span class=\"field__name body-semi-bold-s\">\n {field.name}\n </span>,\n <span class=\"field__value body-regular-s\">\n {fieldValue}\n </span>\n ]\n : fieldValue}\n </li>\n );\n })}\n </ul>\n </div>\n );\n });\n };\n\n render() {\n const renderActionButtons =\n !this.data.installed ||\n (this.data.installed && !!this.data.updateVersion);\n\n const titleLinkDataText = (this.data.name as LinkData).text;\n const titleLinkDataUrl = (this.data.name as LinkData).url;\n const titleHasLink = titleLinkDataText && titleLinkDataUrl;\n const titleText = titleLinkDataText || this.data.name;\n\n const publisherDataText = (this.data.publisher as LinkData).text;\n const publisherDataUrl = (this.data.publisher as LinkData).url;\n const publisherHasLink = publisherDataText && publisherDataUrl;\n const publisherText = publisherDataText || this.data.publisher;\n\n return (\n <Host class=\"widget\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"section\">\n <header class=\"header\">\n <img\n class=\"plugin__icon\"\n src={this.data.iconUrl || EXTENSION_ICON_IMG}\n alt=\"plugin extension icon\"\n />\n <div class=\"plugin__details\">\n {titleHasLink ? (\n <h2 class=\"heading-5 has-link\">\n {this.#renderLinkTag(\n titleLinkDataUrl,\n titleText as string,\n \"text-underline\"\n )}\n </h2>\n ) : (\n <h2 class=\"heading-5\">{titleText}</h2>\n )}\n {publisherHasLink ? (\n this.#renderLinkTag(\n publisherDataUrl,\n titleText as string,\n \"text-underline plugin__publisher tiny-semi-bold-l\",\n USER_ICON\n )\n ) : (\n <p class=\"plugin__publisher tiny-semi-bold-l\">\n <ch-image src={USER_ICON} class=\"icon-md\"></ch-image>\n {publisherText}\n </p>\n )}\n\n <p class=\"plugin__description\">{this.data.description}</p>\n <div class=\"buttons-spacer plugin__actions-container\">\n {renderActionButtons ? (\n this.#renderActionButtons()\n ) : (\n // installed and no updates\n <p class=\"installed-container subtitle-semi-bold-s\">\n <ch-image\n src={CHECK_CIRCLE_ICON}\n class=\"icon-md\"\n ></ch-image>\n {this.#componentLocale.actions.installed}\n </p>\n )}\n {this.data.installed && this.#renderUninstallButton()}\n </div>\n </div>\n </header>\n <div class=\"main\">\n {this.docsTabModel.length > 0 && (\n <ch-tab-render\n class=\"tab docsTab scrollable\"\n tabListPosition=\"block-start\"\n overflow=\"auto\"\n contain=\"size\"\n model={this.docsTabModel}\n onSelectedItemChange={this.#tabSelectionChangedHandler}\n selectedId={this.selectedTabId}\n >\n {this.#renderDocSectionsSlots()}\n </ch-tab-render>\n )}\n </div>\n <div class=\"aside spacing-body scrollable\">\n {this.#renderAsideContent()}\n </div>\n </section>\n {/* <slot></slot> */}\n </Host>\n );\n }\n}\n\n// plugin-details.types.ts\n\nexport type LinkData = {\n text: string;\n url: string;\n};\n\nexport type PluginFieldData = {\n name?: string;\n value: string | LinkData;\n};\n\nexport type PluginInfoCategoryData = {\n name: string;\n fields: PluginFieldData[];\n displayAsTags: boolean;\n};\n\nexport type DocSectionData = {\n name: string;\n content: string;\n};\n\nexport type PluginDetailsData = {\n id: string;\n name: string | LinkData;\n publisher: string | LinkData;\n installed: boolean;\n updateVersion?: string;\n versions: string[];\n iconUrl: string;\n description: string;\n docSections: DocSectionData[];\n infoCategories: PluginInfoCategoryData[];\n};\n"],"version":3}
|
|
1
|
+
{"file":"gx-ide-plugin-details.entry.js","mappings":"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","names":[],"sources":["src/components/plugin-details/plugin-details.scss?tag=gx-ide-plugin-details&encapsulation=shadow","src/components/plugin-details/plugin-details.tsx"],"sourcesContent":[":host {\n display: grid;\n block-size: 100%;\n grid-template-areas:\n \"header header\"\n \"main aside\";\n grid-template-rows: max-content 1fr;\n grid-template-columns: 1fr 280px;\n row-gap: 12px;\n}\n\n.section {\n display: contents;\n}\n\n// header\n.header {\n display: grid;\n grid-area: header;\n grid-template-areas: \"plugin-icon plugin-details\";\n grid-template-columns: 64px 1fr;\n column-gap: 16px;\n padding: 24px 24px 16px 24px;\n}\n.plugin__icon {\n grid-area: plugin-icon;\n inline-size: 100%;\n block-size: auto;\n display: block;\n}\n.plugin__details {\n grid-area: plugin-details;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.plugin__publisher {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.plugin__description {\n line-height: 1.5; // WA: Text appears too tight.\n}\n.plugin__actions-container {\n margin-block-start: 8px;\n align-items: center;\n}\n.action-button {\n min-inline-size: 100px;\n\n &.more-versions-available {\n border-start-end-radius: 0 !important;\n border-end-end-radius: 0 !important;\n }\n}\n.installed-container {\n display: flex;\n align-items: center;\n gap: 6px;\n\n // WA Biggest Mercury icon (icon-md) looks small in this case.\n // Mercury should expose more icon sizes.\n ch-image {\n --ch-image-size: 20px;\n }\n}\n\n// main\n.main {\n grid-area: main;\n}\n.docsTab {\n block-size: 100%;\n}\n\n// aside\n.aside {\n grid-area: aside;\n overflow: auto;\n border-block-start: 1px solid var(--items-container__border-color);\n}\n.fields__list {\n list-style: none;\n padding: 0;\n margin: 0;\n font-size: 12px;\n}\n.plugin__info-category {\n display: flex;\n flex-direction: column;\n gap: 8px;\n\n &:not(:first-child) {\n $space: 16px;\n padding-block-start: $space;\n margin-block-start: $space;\n border-block-start: 1px solid var(--mer-border-color__on-elevation--01);\n }\n}\n.fields__list:not(.fields__list--as-tags) {\n display: flex;\n flex-direction: column;\n gap: 8px;\n .field__li {\n display: flex;\n gap: 16px;\n }\n}\n.fields__list--as-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n\n .field__li {\n border: 1px solid var(--mer-border-color__on-elevation--01);\n padding: 2px 8px;\n border-radius: 4px;\n\n text-transform: lowercase;\n }\n .field__link {\n color: var(--mer-text__on-surface);\n\n &:hover {\n color: var(--mer-accent__primary);\n }\n &:active {\n color: var(--mer-accent__primary--hover);\n }\n }\n}\n\n.field__name,\n.field__value {\n flex: 1;\n}\n// WA: Link styles should be defined Mercury\n.field__link {\n color: var(--mer-accent__primary);\n &:hover {\n color: var(--mer-accent__primary--hover);\n }\n &:active {\n color: var(--mer-accent__primary--active);\n }\n}\n// WA: Remove tab elevation background color\n.docsTab {\n background-color: transparent !important;\n}\n\n// WA: Styles for \"button-icon-only\" should be defined on mercury\n.dropdown.button-icon-only::part(expandable-button) {\n padding: calc(\n (\n var(--control__block-size) - 2 *\n var(--control__border-width) - var(--mer-icon__box--md)\n ) /\n 2\n ) !important;\n border-start-start-radius: 0 !important;\n border-end-start-radius: 0 !important;\n}\n\n.version-buttons-container {\n display: flex;\n align-items: center;\n gap: 1px;\n}\n\nch-markdown-viewer {\n block-size: 100%;\n overflow: auto;\n}\n\n// WA: Need text with underline. This should be defined on Mercury\n.text-underline {\n text-decoration: underline;\n}\n","import {\n Component,\n Host,\n State,\n Prop,\n Element,\n h,\n getAssetPath,\n JSX\n} from \"@stencil/core\";\n\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { Locale } from \"../../common/locale\";\nimport { ActionMenuModel, TabModel } from \"@genexus/chameleon-controls-library\";\nimport { TabItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/tab/types\";\n\nconst USER_ICON = getIconPath({\n category: \"system\",\n name: \"user\",\n colorType: \"on-elevation\"\n});\nconst CHEVRON_DOWN_ICON = getIconPath({\n category: \"system\",\n name: \"chevron-down\",\n colorType: \"on-primary\"\n});\nconst CHECK_CIRCLE_ICON = getIconPath({\n category: \"system\",\n name: \"check-circle\",\n colorType: \"success\"\n});\n\n// plugin icon if no iconUri was provided\nconst EXTENSION_ICON_IMG = getAssetPath(\n `./gx-ide-assets/plugin-manager/images/plugin-icon.svg`\n);\n\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"chameleon/scrollbar\",\n \"components/button\",\n \"components/dropdown\",\n \"components/edit\",\n \"components/icon\",\n \"components/list-box\",\n \"components/tab\",\n \"utils/form\",\n \"utils/layout\",\n \"utils/spacing\",\n \"utils/typography\"\n];\n\n@Component({\n tag: \"gx-ide-plugin-details\",\n styleUrl: \"plugin-details.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/plugin-details\"]\n})\nexport class GxIdePluginDetails {\n /**\n * The component hard-coded strings translations.\n */\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n\n #chMarkdownViewer: HTMLChMarkdownViewerElement;\n\n // A map between docSection \"id\", and docSection \"description\".\n // \"id\" is generated inside this component.\n #docSectionIdDescriptionMap: Map<string, string> = new Map();\n\n @Element() el: HTMLGxIdePluginDetailsElement;\n\n @State() docsTabModel: TabModel = [];\n @State() selectedTabId: string;\n\n /**\n * Specifies all the information related to a plugin.\n */\n @Prop() readonly data!: PluginDetailsData;\n\n /**\n * Callback that should be invoked when the user performs the install or update action.\n * Receives an optional version string when a specific version is selected.\n */\n @Prop() readonly installCallback!: (version?: string) => Promise<void>;\n\n /**\n * Callback that should be invoked when the user attempts to open any link displayed in this component.\n */\n @Prop() readonly openLinkCallback!: (url: string) => Promise<void>;\n\n /**\n * Callback that should be invoked when the user performs the uninstall action.\n */\n @Prop() readonly uninstallCallback!: () => Promise<void>;\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n\n if (this.data.docSections?.length) {\n this.docsTabModel = this.data.docSections.map((docSection, i) => {\n const formatedId = this.#returnFormatedId(docSection.name);\n\n this.#docSectionIdDescriptionMap.set(formatedId, docSection.content);\n\n if (i === 0) {\n this.selectedTabId = formatedId;\n }\n return {\n id: formatedId,\n name: docSection.name\n } as TabItemModel;\n });\n }\n }\n\n componentDidLoad() {\n this.#chMarkdownViewer.addEventListener(\"click\", event => {\n // Listens for clicks on links inside <ch-markdown-viewer>.\n // If a link (<a>) is clicked and openLinkCallback is defined,\n // it prevents the default navigation and delegates the event\n // to this.#openLinkHandler, passing the link's href.\n const path = event.composedPath() as EventTarget[];\n\n const link = path.find(el => el instanceof HTMLAnchorElement) as\n | HTMLAnchorElement\n | undefined;\n\n if (link?.href) {\n this.#openLinkHandler(link.href)(event);\n }\n });\n }\n\n #versionsMenuOptionsModel = (): ActionMenuModel => {\n const versionsToUpdateMenusModel: ActionMenuModel = this.data.versions?.map(\n version => {\n return { id: version, caption: version };\n }\n );\n return versionsToUpdateMenusModel;\n };\n\n #menuVersionSelectedHandler = (\n event: CustomEvent<{\n id?: string;\n }>\n ) => {\n const selectedVersion = event.detail.id;\n this.installCallback(selectedVersion);\n };\n\n #renderUninstallButton = (): JSX.Element => {\n return (\n <button class=\"button-tertiary\" onClick={this.#uninstallClickedHandler}>\n {this.#componentLocale.actions.uninstall}\n </button>\n );\n };\n\n #installClickedHandler = () => {\n this.installCallback();\n };\n\n #updateVersionHandler = (id: string) => () => {\n this.installCallback(id);\n };\n\n #openLinkHandler = (link: string) => (event: MouseEvent) => {\n if (this.openLinkCallback) {\n event.preventDefault();\n this.openLinkCallback(link);\n }\n };\n\n #uninstallClickedHandler = () => {\n this.uninstallCallback();\n };\n\n #renderActionButtons = (): JSX.Element => {\n let actionButtonCaption;\n let actionButtonClasses = \"button-primary action-button\";\n let actionButtonCallback;\n const moreVersionsToUpdate = this.data.versions?.length;\n\n if (!this.data.installed) {\n actionButtonCaption = this.#componentLocale.actions.install;\n actionButtonCallback = this.#installClickedHandler;\n } else if (this.data.updateVersion) {\n actionButtonCaption = `${this.#componentLocale.actions.updateTo} ${\n this.data.updateVersion\n }`;\n actionButtonCallback = this.#updateVersionHandler(\n this.data.updateVersion\n );\n } else {\n actionButtonCaption = this.#componentLocale.actions.installed;\n }\n\n if (moreVersionsToUpdate) {\n actionButtonClasses = `${actionButtonClasses} more-versions-available`;\n }\n\n return [\n <div class=\"version-buttons-container\">\n <button class={actionButtonClasses} onClick={actionButtonCallback}>\n {actionButtonCaption}\n </button>\n {moreVersionsToUpdate ? (\n <ch-action-menu-render\n class=\"dropdown button-primary button-icon-only\"\n blockAlign=\"outside-end\"\n inlineAlign=\"inside-start\"\n model={this.#versionsMenuOptionsModel()}\n onButtonClick={this.#menuVersionSelectedHandler}\n >\n <ch-image src={CHEVRON_DOWN_ICON} class=\"icon-md\"></ch-image>\n </ch-action-menu-render>\n ) : null}\n </div>\n ];\n };\n\n #tabSelectionChangedHandler = (\n event: CustomEvent<{\n lastSelectedIndex: number;\n newSelectedId: string;\n newSelectedIndex: number;\n }>\n ): void => {\n this.selectedTabId = event.detail.newSelectedId;\n };\n\n #renderDocSectionsSlots = (): JSX.Element => {\n return this.docsTabModel.map(docSectionTab => {\n if (docSectionTab.id === this.selectedTabId) {\n const markdownValue = this.#docSectionIdDescriptionMap.get(\n docSectionTab.id\n );\n\n return (\n <ch-markdown-viewer\n ref={(el: HTMLChMarkdownViewerElement) =>\n (this.#chMarkdownViewer = el as HTMLChMarkdownViewerElement)\n }\n slot={docSectionTab.id}\n key={docSectionTab.id}\n class=\"markdown spacing-body scrollable\"\n theme=\"components/markdown-viewer\"\n value={markdownValue}\n ></ch-markdown-viewer>\n );\n }\n });\n };\n\n #returnFormatedId = (rawId: string): string => {\n return rawId.toLowerCase().replace(/\\s+/g, \"-\");\n };\n\n #renderLinkTag = (\n href: string,\n label: string,\n cssClass?: string,\n chImageSrc?: string\n ): HTMLAnchorElement => {\n return (\n <a\n href={href}\n target=\"_blank\"\n onClick={this.#openLinkHandler(href)}\n class={cssClass}\n >\n {chImageSrc && <ch-image src={chImageSrc} class=\"icon-md\"></ch-image>}\n {label}\n </a>\n );\n };\n\n #renderAsideContent = (): JSX.Element => {\n return this.data.infoCategories.map(infoCategory => {\n return (\n <div class=\"plugin__info-category\">\n <h3 class=\"subtitle-semi-bold-s\">{infoCategory.name}</h3>\n <ul\n class={{\n \"fields__list\": true,\n \"fields__list--as-tags\": infoCategory.displayAsTags\n }}\n >\n {infoCategory.fields.map(field => {\n // If the field name isn’t specified, only the value is shown — usually a link.\n const fieldValue: string | HTMLAnchorElement =\n typeof field.value === \"string\"\n ? (field.value as string)\n : this.#renderLinkTag(\n (field.value as LinkData).url,\n (field.value as LinkData).text,\n \"field__link\"\n );\n return (\n <li class=\"field__li\">\n {field.name && !infoCategory.displayAsTags\n ? // displaysAsTags forces the items to be displayed as tags\n // no span.field__name and span.field__value\n [\n <span class=\"field__name body-semi-bold-s\">\n {field.name}\n </span>,\n <span class=\"field__value body-regular-s\">\n {fieldValue}\n </span>\n ]\n : fieldValue}\n </li>\n );\n })}\n </ul>\n </div>\n );\n });\n };\n\n render() {\n const renderActionButtons =\n !this.data.installed ||\n (this.data.installed && !!this.data.updateVersion);\n\n const titleLinkDataText = (this.data.name as LinkData).text;\n const titleLinkDataUrl = (this.data.name as LinkData).url;\n const titleHasLink = titleLinkDataText && titleLinkDataUrl;\n const titleText = titleLinkDataText || this.data.name;\n\n const publisherDataText = (this.data.publisher as LinkData).text;\n const publisherDataUrl = (this.data.publisher as LinkData).url;\n const publisherHasLink = publisherDataText && publisherDataUrl;\n const publisherText = publisherDataText || this.data.publisher;\n\n return (\n <Host class=\"widget\">\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"section\">\n <header class=\"header\">\n <img\n class=\"plugin__icon\"\n src={this.data.iconUrl || EXTENSION_ICON_IMG}\n alt=\"plugin extension icon\"\n />\n <div class=\"plugin__details\">\n {titleHasLink ? (\n <h2 class=\"heading-5 has-link\">\n {this.#renderLinkTag(\n titleLinkDataUrl,\n titleText as string,\n \"text-underline\"\n )}\n </h2>\n ) : (\n <h2 class=\"heading-5\">{titleText}</h2>\n )}\n {publisherHasLink ? (\n this.#renderLinkTag(\n publisherDataUrl,\n titleText as string,\n \"text-underline plugin__publisher tiny-semi-bold-l\",\n USER_ICON\n )\n ) : (\n <p class=\"plugin__publisher tiny-semi-bold-l\">\n <ch-image src={USER_ICON} class=\"icon-md\"></ch-image>\n {publisherText}\n </p>\n )}\n\n <p class=\"plugin__description\">{this.data.description}</p>\n <div class=\"buttons-spacer plugin__actions-container\">\n {renderActionButtons ? (\n this.#renderActionButtons()\n ) : (\n // installed and no updates\n <p class=\"installed-container subtitle-semi-bold-s\">\n <ch-image\n src={CHECK_CIRCLE_ICON}\n class=\"icon-md\"\n ></ch-image>\n {this.#componentLocale.actions.installed}\n </p>\n )}\n {this.data.installed && this.#renderUninstallButton()}\n </div>\n </div>\n </header>\n <div class=\"main\">\n {this.docsTabModel.length > 0 && (\n <ch-tab-render\n class=\"tab docsTab scrollable\"\n tabListPosition=\"block-start\"\n overflow=\"auto\"\n contain=\"size\"\n model={this.docsTabModel}\n onSelectedItemChange={this.#tabSelectionChangedHandler}\n selectedId={this.selectedTabId}\n >\n {this.#renderDocSectionsSlots()}\n </ch-tab-render>\n )}\n </div>\n <div class=\"aside spacing-body scrollable\">\n {this.#renderAsideContent()}\n </div>\n </section>\n {/* <slot></slot> */}\n </Host>\n );\n }\n}\n\n// plugin-details.types.ts\n\nexport type LinkData = {\n text: string;\n url: string;\n};\n\nexport type PluginFieldData = {\n name?: string;\n value: string | LinkData;\n};\n\nexport type PluginInfoCategoryData = {\n name: string;\n fields: PluginFieldData[];\n displayAsTags: boolean;\n};\n\nexport type DocSectionData = {\n name: string;\n content: string;\n};\n\nexport type PluginDetailsData = {\n id: string;\n name: string | LinkData;\n publisher: string | LinkData;\n installed: boolean;\n updateVersion?: string;\n versions: string[];\n iconUrl: string;\n description: string;\n docSections: DocSectionData[];\n infoCategories: PluginInfoCategoryData[];\n};\n"],"version":3}
|
|
@@ -10,7 +10,7 @@ const mapTeamsToComboBoxItemModel = (teams) => {
|
|
|
10
10
|
});
|
|
11
11
|
};
|
|
12
12
|
|
|
13
|
-
const selectUserTeamCss = ":host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n
|
|
13
|
+
const selectUserTeamCss = ":host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--mer-surface__elevation--01);\n overflow: hidden;\n}\n.slide__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n}\n.slide__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: var(--mer-spacing--3xl);\n transform: translateY(var(--mer-spacing--2xs));\n transition: var(--display-teams-transtion-time) all;\n opacity: 0;\n position: relative;\n}\n.slide__main--visible {\n transform: translateY(0);\n opacity: 1;\n}\n.slide__main-container {\n display: grid;\n place-self: center;\n gap: var(--mer-spacing--lg);\n max-inline-size: 480px;\n}\n.slide__main-header {\n display: grid;\n gap: var(--mer-spacing--lg);\n}\n.slide__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--mer-font__size--xl);\n font-weight: var(--mer-font__weight--semi-bold);\n letter-spacing: 0.02em;\n color: var(--mer-text__on-surface);\n}\n.slide__main-description {\n display: grid;\n gap: var(--mer-spacing--2xl);\n font-size: var(--mer-font__size--sm);\n font-weight: var(--mer-font__weight--light);\n line-height: var(--mer-line-height--spaced);\n color: var(--mer-text__complementary);\n}\n\n.terms-conditions {\n text-decoration: underline;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n}\n\n.buttons-container {\n display: flex;\n gap: var(--mer-spacing--md);\n}\n\n.continue-btn,\n.cancel-btn {\n flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}";
|
|
14
14
|
|
|
15
15
|
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
16
16
|
if (kind === "a" && !f)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gx-ide-select-user-team.entry.js","mappings":"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","names":[],"sources":["src/components/select-user-team/helpers.tsx","src/components/select-user-team/select-user-team.scss?tag=gx-ide-select-user-team&encapsulation=shadow","src/components/select-user-team/select-user-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./select-user-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n teams: TeamData[]\n): ComboBoxItemModel[] => {\n return teams?.map(team => {\n return {\n value: team.id,\n caption: team.name\n };\n });\n};\n",":host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n padding: var(--mer-spacing--xl);\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--mer-surface__elevation--01);\n border-radius: var(--mer-spacing--md);\n overflow: hidden;\n\n &__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n }\n\n &__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: var(--mer-spacing--3xl);\n transform: translateY(var(--mer-spacing--2xs));\n transition: var(--display-teams-transtion-time) all;\n opacity: 0;\n\n position: relative;\n\n &--visible {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n &__main-container {\n display: grid;\n place-self: center;\n gap: var(--mer-spacing--lg);\n max-inline-size: 480px;\n }\n\n &__main-header {\n display: grid;\n gap: var(--mer-spacing--lg);\n }\n\n &__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--mer-font__size--xl);\n font-weight: var(--mer-font__weight--semi-bold);\n letter-spacing: 0.02em;\n color: var(--mer-text__on-surface);\n }\n\n &__main-description {\n display: grid;\n gap: var(--mer-spacing--2xl);\n font-size: var(--mer-font__size--sm);\n font-weight: var(--mer-font__weight--light);\n line-height: var(--mer-line-height--spaced);\n color: var(--mer-text__complementary);\n }\n}\n\n.terms-conditions {\n text-decoration: underline;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n}\n\n.buttons-container {\n display: flex;\n gap: var(--mer-spacing--md);\n}\n\n.continue-btn,\n.cancel-btn {\n flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n","// Stencil\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Watch,\n Element,\n getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapTeamsToComboBoxItemModel } from \"./helpers\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n `./gx-ide-assets/welcome-page/images/copyrights-illustration.png`\n);\nconst ICON_NEXT = getAssetPath(\n `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"components/button\",\n \"components/combo-box\"\n];\n\n@Component({\n tag: \"gx-ide-select-user-team\",\n styleUrl: \"select-user-team.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/select-user-team\"]\n})\nexport class GxIdeSelectUserTeam {\n /**\n * The component hard-coded strings translations.\n */\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n // Select User Team References :\n #userTeamsModel: ComboBoxItemModel[] = [];\n #chSelectTeamEl: HTMLChComboBoxRenderElement;\n #displayTeamsTransitionTime: number = 100;\n\n @Element() el: HTMLGxIdeSelectUserTeamElement;\n\n /**\n * Defines if the main slide is visible or not. Used for smooth transitions between slides.\n */\n @State() slideIsVisible: boolean = false;\n\n /**\n * Defines if the team model is redy to be rendered.\n */\n @State() teamsModelReady: boolean = false;\n\n /**\n * Callback executed when the user clicks the 'Cancel' button\n */\n @Prop() readonly cancelCallback!: () => Promise<void>;\n\n /**\n * Callback executed when the user clicks the 'Continue' button\n */\n @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n /**\n * Array that contains the user's teams\n */\n @Prop() readonly teams!: TeamData[];\n @Watch(\"teams\")\n teamsChanged(newTeams: TeamData[]) {\n this.slideIsVisible = false;\n // switch step\n setTimeout(() => {\n if (newTeams.length) {\n this.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\n this.teamsModelReady = true;\n } else {\n this.teamsModelReady = false;\n }\n }, this.#displayTeamsTransitionTime);\n // show slide\n setTimeout(() => {\n this.slideIsVisible = true;\n }, this.#displayTeamsTransitionTime * 2);\n }\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.teamsChanged(this.teams);\n\n this.el.style.setProperty(\n \"--display-teams-transtion-time\",\n this.#displayTeamsTransitionTime.toString() + \"ms\"\n );\n }\n\n componentDidLoad() {\n this.slideIsVisible = true;\n }\n\n #continueHandler = async () => {\n await this.continueCallback(this.#chSelectTeamEl.value);\n };\n\n #cancelHandler = async () => {\n await this.cancelCallback();\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"slide\">\n <img\n src={COPYRIGHTS_ILLUSTRATION}\n class=\"slide__illustration\"\n alt=\"\" // decorative\n />\n\n <div\n class={{\n \"slide__main\": true,\n \"slide__main--visible\": this.slideIsVisible\n }}\n >\n <div class=\"slide__main-container\">\n {this.teamsModelReady ? (\n [\n <header class=\"slide__main-header\">\n <img\n src={ICON_NEXT}\n alt=\"\" // decorative\n />\n <h2\n // Split the title into two spans for better styling\n class=\"slide__main-title\"\n >\n <span>{this.#componentLocale.title}</span>\n </h2>\n </header>,\n <div class=\"slide__select-team-description\">\n <p class=\"body-semi-bold-l\">\n {this.#componentLocale.infoMessage}\n </p>\n </div>,\n <div class=\"field-group\">\n <div class=\"field field-block\">\n <label htmlFor=\"teams\">\n {this.#componentLocale.teams}\n </label>\n <ch-combo-box-render\n id=\"teams\"\n accessibleName=\"Teams\"\n class=\"combo-box teams-list\"\n model={this.#userTeamsModel}\n value={\n this.#userTeamsModel && this.#userTeamsModel[0]?.value\n }\n ref={(el: HTMLChComboBoxRenderElement) =>\n (this.#chSelectTeamEl =\n el as HTMLChComboBoxRenderElement)\n }\n ></ch-combo-box-render>\n </div>\n </div>,\n <div class=\"buttons-container\">\n <button\n class=\"button-primary continue-btn\"\n onClick={this.#continueHandler}\n >\n {this.#componentLocale.continueButtonCaption}\n </button>\n <button\n class=\"button-secondary cancel-btn\"\n onClick={this.#cancelHandler}\n >\n {this.#componentLocale.cancelButtonCaption}\n </button>\n </div>\n ]\n ) : (\n <gx-ide-loader\n show\n loaderTitle={this.#componentLocale.loader.title}\n description={this.#componentLocale.loader.description}\n ></gx-ide-loader>\n )}\n </div>\n </div>\n </section>\n </Host>\n );\n }\n}\n\nexport type TeamData = {\n id: string;\n name: string;\n};\n"],"version":3}
|
|
1
|
+
{"file":"gx-ide-select-user-team.entry.js","mappings":";;;AAGO,MAAM,2BAA2B,GAAG,CACzC,KAAiB;IAEjB,OAAO,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,IAAI;QACpB,OAAO;YACL,KAAK,EAAE,IAAI,CAAC,EAAE;YACd,OAAO,EAAE,IAAI,CAAC,IAAI;SACnB,CAAC;KACH,CAAC,CAAC;AACL,CAAC;;ACZD,MAAM,iBAAiB,GAAG,2/DAA2/D;;;;;;;;;;;;;;;;;;;ACkBrhE,MAAM,uBAAuB,GAAG,YAAY,CAC1C,iEAAiE,CAClE,CAAC;AACF,MAAM,SAAS,GAAG,YAAY,CAC5B,mDAAmD,CACpD,CAAC;AACF,MAAM,WAAW,GAAmB;IAClC,mBAAmB;IACnB,kBAAkB;IAClB,mBAAmB;IACnB,sBAAsB;CACvB,CAAC;MAQW,mBAAmB;;;;;;;QAK9B,uDAAsB;;QAEtB,8CAAuC,EAAE,EAAC;QAC1C,sDAA6C;QAC7C,0DAAsC,GAAG,EAAC;QA4D1C,+CAAmB;YACjB,MAAM,IAAI,CAAC,gBAAgB,CAAC,uBAAA,IAAI,2CAAgB,CAAC,KAAK,CAAC,CAAC;SACzD,EAAC;QAEF,6CAAiB;YACf,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;SAC7B,EAAC;8BA3DiC,KAAK;+BAKJ,KAAK;;;;;IAiBzC,YAAY,CAAC,QAAoB;QAC/B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;;QAE5B,UAAU,CAAC;YACT,IAAI,QAAQ,CAAC,MAAM,EAAE;gBACnB,uBAAA,IAAI,uCAAmB,2BAA2B,CAAC,QAAQ,CAAC,MAAA,CAAC;gBAC7D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;aAC7B;iBAAM;gBACL,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;aAC9B;SACF,EAAE,uBAAA,IAAI,uDAA4B,CAAC,CAAC;;QAErC,UAAU,CAAC;YACT,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;SAC5B,EAAE,uBAAA,IAAI,uDAA4B,GAAG,CAAC,CAAC,CAAC;KAC1C;IAED,MAAM,iBAAiB;QACrB,uBAAA,IAAI,wCAAoB,MAAM,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;QAClE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAE9B,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CACvB,gCAAgC,EAChC,uBAAA,IAAI,uDAA4B,CAAC,QAAQ,EAAE,GAAG,IAAI,CACnD,CAAC;KACH;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;KAC5B;IAUD,MAAM;;QACJ,QACE,EAAC,IAAI,QACH,gBAAU,KAAK,EAAE,WAAW,GAAa,EACzC,eAAS,KAAK,EAAC,OAAO,IACpB,WACE,GAAG,EAAE,uBAAuB,EAC5B,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAC,EAAE;UACN,EAEF,WACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,sBAAsB,EAAE,IAAI,CAAC,cAAc;aAC5C,IAED,WAAK,KAAK,EAAC,uBAAuB,IAC/B,IAAI,CAAC,eAAe,IACnB;YACE,cAAQ,KAAK,EAAC,oBAAoB,IAChC,WACE,GAAG,EAAE,SAAS,EACd,GAAG,EAAC,EAAE;cACN,EACF;;gBAEE,KAAK,EAAC,mBAAmB;eAEzB,gBAAO,uBAAA,IAAI,4CAAiB,CAAC,KAAK,CAAQ,CACvC,CACE;YACT,WAAK,KAAK,EAAC,gCAAgC,IACzC,SAAG,KAAK,EAAC,kBAAkB,IACxB,uBAAA,IAAI,4CAAiB,CAAC,WAAW,CAChC,CACA;YACN,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,mBAAmB,IAC5B,aAAO,OAAO,EAAC,OAAO,IACnB,uBAAA,IAAI,4CAAiB,CAAC,KAAK,CACtB,EACR,2BACE,EAAE,EAAC,OAAO,EACV,cAAc,EAAC,OAAO,EACtB,KAAK,EAAC,sBAAsB,EAC5B,KAAK,EAAE,uBAAA,IAAI,2CAAgB,EAC3B,KAAK,EACH,uBAAA,IAAI,2CAAgB,KAAI,MAAA,uBAAA,IAAI,2CAAgB,CAAC,CAAC,CAAC,0CAAE,KAAK,CAAA,EAExD,GAAG,EAAE,CAAC,EAA+B,MAClC,uBAAA,IAAI,uCACH,EAAiC,MAAA,CAAC,GAEjB,CACnB,CACF;YACN,WAAK,KAAK,EAAC,mBAAmB,IAC5B,cACE,KAAK,EAAC,6BAA6B,EACnC,OAAO,EAAE,uBAAA,IAAI,4CAAiB,IAE7B,uBAAA,IAAI,4CAAiB,CAAC,qBAAqB,CACrC,EACT,cACE,KAAK,EAAC,6BAA6B,EACnC,OAAO,EAAE,uBAAA,IAAI,0CAAe,IAE3B,uBAAA,IAAI,4CAAiB,CAAC,mBAAmB,CACnC,CACL;SACP,KAED,qBACE,IAAI,QACJ,WAAW,EAAE,uBAAA,IAAI,4CAAiB,CAAC,MAAM,CAAC,KAAK,EAC/C,WAAW,EAAE,uBAAA,IAAI,4CAAiB,CAAC,MAAM,CAAC,WAAW,GACtC,CAClB,CACG,CACF,CACE,CACL,EACP;KACH;;;;;;;;;;;;","names":[],"sources":["src/components/select-user-team/helpers.tsx","src/components/select-user-team/select-user-team.scss?tag=gx-ide-select-user-team&encapsulation=shadow","src/components/select-user-team/select-user-team.tsx"],"sourcesContent":["import { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\nimport { TeamData } from \"./select-user-team\";\n\nexport const mapTeamsToComboBoxItemModel = (\n teams: TeamData[]\n): ComboBoxItemModel[] => {\n return teams?.map(team => {\n return {\n value: team.id,\n caption: team.name\n };\n });\n};\n",":host {\n display: grid;\n container-type: inline-size;\n container-name: host-container;\n block-size: 100%;\n inline-size: 100%;\n align-items: center;\n justify-content: center;\n}\n\n.slide {\n display: grid;\n grid-template-columns: 1fr 1fr;\n block-size: 100%;\n max-block-size: 700px;\n max-inline-size: 1100px;\n background-color: var(--mer-surface__elevation--01);\n overflow: hidden;\n\n &__illustration {\n overflow: hidden;\n object-fit: cover;\n object-position: left;\n block-size: 100%;\n inline-size: 100%;\n }\n\n &__main {\n display: grid;\n block-size: 100%;\n inline-size: 100%;\n padding: var(--mer-spacing--3xl);\n transform: translateY(var(--mer-spacing--2xs));\n transition: var(--display-teams-transtion-time) all;\n opacity: 0;\n\n position: relative;\n\n &--visible {\n transform: translateY(0);\n opacity: 1;\n }\n }\n\n &__main-container {\n display: grid;\n place-self: center;\n gap: var(--mer-spacing--lg);\n max-inline-size: 480px;\n }\n\n &__main-header {\n display: grid;\n gap: var(--mer-spacing--lg);\n }\n\n &__main-title {\n display: flex;\n flex-direction: column;\n font-size: var(--mer-font__size--xl);\n font-weight: var(--mer-font__weight--semi-bold);\n letter-spacing: 0.02em;\n color: var(--mer-text__on-surface);\n }\n\n &__main-description {\n display: grid;\n gap: var(--mer-spacing--2xl);\n font-size: var(--mer-font__size--sm);\n font-weight: var(--mer-font__weight--light);\n line-height: var(--mer-line-height--spaced);\n color: var(--mer-text__complementary);\n }\n}\n\n.terms-conditions {\n text-decoration: underline;\n}\n\n.teams-list {\n inline-size: 100%;\n max-inline-size: 400px;\n}\n\n.buttons-container {\n display: flex;\n gap: var(--mer-spacing--md);\n}\n\n.continue-btn,\n.cancel-btn {\n flex: 1;\n}\n\n@container host-container (max-width: 768px) {\n .slide {\n grid-template-columns: 1fr 2fr;\n }\n}\n\n@container host-container (max-width: 640px) {\n .slide {\n grid-template-columns: 1fr 5fr;\n }\n}\n","// Stencil\nimport {\n Component,\n Host,\n h,\n Prop,\n State,\n Watch,\n Element,\n getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxItemModel } from \"@genexus/chameleon-controls-library/dist/types/components/combo-box/types\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\nimport { mapTeamsToComboBoxItemModel } from \"./helpers\";\n\nconst COPYRIGHTS_ILLUSTRATION = getAssetPath(\n `./gx-ide-assets/welcome-page/images/copyrights-illustration.png`\n);\nconst ICON_NEXT = getAssetPath(\n `./gx-ide-assets/welcome-page/images/icon-next.svg`\n);\nconst CSS_BUNDLES: MercuryBundles = [\n \"resets/box-sizing\",\n \"utils/typography\",\n \"components/button\",\n \"components/combo-box\"\n];\n\n@Component({\n tag: \"gx-ide-select-user-team\",\n styleUrl: \"select-user-team.scss\",\n shadow: true,\n assetsDirs: [\"gx-ide-assets/select-user-team\"]\n})\nexport class GxIdeSelectUserTeam {\n /**\n * The component hard-coded strings translations.\n */\n // eslint-disable-next-line @stencil-community/own-props-must-be-private\n #componentLocale: any;\n // Select User Team References :\n #userTeamsModel: ComboBoxItemModel[] = [];\n #chSelectTeamEl: HTMLChComboBoxRenderElement;\n #displayTeamsTransitionTime: number = 100;\n\n @Element() el: HTMLGxIdeSelectUserTeamElement;\n\n /**\n * Defines if the main slide is visible or not. Used for smooth transitions between slides.\n */\n @State() slideIsVisible: boolean = false;\n\n /**\n * Defines if the team model is redy to be rendered.\n */\n @State() teamsModelReady: boolean = false;\n\n /**\n * Callback executed when the user clicks the 'Cancel' button\n */\n @Prop() readonly cancelCallback!: () => Promise<void>;\n\n /**\n * Callback executed when the user clicks the 'Continue' button\n */\n @Prop() readonly continueCallback!: (teamId: string) => Promise<void>;\n\n /**\n * Array that contains the user's teams\n */\n @Prop() readonly teams!: TeamData[];\n @Watch(\"teams\")\n teamsChanged(newTeams: TeamData[]) {\n this.slideIsVisible = false;\n // switch step\n setTimeout(() => {\n if (newTeams.length) {\n this.#userTeamsModel = mapTeamsToComboBoxItemModel(newTeams);\n this.teamsModelReady = true;\n } else {\n this.teamsModelReady = false;\n }\n }, this.#displayTeamsTransitionTime);\n // show slide\n setTimeout(() => {\n this.slideIsVisible = true;\n }, this.#displayTeamsTransitionTime * 2);\n }\n\n async componentWillLoad() {\n this.#componentLocale = await Locale.getComponentStrings(this.el);\n this.teamsChanged(this.teams);\n\n this.el.style.setProperty(\n \"--display-teams-transtion-time\",\n this.#displayTeamsTransitionTime.toString() + \"ms\"\n );\n }\n\n componentDidLoad() {\n this.slideIsVisible = true;\n }\n\n #continueHandler = async () => {\n await this.continueCallback(this.#chSelectTeamEl.value);\n };\n\n #cancelHandler = async () => {\n await this.cancelCallback();\n };\n\n render() {\n return (\n <Host>\n <ch-theme model={CSS_BUNDLES}></ch-theme>\n <section class=\"slide\">\n <img\n src={COPYRIGHTS_ILLUSTRATION}\n class=\"slide__illustration\"\n alt=\"\" // decorative\n />\n\n <div\n class={{\n \"slide__main\": true,\n \"slide__main--visible\": this.slideIsVisible\n }}\n >\n <div class=\"slide__main-container\">\n {this.teamsModelReady ? (\n [\n <header class=\"slide__main-header\">\n <img\n src={ICON_NEXT}\n alt=\"\" // decorative\n />\n <h2\n // Split the title into two spans for better styling\n class=\"slide__main-title\"\n >\n <span>{this.#componentLocale.title}</span>\n </h2>\n </header>,\n <div class=\"slide__select-team-description\">\n <p class=\"body-semi-bold-l\">\n {this.#componentLocale.infoMessage}\n </p>\n </div>,\n <div class=\"field-group\">\n <div class=\"field field-block\">\n <label htmlFor=\"teams\">\n {this.#componentLocale.teams}\n </label>\n <ch-combo-box-render\n id=\"teams\"\n accessibleName=\"Teams\"\n class=\"combo-box teams-list\"\n model={this.#userTeamsModel}\n value={\n this.#userTeamsModel && this.#userTeamsModel[0]?.value\n }\n ref={(el: HTMLChComboBoxRenderElement) =>\n (this.#chSelectTeamEl =\n el as HTMLChComboBoxRenderElement)\n }\n ></ch-combo-box-render>\n </div>\n </div>,\n <div class=\"buttons-container\">\n <button\n class=\"button-primary continue-btn\"\n onClick={this.#continueHandler}\n >\n {this.#componentLocale.continueButtonCaption}\n </button>\n <button\n class=\"button-secondary cancel-btn\"\n onClick={this.#cancelHandler}\n >\n {this.#componentLocale.cancelButtonCaption}\n </button>\n </div>\n ]\n ) : (\n <gx-ide-loader\n show\n loaderTitle={this.#componentLocale.loader.title}\n description={this.#componentLocale.loader.description}\n ></gx-ide-loader>\n )}\n </div>\n </div>\n </section>\n </Host>\n );\n }\n}\n\nexport type TeamData = {\n id: string;\n name: string;\n};\n"],"version":3}
|
|
@@ -2501,7 +2501,7 @@ const zhCN = {
|
|
|
2501
2501
|
},
|
|
2502
2502
|
};
|
|
2503
2503
|
|
|
2504
|
-
const startPageCss = "/*Gx Ide*/\n/*@container queries*/\n/* hiChar styles\nFound on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.\n*/\n:host {\n --spacing-body-block-start: var(--
|
|
2504
|
+
const startPageCss = "/*Gx Ide*/\n/*@container queries*/\n/* hiChar styles\nFound on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.\n*/\n:host {\n --common-spacing: var(--mer-spacing--lg);\n --spacing-body-block-start: var(--common-spacing);\n --spacing-body-block-end: var(--common-spacing);\n --spacing-body-inline-start: var(--common-spacing);\n --spacing-body-inline-end: 0;\n --spacing-body-inline-start: 0;\n display: grid;\n block-size: 100%;\n overflow: auto;\n}\n\n:host(.spacing-body) .section-secondary,\n:host(.spacing-body) .section-create-new-kb__header,\n:host(.spacing-body) .section-create-new-kb__actions,\n:host(.spacing-body-inline) .section-secondary,\n:host(.spacing-body-inline) .section-create-new-kb__header,\n:host(.spacing-body-inline) .section-create-new-kb__actions {\n padding-inline-start: var(--common-spacing);\n padding-inline-end: var(--common-spacing);\n}\n\n:host(.spacing-body-inline-start) .section-secondary,\n:host(.spacing-body-inline-start) .section-create-new-kb__actions {\n padding-inline-start: var(--common-spacing);\n}\n\n:host(.spacing-body-inline-end) .section-secondary,\n:host(.spacing-body-inline-end) .section-create-new-kb__actions {\n padding-inline-end: var(--common-spacing);\n}\n\n.main {\n animation: fadeIn var(--mer-timing--fast) forwards;\n display: grid;\n block-size: 100%;\n overflow: auto;\n opacity: 0;\n grid-template-rows: max-content 1fr;\n gap: var(--mer-spacing--lg);\n}\n\n@keyframes bounce {\n 0% {\n transform: translateY(0);\n }\n 100% {\n transform: translateY(-30px);\n }\n}\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n.section-create-new-kb__actions,\n.section-secondary__actions {\n display: grid;\n grid-auto-flow: column;\n gap: var(--mer-spacing--md);\n overflow-x: auto;\n padding-block-end: var(--mer-spacing--xs);\n}\n\n.card-filled,\n.card-outlined {\n display: grid;\n gap: var(--mer-spacing--md);\n align-content: space-between;\n border-radius: var(--mer-border__radius--md);\n}\n\n.card-filled {\n background-color: var(--mer-surface__elevation--01);\n padding: var(--mer-spacing--md);\n}\n\n.card-outlined {\n border: var(--mer-border__width--sm) solid var(--mer-border-color__on-surface);\n grid-template-columns: max-content 1fr;\n align-items: center;\n padding: var(--mer-spacing--md) var(--mer-spacing--md) var(--mer-spacing--xs) var(--mer-spacing--md);\n}\n\n.icon-capsule {\n pointer-events: none;\n display: inline-flex;\n block-size: 40px;\n inline-size: 40px;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n border: var(--mer-border__width--sm) dashed var(--mer-border-color__on-elevation--02);\n}\n.icon-capsule .icon-circular {\n --ch-image-size: 20px;\n}\n\n.card__header {\n display: grid;\n gap: var(--mer-spacing--sm);\n justify-items: self-start;\n}\n\n.card__header-description {\n display: grid;\n gap: var(--mer-spacing--xs);\n --font-weight-regular: 300;\n}\n\n.section-create-new-kb {\n display: grid;\n grid-auto-rows: max-content;\n gap: var(--mer-spacing--lg);\n}\n.section-create-new-kb__header {\n display: grid;\n gap: var(--mer-spacing--xs);\n}\n.section-create-new-kb__title {\n color: var(--mer-text__bright);\n font-weight: 500;\n}\n.section-create-new-kb__actions {\n display: grid;\n gap: var(--mer-spacing--md);\n overflow-x: auto;\n grid-auto-flow: column;\n grid-auto-columns: 330px;\n}\n\n.samples-buttons-container {\n flex-wrap: wrap;\n}\n\n.section-secondary {\n display: grid;\n block-size: 100%;\n position: relative;\n overflow: auto;\n}\n.section-secondary__title {\n display: grid;\n grid-template-columns: 1fr max-content 1fr;\n gap: var(--mer-spacing--md);\n align-items: center;\n font-weight: 300;\n}\n.section-secondary__title::before, .section-secondary__title::after {\n content: \"\";\n block-size: var(--mer-border__width--sm);\n background-color: var(--mer-border-color__on-elevation--01);\n}\n.section-secondary__actions {\n display: grid;\n}\n.section-secondary__actions--two-cards {\n grid-template-columns: repeat(2, minmax(430px, 1fr));\n}\n.section-secondary__actions--multiple-cards {\n grid-auto-columns: 670px;\n}\n\n.section-no-kbs {\n display: grid;\n block-size: 100%;\n position: relative;\n overflow: auto;\n grid-template-rows: max-content max-content;\n gap: var(--mer-spacing--md);\n}\n\n.section-kbs {\n background-color: var(--mer-surface__elevation--01);\n border-radius: var(--mer-border__radius--sm);\n padding: var(--mer-spacing--sm);\n display: grid;\n container-type: inline-size;\n grid-template-rows: auto 1fr;\n overflow: hidden;\n}\n.section-kbs__header {\n display: grid;\n grid-template-columns: max-content 230px;\n align-items: center;\n gap: var(--mer-spacing--xl);\n border-block-end: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--01);\n padding-block-end: var(--mer-spacing--sm);\n}\n.section-kbs__header--no-border {\n border-block-end-color: transparent !important;\n}\n.section-kbs__title {\n align-items: center;\n display: flex;\n min-block-size: 31px;\n}\n.section-kbs__filter--hidden {\n opacity: 0;\n}\n.section-kbs__list {\n display: grid;\n grid-auto-rows: max-content;\n grid-template-columns: 1fr 1fr;\n row-gap: var(--mer-spacing--xs);\n column-gap: var(--mer-spacing--md);\n overflow: auto;\n position: relative;\n padding-block-start: var(--mer-spacing--sm);\n}\n.section-kbs__list--empty {\n grid-template-columns: 1fr;\n grid-auto-rows: 1fr;\n overflow: hidden;\n}\n@container (max-width: 768px) {\n .section-kbs__list {\n grid-template-columns: 1fr;\n }\n}\n\n.kb__item {\n --font-weight-regular: 300;\n background-color: var(--mer-surface__elevation--02);\n padding: var(--mer-spacing--sm);\n display: grid;\n grid-template-columns: auto max-content;\n gap: var(--mer-spacing--3xl);\n}\n.kb__details {\n display: grid;\n grid-template-columns: max-content 1fr;\n align-items: center;\n gap: var(--mer-spacing--sm);\n}\n.kb__name {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n text-decoration: underline;\n cursor: pointer;\n display: inline-block;\n}\n.kb__name:hover {\n color: var(--mer-text__bright);\n}\n.kb__modified {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n text-align: end;\n font-variant-numeric: tabular-nums;\n}\n\n.hiChar {\n color: var(--mer-color__primary--200);\n filter: brightness(1.3);\n}\n\n.loader {\n border: var(--mer-border__width--sm) solid var(--mer-border-color__on-surface);\n}\n\n.heading-2,\n.heading-3 {\n margin: 0;\n font-weight: 600 !important;\n color: #ffffff !important;\n}\n\n.card-filled .heading-3 {\n color: var(--mer-text__on-surface) !important;\n}\n\n.text-body-regular-m,\n.card__footer {\n font-weight: var(--mer-font__weight--light) !important;\n --control__font-weight--regular: var(--mer-font__weight--light);\n}\n\n.card__header-description {\n --line-height-tight: 1.7;\n --font-weight-regular: 300;\n}\n\n.card__header-title {\n color: var(--mer-text__bright);\n}\n\n.button-tertiary-no-padding-inline-start.button-tertiary {\n padding-inline-start: 0;\n}";
|
|
2505
2505
|
|
|
2506
2506
|
var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
2507
2507
|
if (kind === "a" && !f)
|