@redvars/peacock 3.8.1 → 3.8.3

package/dist/card-content.js

@@ -1,4 +1,4 @@
-import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, b } from './IndividualComponent-DUINtMGK.js';
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
 
 /**
  * @label Card Content

package/dist/card.js

@@ -1,11 +1,14 @@
-import { a as i, i as i$1, A, c as __classPrivateFieldGet, b, _ as __decorate, I as IndividualComponent } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
-import { r } from './state-DwbEjqVk.js';
-import { e as e$1 } from './query-QBcUV-L_.js';
-import { e } from './class-map-YU7g0o3B.js';
+import { i, a as i$1, A, c as __classPrivateFieldGet, b, _ as __decorate, I as IndividualComponent } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e as e$1 } from './query-CHb9Ft_d.js';
+import { e } from './class-map-DG7CA1et.js';
 import { i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
-import { N as NativeHyperlinkMixin, t as throttle, i as isLink } from './NativeHyperlinkMixin-DrYXyfMQ.js';
-import { o as observerSlotChangesWithCallback } from './observe-slot-change-D8Xg-kSS.js';
+import { i as isLink } from './is-link-Dk2OV3PM.js';
+import { o as observerSlotChangesWithCallback } from './observe-slot-change-DPxaZrZF.js';
+import { t as throttle } from './throttle-C7ZAPqtu.js';
+import { N as NativeHyperlinkMixin } from './NativeHyperlinkMixin-D9J4aBTy.js';
+import './base-Cl6v8-BZ.js';
 import './directive-ZPhl09Yt.js';
 
 var css_248z$1 = i`* {
@@ -16,6 +19,10 @@ var css_248z$1 = i`* {
   display: none !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 :host {
   position: relative;
   display: block;
@@ -26,10 +33,22 @@ var css_248z$1 = i`* {
   --card-container-shape-start-end: unset;
   --card-container-shape-end-start: unset;
   --card-container-shape-end-end: unset;
-  --_container-shape-start-start: var(--card-container-shape-start-start, var(--card-container-shape));
-  --_container-shape-start-end: var(--card-container-shape-start-end, var(--card-container-shape));
-  --_container-shape-end-start: var(--card-container-shape-end-start, var(--card-container-shape));
-  --_container-shape-end-end: var(--card-container-shape-end-end, var(--card-container-shape));
+  --_container-shape-start-start: var(
+    --card-container-shape-start-start,
+    var(--card-container-shape)
+  );
+  --_container-shape-start-end: var(
+    --card-container-shape-start-end,
+    var(--card-container-shape)
+  );
+  --_container-shape-end-start: var(
+    --card-container-shape-end-start,
+    var(--card-container-shape)
+  );
+  --_container-shape-end-end: var(
+    --card-container-shape-end-end,
+    var(--card-container-shape)
+  );
 }
 
 /*
@@ -144,11 +163,14 @@ var css_248z$1 = i`* {
   corner-shape: var(--_container-corner-shape-variant);
 }
 
-:host([actionable]) .focus-ring,
-:host([actionable]) .ripple {
+:host([actionable]:not([disabled])) .focus-ring,
+:host([actionable]:not([disabled])) .ripple,
+:host([href]) .focus-ring,
+:host([href]) .ripple {
   display: block;
 }
-:host([actionable]) .card-content {
+:host([actionable]:not([disabled])) .card-content,
+:host([href]) .card-content {
   pointer-events: none;
 }
 
@@ -162,7 +184,7 @@ var css_248z$1 = i`* {
   --_container-elevation-level: 2;
   --_container-state-opacity: 0.08;
 }
-:host([variant=elevated]):has(.card.pressed):not([disabled]) {
+:host([variant=elevated]):active:not([disabled]) {
   --_container-elevation-level: 1;
   --_container-state-opacity: 0.12;
 }
@@ -185,7 +207,7 @@ var css_248z$1 = i`* {
   --_container-elevation-level: 1;
   --_container-state-opacity: 0.08;
 }
-:host([variant=filled]):has(.card.pressed):not([disabled]) {
+:host([variant=filled]):active:not([disabled]) {
   --_container-elevation-level: 0;
   --_container-state-opacity: 0.1;
 }
@@ -211,7 +233,7 @@ var css_248z$1 = i`* {
 :host([variant=outlined]):hover:not([disabled]) {
   --_container-state-opacity: 0.08;
 }
-:host([variant=outlined]):has(.card.pressed):not([disabled]) {
+:host([variant=outlined]):active:not([disabled]) {
   --_container-state-opacity: 0.12;
 }
 :host([variant=outlined])[disabled] {
@@ -238,7 +260,7 @@ var _Card_id, _Card_tabindex;
  * @label Card
  * @tag wc-card
  * @rawTag card
- * @summary A Material 3 inspired card surface for grouping related content.
+ * @summary A card surface for grouping related content.
  * @cssprop --card-padding - Inner padding for the card container. Defaults to 1rem.
  * @cssprop --card-shape - Corner radius for the card container. Defaults to a large radius.
  * @cssprop --card-gap - Gap between slotted children.
@@ -255,7 +277,7 @@ var _Card_id, _Card_tabindex;
  */
 let Card = class Card extends NativeHyperlinkMixin(i$1) {
     constructor() {
-        super(...arguments);
+        super();
         _Card_id.set(this, crypto.randomUUID());
         this.variant = 'elevated';
         this.disabled = false;
@@ -264,14 +286,9 @@ let Card = class Card extends NativeHyperlinkMixin(i$1) {
          * If button is disabled, the reason why it is disabled.
          */
         this.disabledReason = '';
-        /**
-         * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
-         */
-        this.throttleDelay = 200;
         /**
          * States
          */
-        this.isPressed = false;
         this.slotHasContent = false;
         _Card_tabindex.set(this, 0);
         this.__dispatchClickWithThrottle = event => {
@@ -292,24 +309,12 @@ let Card = class Card extends NativeHyperlinkMixin(i$1) {
             this.focus();
             dispatchActivationClick(this.cardElement);
         };
-        this.__handlePress = (event) => {
-            if (this.disabled)
-                return;
-            if (event instanceof KeyboardEvent &&
-                event.type === 'keydown' &&
-                (event.key === 'Enter' || event.key === ' ')) {
-                this.isPressed = true;
-            }
-            else if (event.type === 'mousedown') {
-                this.isPressed = true;
-            }
-            else {
-                this.isPressed = false;
-            }
-        };
+        this.addEventListener('click', this.__dispatchClickWithThrottle);
     }
     firstUpdated() {
-        this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
+        if (typeof this.throttleDelay === 'number') {
+            this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
+        }
         observerSlotChangesWithCallback(this.renderRoot.querySelector('slot'), hasContent => {
             this.slotHasContent = hasContent;
             this.requestUpdate();
@@ -353,7 +358,6 @@ let Card = class Card extends NativeHyperlinkMixin(i$1) {
             [`variant-${this.variant}`]: true,
             actionable: (this.actionable && !this.disabled) || isLinkElement,
             disabled: this.disabled,
-            pressed: this.isPressed,
             'has-content': this.slotHasContent,
         };
         if (!this.actionable && !isLinkElement) {
@@ -366,10 +370,6 @@ let Card = class Card extends NativeHyperlinkMixin(i$1) {
         class=${e(cssClasses)}
         id="card"
         tabindex=${__classPrivateFieldGet(this, _Card_tabindex, "f")}
-        @click=${this.__dispatchClickWithThrottle}
-        @mousedown=${this.__handlePress}
-        @keydown=${this.__handlePress}
-        @keyup=${this.__handlePress}
         ?aria-describedby=${this.__getDisabledReasonID()}
         aria-disabled=${`${this.disabled}`}
         ?disabled=${this.disabled}
@@ -383,10 +383,6 @@ let Card = class Card extends NativeHyperlinkMixin(i$1) {
       tabindex=${__classPrivateFieldGet(this, _Card_tabindex, "f")}
       href=${this.href}
       target=${this.target}
-      @click=${this.__dispatchClickWithThrottle}
-      @mousedown=${this.__handlePress}
-      @keydown=${this.__handlePress}
-      @keyup=${this.__handlePress}
       role="button"
       ?aria-describedby=${this.__getDisabledReasonID()}
       aria-disabled=${`${this.disabled}`}
@@ -422,9 +418,6 @@ __decorate([
 __decorate([
     n()
 ], Card.prototype, "throttleDelay", void 0);
-__decorate([
-    r()
-], Card.prototype, "isPressed", void 0);
 __decorate([
     r()
 ], Card.prototype, "slotHasContent", void 0);

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../src/card/card.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '../__utils/dispatch-event-utils.js';\nimport { isLink } from '@/__utils/is-link.js';\nimport { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';\nimport { throttle } from '@/__utils/throttle.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './card.scss';\nimport colorStyles from './card-colors.scss';\nimport NativeHyperlinkMixin from '@/__mixins/NativeHyperlinkMixin.js';\n\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * @label Card\n * @tag wc-card\n * @rawTag card\n * @summary A Material 3 inspired card surface for grouping related content.\n * @cssprop --card-padding - Inner padding for the card container. Defaults to 1rem.\n * @cssprop --card-shape - Corner radius for the card container. Defaults to a large radius.\n * @cssprop --card-gap - Gap between slotted children.\n *\n * @example\n * ```html\n * <wc-card variant=\"outlined\" style=\"padding-block: 1rem;\">\n *   <wc-card-content>\n *     <h3 class=\"text-headline\">Title</h3>\n *     <p class=\"text-body\">Supportive text</p>\n *   </wc-card-content>\n * </wc-card>\n * ```\n */\n@IndividualComponent\nexport class Card extends NativeHyperlinkMixin(LitElement) {\n  static styles = [styles, colorStyles];\n\n  #id = crypto.randomUUID();\n\n  @property({ type: String, reflect: true })\n  variant: CardVariant = 'elevated';\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  actionable: boolean = false;\n\n  /**\n   * If button is disabled, the reason why it is disabled.\n   */\n  @property({ attribute: 'disabled-reason' })\n  disabledReason: string = '';\n\n  /**\n   * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.\n   */\n  @property() throttleDelay = 200;\n\n  /**\n   * States\n   */\n  @state()\n  isPressed = false;\n\n  @state()\n  private slotHasContent = false;\n\n  @query('.card') readonly cardElement!: HTMLElement | null;\n\n  #tabindex?: number = 0;\n\n  override firstUpdated() {\n    this.__dispatchClickWithThrottle = throttle(\n      this.__dispatchClick,\n      this.throttleDelay,\n    );\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =\n    event => {\n      this.__dispatchClick(event);\n    };\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    // If the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.disabled && this.href) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.cardElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.cardElement);\n  };\n\n  __getDisabledReasonID() {\n    return this.disabled && this.disabledReason\n      ? `disabled-reason-${this.#id}`\n      : nothing;\n  }\n\n  __renderDisabledReason() {\n    const disabledReasonID = this.__getDisabledReasonID();\n    if (disabledReasonID)\n      return html`<div\n        id=\"disabled-reason-${this.#id}\"\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        ${this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  __handlePress = (event: KeyboardEvent | MouseEvent) => {\n    if (this.disabled) return;\n    if (\n      event instanceof KeyboardEvent &&\n      event.type === 'keydown' &&\n      (event.key === 'Enter' || event.key === ' ')\n    ) {\n      this.isPressed = true;\n    } else if (event.type === 'mousedown') {\n      this.isPressed = true;\n    } else {\n      this.isPressed = false;\n    }\n  };\n\n  render() {\n    const isLinkElement = isLink(this);\n    const disableSlotTabbing = this.actionable || isLinkElement;\n\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"card\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\" for=\"card\"></wc-ripple>\n\n      ${this.renderCardElement(isLinkElement, disableSlotTabbing)}\n    `;\n  }\n\n  renderCardElement(isLinkElement: boolean, disableSlotTabbing: boolean) {\n    const cssClasses = {\n      card: true,\n      'card-element': true,\n      [`variant-${this.variant}`]: true,\n      actionable: (this.actionable && !this.disabled) || isLinkElement,\n      disabled: this.disabled,\n      pressed: this.isPressed,\n      'has-content': this.slotHasContent,\n    };\n\n    if (!this.actionable && !isLinkElement) {\n      return html`<div class=${classMap(cssClasses)} id=\"card\">\n        ${this.renderCardContent(disableSlotTabbing)}\n      </div>`;\n    }\n\n    if (!isLinkElement) {\n      return html`<button\n        class=${classMap(cssClasses)}\n        id=\"card\"\n        tabindex=${this.#tabindex}\n        @click=${this.__dispatchClickWithThrottle}\n        @mousedown=${this.__handlePress}\n        @keydown=${this.__handlePress}\n        @keyup=${this.__handlePress}\n        ?aria-describedby=${this.__getDisabledReasonID()}\n        aria-disabled=${`${this.disabled}`}\n        ?disabled=${this.disabled}\n      >\n        ${this.renderCardContent(disableSlotTabbing)}\n      </button>`;\n    }\n    return html`<a\n      class=${classMap(cssClasses)}\n      id=\"card\"\n      tabindex=${this.#tabindex}\n      href=${this.href}\n      target=${this.target}\n      @click=${this.__dispatchClickWithThrottle}\n      @mousedown=${this.__handlePress}\n      @keydown=${this.__handlePress}\n      @keyup=${this.__handlePress}\n      role=\"button\"\n      ?aria-describedby=${this.__getDisabledReasonID()}\n      aria-disabled=${`${this.disabled}`}\n    >\n      ${this.renderCardContent(disableSlotTabbing)}\n    </a>`;\n  }\n\n  renderCardContent(disableSlotTabbing: boolean) {\n    return html`\n      <div class=\"card-content\">\n        <div class=\"slot-container\" ?inert=${disableSlotTabbing}>\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","colorStyles","property","state","query"],"mappings":"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"}
+{"version":3,"file":"card.js","sources":["../../src/card/card.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '../__internal/utils/dispatch-event-utils.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\nimport { throttle } from '@/__internal/utils/throttle.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './card.scss';\nimport colorStyles from './card-colors.scss';\nimport NativeHyperlinkMixin from '@/__internal/mixins/NativeHyperlinkMixin.js';\n\ntype CardVariant = 'elevated' | 'filled' | 'outlined';\n\n/**\n * @label Card\n * @tag wc-card\n * @rawTag card\n * @summary A card surface for grouping related content.\n * @cssprop --card-padding - Inner padding for the card container. Defaults to 1rem.\n * @cssprop --card-shape - Corner radius for the card container. Defaults to a large radius.\n * @cssprop --card-gap - Gap between slotted children.\n *\n * @example\n * ```html\n * <wc-card variant=\"outlined\" style=\"padding-block: 1rem;\">\n *   <wc-card-content>\n *     <h3 class=\"text-headline\">Title</h3>\n *     <p class=\"text-body\">Supportive text</p>\n *   </wc-card-content>\n * </wc-card>\n * ```\n */\n@IndividualComponent\nexport class Card extends NativeHyperlinkMixin(LitElement) {\n  static styles = [styles, colorStyles];\n\n  #id = crypto.randomUUID();\n\n  @property({ type: String, reflect: true })\n  variant: CardVariant = 'elevated';\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  @property({ type: Boolean, reflect: true })\n  actionable: boolean = false;\n\n  /**\n   * If button is disabled, the reason why it is disabled.\n   */\n  @property({ attribute: 'disabled-reason' })\n  disabledReason: string = '';\n\n  /**\n   * Sets the delay for throttle in milliseconds. When null (default), no throttle is applied.\n   */\n  @property() throttleDelay?: number;\n\n  /**\n   * States\n   */\n  @state()\n  private slotHasContent = false;\n\n  @query('.card') readonly cardElement!: HTMLElement | null;\n\n  #tabindex?: number = 0;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  override firstUpdated() {\n    if (typeof this.throttleDelay === 'number') {\n      this.__dispatchClickWithThrottle = throttle(\n        this.__dispatchClick,\n        this.throttleDelay,\n      );\n    }\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot'),\n      hasContent => {\n        this.slotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =\n    event => {\n      this.__dispatchClick(event);\n    };\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    // If the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.disabled && this.href) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.cardElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.cardElement);\n  };\n\n  __getDisabledReasonID() {\n    return this.disabled && this.disabledReason\n      ? `disabled-reason-${this.#id}`\n      : nothing;\n  }\n\n  __renderDisabledReason() {\n    const disabledReasonID = this.__getDisabledReasonID();\n    if (disabledReasonID)\n      return html`<div\n        id=\"disabled-reason-${this.#id}\"\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        ${this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  render() {\n    const isLinkElement = isLink(this);\n    const disableSlotTabbing = this.actionable || isLinkElement;\n\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"card\"></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      <div class=\"background\"></div>\n      <div class=\"outline\"></div>\n      <wc-ripple class=\"ripple\" for=\"card\"></wc-ripple>\n\n      ${this.renderCardElement(isLinkElement, disableSlotTabbing)}\n    `;\n  }\n\n  renderCardElement(isLinkElement: boolean, disableSlotTabbing: boolean) {\n    const cssClasses = {\n      card: true,\n      'card-element': true,\n      [`variant-${this.variant}`]: true,\n      actionable: (this.actionable && !this.disabled) || isLinkElement,\n      disabled: this.disabled,\n      'has-content': this.slotHasContent,\n    };\n\n    if (!this.actionable && !isLinkElement) {\n      return html`<div class=${classMap(cssClasses)} id=\"card\">\n        ${this.renderCardContent(disableSlotTabbing)}\n      </div>`;\n    }\n\n    if (!isLinkElement) {\n      return html`<button\n        class=${classMap(cssClasses)}\n        id=\"card\"\n        tabindex=${this.#tabindex}\n        ?aria-describedby=${this.__getDisabledReasonID()}\n        aria-disabled=${`${this.disabled}`}\n        ?disabled=${this.disabled}\n      >\n        ${this.renderCardContent(disableSlotTabbing)}\n      </button>`;\n    }\n    return html`<a\n      class=${classMap(cssClasses)}\n      id=\"card\"\n      tabindex=${this.#tabindex}\n      href=${this.href}\n      target=${this.target}\n      role=\"button\"\n      ?aria-describedby=${this.__getDisabledReasonID()}\n      aria-disabled=${`${this.disabled}`}\n    >\n      ${this.renderCardContent(disableSlotTabbing)}\n    </a>`;\n  }\n\n  renderCardContent(disableSlotTabbing: boolean) {\n    return html`\n      <div class=\"card-content\">\n        <div class=\"slot-container\" ?inert=${disableSlotTabbing}>\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","colorStyles","property","state","query"],"mappings":"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"}

package/dist/cb-compound-expression.js

@@ -1,5 +1,5 @@
-import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, A, b } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, A, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
@@ -9,6 +9,10 @@ var css_248z = i`* {
   display: none !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 :host {
   display: block;
 }

package/dist/cb-compound-expression.js.map

@@ -1 +1 @@
-{"version":3,"file":"cb-compound-expression.js","sources":["../../src/condition-builder/cb-compound-expression.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './cb-compound-expression.scss';\n\n/**\n * @label CB Compound Expression\n * @tag wc-cb-compound-expression\n * @rawTag cb-compound-expression\n * @summary A compound expression group in a condition builder that displays a field label, an optional condition operator divider, and slots for child expressions.\n * @tags condition-builder\n *\n * @example\n * ```html\n * <wc-cb-compound-expression field-label=\"Age\" condition-operator=\"or\">\n *   <wc-cb-expression>\n *     <wc-input placeholder=\"Enter value\"></wc-input>\n *   </wc-cb-expression>\n * </wc-cb-compound-expression>\n * ```\n */\n@IndividualComponent\nexport class CbCompoundExpression extends LitElement {\n  static styles = [styles];\n\n  /** The logical operator joining conditions in this group ('and' or 'or'). */\n  @property({ type: String, attribute: 'condition-operator', reflect: true })\n  conditionOperator?: 'and' | 'or';\n\n  /** The field name for the compound expression. */\n  @property({ type: String, attribute: 'field-name' })\n  fieldName = '';\n\n  /** The display label for the field. */\n  @property({ type: String, attribute: 'field-label' })\n  fieldLabel = '';\n\n  override updated() {\n    this.__adjustSlotEndPadding();\n  }\n\n  private __adjustSlotEndPadding() {\n    const slotEnd = this.renderRoot.querySelector<HTMLElement>('.slot-end');\n    const fieldNameContainer =\n      this.renderRoot.querySelector<HTMLElement>('.field-name-container');\n    if (slotEnd && fieldNameContainer) {\n      slotEnd.style.paddingInlineStart =\n        fieldNameContainer.getBoundingClientRect().width + 'px';\n    }\n  }\n\n  private __renderOperatorDivider() {\n    if (!this.conditionOperator) return nothing;\n    return html`\n      <wc-cb-divider connect-end>\n        <wc-tag color=\"yellow\" size=\"sm\">${this.conditionOperator}</wc-tag>\n      </wc-cb-divider>\n    `;\n  }\n\n  render() {\n    return html`\n      <div class=\"compound-expression\" field-name=${this.fieldName}>\n        <div class=\"field-name-container\">\n          <span class=\"field-label\">${this.fieldLabel}</span>\n          <div class=\"field-compound-type\">\n            ${this.__renderOperatorDivider()}\n          </div>\n        </div>\n        <div class=\"conditions\">\n          <slot></slot>\n        </div>\n      </div>\n      <div class=\"slot-end\">\n        <slot name=\"end\"></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;;;AAeG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQA,GAAU,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QASL,IAAA,CAAA,SAAS,GAAG,EAAE;;QAId,IAAA,CAAA,UAAU,GAAG,EAAE;IA2CjB;IAzCW,OAAO,GAAA;QACd,IAAI,CAAC,sBAAsB,EAAE;IAC/B;IAEQ,sBAAsB,GAAA;QAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,WAAW,CAAC;QACvE,MAAM,kBAAkB,GACtB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,uBAAuB,CAAC;AACrE,QAAA,IAAI,OAAO,IAAI,kBAAkB,EAAE;YACjC,OAAO,CAAC,KAAK,CAAC,kBAAkB;AAC9B,gBAAA,kBAAkB,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,IAAI;QAC3D;IACF;IAEQ,uBAAuB,GAAA;QAC7B,IAAI,CAAC,IAAI,CAAC,iBAAiB;AAAE,YAAA,OAAOC,CAAO;AAC3C,QAAA,OAAOC,CAAI,CAAA;;AAE4B,yCAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;KAE5D;IACH;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOA,CAAI,CAAA;AACqC,kDAAA,EAAA,IAAI,CAAC,SAAS,CAAA;;AAE5B,oCAAA,EAAA,IAAI,CAAC,UAAU,CAAA;;cAEvC,IAAI,CAAC,uBAAuB,EAAE;;;;;;;;;;KAUvC;IACH;;AAtDO,oBAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIxB,UAAA,CAAA;AADC,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,OAAO,EAAE,IAAI,EAAE;AACzC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,MAAA,CAAA;AAIjC,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE;AACpC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAIf,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE;AACpC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAbL,oBAAoB,GAAA,UAAA,CAAA;IADhC;AACY,CAAA,EAAA,oBAAoB,CAwDhC;;;;"}
+{"version":3,"file":"cb-compound-expression.js","sources":["../../src/condition-builder/cb-compound-expression.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './cb-compound-expression.scss';\n\n/**\n * @label CB Compound Expression\n * @tag wc-cb-compound-expression\n * @rawTag cb-compound-expression\n * @summary A compound expression group in a condition builder that displays a field label, an optional condition operator divider, and slots for child expressions.\n * @tags condition-builder\n *\n * @example\n * ```html\n * <wc-cb-compound-expression field-label=\"Age\" condition-operator=\"or\">\n *   <wc-cb-expression>\n *     <wc-input placeholder=\"Enter value\"></wc-input>\n *   </wc-cb-expression>\n * </wc-cb-compound-expression>\n * ```\n */\n@IndividualComponent\nexport class CbCompoundExpression extends LitElement {\n  static styles = [styles];\n\n  /** The logical operator joining conditions in this group ('and' or 'or'). */\n  @property({ type: String, attribute: 'condition-operator', reflect: true })\n  conditionOperator?: 'and' | 'or';\n\n  /** The field name for the compound expression. */\n  @property({ type: String, attribute: 'field-name' })\n  fieldName = '';\n\n  /** The display label for the field. */\n  @property({ type: String, attribute: 'field-label' })\n  fieldLabel = '';\n\n  override updated() {\n    this.__adjustSlotEndPadding();\n  }\n\n  private __adjustSlotEndPadding() {\n    const slotEnd = this.renderRoot.querySelector<HTMLElement>('.slot-end');\n    const fieldNameContainer =\n      this.renderRoot.querySelector<HTMLElement>('.field-name-container');\n    if (slotEnd && fieldNameContainer) {\n      slotEnd.style.paddingInlineStart =\n        fieldNameContainer.getBoundingClientRect().width + 'px';\n    }\n  }\n\n  private __renderOperatorDivider() {\n    if (!this.conditionOperator) return nothing;\n    return html`\n      <wc-cb-divider connect-end>\n        <wc-tag color=\"yellow\" size=\"sm\">${this.conditionOperator}</wc-tag>\n      </wc-cb-divider>\n    `;\n  }\n\n  render() {\n    return html`\n      <div class=\"compound-expression\" field-name=${this.fieldName}>\n        <div class=\"field-name-container\">\n          <span class=\"field-label\">${this.fieldLabel}</span>\n          <div class=\"field-compound-type\">\n            ${this.__renderOperatorDivider()}\n          </div>\n        </div>\n        <div class=\"conditions\">\n          <slot></slot>\n        </div>\n      </div>\n      <div class=\"slot-end\">\n        <slot name=\"end\"></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;;;AAeG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQA,GAAU,CAAA;AAA7C,IAAA,WAAA,GAAA;;;QASL,IAAA,CAAA,SAAS,GAAG,EAAE;;QAId,IAAA,CAAA,UAAU,GAAG,EAAE;IA2CjB;IAzCW,OAAO,GAAA;QACd,IAAI,CAAC,sBAAsB,EAAE;IAC/B;IAEQ,sBAAsB,GAAA;QAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,WAAW,CAAC;QACvE,MAAM,kBAAkB,GACtB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,uBAAuB,CAAC;AACrE,QAAA,IAAI,OAAO,IAAI,kBAAkB,EAAE;YACjC,OAAO,CAAC,KAAK,CAAC,kBAAkB;AAC9B,gBAAA,kBAAkB,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,IAAI;QAC3D;IACF;IAEQ,uBAAuB,GAAA;QAC7B,IAAI,CAAC,IAAI,CAAC,iBAAiB;AAAE,YAAA,OAAOC,CAAO;AAC3C,QAAA,OAAOC,CAAI,CAAA;;AAE4B,yCAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;KAE5D;IACH;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOA,CAAI,CAAA;AACqC,kDAAA,EAAA,IAAI,CAAC,SAAS,CAAA;;AAE5B,oCAAA,EAAA,IAAI,CAAC,UAAU,CAAA;;cAEvC,IAAI,CAAC,uBAAuB,EAAE;;;;;;;;;;KAUvC;IACH;;AAtDO,oBAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIxB,UAAA,CAAA;AADC,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,OAAO,EAAE,IAAI,EAAE;AACzC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,MAAA,CAAA;AAIjC,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE;AACpC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAIf,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,EAAE;AACpC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAbL,oBAAoB,GAAA,UAAA,CAAA;IADhC;AACY,CAAA,EAAA,oBAAoB,CAwDhC;;;;"}

package/dist/cb-divider.js

@@ -1,6 +1,6 @@
-import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, b } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
-import { e } from './class-map-YU7g0o3B.js';
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { e } from './class-map-DG7CA1et.js';
 import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
@@ -11,6 +11,10 @@ var css_248z = i`* {
   display: none !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 :host {
   display: block;
   height: 100%;

package/dist/cb-divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"cb-divider.js","sources":["../../src/condition-builder/cb-divider.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './cb-divider.scss';\n\n/**\n * @label CB Divider\n * @tag wc-cb-divider\n * @rawTag cb-divider\n * @summary A divider line used within a condition builder to visually connect expressions with operator tags.\n * @tags condition-builder\n *\n * @example\n * ```html\n * <wc-cb-divider>\n *   <wc-tag color=\"green\">and</wc-tag>\n * </wc-cb-divider>\n * ```\n */\n@IndividualComponent\nexport class CbDivider extends LitElement {\n  static styles = [styles];\n\n  /** Whether to render the divider vertically instead of horizontally. */\n  @property({ type: Boolean, reflect: true })\n  vertical = false;\n\n  /** Whether to render a connecting line at the start. */\n  @property({ type: Boolean, reflect: true, attribute: 'connect-start' })\n  connectStart = false;\n\n  /** Whether to render a connecting line at the end. */\n  @property({ type: Boolean, reflect: true, attribute: 'connect-end' })\n  connectEnd = false;\n\n  render() {\n    const classes = {\n      divider: true,\n      'connect-start': this.connectStart,\n      'connect-end': this.connectEnd,\n      vertical: this.vertical,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        <div class=\"line line-start\"></div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n        <div class=\"line line-end\"></div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;AAaG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQA,GAAU,CAAA;AAAlC,IAAA,WAAA,GAAA;;;QAKL,IAAA,CAAA,QAAQ,GAAG,KAAK;;QAIhB,IAAA,CAAA,YAAY,GAAG,KAAK;;QAIpB,IAAA,CAAA,UAAU,GAAG,KAAK;IAoBpB;IAlBE,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,IAAI,CAAC,YAAY;YAClC,aAAa,EAAE,IAAI,CAAC,UAAU;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;AAED,QAAA,OAAOC,CAAI,CAAA;mBACIC,CAAQ,CAAC,OAAO,CAAC,CAAA;;;;;;;KAO/B;IACH;;AA/BO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AACzB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAIjB,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE;AACjD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,cAAA,EAAA,MAAA,CAAA;AAIrB,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE;AACjD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAbR,SAAS,GAAA,UAAA,CAAA;IADrB;AACY,CAAA,EAAA,SAAS,CAiCrB;;;;"}
+{"version":3,"file":"cb-divider.js","sources":["../../src/condition-builder/cb-divider.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './cb-divider.scss';\n\n/**\n * @label CB Divider\n * @tag wc-cb-divider\n * @rawTag cb-divider\n * @summary A divider line used within a condition builder to visually connect expressions with operator tags.\n * @tags condition-builder\n *\n * @example\n * ```html\n * <wc-cb-divider>\n *   <wc-tag color=\"green\">and</wc-tag>\n * </wc-cb-divider>\n * ```\n */\n@IndividualComponent\nexport class CbDivider extends LitElement {\n  static styles = [styles];\n\n  /** Whether to render the divider vertically instead of horizontally. */\n  @property({ type: Boolean, reflect: true })\n  vertical = false;\n\n  /** Whether to render a connecting line at the start. */\n  @property({ type: Boolean, reflect: true, attribute: 'connect-start' })\n  connectStart = false;\n\n  /** Whether to render a connecting line at the end. */\n  @property({ type: Boolean, reflect: true, attribute: 'connect-end' })\n  connectEnd = false;\n\n  render() {\n    const classes = {\n      divider: true,\n      'connect-start': this.connectStart,\n      'connect-end': this.connectEnd,\n      vertical: this.vertical,\n    };\n\n    return html`\n      <div class=${classMap(classes)}>\n        <div class=\"line line-start\"></div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n        <div class=\"line line-end\"></div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;AAaG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQA,GAAU,CAAA;AAAlC,IAAA,WAAA,GAAA;;;QAKL,IAAA,CAAA,QAAQ,GAAG,KAAK;;QAIhB,IAAA,CAAA,YAAY,GAAG,KAAK;;QAIpB,IAAA,CAAA,UAAU,GAAG,KAAK;IAoBpB;IAlBE,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,OAAO,EAAE,IAAI;YACb,eAAe,EAAE,IAAI,CAAC,YAAY;YAClC,aAAa,EAAE,IAAI,CAAC,UAAU;YAC9B,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;AAED,QAAA,OAAOC,CAAI,CAAA;mBACIC,CAAQ,CAAC,OAAO,CAAC,CAAA;;;;;;;KAO/B;IACH;;AA/BO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AACzB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAIjB,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE;AACjD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,cAAA,EAAA,MAAA,CAAA;AAIrB,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,aAAa,EAAE;AACjD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAbR,SAAS,GAAA,UAAA,CAAA;IADrB;AACY,CAAA,EAAA,SAAS,CAiCrB;;;;"}

package/dist/cb-expression.js

@@ -1,5 +1,5 @@
-import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, b } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
 
 var css_248z = i`* {
   box-sizing: border-box;
@@ -9,6 +9,10 @@ var css_248z = i`* {
   display: none !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 :host {
   display: block;
 }

package/dist/cb-expression.js.map

@@ -1 +1 @@
-{"version":3,"file":"cb-expression.js","sources":["../../src/condition-builder/cb-expression.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './cb-expression.scss';\n\n/**\n * @label CB Expression\n * @tag wc-cb-expression\n * @rawTag cb-expression\n * @summary An expression row within a condition builder, containing an operator select and a slot for value inputs.\n * @tags condition-builder\n *\n * @example\n * ```html\n * <wc-cb-expression>\n *   <wc-input placeholder=\"Enter value\"></wc-input>\n * </wc-cb-expression>\n * ```\n */\n@IndividualComponent\nexport class CbExpression extends LitElement {\n  static styles = [styles];\n\n  /**\n   * The list of operator options to display in the operator select.\n   * Each item should have at least `label` and `value` properties.\n   */\n  @property({ type: Array })\n  operators: { label: string; value: string; icon?: string }[] = [];\n\n  /** The currently selected operator value. */\n  @property({ type: String, attribute: 'operator-value' })\n  operatorValue = '';\n\n  render() {\n    return html`\n      <div class=\"expression\">\n        <wc-select\n          inline\n          .value=${this.operatorValue}\n          placeholder=\"Select Operator\"\n          .options=${this.operators}\n        ></wc-select>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;AAaG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQA,GAAU,CAAA;AAArC,IAAA,WAAA,GAAA;;AAGL;;;AAGG;QAEH,IAAA,CAAA,SAAS,GAAsD,EAAE;;QAIjE,IAAA,CAAA,aAAa,GAAG,EAAE;IAepB;IAbE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;;;AAII,iBAAA,EAAA,IAAI,CAAC,aAAa;;AAEhB,mBAAA,EAAA,IAAI,CAAC,SAAS;;;;KAI9B;IACH;;AAzBO,YAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAOxB,UAAA,CAAA;AADC,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE;AACyC,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAIlE,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE;AACpC,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,eAAA,EAAA,MAAA,CAAA;AAZR,YAAY,GAAA,UAAA,CAAA;IADxB;AACY,CAAA,EAAA,YAAY,CA2BxB;;;;"}
+{"version":3,"file":"cb-expression.js","sources":["../../src/condition-builder/cb-expression.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './cb-expression.scss';\n\n/**\n * @label CB Expression\n * @tag wc-cb-expression\n * @rawTag cb-expression\n * @summary An expression row within a condition builder, containing an operator select and a slot for value inputs.\n * @tags condition-builder\n *\n * @example\n * ```html\n * <wc-cb-expression>\n *   <wc-input placeholder=\"Enter value\"></wc-input>\n * </wc-cb-expression>\n * ```\n */\n@IndividualComponent\nexport class CbExpression extends LitElement {\n  static styles = [styles];\n\n  /**\n   * The list of operator options to display in the operator select.\n   * Each item should have at least `label` and `value` properties.\n   */\n  @property({ type: Array })\n  operators: { label: string; value: string; icon?: string }[] = [];\n\n  /** The currently selected operator value. */\n  @property({ type: String, attribute: 'operator-value' })\n  operatorValue = '';\n\n  render() {\n    return html`\n      <div class=\"expression\">\n        <wc-select\n          inline\n          .value=${this.operatorValue}\n          placeholder=\"Select Operator\"\n          .options=${this.operators}\n        ></wc-select>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAKA;;;;;;;;;;;;;AAaG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQA,GAAU,CAAA;AAArC,IAAA,WAAA,GAAA;;AAGL;;;AAGG;QAEH,IAAA,CAAA,SAAS,GAAsD,EAAE;;QAIjE,IAAA,CAAA,aAAa,GAAG,EAAE;IAepB;IAbE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;;;AAII,iBAAA,EAAA,IAAI,CAAC,aAAa;;AAEhB,mBAAA,EAAA,IAAI,CAAC,SAAS;;;;KAI9B;IACH;;AAzBO,YAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAOxB,UAAA,CAAA;AADC,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE;AACyC,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAIlE,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE;AACpC,CAAA,EAAA,YAAA,CAAA,SAAA,EAAA,eAAA,EAAA,MAAA,CAAA;AAZR,YAAY,GAAA,UAAA,CAAA;IADxB;AACY,CAAA,EAAA,YAAY,CA2BxB;;;;"}

package/dist/cb-predicate.js

@@ -1,6 +1,6 @@
-import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, A, b } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
-import { e } from './class-map-YU7g0o3B.js';
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, A, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { e } from './class-map-DG7CA1et.js';
 import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
@@ -11,6 +11,10 @@ var css_248z = i`* {
   display: none !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 :host {
   display: block;
 }

package/dist/cb-predicate.js.map

@@ -1 +1 @@
-{"version":3,"file":"cb-predicate.js","sources":["../../src/condition-builder/cb-predicate.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './cb-predicate.scss';\n\n/**\n * @label CB Predicate\n * @tag wc-cb-predicate\n * @rawTag cb-predicate\n * @summary A predicate container in a condition builder that can display conditions in horizontal or vertical layout with an optional logical operator divider.\n * @tags condition-builder\n *\n * @example\n * ```html\n * <wc-cb-predicate condition-operator=\"and\" vertical>\n *   <wc-cb-compound-expression field-label=\"Age\">\n *     <wc-cb-expression></wc-cb-expression>\n *   </wc-cb-compound-expression>\n * </wc-cb-predicate>\n * ```\n */\n@IndividualComponent\nexport class CbPredicate extends LitElement {\n  static styles = [styles];\n\n  /** The logical operator shown between predicates ('and' or 'or'). */\n  @property({ type: String, attribute: 'condition-operator', reflect: true })\n  conditionOperator?: 'and' | 'or';\n\n  /** Whether to render the predicate in vertical layout. */\n  @property({ type: Boolean, reflect: true })\n  vertical = false;\n\n  override updated() {\n    if (this.vertical) {\n      this.__adjustSlotEndPadding();\n    }\n  }\n\n  private __adjustSlotEndPadding() {\n    const slotEnd = this.renderRoot.querySelector<HTMLElement>('.slot-end');\n    const operatorElm = this.renderRoot.querySelector<HTMLElement>(\n      '.predicate-condition-operator',\n    );\n    if (slotEnd && operatorElm) {\n      slotEnd.style.paddingInlineStart =\n        operatorElm.getBoundingClientRect().width + 'px';\n    }\n  }\n\n  private __renderHorizontalOperator() {\n    if (!this.conditionOperator) return nothing;\n    return html`\n      <wc-cb-divider vertical class=\"predicate-condition-operator\">\n        <wc-tag color=\"yellow\" size=\"sm\">${this.conditionOperator}</wc-tag>\n      </wc-cb-divider>\n    `;\n  }\n\n  private __renderVerticalOperator() {\n    if (!this.conditionOperator) return nothing;\n    return html`\n      <div class=\"predicate-condition-operator\">\n        <wc-cb-divider connect-start connect-end>\n          <wc-tag color=\"green\" size=\"sm\">${this.conditionOperator}</wc-tag>\n        </wc-cb-divider>\n      </div>\n    `;\n  }\n\n  render() {\n    const classes = {\n      predicate: true,\n      vertical: this.vertical,\n    };\n\n    if (this.vertical) {\n      return html`\n        <div class=${classMap(classes)}>\n          ${this.__renderVerticalOperator()}\n          <div class=\"predicate-body\">\n            <slot></slot>\n          </div>\n        </div>\n        <div class=\"slot-end\">\n          <slot name=\"end\"></slot>\n        </div>\n      `;\n    }\n\n    return html`\n      <div class=${classMap(classes)}>\n        <div class=\"predicate-body\">\n          <slot></slot>\n        </div>\n        ${this.__renderHorizontalOperator()}\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;AAeG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQA,GAAU,CAAA;AAApC,IAAA,WAAA,GAAA;;;QASL,IAAA,CAAA,QAAQ,GAAG,KAAK;IAoElB;IAlEW,OAAO,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,sBAAsB,EAAE;QAC/B;IACF;IAEQ,sBAAsB,GAAA;QAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,WAAW,CAAC;QACvE,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAC/C,+BAA+B,CAChC;AACD,QAAA,IAAI,OAAO,IAAI,WAAW,EAAE;YAC1B,OAAO,CAAC,KAAK,CAAC,kBAAkB;AAC9B,gBAAA,WAAW,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,IAAI;QACpD;IACF;IAEQ,0BAA0B,GAAA;QAChC,IAAI,CAAC,IAAI,CAAC,iBAAiB;AAAE,YAAA,OAAOC,CAAO;AAC3C,QAAA,OAAOC,CAAI,CAAA;;AAE4B,yCAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;KAE5D;IACH;IAEQ,wBAAwB,GAAA;QAC9B,IAAI,CAAC,IAAI,CAAC,iBAAiB;AAAE,YAAA,OAAOD,CAAO;AAC3C,QAAA,OAAOC,CAAI,CAAA;;;AAG6B,0CAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;KAG7D;IACH;IAEA,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,SAAS,EAAE,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;AAED,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,OAAOA,CAAI,CAAA;qBACIC,CAAQ,CAAC,OAAO,CAAC,CAAA;YAC1B,IAAI,CAAC,wBAAwB,EAAE;;;;;;;;OAQpC;QACH;AAEA,QAAA,OAAOD,CAAI,CAAA;mBACIC,CAAQ,CAAC,OAAO,CAAC,CAAA;;;;UAI1B,IAAI,CAAC,0BAA0B,EAAE;;KAEtC;IACH;;AA3EO,WAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIxB,UAAA,CAAA;AADC,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,OAAO,EAAE,IAAI,EAAE;AACzC,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,MAAA,CAAA;AAIjC,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AACzB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AATN,WAAW,GAAA,UAAA,CAAA;IADvB;AACY,CAAA,EAAA,WAAW,CA6EvB;;;;"}
+{"version":3,"file":"cb-predicate.js","sources":["../../src/condition-builder/cb-predicate.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './cb-predicate.scss';\n\n/**\n * @label CB Predicate\n * @tag wc-cb-predicate\n * @rawTag cb-predicate\n * @summary A predicate container in a condition builder that can display conditions in horizontal or vertical layout with an optional logical operator divider.\n * @tags condition-builder\n *\n * @example\n * ```html\n * <wc-cb-predicate condition-operator=\"and\" vertical>\n *   <wc-cb-compound-expression field-label=\"Age\">\n *     <wc-cb-expression></wc-cb-expression>\n *   </wc-cb-compound-expression>\n * </wc-cb-predicate>\n * ```\n */\n@IndividualComponent\nexport class CbPredicate extends LitElement {\n  static styles = [styles];\n\n  /** The logical operator shown between predicates ('and' or 'or'). */\n  @property({ type: String, attribute: 'condition-operator', reflect: true })\n  conditionOperator?: 'and' | 'or';\n\n  /** Whether to render the predicate in vertical layout. */\n  @property({ type: Boolean, reflect: true })\n  vertical = false;\n\n  override updated() {\n    if (this.vertical) {\n      this.__adjustSlotEndPadding();\n    }\n  }\n\n  private __adjustSlotEndPadding() {\n    const slotEnd = this.renderRoot.querySelector<HTMLElement>('.slot-end');\n    const operatorElm = this.renderRoot.querySelector<HTMLElement>(\n      '.predicate-condition-operator',\n    );\n    if (slotEnd && operatorElm) {\n      slotEnd.style.paddingInlineStart =\n        operatorElm.getBoundingClientRect().width + 'px';\n    }\n  }\n\n  private __renderHorizontalOperator() {\n    if (!this.conditionOperator) return nothing;\n    return html`\n      <wc-cb-divider vertical class=\"predicate-condition-operator\">\n        <wc-tag color=\"yellow\" size=\"sm\">${this.conditionOperator}</wc-tag>\n      </wc-cb-divider>\n    `;\n  }\n\n  private __renderVerticalOperator() {\n    if (!this.conditionOperator) return nothing;\n    return html`\n      <div class=\"predicate-condition-operator\">\n        <wc-cb-divider connect-start connect-end>\n          <wc-tag color=\"green\" size=\"sm\">${this.conditionOperator}</wc-tag>\n        </wc-cb-divider>\n      </div>\n    `;\n  }\n\n  render() {\n    const classes = {\n      predicate: true,\n      vertical: this.vertical,\n    };\n\n    if (this.vertical) {\n      return html`\n        <div class=${classMap(classes)}>\n          ${this.__renderVerticalOperator()}\n          <div class=\"predicate-body\">\n            <slot></slot>\n          </div>\n        </div>\n        <div class=\"slot-end\">\n          <slot name=\"end\"></slot>\n        </div>\n      `;\n    }\n\n    return html`\n      <div class=${classMap(classes)}>\n        <div class=\"predicate-body\">\n          <slot></slot>\n        </div>\n        ${this.__renderHorizontalOperator()}\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;AAeG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQA,GAAU,CAAA;AAApC,IAAA,WAAA,GAAA;;;QASL,IAAA,CAAA,QAAQ,GAAG,KAAK;IAoElB;IAlEW,OAAO,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,sBAAsB,EAAE;QAC/B;IACF;IAEQ,sBAAsB,GAAA;QAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAc,WAAW,CAAC;QACvE,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAC/C,+BAA+B,CAChC;AACD,QAAA,IAAI,OAAO,IAAI,WAAW,EAAE;YAC1B,OAAO,CAAC,KAAK,CAAC,kBAAkB;AAC9B,gBAAA,WAAW,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,IAAI;QACpD;IACF;IAEQ,0BAA0B,GAAA;QAChC,IAAI,CAAC,IAAI,CAAC,iBAAiB;AAAE,YAAA,OAAOC,CAAO;AAC3C,QAAA,OAAOC,CAAI,CAAA;;AAE4B,yCAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;KAE5D;IACH;IAEQ,wBAAwB,GAAA;QAC9B,IAAI,CAAC,IAAI,CAAC,iBAAiB;AAAE,YAAA,OAAOD,CAAO;AAC3C,QAAA,OAAOC,CAAI,CAAA;;;AAG6B,0CAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;KAG7D;IACH;IAEA,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG;AACd,YAAA,SAAS,EAAE,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;AAED,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,OAAOA,CAAI,CAAA;qBACIC,CAAQ,CAAC,OAAO,CAAC,CAAA;YAC1B,IAAI,CAAC,wBAAwB,EAAE;;;;;;;;OAQpC;QACH;AAEA,QAAA,OAAOD,CAAI,CAAA;mBACIC,CAAQ,CAAC,OAAO,CAAC,CAAA;;;;UAI1B,IAAI,CAAC,0BAA0B,EAAE;;KAEtC;IACH;;AA3EO,WAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAIxB,UAAA,CAAA;AADC,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,oBAAoB,EAAE,OAAO,EAAE,IAAI,EAAE;AACzC,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,MAAA,CAAA;AAIjC,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AACzB,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AATN,WAAW,GAAA,UAAA,CAAA;IADvB;AACY,CAAA,EAAA,WAAW,CA6EvB;;;;"}

package/dist/{chart-bar-cn6rrna-.js → chart-bar-CYoGNXnK.js}

@@ -1,5 +1,5 @@
 import { a as constant, i as interpolateNumber, b as color, d as interpolateRgb, e as interpolateString, o as ordinal, f as initRange } from './transform-DSwFSqzD.js';
-import { a as i } from './IndividualComponent-DUINtMGK.js';
+import { i } from './IndividualComponent-Bdwyrvd6.js';
 
 function ascending(a, b) {
   return a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
@@ -1052,6 +1052,10 @@ var css_248z = i`* {
   display: none !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 :host {
   display: block;
   color: var(--color-on-surface);
@@ -1118,4 +1122,4 @@ svg {
 }`;
 
 export { axisLeft as a, band as b, css_248z as c, axisBottom as d, linear as l, max as m };
-//# sourceMappingURL=chart-bar-cn6rrna-.js.map
+//# sourceMappingURL=chart-bar-CYoGNXnK.js.map