@heartlandone/vega 2.82.0 → 2.84.0

package/dist/collection/components/vega-app-header-button/slimmers/renderers/vega-app-header-button-dropdown-renderer.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { h } from '@stencil/core';
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaDropdownClick, VegaDropdownHide, VegaDropdownShow, VegaReset, } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaReset, } from '../../../../helpers/event-manager/event-id/vega-event-id';
 /**
  * Renderer class for the Vega App Header Button Dropdown.
  * This class extends the VegaSlimmer and is responsible for rendering the dropdown component and managing its state and events.
@@ -31,6 +31,15 @@ export class VegaAppHeaderButtonDropdownRenderer extends VegaSlimmer {
     this.triggerResetEvent = (input) => {
       this.resetEventEmitter.emit(input.detail);
     };
+    /**
+     * emit dropdown search event when component receives a search input from the dropdown,
+     * but only if `useDefaultFilter` is set to `false`.
+     *
+     * @param {NotifyObserverPayload<string>} input the search detail
+     */
+    this.triggerSearchEvent = (input) => {
+      this.searchEventEmitter.emit(input.detail);
+    };
     /**
      * Shows the dropdown component.
      */
@@ -87,6 +96,7 @@ export class VegaAppHeaderButtonDropdownRenderer extends VegaSlimmer {
         });
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, this.triggerDropdownClickEvent);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaReset, this.triggerResetEvent);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownSearch, this.triggerSearchEvent);
       } }),
       children,
       this.renderItemsSlot()));
@@ -128,6 +138,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaAppHeaderButtonDropdownRenderer.prototype, "resetEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaAppHeaderButtonDropdownRenderer.prototype, "searchEventEmitter", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaAppHeaderButtonDropdownRenderer.prototype, "connectedCallback", null);

package/dist/collection/components/vega-app-header-button/vega-app-header-button.js

