@dialpad/dialtone-vue 3.210.0 → 3.211.0-next.1

package/dist/lib/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../components/input/input.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"[rootClass, 'd-input__root', { 'd-input--hidden': hidden }]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n    data-qa=\"dt-input\"\n  >\n    <label\n      class=\"d-input__label\"\n      :aria-details=\"$slots.description || description ? descriptionKey : undefined\"\n      data-qa=\"dt-input-label-wrapper\"\n    >\n      <!-- @slot Slot for label, defaults to label prop -->\n      <slot name=\"labelSlot\">\n        <div\n          v-if=\"labelVisible && label\"\n          ref=\"label\"\n          data-qa=\"dt-input-label\"\n          :class=\"[\n            'd-input__label-text',\n            'd-label',\n            labelSizeClasses[size],\n          ]\"\n        >\n          {{ label }}\n        </div>\n      </slot>\n      <div\n        v-if=\"hasSlotContent($slots.description) || description || shouldValidateLength\"\n        :id=\"descriptionKey\"\n        ref=\"description\"\n        :class=\"[\n          'd-input__description',\n          'd-description',\n          descriptionSizeClasses[size],\n        ]\"\n        data-qa=\"dt-input-description\"\n      >\n        <div\n          v-if=\"hasSlotContent($slots.description) || description\"\n        >\n          <!-- @slot Slot for description, defaults to description prop -->\n          <slot name=\"description\">{{ description }}</slot>\n        </div>\n        <div\n          v-if=\"shouldValidateLength\"\n          data-qa=\"dt-input-length-description\"\n          class=\"d-input__length-description\"\n        >\n          {{ validationProps.length.description }}\n        </div>\n      </div>\n      <div\n        :class=\"inputWrapperClasses()\"\n        :read-only=\"disabled === true ? true : undefined\"\n      >\n        <span\n          class=\"d-input-icon d-input-icon--left\"\n          data-qa=\"dt-input-left-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for left icon -->\n          <slot\n            name=\"leftIcon\"\n            :icon-size=\"iconSize\"\n          />\n        </span>\n        <textarea\n          v-if=\"isTextarea\"\n          ref=\"input\"\n          :name=\"name\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          data-qa=\"dt-input-input\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"inputListeners\"\n        />\n        <input\n          v-else\n          ref=\"input\"\n          :value=\"modelValue\"\n          :name=\"name\"\n          :type=\"type\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          data-qa=\"dt-input-input\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"inputListeners\"\n        >\n        <span\n          class=\"d-input-icon d-input-icon--right\"\n          data-qa=\"dt-input-right-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for right icon -->\n          <slot\n            name=\"rightIcon\"\n            :icon-size=\"iconSize\"\n            :clear=\"clearInput\"\n          />\n        </span>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"validationMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-input-messages\"\n    />\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport {\n  INPUT_TYPES,\n  INPUT_SIZES,\n  INPUT_SIZE_CLASSES,\n  INPUT_ICON_SIZES,\n  INPUT_STATE_CLASSES,\n  DESCRIPTION_SIZE_CLASSES,\n  LABEL_SIZE_CLASSES,\n} from './input_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n  hasSlotContent,\n  removeClassStyleAttrs,\n  addClassStyleAttrs,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/**\n * An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtInput',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Name property of the input element\n     */\n    name: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Type of the input.\n     * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n     * @values text, password, email, number, textarea, date, time, file, tel, search, color\n     * @default 'text'\n     */\n    type: {\n      type: String,\n      default: INPUT_TYPES.TEXT,\n      validator: (t) => Object.values(INPUT_TYPES).includes(t),\n    },\n\n    /**\n     * Value of the input\n     */\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n\n    /**\n     * Disables the input\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Label for the input\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(INPUT_SIZES).includes(t),\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * The current character length that the user has entered into the input.\n     * This will only need to be used if you are using `validate.length` and\n     * the string contains abnormal characters.\n     * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n     * If no number is provided, a built-in length calculation will be used for the length validation.\n     */\n    currentLength: {\n      type: Number,\n      default: null,\n    },\n\n    /**\n     * Whether the input will continue to display a warning validation message even if the input has lost focus.\n     */\n    retainWarning: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation for the input. Supports maximum length validation with the structure:\n     * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n     * \"limitMaxLength\": boolean }}`\n     */\n    validate: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * hidden allows to use input without the element visually present in DOM\n     */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String}\n     */\n    'input',\n\n    /**\n     * Native input blur event\n     *\n     * @event blur\n     * @type {FocusEvent}\n     */\n    'blur',\n\n    /**\n     * Input clear event\n     *\n     * @event clear\n     */\n    'clear',\n\n    /**\n     * Native input focus event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     * @event update:modelValue\n     */\n    'update:modelValue',\n\n    /**\n     * Length of the input when currentLength prop is not passed\n     *\n     * @event update:length\n     * @type {Number}\n     */\n    'update:length',\n\n    /**\n     * Result of the input validation\n     *\n     * @event update:invalid\n     * @type {Boolean}\n     */\n    'update:invalid',\n  ],\n\n  data () {\n    return {\n      isInputFocused: false,\n      isInvalid: false,\n      defaultLength: 0,\n      hasSlotContent,\n      isComposing: false,\n    };\n  },\n\n  computed: {\n\n    isTextarea () {\n      return this.type === INPUT_TYPES.TEXTAREA;\n    },\n\n    isDefaultSize () {\n      return this.size === INPUT_SIZES.DEFAULT;\n    },\n\n    iconSize () {\n      return INPUT_ICON_SIZES[this.size];\n    },\n\n    isValidSize () {\n      return Object.values(INPUT_SIZES).includes(this.size);\n    },\n\n    isValidDescriptionSize () {\n      return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n    },\n\n    inputComponent () {\n      if (this.isTextarea) {\n        return 'textarea';\n      }\n\n      return 'input';\n    },\n\n    inputListeners () {\n      return {\n        compositionstart: () => {\n          this.isComposing = true;\n        },\n\n        compositionend: () => {\n          this.isComposing = false;\n        },\n\n        input: async event => {\n          if (this.isComposing) return;\n          let val = event.target.value;\n          if (this.type === INPUT_TYPES.FILE) {\n            const files = Array.from(event.target.files);\n            val = files.map(file => file.name);\n          }\n          this.$emit('input', val);\n          this.$emit('update:modelValue', val);\n        },\n\n        blur: event => {\n          this.isInputFocused = false;\n          this.onBlur(event);\n        },\n\n        focus: event => {\n          this.isInputFocused = true;\n          this.$emit('focus', event);\n        },\n\n        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\n      };\n    },\n\n    descriptionKey () {\n      return `input-description-${getUniqueString()}`;\n    },\n\n    inputState () {\n      return getValidationState(this.validationMessages);\n    },\n\n    defaultLengthCalculation () {\n      return this.calculateLength(this.modelValue);\n    },\n\n    validationProps () {\n      return {\n        length: {\n          description: this?.validate?.length?.description,\n          max: this?.validate?.length?.max,\n          warn: this?.validate?.length?.warn,\n          message: this?.validate?.length?.message,\n          limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n        },\n      };\n    },\n\n    validationMessages () {\n      // Add length validation message if exists\n      if (this.showLengthLimitValidation) {\n        return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n      }\n\n      return this.formattedMessages;\n    },\n\n    showInputState () {\n      return this.showMessages && this.inputState;\n    },\n\n    inputLength () {\n      return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n    },\n\n    inputLengthState () {\n      if (this.inputLength < this.validationProps.length.warn) {\n        return null;\n      } else if (this.inputLength <= this.validationProps.length.max) {\n        return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n      } else {\n        return VALIDATION_MESSAGE_TYPES.ERROR;\n      }\n    },\n\n    shouldValidateLength () {\n      return !!(\n        this.validationProps.length.description &&\n        this.validationProps.length.max\n      );\n    },\n\n    shouldLimitMaxLength () {\n      return this.shouldValidateLength && this.validationProps.length.limitMaxLength;\n    },\n\n    showLengthLimitValidation () {\n      return (\n        this.shouldValidateLength &&\n        this.inputLengthState !== null &&\n        this.validationProps.length.message &&\n        (this.retainWarning || this.isInputFocused || this.isInvalid)\n      );\n    },\n\n    sizeModifierClass () {\n      if (this.isDefaultSize || !this.isValidSize) {\n        return '';\n      }\n\n      return INPUT_SIZE_CLASSES[this.inputComponent][this.size];\n    },\n\n    stateClass () {\n      return [INPUT_STATE_CLASSES[this.inputState]];\n    },\n  },\n\n  watch: {\n    isInvalid (val) {\n      this.$emit('update:invalid', val);\n    },\n\n    modelValue: {\n      immediate: true,\n      handler (newValue) {\n        if (this.shouldValidateLength) {\n          this.validateLength(this.inputLength);\n        }\n\n        if (this.currentLength == null) {\n          this.$emit('update:length', this.calculateLength(newValue));\n        }\n\n        // Set textarea value programmatically to avoid attribute binding\n        // Skip during IME composition to avoid interrupting in-progress input\n        if (this.isTextarea && this.$refs.input && this.$refs.input.value !== newValue && !this.isComposing) {\n          this.$refs.input.value = newValue;\n        }\n      },\n    },\n  },\n\n  beforeMount () {\n    this.descriptionSizeClasses = DESCRIPTION_SIZE_CLASSES;\n    this.labelSizeClasses = LABEL_SIZE_CLASSES;\n  },\n\n  mounted () {\n    // Set initial textarea value programmatically\n    if (this.isTextarea && this.$refs.input) {\n      this.$refs.input.value = this.modelValue;\n    }\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n    inputClasses () {\n      return [\n        'd-input__input',\n        this.inputComponent === 'input' ? 'd-input' : 'd-textarea',\n        {\n          [this.stateClass]: this.showInputState,\n          'd-input-icon--left': this.$slots.leftIcon,\n          'd-input-icon--right': this.$slots.rightIcon,\n        },\n        this.sizeModifierClass,\n        this.inputClass,\n      ];\n    },\n\n    inputWrapperClasses () {\n      if (this.hidden) {\n        return [];\n      }\n      return [\n        'd-input__wrapper',\n        { [this.stateClass]: this.showInputState },\n        this.inputWrapperClass,\n      ];\n    },\n\n    calculateLength (value) {\n      if (typeof value !== 'string') {\n        return 0;\n      }\n\n      return [...value].length;\n    },\n\n    inputLengthErrorMessage () {\n      return {\n        message: this.validationProps.length.message,\n        type: this.inputLengthState,\n      };\n    },\n\n    onBlur (e) {\n      // Do not emit a blur event if the target element is a child of this component\n      if (!this.$refs.container?.contains(e.relatedTarget)) {\n        this.$emit('blur', e);\n      }\n    },\n\n    emitClearEvents () {\n      this.$emit('input', '');\n      this.$emit('clear');\n      this.$emit('update:modelValue', '');\n    },\n\n    blur () {\n      this.$refs.input.blur();\n    },\n\n    focus () {\n      this.$refs.input.focus();\n    },\n\n    select () {\n      this.$refs.input.select();\n    },\n\n    getMessageKey (type, index) {\n      return `message-${type}-${index}`;\n    },\n\n    validateLength (length) {\n      this.isInvalid = (length > this.validationProps.length.max);\n    },\n\n    clearInput () {\n      this.$refs.input.value = '';\n      this.$refs.input.focus();\n      this.emitClearEvents();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","MessagesMixin","INPUT_TYPES","INPUT_SIZES","hasSlotContent","INPUT_ICON_SIZES","DESCRIPTION_SIZE_TYPES","event","val","file","getUniqueString","getValidationState","_b","_a","_d","_c","_f","_e","_h","_g","_j","_i","VALIDATION_MESSAGE_TYPES","INPUT_SIZE_CLASSES","INPUT_STATE_CLASSES","newValue","DESCRIPTION_SIZE_CLASSES","LABEL_SIZE_CLASSES","removeClassStyleAttrs","addClassStyleAttrs","value","e","type","index","length","_openBlock","_createElementBlock","_mergeProps","$props","$options","_ctx","_createElementVNode","_renderSlot","_normalizeClass","$data","_hoisted_3","_hoisted_4","_toDisplayString","args","_toHandlers","_hoisted_6","_hoisted_7","_createVNode","_component_dt_validation_messages"],"mappings":"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"}
+{"version":3,"file":"input.js","sources":["../../../components/input/input.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"[rootClass, 'd-input__root', { 'd-input--hidden': hidden }]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n    data-qa=\"dt-input\"\n  >\n    <label\n      class=\"d-input__label\"\n      :aria-details=\"$slots.description || description ? descriptionKey : undefined\"\n      data-qa=\"dt-input-label-wrapper\"\n    >\n      <!-- @slot Slot for label, defaults to label prop -->\n      <slot name=\"labelSlot\">\n        <div\n          v-if=\"labelVisible && label\"\n          ref=\"label\"\n          data-qa=\"dt-input-label\"\n          :class=\"[\n            'd-input__label-text',\n            'd-label',\n            labelSizeClasses[size],\n          ]\"\n        >\n          {{ label }}\n        </div>\n      </slot>\n      <div\n        v-if=\"hasSlotContent($slots.description) || description || shouldValidateLength\"\n        :id=\"descriptionKey\"\n        ref=\"description\"\n        :class=\"[\n          'd-input__description',\n          'd-description',\n          descriptionSizeClasses[size],\n        ]\"\n        data-qa=\"dt-input-description\"\n      >\n        <div\n          v-if=\"hasSlotContent($slots.description) || description\"\n        >\n          <!-- @slot Slot for description, defaults to description prop -->\n          <slot name=\"description\">{{ description }}</slot>\n        </div>\n        <div\n          v-if=\"shouldValidateLength\"\n          data-qa=\"dt-input-length-description\"\n          class=\"d-input__length-description\"\n        >\n          {{ validationProps.length.description }}\n        </div>\n      </div>\n      <div\n        :class=\"inputWrapperClasses()\"\n        :read-only=\"disabled === true ? true : undefined\"\n      >\n        <span\n          class=\"d-input-icon d-input-icon--left\"\n          data-qa=\"dt-input-left-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for start icon -->\n          <slot\n            v-if=\"$slots.startIcon\"\n            name=\"startIcon\"\n            :icon-size=\"iconSize\"\n          />\n          <!-- @slot @deprecated Use startIcon -->\n          <slot\n            v-else\n            name=\"leftIcon\"\n            :icon-size=\"iconSize\"\n          />\n        </span>\n        <textarea\n          v-if=\"isTextarea\"\n          ref=\"input\"\n          :name=\"name\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          data-qa=\"dt-input-input\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"inputListeners\"\n        />\n        <input\n          v-else\n          ref=\"input\"\n          :value=\"modelValue\"\n          :name=\"name\"\n          :type=\"type\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          data-qa=\"dt-input-input\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"inputListeners\"\n        >\n        <span\n          class=\"d-input-icon d-input-icon--right\"\n          data-qa=\"dt-input-right-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for end icon -->\n          <slot\n            v-if=\"$slots.endIcon\"\n            name=\"endIcon\"\n            :icon-size=\"iconSize\"\n            :clear=\"clearInput\"\n          />\n          <!-- @slot @deprecated Use endIcon -->\n          <slot\n            v-else\n            name=\"rightIcon\"\n            :icon-size=\"iconSize\"\n            :clear=\"clearInput\"\n          />\n        </span>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"validationMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-input-messages\"\n    />\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport {\n  INPUT_TYPES,\n  INPUT_SIZES,\n  INPUT_SIZE_CLASSES,\n  INPUT_ICON_SIZES,\n  INPUT_STATE_CLASSES,\n  DESCRIPTION_SIZE_CLASSES,\n  LABEL_SIZE_CLASSES,\n} from './input_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n  hasSlotContent,\n  removeClassStyleAttrs,\n  addClassStyleAttrs,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/**\n * An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtInput',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Name property of the input element\n     */\n    name: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Type of the input.\n     * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n     * @values text, password, email, number, textarea, date, time, file, tel, search, color\n     * @default 'text'\n     */\n    type: {\n      type: String,\n      default: INPUT_TYPES.TEXT,\n      validator: (t) => Object.values(INPUT_TYPES).includes(t),\n    },\n\n    /**\n     * Value of the input\n     */\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n\n    /**\n     * Disables the input\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Label for the input\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(INPUT_SIZES).includes(t),\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the root element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    rootClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * The current character length that the user has entered into the input.\n     * This will only need to be used if you are using `validate.length` and\n     * the string contains abnormal characters.\n     * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n     * If no number is provided, a built-in length calculation will be used for the length validation.\n     */\n    currentLength: {\n      type: Number,\n      default: null,\n    },\n\n    /**\n     * Whether the input will continue to display a warning validation message even if the input has lost focus.\n     */\n    retainWarning: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation for the input. Supports maximum length validation with the structure:\n     * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n     * \"limitMaxLength\": boolean }}`\n     */\n    validate: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * hidden allows to use input without the element visually present in DOM\n     */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String}\n     */\n    'input',\n\n    /**\n     * Native input blur event\n     *\n     * @event blur\n     * @type {FocusEvent}\n     */\n    'blur',\n\n    /**\n     * Input clear event\n     *\n     * @event clear\n     */\n    'clear',\n\n    /**\n     * Native input focus event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     * @event update:modelValue\n     */\n    'update:modelValue',\n\n    /**\n     * Length of the input when currentLength prop is not passed\n     *\n     * @event update:length\n     * @type {Number}\n     */\n    'update:length',\n\n    /**\n     * Result of the input validation\n     *\n     * @event update:invalid\n     * @type {Boolean}\n     */\n    'update:invalid',\n  ],\n\n  data () {\n    return {\n      isInputFocused: false,\n      isInvalid: false,\n      defaultLength: 0,\n      hasSlotContent,\n      isComposing: false,\n    };\n  },\n\n  computed: {\n\n    isTextarea () {\n      return this.type === INPUT_TYPES.TEXTAREA;\n    },\n\n    isDefaultSize () {\n      return this.size === INPUT_SIZES.DEFAULT;\n    },\n\n    iconSize () {\n      return INPUT_ICON_SIZES[this.size];\n    },\n\n    isValidSize () {\n      return Object.values(INPUT_SIZES).includes(this.size);\n    },\n\n    isValidDescriptionSize () {\n      return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n    },\n\n    inputComponent () {\n      if (this.isTextarea) {\n        return 'textarea';\n      }\n\n      return 'input';\n    },\n\n    inputListeners () {\n      return {\n        compositionstart: () => {\n          this.isComposing = true;\n        },\n\n        compositionend: () => {\n          this.isComposing = false;\n        },\n\n        input: async event => {\n          if (this.isComposing) return;\n          let val = event.target.value;\n          if (this.type === INPUT_TYPES.FILE) {\n            const files = Array.from(event.target.files);\n            val = files.map(file => file.name);\n          }\n          this.$emit('input', val);\n          this.$emit('update:modelValue', val);\n        },\n\n        blur: event => {\n          this.isInputFocused = false;\n          this.onBlur(event);\n        },\n\n        focus: event => {\n          this.isInputFocused = true;\n          this.$emit('focus', event);\n        },\n\n        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\n      };\n    },\n\n    descriptionKey () {\n      return `input-description-${getUniqueString()}`;\n    },\n\n    inputState () {\n      return getValidationState(this.validationMessages);\n    },\n\n    defaultLengthCalculation () {\n      return this.calculateLength(this.modelValue);\n    },\n\n    validationProps () {\n      return {\n        length: {\n          description: this?.validate?.length?.description,\n          max: this?.validate?.length?.max,\n          warn: this?.validate?.length?.warn,\n          message: this?.validate?.length?.message,\n          limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n        },\n      };\n    },\n\n    validationMessages () {\n      // Add length validation message if exists\n      if (this.showLengthLimitValidation) {\n        return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n      }\n\n      return this.formattedMessages;\n    },\n\n    showInputState () {\n      return this.showMessages && this.inputState;\n    },\n\n    inputLength () {\n      return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n    },\n\n    inputLengthState () {\n      if (this.inputLength < this.validationProps.length.warn) {\n        return null;\n      } else if (this.inputLength <= this.validationProps.length.max) {\n        return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n      } else {\n        return VALIDATION_MESSAGE_TYPES.ERROR;\n      }\n    },\n\n    shouldValidateLength () {\n      return !!(\n        this.validationProps.length.description &&\n        this.validationProps.length.max\n      );\n    },\n\n    shouldLimitMaxLength () {\n      return this.shouldValidateLength && this.validationProps.length.limitMaxLength;\n    },\n\n    showLengthLimitValidation () {\n      return (\n        this.shouldValidateLength &&\n        this.inputLengthState !== null &&\n        this.validationProps.length.message &&\n        (this.retainWarning || this.isInputFocused || this.isInvalid)\n      );\n    },\n\n    sizeModifierClass () {\n      if (this.isDefaultSize || !this.isValidSize) {\n        return '';\n      }\n\n      return INPUT_SIZE_CLASSES[this.inputComponent][this.size];\n    },\n\n    stateClass () {\n      return [INPUT_STATE_CLASSES[this.inputState]];\n    },\n  },\n\n  watch: {\n    isInvalid (val) {\n      this.$emit('update:invalid', val);\n    },\n\n    modelValue: {\n      immediate: true,\n      handler (newValue) {\n        if (this.shouldValidateLength) {\n          this.validateLength(this.inputLength);\n        }\n\n        if (this.currentLength == null) {\n          this.$emit('update:length', this.calculateLength(newValue));\n        }\n\n        // Set textarea value programmatically to avoid attribute binding\n        // Skip during IME composition to avoid interrupting in-progress input\n        if (this.isTextarea && this.$refs.input && this.$refs.input.value !== newValue && !this.isComposing) {\n          this.$refs.input.value = newValue;\n        }\n      },\n    },\n  },\n\n  beforeMount () {\n    this.descriptionSizeClasses = DESCRIPTION_SIZE_CLASSES;\n    this.labelSizeClasses = LABEL_SIZE_CLASSES;\n  },\n\n  mounted () {\n    // Set initial textarea value programmatically\n    if (this.isTextarea && this.$refs.input) {\n      this.$refs.input.value = this.modelValue;\n    }\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n    inputClasses () {\n      return [\n        'd-input__input',\n        this.inputComponent === 'input' ? 'd-input' : 'd-textarea',\n        {\n          [this.stateClass]: this.showInputState,\n          'd-input-icon--left': this.$slots.startIcon || this.$slots.leftIcon,\n          'd-input-icon--right': this.$slots.endIcon || this.$slots.rightIcon,\n        },\n        this.sizeModifierClass,\n        this.inputClass,\n      ];\n    },\n\n    inputWrapperClasses () {\n      if (this.hidden) {\n        return [];\n      }\n      return [\n        'd-input__wrapper',\n        { [this.stateClass]: this.showInputState },\n        this.inputWrapperClass,\n      ];\n    },\n\n    calculateLength (value) {\n      if (typeof value !== 'string') {\n        return 0;\n      }\n\n      return [...value].length;\n    },\n\n    inputLengthErrorMessage () {\n      return {\n        message: this.validationProps.length.message,\n        type: this.inputLengthState,\n      };\n    },\n\n    onBlur (e) {\n      // Do not emit a blur event if the target element is a child of this component\n      if (!this.$refs.container?.contains(e.relatedTarget)) {\n        this.$emit('blur', e);\n      }\n    },\n\n    emitClearEvents () {\n      this.$emit('input', '');\n      this.$emit('clear');\n      this.$emit('update:modelValue', '');\n    },\n\n    blur () {\n      this.$refs.input.blur();\n    },\n\n    focus () {\n      this.$refs.input.focus();\n    },\n\n    select () {\n      this.$refs.input.select();\n    },\n\n    getMessageKey (type, index) {\n      return `message-${type}-${index}`;\n    },\n\n    validateLength (length) {\n      this.isInvalid = (length > this.validationProps.length.max);\n    },\n\n    clearInput () {\n      this.$refs.input.value = '';\n      this.$refs.input.focus();\n      this.emitClearEvents();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","MessagesMixin","INPUT_TYPES","INPUT_SIZES","hasSlotContent","INPUT_ICON_SIZES","DESCRIPTION_SIZE_TYPES","event","val","file","getUniqueString","getValidationState","_b","_a","_d","_c","_f","_e","_h","_g","_j","_i","VALIDATION_MESSAGE_TYPES","INPUT_SIZE_CLASSES","INPUT_STATE_CLASSES","newValue","DESCRIPTION_SIZE_CLASSES","LABEL_SIZE_CLASSES","removeClassStyleAttrs","addClassStyleAttrs","value","e","type","index","length","_openBlock","_createElementBlock","_mergeProps","$props","$options","_ctx","_createElementVNode","_renderSlot","_normalizeClass","$data","_hoisted_3","_hoisted_4","_toDisplayString","args","_toHandlers","_hoisted_6","_hoisted_7","_createVNode","_component_dt_validation_messages"],"mappings":"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"}

