@componyx/ui 0.0.0-stage → 1.0.4

package/Slider/Themes/Default.css

@@ -0,0 +1,44 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+.slider.theme.theme-default > div.content > span.handle
+{
+    background: var(--cui-slider-handle-bg-color);
+    box-shadow: 0px 0px 5px 0px var(--cui-slider-handle-box-shadow-color);
+}
+
+.slider.theme.theme-default:not(.disabled) > div.content > span.handle:hover,
+.slider.theme.theme-default:not(.disabled) > div.content > span.handle:focus
+{
+    box-shadow: 0px 0px 5px 0px var(--cui-slider-handle-focus-box-shadow-color);
+}
+
+.slider.theme.theme-default > div.content > div.track
+{
+    background: var(--cui-slider-track-bg-color);
+}
+
+    .slider.theme.theme-default > div.content > div.track > div.range
+    {
+        background: var(--cui-slider-range-bg-color);
+    }
+
+.slider.theme.theme-default:not(.range):not(.reversed) > div.content > ul.ticks > li.tick::before,
+.slider.theme.theme-default:not(.range).reversed > div.content > ul.ticks > li.tick.selected::before,
+.slider.theme.theme-default:not(.range).reversed > div.content > ul.ticks > li.tick.selected ~ ::before,
+.slider.theme.theme-default.range:not(.reversed) > div.content > ul.ticks > li.tick.selected-start::before,
+.slider.theme.theme-default.range:not(.reversed) > div.content > ul.ticks > li.tick.selected-start ~ ::before,
+.slider.theme.theme-default.range.reversed > div.content > ul.ticks > li.tick::before,
+.slider.theme.theme-default.range.reversed > div.content > ul.ticks > li.tick.selected::before,
+.slider.theme.theme-default.range.reversed > div.content > ul.ticks > li.tick.selected ~ ::before
+{
+    background: var(--cui-slider-tick-mark-selected-color);
+}
+
+.slider.theme.theme-default:not(.reversed) > div.content > ul.ticks > li.tick.selected ~ ::before,
+.slider.theme.theme-default.range:not(.reversed) > div.content > ul.ticks > li.tick.selected ~ ::before,
+.slider.theme.theme-default:not(.range).reversed > div.content > ul.ticks > li.tick::before,
+.slider.theme.theme-default.range:not(.reversed) > div.content > ul.ticks > li.tick::before,
+.slider.theme.theme-default.range.reversed > div.content > ul.ticks > li.tick.selected-start ~ ::before,
+.slider.theme.theme-default.range.reversed > div.content > ul.ticks > li.tick::before
+{
+    background: var(--cui-slider-tick-mark-color);
+}

package/TabStrip/TabStrip.css

@@ -0,0 +1,52 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+.tab-strip.theme
+{
+    position: relative;
+}
+
+.tab-strip.theme > div.strip 
+{
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border-top-style: solid;
+    z-index: 0;
+}
+
+.tab-strip.theme.bottom > div.strip
+{
+    top: 0px;
+    bottom: auto;
+}
+
+.tab-strip.theme > .button.theme:not(:last-child)
+{
+    position: relative;
+    margin-right: 5px;
+}
+
+.tab-strip.theme:not(.bottom) > .button.theme:not(.split),
+.tab-strip.theme:not(.bottom) > .button.theme.split > div.command, 
+.tab-strip.theme:not(.bottom) > .button.theme.split > div.expand
+{
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+    border-bottom-color: transparent;
+}
+
+.tab-strip.theme.bottom > .button.theme:not(.split),
+.tab-strip.theme.bottom > .button.theme.split > div.command, 
+.tab-strip.theme.bottom > .button.theme.split > div.expand
+{
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
+    border-top-color: transparent;
+}
+
+.tab-strip.theme > .button.theme.selected,
+.tab-strip.theme > .button.theme.split > div.command.selected
+{
+    z-index: 1;
+    padding-bottom: 1px;
+}

package/TabStrip/TabStrip.js

