qcobjects-sdk 2.4.66 → 2.5.105

package/src/ts/org.qcobjects.components.slider.ts

@@ -0,0 +1,216 @@
+/**
+ * QCObjects SDK 2.5
+ * ________________
+ *
+ * Author: Jean Machuca <correojean@gmail.com>
+ *
+ * Cross Browser Javascript Framework for MVC Patterns
+ * QuickCorp/QCObjects is licensed under the
+ * GNU Lesser General Public License v3.0
+ * [LICENSE] (https://github.com/QuickCorp/QCObjects/blob/master/LICENSE.txt)
+ *
+ * Permissions of this copyleft license are conditioned on making available
+ * complete source code of licensed works and modifications under the same
+ * license or the GNU GPLv3. Copyright and license notices must be preserved.
+ * Contributors provide an express grant of patent rights. However, a larger
+ * work using the licensed work through interfaces provided by the licensed
+ * work may be distributed under different terms and without source code for
+ * the larger work.
+ *
+ * Copyright (C) 2015 Jean Machuca,<correojean@gmail.com>
+ *
+ * Everyone is permitted to copy and distribute verbatim copies of this
+ * license document, but changing it is not allowed.
+*/
+"use strict";
+import { Package, Component } from "qcobjects";
+
+export class SlideListComponent extends Component {
+  tplsource = "inline";
+  template = "<p>Loading...</p>";
+  name = "slidelist";
+  body: any;
+
+  constructor(o: any) {
+    super(o);
+    this.body.setAttribute("controllerClass", "DataGridController");
+    const subcomponentClass = (this.body.getAttribute("subcomponentClass") !== null) ? (this.body.getAttribute("subcomponentClass")) : ("GridItemComponent");
+    this.body.setAttribute("subcomponentClass", subcomponentClass as string);
+  }
+
+}
+
+export class SlideItemComponent extends Component {
+  effectClass = "Fade";
+  name = "slider_item";
+  data: any;
+  template: string;
+  tplsource: string;
+
+  constructor(o: any) {
+    super(o);
+    this.data.slideNumber = this.data.__dataIndex + 1;
+    this.template = `
+    <div class="qcoSlides" style="display:none">
+      <div class="qco-slider__numbertext">{{slideNumber}} / {{__dataLength}}</div>
+      <img src="{{image}}" alt="{{title}}"/>
+      <div class="qco-slider__text">
+        <p>{{label}} <a href="{{link}}">{{category}}</a></p>
+      </div>
+    </div>
+    `;
+    this.tplsource = "inline";
+
+  }
+
+}
+
+export class SliderComponent extends Component {
+  name = "slider";
+  template: string;
+  tplsource: string;
+  shadowed: boolean;
+  data: any;
+  body: any;
+  __instanceID: any;
+
+  constructor(o: any) {
+    super(o);
+    this.template = `
+    <style>
+    /* Slideshow container */
+
+    :host a:hover,
+    :host a:active,
+    :host a:visited {
+      color: #ffffff;
+    }
+
+     {
+      color: #ffffff;
+    }
+
+    :host .prev {left:0;}
+    .qco-slider__container {
+      max-width: 100%;
+      position: relative;
+      margin: auto;
+      height: 300px;
+    }
+    :host .qco-slider__container .qcoSlides img {
+      object-fit: cover;
+      width: 100%;
+      height: 300px;
+    }
+
+    /* Next & previous buttons */
+    :host .prev,
+    :host .next {
+      cursor: pointer;
+      position: absolute;
+      top: 50%;
+      width: auto;
+      margin-top: -22px;
+      padding: 16px;
+      color: white;
+      font-weight: bold;
+      font-size: 18px;
+      transition: 0.6s ease;
+      border-radius: 0 3px 3px 0;
+      background-color: rgba(1, 1, 1, 0.1);
+    }
+
+    /* Position the "next button" to the right */
+    :host .next {
+      right: 0;
+      border-radius: 3px 0 0 3px;
+    }
+
+    /* On hover, add a black background color with a little bit see-through */
+    :host .prev:hover,
+    :host .next:hover {
+      background-color: rgba(0, 0, 0, 0.8);
+    }
+
+    /* Caption text */
+    :host .qco-slider__text {
+      color: #f2f2f2;
+      font-size: 15px;
+/*      padding: 8px 12px;*/
+      position: absolute;
+      bottom: 8px;
+      width: 100%;
+      text-align: center;
+      text-shadow: -1px 1px 3px #111111;
+      background-color: rgba(1,1,1,0.7);
+    }
+
+    /* Number text (1/3 etc) */
+    :host .qco-slider__numbertext {
+      color: #f2f2f2;
+      text-shadow: 0px 2px 3px #111111;
+      font-size: 12px;
+      padding: 8px 12px;
+      position: absolute;
+      top: 0;
+      padding-top: 0;
+      margin-top: 10px;
+    }
+
+    /* The dots/bullets/indicators */
+    :host .qcoSlider__dots {
+      text-align: center;
+      margin: 0 auto;
+      padding: 0;
+    }
+    :host .qcoSlider__dots--dot {
+      cursor: pointer;
+      height: 10px;
+      width: 10px;
+      margin: 0 2px;
+      background-color: #bbb;
+      border-radius: 50%;
+      display: inline-block;
+      transition: background-color 0.6s ease;
+    }
+
+    :host .active,
+    :host .qcoSlider__dots--dot:hover {
+      background-color: #717171;
+    }
+
+    :host .qco-slider__container .qcoSlides img {
+      border-radius: 30px 30px 0px 0px;
+    }
+
+    </style>
+
+    <div class="qco-slider__container">
+      <component name="slidelist" componentClass="SlideListComponent" subcomponentClass="SlideItemComponent" serviceClass="{{SERVICE_CLASS}}" ></component>
+
+      <a class="prev" onclick="global.get('{{sliderHandler}}').plusSlidesAndStop(-1)">&#10094;</a>
+      <a class="next" onclick="global.get('{{sliderHandler}}').plusSlidesAndStop(1)">&#10095;</a>
+    </div>
+    <br>
+
+    <div class="qcoSlider__dots" style="text-align:center">
+    </div>
+
+    `;
+    this.tplsource = "inline";
+    this.shadowed = true;
+    this.data.SERVICE_CLASS = this.body.getAttribute("serviceClass");
+    this.data.sliderHandler = "slider_" + this.__instanceID.toString();
+    this.body.setAttribute("controllerClass", "SliderController");
+
+  }
+
+}
+
+
+Package("org.qcobjects.components.slider", [
+  SlideListComponent,
+  SlideItemComponent,
+  SliderComponent
+
+]);

