@cute-widgets/base 20.0.3 → 20.0.5

package/fesm2022/cute-widgets-base-core.mjs

@@ -60,40 +60,92 @@ function _animationsDisabled() {
  * that can be found at http://www.apache.org/licenses/LICENSE-2.0
  */
 /**
- * Bootstrap media-queries, or `breakpoints`.
- * PascalCase is being used as Breakpoints is used like an enum.
+ * Bootstrap media queries, or `breakpoints`.
  */
 const bsBreakpoints = {
-    SmallAndDown: '(max-width: 575.98px)',
-    MediumAndDown: '(max-width: 767.98px)',
-    LargeAndDown: '(max-width: 991.98px)',
-    XLargeAndDown: '(max-width: 1199.98px)',
-    XXLargeAndDown: '(max-width: 1399.98px)',
-    XSmall: '(max-width: 575.98px)',
-    Small: '(min-width: 576px) and (max-width: 767.98px)',
-    Medium: '(min-width: 768px) and (max-width: 991.98px)',
-    Large: '(min-width: 992px) and (max-width: 1199.98px)',
-    XLarge: '(min-width: 1200px) and (max-width: 1399.98px)',
-    XXLarge: '(min-width: 1400px)',
+    query: {
+        SmallAndDown: '(max-width: 576px)',
+        MediumAndDown: '(max-width: 768px)',
+        LargeAndDown: '(max-width: 992px)',
+        XLargeAndDown: '(max-width: 1200px)',
+        XXLargeAndDown: '(max-width: 1400px)',
+        XSmall: '(max-width: 575.98px)',
+        Small: '(min-width: 576px) and (max-width: 767.98px)',
+        Medium: '(min-width: 768px) and (max-width: 991.98px)',
+        Large: '(min-width: 992px) and (max-width: 1199.98px)',
+        XLarge: '(min-width: 1200px) and (max-width: 1399.98px)',
+        XXLarge: '(min-width: 1400px)',
+        get xs() { return this.XSmall; },
+        get sm() { return this.Small; },
+        get md() { return this.Medium; },
+        get lg() { return this.Large; },
+        get xl() { return this.XLarge; },
+        get xxl() { return this.XXLarge; },
+    },
     get grid() {
         return { xs: 0, sm: 576, md: 768, lg: 992, xl: 1200, xxl: 1400 };
     },
-    get xs() { return this.XSmall; },
-    get sm() { return this.Small; },
-    get md() { return this.Medium; },
-    get lg() { return this.Large; },
-    get xl() { return this.XLarge; },
-    get xxl() { return this.XXLarge; },
     /**
-     * Gets the object's property name of the media-query by its value
-     * @param query The media-query text
-     * @returns The property name of the media-query or _undefined_ if it was not found
+     * Gets the breakpoint label by Bootstrap's breakpoint abbreviation
+     * @param code Bootstrap's breakpoint abbreviation.
+     * @returns More descriptive text of the abbreviation.
+     */
+    getLabel(code) {
+        switch (code.trim().toLowerCase()) {
+            case "xs":
+            case "xsmall":
+                return "XSmall";
+            case "sm":
+            case "small":
+                return "Small";
+            case "md":
+            case "medium":
+                return "Medium";
+            case "lg":
+            case "large":
+                return "Large";
+            case "xl":
+            case "xlarge":
+                return "XLarge";
+            case "xxl":
+            case "xxlarge":
+                return "XXLarge";
+        }
+        return "";
+    },
+    /**
+     * Returns the media query string for the specified breakpoint symbol.
+     * @param code Bootstrap's breakpoint abbreviation.
+     * @returns Media query string or _undefined_ if the code has an unknown value.
+     */
+    getMediaQuery(code) {
+        if (code in this.query) {
+            return this.query[code];
+        }
+        return undefined;
+    },
+    /**
+     * Returns the media query string array for the specified breakpoint one or more symbols.
+     * @param codes Bootstrap's breakpoint abbreviation list.
+     * @returns Media query string array for each specified code of breakpoint.
+     */
+    getMediaQueries(codes) {
+        const bpArray = Array.isArray(codes) ? [...codes] : [codes];
+        return bpArray.map(value => {
+            const label = this.getLabel(value);
+            return this.getMediaQuery(label + "AndDown") ?? "";
+        });
+    },
+    /**
+     * Gets the name of the media-query by its value.
+     * @param query The media-query text.
+     * @returns The name of the media-query or _undefined_ if it was not found.
      */
     getQueryName(query) {
         let res;
         if (query) {
-            for (const key in this) {
-                if (this[key] === query) {
+            for (const [key, value] of Object.entries(this.query)) {
+                if (value === query) {
                     res = key;
                     break;
                 }
@@ -101,22 +153,6 @@ const bsBreakpoints = {
         }
         return res;
     },
-    /**
-     * Gets the breakpoint label by Bootstrap's breakpoint abbreviation
-     * @param code Bootstrap's breakpoint abbreviation
-     * @returns More descriptive text of the abbreviation
-     */
-    getLabel(code) {
-        switch (code) {
-            case "xs": return "XSmall";
-            case "sm": return "Small";
-            case "md": return "Medium";
-            case "lg": return "Large";
-            case "xl": return "XLarge";
-            case "xxl": return "XXLarge";
-        }
-        return "";
-    }
 };
 
 /**
@@ -1398,7 +1434,7 @@ function toBgCssClass(color) {
         if (isExtendedColor(richThemeColor)) {
             themeColor = getBaseColor(richThemeColor);
             if (richThemeColor.endsWith("-emphasis")) {
-                return `bg-${themeColor}-subtle`;
+                return `bg-${themeColor}-subtle text-${themeColor}-emphasis`;
             }
             // contrast
             return `text-bg-${themeColor}`;