@descope/sdk-mixins 0.2.43 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/cjs/index.cjs.js +71 -47
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.d.ts +921 -632
  4. package/dist/index.esm.js +71 -47
  5. package/dist/index.esm.js.map +1 -1
  6. package/package.json +4 -4
package/dist/cjs/index.cjs.js CHANGED
@@ -26,9 +26,9 @@ const loggerMixin = sdkHelpers.createSingletonMixin((superclass) => { var _Logge
26
26
  _LoggerMixinClass_wrapLogger = function _LoggerMixinClass_wrapLogger(logger) {
27
27
  return logLevels.reduce((acc, logLevel) => {
28
28
  acc[logLevel] = (...args) => {
29
- var _a;
29
+ var _b;
30
30
  this.onLogEvent(logLevel, args);
31
- (_a = logger[logLevel]) === null || _a === void 0 ? void 0 : _a.call(logger, ...args);
31
+ (_b = logger[logLevel]) === null || _b === void 0 ? void 0 : _b.call(logger, ...args);
32
32
  };
33
33
  return acc;
34
34
  }, {});
@@ -51,9 +51,9 @@ const initLifecycleMixin = sdkHelpers.createSingletonMixin((superclass) => { var
51
51
  _InitLifecycleMixinClass_isInit.set(this, true);
52
52
  }
53
53
  connectedCallback() {
54
- var _a, _b;
55
- (_a = super.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
56
- if ((_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.isConnected) {
54
+ var _b, _c;
55
+ (_b = super.connectedCallback) === null || _b === void 0 ? void 0 : _b.call(this);
56
+ if ((_c = this.shadowRoot) === null || _c === void 0 ? void 0 : _c.isConnected) {
57
57
  // the init function is running once, on the first time the component is connected
58
58
  if (tslib.__classPrivateFieldGet(this, _InitLifecycleMixinClass_isInit, "f")) {
59
59
  tslib.__classPrivateFieldSet(this, _InitLifecycleMixinClass_isInit, false, "f");
@@ -89,11 +89,11 @@ const observeAttributesMixin = sdkHelpers.createSingletonMixin((superclass) => {
89
89
  _ObserveAttributesMixinClass_observeMappings.set(this, {});
90
90
  }
91
91
  async init() {
92
- var _a;
93
- await ((_a = super.init) === null || _a === void 0 ? void 0 : _a.call(this));
92
+ var _b;
93
+ await ((_b = super.init) === null || _b === void 0 ? void 0 : _b.call(this));
94
94
  attributesObserver(this, (attrName) => {
95
- var _a;
96
- (_a = tslib.__classPrivateFieldGet(this, _ObserveAttributesMixinClass_observeMappings, "f")[attrName]) === null || _a === void 0 ? void 0 : _a.forEach((cb) => {
95
+ var _b;
96
+ (_b = tslib.__classPrivateFieldGet(this, _ObserveAttributesMixinClass_observeMappings, "f")[attrName]) === null || _b === void 0 ? void 0 : _b.forEach((cb) => {
97
97
  cb(attrName, this.getAttribute(attrName));
98
98
  });
99
99
  });
@@ -128,8 +128,8 @@ const createValidateAttributesMixin = (mappings) => (superclass) => {
128
128
  this.observeAttributes(mappingsNames, tslib.__classPrivateFieldGet(this, _ValidateAttributesMixinClass_instances, "m", _ValidateAttributesMixinClass_handleError).bind(this));
129
129
  }
130
130
  async init() {
131
- var _a;
132
- await ((_a = super.init) === null || _a === void 0 ? void 0 : _a.call(this));
131
+ var _b;
132
+ await ((_b = super.init) === null || _b === void 0 ? void 0 : _b.call(this));
133
133
  // check attributes initial values
134
134
  mappingsNames.forEach((attr) => tslib.__classPrivateFieldGet(this, _ValidateAttributesMixinClass_instances, "m", _ValidateAttributesMixinClass_handleError).call(this, attr, this.getAttribute(attr)));
135
135
  }
@@ -158,7 +158,7 @@ const projectIdMixin = sdkHelpers.createSingletonMixin((superclass) => {
158
158
  const baseUrlMixin = sdkHelpers.createSingletonMixin((superclass) => {
159
159
  return class BaseUrlMixinClass extends superclass {
160
160
  get baseUrl() {
161
- return this.getAttribute('base-url');
161
+ return this.getAttribute('base-url') || '';
162
162
  }
163
163
  };
164
164
  });
@@ -233,8 +233,8 @@ const debuggerMixin = sdkHelpers.createSingletonMixin((superclass) => { var _Deb
233
233
  _DebuggerMixinClass_instances.add(this);
234
234
  _DebuggerMixinClass_debuggerEle.set(this, void 0);
235
235
  this.attributeChangedCallback = (attrName, oldValue, newValue) => {
236
- var _a;
237
- (_a = super.attributeChangedCallback) === null || _a === void 0 ? void 0 : _a.call(this, attrName, oldValue, newValue);
236
+ var _b;
237
+ (_b = super.attributeChangedCallback) === null || _b === void 0 ? void 0 : _b.call(this, attrName, oldValue, newValue);
238
238
  if (attrName === 'debug') {
239
239
  tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_instances, "m", _DebuggerMixinClass_handleDebugMode).call(this);
240
240
  }
@@ -244,23 +244,23 @@ const debuggerMixin = sdkHelpers.createSingletonMixin((superclass) => { var _Deb
244
244
  return this.getAttribute('debug') === 'true';
245
245
  }
246
246
  onLogEvent(logLevel, args) {
247
- var _a;
248
- (_a = super.onLogEvent) === null || _a === void 0 ? void 0 : _a.call(this, logLevel, args);
247
+ var _b;
248
+ (_b = super.onLogEvent) === null || _b === void 0 ? void 0 : _b.call(this, logLevel, args);
249
249
  if (logLevel === 'error') {
250
250
  tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_instances, "m", _DebuggerMixinClass_updateDebuggerMessages).call(this, args[0] || 'Error', args[1]);
251
251
  }
252
252
  }
253
253
  async init() {
254
- var _a;
255
- await ((_a = super.init) === null || _a === void 0 ? void 0 : _a.call(this));
254
+ var _b;
255
+ await ((_b = super.init) === null || _b === void 0 ? void 0 : _b.call(this));
256
256
  tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_instances, "m", _DebuggerMixinClass_handleDebugMode).call(this);
257
257
  }
258
258
  },
259
259
  _DebuggerMixinClass_debuggerEle = new WeakMap(),
260
260
  _DebuggerMixinClass_instances = new WeakSet(),
261
261
  _DebuggerMixinClass_disableDebugger = function _DebuggerMixinClass_disableDebugger() {
262
- var _a;
263
- (_a = tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_debuggerEle, "f")) === null || _a === void 0 ? void 0 : _a.remove();
262
+ var _b;
263
+ (_b = tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_debuggerEle, "f")) === null || _b === void 0 ? void 0 : _b.remove();
264
264
  tslib.__classPrivateFieldSet(this, _DebuggerMixinClass_debuggerEle, null, "f");
265
265
  },
266
266
  _DebuggerMixinClass_enableDebugger = async function _DebuggerMixinClass_enableDebugger() {
@@ -285,9 +285,9 @@ const debuggerMixin = sdkHelpers.createSingletonMixin((superclass) => { var _Deb
285
285
  tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_instances, "m", _DebuggerMixinClass_disableDebugger).call(this);
286
286
  },
287
287
  _DebuggerMixinClass_updateDebuggerMessages = function _DebuggerMixinClass_updateDebuggerMessages(title, description) {
288
- var _a;
288
+ var _b;
289
289
  if (title)
290
- (_a = tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_debuggerEle, "f")) === null || _a === void 0 ? void 0 : _a.updateData({ title, description });
290
+ (_b = tslib.__classPrivateFieldGet(this, _DebuggerMixinClass_debuggerEle, "f")) === null || _b === void 0 ? void 0 : _b.updateData({ title, description });
291
291
  },
292
292
  _a; });
293
293
 
@@ -341,9 +341,9 @@ const descopeUiMixin = sdkHelpers.createSingletonMixin((superclass) => {
341
341
  _DescopeUiMixinClass_getComponentsVersion =
342
342
  // eslint-disable-next-line class-methods-use-this
343
343
  async function _DescopeUiMixinClass_getComponentsVersion() {
344
- var _a;
344
+ var _b;
345
345
  const config = await this.config;
346
- const componentsVersion = (_a = config === null || config === void 0 ? void 0 : config.projectConfig) === null || _a === void 0 ? void 0 : _a.componentsVersion;
346
+ const componentsVersion = (_b = config === null || config === void 0 ? void 0 : config.projectConfig) === null || _b === void 0 ? void 0 : _b.componentsVersion;
347
347
  if (!componentsVersion) {
348
348
  this.logger.error('Could not get components version');
349
349
  }
@@ -522,9 +522,9 @@ const modalMixin = sdkHelpers.createSingletonMixin((superclass) => {
522
522
  });
523
523
  }
524
524
  async init() {
525
- var _a;
525
+ var _b;
526
526
  this.loadDescopeUiComponents([MODAL_ELE_TAG]);
527
- await ((_a = super.init) === null || _a === void 0 ? void 0 : _a.call(this));
527
+ await ((_b = super.init) === null || _b === void 0 ? void 0 : _b.call(this));
528
528
  }
529
529
  },
530
530
  _ModalMixinClass_ModalDriverWrapper = new WeakMap(),
@@ -569,8 +569,8 @@ const notificationsMixin = sdkHelpers.createSingletonMixin((superclass) => {
569
569
  });
570
570
  }
571
571
  async init() {
572
- var _a;
573
- await ((_a = super.init) === null || _a === void 0 ? void 0 : _a.call(this));
572
+ var _b;
573
+ await ((_b = super.init) === null || _b === void 0 ? void 0 : _b.call(this));
574
574
  this.loadDescopeUiComponents([NOTIFICATION_ELE_TAG]);
575
575
  }
576
576
  },
@@ -579,7 +579,7 @@ const notificationsMixin = sdkHelpers.createSingletonMixin((superclass) => {
579
579
  });
580
580
 
581
581
  // Those files are saved on a new folder to prevent breaking changes
582
- const THEME_FILENAME = 'theme.json';
582
+ const DEFAULT_STYLE_ID = 'theme';
583
583
 
584
584
  const loadFont = (url) => {
585
585
  const font = document.createElement('link');
@@ -613,27 +613,31 @@ const themeValidation = (_, theme) => (theme || false) &&
613
613
  theme !== 'dark' &&
614
614
  'Supported theme values are "light", "dark", or leave empty for using the OS theme';
615
615
  const themeMixin = sdkHelpers.createSingletonMixin((superclass) => {
616
- var _ThemeMixinClass_instances, _ThemeMixinClass__themeResource, _ThemeMixinClass_fetchTheme, _ThemeMixinClass_themeResource_get, _ThemeMixinClass_loadGlobalStyle, _ThemeMixinClass_loadComponentsStyle, _ThemeMixinClass_loadFonts, _ThemeMixinClass_applyTheme, _a;
616
+ var _ThemeMixinClass_instances, _ThemeMixinClass_globalStyleTag, _ThemeMixinClass__themeResource, _ThemeMixinClass_fetchTheme, _ThemeMixinClass_themeResource_get, _ThemeMixinClass_loadGlobalStyle, _ThemeMixinClass_loadComponentsStyle, _ThemeMixinClass_getFontsConfig, _ThemeMixinClass_loadFonts, _ThemeMixinClass_applyTheme, _a;
617
617
  const BaseClass = sdkHelpers.compose(createValidateAttributesMixin({ theme: themeValidation }), staticResourcesMixin, initLifecycleMixin, descopeUiMixin, configMixin, initElementMixin, observeAttributesMixin)(superclass);
618
618
  return _a = class ThemeMixinClass extends BaseClass {
619
619
  constructor() {
620
620
  super(...arguments);
621
621
  _ThemeMixinClass_instances.add(this);
622
+ _ThemeMixinClass_globalStyleTag.set(this, void 0);
622
623
  _ThemeMixinClass__themeResource.set(this, void 0);
623
624
  }
624
625
  get theme() {
625
- var _a, _b;
626
+ var _b, _c;
626
627
  const theme = this.getAttribute('theme');
627
628
  if (theme === 'os') {
628
629
  const isOsDark = window.matchMedia &&
629
- ((_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-color-scheme: dark)')) === null || _b === void 0 ? void 0 : _b.matches);
630
+ ((_c = (_b = window.matchMedia) === null || _b === void 0 ? void 0 : _b.call(window, '(prefers-color-scheme: dark)')) === null || _c === void 0 ? void 0 : _c.matches);
630
631
  return isOsDark ? 'dark' : 'light';
631
632
  }
632
633
  return theme || 'light';
633
634
  }
635
+ get styleId() {
636
+ return this.getAttribute('style-id') || DEFAULT_STYLE_ID;
637
+ }
634
638
  async init() {
635
- var _a;
636
- await ((_a = super.init) === null || _a === void 0 ? void 0 : _a.call(this));
639
+ var _b;
640
+ await ((_b = super.init) === null || _b === void 0 ? void 0 : _b.call(this));
637
641
  tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadGlobalStyle).call(this);
638
642
  tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadComponentsStyle).call(this);
639
643
  tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadFonts).call(this);
@@ -642,13 +646,20 @@ const themeMixin = sdkHelpers.createSingletonMixin((superclass) => {
642
646
  tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadFonts).call(this);
643
647
  tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_applyTheme).call(this);
644
648
  });
649
+ this.observeAttributes(['style-id'], () => {
650
+ tslib.__classPrivateFieldSet(this, _ThemeMixinClass__themeResource, null, "f");
651
+ tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadFonts).call(this);
652
+ tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadGlobalStyle).call(this);
653
+ tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_loadComponentsStyle).call(this);
654
+ });
645
655
  }
646
656
  },
657
+ _ThemeMixinClass_globalStyleTag = new WeakMap(),
647
658
  _ThemeMixinClass__themeResource = new WeakMap(),
648
659
  _ThemeMixinClass_instances = new WeakSet(),
649
660
  _ThemeMixinClass_fetchTheme = async function _ThemeMixinClass_fetchTheme() {
650
661
  try {
651
- const { body: fetchedTheme } = await this.fetchStaticResource(THEME_FILENAME, 'json');
662
+ const { body: fetchedTheme } = await this.fetchStaticResource(`${this.styleId}.json`, 'json');
652
663
  // In development mode, we sometimes want to override the UI components URL
653
664
  // The override components might have a different theme, so we need to merge it with the project theme in order to see the components correctly
654
665
  if (process.env.NODE_ENV === 'development') {
@@ -685,32 +696,42 @@ const themeMixin = sdkHelpers.createSingletonMixin((superclass) => {
685
696
  return tslib.__classPrivateFieldGet(this, _ThemeMixinClass__themeResource, "f");
686
697
  },
687
698
  _ThemeMixinClass_loadGlobalStyle = async function _ThemeMixinClass_loadGlobalStyle() {
688
- var _a, _b;
699
+ var _b, _c;
689
700
  const theme = await tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "a", _ThemeMixinClass_themeResource_get);
690
701
  if (!theme)
691
702
  return;
692
- const styleEle = document.createElement('style');
693
- styleEle.innerText =
694
- (((_a = theme === null || theme === void 0 ? void 0 : theme.light) === null || _a === void 0 ? void 0 : _a.globals) || '') + (((_b = theme === null || theme === void 0 ? void 0 : theme.dark) === null || _b === void 0 ? void 0 : _b.globals) || '');
695
- this.shadowRoot.appendChild(styleEle);
703
+ if (!tslib.__classPrivateFieldGet(this, _ThemeMixinClass_globalStyleTag, "f")) {
704
+ tslib.__classPrivateFieldSet(this, _ThemeMixinClass_globalStyleTag, document.createElement('style'), "f");
705
+ tslib.__classPrivateFieldGet(this, _ThemeMixinClass_globalStyleTag, "f").id = 'global-style';
706
+ this.shadowRoot.appendChild(tslib.__classPrivateFieldGet(this, _ThemeMixinClass_globalStyleTag, "f"));
707
+ }
708
+ tslib.__classPrivateFieldGet(this, _ThemeMixinClass_globalStyleTag, "f").innerText =
709
+ (((_b = theme === null || theme === void 0 ? void 0 : theme.light) === null || _b === void 0 ? void 0 : _b.globals) || '') + (((_c = theme === null || theme === void 0 ? void 0 : theme.dark) === null || _c === void 0 ? void 0 : _c.globals) || '');
696
710
  },
697
711
  _ThemeMixinClass_loadComponentsStyle = async function _ThemeMixinClass_loadComponentsStyle() {
698
- var _a, _b;
712
+ var _b, _c;
699
713
  const theme = Object.assign({}, (await tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "a", _ThemeMixinClass_themeResource_get)));
700
714
  if (!theme)
701
715
  return;
702
716
  const descopeUi = await this.descopeUi;
703
717
  if (descopeUi === null || descopeUi === void 0 ? void 0 : descopeUi.componentsThemeManager) {
704
718
  descopeUi.componentsThemeManager.themes = {
705
- light: (_a = theme === null || theme === void 0 ? void 0 : theme.light) === null || _a === void 0 ? void 0 : _a.components,
706
- dark: (_b = theme === null || theme === void 0 ? void 0 : theme.dark) === null || _b === void 0 ? void 0 : _b.components,
719
+ light: (_b = theme === null || theme === void 0 ? void 0 : theme.light) === null || _b === void 0 ? void 0 : _b.components,
720
+ dark: (_c = theme === null || theme === void 0 ? void 0 : theme.dark) === null || _c === void 0 ? void 0 : _c.components,
707
721
  };
708
722
  }
709
723
  },
724
+ _ThemeMixinClass_getFontsConfig = async function _ThemeMixinClass_getFontsConfig() {
725
+ var _b, _c;
726
+ const { projectConfig } = (await this.config) || {};
727
+ const newConfig = (_b = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.styles) === null || _b === void 0 ? void 0 : _b[this.styleId];
728
+ const oldConfig = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.cssTemplate;
729
+ const config = newConfig || oldConfig;
730
+ const fonts = (_c = config === null || config === void 0 ? void 0 : config[this.theme]) === null || _c === void 0 ? void 0 : _c.fonts;
731
+ return fonts;
732
+ },
710
733
  _ThemeMixinClass_loadFonts = async function _ThemeMixinClass_loadFonts() {
711
- var _a, _b;
712
- const { projectConfig } = await this.config;
713
- const fonts = (_b = (_a = projectConfig === null || projectConfig === void 0 ? void 0 : projectConfig.cssTemplate) === null || _a === void 0 ? void 0 : _a[this.theme]) === null || _b === void 0 ? void 0 : _b.fonts;
734
+ const fonts = await tslib.__classPrivateFieldGet(this, _ThemeMixinClass_instances, "m", _ThemeMixinClass_getFontsConfig).call(this);
714
735
  if (fonts) {
715
736
  Object.values(fonts).forEach((font) => {
716
737
  if (font.url) {
@@ -719,6 +740,9 @@ const themeMixin = sdkHelpers.createSingletonMixin((superclass) => {
719
740
  }
720
741
  });
721
742
  }
743
+ else {
744
+ this.logger.debug('No fonts to load');
745
+ }
722
746
  },
723
747
  _ThemeMixinClass_applyTheme = async function _ThemeMixinClass_applyTheme() {
724
748
  this.rootElement.setAttribute('data-theme', this.theme);
@@ -822,7 +846,7 @@ const formMixin = sdkHelpers.createSingletonMixin((superclass) => class FormMixi
822
846
  const baseStaticUrlMixin = sdkHelpers.createSingletonMixin((superclass) => {
823
847
  return class BaseStaticUrlMixinClass extends superclass {
824
848
  get baseStaticUrl() {
825
- return this.getAttribute('base-static-url');
849
+ return this.getAttribute('base-static-url') || '';
826
850
  }
827
851
  };
828
852
  });