@idevs/corelib 0.0.38 → 0.0.40

package/dist/editors/dateMonthEditor.d.ts

@@ -8,5 +8,4 @@ export declare class DateMonthEditor extends SelectEditor {
 export interface DateMonthEditorOptions extends SelectEditorOptions {
     display?: '2-digit' | 'short' | 'long';
     locale?: 'en' | 'th';
-    descending?: boolean;
 }

package/dist/editors/dateMonthEditor.js

@@ -15,7 +15,7 @@ let DateMonthEditor = class DateMonthEditor extends SelectEditor {
         return indexOf(this.months, x => x == this.value);
     }
     getItems() {
-        var _a, _b, _c;
+        var _a, _b;
         const opt = this.options;
         if (opt.items != null && opt.items.length >= 1) {
             return opt.items;
@@ -26,14 +26,7 @@ let DateMonthEditor = class DateMonthEditor extends SelectEditor {
         for (let i = 0; i <= 11; i++) {
             this.months.push(new Date(2000, i, 1).toLocaleDateString(locale, options));
         }
-        if (!((_c = opt.descending) !== null && _c !== void 0 ? _c : false)) {
-            return this.months;
-        }
-        const months = [];
-        for (let i1 = 11; i1 >= 0; i1--) {
-            months.push(new Date(2000, i1, 1).toLocaleDateString(locale, options));
-        }
-        return months;
+        return this.months;
     }
 };
 DateMonthEditor = __decorate([

package/dist/editors/dateMonthEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"dateMonthEditor.js","sourceRoot":"","sources":["../../src/editors/dateMonthEditor.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAuB,MAAM,sBAAsB,CAAA;AACpF,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAGzC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,YAAY;IAG/C,YAAY,MAAc,EAAE,GAA2B;QACrD,KAAK,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;QAElB,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED,IAAI,YAAY;QACd,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAA;IACnD,CAAC;IAED,QAAQ;;QACN,MAAM,GAAG,GAAG,IAAI,CAAC,OAAiC,CAAA;QAElD,IAAI,GAAG,CAAC,KAAK,IAAI,IAAI,IAAI,GAAG,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;YAC9C,OAAO,GAAG,CAAC,KAAK,CAAA;SACjB;QAED,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;QAChB,MAAM,MAAM,GAAG,MAAA,GAAG,CAAC,MAAM,mCAAI,IAAI,CAAA;QACjC,MAAM,OAAO,GAAG,EAAE,KAAK,EAAE,MAAA,GAAG,CAAC,OAAO,mCAAI,SAAS,EAAE,CAAA;QAEnD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE;YAC5B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;SAC3E;QAED,IAAI,CAAC,CAAC,MAAA,GAAG,CAAC,UAAU,mCAAI,KAAK,CAAC,EAAE;YAC9B,OAAO,IAAI,CAAC,MAAM,CAAA;SACnB;QAED,MAAM,MAAM,GAAa,EAAE,CAAA;QAC3B,KAAK,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,EAAE,EAAE;YAC/B,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;SACvE;QAED,OAAO,MAAM,CAAA;IACf,CAAC;CACF,CAAA;AAvCY,eAAe;IAD3B,UAAU,CAAC,cAAc,CAAC,iBAAiB,CAAC;GAChC,eAAe,CAuC3B;SAvCY,eAAe","sourcesContent":["import { Decorators, SelectEditor, SelectEditorOptions } from '@serenity-is/corelib'\nimport { indexOf } from '@serenity-is/corelib/q'\n\n@Decorators.registerEditor('DateMonthEditor')\nexport class DateMonthEditor extends SelectEditor {\n  private months: string[]\n\n  constructor(hidden: JQuery, opt: DateMonthEditorOptions) {\n    super(hidden, opt)\n\n    this.updateItems()\n  }\n\n  get valueAsMonth() {\n    return indexOf(this.months, x => x == this.value)\n  }\n\n  getItems() {\n    const opt = this.options as DateMonthEditorOptions\n\n    if (opt.items != null && opt.items.length >= 1) {\n      return opt.items\n    }\n\n    this.months = []\n    const locale = opt.locale ?? 'en'\n    const options = { month: opt.display ?? '2-digit' }\n\n    for (let i = 0; i <= 11; i++) {\n      this.months.push(new Date(2000, i, 1).toLocaleDateString(locale, options))\n    }\n\n    if (!(opt.descending ?? false)) {\n      return this.months\n    }\n\n    const months: string[] = []\n    for (let i1 = 11; i1 >= 0; i1--) {\n      months.push(new Date(2000, i1, 1).toLocaleDateString(locale, options))\n    }\n\n    return months\n  }\n}\n\n// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\nexport interface DateMonthEditorOptions extends SelectEditorOptions {\n  display?: '2-digit' | 'short' | 'long'\n  locale?: 'en' | 'th'\n  descending?: boolean\n}\n"]}
+{"version":3,"file":"dateMonthEditor.js","sourceRoot":"","sources":["../../src/editors/dateMonthEditor.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAuB,MAAM,sBAAsB,CAAA;AACpF,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAGzC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,YAAY;IAG/C,YAAY,MAAc,EAAE,GAA2B;QACrD,KAAK,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;QAElB,IAAI,CAAC,WAAW,EAAE,CAAA;IACpB,CAAC;IAED,IAAI,YAAY;QACd,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAA;IACnD,CAAC;IAED,QAAQ;;QACN,MAAM,GAAG,GAAG,IAAI,CAAC,OAAiC,CAAA;QAElD,IAAI,GAAG,CAAC,KAAK,IAAI,IAAI,IAAI,GAAG,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE;YAC9C,OAAO,GAAG,CAAC,KAAK,CAAA;SACjB;QAED,IAAI,CAAC,MAAM,GAAG,EAAE,CAAA;QAChB,MAAM,MAAM,GAAG,MAAA,GAAG,CAAC,MAAM,mCAAI,IAAI,CAAA;QACjC,MAAM,OAAO,GAAG,EAAE,KAAK,EAAE,MAAA,GAAG,CAAC,OAAO,mCAAI,SAAS,EAAE,CAAA;QAEnD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE;YAC5B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;SAC3E;QAED,OAAO,IAAI,CAAC,MAAM,CAAA;IACpB,CAAC;CACF,CAAA;AA9BY,eAAe;IAD3B,UAAU,CAAC,cAAc,CAAC,iBAAiB,CAAC;GAChC,eAAe,CA8B3B;SA9BY,eAAe","sourcesContent":["import { Decorators, SelectEditor, SelectEditorOptions } from '@serenity-is/corelib'\nimport { indexOf } from '@serenity-is/corelib/q'\n\n@Decorators.registerEditor('DateMonthEditor')\nexport class DateMonthEditor extends SelectEditor {\n  private months: string[]\n\n  constructor(hidden: JQuery, opt: DateMonthEditorOptions) {\n    super(hidden, opt)\n\n    this.updateItems()\n  }\n\n  get valueAsMonth() {\n    return indexOf(this.months, x => x == this.value)\n  }\n\n  getItems() {\n    const opt = this.options as DateMonthEditorOptions\n\n    if (opt.items != null && opt.items.length >= 1) {\n      return opt.items\n    }\n\n    this.months = []\n    const locale = opt.locale ?? 'en'\n    const options = { month: opt.display ?? '2-digit' }\n\n    for (let i = 0; i <= 11; i++) {\n      this.months.push(new Date(2000, i, 1).toLocaleDateString(locale, options))\n    }\n\n    return this.months\n  }\n}\n\n// eslint-disable-next-line @typescript-eslint/consistent-type-definitions\nexport interface DateMonthEditorOptions extends SelectEditorOptions {\n  display?: '2-digit' | 'short' | 'long'\n  locale?: 'en' | 'th'\n}\n"]}

package/dist/formatters/formatters.d.ts

@@ -20,6 +20,11 @@ export declare class LookupFormatter implements Formatter {
     lookupKey: string;
     format(ctx: FormatterContext): string;
 }
+export declare class DateMonthFormatter implements Formatter {
+    display: '2-digit' | 'short' | 'long';
+    locale: 'en' | 'th';
+    format(ctx: FormatterContext): string;
+}
 export declare class idevsFormatters {
     static load(): void;
 }

package/dist/formatters/formatters.js

@@ -95,6 +95,27 @@ LookupFormatter = __decorate([
     Decorators.registerFormatter('Idevs.LookupFormatter')
 ], LookupFormatter);
 export { LookupFormatter };
+let DateMonthFormatter = class DateMonthFormatter {
+    format(ctx) {
+        var _a, _b;
+        const src = ctx.value;
+        if (!src)
+            return '';
+        const locale = (_a = this.locale) !== null && _a !== void 0 ? _a : 'en';
+        const options = { month: (_b = this.display) !== null && _b !== void 0 ? _b : '2-digit' };
+        return new Date(2000, src - 1, 1).toLocaleDateString(locale, options);
+    }
+};
+__decorate([
+    Decorators.option()
+], DateMonthFormatter.prototype, "display", void 0);
+__decorate([
+    Decorators.option()
+], DateMonthFormatter.prototype, "locale", void 0);
+DateMonthFormatter = __decorate([
+    Decorators.registerFormatter('Idevs.DateMonthFormatter')
+], DateMonthFormatter);
+export { DateMonthFormatter };
 export class idevsFormatters {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     static load() { }

package/dist/formatters/formatters.js.map

@@ -1 +1 @@
-{"version":3,"file":"formatters.js","sourceRoot":"","sources":["../../src/formatters/formatters.ts"],"names":[],"mappings":"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","sourcesContent":["import { Decorators } from '@serenity-is/corelib'\nimport { FormatterContext } from '@serenity-is/sleekgrid'\nimport { getLookup, htmlEncode } from '@serenity-is/corelib/q'\n\nexport type Formatter = {\n  format(ctx: FormatterContext): string\n}\n\n@Decorators.registerFormatter('Idevs.ZeroDisplayFormatter')\nexport class ZeroDisplayFormatter implements Formatter {\n  constructor() {\n    this.displayText = ''\n  }\n\n  @Decorators.option()\n  public displayText: string\n\n  format(ctx: FormatterContext): string {\n    const src = ctx.value as string\n\n    const value = parseFloat(String(src || '0').replace(',', ''))\n    if (value == 0) {\n      return htmlEncode(this.displayText)\n    }\n\n    return htmlEncode(src)\n  }\n}\n\n@Decorators.registerFormatter('Idevs.CheckboxFormatter')\nexport class CheckboxFormatter implements Formatter {\n  constructor() {\n    this.cssClass = 'text-center fs-2 text-gray-1'\n    this.trueText = '1'\n    this.falseText = '0'\n    this.trueValueIcon = 'mdi mdi-checkbox-marked-outline'\n    this.falseValueIcon = 'mdi mdi-checkbox-blank-outline'\n  }\n\n  @Decorators.option()\n  public trueText: string\n\n  @Decorators.option()\n  public falseText: string\n\n  @Decorators.option()\n  public cssClass: string\n\n  @Decorators.option()\n  public trueValueIcon: string\n\n  @Decorators.option()\n  public falseValueIcon: string\n\n  format(ctx: FormatterContext): string {\n    const src = ctx.value as string\n    if (src == this.trueText) {\n      return `<i class=\"${this.trueValueIcon} ${this.cssClass}\"></i>`\n    } else if (src == this.falseText) {\n      return `<i class=\"${this.falseValueIcon} ${this.cssClass}\"></i>`\n    } else {\n      return htmlEncode(src)\n    }\n  }\n}\n\n@Decorators.registerFormatter('Idevs.LookupFormatter')\nexport class LookupFormatter implements Formatter {\n  @Decorators.option()\n  public lookupKey: string\n\n  format(ctx: FormatterContext): string {\n    const src = ctx.value as string\n    if (!src) return ''\n\n    if (!this.lookupKey) return src\n\n    const lookup = getLookup(this.lookupKey)\n    const items = lookup.items\n    const idField = lookup.idField\n    const textField = lookup.textField\n    const idList = src.split(',')\n\n    return idList\n      .map(x => {\n        const g = items.find(i => i[idField] == x)\n        if (!g) return x\n\n        return htmlEncode(g[textField])\n      })\n      .join(', ')\n  }\n}\n\nexport class idevsFormatters {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  public static load() {}\n}\n"]}
+{"version":3,"file":"formatters.js","sourceRoot":"","sources":["../../src/formatters/formatters.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAEjD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAA;AAOvD,IAAM,oBAAoB,GAA1B,MAAM,oBAAoB;IAC/B;QACE,IAAI,CAAC,WAAW,GAAG,EAAE,CAAA;IACvB,CAAC;IAKD,MAAM,CAAC,GAAqB;QAC1B,MAAM,GAAG,GAAG,GAAG,CAAC,KAAe,CAAA;QAE/B,MAAM,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,GAAG,IAAI,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAA;QAC7D,IAAI,KAAK,IAAI,CAAC,EAAE;YACd,OAAO,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;SACpC;QAED,OAAO,UAAU,CAAC,GAAG,CAAC,CAAA;IACxB,CAAC;CACF,CAAA;AAZC;IADC,UAAU,CAAC,MAAM,EAAE;yDACM;AANf,oBAAoB;IADhC,UAAU,CAAC,iBAAiB,CAAC,4BAA4B,CAAC;GAC9C,oBAAoB,CAkBhC;SAlBY,oBAAoB;AAqB1B,IAAM,iBAAiB,GAAvB,MAAM,iBAAiB;IAC5B;QACE,IAAI,CAAC,QAAQ,GAAG,8BAA8B,CAAA;QAC9C,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAA;QACnB,IAAI,CAAC,SAAS,GAAG,GAAG,CAAA;QACpB,IAAI,CAAC,aAAa,GAAG,iCAAiC,CAAA;QACtD,IAAI,CAAC,cAAc,GAAG,gCAAgC,CAAA;IACxD,CAAC;IAiBD,MAAM,CAAC,GAAqB;QAC1B,MAAM,GAAG,GAAG,GAAG,CAAC,KAAe,CAAA;QAC/B,IAAI,GAAG,IAAI,IAAI,CAAC,QAAQ,EAAE;YACxB,OAAO,aAAa,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,QAAQ,CAAA;SAChE;aAAM,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,EAAE;YAChC,OAAO,aAAa,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,QAAQ,CAAA;SACjE;aAAM;YACL,OAAO,UAAU,CAAC,GAAG,CAAC,CAAA;SACvB;IACH,CAAC;CACF,CAAA;AAxBC;IADC,UAAU,CAAC,MAAM,EAAE;mDACG;AAGvB;IADC,UAAU,CAAC,MAAM,EAAE;oDACI;AAGxB;IADC,UAAU,CAAC,MAAM,EAAE;mDACG;AAGvB;IADC,UAAU,CAAC,MAAM,EAAE;wDACQ;AAG5B;IADC,UAAU,CAAC,MAAM,EAAE;yDACS;AAtBlB,iBAAiB;IAD7B,UAAU,CAAC,iBAAiB,CAAC,yBAAyB,CAAC;GAC3C,iBAAiB,CAkC7B;SAlCY,iBAAiB;AAqCvB,IAAM,eAAe,GAArB,MAAM,eAAe;IAI1B,MAAM,CAAC,GAAqB;QAC1B,MAAM,GAAG,GAAG,GAAG,CAAC,KAAe,CAAA;QAC/B,IAAI,CAAC,GAAG;YAAE,OAAO,EAAE,CAAA;QAEnB,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE,OAAO,GAAG,CAAA;QAE/B,MAAM,MAAM,GAAG,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QACxC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;QAC1B,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAA;QAC9B,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAA;QAClC,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAE7B,OAAO,MAAM;aACV,GAAG,CAAC,CAAC,CAAC,EAAE;YACP,MAAM,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAA;YAC1C,IAAI,CAAC,CAAC;gBAAE,OAAO,CAAC,CAAA;YAEhB,OAAO,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;QACjC,CAAC,CAAC;aACD,IAAI,CAAC,IAAI,CAAC,CAAA;IACf,CAAC;CACF,CAAA;AAvBC;IADC,UAAU,CAAC,MAAM,EAAE;kDACI;AAFb,eAAe;IAD3B,UAAU,CAAC,iBAAiB,CAAC,uBAAuB,CAAC;GACzC,eAAe,CAyB3B;SAzBY,eAAe;AA4BrB,IAAM,kBAAkB,GAAxB,MAAM,kBAAkB;IAO7B,MAAM,CAAC,GAAqB;;QAC1B,MAAM,GAAG,GAAG,GAAG,CAAC,KAAe,CAAA;QAC/B,IAAI,CAAC,GAAG;YAAE,OAAO,EAAE,CAAA;QAEnB,MAAM,MAAM,GAAG,MAAA,IAAI,CAAC,MAAM,mCAAI,IAAI,CAAA;QAClC,MAAM,OAAO,GAAG,EAAE,KAAK,EAAE,MAAA,IAAI,CAAC,OAAO,mCAAI,SAAS,EAAE,CAAA;QAEpD,OAAO,IAAI,IAAI,CAAC,IAAI,EAAE,GAAG,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACvE,CAAC;CACF,CAAA;AAdC;IADC,UAAU,CAAC,MAAM,EAAE;mDACwB;AAG5C;IADC,UAAU,CAAC,MAAM,EAAE;kDACM;AALf,kBAAkB;IAD9B,UAAU,CAAC,iBAAiB,CAAC,0BAA0B,CAAC;GAC5C,kBAAkB,CAgB9B;SAhBY,kBAAkB;AAkB/B,MAAM,OAAO,eAAe;IAC1B,gEAAgE;IACzD,MAAM,CAAC,IAAI,KAAI,CAAC;CACxB","sourcesContent":["import { Decorators } from '@serenity-is/corelib'\nimport { FormatterContext } from '@serenity-is/sleekgrid'\nimport { getLookup, htmlEncode } from '@serenity-is/corelib/q'\n\nexport type Formatter = {\n  format(ctx: FormatterContext): string\n}\n\n@Decorators.registerFormatter('Idevs.ZeroDisplayFormatter')\nexport class ZeroDisplayFormatter implements Formatter {\n  constructor() {\n    this.displayText = ''\n  }\n\n  @Decorators.option()\n  public displayText: string\n\n  format(ctx: FormatterContext): string {\n    const src = ctx.value as string\n\n    const value = parseFloat(String(src || '0').replace(',', ''))\n    if (value == 0) {\n      return htmlEncode(this.displayText)\n    }\n\n    return htmlEncode(src)\n  }\n}\n\n@Decorators.registerFormatter('Idevs.CheckboxFormatter')\nexport class CheckboxFormatter implements Formatter {\n  constructor() {\n    this.cssClass = 'text-center fs-2 text-gray-1'\n    this.trueText = '1'\n    this.falseText = '0'\n    this.trueValueIcon = 'mdi mdi-checkbox-marked-outline'\n    this.falseValueIcon = 'mdi mdi-checkbox-blank-outline'\n  }\n\n  @Decorators.option()\n  public trueText: string\n\n  @Decorators.option()\n  public falseText: string\n\n  @Decorators.option()\n  public cssClass: string\n\n  @Decorators.option()\n  public trueValueIcon: string\n\n  @Decorators.option()\n  public falseValueIcon: string\n\n  format(ctx: FormatterContext): string {\n    const src = ctx.value as string\n    if (src == this.trueText) {\n      return `<i class=\"${this.trueValueIcon} ${this.cssClass}\"></i>`\n    } else if (src == this.falseText) {\n      return `<i class=\"${this.falseValueIcon} ${this.cssClass}\"></i>`\n    } else {\n      return htmlEncode(src)\n    }\n  }\n}\n\n@Decorators.registerFormatter('Idevs.LookupFormatter')\nexport class LookupFormatter implements Formatter {\n  @Decorators.option()\n  public lookupKey: string\n\n  format(ctx: FormatterContext): string {\n    const src = ctx.value as string\n    if (!src) return ''\n\n    if (!this.lookupKey) return src\n\n    const lookup = getLookup(this.lookupKey)\n    const items = lookup.items\n    const idField = lookup.idField\n    const textField = lookup.textField\n    const idList = src.split(',')\n\n    return idList\n      .map(x => {\n        const g = items.find(i => i[idField] == x)\n        if (!g) return x\n\n        return htmlEncode(g[textField])\n      })\n      .join(', ')\n  }\n}\n\n@Decorators.registerFormatter('Idevs.DateMonthFormatter')\nexport class DateMonthFormatter implements Formatter {\n  @Decorators.option()\n  public display: '2-digit' | 'short' | 'long'\n\n  @Decorators.option()\n  public locale: 'en' | 'th'\n\n  format(ctx: FormatterContext): string {\n    const src = ctx.value as number\n    if (!src) return ''\n\n    const locale = this.locale ?? 'en'\n    const options = { month: this.display ?? '2-digit' }\n\n    return new Date(2000, src - 1, 1).toLocaleDateString(locale, options)\n  }\n}\n\nexport class idevsFormatters {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  public static load() {}\n}\n"]}

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.38",
+  "version": "0.0.40",
   "description": "Extended library for Serenity Framework",
   "main": "src/index.js",
   "scripts": {

package/src/editors/dateMonthEditor.ts

@@ -30,16 +30,7 @@ export class DateMonthEditor extends SelectEditor {
       this.months.push(new Date(2000, i, 1).toLocaleDateString(locale, options))
     }
 
-    if (!(opt.descending ?? false)) {
-      return this.months
-    }
-
-    const months: string[] = []
-    for (let i1 = 11; i1 >= 0; i1--) {
-      months.push(new Date(2000, i1, 1).toLocaleDateString(locale, options))
-    }
-
-    return months
+    return this.months
   }
 }
 
@@ -47,5 +38,4 @@ export class DateMonthEditor extends SelectEditor {
 export interface DateMonthEditorOptions extends SelectEditorOptions {
   display?: '2-digit' | 'short' | 'long'
   locale?: 'en' | 'th'
-  descending?: boolean
 }

package/src/formatters/formatters.ts

@@ -92,6 +92,25 @@ export class LookupFormatter implements Formatter {
   }
 }
 
+@Decorators.registerFormatter('Idevs.DateMonthFormatter')
+export class DateMonthFormatter implements Formatter {
+  @Decorators.option()
+  public display: '2-digit' | 'short' | 'long'
+
+  @Decorators.option()
+  public locale: 'en' | 'th'
+
+  format(ctx: FormatterContext): string {
+    const src = ctx.value as number
+    if (!src) return ''
+
+    const locale = this.locale ?? 'en'
+    const options = { month: this.display ?? '2-digit' }
+
+    return new Date(2000, src - 1, 1).toLocaleDateString(locale, options)
+  }
+}
+
 export class idevsFormatters {
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   public static load() {}

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'