@idevs/corelib 0.0.39 → 0.0.40

package/dist/ui/DropdownToolButton.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="jquery" />
+export type DropdownToolButtonOptions = {
+    title?: string;
+    cssClass?: string;
+    icon?: string;
+    disabled?: boolean;
+    dropdownMenuPosition?: 'right';
+    isDropUp?: boolean;
+};
+export type DropdownToolButtonItem = {
+    key: string;
+    title?: string;
+    hint?: string;
+    cssClass?: string;
+    icon?: string;
+    onClick?: (e: JQuery.ClickEvent<HTMLElement, null, HTMLElement, HTMLElement>) => void;
+    isSeparator?: boolean;
+    disabled?: boolean;
+    isDropdownHeader?: boolean;
+    dropdownHeaderTitle?: string;
+};
+export type ToolDropdownSideButtonItem = {
+    key: string;
+    title?: string;
+    hint?: string;
+    cssClass?: string;
+    icon?: string;
+    onClick?: (e: JQuery.ClickEvent<HTMLElement, null, HTMLElement, HTMLElement>) => void;
+    disabled?: boolean;
+};
+export declare class DropdownToolButton {
+    element: JQuery;
+    private isDisabled;
+    private itemDisablingState;
+    private options;
+    constructor(container: JQuery, buttons: DropdownToolButtonItem[], opt?: DropdownToolButtonOptions);
+    private getDisablingStateItem;
+    private setDisablingStateItem;
+    private removeDisablingStateItem;
+    private buildBaseDropdown;
+    addDropdownItems(buttons: DropdownToolButtonItem[]): void;
+    addDropdownItem(button: DropdownToolButtonItem, idx?: number): void;
+    enableDropdown(enable: boolean): void;
+    enableDropdownItemByKey(key: string, enable: boolean): void;
+    enableSideButtonByKey(key: string, enable: boolean): void;
+    removeDropdownItem(key: string): void;
+    removeSideButtonItem(key: string): void;
+    addSideButtonItem(button: ToolDropdownSideButtonItem, idx?: number): void;
+}

package/dist/ui/DropdownToolButton.js

