ngx-sfc-common 0.0.35 → 0.0.36

package/fesm2015/ngx-sfc-common.mjs

@@ -150,6 +150,49 @@ var ItemsView;
     ItemsView["Cards"] = "cards";
 })(ItemsView || (ItemsView = {}));
 
+var Color;
+(function (Color) {
+    // white
+    Color["White_0"] = "#fff";
+    Color["White_1"] = "#e6e9ed";
+    // grey
+    Color["Grey_0"] = "#ccd1d9";
+    Color["Grey_1"] = "#aab2bd";
+    Color["Grey_2"] = "#656d78";
+    // black
+    Color["Black_0"] = "#34323d";
+    Color["Black_1"] = "#1b1d1f";
+    Color["Black_2"] = "#000";
+    // red
+    Color["Red_0"] = "#ed5565";
+    Color["Red_1"] = "#da4453";
+    // orange
+    Color["Orange_0"] = "#fc6e51";
+    Color["Orange_1"] = "#e9573f";
+    // yellow
+    Color["Yellow_0"] = "#ffce54";
+    Color["Yellow_1"] = "#fcbb42";
+    Color["Yellow_2"] = "#f8e976";
+    // green
+    Color["Green_0"] = "#a0d468";
+    Color["Green_1"] = "#8cc152";
+    Color["Green_2"] = "#48cfad";
+    Color["Green_3"] = "#37bc9b";
+    Color["Green_4"] = "#2bbbad";
+    // blue
+    Color["Blue_0"] = "#4fc1e9";
+    Color["Blue_1"] = "#3bafda";
+    Color["Blue_2"] = "#5d9cec";
+    Color["Blue_3"] = "#4a89dc";
+    // magenta
+    Color["Magenta_0"] = "#ac92ec";
+    Color["Magenta_1"] = "#967adc";
+    // pink
+    Color["Pink_0"] = "#ec87c0";
+    Color["Pink_1"] = "#d770ad";
+})(Color || (Color = {}));
+;
+
 /**
  * Create a new injection token for injecting the Document into a component.
  */
@@ -491,9 +534,11 @@ CommonConstants.EMPTY_STRING = '';
 CommonConstants.DEFAULT_KEY_VALUE = 0;
 CommonConstants.MOUSE_BUTTON_LEFT = 0;
 CommonConstants.FULL_PERCENTAGE = 100;
+CommonConstants.LOW_PERCENTAGE = 0;
 CommonConstants.COMMON_TEXT_DELIMETER = '/';
 CommonConstants.PERCENTAGE_SYMBOL = '%';
-CommonConstants.DOT = '.';
+CommonConstants.DOT = '.';
+CommonConstants.ASTERISK = '*';
 
 class DateTimeConstants {
 }
@@ -898,6 +943,21 @@ function updateItemBy(collection, predicate, newItem) {
     }
     return null;
 }
+/**
+ * Toggle item in array
+ * @param arr Array of items
+ * @param item Item to toggle
+ * @returns Toggling result array
+ */
+function toggleItem(array, item) {
+    if (hasItem(array, item)) {
+        removeItem(array, item);
+    }
+    else {
+        addItem(array, item);
+    }
+    return array;
+}
 /**
  * Return collection or empty if collection is not defined
  * @param collection Array of items
@@ -1498,44 +1558,194 @@ function stopAndPreventPropagation(event) {
 /**
  * Update property in object by key
  * @param obj Object to change
- * @param propertyKey Property to change
+ * @param key Property to change
  * @param newPropertyValue New property value
- * @param oldPropertyValue Old property value
+ * @param options Options for array types
  * @returns Updated object
  */
