@getflip/swirl-components 0.175.1 → 0.177.0

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2024-03-22T13:40:47",
+  "timestamp": "2024-03-26T08:32:38",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.3.1",
@@ -6375,6 +6375,10 @@
         {
           "name": "slot",
           "text": "tools - Optional tools to be displayed on the right side of the item"
+        },
+        {
+          "name": "slot",
+          "text": "additional-content - Optional additional content displayed at the bottom of the item"
         }
       ],
       "usage": {},
@@ -6450,6 +6454,10 @@
       "listeners": [],
       "styles": [],
       "slots": [
+        {
+          "name": "additional-content",
+          "docs": "Optional additional content displayed at the bottom of the item"
+        },
         {
           "name": "slot",
           "docs": "The description"
@@ -39177,14 +39185,14 @@
       "props": [
         {
           "name": "config",
-          "type": "{ rootElement?: HTMLElement; storage?: SwirlThemeProviderStorage; themes?: SwirlThemes; }",
+          "type": "{ enabledThemes?: (keyof SwirlThemes)[]; rootElement?: HTMLElement; storage?: SwirlThemeProviderStorage; themes?: SwirlThemes; }",
           "mutable": false,
           "reflectToAttr": false,
           "docs": "",
           "docsTags": [],
           "values": [
             {
-              "type": "{ rootElement?: HTMLElement; storage?: SwirlThemeProviderStorage; themes?: SwirlThemes; }"
+              "type": "{ enabledThemes?: (keyof SwirlThemes)[]; rootElement?: HTMLElement; storage?: SwirlThemeProviderStorage; themes?: SwirlThemes; }"
             }
           ],
           "optional": false,

package/dist/cjs/swirl-description-list-item.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-1de6abbd.js');
 const index$1 = require('./index-2ddd0598.js');
 
-const swirlDescriptionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.description-list-item{display:flex;max-width:100%;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-base);justfiy-content:space-between;gap:var(--s-space-16)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.description-list-item--bordered{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.description-list-item:not(.description-list-item--has-tools) .description-list-item__tools{display:none}.description-list-item__text-container{flex-grow:1}.description-list-item__term{display:block;margin-bottom:var(--s-space-4);font-weight:var(--s-font-weight-semibold);overflow-wrap:break-word}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item__term{margin-bottom:var(--s-space-2)}}.description-list-item__tooltip{display:inline-flex;vertical-align:middle;margin-left:var(--s-space-4)}.description-list-item__description{display:block;max-width:40rem;margin:0;overflow-wrap:break-word}.description-list-item__tools{flex-shrink:0}";
+const swirlDescriptionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.description-list-item__inner{display:flex;max-width:100%;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);align-items:flex-start;color:var(--s-text-default);line-height:var(--s-line-height-base);justfiy-content:space-between;gap:var(--s-space-16)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item__inner{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.description-list-item--bordered{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.description-list-item:not(.description-list-item--has-tools) .description-list-item__tools{display:none}.description-list-item:not(.description-list-item--has-additional-content) .description-list-item__additional-content{display:none}.description-list-item__text-container{flex-grow:1}.description-list-item__term{display:block;margin-bottom:var(--s-space-4);font-weight:var(--s-font-weight-semibold);overflow-wrap:break-word}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item__term{margin-bottom:var(--s-space-2)}}.description-list-item__tooltip{display:inline-flex;margin-left:var(--s-space-4);vertical-align:middle}.description-list-item__description{display:block;max-width:40rem;margin:0;overflow-wrap:break-word}.description-list-item__tools{display:flex;min-height:2.625rem;flex-shrink:0;align-items:center}.description-list-item__additional-content{padding-bottom:var(--s-space-8);flex-basis:100%;flex-shrink:0}";
 
 const SwirlDescriptionListItem = class {
   constructor(hostRef) {
@@ -17,11 +17,13 @@ const SwirlDescriptionListItem = class {
   }
   render() {
     const hasTools = Boolean(this.el.querySelector('[slot="tools"]'));
+    const hasAdditionalContent = Boolean(this.el.querySelector('[slot="additional-content"]'));
     const className = index$1.classnames("description-list-item", {
       "description-list-item--bordered": this.bordered,
+      "description-list-item--has-additional-content": hasAdditionalContent,
       "description-list-item--has-tools": hasTools,
     });
-    return (index.h(index.Host, { role: "listitem" }, index.h("div", { class: className, part: "description-list-item", role: "group" }, index.h("div", { class: "description-list-item__text-container" }, index.h("div", { class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (index.h("span", { class: "description-list-item__tooltip" }, index.h("swirl-tooltip", { content: this.tooltip, position: "right" }, index.h("swirl-icon-info", { size: 16, tabIndex: 0 }))))), index.h("div", { style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, index.h("slot", null))), index.h("div", { class: "description-list-item__tools" }, index.h("slot", { name: "tools" })))));
+    return (index.h(index.Host, { role: "listitem" }, index.h("div", { class: className, part: "description-list-item", role: "group" }, index.h("div", { class: "description-list-item__inner" }, index.h("div", { class: "description-list-item__text-container" }, index.h("div", { class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (index.h("span", { class: "description-list-item__tooltip" }, index.h("swirl-tooltip", { content: this.tooltip, position: "right" }, index.h("swirl-icon-info", { size: 16, tabIndex: 0 }))))), index.h("div", { style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, index.h("slot", null))), index.h("div", { class: "description-list-item__tools" }, index.h("slot", { name: "tools" }))), index.h("div", { class: "description-list-item__additional-content" }, index.h("slot", { name: "additional-content" })))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-theme-provider.cjs.entry.js

@@ -47,7 +47,8 @@ const SwirlThemeProvider = class {
    * the system theme.
    */
   async setPreferredOSTheme(theme) {
-    if (!Boolean(this.resolvedConfig.storage)) {
+    if (!Boolean(this.resolvedConfig.storage) ||
+      !this.resolvedConfig.enabledThemes.includes(theme)) {
       return;
     }
     this.resolvedConfig.storage.setItem(preferredThemeStorageKey, theme);
@@ -66,9 +67,13 @@ const SwirlThemeProvider = class {
   resolveConfig() {
     this.resolvedConfig = {
       ...(this.config || {}),
+      enabledThemes: this.config?.enabledThemes || ["light", "dark"],
       rootElement: this.config?.rootElement || document.documentElement,
       storage: this.config?.storage || window?.localStorage,
     };
+    if (!this.resolvedConfig.enabledThemes.includes("light")) {
+      throw new Error("[Swirl Theme Provider] Light theme must be enabled.");
+    }
   }
   determineOSTheme() {
     if (!Boolean(window.matchMedia)) {
@@ -83,7 +88,13 @@ const SwirlThemeProvider = class {
     });
   }
   async updateAppTheme() {
-    this.appOSTheme = (await this.getPreferredOSTheme()) || this.osTheme;
+    const newAppOSTheme = (await this.getPreferredOSTheme()) || this.osTheme;
+    if (!this.resolvedConfig.enabledThemes.includes(newAppOSTheme)) {
+      this.appOSTheme = "light";
+    }
+    else {
+      this.appOSTheme = newAppOSTheme;
+    }
     if (this.appOSTheme === "dark") {
       document.documentElement.classList.remove("theme-light");
       document.documentElement.classList.add("theme-dark");