@cloudflare/realtimekit-ui 0.0.0 → 1.0.0-staging.10

package/dist/components/rtk-mixed-grid.js

@@ -0,0 +1,298 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { d as defaultConfig, a as defaultIconPack, c as useLanguage } from './p-e6d09c50.js';
+import { d as defaultGridSize } from './p-b13ddb7d.js';
+import { R as Render } from './p-60fdbd75.js';
+import { S as SyncWithStore } from './p-d5791958.js';
+import { d as defineCustomElement$7 } from './p-4cc0e9a5.js';
+import { d as defineCustomElement$6 } from './p-2f2fb96d.js';
+import { d as defineCustomElement$5 } from './p-e2b78972.js';
+import { d as defineCustomElement$4 } from './p-a24309fd.js';
+import { d as defineCustomElement$3 } from './p-260b86da.js';
+import { d as defineCustomElement$2 } from './p-e3b59650.js';
+
+const rtkMixedGridCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block;height:100%;width:100%;display:flex}main{display:flex;flex:1 1 0%;padding-left:var(--rtk-space-4, 16px)}:host([layout='column']) main{padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}main rtk-tab-bar{margin-right:var(--rtk-space-4, 16px);box-sizing:border-box;display:flex;height:100%;width:var(--rtk-space-16, 64px);flex-direction:column}main #tabs{height:100%;flex:1 1 0%}rtk-button{z-index:10}.grid-width-sm{width:25%}.grid-width-md{width:50%}.grid-width-lg{width:66.666667%}.col{display:flex;flex-direction:column;align-items:center}.tab{display:flex;height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px);align-items:center;justify-content:center;margin-bottom:var(--rtk-space-2, 8px);font-size:12px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}.tab.active{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}.tab img{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px);border-radius:var(--rtk-border-radius-sm, 4px)}:host([size='sm']){flex-direction:column}:host([size='sm']) .grid-width-lg,:host([size='sm']) .grid-width-md{height:50%;width:100%;max-width:100%}:host([size='sm']) .grid-width-sm{height:33.333333%;width:100%;max-width:100%}:host([size='sm']) main{display:flex;flex:1 1 0%;flex-direction:column;padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}:host([size='sm']) rtk-tab-bar{height:var(--rtk-space-12, 48px);width:100%;flex-direction:row}:host([size='sm']) #tabs{flex:1 1 0%}:host([size='sm']) .tab{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-2, 8px)}:host([layout='column']){flex-direction:column}:host([layout='column']) main{display:flex;flex:1 1 0%}:host([layout='column']) .grid-width-lg,:host([layout='column']) .grid-width-md{height:50%;max-width:100%;width:100%}:host([layout='column']) .grid-width-sm{height:33.333333%;max-width:100%;width:100%}@media (orientation: portrait){:host{flex-direction:column}:host .grid-width-lg{height:50%;width:100%;max-width:100%}:host .grid-width-md{height:33.333333%;width:100%;max-width:100%}:host .grid-width-sm{height:25%;width:100%;max-width:100%}:host main{flex:1 1 0%;flex-direction:column;padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}:host([size='md']) main{flex:1 1 0%;flex-direction:column;padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}:host rtk-tab-bar{height:var(--rtk-space-16, 64px);width:100%;flex-direction:row}:host #tabs{flex:1 1 0%}:host .tab{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-2, 8px)}}@media (orientation: landscape){:host{flex-direction:row}:host([size='sm']){flex-direction:row}:host .grid-width-lg{height:50%;width:100%;max-width:100%}:host([size='sm']) .grid-width-sm{height:100%;max-height:100%;width:16.666667%}:host([size='sm']) main{flex:1 1 0%;flex-direction:row;padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}:host([size='md']) main{flex:1 1 0%;flex-direction:row;padding-left:var(--rtk-space-4, 16px);padding-right:var(--rtk-space-4, 16px)}:host([size='sm']) rtk-tab-bar{margin-right:var(--rtk-space-2, 8px);height:100%;width:var(--rtk-space-12, 48px);flex-direction:column}:host #tabs{flex:1 1 0%}:host .tab{margin:var(--rtk-space-0, 0px);margin-right:var(--rtk-space-2, 8px)}}";
+const RtkMixedGridStyle0 = rtkMixedGridCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkMixedGrid$1 = /*@__PURE__*/ proxyCustomElement(class RtkMixedGrid extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Grid Layout */
+        this.layout = 'row';
+        /** Participants */
+        this.participants = [];
+        /** Pinned Participants */
+        this.pinnedParticipants = [];
+        /** Screenshare Participants */
+        this.screenShareParticipants = [];
+        /** Active Plugins */
+        this.plugins = [];
+        /**
+         * Aspect Ratio of participant tile
+         *
+         * Format: `width:height`
+         */
+        this.aspectRatio = '16:9';
+        /** Gap between participant tiles */
+        this.gap = 8;
+        /** UI Config */
+        this.config = defaultConfig;
+        /** Icon Pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Grid size */
+        this.gridSize = defaultGridSize;
+    }
+    componentWillLoad() {
+        // initialise states
+        this.initialised = false;
+        this.screenShareParticipantsChanged(this.screenShareParticipants);
+        this.pluginsChanged(this.plugins);
+        this.initialised = true;
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.removeListener('activeTabUpdate', this.activeTabUpdateListener);
+    }
+    meetingChanged(meeting) {
+        var _a, _b, _c, _d;
+        if (meeting != null) {
+            if (((_a = meeting.meta) === null || _a === void 0 ? void 0 : _a.selfActiveTab) != undefined) {
+                this.onActiveTabUpdate((_b = meeting.meta.selfActiveTab) === null || _b === void 0 ? void 0 : _b.type, (_c = meeting.meta.selfActiveTab) === null || _c === void 0 ? void 0 : _c.id);
+            }
+            this.activeTabUpdateListener = (activeTab) => {
+                this.onActiveTabUpdate(activeTab === null || activeTab === void 0 ? void 0 : activeTab.type, activeTab === null || activeTab === void 0 ? void 0 : activeTab.id);
+            };
+            (_d = meeting.meta) === null || _d === void 0 ? void 0 : _d.addListener('activeTabUpdate', this.activeTabUpdateListener);
+        }
+    }
+    screenShareParticipantsChanged(participants = []) {
+        // If active tab has already been initialised by spotlight then don't change tab.
+        if (!this.initialised && this.activeTab != null)
+            return;
+        if (this.activeTab == null && participants.length > 0) {
+            this.setActiveTab({ type: 'screenshare', participant: participants[0] });
+        }
+        else {
+            this.revalidateActiveTab();
+        }
+    }
+    pluginsChanged(plugins) {
+        // If active tab has already been initialised by spotlight then don't change tab.
+        if (!this.initialised && this.activeTab != null)
+            return;
+        if (plugins.length > 0) {
+            const lastIndex = plugins.length - 1;
+            this.setActiveTab({ type: 'plugin', plugin: plugins[lastIndex] });
+        }
+        else {
+            this.revalidateActiveTab();
+        }
+    }
+    revalidateActiveTab() {
+        if (this.activeTab != null) {
+            if (this.activeTab.type === 'screenshare') {
+                const { participant } = this.activeTab;
+                if (!this.screenShareParticipants.some((p) => p.id === participant.id)) {
+                    this.reassignActiveTab();
+                }
+            }
+            else {
+                const { plugin } = this.activeTab;
+                if (!this.plugins.some((p) => p.id === plugin.id)) {
+                    this.reassignActiveTab();
+                }
+            }
+        }
+    }
+    setActiveTab(activeTab, shouldUpdateSelfActiveTab = true) {
+        var _a;
+        this.activeTab = activeTab;
+        const id = activeTab.type === 'screenshare' ? activeTab.participant.id : activeTab.plugin.id;
+        if (shouldUpdateSelfActiveTab)
+            (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.setSelfActiveTab({ type: activeTab.type, id }, 0);
+    }
+    reassignActiveTab() {
+        if (this.screenShareParticipants.length > 0) {
+            this.setActiveTab({ type: 'screenshare', participant: this.screenShareParticipants[0] });
+        }
+        else if (this.plugins.length > 0) {
+            const lastIndex = this.plugins.length - 1;
+            this.setActiveTab({ type: 'plugin', plugin: this.plugins[lastIndex] });
+        }
+    }
+    onActiveTabUpdate(type, id) {
+        if (type == undefined)
+            return;
+        if (id == undefined)
+            return;
+        switch (type) {
+            case 'plugin':
+                const plugin = this.plugins.find((p) => p.id === id);
+                if (plugin != undefined)
+                    this.setActiveTab({ type: 'plugin', plugin }, false);
+                break;
+            case 'screenshare':
+                const participant = this.screenShareParticipants.find((ssp) => ssp.id === id);
+                if (participant != undefined)
+                    this.setActiveTab({ type: 'screenshare', participant }, false);
+        }
+    }
+    getTabs() {
+        const screenshares = this.screenShareParticipants.map((participant) => ({
+            type: 'screenshare',
+            participant,
+        }));
+        const plugins = this.plugins.map((plugin) => ({ type: 'plugin', plugin }));
+        return screenshares.concat(plugins);
+    }
+    render() {
+        var _a, _b;
+        const defaults = {
+            meeting: this.meeting,
+            config: this.config,
+            states: this.states,
+            size: this.size,
+            iconPack: this.iconPack,
+            t: this.t,
+        };
+        return (h(Host, { key: '52e26a16c20eee51ac0f3d01d932df88d58acb05' }, h("main", { key: '1838e7498d579bf70346bf921c9f3966721a1eea', id: "main-view", part: "main-view" }, ((_a = this.getTabs()) === null || _a === void 0 ? void 0 : _a.length) > 1 && (h("rtk-tab-bar", Object.assign({ key: 'b3f5f77e4b0bd36d12014881f0507c9de6e613af', activeTab: this.activeTab, tabs: this.getTabs(), onTabChange: (e) => this.setActiveTab(e.detail) }, defaults))), h("div", { id: "tabs", key: "tabs" }, this.screenShareParticipants.map((participant) => {
+            var _a, _b;
+            return (h(Render, { element: "rtk-screenshare-view", defaults: defaults, props: {
+                    participant,
+                    key: participant.id,
+                    style: {
+                        display: ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.type) === 'screenshare' &&
+                            ((_b = this.activeTab) === null || _b === void 0 ? void 0 : _b.participant.id) === participant.id
+                            ? 'flex'
+                            : 'none',
+                    },
+                }, childProps: { participant, isScreenShare: true }, deepProps: true }));
+        }), this.plugins.map((plugin) => {
+            var _a, _b;
+            return (h("rtk-plugin-main", Object.assign({}, defaults, { plugin: plugin, key: plugin.id, style: {
+                    display: ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.type) === 'plugin' && ((_b = this.activeTab) === null || _b === void 0 ? void 0 : _b.plugin.id) === plugin.id
+                        ? 'flex'
+                        : 'none',
+                } })));
+        }))), h(Render, { key: 'c3a9ce4706096e385fc522a37e3de7d9d30d1b70', element: "rtk-mixed-grid", defaults: defaults, childProps: {
+                part: 'participants-grid',
+                class: this.gridSize.mixed ? `grid-width-${this.gridSize.mixed}` : 'grid-width-lg',
+                participants: this.participants,
+                pinnedParticipants: this.pinnedParticipants,
+                screenShareParticipants: this.screenShareParticipants,
+                plugins: this.plugins,
+                aspectRatio: this.aspectRatio,
+                gap: this.gap,
+                size: ((_b = this.meeting.meta) === null || _b === void 0 ? void 0 : _b.viewType) === 'AUDIO_ROOM' ? 'md' : 'sm',
+                layout: 'row',
+            }, onlyChildren: true })));
+    }
+    get host() { return this; }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"],
+        "screenShareParticipants": ["screenShareParticipantsChanged"],
+        "plugins": ["pluginsChanged"]
+    }; }
+    static get style() { return RtkMixedGridStyle0; }
+}, [1, "rtk-mixed-grid", {
+        "layout": [513],
+        "participants": [16],
+        "pinnedParticipants": [16],
+        "screenShareParticipants": [16],
+        "plugins": [16],
+        "aspectRatio": [1, "aspect-ratio"],
+        "gap": [2],
+        "size": [513],
+        "meeting": [16],
+        "states": [16],
+        "config": [16],
+        "iconPack": [16],
+        "t": [16],
+        "gridSize": [16],
+        "activeTab": [32],
+        "initialised": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"],
+        "screenShareParticipants": ["screenShareParticipantsChanged"],
+        "plugins": ["pluginsChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkMixedGrid$1.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMixedGrid$1.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMixedGrid$1.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMixedGrid$1.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMixedGrid$1.prototype, "t", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-mixed-grid", "rtk-button", "rtk-icon", "rtk-plugin-main", "rtk-spotlight-indicator", "rtk-tab-bar", "rtk-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-mixed-grid":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkMixedGrid$1);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "rtk-plugin-main":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-spotlight-indicator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-tab-bar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const RtkMixedGrid = RtkMixedGrid$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkMixedGrid, defineCustomElement };

package/dist/components/rtk-more-toggle.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkMoreToggle extends Components.RtkMoreToggle, HTMLElement {}
+export const RtkMoreToggle: {
+    prototype: RtkMoreToggle;
+    new (): RtkMoreToggle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/rtk-more-toggle.js

@@ -0,0 +1,115 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-e6d09c50.js';
+import { S as SyncWithStore } from './p-d5791958.js';
+import { d as defineCustomElement$4 } from './p-6acaa07e.js';
+import { d as defineCustomElement$3 } from './p-2f2fb96d.js';
+import { d as defineCustomElement$2 } from './p-81f4e985.js';
+
+const rtkMoreToggleCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{position:relative;display:flex;flex-direction:column;overflow:visible}.more-menu{position:absolute;right:calc(var(--rtk-space-24, 96px) * -1);bottom:var(--rtk-space-16, 64px);z-index:50;margin-bottom:var(--rtk-space-3, 12px);box-sizing:border-box;max-height:60vh;width:var(--rtk-space-64, 256px);overflow:auto;border-radius:var(--rtk-border-radius-md, 8px);border-width:var(--rtk-border-width-sm, 1px);border-style:solid;--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-border-opacity));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity));outline:2px solid transparent;outline-offset:2px;display:flex;flex-direction:column;align-items:stretch}:host([size='sm']) .more-menu{bottom:var(--rtk-space-10, 40px)}.more-menu::-webkit-scrollbar{height:var(--rtk-space-0, 0px);width:var(--rtk-space-1\\.5, 6px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity))}.more-menu::-webkit-scrollbar-thumb{border-radius:var(--rtk-border-radius-sm, 4px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}";
+const RtkMoreToggleStyle0 = rtkMoreToggleCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkMoreToggle$1 = /*@__PURE__*/ proxyCustomElement(class RtkMoreToggle extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.handleKeyDown = ({ key }) => {
+            if (key === 'Escape') {
+                this.stateUpdate.emit({ activeMoreMenu: false });
+            }
+        };
+        this.handleOnClick = (e) => {
+            if (!e.composedPath().includes(this.host) && this.states.activeMoreMenu) {
+                this.stateUpdate.emit({ activeMoreMenu: false });
+            }
+        };
+        this.toggleMoreMenu = () => {
+            this.stateUpdate.emit({ activeMoreMenu: !this.states.activeMoreMenu });
+        };
+    }
+    connectedCallback() {
+        /** A11y */
+        window.addEventListener('keydown', this.handleKeyDown);
+        window.addEventListener('click', this.handleOnClick);
+        // };
+    }
+    disconnectedCallback() {
+        window.removeEventListener('keydown', this.handleKeyDown);
+        window.removeEventListener('click', this.handleOnClick);
+    }
+    render() {
+        const text = this.t('more');
+        return (h(Host, { key: 'cc4c42c7e70920678ccd5504299cc2ea132ba082', title: text }, this.states.activeMoreMenu && (h("div", { key: '4e15d624377561cc3bfac660822041079387d15c', class: "more-menu" }, h("slot", { key: '83c8c81d94edbed4d30143fe4a0a9fc77f7c3883', name: "more-elements" }))), h("rtk-controlbar-button", { key: '1b88da49b3bd62fc05f43e83743935cbe1848bdf', size: this.size, iconPack: this.iconPack, onClick: (e) => {
+                e.stopPropagation();
+                this.toggleMoreMenu();
+            }, icon: this.iconPack.horizontal_dots, label: text, part: "controlbar-button" }), h("slot", { key: '06155b80eabc3aa0c8495c5bc447af457acdd038', name: "expanded" })));
+    }
+    get host() { return this; }
+    static get style() { return RtkMoreToggleStyle0; }
+}, [1, "rtk-more-toggle", {
+        "states": [16],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkMoreToggle$1.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMoreToggle$1.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMoreToggle$1.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMoreToggle$1.prototype, "t", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-more-toggle", "rtk-controlbar-button", "rtk-icon", "rtk-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-more-toggle":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkMoreToggle$1);
+            }
+            break;
+        case "rtk-controlbar-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const RtkMoreToggle = RtkMoreToggle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkMoreToggle, defineCustomElement };

package/dist/components/rtk-mute-all-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkMuteAllButton extends Components.RtkMuteAllButton, HTMLElement {}
+export const RtkMuteAllButton: {
+    prototype: RtkMuteAllButton;
+    new (): RtkMuteAllButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/rtk-mute-all-button.js

@@ -0,0 +1,128 @@
+import { p as proxyCustomElement, H, d as createEvent, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-e6d09c50.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-d5791958.js';
+import { d as defineCustomElement$5 } from './p-6acaa07e.js';
+import { d as defineCustomElement$4 } from './p-2f2fb96d.js';
+import { d as defineCustomElement$3 } from './p-81f4e985.js';
+import { d as defineCustomElement$2 } from './p-e3b59650.js';
+
+const rtkMuteAllButtonCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block}";
+const RtkMuteAllButtonStyle0 = rtkMuteAllButtonCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkMuteAllButton$1 = /*@__PURE__*/ proxyCustomElement(class RtkMuteAllButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        /** Variant */
+        this.variant = 'button';
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.canDisable = false;
+        this.permissionsUpdateListener = () => {
+            var _a;
+            this.canDisable = !!((_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.permissions.canDisableParticipantAudio);
+        };
+        this.onMuteAll = () => {
+            this.stateUpdate.emit({ activeMuteAllConfirmation: true });
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_c = (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self) === null || _b === void 0 ? void 0 : _b.permissions) === null || _c === void 0 ? void 0 : _c.removeListener('permissionsUpdate', this.permissionsUpdateListener);
+    }
+    meetingChanged(meeting) {
+        if (!meeting)
+            return;
+        this.canDisable = !!(meeting === null || meeting === void 0 ? void 0 : meeting.self.permissions.canDisableParticipantAudio);
+        meeting.self.permissions.addListener('permissionsUpdate', this.permissionsUpdateListener);
+    }
+    render() {
+        if (!this.canDisable) {
+            return null;
+        }
+        const label = this.t('mute_all');
+        return (h(Host, { title: label }, h("rtk-tooltip", { kind: "block", label: label, part: "tooltip" }, h("rtk-controlbar-button", { part: "controlbar-button", icon: this.iconPack.speaker_off, label: label, size: this.size, iconPack: this.iconPack, variant: this.variant, onClick: this.onMuteAll }))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkMuteAllButtonStyle0; }
+}, [1, "rtk-mute-all-button", {
+        "variant": [513],
+        "meeting": [16],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "canDisable": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkMuteAllButton$1.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMuteAllButton$1.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMuteAllButton$1.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkMuteAllButton$1.prototype, "t", void 0);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-mute-all-button", "rtk-controlbar-button", "rtk-icon", "rtk-spinner", "rtk-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-mute-all-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkMuteAllButton$1);
+            }
+            break;
+        case "rtk-controlbar-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const RtkMuteAllButton = RtkMuteAllButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkMuteAllButton, defineCustomElement };

package/dist/components/rtk-mute-all-confirmation.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkMuteAllConfirmation extends Components.RtkMuteAllConfirmation, HTMLElement {}
+export const RtkMuteAllConfirmation: {
+    prototype: RtkMuteAllConfirmation;
+    new (): RtkMuteAllConfirmation;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/rtk-mute-all-confirmation.js

@@ -0,0 +1,6 @@
+import { R as RtkMuteAllConfirmation$1, d as defineCustomElement$1 } from './p-135d5d2f.js';
+
+const RtkMuteAllConfirmation = RtkMuteAllConfirmation$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkMuteAllConfirmation, defineCustomElement };

package/dist/components/rtk-name-tag.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkNameTag extends Components.RtkNameTag, HTMLElement {}
+export const RtkNameTag: {
+    prototype: RtkNameTag;
+    new (): RtkNameTag;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/rtk-name-tag.js

@@ -0,0 +1,6 @@
+import { R as RtkNameTag$1, d as defineCustomElement$1 } from './p-10759cad.js';
+
+const RtkNameTag = RtkNameTag$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { RtkNameTag, defineCustomElement };

package/dist/components/rtk-network-indicator.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RtkNetworkIndicator extends Components.RtkNetworkIndicator, HTMLElement {}
+export const RtkNetworkIndicator: {
+    prototype: RtkNetworkIndicator;
+    new (): RtkNetworkIndicator;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;