@heartlandone/vega 2.74.0-RTE-table-preview → 2.74.0

package/dist/vega/vega-color-picker.entry.js

@@ -1,258 +0,0 @@
-import { r as registerInstance, e as createEvent, h, g as Host, i as getElement } from './index-01a2f9c9.js';
-import { R as RequiredFieldRule } from './required-field-rule-ab4bdc47.js';
-import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
-import { s as sanitizeVegaComponent } from './component-0cff85cf.js';
-import { a as arrayToClassString, h as hexToRGB, e as getHexFromShorthand } from './ui-5f775fd9.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-316ebdb1.js';
-import { m as methodPlaceholder, e as InjectVegaGlobalSlimmer, a as InjectVegaSlimmer } from './vega-slimmer-core-83fd0e22.js';
-import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-6fdf8c8b.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-61db3eef.js';
-import { C as ChangeManager } from './change-manager-b115783e.js';
-import { h as VegaChange } from './vega-event-id-61c8bd9f.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer } from './component-usage-runtime-metrics-0513698f.js';
-import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
-import './string-a953eafc.js';
-import './observer-3959f9dd.js';
-import './create-public-api-runtime-metrics-slimmer-8565f08b.js';
-import './dom-node-subject-factory-5798693b.js';
-import './vega-internal-event-id-b65a01a3.js';
-import './index-81ce67e2.js';
-import './page-resize-observer-slimmer-ee8774a6.js';
-import './ui-189dae23.js';
-import './breakpoints-d9faf11c.js';
-import './try-get-document-bef0f526.js';
-import './dom-node-subject-observer-factory-3b49c6b3.js';
-import './mutation-observer-slimmer-7065c745.js';
-import './mutation-observer-filters-6c515793.js';
-import './array-a1d98264.js';
-import './number-4398f2e1.js';
-import './sub-state-observer-slimmer-4fc8b3da.js';
-import './internal-vega-event-manager-826279b7.js';
-
-const VegaColorPickerRuntimeMetricsPayloadDefinition = [
-  {
-    payloadKey: 'AUTO_VALIDATION_IS_TRUE',
-    payloadDescription: 'Determines whether automatic validation should be implemented for the color picker when a color is selected',
-    /**
-     * The function checks if the `autoValidation` property of the `host` element is equal to 'true'.
-     * If it is, the function will return `true`.
-     *
-     * @param {HTMLElement} host - The element to check
-     * @returns {boolean} A boolean value
-     */
-    payloadValue: (host) => host.autoValidation === true,
-  },
-  {
-    payloadKey: 'AUTO_VALIDATION_IS_FALSE',
-    payloadDescription: 'Determines whether automatic validation should be implemented for the color picker when a color is selected',
-    /**
-     * The function checks if the `autoValidation` property of the `host` element is equal to 'false'.
-     * If it is, the function will return `true`.
-     *
-     * @param {HTMLElement} host - The element to check
-     * @returns {boolean} A boolean value
-     */
-    payloadValue: (host) => host.autoValidation === false,
-  },
-];
-
-const vegaColorPickerCss = ":host{display:inline-block;text-align:left;line-height:normal}:host vega-field-label{margin-bottom:8px}:host(.disabled) .color-picker-inline{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host(.disabled) .color-picker-inline-items:hover{box-shadow:none}:host(.disabled) .color-picker-inline-items:focus-within{box-shadow:none}:host .color-picker-inline{border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));padding:12px;max-width:max-content}:host .color-picker-inline-items{display:flex;border:1px solid rgba(var(--v-border-chip, 205, 209, 211, 1));border-radius:4px;width:24px;height:24px;cursor:pointer;align-items:center;justify-content:center}:host .color-picker-inline-items.selected{border-color:rgba(var(--v-bg-inverted-primary, 4, 4, 28, 1))}:host .color-picker-inline-items:hover{box-shadow:0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25))}:host .color-picker-inline-items:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));box-shadow:0px 0px 0px 1px rgba(var(--v-bg-primary, 252, 252, 252, 1)) inset;border:1px solid rgba(var(--v-bg-primary, 252, 252, 252, 1))}:host .checkmark-black{color:rgba(var(--v-text-black, 32, 54, 69, 1))}:host .checkmark-white{color:rgba(var(--v-text-white, 252, 252, 252, 1))}:host vega-text{padding-left:8px;padding-right:8px;padding-top:4px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-error{display:inline-block;padding-left:8px;padding-right:8px;padding-top:8px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .color-picker-inline.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .vega-hidden{display:none}:host vega-flex{flex-wrap:wrap;max-width:264px}";
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const VegaColorPicker = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.vegaChange = createEvent(this, "vegaChange", 7);
-    this.change = createEvent(this, "change", 7);
-    this.globalSlimmers = {};
-    this.formFieldController = new FormFieldControllerSlimmer({
-      propertyRules: [
-        {
-          propertyName: 'required',
-          ruleFactory: (isRequired) => (isRequired ? new RequiredFieldRule() : null),
-        },
-      ],
-      validationRulesName: 'validationRules',
-      defaultValue: '',
-      attributeGetter: (propertyName) => this[propertyName],
-      inputContainerGetter: () => this.colorPickerContainerRef,
-      touchableAreaGetter: () => [this.colorPickerTouchableAreaRef],
-    });
-    this.changeEventEmitter = createEventEmitSlimmer(VegaColorPicker, VegaChange);
-    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaColorPickerRuntimeMetricsPayloadDefinition);
-    /**
-     * Specifies the initial or preset color value of the color picker.
-     *    It is represented as a hexadecimal string.
-     *
-     * @vegaVersion 1.13.0
-     */
-    /* eslint-disable-next-line @stencil/strict-mutable */
-    this.value = '';
-    /**
-     * Displays a supplementary prompt message that assists users
-     *    in understanding the expected value for the color picker.
-     *
-     * @vegaVersion 1.13.0
-     */
-    this.hint = '';
-    /**
-     * Specifies whether the color picker element is disabled.
-     *
-     * @vegaVersion 1.13.0
-     */
-    this.disabled = false;
-    /**
-     * Specifies whether a color must be selected for
-     *    the color picker to pass form validation.
-     *
-     * @vegaVersion 1.13.0
-     */
-    this.required = false;
-    /**
-     * Specifies the label or title for the color picker.
-     *
-     * It provides descriptive text that helps identify
-     *    the purpose or content expected in the color picker.
-     *
-     * @vegaVersion 1.13.0
-     */
-    this.label = '';
-    /**
-     * Specifies the validation status of the color picker component.
-     *
-     * @vegaVersion 1.13.0
-     */
-    /* eslint-disable-next-line @stencil/strict-mutable */
-    this.isValid = null;
-    /**
-     * Determines whether automatic validation should be implemented
-     *  for the color picker when a color is selected.
-     *
-     * @vegaVersion 1.13.0
-     */
-    this.autoValidation = true;
-    /**
-     * Specifies custom validation rules for the color picker.
-     *
-     * @vegaVersion 1.13.0
-     */
-    this.validationRules = [];
-    /**
-     * Defines custom color options for the color picker.
-     *
-     * It should be an array of hexadecimal strings representing different colors.
-     *
-     * @vegaVersion 1.13.0
-     */
-    this.colors = [
-      '#73E6DC',
-      '#806BFF',
-      '#FFDC83',
-      '#FF9571',
-      '#00BBFF',
-      '#FF82C9',
-      '#259F9F',
-      '#563D82',
-    ];
-    /**
-     * Specifies whether the color picker is inline with container styles, including a border, background color, and padding.
-     *
-     * @vegaVersion 2.30.0
-     */
-    this.isInline = false;
-    this.renderColorPickerContainer = () => {
-      return (h("div", { class: arrayToClassString([!this.isInline ? 'color-picker-inline' : null]), ref: (e) => (this.colorPickerContainerRef = e) }, h("vega-flex", { direction: "row", gap: "size-8", alignItems: "center" }, this.colors.map((color) => {
-        const selected = this.value === color;
-        return (h("div", { id: color, class: { 'color-picker-inline-items': true, 'selected': selected }, ref: (e) => (this.colorPickerTouchableAreaRef = e), style: {
-            backgroundColor: color,
-          }, onClick: this.updateValueProp, role: 'button', tabIndex: 0, "aria-label": "color", onKeyDown: createEnterKeyHandlerToTriggerClick() }, selected ? (h("vega-icon", { icon: "checkmark", size: "size-16", class: {
-            'v-text-black': this.isDarkColorCheckmark(this.value),
-            'v-text-white': !this.isDarkColorCheckmark(this.value),
-          } })) : null));
-      }))));
-    };
-    this.renderHintMessage = () => {
-      return h("vega-text", null, this.hint);
-    };
-    this.updateValueProp = async (e) => {
-      if (!this.disabled) {
-        this.value = String(e.currentTarget.getAttribute('id'));
-      }
-    };
-  }
-  watchValue() {
-    this.resetValueIfInvalid();
-    this.changeEventEmitter.emit(this.value);
-    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
-      host: this.host,
-      detail: this.value,
-    });
-  }
-  watchValidationRules() {
-    methodPlaceholder();
-  }
-  connectedCallback() {
-    this.resetValueIfInvalid();
-  }
-  render() {
-    return sanitizeVegaComponent(h(Host, { class: {
-        disabled: this.disabled,
-      } }, this.renderLabelDom(), this.renderColorPickerContainer(), this.hint && this.renderHintMessage()), this.host);
-  }
-  renderLabelDom() {
-    return (h("vega-field-label", { "is-field-required": this.required, disabled: this.disabled, label: this.label }));
-  }
-  // W3C Recommendations for color contrast rules, please check the following link for more details:
-  // https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color
-  isDarkColorCheckmark(bgColor, lightColor = '#fcfcfc', darkColor = '#203645') {
-    const L = this.getLuminance(bgColor);
-    const L1 = this.getLuminance(lightColor);
-    const L2 = this.getLuminance(darkColor);
-    return L > Math.sqrt((L1 + 0.05) * (L2 + 0.05)) - 0.05;
-  }
-  getLuminance(hexColor) {
-    const r = hexToRGB(hexColor).r; // hexToR
-    const g = hexToRGB(hexColor).g; // hexToG
-    const b = hexToRGB(hexColor).b; // hexToB
-    const colors = [r / 255, g / 255, b / 255];
-    const c = colors.map((col) => col <= 0.03928 ? col / 12.92 : ((col + 0.055) / 1.055) ** 2.4);
-    return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
-  }
-  resetValueIfInvalid() {
-    const colorExistInList = this.colors.some((color) => {
-      return getHexFromShorthand(color).toUpperCase() == getHexFromShorthand(this.value).toUpperCase();
-    });
-    if (!colorExistInList) {
-      this.value = '';
-    }
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "value": ["watchValue"],
-    "validationRules": ["watchValidationRules"]
-  }; }
-};
-__decorate([
-  InjectVegaGlobalSlimmer()
-], VegaColorPicker.prototype, "globalSlimmers", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaColorPicker.prototype, "formFieldController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaColorPicker.prototype, "changeEventEmitter", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaColorPicker.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-VegaColorPicker.style = vegaColorPickerCss;
-
-export { VegaColorPicker as vega_color_picker };