@@ -15,7 +15,7 @@ import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaClick, VegaDropdownClick, VegaReset } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaClick, VegaDropdownClick, VegaDropdownSearch, VegaReset, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaMenuArrowIconRenderer } from './slimmers/renderers/vega-menu-arrow-icon-renderer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaAppHeaderButtonDropdownRenderer } from './slimmers/renderers/vega-app-header-button-dropdown-renderer';
@@ -31,7 +31,7 @@ export class VegaAppHeaderButton {
      * @see{module:vega-app-header-button-resize-e2e}
      */
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
-    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick, VegaDropdownClick, VegaReset], () => this.dropdownRenderer.getDropdownRef(), {
+    this.dropdownEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick, VegaDropdownClick, VegaReset, VegaDropdownSearch], () => this.dropdownRenderer.getDropdownRef(), {
       customPreventHandle: (e) => {
         e.stopPropagation();
       },
@@ -39,6 +39,7 @@ export class VegaAppHeaderButton {
     this.clickEventEmitter = createEventEmitSlimmer(VegaAppHeaderButton, VegaClick);
     this.dropdownClickEventEmitter = createEventEmitSlimmer(VegaAppHeaderButton, VegaDropdownClick);
     this.resetEventEmitter = createEventEmitSlimmer(VegaAppHeaderButton, VegaReset);
+    this.searchEventEmitter = createEventEmitSlimmer(VegaAppHeaderButton, VegaDropdownSearch);
     this.vegaMenuArrowIconRenderer = new VegaMenuArrowIconRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.dropdownRenderer = new VegaAppHeaderButtonDropdownRenderer();
@@ -261,7 +262,7 @@ export class VegaAppHeaderButton {
       "mutable": false,
       "complexType": {
         "original": "VegaAppHeaderButtonDropdownConfig",
-        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: VegaEATriggerType; source?: VegaDropdownSourceItem[]; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; translocation?: ResponsiveType<TranslocationType>; virtualizationThreshold?: number; searchable?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; selectType?: \"none\" | \"single\" | \"multiple\"; resettable?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: VegaEATriggerType; source?: VegaDropdownSourceItem[]; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; translocation?: ResponsiveType<TranslocationType>; virtualizationThreshold?: number; searchable?: boolean; itemDisplayRule?: \"ellipsis\" | \"newline\"; selectType?: \"none\" | \"single\" | \"multiple\"; selectedSourceKey?: string | string[]; resettable?: boolean; useDefaultFilter?: boolean; }",
         "references": {
           "VegaAppHeaderButtonDropdownConfig": {
             "location": "import",
@@ -606,6 +607,45 @@ export class VegaAppHeaderButton {
         "resolved": "string",
         "references": {}
       }
+    }, {
+      "method": "vegaSearch",
+      "name": "vegaSearch",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.84.0"
+          }],
+        "text": "An event emitter notifying the search event in the dropdown,\n   but only if `useDefaultFilter` is set to `false`."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "dropdownSearch",
+      "name": "dropdownSearch",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.84.0"
+          }],
+        "text": "An event emitter notifying the search event in the dropdown,\n   but only if `useDefaultFilter` is set to `false`."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
@@ -631,6 +671,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaAppHeaderButton.prototype, "resetEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaAppHeaderButton.prototype, "searchEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaAppHeaderButton.prototype, "vegaMenuArrowIconRenderer", void 0);

package/dist/collection/components/vega-banner/slimmers/renderers/vega-banner-renderer.js

@@ -49,15 +49,24 @@ export class VegaBannerRenderer extends VegaSlimmer {
    * @returns {HTMLElement} the banner content element
    */
   renderBannerContent() {
+    const hasContentSlot = this.hasContentSlot();
     return (h("div", { class: {
         ['banner-content-container']: true,
-        ['linear']: !this.isMobileDevice && (!this.content || !this.bannerTitle),
+        ['linear']: !this.isMobileDevice && ((!this.content && !hasContentSlot) || !this.bannerTitle),
       } },
       this.renderBannerTitle(),
       h("div", { class: "banner-content" },
-        h("vega-font", { variant: this.isMobileDevice ? 'font-footnote1-long' : 'font-p2-short', color: this.type === 'error' ? 'text-primary' : 'text-black' }, this.content),
+        hasContentSlot ? (h("slot", { name: "content" })) : (h("vega-font", { variant: this.isMobileDevice ? 'font-footnote1-long' : 'font-p2-short', color: this.type === 'error' ? 'text-primary' : 'text-black' }, this.content)),
         this.isMobileDevice ? null : this.actionButtonRenderer.render())));
   }
+  /**
+   * Checks whether the host element contains a slotted element targeting the "content" slot.
+   *
+   * @returns {boolean} `true` if a child element with `slot="content"` exists, `false` otherwise.
+   */
+  hasContentSlot() {
+    return this.host.querySelector('[slot="content"]') !== null;
+  }
   /**
    * Get banner title element by property
    *

package/dist/collection/components/vega-banner/vega-banner.js

@@ -39,6 +39,8 @@ export class VegaBanner {
     this.bannerTitle = '';
     /**
      * Specifies the content displayed within the banner.
+     * Also supports slot-based content: place a child element with `slot="content"` inside
+     * the banner to render rich HTML content. The slot takes precedence over this property.
      *
      * @vegaVersion 2.8.0
      */
@@ -147,7 +149,7 @@ export class VegaBanner {
             "name": "vegaVersion",
             "text": "2.8.0"
           }],
-        "text": "Specifies the content displayed within the banner."
+        "text": "Specifies the content displayed within the banner.\nAlso supports slot-based content: place a child element with `slot=\"content\"` inside\nthe banner to render rich HTML content. The slot takes precedence over this property."
       },
       "attribute": "content",
       "reflect": false,

package/dist/collection/components/vega-checkbox/vega-checkbox.css

@@ -46,11 +46,16 @@
   border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
 }
 
