architwin 1.12.5 → 1.13.0

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

@@ -0,0 +1,388 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { _3DXObjects, _pipeCategories, _pipes, _selectedPipeCategory, dispatchSpaceEvent, disposeModel, moveToSweep, renderPath, setModelVisibility } from "../../../architwin";
+import i18n from './i18n';
+import { COLLAPSE, SPACE_EVENTS } from "../../../types";
+import { Collapse } from "./collapse";
+import { notyf, toggleDisplayPane } from "../../events";
+import { PipeForm } from "./pipeFormPane";
+import { waitForChange } from "../../helpers";
+import { getShortcutTooltipHTML } from "./static/common";
+import { setModalAction, toggleModal } from "./modal";
+export class PipeList {
+    // Initialize collapse UI and pipe form 
+    constructor() {
+        this.categories = [];
+        this.pipes = [];
+        this.collapse = new Collapse(undefined, { expand: false });
+        this.form = new PipeForm();
+    }
+    // render the main pane
+    renderPane() {
+        const element = document.createElement('div');
+        element.classList.add('at_container', 'at_w-12', 'at_h-responsive-64');
+        element.id = 'at-pipe-list-pane';
+        element.setAttribute('data-cy', 'at-pipe-list-pane');
+        element.innerHTML = `
+        <div class="at_panel_header at_flex at_justify_between  at_items_center">
+            <span class="mdi mdi-keyboard at_pull_left at_icon_hover ">
+                ${getShortcutTooltipHTML()}
+            </span>
+            <span>${i18n.t('Pipes')}</span>
+        </div>
+        <div class="at_form_container ">
+        <div class="at_field at_flex_column" style="${_pipeCategories ? '' : 'display: none;'}">
+            <div class="">
+                <span>${i18n.t('SelectPipeType')}</span>
+            </div>
+            <div id="at-custom-pipe-category-dropdown" data-cy="at-custom-pipe-category-dropdown">
+                <div id="at-pipe-category-dropdown" class=" at_dropdown at_flex at_flex_row at_space_between">    
+                    <div class="at_dropdown_toggle" id="at-pipe-category-dropdown-toggle" data-cy="at-pipe-category-dropdown-toggle">${i18n.t('NoSelection')}</div>
+                    <span class="mdi mdi-triangle-down at_chevron" id="at-pipe-category-chevron" data-cy="at-pipe-category-chevron"></span>
+                </div>
+                <div style="position:absolute">
+                    <div class="at_dropdown_options" id="at-pipe-category-options" data-cy="at-pipe-category-options">
+                    </div>
+                </div>
+            </div>
+
+        </div>
+        </div>
+        <div class="at_form_container at_field ">
+        <div class="at_collapsible_container" id="at-dropdown_container">
+            <div id="at-pipe-type-collapse-html-element"></div>
+        </div>
+        </div>
+        <div class="at_flex at_align_item_end at_button_row at_justify_end">
+        <div class="at_button at_ghost" id="at-add-pipe-btn" data-cy="at-add-pipe-btn" target-pane="at-pipe-form-pane">
+            ${i18n.t('AddPipeType')}
+            <span class="mdi mdi-plus-circle-outline"></span>
+        </div>
+        </div>
+    `;
+        return element;
+    }
+    // create element for collapse element
+    createCollapseElement(categories, pipes) {
+        const element = document.createElement('div');
+        element.classList.add('at_collapse_container', 'at_h-responsive-304');
+        element.innerHTML = categories.length ? categories.sort((a, b) => new Date(a.created_on).getTime() - new Date(b.created_on).getTime()).map((category, index) => {
+            var _a;
+            return `
+        <div class="collapse-container at_accent_forest at_rounded at_mb_2" id="at-collapsible-${COLLAPSE.HEADER}-${category.uuid}" data-uuid="${category.uuid}" data-type="${COLLAPSE.HEADER}">
+            <div class="" id="at-locate-area-${COLLAPSE.HEADER}-${category.uuid}" data-uuid="${category.uuid}" data-type="${COLLAPSE.HEADER}">
+                <div class="at_collapsible_header at_p-2" id="at-header-collapse-${index}">
+                    <div>
+                        <span class="mdi mdi-triangle-down ${COLLAPSE.TOGGLE_ID}" id="${COLLAPSE.TOGGLE_ID}" data-cy="at-collapsible-toggle-btn-${category.uuid}"></span>
+                        <span class="mdi mdi-checkbox-blank" style="color:${(_a = JSON.parse(category.json_data)) === null || _a === void 0 ? void 0 : _a.color}"></span>
+                        <span>${category.name}</span>
+                    </div>
+                    <div class="at_flex at_justify_end at_gap_2">
+                        <span class="mdi mdi-pen" id="at-edit-btn-${COLLAPSE.HEADER}-${category.uuid}" data-type="${COLLAPSE.HEADER}" data-uuid="${category.uuid}" data-cy="at-pipe-type-edit-btn-${category.uuid}" target-pane="at-pipe-form-pane"></span>
+                        <span class="mdi mdi-trash-can-outline" id="at-delete-btn-${COLLAPSE.HEADER}-${category.uuid}" data-type="${COLLAPSE.HEADER}" data-uuid="${category.uuid}" data-cy="at-pipe-type-delete-btn"></span>
+                        <span class="mdi mdi-eye" id="at-view-btn-${COLLAPSE.HEADER}-${category.uuid}" data-type="${COLLAPSE.HEADER}"  data-cy="at-pipe-type-view-btn" data-uuid="${category.uuid}"></span>
+                    </div>
+                </div>
+                <div class="at_collapsible_content at_secondary_azusa" id="${COLLAPSE.CONTENT_ID}">
+                    <div class="at_p-2">
+                        
+                        ${pipes != undefined && pipes.filter(pipe => pipe.category_uuid === category.uuid).length ?
+                pipes.filter(pipe => pipe.category_uuid === category.uuid).sort((a, b) => new Date(a.created_on).getTime() - new Date(b.created_on).getTime()).map(pipe => `
+                        <div class="at_locate_area_container at_flex at_justify_end at_gap_2" id="at-collapsible-${COLLAPSE.LIST}-${pipe.uuid}" data-uuid="${pipe.uuid}" data-type="${COLLAPSE.LIST}">
+                            <div id="at-locate-area-${COLLAPSE.LIST}-${pipe.uuid}" data-uuid="${pipe.uuid}" data-type="${COLLAPSE.LIST}">
+                            <span>${pipe.name}</span>
+                            <span class="mdi mdi-trash-can-outline at-pipe-filter-chevron" id="at-delete-btn-${COLLAPSE.LIST}-${pipe.uuid}" data-cy="at-pipe-delete-btn" data-type="${COLLAPSE.LIST}" data-uuid="${pipe.uuid}"></span>
+                            <span class="mdi mdi-eye at-pipe-filter-chevron" id="at-view-btn-${COLLAPSE.LIST}-${pipe.uuid}" data-cy="at-pipe-view-btn" data-uuid="${pipe.uuid}" data-type="${COLLAPSE.LIST}"></span>
+                            </div>
+                        </div>
+                        `).join('')
+                :
+                    `
+                        <div class="at_flex at_justify_center at_items_center at_flex_column">
+                            <div style="white-space:nowrap"> ${i18n.t('NoPipesToDisplay')}</div>
+                        </div>
+                        `}
+                    </div>
+                </div>
+            </div>
+        </div>
+        `;
+        }).join('')
+            : `
+        <div class="at_h-responsive-304">
+            <div class=" at_flex at_justify_center at_items_center at_flex_column at_h-full">
+                <span class="mdi mdi-pipe-disconnected at_pipe_category at_text-xxl"></span>
+                <div class="at_text_xs" style="white-space:nowrap"> ${i18n.t('NoPipesTypeToDisplay')}</div>
+            </div>
+        </div>
+        `;
+        return element;
+    }
+    //initialize pane, data binding and some handlers
+    init() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const container = document.getElementById('at-pipe-type-collapse-html-element');
+            if (!container)
+                return;
+            const element = this.createCollapseElement(_pipeCategories, _pipes);
+            this.collapse.setElement(element);
+            const rendered = this.collapse.render();
+            container.replaceChildren(rendered);
+            this.eventHandler();
+            this.form.resetInteractionState();
+            this.initDropdown(_pipeCategories.sort((a, b) => new Date(a.created_on).getTime() - new Date(b.created_on).getTime()).map(category => category.name));
+            this.renderPipePaths();
+            const options = document.getElementById('at-pipe-category-options');
+            if (options.classList.contains('open')) {
+                options.classList.remove('open');
+            }
+        });
+    }
+    eventHandler() {
+        this.edit();
+        this.delete();
+        this.toggle();
+        this.locate();
+        this.handleClickItem();
+        this.collapse.init();
+    }
+    handleClickItem() {
+        document.querySelectorAll('.at_locate_area_container').forEach(container => {
+            container.addEventListener('click', (e) => {
+                const target = e.currentTarget;
+                if (target.classList.contains('selected')) {
+                    target.classList.toggle('selected');
+                    return;
+                }
+                document.querySelectorAll('.at_locate_area_container.selected').forEach(el => el.classList.remove('selected'));
+                target.classList.toggle('selected');
+            });
+        });
+    }
+    locate() {
+        document.querySelectorAll('[id^="at-locate-area"]').forEach(el => {
+            el.addEventListener('click', ({ currentTarget }) => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                const target = currentTarget;
+                const uuid = target.dataset.uuid;
+                const type = target.dataset.type;
+                console.log("CLICKED");
+                const pipe = type === COLLAPSE.HEADER
+                    ? _pipes.find(p => p.category_uuid === uuid)
+                    : _pipes.find(p => p.uuid === uuid);
+                const parsed = JSON.parse((_a = pipe === null || pipe === void 0 ? void 0 : pipe.json_data) !== null && _a !== void 0 ? _a : '{}');
+                if (parsed.sweepId) {
+                    moveToSweep(parsed.sweepId, parsed.rotation);
+                }
+            }));
+        });
+    }
+    // add pipe listiner
+    add() {
+        const btn = document.getElementById('at-add-pipe-btn');
+        if (!btn)
+            return;
+        btn.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
+            const target = e.currentTarget;
+            yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_CATEGORY_SAVED, {});
+            //wait until the _selectedPipeCategory change  state value
+            const newCategory = yield waitForChange(() => _selectedPipeCategory);
+            console.log("CLICKED ADD CATEGORY =>", newCategory);
+            this.form.setPipeTitle("AddPipeType");
+            yield this.form.init(newCategory);
+            yield toggleDisplayPane(target.id);
+        }));
+    }
+    //edit pipe listiner
+    edit() {
+        document.querySelectorAll('[id^="at-edit-btn"]').forEach(btn => {
+            btn.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
+                const target = e.currentTarget;
+                const uuid = target.dataset.uuid;
+                this.form.setPipeTitle("EditPipeType");
+                yield dispatchSpaceEvent(SPACE_EVENTS.PIPE_CATEGORY_SELECTED, uuid);
+                yield this.form.init(_selectedPipeCategory, _pipes);
+                yield toggleDisplayPane(target.id);
+            }));
+        });
+    }
+    //toggle visibility listiner
+    toggle() {
+        document.querySelectorAll('[id^="at-view-btn"]').forEach(el => {
+            el.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
+                const target = e.currentTarget;
+                const uuid = target.dataset.uuid;
+                const type = target.dataset.type;
+                if (!uuid)
+                    return;
+                if (type === COLLAPSE.HEADER) {
+                    // Toggle the header icon
+                    const isCurrentlyEye = target.classList.contains('mdi-eye');
+                    target.classList.replace(isCurrentlyEye ? 'mdi-eye' : 'mdi-eye-off-outline', isCurrentlyEye ? 'mdi-eye-off-outline' : 'mdi-eye');
+                    // Apply the same state to all its child list icons
+                    _pipes
+                        .filter(pipe => pipe.category_uuid === uuid)
+                        .forEach(pipe => {
+                        const listEl = document.getElementById(`at-view-btn-${COLLAPSE.LIST}-${pipe.uuid}`);
+                        if (listEl) {
+                            listEl.classList.replace(isCurrentlyEye ? 'mdi-eye' : 'mdi-eye-off-outline', isCurrentlyEye ? 'mdi-eye-off-outline' : 'mdi-eye');
+                        }
+                        const targetObj = _3DXObjects.find(obj => obj.object.uuid === pipe.uuid);
+                        if (targetObj) {
+                            setModelVisibility(targetObj.object.id);
+                        }
+                    });
+                }
+                else {
+                    // Toggle list icon
+                    const isCurrentlyEye = target.classList.contains('mdi-eye');
+                    target.classList.replace(isCurrentlyEye ? 'mdi-eye' : 'mdi-eye-off-outline', isCurrentlyEye ? 'mdi-eye-off-outline' : 'mdi-eye');
+                    // After toggling, check if all list items under the same header are off or not
+                    const pipe = _pipes.find(pipe => pipe.uuid === uuid);
+                    if (!pipe)
+                        return;
+                    const headerBtn = document.getElementById(`at-view-btn-${COLLAPSE.HEADER}-${pipe.category_uuid}`);
+                    if (!headerBtn)
+                        return;
+                    const allListIcons = _pipes
+                        .filter(p => p.category_uuid === pipe.category_uuid)
+                        .map(p => document.getElementById(`at-view-btn-${COLLAPSE.LIST}-${p.uuid}`))
+                        .filter(Boolean);
+                    const allOff = allListIcons.every(icon => icon.classList.contains('mdi-eye-off-outline'));
+                    headerBtn.classList.replace(allOff ? 'mdi-eye' : 'mdi-eye-off-outline', allOff ? 'mdi-eye-off-outline' : 'mdi-eye');
+                    const targetObj = _3DXObjects.find(obj => obj.object.uuid === uuid);
+                    if (targetObj) {
+                        setModelVisibility(targetObj.object.id);
+                    }
+                }
+            }));
+        });
+    }
+    //delete and dispose 3d objects
+    delete() {
+        document.querySelectorAll('[id^="at-delete-btn"]').forEach(el => {
+            el.addEventListener('click', (e) => __awaiter(this, void 0, void 0, function* () {
+                const target = e.currentTarget;
+                const uuid = target.dataset.uuid;
+                const type = target.dataset.type;
+                toggleModal();
+                setModalAction({
+                    title: `${i18n.t('DeletePipeCategory')}`,
+                    description: `${i18n.t('ConfirmDeletePipeCategory')}`,
+                    buttonLabel: `${i18n.t('YesDelete')}`
+                }, () => {
+                    if (uuid) {
+                        if (type == COLLAPSE.HEADER) {
+                            dispatchSpaceEvent(SPACE_EVENTS.PIPE_CATEGORY_REMOVED, uuid);
+                            _pipes.filter(pipe => pipe.category_uuid == uuid).forEach(pipe => {
+                                const targetObj = _3DXObjects.find(obj => obj.object.uuid == pipe.uuid);
+                                if (targetObj) {
+                                    disposeModel(targetObj);
+                                }
+                            });
+                            notyf.success(`${i18n.t('PipeCategoryDeletedSuccessfully')}`);
+                            toggleModal(false);
+                        }
+                        else {
+                            dispatchSpaceEvent(SPACE_EVENTS.PIPE_REMOVED, uuid);
+                            const targetObj = _3DXObjects.find(obj => obj.object.uuid == uuid);
+                            if (targetObj) {
+                                disposeModel(targetObj);
+                            }
+                            notyf.success(`${i18n.t('PipeDeletedSuccessfully')}`);
+                            toggleModal(false);
+                        }
+                        this.collapse.removeElement(uuid, type);
+                    }
+                });
+            }));
+        });
+    }
+    //render pipe path 3D objects
+    renderPipePaths() {
+        // initialize to empty 
+        _3DXObjects.filter(x => x.type === 'PATH').forEach(disposeModel);
+        // render paths 
+        _pipeCategories.forEach(categories => {
+            var _a;
+            const _categories = JSON.parse((_a = categories === null || categories === void 0 ? void 0 : categories.json_data) !== null && _a !== void 0 ? _a : '{}');
+            _pipes.filter(pipe => pipe.category_uuid == categories.uuid).forEach(pipe => {
+                var _a;
+                const _pipe = JSON.parse((_a = pipe === null || pipe === void 0 ? void 0 : pipe.json_data) !== null && _a !== void 0 ? _a : '{}');
+                if (!_pipe)
+                    return;
+                if (_pipe.vertices) {
+                    renderPath(_pipe.vertices, {
+                        uuid: pipe.uuid,
+                        textColor: _categories.color,
+                        fillColor: 'none'
+                    });
+                }
+            });
+        });
+    }
+    initDropdown(options) {
+        // Ensure unique options
+        const uniqueOptions = [i18n.t("NoSelection"), ...[...new Set(options)]];
+        const toggleBtn = document.getElementById('at-custom-pipe-category-dropdown');
+        const optionsContainer = document.getElementById('at-pipe-category-options');
+        const toggleLabel = toggleBtn.querySelector('#at-pipe-category-dropdown-toggle');
+        toggleLabel.textContent = i18n.t("NoSelection");
+        toggleBtn.onclick = () => {
+            const isNowOpen = optionsContainer.classList.toggle('open');
+            if (isNowOpen) {
+                optionsContainer.innerHTML = '';
+                uniqueOptions.forEach(opt => {
+                    const div = document.createElement('div');
+                    div.style.width = '228px';
+                    div.style.cursor = "pointer";
+                    div.textContent = opt;
+                    div.classList.add('at_dropdown-option');
+                    // Mark the default selected (All Category)
+                    if (opt === toggleLabel.textContent) {
+                        div.classList.add('selected');
+                    }
+                    div.onclick = () => {
+                        toggleLabel.textContent = opt;
+                        // Remove .selected from all
+                        document.querySelectorAll('.at_dropdown-option.selected').forEach(el => el.classList.remove('selected'));
+                        div.classList.add('selected');
+                        console.log("OPT", opt);
+                        const filteredCategory = opt === i18n.t('NoSelection')
+                            ? _pipeCategories
+                            : _pipeCategories.filter(category => category.name === opt);
+                        // Get all selected category UUIDs (can be multiple if same name)
+                        const selectedCategoryUUIDs = filteredCategory.map(cat => cat.uuid);
+                        _pipes.forEach(pipe => {
+                            const isVisible = selectedCategoryUUIDs.includes(pipe.category_uuid);
+                            const targetObj = _3DXObjects.find(obj => obj.object.uuid === pipe.uuid);
+                            if (targetObj) {
+                                setModelVisibility(targetObj.object.id, isVisible);
+                            }
+                        });
+                        const container = document.getElementById('at-pipe-type-collapse-html-element');
+                        if (!container)
+                            return;
+                        const element = this.createCollapseElement(filteredCategory, _pipes);
+                        this.collapse.setElement(element);
+                        const rendered = this.collapse.render();
+                        container.replaceChildren(rendered);
+                        this.eventHandler();
+                        optionsContainer.classList.remove('open');
+                    };
+                    optionsContainer.appendChild(div);
+                });
+            }
+            else {
+                optionsContainer.innerHTML = '';
+            }
+        };
+    }
+}

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