@@ -0,0 +1,230 @@
+/// <reference types="bootstrap" />
+import { coalesce, first, isEmptyOrNull, tryFirst } from '@serenity-is/corelib/q';
+export class DropdownToolButton {
+    constructor(container, buttons, opt) {
+        this.element = null;
+        this.isDisabled = false;
+        this.itemDisablingState = [];
+        this.options = opt || {};
+        this.isDisabled = this.options.disabled || false;
+        this.element = this.buildBaseDropdown();
+        this.addDropdownItems(buttons);
+        this.element.on('click', () => {
+            $('.dropdown-toggle', this.element).dropdown('toggle');
+        });
+        container.append(this.element);
+    }
+    getDisablingStateItem(key) {
+        if (tryFirst(this.itemDisablingState, x => x.key == key) != null) {
+            return first(this.itemDisablingState, x => x.key == key).disabled || false;
+        }
+        return false;
+    }
+    setDisablingStateItem(key, value) {
+        if (tryFirst(this.itemDisablingState, x => x.key == key) != null) {
+            first(this.itemDisablingState, x => x.key == key).disabled = value || false;
+            return;
+        }
+        this.itemDisablingState.push({ key: key, disabled: value || false });
+    }
+    removeDisablingStateItem(key) {
+        this.itemDisablingState.some((item, idx) => {
+            if (item.key == key) {
+                this.itemDisablingState.splice(idx, 1);
+                return true;
+            }
+        });
+    }
+    buildBaseDropdown() {
+        const dropdownTemplate = `<div class="buttons-inner dropdown" style="overflow: visible">
+    <div class="idevs-tool-dropdown-button tool-button icon-tool-button ${coalesce(this.options.cssClass, '')} ${this.options.isDropUp ? 'dropup' : ''} ${this.isDisabled ? 'disabled' : ''}" style="cursor: unset;">
+        <div class="button-outer dropdown-toggle ${this.isDisabled ? 'disabled' : ''}"
+        data-bs-toggle="dropdown"
+        style="cursor: pointer;">
+            <span class="button-inner">
+                <i class="${this.options.icon}"></i>
+                ${coalesce(this.options.title, '')}
+            </span>
+            <i class="caret"></i>
+        </div>
+        <ul class="dropdown-menu ${this.options.dropdownMenuPosition == 'right' ? 'dropdown-menu-right' : ''}"></ul>
+    </div>
+</div>`;
+        return $(dropdownTemplate);
+    }
+    addDropdownItems(buttons) {
+        if (buttons && buttons.length > 0) {
+            buttons.forEach(button => {
+                this.addDropdownItem(button);
+            });
+        }
+    }
+    addDropdownItem(button, idx) {
+        if (!isEmptyOrNull(button.key)) {
+            if (this.itemDisablingState.map(x => x.key).indexOf(button.key) > -1) {
+                alert(`Dropdown has existed key: ${button.key}`);
+                return;
+            }
+            this.setDisablingStateItem(button.key, button.disabled || false);
+        }
+        let dropdownItemElement;
+        if (button.isDropdownHeader && !isEmptyOrNull(button.dropdownHeaderTitle)) {
+            dropdownItemElement = $(`<li class="dropdown-header ${coalesce(button.cssClass, '')}">${button.dropdownHeaderTitle}</li>`);
+        }
+        else {
+            if (button.isSeparator) {
+                dropdownItemElement = $(`<li class="dropdown-divider"></li>`);
+            }
+            else {
+                dropdownItemElement = $(`<li class="${button.disabled ? 'disabled' : ''}"
+                title="${coalesce(button.hint, '')}"
+                data-idevs-key="${coalesce(button.key, '')}">
+                    <a href="#" class="${coalesce(button.cssClass, 'dropdown-item')}">
+                        <i class="${coalesce(button.icon, '')}"></i>
+                        ${button.title}
+                    </a>
+                </li>`);
+                dropdownItemElement.on('click', (e) => {
+                    e.preventDefault();
+                    if (this.isDisabled) {
+                        return;
+                    }
+                    let buttonIsDisabled = button.disabled;
+                    if (!isEmptyOrNull(button.key)) {
+                        buttonIsDisabled = this.getDisablingStateItem(button.key);
+                    }
+                    if (buttonIsDisabled) {
+                        return;
+                    }
+                    button.onClick(e);
+                });
+            }
+        }
+        if (idx === null || typeof idx === 'undefined') {
+            this.element.find('.dropdown-menu').append(dropdownItemElement);
+            return;
+        }
+        if (idx <= 0) {
+            this.element.find('.dropdown-menu').prepend(dropdownItemElement);
+            return;
+        }
+        const nbrOfButtons = this.element.find(`.dropdown-menu > li`).length;
+        if (idx > nbrOfButtons) {
+            idx = nbrOfButtons;
+        }
+        this.element.find(`.dropdown-menu > li:nth-child(${idx})`).after(dropdownItemElement);
+    }
+    enableDropdown(enable) {
+        const drd = this.element.find('.dropdown').first();
+        if (drd) {
+            if (enable) {
+                if (drd.hasClass('disabled')) {
+                    drd.removeClass('disabled');
+                }
+            }
+            else {
+                if (!drd.hasClass('disabled')) {
+                    drd.addClass('disabled');
+                }
+            }
+        }
+        const drdToggle = this.element.find('.dropdown-toggle').first();
+        if (drdToggle) {
+            if (enable) {
+                if (drdToggle.hasClass('disabled')) {
+                    drd.removeClass('disabled');
+                }
+                else {
+                    if (!drdToggle.hasClass('disabled')) {
+                        drdToggle.addClass('disabled');
+                    }
+                }
+            }
+        }
+        this.isDisabled = !enable;
+    }
+    enableDropdownItemByKey(key, enable) {
+        const drdItem = this.element.find(`.dropdown-menu li[data-idevs-key="${key}"]`).first();
+        if (drdItem) {
+            if (enable) {
+                if (drdItem.hasClass('disabled')) {
+                    drdItem.removeClass('disabled');
+                }
+            }
+            else {
+                if (!drdItem.hasClass('disabled')) {
+                    drdItem.addClass('disabled');
+                }
+            }
+        }
+        this.setDisablingStateItem(key, !enable);
+    }
+    enableSideButtonByKey(key, enable) {
+        const tButton = this.element.find(`.tool-button[data-idevs-key="${key}"]`).first();
+        if (tButton) {
+            if (enable) {
+                if (tButton.hasClass('disabled')) {
+                    tButton.removeClass('disabled');
+                }
+            }
+            else {
+                if (!tButton.hasClass('disabled')) {
+                    tButton.addClass('disabled');
+                }
+            }
+        }
+        this.setDisablingStateItem(key, !enable);
+    }
+    removeDropdownItem(key) {
+        this.element.find(`.dropdown-menu li[data-idevs-key="${key}"]`).remove();
+        this.removeDisablingStateItem(key);
+    }
+    removeSideButtonItem(key) {
+        this.element.find(`.tool-button[data-idevs-key="${key}"]`).remove();
+        this.removeDisablingStateItem(key);
+    }
+    addSideButtonItem(button, idx) {
+        if (!isEmptyOrNull(button.key)) {
+            if (this.itemDisablingState.map(x => x.key).indexOf(button.key) > -1) {
+                alert(`Dropdown has existed key: ${button.key}`);
+                return;
+            }
+            this.setDisablingStateItem(button.key, button.disabled || false);
+        }
+        const sideButtonTemplate = `<div class="tool-button add-button icon-tool-button ${coalesce(button.cssClass, '')} ${button.disabled ? 'disabled' : ''}"
+        data-idevs-key="${coalesce(button.key, '')}"
+        title="${coalesce(button.title, '')}">
+            <div class="button-outer">
+                <span class="button-inner">
+                    <i class="${coalesce(button.icon, '')}"></i>
+                </span>
+            </div>
+        </div>`;
+        const sideButton = $(sideButtonTemplate);
+        sideButton.on('click', (e) => {
+            e.preventDefault();
+            let buttonIsDisabled = button.disabled;
+            if (!isEmptyOrNull(button.key)) {
+                buttonIsDisabled = this.getDisablingStateItem(button.key);
+            }
+            if (buttonIsDisabled) {
+                return;
+            }
+            button.onClick(e);
+        });
+        if (idx === null || typeof idx === 'undefined') {
+            this.element.append(sideButton);
+            return;
+        }
+        if (idx <= 0) {
+            this.element.prepend(sideButton);
+            return;
+        }
+        const nbrOfButtons = this.element.find(`div.tool-button`).length;
+        if (idx > nbrOfButtons) {
+            idx = nbrOfButtons;
+        }
+        this.element.find(`div.tool-button:nth-child(${idx})`).after(sideButton);
+    }
+}
+//# sourceMappingURL=DropdownToolButton.js.map