package/dist/lib/item-layout/item-layout.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../../common/utils/index.cjs"),t=require("vue"),n=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),r={compatConfig:{MODE:3},name:"DtItemLayout",props:{as:{type:String,default:"div"},unstyled:{type:Boolean,default:!1},leftClass:{type:String,default:""},contentClass:{type:String,default:""},titleClass:{type:String,default:""},subtitleClass:{type:String,default:""},bottomClass:{type:String,default:""},rightClass:{type:String,default:""},selectedClass:{type:String,default:""}},methods:{dynamicGridTemplateColumns(){const e=this.$slots.left?"auto":"",s=this.$slots.right?"auto":"",l=this.$slots.selected?"auto":"";return`
-        grid-template-columns: ${e} 1fr ${s} ${l};
-      `},hasSlotContent:o.hasSlotContent}};function d(e,s,l,u,m,a){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(l.as),{class:t.normalizeClass(l.unstyled?"d-item-layout--custom":"d-item-layout"),style:t.normalizeStyle(l.unstyled&&a.dynamicGridTemplateColumns())},{default:t.withCtx(()=>[a.hasSlotContent(e.$slots.left)?(t.openBlock(),t.createElementBlock("section",{key:0,"data-qa":"dt-item-layout-left-wrapper",class:t.normalizeClass([l.leftClass,"d-item-layout__left"])},[t.renderSlot(e.$slots,"left")],2)):t.createCommentVNode("",!0),t.createElementVNode("section",{"data-qa":"dt-item-layout-content-wrapper",class:t.normalizeClass([l.contentClass,"d-item-layout__content"])},[a.hasSlotContent(e.$slots.default)?(t.openBlock(),t.createElementBlock("div",{key:0,"data-qa":"dt-item-layout-title-wrapper",class:t.normalizeClass([l.titleClass,"d-item-layout__title"])},[t.renderSlot(e.$slots,"default")],2)):t.createCommentVNode("",!0),a.hasSlotContent(e.$slots.subtitle)?(t.openBlock(),t.createElementBlock("div",{key:1,"data-qa":"dt-item-layout-subtitle-wrapper",class:t.normalizeClass([l.subtitleClass,"d-item-layout--subtitle",{"d-item-layout--subtitle--with-title":a.hasSlotContent(e.$slots.default)}])},[t.renderSlot(e.$slots,"subtitle")],2)):t.createCommentVNode("",!0),a.hasSlotContent(e.$slots.bottom)?(t.openBlock(),t.createElementBlock("div",{key:2,"data-qa":"dt-item-layout-bottom-wrapper",class:t.normalizeClass([l.bottomClass,"d-item-layout__bottom"])},[t.renderSlot(e.$slots,"bottom")],2)):t.createCommentVNode("",!0)],2),a.hasSlotContent(e.$slots.right)?(t.openBlock(),t.createElementBlock("section",{key:1,"data-qa":"dt-item-layout-right-wrapper",class:t.normalizeClass([l.rightClass,"d-item-layout__right"])},[t.renderSlot(e.$slots,"right")],2)):t.createCommentVNode("",!0),a.hasSlotContent(e.$slots.selected)?(t.openBlock(),t.createElementBlock("section",{key:2,"data-qa":"dt-item-layout-selected-wrapper",class:t.normalizeClass([l.selectedClass,"d-item-layout__selected"])},[t.renderSlot(e.$slots,"selected")],2)):t.createCommentVNode("",!0)]),_:3},8,["class","style"])}const i=n._(r,[["render",d]]);exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("../../common/utils/index.cjs"),t=require("vue"),n=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),r={compatConfig:{MODE:3},name:"DtItemLayout",props:{as:{type:String,default:"div"},unstyled:{type:Boolean,default:!1},startClass:{type:String,default:""},leftClass:{type:String,default:void 0},contentClass:{type:String,default:""},titleClass:{type:String,default:""},subtitleClass:{type:String,default:""},blockEndClass:{type:String,default:""},bottomClass:{type:String,default:void 0},endClass:{type:String,default:""},rightClass:{type:String,default:void 0},selectedClass:{type:String,default:""}},computed:{resolvedStartClass(){return this.leftClass??this.startClass},resolvedEndClass(){return this.rightClass??this.endClass},resolvedBlockEndClass(){return this.bottomClass??this.blockEndClass}},methods:{dynamicGridTemplateColumns(){const e=this.$slots.start||this.$slots.left?"auto":"",a=this.$slots.end||this.$slots.right?"auto":"",s=this.$slots.selected?"auto":"";return`
+        grid-template-columns: ${e} 1fr ${a} ${s};
+      `},hasSlotContent:o.hasSlotContent}};function d(e,a,s,u,m,l){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(s.as),{class:t.normalizeClass(s.unstyled?"d-item-layout--custom":"d-item-layout"),style:t.normalizeStyle(s.unstyled&&l.dynamicGridTemplateColumns())},{default:t.withCtx(()=>[l.hasSlotContent(e.$slots.start)||l.hasSlotContent(e.$slots.left)?(t.openBlock(),t.createElementBlock("section",{key:0,"data-qa":"dt-item-layout-left-wrapper",class:t.normalizeClass([l.resolvedStartClass,"d-item-layout__left"])},[e.$slots.start?t.renderSlot(e.$slots,"start",{key:0}):t.renderSlot(e.$slots,"left",{key:1})],2)):t.createCommentVNode("",!0),t.createElementVNode("section",{"data-qa":"dt-item-layout-content-wrapper",class:t.normalizeClass([s.contentClass,"d-item-layout__content"])},[l.hasSlotContent(e.$slots.default)?(t.openBlock(),t.createElementBlock("div",{key:0,"data-qa":"dt-item-layout-title-wrapper",class:t.normalizeClass([s.titleClass,"d-item-layout__title"])},[t.renderSlot(e.$slots,"default")],2)):t.createCommentVNode("",!0),l.hasSlotContent(e.$slots.subtitle)?(t.openBlock(),t.createElementBlock("div",{key:1,"data-qa":"dt-item-layout-subtitle-wrapper",class:t.normalizeClass([s.subtitleClass,"d-item-layout--subtitle",{"d-item-layout--subtitle--with-title":l.hasSlotContent(e.$slots.default)}])},[t.renderSlot(e.$slots,"subtitle")],2)):t.createCommentVNode("",!0),l.hasSlotContent(e.$slots.blockEnd)||l.hasSlotContent(e.$slots.bottom)?(t.openBlock(),t.createElementBlock("div",{key:2,"data-qa":"dt-item-layout-bottom-wrapper",class:t.normalizeClass([l.resolvedBlockEndClass,"d-item-layout__bottom"])},[e.$slots.blockEnd?t.renderSlot(e.$slots,"blockEnd",{key:0}):t.renderSlot(e.$slots,"bottom",{key:1})],2)):t.createCommentVNode("",!0)],2),l.hasSlotContent(e.$slots.end)||l.hasSlotContent(e.$slots.right)?(t.openBlock(),t.createElementBlock("section",{key:1,"data-qa":"dt-item-layout-right-wrapper",class:t.normalizeClass([l.resolvedEndClass,"d-item-layout__right"])},[e.$slots.end?t.renderSlot(e.$slots,"end",{key:0}):t.renderSlot(e.$slots,"right",{key:1})],2)):t.createCommentVNode("",!0),l.hasSlotContent(e.$slots.selected)?(t.openBlock(),t.createElementBlock("section",{key:2,"data-qa":"dt-item-layout-selected-wrapper",class:t.normalizeClass([s.selectedClass,"d-item-layout__selected"])},[t.renderSlot(e.$slots,"selected")],2)):t.createCommentVNode("",!0)]),_:3},8,["class","style"])}const i=n._(r,[["render",d]]);exports.default=i;
 //# sourceMappingURL=item-layout.cjs.map

package/dist/lib/item-layout/item-layout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"item-layout.cjs","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n    :style=\"unstyled && dynamicGridTemplateColumns()\"\n  >\n    <section\n      v-if=\"hasSlotContent($slots.left)\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      :class=\"[leftClass, 'd-item-layout__left']\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      :class=\"[contentClass, 'd-item-layout__content']\"\n    >\n      <div\n        v-if=\"hasSlotContent($slots.default)\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        :class=\"[titleClass, 'd-item-layout__title']\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.subtitle)\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"[\n          subtitleClass,\n          'd-item-layout--subtitle',\n          { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n        ]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.bottom)\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        :class=\"[bottomClass, 'd-item-layout__bottom']\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.right)\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      :class=\"[rightClass, 'd-item-layout__right']\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.selected)\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      :class=\"[selectedClass, 'd-item-layout__selected']\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Set the class for the left section.\n     */\n    leftClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the content section.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the title section.\n     */\n    titleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the subtitle section.\n     */\n    subtitleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the bottom section.\n     */\n    bottomClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the right section.\n     */\n    rightClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the selected section.\n     */\n    selectedClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  methods: {\n    /**\n     * Generate dynamic grid template columns\n     */\n    dynamicGridTemplateColumns () {\n      const leftContentColumn = this.$slots.left ? 'auto' : '';\n      const rightContentColumn = this.$slots.right ? 'auto' : '';\n      const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n      return `\n        grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n      `;\n    },\n\n    hasSlotContent,\n  },\n};\n</script>\n"],"names":["_sfc_main","leftContentColumn","rightContentColumn","selectedContentColumn","hasSlotContent","_openBlock","_createBlock","_resolveDynamicComponent","$props","_normalizeStyle","$options","_ctx","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass"],"mappings":"uOA0EKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,eACN,MAAO,CAIL,GAAI,CACF,KAAM,OACN,QAAS,OAOX,SAAU,CACR,KAAM,QACN,QAAS,IAMX,UAAW,CACT,KAAM,OACN,QAAS,IAMX,aAAc,CACZ,KAAM,OACN,QAAS,IAMX,WAAY,CACV,KAAM,OACN,QAAS,IAMX,cAAe,CACb,KAAM,OACN,QAAS,IAMX,YAAa,CACX,KAAM,OACN,QAAS,IAMX,WAAY,CACV,KAAM,OACN,QAAS,IAMX,cAAe,CACb,KAAM,OACN,QAAS,KAIb,QAAS,CAIP,4BAA8B,CAC5B,MAAMC,EAAoB,KAAK,OAAO,KAAO,OAAS,GAChDC,EAAqB,KAAK,OAAO,MAAQ,OAAS,GAClDC,EAAwB,KAAK,OAAO,SAAW,OAAS,GAE9D,MAAO;AAAA,iCACoBF,CAAiB,QAAQC,CAAkB,IAAIC,CAAqB;AAAA,OAEjG,EAEA,eAAAC,EAAAA,eAEJ,0BAvKE,OAAAC,EAAAA,UAAA,EAAAC,EAAAA,YA8DYC,EAAAA,wBA7DLC,EAAA,EAAE,EAAA,CACN,uBAAOA,EAAA,SAAQ,wBAAA,eAAA,EACf,MAAKC,EAAAA,eAAED,EAAA,UAAYE,EAAA,2BAA0B,CAAA,sBAE9C,IAOU,CANFA,EAAA,eAAeC,EAAA,OAAO,IAAI,iBADlCC,EAAAA,mBAOU,UAAA,OALR,UAAQ,8BACP,wBAAQJ,EAAA,UAAS,qBAAA,CAAA,IAGlBK,aAAoBF,EAAA,OAAA,MAAA,mCAEtBG,EAAAA,mBAgCU,UAAA,CA/BR,UAAQ,iCACP,wBAAQN,EAAA,aAAY,wBAAA,CAAA,IAGbE,EAAA,eAAeC,EAAA,OAAO,OAAO,iBADrCC,EAAAA,mBAOM,MAAA,OALJ,UAAQ,+BACP,wBAAQJ,EAAA,WAAU,sBAAA,CAAA,IAGnBK,aAAQF,EAAA,OAAA,SAAA,mCAGFD,EAAA,eAAeC,EAAA,OAAO,QAAQ,iBADtCC,EAAAA,mBAWM,MAAA,OATJ,UAAQ,kCACP,MAAKG,EAAAA,eAAA,CAAcP,EAAA,+EAAuGE,EAAA,eAAeC,EAAA,OAAO,OAAO,CAAA,MAOxJE,aAAwBF,EAAA,OAAA,UAAA,mCAGlBD,EAAA,eAAeC,EAAA,OAAO,MAAM,iBADpCC,EAAAA,mBAOM,MAAA,OALJ,UAAQ,gCACP,wBAAQJ,EAAA,YAAW,uBAAA,CAAA,IAGpBK,aAAsBF,EAAA,OAAA,QAAA,uCAIlBD,EAAA,eAAeC,EAAA,OAAO,KAAK,iBADnCC,EAAAA,mBAOU,UAAA,OALR,UAAQ,+BACP,wBAAQJ,EAAA,WAAU,sBAAA,CAAA,IAGnBK,aAAqBF,EAAA,OAAA,OAAA,mCAGfD,EAAA,eAAeC,EAAA,OAAO,QAAQ,iBADtCC,EAAAA,mBAOU,UAAA,OALR,UAAQ,kCACP,wBAAQJ,EAAA,cAAa,yBAAA,CAAA,IAGtBK,aAAwBF,EAAA,OAAA,UAAA"}
+{"version":3,"file":"item-layout.cjs","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n    :style=\"unstyled && dynamicGridTemplateColumns()\"\n  >\n    <section\n      v-if=\"hasSlotContent($slots.start) || hasSlotContent($slots.left)\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      :class=\"[resolvedStartClass, 'd-item-layout__left']\"\n    >\n      <!-- @slot Slot for start content -->\n      <slot\n        v-if=\"$slots.start\"\n        name=\"start\"\n      />\n      <!-- @slot @deprecated Use start -->\n      <slot\n        v-else\n        name=\"left\"\n      />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      :class=\"[contentClass, 'd-item-layout__content']\"\n    >\n      <div\n        v-if=\"hasSlotContent($slots.default)\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        :class=\"[titleClass, 'd-item-layout__title']\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.subtitle)\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"[\n          subtitleClass,\n          'd-item-layout--subtitle',\n          { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n        ]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.blockEnd) || hasSlotContent($slots.bottom)\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        :class=\"[resolvedBlockEndClass, 'd-item-layout__bottom']\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot\n          v-if=\"$slots.blockEnd\"\n          name=\"blockEnd\"\n        />\n        <!-- @slot @deprecated Use blockEnd -->\n        <slot\n          v-else\n          name=\"bottom\"\n        />\n      </div>\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.end) || hasSlotContent($slots.right)\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      :class=\"[resolvedEndClass, 'd-item-layout__right']\"\n    >\n      <!-- @slot Slot for end content -->\n      <slot\n        v-if=\"$slots.end\"\n        name=\"end\"\n      />\n      <!-- @slot @deprecated Use end -->\n      <slot\n        v-else\n        name=\"right\"\n      />\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.selected)\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      :class=\"[selectedClass, 'd-item-layout__selected']\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Set the class for the start section.\n     */\n    startClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the start section.\n     * @deprecated Use startClass\n     */\n    leftClass: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the class for the content section.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the title section.\n     */\n    titleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the subtitle section.\n     */\n    subtitleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the block-end section.\n     */\n    blockEndClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the block-end section.\n     * @deprecated Use blockEndClass\n     */\n    bottomClass: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the class for the end section.\n     */\n    endClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the end section.\n     * @deprecated Use endClass\n     */\n    rightClass: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the class for the selected section.\n     */\n    selectedClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  computed: {\n    resolvedStartClass () {\n      return this.leftClass ?? this.startClass;\n    },\n\n    resolvedEndClass () {\n      return this.rightClass ?? this.endClass;\n    },\n\n    resolvedBlockEndClass () {\n      return this.bottomClass ?? this.blockEndClass;\n    },\n  },\n\n  methods: {\n    /**\n     * Generate dynamic grid template columns\n     */\n    dynamicGridTemplateColumns () {\n      const leftContentColumn = (this.$slots.start || this.$slots.left) ? 'auto' : '';\n      const rightContentColumn = (this.$slots.end || this.$slots.right) ? 'auto' : '';\n      const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n      return `\n        grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n      `;\n    },\n\n    hasSlotContent,\n  },\n};\n</script>\n"],"names":["_sfc_main","leftContentColumn","rightContentColumn","selectedContentColumn","hasSlotContent","_openBlock","_createBlock","_resolveDynamicComponent","$props","_normalizeStyle","$options","_ctx","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass"],"mappings":"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"}

package/dist/lib/item-layout/item-layout.js

@@ -1,6 +1,6 @@
-import { hasSlotContent as u } from "../../common/utils/index.js";
-import { openBlock as s, createBlock as r, resolveDynamicComponent as m, normalizeStyle as y, normalizeClass as a, withCtx as c, createElementBlock as o, renderSlot as n, createCommentVNode as d, createElementVNode as C } from "vue";
-import { _ as f } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { hasSlotContent as i } from "../../common/utils/index.js";
+import { openBlock as o, createBlock as u, resolveDynamicComponent as m, normalizeStyle as y, normalizeClass as a, withCtx as C, createElementBlock as n, renderSlot as l, createCommentVNode as d, createElementVNode as f } from "vue";
+import { _ as c } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const h = {
   compatConfig: { MODE: 3 },
   name: "DtItemLayout",
@@ -21,12 +21,20 @@ const h = {
       default: !1
     },
     /**
-     * Set the class for the left section.
+     * Set the class for the start section.
      */
-    leftClass: {
+    startClass: {
       type: String,
       default: ""
     },
+    /**
+     * Set the class for the start section.
+     * @deprecated Use startClass
+     */
+    leftClass: {
+      type: String,
+      default: void 0
+    },
     /**
      * Set the class for the content section.
      */
@@ -49,18 +57,34 @@ const h = {
       default: ""
     },
     /**
-     * Set the class for the bottom section.
+     * Set the class for the block-end section.
+     */
+    blockEndClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the block-end section.
+     * @deprecated Use blockEndClass
      */
     bottomClass: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Set the class for the end section.
+     */
+    endClass: {
       type: String,
       default: ""
     },
     /**
-     * Set the class for the right section.
+     * Set the class for the end section.
+     * @deprecated Use endClass
      */
     rightClass: {
       type: String,
-      default: ""
+      default: void 0
     },
     /**
      * Set the class for the selected section.
@@ -70,82 +94,93 @@ const h = {
       default: ""
     }
   },
+  computed: {
+    resolvedStartClass() {
+      return this.leftClass ?? this.startClass;
+    },
+    resolvedEndClass() {
+      return this.rightClass ?? this.endClass;
+    },
+    resolvedBlockEndClass() {
+      return this.bottomClass ?? this.blockEndClass;
+    }
+  },
   methods: {
     /**
      * Generate dynamic grid template columns
      */
     dynamicGridTemplateColumns() {
-      const t = this.$slots.left ? "auto" : "", i = this.$slots.right ? "auto" : "", e = this.$slots.selected ? "auto" : "";
+      const t = this.$slots.start || this.$slots.left ? "auto" : "", r = this.$slots.end || this.$slots.right ? "auto" : "", s = this.$slots.selected ? "auto" : "";
       return `