@@ -0,0 +1,3 @@
+import { ISpaceUser } from "../../../types";
+export declare function renderSpaceUserListPane(): HTMLElement;
+export declare function renderUserRows(userList: ISpaceUser[]): void;

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

@@ -0,0 +1,95 @@
+import i18n from './i18n';
+import { getBundleVersion } from "../../../utils";
+export function renderSpaceUserListPane() {
+    const element = document.createElement('div');
+    element.classList.add('at_container');
+    element.classList.add('at_w-12');
+    // element.classList.add('at_h-min-70')
+    // element.classList.add('at_h-max-77')
+    element.classList.add('at_h-full');
+    element.setAttribute('id', 'at-space-user-list-pane');
+    element.setAttribute('data-cy', 'at-space-user-list-pane');
+    element.innerHTML = `
+        <div class="at_panel_header">
+            <span>${i18n.t('Users')}</span>
+        </div>
+
+        <div class="at_scrollable_container at_h-min-40" 
+            id="at-space-user-card" 
+            data-cy="at-space-user-card">
+        </div>
+
+        <div class="at_button_row at_justify_center">
+            <div 
+                class="at_button at_ghost at_bg_red_600 at_w-full" 
+                id="at-user-pane-end-session-btn" 
+                data-cy="at-user-pane-end-session-btn" 
+                target-pane="at-add-object-pane">
+                ${i18n.t('End Session')}
+            </div>
+        </div>
+
+        <div class="at_flex at_justify_center at_price" 
+            id="at-bundle-version" 
+            data-cy="at-bundle-version">
+            <small class="at_text_xxs at_text_white at_opacity_5">
+                ${getBundleVersion()}
+            </small>
+        </div>
+    `;
+    return element;
+}
+export function renderUserRows(userList) {
+    const container = document.getElementById('at-space-user-card');
+    if (!container) {
+        return;
+    }
+    container.innerHTML = '';
+    userList.forEach((user, index) => {
+        const card = document.createElement('div');
+        card.className = 'at_card at_flex at_items_center at_justify_between at_px-4 at_py-2 at_border_b at_user_list_card at_bg_black at_opacity_75';
+        // Left: circle + name
+        const left = document.createElement('div');
+        left.className = 'at_flex at_items_center at_gap-2';
+        const circle = document.createElement('span');
+        circle.style.width = '15px';
+        circle.style.height = '15px';
+        circle.style.borderRadius = '50%';
+        circle.style.backgroundColor = user.isActive ? '#22c55e' : '#ffffff';
+        circle.style.border = '1px solid #ccc';
+        circle.style.marginRight = '10px';
+        const nameEl = document.createElement('span');
+        nameEl.textContent = user.name;
+        nameEl.className = 'at_text_sm';
+        left.appendChild(circle);
+        left.appendChild(nameEl);
+        // Divider
+        const divider = document.createElement('div');
+        divider.className = 'at_flex_1 at_border_b at_mx-2';
+        divider.style.height = '1px';
+        // Right: share button styled like `at_button at_ghost`
+        const shareBtn = document.createElement('div');
+        shareBtn.id = `at-user-screen-share-btn-${user.uuid}`;
+        shareBtn.setAttribute('data-cy', `at-user-screen-share-btn-${user.uuid}`);
+        shareBtn.setAttribute('target-pane', 'at-viewing-remote-space-pane');
+        if (user.isSharing) {
+            const nowSharingText = document.createElement('span');
+            nowSharingText.textContent = 'Now Sharing';
+            nowSharingText.className = 'at_text_xs at_text_gray';
+            shareBtn.appendChild(nowSharingText);
+        }
+        else {
+            const icon = document.createElement('span');
+            icon.className = 'mdi mdi-monitor-share';
+            icon.style.fontSize = '20px';
+            shareBtn.className = 'at_button at_ghost';
+            shareBtn.style.border = 'none';
+            shareBtn.appendChild(icon);
+        }
+        // Assemble card
+        card.appendChild(left);
+        card.appendChild(divider);
+        card.appendChild(shareBtn);
+        container.appendChild(card);
+    });
+}

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

@@ -0,0 +1,20 @@
+import { FORM_MODE, ITagIOTCategory, ITagIOTDevice } from '../../../types';
+export declare let iotTagFormMode: FORM_MODE;
+export declare function renderTagIOTForm(): HTMLDivElement;
+export declare function setIotCategoryOptions(): void;
+export declare function toggleIoTCategoryOptions(): void;
+export declare function toggleIoTDevicesOptions(): void;
+export declare function setSelectedIoTSystemRadio(payload: string): void;
+export declare function clearIoTDropdowns(): void;
+export declare function initIoTFormData(): void;
+export declare function renderIotCategoryDropdownOptions(elementId: string, items: Array<ITagIOTCategory>): void;
+export declare function setIotDeviceOptions(): void;
+export declare function renderIotDeviceDropdownOptions(elementId: string, items: Array<ITagIOTDevice>): void;
+export declare function getIotTagFormData(): {
+    tagName: string;
+    modelName: string;
+    serialName: string;
+    tagMf: string;
+    tagCategoryId: string;
+    systemLink?: string;
+};