package/dist/ui/DropdownToolButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownToolButton.js","sourceRoot":"","sources":["../../src/ui/DropdownToolButton.ts"],"names":[],"mappings":"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","sourcesContent":["/// <reference types=\"bootstrap\" />\n\nimport { coalesce, first, isEmptyOrNull, tryFirst } from '@serenity-is/corelib/q'\n\nexport type DropdownToolButtonOptions = {\n  title?: string\n  cssClass?: string\n  icon?: string\n  disabled?: boolean\n  dropdownMenuPosition?: 'right'\n  isDropUp?: boolean\n}\n\nexport type DropdownToolButtonItem = {\n  key: string\n  title?: string\n  hint?: string\n  cssClass?: string\n  icon?: string\n  onClick?: (e: JQuery.ClickEvent<HTMLElement, null, HTMLElement, HTMLElement>) => void\n  isSeparator?: boolean\n  disabled?: boolean\n  isDropdownHeader?: boolean\n  dropdownHeaderTitle?: string\n}\n\nexport type ToolDropdownSideButtonItem = {\n  key: string\n  title?: string\n  hint?: string\n  cssClass?: string\n  icon?: string\n  onClick?: (e: JQuery.ClickEvent<HTMLElement, null, HTMLElement, HTMLElement>) => void\n  disabled?: boolean\n}\n\nexport class DropdownToolButton {\n  public element: JQuery = null\n  private isDisabled = false\n  private itemDisablingState: { key: string; disabled: boolean }[] = []\n  private options: DropdownToolButtonOptions\n\n  public constructor(container: JQuery, buttons: DropdownToolButtonItem[], opt?: DropdownToolButtonOptions) {\n    this.options = opt || {}\n    this.isDisabled = this.options.disabled || false\n    this.element = this.buildBaseDropdown()\n    this.addDropdownItems(buttons)\n\n    this.element.on('click', () => {\n      $('.dropdown-toggle', this.element).dropdown('toggle')\n    })\n\n    container.append(this.element)\n  }\n\n  private getDisablingStateItem(key: string): boolean {\n    if (tryFirst(this.itemDisablingState, x => x.key == key) != null) {\n      return first(this.itemDisablingState, x => x.key == key).disabled || false\n    }\n\n    return false\n  }\n\n  private setDisablingStateItem(key: string, value: boolean) {\n    if (tryFirst(this.itemDisablingState, x => x.key == key) != null) {\n      first(this.itemDisablingState, x => x.key == key).disabled = value || false\n      return\n    }\n\n    this.itemDisablingState.push({ key: key, disabled: value || false })\n  }\n\n  private removeDisablingStateItem(key: string) {\n    this.itemDisablingState.some((item, idx) => {\n      if (item.key == key) {\n        this.itemDisablingState.splice(idx, 1)\n\n        return true\n      }\n    })\n  }\n\n  private buildBaseDropdown(): JQuery {\n    const dropdownTemplate = `<div class=\"buttons-inner dropdown\" style=\"overflow: visible\">\n    <div class=\"idevs-tool-dropdown-button tool-button icon-tool-button ${coalesce(this.options.cssClass, '')} ${\n      this.options.isDropUp ? 'dropup' : ''\n    } ${this.isDisabled ? 'disabled' : ''}\" style=\"cursor: unset;\">\n        <div class=\"button-outer dropdown-toggle ${this.isDisabled ? 'disabled' : ''}\"\n        data-bs-toggle=\"dropdown\"\n        style=\"cursor: pointer;\">\n            <span class=\"button-inner\">\n                <i class=\"${this.options.icon}\"></i>\n                ${coalesce(this.options.title, '')}\n            </span>\n            <i class=\"caret\"></i>\n        </div>\n        <ul class=\"dropdown-menu ${this.options.dropdownMenuPosition == 'right' ? 'dropdown-menu-right' : ''}\"></ul>\n    </div>\n</div>`\n\n    return $(dropdownTemplate)\n  }\n\n  public addDropdownItems(buttons: DropdownToolButtonItem[]) {\n    if (buttons && buttons.length > 0) {\n      buttons.forEach(button => {\n        this.addDropdownItem(button)\n      })\n    }\n  }\n\n  public addDropdownItem(button: DropdownToolButtonItem, idx?: number) {\n    if (!isEmptyOrNull(button.key)) {\n      if (this.itemDisablingState.map(x => x.key).indexOf(button.key) > -1) {\n        alert(`Dropdown has existed key: ${button.key}`)\n        return\n      }\n\n      this.setDisablingStateItem(button.key, button.disabled || false)\n    }\n\n    let dropdownItemElement: JQuery\n\n    if (button.isDropdownHeader && !isEmptyOrNull(button.dropdownHeaderTitle)) {\n      dropdownItemElement = $(\n        `<li class=\"dropdown-header ${coalesce(button.cssClass, '')}\">${button.dropdownHeaderTitle}</li>`,\n      )\n    } else {\n      if (button.isSeparator) {\n        dropdownItemElement = $(`<li class=\"dropdown-divider\"></li>`)\n      } else {\n        dropdownItemElement = $(`<li class=\"${button.disabled ? 'disabled' : ''}\"\n                title=\"${coalesce(button.hint, '')}\"\n                data-idevs-key=\"${coalesce(button.key, '')}\">\n                    <a href=\"#\" class=\"${coalesce(button.cssClass, 'dropdown-item')}\">\n                        <i class=\"${coalesce(button.icon, '')}\"></i>\n                        ${button.title}\n                    </a>\n                </li>`)\n\n        dropdownItemElement.on('click', (e: JQuery.ClickEvent<HTMLElement, null, HTMLElement, HTMLElement>) => {\n          e.preventDefault()\n\n          if (this.isDisabled) {\n            return\n          }\n\n          let buttonIsDisabled = button.disabled\n\n          if (!isEmptyOrNull(button.key)) {\n            buttonIsDisabled = this.getDisablingStateItem(button.key)\n          }\n          if (buttonIsDisabled) {\n            return\n          }\n\n          button.onClick(e)\n        })\n      }\n    }\n\n    if (idx === null || typeof idx === 'undefined') {\n      this.element.find('.dropdown-menu').append(dropdownItemElement)\n      return\n    }\n\n    if (idx <= 0) {\n      this.element.find('.dropdown-menu').prepend(dropdownItemElement)\n      return\n    }\n\n    const nbrOfButtons = this.element.find(`.dropdown-menu > li`).length\n\n    if (idx > nbrOfButtons) {\n      idx = nbrOfButtons\n    }\n\n    this.element.find(`.dropdown-menu > li:nth-child(${idx})`).after(dropdownItemElement)\n  }\n\n  public enableDropdown(enable: boolean) {\n    const drd = this.element.find('.dropdown').first()\n    if (drd) {\n      if (enable) {\n        if (drd.hasClass('disabled')) {\n          drd.removeClass('disabled')\n        }\n      } else {\n        if (!drd.hasClass('disabled')) {\n          drd.addClass('disabled')\n        }\n      }\n    }\n\n    const drdToggle = this.element.find('.dropdown-toggle').first()\n    if (drdToggle) {\n      if (enable) {\n        if (drdToggle.hasClass('disabled')) {\n          drd.removeClass('disabled')\n        } else {\n          if (!drdToggle.hasClass('disabled')) {\n            drdToggle.addClass('disabled')\n          }\n        }\n      }\n    }\n\n    this.isDisabled = !enable\n  }\n\n  public enableDropdownItemByKey(key: string, enable: boolean) {\n    const drdItem = this.element.find(`.dropdown-menu li[data-idevs-key=\"${key}\"]`).first()\n    if (drdItem) {\n      if (enable) {\n        if (drdItem.hasClass('disabled')) {\n          drdItem.removeClass('disabled')\n        }\n      } else {\n        if (!drdItem.hasClass('disabled')) {\n          drdItem.addClass('disabled')\n        }\n      }\n    }\n\n    this.setDisablingStateItem(key, !enable)\n  }\n\n  public enableSideButtonByKey(key: string, enable: boolean) {\n    const tButton = this.element.find(`.tool-button[data-idevs-key=\"${key}\"]`).first()\n    if (tButton) {\n      if (enable) {\n        if (tButton.hasClass('disabled')) {\n          tButton.removeClass('disabled')\n        }\n      } else {\n        if (!tButton.hasClass('disabled')) {\n          tButton.addClass('disabled')\n        }\n      }\n    }\n\n    this.setDisablingStateItem(key, !enable)\n  }\n\n  public removeDropdownItem(key: string) {\n    this.element.find(`.dropdown-menu li[data-idevs-key=\"${key}\"]`).remove()\n    this.removeDisablingStateItem(key)\n  }\n\n  public removeSideButtonItem(key: string) {\n    this.element.find(`.tool-button[data-idevs-key=\"${key}\"]`).remove()\n    this.removeDisablingStateItem(key)\n  }\n\n  public addSideButtonItem(button: ToolDropdownSideButtonItem, idx?: number) {\n    if (!isEmptyOrNull(button.key)) {\n      if (this.itemDisablingState.map(x => x.key).indexOf(button.key) > -1) {\n        alert(`Dropdown has existed key: ${button.key}`)\n        return\n      }\n\n      this.setDisablingStateItem(button.key, button.disabled || false)\n    }\n\n    const sideButtonTemplate = `<div class=\"tool-button add-button icon-tool-button ${coalesce(button.cssClass, '')} ${\n      button.disabled ? 'disabled' : ''\n    }\"\n        data-idevs-key=\"${coalesce(button.key, '')}\"\n        title=\"${coalesce(button.title, '')}\">\n            <div class=\"button-outer\">\n                <span class=\"button-inner\">\n                    <i class=\"${coalesce(button.icon, '')}\"></i>\n                </span>\n            </div>\n        </div>`\n\n    const sideButton = $(sideButtonTemplate)\n\n    sideButton.on('click', (e: JQuery.ClickEvent<HTMLElement, null, HTMLElement, HTMLElement>) => {\n      e.preventDefault()\n\n      let buttonIsDisabled = button.disabled\n\n      if (!isEmptyOrNull(button.key)) {\n        buttonIsDisabled = this.getDisablingStateItem(button.key)\n      }\n\n      if (buttonIsDisabled) {\n        return\n      }\n\n      button.onClick(e)\n    })\n\n    if (idx === null || typeof idx === 'undefined') {\n      this.element.append(sideButton)\n      return\n    }\n\n    if (idx <= 0) {\n      this.element.prepend(sideButton)\n      return\n    }\n\n    const nbrOfButtons = this.element.find(`div.tool-button`).length\n\n    if (idx > nbrOfButtons) {\n      idx = nbrOfButtons\n    }\n\n    this.element.find(`div.tool-button:nth-child(${idx})`).after(sideButton)\n  }\n}\n"]}

