@sme.up/ketchup 5.0.0 → 5.1.1

package/dist/collection/components/kup-photo-frame/kup-photo-frame.js

@@ -0,0 +1,382 @@
+var __classPrivateFieldGet = (this && this.__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 __classPrivateFieldSet = (this && this.__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 _KupPhotoFrame_intObserver, _KupPhotoFrame_kupManager, _KupPhotoFrame_placeholderEl, _KupPhotoFrame_resourceEl, _KupPhotoFrame_renderResource, _KupPhotoFrame_wrapperEl;
+import { Component, Element, Event, forceUpdate, h, Host, Prop, State, } from '@stencil/core';
+import { Method } from '@stencil/core/internal';
+import { kupManagerInstance } from '../../managers/kup-manager/kup-manager';
+import { getProps, setProps } from '../../utils/utils';
+import { componentWrapperId } from '../../variables/GenericVariables';
+import { KupPhotoFrameProps } from './kup-photo-frame-declarations';
+export class KupPhotoFrame {
+  constructor() {
+    /*-------------------------------------------------*/
+    /*                   S t a t e s                   */
+    /*-------------------------------------------------*/
+    this.isInViewport = false;
+    /*-------------------------------------------------*/
+    /*                    P r o p s                    */
+    /*-------------------------------------------------*/
+    /**
+     * Custom style of the component.
+     * @default ""
+     * @see https://ketchup.smeup.com/ketchup-showcase/#/customization
+     */
+    this.customStyle = '';
+    /**
+     * Html attributes of the picture before the component enters the viewport.
+     * @default {}
+     */
+    this.placeholderAttrs = {};
+    /**
+     * Html attributes of the picture after the component enters the viewport.
+     * @default {}
+     */
+    this.resourceAttrs = {};
+    /**
+     * Percentage of the component dimensions entering the viewport (0.1 => 1).
+     * @default 0.25
+     */
+    this.threshold = 0.25;
+    /*-------------------------------------------------*/
+    /*       I n t e r n a l   V a r i a b l e s       */
+    /*-------------------------------------------------*/
+    _KupPhotoFrame_intObserver.set(this, null);
+    _KupPhotoFrame_kupManager.set(this, kupManagerInstance());
+    _KupPhotoFrame_placeholderEl.set(this, null);
+    _KupPhotoFrame_resourceEl.set(this, null);
+    _KupPhotoFrame_renderResource.set(this, false);
+    _KupPhotoFrame_wrapperEl.set(this, null);
+  }
+  /*-------------------------------------------------*/
+  /*           P u b l i c   M e t h o d s           */
+  /*-------------------------------------------------*/
+  /**
+   * Used to retrieve component's props values.
+   * @param {boolean} descriptions - When provided and true, the result will be the list of props with their description.
+   * @returns {Promise<GenericObject>} List of props as object, each key will be a prop.
+   */
+  async getProps(descriptions) {
+    return getProps(this, KupPhotoFrameProps, descriptions);
+  }
+  /**
+   * This method is used to trigger a new render of the component.
+   */
+  async refresh() {
+    forceUpdate(this);
+  }
+  /**
+   * Sets the props to the component.
+   * @param {GenericObject} props - Object containing props that will be set to the component.
+   */
+  async setProps(props) {
+    setProps(this, KupPhotoFrameProps, props);
+  }
+  /*-------------------------------------------------*/
+  /*           P r i v a t e   M e t h o d s         */
+  /*-------------------------------------------------*/
+  setObserver() {
+    let callback = (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          this.isInViewport = true;
+          __classPrivateFieldGet(this, _KupPhotoFrame_intObserver, "f").unobserve(this.rootElement);
+        }
+      });
+    };
+    let options = {
+      threshold: this.threshold,
+    };
+    __classPrivateFieldSet(this, _KupPhotoFrame_intObserver, new IntersectionObserver(callback, options), "f");
+  }
+  /*-------------------------------------------------*/
+  /*          L i f e c y c l e   H o o k s          */
+  /*-------------------------------------------------*/
+  componentWillLoad() {
+    __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").debug.logLoad(this, false);
+    __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").theme.register(this);
+    this.setObserver();
+  }
+  componentDidLoad() {
+    __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").debug.logLoad(this, true);
+  }
+  componentWillRender() {
+    __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").debug.logRender(this, false);
+  }
+  componentDidRender() {
+    __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").debug.logRender(this, true);
+  }
+  render() {
+    if (this.isInViewport && !__classPrivateFieldGet(this, _KupPhotoFrame_renderResource, "f")) {
+      __classPrivateFieldSet(this, _KupPhotoFrame_renderResource, true, "f");
+    }
+    return (h(Host, null,
+      h("style", null, __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").theme.setKupStyle(this.rootElement)),
+      h("div", { id: componentWrapperId, ref: (el) => {
+          __classPrivateFieldSet(this, _KupPhotoFrame_wrapperEl, el, "f");
+        } },
+        h("img", Object.assign({}, this.placeholderAttrs, { class: "placeholder", ref: (el) => (__classPrivateFieldSet(this, _KupPhotoFrame_placeholderEl, el, "f")), onLoad: () => {
+            if (__classPrivateFieldGet(this, _KupPhotoFrame_placeholderEl, "f").naturalWidth >
+              __classPrivateFieldGet(this, _KupPhotoFrame_placeholderEl, "f").naturalHeight) {
+              __classPrivateFieldGet(this, _KupPhotoFrame_wrapperEl, "f").classList.add('horizontal');
+            }
+            else {
+              __classPrivateFieldGet(this, _KupPhotoFrame_wrapperEl, "f").classList.add('vertical');
+            }
+            __classPrivateFieldGet(this, _KupPhotoFrame_intObserver, "f").observe(this.rootElement);
+            __classPrivateFieldGet(this, _KupPhotoFrame_placeholderEl, "f").classList.add('placeholder--loaded');
+            this.kupPhotoFramePlaceholderLoad.emit({
+              comp: this,
+              id: this.rootElement.id,
+            });
+          } })),
+        __classPrivateFieldGet(this, _KupPhotoFrame_renderResource, "f") ? (h("img", Object.assign({}, this.resourceAttrs, { class: "resource", ref: (el) => (__classPrivateFieldSet(this, _KupPhotoFrame_resourceEl, el, "f")), onLoad: () => {
+            __classPrivateFieldGet(this, _KupPhotoFrame_placeholderEl, "f").classList.add('placeholder--fade-out');
+            __classPrivateFieldGet(this, _KupPhotoFrame_resourceEl, "f").classList.add('resource--fade-in');
+            this.kupPhotoFrameResourceLoad.emit({
+              comp: this,
+              id: this.rootElement.id,
+            });
+          } }))) : null)));
+  }
+  disconnectedCallback() {
+    __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").theme.unregister(this);
+    __classPrivateFieldGet(this, _KupPhotoFrame_intObserver, "f").unobserve(this.rootElement);
+  }
+  static get is() { return "kup-photo-frame"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["kup-photo-frame.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["kup-photo-frame.css"]
+  }; }
+  static get properties() { return {
+    "customStyle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "\"\""
+          }, {
+            "name": "see",
+            "text": "https://ketchup.smeup.com/ketchup-showcase/#/customization"
+          }],
+        "text": "Custom style of the component."
+      },
+      "attribute": "custom-style",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "placeholderAttrs": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "GenericObject",
+        "resolved": "GenericObject",
+        "references": {
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{}"
+          }],
+        "text": "Html attributes of the picture before the component enters the viewport."
+      },
+      "defaultValue": "{}"
+    },
+    "resourceAttrs": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "GenericObject",
+        "resolved": "GenericObject",
+        "references": {
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "{}"
+          }],
+        "text": "Html attributes of the picture after the component enters the viewport."
+      },
+      "defaultValue": "{}"
+    },
+    "threshold": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "0.25"
+          }],
+        "text": "Percentage of the component dimensions entering the viewport (0.1 => 1)."
+      },
+      "attribute": "threshold",
+      "reflect": false,
+      "defaultValue": "0.25"
+    }
+  }; }
+  static get states() { return {
+    "isInViewport": {}
+  }; }
+  static get events() { return [{
+      "method": "kupPhotoFramePlaceholderLoad",
+      "name": "kup-photoframe-placeholderload",
+      "bubbles": true,
+      "cancelable": false,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Triggered when the placeholder is loaded."
+      },
+      "complexType": {
+        "original": "KupEventPayload",
+        "resolved": "KupEventPayload",
+        "references": {
+          "KupEventPayload": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        }
+      }
+    }, {
+      "method": "kupPhotoFrameResourceLoad",
+      "name": "kup-photoframe-resourceload",
+      "bubbles": true,
+      "cancelable": false,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Triggered when the resource is loaded."
+      },
+      "complexType": {
+        "original": "KupEventPayload",
+        "resolved": "KupEventPayload",
+        "references": {
+          "KupEventPayload": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        }
+      }
+    }]; }
+  static get methods() { return {
+    "getProps": {
+      "complexType": {
+        "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "descriptions - When provided and true, the result will be the list of props with their description."
+              }],
+            "text": "- When provided and true, the result will be the list of props with their description."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        },
+        "return": "Promise<GenericObject>"
+      },
+      "docs": {
+        "text": "Used to retrieve component's props values.",
+        "tags": [{
+            "name": "param",
+            "text": "descriptions - When provided and true, the result will be the list of props with their description."
+          }, {
+            "name": "returns",
+            "text": "List of props as object, each key will be a prop."
+          }]
+      }
+    },
+    "refresh": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "This method is used to trigger a new render of the component.",
+        "tags": []
+      }
+    },
+    "setProps": {
+      "complexType": {
+        "signature": "(props: GenericObject) => Promise<void>",
+        "parameters": [{
+            "tags": [{
+                "name": "param",
+                "text": "props - Object containing props that will be set to the component."
+              }],
+            "text": "- Object containing props that will be set to the component."
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "GenericObject": {
+            "location": "import",
+            "path": "../../types/GenericTypes"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets the props to the component.",
+        "tags": [{
+            "name": "param",
+            "text": "props - Object containing props that will be set to the component."
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "rootElement"; }
+}
+_KupPhotoFrame_intObserver = new WeakMap(), _KupPhotoFrame_kupManager = new WeakMap(), _KupPhotoFrame_placeholderEl = new WeakMap(), _KupPhotoFrame_resourceEl = new WeakMap(), _KupPhotoFrame_renderResource = new WeakMap(), _KupPhotoFrame_wrapperEl = new WeakMap();

package/dist/collection/components/kup-snackbar/kup-snackbar.css

@@ -5,6 +5,7 @@
   display: block;
   left: 0;
   outline: none;
+  pointer-events: none;
   position: fixed;
   transition: opacity 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms, -webkit-transform 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
   width: 100%;
@@ -37,6 +38,7 @@
 }
 .snackbar__text {
   padding: 14px 16px;
+  pointer-events: all;
   white-space: nowrap;
 }
 .snackbar__buttons {
@@ -49,11 +51,13 @@
   display: flex;
   justify-content: flex-end;
   margin-right: 8px;
+  pointer-events: all;
   width: 100%;
 }
 .snackbar__close {
   --kup-button-font-size: 11px;
   margin-left: 8px;
+  pointer-events: all;
 }
 
 @keyframes snackbar-show {

package/dist/collection/components/kup-tab-bar/kup-tab-bar.css

@@ -25,7 +25,6 @@
   );
   --kup_tabbar_tab_padding: var(--kup-tabbar-tab-padding, 0 24px);
   display: block;
-  font-family: var(--kup_tabbar_font_family);
   font-size: var(--kup_tabbar_font_size);
 }
 
@@ -67,6 +66,7 @@
   appearance: none;
   z-index: 1;
   height: var(--kup_tabbar_height);
+  font-family: var(--kup_tabbar_font_family);
   font-size: 0.875em;
   font-weight: var(--kup_tabbar_font_weight);
   letter-spacing: 0.0892857143em;

package/dist/collection/components/kup-time-picker/kup-time-picker.js

@@ -78,7 +78,7 @@ export class KupTimePicker {
   onKupTimePickerItemClick(e, value) {
     if (e != null) {
       if (value == null) {
-        value = e.detail.selected.value;
+        value = e.detail.selected.id;
       }
     }
     this.setPickerValueSelected(value);
@@ -366,11 +366,14 @@ export class KupTimePicker {
         } }));
     }
     else {
-      return (h("kup-list", { ref: (el) => (this.pickerKupEl = el), data: this.createTimeListData(this.value), "is-menu": true, "onkup-list-click": (e) => this.onKupTimePickerItemClick(e, e.detail.selected.value), id: this.rootElement.id + '_list' }));
+      return (h("kup-list", { ref: (el) => (this.pickerKupEl = el), data: this.createTimeListData(this.value), "is-menu": true, "onkup-list-click": (e) => this.onKupTimePickerItemClick(e, e.detail.selected.id), id: this.rootElement.id + '_list' }));
     }
   }
   createTimeListData(value) {
-    let listData = [];
+    const date = new Date();
+    const listData = [];
+    const totalDayMinutes = 24 * 60;
+    const itemsCount = totalDayMinutes / this.timeMinutesStep;
     let selectedTime;
     if (value == null || value.trim() == '') {
       selectedTime = new Date();
@@ -380,9 +383,6 @@ export class KupTimePicker {
         ? KupDatesFormats.ISO_TIME
         : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS);
     }
-    let totalDayMinutes = 24 * 60;
-    let itemsCount = totalDayMinutes / this.timeMinutesStep;
-    let date = new Date();
     date.setHours(0, 0, 0);
     for (let i = 0; i < itemsCount; i++) {
       let selected = false;
@@ -390,14 +390,14 @@ export class KupTimePicker {
         date.getMinutes() == selectedTime.getMinutes()) {
         selected = true;
       }
-      let text = formatTime(date, this.manageSeconds);
-      let value = formattedStringToCustomUnformattedStringTime(text, this.manageSeconds
+      const value = formatTime(date, this.manageSeconds);
+      const id = formattedStringToCustomUnformattedStringTime(value, this.manageSeconds
         ? KupDatesFormats.ISO_TIME
         : KupDatesFormats.ISO_TIME_WITHOUT_SECONDS, this.manageSeconds);
       let item = {
-        text: text,
-        value: value,
+        id: id,
         selected: selected,
+        value: value,
       };
       listData[listData.length] = item;
       date.setMinutes(date.getMinutes() + this.timeMinutesStep);