-:host(.checked) .vega-checkbox-container > .vega-checkbox-icon {
+:host(.checked) .vega-checkbox-container > .vega-checkbox-icon,
+:host(.indeterminate) .vega-checkbox-container > .vega-checkbox-icon {
   background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
-:host(.checked) .vega-checkbox-container > .vega-checkbox-icon:hover {
+:host(.checked) .vega-checkbox-container > .vega-checkbox-icon:hover,
+:host(.indeterminate) .vega-checkbox-container > .vega-checkbox-icon:hover {
   background-color: rgba(var(--v-bg-action-hover, 4, 112, 236, 1));
 }
 
@@ -65,16 +70,11 @@
   border-color: rgba(var(--v-border-color-action-active, 29, 65, 195, 1));
 }
 
-:host(.checked) .vega-checkbox-container > .vega-checkbox-icon:active {
+:host(.checked) .vega-checkbox-container > .vega-checkbox-icon:active,
+:host(.indeterminate) .vega-checkbox-container > .vega-checkbox-icon:active {
   background-color: rgba(var(--v-bg-action-active, 29, 65, 195, 1));
 }
 
-:host(.checked) .vega-checkbox-container > .vega-checkbox-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
 :host(.disabled) .vega-checkbox-container {
   cursor: not-allowed;
 }
@@ -94,7 +94,8 @@
   border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
 }
 
-:host(.checked) .vega-checkbox-container.error > .vega-checkbox-icon {
+:host(.checked) .vega-checkbox-container.error > .vega-checkbox-icon,
+:host(.indeterminate) .vega-checkbox-container.error > .vega-checkbox-icon {
   background-color: rgba(var(--v-bg-danger, 189, 41, 71, 1));
 }
 
@@ -102,7 +103,8 @@
   border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
 }
 
-:host(.checked) .vega-checkbox-container.error > .vega-checkbox-icon:hover {
+:host(.checked) .vega-checkbox-container.error > .vega-checkbox-icon:hover,
+:host(.indeterminate) .vega-checkbox-container.error > .vega-checkbox-icon:hover {
   background-color: rgba(var(--v-bg-danger-hover, 233, 71, 104, 1));
 }
 
@@ -111,7 +113,8 @@
   outline-offset: 3px;
 }
 
-:host(.checked) .vega-checkbox-container.error > .vega-checkbox-icon:active {
+:host(.checked) .vega-checkbox-container.error > .vega-checkbox-icon:active,
+:host(.indeterminate) .vega-checkbox-container.error > .vega-checkbox-icon:active {
   background-color: rgba(var(--v-bg-danger-active, 230, 50, 87, 1));
 }
 
@@ -126,12 +129,14 @@
   border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
 }
 
-:host(.checked.disabled) .vega-checkbox-container > .vega-checkbox-icon {
+:host(.checked.disabled) .vega-checkbox-container > .vega-checkbox-icon,
+:host(.indeterminate.disabled) .vega-checkbox-container > .vega-checkbox-icon {
   background-color: rgba(var(--v-bg-disabled, 176, 180, 181, 1));
   border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
 }
 
-:host(.checked.disabled) .vega-checkbox-container > .vega-checkbox-icon > vega-icon {
+:host(.checked.disabled) .vega-checkbox-container > .vega-checkbox-icon > vega-icon,
+:host(.indeterminate.disabled) .vega-checkbox-container > .vega-checkbox-icon > vega-icon {
   color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
 }
 

package/dist/collection/components/vega-checkbox/vega-checkbox.js

@@ -87,6 +87,21 @@ export class VegaCheckbox {
      * @vegaVersion 1.0.7
      */
     this.checked = false;
+    /**
+     * Specifies whether the checkbox is in an indeterminate state.
+     *
+     * The indeterminate state is a visual-only state typically used to represent
+     *    a checkbox whose value is neither fully checked nor fully unchecked,
+     *    such as a "select all" control where only some children are selected.
+     *
+     * Setting this property does not affect the `checked` or `value` properties.
+     *    User interaction (clicking) will clear the indeterminate state and
+     *    toggle `checked` as usual.
+     *
+     * @vegaVersion 2.83.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.indeterminate = false;
     /**
      * Specifies whether the checkbox element is disabled.
      *
@@ -114,17 +129,26 @@ export class VegaCheckbox {
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.isValid = null;
     /**
-     * The below method is e2e-test covered in
+     * Indeterminate-clearing behavior is unit-tested.
+     * The checked-state side of this method is e2e-test covered in
      * @see{module:vega-checkbox-change}
      */
-    /* istanbul ignore next */
     this.onCheckBoxChange = (e) => {
+      if (this.indeterminate) {
+        this.indeterminate = false;
+      }
       this.checked = e.currentTarget.checked;
     };
     this.onSelectedIconClick = (e) => {
       e.stopPropagation();
     };
   }
+  /* The below method is e2e-test covered in
+   * @see{module:vega-checkbox-value-sync}
+   */
+  watchValueChange(newValue) {
+    this.checked = this.identifier !== '' ? newValue === this.identifier : newValue === true;
+  }
   watchCheckedChange() {
     this.initValue();
     this.changeEventEmitter.emit(this.value);
@@ -138,6 +162,13 @@ export class VegaCheckbox {
     this.unRegisterGroupDisabledObserver();
   }
   componentWillLoad() {
+    // Handle pre-set value (e.g., Angular writeValue before hydration, or HTML attribute)
+    const shouldBeChecked = this.identifier !== ''
+      ? this.value === this.identifier
+      : this.value === true || this.value === 'true';
+    if (!this.checked && shouldBeChecked) {
+      this.checked = true;
+    }
     this.initValue();
     this.initAndRegisterGroupDisabledObserver();
   }
@@ -145,6 +176,7 @@ export class VegaCheckbox {
     if (this.host.innerHTML.trim() === '') {
       this.labelElement.classList.add('vega-hidden');
     }
+    this.syncNativeIndeterminate();
   }
   /**
    * Invoke this method to set the value of the checkbox.
@@ -163,6 +195,7 @@ export class VegaCheckbox {
     return sanitizeVegaComponent(h(Host, { class: {
         'vega-flex-shrink-0 v-min-w-min': isInsideCheckboxGroup,
         'checked': this.checked,
+        'indeterminate': this.indeterminate,
         'disabled': this.isDisabled(),
       } },
       h("label", { class: arrayToClassString([
@@ -170,13 +203,16 @@ export class VegaCheckbox {
           this.showError && 'error',
           this.size && `size-${this.size}`,
         ]), ref: (e) => (this.inputContainerRef = e) },
-        h("input", { ref: (e) => (this.inputRef = e), type: "checkbox", checked: this.checked, value: this.identifier, onChange: this.onCheckBoxChange, "aria-label": this.identifier || 'No label defined', disabled: this.isDisabled(), role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }),
+        h("input", { ref: (e) => (this.inputRef = e), type: "checkbox", checked: this.checked, value: this.identifier, onChange: this.onCheckBoxChange, "aria-label": this.identifier || 'No label defined', "aria-checked": this.indeterminate ? 'mixed' : undefined, disabled: this.isDisabled(), tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }),
         h("span", { class: "vega-checkbox-icon", onClick: this.onSelectedIconClick, tabIndex: -1 }, this.renderIconDom()),
         h("div", { class: "vega-checkbox-label-container", ref: (el) => (this.labelElement = el) },
           this.renderLabelDom(),
           this.renderRequireDom()))), this.host);
   }
   renderIconDom() {
+    if (this.indeterminate) {
+      return h("vega-icon", { icon: "minus-sign", size: this.size === 'small' ? 'size-12' : 'size-16' });
+    }
     return this.checked ? (h("vega-icon", { icon: "checkmark", size: this.size === 'small' ? 'size-12' : 'size-16' })) : null;
   }
   renderLabelDom() {
@@ -191,6 +227,16 @@ export class VegaCheckbox {
   initValue() {
     this.value = this.identifier !== '' ? (this.checked ? this.identifier : '') : this.checked;
   }
+  /**
+   * Syncs the indeterminate property to the native input element.
+   * The HTML `indeterminate` attribute can only be set via JavaScript,
+   *    so it must be applied imperatively after each render.
+   */
+  syncNativeIndeterminate() {
+    if (this.inputRef) {
+      this.inputRef.indeterminate = this.indeterminate;
+    }
+  }
   /**
    * indicating whether the component is disabled or not, single checkbox will take the self disabled value and the checkbox in group will take the self disabled and group disabled value
    *
@@ -305,6 +351,27 @@ export class VegaCheckbox {
       "reflect": false,
       "defaultValue": "false"
     },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.83.0"
+          }],
+        "text": "Specifies whether the checkbox is in an indeterminate state.\n\nThe indeterminate state is a visual-only state typically used to represent\n   a checkbox whose value is neither fully checked nor fully unchecked,\n   such as a \"select all\" control where only some children are selected.\n\nSetting this property does not affect the `checked` or `value` properties.\n   User interaction (clicking) will clear the indeterminate state and\n   toggle `checked` as usual."
+      },
+      "attribute": "indeterminate",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,
@@ -460,6 +527,9 @@ export class VegaCheckbox {
   }; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "value",
+      "methodName": "watchValueChange"
+    }, {
       "propName": "checked",
       "methodName": "watchCheckedChange"
     }]; }

package/dist/collection/components/vega-color-swatch/slimmers/renderers/vega-color-swatch-renderer.js

@@ -45,8 +45,8 @@ export class VegaColorSwatchRenderer extends VegaSlimmer {
         [`size-${this.size}`]: true,
         [`shape-${this.shape}`]: true,
         'swatch-clear': isClearView,
-      }, role: "button", "aria-label": this.getAriaLabel(), "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: createEnterKeyHandlerToTriggerClick() },
-      h("div", { class: "swatch" },
+      }, role: "button", part: "swatch-container", "aria-label": this.getAriaLabel(), "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: createEnterKeyHandlerToTriggerClick({ composed: true }) },
+      h("div", { class: "swatch", part: "swatch" },
         colorExists && h("span", { class: "color-fill", style: this.getFillColorStyles() }),
         isClearView && h("span", { class: "clear-line" }),
         this.selected && !isClearView && (h("vega-icon", { class: "check-icon", icon: "checkmark", size: "size-16", color: this.getCheckMarkColor() }))),

package/dist/collection/components/vega-color-swatch/vega-color-swatch-picker/assets/hashtag.js

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M188.7 32.5c13 2.6 21.4 15.2 18.8 28.2L192.5 136h111l16.9-84.7c2.6-13 15.2-21.4 28.2-18.8s21.4 15.2 18.8 28.2L352.5 136H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H342.9L314.1 328H392c13.3 0 24 10.7 24 24s-10.7 24-24 24H304.5l-16.9 84.7c-2.6 13-15.2 21.4-28.2 18.8s-21.4-15.2-18.8-28.2L255.5 376h-111l-16.9 84.7c-2.6 13-15.2 21.4-28.2 18.8s-21.4-15.2-18.8-28.2L95.5 376H24c-13.3 0-24-10.7-24-24s10.7-24 24-24h81.1l28.8-144H56c-13.3 0-24-10.7-24-24s10.7-24 24-24h87.5l16.9-84.7c2.6-13 15.2-21.4 28.2-18.8zM182.9 184L154.1 328h111l28.8-144h-111z"/></svg>`,
+};

package/dist/collection/components/vega-color-swatch/vega-color-swatch-picker/slimmers/controllers/color-swatch-picker-color-format-controller.js

@@ -0,0 +1,64 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * Controller for handling color format in VegaColorSwatchPicker.
+ */
+export class ColorSwatchPickerColorFormatController extends VegaSlimmer {
+  /**
+   * watch the prop, update the internal color when changes.
+   */
+  updateTheColor() {
+    if (this.internalColor) {
+      this.colorSwatchPickerValueController.updateInternalColor(this.formatColor('input', this.internalColor));
+    }
+  }
+  /**
+   * Formats a color value based on the specified color stage type.
+   *
+   * @param {VegaColorStageType} colorStageType - The stage of color processing ('input' or 'output').
+   * @param {string} color - The color value to format.
+   * @returns {string} The formatted color value.
+   */
+  formatColor(colorStageType, color) {
+    if (this.inputFormatter === ColorSwatchPickerColorFormatController.DEFAULT_INPUT_FORMATTER) {
+      return this.handleHexFormat(colorStageType, color);
+    }
+    else if (typeof this.inputFormatter === 'function') {
+      return this.inputFormatter(colorStageType, color);
+    }
+    return color;
+  }
+  /**
+   * Handles the formatting of a color value when the inputFormatter is set to 'hexColorFormatter'.
+   *
+   * @param {VegaColorStageType} colorStageType The stage of color processing ('input' or 'output').
+   * @param {string} color The color value to format.
+   * @returns {string} The formatted color value.
+   */
+  handleHexFormat(colorStageType, color) {
+    if (colorStageType === 'input') {
+      return color.startsWith('#') ? color.slice(1) : color;
+    }
+    else {
+      return color.startsWith('#') ? color : color ? `#${color}` : color;
+    }
+  }
+}
+ColorSwatchPickerColorFormatController.DEFAULT_INPUT_FORMATTER = 'hexColorFormatter';
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerColorFormatController.prototype, "inputFormatter", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerColorFormatController.prototype, "internalColor", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerColorFormatController.prototype, "colorSwatchPickerValueController", void 0);
+__decorate([
+  MapToComponentMethod('watchInputFormatter')
+], ColorSwatchPickerColorFormatController.prototype, "updateTheColor", null);

package/dist/collection/components/vega-color-swatch/vega-color-swatch-picker/slimmers/controllers/color-swatch-picker-value-controller.js

@@ -0,0 +1,65 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import changeManager from '../../../../../helpers/change-manager/change-manager';
+/**
+ * Controller for managing the value state of the color swatch picker.
+ */
+export class ColorSwatchPickerValueController extends VegaSlimmer {
+  /**
+   * Update the value of the color swatch picker.
+   *
+   * @param {string} newValue - The new color value to set.
+   */
+  updateValue(newValue) {
+    this.value = newValue;
+  }
+  /**
+   * Update the internal color state of the color swatch picker.
+   *
+   * @param {string} newValue - The new internal color value to set.
+   */
+  updateInternalColor(newValue) {
+    this.internalColor = newValue;
+  }
+  /**
+   * Initializes the `internalColor` state with the initial value of the `value` prop when the component loads.
+   */
+  initializeInternalColor() {
+    this.internalColor = this.value;
+  }
+  /**
+   * Listens to changes in the `value` prop and updates the `internalColor` state accordingly.
+   */
+  listenToValueChange() {
+    this.internalColor = this.value;
+    this.changeEventEmitter.emit(this.value);
+    changeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: this.value,
+    });
+  }
+}
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerValueController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], ColorSwatchPickerValueController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], ColorSwatchPickerValueController.prototype, "internalColor", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchPickerValueController.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], ColorSwatchPickerValueController.prototype, "initializeInternalColor", null);
+__decorate([
+  MapToComponentMethod('watchValue')
+], ColorSwatchPickerValueController.prototype, "listenToValueChange", null);

