@cloudflare/realtimekit-ui 0.0.0 → 0.1.0

package/dist/components/p-afce90ce.js

@@ -0,0 +1,150 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as getBatteryLevelVerdict, e as getBatteryChargingVerdict, f as getOverallBatteryVerdict } from './p-0e02697c.js';
+
+const rtkDebuggerSystemCss = ":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)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}:host{position:relative;display:flex;flex-direction:column;overflow:hidden;height:100%;width:100%;color:rgb(var(--rtk-colors-text-1000, 255 255 255));--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity))}.tab-body::-webkit-scrollbar{width:var(--rtk-space-1\\.5, 6px);border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-1000, 8 8 8) / var(--tw-bg-opacity))}.tab-body::-webkit-scrollbar-thumb{border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}h3{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px);font-size:16px;font-weight:600}#header{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-5, 20px);display:flex;align-items:center;justify-content:space-evenly}.tab-body{margin:var(--rtk-space-4, 16px);display:flex;height:100%;flex-direction:column;justify-content:space-between;overflow-y:auto}.status-container{border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));border-radius:8px;padding:16px}.status-section{margin-bottom:12px}.section-header{display:flex;justify-content:space-between;align-items:center;font-weight:bold;padding:8px 0}.section-body.missing-stats{display:flex;text-align:center;justify-content:center}.section-header .status{color:rgba(var(--rtk-colors-success));font-weight:bold}.section-header .arrow{font-size:14px}.battery-table{border:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60));border-radius:8px;margin-top:8px;overflow:hidden}.battery-row{display:flex;justify-content:space-between;padding:12px;border-bottom:var(--rtk-border-width-sm, 1px) solid rgb(var(--rtk-colors-background-600, 60 60 60))}.battery-row:last-child{border-bottom:none}.battery-cell{display:flex;flex-direction:column}.battery-cell.label strong{font-size:14px}.battery-cell.label .description{font-size:12px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));margin-top:4px}.battery-cell.value{text-align:right}.status.good{color:rgba(var(--rtk-colors-success))}.status.average{color:rgba(var(--rtk-colors-warning))}.status.poor{color:rgba(var(--rtk-colors-danger))}.value{font-size:14px;color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64));margin-top:4px}rtk-settings-video{display:flex;flex-direction:column}";
+const RtkDebuggerSystemStyle0 = rtkDebuggerSystemCss;
+
+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 RtkDebuggerSystem = /*@__PURE__*/ proxyCustomElement(class RtkDebuggerSystem extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Is Network section expanded */
+        this.isBatterySectionOpen = true;
+        /** Summarised health of network stats */
+        this.batterySectionHealth = null;
+        /** Battery manager */
+        this.battery = null;
+        /** Stats as formatted array to display */
+        this.batteryFormattedStats = [];
+        this.batteryUpdateListener = () => {
+            const batteryLevelPercentage = Math.round(this.battery.level * 100);
+            const newBatteryStats = [];
+            newBatteryStats.push({
+                name: this.t('debugger.system.battery.level.label'),
+                value: `${batteryLevelPercentage}%`,
+                description: this.t('debugger.system.battery.level.description'),
+                verdict: getBatteryLevelVerdict({
+                    batteryLevelPercentage,
+                }),
+            });
+            newBatteryStats.push({
+                name: this.t('debugger.system.battery.charging.label'),
+                value: `${this.battery.charging
+                    ? this.t('debugger.system.battery.charging.is_charging')
+                    : this.t('debugger.system.battery.charging.is_not_charging')}`,
+                description: this.t('debugger.system.battery.charging.description'),
+                verdict: getBatteryChargingVerdict({
+                    batteryLevelPercentage,
+                    chargingTimeInSeconds: this.battery.chargingTime,
+                    dischargingTimeInSeconds: this.battery.dischargingTime,
+                    charging: this.battery.charging,
+                }),
+            });
+            this.batterySectionHealth = getOverallBatteryVerdict({
+                stats: newBatteryStats,
+            });
+            this.batteryFormattedStats = newBatteryStats;
+        };
+    }
+    toggleSection(section) {
+        if (section === 'battery')
+            this.isBatterySectionOpen = !this.isBatterySectionOpen;
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        if (!this.meeting) {
+            return;
+        }
+        if (this.battery) {
+            this.battery.removeEventListener('levelchange', this.batteryUpdateListener);
+            this.battery.removeEventListener('chargingchange', this.batteryUpdateListener);
+        }
+    }
+    async meetingChanged(meeting) {
+        if (!meeting)
+            return;
+        if (typeof navigator.getBattery !== 'undefined') {
+            this.battery = await navigator.getBattery();
+            this.battery.addEventListener('levelchange', this.batteryUpdateListener);
+            this.battery.addEventListener('chargingchange', this.batteryUpdateListener);
+            this.batteryUpdateListener();
+        }
+    }
+    render() {
+        var _a, _b;
+        if (!this.meeting) {
+            return;
+        }
+        return (h(Host, null, h("div", { id: "header" }), h("div", { class: "tab-body" }, h("div", { class: "status-container" }, h("div", { class: "status-section" }, h("div", { class: "section-header", onClick: () => this.toggleSection('battery') }, h("span", null, this.t('debugger.system.sections.battery')), this.batterySectionHealth && (h("span", { class: `status ${(_a = this.batterySectionHealth) === null || _a === void 0 ? void 0 : _a.toLowerCase()}` }, this.t(`debugger.quality.${(_b = this.batterySectionHealth) === null || _b === void 0 ? void 0 : _b.toLowerCase()}`)))), this.isBatterySectionOpen && !!this.batteryFormattedStats.length && (h("div", { class: "section-body battery-table" }, this.batteryFormattedStats.map((formattedStatsObj) => {
+            var _a, _b;
+            return (h("div", { class: "battery-row" }, h("div", { class: "battery-cell label" }, h("strong", null, formattedStatsObj.name), h("span", { class: "description" }, formattedStatsObj.description)), h("div", { class: "battery-cell value" }, h("span", { class: `status ${(_a = formattedStatsObj.verdict) === null || _a === void 0 ? void 0 : _a.toLowerCase()}` }, this.t(`debugger.quality.${(_b = formattedStatsObj.verdict) === null || _b === void 0 ? void 0 : _b.toLowerCase()}`)), h("span", { class: "value" }, formattedStatsObj.value))));
+        }))))))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkDebuggerSystemStyle0; }
+}, [1, "rtk-debugger-system", {
+        "meeting": [16],
+        "states": [16],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "isBatterySectionOpen": [32],
+        "batterySectionHealth": [32],
+        "battery": [32],
+        "batteryFormattedStats": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerSystem.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerSystem.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerSystem.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerSystem.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkDebuggerSystem.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-debugger-system"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-debugger-system":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkDebuggerSystem);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkDebuggerSystem as R, defineCustomElement as d };

package/dist/components/p-b13ddb7d.js

@@ -0,0 +1,96 @@
+function roundDown(num, places) {
+    const factor = Math.pow(10, places);
+    return Math.floor(num * factor) / factor;
+}
+function useGrid({ dimensions, count, aspectRatio, gap }) {
+    const { width, height, rows, cols } = useGridItemDimensions({
+        dimensions,
+        count,
+        aspectRatio,
+        gap,
+    });
+    const getPosition = useGridPositioning({
+        parentDimensions: dimensions,
+        dimensions: { width, height },
+        rows,
+        cols,
+        count,
+        gap,
+    });
+    return { width, height, getPosition };
+}
+function useGridItemDimensions({ count, dimensions, aspectRatio, gap, }) {
+    let { width: W, height: H } = dimensions;
+    if (W === 0 || H === 0)
+        return { width: 0, height: 0, rows: 1, cols: 1 };
+    W -= gap * 2;
+    H -= gap * 2;
+    const s = gap, N = count;
+    const r = getAspectRatio(aspectRatio);
+    let w = 0, h = 0;
+    let a = 1, b = 1;
+    const widths = [];
+    for (let n = 1; n <= N; n++) {
+        widths.push((W - s * (n - 1)) / n);
+        widths.push((H - s * (n - 1)) / (n * r));
+    }
+    // sort in descending order, largest first
+    widths.sort((a, b) => b - a);
+    for (const width of widths) {
+        // We fix the precision to 4 decimal places to prevent
+        // floating point overflow errors. Anyway, accuracy above
+        // 4 decimal places does not really matter.
+        w = roundDown(width, 4);
+        h = roundDown(w * r, 4);
+        a = Math.floor((W + s) / (w + s));
+        b = Math.floor((H + s) / (h + s));
+        if (a * b >= N) {
+            // recalculate rows, as row calculated above can be inaccurate
+            b = Math.ceil(N / a);
+            break;
+        }
+    }
+    return { width: w, height: h, rows: b, cols: a };
+}
+function useGridPositioning({ parentDimensions, dimensions, rows, cols, count, gap, }) {
+    const { width: W, height: H } = parentDimensions;
+    const { width: w, height: h } = dimensions;
+    const firstTop = (H - (h * rows + (rows - 1) * gap)) / 2;
+    let firstLeft = (W - (w * cols + (cols - 1) * gap)) / 2;
+    const topAdd = h + gap;
+    const leftAdd = w + gap;
+    let col = 0, row = 0;
+    const incompleteRowCols = count % cols;
+    function getPosition(index) {
+        const remaining = count - index;
+        if (remaining === incompleteRowCols) {
+            // in last row with incomplete columns, recalculate firstLeft to make it centered
+            firstLeft = (W - (w * remaining + (remaining - 1) * gap)) / 2;
+        }
+        const top = firstTop + row * topAdd;
+        const left = firstLeft + col * leftAdd;
+        col++;
+        if ((index + 1) % cols === 0) {
+            // if a row has been traversed completely, increment row, reset col
+            row++;
+            col = 0;
+        }
+        return { top, left };
+    }
+    return getPosition;
+}
+/**
+ * Parses the Aspect Ratio value
+ * @param ratio The aspect ratio in the format of `16:9` where `width:height`
+ * @returns The parsed value of aspect ratio
+ */
+const getAspectRatio = (ratio) => {
+    const [width, height] = ratio.split(':');
+    return Number.parseInt(height) / Number.parseInt(width);
+};
+const defaultGridSize = {
+    spotlight: 'sm',
+    mixed: 'sm',
+};
+
+export { defaultGridSize as d, useGrid as u };

package/dist/components/p-b1f57d50.js

@@ -0,0 +1,118 @@
+import { p as proxyCustomElement, H, h, e as Host } from './p-c3592601.js';
+import { a as defaultIconPack, c as useLanguage } from './p-9bcf0d04.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$2 } from './p-3d754c34.js';
+import { d as defineCustomElement$1 } from './p-4f0299cf.js';
+
+const rtkSpotlightIndicatorCss = ":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{font-size:12px}#sync-button{flex-direction:row;border-radius:var(--rtk-border-radius-sm, 4px);padding-left:var(--rtk-space-1, 4px);display:flex;align-items:center;justify-content:center;margin-bottom:var(--rtk-space-1, 4px);font-size:12px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}:host([size='sm']) rtk-tooltip,:host([size='md']) rtk-tooltip{width:100%}:host([size='sm'])>#sync-button{height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px);padding-left:var(--rtk-space-0, 0px)}:host([size='md'])>#sync-button{height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px)}:host([size='lg'])>#sync-button{flex-direction:row;height:var(--rtk-space-8, 32px);width:var(--rtk-space-16, 64px)}@media (orientation: portrait){:host([size='lg']) #sync-button{flex-direction:column-reverse;height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px)}:host([size='md']) #sync-button{height:var(--rtk-space-16, 64px);width:var(--rtk-space-16, 64px)}:host([size='sm']) #sync-button{height:var(--rtk-space-10, 40px);width:var(--rtk-space-16, 64px);flex-direction:row}}#sync-button>rtk-icon{max-height:14px}#sync-button rtk-icon{--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}:host([size='sm']) #sync-button>rtk-icon{width:auto}#sync-button.active rtk-icon{color:rgb(var(--rtk-colors-text-1000, 255 255 255))}div{align-content:center;line-height:2rem}rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-8, 32px)}#sync-button.active{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-success, 98 165 4) / var(--tw-bg-opacity))}";
+const RtkSpotlightIndicatorStyle0 = rtkSpotlightIndicatorCss;
+
+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 RtkSpotlightIndicator = /*@__PURE__*/ proxyCustomElement(class RtkSpotlightIndicator extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.permissionsUpdateListener = () => {
+            this.canSpotlight = this.meeting.self.permissions.canSpotlight;
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.permissions.removeListener('permissionsUpdate', this.permissionsUpdateListener);
+    }
+    meetingChanged(meeting) {
+        var _a, _b;
+        if (meeting != null) {
+            this.canSpotlight = meeting.self.permissions.canSpotlight;
+            this.isSpotlighted = (_b = (_a = meeting.meta) === null || _a === void 0 ? void 0 : _a.broadcastTabChanges) !== null && _b !== void 0 ? _b : false;
+            meeting.self.permissions.addListener('permissionsUpdate', this.permissionsUpdateListener);
+        }
+    }
+    updateSpotlightState(shouldBroadcastTabChanges) {
+        var _a;
+        try {
+            (_a = this.meeting.meta) === null || _a === void 0 ? void 0 : _a.setBroadcastTabChanges(shouldBroadcastTabChanges);
+            this.isSpotlighted = shouldBroadcastTabChanges;
+        }
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.error(e);
+        }
+    }
+    render() {
+        if (!this.canSpotlight)
+            return;
+        return (h(Host, null, h("rtk-tooltip", { size: 'md', label: this.t('remote_access.indicator') }, h("div", { id: "sync-button", class: {
+                tab: true,
+                active: this.isSpotlighted,
+            }, onClick: () => this.updateSpotlightState(!this.isSpotlighted) }, h("span", { class: "name" }, "Sync"), h("rtk-icon", { id: "icon", icon: this.isSpotlighted ? this.iconPack.checkmark : this.iconPack.warning, tabIndex: -1, "aria-hidden": true })))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkSpotlightIndicatorStyle0; }
+}, [1, "rtk-spotlight-indicator", {
+        "meeting": [16],
+        "iconPack": [16],
+        "t": [16],
+        "size": [513],
+        "canSpotlight": [32],
+        "isSpotlighted": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkSpotlightIndicator.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkSpotlightIndicator.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkSpotlightIndicator.prototype, "t", void 0);
+__decorate([
+    SyncWithStore()
+], RtkSpotlightIndicator.prototype, "size", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-spotlight-indicator", "rtk-icon", "rtk-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-spotlight-indicator":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkSpotlightIndicator);
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkSpotlightIndicator as R, defineCustomElement as d };

package/dist/components/p-b661e73e.js

@@ -0,0 +1,24 @@
+import { i as getElement } from './p-c3592601.js';
+import { f as appendElement, r as removeElement, u as uiStore } from './p-9bcf0d04.js';
+
+function SyncWithStore() {
+    return function (proto, propName) {
+        const { connectedCallback, disconnectedCallback } = proto;
+        proto.connectedCallback = function () {
+            const host = getElement(this);
+            const value = host[propName];
+            if (!value) {
+                const storeValue = uiStore.state[propName];
+                host[propName] = storeValue;
+                appendElement(propName, host);
+            }
+            return connectedCallback === null || connectedCallback === void 0 ? void 0 : connectedCallback.call(this);
+        };
+        proto.disconnectedCallback = function () {
+            removeElement(propName, getElement(this));
+            return disconnectedCallback === null || disconnectedCallback === void 0 ? void 0 : disconnectedCallback.call(this);
+        };
+    };
+}
+
+export { SyncWithStore as S };

package/dist/components/p-b7fe585f.js

@@ -0,0 +1,134 @@
+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-9bcf0d04.js';
+import { b as getPreference, s as setPreference } from './p-a83ccdbd.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$4 } from './p-8fd7ccbf.js';
+import { d as defineCustomElement$3 } from './p-3d754c34.js';
+import { d as defineCustomElement$2 } from './p-62471047.js';
+import { d as defineCustomElement$1 } from './p-2134aa95.js';
+
+const rtkSettingsVideoCss = ":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)}.rtk-select{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.rtk-select:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.rtk-select{display:block;border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--rtk-space-3, 12px);font-size:16px;--icon-size:var(--rtk-select-chevron-size, var(--rtk-space-6, 24px));--icon-right-position:var(--rtk-select-chevron-right-position, var(--rtk-space-2, 8px));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");background-position:right var(--icon-right-position) center;background-repeat:no-repeat;background-size:var(--icon-size) var(--icon-size);padding-right:calc(var(--icon-right-position) * 5)}:host{display:flex;width:100%;flex-direction:column}.rtk-select{width:100%;text-overflow:ellipsis}rtk-participant-tile{margin-left:auto;margin-right:auto;margin-bottom:var(--rtk-space-4, 16px);max-width:100%}#icon{padding-bottom:var(--rtk-space-1, 4px)}.apply-button{height:var(--rtk-space-10, 40px)}label{-webkit-user-select:none;-moz-user-select:none;user-select:none;font-size:14px}.group{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px)}.group>*{margin-bottom:var(--rtk-space-2, 8px)}.group>*:last-child{margin-bottom:var(--rtk-space-0, 0px)}.group select{flex:1 1 0%}.row{display:flex;align-items:center;justify-content:space-between;gap:var(--rtk-space-3, 12px)}.section{display:flex;flex-direction:column}@media only screen and (max-height: 480px) and (orientation: landscape){:host{flex-direction:row}:host([size='sm']){flex-direction:row}.section[part='tile-preview']{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);max-height:90%;max-width:40%;flex-shrink:1}.section[part='video-settings']{margin-left:var(--rtk-space-2, 8px);margin-right:var(--rtk-space-2, 8px);flex-grow:1}}";
+const RtkSettingsVideoStyle0 = rtkSettingsVideoCss;
+
+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 RtkSettingsVideo = /*@__PURE__*/ proxyCustomElement(class RtkSettingsVideo extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.stateUpdate = createEvent(this, "rtkStateUpdate", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.onVideoUpdate = (videoState) => {
+            this.videoEnabled = videoState.videoEnabled;
+        };
+    }
+    componentDidLoad() {
+        this.meetingChanged(this.meeting);
+    }
+    meetingChanged(meeting) {
+        var _a;
+        if (meeting == null)
+            return;
+        this.videoEnabled = meeting.self.videoEnabled;
+        (_a = meeting.self) === null || _a === void 0 ? void 0 : _a.addListener('videoUpdate', this.onVideoUpdate);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.meeting.self) === null || _a === void 0 ? void 0 : _a.removeListener('videoUpdate', this.onVideoUpdate);
+    }
+    render() {
+        var _a, _b, _c;
+        if (this.meeting == null)
+            return null;
+        const defaults = {
+            meeting: this.meeting,
+            states: this.states,
+            size: this.size,
+            iconPack: this.iconPack,
+            t: this.t,
+        };
+        const states = this.states;
+        const initialMirrorPreference = ((_a = states === null || states === void 0 ? void 0 : states.prefs) === null || _a === void 0 ? void 0 : _a.mirrorVideo) === true || getPreference('mirror-video') === 'true';
+        return (h(Host, null, h("div", { class: "section", part: "tile-preview" }, h("div", { class: "group", part: "tile-preview" }, this.videoEnabled === true ? (h("rtk-participant-tile", { meeting: this.meeting, participant: (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self, iconPack: this.iconPack, t: this.t, states: states, size: this.size, isPreview: true })) : (h("div", { class: "camera-off-helper" }, h("rtk-participant-tile", { meeting: this.meeting, participant: (_c = this.meeting) === null || _c === void 0 ? void 0 : _c.self, size: this.size }, h("div", null, h("rtk-icon", { id: "icon", icon: this.iconPack.video_off, tabIndex: -1, "aria-hidden": true }), h("div", null, this.t('settings.camera_off')))))))), h("rtk-camera-selector", Object.assign({}, defaults)), h("div", { class: "group", part: "mirror-toggle" }, h("div", { class: "row" }, h("label", { htmlFor: "mirror-toggle" }, this.t('settings.mirror_video')), h("rtk-switch", { checked: initialMirrorPreference, iconPack: this.iconPack, t: this.t, onRtkChange: (e) => {
+                const { checked } = e.target;
+                this.stateUpdate.emit({ prefs: { mirrorVideo: checked } });
+                setPreference('mirror-video', checked);
+            } })))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+    static get style() { return RtkSettingsVideoStyle0; }
+}, [1, "rtk-settings-video", {
+        "meeting": [16],
+        "states": [16],
+        "size": [513],
+        "iconPack": [16],
+        "t": [16],
+        "videoEnabled": [32]
+    }, undefined, {
+        "meeting": ["meetingChanged"]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkSettingsVideo.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkSettingsVideo.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkSettingsVideo.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkSettingsVideo.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkSettingsVideo.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-settings-video", "rtk-camera-selector", "rtk-icon", "rtk-participant-tile", "rtk-switch"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-settings-video":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkSettingsVideo);
+            }
+            break;
+        case "rtk-camera-selector":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "rtk-participant-tile":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-switch":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkSettingsVideo as R, defineCustomElement as d };

package/dist/components/p-b9089444.js

@@ -0,0 +1,119 @@
+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-9bcf0d04.js';
+import { S as SyncWithStore } from './p-b661e73e.js';
+import { d as defineCustomElement$2 } from './p-92a1602c.js';
+import { d as defineCustomElement$1 } from './p-3d754c34.js';
+
+const rtkPollFormCss = ":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)}.scrollbar{scrollbar-width:thin;scrollbar-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))\n    var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar{height:var(--rtk-space-1\\.5, 6px);width:var(--rtk-space-1\\.5, 6px);border-radius:9999px;background-color:var(--rtk-scrollbar-background, transparent)}.scrollbar::-webkit-scrollbar-thumb{border-radius:9999px;background-color:var(--rtk-scrollbar-color, rgb(var(--rtk-colors-background-600, 60 60 60)))}.create-poll{margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);display:flex;flex:1 1 0%;flex-direction:column;padding:var(--rtk-space-3, 12px);border-radius:var(--rtk-border-radius-md, 8px);--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity))}.create-poll p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px);text-align:center}.create-poll textarea{display:flex;border-radius:var(--rtk-border-radius-sm, 4px);padding:var(--rtk-space-2, 8px);font-family:var(--rtk-font-family, sans-serif);border-width:var(--rtk-border-width-none, 0);border-style:none;font-weight:500;outline:2px solid transparent;outline-offset:2px;margin-top:var(--rtk-space-3, 12px);margin-bottom:var(--rtk-space-3, 12px);resize:vertical;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.create-poll textarea:focus{outline-style:solid;outline-offset:2px;outline-color:rgb(var(--rtk-colors-background-600, 60 60 60))}.option{display:flex;flex-direction:row;align-items:center;margin-bottom:var(--rtk-space-3, 12px);width:100%}.option input{width:100%;border-radius:var(--rtk-border-radius-sm, 4px);padding:var(--rtk-space-2, 8px);border-width:var(--rtk-border-width-none, 0);border-style:none;outline:2px solid transparent;outline-offset:2px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-900, 26 26 26) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-700, 255 255 255 / 0.64))}.remove-option{margin-left:var(--rtk-space-2, 8px);width:var(--rtk-space-10, 40px);border-radius:var(--rtk-border-radius-sm, 4px)}.add-option{margin-bottom:var(--rtk-space-3, 12px)}label{margin-bottom:var(--rtk-space-3, 12px)}.error-text{margin-top:var(--rtk-space-3, 12px);text-align:center;font-size:12px;--tw-text-opacity:1;color:rgba(var(--rtk-colors-danger, 255 45 45) / var(--tw-text-opacity))}";
+const RtkPollFormStyle0 = rtkPollFormCss;
+
+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 RtkPoll = /*@__PURE__*/ proxyCustomElement(class RtkPoll extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.onCreate = createEvent(this, "rtkCreatePoll", 7);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Options */
+        this.options = ['', ''];
+        this.anonymous = false;
+        this.hideVotes = true;
+    }
+    removeOption(index) {
+        var _a;
+        this.options = this.options.filter((_, ind) => ind !== index);
+        if (((_a = this.error) === null || _a === void 0 ? void 0 : _a.code) === 1)
+            this.error = undefined;
+    }
+    addOption() {
+        this.options = [...this.options, ''];
+    }
+    updateOption(ev, index) {
+        var _a;
+        this.options[index] = ev.target.value;
+        if (((_a = this.error) === null || _a === void 0 ? void 0 : _a.code) === 1)
+            this.error = undefined;
+    }
+    handleSubmit() {
+        const pollObject = {
+            question: this.question.value,
+            options: this.options,
+            anonymous: this.anonymous,
+            hideVotes: this.anonymous ? true : this.hideVotes,
+        };
+        if (!pollObject.question) {
+            this.error = {
+                code: 0,
+                message: this.t('polls.errors.question_required'),
+            };
+            return;
+        }
+        if (this.options.filter((op) => op.trim() === '').length > 0) {
+            this.error = {
+                code: 1,
+                message: this.t('polls.errors.empty_option'),
+            };
+            return;
+        }
+        this.onCreate.emit(pollObject);
+    }
+    render() {
+        return (h(Host, { key: 'a5d66ad4586b3e3bf360fc7f3330cbebfcc27d29' }, h("div", { key: 'ab293118b0a4e4f0839da8b1f28e8bb4c3075e00', class: "create-poll" }, h("p", { key: 'dd851c73436db148c85fa4ae605841acc4047114' }, this.t('polls.question')), h("textarea", { key: 'f2fc86324169b0eb23eccbf6f9a9425b2fa43cef', onInput: () => {
+                if (this.error && this.error.code === 0)
+                    this.error = undefined;
+            }, ref: (e) => (this.question = e), placeholder: this.t('polls.question.placeholder') }), this.options.map((item, index) => (h("div", { class: "option" }, h("input", { placeholder: this.t('polls.option.placeholder'), value: item, onInput: (event) => this.updateOption(event, index) }), index > 1 && (h("rtk-button", { kind: "icon", class: "auto remove-option", variant: "secondary", onClick: () => this.removeOption(index) }, h("rtk-icon", { icon: this.iconPack.subtract })))))), h("rtk-button", { key: 'd33f567bcd74edf4ace17cd3a0ca36daf69eeb8c', class: "add-option", variant: "secondary", onClick: () => this.addOption() }, this.t('polls.option')), h("label", { key: '1ded9b5aeec6b5b5fec3cc2ec43c488b48a0568b' }, h("input", { key: '37047cb8a6ccb8c37fc56261fb2f32fa0ff19d92', id: "anonymous", type: "checkbox", onChange: (e) => (this.anonymous = e.target.checked) }), this.t('polls.results.anon')), h("label", { key: '50ac11b8af600d337cc2a1d8ec934e1abac7eaf6' }, h("input", { key: '6d3df46887a4285d923cc2f8b82abf396a2df8fa', id: "hideVotes", type: "checkbox", disabled: this.anonymous, checked: this.anonymous ? true : this.hideVotes, onChange: (e) => (this.hideVotes = e.target.checked) }), this.t('polls.results.hide')), h("rtk-button", { key: '36f2228ca82a29f9d72f768fa65028690230a26f', kind: "wide", onClick: () => this.handleSubmit() }, this.t('polls.create')), this.error && h("span", { key: 'fe7a37df641bcf672e8c85a87251df19d8d1fc91', class: "error-text" }, this.error.message))));
+    }
+    static get style() { return RtkPollFormStyle0; }
+}, [1, "rtk-poll-form", {
+        "iconPack": [16],
+        "t": [16],
+        "options": [32],
+        "anonymous": [32],
+        "hideVotes": [32],
+        "error": [32]
+    }]);
+__decorate([
+    SyncWithStore()
+], RtkPoll.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkPoll.prototype, "t", void 0);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["rtk-poll-form", "rtk-button", "rtk-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "rtk-poll-form":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, RtkPoll);
+            }
+            break;
+        case "rtk-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "rtk-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { RtkPoll as R, defineCustomElement as d };