-        grid-template-columns: ${t} 1fr ${i} ${e};
+        grid-template-columns: ${t} 1fr ${r} ${s};
       `;
     },
-    hasSlotContent: u
+    hasSlotContent: i
   }
 };
-function g(t, i, e, S, b, l) {
-  return s(), r(m(e.as), {
-    class: a(e.unstyled ? "d-item-layout--custom" : "d-item-layout"),
-    style: y(e.unstyled && l.dynamicGridTemplateColumns())
+function S(t, r, s, k, g, e) {
+  return o(), u(m(s.as), {
+    class: a(s.unstyled ? "d-item-layout--custom" : "d-item-layout"),
+    style: y(s.unstyled && e.dynamicGridTemplateColumns())
   }, {
-    default: c(() => [
-      l.hasSlotContent(t.$slots.left) ? (s(), o("section", {
+    default: C(() => [
+      e.hasSlotContent(t.$slots.start) || e.hasSlotContent(t.$slots.left) ? (o(), n("section", {
         key: 0,
         "data-qa": "dt-item-layout-left-wrapper",
-        class: a([e.leftClass, "d-item-layout__left"])
+        class: a([e.resolvedStartClass, "d-item-layout__left"])
       }, [
-        n(t.$slots, "left")
+        t.$slots.start ? l(t.$slots, "start", { key: 0 }) : l(t.$slots, "left", { key: 1 })
       ], 2)) : d("", !0),
-      C("section", {
+      f("section", {
         "data-qa": "dt-item-layout-content-wrapper",
-        class: a([e.contentClass, "d-item-layout__content"])
+        class: a([s.contentClass, "d-item-layout__content"])
       }, [
-        l.hasSlotContent(t.$slots.default) ? (s(), o("div", {
+        e.hasSlotContent(t.$slots.default) ? (o(), n("div", {
           key: 0,
           "data-qa": "dt-item-layout-title-wrapper",
-          class: a([e.titleClass, "d-item-layout__title"])
+          class: a([s.titleClass, "d-item-layout__title"])
         }, [
-          n(t.$slots, "default")
+          l(t.$slots, "default")
         ], 2)) : d("", !0),
-        l.hasSlotContent(t.$slots.subtitle) ? (s(), o("div", {
+        e.hasSlotContent(t.$slots.subtitle) ? (o(), n("div", {
           key: 1,
           "data-qa": "dt-item-layout-subtitle-wrapper",
           class: a([
-            e.subtitleClass,
+            s.subtitleClass,
             "d-item-layout--subtitle",
-            { "d-item-layout--subtitle--with-title": l.hasSlotContent(t.$slots.default) }
+            { "d-item-layout--subtitle--with-title": e.hasSlotContent(t.$slots.default) }
           ])
         }, [
-          n(t.$slots, "subtitle")
+          l(t.$slots, "subtitle")
         ], 2)) : d("", !0),
-        l.hasSlotContent(t.$slots.bottom) ? (s(), o("div", {
+        e.hasSlotContent(t.$slots.blockEnd) || e.hasSlotContent(t.$slots.bottom) ? (o(), n("div", {
           key: 2,
           "data-qa": "dt-item-layout-bottom-wrapper",
-          class: a([e.bottomClass, "d-item-layout__bottom"])
+          class: a([e.resolvedBlockEndClass, "d-item-layout__bottom"])
         }, [
-          n(t.$slots, "bottom")
+          t.$slots.blockEnd ? l(t.$slots, "blockEnd", { key: 0 }) : l(t.$slots, "bottom", { key: 1 })
         ], 2)) : d("", !0)
       ], 2),
-      l.hasSlotContent(t.$slots.right) ? (s(), o("section", {
+      e.hasSlotContent(t.$slots.end) || e.hasSlotContent(t.$slots.right) ? (o(), n("section", {
         key: 1,
         "data-qa": "dt-item-layout-right-wrapper",
-        class: a([e.rightClass, "d-item-layout__right"])
+        class: a([e.resolvedEndClass, "d-item-layout__right"])
       }, [
-        n(t.$slots, "right")
+        t.$slots.end ? l(t.$slots, "end", { key: 0 }) : l(t.$slots, "right", { key: 1 })
       ], 2)) : d("", !0),
-      l.hasSlotContent(t.$slots.selected) ? (s(), o("section", {
+      e.hasSlotContent(t.$slots.selected) ? (o(), n("section", {
         key: 2,
         "data-qa": "dt-item-layout-selected-wrapper",
-        class: a([e.selectedClass, "d-item-layout__selected"])
+        class: a([s.selectedClass, "d-item-layout__selected"])
       }, [
-        n(t.$slots, "selected")
+        l(t.$slots, "selected")
       ], 2)) : d("", !0)
     ]),
     _: 3
   }, 8, ["class", "style"]);
 }
-const _ = /* @__PURE__ */ f(h, [["render", g]]);
+const E = /* @__PURE__ */ c(h, [["render", S]]);
 export {
-  _ as default
+  E as default
 };
 //# sourceMappingURL=item-layout.js.map

package/dist/lib/item-layout/item-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-layout.js","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n    :style=\"unstyled && dynamicGridTemplateColumns()\"\n  >\n    <section\n      v-if=\"hasSlotContent($slots.left)\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      :class=\"[leftClass, 'd-item-layout__left']\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      :class=\"[contentClass, 'd-item-layout__content']\"\n    >\n      <div\n        v-if=\"hasSlotContent($slots.default)\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        :class=\"[titleClass, 'd-item-layout__title']\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.subtitle)\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"[\n          subtitleClass,\n          'd-item-layout--subtitle',\n          { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n        ]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.bottom)\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        :class=\"[bottomClass, 'd-item-layout__bottom']\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.right)\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      :class=\"[rightClass, 'd-item-layout__right']\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.selected)\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      :class=\"[selectedClass, 'd-item-layout__selected']\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Set the class for the left section.\n     */\n    leftClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the content section.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the title section.\n     */\n    titleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the subtitle section.\n     */\n    subtitleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the bottom section.\n     */\n    bottomClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the right section.\n     */\n    rightClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the selected section.\n     */\n    selectedClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  methods: {\n    /**\n     * Generate dynamic grid template columns\n     */\n    dynamicGridTemplateColumns () {\n      const leftContentColumn = this.$slots.left ? 'auto' : '';\n      const rightContentColumn = this.$slots.right ? 'auto' : '';\n      const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n      return `\n        grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n      `;\n    },\n\n    hasSlotContent,\n  },\n};\n</script>\n"],"names":["_sfc_main","leftContentColumn","rightContentColumn","selectedContentColumn","hasSlotContent","_openBlock","_createBlock","_resolveDynamicComponent","$props","_normalizeStyle","$options","_ctx","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass"],"mappings":";;;AA0EA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA;;;;;IAOX,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,SAAS;AAAA;AAAA;AAAA;AAAA,IAIP,6BAA8B;AAC5B,YAAMC,IAAoB,KAAK,OAAO,OAAO,SAAS,IAChDC,IAAqB,KAAK,OAAO,QAAQ,SAAS,IAClDC,IAAwB,KAAK,OAAO,WAAW,SAAS;AAE9D,aAAO;AAAA,iCACoBF,CAAiB,QAAQC,CAAkB,IAAIC,CAAqB;AAAA;AAAA,IAEjG;AAAA,IAEA,gBAAAC;AAAA;AAEJ;;AAvKE,SAAAC,EAAA,GAAAC,EA8DYC,EA7DLC,EAAA,EAAE,GAAA;AAAA,IACN,SAAOA,EAAA,WAAQ,0BAAA,eAAA;AAAA,IACf,OAAKC,EAAED,EAAA,YAAYE,EAAA,2BAA0B,CAAA;AAAA;eAE9C,MAOU;AAAA,MANFA,EAAA,eAAeC,EAAA,OAAO,IAAI,UADlCC,EAOU,WAAA;AAAA;QALR,WAAQ;AAAA,QACP,UAAQJ,EAAA,WAAS,qBAAA,CAAA;AAAA;QAGlBK,EAAoBF,EAAA,QAAA,MAAA;AAAA;MAEtBG,EAgCU,WAAA;AAAA,QA/BR,WAAQ;AAAA,QACP,UAAQN,EAAA,cAAY,wBAAA,CAAA;AAAA;QAGbE,EAAA,eAAeC,EAAA,OAAO,OAAO,UADrCC,EAOM,OAAA;AAAA;UALJ,WAAQ;AAAA,UACP,UAAQJ,EAAA,YAAU,sBAAA,CAAA;AAAA;UAGnBK,EAAQF,EAAA,QAAA,SAAA;AAAA;QAGFD,EAAA,eAAeC,EAAA,OAAO,QAAQ,UADtCC,EAWM,OAAA;AAAA;UATJ,WAAQ;AAAA,UACP,OAAKG,EAAA;AAAA,YAAcP,EAAA;AAAA;qDAAuGE,EAAA,eAAeC,EAAA,OAAO,OAAO,EAAA;AAAA;;UAOxJE,EAAwBF,EAAA,QAAA,UAAA;AAAA;QAGlBD,EAAA,eAAeC,EAAA,OAAO,MAAM,UADpCC,EAOM,OAAA;AAAA;UALJ,WAAQ;AAAA,UACP,UAAQJ,EAAA,aAAW,uBAAA,CAAA;AAAA;UAGpBK,EAAsBF,EAAA,QAAA,QAAA;AAAA;;MAIlBD,EAAA,eAAeC,EAAA,OAAO,KAAK,UADnCC,EAOU,WAAA;AAAA;QALR,WAAQ;AAAA,QACP,UAAQJ,EAAA,YAAU,sBAAA,CAAA;AAAA;QAGnBK,EAAqBF,EAAA,QAAA,OAAA;AAAA;MAGfD,EAAA,eAAeC,EAAA,OAAO,QAAQ,UADtCC,EAOU,WAAA;AAAA;QALR,WAAQ;AAAA,QACP,UAAQJ,EAAA,eAAa,yBAAA,CAAA;AAAA;QAGtBK,EAAwBF,EAAA,QAAA,UAAA;AAAA;;;;;;"}
+{"version":3,"file":"item-layout.js","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n    :style=\"unstyled && dynamicGridTemplateColumns()\"\n  >\n    <section\n      v-if=\"hasSlotContent($slots.start) || hasSlotContent($slots.left)\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      :class=\"[resolvedStartClass, 'd-item-layout__left']\"\n    >\n      <!-- @slot Slot for start content -->\n      <slot\n        v-if=\"$slots.start\"\n        name=\"start\"\n      />\n      <!-- @slot @deprecated Use start -->\n      <slot\n        v-else\n        name=\"left\"\n      />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      :class=\"[contentClass, 'd-item-layout__content']\"\n    >\n      <div\n        v-if=\"hasSlotContent($slots.default)\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        :class=\"[titleClass, 'd-item-layout__title']\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.subtitle)\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"[\n          subtitleClass,\n          'd-item-layout--subtitle',\n          { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n        ]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.blockEnd) || hasSlotContent($slots.bottom)\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        :class=\"[resolvedBlockEndClass, 'd-item-layout__bottom']\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot\n          v-if=\"$slots.blockEnd\"\n          name=\"blockEnd\"\n        />\n        <!-- @slot @deprecated Use blockEnd -->\n        <slot\n          v-else\n          name=\"bottom\"\n        />\n      </div>\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.end) || hasSlotContent($slots.right)\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      :class=\"[resolvedEndClass, 'd-item-layout__right']\"\n    >\n      <!-- @slot Slot for end content -->\n      <slot\n        v-if=\"$slots.end\"\n        name=\"end\"\n      />\n      <!-- @slot @deprecated Use end -->\n      <slot\n        v-else\n        name=\"right\"\n      />\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.selected)\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      :class=\"[selectedClass, 'd-item-layout__selected']\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Set the class for the start section.\n     */\n    startClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the start section.\n     * @deprecated Use startClass\n     */\n    leftClass: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the class for the content section.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the title section.\n     */\n    titleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the subtitle section.\n     */\n    subtitleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the block-end section.\n     */\n    blockEndClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the block-end section.\n     * @deprecated Use blockEndClass\n     */\n    bottomClass: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the class for the end section.\n     */\n    endClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the end section.\n     * @deprecated Use endClass\n     */\n    rightClass: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the class for the selected section.\n     */\n    selectedClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  computed: {\n    resolvedStartClass () {\n      return this.leftClass ?? this.startClass;\n    },\n\n    resolvedEndClass () {\n      return this.rightClass ?? this.endClass;\n    },\n\n    resolvedBlockEndClass () {\n      return this.bottomClass ?? this.blockEndClass;\n    },\n  },\n\n  methods: {\n    /**\n     * Generate dynamic grid template columns\n     */\n    dynamicGridTemplateColumns () {\n      const leftContentColumn = (this.$slots.start || this.$slots.left) ? 'auto' : '';\n      const rightContentColumn = (this.$slots.end || this.$slots.right) ? 'auto' : '';\n      const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n      return `\n        grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n      `;\n    },\n\n    hasSlotContent,\n  },\n};\n</script>\n"],"names":["_sfc_main","leftContentColumn","rightContentColumn","selectedContentColumn","hasSlotContent","_openBlock","_createBlock","_resolveDynamicComponent","$props","_normalizeStyle","$options","_ctx","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass"],"mappings":"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"}

package/dist/lib/kitchen-sink/kitchen-sink-view.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),w=require("@dialpad/dialtone-icons/vue3"),b=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),d=require("../text/text.cjs"),i=require("../stack/stack.cjs"),p=require("../link/link.cjs"),v={key:0,class:"d-d-flex d-ai-center d-jc-center d-h164"},B={__name:"kitchen_sink_view",props:{title:{type:String,required:!0},itemLabel:{type:String,required:!0},iframeUrl:{type:String,required:!0},loaders:{type:Object,required:!0}},setup(u){const _=u,s=e.ref([]),k=e.ref(!0);function m(o){return o.toLowerCase().replace(/[\s/_]+/g,"-")}function g(o){var a;(a=document.getElementById(`ks-${o}`))==null||a.scrollIntoView({behavior:"smooth"})}function x(o){return e.markRaw(e.defineComponent({name:`ErrorBoundary-${o}`,setup(a,{slots:n}){const r=e.ref(null);return e.onErrorCaptured(t=>(r.value=t.message||String(t),!1)),()=>{var t;return r.value?e.h("div",{class:"d-fc-critical d-fs-200 d-p8 d-px12 d-bgc-critical d-bar4"},`Failed to render ${o}: ${r.value}`):(t=n.default)==null?void 0:t.call(n)}}}))}function y(o,a,n){const r=[];for(const[t,l]of Object.entries(o)){if(t==="default"||!(l!=null&&l.render)||typeof l.render!="function")continue;const f={...a.args,...l.args};try{const c=l.render(f,{argTypes:a.argTypes||{}});r.push({name:t,component:e.markRaw(c),errorBoundary:x(`${n} / ${t}`)})}catch(c){console.error(`Kitchen Sink: Failed to initialize ${n}/${t}:`,c)}}return r}return e.onMounted(async()=>{const o=await Promise.allSettled(Object.values(_.loaders).map(async n=>n())),a=[];for(const n of o){if(n.status!=="fulfilled")continue;const r=n.value,t=r.default;if(!(t!=null&&t.title))continue;const l=t.title.split("/").pop(),f=m(l),c=m(t.title),h=y(r,t,l);h.length!==0&&a.push({id:f,name:l,storyId:c,variants:h})}s.value=a.sort((n,r)=>n.name.localeCompare(r.name)),k.value=!1}),(o,a)=>{const n=e.resolveDirective("dt-scrollbar");return e.openBlock(),e.createElementBlock("div",null,[k.value?(e.openBlock(),e.createElementBlock("div",v,[e.createVNode(e.unref(d.default),{tone:"muted"},{default:e.withCtx(()=>[e.createTextVNode(" Loading "+e.toDisplayString(u.itemLabel)+"... ",1)]),_:1})])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createVNode(e.unref(i.default),{class:"d-p32 d-py16 d-pb8 d-bgc-secondary d-bb d-ps-sticky d-t0 d-zi-base1 d-mtn10 d-mxn10 d-bs-card",gap:"400"},{default:e.withCtx(()=>[e.createVNode(e.unref(i.default),{class:"d-px8",gap:"400",direction:"row",justify:"between",align:"baseline"},{default:e.withCtx(()=>[e.createVNode(e.unref(d.default),{as:"h1",kind:"headline",size:"3xl"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(u.title),1)]),_:1}),e.createVNode(e.unref(d.default),{kind:"body",size:"sm"},{default:e.withCtx(()=>[e.createVNode(e.unref(p.default),{href:u.iframeUrl,target:"_blank",rel:"noopener noreferrer"},{default:e.withCtx(()=>[e.createVNode(e.unref(i.default),{gap:"300",direction:"row"},{default:e.withCtx(()=>[a[0]||(a[0]=e.createTextVNode(" Open in new window ",-1)),e.createVNode(e.unref(w.DtIconExternalLink),{size:"200"})]),_:1})]),_:1},8,["href"])]),_:1})]),_:1}),e.withDirectives((e.openBlock(),e.createElementBlock("div",null,[e.createVNode(e.unref(i.default),{direction:"row",gap:"400",class:"d-pb8 d-px8"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,r=>(e.openBlock(),e.createBlock(e.unref(p.default),{key:r.id,href:`#ks-${r.id}`,onClick:e.withModifiers(t=>g(r.id),["prevent"])},{default:e.withCtx(()=>[e.createVNode(e.unref(d.default),{kind:"body",size:"sm",class:"d-ws-nowrap"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.name),1)]),_:2},1024)]),_:2},1032,["href","onClick"]))),128))]),_:1})])),[[n]])]),_:1}),e.createVNode(e.unref(i.default),{class:"d-px32"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,r=>(e.openBlock(),e.createBlock(e.unref(i.default),{id:`ks-${r.id}`,key:r.id,as:"section",gap:"500",class:"d-py32 kitchen-sink__section"},{default:e.withCtx(()=>[e.createVNode(e.unref(i.default),{gap:"400",direction:"row",justify:"between",align:"baseline"},{default:e.withCtx(()=>[e.createVNode(e.unref(d.default),{as:"h2",kind:"headline",size:"2xl"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.name),1)]),_:2},1024),e.createVNode(e.unref(p.default),{href:`/?path=/story/${r.storyId}--default`},{default:e.withCtx(()=>[...a[1]||(a[1]=[e.createTextVNode(" View Story ",-1)])]),_:1},8,["href"])]),_:2},1024),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.variants,t=>(e.openBlock(),e.createBlock(e.unref(i.default),{key:t.name,class:"d-ba d-bc-subtle d-p16",gap:"400"},{default:e.withCtx(()=>[e.createVNode(e.unref(d.default),{size:"xs",tone:"muted",kind:"code"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.name),1)]),_:2},1024),e.createElementVNode("div",null,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.errorBoundary),null,{default:e.withCtx(()=>[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.component)))]),_:2},1024))])]),_:2},1024))),128))]),_:2},1032,["id"]))),128))]),_:1})],64))])}}},C=b._(B,[["__scopeId","data-v-a77c21eb"]]);exports.default=C;
+//# sourceMappingURL=kitchen-sink-view.cjs.map