@@ -0,0 +1,362 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+import '../Base/Base.js';
+import '../Base/Library.js';
+import '../Base/NavigationManager.js';
+import '../Button/Button.js';
+
+(async function (window)
+{
+    /**
+     * Namespace for tabstrip modules.
+     * @namespace componyx.UI.tabStrip_modules
+     */
+    componyx.UI.tabStrip_modules = componyx.UI.tabStrip_modules || {};
+
+    /**
+     * Promise that resolves when all tabstrip modules are loaded asynchronously.
+     * @type {Promise<void>}
+     * @memberof componyx.UI.tabStrip_modules
+     */
+    componyx.UI.tabStrip_modules.loaded = (async () =>
+    {
+        // these dynamic imports are removed when files are bundled into UI(.min).js
+    })();
+
+    await componyx.UI.tabStrip_modules.loaded;
+    const NavigationManager = componyx.base_modules.NavigationManager;
+
+    /**
+    * TabStrip class.
+    * @class
+    * @memberof componyx.UI
+    * @augments componyx.UI.base.Component
+    * @mixes componyx.UI.base.methods
+    * @param {String} id The id of the component.
+    * @param {Object|HTMLElement} properties The properties used to initialize the component or the container element.
+    * @returns {Object} An instance of the component.
+    */
+    componyx.UI.TabStrip = function TabStrip(id, properties)
+    {
+        // define private properties
+        var _instance = this;
+            $base.static.ThemeOption;
+            var _alignmentOption = componyx.UI.TabStrip.AlignmentOption,
+            _classOption =
+            {
+                STRIP: 'strip',
+                ITEM: 'item'
+            };
+
+        // define public properties
+        /**
+         * Gets or sets a value indicating whether the PostBack event is automatically fired.
+         * @type {String}
+         */
+        this.cssClassStrip = '';
+
+        /**
+         * Gets or sets the default css class of a tab item button.
+         * @type {String}
+         */
+        this.cssClassItem = '';
+
+        /**
+         * Gets or sets the default css class of the tab item button icon.
+         * @type {String}
+         */
+        this.cssClassItemIcon = '';
+
+        /**
+         * Gets or sets the selected item id.
+         * @type {String}
+         */
+        this.selectedItemId = '';
+
+        /**
+         * Gets or sets the tab alignment.
+         * @type {componyx.UI.TabStrip.AlignmentOption}
+         */
+        this.alignment = _alignmentOption.TOP;
+
+        /**
+         * Gets or sets the id of the component from which the settings are cloned.
+         * @type {String|null}
+         */
+        this.buttonId = null;
+
+        /**
+         * Gets or sets the list of items.
+         * @type {componyx.UI.TabStrip.Item[]}
+         */
+        this.itemList = [];
+
+        /** @private
+         *  @type {componyx.base_modules.NavigationManager}
+         */
+        this.navigationManager = null;
+
+        /**
+        * @class
+         * @augments componyx.UI.base.Events
+         * @memberof componyx.UI.TabStrip
+         * @property {componyx.UI.base.Event} onItemSelect    - Event which fires when a tab item is selected. @see {@link componyx.UI.TabStrip.ItemEventArgs}
+         * @property {componyx.UI.base.Event} onItemDeselect  - Event which fires when a tab item is deselected. @see {@link componyx.UI.TabStrip.ItemEventArgs}
+         * @see {@link componyx.UI.base.Events}
+         */
+        function TabStripEvents(events)
+        {
+            Object.assign(this, events);
+            this.onItemSelect = $base.static.createEvent('onItemSelect');
+            this.onItemDeselect = $base.static.createEvent('onItemDeselect');
+        }
+        /**
+         * TabStrip events
+         * @type {componyx.UI.TabStrip.TabStripEvents}
+         */
+        this.events = new TabStripEvents(this.events);
+
+        /**
+         * TabStrip item event arguments.
+         * @typedef {Object} ItemEventArgs
+         * @memberof componyx.UI.TabStrip
+         * @property {componyx.UI.Button} button - The tab button.
+         * @property {componyx.UI.TabStrip.Item} item - The tab item.
+         * @property {Event} event - The original event object.
+         */
+
+        // inherit base instance members
+        $base.Component.apply(this, [id, properties]);
+
+        /** 
+        * Renders the component
+        */
+        this.render = function ()
+        {
+            if (_instance.renderState != $base.static.RenderState.RENDERING)
+            {
+                // call base render and return
+                $base.methods.render.call(_instance, preRender, 'tab-strip');
+                return;
+            }
+
+            // render logic after loading resources
+            _instance.element.tabIndex = Number(_instance.tabIndex) || 0; // tabStrip widget is focusable, arrows are used to navigate tab-items
+            draw();
+        };
+
+        /** 
+         * Destroys the component.
+         * @see {@link componyx.UI.base.methods#destroy}
+         */
+        this.destroy = function (...args)
+        {
+            dispose();
+            $base.methods.destroy.call(this, ...args);
+        };
+
+        function preRender()
+        {
+            // initialize script and css
+            return ['TabStrip', ['Button']];
+        }
+
+        function draw()
+        {
+            var strip = document.createElement('div'),
+                selectFirst = true;
+
+            strip.className = _classOption.STRIP;
+            $lib.addClass(_instance.element, _alignmentOption.getName(_instance.alignment));
+
+            $lib.each(_instance.itemList, function (item, index)
+            {
+                if ($lib.isEmpty(item.id))
+                    item.id = index;
+
+                createTab(item);
+
+                if (item.selected)
+                    selectFirst = false;
+            });
+
+            _instance.element.appendChild(strip);
+            _instance.element.setAttribute('role', 'tablist');
+
+            if (_instance.selectedItemId)
+                $UI.store[getItemId(_instance.selectedItemId)].select();
+            else if (selectFirst)
+                $UI.store[getItemId(_instance.itemList[0].id)].select();
+
+            $lib.on(_instance.element, 'focus', focus);
+        }
+
+        function focus()
+        {
+            if (!_instance.navigationManager)
+                return;
+
+            const active = _instance.element.ownerDocument.activeElement;
+            if (_instance.element.contains(active) && active !== _instance.element)
+                return; // focus is already on a child, so skip resetting focus
+
+            _instance.navigationManager.setFocus(_instance.itemList[0].id);
+        }
+
+        function createTab(item)
+        {
+            var tab = $UI.createComponent(componyx.UI.Button, { id: getItemId(item.id), containerElement: _instance.element }),
+                cloneId = item.buttonId || _instance.buttonId;
+
+            tab.clone($UI.store[cloneId], _instance);
+            tab.renderId = false;
+            tab.cssClass = 'button ' + (item.cssClass || _instance.cssClassItem || _classOption.ITEM);
+            tab.cssClassIcon = item.cssClassIcon || _instance.cssClassItemIcon;
+            tab.hasIcon = item.hasIcon || false;
+            tab.iconURL = item.iconURL;
+            tab.selected = item.selected;
+            tab.disabled = item.disabled;
+            tab.split = item.split;
+
+            if (!$lib.isEmpty(item.transparent))
+                tab.transparent = item.transparent;
+            else if (!cloneId)
+                tab.transparent = true;
+
+            if (!$lib.isEmpty(item.transparentBorder))
+                tab.transparentBorder = item.transparentBorder;
+            else if (!cloneId)
+                tab.transparentBorder = false;
+
+            if (!$lib.isEmpty(item.primary))
+                tab.primary = item.primary;
+            else if (!cloneId)
+                tab.primary = false;
+
+            if (!$lib.isEmpty(item.decoration))
+                tab.decoration = item.decoration;
+            else if (!cloneId)
+                tab.decoration = (_instance.alignment == _alignmentOption.TOP) ? componyx.UI.Button.DecorationOption.OVERLINE : componyx.UI.Button.DecorationOption.UNDERLINE;
+
+            tab.menuId = item.menuId;
+            tab.menuItemId = item.menuItemId;
+            tab.boxId = item.boxId;
+            tab.type = componyx.UI.Button.TypeOption.RADIOBUTTON;
+            tab.radioGroupId = _instance.id;
+            tab.tabIndex = -1;
+            tab.events.onSelect.priorityAdd(function (sender, args) { _instance.events.onItemSelect.fire(_instance, eventArgs(sender, item)); });
+            tab.events.onDeselect.priorityAdd(function (sender, args) { _instance.events.onItemDeselect.fire(_instance, eventArgs(sender, item)); });
+
+            if (item.content)
+                tab.setContentTemplate(item.content);
+            else
+                tab.text = item.text;
+
+            tab.events.onClick.priorityAdd((button, event) =>
+            {
+                _instance.navigationManager.setFocusFromEvent(item, event);
+            });
+            tab.events.onPostRender.priorityAdd((tab) =>
+            {
+                tab.getCommandButton().setAttribute('role', 'tab');
+                createNavigationManager();
+                setTimeout(() => { _instance.isReady.apply(_instance); });
+            }, null);
+
+            tab.show();
+        }
+
+        function createNavigationManager()
+        {
+            if (_instance.navigationManager)
+                return;
+
+            _instance.navigationManager = new NavigationManager(_instance.element,
+                {
+                    itemList: _instance.itemList,
+                    horizontalRoot: true,
+                    tabNavigation: true,
+                    getButton: (item) => $UI.store[getItemId(item.id)]?.element,
+                    isExpandable: (item) => false,
+                    isFocusable: (item) => !Boolean(item.disabled)
+                });
+        }
+
+        function getItemId(id)
+        {
+            return $lib.format('{0}_{1}', _instance.id, id);
+        }
+
+        function eventArgs(button, item)
+        {
+            return { button: button, item: item, event: $lib.event }
+        }
+
+        function dispose()
+        {
+            _instance.navigationManager?.destroy();
+            _instance.navigationManager = null;
+        }
+    };
+
+    /**
+    * @see {@link componyx.UI.base.methods}
+    */
+    componyx.UI.TabStrip.prototype = Object.create($base.methods);
+    componyx.UI.TabStrip.prototype.constructor = componyx.UI.TabStrip;
+
+    /**
+    * AlignmentOption
+    * @readonly
+    * @enum {number}
+    */
+    componyx.UI.TabStrip.AlignmentOption =
+    {
+        TOP: 0,
+        BOTTOM: 1,
+
+        getName: function (value) { return $base.static.getKeyByValue(this, value).toLowerCase(); }
+    };
+
+    /**
+    * Creates an instance of the TabStrip item.
+    * @class
+    * @param {Object} properties The properties used to initialize the object.
+    * @property {HTMLElement[]|HTMLElement} content Gets or sets the content template of the item.
+    * @property {Boolean} hasIcon Gets or sets a value indicating if the item has an icon.
+    * @property {String} cssClassIcon Gets or sets the css class of the icon.
+    * @property {String} iconURL Gets or sets the URL of the icon.
+    * @property {Boolean} split Gets or sets a value indicating if the button has two actions.
+    * @property {Boolean} transparent Gets or sets a value indicating if the button's default background color is transparent.
+    * @property {Boolean} transparentBorder Gets or sets a value indicating if the button's default border color is transparent.
+    * @property {Boolean} primary Gets or sets a value indicating if the button is a primary button. When disabled the button's default style will be less prominent (basic) unless styled otherwise.
+    * @property {Button.DecorationOption} decoration Gets or sets the decoration type used when the button is hovered/selected.
+    * @property {String} menuId Gets or sets the id of the menu component.
+    * @property {String} menuItemId Gets or sets the id of the menu item.
+    * @property {String} boxId Gets or sets the id of the box component.
+    * @property {String} buttonId Gets or sets the id of the button component.
+    * @augments componyx.UI.base.Item
+    * @see {@link componyx.UI.base.Item}
+    */
+    componyx.UI.TabStrip.Item = function (properties)
+    {
+        this.content = null;
+        this.hasIcon = null;
+        this.cssClassIcon = '';
+        this.iconURL = null;
+        this.split = null;
+        this.transparent = null;
+        this.transparentBorder = null;
+        this.primary = null;
+        this.decoration = null;
+        this.menuId = null;
+        this.menuItemId = null;
+        this.boxId = null;
+        this.buttonId = null;
+
+        $base.static.Item.call(this, properties);
+    };
+})();
+
+const TabStrip = componyx.UI.TabStrip;
+
+export { TabStrip };

