aprog 2.3.32 → 2.3.40

package/index.js

@@ -1,7 +1,5 @@
 export {
-    div, span, button, a, img, meta, label, input, select, option, options, form, hr, textarea,
-    table, caption, thead, tbody, tr, th, td, pre,
-    attachCustomTitle, _get, _getAll, GUID, isEmpty, apState, date, pause, apFetch, parseCustomMarkup,
+    options, attachCustomTitle, _get, _getAll, GUID, isEmpty, apState, date, pause, apFetch, parseCustomMarkup,
     chars, isNull, isFloat, isNumeric, isObject, elementToObject, copyText, scrollToTop, scrollToBottom,
     firstKey, isArray, checkArrays, isNumber, isString, isPromise, ucfirst, deepEqual, nodeListToObject
 } from './src/general.js';
@@ -21,16 +19,24 @@ export {
     toSnakeCaseStringPrototype, repeatHTMLElementPrototype,
     replaceChildrenHTMLElementPrototype
 } from './src/html.js';
-export { prism } from "./src/prism.js";
-export { uniquePage } from "./src/pages.js";
-export { state, wrap, toast, abort, useTableDrag, callback, json } from "./src/helper.js";
-export { loadTranslations, translate } from "./src/translator.js";
-export { svg } from "./src/svg.js";
-export { Modal, modal, closeAllModals, closeThisModal } from "./src/modal.js";
-export { default as AbortError } from './src/classes/AbortError.js';
-export { default as SmartWrapper } from './src/classes/SmartWrapper.js';
-export { default as StateWrapper } from './src/classes/StateWrapper.js';
-export { default as Toast } from './src/classes/Toast.js';
-export { ButtonConstructor } from './src/constructs/ButtonConstructor.js';
-export { InputConstructor } from './src/constructs/InputConstructor.js';
-export { SelectConstructor } from './src/constructs/SelectConstructor.js';
+export {prism} from "./src/prism.js";
+export {uniquePage} from "./src/pages.js";
+export {state, wrap, toast, abort, useTableDrag, callback, json} from "./src/helper.js";
+export {initAprog} from './src/config.js';
+export {loadTranslations, translate} from "./src/translator.js";
+export {svg} from "./src/svg.js";
+export {Modal, modal, closeAllModals, closeThisModal} from "./src/modal.js";
+export {default as AbortError} from './src/classes/AbortError.js';
+export {default as SmartWrapper} from './src/classes/SmartWrapper.js';
+export {default as StateWrapper} from './src/classes/StateWrapper.js';
+export {default as Toast} from './src/classes/Toast.js';
+export {ButtonConstructor} from './src/constructs/ButtonConstructor.js';
+export {InputConstructor} from './src/constructs/InputConstructor.js';
+export {SelectConstructor} from './src/constructs/SelectConstructor.js';
+export {
+    div, span, a, button, img, input, select, option,
+    label, ul, li, hr, section, header, footer, textarea,
+    form, table, thead, tbody, tr, th, td, caption,
+    head, meta, body, pre, h1, h2, h3, h4, h5,
+    style, script, element
+} from "./src/elements.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aprog",
-  "version": "2.3.32",
+  "version": "2.3.40",
   "description": "Допоміжна JavaScript-бібліотека для проєктів",
   "main": "index.js",
   "exports": {

package/src/config.js

@@ -0,0 +1,9 @@
+const config = {
+    langLoader: null,
+};
+
+export const initAprog = (options = {}) => {
+    Object.assign(config, options);
+};
+
+export const getAprogConfig = () => config;

package/src/elements.js

@@ -0,0 +1,215 @@
+const appendValue = (element, value) => {
+    if (value === null || value === undefined || value === false) {
+        return;
+    }
+
+    if (Array.isArray(value)) {
+        value.forEach(item => appendValue(element, item));
+        return;
+    }
+
+    if (value instanceof Node) {
+        element.append(value);
+        return;
+    }
+
+    element.insertAdjacentHTML("beforeend", String(value));
+};
+
+const setStyle = (element, styles) => {
+    if (typeof styles === "string") {
+        element.style.cssText = styles;
+        return;
+    }
+
+    Object.assign(element.style, styles);
+};
+
+const setDataset = (element, dataset) => {
+    Object.entries(dataset).forEach(([key, value]) => {
+        element.dataset[key] = String(value);
+    });
+};
+
+const setAttributes = (element, attributes = {}) => {
+    Object.entries(attributes).forEach(([name, value]) => {
+        if (value === null || value === undefined || value === false) {
+            return;
+        }
+
+        // content
+        if (name === "value" && !["INPUT", "TEXTAREA", "SELECT", "OPTION"].includes(element.tagName)) {
+            appendValue(element, value);
+            return;
+        }
+
+        // children
+        if (name === "children") {
+            appendValue(element, value);
+            return;
+        }
+
+        // text
+        if (name === "text" || name === "textContent") {
+            element.textContent = String(value);
+            return;
+        }
+
+        // html
+        if (name === "html" || name === "innerHTML") {
+            element.innerHTML = String(value);
+            return;
+        }
+
+        // class
+        if (name === "class" || name === "className") {
+            if (Array.isArray(value)) {
+                element.className = value.filter(Boolean).join(" ");
+            } else {
+                element.className = String(value);
+            }
+
+            return;
+        }
+
+        // style
+        if (name === "style") {
+            setStyle(element, value);
+            return;
+        }
+
+        // dataset
+        if (name === "dataset") {
+            setDataset(element, value);
+            return;
+        }
+
+        // events
+        if (name.startsWith("on") && typeof value === "function") {
+            element.addEventListener(name.slice(2).toLowerCase(), value);
+
+            return;
+        }
+
+        // focus
+        if (name === "focus" && value) {
+            queueMicrotask(() => element.focus());
+            return;
+        }
+
+        // DOM properties
+        if (name in element) {
+            try {
+                element[name] = value;
+                return;
+            } catch (_) {
+                // fallback → setAttribute
+            }
+        }
+
+        // dataSomething → data-something
+        if (name.startsWith("data") && name.length > 4) {
+            const attribute = name
+                .replace(/([A-Z])/g, "-$1")
+                .toLowerCase();
+
+            element.setAttribute(attribute, String(value));
+            return;
+        }
+
+        // ariaSomething → aria-something
+        if (name.startsWith("aria") && name.length > 4) {
+            const attribute = name
+                .replace(/([A-Z])/g, "-$1")
+                .toLowerCase();
+
+            element.setAttribute(attribute, String(value));
+            return;
+        }
+
+        // boolean attribute
+        if (value === true) {
+            element.setAttribute(name, "");
+            return;
+        }
+
+        // everything else
+        element.setAttribute(name, String(value));
+    });
+
+    return element;
+};
+
+export const element = (tag = "div", attributes = {}) => {
+    return setAttributes(document.createElement(tag), attributes);
+};
+
+export const div = (attributes = {}) => element("div", attributes);
+
+export const span = (attributes = {}) => element("span", attributes);
+
+export const a = (attributes = {}) => element("a", attributes);
+
+export const button = (attributes = {}) => element("button", attributes);
+
+export const input = (attributes = {}) => element("input", attributes);
+
+export const label = (attributes = {}) => element("label", attributes);
+
+export const form = (attributes = {}) => element("form", attributes);
+
+export const textarea = (attributes = {}) => element("textarea", attributes);
+
+export const pre = (attributes = {}) => element("pre", attributes);
+
+export const select = (attributes = {}) => element("select", attributes);
+
+export const option = (attributes = {}) => element("option", attributes);
+
+export const img = (attributes = {}) => element("img", attributes);
+
+export const table = (attributes = {}) => element("table", attributes);
+
+export const caption = (attributes = {}) => element("caption", attributes);
+
+export const thead = (attributes = {}) => element("thead", attributes);
+
+export const tbody = (attributes = {}) => element("tbody", attributes);
+
+export const tr = (attributes = {}) => element("tr", attributes);
+
+export const th = (attributes = {}) => element("th", attributes);
+
+export const td = (attributes = {}) => element("td", attributes);
+
+export const h1 = (attributes = {}) => element("h1", attributes);
+
+export const h2 = (attributes = {}) => element("h2", attributes);
+
+export const h3 = (attributes = {}) => element("h3", attributes);
+
+export const h4 = (attributes = {}) => element("h4", attributes);
+
+export const h5 = (attributes = {}) => element("h5", attributes);
+
+export const section = (attributes = {}) => element("section", attributes);
+
+export const header = (attributes = {}) => element("header", attributes);
+
+export const footer = (attributes = {}) => element("footer", attributes);
+
+export const ul = (attributes = {}) => element("ul", attributes);
+
+export const li = (attributes = {}) => element("li", attributes);
+
+export const hr = (attributes = {}) => element("hr", attributes);
+
+export const head = (attributes = {}) => element("head", attributes);
+
+export const body = (attributes = {}) => element("body", attributes);
+
+export const meta = (attributes = {}) => element("meta", attributes);
+
+export const style = (attributes = {}) => element("style", attributes);
+
+export const script = (attributes = {}) => element("script", attributes);

package/src/general.js

@@ -1351,6 +1351,230 @@ export const img = (attributes = {}) => {
   return img;
 };
 
+export const h1 = (attributes = {}) => {
+  let h1 = document.createElement("h1");
+  if (attributes) {
+    Object.entries(attributes).forEach(([name, attrValue]) => {
+      if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
+        const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
+        h1.addEventListener(eventType, attrValue);
+      } else {
+        switch (name) {
+          case "class":
+          case "className":
+            h1.className = String(attrValue);
+            break;
+          case "value":
+            if (isArray(attrValue)) {
+              attrValue.forEach((element) => {
+                isHtmlElement(element) ? h1.append(element) : h1.innerHTML = String(element);
+              });
+            } else {
+              if (isHtmlElement(attrValue)) {
+                h1.appendChild(attrValue);
+              } else {
+                h1.innerHTML = String(attrValue);
+                h1.title = String(attrValue);
+              }
+            }
+            break;
+          case "style":
+            Object.entries(attrValue).forEach(([styleName, styleValue]) => {
+              switch (styleName) {
+                case "zIndex":
+                  h1.style[styleName] = `99999${styleValue}`;
+                  break;
+                default:
+                  h1.style[styleName] = styleValue;
+                  break;
+              }
+            });
+            break;
+          default:
+            if (name.startsWith("data")) {
+              const kebabName = name
+                  .replace(/^data/, "data")
+                  .replace(/([A-Z])/g, "-$1")
+                  .toLowerCase();
+              h1.setAttribute(kebabName, String(attrValue));
+            } else {
+              h1.setAttribute(name, String(attrValue));
+            }
+        }
+      }
+    });
+  }
+  return h1;
+};
+
+export const h2 = (attributes = {}) => {
+  let h2 = document.createElement("h2");
+  if (attributes) {
+    Object.entries(attributes).forEach(([name, attrValue]) => {
+      if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
+        const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
+        h2.addEventListener(eventType, attrValue);
+      } else {
+        switch (name) {
+          case "class":
+          case "className":
+            h2.className = String(attrValue);
+            break;
+          case "value":
+            if (isArray(attrValue)) {
+              attrValue.forEach((element) => {
+                isHtmlElement(element) ? h2.append(element) : h2.innerHTML = String(element);
+              });
+            } else {
+              if (isHtmlElement(attrValue)) {
+                h2.appendChild(attrValue);
+              } else {
+                h2.innerHTML = String(attrValue);
+                h2.title = String(attrValue);
+              }
+            }
+            break;
+          case "style":
+            Object.entries(attrValue).forEach(([styleName, styleValue]) => {
+              switch (styleName) {
+                case "zIndex":
+                  h2.style[styleName] = `99999${styleValue}`;
+                  break;
+                default:
+                  h2.style[styleName] = styleValue;
+                  break;
+              }
+            });
+            break;
+          default:
+            if (name.startsWith("data")) {
+              const kebabName = name
+                  .replace(/^data/, "data")
+                  .replace(/([A-Z])/g, "-$1")
+                  .toLowerCase();
+              h2.setAttribute(kebabName, String(attrValue));
+            } else {
+              h2.setAttribute(name, String(attrValue));
+            }
+        }
+      }
+    });
+  }
+  return h2;
+};
+
+export const h3 = (attributes = {}) => {
+  let h3 = document.createElement("h3");
+  if (attributes) {
+    Object.entries(attributes).forEach(([name, attrValue]) => {
+      if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
+        const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
+        h3.addEventListener(eventType, attrValue);
+      } else {
+        switch (name) {
+          case "class":
+          case "className":
+            h3.className = String(attrValue);
+            break;
+          case "value":
+            if (isArray(attrValue)) {
+              attrValue.forEach((element) => {
+                isHtmlElement(element) ? h3.append(element) : h3.innerHTML = String(element);
+              });
+            } else {
+              if (isHtmlElement(attrValue)) {
+                h3.appendChild(attrValue);
+              } else {
+                h3.innerHTML = String(attrValue);
+                h3.title = String(attrValue);
+              }
+            }
+            break;
+          case "style":
+            Object.entries(attrValue).forEach(([styleName, styleValue]) => {
+              switch (styleName) {
+                case "zIndex":
+                  h3.style[styleName] = `99999${styleValue}`;
+                  break;
+                default:
+                  h3.style[styleName] = styleValue;
+                  break;
+              }
+            });
+            break;
+          default:
+            if (name.startsWith("data")) {
+              const kebabName = name
+                  .replace(/^data/, "data")
+                  .replace(/([A-Z])/g, "-$1")
+                  .toLowerCase();
+              h3.setAttribute(kebabName, String(attrValue));
+            } else {
+              h3.setAttribute(name, String(attrValue));
+            }
+        }
+      }
+    });
+  }
+  return h3;
+};
+
+export const element = (tag = "div", attributes = {}) => {
+  let el = document.createElement(tag);
+  if (attributes) {
+    Object.entries(attributes).forEach(([name, attrValue]) => {
+      if ((name.startsWith('on') || name.startsWith("mouse")) && typeof attrValue === 'function') {
+        const eventType = name.startsWith("mouse") ? name.toLowerCase() : name.slice(2).toLowerCase();
+        el.addEventListener(eventType, attrValue);
+      } else {
+        switch (name) {
+          case "class":
+          case "className":
+            el.className = String(attrValue);
+            break;
+          case "value":
+            if (isArray(attrValue)) {
+              attrValue.forEach((element) => {
+                isHtmlElement(element) ? el.append(element) : el.innerHTML = String(element);
+              });
+            } else {
+              if (isHtmlElement(attrValue)) {
+                el.appendChild(attrValue);
+              } else {
+                el.innerHTML = String(attrValue);
+                el.title = String(attrValue);
+              }
+            }
+            break;
+          case "style":
+            Object.entries(attrValue).forEach(([styleName, styleValue]) => {
+              switch (styleName) {
+                case "zIndex":
+                  el.style[styleName] = `99999${styleValue}`;
+                  break;
+                default:
+                  el.style[styleName] = styleValue;
+                  break;
+              }
+            });
+            break;
+          default:
+            if (name.startsWith("data")) {
+              const kebabName = name
+                  .replace(/^data/, "data")
+                  .replace(/([A-Z])/g, "-$1")
+                  .toLowerCase();
+              el.setAttribute(kebabName, String(attrValue));
+            } else {
+              el.setAttribute(name, String(attrValue));
+            }
+        }
+      }
+    });
+  }
+  return el;
+};
+
 export const apState = (initialValue) => {
   let state = initialValue;
   const getState = () => state;

package/src/svg.js

@@ -72,7 +72,7 @@ export const svg = ({
                 fill="${fill}" 
                 stroke="${stroke}" 
                 stroke-width="${strokeWidth}" 
-                viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                viewBox="0 0 101 101" xmlns="http://www.w3.org/2000/svg">
                 <g>
                     <path d="M70.063,27.182c1.398,1.175,3.174,1.821,4.996,1.821c2.312,0,4.488-1.014,5.974-2.782 c2.76-3.289,2.329-8.211-0.96-10.973c-1.4-1.175-3.176-1.822-5-1.822c-2.311,0-4.487,1.014-5.971,2.782 C66.341,19.498,66.773,24.419,70.063,27.182z"></path>
                     <path d="M88.445,36.096c-0.483,0-0.971,0.043-1.448,0.127c-4.485,0.791-7.493,5.086-6.702,9.573 c0.696,3.955,4.111,6.825,8.119,6.825c0.482,0,0.972-0.043,1.451-0.126c4.485-0.792,7.492-5.086,6.701-9.571 C95.868,38.968,92.452,36.096,88.445,36.096z"></path>

package/src/translator.js

@@ -1,5 +1,6 @@
 // Об'єкт для зберігання завантажених перекладів
 import {isEmpty} from "./general.js";
+import {getAprogConfig} from "./config.js";
 
 const translations = {};
 let translationsLoaded = false;
@@ -10,8 +11,20 @@ let translationsLoaded = false;
  */
 export const loadTranslations = async (language = "uk") => {
     try {
-        const translationsModule = await import(`../../../resources/lang/${language}.json`);
-        Object.assign(translations, translationsModule);
+        const { langLoader } = getAprogConfig();
+
+        if (!langLoader) {
+            throw new Error("langLoader is not configured");
+        }
+
+        const module = await langLoader(language);
+
+        Object.keys(translations).forEach(key => {
+            delete translations[key];
+        });
+
+        Object.assign(translations, module.default ?? module);
+
         translationsLoaded = true;
     } catch (error) {
         console.error(`Помилка завантаження перекладів для мови "${language}":`, error);
@@ -30,10 +43,15 @@ export const translate = (key, values = {}, def = "") => {
         console.warn(`Переклади ще не завантажені. Ключ: "${key}"`);
         return !isEmpty(def) ? def : key;
     }
-    let translation = translations[key] || key;
-    // Замінити підстановки {key} у перекладі
+
+    let translation = translations[key];
+    if (isEmpty(translation)) {
+        translation = !isEmpty(def) ? def : key;
+    }
+
     for (const [placeholder, value] of Object.entries(values)) {
-        translation = translation.replace(`:${placeholder}`, value.toString());
+        translation = translation.replaceAll(`:${placeholder}`, value.toString());
     }
-    return !isEmpty(def) ? def : translation;
+
+    return translation;
 };

package/src/css/root.css

@@ -1,86 +0,0 @@
-:root {
-    --c-blue: #0088ff;
-    --c-green: #008800;
-    --c-red: #ff2800;
-    --c-orange: #ff8800;
-    --c-gold: #ffd700;
-    --c-yellow: #ffff00;
-    --c-gray: #999999;
-    --c-x-light: #F0E1D2;
-    --c-x-light-rgb: rgb(240,225,210);
-    /*--c-black: #01090f;*/
-    --c-black: #333333;
-    --c-black-rgb: rgb(1,9,15);
-    --c-dark: #021727;
-    --c-dark-rgb: rgb(2,23,39);
-    --c-prev-dark: #032640;
-    --c-prev-dark-rgb: rgb(3,38,64);
-    --c-default: #043458;
-    --c-default-rgb: rgb(4,52,88);
-    --c-prev-light: #054270;
-    --c-prev-light-rgb: rgb(5,66,112);
-    --c-light: #065189;
-    --c-light-rgb: rgb(6,81,137);
-    --c-super-light: #075fa1;
-    --c-super-light-rgb: rgb(7,95,161);
-    --c-bright: #086db9;
-    --c-bright-rgb: rgb(8,109,185);
-    --c-prev-bright: #097cd2;
-    --c-prev-bright-rgb: rgb(9,124,210);
-    --c-vivid: #0a8aea;
-    --c-vivid-rgb: rgb(10,138,234);
-    --c-sky: #1897f5;
-    --c-sky-rgb: rgb(24,151,245);
-    --c-soft-sky: #31a2f6;
-    --c-soft-sky-rgb: rgb(49,162,246);
-    --c-light-sky: #49adf7;
-    --c-light-sky-rgb: rgb(73,173,247);
-    --c-cloud: #61b8f8;
-    --c-cloud-rgb: rgb(97,184,248);
-    --c-bright-cloud: #7ac3f9;
-    --c-bright-cloud-rgb: rgb(122,195,249);
-    --c-soft-cloud: #92cefa;
-    --c-soft-cloud-rgb: rgb(146,206,250);
-    --c-lighter-cloud: #aad9fb;
-    --c-lighter-cloud-rgb: rgb(170,217,251);
-    --c-fade-cloud: #c3e4fc;
-    --c-fade-cloud-rgb: rgb(195,228,252);
-    --c-pale-blue: #dbeffd;
-    --c-pale-blue-rgb: rgb(219,239,253);
-    --c-near-white: #f3fafe;
-    --c-near-white-rgb: rgb(243,250,254);
-    --c-white: #ffffff;
-    --c-white-rgb: rgb(255,255,255);
-    --1px: 0.0625rem;
-    --05px: 0.0313rem;
-    --size-xxxs: 8px;
-    --size-xxs: 10px;
-    --size-xs: 12px;
-    --size-sm: 14px;
-    --size-md: 16px;
-    --size-lg: 18px;
-    --size-xl: 20px;
-    --size-xxl: 24px;
-    --size-xxxl: 32px;
-    --padding-container: calc(100% - 4rem);
-    --box-shadow: 0 3px 6px 0 rgba(1,9,15, 0.2), 0 3px 6px 0 rgba(1,9,15, 0.19);
-    --box-shadow-invert: inset 0 3px 6px 0 rgba(1,9,15, 0.4);
-    --box-shadow-round: 0 0 6px 0 rgba(1,9,15, 0.4), 0 0 6px 0 rgba(1,9,15, 0.39);
-    --box-shadow-round-invert: inset 0 0 6px 0 rgba(1,9,15, 0.4);
-    /*--btn-shadow: 0 3px 8px 0 rgba(4, 52, 88, 0.2), 0 3px 20px 0 rgba(4, 52, 88, 0.19);*/
-    --btn-shadow: 0 3px 8px 0 rgba(1,9,15, 0.2), 0 3px 20px 0 rgba(1,9,15, 0.19);
-    --maxIndex: 2147483647;
-    --allTransition100Linear: all 100ms linear;
-    --allTransition700: all 700ms ease-in-out;
-    --border-radius: 0.5rem;
-
-    /* Glass Style */
-    --glass-bg: rgba(255,255,255,.5);
-    --glass-super-bg: rgba(255,255,255,.7);
-    --glass-blur: blur(2px);
-    --glass-super-blur: blur(6px);
-    --glass-border: var(--05px) solid var(--c-white);
-    --glass-radius: 0.5rem;
-    --glass-shadow: 0 3px 6px rgba(0,0,0,.5);
-    --glass-shadow-invert: inset 0 3px 6px rgba(0,0,0,.5);
-}

package/src/css/styles.css

@@ -1,129 +0,0 @@
-@import "root.css";
-
-.aprog-btn {
-    height: 38px;
-    padding: 0.3rem 0.7rem;
-    align-items: center;
-    justify-content: center;
-    font-size: 1rem;
-    color: var(--c-black);
-    background-color: var(--glass-bg);
-    backdrop-filter: var(--glass-blur);
-    -webkit-backdrop-filter: var(--glass-blur);
-    border: var(--glass-border);
-    border-radius: var(--glass-radius);
-    box-shadow: var(--glass-shadow);
-    transition: var(--allTransition100Linear);
-    cursor: pointer;
-}
-
-.aprog-input, .aprog-select {
-    min-width: 150px;
-    width: calc(100% - 30px);
-    height: 38px;
-    padding: 0 15px;
-    font-size: var(--size-sm);
-    font-weight: 600;
-    color: var(--c-black);
-    background-color: var(--glass-bg);
-    backdrop-filter: var(--glass-blur);
-    -webkit-backdrop-filter: var(--glass-blur);
-    border-left: 1px solid var(--c-black);
-    border-right: 1px solid var(--c-black);
-    border-radius: var(--glass-radius);
-    box-shadow: var(--glass-shadow-invert);
-    outline: none;
-}
-
-.aprog-select {
-
-}
-
-.aprog-loader {
-    /*position: absolute;*/
-    /*top: 50%;*/
-    /*left: 50%;*/
-    /*transform: translate(-50%, -50%);*/
-    /*width: 35px;*/
-    /*height: 35px;*/
-    animation: spin 1s linear infinite;
-}
-
-.aprog-modal {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    min-width: 600px;
-    min-height: 300px;
-    width: auto;
-    height: auto;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    background-color: var(--c-white);
-    border-radius: var(--border-radius);
-    transform: translate(-50%, -50%);
-    box-shadow: var(--box-shadow);
-    z-index: 99999;
-}
-.aprog-background-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    background-color: rgba(255,255,255, 0.3);
-    backdrop-filter: blur(4px);
-}
-.aprog-block-modal {
-    width: calc(100% - 1rem);
-    height: calc(100% - 1rem);
-    padding: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    gap: 20px;
-}
-.aprog-title-modal {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
-    font-weight: 600;
-    text-align: center;
-}
-.aprog-block-btns-modal {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 20px;
-}
-.aprog-close {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--c-white);
-    stroke: var(--c-white);
-    fill: var(--c-white);
-    background-color: var(--c-red);
-    border-radius: 50%;
-    box-shadow: var(--box-shadow);
-    transition: var(--allTransition700);
-    cursor: pointer;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}