package/dist/collection/components/vega-color-swatch/vega-color-swatch-picker/slimmers/renderers/color-swatch-grid-renderer.js

@@ -0,0 +1,59 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { h } from '@stencil/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+/**
+ * Renderer for the color swatch list in the color swatch picker popover.
+ */
+export class ColorSwatchGridRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Handle for adding click listener to each color swatch in the grid.
+     *
+     * @param {HTMLVegaColorSwatchElement} el - The color swatch element.
+     */
+    this.handleColorSwatchClick = (el) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaClick, () => {
+        const color = el.color;
+        this.colorSwatchPickerValueController.updateInternalColor(color);
+      });
+    };
+  }
+  render() {
+    return (h("vega-grid", { column: this.swatchGridColumns, justifyItems: "start", gap: "size-8", style: { width: 'max-content' } }, this.colors.map((color) => {
+      return (h("vega-color-swatch", { ref: this.handleColorSwatchClick, selected: this.isColorMatched(this.internalColor, color), color: color, size: "extra-small" }));
+    })));
+  }
+  /**
+   * Checks if two colors match, ignoring case.
+   *
+   * @param {Nullable<string>} color1 - The first color to compare.
+   * @param {Nullable<string>} color2 - The second color to compare.
+   * @returns {boolean} True if the colors match, false otherwise.
+   */
+  isColorMatched(color1, color2) {
+    if (color1 && color2) {
+      return color1.toLowerCase() === color2.toLowerCase();
+    }
+    return color1 === color2;
+  }
+}
+__decorate([
+  MapToComponentField()
+], ColorSwatchGridRenderer.prototype, "colors", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchGridRenderer.prototype, "internalColor", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchGridRenderer.prototype, "swatchGridColumns", void 0);
+__decorate([
+  MapToComponentField()
+], ColorSwatchGridRenderer.prototype, "colorSwatchPickerValueController", void 0);