@supersoniks/concorde 4.5.0 → 4.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supersoniks/concorde",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "license": "MIT",
   "type": "module",
   "main": "",
@@ -220,6 +220,9 @@
     "./modal-title": "./src/core/components/ui/modal/modal-title.ts",
     "./ui/modal-title": "./src/core/components/ui/modal/modal-title.ts",
     "./ui/modal/modal-title": "./src/core/components/ui/modal/modal-title.ts",
+    "./modal-utils": "./src/core/components/ui/modal/modal-utils.ts",
+    "./ui/modal-utils": "./src/core/components/ui/modal/modal-utils.ts",
+    "./ui/modal/modal-utils": "./src/core/components/ui/modal/modal-utils.ts",
     "./modal": "./src/core/components/ui/modal/modal.ts",
     "./ui/modal": "./src/core/components/ui/modal/modal.ts",
     "./pop": "./src/core/components/ui/pop/pop.ts",

package/src/core/components/ui/modal/modal-utils.ts

@@ -0,0 +1,46 @@
+import { CSSResultGroup, CSSResult } from "lit";
+
+export type ModalStyleSheetInput =
+  | CSSResultGroup
+  | CSSStyleSheet
+  | Array<CSSResultGroup | CSSStyleSheet>;
+
+const styleSheetCache = new WeakMap<CSSResult, CSSStyleSheet>();
+
+function cssResultToStyleSheet(styleResult: CSSResult): CSSStyleSheet {
+  const cachedStyleSheet = styleSheetCache.get(styleResult);
+  if (cachedStyleSheet) return cachedStyleSheet;
+
+  const styleSheet = new CSSStyleSheet();
+  styleSheet.replaceSync(styleResult.cssText);
+  styleSheetCache.set(styleResult, styleSheet);
+  return styleSheet;
+}
+
+function isCSSResult(value: unknown): value is CSSResult {
+  return value instanceof CSSResult;
+}
+
+export function normalizeStyleSheets(
+  styleSheet?: ModalStyleSheetInput
+): Array<CSSStyleSheet> {
+  if (!styleSheet) return [];
+
+  const styleSheets = Array.isArray(styleSheet) ? styleSheet : [styleSheet];
+
+  return styleSheets.flatMap((sheet) => {
+    if (Array.isArray(sheet)) {
+      return normalizeStyleSheets(sheet);
+    }
+
+    if (sheet instanceof CSSStyleSheet) {
+      return [sheet];
+    }
+
+    if (isCSSResult(sheet)) {
+      return [cssResultToStyleSheet(sheet)];
+    }
+
+    return [];
+  });
+}

package/src/core/components/ui/modal/modal.ts

