jb-select 6.4.2 → 6.5.0

package/lib/jb-select.ts

@@ -1,4 +1,5 @@
-import CSS from "./jb-select.scss";
+import CSS from "./jb-select.css";
+import VariablesCSS from "./variables.css";
 import {
   JBSelectCallbacks,
   JBSelectElements,
@@ -11,6 +12,8 @@ import { JBFormInputStandards } from 'jb-form';
 import { JBOptionWebComponent } from "./jb-option/jb-option";
 import { registerDefaultVariables } from 'jb-core/theme';
 import { renderHTML } from "./render";
+import { dictionary } from "./i18n";
+import { i18n } from "jb-core/i18n";
 
 //TODO: add IncludeInputInList or freeSolo so user can select item that he wrote without even it exist in select list
 //TODO: handleHomeEndKeys to move focus inside the popup with the Home and End keys.
@@ -63,6 +66,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
   }
   set placeholder(value: string) {
     this.#placeholder = value;
+    this.#internals.ariaPlaceholder = value;
     if (this.value !== null && this.value !== undefined) {
       this.elements.input.placeholder = "";
     } else {
@@ -111,13 +115,16 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     this.elements.input.disabled = value;
     if (value) {
       (this.#internals as any).states?.add("disabled");
+      this.#internals.ariaDisabled = "true";
     } else {
       (this.#internals as any).states?.delete("disabled");
+      this.#internals.ariaDisabled = "false";
     }
   }
   #required = false;
   set required(value: boolean) {
     this.#required = value;
+    this.#internals.ariaRequired = value?"true":"false";
     this.#validation.checkValiditySync({ showError: false });
   }
   get required() {
@@ -166,7 +173,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
       delegatesFocus: true,
     });
     registerDefaultVariables();
-    const html = `<style>${CSS}</style>` + "\n" + renderHTML();
+    const html = `<style>${CSS} ${VariablesCSS}</style>` + "\n" + renderHTML();
     const element = document.createElement("template");
     element.innerHTML = html;
     shadowRoot.appendChild(element.content.cloneNode(true));
@@ -231,6 +238,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     switch (name) {
       case "label":
         this.elements.label.text.innerHTML = value;
+        this.#internals.ariaLabel = value;
         if (value == null || value == undefined || value == "") {
           this.elements.label.wrapper.classList.add("--hide");
         } else {
@@ -238,6 +246,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
         }
         break;
       case "message":
+        this.#internals.ariaDescription = value;
         this.elements.messageBox.innerHTML = value;
         break;
       case "value":
@@ -252,6 +261,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
         break;
       case "placeholder":
         this.placeholder = value;
+        this.#internals.ariaPlaceholder = value;
         break;
       case "search-placeholder":
         this.searchPlaceholder = value;
@@ -589,7 +599,7 @@ export class JBSelectWebComponent<TValue = any> extends HTMLElement implements W
     }
     if (this.required) {
       const label = this.getAttribute("label") || "";
-      const message = `${label} حتما باید انتخاب شود`;
+      const message = dictionary.get(i18n,"requireMessage")(label || null);
       validationList.push({
         validator: ({ value }) => {
           return value !== null && value !== undefined;

package/package.json

@@ -16,7 +16,7 @@
     "web component",
     "react component"
   ],
-  "version": "6.4.2",
+  "version": "6.5.0",
   "bugs": "https://github.com/javadbat/jb-select/issues",
   "license": "MIT",
   "files": [
@@ -35,9 +35,9 @@
   },
   "dependencies": {
     "jb-validation": ">=0.4.0",
-    "jb-core":">=0.14.0"
+    "jb-core":">=0.18.1"
   },
   "devDependencies": {
-    "jb-form":">=0.6.10"
+    "jb-form":">=0.7.1"
   }
 }

package/react/README.md

@@ -8,7 +8,9 @@ Demo :  Demo: [codeSandbox preview](https://3f63dj.csb.app/samples/jb-select) fo
 
 ## installation
 
-run `npm install jb-select` to install package with npm
+```sh
+npm install jb-select
+```
 
 ## usage