@sme.up/ketchup 5.0.0 → 5.1.1

package/dist/collection/components/kup-image/assets/svg/pinterest.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24"><path d="M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z" /></svg>

package/dist/collection/components/kup-image/assets/svg/reddit.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 24 24"><path d="M14.5 15.41C14.58 15.5 14.58 15.69 14.5 15.8C13.77 16.5 12.41 16.56 12 16.56C11.61 16.56 10.25 16.5 9.54 15.8C9.44 15.69 9.44 15.5 9.54 15.41C9.65 15.31 9.82 15.31 9.92 15.41C10.38 15.87 11.33 16 12 16C12.69 16 13.66 15.87 14.1 15.41C14.21 15.31 14.38 15.31 14.5 15.41M10.75 13.04C10.75 12.47 10.28 12 9.71 12C9.14 12 8.67 12.47 8.67 13.04C8.67 13.61 9.14 14.09 9.71 14.08C10.28 14.08 10.75 13.61 10.75 13.04M14.29 12C13.72 12 13.25 12.5 13.25 13.05S13.72 14.09 14.29 14.09C14.86 14.09 15.33 13.61 15.33 13.05C15.33 12.5 14.86 12 14.29 12M22 12C22 17.5 17.5 22 12 22S2 17.5 2 12C2 6.5 6.5 2 12 2S22 6.5 22 12M18.67 12C18.67 11.19 18 10.54 17.22 10.54C16.82 10.54 16.46 10.7 16.2 10.95C15.2 10.23 13.83 9.77 12.3 9.71L12.97 6.58L15.14 7.05C15.16 7.6 15.62 8.04 16.18 8.04C16.75 8.04 17.22 7.57 17.22 7C17.22 6.43 16.75 5.96 16.18 5.96C15.77 5.96 15.41 6.2 15.25 6.55L12.82 6.03C12.75 6 12.68 6.03 12.63 6.07C12.57 6.11 12.54 6.17 12.53 6.24L11.79 9.72C10.24 9.77 8.84 10.23 7.82 10.96C7.56 10.71 7.2 10.56 6.81 10.56C6 10.56 5.35 11.21 5.35 12C5.35 12.61 5.71 13.11 6.21 13.34C6.19 13.5 6.18 13.62 6.18 13.78C6.18 16 8.79 17.85 12 17.85C15.23 17.85 17.85 16.03 17.85 13.78C17.85 13.64 17.84 13.5 17.81 13.34C18.31 13.11 18.67 12.6 18.67 12Z" /></svg>

package/dist/collection/components/kup-list/kup-list-helper.js

@@ -1,45 +1,45 @@
 import { ItemsDisplayMode, } from './kup-list-declarations';
