rename folder (js -> app)

sdkjs-plugins/content/icons/.dev/svg-path-generator/src/generate-icons-json.js

@@ -8,7 +8,7 @@ const FA_FOLDER = "../../resources/font-awesome/";
 const FA_SVGS_FOLDER = FA_FOLDER + "svgs-full/";
 const FA_SPRITES_FULL_FOLDER = FA_FOLDER + "sprites-full/";
 const CATEGORIES_FILE = FA_FOLDER + "categories.yml";
-const OUTPUT_DIR = "../../src/js/environments/";
+const OUTPUT_DIR = "../../src/app/environments/";
 const OUTPUT_FILE = "categories.js";
 const LICENSE = "../../LICENSE";
 const REPO_URL = "https://github.com/FortAwesome/Font-Awesome.git";

sdkjs-plugins/content/icons/rollup.config.mjs

@@ -50,7 +50,7 @@ function getBabelConfig() {
 }
 
 export default {
-    input: "src/js/index.js",
+    input: "src/app/index.js",
     output: {
         file: isES5Build ? "dist/bundle.es5.js" : "dist/bundle.modern.js",
         format: isES5Build ? "umd" : "esm",

sdkjs-plugins/content/icons/src/app/components/button/button.css

@@ -150,7 +150,7 @@
     .custom-button-disabled,
     .custom-button:disabled {
         pointer-events: none;
-        opacity: 0.6;
+        opacity: 0.4;
         cursor: not-allowed;
     }
 

sdkjs-plugins/content/icons/src/app/components/button/split-button.js

@@ -1,4 +1,13 @@
+// @ts-check
+import { Button } from "./button.js";
+
+/** @typedef {import('./options-type.js').ButtonOptionsType} ButtonOptionsType */
+
 class SplitButton extends Button {
+    /**
+     * @param {string | HTMLButtonElement} button
+     * @param {ButtonOptionsType} options
+     */
     constructor(container, options = {}) {
         super(container, {
             menuItems: options.menuItems || [],
@@ -6,29 +15,31 @@ class SplitButton extends Button {
         });
     }
 
-    createDOM() {
-        this.container.innerHTML = "";
-        this.container.classList.add("custom-split-button-container");
+    _createDOM() {
+        this._container.innerHTML = "";
+        this._container.classList.add("custom-split-button-container");
 
-        this.container.innerHTML = `
+        this._container.innerHTML = `
             <div class="custom-split-button">
                 <button class="custom-split-button-main" type="${
-                    this.options.type
+                    this._options.type
                 }">
                     ${
-                        this.options.icon &&
-                        this.options.iconPosition === "left"
+                        this._options.icon &&
+                        this._options.iconPosition === "left"
                             ? `
-                        <span class="custom-button-icon">${this.options.icon}</span>
+                        <span class="custom-button-icon">${this._options.icon}</span>
                     `
                             : ""
                     }
-                    <span class="custom-button-text">${this.options.text}</span>
+                    <span class="custom-button-text">${
+                        this._options.text
+                    }</span>
                     ${
-                        this.options.icon &&
-                        this.options.iconPosition === "right"
+                        this._options.icon &&
+                        this._options.iconPosition === "right"
                             ? `
-                        <span class="custom-button-icon">${this.options.icon}</span>
+                        <span class="custom-button-icon">${this._options.icon}</span>
                     `
                             : ""
                     }
@@ -37,7 +48,7 @@ class SplitButton extends Button {
                     ▼
                 </button>
                 <div class="custom-split-button-menu">
-                    ${this.options.menuItems
+                    ${this._options.menuItems
                         .map(
                             (item) => `
                         <div class="custom-split-button-menu-item" data-action="${
@@ -57,13 +68,13 @@ class SplitButton extends Button {
             </div>
         `;
 
-        this.mainButton = this.container.querySelector(
+        this.mainButton = this._container.querySelector(
             ".custom-split-button-main"
         );
-        this.toggleButton = this.container.querySelector(
+        this.toggleButton = this._container.querySelector(
             ".custom-split-button-toggle"
         );
-        this.menu = this.container.querySelector(".custom-split-button-menu");
+        this.menu = this._container.querySelector(".custom-split-button-menu");
 
         this.applyStyles();
     }
@@ -71,24 +82,24 @@ class SplitButton extends Button {
     applyStyles() {
         // Добавляем классы вариантов и размеров
         this.mainButton.classList.add(
-            `custom-button-${this.options.variant}`,
-            `custom-button-${this.options.size}`
+            `custom-button-${this._options.variant}`,
+            `custom-button-${this._options.size}`
         );
         this.toggleButton.classList.add(
-            `custom-button-${this.options.variant}`,
-            `custom-button-${this.options.size}`
+            `custom-button-${this._options.variant}`,
+            `custom-button-${this._options.size}`
         );
     }
 
-    bindEvents() {
-        super.bindEvents();
+    _bindEvents() {
+        super._bindEvents();
 
         this.toggleButton.addEventListener("click", (e) => this.toggleMenu(e));
         this.menu.addEventListener("click", (e) => this.handleMenuClick(e));
 
         // Закрытие меню при клике вне
         document.addEventListener("click", (e) => {
-            if (!this.container.contains(e.target)) {
+            if (!this._container.contains(e.target)) {
                 this.hideMenu();
             }
         });
@@ -125,6 +136,6 @@ class SplitButton extends Button {
                 button: this,
             },
         });
-        this.container.dispatchEvent(event);
+        this._container.dispatchEvent(event);
     }
 }

sdkjs-plugins/content/icons/src/app/components/button/toggle-button.js

@@ -6,41 +6,41 @@ class ToggleButton extends Button {
             ...options,
         });
 
-        this.isToggled = this.options.toggled;
+        this.isToggled = this._options.toggled;
     }
 
-    createDOM() {
-        super.createDOM();
+    _createDOM() {
+        super._createDOM();
         this.updateToggleState();
     }
 
-    handleClick(e) {
+    _handleClick(e) {
         if (
-            this.options.toggleOnClick &&
-            !this.options.disabled &&
+            this._options.toggleOnClick &&
+            !this._options.disabled &&
             !this.isLoading
         ) {
             this.toggle();
         }
-        super.handleClick(e);
+        super._handleClick(e);
     }
 
     toggle() {
         this.isToggled = !this.isToggled;
-        this.updateToggleState();
+        this.#updateToggleState();
         this.triggerToggleEvent();
     }
 
     setToggled(toggled) {
         this.isToggled = toggled;
-        this.updateToggleState();
+        this.#updateToggleState();
     }
 
-    updateToggleState() {
+    #updateToggleState() {
         if (this.isToggled) {
-            this.container.classList.add("custom-button-toggled");
+            this._container.classList.add("custom-button-toggled");
         } else {
-            this.container.classList.remove("custom-button-toggled");
+            this._container.classList.remove("custom-button-toggled");
         }
     }
 
@@ -51,6 +51,6 @@ class ToggleButton extends Button {
                 button: this,
             },
         });
-        this.container.dispatchEvent(event);
+        this._container.dispatchEvent(event);
     }
 }

sdkjs-plugins/content/icons/src/colors.css

@@ -16,13 +16,13 @@ html {
     --input-icon: #bdbdbd;
     --input-icon-hover: #848484;
     --select-option: white;
-    --select-option-hover: #cbcbcb;
+    --select-option-hover: #e0e0e0;
     --select-option-selected: #cbcbcb;
 
     --font-dark: rgba(255, 255, 255, 0.8);
     --font-hover-dark: white;
     --icon-pad-dark: rgba(255, 255, 255, 0.02);
-    --icon-pad-hover-dark: #606060;
+    --icon-pad-hover-dark: #555;
     --icon-pad-focus-dark: rgba(255, 255, 255, 0.1);
     --icon-pad-selected-dark: #606060;
     --input-bg-dark: #333333;
@@ -36,6 +36,6 @@ html {
     --input-icon-dark: rgba(255, 255, 255, 0.8);
     --input-icon-hover-dark: white;
     --select-option-dark: #333333;
-    --select-option-hover-dark: #606060;
+    --select-option-hover-dark: #555;
     --select-option-selected-dark: #606060;
 }