@redvars/peacock 3.5.0 → 3.6.0

package/dist/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../src/card/card.ts"],"sourcesContent":["import { LitElement, html, nothing, PropertyValues } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { dispatchActivationClick, isActivationClick } from '../__utils/dispatch-event-utils.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';\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\">\n *   <h3>Title</h3>\n *   <p>Supportive text</p>\n * </wc-card>\n * ```\n */\n@IndividualComponent\nexport class Card extends 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   * Hyperlink to navigate to on click.\n   */\n  @property({ reflect: true }) href?: string;\n\n  /**\n   * Sets or retrieves the window or frame at which to target content.\n   */\n  @property() target: string = '_self';\n\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\n  @query('.card') readonly cardElement!: HTMLElement | null;\n\n  @query('slot') readonly contentSlot!: HTMLSlotElement | null;\n\n  #tabindex?: number = 0;\n\n  #slottedTabIndexMap = new WeakMap<HTMLElement, string | null>();\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.__syncSlottedChildrenTabIndex();\n        this.requestUpdate();\n      },\n    );\n    this.__syncSlottedChildrenTabIndex();\n  }\n\n  override updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has('actionable') || changedProperties.has('href')) {\n      this.__syncSlottedChildrenTabIndex();\n    }\n  }\n\n  __syncSlottedChildrenTabIndex() {\n    if (!this.contentSlot) return;\n\n    const shouldDisableTabbing = this.actionable || this.__isLink();\n    const assignedChildren = this.contentSlot.assignedElements({ flatten: true });\n\n    assignedChildren.forEach(node => {\n      if (!(node instanceof HTMLElement)) return;\n\n      if (shouldDisableTabbing) {\n        if (!this.#slottedTabIndexMap.has(node)) {\n          this.#slottedTabIndexMap.set(node, node.getAttribute('tabindex'));\n        }\n\n        if (node.getAttribute('tabindex') !== '-1') {\n          node.setAttribute('tabindex', '-1');\n        }\n        return;\n      }\n\n      const originalTabIndex = this.#slottedTabIndexMap.get(node);\n      if (originalTabIndex === null) {\n        if (node.hasAttribute('tabindex')) {\n          node.removeAttribute('tabindex');\n        }\n      } else if (originalTabIndex !== undefined) {\n        if (node.getAttribute('tabindex') !== originalTabIndex) {\n          node.setAttribute('tabindex', originalTabIndex);\n        }\n      }\n\n      this.#slottedTabIndexMap.delete(node);\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  __isLink() {\n    return !!this.href;\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\n\n\n  render() {\n\n    const isLink = this.__isLink();\n\n    const cssClasses = {\n      card: true,\n      'card-element': true,\n      [`variant-${this.variant}`]: true,\n      actionable: (this.actionable && !this.disabled) || isLink,\n      disabled: this.disabled,\n      pressed: this.isPressed,\n      'has-content': this.slotHasContent,\n    };\n\n    if (!this.actionable && !isLink) {\n      return html`<div\n              class=${classMap(cssClasses)}\n              id=\"card\"\n              >\n              ${this.renderCardContent()}\n            </div>`;\n    }\n\n    if (!isLink) {\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()}\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()}\n          </a>`;\n  }\n\n  renderCardContent() {\n    return html`\n    <wc-focus-ring class=\"focus-ring\" .control=${this} .forElement=${this.cardElement}></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\"></wc-ripple> \n\n      <div class=\"card-content\">\n\n        <div class=\"slot-container\">\n          <slot @slotchange=${this.__syncSlottedChildrenTabIndex}></slot>\n        </div>\n\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 { dispatchActivationClick, isActivationClick } from '../__utils/dispatch-event-utils.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 BaseHyperlinkMixin from '@/__mixins/BaseHyperlinkMixin.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\">\n *   <h3>Title</h3>\n *   <p>Supportive text</p>\n * </wc-card>\n * ```\n */\n@IndividualComponent\nexport class Card extends BaseHyperlinkMixin(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\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\n\n\n  render() {\n\n    const isLink = this.__isLink();\n    const disableSlotTabbing = this.actionable || isLink;\n\n    const cssClasses = {\n      card: true,\n      'card-element': true,\n      [`variant-${this.variant}`]: true,\n      actionable: (this.actionable && !this.disabled) || isLink,\n      disabled: this.disabled,\n      pressed: this.isPressed,\n      'has-content': this.slotHasContent,\n    };\n\n    if (!this.actionable && !isLink) {\n      return html`<div\n              class=${classMap(cssClasses)}\n              id=\"card\"\n              >\n              ${this.renderCardContent(disableSlotTabbing)}\n            </div>`;\n    }\n\n    if (!isLink) {\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      <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\"></wc-ripple> \n\n      <div class=\"card-content\">\n\n        <div class=\"slot-container\" ?inert=${disableSlotTabbing}>\n          <slot></slot>\n        </div>\n\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

