@progress/kendo-vue-inputs/colors/FlatColorPicker.mjs

TODO

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { defineComponent as T, h as n, createVNode as t, isVNode as z } from "vue";
import { dropletSliderIcon as F, paletteIcon as L, dropletSlashIcon as R } from "@progress/kendo-svg-icons";
import { validatePackage as M, templateRendering as h, getListeners as p, getTemplate as g, getTabIndex as G, classNames as D, kendoThemeMaps as j, Icon as c, focusFirstFocusableChild as N, focusContainer as E, Keys as u, setRef as m } from "@progress/kendo-vue-common";
import { ButtonGroup as O, Button as l } from "@progress/kendo-vue-buttons";
import { DEFAULT_PRESET as A, ColorPalette as _ } from "./ColorPalette.mjs";
import { ColorGradient as H } from "./ColorGradient.mjs";
import { packageMetadata as U } from "../package-metadata.mjs";
import { flatColorPickerGradientBtn as f, messages as a, flatColorPickerPaletteBtn as C, flatColorPickerClearBtn as k, flatColorPickerCancelBtn as b, flatColorPickerApplyBtn as w } from "../messages/main.mjs";
import { parseColor as q } from "./utils/color-parser.mjs";
import { DEFAULT_GRADIENT_SETTINGS as J } from "./utils/color-cache.mjs";
import { provideLocalizationService as Q } from "@progress/kendo-vue-intl";
function v(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !z(e);
}
const re = /* @__PURE__ */ T({
  name: "KendoFlatColorPicker",
  emits: {
    viewchange: null,
    changemodel: null,
    "update:modelValue": null,
    "update:modelRgbaValue": null,
    focus: null,
    blur: null,
    focusout: null,
    keydown: null,
    change: null
  },
  props: {
    modelValue: String,
    modelRgbaValue: String,
    value: String,
    prevValue: String,
    tabIndex: Number,
    disabled: Boolean,
    view: {
      type: String,
      default: "combo",
      validator: function(e) {
        return ["gradient", "palette", "combo"].includes(e);
      }
    },
    selectedView: {
      type: Number,
      default: void 0
    },
    header: [String, Function, Object],
    footer: [String, Function, Object],
    showClearButton: {
      type: Boolean,
      default: !0
    },
    showPreview: {
      type: Boolean,
      default: !0
    },
    showButtons: {
      type: Boolean,
      default: !0
    },
    gradientSettings: {
      type: Object,
      default: function() {
        return J;
      }
    },
    paletteSettings: {
      type: Object,
      default: function() {
        return {
          palette: A
        };
      }
    },
    size: {
      type: String,
      default: "medium"
    },
    adaptive: Boolean
  },
  inject: {
    kendoLocalizationService: {
      default: null
    }
  },
  created() {
    M(U);
  },
  computed: {
    isColorGradient() {
      return this.view !== "combo" ? this.view === "gradient" : this.selectedView !== void 0 ? this.selectedView === 0 : this.currentView === "gradient";
    },
    computedColor() {
      return this.value !== void 0 ? this.value : this.modelValue !== void 0 ? this.modelValue : this.modelRgbaValue !== void 0 ? this.modelRgbaValue : this.colorValue;
    },
    computedPrevColor() {
      return this.prevValue !== void 0 ? this.prevValue : this.currentPrevColor;
    },
    previewClass() {
      return {
        "k-coloreditor-preview-color": !0,
        "k-color-preview": !0,
        "k-no-color": !this.colorValue
      };
    },
    currentClass() {
      return {
        "k-coloreditor-current-color": !0,
        "k-color-preview": !0,
        "k-no-color": !this.computedPrevColor
      };
    },
    computedTabIndex() {
      return this.focused ? 0 : -1;
    }
  },
  data() {
    const e = this.value || this.defaultValue || this.modelValue || this.modelRgbaValue;
    return {
      currentView: "gradient",
      colorValue: e,
      currentPrevColor: e,
      focused: !1
    };
  },
  render() {
    const {
      size: e,
      adaptive: o
    } = this.$props, i = Q(this), y = i.toLanguageString(f, a[f]), V = i.toLanguageString(C, a[C]), B = i.toLanguageString(k, a[k]), r = i.toLanguageString(b, a[b]), s = i.toLanguageString(w, a[w]), P = h.call(this, this.$props.header, p.call(this)), S = h.call(this, this.$props.footer, p.call(this)), I = g.call(this, {
      h: n,
      template: P
    }), $ = g.call(this, {
      h: n,
      template: S
    }), K = function() {
      return n(H, {
        ref: m(this, "gradient"),
        tabIndex: -1,
        value: this.colorValue,
        innerTabIndex: this.computedTabIndex,
        size: e,
        onChange: this.handleColorChange,
        onKeydown: this.innerKeyDown,
        adaptive: o,
        ...this.gradientSettings
      });
    }, x = function() {
      return n(_, {
        ref: m(this, "palette"),
        tabIndex: this.computedTabIndex,
        value: this.colorValue,
        size: e,
        onChange: this.handlePaletteColorChange,
        onKeydown: this.gradientKeyDown,
        ...this.paletteSettings
      });
    };
    return t("div", {
      tabindex: G(this.$props.tabIndex, this.$props.disabled),
      onFocus: this.onFocus,
      onBlur: this.onBlur,
      onFocusout: this.onFocusout,
      onKeydown: this.onKeyDownHandler,
      class: D("k-flatcolorpicker k-coloreditor", {
        [`k-coloreditor-${j.sizeMap[e] || e}`]: e,
        "k-disabled": this.$props.disabled
      }),
      "aria-disabled": this.$props.disabled
    }, [I, this.$props.showClearButton && this.$props.showPreview && t("div", {
      class: "k-coloreditor-header k-hstack"
    }, [this.$props.view === "combo" && t("div", {
      class: "k-coloreditor-header-actions k-hstack"
    }, [t(O, {
      class: "k-button-group-flat"
    }, {
      default: () => [t(l, {
        tabIndex: this.computedTabIndex,
        type: "button",
        togglable: !0,
        fillMode: "flat",
        selected: this.isColorGradient,
        onKeydown: this.handleButtonKeydown,
        ariaLabel: y,
        size: e,
        onClick: (d) => this.handleViewChange(d, "gradient")
      }, {
        default: () => [t(c, {
          size: e,
          name: "droplet-slider",
          icon: F
        }, null)]
      }), t(l, {
        tabIndex: this.computedTabIndex,
        type: "button",
        togglable: !0,
        fillMode: "flat",
        selected: !this.isColorGradient,
        onKeydown: this.handleButtonKeydown,
        ariaLabel: V,
        size: e,
        onClick: (d) => this.handleViewChange(d, "palette")
      }, {
        default: () => [t(c, {
          size: e,
          name: "palette",
          icon: L
        }, null)]
      })]
    })]), t("div", {
      class: "k-spacer"
    }, null), t("div", {
      class: "k-coloreditor-header-actions k-hstack"
    }, [this.$props.showClearButton && t(l, {
      tabIndex: this.computedTabIndex,
      type: "button",
      fillMode: "flat",
      ariaLabel: B,
      size: e,
      onKeydown: this.handleButtonKeydown,
      onClick: this.handleResetColor
    }, {
      default: () => [t(c, {
        size: e,
        name: "droplet-slash",
        icon: R
      }, null)]
    }), this.$props.showPreview && t("div", {
      class: "k-coloreditor-preview k-vstack"
    }, [t("span", {
      class: this.previewClass,
      style: {
        background: this.colorValue
      }
    }, [!this.colorValue && t("span", {
      class: "k-color-preview-mask"
    }, null)]), t("span", {
      class: this.currentClass,
      style: {
        background: this.computedPrevColor
      },
      onClick: this.handlePrevColorClick
    }, [!this.computedPrevColor && t("span", {
      class: "k-color-preview-mask"
    }, null)])])])]), t("div", {
      class: "k-coloreditor-views k-vstack"
    }, [this.isColorGradient ? K.call(this) : x.call(this)]), this.$props.showButtons && t("div", {
      class: "k-coloreditor-footer k-actions k-actions-end"
    }, [t(l, {
      tabIndex: this.computedTabIndex,
      type: "button",
      class: "k-coloreditor-cancel",
      size: e,
      onKeydown: this.handleButtonKeydown,
      onClick: this.handleCancelBtnClick
    }, v(r) ? r : {
      default: () => [r]
    }), t(l, {
      tabIndex: this.computedTabIndex,
      type: "button",
      class: "k-coloreditor-apply k-primary",
      size: e,
      onKeydown: this.handleButtonKeydown,
      onClick: this.triggerChange
    }, v(s) ? s : {
      default: () => [s]
    })]), $]);
  },
  methods: {
    focus() {
      this.focused = !0, setTimeout(() => {
        N(this.$el);
      }, 1);
    },
    onKeyDownHandler(e) {
      const o = this.$el;
      this.focused = E(e, o), this.$emit("keydown", e);
    },
    handleViewChange(e, o) {
      this.currentView = o, this.$emit("viewchange", {
        event: e,
        viewType: o
      });
    },
    handleResetColor() {
      this.colorValue = null, !this.showButtons && !this.adaptive && this.triggerChange();
    },
    handleColorChange(e) {
      this.colorValue = e.value, !this.showButtons && !this.adaptive && this.triggerChange(e);
    },
    handlePaletteColorChange(e) {
      this.colorValue = e.value, !this.showButtons && !this.adaptive && this.triggerChange(e);
    },
    triggerChange(e) {
      const o = q(this.colorValue, "rgba");
      this.currentPrevColor = this.colorValue, this.$emit("changemodel", this.colorValue), this.$emit("update:modelValue", this.colorValue), this.$emit("update:modelRgbaValue", o), this.$emit("change", {
        event: e,
        value: this.colorValue,
        rgbaValue: o
      });
    },
    innerKeyDown(e) {
      e.keyCode === u.enter && this.triggerChange(e);
    },
    gradientKeyDown(e) {
      e.stopPropagation(), !this.showButtons && e.keyCode === u.enter && this.triggerChange(e);
    },
    handleButtonKeydown(e) {
      e.keyCode === u.enter && e.stopPropagation();
    },
    handleCancelBtnClick() {
      this.colorValue = this.computedPrevColor;
    },
    handlePrevColorClick() {
      this.colorValue = this.computedPrevColor;
    },
    onFocus(e) {
      this.$emit("focus", {
        event: e,
        target: this
      });
    },
    onBlur(e) {
      this.$emit("blur", {
        event: e,
        target: this
      });
    },
    onFocusout(e) {
      this.$emit("focusout", {
        event: e,
        target: this
      });
    }
  }
});
export {
  re as FlatColorPicker
};