architwin 1.14.15 → 1.15.0

package/lib/atwinui/components/toolbar/tagIotForm.js

@@ -1,391 +0,0 @@
-import { IOT_LINKED_SYSTEMS, SPACE_EVENTS } from '../../../types';
-import log from 'loglevel';
-import i18n from './i18n';
-import { dispatchSpaceEvent, _tagIotCategoryTypes, _tagIotDevices } from '../../../architwin';
-import { stringContains } from "../../../utils";
-import { batchAddEventListenerByClassName } from '../../events';
-let selectedIoTCatOption;
-let selectedIoTDeviceOption;
-export let iotTagFormMode = "ADD" /* FORM_MODE.ADD */;
-let tagIotName, iotModelName, iotSerialName, iotMfrName, iotSystemLink;
-let selectedIoTCatId;
-let linkedDevicesArray = [];
-export function renderTagIOTForm() {
-    const element = document.createElement('div');
-    element.classList.add('at_container');
-    element.classList.add('at_w-12');
-    element.classList.add('at_h-full');
-    element.setAttribute('id', 'at-tag-iot-form-pane');
-    element.setAttribute('data-cy', 'at-tag-iot-form-pane');
-    element.innerHTML = `
-    <div class="at_panel_header">
-      <span>${i18n.t('Add IOT Tag')}</span>
-    </div>
-
-    <div class="at_form_container at_scrollable_container at_h-min-70">
-      <label for="">${i18n.t('Linked Systems')}</label>
-        <div class="at_gap_2" style="display: inline-flex">
-          <label class="at_flex at_align_center at_text_xs at_gap_1">
-            <input type="radio" id="at-linked-radio-bemac" name="iot-link-system" checked value=${IOT_LINKED_SYSTEMS.BEMAC} selected />
-              ${i18n.t("BEMAC")}
-          </label>
-          <label class="at_flex at_align_center at_text_xs at_gap_1">
-            <input type="radio" id="at-linked-radio-hanasys" name="iot-link-system" value=${IOT_LINKED_SYSTEMS.HANASYS} />
-              ${i18n.t("HANASYS")}
-          </label>
-          <label class="at_flex at_align_center at_text_xs at_gap_1">
-            <input type="radio" id="at-linked-radio-link" name="iot-link-system" value=${IOT_LINKED_SYSTEMS.URL_LINK} />
-              ${i18n.t("URL Link")}
-          </label>
-        </div>
-
-        <div class="at_field at_flex_column">
-         <label for="">${i18n.t('Category')}</label>
-          <div id="at-iot-category-dropdown" data-cy="at-iot-category-dropdown">
-            <div id="at-iot-cat-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
-              <div class="at_dropdown_toggle" id="at-iot-selected-cat" data-cy="at-iot-selected-cat">${i18n.t(selectedIoTCatOption)}</div>
-                  <span class="mdi mdi-chevron-down at_chevron" id="at-iot-cat-filter-chevron" data-cy="at-iot-cat-filter-chevron"></span>
-              </div>
-                    
-              <div style="position:absolute;">
-                <div class="at_dropdown_options" id="at-iot-category-options" data-cy="at-iot-category-options">
-
-                </div>
-              </div>
-
-            </div>
-          </div>
-
-        <div class="at-field at_flex_row at_justify_between">
-            <label for="">${i18n.t('TagName')}</label>
-            <input class="at_field_input at_w-full" type="text" name="tag_name" id="at-iot-name-input" data-cy="at-iot-name-input" placeholder="Sample..." />
-        </div>
-
-        <div class="at-field at_flex_row at_justify_between">
-            <label for="">${i18n.t('Model Name')}</label>
-            <input class="at_field_input at_w-full" type="text" name="model_name" id="at-iot-model-input" data-cy="at-iot-model-input" placeholder="Sample..." />
-        </div>
-
-        <div class="at-field at_flex_row at_justify_between">
-            <label for="">${i18n.t('Serial Number')}</label>
-            <input class="at_field_input at_w-full" type="text" name="serial_name" id="at-iot-serial-input" data-cy="at-iot-serial-input" placeholder="Sample..." />
-        </div>
-
-        <div class="at-field at_flex_row at_justify_between">
-            <label for="">${i18n.t('Manufacturer Site')}</label>
-            <input class="at_field_input at_w-full" type="text" name="manufacturer_site" id="at-iot-manufacturer-input" data-cy="at-iot-manufacturer-input" placeholder="Sample..." />
-        </div>
-
-        <div class="at-field at_flex_row at_justify_between" id="at-iot-system-link-container">
-            <label for="">${i18n.t('System Link')}</label>
-            <input class="at_field_input at_w-full" type="text" name="system_link" id="at-iot-system-link-input" data-cy="at-iot-system-link-input" placeholder="Sample..." />
-        </div>
-
-        <div class="at_button at_ghost" id="at-iot-move-btn" data-cy="at-iot-move-btn" style="top: 4px !important">
-            <label for="" style="bottom: 10px !important" class="at_comment_unsend_container">${i18n.t('MoveTag')}</label>
-            <span class="mdi mdi-map-marker at_icon" style="bottom: 9px !important"></span>
-        </div>
-
-        <div class="at_field at_flex_column" id="at-iot-device-main-container">
-         <label for="">${i18n.t('IoT Devices')}</label>
-          <div id="at-iot-devices-dropdown" data-cy="at-iot-devices-dropdown">
-            <div id="at-setting-map-filter-dropdown" class="at_dropdown at_flex at_flex_row at_space_between">    
-              <div class="at_dropdown_toggle" id="at-iot-selected-device" data-cy="at-iot-selected-device">${i18n.t(selectedIoTDeviceOption)}</div>
-                <span class="mdi mdi-chevron-down at_chevron" id="at-iot-cat-filter-chevron" data-cy="at-iot-cat-filter-chevron"></span>
-              </div>
-                    
-              <div style="position:absolute;">
-                <div class="at_dropdown_options" id="at-iot-device-options" data-cy="at-iot-device-options">
-
-              </div>
-          </div>
-        </div>
-
-        <div class="at_partition_list_container at_h-min-40" id="at-iot-device-list-container" data-cy="at-iot-device-list-container">
-
-            <div class="at_partition_item_container at_scrollable_container" id="at-linked-device-container" data-cy="at-linked-device-container">
-            
-              <div class="at_partition_title" id="at-iot-linked-devices">
-                <div> </div>
-                <label for="">${i18n.t('Linked to Devices')}</label>
-                <div> </div>
-              </div> 
-
-            </div>
-
-        </div>
-
-      </div>
-    </div>
-
-    <div class="at_button_row at_justify_between">
-      <div class="at_button at_ghost" style="margin-top: auto;"  id="at-cancel-iot-tag-form-btn" data-cy="at-cancel-iot-tag-form-btn" target-pane="at-tag-list-pane">
-          <label for="" id="at-cancel-tag-form-btn">${i18n.t('Cancel')}</label>
-      </div>
-
-      <div class="at_button at_ghost" id="at-save-iot-btn" data-cy="at-save-iot-btn">
-          <label for="">${i18n.t('Save')}</label>
-      </div>
-    </div>
-    `;
-    return element;
-}
-function setSelectedIoTCat(payload) {
-    log.info('setSelectedIoTCat()', payload);
-    const selectedOption = document.getElementById('at-iot-selected-cat');
-    selectedOption.innerText = payload;
-}
-function setSelectedIoTDevice(payload) {
-    log.info('setSelectedIoTDevice()', payload);
-    const selectedDevice = document.getElementById('at-iot-selected-device');
-    selectedDevice.innerText = payload;
-}
-function setInputFields() {
-    log.info('setInputFields()');
-    tagIotName = document.getElementById('at-iot-name-input');
-    iotModelName = document.getElementById('at-iot-model-input');
-    iotSerialName = document.getElementById('at-iot-serial-input');
-    iotMfrName = document.getElementById('at-iot-manufacturer-input');
-    iotSystemLink = document.getElementById('at-iot-system-link-input');
-}
-export function setIotCategoryOptions() {
-    log.info('setIotCategoryOptions()');
-    dispatchSpaceEvent(SPACE_EVENTS.GET_IOT_CATEGORIES, { payload: 'hello from library' });
-    renderIotCategoryDropdownOptions('at-iot-category-options', _tagIotCategoryTypes);
-    batchAddEventListenerByClassName('at_iot_cat_option', (event) => {
-        //@ts-ignore
-        const selectedCat = event.target;
-        const dataCy = selectedCat.getAttribute('data-cy');
-        const match = dataCy.match(/^at-iot-category-option-(.+)$/);
-        const selectedId = match ? match[1] : null;
-        selectedIoTCatId = selectedId.toString();
-        setSelectedIoTCat(selectedCat.innerText);
-        log.info('cat id: ', selectedIoTCatId);
-    });
-}
-export function toggleIoTCategoryOptions() {
-    log.info('toggleIoTCategoryOptions');
-    const catDropdown = document.getElementById('at-iot-category-dropdown');
-    const catOptions = document.getElementById('at-iot-category-options');
-    catDropdown.addEventListener('click', () => {
-        catOptions.classList.toggle('open');
-    });
-}
-export function toggleIoTDevicesOptions() {
-    log.info('toggleIoTDevicesOptions()');
-    const devicesDropdown = document.getElementById('at-iot-devices-dropdown');
-    const deviceOptions = document.getElementById('at-iot-device-options');
-    devicesDropdown.addEventListener('click', () => {
-        deviceOptions.classList.toggle('open');
-    });
-}
-export function setSelectedIoTSystemRadio(payload) {
-    log.info('setSelectedIoTSystemRadio()', payload);
-    const linkedDeviceContainer = document.getElementById('at-iot-device-main-container');
-    const systemLinkContainer = document.getElementById('at-iot-system-link-container');
-    if (payload === IOT_LINKED_SYSTEMS.URL_LINK) {
-        log.info('payload == IOT_LINKED_SYSTEMS.URL_LINK', payload, IOT_LINKED_SYSTEMS.URL_LINK);
-        linkedDeviceContainer.style.display = 'none';
-        systemLinkContainer.style.display = 'block';
-    }
-    else {
-        linkedDeviceContainer.style.display = 'block';
-        systemLinkContainer.style.display = 'none';
-    }
-}
-export function clearIoTDropdowns() {
-    log.info('clearIoTDropdowns()');
-    const catDropdown = document.getElementById('at-iot-selected-cat');
-    const devicesDropdown = document.getElementById('at-iot-selected-device');
-    catDropdown.innerText = 'No Selection';
-    devicesDropdown.innerText = 'Select Device';
-}
-// Initializes Form Data, but current this is only Add Mode
-export function initIoTFormData() {
-    log.info('initIoTFormData()');
-    // Add Mode
-    iotTagFormMode = "ADD" /* FORM_MODE.ADD */;
-    log.info('initIoTFormData() Mode: ', iotTagFormMode);
-    if (tagIotName === null || tagIotName == undefined) {
-        log.info('initIoTFormData() tagname check', tagIotName);
-        setInputFields();
-    }
-    tagIotName.value = '';
-    iotModelName.value = '';
-    iotSerialName.value = '';
-    iotMfrName.value = '';
-    iotSystemLink.value = '';
-}
-export function renderIotCategoryDropdownOptions(elementId, items) {
-    const element = document.getElementById(elementId);
-    if (!element) {
-        console.error("Parameter element is undefined");
-        return;
-    }
-    if (!items) {
-        console.error("Parameter items is undefined");
-        return;
-    }
-    const isFilterDropdown = stringContains(elementId, 'filter');
-    //Clear previosly appended children
-    element.innerHTML = ``;
-    const selectedIotCategoryOption = document.getElementById(isFilterDropdown ? 'at-iot-category-filter-dropdown-toggle' : 'at-iot-category-dropdown-toggle');
-    if (selectedIotCategoryOption) {
-        selectedIotCategoryOption.textContent = `${i18n.t('NoSelection')}`;
-        selectedIoTCatOption = undefined;
-    }
-    //Add the no selection option
-    const noSelection = document.createElement('div');
-    noSelection.classList.add('at_option');
-    noSelection.setAttribute('iot-category-uuid', '');
-    noSelection.setAttribute('dropdown-type', 'iotcategory');
-    noSelection.innerHTML = `
-        <span class="mdi mdi-circle-slice-1"></span> ${i18n.t('NoSelection')}
-    `;
-    noSelection.onclick = () => {
-        selectCatOption(noSelection, isFilterDropdown ? 'at-iot-category-filter-dropdown-toggle' : 'at-iot-category-filter-dropdown-toggle');
-    };
-    element.appendChild(noSelection);
-    if (items.length <= 0) {
-        console.log("No items to render");
-        return;
-    }
-    items.forEach(item => {
-        const option = createCatOptionElement(item, 'iotcategory');
-        element.appendChild(option);
-    });
-}
-function createCatOptionElement(item, dropdownType) {
-    console.log("createCatOptionElement()");
-    const option = document.createElement('div');
-    option.style.display = 'flex';
-    option.style.flexDirection = 'row';
-    option.style.justifyContent = 'left';
-    option.style.alignItems = 'center';
-    option.style.gap = '2px';
-    option.classList.add('at_option');
-    option.classList.add('at_iot_cat_option');
-    option.setAttribute('iot-category-uuid', item.uuid);
-    option.setAttribute('dropdown-type', dropdownType);
-    option.setAttribute('data-cy', `at-iot-category-option-${item.uuid}`);
-    if (dropdownType == 'category') {
-        option.innerHTML = `
-            <span class="at_colored-indicator"></span>
-            ${item.name}
-        `;
-        return option;
-    }
-    option.innerHTML = `
-    ${item.json_data.iconURL === 'button.png' || item.json_data.iconURL === undefined ? `
-        <img class="at_avatar_xs" style="display:inline-block" src="https://cdn.jsdelivr.net/npm/architwin@latest/static/images/button.png"/>
-        ` : `
-        <img class="at_avatar_xs" style="display:inline-block" src="${item.json_data.iconURL}"/>
-    `}
-    ${item.name}`;
-    return option;
-}
-function selectCatOption(option, elementId) {
-    log.info('selectCatOption()', option, elementId);
-}
-export function setIotDeviceOptions() {
-    log.info('setIotDeviceOptions()');
-    dispatchSpaceEvent(SPACE_EVENTS.GET_IOT_DEVICES, { payload: 'hello from library' });
-    renderIotDeviceDropdownOptions('at-iot-device-options', _tagIotDevices);
-    batchAddEventListenerByClassName('at_iot_dev_option', (event) => {
-        //@ts-ignore
-        const selectedDev = event.target;
-        setSelectedIoTDevice(selectedDev.innerText);
-    });
-}
-export function renderIotDeviceDropdownOptions(elementId, items) {
-    const element = document.getElementById(elementId);
-    if (!element) {
-        console.error("Parameter element is undefined");
-        return;
-    }
-    if (!items) {
-        console.error("Parameter items is undefined");
-        return;
-    }
-    const isFilterDropdown = stringContains(elementId, 'filter');
-    //Clear previosly appended children
-    element.innerHTML = ``;
-    const selectedIotDeviceOption = document.getElementById(isFilterDropdown ? 'at-iot-device-filter-dropdown-toggle' : 'at-iot-device-dropdown-toggle');
-    if (selectedIotDeviceOption) {
-        selectedIotDeviceOption.textContent = `${i18n.t('SelectDevice')}`;
-        selectedIoTDeviceOption = undefined;
-    }
-    //Add the no selection option
-    const selectDevice = document.createElement('div');
-    selectDevice.classList.add('at_iot_dev_option');
-    selectDevice.setAttribute('iot-device-uuid', '');
-    selectDevice.setAttribute('dropdown-type', 'iotdevice');
-    selectDevice.innerHTML = `
-        <span></span> ${i18n.t('SelectDevice')}
-    `;
-    selectDevice.onclick = () => {
-        log.info('@caroline onClick');
-        selectDeviceOption(selectDevice, isFilterDropdown ? 'at-iot-device-filter-dropdown-toggle' : 'at-iot-device-filter-dropdown-toggle');
-    };
-    element.appendChild(selectDevice);
-    if (items.length <= 0) {
-        console.log("No items to render");
-        return;
-    }
-    items.forEach(item => {
-        const option = createDeviceOptionElement(item, 'iotdevice');
-        element.appendChild(option);
-    });
-}
-function selectDeviceOption(option, elementId) {
-    log.info('@caroline selectDeviceOption()', option, elementId);
-}
-function createDeviceOptionElement(item, dropdownType) {
-    console.log("createDeviceOptionElement()", item, dropdownType);
-    const option = document.createElement('div');
-    option.style.display = 'flex';
-    option.style.flexDirection = 'row';
-    option.style.justifyContent = 'left';
-    option.style.alignItems = 'center';
-    option.style.gap = '2px';
-    option.classList.add('at_option');
-    option.classList.add('at_iot_dev_option');
-    option.setAttribute('iot-category-uuid', item.uuid);
-    option.setAttribute('dropdown-type', dropdownType);
-    option.setAttribute('data-cy', `at-iot-category-option-${item.uuid}`);
-    if (dropdownType == 'category') {
-        option.innerHTML = `
-            <span class="at_colored-indicator"></span>
-            ${item.name}
-        `;
-        return option;
-    }
-    option.innerHTML = `
-    <span>${item.name}</span>
-      `;
-    return option;
-}
-export function getIotTagFormData() {
-    if (!tagIotName) {
-        setInputFields();
-    }
-    const formData = {
-        tagName: tagIotName.value,
-        modelName: iotModelName.value,
-        serialName: iotSerialName.value,
-        tagMf: iotMfrName.value,
-        tagCategoryId: selectedIoTCatId,
-        systemLink: iotSystemLink.value
-    };
-    return formData;
-}
-// function renderLinkedDevices(payload) {
-//   log.info('displayLinkedDevices()', payload)
-//   return `
-//   <li class="at_room_tree_child">
-//     <div id="at-linked-device-${payload.uuid}" class="at_flex at_space_between">
-//       <span id="at-linked-device-${payload.uuid}"> ${i18n.t(`${payload.name}`)} </span>
-//     </div>
-//   </li>
-//   `
-// }

