@progress/kendo-vue-inputs 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/colors/ColorInput.js

@@ -0,0 +1,343 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { NumericTextBox } from '../main.js';
+import { HexInput } from './HexInput.js';
+import { Button } from '@progress/kendo-vue-buttons';
+import { Label } from '@progress/kendo-vue-labels';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { messages, colorGradientR, colorGradientHex, colorGradientA, colorGradientB, colorGradientG, colorGradientRLabel, colorGradientGLabel, colorGradientBLabel, colorGradientALabel, colorGradientInputColorButton } from '../messages.js';
+import { guid, Keys } from '@progress/kendo-vue-common';
+/**
+ * @hidden
+ */
+
+var modes = ['rgba', 'rgb', 'hex'];
+/**
+ * @hidden
+ */
+
+var ColorInputVue2 = {
+  name: 'KendoColorInput',
+  // @ts-ignore
+  emits: {
+    'hexchange': null,
+    'rgbachange': null
+  },
+  props: {
+    tabIndex: Number,
+    rgba: {
+      type: Object,
+      default: function _default() {
+        return {};
+      }
+    },
+    hex: String,
+    opacity: Boolean,
+    disabled: Boolean
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  created: function created() {
+    this.hexInputId = guid();
+  },
+  data: function data() {
+    return {
+      inputMode: modes[1]
+    };
+  },
+  mounted: function mounted() {
+    this.lastFocusable = this.$refs.hexinput || this.$refs.numerica || this.$refs.numericb;
+  },
+  updated: function updated() {
+    this.lastFocusable = this.$refs.hexinput || this.$refs.numerica || this.$refs.numericb;
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var localizationService = provideLocalizationService(this);
+    var hexMessage = localizationService.toLanguageString(colorGradientHex, messages[colorGradientHex]);
+    var buttonMessage = localizationService.toLanguageString(colorGradientInputColorButton, messages[colorGradientInputColorButton]);
+    var rMessage = localizationService.toLanguageString(colorGradientR, messages[colorGradientR]);
+    var gMessage = localizationService.toLanguageString(colorGradientG, messages[colorGradientG]);
+    var bMessage = localizationService.toLanguageString(colorGradientB, messages[colorGradientB]);
+    var aMessage = localizationService.toLanguageString(colorGradientA, messages[colorGradientA]);
+    var rLabelMessage = localizationService.toLanguageString(colorGradientRLabel, messages[colorGradientRLabel]);
+    var gLabelMessage = localizationService.toLanguageString(colorGradientGLabel, messages[colorGradientGLabel]);
+    var bLabelMessage = localizationService.toLanguageString(colorGradientBLabel, messages[colorGradientBLabel]);
+    var aLabelMessage = localizationService.toLanguageString(colorGradientALabel, messages[colorGradientALabel]);
+    return h("div", {
+      "class": "k-colorgradient-inputs k-hstack"
+    }, [h("div", {
+      "class": "k-vstack"
+    }, [h(Button, {
+      ariaLabel: buttonMessage,
+      attrs: this.v3 ? undefined : {
+        ariaLabel: buttonMessage,
+        tabIndex: this.tabIndex,
+        type: "button",
+        fillMode: 'flat',
+        icon: 'arrows-kpi'
+      },
+      tabIndex: this.tabIndex,
+      type: "button",
+      fillMode: 'flat',
+      icon: 'arrows-kpi',
+      "class": "k-colorgradient-toggle-mode k-icon-button",
+      onClick: this.onToggleModeChange,
+      on: this.v3 ? undefined : {
+        "click": this.onToggleModeChange,
+        "keydown": this.onKeyDown
+      },
+      onKeydown: this.onKeyDown
+    })]), this.inputMode === 'hex' && h("div", {
+      "class": "k-vstack k-flex-1"
+    }, [h("span", {
+      "class": "k-hex-value"
+    }, [h(HexInput, {
+      id: this.hexInputId,
+      attrs: this.v3 ? undefined : {
+        id: this.hexInputId,
+        tabIndex: this.tabIndex,
+        hex: this.$props.hex,
+        disabled: this.$props.disabled
+      },
+      tabIndex: this.tabIndex,
+      hex: this.$props.hex,
+      onHexchange: this.onHexChange,
+      on: this.v3 ? undefined : {
+        "hexchange": this.onHexChange
+      },
+      disabled: this.$props.disabled,
+      ref: 'hexinput'
+    })]), // @ts-ignore  function children
+    h(Label, {
+      "class": "k-colorgradient-input-label",
+      "for": this.hexInputId,
+      attrs: this.v3 ? undefined : {
+        "for": this.hexInputId
+      }
+    }, this.v3 ? function () {
+      return [hexMessage];
+    } : [hexMessage])]), (this.inputMode === 'rgb' || this.inputMode === 'rgba') && [h("div", {
+      "class": "k-vstack"
+    }, [h(NumericTextBox, {
+      tabIndex: this.tabIndex,
+      attrs: this.v3 ? undefined : {
+        tabIndex: this.tabIndex,
+        value: this.$props.rgba.r,
+        min: 0,
+        max: 255,
+        spinners: false,
+        format: "n",
+        ariaLabel: rLabelMessage,
+        disabled: this.$props.disabled
+      },
+      value: this.$props.rgba.r,
+      min: 0,
+      max: 255,
+      spinners: false,
+      format: "n",
+      ariaLabel: rLabelMessage,
+      onChange: this.onRgbaRChange,
+      on: this.v3 ? undefined : {
+        "change": this.onRgbaRChange
+      },
+      disabled: this.$props.disabled
+    }), // @ts-ignore  function children
+    h(Label, {
+      "class": "k-colorgradient-input-label"
+    }, this.v3 ? function () {
+      return [rMessage];
+    } : [rMessage])]), h("div", {
+      "class": "k-vstack"
+    }, [h(NumericTextBox, {
+      tabIndex: this.tabIndex,
+      attrs: this.v3 ? undefined : {
+        tabIndex: this.tabIndex,
+        value: this.$props.rgba.g,
+        min: 0,
+        max: 255,
+        spinners: false,
+        format: "n",
+        ariaLabel: gLabelMessage,
+        disabled: this.$props.disabled
+      },
+      value: this.$props.rgba.g,
+      min: 0,
+      max: 255,
+      spinners: false,
+      format: "n",
+      ariaLabel: gLabelMessage,
+      onChange: this.onRgbaGChange,
+      on: this.v3 ? undefined : {
+        "change": this.onRgbaGChange
+      },
+      disabled: this.$props.disabled
+    }), // @ts-ignore  function children
+    h(Label, {
+      "class": "k-colorgradient-input-label"
+    }, this.v3 ? function () {
+      return [gMessage];
+    } : [gMessage])]), h("div", {
+      "class": "k-vstack"
+    }, [h(NumericTextBox, {
+      tabIndex: this.tabIndex,
+      attrs: this.v3 ? undefined : {
+        tabIndex: this.tabIndex,
+        value: this.$props.rgba.b,
+        min: 0,
+        max: 255,
+        spinners: false,
+        format: "n",
+        ariaLabel: bLabelMessage,
+        disabled: this.$props.disabled
+      },
+      value: this.$props.rgba.b,
+      min: 0,
+      max: 255,
+      spinners: false,
+      format: "n",
+      ariaLabel: bLabelMessage,
+      onChange: this.onRgbaBChange,
+      on: this.v3 ? undefined : {
+        "change": this.onRgbaBChange
+      },
+      disabled: this.$props.disabled,
+      ref: 'numericb'
+    }), // @ts-ignore  function children
+    h(Label, {
+      "class": "k-colorgradient-input-label"
+    }, this.v3 ? function () {
+      return [bMessage];
+    } : [bMessage])])], this.inputMode === 'rgba' && h("div", {
+      "class": "k-vstack"
+    }, [this.$props.opacity && h(NumericTextBox, {
+      tabIndex: this.tabIndex,
+      attrs: this.v3 ? undefined : {
+        tabIndex: this.tabIndex,
+        value: this.$props.rgba.a,
+        min: 0,
+        max: 1,
+        step: 0.01,
+        spinners: false,
+        format: "n2",
+        ariaLabel: aLabelMessage,
+        disabled: this.$props.disabled
+      },
+      value: this.$props.rgba.a,
+      min: 0,
+      max: 1,
+      step: 0.01,
+      spinners: false,
+      format: "n2",
+      ariaLabel: aLabelMessage,
+      onChange: this.onRgbaAChange,
+      on: this.v3 ? undefined : {
+        "change": this.onRgbaAChange
+      },
+      disabled: this.$props.disabled,
+      ref: 'numerica'
+    }), this.$props.opacity && // @ts-ignore  function children
+    h(Label, {
+      "class": "k-colorgradient-input-label"
+    }, this.v3 ? function () {
+      return [aMessage];
+    } : [aMessage])])]);
+  },
+  methods: {
+    onHexChange: function onHexChange(event) {
+      this.$emit('hexchange', event.hex, event.value, event);
+    },
+    onRgbaRChange: function onRgbaRChange(event) {
+      this.dispatchRgbaChange({
+        r: event.value
+      }, event);
+    },
+    onRgbaGChange: function onRgbaGChange(event) {
+      this.dispatchRgbaChange({
+        g: event.value
+      }, event);
+    },
+    onRgbaBChange: function onRgbaBChange(event) {
+      this.dispatchRgbaChange({
+        b: event.value
+      }, event);
+    },
+    onRgbaAChange: function onRgbaAChange(event) {
+      this.dispatchRgbaChange({
+        a: event.value
+      }, event);
+    },
+    dispatchRgbaChange: function dispatchRgbaChange(newValue, event) {
+      var rgba = __assign({}, this.$props.rgba);
+
+      if (newValue.r !== undefined) {
+        rgba.r = newValue.r;
+      }
+
+      if (newValue.g !== undefined) {
+        rgba.g = newValue.g;
+      }
+
+      if (newValue.b !== undefined) {
+        rgba.b = newValue.b;
+      }
+
+      if (newValue.a !== undefined) {
+        rgba.a = newValue.a;
+      }
+
+      this.$emit('rgbachange', rgba, event);
+    },
+    onToggleModeChange: function onToggleModeChange() {
+      var index = modes.length - 1 === modes.indexOf(this.inputMode) ? 0 : modes.indexOf(this.inputMode) + 1;
+
+      if (!this.$props.opacity) {
+        var nextIndex = modes[index] === 'rgba' ? index + 1 : index;
+        this.inputMode = modes[nextIndex];
+      } else {
+        this.inputMode = modes[index];
+      }
+    },
+    onKeyDown: function onKeyDown(e) {
+      if (e.keyCode === Keys.enter) {
+        e.stopPropagation();
+      }
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var ColorInput = ColorInputVue2;
+export { ColorInput, ColorInputVue2 };

package/dist/esm/colors/ColorPalette.d.ts

@@ -0,0 +1,60 @@
+import { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type } from '../additionalTypes';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { ColorPaletteService } from './utils/color-palette.service';
+import { ColorPaletteProps } from './interfaces/ColorPaletteProps';
+/**
+ * @hidden
+ */
+export declare const DEFAULT_TILE_SIZE = 24;
+/**
+ * @hidden
+ */
+export declare const DEFAULT_COLUMNS_COUNT = 10;
+/**
+ * @hidden
+ */
+export declare const DEFAULT_PRESET = "office";
+/**
+ * @hidden
+ */
+export interface ColorPaletteState {
+    wrapper: HTMLDivElement | null;
+    paletteService: ColorPaletteService;
+    guid: string;
+}
+/**
+ * @hidden
+ */
+export interface ColorPaletteComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorPaletteMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ColorPaletteData {
+    selectedColor?: string;
+    focusedColor?: string;
+}
+/**
+ * @hidden
+ */
+export interface ColorPaletteAll extends Vue2type, ColorPaletteMethods, ColorPaletteData, ColorPaletteComputed, ColorPaletteState {
+}
+/**
+ * @hidden
+ */
+declare let ColorPaletteVue2: ComponentOptions<ColorPaletteAll, DefaultData<ColorPaletteData>, DefaultMethods<ColorPaletteAll>, ColorPaletteComputed, RecordPropsDefinition<ColorPaletteProps>>;
+/**
+ * @hidden
+ */
+declare const ColorPalette: DefineComponent<ColorPaletteProps, any, ColorPaletteData, ColorPaletteComputed, ColorPaletteMethods, {}, {}, {}, string, ColorPaletteProps, ColorPaletteProps, {}>;
+export { ColorPalette, ColorPaletteVue2 };