@@ -0,0 +1,125 @@
+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';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+.compound-expression {
+  display: flex;
+  padding-top: var(--spacing-200);
+}
+.compound-expression .field-name-container {
+  display: flex;
+  flex-direction: column;
+  padding-top: var(--spacing-100);
+  padding-right: var(--spacing-200);
+}
+.compound-expression .field-name-container .field-label {
+  font-family: var(--typography-label-medium-font-family);
+  font-size: var(--typography-label-medium-font-size);
+  font-weight: var(--typography-label-medium-font-weight);
+  line-height: var(--typography-label-medium-line-height);
+  letter-spacing: var(--typography-label-medium-letter-spacing);
+  color: var(--color-on-surface-variant);
+}
+.compound-expression .field-name-container .field-compound-type {
+  flex: 1;
+  padding-bottom: var(--spacing-250);
+}
+.compound-expression .conditions {
+  flex: 1;
+}
+
+.slot-end {
+  display: block;
+}`;
+
+/**
+ * @label CB Compound Expression
+ * @tag wc-cb-compound-expression
+ * @rawTag cb-compound-expression
+ * @summary A compound expression group in a condition builder that displays a field label, an optional condition operator divider, and slots for child expressions.
+ * @tags condition-builder
+ * @parentRawTag compound-builder
+ *
+ * @example
+ * ```html
+ * <wc-cb-compound-expression field-label="Age" condition-operator="or">
+ *   <wc-cb-expression>
+ *     <wc-input placeholder="Enter value"></wc-input>
+ *   </wc-cb-expression>
+ * </wc-cb-compound-expression>
+ * ```
+ */
+let CbCompoundExpression = class CbCompoundExpression extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** The field name for the compound expression. */
+        this.fieldName = '';
+        /** The display label for the field. */
+        this.fieldLabel = '';
+    }
+    updated() {
+        this.__adjustSlotEndPadding();
+    }
+    __adjustSlotEndPadding() {
+        const slotEnd = this.renderRoot.querySelector('.slot-end');
+        const fieldNameContainer = this.renderRoot.querySelector('.field-name-container');
+        if (slotEnd && fieldNameContainer) {
+            slotEnd.style.paddingInlineStart =
+                fieldNameContainer.getBoundingClientRect().width + 'px';
+        }
+    }
+    __renderOperatorDivider() {
+        if (!this.conditionOperator)
+            return A;
+        return b `
+      <wc-cb-divider connect-end>
+        <wc-tag color="yellow" size="sm">${this.conditionOperator}</wc-tag>
+      </wc-cb-divider>
+    `;
+    }
+    render() {
+        return b `
+      <div class="compound-expression" field-name=${this.fieldName}>
+        <div class="field-name-container">
+          <span class="field-label">${this.fieldLabel}</span>
+          <div class="field-compound-type">
+            ${this.__renderOperatorDivider()}
+          </div>
+        </div>
+        <div class="conditions">
+          <slot></slot>
+        </div>
+      </div>
+      <div class="slot-end">
+        <slot name="end"></slot>
+      </div>
+    `;
+    }
+};
+CbCompoundExpression.styles = [css_248z];
+__decorate([
+    n({ type: String, attribute: 'condition-operator', reflect: true })
+], CbCompoundExpression.prototype, "conditionOperator", void 0);
+__decorate([
+    n({ type: String, attribute: 'field-name' })
+], CbCompoundExpression.prototype, "fieldName", void 0);
+__decorate([
+    n({ type: String, attribute: 'field-label' })
+], CbCompoundExpression.prototype, "fieldLabel", void 0);
+CbCompoundExpression = __decorate([
+    IndividualComponent
+], CbCompoundExpression);
+
+export { CbCompoundExpression };
+//# sourceMappingURL=cb-compound-expression.js.map

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

@@ -0,0 +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 * @parentRawTag compound-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;;;;;;;;;;;;;;;;AAgBG;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

@@ -0,0 +1,150 @@
+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 './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+  height: 100%;
+  width: 100%;
+  --cb-divider-line-color: var(--color-outline-variant);
+}
+
+.divider {
+  display: flex;
+}
+
+.divider:not(.vertical) {
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: var(--spacing-200);
+}
+.divider:not(.vertical) .line {
+  height: 100%;
+}
+.divider:not(.vertical).connect-start .line-start {
+  width: 1rem;
+  margin-left: 1rem;
+  border-inline-start: 1px solid var(--cb-divider-line-color);
+  border-top: 1px solid var(--cb-divider-line-color);
+  border-radius: var(--shape-corner-extra-small) 0 0 0;
+}
+.divider:not(.vertical):not(.connect-start) .line-start {
+  border-inline-start: 1px solid var(--cb-divider-line-color);
+}
+.divider:not(.vertical).connect-end .line-end {
+  width: 1rem;
+  margin-left: 1rem;
+  border-inline-start: 1px solid var(--cb-divider-line-color);
+  border-bottom: 1px solid var(--cb-divider-line-color);
+  border-radius: 0 0 0 var(--shape-corner-extra-small);
+}
+.divider:not(.vertical):not(.connect-end) .line-end {
+  border-inline-start: 1px solid var(--cb-divider-line-color);
+}
+.divider:not(.vertical) .content {
+  padding: var(--spacing-050) 0;
+}
+
+.divider.vertical {
+  width: 100%;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+.divider.vertical .line {
+  width: 100%;
+}
+.divider.vertical.connect-start .line-start {
+  height: 1rem;
+  margin-top: 1rem;
+  border-top: 1px solid var(--cb-divider-line-color);
+  border-left: 1px solid var(--cb-divider-line-color);
+  border-radius: var(--shape-corner-extra-small) 0 0 0;
+}
+.divider.vertical:not(.connect-start) .line-start {
+  border-top: 1px solid var(--cb-divider-line-color);
+}
+.divider.vertical.connect-end .line-end {
+  height: 1rem;
+  margin-top: 1rem;
+  border-top: 1px solid var(--cb-divider-line-color);
+  border-right: 1px solid var(--cb-divider-line-color);
+  border-radius: 0 var(--shape-corner-extra-small) 0 0;
+}
+.divider.vertical:not(.connect-end) .line-end {
+  border-top: 1px solid var(--cb-divider-line-color);
+}
+.divider.vertical .content {
+  padding: 0 var(--spacing-050);
+}`;
+
+/**
+ * @label CB Divider
+ * @tag wc-cb-divider
+ * @rawTag cb-divider
+ * @summary A divider line used within a condition builder to visually connect expressions with operator tags.
+ * @tags condition-builder
+ * @parentRawTag compound-builder
+ *
+ * @example
+ * ```html
+ * <wc-cb-divider>
+ *   <wc-tag color="green">and</wc-tag>
+ * </wc-cb-divider>
+ * ```
+ */
+let CbDivider = class CbDivider extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** Whether to render the divider vertically instead of horizontally. */
+        this.vertical = false;
+        /** Whether to render a connecting line at the start. */
+        this.connectStart = false;
+        /** Whether to render a connecting line at the end. */
+        this.connectEnd = false;
+    }
+    render() {
+        const classes = {
+            divider: true,
+            'connect-start': this.connectStart,
+            'connect-end': this.connectEnd,
+            vertical: this.vertical,
+        };
+        return b `
+      <div class=${e(classes)}>
+        <div class="line line-start"></div>
+        <div class="content">
+          <slot></slot>
+        </div>
+        <div class="line line-end"></div>
+      </div>
+    `;
+    }
+};
+CbDivider.styles = [css_248z];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], CbDivider.prototype, "vertical", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'connect-start' })
+], CbDivider.prototype, "connectStart", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'connect-end' })
+], CbDivider.prototype, "connectEnd", void 0);
+CbDivider = __decorate([
+    IndividualComponent
+], CbDivider);
+
+export { CbDivider };
+//# sourceMappingURL=cb-divider.js.map

