@heartlandone/vega-sandbox-pr-1475-b1e358890f4e71c36ade3ba715f51e7030022002 2.26.0

package/dist/esm/vega-form.entry.js

@@ -0,0 +1,479 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-187f71d1.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-bf7441bd.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { O as Observer, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-0d4b85b8.js';
+import { g as FORM_ELEMENT_VALIDATE, b as FORM_ELEMENT_VALUE_CHANGE, d as FORM_FIELD_ELEMENT_DISCONNECTED, c as FORM_FIELD_PENDING_VALID_CHANGE, e as FORM_RESET_OPERATION_TRIGGERED, F as FORM_SUBMIT, a as FORM_RESET } from './static-subject-title-2a4d6602.js';
+import { d as isObjectArrayLike } from './array-506b88b9.js';
+import { s as sanitizeVegaComponent } from './component-cae24190.js';
+import { f as findParent, c as isElementVisible, i as isParent } from './ui-0132dbb5.js';
+import { I as ImmutableMap } from './immutable-map-f545ed1a.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-b3f6ac79.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-c8b8c007.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-e8af4e70.js';
+import { t as VegaFormSubmit, u as VegaFormReset, v as VegaValidate } from './vega-event-id-7465a011.js';
+import { C as ChildNodesNotifyObserverSlimmer } from './child-nodes-notify-observer-slimmer-50cd94b9.js';
+import { a as VegaInternalValid } from './vega-internal-event-id-7e05cf4a.js';
+import './string-be824360.js';
+import './misc-9fdbcfbb.js';
+import './dynamic-slimmer-90b8af32.js';
+import './page-resize-observer-slimmer-8caeb03b.js';
+import './breakpoints-e59edf8d.js';
+import './ui-df46cc20.js';
+import './mutation-observer-slimmer-6cef9549.js';
+import './mutation-observer-filters-9086b5cc.js';
+import './number-e2519d1c.js';
+import './internal-vega-event-manager-5aedd784.js';
+import './vega-env-manager-8f8dc473.js';
+import './feature-flag-controller-a5fe5022.js';
+import './index-0863eec6.js';
+
+const vegaFormCss = ":host{display:block}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaValidate = createEvent(this, "vegaValidate", 7);
+    this.validate = createEvent(this, "validate", 7);
+    this.vegaFormSubmit = createEvent(this, "vegaFormSubmit", 7);
+    this.formSubmit = createEvent(this, "formSubmit", 7);
+    this.vegaFormReset = createEvent(this, "vegaFormReset", 7);
+    this.formReset = createEvent(this, "formReset", 7);
+    this.globalSlimmers = {};
+    this.submitEventEmitter = createEventEmitSlimmer(VegaForm, VegaFormSubmit);
+    this.resetEventEmitter = createEventEmitSlimmer(VegaForm, VegaFormReset);
+    this.validateEventEmitter = createEventEmitSlimmer(VegaForm, VegaValidate);
+    this.childEventPrevent = new ChildNodesEventPreventSlimmer([VegaFormSubmit, VegaFormReset], () => this.host.querySelector('vega-form'), {
+      customPreventHandle: (e) => {
+        e.stopPropagation();
+      },
+    });
+    this.childFormValidateEventPrevent = new ChildNodesEventPreventSlimmer([VegaValidate], () => this.host, {
+      customPreventHandle: (e) => {
+        e.stopPropagation();
+      },
+    });
+    this.childNotifyObserver = new ChildNodesNotifyObserverSlimmer(FORM_ELEMENT_VALIDATE, (input) => this.updateInternalValidStatus(input));
+    this.childNodeValueChangeObserver = new ChildNodesNotifyObserverSlimmer(FORM_ELEMENT_VALUE_CHANGE, () => this.updateInternalTouchedStatus());
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.invalidFieldPathMap = new ImmutableMap(new Map(), (newMap) => {
+      this.invalidFieldPathMap = newMap;
+      this.updateIsValidFlag();
+    });
+    // The form field element pending async valid map
+    this.pendingValidFieldPathMap = new ImmutableMap(new Map(), (newMap) => {
+      this.pendingValidFieldPathMap = newMap;
+      this.updateIsValidFlag();
+    });
+    this.controlledFieldPathSet = new Set();
+    /**
+     * Indicates whether the current form-controlled elements are valid.
+     *
+     * Form-controlled elements are considered for validation if they
+     *    have the `data-vega-form` property.
+     *
+     * Disabled and invisible elements are excluded from validation.
+     *
+     * If the value is `undefined`, it means there are no
+     *    form-controlled elements that can be validated.
+     *
+     * **Additional Notes:**
+     *   1. When depending on `isValid` for form validation, it is advised
+     *      not to modify the following properties of the monitored DOM:
+     *      - `disabled` property
+     *      - Element visibility style
+     *   2. As this property relies heavily on the `VegaValidate` event emitted,
+     *      it is highly recommended to enable auto-validation for all
+     *      form-controlled elements to ensure that the value reflects
+     *      the most up-to-date form validation status.
+     *
+     * @version 1.3.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+    /**
+     * Indicates whether the value of any current
+     *    form-controlled elements has been changed.
+     *
+     *   1. When the value of any form-controlled element is changed,
+     *      this parameter is set to `true`.
+     *   2. When resetting the form, this parameter is set to `false`.
+     *   3. When invoking the `setValue` method, this parameter is set to `false`.
+     *
+     * @version 1.3.0
+     */
+    this.isTouched = false;
+    /**
+     * If the element is valid, remove it from the set of
+     *    invalid elements. If the element is invalid,
+     *    add it to the set of invalid elements.
+     *
+     * @param {NotifyObserverPayload<boolean>} payload - CustomEvent<boolean> the vegaValidate subject notify from child elements
+     */
+    this.updateInternalValidStatus = (payload) => {
+      if (payload.host !== this.host) {
+        const target = payload.host;
+        const isElementValid = payload.detail;
+        if (FormFieldControllerSlimmer.isValidFormField(target) &&
+          this.shouldVisitElement(target, false, false)) {
+          if (isElementValid) {
+            this.invalidFieldPathMap.delete(target);
+          }
+          else {
+            this.invalidFieldPathMap.set(target, target.dataset['vegaForm']);
+          }
+        }
+      }
+    };
+  }
+  watchIsValid() {
+    this.validateEventEmitter.emit(this.isValid);
+    ChangeManager.notify(FORM_ELEMENT_VALIDATE, { host: this.host, detail: this.isValid });
+  }
+  /**
+   * When the vegaForm is deleted, it is necessary to notify
+   *    the parent's vegaForm to update its isValid status.
+   */
+  async disconnectedCallback() {
+    ChangeManager.notify(FORM_FIELD_ELEMENT_DISCONNECTED, {
+      host: this.host,
+    });
+    ChangeManager.unregister(FORM_FIELD_ELEMENT_DISCONNECTED, this.formFieldDisconnectedObserver);
+    ChangeManager.unregister(FORM_FIELD_PENDING_VALID_CHANGE, this.formFieldPendingValidObserver);
+  }
+  async componentDidLoad() {
+    await this.navigateVegaFormChildren(async (element, isForm) => {
+      if (!isForm) {
+        this.controlledFieldPathSet.add(this.getFormFieldName(element, true));
+      }
+    });
+    this.initFormFieldDisconnectedObserver();
+    this.registerFormSubmitChangeManager();
+    this.registerFormResetChangeManager();
+    this.registerFormFieldPendingValidChangeManager();
+  }
+  /**
+   * Invoke this method asynchronously to retrieve the validation result for
+   *    all the vega field elements nested within the `vega-form`.
+   *
+   * If an element is a `vega-form` itself, it will recursively
+   *    invoke its `valid()` method.
+   *
+   * @param {boolean | 'rule'} showError determine whether the validation result should be reflected in UI
+   * @return {Promise<FormValidateResult> } validation result
+   * @version 1.3.0
+   */
+  async valid(showError = true) {
+    const result = { isValid: true, invalidFields: [] };
+    await this.navigateVegaFormChildren(async (element, isForm) => {
+      if (typeof element['valid'] === 'function' && isForm) {
+        const nestedFormValidationResult = await element.valid(showError);
+        if (!nestedFormValidationResult.isValid) {
+          result.isValid = false;
+          result.invalidFields.push(...nestedFormValidationResult.invalidFields);
+        }
+      }
+      else {
+        const isValid = await this.handleChildFormFieldElementValid(element, showError);
+        if (!isValid) {
+          result.isValid = false;
+          result.invalidFields.push(this.getFormFieldName(element));
+        }
+      }
+    });
+    return result;
+  }
+  /**
+   * Invoke this method asynchronously to retrieve the values for
+   *    all the available vega field elements nested within the `vega-form`.
+   *
+   * @param {FormControlOption} [option] form control option to skip disabled/invisible components
+   * @return {Promise<T>} object with key and field value as key-value pair
+   * @version 1.3.0
+   */
+  async getValue(option) {
+    const result = {};
+    await this.navigateVegaFormChildren(async (element, isForm) => {
+      const formFieldName = this.getFormFieldName(element);
+      if (isForm) {
+        result[formFieldName] = await element.getValue(option);
+      }
+      else {
+        result[formFieldName] = VegaForm.getFormFieldValue(element);
+      }
+    }, option);
+    return (isObjectArrayLike(result) ? Object.values(result) : result);
+  }
+  /**
+   * Invoke this method to prefill the `vega-form` with the given value.
+   *
+   * This action will also set the `isTouched` property to `false`.
+   *
+   * @param value to prefill into the vega-form
+   * @param {FormControlOption} [option] form control option to skip disabled/invisible components
+   * @version 1.3.0
+   */
+  async setValue(value, option) {
+    if (value) {
+      await this.navigateVegaFormChildren(async (element, isForm) => {
+        const formFieldName = this.getFormFieldName(element);
+        if (isForm) {
+          await element.setValue(value[formFieldName], option);
+        }
+        else {
+          await element.componentOnReady(); // Link issue https://gethired.atlassian.net/browse/GHUI-385
+          if (value[formFieldName] !== undefined) {
+            // If element have setValue method, we will directly call this method, otherwise we set the value to value property.
+            typeof element['setValue'] === 'function'
+              ? await element['setValue'](value[formFieldName])
+              : (element['value'] = value[formFieldName]);
+          }
+        }
+      }, option);
+      this.isTouched = false;
+    }
+  }
+  /**
+   * Invoke this method to reset the vega field elements in the form to
+   *    the default value provided, or an empty string if
+   *    no default value is found.
+   *
+   * @param defaultValueMap map of the vega form field name to default value
+   * @param {FormControlOption} [option] form control option to skip disabled/invisible components
+   *
+   * @version 1.3.0
+   */
+  async reset(defaultValueMap = {}, option) {
+    await this.navigateVegaFormChildren(async (element, isForm) => {
+      const formFieldName = this.getFormFieldName(element);
+      if (isForm) {
+        await element.reset(defaultValueMap[formFieldName] || {}, option);
+      }
+    }, option);
+    ChangeManager.notify(FORM_RESET_OPERATION_TRIGGERED, {
+      host: this.host,
+      defaultValueMap,
+      option,
+    });
+    this.isTouched = false;
+  }
+  static getFormFieldValue(element) {
+    return typeof element['value'] === 'undefined'
+      ? // use element.getAttribute since the value property is not available in unit testing
+        element.getAttribute('value')
+      : element['value'];
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, h("slot", null)), this.host);
+  }
+  /**
+   * If the value of any child elements have changed,
+   *    make 'isTouched' prop as false.
+   */
+  updateInternalTouchedStatus() {
+    this.isTouched = true;
+  }
+  /**
+   * Navigate the immediate child node under current vega form element with the following strategy
+   *  - if a matched vega field element found, will pass it to the visitor method passed in
+   *  - if a non-matched node found, it will call itself recursively and pass the node as the second parameter
+   * Once the navigation is finished, it will wait for all the pending visitor/self-invocation promise finished before return
+   *
+   * @param visitor async callback method that will be invoked if a matched vega field element found
+   * @param {FormControlOption} [option] form control option to skip disabled/invisible components
+   * @param [startElementNode] element node that the navigation will be started from, default is the current host element
+   * @return {Promise<void>} return void wrapped with promise to notify the navigation is done
+   */
+  async navigateVegaFormChildren(visitor, option, startElementNode = this.host) {
+    const promiseQueue = [];
+    Array.from(startElementNode.children).forEach((child) => {
+      if (FormFieldControllerSlimmer.isValidFormField(child)) {
+        if (this.shouldVisitElement(child, option === null || option === void 0 ? void 0 : option.skipDisabled, option === null || option === void 0 ? void 0 : option.skipInvisible)) {
+          promiseQueue.push(visitor(child, child.tagName === 'VEGA-FORM'));
+        }
+      }
+      else {
+        promiseQueue.push(this.navigateVegaFormChildren(visitor, option, child));
+      }
+    });
+    await Promise.all(promiseQueue);
+  }
+  /**
+   * Update the {@link isValid} property value based on the size of {@link invalidFieldPathSet}
+   * If the number of invalid elements is zero, then the form is valid.
+   */
+  updateIsValidFlag() {
+    this.isValid = this.pendingValidFieldPathMap.size > 0 ? null : this.invalidFieldPathMap.size === 0;
+  }
+  /**
+   * It returns the value of data-vega-form that the given element is associated with, if child HTMLElements share the same data-vega-form property name
+   * in the same vega-form, then includePath has to be set to be true to get a complete path to avoid the confusion of isValid checking.
+   *
+   * @param {HTMLElement} element - The element that is being validated.
+   * @param {boolean} [includePath] - If true, the field name will include the path to the field. For
+   * example, if the field is in a vega-form with the name "address", the field name will be "address ->
+   * street".
+   * @returns The name of the field.
+   */
+  getFormFieldName(element, includePath) {
+    let fieldName = element.dataset['vegaForm'];
+    if (includePath) {
+      let currentVegaForm = findParent(element, 'vega-form');
+      /**
+       * The below method is e2e-test covered in
+       * @see {module:nested-vega-form-isValid-should-be-as-expected-when-value-changed}
+       */
+      /* istanbul ignore next */
+      while (currentVegaForm && currentVegaForm !== this.host) {
+        fieldName = currentVegaForm.dataset['vegaForm'] + ' -> ' + fieldName;
+        currentVegaForm = findParent(currentVegaForm, 'vega-form');
+      }
+    }
+    return fieldName;
+  }
+  /**
+   * Return true if the HTMLElement has data-vega-form property and it's not disabled and not invisible if these two properties have to be checked.
+   *
+   * @param {HTMLElement} element - The HTMLElement to check.
+   * @param {boolean} skipDisabled - If true, then disabled form fields will be skipped.
+   * @param {boolean} skipInvisible - If true, only visible elements will be visited.
+   * @returns a boolean value.
+   */
+  shouldVisitElement(element, skipDisabled, skipInvisible) {
+    return (this.getFormFieldName(element) &&
+      (!skipDisabled || !element['disabled']) &&
+      (!skipInvisible || isElementVisible(element)));
+  }
+  /**
+   * This function registers an observer with the ChangeManager that will be notified when a element
+   * delete operation is triggered
+   */
+  initFormFieldDisconnectedObserver() {
+    this.formFieldDisconnectedObserver = new Observer(this.canAcceptFormFieldDisconnectedOperation.bind(this), this.updateInvalidFieldPath.bind(this));
+    ChangeManager.register(FORM_FIELD_ELEMENT_DISCONNECTED, this.formFieldDisconnectedObserver);
+  }
+  /**
+   * If the deleted element is a child or grandchild of current vegaForm, the isValid of all these vegaForms will be updated.
+   *
+   * @param {DisconnectedElementOperationPayload} payload -  the delete element and vegaForm array.
+   * @returns {boolean} A boolean value.
+   */
+  canAcceptFormFieldDisconnectedOperation(payload) {
+    return this.invalidFieldPathMap.has(payload.host);
+  }
+  /**
+   * Get the fieldName of the deleted element in the current vegaForm, delete it from the invalidFieldPathSet array, and update isValid at the same time.
+   */
+  async updateInvalidFieldPath(payload) {
+    this.invalidFieldPathMap.delete(payload.host);
+    this.pendingValidFieldPathMap.delete(payload.host);
+  }
+  registerFormSubmitChangeManager() {
+    this.formEventsObserver = new Observer(this.canAcceptFormSubmitEvent.bind(this), this.handleSubmitEvents.bind(this));
+    ChangeManager.register(FORM_SUBMIT, this.formEventsObserver);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-form-field-enter-to-submit-e2e}
+   */
+  /* istanbul ignore next */
+  canAcceptFormSubmitEvent(payload) {
+    return this.isElementInCurrentForm(payload.host);
+  }
+  async handleSubmitEvents() {
+    const valid = await this.valid();
+    if (valid.isValid) {
+      const formValue = await this.getValue();
+      this.submitEventEmitter.emit(formValue);
+    }
+  }
+  registerFormResetChangeManager() {
+    this.formEventsObserver = new Observer(this.canAcceptFormResetEvent.bind(this), this.handleResetEvents.bind(this));
+    ChangeManager.register(FORM_RESET, this.formEventsObserver);
+  }
+  canAcceptFormResetEvent(payload) {
+    return this.isElementInCurrentForm(payload.host);
+  }
+  async handleResetEvents() {
+    await this.reset();
+    this.resetEventEmitter.emit();
+  }
+  registerFormFieldPendingValidChangeManager() {
+    this.formFieldPendingValidObserver = new Observer(this.canAcceptFormFieldPendingValid.bind(this), this.handleFieldPendingValid.bind(this));
+    ChangeManager.register(FORM_FIELD_PENDING_VALID_CHANGE, this.formFieldPendingValidObserver);
+  }
+  canAcceptFormFieldPendingValid(payload) {
+    return this.isElementInCurrentForm(payload.host);
+  }
+  handleFieldPendingValid(payload) {
+    if (typeof payload.detail === 'boolean') {
+      this.pendingValidFieldPathMap.delete(payload.host);
+    }
+    else {
+      this.pendingValidFieldPathMap.set(payload.host, payload.host.dataset['vegaForm']);
+    }
+  }
+  isElementInCurrentForm(element) {
+    return this.invalidFieldPathMap.has(element) || isParent(element, this.host);
+  }
+  async handleChildFormFieldElementValid(element, showError) {
+    const subject = domNodeSubjectFactory.getSubject(element, VegaInternalValid);
+    const isValid = await new Promise((resolve) => {
+      //This setTimeout method here to avoid the dom node subject observer not existing and blocks the promise status
+      const timerId = setTimeout(() => {
+        resolve(true);
+      }, 2000);
+      ChangeManager.notify(subject, {
+        host: element,
+        message: showError,
+        promiseResolve: resolve,
+        timerId,
+      });
+    });
+    return isValid;
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "isValid": ["watchIsValid"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaForm.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaForm.prototype, "submitEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaForm.prototype, "resetEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaForm.prototype, "validateEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaForm.prototype, "childEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaForm.prototype, "childFormValidateEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaForm.prototype, "childNotifyObserver", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaForm.prototype, "childNodeValueChangeObserver", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaForm.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaForm.style = vegaFormCss;
+
+export { VegaForm as vega_form };

package/dist/esm/vega-grid.entry.js

@@ -0,0 +1,95 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-187f71d1.js';
+import { f as formatAndValidResponsiveToken } from './design-token-44525832.js';
+import { s as sanitizeVegaComponent } from './component-cae24190.js';
+import { a as arrayToClassString } from './ui-0132dbb5.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-b3f6ac79.js';
+import './type-guard-467c9e3e.js';
+import './breakpoints-e59edf8d.js';
+import './ui-df46cc20.js';
+import './regex-dfe11abf.js';
+import './typography-a8fc4764.js';
+import './responsive-format-facade-4488d609.js';
+import './number-e2519d1c.js';
+import './pixel-f32c07ce.js';
+import './state-background-color-formatter-de7e6522.js';
+
+const vegaGridCss = ":host(.v-gap-0),.v-gap-0{gap:0px}:host(.v-gap-row-0),.v-gap-row-0{row-gap:0px}:host(.v-gap-col-0),.v-gap-col-0{column-gap:0px}:host(.v-gap-size-0),.v-gap-size-0{gap:0px}:host(.v-gap-row-size-0),.v-gap-row-size-0{row-gap:0px}:host(.v-gap-col-size-0),.v-gap-col-size-0{column-gap:0px}:host(.v-gap-size-4),.v-gap-size-4{gap:4px}:host(.v-gap-row-size-4),.v-gap-row-size-4{row-gap:4px}:host(.v-gap-col-size-4),.v-gap-col-size-4{column-gap:4px}:host(.v-gap-size-8),.v-gap-size-8{gap:8px}:host(.v-gap-row-size-8),.v-gap-row-size-8{row-gap:8px}:host(.v-gap-col-size-8),.v-gap-col-size-8{column-gap:8px}:host(.v-gap-size-12),.v-gap-size-12{gap:12px}:host(.v-gap-row-size-12),.v-gap-row-size-12{row-gap:12px}:host(.v-gap-col-size-12),.v-gap-col-size-12{column-gap:12px}:host(.v-gap-size-16),.v-gap-size-16{gap:16px}:host(.v-gap-row-size-16),.v-gap-row-size-16{row-gap:16px}:host(.v-gap-col-size-16),.v-gap-col-size-16{column-gap:16px}:host(.v-gap-size-20),.v-gap-size-20{gap:20px}:host(.v-gap-row-size-20),.v-gap-row-size-20{row-gap:20px}:host(.v-gap-col-size-20),.v-gap-col-size-20{column-gap:20px}:host(.v-gap-size-24),.v-gap-size-24{gap:24px}:host(.v-gap-row-size-24),.v-gap-row-size-24{row-gap:24px}:host(.v-gap-col-size-24),.v-gap-col-size-24{column-gap:24px}:host(.v-gap-size-32),.v-gap-size-32{gap:32px}:host(.v-gap-row-size-32),.v-gap-row-size-32{row-gap:32px}:host(.v-gap-col-size-32),.v-gap-col-size-32{column-gap:32px}:host(.v-gap-size-40),.v-gap-size-40{gap:40px}:host(.v-gap-row-size-40),.v-gap-row-size-40{row-gap:40px}:host(.v-gap-col-size-40),.v-gap-col-size-40{column-gap:40px}:host(.v-gap-size-48),.v-gap-size-48{gap:48px}:host(.v-gap-row-size-48),.v-gap-row-size-48{row-gap:48px}:host(.v-gap-col-size-48),.v-gap-col-size-48{column-gap:48px}:host(.v-gap-size-64),.v-gap-size-64{gap:64px}:host(.v-gap-row-size-64),.v-gap-row-size-64{row-gap:64px}:host(.v-gap-col-size-64),.v-gap-col-size-64{column-gap:64px}:host(.v-gap-size-72),.v-gap-size-72{gap:72px}:host(.v-gap-row-size-72),.v-gap-row-size-72{row-gap:72px}:host(.v-gap-col-size-72),.v-gap-col-size-72{column-gap:72px}:host(.v-gap-size-80),.v-gap-size-80{gap:80px}:host(.v-gap-row-size-80),.v-gap-row-size-80{row-gap:80px}:host(.v-gap-col-size-80),.v-gap-col-size-80{column-gap:80px}:host(.v-gap-size-112),.v-gap-size-112{gap:112px}:host(.v-gap-row-size-112),.v-gap-row-size-112{row-gap:112px}:host(.v-gap-col-size-112),.v-gap-col-size-112{column-gap:112px}:host(.v-gap-size-2),.v-gap-size-2{gap:2px}:host(.v-gap-row-size-2),.v-gap-row-size-2{row-gap:2px}:host(.v-gap-col-size-2),.v-gap-col-size-2{column-gap:2px}@media (min-width: 320px){:host(.S\\:v-gap-0),.S\\:v-gap-0{gap:0px}:host(.S\\:v-gap-row-0),.S\\:v-gap-row-0{row-gap:0px}:host(.S\\:v-gap-col-0),.S\\:v-gap-col-0{column-gap:0px}:host(.S\\:v-gap-size-0),.S\\:v-gap-size-0{gap:0px}:host(.S\\:v-gap-row-size-0),.S\\:v-gap-row-size-0{row-gap:0px}:host(.S\\:v-gap-col-size-0),.S\\:v-gap-col-size-0{column-gap:0px}:host(.S\\:v-gap-size-4),.S\\:v-gap-size-4{gap:4px}:host(.S\\:v-gap-row-size-4),.S\\:v-gap-row-size-4{row-gap:4px}:host(.S\\:v-gap-col-size-4),.S\\:v-gap-col-size-4{column-gap:4px}:host(.S\\:v-gap-size-8),.S\\:v-gap-size-8{gap:8px}:host(.S\\:v-gap-row-size-8),.S\\:v-gap-row-size-8{row-gap:8px}:host(.S\\:v-gap-col-size-8),.S\\:v-gap-col-size-8{column-gap:8px}:host(.S\\:v-gap-size-12),.S\\:v-gap-size-12{gap:12px}:host(.S\\:v-gap-row-size-12),.S\\:v-gap-row-size-12{row-gap:12px}:host(.S\\:v-gap-col-size-12),.S\\:v-gap-col-size-12{column-gap:12px}:host(.S\\:v-gap-size-16),.S\\:v-gap-size-16{gap:16px}:host(.S\\:v-gap-row-size-16),.S\\:v-gap-row-size-16{row-gap:16px}:host(.S\\:v-gap-col-size-16),.S\\:v-gap-col-size-16{column-gap:16px}:host(.S\\:v-gap-size-20),.S\\:v-gap-size-20{gap:20px}:host(.S\\:v-gap-row-size-20),.S\\:v-gap-row-size-20{row-gap:20px}:host(.S\\:v-gap-col-size-20),.S\\:v-gap-col-size-20{column-gap:20px}:host(.S\\:v-gap-size-24),.S\\:v-gap-size-24{gap:24px}:host(.S\\:v-gap-row-size-24),.S\\:v-gap-row-size-24{row-gap:24px}:host(.S\\:v-gap-col-size-24),.S\\:v-gap-col-size-24{column-gap:24px}:host(.S\\:v-gap-size-32),.S\\:v-gap-size-32{gap:32px}:host(.S\\:v-gap-row-size-32),.S\\:v-gap-row-size-32{row-gap:32px}:host(.S\\:v-gap-col-size-32),.S\\:v-gap-col-size-32{column-gap:32px}:host(.S\\:v-gap-size-40),.S\\:v-gap-size-40{gap:40px}:host(.S\\:v-gap-row-size-40),.S\\:v-gap-row-size-40{row-gap:40px}:host(.S\\:v-gap-col-size-40),.S\\:v-gap-col-size-40{column-gap:40px}:host(.S\\:v-gap-size-48),.S\\:v-gap-size-48{gap:48px}:host(.S\\:v-gap-row-size-48),.S\\:v-gap-row-size-48{row-gap:48px}:host(.S\\:v-gap-col-size-48),.S\\:v-gap-col-size-48{column-gap:48px}:host(.S\\:v-gap-size-64),.S\\:v-gap-size-64{gap:64px}:host(.S\\:v-gap-row-size-64),.S\\:v-gap-row-size-64{row-gap:64px}:host(.S\\:v-gap-col-size-64),.S\\:v-gap-col-size-64{column-gap:64px}:host(.S\\:v-gap-size-72),.S\\:v-gap-size-72{gap:72px}:host(.S\\:v-gap-row-size-72),.S\\:v-gap-row-size-72{row-gap:72px}:host(.S\\:v-gap-col-size-72),.S\\:v-gap-col-size-72{column-gap:72px}:host(.S\\:v-gap-size-80),.S\\:v-gap-size-80{gap:80px}:host(.S\\:v-gap-row-size-80),.S\\:v-gap-row-size-80{row-gap:80px}:host(.S\\:v-gap-col-size-80),.S\\:v-gap-col-size-80{column-gap:80px}:host(.S\\:v-gap-size-112),.S\\:v-gap-size-112{gap:112px}:host(.S\\:v-gap-row-size-112),.S\\:v-gap-row-size-112{row-gap:112px}:host(.S\\:v-gap-col-size-112),.S\\:v-gap-col-size-112{column-gap:112px}:host(.S\\:v-gap-size-2),.S\\:v-gap-size-2{gap:2px}:host(.S\\:v-gap-row-size-2),.S\\:v-gap-row-size-2{row-gap:2px}:host(.S\\:v-gap-col-size-2),.S\\:v-gap-col-size-2{column-gap:2px}}@media (min-width: 768px){:host(.M\\:v-gap-0),.M\\:v-gap-0{gap:0px}:host(.M\\:v-gap-row-0),.M\\:v-gap-row-0{row-gap:0px}:host(.M\\:v-gap-col-0),.M\\:v-gap-col-0{column-gap:0px}:host(.M\\:v-gap-size-0),.M\\:v-gap-size-0{gap:0px}:host(.M\\:v-gap-row-size-0),.M\\:v-gap-row-size-0{row-gap:0px}:host(.M\\:v-gap-col-size-0),.M\\:v-gap-col-size-0{column-gap:0px}:host(.M\\:v-gap-size-4),.M\\:v-gap-size-4{gap:4px}:host(.M\\:v-gap-row-size-4),.M\\:v-gap-row-size-4{row-gap:4px}:host(.M\\:v-gap-col-size-4),.M\\:v-gap-col-size-4{column-gap:4px}:host(.M\\:v-gap-size-8),.M\\:v-gap-size-8{gap:8px}:host(.M\\:v-gap-row-size-8),.M\\:v-gap-row-size-8{row-gap:8px}:host(.M\\:v-gap-col-size-8),.M\\:v-gap-col-size-8{column-gap:8px}:host(.M\\:v-gap-size-12),.M\\:v-gap-size-12{gap:12px}:host(.M\\:v-gap-row-size-12),.M\\:v-gap-row-size-12{row-gap:12px}:host(.M\\:v-gap-col-size-12),.M\\:v-gap-col-size-12{column-gap:12px}:host(.M\\:v-gap-size-16),.M\\:v-gap-size-16{gap:16px}:host(.M\\:v-gap-row-size-16),.M\\:v-gap-row-size-16{row-gap:16px}:host(.M\\:v-gap-col-size-16),.M\\:v-gap-col-size-16{column-gap:16px}:host(.M\\:v-gap-size-20),.M\\:v-gap-size-20{gap:20px}:host(.M\\:v-gap-row-size-20),.M\\:v-gap-row-size-20{row-gap:20px}:host(.M\\:v-gap-col-size-20),.M\\:v-gap-col-size-20{column-gap:20px}:host(.M\\:v-gap-size-24),.M\\:v-gap-size-24{gap:24px}:host(.M\\:v-gap-row-size-24),.M\\:v-gap-row-size-24{row-gap:24px}:host(.M\\:v-gap-col-size-24),.M\\:v-gap-col-size-24{column-gap:24px}:host(.M\\:v-gap-size-32),.M\\:v-gap-size-32{gap:32px}:host(.M\\:v-gap-row-size-32),.M\\:v-gap-row-size-32{row-gap:32px}:host(.M\\:v-gap-col-size-32),.M\\:v-gap-col-size-32{column-gap:32px}:host(.M\\:v-gap-size-40),.M\\:v-gap-size-40{gap:40px}:host(.M\\:v-gap-row-size-40),.M\\:v-gap-row-size-40{row-gap:40px}:host(.M\\:v-gap-col-size-40),.M\\:v-gap-col-size-40{column-gap:40px}:host(.M\\:v-gap-size-48),.M\\:v-gap-size-48{gap:48px}:host(.M\\:v-gap-row-size-48),.M\\:v-gap-row-size-48{row-gap:48px}:host(.M\\:v-gap-col-size-48),.M\\:v-gap-col-size-48{column-gap:48px}:host(.M\\:v-gap-size-64),.M\\:v-gap-size-64{gap:64px}:host(.M\\:v-gap-row-size-64),.M\\:v-gap-row-size-64{row-gap:64px}:host(.M\\:v-gap-col-size-64),.M\\:v-gap-col-size-64{column-gap:64px}:host(.M\\:v-gap-size-72),.M\\:v-gap-size-72{gap:72px}:host(.M\\:v-gap-row-size-72),.M\\:v-gap-row-size-72{row-gap:72px}:host(.M\\:v-gap-col-size-72),.M\\:v-gap-col-size-72{column-gap:72px}:host(.M\\:v-gap-size-80),.M\\:v-gap-size-80{gap:80px}:host(.M\\:v-gap-row-size-80),.M\\:v-gap-row-size-80{row-gap:80px}:host(.M\\:v-gap-col-size-80),.M\\:v-gap-col-size-80{column-gap:80px}:host(.M\\:v-gap-size-112),.M\\:v-gap-size-112{gap:112px}:host(.M\\:v-gap-row-size-112),.M\\:v-gap-row-size-112{row-gap:112px}:host(.M\\:v-gap-col-size-112),.M\\:v-gap-col-size-112{column-gap:112px}:host(.M\\:v-gap-size-2),.M\\:v-gap-size-2{gap:2px}:host(.M\\:v-gap-row-size-2),.M\\:v-gap-row-size-2{row-gap:2px}:host(.M\\:v-gap-col-size-2),.M\\:v-gap-col-size-2{column-gap:2px}}@media (min-width: 1024px){:host(.L\\:v-gap-0),.L\\:v-gap-0{gap:0px}:host(.L\\:v-gap-row-0),.L\\:v-gap-row-0{row-gap:0px}:host(.L\\:v-gap-col-0),.L\\:v-gap-col-0{column-gap:0px}:host(.L\\:v-gap-size-0),.L\\:v-gap-size-0{gap:0px}:host(.L\\:v-gap-row-size-0),.L\\:v-gap-row-size-0{row-gap:0px}:host(.L\\:v-gap-col-size-0),.L\\:v-gap-col-size-0{column-gap:0px}:host(.L\\:v-gap-size-4),.L\\:v-gap-size-4{gap:4px}:host(.L\\:v-gap-row-size-4),.L\\:v-gap-row-size-4{row-gap:4px}:host(.L\\:v-gap-col-size-4),.L\\:v-gap-col-size-4{column-gap:4px}:host(.L\\:v-gap-size-8),.L\\:v-gap-size-8{gap:8px}:host(.L\\:v-gap-row-size-8),.L\\:v-gap-row-size-8{row-gap:8px}:host(.L\\:v-gap-col-size-8),.L\\:v-gap-col-size-8{column-gap:8px}:host(.L\\:v-gap-size-12),.L\\:v-gap-size-12{gap:12px}:host(.L\\:v-gap-row-size-12),.L\\:v-gap-row-size-12{row-gap:12px}:host(.L\\:v-gap-col-size-12),.L\\:v-gap-col-size-12{column-gap:12px}:host(.L\\:v-gap-size-16),.L\\:v-gap-size-16{gap:16px}:host(.L\\:v-gap-row-size-16),.L\\:v-gap-row-size-16{row-gap:16px}:host(.L\\:v-gap-col-size-16),.L\\:v-gap-col-size-16{column-gap:16px}:host(.L\\:v-gap-size-20),.L\\:v-gap-size-20{gap:20px}:host(.L\\:v-gap-row-size-20),.L\\:v-gap-row-size-20{row-gap:20px}:host(.L\\:v-gap-col-size-20),.L\\:v-gap-col-size-20{column-gap:20px}:host(.L\\:v-gap-size-24),.L\\:v-gap-size-24{gap:24px}:host(.L\\:v-gap-row-size-24),.L\\:v-gap-row-size-24{row-gap:24px}:host(.L\\:v-gap-col-size-24),.L\\:v-gap-col-size-24{column-gap:24px}:host(.L\\:v-gap-size-32),.L\\:v-gap-size-32{gap:32px}:host(.L\\:v-gap-row-size-32),.L\\:v-gap-row-size-32{row-gap:32px}:host(.L\\:v-gap-col-size-32),.L\\:v-gap-col-size-32{column-gap:32px}:host(.L\\:v-gap-size-40),.L\\:v-gap-size-40{gap:40px}:host(.L\\:v-gap-row-size-40),.L\\:v-gap-row-size-40{row-gap:40px}:host(.L\\:v-gap-col-size-40),.L\\:v-gap-col-size-40{column-gap:40px}:host(.L\\:v-gap-size-48),.L\\:v-gap-size-48{gap:48px}:host(.L\\:v-gap-row-size-48),.L\\:v-gap-row-size-48{row-gap:48px}:host(.L\\:v-gap-col-size-48),.L\\:v-gap-col-size-48{column-gap:48px}:host(.L\\:v-gap-size-64),.L\\:v-gap-size-64{gap:64px}:host(.L\\:v-gap-row-size-64),.L\\:v-gap-row-size-64{row-gap:64px}:host(.L\\:v-gap-col-size-64),.L\\:v-gap-col-size-64{column-gap:64px}:host(.L\\:v-gap-size-72),.L\\:v-gap-size-72{gap:72px}:host(.L\\:v-gap-row-size-72),.L\\:v-gap-row-size-72{row-gap:72px}:host(.L\\:v-gap-col-size-72),.L\\:v-gap-col-size-72{column-gap:72px}:host(.L\\:v-gap-size-80),.L\\:v-gap-size-80{gap:80px}:host(.L\\:v-gap-row-size-80),.L\\:v-gap-row-size-80{row-gap:80px}:host(.L\\:v-gap-col-size-80),.L\\:v-gap-col-size-80{column-gap:80px}:host(.L\\:v-gap-size-112),.L\\:v-gap-size-112{gap:112px}:host(.L\\:v-gap-row-size-112),.L\\:v-gap-row-size-112{row-gap:112px}:host(.L\\:v-gap-col-size-112),.L\\:v-gap-col-size-112{column-gap:112px}:host(.L\\:v-gap-size-2),.L\\:v-gap-size-2{gap:2px}:host(.L\\:v-gap-row-size-2),.L\\:v-gap-row-size-2{row-gap:2px}:host(.L\\:v-gap-col-size-2),.L\\:v-gap-col-size-2{column-gap:2px}}@media (min-width: 1440px){:host(.XL\\:v-gap-0),.XL\\:v-gap-0{gap:0px}:host(.XL\\:v-gap-row-0),.XL\\:v-gap-row-0{row-gap:0px}:host(.XL\\:v-gap-col-0),.XL\\:v-gap-col-0{column-gap:0px}:host(.XL\\:v-gap-size-0),.XL\\:v-gap-size-0{gap:0px}:host(.XL\\:v-gap-row-size-0),.XL\\:v-gap-row-size-0{row-gap:0px}:host(.XL\\:v-gap-col-size-0),.XL\\:v-gap-col-size-0{column-gap:0px}:host(.XL\\:v-gap-size-4),.XL\\:v-gap-size-4{gap:4px}:host(.XL\\:v-gap-row-size-4),.XL\\:v-gap-row-size-4{row-gap:4px}:host(.XL\\:v-gap-col-size-4),.XL\\:v-gap-col-size-4{column-gap:4px}:host(.XL\\:v-gap-size-8),.XL\\:v-gap-size-8{gap:8px}:host(.XL\\:v-gap-row-size-8),.XL\\:v-gap-row-size-8{row-gap:8px}:host(.XL\\:v-gap-col-size-8),.XL\\:v-gap-col-size-8{column-gap:8px}:host(.XL\\:v-gap-size-12),.XL\\:v-gap-size-12{gap:12px}:host(.XL\\:v-gap-row-size-12),.XL\\:v-gap-row-size-12{row-gap:12px}:host(.XL\\:v-gap-col-size-12),.XL\\:v-gap-col-size-12{column-gap:12px}:host(.XL\\:v-gap-size-16),.XL\\:v-gap-size-16{gap:16px}:host(.XL\\:v-gap-row-size-16),.XL\\:v-gap-row-size-16{row-gap:16px}:host(.XL\\:v-gap-col-size-16),.XL\\:v-gap-col-size-16{column-gap:16px}:host(.XL\\:v-gap-size-20),.XL\\:v-gap-size-20{gap:20px}:host(.XL\\:v-gap-row-size-20),.XL\\:v-gap-row-size-20{row-gap:20px}:host(.XL\\:v-gap-col-size-20),.XL\\:v-gap-col-size-20{column-gap:20px}:host(.XL\\:v-gap-size-24),.XL\\:v-gap-size-24{gap:24px}:host(.XL\\:v-gap-row-size-24),.XL\\:v-gap-row-size-24{row-gap:24px}:host(.XL\\:v-gap-col-size-24),.XL\\:v-gap-col-size-24{column-gap:24px}:host(.XL\\:v-gap-size-32),.XL\\:v-gap-size-32{gap:32px}:host(.XL\\:v-gap-row-size-32),.XL\\:v-gap-row-size-32{row-gap:32px}:host(.XL\\:v-gap-col-size-32),.XL\\:v-gap-col-size-32{column-gap:32px}:host(.XL\\:v-gap-size-40),.XL\\:v-gap-size-40{gap:40px}:host(.XL\\:v-gap-row-size-40),.XL\\:v-gap-row-size-40{row-gap:40px}:host(.XL\\:v-gap-col-size-40),.XL\\:v-gap-col-size-40{column-gap:40px}:host(.XL\\:v-gap-size-48),.XL\\:v-gap-size-48{gap:48px}:host(.XL\\:v-gap-row-size-48),.XL\\:v-gap-row-size-48{row-gap:48px}:host(.XL\\:v-gap-col-size-48),.XL\\:v-gap-col-size-48{column-gap:48px}:host(.XL\\:v-gap-size-64),.XL\\:v-gap-size-64{gap:64px}:host(.XL\\:v-gap-row-size-64),.XL\\:v-gap-row-size-64{row-gap:64px}:host(.XL\\:v-gap-col-size-64),.XL\\:v-gap-col-size-64{column-gap:64px}:host(.XL\\:v-gap-size-72),.XL\\:v-gap-size-72{gap:72px}:host(.XL\\:v-gap-row-size-72),.XL\\:v-gap-row-size-72{row-gap:72px}:host(.XL\\:v-gap-col-size-72),.XL\\:v-gap-col-size-72{column-gap:72px}:host(.XL\\:v-gap-size-80),.XL\\:v-gap-size-80{gap:80px}:host(.XL\\:v-gap-row-size-80),.XL\\:v-gap-row-size-80{row-gap:80px}:host(.XL\\:v-gap-col-size-80),.XL\\:v-gap-col-size-80{column-gap:80px}:host(.XL\\:v-gap-size-112),.XL\\:v-gap-size-112{gap:112px}:host(.XL\\:v-gap-row-size-112),.XL\\:v-gap-row-size-112{row-gap:112px}:host(.XL\\:v-gap-col-size-112),.XL\\:v-gap-col-size-112{column-gap:112px}:host(.XL\\:v-gap-size-2),.XL\\:v-gap-size-2{gap:2px}:host(.XL\\:v-gap-row-size-2),.XL\\:v-gap-row-size-2{row-gap:2px}:host(.XL\\:v-gap-col-size-2),.XL\\:v-gap-col-size-2{column-gap:2px}}:host{display:grid}:host(.v-grid-rows-1){grid-template-rows:repeat(1, minmax(0, 1fr))}:host(.v-grid-rows-2){grid-template-rows:repeat(2, minmax(0, 1fr))}:host(.v-grid-rows-3){grid-template-rows:repeat(3, minmax(0, 1fr))}:host(.v-grid-rows-4){grid-template-rows:repeat(4, minmax(0, 1fr))}:host(.v-grid-rows-5){grid-template-rows:repeat(5, minmax(0, 1fr))}:host(.v-grid-rows-6){grid-template-rows:repeat(6, minmax(0, 1fr))}:host(.v-grid-rows-7){grid-template-rows:repeat(7, minmax(0, 1fr))}:host(.v-grid-rows-8){grid-template-rows:repeat(8, minmax(0, 1fr))}:host(.v-grid-rows-9){grid-template-rows:repeat(9, minmax(0, 1fr))}:host(.v-grid-rows-10){grid-template-rows:repeat(10, minmax(0, 1fr))}:host(.v-grid-rows-11){grid-template-rows:repeat(11, minmax(0, 1fr))}:host(.v-grid-rows-12){grid-template-rows:repeat(12, minmax(0, 1fr))}:host(.v-grid-rows-1-auto){grid-template-rows:repeat(1, auto)}:host(.v-grid-rows-2-auto){grid-template-rows:repeat(2, auto)}:host(.v-grid-rows-3-auto){grid-template-rows:repeat(3, auto)}:host(.v-grid-rows-4-auto){grid-template-rows:repeat(4, auto)}:host(.v-grid-rows-5-auto){grid-template-rows:repeat(5, auto)}:host(.v-grid-rows-6-auto){grid-template-rows:repeat(6, auto)}:host(.v-grid-rows-7-auto){grid-template-rows:repeat(7, auto)}:host(.v-grid-rows-8-auto){grid-template-rows:repeat(8, auto)}:host(.v-grid-rows-9-auto){grid-template-rows:repeat(9, auto)}:host(.v-grid-rows-10-auto){grid-template-rows:repeat(1, auto)}:host(.v-grid-rows-11-auto){grid-template-rows:repeat(1, auto)}:host(.v-grid-rows-12-auto){grid-template-rows:repeat(1, auto)}:host(.v-grid-cols-1){grid-template-columns:repeat(1, minmax(0, 1fr))}:host(.v-grid-cols-2){grid-template-columns:repeat(2, minmax(0, 1fr))}:host(.v-grid-cols-3){grid-template-columns:repeat(3, minmax(0, 1fr))}:host(.v-grid-cols-4){grid-template-columns:repeat(4, minmax(0, 1fr))}:host(.v-grid-cols-5){grid-template-columns:repeat(5, minmax(0, 1fr))}:host(.v-grid-cols-6){grid-template-columns:repeat(6, minmax(0, 1fr))}:host(.v-grid-cols-7){grid-template-columns:repeat(7, minmax(0, 1fr))}:host(.v-grid-cols-8){grid-template-columns:repeat(8, minmax(0, 1fr))}:host(.v-grid-cols-9){grid-template-columns:repeat(9, minmax(0, 1fr))}:host(.v-grid-cols-10){grid-template-columns:repeat(10, minmax(0, 1fr))}:host(.v-grid-cols-11){grid-template-columns:repeat(11, minmax(0, 1fr))}:host(.v-grid-cols-12){grid-template-columns:repeat(12, minmax(0, 1fr))}:host(.v-grid-cols-1-auto){grid-template-columns:repeat(1, auto)}:host(.v-grid-cols-2-auto){grid-template-columns:repeat(2, auto)}:host(.v-grid-cols-3-auto){grid-template-columns:repeat(3, auto)}:host(.v-grid-cols-4-auto){grid-template-columns:repeat(4, auto)}:host(.v-grid-cols-5-auto){grid-template-columns:repeat(5, auto)}:host(.v-grid-cols-6-auto){grid-template-columns:repeat(6, auto)}:host(.v-grid-cols-7-auto){grid-template-columns:repeat(7, auto)}:host(.v-grid-cols-8-auto){grid-template-columns:repeat(8, auto)}:host(.v-grid-cols-9-auto){grid-template-columns:repeat(9, auto)}:host(.v-grid-cols-10-auto){grid-template-columns:repeat(1, auto)}:host(.v-grid-cols-11-auto){grid-template-columns:repeat(1, auto)}:host(.v-grid-cols-12-auto){grid-template-columns:repeat(1, auto)}@media (min-width: 320px){:host(.S\\:v-grid-rows-1){grid-template-rows:repeat(1, minmax(0, 1fr))}:host(.S\\:v-grid-rows-2){grid-template-rows:repeat(2, minmax(0, 1fr))}:host(.S\\:v-grid-rows-3){grid-template-rows:repeat(3, minmax(0, 1fr))}:host(.S\\:v-grid-rows-4){grid-template-rows:repeat(4, minmax(0, 1fr))}:host(.S\\:v-grid-rows-5){grid-template-rows:repeat(5, minmax(0, 1fr))}:host(.S\\:v-grid-rows-6){grid-template-rows:repeat(6, minmax(0, 1fr))}:host(.S\\:v-grid-rows-7){grid-template-rows:repeat(7, minmax(0, 1fr))}:host(.S\\:v-grid-rows-8){grid-template-rows:repeat(8, minmax(0, 1fr))}:host(.S\\:v-grid-rows-9){grid-template-rows:repeat(9, minmax(0, 1fr))}:host(.S\\:v-grid-rows-10){grid-template-rows:repeat(10, minmax(0, 1fr))}:host(.S\\:v-grid-rows-11){grid-template-rows:repeat(11, minmax(0, 1fr))}:host(.S\\:v-grid-rows-12){grid-template-rows:repeat(12, minmax(0, 1fr))}:host(.S\\:v-grid-rows-1-auto){grid-template-rows:repeat(1, auto)}:host(.S\\:v-grid-rows-2-auto){grid-template-rows:repeat(2, auto)}:host(.S\\:v-grid-rows-3-auto){grid-template-rows:repeat(3, auto)}:host(.S\\:v-grid-rows-4-auto){grid-template-rows:repeat(4, auto)}:host(.S\\:v-grid-rows-5-auto){grid-template-rows:repeat(5, auto)}:host(.S\\:v-grid-rows-6-auto){grid-template-rows:repeat(6, auto)}:host(.S\\:v-grid-rows-7-auto){grid-template-rows:repeat(7, auto)}:host(.S\\:v-grid-rows-8-auto){grid-template-rows:repeat(8, auto)}:host(.S\\:v-grid-rows-9-auto){grid-template-rows:repeat(9, auto)}:host(.S\\:v-grid-rows-10-auto){grid-template-rows:repeat(1, auto)}:host(.S\\:v-grid-rows-11-auto){grid-template-rows:repeat(1, auto)}:host(.S\\:v-grid-rows-12-auto){grid-template-rows:repeat(1, auto)}}@media (min-width: 768px){:host(.M\\:v-grid-rows-1){grid-template-rows:repeat(1, minmax(0, 1fr))}:host(.M\\:v-grid-rows-2){grid-template-rows:repeat(2, minmax(0, 1fr))}:host(.M\\:v-grid-rows-3){grid-template-rows:repeat(3, minmax(0, 1fr))}:host(.M\\:v-grid-rows-4){grid-template-rows:repeat(4, minmax(0, 1fr))}:host(.M\\:v-grid-rows-5){grid-template-rows:repeat(5, minmax(0, 1fr))}:host(.M\\:v-grid-rows-6){grid-template-rows:repeat(6, minmax(0, 1fr))}:host(.M\\:v-grid-rows-7){grid-template-rows:repeat(7, minmax(0, 1fr))}:host(.M\\:v-grid-rows-8){grid-template-rows:repeat(8, minmax(0, 1fr))}:host(.M\\:v-grid-rows-9){grid-template-rows:repeat(9, minmax(0, 1fr))}:host(.M\\:v-grid-rows-10){grid-template-rows:repeat(10, minmax(0, 1fr))}:host(.M\\:v-grid-rows-11){grid-template-rows:repeat(11, minmax(0, 1fr))}:host(.M\\:v-grid-rows-12){grid-template-rows:repeat(12, minmax(0, 1fr))}:host(.M\\:v-grid-rows-1-auto){grid-template-rows:repeat(1, auto)}:host(.M\\:v-grid-rows-2-auto){grid-template-rows:repeat(2, auto)}:host(.M\\:v-grid-rows-3-auto){grid-template-rows:repeat(3, auto)}:host(.M\\:v-grid-rows-4-auto){grid-template-rows:repeat(4, auto)}:host(.M\\:v-grid-rows-5-auto){grid-template-rows:repeat(5, auto)}:host(.M\\:v-grid-rows-6-auto){grid-template-rows:repeat(6, auto)}:host(.M\\:v-grid-rows-7-auto){grid-template-rows:repeat(7, auto)}:host(.M\\:v-grid-rows-8-auto){grid-template-rows:repeat(8, auto)}:host(.M\\:v-grid-rows-9-auto){grid-template-rows:repeat(9, auto)}:host(.M\\:v-grid-rows-10-auto){grid-template-rows:repeat(1, auto)}:host(.M\\:v-grid-rows-11-auto){grid-template-rows:repeat(1, auto)}:host(.M\\:v-grid-rows-12-auto){grid-template-rows:repeat(1, auto)}}@media (min-width: 1024px){:host(.L\\:v-grid-rows-1){grid-template-rows:repeat(1, minmax(0, 1fr))}:host(.L\\:v-grid-rows-2){grid-template-rows:repeat(2, minmax(0, 1fr))}:host(.L\\:v-grid-rows-3){grid-template-rows:repeat(3, minmax(0, 1fr))}:host(.L\\:v-grid-rows-4){grid-template-rows:repeat(4, minmax(0, 1fr))}:host(.L\\:v-grid-rows-5){grid-template-rows:repeat(5, minmax(0, 1fr))}:host(.L\\:v-grid-rows-6){grid-template-rows:repeat(6, minmax(0, 1fr))}:host(.L\\:v-grid-rows-7){grid-template-rows:repeat(7, minmax(0, 1fr))}:host(.L\\:v-grid-rows-8){grid-template-rows:repeat(8, minmax(0, 1fr))}:host(.L\\:v-grid-rows-9){grid-template-rows:repeat(9, minmax(0, 1fr))}:host(.L\\:v-grid-rows-10){grid-template-rows:repeat(10, minmax(0, 1fr))}:host(.L\\:v-grid-rows-11){grid-template-rows:repeat(11, minmax(0, 1fr))}:host(.L\\:v-grid-rows-12){grid-template-rows:repeat(12, minmax(0, 1fr))}:host(.L\\:v-grid-rows-1-auto){grid-template-rows:repeat(1, auto)}:host(.L\\:v-grid-rows-2-auto){grid-template-rows:repeat(2, auto)}:host(.L\\:v-grid-rows-3-auto){grid-template-rows:repeat(3, auto)}:host(.L\\:v-grid-rows-4-auto){grid-template-rows:repeat(4, auto)}:host(.L\\:v-grid-rows-5-auto){grid-template-rows:repeat(5, auto)}:host(.L\\:v-grid-rows-6-auto){grid-template-rows:repeat(6, auto)}:host(.L\\:v-grid-rows-7-auto){grid-template-rows:repeat(7, auto)}:host(.L\\:v-grid-rows-8-auto){grid-template-rows:repeat(8, auto)}:host(.L\\:v-grid-rows-9-auto){grid-template-rows:repeat(9, auto)}:host(.L\\:v-grid-rows-10-auto){grid-template-rows:repeat(1, auto)}:host(.L\\:v-grid-rows-11-auto){grid-template-rows:repeat(1, auto)}:host(.L\\:v-grid-rows-12-auto){grid-template-rows:repeat(1, auto)}}@media (min-width: 1440px){:host(.XL\\:v-grid-rows-1){grid-template-rows:repeat(1, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-2){grid-template-rows:repeat(2, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-3){grid-template-rows:repeat(3, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-4){grid-template-rows:repeat(4, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-5){grid-template-rows:repeat(5, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-6){grid-template-rows:repeat(6, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-7){grid-template-rows:repeat(7, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-8){grid-template-rows:repeat(8, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-9){grid-template-rows:repeat(9, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-10){grid-template-rows:repeat(10, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-11){grid-template-rows:repeat(11, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-12){grid-template-rows:repeat(12, minmax(0, 1fr))}:host(.XL\\:v-grid-rows-1-auto){grid-template-rows:repeat(1, auto)}:host(.XL\\:v-grid-rows-2-auto){grid-template-rows:repeat(2, auto)}:host(.XL\\:v-grid-rows-3-auto){grid-template-rows:repeat(3, auto)}:host(.XL\\:v-grid-rows-4-auto){grid-template-rows:repeat(4, auto)}:host(.XL\\:v-grid-rows-5-auto){grid-template-rows:repeat(5, auto)}:host(.XL\\:v-grid-rows-6-auto){grid-template-rows:repeat(6, auto)}:host(.XL\\:v-grid-rows-7-auto){grid-template-rows:repeat(7, auto)}:host(.XL\\:v-grid-rows-8-auto){grid-template-rows:repeat(8, auto)}:host(.XL\\:v-grid-rows-9-auto){grid-template-rows:repeat(9, auto)}:host(.XL\\:v-grid-rows-10-auto){grid-template-rows:repeat(1, auto)}:host(.XL\\:v-grid-rows-11-auto){grid-template-rows:repeat(1, auto)}:host(.XL\\:v-grid-rows-12-auto){grid-template-rows:repeat(1, auto)}}@media (min-width: 320px){:host(.S\\:v-grid-cols-1){grid-template-columns:repeat(1, minmax(0, 1fr))}:host(.S\\:v-grid-cols-2){grid-template-columns:repeat(2, minmax(0, 1fr))}:host(.S\\:v-grid-cols-3){grid-template-columns:repeat(3, minmax(0, 1fr))}:host(.S\\:v-grid-cols-4){grid-template-columns:repeat(4, minmax(0, 1fr))}:host(.S\\:v-grid-cols-5){grid-template-columns:repeat(5, minmax(0, 1fr))}:host(.S\\:v-grid-cols-6){grid-template-columns:repeat(6, minmax(0, 1fr))}:host(.S\\:v-grid-cols-7){grid-template-columns:repeat(7, minmax(0, 1fr))}:host(.S\\:v-grid-cols-8){grid-template-columns:repeat(8, minmax(0, 1fr))}:host(.S\\:v-grid-cols-9){grid-template-columns:repeat(9, minmax(0, 1fr))}:host(.S\\:v-grid-cols-10){grid-template-columns:repeat(10, minmax(0, 1fr))}:host(.S\\:v-grid-cols-11){grid-template-columns:repeat(11, minmax(0, 1fr))}:host(.S\\:v-grid-cols-12){grid-template-columns:repeat(12, minmax(0, 1fr))}:host(.S\\:v-grid-cols-1-auto){grid-template-columns:repeat(1, auto)}:host(.S\\:v-grid-cols-2-auto){grid-template-columns:repeat(2, auto)}:host(.S\\:v-grid-cols-3-auto){grid-template-columns:repeat(3, auto)}:host(.S\\:v-grid-cols-4-auto){grid-template-columns:repeat(4, auto)}:host(.S\\:v-grid-cols-5-auto){grid-template-columns:repeat(5, auto)}:host(.S\\:v-grid-cols-6-auto){grid-template-columns:repeat(6, auto)}:host(.S\\:v-grid-cols-7-auto){grid-template-columns:repeat(7, auto)}:host(.S\\:v-grid-cols-8-auto){grid-template-columns:repeat(8, auto)}:host(.S\\:v-grid-cols-9-auto){grid-template-columns:repeat(9, auto)}:host(.S\\:v-grid-cols-10-auto){grid-template-columns:repeat(1, auto)}:host(.S\\:v-grid-cols-11-auto){grid-template-columns:repeat(1, auto)}:host(.S\\:v-grid-cols-12-auto){grid-template-columns:repeat(1, auto)}}@media (min-width: 768px){:host(.M\\:v-grid-cols-1){grid-template-columns:repeat(1, minmax(0, 1fr))}:host(.M\\:v-grid-cols-2){grid-template-columns:repeat(2, minmax(0, 1fr))}:host(.M\\:v-grid-cols-3){grid-template-columns:repeat(3, minmax(0, 1fr))}:host(.M\\:v-grid-cols-4){grid-template-columns:repeat(4, minmax(0, 1fr))}:host(.M\\:v-grid-cols-5){grid-template-columns:repeat(5, minmax(0, 1fr))}:host(.M\\:v-grid-cols-6){grid-template-columns:repeat(6, minmax(0, 1fr))}:host(.M\\:v-grid-cols-7){grid-template-columns:repeat(7, minmax(0, 1fr))}:host(.M\\:v-grid-cols-8){grid-template-columns:repeat(8, minmax(0, 1fr))}:host(.M\\:v-grid-cols-9){grid-template-columns:repeat(9, minmax(0, 1fr))}:host(.M\\:v-grid-cols-10){grid-template-columns:repeat(10, minmax(0, 1fr))}:host(.M\\:v-grid-cols-11){grid-template-columns:repeat(11, minmax(0, 1fr))}:host(.M\\:v-grid-cols-12){grid-template-columns:repeat(12, minmax(0, 1fr))}:host(.M\\:v-grid-cols-1-auto){grid-template-columns:repeat(1, auto)}:host(.M\\:v-grid-cols-2-auto){grid-template-columns:repeat(2, auto)}:host(.M\\:v-grid-cols-3-auto){grid-template-columns:repeat(3, auto)}:host(.M\\:v-grid-cols-4-auto){grid-template-columns:repeat(4, auto)}:host(.M\\:v-grid-cols-5-auto){grid-template-columns:repeat(5, auto)}:host(.M\\:v-grid-cols-6-auto){grid-template-columns:repeat(6, auto)}:host(.M\\:v-grid-cols-7-auto){grid-template-columns:repeat(7, auto)}:host(.M\\:v-grid-cols-8-auto){grid-template-columns:repeat(8, auto)}:host(.M\\:v-grid-cols-9-auto){grid-template-columns:repeat(9, auto)}:host(.M\\:v-grid-cols-10-auto){grid-template-columns:repeat(1, auto)}:host(.M\\:v-grid-cols-11-auto){grid-template-columns:repeat(1, auto)}:host(.M\\:v-grid-cols-12-auto){grid-template-columns:repeat(1, auto)}}@media (min-width: 1024px){:host(.L\\:v-grid-cols-1){grid-template-columns:repeat(1, minmax(0, 1fr))}:host(.L\\:v-grid-cols-2){grid-template-columns:repeat(2, minmax(0, 1fr))}:host(.L\\:v-grid-cols-3){grid-template-columns:repeat(3, minmax(0, 1fr))}:host(.L\\:v-grid-cols-4){grid-template-columns:repeat(4, minmax(0, 1fr))}:host(.L\\:v-grid-cols-5){grid-template-columns:repeat(5, minmax(0, 1fr))}:host(.L\\:v-grid-cols-6){grid-template-columns:repeat(6, minmax(0, 1fr))}:host(.L\\:v-grid-cols-7){grid-template-columns:repeat(7, minmax(0, 1fr))}:host(.L\\:v-grid-cols-8){grid-template-columns:repeat(8, minmax(0, 1fr))}:host(.L\\:v-grid-cols-9){grid-template-columns:repeat(9, minmax(0, 1fr))}:host(.L\\:v-grid-cols-10){grid-template-columns:repeat(10, minmax(0, 1fr))}:host(.L\\:v-grid-cols-11){grid-template-columns:repeat(11, minmax(0, 1fr))}:host(.L\\:v-grid-cols-12){grid-template-columns:repeat(12, minmax(0, 1fr))}:host(.L\\:v-grid-cols-1-auto){grid-template-columns:repeat(1, auto)}:host(.L\\:v-grid-cols-2-auto){grid-template-columns:repeat(2, auto)}:host(.L\\:v-grid-cols-3-auto){grid-template-columns:repeat(3, auto)}:host(.L\\:v-grid-cols-4-auto){grid-template-columns:repeat(4, auto)}:host(.L\\:v-grid-cols-5-auto){grid-template-columns:repeat(5, auto)}:host(.L\\:v-grid-cols-6-auto){grid-template-columns:repeat(6, auto)}:host(.L\\:v-grid-cols-7-auto){grid-template-columns:repeat(7, auto)}:host(.L\\:v-grid-cols-8-auto){grid-template-columns:repeat(8, auto)}:host(.L\\:v-grid-cols-9-auto){grid-template-columns:repeat(9, auto)}:host(.L\\:v-grid-cols-10-auto){grid-template-columns:repeat(1, auto)}:host(.L\\:v-grid-cols-11-auto){grid-template-columns:repeat(1, auto)}:host(.L\\:v-grid-cols-12-auto){grid-template-columns:repeat(1, auto)}}@media (min-width: 1440px){:host(.XL\\:v-grid-cols-1){grid-template-columns:repeat(1, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-2){grid-template-columns:repeat(2, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-3){grid-template-columns:repeat(3, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-4){grid-template-columns:repeat(4, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-5){grid-template-columns:repeat(5, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-6){grid-template-columns:repeat(6, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-7){grid-template-columns:repeat(7, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-8){grid-template-columns:repeat(8, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-9){grid-template-columns:repeat(9, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-10){grid-template-columns:repeat(10, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-11){grid-template-columns:repeat(11, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-12){grid-template-columns:repeat(12, minmax(0, 1fr))}:host(.XL\\:v-grid-cols-1-auto){grid-template-columns:repeat(1, auto)}:host(.XL\\:v-grid-cols-2-auto){grid-template-columns:repeat(2, auto)}:host(.XL\\:v-grid-cols-3-auto){grid-template-columns:repeat(3, auto)}:host(.XL\\:v-grid-cols-4-auto){grid-template-columns:repeat(4, auto)}:host(.XL\\:v-grid-cols-5-auto){grid-template-columns:repeat(5, auto)}:host(.XL\\:v-grid-cols-6-auto){grid-template-columns:repeat(6, auto)}:host(.XL\\:v-grid-cols-7-auto){grid-template-columns:repeat(7, auto)}:host(.XL\\:v-grid-cols-8-auto){grid-template-columns:repeat(8, auto)}:host(.XL\\:v-grid-cols-9-auto){grid-template-columns:repeat(9, auto)}:host(.XL\\:v-grid-cols-10-auto){grid-template-columns:repeat(1, auto)}:host(.XL\\:v-grid-cols-11-auto){grid-template-columns:repeat(1, auto)}:host(.XL\\:v-grid-cols-12-auto){grid-template-columns:repeat(1, auto)}}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaGrid = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    /**
+     * Determines the configuration of the grid columns.
+     *    It can be provided as an integer, string, or a responsive map
+     *    using key-value pairs.
+     *
+     * If provided as an integer from 1 to 12, each column will have the same width.
+     *    The CSS for this configuration is `grid-template-columns: repeat(number, minmax(0, 1fr))`.
+     *
+     * If provided as a string in the format of n-auto
+     *    (e.g., `1-auto`, `2-auto`, ..., `12-auto`),
+     *    each column will have auto width. The CSS for this configuration is
+     *    `grid-template-columns: repeat(number, auto)`.
+     *
+     * Alternatively, you can use a responsive map to define different column configurations
+     *    for various breakpoints. The keys in the map should represent the breakpoints,
+     *    such as `default` or `L`, and the values can be integers or strings following the
+     *    same patterns mentioned above.
+     *
+     * @version 1.3.0
+     */
+    this.column = 1;
+    /**
+     * Determines the configuration of the grid rows.
+     *    It can be provided as an integer, string, or a responsive map
+     *    using key-value pairs.
+     *
+     * If provided as an integer from 1 to 6, each row will have the same height.
+     *    The CSS for this configuration is `grid-template-rows: repeat(number, minmax(0, 1fr))`.
+     *
+     * If provided as a string in the format of n-auto
+     *    (e.g., `1-auto`, `2-auto`, ..., `6-auto`),
+     *    each row will have auto height. The CSS for this configuration is
+     *    `grid-template-rows: repeat(number, auto)`.
+     *
+     * Alternatively, you can use a responsive map to define different row configurations
+     *    for various breakpoints. The keys in the map should represent the breakpoints,
+     *    such as `default` or `L`, and the values can be integers or strings following the
+     *    same patterns mentioned above.
+     *
+     * @version 1.3.0
+     */
+    this.row = 1;
+  }
+  render() {
+    const classNames = [
+      formatAndValidResponsiveToken(this.column, 'gridColumn'),
+      formatAndValidResponsiveToken(this.row, 'gridRow'),
+      formatAndValidResponsiveToken(this.gap, 'gap'),
+    ];
+    return sanitizeVegaComponent(h(Host, { class: arrayToClassString(classNames) }, h("slot", null)), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaGrid.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaGrid.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaGrid.style = vegaGridCss;
+
+export { VegaGrid as vega_grid };