@aziontech/webkit 1.6.0 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aziontech/webkit",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Reusable UI components and design system utilities for building Azion web interfaces.",
   "license": "MIT",
   "repository": {
@@ -70,6 +70,40 @@
     "./azion-system-status": "./src/components/azion-system-status/azion-system-status.vue",
     "./testimonials-carousel": "./src/components/testimonials-carousel/testimonials-carousel.vue",
     "./client-testimonials-block": "./src/components/client-testimonials-block/client-testimonials-block.vue",
+    "./loading-block": "./src/components/loading-block/loading-block.vue",
+    "./empty-results-block": "./src/components/empty-results-block/empty-results-block.vue",
+    "./resizable-splitter": "./src/components/resizable-splitter/resizable-splitter.vue",
+    "./accordion": "./src/core/primevue/accordion/accordion.vue",
+    "./accordion-tab": "./src/core/primevue/accordion-tab/accordion-tab.vue",
+    "./avatar": "./src/core/primevue/avatar/avatar.vue",
+    "./breadcrumb": "./src/core/primevue/breadcrumb/breadcrumb.vue",
+    "./button": "./src/core/primevue/button/button.vue",
+    "./card": "./src/core/primevue/card/card.vue",
+    "./carousel": "./src/core/primevue/carousel/carousel.vue",
+    "./chip": "./src/core/primevue/chip/chip.vue",
+    "./column": "./src/core/primevue/column/column.vue",
+    "./datatable": "./src/core/primevue/datatable/datatable.vue",
+    "./dialog": "./src/core/primevue/dialog/dialog.vue",
+    "./divider": "./src/core/primevue/divider/divider.vue",
+    "./inline-message": "./src/core/primevue/inline-message/inline-message.vue",
+    "./menu": "./src/core/primevue/menu/menu.vue",
+    "./message": "./src/core/primevue/message/message.vue",
+    "./overlaypanel": "./src/core/primevue/overlaypanel/overlaypanel.vue",
+    "./paginator": "./src/core/primevue/paginator/paginator.vue",
+    "./progressbar": "./src/core/primevue/progressbar/progressbar.vue",
+    "./progressspinner": "./src/core/primevue/progressspinner/progressspinner.vue",
+    "./sidebar": "./src/core/primevue/sidebar/sidebar.vue",
+    "./skeleton": "./src/core/primevue/skeleton/skeleton.vue",
+    "./splitbutton": "./src/core/primevue/splitbutton/splitbutton.vue",
+    "./steps": "./src/core/primevue/steps/steps.vue",
+    "./tabmenu": "./src/core/primevue/tabmenu/tabmenu.vue",
+    "./tabpanel": "./src/core/primevue/tabpanel/tabpanel.vue",
+    "./tabview": "./src/core/primevue/tabview/tabview.vue",
+    "./tag": "./src/core/primevue/tag/tag.vue",
+    "./timeline": "./src/core/primevue/timeline/timeline.vue",
+    "./toast": "./src/core/primevue/toast/toast.vue",
+    "./toolbar": "./src/core/primevue/toolbar/toolbar.vue",
+    "./badge": "./src/core/primevue/badge/badge.vue",
     "./svg/error-403": "./src/svg/error-403/error-403.vue",
     "./svg/error-404": "./src/svg/error-404/error-404.vue",
     "./styles/country-flags": "./src/styles/country-flags.css"

package/src/components/empty-results-block/empty-results-block.vue

@@ -0,0 +1,115 @@
+<script setup>
+import PrimeButton from 'primevue/button'
+
+defineOptions({ name: 'empty-results-block' })
+
+const emit = defineEmits(['click-to-create'])
+
+const props = defineProps({
+  title: {
+    type: String,
+    required: true
+  },
+  description: {
+    type: String,
+    required: true
+  },
+  createButtonLabel: {
+    type: String,
+    default: ''
+  },
+  disabledList: {
+    type: Boolean,
+    default: false
+  },
+  inTabs: {
+    type: Boolean,
+    default: false
+  },
+  noBorder: {
+    type: Boolean,
+    default: false
+  },
+  noShowBorderTop: {
+    type: Boolean,
+    default: false
+  },
+  showLearnMoreButton: {
+    type: Boolean,
+    default: true
+  },
+  documentationService: {
+    type: Function,
+    default: null
+  },
+  pt: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+function openDocumentation() {
+  if (props.documentationService) {
+    props.documentationService()
+  }
+}
+
+function handleCreateClick() {
+  emit('click-to-create')
+}
+</script>
+
+<template>
+  <div
+    class="flex flex-col justify-center surface-section rounded-md"
+    :class="{
+      'mt-4 pb-8': inTabs,
+      'border surface-border': !noBorder,
+      'rounded-t-none': noShowBorderTop
+    }"
+  >
+    <div
+      class="min-h-[300px] flex flex-col justify-center gap-5 items-center rounded-md p-8 max-md:p-3"
+      :class="pt"
+    >
+      <slot name="illustration"></slot>
+      <div class="flex flex-col gap-2 max-w-4xl">
+        <p class="text-center text-color text-lg font-medium leading-7">
+          {{ title }}
+        </p>
+        <p class="text-center text-color-secondary text-base font-normal leading-tight">
+          {{ description }}
+        </p>
+      </div>
+      <div class="flex flex-col gap-5 items-center w-full">
+        <div class="flex flex-wrap gap-2 justify-center w-full">
+          <slot name="extraActionsLeft"></slot>
+          <slot name="default">
+            <PrimeButton
+              v-if="createButtonLabel"
+              class="max-md:w-full w-fit"
+              severity="secondary"
+              :disabled="disabledList"
+              icon="pi pi-plus"
+              :data-testid="`create_${createButtonLabel}_button`"
+              :label="createButtonLabel"
+              size="small"
+              @click="handleCreateClick"
+            />
+          </slot>
+          <slot name="extraActionsRight"></slot>
+        </div>
+        <PrimeButton
+          v-if="documentationService"
+          class="w-fit"
+          icon-pos="right"
+          icon="pi pi-external-link"
+          label="View Documentation"
+          link
+          size="small"
+          @click="openDocumentation"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/src/components/empty-results-block/empty-results-block.vue.d.ts

@@ -0,0 +1,112 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    description: {
+        type: StringConstructor;
+        required: true;
+    };
+    createButtonLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabledList: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inTabs: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noBorder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noShowBorderTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLearnMoreButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    documentationService: {
+        type: FunctionConstructor;
+        default: null;
+    };
+    pt: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "click-to-create": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        required: true;
+    };
+    description: {
+        type: StringConstructor;
+        required: true;
+    };
+    createButtonLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabledList: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    inTabs: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noBorder: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    noShowBorderTop: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    showLearnMoreButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    documentationService: {
+        type: FunctionConstructor;
+        default: null;
+    };
+    pt: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+}>> & Readonly<{
+    "onClick-to-create"?: ((...args: any[]) => any) | undefined;
+}>, {
+    pt: Record<string, any>;
+    createButtonLabel: string;
+    disabledList: boolean;
+    inTabs: boolean;
+    noBorder: boolean;
+    noShowBorderTop: boolean;
+    showLearnMoreButton: boolean;
+    documentationService: Function;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    illustration?: ((props: {}) => any) | undefined;
+} & {
+    extraActionsLeft?: ((props: {}) => any) | undefined;
+} & {
+    default?: ((props: {}) => any) | undefined;
+} & {
+    extraActionsRight?: ((props: {}) => any) | undefined;
+};
+//# sourceMappingURL=empty-results-block.vue.d.ts.map