@@ -19,6 +19,7 @@ import LocationHandler from "@supersoniks/concorde/core/utils/LocationHandler";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { ButtonType } from "../button/button";
+import { ModalStyleSheetInput, normalizeStyleSheets } from "./modal-utils";
 
 declare const window: ConcordeWindow;
 declare type ModalCreateOptions = {
@@ -26,6 +27,7 @@ declare type ModalCreateOptions = {
   subtitle?: string | DirectiveResult;
   content?: string | DirectiveResult;
   actions?: string | DirectiveResult;
+  styleSheet?: ModalStyleSheetInput;
   zIndex?: string;
   paddingX?: string;
   paddingY?: string;
@@ -171,7 +173,8 @@ export class Modal extends Subscriber(LitElement) {
         z-index: 20;
         opacity: 0;
         transform: scale(0);
-        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+        transition:
+          transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
           opacity 0.1s linear;
         transform-origin: center center;
         display: flex;
@@ -223,6 +226,7 @@ export class Modal extends Subscriber(LitElement) {
   @property({ type: String }) width = "100%";
   @property({ type: String }) height = "fit-content";
   @property({ type: String }) effect: effectType = "slide";
+  @property({ attribute: false }) styleSheet?: ModalStyleSheetInput;
 
   @property({ type: Object }) options?: ModalCreateOptions;
 
@@ -237,6 +241,7 @@ export class Modal extends Subscriber(LitElement) {
 
   @state() private _animationState: "visible" | "in" | "out" | "hidden" =
     "hidden";
+  private _adoptedStyleSheets: Array<CSSStyleSheet> = [];
 
   static create(options: ModalCreateOptions): Modal {
     const modal = document.createElement(tagName) as Modal;
@@ -260,6 +265,7 @@ export class Modal extends Subscriber(LitElement) {
     if (options.noCloseButton) modal.noCloseButton = true;
     if (options.closeButtonType)
       modal.closeButtonType = options?.closeButtonType;
+    if (options.styleSheet) modal.styleSheet = options?.styleSheet;
     if (options.paddingX) modal.paddingX = options?.paddingX;
     if (options.paddingY) modal.paddingY = options?.paddingY;
     if (options.zIndex) modal.zIndex = options?.zIndex;
@@ -327,6 +333,10 @@ export class Modal extends Subscriber(LitElement) {
     } else if (changedToHidden && this._animationState === "visible") {
       this.hide();
     }
+
+    if (_changedProperties.has("styleSheet")) {
+      this.syncAdoptedStyleSheets();
+    }
   }
 
   // SI c'est en modal
@@ -393,6 +403,21 @@ export class Modal extends Subscriber(LitElement) {
     `;
   }
 
+  syncAdoptedStyleSheets() {
+    if (!(this.renderRoot instanceof ShadowRoot)) return;
+
+    const nextStyleSheets = normalizeStyleSheets(this.styleSheet);
+    const currentStyleSheets = this.renderRoot.adoptedStyleSheets.filter(
+      (sheet) => !this._adoptedStyleSheets.includes(sheet),
+    );
+
+    this.renderRoot.adoptedStyleSheets = [
+      ...currentStyleSheets,
+      ...nextStyleSheets,
+    ];
+    this._adoptedStyleSheets = nextStyleSheets;
+  }
+
   modalFragment(optionKey: keyof ModalCreateOptions) {
     const optionValue: Object | PrimitiveType = this.options?.[optionKey];
     if (!optionValue) return nothing;
@@ -440,7 +465,7 @@ export class Modal extends Subscriber(LitElement) {
     this.visible = false;
     if (this.hasAttribute("resetDataProviderOnHide")) {
       PublisherManager.get(this.getAttribute("resetDataProviderOnHide")).set(
-        {}
+        {},
       );
     }
     if (this.removeHashOnHide) {
@@ -470,7 +495,7 @@ export class Modal extends Subscriber(LitElement) {
     if (e.key === "Escape") {
       e.preventDefault();
       const visibleModals = Modal.modals.filter(
-        (modal) => modal._animationState !== "hidden" && !modal.forceAction
+        (modal) => modal._animationState !== "hidden" && !modal.forceAction,
       );
       if (visibleModals.length > 0) {
         const lastVisibleModal = visibleModals[visibleModals.length - 1];
@@ -529,8 +554,8 @@ export class Modal extends Subscriber(LitElement) {
               easing: isEntering ? quartOut : quadOut,
               fill: "both",
               delay: delay,
-            }
-          )
+            },
+          ),
         );
         animations.push(
           element.animate(
@@ -540,13 +565,13 @@ export class Modal extends Subscriber(LitElement) {
               easing: linear,
               fill: "both",
               delay: delay,
-            }
-          )
+            },
+          ),
         );
       }
 
       Promise.all(animations.map((anim) => anim.finished)).then(() =>
-        resolve()
+        resolve(),
       );
     });
   }

package/src/docs/search/docs-search.json

@@ -3469,51 +3469,6 @@
       }
     }
   },
-  {
-    "search": "const userKey = new DataProviderKey("demoUser");\nconst settingsKey = new DataProviderKey("demoUserSettings");\n",
-    "files": {
-      "docs/_decorators/on-assign.md": {
-        "title": "@onAssign",
-        "hashes": {
-          "example-with-dataproviderkey-type-safe": {
-            "count": 1,
-            "title": "Example with `DataProviderKey` (type-safe)",
-            "type": "paragraph"
-          }
-        }
-      }
-    }
-  },
-  {
-    "search": "@customElement("demo-on-assign-typed")\nexport class DemoOnAssignTyped extends LitElement {\n  @state() user: User | null = null;\n  @state() settings: Settings | null = null;\n",
-    "files": {
-      "docs/_decorators/on-assign.md": {
-        "title": "@onAssign",
-        "hashes": {
-          "example-with-dataproviderkey-type-safe": {
-            "count": 1,
-            "title": "Example with `DataProviderKey` (type-safe)",
-            "type": "paragraph"
-          }
-        }
-      }
-    }
-  },
-  {
-    "search": "  @onAssign(userKey, settingsKey)\n  handleReady(user: User, settings: Settings) {\n    this.user = user;\n    this.settings = settings;\n    this.requestUpdate();\n  }\n}\n  \n\n",
-    "files": {
-      "docs/_decorators/on-assign.md": {
-        "title": "@onAssign",
-        "hashes": {
-          "example-with-dataproviderkey-type-safe": {
-            "count": 1,
-            "title": "Example with `DataProviderKey` (type-safe)",
-            "type": "paragraph"
-          }
-        }
-      }
-    }
-  },
   {
     "search": "The path uses dot notation to navigate through the publisher structure:\n",
     "files": {

package/src/tsconfig.json

@@ -612,6 +612,15 @@
       "./ui/modal/modal-title": [
         "/sites/concorde/src/core/components/ui/modal/modal-title.ts"
       ],
+      "./modal-utils": [
+        "/sites/concorde/src/core/components/ui/modal/modal-utils.ts"
+      ],
+      "./ui/modal-utils": [
+        "/sites/concorde/src/core/components/ui/modal/modal-utils.ts"
+      ],
+      "./ui/modal/modal-utils": [
+        "/sites/concorde/src/core/components/ui/modal/modal-utils.ts"
+      ],
       "./modal": [
         "/sites/concorde/src/core/components/ui/modal/modal.ts"
       ],

package/src/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./components.ts","./concorde-loaded.ts","./dataprovider.ts","./decorators.ts","./directives.ts","./index.ts","./mixins.ts","./utils.ts","./core/core.ts","./core/_types/endpoint.ts","./core/_types/key.ts","./core/_types/types.ts","./core/components/functional/functional.ts","./core/components/functional/date/date.ts","./core/components/functional/example/example.ts","./core/components/functional/fetch/fetch.ts","./core/components/functional/if/if.test.ts","./core/components/functional/if/if.ts","./core/components/functional/list/list.demo.ts","./core/components/functional/list/list.spec.ts","./core/components/functional/list/list.ts","./core/components/functional/mix/mix.ts","./core/components/functional/queue/queue.demo.ts","./core/components/functional/queue/queue.ts","./core/components/functional/router/redirect.ts","./core/components/functional/router/router.demo.ts","./core/components/functional/router/router.spec.ts","./core/components/functional/router/router.ts","./core/components/functional/sdui/SDUIDescriptorTransformer.ts","./core/components/functional/sdui/sdui-utils.ts","./core/components/functional/sdui/sdui.ts","./core/components/functional/sdui/types.ts","./core/components/functional/sonic-scope/sonic-scope.ts","./core/components/functional/states/states.demo.ts","./core/components/functional/states/states.spec.ts","./core/components/functional/states/states.ts","./core/components/functional/submit/submit.ts","./core/components/functional/subscriber/subscriber.ts","./core/components/functional/translation/translation.ts","./core/components/functional/value/value.ts","./core/components/ui/ui.ts","./core/components/ui/_css/scroll.ts","./core/components/ui/_css/shadow.ts","./core/components/ui/_css/size.ts","./core/components/ui/_css/type.ts","./core/components/ui/alert/alert.ts","./core/components/ui/alert-messages/alert-messages.ts","./core/components/ui/badge/badge.ts","./core/components/ui/button/button.ts","./core/components/ui/captcha/altchaStyles.ts","./core/components/ui/captcha/captcha.ts","./core/components/ui/card/card-footer.ts","./core/components/ui/card/card-header-descripton.ts","./core/components/ui/card/card-header.ts","./core/components/ui/card/card-main.ts","./core/components/ui/card/card.ts","./core/components/ui/divider/divider.ts","./core/components/ui/form/checkbox/checkbox.ts","./core/components/ui/form/css/form-control.ts","./core/components/ui/form/fieldset/fieldset.ts","./core/components/ui/form/fieldset/legend-description.ts","./core/components/ui/form/fieldset/legend.ts","./core/components/ui/form/form-actions/form-actions.ts","./core/components/ui/form/form-layout/form-layout.ts","./core/components/ui/form/input/input.ts","./core/components/ui/form/input/password-helper.ts","./core/components/ui/form/input/same-value-helper.ts","./core/components/ui/form/input-autocomplete/input-autocomplete.ts","./core/components/ui/form/radio/radio.ts","./core/components/ui/form/select/select.ts","./core/components/ui/form/switch/switch.ts","./core/components/ui/form/textarea/textarea.ts","./core/components/ui/group/group.ts","./core/components/ui/icon/icon.stories.ts","./core/components/ui/icon/icon.ts","./core/components/ui/icon/icons.ts","./core/components/ui/image/image.ts","./core/components/ui/link/link.ts","./core/components/ui/loader/loader.stories.ts","./core/components/ui/loader/loader.ts","./core/components/ui/loader/styles/fixed.ts","./core/components/ui/loader/styles/inline.ts","./core/components/ui/menu/menu-item.ts","./core/components/ui/menu/menu.ts","./core/components/ui/modal/modal-actions.ts","./core/components/ui/modal/modal-close.ts","./core/components/ui/modal/modal-content.ts","./core/components/ui/modal/modal-subtitle.ts","./core/components/ui/modal/modal-title.ts","./core/components/ui/modal/modal.ts","./core/components/ui/pop/pop.ts","./core/components/ui/progress/progress.ts","./core/components/ui/table/table-caption.ts","./core/components/ui/table/table-tbody.ts","./core/components/ui/table/table-td.ts","./core/components/ui/table/table-tfoot.ts","./core/components/ui/table/table-th.ts","./core/components/ui/table/table-thead.ts","./core/components/ui/table/table-tr.ts","./core/components/ui/table/table.ts","./core/components/ui/theme/theme.ts","./core/components/ui/theme/theme-collection/core-variables.ts","./core/components/ui/theme/theme-collection/dark.ts","./core/components/ui/theme/theme-collection/light.ts","./core/components/ui/toast/message-subscriber.ts","./core/components/ui/toast/toast-item.ts","./core/components/ui/toast/toast.ts","./core/components/ui/toast/types.ts","./core/components/ui/tooltip/tooltip.ts","./core/decorators/Subscriber.ts","./core/decorators/api.spec.ts","./core/decorators/api.ts","./core/decorators/lifecycle.ts","./core/decorators/subscriber/ancestorAttribute.ts","./core/decorators/subscriber/autoFill.ts","./core/decorators/subscriber/autoSubscribe.ts","./core/decorators/subscriber/bind.ts","./core/decorators/subscriber/common.ts","./core/decorators/subscriber/dynamicPath.ts","./core/decorators/subscriber/dynamicPropertyWatch.ts","./core/decorators/subscriber/onAssign.ts","./core/decorators/subscriber/publish.spec.ts","./core/decorators/subscriber/publish.ts","./core/decorators/subscriber/publisherPath.ts","./core/decorators/subscriber/subscribe.spec.ts","./core/decorators/subscriber/subscribe.ts","./core/directives/DataProvider.ts","./core/directives/Wording.ts","./core/mixins/Fetcher.ts","./core/mixins/FormCheckable.ts","./core/mixins/FormElement.ts","./core/mixins/FormInput.ts","./core/mixins/Subscriber.ts","./core/mixins/TemplatesContainer.ts","./core/mixins/mixins.ts","./core/utils/Arrays.ts","./core/utils/DataBindObserver.ts","./core/utils/Electron.ts","./core/utils/Format.ts","./core/utils/HTML.ts","./core/utils/LocationHandler.ts","./core/utils/Objects.ts","./core/utils/PublisherProxy.ts","./core/utils/Utils.ts","./core/utils/aesCrypto.ts","./core/utils/api.ts","./core/utils/dataProviderKey.spec.ts","./core/utils/dataProviderKey.ts","./core/utils/endpoint.spec.ts","./core/utils/endpoint.ts","./core/utils/route.spec.ts","./core/utils/route.ts","./core/utils/url-pattern.ts","./test-utils/TestUtils.ts"],"version":"5.9.2"}
+{"root":["./components.ts","./concorde-loaded.ts","./dataprovider.ts","./decorators.ts","./directives.ts","./index.ts","./mixins.ts","./utils.ts","./core/core.ts","./core/_types/endpoint.ts","./core/_types/key.ts","./core/_types/types.ts","./core/components/functional/functional.ts","./core/components/functional/date/date.ts","./core/components/functional/example/example.ts","./core/components/functional/fetch/fetch.ts","./core/components/functional/if/if.test.ts","./core/components/functional/if/if.ts","./core/components/functional/list/list.demo.ts","./core/components/functional/list/list.spec.ts","./core/components/functional/list/list.ts","./core/components/functional/mix/mix.ts","./core/components/functional/queue/queue.demo.ts","./core/components/functional/queue/queue.ts","./core/components/functional/router/redirect.ts","./core/components/functional/router/router.demo.ts","./core/components/functional/router/router.spec.ts","./core/components/functional/router/router.ts","./core/components/functional/sdui/SDUIDescriptorTransformer.ts","./core/components/functional/sdui/sdui-utils.ts","./core/components/functional/sdui/sdui.ts","./core/components/functional/sdui/types.ts","./core/components/functional/sonic-scope/sonic-scope.ts","./core/components/functional/states/states.demo.ts","./core/components/functional/states/states.spec.ts","./core/components/functional/states/states.ts","./core/components/functional/submit/submit.ts","./core/components/functional/subscriber/subscriber.ts","./core/components/functional/translation/translation.ts","./core/components/functional/value/value.ts","./core/components/ui/ui.ts","./core/components/ui/_css/scroll.ts","./core/components/ui/_css/shadow.ts","./core/components/ui/_css/size.ts","./core/components/ui/_css/type.ts","./core/components/ui/alert/alert.ts","./core/components/ui/alert-messages/alert-messages.ts","./core/components/ui/badge/badge.ts","./core/components/ui/button/button.ts","./core/components/ui/captcha/altchaStyles.ts","./core/components/ui/captcha/captcha.ts","./core/components/ui/card/card-footer.ts","./core/components/ui/card/card-header-descripton.ts","./core/components/ui/card/card-header.ts","./core/components/ui/card/card-main.ts","./core/components/ui/card/card.ts","./core/components/ui/divider/divider.ts","./core/components/ui/form/checkbox/checkbox.ts","./core/components/ui/form/css/form-control.ts","./core/components/ui/form/fieldset/fieldset.ts","./core/components/ui/form/fieldset/legend-description.ts","./core/components/ui/form/fieldset/legend.ts","./core/components/ui/form/form-actions/form-actions.ts","./core/components/ui/form/form-layout/form-layout.ts","./core/components/ui/form/input/input.ts","./core/components/ui/form/input/password-helper.ts","./core/components/ui/form/input/same-value-helper.ts","./core/components/ui/form/input-autocomplete/input-autocomplete.ts","./core/components/ui/form/radio/radio.ts","./core/components/ui/form/select/select.ts","./core/components/ui/form/switch/switch.ts","./core/components/ui/form/textarea/textarea.ts","./core/components/ui/group/group.ts","./core/components/ui/icon/icon.stories.ts","./core/components/ui/icon/icon.ts","./core/components/ui/icon/icons.ts","./core/components/ui/image/image.ts","./core/components/ui/link/link.ts","./core/components/ui/loader/loader.stories.ts","./core/components/ui/loader/loader.ts","./core/components/ui/loader/styles/fixed.ts","./core/components/ui/loader/styles/inline.ts","./core/components/ui/menu/menu-item.ts","./core/components/ui/menu/menu.ts","./core/components/ui/modal/modal-actions.ts","./core/components/ui/modal/modal-close.ts","./core/components/ui/modal/modal-content.ts","./core/components/ui/modal/modal-subtitle.ts","./core/components/ui/modal/modal-title.ts","./core/components/ui/modal/modal-utils.ts","./core/components/ui/modal/modal.ts","./core/components/ui/pop/pop.ts","./core/components/ui/progress/progress.ts","./core/components/ui/table/table-caption.ts","./core/components/ui/table/table-tbody.ts","./core/components/ui/table/table-td.ts","./core/components/ui/table/table-tfoot.ts","./core/components/ui/table/table-th.ts","./core/components/ui/table/table-thead.ts","./core/components/ui/table/table-tr.ts","./core/components/ui/table/table.ts","./core/components/ui/theme/theme.ts","./core/components/ui/theme/theme-collection/core-variables.ts","./core/components/ui/theme/theme-collection/dark.ts","./core/components/ui/theme/theme-collection/light.ts","./core/components/ui/toast/message-subscriber.ts","./core/components/ui/toast/toast-item.ts","./core/components/ui/toast/toast.ts","./core/components/ui/toast/types.ts","./core/components/ui/tooltip/tooltip.ts","./core/decorators/Subscriber.ts","./core/decorators/api.spec.ts","./core/decorators/api.ts","./core/decorators/lifecycle.ts","./core/decorators/subscriber/ancestorAttribute.ts","./core/decorators/subscriber/autoFill.ts","./core/decorators/subscriber/autoSubscribe.ts","./core/decorators/subscriber/bind.ts","./core/decorators/subscriber/common.ts","./core/decorators/subscriber/dynamicPath.ts","./core/decorators/subscriber/dynamicPropertyWatch.ts","./core/decorators/subscriber/onAssign.ts","./core/decorators/subscriber/publish.spec.ts","./core/decorators/subscriber/publish.ts","./core/decorators/subscriber/publisherPath.ts","./core/decorators/subscriber/subscribe.spec.ts","./core/decorators/subscriber/subscribe.ts","./core/directives/DataProvider.ts","./core/directives/Wording.ts","./core/mixins/Fetcher.ts","./core/mixins/FormCheckable.ts","./core/mixins/FormElement.ts","./core/mixins/FormInput.ts","./core/mixins/Subscriber.ts","./core/mixins/TemplatesContainer.ts","./core/mixins/mixins.ts","./core/utils/Arrays.ts","./core/utils/DataBindObserver.ts","./core/utils/Electron.ts","./core/utils/Format.ts","./core/utils/HTML.ts","./core/utils/LocationHandler.ts","./core/utils/Objects.ts","./core/utils/PublisherProxy.ts","./core/utils/Utils.ts","./core/utils/aesCrypto.ts","./core/utils/api.ts","./core/utils/dataProviderKey.spec.ts","./core/utils/dataProviderKey.ts","./core/utils/endpoint.spec.ts","./core/utils/endpoint.ts","./core/utils/route.spec.ts","./core/utils/route.ts","./core/utils/url-pattern.ts","./test-utils/TestUtils.ts"],"version":"5.9.2"}