@sme.up/ketchup 9.6.3 → 9.6.5

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

@@ -108,39 +108,39 @@ export class KupLazy {
         switch (this.componentName) {
             case 'kup-button':
                 //call_to_action.svg
-                resource = (h("svg", { key: '443fa9b66f9c77621cb7a377eb920bc60c59bde9', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '89cf45ecbcd72a193b5a34c767870de6c29c12ca', d: "M42 6H6c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zm0 32H6v-6h36v6z" })));
+                resource = (h("svg", { key: 'bca5daf712b40d11abe4f3b1856385844642acf1', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'ab212455b45b78bf981309de350b4b3619a288e9', d: "M42 6H6c-2.2 0-4 1.8-4 4v28c0 2.2 1.8 4 4 4h36c2.2 0 4-1.8 4-4V10c0-2.2-1.8-4-4-4zm0 32H6v-6h36v6z" })));
                 break;
             case 'kup-card':
                 //art_track.svg
-                resource = (h("svg", { key: 'dd9f6feeb37d8a9e35e7666bad5a01891f35379d', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '63a2e64edf16b4536a0229ea2a8bcc61b5edfd34', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
+                resource = (h("svg", { key: '1e266ffe7b2568dc6caa45592e86b73c7683cc16', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '14a4eb6f9c5b6772cd26ec29aef7b470e0fe6574', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
                 break;
             case 'kup-checkbox':
                 //check_box_outline_blank.svg
-                resource = (h("svg", { key: '974137d7bdc5d82995437999b798c5b559a4dcbf', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'a74fe51dc66ed1f8780d52d99424f53cd6357877', d: "M38 10v28H10V10h28m0-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4z" })));
+                resource = (h("svg", { key: 'd553613ffa5ee60014a4e89cf8e62ace3384f3a4', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'bf5a69068bc1f2142a0d4b451cf3cdceb16d7963', d: "M38 10v28H10V10h28m0-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4V10c0-2.21-1.79-4-4-4z" })));
                 break;
             case 'kup-chart':
                 //chart-bar.svg
-                resource = (h("svg", { key: '721b36d96e2b04b83a81cf90f3cf687983ab2cec', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '58b44e235faeec04c16fd483e06f2319d06c0d46', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
+                resource = (h("svg", { key: '51f3129e31571f6e7a8faf293a6f3e35ba7524e0', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '19085e9d52b14637127c1bafdb37beb5349d2300', d: "M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" })));
                 break;
             case 'kup-data-table':
                 //table-large.svg
-                resource = (h("svg", { key: 'f3afac4818e7716418876a9aa31fccef8ec01065', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '5f65fcb7cfe13a5ceb622277c0254ea5fc10cbfd', d: "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z" })));
+                resource = (h("svg", { key: 'f7f187befb900356e7e589b3d169adff21791e35', xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "100%", height: "100%", viewBox: "0 0 24 24" }, h("path", { key: '4a53ed7568274a78be593b5ce8cd412747313725', d: "M4,3H20A2,2 0 0,1 22,5V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V5A2,2 0 0,1 4,3M4,7V10H8V7H4M10,7V10H14V7H10M20,10V7H16V10H20M4,12V15H8V12H4M4,20H8V17H4V20M10,12V15H14V12H10M10,20H14V17H10V20M20,20V17H16V20H20M20,12H16V15H20V12Z" })));
                 break;
             case 'kup-image':
                 //photo.svg
-                resource = (h("svg", { key: '9ef1ec66b4d9f1bfb857050c7675bc603a6e3c28', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'b7af93b41b90594b3796845fcdbfef1b58da2e9f', d: "M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z" })));
+                resource = (h("svg", { key: '587c27f674e8c3f153c9ed047ed605301a477621', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'e76e9b0410e3375d8d981396fdacc2f2c44dadf1', d: "M42 38V10c0-2.21-1.79-4-4-4H10c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h28c2.21 0 4-1.79 4-4zM17 27l5 6.01L29 24l9 12H10l7-9z" })));
                 break;
             case 'kup-progress-bar':
                 //linear_scale.svg
-                resource = (h("svg", { key: '927e099e9635eaa351c215038215b16c482cbb4e', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '19b0203ffa92bef2fccfab60d1d371991f27e9fe', d: "M39 19c-2.05 0-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3s-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3-2.77 0-5 2.23-5 5s2.23 5 5 5c2.05 0 3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3s3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3 2.77 0 5-2.23 5-5s-2.23-5-5-5z" })));
+                resource = (h("svg", { key: 'c7e82a2c18827a874acd6b8fe2dbcb4009ab3807', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '291ca07cfeced3bbbc92cb5ae7ac69375b640e22', d: "M39 19c-2.05 0-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3s-3.81 1.23-4.58 3h-5.84c-.77-1.77-2.53-3-4.58-3-2.77 0-5 2.23-5 5s2.23 5 5 5c2.05 0 3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3s3.81-1.23 4.58-3h5.84c.77 1.77 2.53 3 4.58 3 2.77 0 5-2.23 5-5s-2.23-5-5-5z" })));
                 break;
             case 'kup-radio':
                 //radio_button_unchecked.svg
-                resource = (h("svg", { key: '54722f3674a50a06b25d6b522b3e6c16f17bc38f', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: '4072725741e4e13718719a58a04e7b38d970474c', d: "M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" })));
+                resource = (h("svg", { key: 'd2f81e158dc86c4ef74ad7628ac376f7e0eacbe2', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'fc4ec71ff460760866b3ad99db0d8cb9b8e3cd3b', d: "M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm0 36c-8.84 0-16-7.16-16-16S15.16 8 24 8s16 7.16 16 16-7.16 16-16 16z" })));
                 break;
             default:
                 //art_track.svg