-function updatePropertyByKey(obj, propertyKey, newPropertyValue, oldPropertyValue) {
+function updatePropertyByKey(obj, key, newPropertyValue, options = {}) {
+    const { arrayMode = "toggle", arrayToggleValue = newPropertyValue } = options;
+    // Arrays: map recursively over items
     if (Array.isArray(obj)) {
-        return obj.map(item => {
-            return isObject(item) && item !== null
-                ? updatePropertyByKey(item, propertyKey, newPropertyValue, oldPropertyValue)
-                : item;
+        let changed = false;
+        const mapped = obj.map(item => {
+            const updated = updatePropertyByKey(item, key, newPropertyValue, options);
+            if (updated !== item)
+                changed = true;
+            return updated;
         });
-    }
-    else if (isObject(obj) && obj !== null) {
-        const updatedObj = {};
-        for (const key in obj) {
-            if (key === propertyKey) {
-                if (Array.isArray(obj[key])) {
-                    if (hasItem(obj[key], oldPropertyValue)) {
-                        removeItem(obj[key], oldPropertyValue);
+        return changed ? mapped : obj;
+    }
+    // Plain objects: iterate over keys immutably
+    if (isObject(obj)) {
+        const source = obj;
+        let changed = false;
+        const result = {};
+        for (const propertyKey of Object.keys(source)) {
+            const value = source[propertyKey];
+            if (propertyKey === key) {
+                // Matched key: apply update
+                if (Array.isArray(value)) {
+                    if (arrayMode === "toggle") {
+                        const updatedArray = toggleItem(value, arrayToggleValue);
+                        result[propertyKey] = updatedArray;
+                        if (updatedArray !== value)
+                            changed = true;
                     }
                     else {
-                        addItem(obj[key], oldPropertyValue);
+                        // replace mode
+                        if (!Array.isArray(newPropertyValue)) {
+                            throw new Error("arrayMode 'replace' requires newPropertyValue to be an array.");
+                        }
+                        const replaced = [...newPropertyValue];
+                        result[propertyKey] = replaced;
+                        changed = true;
                     }
-                    updatedObj[key] = obj[key];
                 }
                 else {
-                    updatedObj[key] = newPropertyValue;
+                    // Non-array leaf -> set to newPropertyValue
+                    result[propertyKey] = newPropertyValue;
+                    if (result[propertyKey] !== value)
+                        changed = true;
                 }
             }
             else {
-                updatedObj[key] = updatePropertyByKey(obj[key], propertyKey, newPropertyValue, oldPropertyValue);
+                // Recurse into nested values
+                const updatedVal = updatePropertyByKey(value, key, newPropertyValue, options);
+                result[propertyKey] = updatedVal;
+                if (updatedVal !== value)
+                    changed = true;
             }
         }
-        return updatedObj;
+        return changed ? result : obj;
     }
+    // Primitives or non-plain objects (Date, Map, etc.): return as-is
     return obj;
 }
+/**
+ * Update property in object by path
+ * @param obj Object to change
+ * @param path Property to change
+ * @param newPropertyValue New property value
+ * @param previousPropertyValue New property value
+ * @param options Options for array types
+ * @returns Updated object
+ */
+function updatePropertyByPath(obj, path, newPropertyValue, previousPropertyValue, options = {}) {
+    const { arrayMode = "toggle" } = options;
+    const segments = Array.isArray(path) ? path : _pathToSegments(path);
+    /**
+    * Parses a path string like:
+    *  - "a.b.c"
+    *  - "a.b[0].c"
+    *  - "items[*].tags"
+    * into segments: ["a","b",0,"c"] or ["items","*", "tags"]
+    *
+    * Supported:
+    *  - Dot notation
+    *  - Bracket numbers: [0]
+    *  - Wildcard: [*] or .* (as a segment "*")
+    *
+    * Not supported:
+    *  - Quoted property names in brackets (e.g., ["foo bar"])
+    *  - Escaped dots in keys
+    * @param path Property path
+    * @returns Path segments
+    */
+    function _pathToSegments(path) {
+        // Normalize brackets to dot form (e.g., a[0].b -> a.0.b, a[*].b -> a.*.b)
+        const normalized = path
+            .replace(/\[(\d+)\]/g, ".$1")
+            .replace(/\[\*\]/g, ".*");
+        const rawSegments = normalized.split(".").filter(s => s.length > 0);
+        return rawSegments.map(seg => {
+            if (seg === "*")
+                return "*";
+            const n = Number(seg);
+            if (!Number.isNaN(n) && seg.trim() !== "" && String(n) === seg) {
+                return n;
+            }
+            return seg;
+        });
+    }
+    function _apply(current, remaining) {
+        // Base: reached target path
+        if (remaining.length === 0) {
+            if (Array.isArray(current)) {
+                if (arrayMode === "toggle") {
+                    return toggleItem(current, previousPropertyValue);
+                }
+                // replace mode
+                if (!Array.isArray(newPropertyValue)) {
+                    throw new Error("arrayMode 'replace' requires newPropertyValue to be an array.");
+                }
+                return [...newPropertyValue];
+            }
+            // Non-array leaf -> set to newPropertyValue
+            return newPropertyValue;
+        }
+        const [seg, ...rest] = remaining;
+        // Wildcard handling
+        if (seg === "*") {
+            if (Array.isArray(current)) {
+                // Map each element
+                return current.map(item => _apply(item, rest));
+            }
+            if (isObject(current)) {
+                const objCurr = current;
+                const result = {};
+                for (const key of Object.keys(objCurr)) {
+                    result[key] = _apply(objCurr[key], rest);
+                }
+                return result;
+            }
+            // If not object/array, nothing to expand -> return as-is
+            return current;
+        }
+        // Numeric index -> navigate arrays
+        if (typeof seg === "number") {
+            if (!Array.isArray(current)) {
+                // Path expects array here, but current isn't an array => no-op
+                return current;
+            }
+            const arr = current;
+            if (seg < 0 || seg >= arr.length) {
+                // Out of bounds -> no-op (alternatively, you could extend the array)
+                return current;
+            }
+            const updatedItem = _apply(arr[seg], rest);
+            if (updatedItem === arr[seg]) {
+                return current; // no structural change
+            }
+            const newArr = arr.slice();
+            newArr[seg] = updatedItem;
+            return newArr;
+        }
+        // String key -> navigate objects
+        if (isObject(current)) {
+            const objCurr = current;
+            const nextVal = objCurr[seg];
+            const updatedVal = _apply(nextVal, rest);
+            if (updatedVal === nextVal) {
+                return current; // no structural change
+            }
+            return Object.assign(Object.assign({}, objCurr), { [seg]: updatedVal });
+        }
+        // If we cannot traverse further (e.g., null, primitive, or array when expecting object) -> no-op
+        return current;
+    }
+    return _apply(obj, segments);
+}
+/**
+ * Get changed property key
+ * @param previous Previous value
+ * @param current Currency value
+ * @returns Key of property that was changed
+ */
+function findChangedPropertyKey(previous, current) {
+    const path = findChangedPropertyPath(previous, current), parts = path === null || path === void 0 ? void 0 : path.split('.');
+    return parts && parts.length ? parts[parts.length - 1] : undefined;
+}
 /**
  * Get changed property path
  * @param previous Previous value
@@ -1560,16 +1770,6 @@ function findChangedPropertyPath(previous, current, parentKey = '') {
     }
     return null;
 }
-/**
- * Get changed property key
- * @param previous Previous value
- * @param current Currency value
- * @returns Key of property that was changed
- */
-function findChangedPropertyKey(previous, current) {
-    const path = findChangedPropertyPath(previous, current), parts = path === null || path === void 0 ? void 0 : path.split('.');
-    return parts && parts.length ? parts[parts.length - 1] : undefined;
-}
 /**
  * Clone object without any reference
  * @param value  Object to clone
@@ -3129,10 +3329,10 @@ class PaginationComponent {
     }
 }
 PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, deps: [{ token: PaginationService }], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "sfc-pagination", inputs: { count: "count", full: "full", limits: "limits", page: "page", total: "total", size: "size" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"model.any\">\r\n        <li [sfcShowHideElement]=\"model.previousPage\" (click)=\"onPageClick(model.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"model.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"model.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of model.range\" (click)=\"model.page !== page && onPageClick(page)\">\r\n            <button [class.active]=\"model.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"model.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"model.lastPage\" (click)=\"onPageClick(model.total)\">\r\n            <button>{{model.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"model.nextPage\" (click)=\"onPageClick(model.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{transition:color .5s ease;background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{transition:color .5s ease;outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{transition:background .5s ease;border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active){transition:color .5s ease}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{transition:background .5s ease;color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }] });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginationComponent, selector: "sfc-pagination", inputs: { count: "count", full: "full", limits: "limits", page: "page", total: "total", size: "size" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"model.any\">\r\n        <li [sfcShowHideElement]=\"model.previousPage\" (click)=\"onPageClick(model.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"model.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"model.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of model.range\" (click)=\"model.page !== page && onPageClick(page)\">\r\n            <button [class.active]=\"model.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"model.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"model.lastPage\" (click)=\"onPageClick(model.total)\">\r\n            <button>{{model.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"model.nextPage\" (click)=\"onPageClick(model.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1em;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{transition:color .5s ease;background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{transition:color .5s ease;outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{transition:background .5s ease;border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active){transition:color .5s ease}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{transition:background .5s ease;color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-pagination', template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"model.any\">\r\n        <li [sfcShowHideElement]=\"model.previousPage\" (click)=\"onPageClick(model.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"model.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"model.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of model.range\" (click)=\"model.page !== page && onPageClick(page)\">\r\n            <button [class.active]=\"model.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"model.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"model.lastPage\" (click)=\"onPageClick(model.total)\">\r\n            <button>{{model.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"model.nextPage\" (click)=\"onPageClick(model.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{transition:color .5s ease;background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{transition:color .5s ease;outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{transition:background .5s ease;border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active){transition:color .5s ease}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{transition:background .5s ease;color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"] }]
+            args: [{ selector: 'sfc-pagination', template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <ul *ngIf=\"model.any\">\r\n        <li [sfcShowHideElement]=\"model.previousPage\" (click)=\"onPageClick(model.previous)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronLeft\"></fa-icon>\r\n            </button>\r\n        </li>\r\n        <li *ngIf=\"model.firstPage\" (click)=\"onPageClick(1)\">\r\n            <button>1</button>\r\n        </li>\r\n        <li *ngIf=\"model.firstPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngFor=\"let page of model.range\" (click)=\"model.page !== page && onPageClick(page)\">\r\n            <button [class.active]=\"model.page === page\">{{page}}</button>\r\n        </li>\r\n        <li *ngIf=\"model.lastPage\">\r\n            <span>...</span>\r\n        </li>\r\n        <li *ngIf=\"model.lastPage\" (click)=\"onPageClick(model.total)\">\r\n            <button>{{model.total}}</button>\r\n        </li>\r\n        <li [sfcShowHideElement]=\"model.nextPage\" (click)=\"onPageClick(model.next)\">\r\n            <button class=\"limit\">\r\n                <fa-icon [icon]=\"faChevronRight\"></fa-icon>\r\n            </button>\r\n        </li>\r\n    </ul>\r\n    <sfc-delimeter></sfc-delimeter>\r\n</div>", styles: [":host{width:100%;display:inline-block}:host .container{position:relative;text-align:center}:host .container ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1em;-webkit-user-select:none;user-select:none}:host .container ul li{display:block;float:left;padding:.31em}:host .container ul li:first-child{border:none}:host .container ul li button,:host .container ul li span{transition:color .5s ease;background:none;border:none;border-radius:50%;box-sizing:border-box;display:block;font-size:1em;height:2.5em;min-width:2.5em;line-height:2.5em;padding:0}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button,:host .container ul li span,:host-context(.sfc-default-theme) :host .container ul li span{color:#0009}:host-context(.sfc-dark-theme) :host .container ul li button,:host-context(.sfc-dark-theme) :host .container ul li span{color:#fff}:host .container ul li button{transition:color .5s ease;outline:none;position:relative;transition:all .17s linear}:host .container ul li button,:host-context(.sfc-default-theme) :host .container ul li button{color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button{color:#fff}:host .container ul li button:before{transition:background .5s ease;border-radius:50%;content:\"\";cursor:pointer;height:0;left:50%;opacity:0;position:absolute;transform:translate(-50%,-50%);transition:all .17s linear;top:50%;width:0}:host .container ul li button:before,:host-context(.sfc-default-theme) :host .container ul li button:before{background:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:before{background:#f5f7fa}:host .container ul li button:hover:not(.active){transition:color .5s ease}:host .container ul li button:hover:not(.active),:host-context(.sfc-default-theme) :host .container ul li button:hover:not(.active){color:#545e61}:host-context(.sfc-dark-theme) :host .container ul li button:hover:not(.active){color:#fff}:host .container ul li button:hover:not(.active):before{animation:hover-animation .51s linear forwards;width:2.5em;height:2.5em}:host .container ul li button.active{transition:background .5s ease;color:#545e61!important}:host .container ul li button.active,:host-context(.sfc-default-theme) :host .container ul li button.active{background:rgba(0,0,0,.1019607843)}:host-context(.sfc-dark-theme) :host .container ul li button.active{background:#f5f7fa}@keyframes hover-animation{0%{opacity:1}to{opacity:0}}\n"] }]
         }], ctorParameters: function () { return [{ type: PaginationService }]; }, propDecorators: { count: [{
                 type: Input
             }], full: [{
@@ -3189,10 +3389,10 @@ class LoadMoreButtonComponent {
     }
 }
 LoadMoreButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoadMoreButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: { label: "label", icon: "icon" }, outputs: { more: "more" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center}:host .container,:host-context(.sfc-default-theme) :host .container{background:#fff}:host-context(.sfc-dark-theme) :host .container{background:transparent}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s ease;transition:color .5s;padding:.5em 0 1em}:host .container .button,:host-context(.sfc-default-theme) :host .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }] });
+LoadMoreButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: LoadMoreButtonComponent, selector: "sfc-load-more-button", inputs: { label: "label", icon: "icon" }, outputs: { more: "more" }, ngImport: i0, template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center}:host .container,:host-context(.sfc-default-theme) :host .container{background:#fff}:host-context(.sfc-dark-theme) :host .container{background:transparent}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s ease;transition:color .5s;padding:.5em 0 1em}:host .container .button,:host-context(.sfc-default-theme) :host .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700}:host .container .button:hover{color:#ffce54}\n"], dependencies: [{ kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: MouseDownDirective, selector: "[sfcMouseDown]", inputs: ["button"], outputs: ["sfcMouseDown"] }, { kind: "component", type: DelimeterComponent, selector: "sfc-delimeter", inputs: ["label", "direction"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LoadMoreButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'sfc-load-more-button', template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center}:host .container,:host-context(.sfc-default-theme) :host .container{background:#fff}:host-context(.sfc-dark-theme) :host .container{background:transparent}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s ease;transition:color .5s;padding:.5em 0 1em}:host .container .button,:host-context(.sfc-default-theme) :host .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700;text-transform:uppercase}:host .container .button:hover{color:#ffce54}\n"] }]
+            args: [{ selector: 'sfc-load-more-button', template: "<div class=\"container\">\r\n    <sfc-delimeter></sfc-delimeter>\r\n    <div class=\"button\" (sfcMouseDown)=\"more.emit($event)\">\r\n        <fa-icon [icon]=\"icon\"></fa-icon>\r\n        <span>{{label}}</span>\r\n    </div>\r\n</div>", styles: [":host{cursor:default}:host .container{text-align:center}:host .container,:host-context(.sfc-default-theme) :host .container{background:#fff}:host-context(.sfc-dark-theme) :host .container{background:transparent}:host .container .button{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;cursor:pointer;transition:color .5s ease;transition:color .5s;padding:.5em 0 1em}:host .container .button,:host-context(.sfc-default-theme) :host .container .button{color:#545e61}:host-context(.sfc-dark-theme) :host .container .button{color:#fff}:host .container .button fa-icon{font-size:.7em;margin-right:.31em}:host .container .button span{font-size:.6em;font-weight:700}:host .container .button:hover{color:#ffce54}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -3806,6 +4006,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BounceLoaderComponent, BrowserDocumentRef, BrowserWindowRef, ButtonComponent, ButtonType, CheckmarkComponent, CheckmarkType, CircleLoaderComponent, CircleLoaderType, ClickOutsideDirective, CloseComponent, CollapseExpandComponent, CollapseExpandContainerComponent, CollapseExpandDirective, CommonConstants, Compare, ComponentReferenceDirective, ComponentSize, ComponentSizeDirective, DOCUMENT, DOCUMENT_PROVIDERS, DateTimeConstants, DefaultModalFooterComponent, DefaultModalHeaderComponent, DelimeterComponent, DestroyParentDirective, Direction, DocumentRef, DomChangesDirective, DotComponent, DotsComponent, HamburgerComponent, HamburgerMenuComponent, IconComponent, IfDirective, ImageLoadDirective, ImageLoadService, ItemsView, LoadContainerChangesSource, LoadContainerComponent, LoadContainerLoadType, LoadContainerType, LoadMoreButtonComponent, LoadMoreService, LoaderService, MediaLimits, MessageComponent, ModalComponent, ModalOpenDirective, ModalOpenOnClickDirective, ModalService, ModalTemplate, MouseDownDirective, NgxSfcCommonModule, NotificationType, ObservableBehaviorModel, ObservableModel, PaginationComponent, PaginationConstants, PaginationService, Position, ReloadService, RepeatPipe, ResizeService, ScrollIntoViewDirective, ScrollTrackerDirective, Select, Sequence, ShowHideElementDirective, SortByPipe, SortingDirection, SortingService, State, SwitchMultiCasePipe, TagComponent, TemplateContentComponent, TemplateReferenceDirective, Theme, ThrowElementOnHoverDirective, ToggleComponent, ToggleSwitcherComponent, TooltipComponent, TooltipType, UIClass, UIConstants, WINDOW, WINDOW_PROVIDERS, WindowRef, addClasses, addItem, addPropertyToObject, all, any, browserDocumentProvider, browserWindowProvider, buildHttpParams, contains, convertDateToTimestamp, convertFromBase64String, convertTimestampToDate, convertToBase64String, convertUTCDateToLocalDate, count, deepClone, distinct, documentFactory, documentProvider, findChangedPropertyKey, findChangedPropertyPath, firstItem, firstOrDefault, generateGuid, getAge, getCalcValue, getCollectionOrEmpty, getCssLikeValue, getFileExtension, getFirstDayOfMonth, getFirstDayOfMonthByYearAndMonth, getFirstDayOfYear, getLastDayOfMonth, getLastDayOfMonthByYearAndMonth, getLastDayOfYear, getNextDate, getNextMonth, getNextYear, getPreviousDate, getPreviousMonth, getPreviousYear, getRotateValue, getValueFromCssLikeValue, getWeeksNumberInMonth, hasAnyItem, hasItem, hasItemBy, hasObjectItem, hexToRgb, isArraysEquals, isAsyncData, isChromeBrowser, isDateGreat, isDateGreatOrEqual, isDateTimeGreat, isDateTimeGreatOrEqual, isDateTimeLessOrEqual, isDefined, isEmail, isEqual, isEqualDateTimes, isEqualDates, isImage, isJsonString, isNullOrEmptyString, isNumeric, isObject, isString, isTimeGreatOrEqual, isTimeLessOrEqual, lastItem, max, mergeDeep, nameof, parseBoolean, parseFileSize, readAsDataURL, remove, removeClasses, removeItem, removeItemBy, removePropertyFromObject, replaceRgbOpacity, rgbToHex, setDay, setDefaultSecondsAndMiliseconds, setHours, setMilliseconds, setMinutes, setSeconds, setYear, skip, sort, sortBy, sortByPath, stopAndPreventPropagation, sum, trim, updateItemBy, updatePropertyByKey, where, windowFactory, windowProvider };
+export { BounceLoaderComponent, BrowserDocumentRef, BrowserWindowRef, ButtonComponent, ButtonType, CheckmarkComponent, CheckmarkType, CircleLoaderComponent, CircleLoaderType, ClickOutsideDirective, CloseComponent, CollapseExpandComponent, CollapseExpandContainerComponent, CollapseExpandDirective, Color, CommonConstants, Compare, ComponentReferenceDirective, ComponentSize, ComponentSizeDirective, DOCUMENT, DOCUMENT_PROVIDERS, DateTimeConstants, DefaultModalFooterComponent, DefaultModalHeaderComponent, DelimeterComponent, DestroyParentDirective, Direction, DocumentRef, DomChangesDirective, DotComponent, DotsComponent, HamburgerComponent, HamburgerMenuComponent, IconComponent, IfDirective, ImageLoadDirective, ImageLoadService, ItemsView, LoadContainerChangesSource, LoadContainerComponent, LoadContainerLoadType, LoadContainerType, LoadMoreButtonComponent, LoadMoreService, LoaderService, MediaLimits, MessageComponent, ModalComponent, ModalOpenDirective, ModalOpenOnClickDirective, ModalService, ModalTemplate, MouseDownDirective, NgxSfcCommonModule, NotificationType, ObservableBehaviorModel, ObservableModel, PaginationComponent, PaginationConstants, PaginationService, Position, ReloadService, RepeatPipe, ResizeService, ScrollIntoViewDirective, ScrollTrackerDirective, Select, Sequence, ShowHideElementDirective, SortByPipe, SortingDirection, SortingService, State, SwitchMultiCasePipe, TagComponent, TemplateContentComponent, TemplateReferenceDirective, Theme, ThrowElementOnHoverDirective, ToggleComponent, ToggleSwitcherComponent, TooltipComponent, TooltipType, UIClass, UIConstants, WINDOW, WINDOW_PROVIDERS, WindowRef, addClasses, addItem, addPropertyToObject, all, any, browserDocumentProvider, browserWindowProvider, buildHttpParams, contains, convertDateToTimestamp, convertFromBase64String, convertTimestampToDate, convertToBase64String, convertUTCDateToLocalDate, count, deepClone, distinct, documentFactory, documentProvider, findChangedPropertyKey, findChangedPropertyPath, firstItem, firstOrDefault, generateGuid, getAge, getCalcValue, getCollectionOrEmpty, getCssLikeValue, getFileExtension, getFirstDayOfMonth, getFirstDayOfMonthByYearAndMonth, getFirstDayOfYear, getLastDayOfMonth, getLastDayOfMonthByYearAndMonth, getLastDayOfYear, getNextDate, getNextMonth, getNextYear, getPreviousDate, getPreviousMonth, getPreviousYear, getRotateValue, getValueFromCssLikeValue, getWeeksNumberInMonth, hasAnyItem, hasItem, hasItemBy, hasObjectItem, hexToRgb, isArraysEquals, isAsyncData, isChromeBrowser, isDateGreat, isDateGreatOrEqual, isDateTimeGreat, isDateTimeGreatOrEqual, isDateTimeLessOrEqual, isDefined, isEmail, isEqual, isEqualDateTimes, isEqualDates, isImage, isJsonString, isNullOrEmptyString, isNumeric, isObject, isString, isTimeGreatOrEqual, isTimeLessOrEqual, lastItem, max, mergeDeep, nameof, parseBoolean, parseFileSize, readAsDataURL, remove, removeClasses, removeItem, removeItemBy, removePropertyFromObject, replaceRgbOpacity, rgbToHex, setDay, setDefaultSecondsAndMiliseconds, setHours, setMilliseconds, setMinutes, setSeconds, setYear, skip, sort, sortBy, sortByPath, stopAndPreventPropagation, sum, toggleItem, trim, updateItemBy, updatePropertyByKey, updatePropertyByPath, where, windowFactory, windowProvider };
 //# sourceMappingURL=ngx-sfc-common.mjs.map
 //# sourceMappingURL=ngx-sfc-common.mjs.map