package/dist/ui/ToggleToolButton.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="jquery" />
+export type ToggleToolButtonOptions = {
+    title?: string;
+    hint?: string;
+    cssClass?: string;
+    altCssClass?: string;
+    icon?: string;
+    altIcon?: string;
+    onClick?: (e: JQuery.ClickEvent<HTMLElement, null, HTMLElement, HTMLElement>) => void;
+    disabled?: boolean;
+};
+export declare class ToggleToolButton {
+    element: JQuery;
+    private isDisabled;
+    private options;
+    constructor(container: JQuery, opt?: ToggleToolButtonOptions);
+    private buildBaseButton;
+}

package/dist/ui/ToggleToolButton.js

@@ -0,0 +1,53 @@
+import { coalesce } from '@serenity-is/corelib/q';
+import { neededTarget } from '../globals';
+export class ToggleToolButton {
+    constructor(container, opt) {
+        this.element = null;
+        this.isDisabled = false;
+        this.options = opt || {};
+        this.isDisabled = this.options.disabled || false;
+        this.element = this.buildBaseButton();
+        this.element.on('click', e => {
+            if (this.isDisabled)
+                return;
+            const target = neededTarget(e.target, '.idevs-toggle-button');
+            if (this.options.altIcon) {
+                const icon = target.querySelector(`i`);
+                if (icon.className == this.options.icon) {
+                    icon.className = this.options.altIcon;
+                }
+                else {
+                    icon.className = this.options.icon;
+                }
+            }
+            if (this.options.cssClass && this.options.altCssClass) {
+                if (target.className.includes(this.options.cssClass)) {
+                    target.className = target.className.replace(this.options.cssClass, this.options.altCssClass);
+                }
+                else {
+                    target.className = target.className.replace(this.options.altCssClass, this.options.cssClass);
+                }
+            }
+            if (this.options.onClick) {
+                this.options.onClick(e);
+            }
+        });
+        container.append(this.element);
+    }
+    buildBaseButton() {
+        const buttonTemplate = `<div class="buttons-inner" style="overflow: visible">
+    <div class="idevs-toggle-button tool-button icon-tool-button ${coalesce(this.options.cssClass, '')} ${this.isDisabled ? 'disabled' : ''}" style="cursor: unset;">
+        <div class="button-outer ${this.isDisabled ? 'disabled' : ''}"
+        style="cursor: pointer;">
+            <span class="button-inner">
+                <i class="${this.options.icon}"></i>
+                ${coalesce(this.options.title, '')}
+            </span>
+            <i class="caret"></i>
+        </div>
+    </div>
+</div>`;
+        return $(buttonTemplate);
+    }
+}
+//# sourceMappingURL=ToggleToolButton.js.map