package/dist/cb-divider.js.map

@@ -0,0 +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 * @parentRawTag compound-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;;;;;;;;;;;;;;AAcG;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

@@ -0,0 +1,75 @@
+import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, b } from './IndividualComponent-DUINtMGK.js';
+import { n } from './property-1psGvXOq.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+.expression {
+  display: flex;
+  gap: var(--spacing-100);
+  align-items: center;
+  padding-bottom: var(--spacing-200);
+}`;
+
+/**
+ * @label CB Expression
+ * @tag wc-cb-expression
+ * @rawTag cb-expression
+ * @summary An expression row within a condition builder, containing an operator select and a slot for value inputs.
+ * @tags condition-builder
+ * @parentRawTag compound-builder
+ *
+ * @example
+ * ```html
+ * <wc-cb-expression>
+ *   <wc-input placeholder="Enter value"></wc-input>
+ * </wc-cb-expression>
+ * ```
+ */
+let CbExpression = class CbExpression extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The list of operator options to display in the operator select.
+         * Each item should have at least `label` and `value` properties.
+         */
+        this.operators = [];
+        /** The currently selected operator value. */
+        this.operatorValue = '';
+    }
+    render() {
+        return b `
+      <div class="expression">
+        <wc-select
+          inline
+          .value=${this.operatorValue}
+          placeholder="Select Operator"
+          .options=${this.operators}
+        ></wc-select>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+CbExpression.styles = [css_248z];
+__decorate([
+    n({ type: Array })
+], CbExpression.prototype, "operators", void 0);
+__decorate([
+    n({ type: String, attribute: 'operator-value' })
+], CbExpression.prototype, "operatorValue", void 0);
+CbExpression = __decorate([
+    IndividualComponent
+], CbExpression);
+
+export { CbExpression };
+//# sourceMappingURL=cb-expression.js.map

