@cloudflare/realtimekit-ui 1.0.4-staging.1 → 1.0.4-staging.3

package/dist/esm/loader.js

@@ -5775,12 +5775,12 @@ const elementsMap = new Map();
 // Attach elementsMap to global store for consistency
 uiStore.elementsMap = elementsMap;
 uiStore.use({
-    set: (propName, newValue, oldValue) => {
+    set: (propName, newValue) => {
         const elements = elementsMap.get(propName);
         if (elements) {
             elementsMap.set(propName, elements.filter((element) => {
                 const currentValue = element[propName];
-                if (currentValue === oldValue) {
+                if (currentValue !== newValue) {
                     element[propName] = newValue;
                     return true;
                 }
@@ -5810,12 +5810,12 @@ function createPeerStore({ meeting, config, providerId, iconPack, t, size }) {
     // Attach elementsMap to store so appendElement/removeElement can access it
     store.elementsMap = peerElementsMap;
     store.use({
-        set: (propName, newValue, oldValue) => {
+        set: (propName, newValue) => {
             const elements = peerElementsMap.get(propName);
             if (elements) {
                 peerElementsMap.set(propName, elements.filter((element) => {
                     const currentValue = element[propName];
-                    if (currentValue === oldValue) {
+                    if (currentValue !== newValue) {
                         element[propName] = newValue;
                         return true;
                     }
@@ -5948,7 +5948,15 @@ function SyncWithStore() {
                 if (event.detail.requestId === requestId) {
                     // Blindly put peer specific store's value for propName in host propName
                     const storeValue = event.detail.store.state[propName];
-                    host[propName] = storeValue;
+                    host.componentOnReady().then(() => {
+                        /**
+                         * NOTE(ravindra-dyte):
+                         * https://stenciljs.com/docs/api#componentonready
+                         * This psudo ready callback is to ensure that the component is ready to accept props
+                         * Without this, changing the prop would not trigger @Watch of prop in the initial mount phase
+                         *  */
+                        host[propName] = storeValue;
+                    });
                     appendElement(propName, host, event.detail.store);
                     host[`_rtkStoreToCleanup-${propName}`] = event.detail.store;
                     // Since peer specific store is available, remove element prop from global store
@@ -6803,6 +6811,253 @@ const downloadFile = async (link, options) => {
     a.click();
 };
 
+const spacingScale = [
+	0,
+	0.5,
+	1,
+	1.5,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9,
+	10,
+	12,
+	14,
+	16,
+	20,
+	24,
+	28,
+	32,
+	36,
+	40,
+	44,
+	48,
+	52,
+	56,
+	60,
+	64,
+	72,
+	80,
+	96
+];
+
+const THEMES = {
+    darkest: {
+        background: {
+            1000: '#080808',
+            900: '#1A1A1A',
+            800: '#1E1E1E',
+            700: '#2C2C2C',
+            600: '#393939',
+        },
+        text: '#FFFFFF',
+    },
+    dark: {
+        background: {
+            1000: '#252525',
+            900: '#2F2F2F',
+            800: '#323232',
+            700: '#3E3E3E',
+            600: '#4A4A4A',
+        },
+        text: '#F5F5F5',
+        'video-bg': '#1C1C1C',
+    },
+    light: {
+        background: {
+            1000: '#FFFFFF',
+            900: '#F5F5F5',
+            800: '#EBEBEB',
+            700: '#E0E0E0',
+            600: '#D6D6D6',
+        },
+        text: '#111111',
+        'text-on-brand': '#ffffff',
+        'video-bg': '#DADADA',
+    },
+};
+
+const BORDER_WIDTHS = {
+    none: {
+        none: 0,
+        sm: 0,
+        md: 0,
+        lg: 0,
+    },
+    thin: {
+        none: 0,
+        sm: 1,
+        md: 2,
+        lg: 4,
+    },
+    fat: {
+        none: 0,
+        sm: 2,
+        md: 4,
+        lg: 8,
+    },
+};
+const BORDER_RADII = {
+    sharp: {
+        none: 0,
+        sm: 0,
+        md: 0,
+        lg: 0,
+    },
+    rounded: {
+        none: 0,
+        sm: 4,
+        md: 8,
+        lg: 12,
+    },
+    'extra-rounded': {
+        none: 0,
+        sm: 8,
+        md: 16,
+        lg: 24,
+    },
+    circular: {
+        none: 9999,
+        sm: 9999,
+        md: 9999,
+        lg: 9999,
+    },
+};
+
+function hexToRGB(h) {
+    h = h.trim();
+    let r = '0', g = '0', b = '0';
+    if (h.length == 4) {
+        r = '0x' + h[1] + h[1];
+        g = '0x' + h[2] + h[2];
+        b = '0x' + h[3] + h[3];
+    }
+    else if (h.length > 6) {
+        r = '0x' + h[1] + h[2];
+        g = '0x' + h[3] + h[4];
+        b = '0x' + h[5] + h[6];
+    }
+    return [+r, +g, +b];
+}
+const isValidHexColor = (color) => {
+    return typeof color === 'string' && color.length === 7 && color.startsWith('#');
+};
+
+const DEFAULT_CSS_TOKEN_PREFIX = '--rtk-';
+function getToken(token, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) {
+    return tokenPrefix + token;
+}
+const provideGoogleFont = (fontFamily) => {
+    const weights = [400, 500, 700];
+    const links = [];
+    if (document.querySelector('link[data-rtk-font]') == null) {
+        /**
+         * Adds the following preconnect link tags for faster google font loading
+         * <link rel="preconnect" href="https://fonts.googleapis.com">
+         * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+         */
+        const p1 = document.createElement('link');
+        p1.rel = 'preconnect';
+        p1.setAttribute('data-rtk-font', 'true');
+        p1.href = 'https://fonts.googleapis.com';
+        const p2 = p1.cloneNode(true);
+        p2.href = 'https://fonts.gstatic.com';
+        p2.crossOrigin = '';
+        links.push(p1, p2);
+    }
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.setAttribute('data-rtk-font', fontFamily);
+    link.href = encodeURI(`https://fonts.googleapis.com/css2?family=${fontFamily}:wght@${weights.join(';')}&display=swap`);
+    links.push(link);
+    document.head.append(...links);
+};
+const provideSpacing = (el, spacingBase, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
+    spacingScale.forEach((space) => {
+        el.style.setProperty(getToken(`space-${space}`, tokenPrefix), `${space * spacingBase}px`);
+    });
+};
+const provideBorderWidth = (el, borderWidth, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
+    if (borderWidth in BORDER_WIDTHS) {
+        const widths = BORDER_WIDTHS[borderWidth];
+        Object.keys(widths).forEach((type) => {
+            el.style.setProperty(getToken(`border-width-${type}`, tokenPrefix), `${widths[type]}px`);
+        });
+    }
+};
+const provideBorderRadius = (el, borderRadius, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
+    if (borderRadius in BORDER_RADII) {
+        const radii = BORDER_RADII[borderRadius];
+        Object.keys(radii).forEach((type) => {
+            el.style.setProperty(getToken(`border-radius-${type}`, tokenPrefix), `${radii[type]}px`);
+        });
+    }
+};
+const provideColors = (el, colors, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
+    Object.keys(colors).forEach((color) => {
+        const colorValue = colors[color];
+        if (typeof colorValue === 'string') {
+            if (color === 'text' || color === 'text-on-brand') {
+                const rgb = hexToRGB(colorValue).join(' ');
+                el.style.setProperty(getToken(`colors-${color}-1000`, tokenPrefix), `${rgb}`);
+                el.style.setProperty(getToken(`colors-${color}-900`, tokenPrefix), `${rgb} / 0.88`);
+                el.style.setProperty(getToken(`colors-${color}-800`, tokenPrefix), `${rgb} / 0.76`);
+                el.style.setProperty(getToken(`colors-${color}-700`, tokenPrefix), `${rgb} / 0.64`);
+                el.style.setProperty(getToken(`colors-${color}-600`, tokenPrefix), `${rgb} / 0.52`);
+            }
+            else {
+                const rgb = hexToRGB(colorValue).join(' ');
+                el.style.setProperty(getToken(`colors-${color}`, tokenPrefix), rgb);
+            }
+        }
+        else if (typeof colorValue === 'object') {
+            Object.keys(colorValue).forEach((shade) => {
+                const shadeValue = colorValue[shade];
+                const rgb = hexToRGB(shadeValue).join(' ');
+                el.style.setProperty(getToken(`colors-${color}-${shade}`, tokenPrefix), rgb);
+            });
+        }
+    });
+};
+/**
+ * Provides the design system new tokens to consume values from for styling the RealtimeKit UI components.
+ * @param el The element/node you want to _provide_ RTK Design system.
+ * @param tokens The design tokens you want to updated.
+ */
+const provideRtkDesignSystem = (el, { spacingBase, borderRadius, borderWidth, colors, fontFamily, googleFont, theme, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX, }) => {
+    if (typeof el !== 'object') {
+        throw new Error('[rtk-ui-kit] (provideRtkDesignSystem): Passed element is not a valid HTML Element');
+    }
+    if (typeof googleFont === 'string') {
+        provideGoogleFont(googleFont);
+        el.style.setProperty(getToken('font-family', tokenPrefix), googleFont);
+    }
+    if (typeof fontFamily === 'string') {
+        el.style.setProperty(getToken('font-family', tokenPrefix), fontFamily);
+    }
+    if (typeof spacingBase === 'number') {
+        provideSpacing(el, spacingBase, tokenPrefix);
+    }
+    if (typeof borderWidth === 'string') {
+        provideBorderWidth(el, borderWidth, tokenPrefix);
+    }
+    if (typeof borderRadius === 'string') {
+        provideBorderRadius(el, borderRadius, tokenPrefix);
+    }
+    if (typeof theme === 'string') {
+        const colors = THEMES[theme];
+        if (colors != null)
+            provideColors(el, colors, tokenPrefix);
+    }
+    if (typeof colors === 'object') {
+        provideColors(el, colors, tokenPrefix);
+    }
+};
+
 /**
  * This method returns the first argument it receives.
  *
@@ -7393,253 +7648,6 @@ const getSize = (width) => {
         return 'sm';
 };
 
-const spacingScale = [
-	0,
-	0.5,
-	1,
-	1.5,
-	2,
-	3,
-	4,
-	5,
-	6,
-	7,
-	8,
-	9,
-	10,
-	12,
-	14,
-	16,
-	20,
-	24,
-	28,
-	32,
-	36,
-	40,
-	44,
-	48,
-	52,
-	56,
-	60,
-	64,
-	72,
-	80,
-	96
-];
-
-const THEMES = {
-    darkest: {
-        background: {
-            1000: '#080808',
-            900: '#1A1A1A',
-            800: '#1E1E1E',
-            700: '#2C2C2C',
-            600: '#393939',
-        },
-        text: '#FFFFFF',
-    },
-    dark: {
-        background: {
-            1000: '#252525',
-            900: '#2F2F2F',
-            800: '#323232',
-            700: '#3E3E3E',
-            600: '#4A4A4A',
-        },
-        text: '#F5F5F5',
-        'video-bg': '#1C1C1C',
-    },
-    light: {
-        background: {
-            1000: '#FFFFFF',
-            900: '#F5F5F5',
-            800: '#EBEBEB',
-            700: '#E0E0E0',
-            600: '#D6D6D6',
-        },
-        text: '#111111',
-        'text-on-brand': '#ffffff',
-        'video-bg': '#DADADA',
-    },
-};
-
-const BORDER_WIDTHS = {
-    none: {
-        none: 0,
-        sm: 0,
-        md: 0,
-        lg: 0,
-    },
-    thin: {
-        none: 0,
-        sm: 1,
-        md: 2,
-        lg: 4,
-    },
-    fat: {
-        none: 0,
-        sm: 2,
-        md: 4,
-        lg: 8,
-    },
-};
-const BORDER_RADII = {
-    sharp: {
-        none: 0,
-        sm: 0,
-        md: 0,
-        lg: 0,
-    },
-    rounded: {
-        none: 0,
-        sm: 4,
-        md: 8,
-        lg: 12,
-    },
-    'extra-rounded': {
-        none: 0,
-        sm: 8,
-        md: 16,
-        lg: 24,
-    },
-    circular: {
-        none: 9999,
-        sm: 9999,
-        md: 9999,
-        lg: 9999,
-    },
-};
-
-function hexToRGB(h) {
-    h = h.trim();
-    let r = '0', g = '0', b = '0';
-    if (h.length == 4) {
-        r = '0x' + h[1] + h[1];
-        g = '0x' + h[2] + h[2];
-        b = '0x' + h[3] + h[3];
-    }
-    else if (h.length > 6) {
-        r = '0x' + h[1] + h[2];
-        g = '0x' + h[3] + h[4];
-        b = '0x' + h[5] + h[6];
-    }
-    return [+r, +g, +b];
-}
-const isValidHexColor = (color) => {
-    return typeof color === 'string' && color.length === 7 && color.startsWith('#');
-};
-
-const DEFAULT_CSS_TOKEN_PREFIX = '--rtk-';
-function getToken(token, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) {
-    return tokenPrefix + token;
-}
-const provideGoogleFont = (fontFamily) => {
-    const weights = [400, 500, 700];
-    const links = [];
-    if (document.querySelector('link[data-rtk-font]') == null) {
-        /**
-         * Adds the following preconnect link tags for faster google font loading
-         * <link rel="preconnect" href="https://fonts.googleapis.com">
-         * <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-         */
-        const p1 = document.createElement('link');
-        p1.rel = 'preconnect';
-        p1.setAttribute('data-rtk-font', 'true');
-        p1.href = 'https://fonts.googleapis.com';
-        const p2 = p1.cloneNode(true);
-        p2.href = 'https://fonts.gstatic.com';
-        p2.crossOrigin = '';
-        links.push(p1, p2);
-    }
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.setAttribute('data-rtk-font', fontFamily);
-    link.href = encodeURI(`https://fonts.googleapis.com/css2?family=${fontFamily}:wght@${weights.join(';')}&display=swap`);
-    links.push(link);
-    document.head.append(...links);
-};
-const provideSpacing = (el, spacingBase, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
-    spacingScale.forEach((space) => {
-        el.style.setProperty(getToken(`space-${space}`, tokenPrefix), `${space * spacingBase}px`);
-    });
-};
-const provideBorderWidth = (el, borderWidth, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
-    if (borderWidth in BORDER_WIDTHS) {
-        const widths = BORDER_WIDTHS[borderWidth];
-        Object.keys(widths).forEach((type) => {
-            el.style.setProperty(getToken(`border-width-${type}`, tokenPrefix), `${widths[type]}px`);
-        });
-    }
-};
-const provideBorderRadius = (el, borderRadius, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
-    if (borderRadius in BORDER_RADII) {
-        const radii = BORDER_RADII[borderRadius];
-        Object.keys(radii).forEach((type) => {
-            el.style.setProperty(getToken(`border-radius-${type}`, tokenPrefix), `${radii[type]}px`);
-        });
-    }
-};
-const provideColors = (el, colors, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX) => {
-    Object.keys(colors).forEach((color) => {
-        const colorValue = colors[color];
-        if (typeof colorValue === 'string') {
-            if (color === 'text' || color === 'text-on-brand') {
-                const rgb = hexToRGB(colorValue).join(' ');
-                el.style.setProperty(getToken(`colors-${color}-1000`, tokenPrefix), `${rgb}`);
-                el.style.setProperty(getToken(`colors-${color}-900`, tokenPrefix), `${rgb} / 0.88`);
-                el.style.setProperty(getToken(`colors-${color}-800`, tokenPrefix), `${rgb} / 0.76`);
-                el.style.setProperty(getToken(`colors-${color}-700`, tokenPrefix), `${rgb} / 0.64`);
-                el.style.setProperty(getToken(`colors-${color}-600`, tokenPrefix), `${rgb} / 0.52`);
-            }
-            else {
-                const rgb = hexToRGB(colorValue).join(' ');
-                el.style.setProperty(getToken(`colors-${color}`, tokenPrefix), rgb);
-            }
-        }
-        else if (typeof colorValue === 'object') {
-            Object.keys(colorValue).forEach((shade) => {
-                const shadeValue = colorValue[shade];
-                const rgb = hexToRGB(shadeValue).join(' ');
-                el.style.setProperty(getToken(`colors-${color}-${shade}`, tokenPrefix), rgb);
-            });
-        }
-    });
-};
-/**
- * Provides the design system new tokens to consume values from for styling the RealtimeKit UI components.
- * @param el The element/node you want to _provide_ RTK Design system.
- * @param tokens The design tokens you want to updated.
- */
-const provideRtkDesignSystem = (el, { spacingBase, borderRadius, borderWidth, colors, fontFamily, googleFont, theme, tokenPrefix = DEFAULT_CSS_TOKEN_PREFIX, }) => {
-    if (typeof el !== 'object') {
-        throw new Error('[rtk-ui-kit] (provideRtkDesignSystem): Passed element is not a valid HTML Element');
-    }
-    if (typeof googleFont === 'string') {
-        provideGoogleFont(googleFont);
-        el.style.setProperty(getToken('font-family', tokenPrefix), googleFont);
-    }
-    if (typeof fontFamily === 'string') {
-        el.style.setProperty(getToken('font-family', tokenPrefix), fontFamily);
-    }
-    if (typeof spacingBase === 'number') {
-        provideSpacing(el, spacingBase, tokenPrefix);
-    }
-    if (typeof borderWidth === 'string') {
-        provideBorderWidth(el, borderWidth, tokenPrefix);
-    }
-    if (typeof borderRadius === 'string') {
-        provideBorderRadius(el, borderRadius, tokenPrefix);
-    }
-    if (typeof theme === 'string') {
-        const colors = THEMES[theme];
-        if (colors != null)
-            provideColors(el, colors, tokenPrefix);
-    }
-    if (typeof colors === 'object') {
-        provideColors(el, colors, tokenPrefix);
-    }
-};
-
 /**
  * Extend the default UI Config with your own
  * @param config Your extended UI Config
@@ -24638,6 +24646,11 @@ const RtkUiProvider = class {
         if (this.peerStore) {
             this.peerStore.state.config = config;
         }
+        if ((config === null || config === void 0 ? void 0 : config.designTokens) &&
+            typeof document !== 'undefined' &&
+            (this.peerStore || uiStore).state.states.activeDebugger !== true) {
+            provideRtkDesignSystem(document.documentElement, config.designTokens);
+        }
     }
     onSizeChange(newSize) {
         if (this.peerStore) {