package/TabStrip/Themes/Default.css

@@ -0,0 +1,35 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+.tab-strip.theme.theme-default > .button.theme.theme-default:not(.split).selected:not(.disabled),
+.tab-strip.theme.theme-default > .button.theme.theme-default.split > div.command.selected:not(.disabled),
+.tab-strip.theme.theme-default > .button.theme.theme-default.split > div.command.selected:not(.disabled) + div.expand,
+.tab-strip.theme.theme-default > .button.theme.theme-default:not(.split).selected:not(.disabled):hover,
+.tab-strip.theme.theme-default > .button.theme.theme-default.split > div.command.selected:not(.disabled):hover,
+.tab-strip.theme.theme-default > .button.theme.theme-default:not(.split):not(.disabled).selected:focus,
+.tab-strip.theme.theme-default > .button.theme.theme-default.split:not(.disabled) > div.command.selected:focus,
+.tab-strip.theme.theme-default > .button.theme.theme-default:not(.disabled).expanded
+{
+    color: var(--cui-color-on-surface);
+    background: var(--cui-color-surface);
+    border-top-color: var(--cui-button-border-color);
+    border-left-color: var(--cui-button-border-color);
+    border-right-color: var(--cui-button-border-color);
+    border-bottom-color: var(--cui-color-surface);
+}
+
+.tab-strip.theme.theme-default.bottom > .button.theme.theme-default:not(.split).selected:not(.disabled),
+.tab-strip.theme.theme-default.bottom > .button.theme.theme-default.split > div.command.selected:not(.disabled),
+.tab-strip.theme.theme-default.bottom > .button.theme.theme-default.split > div.command.selected:not(.disabled) + div.expand,
+.tab-strip.theme.theme-default.bottom > .button.theme.theme-default:not(.split).selected:not(.disabled):hover,
+.tab-strip.theme.theme-default.bottom > .button.theme.theme-default.split > div.command.selected:not(.disabled):hover,
+.tab-strip.theme.theme-default.bottom > .button.theme.theme-default:not(.split):not(.disabled).selected:focus,
+.tab-strip.theme.theme-default.bottom > .button.theme.theme-default.split:not(.disabled) > div.command.selected:focus,
+.tab-strip.theme.theme-default.bottom > .button.theme.theme-default:not(.disabled).expanded
+{
+    border-bottom-color: var(--cui-button-border-color);
+    border-top-color: var(--cui-color-surface);
+}
+
+.tab-strip.theme.theme-default > .button.theme.theme-default.split > div.command.selected:not(.disabled)
+{
+    border-right-color: var(--cui-button-border-color);
+}