package/lib/atwinui/components/toolbar/usersPane.d.ts

@@ -1,14 +0,0 @@
-import { ScreenShareRequest, ScreenShareSessionUser, ScreenShareUser } from '../../../types';
-export declare function renderUsersPane(): HTMLElement;
-export declare function renderUsersList(users: ScreenShareUser[]): void;
-export declare function renderOnlineUserRow(user: ScreenShareUser): HTMLTableRowElement;
-export declare function renderOfflineUserRow(user: ScreenShareUser): HTMLTableRowElement;
-export declare function sortUsersRowByOnlineState(onlineFirst?: boolean): void;
-export declare function handleClickEventUserRow(): void;
-export declare function renderSharingSpaceDetail(user: ScreenShareSessionUser): void;
-export declare function handleClickEventBackToUserListLink(): void;
-export declare function renderScreenShareRequestModal(request: ScreenShareRequest): void;
-export declare function handleInputEventSelectPointerSettings(): void;
-export declare function handleClickEventEndSessionBtn(): void;
-export declare function handleScreenShareUsersUpdated(users: ScreenShareUser[]): void;
-export declare function handleScreenShareEndSessionEvent(): void;

package/lib/atwinui/components/toolbar/usersPane.js

@@ -1,273 +0,0 @@
-import { _space, dispatchSpaceEvent } from '../../../architwin';
-import { SPACE_EVENTS } from '../../../types';
-import i18n from './i18n';
-let _currentUser;
-let _screenShareUsers = [];
-let _screenShareUser;
-let _screenShareSessionUsers;
-let _screenShareSessionUser;
-let _screenShareSession;
-let _screenShareUsersSortSettings = { onlineFirst: true };
-let _onDisplayComponent;
-export function renderUsersPane() {
-    const element = document.createElement('div');
-    element.setAttribute('id', 'at-users-pane');
-    element.style.setProperty('width', '400px');
-    element.classList.add('at_container');
-    element.innerHTML = `
-        <div id="at-users-pane" class="at_flex at_flex_column">
-            <div id="at-users-pane-content" class="at_form_container">
-                <div class="at_flex at_justify_start">
-                    <span class="at_bolder at_text_base">${i18n.t('Users')}</span>
-                </div>
-                <div class="at_disable_hover_users_list at_scrollable_container at_h-min-45">
-                    <table id="at-user-list-container">
-                    </table>
-                </div>
-            </div>
-        </div>
-    `;
-    return element;
-}
-export function renderUsersList(users) {
-    _onDisplayComponent = 'USER_LIST';
-    _screenShareUsers = users;
-    const usersContainer = document.getElementById("at-user-list-container");
-    if (!usersContainer) {
-        console.error("Tag container does not exist in DOM");
-        return;
-    }
-    if (users.length <= 0) {
-        console.log("No tags to load");
-        usersContainer.innerHTML = ``;
-        return;
-    }
-    usersContainer.innerHTML = '';
-    users.forEach(user => {
-        const row = user.onlineStatus !== 'offline' ? renderOnlineUserRow(user) : renderOfflineUserRow(user);
-        usersContainer.appendChild(row);
-    });
-    handleClickEventUserRow();
-    sortUsersRowByOnlineState(true);
-}
-export function renderOnlineUserRow(user) {
-    const element = document.createElement("tr");
-    element.setAttribute('id', `at-user-row-${user.id}`);
-    element.dataset.id = user.id;
-    element.classList.add(...['at_online_user_row', 'at_flex', 'at_items_center', 'at_justify_between']);
-    const iconOrSharingText = user.onlineStatus === 'in_session'
-        ? `
-        <div class="at_flex at_items_center at_justify_center">
-            <p>Now Sharing</p>
-        </div>    
-    `
-        : `
-        <div class="at_user_screen_sharing_state at_flex at_items_center at_justify_center">
-            <div class="mdi mdi-monitor-share"></div>
-        </div>
-    `;
-    element.innerHTML = `
-        <td id="at_user_row_${user.id}">
-            <div class="at_flex at_flex_row at_items_center">
-                <div class="at_users_online_indicator"></div>
-                <span class="at_no_hover_text_online_user at_text_base">${user.name}</span>
-            </div>
-        </td>
-        <td>
-            ${iconOrSharingText}
-        </td>
-    `;
-    return element;
-}
-export function renderOfflineUserRow(user) {
-    const element = document.createElement("tr");
-    element.setAttribute('id', `at-user-row-${user.id}`);
-    element.dataset.id = user.id;
-    element.classList.add(...['at_offline_user_row', 'at_flex', 'at_items_center', 'at_justify_between']);
-    element.innerHTML = `
-        <td id="at_user_row_${user.id}">
-            <div class="at_flex at_flex_row at_items_center">
-                <div class="at_users_ofline_indicator"></div>
-                <span class="at_no_hover_text_offline_user at_text_base at_offline_user_name_text">${user.name}</span>
-            </div>
-        </td>
-    `;
-    return element;
-}
-export function sortUsersRowByOnlineState(onlineFirst = _screenShareUsersSortSettings.onlineFirst || true) {
-    _screenShareUsersSortSettings = { onlineFirst };
-    const table = document.getElementById('at-user-list-container');
-    const rows = Array.from(table.querySelectorAll('tr'));
-    if (onlineFirst) {
-        rows.sort((a, b) => {
-            const aClass = a.classList.contains('at_online_user_row');
-            const bClass = b.classList.contains('at_online_user_row');
-            return Number(bClass) - Number(aClass);
-        });
-        table.append(...rows);
-    }
-}
-export function handleClickEventUserRow() {
-    const table = document.getElementById('at-user-list-container');
-    if (table) {
-        table.addEventListener('click', (event) => {
-            const target = event.target;
-            const row = target.closest('tr');
-            if (row && table.contains(row)) {
-                const id = row.dataset.id;
-                const user = _screenShareUsers.find(u => u.id === id);
-                _screenShareUser = user;
-                if (user.onlineStatus === 'offline')
-                    return;
-                if (user.onlineStatus === 'in_session') {
-                    const usersPaneContent = document.getElementById('at-users-pane-content');
-                    usersPaneContent.innerHTML = '';
-                    const sessionUser = {
-                        id: user.id,
-                        name: user.name,
-                        role: 'guest',
-                        session: _screenShareSession
-                    };
-                    renderSharingSpaceDetail(sessionUser);
-                }
-                else {
-                    const nowEpochSeconds = Math.floor(Date.now() / 1000);
-                    const screenShareInvitation = {
-                        user: user,
-                        requestBy: _currentUser,
-                        requestedAt: nowEpochSeconds,
-                        status: 'pending'
-                    };
-                    dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_REQUEST, screenShareInvitation);
-                    // renderScreenShareRequestModal(screenShareInvitation) // moved it to front end
-                }
-            }
-        });
-    }
-}
-export function renderSharingSpaceDetail(user) {
-    var _a;
-    _onDisplayComponent = 'SPACE_SHARING_DETAILS';
-    _screenShareSessionUser = user;
-    const usersPaneContent = document.getElementById('at-users-pane-content');
-    const element = document.createElement('div');
-    element.setAttribute('id', 'at-sharing-space-details');
-    element.classList.add('at_form_container');
-    element.innerHTML = `
-        <div class="at_flex at_justify_start">
-            <span class="at_bolder at_text_base at_capitalize">${i18n.t('Sharing Space')}</span>
-        </div>
-        <div class="at_flex at_flex_column at_gap_half_rem">
-            <div class="at_screen_share_guest_card at_flex at_flex_row at_justify_between at_items_center">
-                <div class="at_flex at_flex_column at_justify_start">
-                    <p class="at_bolder at_text_base">${user.name}</p>
-                    <span class="at_subtitle_text">Your are sharing ${(_a = _space === null || _space === void 0 ? void 0 : _space.name) !== null && _a !== void 0 ? _a : 'test'} to this person</span>
-                </div>
-                <div class="at_users_online_indicator"></div>
-            </div>
-            <div class="at_bolder at_text_base">Pointer</div>
-            <div class="at_flex at_flex_column at_justify_start">
-                <div class="at_screen_share_pointer_choices">
-                    <select id="at_select_screen_share_pointer" name="at_screen_share_pointer">
-                    <option>${i18n.t('Off')}</option>
-                    <option>${i18n.t('On')}</option>
-                    </select>
-                </div>
-            </div>
-            <div class="at_flex at_flex_column at_justify_center at_items_center">
-                <div id="at-back-user-list-link" class="at_back_user_list_link">
-                    <span class="mdi mdi-arrow-left"></span>
-                    <p> ${i18n.t('Back to user list')}</p>
-                </div>
-                <button type="button" id="at-screen-share-end-session-btn" class="at_screen_share_end_session_btn">
-                    ${i18n.t('End Session')}
-                </button>
-            </div>
-        </div>
-    `;
-    usersPaneContent.appendChild(element);
-    handleClickEventBackToUserListLink();
-    handleInputEventSelectPointerSettings();
-    handleClickEventEndSessionBtn();
-}
-export function handleClickEventBackToUserListLink() {
-    const link = document.getElementById('at-back-user-list-link');
-    if (link) {
-        link.addEventListener('click', () => {
-            const usersPaneContent = document.getElementById('at-users-pane-content');
-            usersPaneContent.innerHTML = '';
-            usersPaneContent.classList.add('at_form_container');
-            usersPaneContent.innerHTML = `
-                <div class="at_flex at_justify_start">
-                    <span class="at_bolder at_text_base">${i18n.t('Users')}</span>
-                </div>
-                <div class="at_disable_hover_users_list at_scrollable_container at_h-min-45">
-                    <table id="at-user-list-container">
-                    </table>
-                </div>
-            `;
-            renderUsersList(_screenShareUsers);
-        });
-    }
-}
-export function renderScreenShareRequestModal(request) {
-    var _a;
-    _onDisplayComponent = 'SCREEN_SHARE_REQUEST_MODAL';
-    const element = document.createElement('dialog');
-    element.setAttribute('id', 'at-screen-share-request-modal');
-    element.classList.add('at_screen_share_request_modal');
-    element.innerHTML = `
-        <div class="at_screen_share_request_modal_content at_flex at_flex_column at_justify_center at_items_center">
-            <div class="at_screen_share_icon mdi mdi-monitor-multiple"></div>
-            <h1 class="at_screen_share_request_message">${i18n.t('Waiting for remote screen share confirmation')}</h1>
-            <p class="at_screen_share_request_sub_message"> ${i18n.t('You are requesting to remotely share your space to')} <strong>${request.user.name}</strong></p>
-            <button type="button" id="at-screen-share-request-btn"  class="at_screen_share_cancel_request_btn">${i18n.t('Cancel Request')}</button>
-        </div>
-    `;
-    // disabled modal dismiss via Esc key
-    function blockEscapeKey(e) {
-        if (e.key === 'Escape' && element.open) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-    }
-    element.addEventListener('keydown', blockEscapeKey);
-    element.addEventListener('cancel', (event) => {
-        event.preventDefault();
-    });
-    (_a = element.querySelector('#at-screen-share-request-btn')) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => {
-        const cancelRequest = Object.assign(Object.assign({}, request), { status: 'canceled' });
-        dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_CANCEL_REQUEST, cancelRequest);
-        element.close();
-        element.remove();
-        _onDisplayComponent = 'USER_LIST';
-    });
-    document.body.appendChild(element);
-    element.showModal();
-}
-export function handleInputEventSelectPointerSettings() {
-    const select = document.getElementById('at_select_screen_share_pointer');
-    if (select) {
-        select.addEventListener('input', (event) => {
-            const target = event.target;
-            _screenShareSession = Object.assign(Object.assign({}, _screenShareSession), { isPointerEnabled: target.value === 'On' });
-            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_POINTER_UPDATE, _screenShareSession);
-        });
-    }
-}
-export function handleClickEventEndSessionBtn() {
-    const button = document.getElementById('at-screen-share-end-session-btn');
-    if (button) {
-        button.addEventListener('click', () => {
-            dispatchSpaceEvent(SPACE_EVENTS.SCREEN_SHARE_END_SESSION, handleScreenShareEndSessionEvent);
-        });
-    }
-}
-export function handleScreenShareUsersUpdated(users) {
-    renderUsersList(users);
-}
-export function handleScreenShareEndSessionEvent() {
-    _screenShareSessionUsers = [];
-    _screenShareSession = {};
-    renderUsersList(_screenShareUsers);
-}