package/dist/ui/ToggleToolButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleToolButton.js","sourceRoot":"","sources":["../../src/ui/ToggleToolButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AAazC,MAAM,OAAO,gBAAgB;IAK3B,YAAmB,SAAiB,EAAE,GAA6B;QAJ5D,YAAO,GAAW,IAAI,CAAA;QACrB,eAAU,GAAG,KAAK,CAAA;QAIxB,IAAI,CAAC,OAAO,GAAG,GAAG,IAAI,EAAE,CAAA;QACxB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,KAAK,CAAA;QAChD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;QAErC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE;YAC3B,IAAI,IAAI,CAAC,UAAU;gBAAE,OAAM;YAE3B,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,MAAqB,EAAE,sBAAsB,CAAC,CAAA;YAC5E,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;gBACxB,MAAM,IAAI,GAAG,MAAM,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;gBACtC,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE;oBACvC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAA;iBACtC;qBAAM;oBACL,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAA;iBACnC;aACF;YAED,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE;gBACrD,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;oBACpD,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAA;iBAC7F;qBAAM;oBACL,MAAM,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;iBAC7F;aACF;YAED,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;gBACxB,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;aACxB;QACH,CAAC,CAAC,CAAA;QAEF,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IAChC,CAAC;IAEO,eAAe;QACrB,MAAM,cAAc,GAAG;mEACwC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,IAChG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EACjC;mCAC+B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;4BAGxC,IAAI,CAAC,OAAO,CAAC,IAAI;kBAC3B,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;;;;;OAK3C,CAAA;QAEH,OAAO,CAAC,CAAC,cAAc,CAAC,CAAA;IAC1B,CAAC;CACF","sourcesContent":["import { coalesce } from '@serenity-is/corelib/q'\nimport { neededTarget } from '../globals'\n\nexport type ToggleToolButtonOptions = {\n  title?: string\n  hint?: string\n  cssClass?: string\n  altCssClass?: string\n  icon?: string\n  altIcon?: string\n  onClick?: (e: JQuery.ClickEvent<HTMLElement, null, HTMLElement, HTMLElement>) => void\n  disabled?: boolean\n}\n\nexport class ToggleToolButton {\n  public element: JQuery = null\n  private isDisabled = false\n  private options: ToggleToolButtonOptions\n\n  public constructor(container: JQuery, opt?: ToggleToolButtonOptions) {\n    this.options = opt || {}\n    this.isDisabled = this.options.disabled || false\n    this.element = this.buildBaseButton()\n\n    this.element.on('click', e => {\n      if (this.isDisabled) return\n\n      const target = neededTarget(e.target as HTMLElement, '.idevs-toggle-button')\n      if (this.options.altIcon) {\n        const icon = target.querySelector(`i`)\n        if (icon.className == this.options.icon) {\n          icon.className = this.options.altIcon\n        } else {\n          icon.className = this.options.icon\n        }\n      }\n\n      if (this.options.cssClass && this.options.altCssClass) {\n        if (target.className.includes(this.options.cssClass)) {\n          target.className = target.className.replace(this.options.cssClass, this.options.altCssClass)\n        } else {\n          target.className = target.className.replace(this.options.altCssClass, this.options.cssClass)\n        }\n      }\n\n      if (this.options.onClick) {\n        this.options.onClick(e)\n      }\n    })\n\n    container.append(this.element)\n  }\n\n  private buildBaseButton(): JQuery {\n    const buttonTemplate = `<div class=\"buttons-inner\" style=\"overflow: visible\">\n    <div class=\"idevs-toggle-button tool-button icon-tool-button ${coalesce(this.options.cssClass, '')} ${\n      this.isDisabled ? 'disabled' : ''\n    }\" style=\"cursor: unset;\">\n        <div class=\"button-outer ${this.isDisabled ? 'disabled' : ''}\"\n        style=\"cursor: pointer;\">\n            <span class=\"button-inner\">\n                <i class=\"${this.options.icon}\"></i>\n                ${coalesce(this.options.title, '')}\n            </span>\n            <i class=\"caret\"></i>\n        </div>\n    </div>\n</div>`\n\n    return $(buttonTemplate)\n  }\n}\n"]}