package/dist/lib/kitchen-sink/kitchen-sink-view.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"kitchen-sink-view.cjs","sources":["../../../components/kitchen_sink/kitchen_sink_view.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class, vue/no-bare-strings-in-template -->\n<template>\n  <div>\n    <div\n      v-if=\"loading\"\n      class=\"d-d-flex d-ai-center d-jc-center d-h164\"\n    >\n      <dt-text\n        tone=\"muted\"\n      >\n        Loading {{ itemLabel }}...\n      </dt-text>\n    </div>\n    <template v-else>\n      <dt-stack\n        class=\"\n          d-p32\n          d-py16\n          d-pb8\n          d-bgc-secondary\n          d-bb\n          d-ps-sticky\n          d-t0\n          d-zi-base1\n          d-mtn10\n          d-mxn10\n          d-bs-card\n        \"\n        gap=\"400\"\n      >\n        <dt-stack\n          class=\"d-px8\"\n          gap=\"400\"\n          direction=\"row\"\n          justify=\"between\"\n          align=\"baseline\"\n        >\n          <dt-text\n            as=\"h1\"\n            kind=\"headline\"\n            size=\"3xl\"\n          >\n            {{ title }}\n          </dt-text>\n          <dt-text\n            kind=\"body\"\n            size=\"sm\"\n          >\n            <dt-link\n              :href=\"iframeUrl\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              <dt-stack\n                gap=\"300\"\n                direction=\"row\"\n              >\n                Open in new window\n                <dt-icon-external-link size=\"200\" />\n              </dt-stack>\n            </dt-link>\n          </dt-text>\n        </dt-stack>\n        <div\n          v-dt-scrollbar\n        >\n          <dt-stack\n            direction=\"row\"\n            gap=\"400\"\n            class=\"d-pb8 d-px8\"\n          >\n            <dt-link\n              v-for=\"section in sections\"\n              :key=\"section.id\"\n              :href=\"`#ks-${section.id}`\"\n              @click.prevent=\"scrollTo(section.id)\"\n            >\n              <dt-text\n                kind=\"body\"\n                size=\"sm\"\n                class=\"d-ws-nowrap\"\n              >\n                {{ section.name }}\n              </dt-text>\n            </dt-link>\n          </dt-stack>\n        </div>\n      </dt-stack>\n      <dt-stack class=\"d-px32\">\n        <dt-stack\n          v-for=\"section in sections\"\n          :id=\"`ks-${section.id}`\"\n          :key=\"section.id\"\n          as=\"section\"\n          gap=\"500\"\n          class=\"d-py32 kitchen-sink__section\"\n        >\n          <dt-stack\n            gap=\"400\"\n            direction=\"row\"\n            justify=\"between\"\n            align=\"baseline\"\n          >\n            <dt-text\n              as=\"h2\"\n              kind=\"headline\"\n              size=\"2xl\"\n            >\n              {{ section.name }}\n            </dt-text>\n            <dt-link\n              :href=\"`/?path=/story/${section.storyId}--default`\"\n            >\n              View Story\n            </dt-link>\n          </dt-stack>\n          <dt-stack\n            v-for=\"variant in section.variants\"\n            :key=\"variant.name\"\n            class=\"d-ba d-bc-subtle d-p16\"\n            gap=\"400\"\n          >\n            <dt-text\n              size=\"xs\"\n              tone=\"muted\"\n              kind=\"code\"\n            >\n              {{ variant.name }}\n            </dt-text>\n            <div>\n              <component :is=\"variant.errorBoundary\">\n                <component :is=\"variant.component\" />\n              </component>\n            </div>\n          </dt-stack>\n        </dt-stack>\n      </dt-stack>\n    </template>\n  </div>\n</template>\n\n<script setup>\nimport { ref, h, onErrorCaptured, onMounted, defineComponent, markRaw } from 'vue';\nimport { DtLink } from '@/components/link';\nimport { DtStack } from '@/components/stack';\nimport { DtText } from '@/components/text';\nimport { DtIconExternalLink } from '@dialpad/dialtone-icons/vue3';\n\nconst props = defineProps({\n  title: {\n    type: String,\n    required: true,\n  },\n  itemLabel: {\n    type: String,\n    required: true,\n  },\n  iframeUrl: {\n    type: String,\n    required: true,\n  },\n  loaders: {\n    type: Object,\n    required: true,\n  },\n});\n\nconst sections = ref([]);\nconst loading = ref(true);\n\nfunction sanitizeId (str) {\n  return str.toLowerCase().replace(/[\\s/_]+/g, '-');\n}\n\nfunction scrollTo (id) {\n  document.getElementById(`ks-${id}`)?.scrollIntoView({ behavior: 'smooth' });\n}\n\nfunction createErrorBoundary (name) {\n  return markRaw(defineComponent({\n    name: `ErrorBoundary-${name}`,\n    setup (_, { slots }) {\n      const error = ref(null);\n      onErrorCaptured((err) => {\n        error.value = err.message || String(err);\n        return false;\n      });\n      return () => {\n        if (error.value) {\n          return h('div', {\n            class: 'd-fc-critical d-fs-200 d-p8 d-px12 d-bgc-critical d-bar4',\n          }, `Failed to render ${name}: ${error.value}`);\n        }\n        return slots.default?.();\n      };\n    },\n  }));\n}\n\nfunction extractVariants (module, meta, name) {\n  const variants = [];\n\n  for (const [exportName, exportValue] of Object.entries(module)) {\n    if (exportName === 'default') continue;\n    if (!exportValue?.render || typeof exportValue.render !== 'function') continue;\n\n    const mergedArgs = { ...meta.args, ...exportValue.args };\n\n    try {\n      const componentOptions = exportValue.render(mergedArgs, {\n        argTypes: meta.argTypes || {},\n      });\n      variants.push({\n        name: exportName,\n        component: markRaw(componentOptions),\n        errorBoundary: createErrorBoundary(`${name} / ${exportName}`),\n      });\n    } catch (e) {\n      console.error(`Kitchen Sink: Failed to initialize ${name}/${exportName}:`, e);\n    }\n  }\n\n  return variants;\n}\n\nonMounted(async () => {\n  const results = await Promise.allSettled(\n    Object.values(props.loaders).map(async (loader) => loader()),\n  );\n\n  const loaded = [];\n\n  for (const result of results) {\n    if (result.status !== 'fulfilled') continue;\n\n    const module = result.value;\n    const meta = module.default;\n    if (!meta?.title) continue;\n\n    const name = meta.title.split('/').pop();\n    const id = sanitizeId(name);\n    const storyId = sanitizeId(meta.title);\n    const variants = extractVariants(module, meta, name);\n\n    if (variants.length === 0) continue;\n\n    loaded.push({ id, name, storyId, variants });\n  }\n\n  sections.value = loaded.sort((a, b) => a.name.localeCompare(b.name));\n  loading.value = false;\n});\n</script>\n\n<style scoped>\n.kitchen-sink__section {\n  scroll-margin-block-start: var(--dt-size-750);\n}\n</style>\n"],"names":["props","__props","sections","ref","loading","sanitizeId","str","scrollTo","id","_a","createErrorBoundary","name","markRaw","defineComponent","_","slots","error","onErrorCaptured","err","h","extractVariants","module","meta","variants","exportName","exportValue","mergedArgs","componentOptions","e","onMounted","results","loader","loaded","result","storyId","a","b","_createElementBlock","_openBlock","_hoisted_1","_createVNode","_unref","DtText","_toDisplayString","_Fragment","DtStack","DtLink","DtIconExternalLink","_renderList","section","_createBlock","_withModifiers","$event","_createTextVNode","_cache","variant","_createElementVNode","_resolveDynamicComponent"],"mappings":"sjBAoJA,MAAMA,EAAQC,EAmBRC,EAAWC,EAAAA,IAAI,EAAE,EACjBC,EAAUD,EAAAA,IAAI,EAAI,EAExB,SAASE,EAAYC,EAAK,CACxB,OAAOA,EAAI,YAAW,EAAG,QAAQ,WAAY,GAAG,CAClD,CAEA,SAASC,EAAUC,EAAI,QACrBC,EAAA,SAAS,eAAe,MAAMD,CAAE,EAAE,IAAlC,MAAAC,EAAqC,eAAe,CAAE,SAAU,UAClE,CAEA,SAASC,EAAqBC,EAAM,CAClC,OAAOC,EAAAA,QAAQC,EAAAA,gBAAgB,CAC7B,KAAM,iBAAiBF,CAAI,GAC3B,MAAOG,EAAG,CAAE,MAAAC,GAAS,CACnB,MAAMC,EAAQb,EAAAA,IAAI,IAAI,EACtBc,OAAAA,EAAAA,gBAAiBC,IACfF,EAAM,MAAQE,EAAI,SAAW,OAAOA,CAAG,EAChC,GACR,EACM,IAAM,OACX,OAAIF,EAAM,MACDG,EAAAA,EAAE,MAAO,CACd,MAAO,0DACnB,EAAa,oBAAoBR,CAAI,KAAKK,EAAM,KAAK,EAAE,GAExCP,EAAAM,EAAM,UAAN,YAAAN,EAAA,KAAAM,EACT,CACF,CACJ,CAAG,CAAC,CACJ,CAEA,SAASK,EAAiBC,EAAQC,EAAMX,EAAM,CAC5C,MAAMY,EAAW,CAAA,EAEjB,SAAW,CAACC,EAAYC,CAAW,IAAK,OAAO,QAAQJ,CAAM,EAAG,CAE9D,GADIG,IAAe,WACf,EAACC,GAAA,MAAAA,EAAa,SAAU,OAAOA,EAAY,QAAW,WAAY,SAEtE,MAAMC,EAAa,CAAE,GAAGJ,EAAK,KAAM,GAAGG,EAAY,IAAI,EAEtD,GAAI,CACF,MAAME,EAAmBF,EAAY,OAAOC,EAAY,CACtD,SAAUJ,EAAK,UAAY,CAAA,CACnC,CAAO,EACDC,EAAS,KAAK,CACZ,KAAMC,EACN,UAAWZ,EAAAA,QAAQe,CAAgB,EACnC,cAAejB,EAAoB,GAAGC,CAAI,MAAMa,CAAU,EAAE,CACpE,CAAO,CACH,OAASI,EAAG,CACV,QAAQ,MAAM,sCAAsCjB,CAAI,IAAIa,CAAU,IAAKI,CAAC,CAC9E,CACF,CAEA,OAAOL,CACT,CAEAM,OAAAA,EAAAA,UAAU,SAAY,CACpB,MAAMC,EAAU,MAAM,QAAQ,WAC5B,OAAO,OAAO9B,EAAM,OAAO,EAAE,IAAI,MAAO+B,GAAWA,GAAQ,CAC/D,EAEQC,EAAS,CAAA,EAEf,UAAWC,KAAUH,EAAS,CAC5B,GAAIG,EAAO,SAAW,YAAa,SAEnC,MAAMZ,EAASY,EAAO,MAChBX,EAAOD,EAAO,QACpB,GAAI,EAACC,GAAA,MAAAA,EAAM,OAAO,SAElB,MAAMX,EAAOW,EAAK,MAAM,MAAM,GAAG,EAAE,IAAG,EAChCd,EAAKH,EAAWM,CAAI,EACpBuB,EAAU7B,EAAWiB,EAAK,KAAK,EAC/BC,EAAWH,EAAgBC,EAAQC,EAAMX,CAAI,EAE/CY,EAAS,SAAW,GAExBS,EAAO,KAAK,CAAE,GAAAxB,EAAI,KAAAG,EAAM,QAAAuB,EAAS,SAAAX,EAAU,CAC7C,CAEArB,EAAS,MAAQ8B,EAAO,KAAK,CAACG,EAAGC,IAAMD,EAAE,KAAK,cAAcC,EAAE,IAAI,CAAC,EACnEhC,EAAQ,MAAQ,EAClB,CAAC,0EAzPCiC,qBAwIM,MAAA,KAAA,CAtIIjC,EAAA,OADRkC,EAAAA,YAAAD,EAAAA,mBASM,MATNE,EASM,CALJC,EAAAA,YAIUC,EAAAA,MAAAC,EAAAA,OAAA,EAAA,CAHR,KAAK,OAAO,EAAA,mBACb,IACS,mBADT,YACSC,EAAAA,gBAAG1C,EAAA,SAAS,EAAG,OACzB,CAAA,4BAEFoC,EAAAA,mBA4HWO,EAAAA,SAAA,CAAA,IAAA,CAAA,EAAA,CA3HTJ,cAyEWC,EAAAA,MAAAI,EAAAA,OAAA,EAAA,CAxET,MAAM,gGAaN,IAAI,0BAEJ,IAgCW,CAhCXL,cAgCWC,EAAAA,MAAAI,EAAAA,OAAA,EAAA,CA/BT,MAAM,QACN,IAAI,MACJ,UAAU,MACV,QAAQ,UACR,MAAM,+BAEN,IAMU,CANVL,cAMUC,EAAAA,MAAAC,EAAAA,OAAA,EAAA,CALR,GAAG,KACH,KAAK,WACL,KAAK,0BAEL,IAAW,qCAARzC,EAAA,KAAK,EAAA,CAAA,UAEVuC,cAiBUC,EAAAA,MAAAC,EAAAA,OAAA,EAAA,CAhBR,KAAK,OACL,KAAK,yBAEL,IAYU,CAZVF,cAYUC,EAAAA,MAAAK,EAAAA,OAAA,EAAA,CAXP,KAAM7C,EAAA,UACP,OAAO,SACP,IAAI,0CAEJ,IAMW,CANXuC,cAMWC,EAAAA,MAAAI,EAAAA,OAAA,EAAA,CALT,IAAI,MACJ,UAAU,0BACX,IAEC,+BAFD,uBAEC,EAAA,GAAAL,EAAAA,YAAoCC,EAAAA,MAAAM,EAAAA,kBAAA,EAAA,CAAb,KAAK,KAAK,CAAA,6EAKzCV,qBAuBM,MAAA,KAAA,CApBJG,cAmBWC,EAAAA,MAAAI,EAAAA,OAAA,EAAA,CAlBT,UAAU,MACV,IAAI,MACJ,MAAM,kCAGJ,IAA2B,kBAD7BR,EAAAA,mBAaUO,EAAAA,SAAA,KAAAI,EAAAA,WAZU9C,EAAA,MAAX+C,kBADTC,EAAAA,YAaUT,EAAAA,MAAAK,EAAAA,OAAA,EAAA,CAXP,IAAKG,EAAQ,GACb,KAAI,OAASA,EAAQ,EAAE,GACvB,QAAKE,EAAAA,cAAAC,GAAU7C,EAAS0C,EAAQ,EAAE,EAAA,CAAA,SAAA,CAAA,sBAEnC,IAMU,CANVT,cAMUC,EAAAA,MAAAC,EAAAA,OAAA,EAAA,CALR,KAAK,OACL,KAAK,KACL,MAAM,kCAEN,IAAkB,CAAfW,EAAAA,gBAAAV,EAAAA,gBAAAM,EAAQ,IAAI,EAAA,CAAA,iFAMzBT,EAAAA,YAgDWC,EAAAA,MAAAI,EAAAA,OAAA,EAAA,CAhDD,MAAM,QAAQ,EAAA,mBAEpB,IAA2B,kBAD7BR,EAAAA,mBA8CWO,EAAAA,SAAA,KAAAI,EAAAA,WA7CS9C,EAAA,MAAX+C,kBADTC,EAAAA,YA8CWT,EAAAA,MAAAI,EAAAA,OAAA,EAAA,CA5CR,GAAE,MAAQI,EAAQ,EAAE,GACpB,IAAKA,EAAQ,GACd,GAAG,UACH,IAAI,MACJ,MAAM,mDAEN,IAkBW,CAlBXT,cAkBWC,EAAAA,MAAAI,EAAAA,OAAA,EAAA,CAjBT,IAAI,MACJ,UAAU,MACV,QAAQ,UACR,MAAM,+BAEN,IAMU,CANVL,cAMUC,EAAAA,MAAAC,EAAAA,OAAA,EAAA,CALR,GAAG,KACH,KAAK,WACL,KAAK,0BAEL,IAAkB,CAAfW,EAAAA,gBAAAV,EAAAA,gBAAAM,EAAQ,IAAI,EAAA,CAAA,eAEjBT,cAIUC,EAAAA,MAAAK,EAAAA,OAAA,EAAA,CAHP,KAAI,iBAAmBG,EAAQ,OAAO,gCACxC,IAED,CAAA,GAAAK,EAAA,CAAA,IAAAA,EAAA,CAAA,EAAA,mBAFC,eAED,EAAA,qCAEFhB,YAAA,EAAA,EAAAD,EAAAA,mBAkBWO,EAAAA,SAAA,KAAAI,EAAAA,WAjBSC,EAAQ,SAAnBM,kBADTL,EAAAA,YAkBWT,EAAAA,MAAAI,EAAAA,OAAA,EAAA,CAhBR,IAAKU,EAAQ,KACd,MAAM,yBACN,IAAI,0BAEJ,IAMU,CANVf,cAMUC,EAAAA,MAAAC,EAAAA,OAAA,EAAA,CALR,KAAK,KACL,KAAK,QACL,KAAK,2BAEL,IAAkB,CAAfW,EAAAA,gBAAAV,EAAAA,gBAAAY,EAAQ,IAAI,EAAA,CAAA,eAEjBC,EAAAA,mBAIM,MAAA,KAAA,gBAHJN,EAAAA,YAEYO,EAAAA,wBAFIF,EAAQ,aAAa,EAAA,KAAA,mBACnC,IAAqC,gBAArCL,EAAAA,YAAqCO,EAAAA,wBAArBF,EAAQ,SAAS,CAAA"}