@soyfri/template 1.0.0 → 1.0.3

package/dist/assets/sass/vendors/react-select.scss

@@ -0,0 +1,199 @@
+$react-select-dropdown-padding: 1rem 0;
+$react-select-dropdown-option-padding: 0.75rem 1.25rem;
+$react-select-dropdown-option-margin: 0 0;
+
+// solid input styles
+.react-select-solid.react-select-styled .react-select {
+    &__control {
+        background-color: var(--#{$prefix}gray-100);
+        border-color: var(--#{$prefix}gray-100);
+        color: $input-solid-color;
+
+        &--is-disabled {
+            background-color: $form-select-disabled-bg;	
+            border-color: $form-select-disabled-border-color;
+    
+            .react-select__placeholder {
+                color: $form-select-disabled-color;
+            }
+        }
+    }
+}
+
+// transparent input styles
+.react-select-transparent.react-select-styled .react-select {
+    &__control {
+        background-color: transparent;
+        border-color: transparent;
+        color: var(--#{$prefix}gray-800);
+
+        &--is-disabled {
+            background-color: transparent !important;
+            border-color: transparent !important;
+
+            .react-select__placeholder {
+                color: $form-select-disabled-color;
+            }
+        }
+    }
+
+    &__placeholder {
+        color: var(--#{$prefix}gray-800);
+    }
+}
+
+// sm size input field
+.react-select-sm.react-select-styled .react-select {
+    &__control {
+        font-size: $input-btn-font-size-sm;
+        border-radius: 0.425rem;
+    }
+
+    &__value-container {
+        padding-top: 0.55rem;
+        padding-bottom: 0.55rem;
+        padding-left: 0.75rem;
+    }
+}
+
+// lg size input field
+.react-select-lg.react-select-styled .react-select {
+    &__control {
+        font-size: $input-btn-font-size-lg;
+        border-radius: 0.625rem;
+    }
+
+    &__value-container {
+        padding-top: 0.825rem;
+        padding-bottom: .825rem;
+        padding-left: 1.5rem;
+    }
+}
+
+// default styles
+.react-select-styled .react-select {
+    &__control {
+      --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2378829D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
+      border-color: var(--bs-gray-400);
+      width: 100% ;
+      font-size: 1.1rem ;
+      font-weight: 500 ;
+      font-family: inherit;
+      line-height: 1.5 ;
+      color: var(--bs-gray-700) ;
+      appearance: none ;
+      background-color: var(--bs-body-bg) ;
+      background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none) ;
+      background-repeat: no-repeat ;
+      background-position: right 1rem center ;
+      background-size: 16px 12px ;
+      border: 1px solid var(--bs-gray-300) ;
+      border-radius: 0.475rem ;
+      box-shadow: none;
+      transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+      border: 0;
+      box-shadow: 'none';
+
+      &--is-disabled {
+        background-color: $form-select-disabled-bg;	
+		border-color: $form-select-disabled-border-color;
+
+        .react-select__placeholder {
+            color: $form-select-disabled-color;
+        }
+      }
+
+      &--is-focused {
+        background-color: var(--#{$prefix}gray-200);
+    }
+    }
+
+    &__single-value {
+        color: var(--#{$prefix}input-color);
+        margin-left: 0px;
+    }
+
+    &__placeholder {
+        color: var(--#{$prefix}gray-500);
+    }
+  
+    &__indicator-separator {
+      display: none;
+    }
+
+    &__indicator {
+        cursor: pointer;
+        position: relative;
+        left: -26px;
+    }
+
+    &__dropdown-indicator {
+        display: none;
+    }
+  
+    &__value-container {
+      padding: 0.775rem 3rem 0.775rem 1rem ;
+      cursor: pointer;
+    }
+  
+    &__input-container {
+      padding: 0;
+      margin: 0;
+    }
+
+    &__input-container::after {
+      content: "";    
+    }
+  
+    &__menu {
+        border: 0;
+        border-radius: $dropdown-border-radius;
+        padding: $react-select-dropdown-padding;
+        background-color: var(--#{$prefix}dropdown-bg);
+        box-shadow: var(--#{$prefix}dropdown-box-shadow);
+    }
+  
+    &__option {
+        cursor: pointer;
+        color: var(--#{$prefix}gray-700);
+        transition: $transition-link;
+        padding: $react-select-dropdown-option-padding;
+        margin: $react-select-dropdown-option-margin;
+
+      &--is-selected {
+        background-color: var(--#{$prefix}component-hover-bg);
+        color: var(--#{$prefix}component-hover-color);
+        transition: $transition-link;
+        position: relative;
+
+        &:after {
+            top: 50%;
+            display: block;
+            position: absolute;
+            transform: translateY(-50%);
+            height: 0.75rem;
+            width: 0.75rem;
+            content: "";
+            @include svg-bg-icon(check, var(--#{$prefix}component-hover-color));
+            mask-position: center;					
+            right: 1.25rem;
+        }
+    }
+
+    &--is-focused:not(&--is-selected) {
+        background-color: var(--#{$prefix}component-hover-bg);
+        color: var(--#{$prefix}component-hover-color);
+        transition: $transition-link;
+        position: relative;
+      }
+    }
+
+    &__multi-value {
+        border-radius: 0.475rem;
+        background-color: var(--#{$prefix}gray-300);
+    }
+
+    &__multi-value__label {
+        color: var(--#{$prefix}gray-700);
+    }
+}

package/dist/assets/ts/_utils/DomHelpers.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.colorDarken = exports.colorLighten = exports.getAttributeValueByBreakpoint = exports.slideDown = exports.slideUp = exports.slide = exports.isMobileDevice = exports.getElementChild = exports.getElementChildren = exports.throttle = exports.isVisibleElement = exports.isElementHasClasses = exports.insertAfterElement = exports.getViewPort = exports.getScrollTop = exports.getHighestZindex = exports.getElementParents = exports.getElementOffset = exports.getElementMatches = exports.getElementIndex = exports.getElementActualWidth = exports.getElementActualHeight = exports.getElementActualCss = exports.getCSSVariableValue = exports.getCSS = exports.getBreakpoint = void 0;
-var _ElementStyleUtil_1 = require("./_ElementStyleUtil");
-var _DataUtil_1 = require("./_DataUtil");
-var ElementAnimateUtil_1 = require("./ElementAnimateUtil");
-var _TypesHelpers_1 = require("./_TypesHelpers");
+import { ElementStyleUtil } from './_ElementStyleUtil';
+import { DataUtil } from './_DataUtil';
+import { ElementAnimateUtil } from './ElementAnimateUtil';
+import { getObjectPropertyValueByKey, toJSON } from './_TypesHelpers';
 function getCSS(el, styleProp) {
-    var defaultView = (el.ownerDocument || document).defaultView;
+    const defaultView = (el.ownerDocument || document).defaultView;
     if (!defaultView) {
         return '';
     }
@@ -15,22 +12,17 @@ function getCSS(el, styleProp) {
     styleProp = styleProp.replace(/([A-Z])/g, '-$1').toLowerCase();
     return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp);
 }
-exports.getCSS = getCSS;
 function getCSSVariableValue(variableName) {
-    var hex = getComputedStyle(document.documentElement).getPropertyValue(variableName);
+    let hex = getComputedStyle(document.documentElement).getPropertyValue(variableName);
     if (hex && hex.length > 0) {
         hex = hex.trim();
     }
     return hex;
 }
-exports.getCSSVariableValue = getCSSVariableValue;
 function getElementActualCss(el, prop, cache) {
-    var css = '';
+    let css = '';
     if (!el.getAttribute('kt-hidden-' + prop) || cache === false) {
-        var value 
-        // the element is hidden so:
-        // making the el block so we can meassure its height but still be hidden
-        = void 0;
+        let value;
         // the element is hidden so:
         // making the el block so we can meassure its height but still be hidden
         css = el.style.cssText;
@@ -51,36 +43,32 @@ function getElementActualCss(el, prop, cache) {
     }
     else {
         // store it in cache
-        var attributeValue = el.getAttribute('kt-hidden-' + prop);
+        const attributeValue = el.getAttribute('kt-hidden-' + prop);
         if (attributeValue || attributeValue === '0') {
             return parseFloat(attributeValue);
         }
     }
 }
-exports.getElementActualCss = getElementActualCss;
 function getElementActualHeight(el) {
     return getElementActualCss(el, 'height', false);
 }
-exports.getElementActualHeight = getElementActualHeight;
 function getElementActualWidth(el, cache) {
     return getElementActualCss(el, 'width', false);
 }
-exports.getElementActualWidth = getElementActualWidth;
 function getElementIndex(element) {
     if (element.parentNode) {
-        var c = element.parentNode.children;
-        for (var i = 0; i < c.length; i++) {
+        const c = element.parentNode.children;
+        for (let i = 0; i < c.length; i++) {
             if (c[i] === element)
                 return i;
         }
     }
     return -1;
 }
-exports.getElementIndex = getElementIndex;
 // https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
 function getElementMatches(element, selector) {
-    var p = Element.prototype;
-    var f = p.matches || p.webkitMatchesSelector;
+    const p = Element.prototype;
+    const f = p.matches || p.webkitMatchesSelector;
     if (element && element.tagName) {
         return f.call(element, selector);
     }
@@ -88,7 +76,6 @@ function getElementMatches(element, selector) {
         return false;
     }
 }
-exports.getElementMatches = getElementMatches;
 function getElementOffset(el) {
     // Return zeros for disconnected and hidden (display: none) elements (gh-2310)
     // Support: IE <=11 only
@@ -98,8 +85,8 @@ function getElementOffset(el) {
         return { top: 0, left: 0 };
     }
     // Get document-relative position by adding viewport scroll to viewport-relative gBCR
-    var rect = el.getBoundingClientRect();
-    var win = el.ownerDocument.defaultView;
+    const rect = el.getBoundingClientRect();
+    const win = el.ownerDocument.defaultView;
     if (win) {
         return {
             top: rect.top + win.pageYOffset,
@@ -108,20 +95,19 @@ function getElementOffset(el) {
     }
     return rect;
 }
-exports.getElementOffset = getElementOffset;
 function getElementParents(element, selector) {
     // Element.matches() polyfill
     if (!Element.prototype.matches) {
         Element.prototype.matches = function (s) {
-            var matches = (document || this.ownerDocument).querySelectorAll(s);
-            var i = matches.length;
+            const matches = (document || this.ownerDocument).querySelectorAll(s);
+            let i = matches.length;
             while (--i >= 0 && matches.item(i) !== this) { }
             return i > -1;
         };
     }
     // Set up a parent array
-    var parents = [];
-    var el = element;
+    const parents = [];
+    let el = element;
     // Push each parent element to the array
     for (; el && el !== document.body; el = el.parentElement) {
         if (selector) {
@@ -135,21 +121,20 @@ function getElementParents(element, selector) {
     // Return our parent array
     return parents;
 }
-exports.getElementParents = getElementParents;
 function getHighestZindex(el) {
-    var bufferNode = el;
-    var buffer = el;
+    let bufferNode = el;
+    let buffer = el;
     while (bufferNode && bufferNode !== document) {
         // Ignore z-index if position is set to a value where z-index is ignored by the browser
         // This makes behavior of this function consistent across browsers
         // WebKit always returns auto if the element is positioned
-        var position = buffer.style.getPropertyValue('position');
+        const position = buffer.style.getPropertyValue('position');
         if (position === 'absolute' || position === 'relative' || position === 'fixed') {
             // IE returns 0 when zIndex is not specified
             // other browsers return a string
             // we ignore the case of nested elements with an explicit value of 0
             // <div style="z-index: -10;"><div style="z-index: 0;"></div></div>
-            var value = parseInt(buffer.style.getPropertyValue('z-index'));
+            const value = parseInt(buffer.style.getPropertyValue('z-index'));
             if (!isNaN(value) && value !== 0) {
                 return value;
             }
@@ -159,11 +144,9 @@ function getHighestZindex(el) {
     }
     return null;
 }
-exports.getHighestZindex = getHighestZindex;
 function getScrollTop() {
     return (document.scrollingElement || document.documentElement).scrollTop;
 }
-exports.getScrollTop = getScrollTop;
 // https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth
 function getViewPort() {
     return {
@@ -171,26 +154,21 @@ function getViewPort() {
         height: window.innerHeight,
     };
 }
-exports.getViewPort = getViewPort;
 function insertAfterElement(el, referenceNode) {
-    var _a;
-    return (_a = referenceNode.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(el, referenceNode.nextSibling);
+    return referenceNode.parentNode?.insertBefore(el, referenceNode.nextSibling);
 }
-exports.insertAfterElement = insertAfterElement;
 function isElementHasClasses(element, classesStr) {
-    var classes = classesStr.split(' ');
-    for (var i = 0; i < classes.length; i++) {
+    const classes = classesStr.split(' ');
+    for (let i = 0; i < classes.length; i++) {
         if (!element.classList.contains(classes[i])) {
             return false;
         }
     }
     return true;
 }
-exports.isElementHasClasses = isElementHasClasses;
 function isVisibleElement(element) {
     return !(element.offsetWidth === 0 && element.offsetHeight === 0);
 }
-exports.isVisibleElement = isVisibleElement;
 // Throttle function: Input as function which needs to be throttled and delay is the time interval in milliseconds
 function throttle(timer, func, delay) {
     // If setTimeout is already scheduled, no need to do anything
@@ -205,14 +183,13 @@ function throttle(timer, func, delay) {
         timer = undefined;
     }, delay);
 }
-exports.throttle = throttle;
 function getElementChildren(element, selector) {
     if (!element || !element.childNodes) {
         return null;
     }
-    var result = [];
-    for (var i = 0; i < element.childNodes.length; i++) {
-        var child = element.childNodes[i];
+    const result = [];
+    for (let i = 0; i < element.childNodes.length; i++) {
+        const child = element.childNodes[i];
         // child.nodeType == 1 => Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
         if (child.nodeType === 1 && getElementMatches(child, selector)) {
             result.push(child);
@@ -220,21 +197,18 @@ function getElementChildren(element, selector) {
     }
     return result;
 }
-exports.getElementChildren = getElementChildren;
 function getElementChild(element, selector) {
-    var children = getElementChildren(element, selector);
+    const children = getElementChildren(element, selector);
     return children ? children[0] : null;
 }
-exports.getElementChild = getElementChild;
 function isMobileDevice() {
-    var test = getViewPort().width < +getBreakpoint('lg') ? true : false;
+    let test = getViewPort().width < +getBreakpoint('lg') ? true : false;
     if (test === false) {
         // For use within normal web clients
         test = navigator.userAgent.match(/iPad/i) != null;
     }
     return test;
 }
-exports.isMobileDevice = isMobileDevice;
 function slide(el, dir, speed, callback) {
     if (!el ||
         (dir === 'up' && isVisibleElement(el) === false) ||
@@ -242,38 +216,38 @@ function slide(el, dir, speed, callback) {
         return;
     }
     speed = speed ? speed : 600;
-    var calcHeight = getElementActualHeight(el);
-    var calcPaddingTop = 0;
-    var calcPaddingBottom = 0;
-    if (_ElementStyleUtil_1.ElementStyleUtil.get(el, 'padding-top') && _DataUtil_1.DataUtil.get(el, 'slide-padding-top') !== true) {
-        _DataUtil_1.DataUtil.set(el, 'slide-padding-top', _ElementStyleUtil_1.ElementStyleUtil.get(el, 'padding-top'));
+    const calcHeight = getElementActualHeight(el);
+    let calcPaddingTop = 0;
+    let calcPaddingBottom = 0;
+    if (ElementStyleUtil.get(el, 'padding-top') && DataUtil.get(el, 'slide-padding-top') !== true) {
+        DataUtil.set(el, 'slide-padding-top', ElementStyleUtil.get(el, 'padding-top'));
     }
-    if (_ElementStyleUtil_1.ElementStyleUtil.get(el, 'padding-bottom') &&
-        _DataUtil_1.DataUtil.has(el, 'slide-padding-bottom') !== true) {
-        _DataUtil_1.DataUtil.set(el, 'slide-padding-bottom', _ElementStyleUtil_1.ElementStyleUtil.get(el, 'padding-bottom'));
+    if (ElementStyleUtil.get(el, 'padding-bottom') &&
+        DataUtil.has(el, 'slide-padding-bottom') !== true) {
+        DataUtil.set(el, 'slide-padding-bottom', ElementStyleUtil.get(el, 'padding-bottom'));
     }
-    if (_DataUtil_1.DataUtil.has(el, 'slide-padding-top')) {
-        var data = _DataUtil_1.DataUtil.get(el, 'slide-padding-top');
+    if (DataUtil.has(el, 'slide-padding-top')) {
+        const data = DataUtil.get(el, 'slide-padding-top');
         calcPaddingTop = parseInt(data);
     }
-    if (_DataUtil_1.DataUtil.has(el, 'slide-padding-bottom')) {
-        var data = _DataUtil_1.DataUtil.get(el, 'slide-padding-bottom');
+    if (DataUtil.has(el, 'slide-padding-bottom')) {
+        const data = DataUtil.get(el, 'slide-padding-bottom');
         calcPaddingBottom = parseInt(data);
     }
     if (dir === 'up') {
         // up
         el.style.cssText = 'display: block; overflow: hidden;';
         if (calcPaddingTop) {
-            ElementAnimateUtil_1.ElementAnimateUtil.animate(0, calcPaddingTop, speed, function (value) {
+            ElementAnimateUtil.animate(0, calcPaddingTop, speed, function (value) {
                 el.style.paddingTop = calcPaddingTop - value + 'px';
             });
         }
         if (calcPaddingBottom) {
-            ElementAnimateUtil_1.ElementAnimateUtil.animate(0, calcPaddingBottom, speed, function (value) {
+            ElementAnimateUtil.animate(0, calcPaddingBottom, speed, function (value) {
                 el.style.paddingBottom = calcPaddingBottom - value + 'px';
             });
         }
-        ElementAnimateUtil_1.ElementAnimateUtil.animate(0, calcHeight || 0, speed, function (value) {
+        ElementAnimateUtil.animate(0, calcHeight || 0, speed, function (value) {
             el.style.height = (calcHeight || 0) - value + 'px';
         }, function () {
             el.style.height = '';
@@ -287,7 +261,7 @@ function slide(el, dir, speed, callback) {
         // down
         el.style.cssText = 'display: block; overflow: hidden;';
         if (calcPaddingTop) {
-            ElementAnimateUtil_1.ElementAnimateUtil.animate(0, calcPaddingTop, speed, function (value) {
+            ElementAnimateUtil.animate(0, calcPaddingTop, speed, function (value) {
                 //
                 el.style.paddingTop = value + 'px';
             }, function () {
@@ -295,13 +269,13 @@ function slide(el, dir, speed, callback) {
             });
         }
         if (calcPaddingBottom) {
-            ElementAnimateUtil_1.ElementAnimateUtil.animate(0, calcPaddingBottom, speed, function (value) {
+            ElementAnimateUtil.animate(0, calcPaddingBottom, speed, function (value) {
                 el.style.paddingBottom = value + 'px';
             }, function () {
                 el.style.paddingBottom = '';
             });
         }
-        ElementAnimateUtil_1.ElementAnimateUtil.animate(0, calcHeight || 0, speed, function (value) {
+        ElementAnimateUtil.animate(0, calcHeight || 0, speed, function (value) {
             el.style.height = value + 'px';
         }, function () {
             el.style.height = '';
@@ -313,33 +287,29 @@ function slide(el, dir, speed, callback) {
         });
     }
 }
-exports.slide = slide;
 function slideUp(el, speed, callback) {
     slide(el, 'up', speed, callback);
 }
-exports.slideUp = slideUp;
 function slideDown(el, speed, callback) {
     slide(el, 'down', speed, callback);
 }
-exports.slideDown = slideDown;
 function getBreakpoint(breakpoint) {
-    var value = getCSSVariableValue('--bs-' + breakpoint);
+    let value = getCSSVariableValue('--bs-' + breakpoint);
     if (value) {
         value = parseInt(value.trim());
     }
     return value;
 }
-exports.getBreakpoint = getBreakpoint;
 function getAttributeValueByBreakpoint(incomingAttr) {
-    var value = (0, _TypesHelpers_1.toJSON)(incomingAttr);
+    const value = toJSON(incomingAttr);
     if (typeof value !== 'object') {
         return incomingAttr;
     }
-    var width = getViewPort().width;
-    var resultKey;
-    var resultBreakpoint = -1;
-    var breakpoint;
-    for (var key in value) {
+    const width = getViewPort().width;
+    let resultKey;
+    let resultBreakpoint = -1;
+    let breakpoint;
+    for (const key in value) {
         if (key === 'default') {
             breakpoint = 0;
         }
@@ -351,30 +321,28 @@ function getAttributeValueByBreakpoint(incomingAttr) {
             resultBreakpoint = breakpoint;
         }
     }
-    return resultKey ? (0, _TypesHelpers_1.getObjectPropertyValueByKey)(value, resultKey) : value;
+    return resultKey ? getObjectPropertyValueByKey(value, resultKey) : value;
 }
-exports.getAttributeValueByBreakpoint = getAttributeValueByBreakpoint;
 function colorLighten(color, amount) {
-    var addLight = function (_color, _amount) {
-        var cc = parseInt(_color, 16) + _amount;
-        var cNum = cc > 255 ? 255 : cc;
-        var c = cNum.toString(16).length > 1 ? cNum.toString(16) : "0".concat(cNum.toString(16));
+    const addLight = (_color, _amount) => {
+        const cc = parseInt(_color, 16) + _amount;
+        const cNum = cc > 255 ? 255 : cc;
+        const c = cNum.toString(16).length > 1 ? cNum.toString(16) : `0${cNum.toString(16)}`;
         return c;
     };
     color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
     amount = parseInt(((255 * amount) / 100).toString());
-    return (color = "#".concat(addLight(color.substring(0, 2), amount)).concat(addLight(color.substring(2, 4), amount)).concat(addLight(color.substring(4, 6), amount)));
+    return (color = `#${addLight(color.substring(0, 2), amount)}${addLight(color.substring(2, 4), amount)}${addLight(color.substring(4, 6), amount)}`);
 }
-exports.colorLighten = colorLighten;
 function colorDarken(color, amount) {
-    var subtractLight = function (_color, _amount) {
-        var cc = parseInt(color, 16) - amount;
-        var cNum = cc < 0 ? 0 : cc;
-        var c = cNum.toString(16).length > 1 ? cNum.toString(16) : "0".concat(cNum.toString(16));
+    const subtractLight = (_color, _amount) => {
+        const cc = parseInt(color, 16) - amount;
+        const cNum = cc < 0 ? 0 : cc;
+        const c = cNum.toString(16).length > 1 ? cNum.toString(16) : `0${cNum.toString(16)}`;
         return c;
     };
     color = color.indexOf('#') >= 0 ? color.substring(1, color.length) : color;
     amount = parseInt(((255 * amount) / 100).toString());
-    return (color = "#".concat(subtractLight(color.substring(0, 2), amount)).concat(subtractLight(color.substring(2, 4), amount)).concat(subtractLight(color.substring(4, 6), amount)));
+    return (color = `#${subtractLight(color.substring(0, 2), amount)}${subtractLight(color.substring(2, 4), amount)}${subtractLight(color.substring(4, 6), amount)}`);
 }
-exports.colorDarken = colorDarken;
+export { getBreakpoint, getCSS, getCSSVariableValue, getElementActualCss, getElementActualHeight, getElementActualWidth, getElementIndex, getElementMatches, getElementOffset, getElementParents, getHighestZindex, getScrollTop, getViewPort, insertAfterElement, isElementHasClasses, isVisibleElement, throttle, getElementChildren, getElementChild, isMobileDevice, slide, slideUp, slideDown, getAttributeValueByBreakpoint, colorLighten, colorDarken, };