@genexus/genexus-ide-ui 1.0.19 → 1.0.20

package/dist/cjs/gx-ide-splash.cjs.entry.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b87e3ee0.js');
+const locale = require('./locale-bf43b87c.js');
+
+const splashCss = ":host{display:grid;block-size:100%;inline-size:100%;align-items:center;justify-content:center;padding:var(--mer-spacing--xl)}.slide{display:grid;max-inline-size:1100px;grid-template-columns:1fr 550px;background-color:var(--mer-surface__elevation--01);border-radius:var(--mer-spacing--md);overflow:hidden;opacity:0;transition:var(--slide-fade-duration) opacity}.slide--visible{opacity:1}.slide__illustration{overflow:hidden;max-block-size:700px}.slide__copy{display:grid;block-size:100%;inline-size:100%;padding:var(--mer-spacing--3xl)}.slide__copy-container{display:grid;gap:var(--mer-spacing--md);max-inline-size:480px;place-self:center}.slide__copy-header{display:grid;gap:var(--mer-spacing--md)}.slide__copy-title{font-size:var(--mer-font__size--xl);color:var(--mer-text__on-surface);letter-spacing:0.02em;font-weight:var(--mer-font__weight--semi-bold)}.slide__copy-description{display:grid;color:var(--mer-text__complementary);gap:var(--mer-spacing--md);font-size:var(--mer-font__size--sm);font-weight:var(--mer-font__weight--light);line-height:var(--mer-line-height--spaced)}";
+
+var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _GxIdeUiSplash_componentLocale;
+const COPYRIGHTS_ILLUSTRATION = index.getAssetPath(`./gx-ide-assets/welcome-page/images/copyrights-illustration.png`);
+const ICON_NEXT = index.getAssetPath(`./gx-ide-assets/welcome-page/images/icon-next.svg`);
+const SLIDE_FADE_DURATION = 300;
+const CSS_BUNDLES = ["resets/box-sizing", "utils/typography"];
+const GxIdeUiSplash = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * The component hard-coded strings translations.
+         */
+        // eslint-disable-next-line @stencil-community/own-props-must-be-private
+        _GxIdeUiSplash_componentLocale.set(this, void 0);
+        this.splashVisible = false;
+        this.version = undefined;
+        this.removeSplash = false;
+    }
+    removeSplashChanged(removeSplash) {
+        if (removeSplash) {
+            this.splashVisible = false;
+            setTimeout(() => {
+                // wait until the slide disappears, then remove.
+                this.el.remove();
+            }, SLIDE_FADE_DURATION);
+        }
+    }
+    async componentWillLoad() {
+        __classPrivateFieldSet(this, _GxIdeUiSplash_componentLocale, await locale.Locale.getComponentStrings(this.el), "f");
+    }
+    componentDidLoad() {
+        this.splashVisible = true;
+    }
+    render() {
+        const currentYear = new Date().getFullYear();
+        return (index.h(index.Host, null, index.h("ch-theme", { model: CSS_BUNDLES }), index.h("section", { class: { "slide": true, "slide--visible": this.splashVisible }, style: { "--slide-fade-duration": `${SLIDE_FADE_DURATION}ms` } }, index.h("div", { class: "slide__illustration", role: "img", "aria-label": __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").copyright.illustrationAriaLabel }, index.h("img", {
+            // base image (acts like a background)
+            src: COPYRIGHTS_ILLUSTRATION, class: "slide__illustration", alt: __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").copyright.illustrationFigureAriaLabel
+        })), index.h("section", { class: "slide__copy" }, index.h("div", { class: "slide__copy-container" }, index.h("header", { class: "slide__copy-header" }, index.h("img", { src: ICON_NEXT, alt: __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").copyright.illustrationAlternativeText }), index.h("h2", { class: "slide__copy-title" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").copyright.title)), index.h("div", { class: "slide__copy-description" }, index.h("p", null, index.h("span", { class: "version" }, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").copyright.version, index.h("span", null, this.version)), index.h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").copyright.c1988), index.h("span", null, " \u2014 ", currentYear, " "), index.h("span", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").copyright.allRightsReserved)), index.h("p", null, __classPrivateFieldGet(this, _GxIdeUiSplash_componentLocale, "f").copyright.description)))))));
+    }
+    static get assetsDirs() { return ["gx-ide-assets/splash"]; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "removeSplash": ["removeSplashChanged"]
+    }; }
+};
+_GxIdeUiSplash_componentLocale = new WeakMap();
+GxIdeUiSplash.style = splashCss;
+
+exports.gx_ide_splash = GxIdeUiSplash;
+
+//# sourceMappingURL=gx-ide-splash.cjs.entry.js.map

package/dist/cjs/gx-ide-splash.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gx-ide-splash.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,SAAS,GAAG,0jCAA0jC;;;;;;;;;;;;;;;;;;;ACgB5kC,MAAM,uBAAuB,GAAGA,kBAAY,CAC1C,iEAAiE,CAClE,CAAC;AACF,MAAM,SAAS,GAAGA,kBAAY,CAC5B,mDAAmD,CACpD,CAAC;AACF,MAAM,mBAAmB,GAAG,GAAG,CAAC;AAChC,MAAM,WAAW,GAAmB,CAAC,mBAAmB,EAAE,kBAAkB,CAAC,CAAC;MAQjE,aAAa;;;;;;;QAKxB,iDAAsB;6BAOY,KAAK;;4BAUE,KAAK;;IAE9C,mBAAmB,CAAC,YAAqB;QACvC,IAAI,YAAY,EAAE;YAChB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC3B,UAAU,CAAC;;gBAET,IAAI,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC;aAClB,EAAE,mBAAmB,CAAC,CAAC;SACzB;KACF;IAED,MAAM,iBAAiB;QACrB,uBAAA,IAAI,kCAAoB,MAAMC,aAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,MAAA,CAAC;KACnE;IAED,gBAAgB;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;KAC3B;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;QAE7C,QACEC,QAACC,UAAI,QACHD,sBAAU,KAAK,EAAE,WAAW,GAAa,EACzCA,qBACE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,CAAC,aAAa,EAAE,EAC9D,KAAK,EAAE,EAAE,uBAAuB,EAAE,GAAG,mBAAmB,IAAI,EAAE,IAE9DA,iBACE,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,KAAK,gBACE,uBAAA,IAAI,sCAAiB,CAAC,SAAS,CAAC,qBAAqB,IAEjEA;;YAEE,GAAG,EAAE,uBAAuB,EAC5B,KAAK,EAAC,qBAAqB,EAC3B,GAAG,EAAE,uBAAA,IAAI,sCAAiB,CAAC,SAAS,CAAC,2BAA2B;UAChE,CACE,EACNA,qBAAS,KAAK,EAAC,aAAa,IAC1BA,iBAAK,KAAK,EAAC,uBAAuB,IAChCA,oBAAQ,KAAK,EAAC,oBAAoB,IAChCA,iBACE,GAAG,EAAE,SAAS,EACd,GAAG,EACD,uBAAA,IAAI,sCAAiB,CAAC,SAAS,CAAC,2BAA2B,GAE7D,EACFA,gBAAI,KAAK,EAAC,mBAAmB,IAC1B,uBAAA,IAAI,sCAAiB,CAAC,SAAS,CAAC,KAAK,CACnC,CACE,EACTA,iBAAK,KAAK,EAAC,yBAAyB,IAClCA,mBACEA,kBAAM,KAAK,EAAC,SAAS,IAClB,uBAAA,IAAI,sCAAiB,CAAC,SAAS,CAAC,OAAO,EACxCA,sBAAO,IAAI,CAAC,OAAO,CAAQ,CACtB,EACPA,sBAAO,uBAAA,IAAI,sCAAiB,CAAC,SAAS,CAAC,KAAK,CAAQ,EACpDA,kCAAU,WAAW,MAAS,EAC9BA,sBACG,uBAAA,IAAI,sCAAiB,CAAC,SAAS,CAAC,iBAAiB,CAC7C,CACL,EACJA,mBAAI,uBAAA,IAAI,sCAAiB,CAAC,SAAS,CAAC,WAAW,CAAK,CAChD,CACF,CACE,CACF,CACL,EACP;KACH;;;;;;;;;;;;","names":["getAssetPath","Locale","h","Host"],"sources":["src/components/splash/splash.scss?tag=gx-ide-splash&encapsulation=shadow","src/components/splash/splash.tsx"],"sourcesContent":[":host {\n  display: grid;\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  max-inline-size: 1100px;\n  grid-template-columns: 1fr 550px;\n  background-color: var(--mer-surface__elevation--01);\n  border-radius: var(--mer-spacing--md);\n  overflow: hidden;\n  opacity: 0;\n  transition: var(--slide-fade-duration) opacity;\n\n  &--visible {\n    opacity: 1;\n  }\n\n  &__illustration {\n    overflow: hidden;\n    max-block-size: 700px;\n  }\n\n  &__copy {\n    display: grid;\n    block-size: 100%;\n    inline-size: 100%;\n    padding: var(--mer-spacing--3xl);\n  }\n\n  &__copy-container {\n    display: grid;\n    gap: var(--mer-spacing--md);\n    max-inline-size: 480px;\n    place-self: center;\n  }\n\n  &__copy-header {\n    display: grid;\n    gap: var(--mer-spacing--md);\n  }\n\n  &__copy-title {\n    font-size: var(--mer-font__size--xl);\n    color: var(--mer-text__on-surface);\n    letter-spacing: 0.02em;\n    font-weight: var(--mer-font__weight--semi-bold);\n  }\n\n  &__copy-description {\n    display: grid;\n    color: var(--mer-text__complementary);\n    gap: var(--mer-spacing--md);\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  }\n}\n","// Stencil\nimport {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  State,\n  Watch,\n  getAssetPath\n} from \"@stencil/core\";\n// Other Libraries\nimport { MercuryBundles } from \"@genexus/mercury\";\n// Custom Imports\nimport { Locale } from \"../../common/locale\";\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 SLIDE_FADE_DURATION = 300;\nconst CSS_BUNDLES: MercuryBundles = [\"resets/box-sizing\", \"utils/typography\"];\n\n@Component({\n  tag: \"gx-ide-splash\",\n  styleUrl: \"splash.scss\",\n  shadow: true,\n  assetsDirs: [\"gx-ide-assets/splash\"]\n})\nexport class GxIdeUiSplash {\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  @Element() el: HTMLGxIdeSplashElement;\n\n  /**\n   * When true the slider will be visible. Used to display and hide the slide with a smooth transition.\n   */\n  @State() splashVisible: boolean = false;\n\n  /**\n   * The copyright version. ie.: \"Salto 103300\"\n   */\n  @Prop() readonly version!: string;\n\n  /**\n   * If true, the splash with first disappear with a fade-out subtle effect, and then it will automatically be removed from the DOM.\n   */\n  @Prop() readonly removeSplash: boolean = false;\n  @Watch(\"removeSplash\")\n  removeSplashChanged(removeSplash: boolean) {\n    if (removeSplash) {\n      this.splashVisible = false;\n      setTimeout(() => {\n        // wait until the slide disappears, then remove.\n        this.el.remove();\n      }, SLIDE_FADE_DURATION);\n    }\n  }\n\n  async componentWillLoad() {\n    this.#componentLocale = await Locale.getComponentStrings(this.el);\n  }\n\n  componentDidLoad() {\n    this.splashVisible = true;\n  }\n\n  render() {\n    const currentYear = new Date().getFullYear();\n\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <section\n          class={{ \"slide\": true, \"slide--visible\": this.splashVisible }}\n          style={{ \"--slide-fade-duration\": `${SLIDE_FADE_DURATION}ms` }}\n        >\n          <div\n            class=\"slide__illustration\"\n            role=\"img\"\n            aria-label={this.#componentLocale.copyright.illustrationAriaLabel}\n          >\n            <img\n              // base image (acts like a background)\n              src={COPYRIGHTS_ILLUSTRATION}\n              class=\"slide__illustration\"\n              alt={this.#componentLocale.copyright.illustrationFigureAriaLabel}\n            />\n          </div>\n          <section class=\"slide__copy\">\n            <div class=\"slide__copy-container\">\n              <header class=\"slide__copy-header\">\n                <img\n                  src={ICON_NEXT}\n                  alt={\n                    this.#componentLocale.copyright.illustrationAlternativeText\n                  }\n                />\n                <h2 class=\"slide__copy-title\">\n                  {this.#componentLocale.copyright.title}\n                </h2>\n              </header>\n              <div class=\"slide__copy-description\">\n                <p>\n                  <span class=\"version\">\n                    {this.#componentLocale.copyright.version}\n                    <span>{this.version}</span>\n                  </span>\n                  <span>{this.#componentLocale.copyright.c1988}</span>\n                  <span> — {currentYear} </span>\n                  <span>\n                    {this.#componentLocale.copyright.allRightsReserved}\n                  </span>\n                </p>\n                <p>{this.#componentLocale.copyright.description}</p>\n              </div>\n            </div>\n          </section>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"version":3}