package/TimePicker/Themes/Default.css

@@ -0,0 +1,30 @@
+/*! Componyx.UI | (c) E.H. Daanen / Componyx | BUSL-1.1 | componyx.com/license */
+.time-picker.theme.theme-default .clock
+{
+    background: var(--cui-base-bg-color); /* base BG color */
+}
+
+    .time-picker.theme.theme-default .clock .clock-hand,
+    .time-picker.theme.theme-default .clock .clock-hand::before,
+    .time-picker.theme.theme-default .clock .clock-hand::after
+    {
+        background: var(--cui-base-dark-bg-color); /* base darker BG color */
+    }
+
+        .time-picker.theme.theme-default .clock .clock-hand.selected,
+        .time-picker.theme.theme-default .clock .clock-hand.selected::before,
+        .time-picker.theme.theme-default .clock .clock-hand.selected::after
+        {
+            background: var(--cui-button-bg-color); /* primary BG color */
+        }
+
+            .time-picker.theme.theme-default .clock .clock-item.selected,
+            .time-picker.theme.theme-default .clock .clock-hand.selected > *
+            {
+                color: var(--cui-button-text-color);
+            }
+
+        .time-picker.theme.theme-default .clock .clock-hand:focus::after
+        {
+            box-shadow: inset 0 -12px 0px -8px var(--cui-focus-box-shadow-color);
+        }