@finqu/cool 1.2.0 → 1.2.3

package/js/dist/tooltip.js

@@ -1,5 +1,5 @@
 /*!
-  * Cool UI tooltip.js v1.1.9 (https://finqu.fi)
+  * Cool UI tooltip.js v1.2.2 (https://finqu.fi)
   * Copyright 2011-2019 Finqu Oy
   * Licensed under the ISC license - (http://opensource.org/licenses/ISC)
   */

package/js/src/common.js

@@ -99,6 +99,10 @@ class Common {
                 linkDisabled = true;
             }
 
+            if (target.hasClass('table-link-exclude')) {
+                linkDisabled = true;
+            }
+
             if (target.is('td, .td, img') && !linkDisabled) {
 
                 if (e.ctrlKey || e.metaKey) {
@@ -145,6 +149,10 @@ class Common {
                 btnDisabled = true;
             }
 
+            if (target.hasClass('table-btn-exclude')) {
+                btnDisabled = true;
+            }
+
             if (target.is('td, .td, img') && !btnDisabled) {
 
                 $(btn).click();

package/js/src/dialog.js

@@ -80,6 +80,11 @@ class Dialog {
             onClose: settings.onClose
         };
 
+        if (dialog.maxBodyHeight == null) {
+
+            dialog.maxBodyHeight = window.innerHeight - 200;
+        }
+
         if (typeof dialog.template === 'function') {
 
             dialog.$el = $(dialog.template());
@@ -534,7 +539,7 @@ if (typeof $ !== 'undefined') {
         animationOut: 'fadeOut',
         animationSpeed: 'fastest',
         callbacks: {},
-        maxBodyHeight: window.innerHeight - 200,
+        maxBodyHeight: null,
         overflowVisible: false,
         faPro: false,
         debug: true,

package/js/src/dropdown.js

@@ -68,6 +68,7 @@ class Dropdown extends AbstractUIComponent {
         this.minWidth = this.$el.data('minWidth') ? this.$el.data('minWidth') : this.opts.minWidth;
         this.scroll = this.$el.data('scroll') ? this.$el.data('scroll') : this.opts.scroll;
         this.scrollContentHeight = this.$el.data('scrollContentHeight') ? this.$el.data('scrollContentHeight') : this.opts.scrollContentHeight;
+        this.positionObserver = this.$el.attr('data-position-observer') ? JSON.parse(this.$el.attr('data-position-observer')) : this.opts.positionObserver;
         this.closeOnItemClick = this.$el.data('closeOnItemClick') ? this.$el.data('closeOnItemClick') : this.opts.closeOnItemClick;
         this.content = this.$el.data('content') ? this.$el.data('content') : this.opts.content;
         this.contentOpen = false;
@@ -247,8 +248,10 @@ class Dropdown extends AbstractUIComponent {
         let dropdownTriggerHeight = this.$el.outerHeight(true);
         let dropdownTriggerPosX = this.$el.position().left;
         let dropdownTriggerPosY = this.$el.position().top;
-        let dropdownPosX;
-        let dropdownPosY;
+        let dropdownPosX = 0;
+        let dropdownPosY = 0;
+        let offsetX = 0;
+        let offsetY = 0;
 
         if (placement === 'top') {
 
@@ -283,14 +286,82 @@ class Dropdown extends AbstractUIComponent {
 
         if (this.offset) {
 
-            let offsets = this.offset.split(',')
-            let offsetX = offsets[0];
-            let offsetY = offsets[1];
+            const offsets = this.offset.split(',');
 
+            offsetX = offsets[0];
+            offsetY = offsets[1];
             dropdownPosX += parseInt(offsetX, 10);
             dropdownPosY += parseInt(offsetY, 10);
         }
 
+        if (this.positionObserver) {
+
+            // this is not set during init so we have to fetch it
+            // and let's assume that this containing parent fits and is inside
+            // viewport
+            let $containingParent = null;
+
+            do {
+                $containingParent = $containingParent ? $containingParent.parent() : this.$container.parent();
+
+                if (!$containingParent) {
+                    $containingParent = $('body');
+                    break;
+                }
+            } while ($containingParent.css('overflow-x') !== 'hidden' && $containingParent.css('overflow') !== 'hidden' && ($containingParent.prop('tagName') ? $containingParent.prop('tagName').toLowerCase() !== 'body' : false));
+
+            const containingBoundingRect = $containingParent.get(0).getBoundingClientRect();
+            const containerBoundingRect = this.$container.get(0).getBoundingClientRect();
+
+            if (containingBoundingRect.width < dropdownWidth) {
+                this.$dropdown.css('max-width', containingBoundingRect.width);
+                dropdownWidth = containingBoundingRect.width;
+            } else {
+                this.$dropdown.css('max-width', '');
+            }
+
+            if (containingBoundingRect.height < dropdownHeight) {
+                this.$dropdown.css('max-height', containingBoundingRect.height);
+                dropdownHeight = containingBoundingRect.height;
+            } else {
+                this.$dropdown.css('max-height', '');
+            }
+
+            const maxTop = Math.max(Math.abs(containingBoundingRect.y - containerBoundingRect.y), 0);
+            const maxLeft = Math.max(Math.abs(containingBoundingRect.x - containerBoundingRect.x), 0);
+            const maxRight = $containingParent.get(0).scrollWidth - (containerBoundingRect.x + containerBoundingRect.width);
+            const maxBottom = $containingParent.get(0).scrollHeight - (containerBoundingRect.y + (placement === 'dropbottom' ? containerBoundingRect.height : 0));
+
+            if (maxLeft < dropdownWidth && dropdownPosX < dropdownTriggerPosX) {
+                dropdownPosX = dropdownTriggerPosX;
+
+                // would be on top of the trigger
+                if (dropdownTriggerPosY + dropdownTriggerHeight > dropdownPosY) {
+                    dropdownPosY = dropdownTriggerPosY + dropdownTriggerHeight + (offsetY > 0 ? offsetY : 0);
+                }
+            }
+
+            if (maxRight < dropdownWidth && dropdownPosX + dropdownWidth > dropdownTriggerPosX + dropdownTriggerWidth) {
+                dropdownPosX = dropdownTriggerPosX + dropdownTriggerWidth - dropdownWidth;
+
+                if (dropdownTriggerPosY + dropdownTriggerHeight > dropdownPosY) {
+                    dropdownPosY = dropdownTriggerPosY + dropdownTriggerHeight + (offsetY > 0 ? offsetY : 0);
+                }
+            }
+
+            if (dropdownPosY < dropdownTriggerPosY && maxTop < dropdownHeight) {
+                dropdownPosY = dropdownTriggerPosY + dropdownTriggerHeight + offsetY;
+            }
+
+            if (dropdownPosY >= dropdownTriggerPosY && maxBottom < dropdownHeight) {
+                if (dropdownPosX >= dropdownTriggerPosX + dropdownTriggerWidth || dropdownTriggerPosX >= dropdownPosX + dropdownWidth) {
+                    dropdownPosY = dropdownTriggerPosY - (dropdownHeight - maxBottom);
+                } else {
+                    dropdownPosY = dropdownTriggerPosY - dropdownHeight - offsetY
+                }
+            }
+        }
+
         this.$dropdown.css({
             position: 'absolute',
             top: '0px',
@@ -427,6 +498,7 @@ if (typeof $ !== 'undefined') {
         minWidth: null,
         align: 'start',
         closeOnItemClick: true,
+        positionObserver: true,
         content: false,
         scroll: true,
         scrollContentHeight: 100,

package/js/src/select.js

@@ -132,6 +132,10 @@ class Select extends AbstractUIComponent {
             this.itemsToExclude = this.$el.data('itemsToExclude') ? this.$el.data('itemsToExclude').replace(/\s/g, '').split(',') : this.opts.itemsToExclude;
             this.preventClose = false;
 
+            if (this.itemsToExclude.length > 0) {
+                this.itemsToExclude = this.itemsToExclude.map(Number);
+            }
+
             if (this.opts.setData) {
                 this.data = this.opts.setData;
             }
@@ -140,13 +144,17 @@ class Select extends AbstractUIComponent {
                 this.data = this.$el.data('setData');
             }
 
-            this.data[this.name] = this.data[this.name].filter(function(item) {
-                return self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
-            });
+            if (typeof this.data[this.name].filter !== 'undefined' && self.itemsToExclude) {
+                this.data[this.name] = this.data[this.name].filter(function(item) {
+                    return self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
+                });
+            }
 
-            this.items = this.items.filter(function(item) {
-                return self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
-            });
+            if (typeof this.items.filter !== 'undefined' && self.itemsToExclude) {
+                this.items = this.items.filter(function(item) {
+                    return self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
+                });
+            }
 
             if (this.$el.find('.select-search').length) {
                 this.showSearch = true;
@@ -212,6 +220,7 @@ class Select extends AbstractUIComponent {
                 }
 
                 if (this.showSearch) {
+
                     this.$searchContainer = this.$select.find('.select-search');
                     this.$searchInput = this.$select.find('[name="select-search"]');
                     this.$searchIconContainer = this.$select.find('.select-search-icon');
@@ -222,6 +231,7 @@ class Select extends AbstractUIComponent {
                 }
 
                 if (this.showFooter) {
+
                     this.$footerContainer = this.$select.find('.select-footer');
                     this.$closeButton = this.$select.find('[data-select-close]');
 
@@ -334,6 +344,7 @@ class Select extends AbstractUIComponent {
 
             let el = this;
             let val = $(this).val();
+            let closeTimeout = 600; // ms
 
             self.preventClose = true;
 
@@ -348,14 +359,11 @@ class Select extends AbstractUIComponent {
                         self.data[self.name].indexOf(val) === -1 ? self.data[self.name].push(val) : false;
                         el.checked = true;
                         self.onSelect(el);
-                        self.preventClose = false;
-
-                    } else {
-
-                        setTimeout(function() {
-                            self.preventClose = false;
-                        }, 800);
                     }
+
+                    setTimeout(function() {
+                        self.preventClose = false;
+                    }, closeTimeout);
                 }, el);
 
             } else if (el.checked) {
@@ -365,7 +373,7 @@ class Select extends AbstractUIComponent {
 
                 setTimeout(function() {
                     self.preventClose = false;
-                }, 800);
+                }, closeTimeout);
 
             } else if (typeof self.confirmUncheck === 'function' && !el.checked) {
 
@@ -378,14 +386,11 @@ class Select extends AbstractUIComponent {
                         self.data[self.name] = self.data[self.name].filter(n => n != val);
                         el.checked = false;
                         self.onSelect(el);
-                        self.preventClose = false;
-
-                    } else {
-
-                        setTimeout(function() {
-                            self.preventClose = false;
-                        }, 800);
                     }
+
+                    setTimeout(function() {
+                        self.preventClose = false;
+                    }, closeTimeout);
                 }, el);
 
             } else if (!el.checked && !self.preventUncheck) {
@@ -395,7 +400,7 @@ class Select extends AbstractUIComponent {
 
                 setTimeout(function() {
                     self.preventClose = false;
-                }, 800);
+                }, closeTimeout);
 
             } else if (!el.checked && self.preventUncheck) {
 
@@ -403,7 +408,7 @@ class Select extends AbstractUIComponent {
 
                 setTimeout(function() {
                     self.preventClose = false;
-                }, 800);
+                }, closeTimeout);
             }
         });
 
@@ -569,7 +574,7 @@ class Select extends AbstractUIComponent {
                 });
 
                 items = items.filter(function(item) {
-                    return !(self.data[self.name].indexOf(item.id) > -1) && self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
+                    return self.data[self.name].indexOf(item.id) > -1 && self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1 && parseInt(item.id, 10) > 0;
                 });
 
                 let result = $(self._renderItemList(items));
@@ -682,12 +687,7 @@ class Select extends AbstractUIComponent {
                     });
 
                     items = items.filter(function(item) {
-                        return !(self.data[self.name].indexOf(item.id) > -1) && self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1;
-                    });
-
-                    // Remove id with value 0 from results
-                    items = items.filter(function(item) {
-                        return item.id > 0;
+                        return self.data[self.name].indexOf(item.id) === -1 && self.itemsToExclude.indexOf(parseInt(item.id, 10)) === -1 && parseInt(item.id, 10) > 0;
                     });
 
                     let result = $(self._renderItemList(items));
@@ -901,7 +901,7 @@ class Select extends AbstractUIComponent {
                         $input.prop('checked', true);
                         $input.addClass('checked');
 
-                        this.data[this.name].indexOf(val) === -1 ? this.data[this.name].push(val) : false;
+                        this.data[this.name].indexOf(val) === -1 ? this.data[this.name] = [val] : false;
 
                         if (this.dynamicTitle) {
                             this.$selectTitle.html($input.parent().find('[data-label]').text());

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finqu/cool",
-  "version": "1.2.0",
+  "version": "1.2.3",
   "description": "Finqu UI package",
   "main": "index.js",
   "scripts": {
@@ -40,32 +40,32 @@
   "homepage": "https://finqu.fi",
   "license": "ISC",
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
-    "@babel/preset-env": "^7.3.1",
-    "autoprefixer": "^9.4.7",
-    "babel-eslint": "^10.0.1",
-    "babel-plugin-istanbul": "^5.1.0",
+    "@babel/cli": "^7.7.0",
+    "@babel/core": "^7.7.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
+    "@babel/preset-env": "^7.7.1",
+    "autoprefixer": "^9.7.1",
+    "babel-eslint": "^10.0.3",
+    "babel-plugin-istanbul": "^5.2.0",
     "broken-link-checker": "^0.7.8",
-    "bundlesize": "^0.17.1",
-    "clean-css-cli": "^4.2.1",
-    "cross-env": "^5.2.0",
+    "bundlesize": "^0.17.2",
+    "clean-css-cli": "^4.3.0",
+    "cross-env": "^5.2.1",
     "eslint": "^5.13.0",
     "find-unused-sass-variables": "^0.3.2",
-    "glob": "^7.1.3",
-    "jquery": "^3.3.1",
-    "node-sass": "^4.11.0",
-    "nodemon": "^1.18.9",
+    "glob": "^7.1.6",
+    "jquery": "^3.4.1",
+    "node-sass": "^4.13.0",
+    "nodemon": "^1.19.4",
     "npm-run-all": "^4.1.5",
-    "postcss-cli": "^6.1.1",
-    "rollup": "^1.1.2",
-    "rollup-plugin-babel": "^4.3.2",
-    "rollup-plugin-commonjs": "^9.2.0",
-    "rollup-plugin-node-resolve": "^4.0.0",
+    "postcss-cli": "^6.1.3",
+    "rollup": "^1.26.3",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^9.3.4",
+    "rollup-plugin-node-resolve": "^4.2.4",
     "shelljs": "^0.8.3",
     "shx": "^0.3.2",
     "terser": "^3.17.0",
-    "uglify-js": "^3.4.9"
+    "uglify-js": "^3.6.8"
   }
 }

package/scss/_alert.scss

@@ -1,118 +1,115 @@
 // Alert
 // ---------------------------------------------------------------------------------------------------------------
 
+.alert-icon {
+    border-radius: 50% 50%;
+    width: 0.9em;
+    height: 0.9em;
+    border: 1px solid theme-color('primary');
+    box-sizing: border-box;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    vertical-align: middle;
+    position: relative;
+    z-index: 2;
+    background: white;
+    box-shadow: 0 0 0 0.2em fade-out(theme-color('primary'), 0.7);
+
+    .icon {
+        font-size: 0.5em;
+        color: theme-color('primary');
+    }
+}
+
+// Alert variants
+@each $color, $value in $theme-colors {
+    .alert-icon-#{$color} {
+        @include alert-icon-variant($value);
+    }
+}
+
 .alert {
     display: flex;
     flex-direction: row;
     position: relative;
-    border-left: 6px solid #fafafa;
-    border-radius: 3px;
-    margin-bottom: 20px;
-    box-shadow: 0 1px 2px #cccccc, 0 0 0 1px #eeeeee;
+    border-radius: $border-radius;
+    margin-bottom: $section-spacer;
+    box-shadow: $section-box-shadow;
     width: 100%;
     overflow: hidden;
-    align-items: center;
     box-sizing: border-box;
     position: relative;
+    padding: 0;
+    border-top: 2px solid theme-color('primary');
+    background-color: fade-out(theme-color('primary'), 0.9);
+
     @include media-breakpoint-down(sm) {
-        margin-bottom: 10px;
+        margin-bottom: $section-spacer-mobile;
     }
 
-    &:hover {
-        .alert-selector {
-            color: $link-hover-color;
+    // Icon
+    .alert-icon {
+        width: 28px;
+        height: 28px;
+        margin-top: $section-padding;
+        margin-left: $section-padding;
+        margin-right: $section-padding / 2;
+        margin-bottom: $section-padding;
+        flex-shrink: 0;
+        flex-grow: 0;
+
+        .icon {
+            font-size: 14px;
         }
     }
 
 
-    // Sizes
-    &.alert-sm {
-        & > .alert-content-container {
-            padding: 10px;
-            font-size: 80%;
-        }
-    }
+    // Content
+    .alert-content-container {
+        padding: $section-padding;
+        box-sizing: border-box;
 
-    &.alert-lg {
-        & > .alert-icon {
-            padding-left: 25px;
-            font-size: 22px;
-            &:after {
-                width: 47px;
-            }
+        .alert-content {
         }
 
-        & > .alert-content-container {
-            padding: 25px;
+        .alert-action {
+            margin-top: $section-padding;
         }
     }
 
-
-    // Icon
     .alert-icon {
-        color: $icon-color;
-        padding-left: 15px;
-        margin-left: -6px;
-        z-index: 1;
-        box-sizing: border-box;
-        font-size: 20px;
-        &:after {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            z-index: -1;
-            width: 34px;
-            background: #fafafa;
+        & + .alert-content-container {
+            .alert-content {
+                margin-top: 7px;
+            }
         }
     }
 
-
-    // Content
-    .alert-content-container {
-        display: flex;
-        align-items: center;
-        background: #fafafa;
-        flex: 1;
-        padding: 15px;
-        box-sizing: border-box;
-        @include media-breakpoint-down(sm) {
-            flex-wrap: wrap;
+    &.alert-sm {
+        .alert-icon {
+            width: 18px;
+            height: 18px;
+            margin-top: $section-padding / 2;
+            margin-left: $section-padding / 2;
+            margin-right: $section-padding / 4;
+            margin-bottom: $section-padding / 2;
         }
 
-        .alert-content {
-            flex: 1;
-            @include media-breakpoint-down(sm) {
-                flex: 0 1 auto
-            }
-            & + .alert-action {
-                margin-left: 15px;
-                @include media-breakpoint-down(sm) {
-                    margin-top: 15px;
-                    margin-left: 0;
-                }
+        .alert-content-container {
+            padding: $section-padding / 2;
+
+            .alert-action {
+                margin-top: $section-padding / 2;
             }
         }
-    }
 
-    // Alert selector
-    .alert-selector {
-        text-align: right;
-        margin-right: 15px;
-        width: 30px;
-        font-size: 22px;
-
-        &:after {
-            content: '';
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            right: 0;
-            z-index: -1;
-            width: 30px;
-            background: #fafafa;
-            padding-left: 15px;
+        .alert-icon {
+            & + .alert-content-container {
+                .alert-content {
+                    margin-top: 0;
+                }
+            }
         }
     }
 }

package/scss/_badge.scss

@@ -1,35 +1,29 @@
 // Badge
 // ---------------------------------------------------------------------------------------------------------------
-
 .badge {
     display: inline-block;
-    font-size: $badge-font-size;
-    font-weight: $badge-font-weight;
-    padding: $badge-padding-y $badge-padding-x;
-    line-height: $badge-line-height;
-    border-radius: $badge-border-radius;
-    border: none;
+    vertical-align: middle;
+    flex-direction: row;
+    position: relative;
+    border-radius: $border-radius;
+    padding: 0.2em 0.5em;
+    overflow: hidden;
     box-sizing: border-box;
-    margin: 2px;
-    text-align: center;
-    text-decoration: none;
+    position: relative;
+    border: 1px solid theme-color('primary');
+    background-color: fade-out(theme-color('primary'), 0.9);
     touch-action: manipulation;
+    text-decoration: none;
     user-select: none;
-    vertical-align: middle;
     white-space: nowrap;
+    color: theme-color('primary');
 
-    &.badge-xs {
-        font-size: $badge-xs-font-size;
-        font-weight: $badge-xs-font-weight;
-        padding: $badge-xs-padding-y $badge-xs-padding-x;
-        line-height: $badge-xs-line-height;
-    }
+    .alert-icon {
+        margin: -0.1em 0.4em 0 0;
 
-    &.badge-sm {
-        font-size: $badge-sm-font-size;
-        font-weight: $badge-sm-font-weight;
-        padding: $badge-sm-padding-y $badge-sm-padding-x;
-        line-height: $badge-sm-line-height;
+        .icon {
+            color: theme-color('primary');
+        }
     }
 }
 

package/scss/_dialog.scss

@@ -49,6 +49,7 @@
 
                 .dialog-title {
                     font-size: 20px;
+                    width: 100%;
                     @include text-truncate;
                 }
 

package/scss/_dropdown.scss

@@ -140,10 +140,7 @@
     &:active {
         color: $dropdown-link-active-color;
         text-decoration: none;
-
-        .icon {
-            color: $dropdown-link-active-bg
-        }
+        @include gradient-bg($dropdown-link-active-bg);
     }
 
     &.disabled,