@3t-transform/threeteeui 0.0.5 → 0.0.7

package/dist/components/tttx-page.js

@@ -1,954 +0,0 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { T as Toolbar, d as defineCustomElement$2 } from './tttx-worksheet2.js';
-import { ac as CollectionWidget, ad as BindableTemplate, aa as Button, e as extend, ao as isFunction, $, W as Widget, o as isDefined, d as registerComponent, h as hasWindow, g as getOuterWidth, a5 as messageLocalization, a_ as FunctionTemplate, aZ as ListSearch, aY as DataSource, a$ as ArrayStore, b0 as compileGetter, k as noop, ag as Deferred, G as Guid, aq as getPublicElement, af as Popup, p as isPlainObject, b1 as ensureDefined, b2 as DataHelperMixin, b3 as getImageContainer } from './ui.popover.js';
-
-/**
- * DevExtreme (esm/ui/button_group.js)
- * Version: 22.1.6
- * Build date: Tue Oct 18 2022
- *
- * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
- * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
- */
-var BUTTON_GROUP_CLASS = "dx-buttongroup";
-var BUTTON_GROUP_WRAPPER_CLASS = BUTTON_GROUP_CLASS + "-wrapper";
-var BUTTON_GROUP_ITEM_CLASS = BUTTON_GROUP_CLASS + "-item";
-var BUTTON_GROUP_FIRST_ITEM_CLASS = BUTTON_GROUP_CLASS + "-first-item";
-var BUTTON_GROUP_LAST_ITEM_CLASS = BUTTON_GROUP_CLASS + "-last-item";
-var BUTTON_GROUP_ITEM_HAS_WIDTH = BUTTON_GROUP_ITEM_CLASS + "-has-width";
-var SHAPE_STANDARD_CLASS = "dx-shape-standard";
-var ButtonCollection = CollectionWidget.inherit({
-    _initTemplates() {
-        this.callBase();
-        this._templateManager.addDefaultTemplates({
-            item: new BindableTemplate(($container, data, model) => {
-                this._prepareItemStyles($container);
-                var template = this.option("buttonTemplate");
-                this._createComponent($container, Button, extend({}, model, data, this._getBasicButtonOptions(), {
-                    _templateData: this._hasCustomTemplate(template) ? model : {},
-                    template: model.template || template
-                }));
-            }, ["text", "type", "icon", "disabled", "visible", "hint"], this.option("integrationOptions.watchMethod"))
-        });
-    },
-    _getBasicButtonOptions() {
-        return {
-            focusStateEnabled: false,
-            onClick: null,
-            hoverStateEnabled: this.option("hoverStateEnabled"),
-            activeStateEnabled: this.option("activeStateEnabled"),
-            stylingMode: this.option("stylingMode")
-        }
-    },
-    _getDefaultOptions: function() {
-        return extend(this.callBase(), {
-            itemTemplateProperty: null
-        })
-    },
-    _hasCustomTemplate(template) {
-        return isFunction(template) || this.option("integrationOptions.templates")[template]
-    },
-    _prepareItemStyles($item) {
-        var itemIndex = $item.data("dxItemIndex");
-        0 === itemIndex && $item.addClass(BUTTON_GROUP_FIRST_ITEM_CLASS);
-        var items = this.option("items");
-        items && itemIndex === items.length - 1 && $item.addClass(BUTTON_GROUP_LAST_ITEM_CLASS);
-        $item.addClass(SHAPE_STANDARD_CLASS);
-    },
-    _renderItemContent(args) {
-        args.container = $(args.container).parent();
-        return this.callBase(args)
-    },
-    _renderItemContentByNode: function(args, $node) {
-        args.container = $(args.container.children().first());
-        return this.callBase(args, $node)
-    },
-    _focusTarget() {
-        return this.$element().parent()
-    },
-    _keyboardEventBindingTarget() {
-        return this._focusTarget()
-    },
-    _refreshContent() {
-        this._prepareContent();
-        this._renderContent();
-    },
-    _itemClass: () => BUTTON_GROUP_ITEM_CLASS,
-    _itemSelectHandler: function(e) {
-        if ("single" === this.option("selectionMode") && this.isItemSelected(e.currentTarget)) {
-            return
-        }
-        this.callBase(e);
-    }
-});
-var ButtonGroup = Widget.inherit({
-    _getDefaultOptions() {
-        return extend(this.callBase(), {
-            hoverStateEnabled: true,
-            focusStateEnabled: true,
-            selectionMode: "single",
-            selectedItems: [],
-            selectedItemKeys: [],
-            stylingMode: "contained",
-            keyExpr: "text",
-            items: [],
-            buttonTemplate: "content",
-            onSelectionChanged: null,
-            onItemClick: null
-        })
-    },
-    _init() {
-        this.callBase();
-        this._createItemClickAction();
-    },
-    _createItemClickAction() {
-        this._itemClickAction = this._createActionByOption("onItemClick");
-    },
-    _initMarkup() {
-        this.setAria("role", "group");
-        this.$element().addClass(BUTTON_GROUP_CLASS);
-        this._renderButtons();
-        this._syncSelectionOptions();
-        this.callBase();
-    },
-    _fireSelectionChangeEvent: function(addedItems, removedItems) {
-        this._createActionByOption("onSelectionChanged", {
-            excludeValidators: ["disabled", "readOnly"]
-        })({
-            addedItems: addedItems,
-            removedItems: removedItems
-        });
-    },
-    _renderButtons() {
-        var $buttons = $("<div>").addClass(BUTTON_GROUP_WRAPPER_CLASS).appendTo(this.$element());
-        var selectedItems = this.option("selectedItems");
-        var options = {
-            selectionMode: this.option("selectionMode"),
-            items: this.option("items"),
-            keyExpr: this.option("keyExpr"),
-            buttonTemplate: this.option("buttonTemplate"),
-            scrollingEnabled: false,
-            selectedItemKeys: this.option("selectedItemKeys"),
-            focusStateEnabled: this.option("focusStateEnabled"),
-            hoverStateEnabled: this.option("hoverStateEnabled"),
-            activeStateEnabled: this.option("activeStateEnabled"),
-            stylingMode: this.option("stylingMode"),
-            accessKey: this.option("accessKey"),
-            tabIndex: this.option("tabIndex"),
-            noDataText: "",
-            selectionRequired: false,
-            onItemRendered: e => {
-                var width = this.option("width");
-                isDefined(width) && $(e.itemElement).addClass(BUTTON_GROUP_ITEM_HAS_WIDTH);
-            },
-            onSelectionChanged: e => {
-                this._syncSelectionOptions();
-                this._fireSelectionChangeEvent(e.addedItems, e.removedItems);
-            },
-            onItemClick: e => {
-                this._itemClickAction(e);
-            }
-        };
-        if (isDefined(selectedItems) && selectedItems.length) {
-            options.selectedItems = selectedItems;
-        }
-        this._buttonsCollection = this._createComponent($buttons, ButtonCollection, options);
-    },
-    _syncSelectionOptions() {
-        this._setOptionWithoutOptionChange("selectedItems", this._buttonsCollection.option("selectedItems"));
-        this._setOptionWithoutOptionChange("selectedItemKeys", this._buttonsCollection.option("selectedItemKeys"));
-    },
-    _optionChanged(args) {
-        switch (args.name) {
-            case "stylingMode":
-            case "selectionMode":
-            case "keyExpr":
-            case "buttonTemplate":
-            case "items":
-            case "activeStateEnabled":
-            case "focusStateEnabled":
-            case "hoverStateEnabled":
-            case "tabIndex":
-                this._invalidate();
-                break;
-            case "selectedItemKeys":
-            case "selectedItems":
-                this._buttonsCollection.option(args.name, args.value);
-                break;
-            case "onItemClick":
-                this._createItemClickAction();
-                break;
-            case "onSelectionChanged":
-                break;
-            case "width":
-                this.callBase(args);
-                this._buttonsCollection.itemElements().toggleClass(BUTTON_GROUP_ITEM_HAS_WIDTH, !!args.value);
-                break;
-            default:
-                this.callBase(args);
-        }
-    }
-});
-registerComponent("dxButtonGroup", ButtonGroup);
-
-/**
- * DevExtreme (esm/ui/drop_down_editor/utils.js)
- * Version: 22.1.6
- * Build date: Tue Oct 18 2022
- *
- * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
- * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
- */
-var getElementWidth = function($element) {
-    if (hasWindow()) {
-        return getOuterWidth($element)
-    }
-};
-var getSizeValue = function(size) {
-    if (null === size) {
-        size = void 0;
-    }
-    if ("function" === typeof size) {
-        size = size();
-    }
-    return size
-};
-
-/**
- * DevExtreme (esm/ui/drop_down_button.js)
- * Version: 22.1.6
- * Build date: Tue Oct 18 2022
- *
- * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
- * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
- */
-var DROP_DOWN_BUTTON_CLASS = "dx-dropdownbutton";
-var DROP_DOWN_BUTTON_CONTENT = "dx-dropdownbutton-content";
-var DROP_DOWN_BUTTON_ACTION_CLASS = "dx-dropdownbutton-action";
-var DROP_DOWN_BUTTON_TOGGLE_CLASS = "dx-dropdownbutton-toggle";
-var DROP_DOWN_BUTTON_HAS_ARROW_CLASS = "dx-dropdownbutton-has-arrow";
-var DROP_DOWN_BUTTON_POPUP_WRAPPER_CLASS = "dx-dropdownbutton-popup-wrapper";
-var DROP_DOWN_EDITOR_OVERLAY_CLASS = "dx-dropdowneditor-overlay";
-var DX_BUTTON_TEXT_CLASS = "dx-button-text";
-var DX_ICON_RIGHT_CLASS = "dx-icon-right";
-var DropDownButton = Widget.inherit({
-    _getDefaultOptions() {
-        return extend(this.callBase(), {
-            itemTemplate: "item",
-            keyExpr: "this",
-            displayExpr: void 0,
-            selectedItem: null,
-            selectedItemKey: null,
-            stylingMode: "outlined",
-            deferRendering: true,
-            noDataText: messageLocalization.format("dxCollectionWidget-noDataText"),
-            useSelectMode: false,
-            splitButton: false,
-            showArrowIcon: true,
-            text: "",
-            icon: void 0,
-            onButtonClick: null,
-            onSelectionChanged: null,
-            onItemClick: null,
-            opened: false,
-            items: null,
-            dataSource: null,
-            focusStateEnabled: true,
-            hoverStateEnabled: true,
-            dropDownOptions: {},
-            dropDownContentTemplate: "content",
-            wrapItemText: false,
-            useItemTextAsTitle: true,
-            grouped: false,
-            groupTemplate: "group",
-            buttonGroupOptions: {}
-        })
-    },
-    _setOptionsByReference() {
-        this.callBase();
-        extend(this._optionsByReference, {
-            selectedItem: true
-        });
-    },
-    _init() {
-        this.callBase();
-        this._createItemClickAction();
-        this._createActionClickAction();
-        this._createSelectionChangedAction();
-        this._initDataSource();
-        this._compileKeyGetter();
-        this._compileDisplayGetter();
-        this._itemsToDataSource(this.option("items"));
-        this._options.cache("buttonGroupOptions", this.option("buttonGroupOptions"));
-        this._options.cache("dropDownOptions", this.option("dropDownOptions"));
-    },
-    _initTemplates() {
-        this._templateManager.addDefaultTemplates({
-            content: new FunctionTemplate(options => {
-                var $popupContent = $(options.container);
-                var $listContainer = $("<div>").appendTo($popupContent);
-                this._list = this._createComponent($listContainer, ListSearch, this._listOptions());
-                this._list.registerKeyHandler("escape", this._escHandler.bind(this));
-                this._list.registerKeyHandler("tab", this._escHandler.bind(this));
-                this._list.registerKeyHandler("leftArrow", this._escHandler.bind(this));
-                this._list.registerKeyHandler("rightArrow", this._escHandler.bind(this));
-            })
-        });
-        this.callBase();
-    },
-    _itemsToDataSource: function(value) {
-        if (!this._dataSource) {
-            this._dataSource = new DataSource({
-                store: new ArrayStore({
-                    key: this._getKey(),
-                    data: value
-                }),
-                pageSize: 0
-            });
-        }
-    },
-    _getKey: function() {
-        var _this$_dataSource;
-        var keyExpr = this.option("keyExpr");
-        var storeKey = null === (_this$_dataSource = this._dataSource) || void 0 === _this$_dataSource ? void 0 : _this$_dataSource.key();
-        return isDefined(storeKey) && (!isDefined(keyExpr) || "this" === keyExpr) ? storeKey : keyExpr
-    },
-    _compileKeyGetter() {
-        this._keyGetter = compileGetter(this._getKey());
-    },
-    _compileDisplayGetter() {
-        this._displayGetter = compileGetter(this.option("displayExpr"));
-    },
-    _initMarkup() {
-        this.callBase();
-        this.$element().addClass(DROP_DOWN_BUTTON_CLASS);
-        this._renderButtonGroup();
-        this._updateArrowClass();
-        if (isDefined(this.option("selectedItemKey"))) {
-            this._loadSelectedItem().done(this._updateActionButton.bind(this));
-        }
-    },
-    _renderFocusTarget: noop,
-    _render() {
-        if (!this.option("deferRendering") || this.option("opened")) {
-            this._renderPopup();
-        }
-        this.callBase();
-    },
-    _renderContentImpl() {
-        if (this._popup) {
-            this._renderPopupContent();
-        }
-        return this.callBase()
-    },
-    _loadSelectedItem() {
-        var _this$_loadSingleDefe;
-        null === (_this$_loadSingleDefe = this._loadSingleDeferred) || void 0 === _this$_loadSingleDefe ? void 0 : _this$_loadSingleDefe.reject();
-        var d = new Deferred;
-        if (this._list && void 0 !== this._lastSelectedItemData) {
-            var cachedResult = this.option("useSelectMode") ? this._list.option("selectedItem") : this._lastSelectedItemData;
-            return d.resolve(cachedResult)
-        }
-        this._lastSelectedItemData = void 0;
-        var selectedItemKey = this.option("selectedItemKey");
-        this._loadSingle(this._getKey(), selectedItemKey).done(d.resolve).fail(() => {
-            d.resolve(null);
-        });
-        this._loadSingleDeferred = d;
-        return d.promise()
-    },
-    _createActionClickAction() {
-        this._actionClickAction = this._createActionByOption("onButtonClick");
-    },
-    _createSelectionChangedAction() {
-        this._selectionChangedAction = this._createActionByOption("onSelectionChanged");
-    },
-    _createItemClickAction() {
-        this._itemClickAction = this._createActionByOption("onItemClick");
-    },
-    _fireSelectionChangedAction(_ref) {
-        var {
-            previousValue: previousValue,
-            value: value
-        } = _ref;
-        this._selectionChangedAction({
-            item: value,
-            previousItem: previousValue
-        });
-    },
-    _fireItemClickAction(_ref2) {
-        var {
-            event: event,
-            itemElement: itemElement,
-            itemData: itemData
-        } = _ref2;
-        return this._itemClickAction({
-            event: event,
-            itemElement: itemElement,
-            itemData: this._actionItem || itemData
-        })
-    },
-    _actionButtonConfig() {
-        return {
-            text: this.option("text"),
-            icon: this.option("icon"),
-            elementAttr: {
-                class: DROP_DOWN_BUTTON_ACTION_CLASS
-            }
-        }
-    },
-    _getButtonGroupItems() {
-        var items = [];
-        items.push(this._actionButtonConfig());
-        if (this.option("splitButton")) {
-            items.push({
-                icon: "spindown",
-                elementAttr: {
-                    class: DROP_DOWN_BUTTON_TOGGLE_CLASS
-                }
-            });
-        }
-        return items
-    },
-    _buttonGroupItemClick(_ref3) {
-        var {
-            event: event,
-            itemData: itemData
-        } = _ref3;
-        var isActionButton = itemData.elementAttr.class === DROP_DOWN_BUTTON_ACTION_CLASS;
-        var isToggleButton = itemData.elementAttr.class === DROP_DOWN_BUTTON_TOGGLE_CLASS;
-        if (isToggleButton) {
-            this.toggle();
-        } else if (isActionButton) {
-            this._actionClickAction({
-                event: event,
-                selectedItem: this.option("selectedItem")
-            });
-            if (!this.option("splitButton")) {
-                this.toggle();
-            }
-        }
-    },
-    _buttonGroupOptions() {
-        var {
-            splitButton: splitButton,
-            showArrowIcon: showArrowIcon,
-            focusStateEnabled: focusStateEnabled,
-            hoverStateEnabled: hoverStateEnabled,
-            stylingMode: stylingMode,
-            accessKey: accessKey,
-            tabIndex: tabIndex
-        } = this.option();
-        var buttonTemplate = splitButton || !showArrowIcon ? "content" : (_ref4, buttonContent) => {
-            var {
-                text: text,
-                icon: icon
-            } = _ref4;
-            var $firstIcon = getImageContainer(icon);
-            var $textContainer = text ? $("<span>").text(text).addClass(DX_BUTTON_TEXT_CLASS) : void 0;
-            var $secondIcon = getImageContainer("spindown").addClass(DX_ICON_RIGHT_CLASS);
-            $(buttonContent).append($firstIcon, $textContainer, $secondIcon);
-        };
-        return extend({
-            items: this._getButtonGroupItems(),
-            onItemClick: this._buttonGroupItemClick.bind(this),
-            width: "100%",
-            height: "100%",
-            selectionMode: "none",
-            onKeyboardHandled: e => this._keyboardHandler(e),
-            buttonTemplate: buttonTemplate,
-            focusStateEnabled: focusStateEnabled,
-            hoverStateEnabled: hoverStateEnabled,
-            stylingMode: stylingMode,
-            accessKey: accessKey,
-            tabIndex: tabIndex
-        }, this._options.cache("buttonGroupOptions"))
-    },
-    _renderPopupContent() {
-        var $content = this._popup.$content();
-        var template = this._getTemplateByOption("dropDownContentTemplate");
-        $content.empty();
-        this._popupContentId = "dx-" + new Guid;
-        this.setAria("id", this._popupContentId, $content);
-        return template.render({
-            container: getPublicElement($content),
-            model: this.option("items") || this._dataSource
-        })
-    },
-    _popupOptions() {
-        var horizontalAlignment = this.option("rtlEnabled") ? "right" : "left";
-        return extend({
-            dragEnabled: false,
-            focusStateEnabled: false,
-            deferRendering: this.option("deferRendering"),
-            hideOnOutsideClick: e => {
-                var $element = this.$element();
-                var $buttonClicked = $(e.target).closest(".".concat(DROP_DOWN_BUTTON_CLASS));
-                return !$buttonClicked.is($element)
-            },
-            showTitle: false,
-            animation: {
-                show: {
-                    type: "fade",
-                    duration: 0,
-                    from: 0,
-                    to: 1
-                },
-                hide: {
-                    type: "fade",
-                    duration: 400,
-                    from: 1,
-                    to: 0
-                }
-            },
-            _ignoreFunctionValueDeprecation: true,
-            width: () => getElementWidth(this.$element()),
-            height: "auto",
-            shading: false,
-            position: {
-                of: this.$element(),
-                collision: "flipfit",
-                my: horizontalAlignment + " top",
-                at: horizontalAlignment + " bottom"
-            },
-            wrapperAttr: {
-                class: DROP_DOWN_EDITOR_OVERLAY_CLASS
-            }
-        }, this._options.cache("dropDownOptions"), {
-            visible: this.option("opened")
-        })
-    },
-    _listOptions() {
-        var selectedItemKey = this.option("selectedItemKey");
-        var useSelectMode = this.option("useSelectMode");
-        return {
-            selectionMode: useSelectMode ? "single" : "none",
-            wrapItemText: this.option("wrapItemText"),
-            focusStateEnabled: this.option("focusStateEnabled"),
-            hoverStateEnabled: this.option("hoverStateEnabled"),
-            useItemTextAsTitle: this.option("useItemTextAsTitle"),
-            onContentReady: () => this._fireContentReadyAction(),
-            selectedItemKeys: isDefined(selectedItemKey) && useSelectMode ? [selectedItemKey] : [],
-            grouped: this.option("grouped"),
-            groupTemplate: this.option("groupTemplate"),
-            keyExpr: this._getKey(),
-            noDataText: this.option("noDataText"),
-            displayExpr: this.option("displayExpr"),
-            itemTemplate: this.option("itemTemplate"),
-            items: this.option("items"),
-            dataSource: this._dataSource,
-            onItemClick: e => {
-                if (!this.option("useSelectMode")) {
-                    this._lastSelectedItemData = e.itemData;
-                }
-                this.option("selectedItemKey", this._keyGetter(e.itemData));
-                var actionResult = this._fireItemClickAction(e);
-                if (false !== actionResult) {
-                    this.toggle(false);
-                    this._buttonGroup.focus();
-                }
-            }
-        }
-    },
-    _upDownKeyHandler() {
-        if (this._popup && this._popup.option("visible") && this._list) {
-            this._list.focus();
-        } else {
-            this.open();
-        }
-        return true
-    },
-    _escHandler() {
-        this.close();
-        this._buttonGroup.focus();
-        return true
-    },
-    _tabHandler() {
-        this.close();
-        return true
-    },
-    _renderPopup() {
-        var $popup = $("<div>");
-        this.$element().append($popup);
-        this._popup = this._createComponent($popup, Popup, this._popupOptions());
-        this._popup.$content().addClass(DROP_DOWN_BUTTON_CONTENT);
-        this._popup.$wrapper().addClass(DROP_DOWN_BUTTON_POPUP_WRAPPER_CLASS);
-        this._popup.on("hiding", this._popupHidingHandler.bind(this));
-        this._popup.on("showing", this._popupShowingHandler.bind(this));
-        this._bindInnerWidgetOptions(this._popup, "dropDownOptions");
-    },
-    _popupHidingHandler() {
-        this.option("opened", false);
-        this._setAriaExpanded(false);
-    },
-    _popupOptionChanged: function(args) {
-        var options = Widget.getOptionsFromContainer(args);
-        this._setPopupOption(options);
-        var optionsKeys = Object.keys(options);
-        if (-1 !== optionsKeys.indexOf("width") || -1 !== optionsKeys.indexOf("height")) {
-            this._dimensionChanged();
-        }
-    },
-    _dimensionChanged: function() {
-        var popupWidth = getSizeValue(this.option("dropDownOptions.width"));
-        if (void 0 === popupWidth) {
-            this._setPopupOption("width", () => getElementWidth(this.$element()));
-        }
-    },
-    _setPopupOption: function(optionName, value) {
-        this._setWidgetOption("_popup", arguments);
-    },
-    _popupShowingHandler() {
-        this.option("opened", true);
-        this._setAriaExpanded(true);
-    },
-    _setAriaExpanded(value) {
-        this._ariaExpandedElements.forEach(ariaElement => {
-            this.setAria({
-                expanded: value,
-                owns: value ? this._popupContentId : void 0
-            }, $(ariaElement));
-        });
-    },
-    _renderButtonGroup() {
-        var $buttonGroup = this._buttonGroup && this._buttonGroup.$element() || $("<div>");
-        if (!this._buttonGroup) {
-            this.$element().append($buttonGroup);
-        }
-        this._buttonGroup = this._createComponent($buttonGroup, ButtonGroup, this._buttonGroupOptions());
-        var buttonElements = this._buttonGroup.$element().find(".dx-button").toArray();
-        this._ariaExpandedElements = [...buttonElements, this.$element()];
-        this._buttonGroup.registerKeyHandler("downArrow", this._upDownKeyHandler.bind(this));
-        this._buttonGroup.registerKeyHandler("tab", this._tabHandler.bind(this));
-        this._buttonGroup.registerKeyHandler("upArrow", this._upDownKeyHandler.bind(this));
-        this._buttonGroup.registerKeyHandler("escape", this._escHandler.bind(this));
-        this._bindInnerWidgetOptions(this._buttonGroup, "buttonGroupOptions");
-        this._setAriaExpanded(this.option("opened"));
-    },
-    _updateArrowClass() {
-        var hasArrow = this.option("splitButton") || this.option("showArrowIcon");
-        this.$element().toggleClass(DROP_DOWN_BUTTON_HAS_ARROW_CLASS, hasArrow);
-    },
-    toggle(visible) {
-        if (!this._popup) {
-            this._renderPopup();
-            this._renderContent();
-        }
-        return this._popup.toggle(visible)
-    },
-    open() {
-        return this.toggle(true)
-    },
-    close() {
-        return this.toggle(false)
-    },
-    _setListOption(name, value) {
-        this._list && this._list.option(name, value);
-    },
-    _getDisplayValue(item) {
-        var isPrimitiveItem = !isPlainObject(item);
-        var displayValue = isPrimitiveItem ? item : this._displayGetter(item);
-        return !isPlainObject(displayValue) ? String(ensureDefined(displayValue, "")) : ""
-    },
-    _updateActionButton(selectedItem) {
-        if (this.option("useSelectMode")) {
-            this.option({
-                text: this._getDisplayValue(selectedItem),
-                icon: isPlainObject(selectedItem) ? selectedItem.icon : void 0
-            });
-        }
-        this._setOptionWithoutOptionChange("selectedItem", selectedItem);
-        this._setOptionWithoutOptionChange("selectedItemKey", this._keyGetter(selectedItem));
-    },
-    _clean() {
-        this._list && this._list.$element().remove();
-        this._popup && this._popup.$element().remove();
-    },
-    _selectedItemKeyChanged(value) {
-        this._setListOption("selectedItemKeys", this.option("useSelectMode") && isDefined(value) ? [value] : []);
-        var previousItem = this.option("selectedItem");
-        this._loadSelectedItem().done(selectedItem => {
-            this._updateActionButton(selectedItem);
-            if (this._displayGetter(previousItem) !== this._displayGetter(selectedItem)) {
-                this._fireSelectionChangedAction({
-                    previousValue: previousItem,
-                    value: selectedItem
-                });
-            }
-        });
-    },
-    _actionButtonOptionChanged(_ref5) {
-        var {
-            name: name,
-            value: value
-        } = _ref5;
-        var newConfig = {};
-        newConfig[name] = value;
-        this._buttonGroup.option("items[0]", extend({}, this._actionButtonConfig(), newConfig));
-        this._popup && this._popup.repaint();
-    },
-    _selectModeChanged(value) {
-        if (value) {
-            this._setListOption("selectionMode", "single");
-            var selectedItemKey = this.option("selectedItemKey");
-            this._setListOption("selectedItemKeys", isDefined(selectedItemKey) ? [selectedItemKey] : []);
-            this._selectedItemKeyChanged(this.option("selectedItemKey"));
-        } else {
-            this._setListOption("selectionMode", "none");
-            this.option({
-                selectedItemKey: void 0,
-                selectedItem: void 0
-            });
-            this._actionButtonOptionChanged({
-                text: this.option("text")
-            });
-        }
-    },
-    _updateItemCollection(optionName) {
-        var selectedItemKey = this.option("selectedItemKey");
-        this._setListOption("selectedItem", null);
-        this._setWidgetOption("_list", [optionName]);
-        if (isDefined(selectedItemKey)) {
-            this._loadSelectedItem().done(selectedItem => {
-                this._setListOption("selectedItemKeys", [selectedItemKey]);
-                this._setListOption("selectedItem", selectedItem);
-            }).fail(error => {
-                this._setListOption("selectedItemKeys", []);
-            }).always(this._updateActionButton.bind(this));
-        }
-    },
-    _updateDataSource: function() {
-        var items = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : this._dataSource.items();
-        this._dataSource = void 0;
-        this._itemsToDataSource(items);
-        this._updateKeyExpr();
-    },
-    _updateKeyExpr: function() {
-        this._compileKeyGetter();
-        this._setListOption("keyExpr", this._getKey());
-    },
-    focus: function() {
-        this._buttonGroup.focus();
-    },
-    _optionChanged(args) {
-        var _this$_popup;
-        var {
-            name: name,
-            value: value
-        } = args;
-        switch (name) {
-            case "useSelectMode":
-                this._selectModeChanged(value);
-                break;
-            case "splitButton":
-                this._updateArrowClass();
-                this._renderButtonGroup();
-                break;
-            case "displayExpr":
-                this._compileDisplayGetter();
-                this._setListOption(name, value);
-                this._updateActionButton(this.option("selectedItem"));
-                break;
-            case "keyExpr":
-                this._updateDataSource();
-                break;
-            case "buttonGroupOptions":
-                this._innerWidgetOptionChanged(this._buttonGroup, args);
-                break;
-            case "dropDownOptions":
-                if ("dropDownOptions.visible" === args.fullName) {
-                    break
-                }
-                if (void 0 !== args.value.visible) {
-                    delete args.value.visible;
-                }
-                this._popupOptionChanged(args);
-                this._innerWidgetOptionChanged(this._popup, args);
-                break;
-            case "opened":
-                this.toggle(value);
-                break;
-            case "focusStateEnabled":
-            case "hoverStateEnabled":
-                this._setListOption(name, value);
-                this._buttonGroup.option(name, value);
-                this.callBase(args);
-                break;
-            case "items":
-                this._updateDataSource(this.option("items"));
-                this._updateItemCollection(name);
-                break;
-            case "dataSource":
-                if (Array.isArray(value)) {
-                    this._updateDataSource(this.option("dataSource"));
-                } else {
-                    this._initDataSource();
-                    this._updateKeyExpr();
-                }
-                this._updateItemCollection(name);
-                break;
-            case "icon":
-            case "text":
-                this._actionButtonOptionChanged(args);
-                break;
-            case "showArrowIcon":
-                this._updateArrowClass();
-                this._renderButtonGroup();
-                this._popup && this._popup.repaint();
-                break;
-            case "width":
-            case "height":
-                this.callBase(args);
-                null === (_this$_popup = this._popup) || void 0 === _this$_popup ? void 0 : _this$_popup.repaint();
-                break;
-            case "stylingMode":
-                this._buttonGroup.option(name, value);
-                break;
-            case "itemTemplate":
-            case "grouped":
-            case "noDataText":
-            case "groupTemplate":
-            case "wrapItemText":
-            case "useItemTextAsTitle":
-                this._setListOption(name, value);
-                break;
-            case "dropDownContentTemplate":
-                this._renderContent();
-                break;
-            case "selectedItemKey":
-                this._selectedItemKeyChanged(value);
-                break;
-            case "selectedItem":
-                break;
-            case "onItemClick":
-                this._createItemClickAction();
-                break;
-            case "onButtonClick":
-                this._createActionClickAction();
-                break;
-            case "onSelectionChanged":
-                this._createSelectionChangedAction();
-                break;
-            case "deferRendering":
-                this.toggle(this.option("opened"));
-                break;
-            case "tabIndex":
-                this._buttonGroup.option(name, value);
-                break;
-            default:
-                this.callBase(args);
-        }
-    }
-}).include(DataHelperMixin);
-registerComponent("dxDropDownButton", DropDownButton);
-
-const tttxPageCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto&display=swap\");*{box-sizing:border-box}.flex-start{justify-content:start}.flex-end{justify-content:end}.flex-centre{justify-content:center}[class^=col-]{display:flex;padding-left:8px !important;padding-right:8px !important}h1,h2,h3,h4,h5,h6,p,label,small{margin:0;padding:0}h1,h2,h3,h4,h5,h6,p,label{display:block}*{font-family:\"Roboto\", sans-serif}html,body{font-weight:normal;font-size:16px}h1{font-weight:700;font-size:24px}h2{font-weight:700;font-size:20px}h3{font-weight:700;font-size:18px}h4{font-weight:normal;font-size:14px;text-transform:uppercase}button{font-weight:500;font-size:14px;text-transform:uppercase}small{font-weight:normal;font-size:14px}label{font-weight:700;font-size:16px}:host{display:block}.page{background-color:#F0F0F0;width:100%;height:100%}.page__platform-bar.dx-toolbar{position:fixed;top:0px;left:0px;right:0px;background-color:#142748;color:#ffffff;font-size:24px;padding:0 8px}.page__title-bar__container,.page__title-bar__container--large,.page__title-bar__container--medium,.page__title-bar__container--small{position:fixed;top:52px;left:0px;right:0px}.page__title-bar__container .dx-toolbar,.page__title-bar__container--large .dx-toolbar,.page__title-bar__container--medium .dx-toolbar,.page__title-bar__container--small .dx-toolbar{color:#212121;background-color:#F0F0F0;font-size:24px}.page__title-bar__container,.page__title-bar__container--medium,.page__title-bar__container--small{margin:0px auto}.page__title-bar__container--large{margin:0px 16px}.page__title-bar__container--medium{width:900px}.page__title-bar__container--small{width:600px}.page__title-bar__after-container__label{font-size:14px;color:#757575;font-weight:300}.page__title-bar__after-container__value{font-size:14px;color:#111111;font-weight:400;margin:0 10px 0 0}.page__platform-bar__button .dx-button-mode-text .dx-icon{color:white}.page__platform-bar__button__dropdown-options .dx-dropdownbutton-content .dx-list .dx-list-item:last-of-type::before{width:90%;margin:auto 5%;height:1px;content:\"\";position:absolute;background:grey}";
-
-const TttxPage$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.appName = undefined;
-    this.pageTitle = undefined;
-    this.lastUpdated = undefined;
-    this.manageAccountsUrl = undefined;
-    this.logoutUrl = undefined;
-    this.pageSize = 'large';
-    this.helpUrl = undefined;
-  }
-  componentDidLoad() {
-    new Toolbar(this.platformBar, {
-      items: [
-        {
-          location: 'before',
-          locateInMenu: 'never',
-          text: this.appName
-        },
-        {
-          location: 'after',
-          widget: DropDownButton,
-          cssClass: 'page__platform-bar__button',
-          options: {
-            icon: 'overflow',
-            keyExpr: 'id',
-            displayExpr: 'text',
-            stylingMode: 'text',
-            showArrowIcon: false,
-            dropDownOptions: { width: '200', wrapperAttr: { class: 'page__platform-bar__button__dropdown-options' } },
-            items: this.platformBarButtonItems()
-          }
-        }
-      ]
-    });
-    new Toolbar(this.pageTitleBar, {
-      items: [
-        {
-          location: 'before',
-          text: this.pageTitle
-        },
-        {
-          location: 'after',
-          html: `<span class='page__title-bar__after-container__label'>Last updated</span> <span class='page__title-bar__after-container__value'>${this.lastUpdated}</span>`
-        },
-        {
-          location: 'after',
-          widget: Button,
-          options: {
-            text: 'help',
-            icon: 'help',
-            stylingMode: 'outlined',
-            onClick: () => { window.open(this.helpUrl, '_blank'); }
-          }
-        }
-      ]
-    });
-  }
-  platformBarButtonItems() {
-    return [
-      { id: 1, text: 'Manage Accounts', icon: "user", onClick: () => { window.open(this.manageAccountsUrl, '_blank'); } },
-      { id: 2, text: 'Logout', icon: "runner", onClick: () => { window.location.href = this.logoutUrl; } }
-    ];
-  }
-  pageSizeIsNumeric() {
-    return /^\d+$/.test(this.pageSize);
-  }
-  pageSizeClasses(baseClassName) {
-    return this.pageSizeIsNumeric() ? baseClassName : `${baseClassName}--${this.pageSize}`;
-  }
-  render() {
-    const customPageWidth = this.pageSizeIsNumeric ? { width: `${this.pageSize}px` } : {};
-    return (h(Host, { style: { margin: '0px', overflow: 'hidden' } }, h("div", { class: "page" }, h("div", { class: 'page__platform-bar', ref: el => (this.platformBar = el) }), h("div", { class: this.pageSizeClasses('page__title-bar__container'), style: Object.assign({}, customPageWidth) }, h("div", { ref: el => (this.pageTitleBar = el) })), h("tttx-worksheet", { pageSize: this.pageSize }, h("slot", null)))));
-  }
-  static get style() { return tttxPageCss; }
-}, [4, "tttx-page", {
-    "appName": [1, "app-name"],
-    "pageTitle": [1, "page-title"],
-    "lastUpdated": [1, "last-updated"],
-    "manageAccountsUrl": [1, "manage-accounts-url"],
-    "logoutUrl": [1, "logout-url"],
-    "pageSize": [1, "page-size"],
-    "helpUrl": [1, "help-url"]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["tttx-page", "tttx-worksheet"];
-  components.forEach(tagName => { switch (tagName) {
-    case "tttx-page":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TttxPage$1);
-      }
-      break;
-    case "tttx-worksheet":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
-
-const TttxPage = TttxPage$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { TttxPage, defineCustomElement };