package/src/{js → ts}/org.qcobjects.components.splashscreen.ts

@@ -1,5 +1,5 @@
 /**
- * QCObjects SDK 2.4.0
+ * QCObjects SDK 2.5.0
  * ________________
  *
  * Author: Jean Machuca <correojean@gmail.com>
@@ -23,39 +23,35 @@
  * license document, but changing it is not allowed.
 */
 
-import { Package, Component, CONFIG, logger, ComponentParams, QCObjectsElement } from "qcobjects";
+"use strict";
+import { Package, Component, CONFIG, logger, global } from "qcobjects";
 import { Resize, Fade } from "./org.qcobjects.effects";
 
-const _top: any = (typeof module === "object" && typeof module.exports === "object") ? (
-  module.exports = (typeof globalThis !== "undefined"
-    ? globalThis
-    : typeof self !== "undefined"
-      ? self
-      : typeof window !== "undefined"
-        ? window
-        : typeof global !== "undefined"
-          ? global
-          : {})
-) : ((typeof global === "object") ? (global) : (
-  (typeof window === "object") ? (window) : ({})
-));
-
-// eslint-disable-next-line camelcase
-(function __splash_screen__(global) {
-  "use strict";
-  type SplashScreenParams = ComponentParams & {
+  type SplashScreenParams = {
+    name:string;
     basePath: string;
-  }
-  type MainSplashComponent = Component & {
+    data:any;
+    body:any;
+  }
+  type MainSplashComponent = {
+    body: any;
+    splashScreenComponent: any;
+    shadowed: any;
+    shadowRoot: any;
+    // eslint-disable-next-line no-unused-vars
+    addComponentHelper(arg0: () => void): unknown;
+    name:string;
     _mainPosition: string;
     _mainOpacity: string;
   }
 
-  class SplashScreenComponent extends Component {
+export class SplashScreenComponent extends Component {
     _enabled_: boolean;
     _bgcolor: string;
     cached = false;
     shadowed = true;
+    body: any;
+    shadowRoot: any;
 
     constructor(component: SplashScreenParams) {
       component.name = (typeof component.name === "undefined") ? ("splashscreen") : (component.name);
@@ -98,6 +94,7 @@ const _top: any = (typeof module === "object" && typeof module.exports === "obje
             if (!_helper_.executed) {
               const _componentRoot = (this.shadowed) ? (this.shadowRoot?.host as HTMLElement) : (this.body as HTMLElement);
               if (typeof global.componentsStack !== "undefined") {
+                 
                 global.componentsStack.filter((c: MainSplashComponent) => c.body.hasAttribute("splashscreen")).map(
                   (mainComponent: MainSplashComponent) => {
                     logger.debug(`Splash Screen of Main Component: ${mainComponent.name}`);
@@ -106,11 +103,11 @@ const _top: any = (typeof module === "object" && typeof module.exports === "obje
                       if (!(SplashScreenHandler as any).executed) {
                         const component = mainComponent.splashScreenComponent as SplashScreenComponent;
                         const mainElement = (mainComponent.shadowed) ? (mainComponent.shadowRoot?.host as HTMLElement) : (mainComponent.body as HTMLElement);
-                        mainComponent._mainPosition = (mainElement as HTMLElement).style.position;
+                        mainComponent._mainPosition = mainElement.style.position;
                         if (typeof mainElement !== "undefined") {
                           mainElement.style.position = "fixed";
                         }
-                        mainComponent._mainOpacity = (mainElement as HTMLElement).style.opacity;
+                        mainComponent._mainOpacity = mainElement.style.opacity;
                         _componentRoot.style.width = "100%";
                         _componentRoot.style.height = "100%";
                         document.body.style.backgroundColor = "#111111";
@@ -118,9 +115,10 @@ const _top: any = (typeof module === "object" && typeof module.exports === "obje
                         setTimeout(function () {
                           if (typeof _componentRoot !== "undefined") {
                             document.body.style.backgroundColor = component?._bgcolor;
-                            (_componentRoot as QCObjectsElement).subelements("#slot-logo").map((slotlogo) => {
+                            (_componentRoot as any).subelements("#slot-logo").map((slotlogo:any) => {
                               slotlogo.style.display = "block";
                               slotlogo.style.transformOrigin = "center";
+                               
                               return (new Resize()).apply(slotlogo, 1, 0);
                             });
                             (new Fade()).apply(_componentRoot, 1, 0);
@@ -151,6 +149,10 @@ const _top: any = (typeof module === "object" && typeof module.exports === "obje
       }
 
     }
+    // eslint-disable-next-line no-unused-vars
+    addComponentHelper(arg0: { (): void; executed: boolean; }) {
+      throw new Error("Method not implemented.");
+    }
 
 
   }
@@ -160,7 +162,7 @@ const _top: any = (typeof module === "object" && typeof module.exports === "obje
     SplashScreenComponent
   ]);
 
-  class VideoSplashScreenComponent extends SplashScreenComponent {
+  export class VideoSplashScreenComponent extends SplashScreenComponent {
     cached = false;
     shadowed = true;
     tplsource = "inline";
@@ -336,7 +338,7 @@ const _top: any = (typeof module === "object" && typeof module.exports === "obje
     }
   }
 
-  class CubeSplashScreenComponent extends SplashScreenComponent {
+  export class CubeSplashScreenComponent extends SplashScreenComponent {
     cached = false;
     shadowed = true;
     tplsource = "inline";
@@ -663,18 +665,8 @@ const _top: any = (typeof module === "object" && typeof module.exports === "obje
 
 
   Package("org.qcobjects.components.splashscreen", [
+    SplashScreenComponent,
     VideoSplashScreenComponent,
     CubeSplashScreenComponent
   ]);
 
-})(_top);
-
-const SplashScreenComponent = _top.SplashScreenComponent;
-const VideoSplashScreenComponent = _top.VideoSplashScreenComponent;
-const CubeSplashScreenComponent = _top.CubeSplashScreenComponent;
-
-export {
-  SplashScreenComponent,
-  VideoSplashScreenComponent,
-  CubeSplashScreenComponent
-};

package/src/ts/org.qcobjects.components.ts

@@ -0,0 +1,226 @@
+/**
+ * QCObjects SDK 2.5
+ * ________________
+ *
+ * Author: Jean Machuca <correojean@gmail.com>
+ *
+ * Cross Browser Javascript Framework for MVC Patterns
+ * QuickCorp/QCObjects is licensed under the
+ * GNU Lesser General Public License v3.0
+ * [LICENSE] (https://github.com/QuickCorp/QCObjects/blob/master/LICENSE.txt)
+ *
+ * Permissions of this copyleft license are conditioned on making available
+ * complete source code of licensed works and modifications under the same
+ * license or the GNU GPLv3. Copyright and license notices must be preserved.
+ * Contributors provide an express grant of patent rights. However, a larger
+ * work using the licensed work through interfaces provided by the licensed
+ * work may be distributed under different terms and without source code for
+ * the larger work.
+ *
+ * Copyright (C) 2015 Jean Machuca,<correojean@gmail.com>
+ *
+ * Everyone is permitted to copy and distribute verbatim copies of this
+ * license document, but changing it is not allowed.
+ */
+"use strict";
+
+import { Package, Component, _DOMCreateElement, CONFIG, New, ClassFactory, Tag, ComponentURI } from "qcobjects";
+import { ModalFade, ModalMoveDown, ModalMoveUp } from "./org.qcobjects.effects";
+import {FormField, FieldComponentParams} from "./org.qcobjects.base.components";
+export {FormField};
+
+export class ShadowedComponent extends Component {
+  container = null;
+  shadowed = true;
+  cached = false;
+  controller = null;
+  view = null;
+  data = {};
+
+  constructor(o: FieldComponentParams) {
+    o.body = _DOMCreateElement("div");
+    super(o);
+  }
+
+
+}
+
+export class ButtonField extends FormField {
+  constructor(o: FieldComponentParams) {
+    o.fieldType = "button";
+    super(o);
+  }
+}
+
+export class InputField extends FormField {
+  constructor(o: FieldComponentParams) {
+    o.fieldType = "input";
+    super(o);
+  }
+
+}
+
+export class TextField extends FormField {
+  constructor(o: FieldComponentParams) {
+    o.fieldType = "textarea";
+    super(o);
+  }
+
+}
+
+export class EmailField extends FormField {
+  constructor(o: FieldComponentParams) {
+    o.fieldType = "input";
+    super(o);
+  }
+
+}
+
+export class ModalEnclosureComponent extends Component {
+  name = "modalenclosure";
+  tplsource = "inline";
+  cached = false;
+  basePath = CONFIG.get("modalBasePath", CONFIG.get("remoteSDKPath", ""));
+  template = `
+<!-- The Modal -->
+<style>
+@import url('https://sdk.qcobjects.dev/css/modal.css');
+</style>
+<div id="modalInstance_{{modalId}}" class="modal">
+
+<!-- Modal content -->
+<div class="modal-content">
+<span class="close">&times;</span>
+{{content}}
+</div>
+
+</div>
+`;
+
+  data = {};
+  constructor(o: FieldComponentParams) {
+    o.body = _DOMCreateElement("div");
+    super(o);
+  }
+
+}
+
+export class ModalComponent extends Component {
+  name = "modal";
+  cached = false;
+  modalEnclosureComponentClass = "ModalEnclosureComponent";
+  controller = null;
+  view = null;
+  tplsource = "none";
+  closeOnClickOutside = false;
+  data = {
+    content: "",
+    modalId: 0
+  };
+
+  submodal = null;
+  __instanceID!: number;
+  basePath: any;
+  subcomponents: any;
+  body: any;
+  templateURI: any;
+
+  constructor(o: FieldComponentParams) {
+    o.basePath = CONFIG.get("modalBasePath", CONFIG.get("remoteSDKPath", ""));
+    super(o);
+    this.data.modalId = this.__instanceID;
+    const submodal = New(ClassFactory(this.modalEnclosureComponentClass), {
+      name: this.name,
+      basePath: this.basePath,
+      data: this.data
+    });
+    this.subcomponents.push(submodal);
+    this.submodal = submodal;
+    if (submodal.tplsource === "none") {
+      this.body.innerHTML = submodal.parsedAssignmentText;
+    } else {
+      this.body.append(submodal.body);
+    }
+
+  }
+
+  modal() {
+    const modalId = this.data.modalId;
+
+    Tag("#modalInstance_" + modalId + ".modal").map((modal: any) => {
+      modal.style.display = "block";
+
+      return (new ModalFade()).apply(modal, 0, 1);
+    });
+    Tag("#modalInstance_" + modalId + ".modal .modal-content").map((modalcontent: any) => {
+
+      return ModalMoveDown.apply(modalcontent, 0, -document.body.clientHeight, 0, 0);
+    });
+    Tag("#modalInstance_" + modalId + ".modal .modal-content .close").map((closebtn: any) => {
+
+      return closebtn.addEventListener("click", () => {
+        this.close();
+      }, false);
+    });
+    if (this.closeOnClickOutside) {
+      window.addEventListener("click", () => {
+        this.close();
+      }, false);
+    }
+  }
+
+  close() {
+    const modalId = this.data.modalId;
+    Tag("#modalInstance_" + modalId + ".modal").map((modal: any) => {
+      modal.style.display = "block";
+
+      return (new ModalFade({ duration: 3000 })).apply(modal, 1, 0);
+    });
+    Tag("#modalInstance_" + modalId + ".modal .modal-content").map(function (modalcontent: any) {
+
+      return ModalMoveUp.apply(modalcontent, 0, 0, 0, -document.body.clientHeight);
+    });
+    setTimeout(function () {
+      Tag("#modalInstance_" + modalId + ".modal").map((modal: any) => {
+        modal.style.display = "none";
+        return true;
+      });
+    }, 900);
+  }
+
+  rebuild() {
+    const _ret_ = super.rebuild();
+    this.templateURI = ComponentURI({
+      "COMPONENTS_BASE_PATH": CONFIG.get("componentsBasePath", ""),
+      "COMPONENT_NAME": "modal",
+      "TPLEXTENSION": CONFIG.get("tplextension", ""),
+      "TPL_SOURCE": "default" // here is always default in order to get the right uri
+    });
+
+    return _ret_; // parent call
+  }
+
+
+}
+
+export class SwaggerUIComponent extends Component {
+  cached = false;
+  basePath = CONFIG.get("remoteSDKPath", "");
+  tplextension = "tpl.html";
+  name = "swagger-ui";
+
+}
+
+
+Package("org.qcobjects.form.components", [
+  ShadowedComponent,
+  ButtonField,
+  InputField,
+  TextField,
+  EmailField,
+  ModalEnclosureComponent,
+  ModalComponent,
+  SwaggerUIComponent
+]);
+
+