declare var kendo: any;
declare var $: any;

export class CellBorderWizardPlugin {
  public static init() {
    const cellBorderCommand = kendo.ui.editor.TableWizardCommand.extend({
      exec() {
        const cmd = this;
        const range = (cmd.range = cmd.lockRange());
        cmd.selectedCells = cmd._selectedCells(range);
        cmd.dialog = $('#cellPropsDialog').data('kendoDialog');
        cmd.colorPickerAlreadyLoaded = cmd.dialog ? 'yes' : 'no';

        cmd.dialog = $('#cellPropsDialog')
          .kendoDialog({
            title: 'Cell Border Wizard',
            buttonLayout: 'normal',
            actions: [
              {
                text: 'Apply',
                primary: true,
                action: $.proxy(cmd.applyChanges, cmd),
              },
              { text: 'Close' },
            ],
          })
          .data('kendoDialog');

        if (cmd.colorPickerAlreadyLoaded === 'no') {
          cmd.dialog.element.find('#borderColor').kendoColorPicker({
            clearButton: true,
            buttons: false,
            opacity: false,
          });

          cmd.dialog.element.find('#borderSize').kendoNumericTextBox({
            value: 1,
            min: 0,
            step: 1,
            format: 'n0',
            restrictDecimals: true,
          });

          cmd.dialog.element.find('#border').kendoDropDownList({
            autoWidth: true,
          });

          cmd.dialog.element.find('#borderStyle').kendoDropDownList({
            autoWidth: true,
          });
        }

        cmd.dialog.open();
      },

      applyChanges() {
        for (let i = 0; i < this.selectedCells.length; i++) {
          const selectedCell = this.selectedCells[i];
          const dialog = this.dialog;
          const border = 'border' + dialog.element.find('#border').val();
          const borderSize = dialog.element.find('#borderSize').val();
          const borderStyle = dialog.element.find('#borderStyle').val();
          const borderColor = dialog.element
            .find('#borderColor')
            .data('kendoColorPicker')
            .value();

          if (border) {
            selectedCell.style[border + 'Color'] = borderColor
              ? borderColor
              : '';
            if (borderSize) {
              selectedCell.style[border + 'Width'] = borderSize + 'px';
            }
            if (borderStyle) {
              selectedCell.style[border + 'Style'] = borderStyle;
            }
          }
          kendo.ui.editor.Command.fn.releaseRange.call(this, this.range);
        }
        return false;
      },
    });

    const cellBorderTool = kendo.ui.editor.TableModificationTool.extend({
      command(options: any) {
        return new cellBorderCommand(options);
      },
    });

    kendo.ui.editor.EditorUtils.registerTool(
      'tableCellProperties',
      new cellBorderTool({
        command: cellBorderCommand,
        template: new kendo.ui.editor.ToolTemplate({
          template: kendo.ui.editor.EditorUtils.buttonTemplate,
          title: 'Cell Border Wizard',
        }),
      }),
    );
  }
}

<div id="cellPropsDialog" style="display: none;">
  <div style="width: 250px;">
    <div class="k-edit-label">Cell Side</div>
    <div class="k-edit-field">
      <select id="border">
        <option value="Top">top</option>
        <option value="Right">right</option>
        <option value="Bottom">bottom</option>
        <option value="Left">left</option>
      </select>
    </div>
    <div class="k-edit-label">Size</div>
    <div class="k-edit-field">
      <input type="number" id="borderSize" style="width: 70px;" />
    </div>
    <div class="k-edit-label">Color</div>
    <div class="k-edit-field">
      <input id="borderColor" value="#000000" />
    </div>
    <div class="k-edit-label">Style</div>
    <div class="k-edit-field">
      <select id="borderStyle">
        <option value="solid">solid</option>
        <option value="dotted">dotted</option>
        <option value="dashed">dashed</option>
        <option value="double">double</option>
        <option value="groove">groove</option>
        <option value="ridge">ridge</option>
        <option value="inset">inset</option>
        <option value="outset">outset</option>
        <option value="inherit">inherit</option>
        <option value="none">none</option>
        <option value="hidden">hidden</option>
      </select>
    </div>
  </div>
</div>

              [checkboxes]="{ checkOnClick: false, enabled: true }"
              formControlName="selectedLanguages"
              (valueChange)="onSelectedLanguageChange($event)"
              [autoClose]="false"
              textField="Language"
              valueField="Value"
              [data]="availableLanguages">
              <ng-template kendoMultiSelectItemTemplate let-dataItem>
                <span> {{ dataItem.Language }}</span>

                <label class="use-channel-lang-label" [for]="useChannel"> Use channel language: </label>
                <input
                  type="checkbox"
                  (change)="onUseChannelLangValueChange($event, dataItem)"
                  #useChannel
                  [checked]="dataItem.UseChannelLanguage"
                  kendoTooltip="Use channel language"
                  kendoCheckBox />

              </ng-template>

              <ng-template kendoMultiSelectTagTemplate let-dataItem>
                <span>{{ dataItem.Language }}</span>
                <kendo-sortable [kendoSortableBinding]="languages"></kendo-sortable>
                <input type="checkbox" [checked]="dataItem.UseChannelLanguage" [disabled]="true" kendoCheckBox />
              </ng-template>
            </kendo-multiselect>