package/dist/ui/index.d.ts

@@ -1 +1,2 @@
-export * from './ToolDropdownButton';
+export * from './DropdownToolButton';
+export * from './ToggleToolButton';

package/dist/ui/index.js

@@ -1,2 +1,3 @@
-export * from './ToolDropdownButton';
+export * from './DropdownToolButton';
+export * from './ToggleToolButton';
 //# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA","sourcesContent":["export * from './ToolDropdownButton'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA","sourcesContent":["export * from './DropdownToolButton'\nexport * from './ToggleToolButton'\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idevs/corelib",
-  "version": "0.0.39",
+  "version": "0.0.40",
   "description": "Extended library for Serenity Framework",
   "main": "src/index.js",
   "scripts": {

package/src/ui/{ToolDropdownButton.ts → DropdownToolButton.ts}

@@ -2,7 +2,7 @@
 
 import { coalesce, first, isEmptyOrNull, tryFirst } from '@serenity-is/corelib/q'
 
-export type ToolDropdownButtonOptions = {
+export type DropdownToolButtonOptions = {
   title?: string
   cssClass?: string
   icon?: string
@@ -11,7 +11,7 @@ export type ToolDropdownButtonOptions = {
   isDropUp?: boolean
 }
 
-export type ToolDropdownButtonItem = {
+export type DropdownToolButtonItem = {
   key: string
   title?: string
   hint?: string
@@ -34,13 +34,13 @@ export type ToolDropdownSideButtonItem = {
   disabled?: boolean
 }
 
-export class ToolDropdownButton {
+export class DropdownToolButton {
   public element: JQuery = null
   private isDisabled = false
   private itemDisablingState: { key: string; disabled: boolean }[] = []
-  private options: ToolDropdownButtonOptions
+  private options: DropdownToolButtonOptions
 
-  public constructor(container: JQuery, buttons: ToolDropdownButtonItem[], opt?: ToolDropdownButtonOptions) {
+  public constructor(container: JQuery, buttons: DropdownToolButtonItem[], opt?: DropdownToolButtonOptions) {
     this.options = opt || {}
     this.isDisabled = this.options.disabled || false
     this.element = this.buildBaseDropdown()
@@ -101,7 +101,7 @@ export class ToolDropdownButton {
     return $(dropdownTemplate)
   }
 
-  public addDropdownItems(buttons: ToolDropdownButtonItem[]) {
+  public addDropdownItems(buttons: DropdownToolButtonItem[]) {
     if (buttons && buttons.length > 0) {
       buttons.forEach(button => {
         this.addDropdownItem(button)
@@ -109,7 +109,7 @@ export class ToolDropdownButton {
     }
   }
 
-  public addDropdownItem(button: ToolDropdownButtonItem, idx?: number) {
+  public addDropdownItem(button: DropdownToolButtonItem, idx?: number) {
     if (!isEmptyOrNull(button.key)) {
       if (this.itemDisablingState.map(x => x.key).indexOf(button.key) > -1) {
         alert(`Dropdown has existed key: ${button.key}`)

package/src/ui/ToggleToolButton.ts

@@ -0,0 +1,72 @@
+import { coalesce } from '@serenity-is/corelib/q'
+import { neededTarget } from '../globals'
+
+export type ToggleToolButtonOptions = {
+  title?: string
+  hint?: string
+  cssClass?: string
+  altCssClass?: string
+  icon?: string
+  altIcon?: string
+  onClick?: (e: JQuery.ClickEvent<HTMLElement, null, HTMLElement, HTMLElement>) => void
+  disabled?: boolean
+}
+
+export class ToggleToolButton {
+  public element: JQuery = null
+  private isDisabled = false
+  private options: ToggleToolButtonOptions
+
+  public constructor(container: JQuery, opt?: ToggleToolButtonOptions) {
+    this.options = opt || {}
+    this.isDisabled = this.options.disabled || false
+    this.element = this.buildBaseButton()
+
+    this.element.on('click', e => {
+      if (this.isDisabled) return
+
+      const target = neededTarget(e.target as HTMLElement, '.idevs-toggle-button')
+      if (this.options.altIcon) {
+        const icon = target.querySelector(`i`)
+        if (icon.className == this.options.icon) {
+          icon.className = this.options.altIcon
+        } else {
+          icon.className = this.options.icon
+        }
+      }
+
+      if (this.options.cssClass && this.options.altCssClass) {
+        if (target.className.includes(this.options.cssClass)) {
+          target.className = target.className.replace(this.options.cssClass, this.options.altCssClass)
+        } else {
+          target.className = target.className.replace(this.options.altCssClass, this.options.cssClass)
+        }
+      }
+
+      if (this.options.onClick) {
+        this.options.onClick(e)
+      }
+    })
+
+    container.append(this.element)
+  }
+
+  private buildBaseButton(): JQuery {
+    const buttonTemplate = `<div class="buttons-inner" style="overflow: visible">
+    <div class="idevs-toggle-button tool-button icon-tool-button ${coalesce(this.options.cssClass, '')} ${
+      this.isDisabled ? 'disabled' : ''
+    }" style="cursor: unset;">
+        <div class="button-outer ${this.isDisabled ? 'disabled' : ''}"
+        style="cursor: pointer;">
+            <span class="button-inner">
+                <i class="${this.options.icon}"></i>
+                ${coalesce(this.options.title, '')}
+            </span>
+            <i class="caret"></i>
+        </div>
+    </div>
+</div>`
+
+    return $(buttonTemplate)
+  }
+}

package/src/ui/index.ts

@@ -1 +1,2 @@
-export * from './ToolDropdownButton'
+export * from './DropdownToolButton'
+export * from './ToggleToolButton'