package/src/components/empty-results-block/empty-results-block.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-results-block.vue.d.ts","sourceRoot":"","sources":["empty-results-block.vue"],"names":[],"mappings":"wBA+YqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AA/CzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EA4CG"}

package/src/components/empty-results-block/package.json

@@ -0,0 +1,9 @@
+{
+  "main": "./empty-results-block.vue",
+  "module": "./empty-results-block.vue",
+  "types": "./empty-results-block.vue.d.ts",
+  "browser": {
+    "./sfc": "./empty-results-block.vue"
+  },
+  "sideEffects": ["*.vue"]
+}

package/src/components/resizable-splitter/package.json

@@ -0,0 +1,9 @@
+{
+  "main": "./resizable-splitter.vue",
+  "module": "./resizable-splitter.vue",
+  "types": "./resizable-splitter.vue.d.ts",
+  "browser": {
+    "./sfc": "./resizable-splitter.vue"
+  },
+  "sideEffects": ["*.vue"]
+}

package/src/components/resizable-splitter/resizable-splitter.vue

@@ -0,0 +1,282 @@
+<template>
+  <div
+    ref="root"
+    class="resizable-splitter w-full flex min-h-0 overflow-hidden select-none"
+    :class="{ 'flex-col': isHorizontal, 'flex-row': !isHorizontal }"
+    @mouseleave="onPointerUp"
+  >
+    <div
+      class="panel-a min-w-0 min-h-0 flex-none"
+      :class="{ 'w-full': isHorizontal, 'h-full': !isHorizontal }"
+      :style="panelAStyle"
+    >
+      <slot name="panel-a" />
+    </div>
+
+    <div
+      ref="handle"
+      class="handle flex items-center justify-center group flex-none"
+      :class="handleClass"
+      @mousedown.prevent="onPointerDown"
+      @touchstart.passive="onPointerDown"
+    >
+      <div :class="barOuterClass">
+        <span :class="barInnerClass"></span>
+      </div>
+    </div>
+
+    <div
+      class="panel-b flex-1 min-h-0 min-w-0"
+      :class="{ 'w-full': isHorizontal, 'h-full': !isHorizontal }"
+      :style="panelBStyle"
+    >
+      <slot name="panel-b" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
+
+defineOptions({ name: 'resizable-splitter' })
+
+const props = defineProps({
+  panelSizes: {
+    type: Array,
+    default: () => [70, 30]
+  },
+  direction: {
+    type: String,
+    default: 'horizontal',
+    validator: (val) => ['horizontal', 'vertical'].includes(val)
+  },
+  minSize: {
+    type: Array,
+    default: () => [10, 10]
+  },
+  maxSize: {
+    type: Array,
+    default: () => [95, 95]
+  },
+  initialTopPanelPercent: {
+    type: Number,
+    default: null
+  },
+  initialTopPanelPixels: {
+    type: Number,
+    default: null
+  }
+})
+
+const emit = defineEmits(['update:panelSizes', 'resizeend'])
+
+const root = ref(null)
+const handle = ref(null)
+const isDragging = ref(false)
+const isHorizontal = computed(() => props.direction === 'horizontal')
+const currentSizes = ref([props.panelSizes[0], props.panelSizes[1]])
+let hasAppliedInitial = false
+let resizeObserver = null
+
+watch(
+  () => props.panelSizes,
+  (val) => {
+    if (Array.isArray(val) && val.length === 2) {
+      currentSizes.value = [Number(val[0]) || 0, Number(val[1]) || 0]
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+const clampPair = (desiredA) => {
+  const minA = Number(props.minSize?.[0] ?? 0)
+  const minB = Number(props.minSize?.[1] ?? 0)
+  const maxA = Number(props.maxSize?.[0] ?? 100)
+  const maxB = Number(props.maxSize?.[1] ?? 100)
+
+  let sizeA = desiredA
+  sizeA = Math.min(Math.max(sizeA, minA), Math.min(maxA, 100 - minB))
+  let sizeB = 100 - sizeA
+
+  if (sizeB > maxB) {
+    sizeB = maxB
+    sizeA = 100 - sizeB
+  }
+
+  if (sizeA < minA) {
+    sizeA = minA
+    sizeB = 100 - sizeA
+  }
+
+  if (sizeA > maxA) {
+    sizeA = maxA
+    sizeB = 100 - sizeA
+  }
+
+  if (sizeB < minB) {
+    sizeB = minB
+    sizeA = 100 - sizeB
+  }
+
+  return [sizeA, sizeB]
+}
+
+const panelAStyle = computed(() => {
+  if (isHorizontal.value) {
+    return { height: `${currentSizes.value[0]}%` }
+  }
+
+  const rect = root.value?.getBoundingClientRect()
+  if (!rect) {
+    return { width: `${currentSizes.value[0]}%` }
+  }
+
+  const handleW = Number(handle.value?.offsetWidth || 0)
+  const contentW = Math.max(rect.width - handleW, 0)
+  const totalW = contentW + handleW
+  const desiredPx = (currentSizes.value[0] / 100) * totalW
+  const widthPx = Math.round(Math.max(0, Math.min(desiredPx, contentW)))
+  return { width: `${widthPx}px` }
+})
+
+const panelBStyle = computed(() => {
+  if (isHorizontal.value) {
+    return { height: `${currentSizes.value[1]}%` }
+  }
+  return {}
+})
+
+const handleClass = computed(() => ({
+  'w-full h-6 cursor-row-resize': isHorizontal.value,
+  'h-full w-6 cursor-col-resize': !isHorizontal.value
+}))
+
+const barOuterClass = computed(() => ({
+  'w-full h-0.5 group-hover:h-1 bg-[var(--surface-300)] flex justify-center transition-all duration-200 ease-in-out':
+    isHorizontal.value,
+  'h-full w-0.5 group-hover:w-1 bg-[var(--surface-300)] flex items-center transition-all duration-200 ease-in-out':
+    !isHorizontal.value
+}))
+
+const barInnerClass = computed(() => ({
+  'w-6 h-full bg-[var(--surface-500)] transition-colors duration-200 ease-in-out':
+    isHorizontal.value,
+  'h-6 w-full bg-[var(--surface-500)] transition-colors duration-200 ease-in-out':
+    !isHorizontal.value
+}))
+
+let startY = 0
+let startX = 0
+let startHeights = [0, 0]
+
+const onPointerDown = (event) => {
+  isDragging.value = true
+  const point = event.touches ? event.touches[0] : event
+  startY = point.clientY || 0
+  startX = point.clientX || 0
+  startHeights = [currentSizes.value[0], currentSizes.value[1]]
+  window.addEventListener('mousemove', onPointerMove)
+  window.addEventListener('mouseup', onPointerUp)
+  window.addEventListener('touchmove', onPointerMove, { passive: false })
+  window.addEventListener('touchend', onPointerUp)
+}
+
+const onPointerMove = (event) => {
+  if (!isDragging.value || !root.value) return
+  const rect = root.value.getBoundingClientRect()
+  const point = event.touches ? event.touches[0] : event
+  const clientY = point.clientY
+  const clientX = point.clientX
+  const deltaPx = isHorizontal.value ? clientY - startY : clientX - startX
+  const handleW = Number(handle.value?.offsetWidth || 0)
+  const totalPx = isHorizontal.value ? rect.height : Math.max(rect.width - handleW, 0)
+  const deltaPercent = (deltaPx / totalPx) * 100
+  const desiredA = startHeights[0] + deltaPercent
+  const [newA, newB] = clampPair(desiredA)
+  currentSizes.value = [newA, newB]
+  emit('update:panelSizes', [newA, newB])
+}
+
+const onPointerUp = async () => {
+  if (!isDragging.value) return
+  isDragging.value = false
+  window.removeEventListener('mousemove', onPointerMove)
+  window.removeEventListener('mouseup', onPointerUp)
+  window.removeEventListener('touchmove', onPointerMove)
+  window.removeEventListener('touchend', onPointerUp)
+  await nextTick()
+  emit('resizeend', { sizes: [...currentSizes.value] })
+}
+
+const applyInitialSizes = async () => {
+  await nextTick()
+  let desiredA = Number(currentSizes.value[0]) || 0
+  const rect = root.value?.getBoundingClientRect()
+  const pxVal = props.initialTopPanelPixels
+  const pctVal = props.initialTopPanelPercent
+  if (pxVal != null && rect) {
+    const basis = isHorizontal.value ? rect.height : rect.width
+    if (basis > 0) desiredA = (Number(pxVal) / basis) * 100
+  } else if (pctVal != null) {
+    desiredA = Number(pctVal)
+  }
+  const [sizeA, sizeB] = clampPair(desiredA)
+  currentSizes.value = [sizeA, sizeB]
+  emit('update:panelSizes', [sizeA, sizeB])
+  emit('resizeend', { sizes: [sizeA, sizeB] })
+  hasAppliedInitial = true
+}
+
+onMounted(() => {
+  applyInitialSizes()
+  if ('ResizeObserver' in window && root.value) {
+    resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      const cr = entry?.contentRect
+      if (!hasAppliedInitial && cr && (cr.width > 0 || cr.height > 0)) {
+        applyInitialSizes()
+      }
+    })
+    resizeObserver.observe(root.value)
+  }
+})
+
+watch(
+  () => props.direction,
+  async () => {
+    await nextTick()
+    applyInitialSizes()
+  }
+)
+
+watch(
+  () => [props.initialTopPanelPercent, props.initialTopPanelPixels],
+  async () => {
+    await nextTick()
+    applyInitialSizes()
+  }
+)
+
+onBeforeUnmount(() => {
+  onPointerUp()
+  if (resizeObserver && root.value) {
+    const el = root.value
+    if (typeof resizeObserver.unobserve === 'function' && el) {
+      resizeObserver.unobserve(el)
+    }
+    if (typeof resizeObserver.disconnect === 'function') {
+      resizeObserver.disconnect()
+    }
+    resizeObserver = null
+  }
+})
+</script>
+
+<style scoped>
+.resizable-splitter {
+  --handle-bg: transparent;
+}
+.handle {
+  background: var(--handle-bg);
+}
+</style>

package/src/components/resizable-splitter/resizable-splitter.vue.d.ts

@@ -0,0 +1,78 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    panelSizes: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    direction: {
+        type: StringConstructor;
+        default: string;
+        validator: (val: unknown) => boolean;
+    };
+    minSize: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    maxSize: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    initialTopPanelPercent: {
+        type: NumberConstructor;
+        default: null;
+    };
+    initialTopPanelPixels: {
+        type: NumberConstructor;
+        default: null;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:panelSizes": (...args: any[]) => void;
+    resizeend: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    panelSizes: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    direction: {
+        type: StringConstructor;
+        default: string;
+        validator: (val: unknown) => boolean;
+    };
+    minSize: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    maxSize: {
+        type: ArrayConstructor;
+        default: () => number[];
+    };
+    initialTopPanelPercent: {
+        type: NumberConstructor;
+        default: null;
+    };
+    initialTopPanelPixels: {
+        type: NumberConstructor;
+        default: null;
+    };
+}>> & Readonly<{
+    "onUpdate:panelSizes"?: ((...args: any[]) => any) | undefined;
+    onResizeend?: ((...args: any[]) => any) | undefined;
+}>, {
+    panelSizes: unknown[];
+    direction: string;
+    minSize: unknown[];
+    maxSize: unknown[];
+    initialTopPanelPercent: number;
+    initialTopPanelPixels: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    'panel-a'?: ((props: {}) => any) | undefined;
+} & {
+    'panel-b'?: ((props: {}) => any) | undefined;
+};
+//# sourceMappingURL=resizable-splitter.vue.d.ts.map

package/src/components/resizable-splitter/resizable-splitter.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizable-splitter.vue.d.ts","sourceRoot":"","sources":["resizable-splitter.vue"],"names":[],"mappings":"wBA0oBqB,OAAO,YAAY;;AADxC,4BAA2B,eAAe,CAAC,OAAO,UAAU,EAAE,WAAW,CAAC,CAAC;qBAEtD,CAAC,EAAE,CAAC;;;AAhCzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EA6BG"}

package/src/core/form/field-group-switch/field-group-switch.vue.d.ts

@@ -73,8 +73,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     label: string;
     disabled: boolean;
-    inputClass: string;
     auto: boolean;
+    inputClass: string;
     isCard: boolean;
     hideSelector: boolean;
     helpText: string;

package/src/core/form/field-radio-block/field-radio-block.vue.d.ts

@@ -102,8 +102,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     onOnRadioChange?: ((...args: any[]) => any) | undefined;
 }>, {
     disabled: boolean;
-    inputValue: string | boolean | Record<string, any>;
     auto: boolean;
+    inputValue: string | boolean | Record<string, any>;
     isCard: boolean;
     hideSelector: boolean;
     isLabel: boolean;

package/src/core/form/field-switch-block/field-switch-block.vue.d.ts

@@ -111,8 +111,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>, {
     disabled: boolean;
     value: boolean;
-    readonly: boolean;
     auto: boolean;
+    readonly: boolean;
     isCard: boolean;
     hideSelector: boolean;
     isLabel: boolean;