package/dist/cb-expression.js.map

@@ -0,0 +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 * @parentRawTag compound-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;;;;;;;;;;;;;;AAcG;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

@@ -0,0 +1,137 @@
+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 './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+.predicate:not(.vertical) .predicate-body {
+  padding-top: var(--spacing-200);
+}
+.predicate:not(.vertical) .predicate-condition-operator {
+  padding: var(--spacing-200) var(--spacing-400) 0 var(--spacing-400);
+}
+
+.predicate.vertical {
+  display: flex;
+  align-items: stretch;
+}
+.predicate.vertical .predicate-condition-operator {
+  padding: var(--spacing-400) 0 var(--spacing-200) 0;
+  padding-inline-end: var(--spacing-200);
+}
+.predicate.vertical .predicate-body {
+  flex: 1;
+}
+
+.slot-end {
+  display: block;
+}`;
+
+/**
+ * @label CB Predicate
+ * @tag wc-cb-predicate
+ * @rawTag cb-predicate
+ * @summary A predicate container in a condition builder that can display conditions in horizontal or vertical layout with an optional logical operator divider.
+ * @tags condition-builder
+ * @parentRawTag compound-expression
+ *
+ * @example
+ * ```html
+ * <wc-cb-predicate condition-operator="and" vertical>
+ *   <wc-cb-compound-expression field-label="Age">
+ *     <wc-cb-expression></wc-cb-expression>
+ *   </wc-cb-compound-expression>
+ * </wc-cb-predicate>
+ * ```
+ */
+let CbPredicate = class CbPredicate extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** Whether to render the predicate in vertical layout. */
+        this.vertical = false;
+    }
+    updated() {
+        if (this.vertical) {
+            this.__adjustSlotEndPadding();
+        }
+    }
+    __adjustSlotEndPadding() {
+        const slotEnd = this.renderRoot.querySelector('.slot-end');
+        const operatorElm = this.renderRoot.querySelector('.predicate-condition-operator');
+        if (slotEnd && operatorElm) {
+            slotEnd.style.paddingInlineStart =
+                operatorElm.getBoundingClientRect().width + 'px';
+        }
+    }
+    __renderHorizontalOperator() {
+        if (!this.conditionOperator)
+            return A;
+        return b `
+      <wc-cb-divider vertical class="predicate-condition-operator">
+        <wc-tag color="yellow" size="sm">${this.conditionOperator}</wc-tag>
+      </wc-cb-divider>
+    `;
+    }
+    __renderVerticalOperator() {
+        if (!this.conditionOperator)
+            return A;
+        return b `
+      <div class="predicate-condition-operator">
+        <wc-cb-divider connect-start connect-end>
+          <wc-tag color="green" size="sm">${this.conditionOperator}</wc-tag>
+        </wc-cb-divider>
+      </div>
+    `;
+    }
+    render() {
+        const classes = {
+            predicate: true,
+            vertical: this.vertical,
+        };
+        if (this.vertical) {
+            return b `
+        <div class=${e(classes)}>
+          ${this.__renderVerticalOperator()}
+          <div class="predicate-body">
+            <slot></slot>
+          </div>
+        </div>
+        <div class="slot-end">
+          <slot name="end"></slot>
+        </div>
+      `;
+        }
+        return b `
+      <div class=${e(classes)}>
+        <div class="predicate-body">
+          <slot></slot>
+        </div>
+        ${this.__renderHorizontalOperator()}
+      </div>
+    `;
+    }
+};
+CbPredicate.styles = [css_248z];
+__decorate([
+    n({ type: String, attribute: 'condition-operator', reflect: true })
+], CbPredicate.prototype, "conditionOperator", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], CbPredicate.prototype, "vertical", void 0);
+CbPredicate = __decorate([
+    IndividualComponent
+], CbPredicate);
+
+export { CbPredicate };
+//# sourceMappingURL=cb-predicate.js.map

package/dist/cb-predicate.js.map

@@ -0,0 +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 * @parentRawTag compound-expression\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;;;;;;;;;;;;;;;;AAgBG;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;;;;"}