{"version":3,"file":"root_layout.vue.cjs","sources":["../../../components/root_layout/root_layout.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'root-layout',\n      'd-root-layout',\n      {\n        'd-root-layout--fixed': fixed,\n        'd-root-layout--inverted': isInverted,\n        [`d-root-layout__responsive--${responsiveBreakpoint}`]: !!responsiveBreakpoint,\n      },\n    ]\"\n    data-qa=\"dt-root-layout\"\n  >\n    <header\n      :class=\"['d-root-layout__header', { 'd-root-layout__header--sticky': headerSticky }, headerClass]\"\n      data-qa=\"dt-root-layout-header\"\n    >\n      <!-- @slot Slot for header content, be sure to set a height on the element inside this\n        if you want a fixed height. -->\n      <slot name=\"header\" />\n    </header>\n    <aside\n      ref=\"root-layout-sidebar\"\n      tabindex=\"0\"\n      :class=\"['d-root-layout__sidebar', sidebarClass]\"\n      data-qa=\"dt-root-layout-sidebar\"\n    >\n      <!-- @slot Slot for sidebar content, be sure to set a width on the element within this. -->\n      <slot name=\"sidebar\" />\n    </aside>\n    <main\n      ref=\"root-layout-content\"\n      :class=\"['d-root-layout__content', contentClass]\"\n      data-qa=\"dt-root-layout-content\"\n      tabindex=\"0\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </main>\n    <footer\n      :class=\"['d-root-layout__footer', footerClass]\"\n      data-qa=\"dt-root-layout-footer\"\n    >\n      <!-- @slot Slot for footer content, be sure to set a height on the element inside this\n        if you want a fixed height. -->\n      <slot name=\"footer\" />\n    </footer>\n  </div>\n</template>\n\n<script>\nimport { ROOT_LAYOUT_SIDEBAR_POSITIONS, ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS } from './root_layout_constants';\n\n/**\n * A root layout provides a standardized group of containers to display content at the root level.\n */\nexport default {\n  name: 'DtRootLayout',\n\n  props: {\n    /**\n     * When true, the header, footer and sidebar will be locked in position and the content will\n     * be scrollable. When false the header, footer and sidebar  will scroll out of view.\n     * @values true, false\n     */\n    fixed: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Additional class name for the header element\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * DEPRECATED: set the height of the inner element instead.\n     */\n    headerHeight: {\n      type: String,\n      default: '64px',\n    },\n\n    /**\n     * Scroll the header with the page\n     * @values true, false\n     */\n    headerSticky: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional class name for the content element\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the sidebar element\n     */\n    sidebarClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * DEPRECATED: set the width of the inner element instead.\n     */\n    sidebarWidth: {\n      type: String,\n      default: '256px',\n    },\n\n    /**\n     * Whether the sidebar is on the left or right side\n     * Possible options: 'left', 'right'\n     * @values left, right\n     */\n    sidebarPosition: {\n      type: String,\n      default: 'left',\n      validator: (s) => Object.values(ROOT_LAYOUT_SIDEBAR_POSITIONS).includes(s),\n    },\n\n    /**\n     * Additional class name for the footer element\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * DEPRECATED: set the height of the inner element instead.\n     */\n    footerHeight: {\n      type: String,\n      default: '64px',\n    },\n\n    /**\n     * Defines the breakpoint when the root layout will change to responsive version\n     * @values 'sm', 'md', 'lg', null\n     */\n    responsiveBreakpoint: {\n      type: String,\n      default: null,\n      validator: (bp) => ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS.includes(bp),\n    },\n  },\n\n  computed: {\n    isInverted () {\n      return this.sidebarPosition === ROOT_LAYOUT_SIDEBAR_POSITIONS.RIGHT;\n    },\n  },\n};\n</script>\n"],"names":["ROOT_LAYOUT_SIDEBAR_POSITIONS","ROOT_LAYOUT_RESPONSIVE_BREAKPOINTS"],"mappings":";;;;AAwDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,OAAAA,mDAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,OAAAC,yDAAA,SAAA,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,oBAAAD,sBAAA,8BAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}