@3t-transform/threeteeui 0.0.1

package/dist/components/tttx-page.js

@@ -0,0 +1,953 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { C as CollectionWidget, B as BindableTemplate, a as Button, e as extend, i as isFunction, $, W as Widget, b as isDefined, r as registerComponent, h as hasWindow, g as getOuterWidth, m as messageLocalization, F as FunctionTemplate, L as ListSearch, D as DataSource, A as ArrayStore, c as compileGetter, n as noop, d as Deferred, G as Guid, f as getPublicElement, P as Popup, j as isPlainObject, k as ensureDefined, l as DataHelperMixin, o as getImageContainer, T as Toolbar, p as defineCustomElement$2 } from './tttx-worksheet2.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 }))));
+  }
+  static get style() { return tttxPageCss; }
+}, [0, "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 };