-export function getValueOfItemByDisplayMode(item, mode, separator) {
+export function getIdOfItemByDisplayMode(item, mode, separator) {
   if (mode == ItemsDisplayMode.CODE) {
-    return item.value;
+    return item.id;
   }
   if (mode == ItemsDisplayMode.DESCRIPTION) {
-    return item.text;
+    return item.value;
   }
   if (mode == ItemsDisplayMode.DESCRIPTION_AND_CODE) {
-    return item.value + separator + item.text;
+    return item.id + separator + item.value;
   }
-  return item.value;
+  return item.id;
 }
-export function consistencyCheck(valueIn, listData, listEl, selectMode, displayMode, e) {
+export function consistencyCheck(idIn, listData, listEl, selectMode, displayMode, e) {
   const validList = !!(listEl && listData && listData['data']);
-  let value = '';
+  let id = '';
   let displayedValue = '';
   let selected = null;
   if (e != null) {
     selected = e.detail.selected;
   }
-  if (selected == null && valueIn != null && validList) {
-    selected = getItemByDisplayMode(listData, valueIn, displayMode, true);
+  if (selected == null && idIn != null && validList) {
+    selected = getItemByDisplayMode(listData, idIn, displayMode, true);
     listEl.data = [...listData['data']];
   }
-  if (selected == null && valueIn == null && listData) {
+  if (selected == null && idIn == null && listData) {
     selected = getFirstItemSelected(listData);
   }
   if (selected == null) {
     selected = {
-      text: valueIn == null ? '' : valueIn,
-      value: valueIn == null ? '' : valueIn,
+      id: idIn == null ? '' : idIn,
+      value: idIn == null ? '' : idIn,
     };
   }
-  value = getValueOfItemByDisplayMode(selected, selectMode, ' - ');
-  displayedValue = getValueOfItemByDisplayMode(selected, displayMode, ' - ');
-  const trueValue = getValueOfItemByDisplayMode(selected, ItemsDisplayMode.CODE, ' - ');
+  id = getIdOfItemByDisplayMode(selected, selectMode, ' - ');
+  displayedValue = getIdOfItemByDisplayMode(selected, displayMode, ' - ');
+  const trueValue = getIdOfItemByDisplayMode(selected, ItemsDisplayMode.CODE, ' - ');
   return {
-    value: value,
+    value: id,
     displayedValue: displayedValue,
     exists: validList &&
-      listData['data'].find((x) => x.value === trueValue)
+      listData['data'].find((x) => x.id === trueValue)
       ? true
       : false,
   };
@@ -54,7 +54,7 @@ export function getFirstItemSelected(listData) {
   }
   return null;
 }
-export function getItemByValue(listData, value, setSelected) {
+export function getItemById(listData, id, setSelected) {
   if (listData && listData['data']) {
     let found = false;
     let item = null;
@@ -63,8 +63,8 @@ export function getItemByValue(listData, value, setSelected) {
         listData['data'][i].selected = false;
       }
       if (!found &&
-        listData['data'][i].value.toString().toLowerCase() ==
-          value.toString().toLowerCase()) {
+        listData['data'][i].id.toString().toLowerCase() ==
+          id.toString().toLowerCase()) {
         item = listData['data'][i];
         item.selected = true;
         found = true;
@@ -74,8 +74,8 @@ export function getItemByValue(listData, value, setSelected) {
       return item;
     }
     for (let i = 0; i < listData['data'].length; i++) {
-      if (listData['data'][i].text.toString().toLowerCase() ==
-        value.toString().toLowerCase()) {
+      if (listData['data'][i].value.toString().toLowerCase() ==
+        id.toString().toLowerCase()) {
         item = listData['data'][i];
         item.selected = true;
         found = true;
@@ -88,18 +88,18 @@ export function getItemByValue(listData, value, setSelected) {
   }
   return null;
 }
-export function getItemByDisplayMode(listData, value, displayMode, setSelected) {
+export function getItemByDisplayMode(listData, id, displayMode, setSelected) {
   if (listData && listData['data']) {
     let found = false;
     let item = null;
     for (let i = 0; i < listData['data'].length; i++) {
-      let displayedValue = getValueOfItemByDisplayMode(listData['data'][i], displayMode, ' - ');
+      let displayedValue = getIdOfItemByDisplayMode(listData['data'][i], displayMode, ' - ');
       if (setSelected == true) {
         listData['data'][i].selected = false;
       }
       if (!found &&
         displayedValue.toString().toLowerCase() ==
-          value.toString().toLowerCase()) {
+          id.toString().toLowerCase()) {
         item = listData['data'][i];
         item.selected = true;
         found = true;
@@ -109,5 +109,5 @@ export function getItemByDisplayMode(listData, value, displayMode, setSelected)
       return item;
     }
   }
-  return getItemByValue(listData, value, setSelected);
+  return getItemById(listData, id, setSelected);
 }

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

@@ -6,7 +6,8 @@
 * @prop --kup-list-font-weight: Sets font weight of the component.
 * @prop --kup-list-group-item-height: Sets height of each list item when the list contains radio buttons or checkboxes.
 * @prop --kup-list-item-height: Sets height of each list item.
-* @prop --kup-list-item-padding: Sets padding of each list item.
+* @prop --kup-list-item-padding-left: Sets left padding of each list item.
+* @prop --kup-list-item-padding-right: Sets right padding of each list item.
 * @prop --kup-list-max-height-as-menu: Sets max height when list is menu.
 * @prop --kup-list-primary-color: Sets the primary color of the component.
 * @prop --kup-list-primary-color-rgb: Sets the RGB values of the primary color of the component (used for shaders).
@@ -24,7 +25,8 @@
   --kup_list_font_weight: var(--kup-list-font-weight, 400);
   --kup_list_group_item_height: var(--kup-list-group-item-height, 3em);
   --kup_list_item_height: var(--kup-list-item-height, 2.5em);
-  --kup_list_item_padding: var(--kup-list-item-padding, 0 0.75em);
+  --kup_list_item_padding_left: var(--kup-list-item-padding, 0.75em);
+  --kup_list_item_padding_right: var(--kup-list-item-padding, 0.75em);
   --kup_list_max_height_as_menu: var(--kup-list-max-height-as-menu, 33vh);
   --kup_list_primary_color: var(
     --kup-list-primary-color,
@@ -69,7 +71,8 @@
   align-items: center;
   -ms-flex-pack: start;
   justify-content: flex-start;
-  padding: var(--kup_list_item_padding);
+  padding-left: var(--kup_list_item_padding_left);
+  padding-right: calc( var(--kup_list_item_padding_left) + var(--kup_list_item_expand_padding, 0px) );
   overflow: hidden;
   outline: none;
   transition: background-color var(--kup_list_transition), color var(--kup_list_transition);
@@ -186,9 +189,38 @@
   user-select: none;
 }
 
+:host([nested-list]) {
+  --kup_list_item_expand_padding: 1.5em;
+  max-width: 250px;
+}
+:host([nested-list]) .kup-menu {
+  max-height: unset;
+  overflow: visible;
+}
+:host([nested-list]) kup-list {
+  display: none;
+  left: 100%;
+  position: absolute;
+  top: 0;
+}
+:host([nested-list]) .list-item {
+  overflow: visible;
+}
+:host([nested-list]) .list-item__expand-icon {
+  position: absolute;
+  right: 0;
+}
+:host([nested-list]) .list-item:hover kup-list {
+  display: block;
+}
+
 /*-------------------------------------------------*/
 /*        C o m p o n e n t   C l a s s e s        */
 /*-------------------------------------------------*/
+:host(.kup-paddingless) .list {
+  padding: 0;
+}
+
 :host(.kup-danger) {
   --kup-list-primary-color: var(--kup-danger-color);
   --kup-list-primary-color-rgb: var(--kup-danger-color-rgb);

package/dist/collection/components/kup-list/kup-list.js

@@ -9,11 +9,11 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
   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 _KupList_instances, _KupList_kupManager, _KupList_radios, _KupList_listItems, _KupList_setUnselected, _KupList_sendInfoToSubComponent, _KupList_handleSelection, _KupList_renderListItem, _KupList_getIconTag, _KupList_isMultiSelection, _KupList_isCheckBoxRule, _KupList_isRadioButtonRule, _KupList_isListBoxRule, _KupList_checkRoleType, _KupList_itemCompliant;
+var _KupList_instances, _KupList_kupManager, _KupList_radios, _KupList_listItems, _KupList_handleSelection, _KupList_isNested, _KupList_renderListItem, _KupList_getIconTag, _KupList_isMultiSelection, _KupList_isCheckBoxRule, _KupList_isRadioButtonRule, _KupList_isListBoxRule, _KupList_checkRoleType, _KupList_itemCompliant;
 import { Component, Element, Event, forceUpdate, h, Host, Listen, Method, Prop, State, } from '@stencil/core';
 import { KupListProps, KupListRole, } from './kup-list-declarations';
 import { ItemsDisplayMode } from './kup-list-declarations';
-import { getValueOfItemByDisplayMode } from './kup-list-helper';
+import { getIdOfItemByDisplayMode } from './kup-list-helper';
 import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
 import { FImage } from '../../f-components/f-image/f-image';
 import { KupThemeColorValues } from '../../managers/kup-theme/kup-theme-declarations';
@@ -162,7 +162,7 @@ export class KupList {
       this.focused === null ||
       this.focused === undefined) {
       if (this.selected.length === 1) {
-        const selectedItem = this.data.find((x) => x.value === this.selected[0]);
+        const selectedItem = this.data.find((x) => x.id === this.selected[0]);
         this.focused = this.data.indexOf(selectedItem) + 1;
       }
       else {
@@ -185,7 +185,7 @@ export class KupList {
       this.focused === null ||
       this.focused === undefined) {
       if (this.selected.length === 1) {
-        const selectedItem = this.data.find((x) => x.value === this.selected[0]);
+        const selectedItem = this.data.find((x) => x.id === this.selected[0]);
         this.focused = this.data.indexOf(selectedItem) - 1;
       }
       else {
@@ -240,7 +240,7 @@ export class KupList {
     for (let index = 0; index < this.data.length; index++) {
       const el = this.data[index];
       if (el.selected) {
-        this.selected.push(el.value);
+        this.selected.push(el.id);
       }
     }
   }
@@ -338,10 +338,10 @@ export class KupList {
       "type": "unknown",
       "mutable": true,
       "complexType": {
-        "original": "KupListData[]",
-        "resolved": "KupListData[]",
+        "original": "KupListNode[]",
+        "resolved": "KupListNode[]",
         "references": {
-          "KupListData": {
+          "KupListNode": {
             "location": "import",
             "path": "./kup-list-declarations"
           }
@@ -653,7 +653,7 @@ export class KupList {
           "Promise": {
             "location": "global"
           },
-          "KupListData": {
+          "KupListNode": {
             "location": "import",
             "path": "./kup-list-declarations"
           }
@@ -673,7 +673,7 @@ export class KupList {
           "Promise": {
             "location": "global"
           },
-          "KupListData": {
+          "KupListNode": {
             "location": "import",
             "path": "./kup-list-declarations"
           }
@@ -797,44 +797,28 @@ export class KupList {
       "passive": false
     }]; }
 }
-_KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_listItems = new WeakMap(), _KupList_instances = new WeakSet(), _KupList_setUnselected = function _KupList_setUnselected(item, index) {
-  item.selected = false;
-  __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_sendInfoToSubComponent).call(this, index, item);
-}, _KupList_sendInfoToSubComponent = function _KupList_sendInfoToSubComponent(index, item) {
-  if (__classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isRadioButtonRule).call(this)) {
-    if (__classPrivateFieldGet(this, _KupList_radios, "f")[index]) {
-      let dataTmp = [
-        {
-          value: item.value,
-          label: '',
-          checked: item.selected == true ? true : false,
-        },
-      ];
-      __classPrivateFieldGet(this, _KupList_radios, "f")[index].data = dataTmp;
-    }
-  }
-}, _KupList_handleSelection = function _KupList_handleSelection(index) {
+_KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_listItems = new WeakMap(), _KupList_instances = new WeakSet(), _KupList_handleSelection = function _KupList_handleSelection(index) {
   if (index !== null && index !== undefined && !isNaN(index)) {
     const listItems = this.rootElement.shadowRoot.querySelectorAll('.list-item');
-    const value = listItems[index].dataset.value;
-    const dataEl = this.data.find((x) => x.value === value);
+    const id = listItems[index].dataset.id;
+    const dataEl = this.data.find((x) => x.id === id);
     switch (this.roleType) {
       case KupListRole.GROUP:
-        if (this.selected.includes(value)) {
-          this.selected.splice(this.selected.indexOf(value), 1);
+        if (this.selected.includes(id)) {
+          this.selected.splice(this.selected.indexOf(id), 1);
         }
         else {
-          this.selected.push(value);
+          this.selected.push(id);
         }
         this.selected = new Array(...this.selected);
         break;
       default:
-        this.selected = new Array(value);
+        this.selected = new Array(id);
         break;
     }
     for (let index = 0; index < this.data.length; index++) {
       const item = this.data[index];
-      item.selected = this.selected.includes(item.value);
+      item.selected = this.selected.includes(item.id);
     }
     this.kupClick.emit({
       comp: this,
@@ -842,10 +826,20 @@ _KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_l
       selected: dataEl,
     });
   }
+}, _KupList_isNested = function _KupList_isNested() {
+  return this.rootElement.hasAttribute('nested-list');
 }, _KupList_renderListItem = function _KupList_renderListItem(item, index) {
   if (item.selected != true) {
     item.selected = false;
   }
+  if (!item.id) {
+    item.id = item.value;
+  }
+  let nestedList = null;
+  if (item.children && item.children.length > 0) {
+    this.rootElement.setAttribute('nested-list', '');
+    nestedList = (h("kup-list", { class: "kup-paddingless", data: item.children, isMenu: true, menuVisible: true, "nested-list": true }));
+  }
   let imageTag = undefined;
   if (this.showIcons == true &&
     item.icon != null &&
@@ -853,12 +847,12 @@ _KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_l
     imageTag = __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_getIconTag).call(this, item.icon);
   }
   let primaryTextTag = [
-    getValueOfItemByDisplayMode(item, this.displayMode, ' - '),
+    getIdOfItemByDisplayMode(item, this.displayMode, ' - '),
   ];
   let secTextTag = [];
   if (this.twoLine && item.secondaryText && item.secondaryText != '') {
     primaryTextTag = [
-      h("span", { class: "list-item__primary-text" }, item.text),
+      h("span", { class: "list-item__primary-text" }, item.value),
     ];
     secTextTag = [
       h("span", { class: "list-item__secondary-text" }, item.secondaryText),
@@ -866,7 +860,9 @@ _KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_l
   }
   let classAttr = 'list-item';
   let tabIndexAttr = item.selected == true ? '0' : '-1';
-  if (item.selected == true && __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isListBoxRule).call(this)) {
+  if (!__classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isNested).call(this) &&
+    item.selected == true &&
+    __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isListBoxRule).call(this)) {
     classAttr += ' list-item--selected';
   }
   if (this.focused === index) {
@@ -889,7 +885,7 @@ _KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_l
     ariaCheckedAttr = item.selected == true ? 'true' : 'false';
     let dataTmp = [
       {
-        value: item.value,
+        value: item.id,
         label: '',
         checked: item.selected == true ? true : false,
       },
@@ -930,13 +926,25 @@ _KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_l
   }
   vNodes.push(h("li", { ref: (el) => {
       __classPrivateFieldGet(this, _KupList_listItems, "f").push(el);
-    }, class: classAttr, role: roleAttr, tabindex: tabIndexAttr, "data-value": item.value, "aria-selected": ariaSelectedAttr, "aria-checked": ariaCheckedAttr, onBlur: !this.selectable
+    }, class: classAttr, role: roleAttr, tabindex: tabIndexAttr, "data-id": item.id, "aria-selected": ariaSelectedAttr, "aria-checked": ariaCheckedAttr, onBlur: !this.selectable
       ? (e) => e.stopPropagation()
       : () => this.onKupBlur(), onFocus: !this.selectable
       ? (e) => e.stopPropagation()
       : () => this.onKupFocus(), onClick: !this.selectable
       ? (e) => e.stopPropagation()
-      : () => this.onKupClick(index) }, innerSpanTag));
+      : __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_isNested).call(this)
+        ? (e) => {
+          e.stopPropagation();
+          this.onKupClick(index);
+        }
+        : () => this.onKupClick(index) },
+    innerSpanTag,
+    nestedList
+      ? [
+        h(FImage, { resource: "chevron-right", sizeX: "1.5em", sizeY: "1.5em", wrapperClass: "list-item__expand-icon" }),
+        nestedList,
+      ]
+      : null));
   return vNodes;
 }, _KupList_getIconTag = function _KupList_getIconTag(icon) {
   const large = this.rootElement.classList.contains('kup-large');
@@ -963,11 +971,11 @@ _KupList_kupManager = new WeakMap(), _KupList_radios = new WeakMap(), _KupList_l
     return true;
   }
   if (this.displayMode == ItemsDisplayMode.CODE) {
-    return (item.value.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0);
+    return (item.id.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0);
   }
   if (this.displayMode == ItemsDisplayMode.DESCRIPTION) {
-    return (item.text.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0);
+    return (item.value.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0);
   }
-  return (item.value.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0 ||
-    item.text.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0);
+  return (item.id.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0 ||
+    item.value.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0);
 };

package/dist/collection/components/kup-magic-box/kup-magic-box.js

@@ -1,5 +1,5 @@
 import { Component, Element, forceUpdate, h, Host, Method, Prop, State, } from '@stencil/core';
-import { kupManagerInstance, } from '../../managers/kup-manager/kup-manager';
+import { kupManagerInstance } from '../../managers/kup-manager/kup-manager';
 import { FButtonStyling } from '../../f-components/f-button/f-button-declarations';
 import { FImage } from '../../f-components/f-image/f-image';
 import { KupMagicBoxProps, KupMagicBoxDisplay, } from './kup-magic-box-declarations';
@@ -77,9 +77,9 @@ export class KupMagicBox {
     for (const key in KupMagicBoxDisplay) {
       if (Object.prototype.hasOwnProperty.call(KupMagicBoxDisplay, key)) {
         listData.push({
-          text: KupMagicBoxDisplay[key],
-          value: KupMagicBoxDisplay[key],
+          id: KupMagicBoxDisplay[key],
           selected: false,
+          value: KupMagicBoxDisplay[key],
         });
       }
     }

package/dist/collection/components/kup-nav-bar/kup-nav-bar.js

@@ -83,8 +83,8 @@ export class KupNavBar {
       }
     }
     return [
-      h("section", { class: `${navbarClass}__section ${navbarClass}__section--align-start` }, leftSlots),
-      h("section", { class: `${navbarClass}__section ${navbarClass}__section--align-end`, role: "toolbar" }, rightSlots),
+      leftSlots.length ? (h("section", { class: `${navbarClass}__section ${navbarClass}__section--align-start` }, leftSlots)) : null,
+      rightSlots.length ? (h("section", { class: `${navbarClass}__section ${navbarClass}__section--align-end`, role: "toolbar" }, rightSlots)) : null,
     ];
   }
   /*-------------------------------------------------*/

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

@@ -0,0 +1,10 @@
+/**
+ * Props of the kup-photo-frame component.
+ * Used to export every prop in an object.
+ */
+export var KupPhotoFrameProps;
+(function (KupPhotoFrameProps) {
+  KupPhotoFrameProps["customStyle"] = "Custom style of the component.";
+  KupPhotoFrameProps["placeholderAttrs"] = "Html attributes of the picture before the component enters the viewport.";
+  KupPhotoFrameProps["resourceAttrs"] = "Html attributes of the picture after the component enters the viewport.";
+})(KupPhotoFrameProps || (KupPhotoFrameProps = {}));

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

@@ -0,0 +1,70 @@
+/**
+* @prop --kup-photoframe-border: Sets the border of the component.
+* @prop --kup-photoframe-fade-out-time: Sets the time of the plcaeholder's fade out transition.
+*/
+:host {
+  --kup_photoframe_border: var(
+    --kup-photoframe-border,
+    1px inset var(--kup-border-color)
+  );
+  --kup_photoframe_fade_out_time: var(--kup-photoframe-fade-out-time, 2000ms);
+  border: var(--kup_photoframe_border);
+  display: block;
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+#kup-component {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+img {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.horizontal img {
+  width: 100%;
+}
+
+.vertical img {
+  height: 100%;
+}
+
+.placeholder {
+  display: none;
+  transition: opacity var(--kup_photoframe_fade_out_time) ease-out;
+  will-change: opacity;
+  z-index: 1;
+}
+.placeholder--loaded {
+  display: block;
+}
+.placeholder--fade-out {
+  opacity: 0;
+  position: absolute;
+}
+
+.resource {
+  display: none;
+  left: 0;
+  position: absolute;
+  top: 0;
+  z-index: 0;
+}
+.resource--fade-in {
+  display: block;
+  position: relative;
+}
+
+/*-------------------------------------------------*/
+/*        C o m p o n e n t   C l a s s e s        */
+/*-------------------------------------------------*/
+:host(.kup-fit) img {
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}