-                resource = (h("svg", { key: '6f01bf46027c471e23977744437b772389f11373', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'a06e38a7b791a7bbbfdfa214410118c354db1bba', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
+                resource = (h("svg", { key: '8da82bcc100ef628d5f4bab0a8d28c06841270ca', xmlns: "http://www.w3.org/2000/svg", width: "100%", height: "100%", viewBox: "0 0 48 48" }, h("path", { key: 'f95db9cad4ee1973048e1a121cf84a8b0ecbce99', d: "M44 26H28v-4h16v4zm0-12H28v4h16v-4zM28 34h16v-4H28v4zm-4-16v12c0 2.2-1.8 4-4 4H8c-2.2 0-4-1.8-4-4V18c0-2.2 1.8-4 4-4h12c2.2 0 4 1.8 4 4zm-3 12l-4.5-6-3.5 4.51-2.5-3.01L7 30h14z" })));
                 break;
         }
         if ((this.renderMode === KupLazyRender.VIEWPORT && this.isInViewport) ||
@@ -149,14 +149,14 @@ export class KupLazy {
                 this.data &&
                 this.isInViewport)) {
             let Tag = this.componentName;
-            content = (h(Tag, Object.assign({ key: 'b11a009ad63262e8fd26d8e672fecb829b89d190' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
+            content = (h(Tag, Object.assign({ key: 'af0853700b7bbfdcfd01f500fe303816264b387f' }, this.data, { ref: (el) => (this.lazyComponent = el) })));
             className += ' kup-loaded';
         }
         else if (this.showPlaceholder) {
             content = resource;
             className += ' kup-to-be-loaded';
         }
-        return (h(Host, { key: 'c7c2773d030703d7034705075df18657481ecbe6', class: className }, h("style", { key: 'b83be89f8a9f9b394dba345e6b764361e890c8ed' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '262125d048ac9f2d99c2f6a3ccb99f8286a35e99', id: componentWrapperId }, content)));
+        return (h(Host, { key: '66562d25373ef498b4b82bc654752c894051ce6b', class: className }, h("style", { key: '7b314d53110ba9310ee1717f3b026da85e95e04d' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '4e72e07e2acb78b1db0e0a69c8a3424ff14731ff', id: componentWrapperId }, content)));
     }
     disconnectedCallback() {
         var _a;

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

@@ -243,7 +243,7 @@ export class KupList {
         }
         __classPrivateFieldSet(this, _KupList_radios, [], "f");
         let index = 0;
-        return (h(Host, { key: '194df42c5611ef6766ef6b4a884f6984fe4bfea3' }, h("style", { key: '84d0b6b672f231a84710edacda440868e0a766f4' }, __classPrivateFieldGet(this, _KupList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'c8791b72c1f441ade671d839fd6f9d6d108822b6', id: "kup-component", class: wrapperClass }, h("ul", { key: 'e0d417a98be09879176648f4b76bf1331ac4f3e5', class: componentClass, role: roleAttr, "aria-multiselectable": ariaMultiSelectable }, this.data
+        return (h(Host, { key: '3181209e4896fb9f83feff44ad341bc1b4cd3e7c' }, h("style", { key: '360f38ea751b8b6e969629936967db8fa36efa20' }, __classPrivateFieldGet(this, _KupList_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'c66d2c82e8ce58320e9d2413825463234b206a02', id: "kup-component", class: wrapperClass }, h("ul", { key: '009e5afdbd9bd5b0ec63a1fdcb814a05a171946b', class: componentClass, role: roleAttr, "aria-multiselectable": ariaMultiSelectable }, this.data
             .filter((item) => __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_itemCompliant).call(this, item))
             .map((item) => __classPrivateFieldGet(this, _KupList_instances, "m", _KupList_renderListItem).call(this, item, index++))))));
     }

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

@@ -263,11 +263,11 @@ export class KupMagicBox {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: '79c487291987eeaa0dfd3127cd93e11bdd51a048' }, h("style", { key: '88d77f9029cbe5e112c41fad1e1a7c4fefdc06ef' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '59cbf333a260e3c2455c69d9717d088019a7ca53', id: componentWrapperId }, h("div", { key: 'e1a68e91de25ca426c7d029219fdaf98865c2a9f', class: "magic-box-wrapper" }, h("div", { key: '1db871607d685738ce9eb4ea99c7807aa0918a25', class: "actions", id: "drag-handle" }, h("kup-combobox", Object.assign({ key: '01e46100ea2c370e0079358921e8fa338434ff6e' }, this.comboboxProps())), h("kup-button", { key: '0ab7767d552bf4119db2ac2f5f69f574027eeebd', styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
+        return (h(Host, { key: '212f73b08fa30db6822a33f61dd8d10fe5e0ae5c' }, h("style", { key: 'bd8dfa094092c2b010867f98d595320d59e120e8' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '29d97585aa1a3d0c8680912289153337c2c2a23c', id: componentWrapperId }, h("div", { key: 'fc73991d493f68a37690b4b9d8dbc45ff15e9c1a', class: "magic-box-wrapper" }, h("div", { key: '7f27dcf3a8916ea1007a263cff3a1b835ce39612', class: "actions", id: "drag-handle" }, h("kup-combobox", Object.assign({ key: '2f7303dd205ad6411c73e5ec5809632b12d134ca' }, this.comboboxProps())), h("kup-button", { key: 'ef696124673192ca35f7b71138f061c6e09a3f70', styling: FButtonStyling.FLAT, icon: "delete", label: "Reset", "onkup-button-click": () => {
                 this.data = null;
-            } }), h("kup-button", { key: '26267a6c3e19b15725feda21eed43d9db3f2ddc4', id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
+            } }), h("kup-button", { key: '09d63727c8500844e614606d5417f350cb2aebed', id: "close-dialog", customStyle: `:host{${KupThemeColorValues.PRIMARY}: var(${KupThemeColorValues.TITLE});}`, icon: "clear", "onkup-button-click": () => {
                 this.kupManager.hideMagicBox();
-            } })), h("div", { key: 'd5ec68498c68b205ce2c7247cd19e01b6a283230', class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
+            } })), h("div", { key: 'aaa1d0f9e81041dfa3669bcb1222b937760c49aa', class: "content", ref: (el) => (this.wrapperRef = el) }, this.setContent())))));
     }
     disconnectedCallback() {
         this.kupManager.interact.unregister([

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

@@ -98,7 +98,7 @@ export class KupNavBar {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: 'd87202afdc46b32160433e9367e65b8911081758', class: "header" }, h("style", { key: 'f040c8ddb9a4e109be8b83c0ef434a331ffe1f28' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '12d4968317af6fecbad1f5e08a818798668d39e0', id: componentWrapperId }, h("header", { key: '4b8be98eea078116b8f166ca4b12872b51690ba8', class: `${navbarClass} ${navbarClass}--${this.styling.toLowerCase()} ` }, h("div", { key: '42939e2fa3d1ec1f19b77aa994ce49b27a942063', class: `${navbarClass}__row` }, this.content())))));
+        return (h(Host, { key: 'c0ee317aa4f4c5d7eea17e92073c2382dfed6f38', class: "header" }, h("style", { key: '48b3dec462796c406f3c492f402cd18090b780c4' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '6a4822ca6723bf9f7145db93dffe88f7781cccb3', id: componentWrapperId }, h("header", { key: '178148cbe743a0c4d9b4e41b26519f2ebb89c776', class: `${navbarClass} ${navbarClass}--${this.styling.toLowerCase()} ` }, h("div", { key: '5ee2f06ac2e4518cf6c993e0e9b09b9cf77e66ff', class: `${navbarClass}__row` }, this.content())))));
     }
     disconnectedCallback() {
         this.kupManager.language.unregister(this);

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

@@ -331,7 +331,7 @@ export class KupNumericPicker {
         this.kupManager.debug.logRender(this, true);
     }
     render() {
-        return (h(Host, { key: '00b965e54783036031219a8eb57fcb3a764c6f30' }, h("style", { key: '004fdaa3d5cf77a7364ba2114eaff76f3985e3ac' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '2d7cb3bec99e2874ca26246a091ca2c21bdf2f1e', id: componentWrapperId }, this.prepTextfield())));
+        return (h(Host, { key: '83c844a686d9a82576b8ccbbdaaf0ce61190fad4' }, h("style", { key: '9f8e8eeeeb0db1f67cdd03e0815aa3cc0126f7b0' }, this.kupManager.theme.setKupStyle(this.rootElement)), h("div", { key: '787aee96d5550a9bdb98d3d746142967456645f4', id: componentWrapperId }, this.prepTextfield())));
     }
     disconnectedCallback() {
         this.kupManager.dates.unregister(this);

package/dist/collection/components/kup-pdf/kup-pdf-declarations.js

@@ -0,0 +1,8 @@
+/**
+ * Props of the kup-pdf component.
+ * Used to export every prop in an object.
+ */
+export var KupPdfProps;
+(function (KupPdfProps) {
+    KupPdfProps["pdfPath"] = "This is the path to the PDF file.";
+})(KupPdfProps || (KupPdfProps = {}));

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

@@ -0,0 +1,169 @@
+.kup-body-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-body-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+  letter-spacing: 0.16px;
+}
+
+.kup-code-01 {
+  font-family: var(--kup-font-family-monospace);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+  letter-spacing: 0.32px;
+}
+
+.kup-caption-02 {
+  font-family: var(--kup-font-family);
+  font-size: 12px;
+  line-height: 15px;
+  font-weight: 500;
+  letter-spacing: 1px;
+}
+
+.kup-caption-01 {
+  font-family: var(--kup-font-family);
+  font-size: 10px;
+  line-height: 13px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-small-label-01 {
+  font-family: var(--kup-font-family);
+  font-size: 6px;
+  line-height: 9px;
+  font-weight: 400;
+  letter-spacing: 1px;
+}
+
+.kup-heading-compact-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-01 {
+  font-family: var(--kup-font-family);
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  letter-spacing: 0.16px;
+}
+
+.kup-heading-02 {
+  font-family: var(--kup-font-family);
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  letter-spacing: 0;
+}
+
+.kup-heading-03 {
+  font-family: var(--kup-font-family);
+  font-size: 20px;
+  line-height: 28px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-04 {
+  font-family: var(--kup-font-family);
+  font-size: 28px;
+  line-height: 36px;
+  font-weight: 400;
+  letter-spacing: 0;
+}
+
+.kup-heading-05 {
+  font-family: var(--kup-font-family);
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-06 {
+  font-family: var(--kup-font-family);
+  font-size: 42px;
+  line-height: 50px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-07 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 300;
+  letter-spacing: 0;
+}
+
+.kup-heading-08 {
+  font-family: var(--kup-font-family);
+  font-size: 54px;
+  line-height: 64px;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+/**
+* @prop --kup-pdf-height: Sets a custom height for the component.
+* @prop --kup-pdf-width: Sets a custom width for the component.
+*/
+:host {
+  --kup_pdf_height: var(--kup-pdf-height, 100%);
+  --kup_pdf_width: var(--kup-pdf-width, 100%);
+  height: var(--kup_pdf_height);
+  width: var(--kup_pdf_width);
+  display: block;
+}
+
+#kup-component {
+  height: var(--kup_pdf_height);
+  width: var(--kup_pdf_width);
+  overflow: auto;
+}
+
+#kup-component::-webkit-scrollbar {
+  width: 1.1rem;
+  height: 1.1rem;
+}
+
+#kup-component::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+#kup-component::-webkit-scrollbar-thumb {
+  border: 6px solid transparent;
+  background: rgba(0, 0, 0, 0.2);
+  background: var(--palette-black-alpha-20, rgba(0, 0, 0, 0.2));
+  border-radius: 10px;
+  background-clip: padding-box;
+}
+
+#kup-component::-webkit-scrollbar-thumb:hover {
+  border: 4px solid transparent;
+  background: rgba(0, 0, 0, 0.3);
+  background: var(--palette-black-alpha-30, rgba(0, 0, 0, 0.3));
+  background-clip: padding-box;
+}

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

@@ -0,0 +1,262 @@
+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 _KupPdf_kupManager;
+import { forceUpdate, h, Host, } from "@stencil/core";
+import { kupManagerInstance, } from "../../managers/kup-manager/kup-manager";
+import { componentWrapperId } from "../../variables/GenericVariables";
+import { getProps, setProps } from "../../utils/utils";
+import { KupPdfProps } from "./kup-pdf-declarations";
+import * as pdfjsLib from "pdfjs-dist";
+import * as pdfjsWorker from "pdfjs-dist/build/pdf.worker.js";
+export class KupPdf {
+    constructor() {
+        /*-------------------------------------------------*/
+        /*       I n t e r n a l   V a r i a b l e s       */
+        /*-------------------------------------------------*/
+        _KupPdf_kupManager.set(this, kupManagerInstance());
+        this.pdfPath = undefined;
+    }
+    /*-------------------------------------------------*/
+    /*                  W a t c h e r s                */
+    /*-------------------------------------------------*/
+    onPdfPathChange() {
+        this.wrapperRef.innerHTML = '';
+        this.renderPdf();
+    }
+    /*-------------------------------------------------*/
+    /*           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, KupPdfProps, 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, KupPdfProps, props);
+    }
+    /*-------------------------------------------------*/
+    /*          L i f e c y c l e   H o o k s          */
+    /*-------------------------------------------------*/
+    componentWillLoad() {
+        __classPrivateFieldGet(this, _KupPdf_kupManager, "f").debug.logLoad(this, false);
+        __classPrivateFieldGet(this, _KupPdf_kupManager, "f").theme.register(this);
+    }
+    componentDidLoad() {
+        this.kupReady.emit({
+            comp: this,
+            id: this.rootElement.id,
+        });
+        pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
+        this.renderPdf().then(() => {
+            __classPrivateFieldGet(this, _KupPdf_kupManager, "f").debug.logLoad(this, true);
+        });
+    }
+    componentWillRender() {
+        __classPrivateFieldGet(this, _KupPdf_kupManager, "f").debug.logRender(this, false);
+    }
+    componentDidRender() {
+        __classPrivateFieldGet(this, _KupPdf_kupManager, "f").debug.logRender(this, true);
+    }
+    async renderPdf() {
+        try {
+            const loadingPdfTask = pdfjsLib.getDocument({
+                url: this.pdfPath,
+                withCredentials: true,
+            });
+            const pdf = await loadingPdfTask.promise;
+            const pdfContainer = this.wrapperRef;
+            for (let page = 1; page <= pdf.numPages; page++) {
+                const canvas = document.createElement('canvas');
+                pdfContainer.appendChild(canvas);
+                pdf.getPage(page).then(function (page) {
+                    const requiredScale = 2; // initial scale is set to 2 so the pdf outputs clear, keeping on 1 causes the pdf to be blurry
+                    const viewport = page.getViewport({ scale: requiredScale });
+                    // set canvas height/width to upscale the pdf
+                    canvas.height = requiredScale * viewport.height;
+                    canvas.width = requiredScale * viewport.width;
+                    canvas.style.width = '100%';
+                    page.render({
+                        canvasContext: canvas.getContext('2d'),
+                        viewport: viewport,
+                        transform: [requiredScale, 0, 0, requiredScale, 0, 0],
+                    });
+                });
+            }
+        }
+        catch (error) { }
+    }
+    render() {
+        return (h(Host, { key: '51c637e689633b072188148f2a3cb6e1d7d62f00' }, h("div", { key: 'bb98286e27145e4c5f3a836161de335d6a465637', id: componentWrapperId, ref: (el) => (this.wrapperRef = el) })));
+    }
+    disconnectedCallback() {
+        __classPrivateFieldGet(this, _KupPdf_kupManager, "f").theme.unregister(this);
+    }
+    static get is() { return "kup-pdf"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kup-pdf.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kup-pdf.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "pdfPath": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "null"
+                        }],
+                    "text": "Path of the pdf document"
+                },
+                "attribute": "pdf-path",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "kupReady",
+                "name": "kup-pdf-ready",
+                "bubbles": true,
+                "cancelable": false,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggered when the component is ready."
+                },
+                "complexType": {
+                    "original": "KupEventPayload",
+                    "resolved": "KupEventPayload",
+                    "references": {
+                        "KupEventPayload": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::KupEventPayload"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getProps": {
+                "complexType": {
+                    "signature": "(descriptions?: boolean) => Promise<GenericObject>",
+                    "parameters": [{
+                            "name": "descriptions",
+                            "type": "boolean",
+                            "docs": "- When provided and true, the result will be the list of props with their description."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "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",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "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": [{
+                            "name": "props",
+                            "type": "GenericObject",
+                            "docs": "- Object containing props that will be set to the component."
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "GenericObject": {
+                            "location": "import",
+                            "path": "../../types/GenericTypes",
+                            "id": "src/types/GenericTypes.ts::GenericObject"
+                        }
+                    },
+                    "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"; }
+    static get watchers() {
+        return [{
+                "propName": "pdfPath",
+                "methodName": "onPdfPathChange"
+            }];
+    }
+}
+_KupPdf_kupManager = new WeakMap();

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

@@ -99,9 +99,9 @@ export class KupPhotoFrame {
         if (this.isInViewport && !__classPrivateFieldGet(this, _KupPhotoFrame_renderResource, "f")) {
             __classPrivateFieldSet(this, _KupPhotoFrame_renderResource, true, "f");
         }
-        return (h(Host, { key: '6c00ea47c4d5d38086cebc033c69938c21fbd2aa' }, h("style", { key: '0efdcd6f886f5dd5dd2f773e5bd1420b5c01d1f7' }, __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: 'a760ffb8b7cd901b3fb695f5bfcfcd5b09e7888f', id: componentWrapperId, ref: (el) => {
+        return (h(Host, { key: 'd6d82199e94a278a68fcd3bcb2e128f4714f7dcd' }, h("style", { key: 'ba1ceb0cd797d7a3a7808d7b2cd4849193faff42' }, __classPrivateFieldGet(this, _KupPhotoFrame_kupManager, "f").theme.setKupStyle(this.rootElement)), h("div", { key: '4701a46d03923c418672ed93098d5bde32ae38ae', id: componentWrapperId, ref: (el) => {
                 __classPrivateFieldSet(this, _KupPhotoFrame_wrapperEl, el, "f");
-            } }, h("img", Object.assign({ key: '2c2d9a4843488612240a96c16eeb6cbf30929c21' }, this.placeholderAttrs, { class: "placeholder", ref: (el) => (__classPrivateFieldSet(this, _KupPhotoFrame_placeholderEl, el, "f")), onLoad: () => {
+            } }, h("img", Object.assign({ key: '451b86c100861cb4b72cfc2575e2c7ad6da3b6ee' }, 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');

package/dist/collection/components/kup-planner/kup-planner-declarations.js

@@ -47,6 +47,8 @@ export var KupPlannerTaskAction;
     KupPlannerTaskAction["onDblClick"] = "onDblClick";
     KupPlannerTaskAction["onResize"] = "onResize";
     KupPlannerTaskAction["onRightClick"] = "onRightClick";
+    KupPlannerTaskAction["onPhase"] = "onPhase";
+    KupPlannerTaskAction["onTask"] = "onTask";
 })(KupPlannerTaskAction || (KupPlannerTaskAction = {}));
 export var KupPlannerGanttRowType;
 (function (KupPlannerGanttRowType) {
@@ -81,6 +83,7 @@ export const defaultStylingOptions = {
     barProgressSelectedColor: '#A2A415',
     barBackgroundColor: '#A2A415',
     barBackgroundSelectedColor: '#A2A415',
+    barDropZoneColor: '#4d9f0240'
 };
 export const KUP_PLANNER_MAIN_GANTT_ID = 'main';
 export const KUP_PLANNER_SECONDARY_GANTT_ID = 'secondary';