{"version":3,"file":"OzDropdownButton-28fbad26.js","sources":["../../../app/javascript/library/v4/components/OzDropdownButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * @file The main differences between OzDropdownButton and OzContainedButton are:\n *\n * - Font weight\n * - Text color\n * - Transparent background instead of disabled color background\n * - No active state\n * - Padding\n * - Space between text and icon\n */\nimport OzBaseButton from '@@/library/v4/components/OzBaseButton.vue'\nimport OzIcon from '@@/library/v4/components/OzIcon.vue'\nimport type { VueCssClass } from '@@/types'\n\nwithDefaults(\n  defineProps<{\n    darkMode?: boolean | 'auto'\n    dir?: 'ltr' | 'rtl' | 'auto'\n    sizePreset?: OzDropdownButtonSizePreset\n    colorScheme?: OzDropdownButtonColorScheme\n    text?: string\n    /**\n     * Name of the icon displayed inline start in the button.\n     */\n    startIconName?: string\n    disabled?: boolean\n    /**\n     * Defines whether the button text should be truncated or not.\n     * Use case:\n     *\n     * 1. `true` - truncate the button text if it exceeds the button's width\n     * 2. `false` - do not truncate the button text, allowing it to stretch the button's height\n     */\n    shouldTruncateText?: boolean\n    shouldBoldText?: boolean\n    chevronDirection?: 'down' | 'up' | 'start' | 'end' | 'up_down'\n    /**\n     * Customizes the gap color between the button and the focus ring.\n     */\n    ringOffsetColorClasses?: VueCssClass\n    /**\n     * Customizes the text color on the button.\n     */\n    textColorClasses?: VueCssClass\n    activeHighlightMode?: 'text' | 'background'\n  }>(),\n  {\n    darkMode: 'auto',\n    dir: 'auto',\n    sizePreset: OzDropdownButtonSizePreset.H40px,\n    colorScheme: OzDropdownButtonColorScheme.Secondary,\n    text: undefined,\n    startIconName: undefined,\n    disabled: false,\n    shouldTruncateText: false,\n    shouldBoldText: false,\n    chevronDirection: 'down',\n    ringOffsetColorClasses: undefined,\n    textColorClasses: undefined,\n    activeHighlightMode: 'background',\n  },\n)\n\ndefineEmits(['click', 'focus', 'blur', 'mouseenter', 'mouseleave'])\n</script>\n\n<script lang=\"ts\">\nexport enum OzDropdownButtonSizePreset {\n  H40px = 'H40px',\n  H32px = 'H32px',\n  H20px = 'H20px',\n}\n\nexport enum OzDropdownButtonColorScheme {\n  Secondary = 'Secondary',\n  SecondaryClear = 'SecondaryClear',\n  SecondaryClearActive = 'SecondaryClearActive',\n  SecondaryClearText = 'SecondaryClearText',\n  SecondaryDark = 'SecondaryDark',\n  TransparentSecondaryText = 'TransparentSecondaryText',\n}\n\nexport enum OzDropdownButtonactiveHighlightMode {\n  Background = 'background',\n  Text = 'text',\n}\n\nexport default {}\n</script>\n\n<template>\n  <OzBaseButton\n    :dir=\"dir\"\n    :disabled=\"disabled\"\n    :class=\"[\n      'focus-visible:outline-none',\n\n      // Reset user agent styles\n      // Don't set px-0 here so we won't have specificity issues\n      'py-0',\n\n      // Centralize button content\n      'flex',\n      'items-center',\n      'justify-start',\n      'group',\n      sizePreset === OzDropdownButtonSizePreset.H20px && [\n        'h-5',\n        'rounded-xl',\n        'text-body-small',\n        startIconName ? 'px-2' : 'px-3',\n      ],\n\n      sizePreset === OzDropdownButtonSizePreset.H32px && [\n        'h-8',\n        'rounded-xl',\n        'text-body-small',\n        startIconName ? 'px-2' : 'px-3',\n      ],\n      sizePreset === OzDropdownButtonSizePreset.H40px && [\n        'h-10',\n        'rounded-2xl',\n        'text-body-posts',\n        startIconName ? 'px-5' : 'ps-4 pe-3',\n      ],\n\n      colorScheme && [\n        // Disabled\n        'aria-disabled:bg-transparent',\n        {\n          'aria-disabled:text-dark-text-200': darkMode === false,\n          'aria-disabled:text-light-text-200': darkMode === true,\n          'aria-disabled:text-dark-text-200 dark:aria-disabled:text-light-text-200': darkMode === 'auto',\n        },\n\n        // Active\n        !disabled &&\n          activeHighlightMode === 'background' && {\n            'hhover:active:bg-grape-500 hhover:active:text-light-text-100': darkMode === false,\n            'hhover:active:bg-canary-500 hhover:active:text-dark-text-100': darkMode === true,\n            'hhover:active:bg-grape-500 hhover:dark:active:bg-canary-500 hhover:active:text-light-text-100 hhover:dark:active:text-dark-text-100':\n              darkMode === 'auto',\n          },\n\n        !disabled &&\n          activeHighlightMode === 'text' && {\n            'hhover:active:text-grape-500': darkMode === false,\n            'hhover:active:text-canary-500': darkMode === true,\n            'hhover:active:text-grape-500 hhover:dark:active:text-canary-500': darkMode === 'auto',\n          },\n\n        // Active styles for mobile devices\n        activeHighlightMode === 'background' && {\n          'active:bg-grape-500 active:text-light-text-100': darkMode === false,\n          'active:bg-canary-500 active:text-dark-text-100': darkMode === true,\n          'active:bg-grape-500 dark:active:bg-canary-500 active:text-light-text-100 dark:active:text-dark-text-100':\n            darkMode === 'auto',\n        },\n        activeHighlightMode === 'text' && {\n          'active:text-grape-500': darkMode === false,\n          'active:text-canary-500': darkMode === true,\n          'active:text-grape-500 dark:active:text-canary-500': darkMode === 'auto',\n        },\n      ],\n\n      colorScheme === OzDropdownButtonColorScheme.SecondaryDark && [\n        // Focus ring\n        'ring-offset-1',\n        'focus-visible:ring-2',\n        {\n          'ring-grape-500': darkMode === false,\n          'ring-canary-500': darkMode === true,\n          'ring-grape-500 dark:ring-canary-500': darkMode === 'auto',\n        },\n        ringOffsetColorClasses || {\n          // Tailwind uses box shadows for focus rings.\n          // We'll have to deviate from TW paradigm if we want truly transparent ring-offset color.\n          'ring-offset-white': darkMode === false,\n          'ring-offset-grey-900': darkMode === true,\n          'ring-offset-white dark:ring-offset-grey-900': darkMode === 'auto',\n        },\n        // Base\n        {\n          'bg-grey-100': darkMode === false,\n          'bg-grey-700': darkMode === true,\n          'bg-grey-100 dark:bg-grey-700': darkMode === 'auto',\n        },\n        textColorClasses || {\n          'text-dark-text-200': darkMode === false,\n          'text-light-text-200': darkMode === true,\n          'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n        },\n        // Hovered\n        {\n          'hhover:hover:bg-grey-200': darkMode === false,\n          'hhover:hover:bg-grey-600': darkMode === true,\n          'hhover:hover:bg-grey-200 hhover:dark:hover:bg-grey-600': darkMode === 'auto',\n        },\n      ],\n\n      colorScheme === OzDropdownButtonColorScheme.Secondary && [\n        // Focus ring\n        'ring-offset-[1.5px]',\n        'focus-visible:ring-[2.5px]',\n        {\n          'ring-grape-500': darkMode === false,\n          'ring-canary-500': darkMode === true,\n          'ring-grape-500 dark:ring-canary-500': darkMode === 'auto',\n        },\n        ringOffsetColorClasses || {\n          // Tailwind uses box shadows for focus rings.\n          // We'll have to deviate from TW paradigm if we want truly transparent ring-offset color.\n          'ring-offset-white': darkMode === false,\n          'ring-offset-grey-900': darkMode === true,\n          'ring-offset-white dark:ring-offset-grey-900': darkMode === 'auto',\n        },\n\n        // Background color\n        {\n          'bg-button-light': darkMode === false,\n          'bg-button-dark': darkMode === true,\n          'bg-button-light dark:bg-button-dark': darkMode === 'auto',\n        },\n\n        // Background hover color\n        !disabled && {\n          'hhover:hover:bg-button-hover-light': darkMode === false,\n          'hhover:hover:bg-button-hover-dark': darkMode === true,\n          'hhover:hover:bg-button-hover-light hhover:dark:hover:bg-button-hover-dark': darkMode === 'auto',\n        },\n\n        // Text color\n        textColorClasses || {\n          'text-dark-text-100': darkMode === false,\n          'text-light-text-100': darkMode === true,\n          'text-dark-text-100 dark:text-light-text-100': darkMode === 'auto',\n        },\n      ],\n\n      colorScheme === OzDropdownButtonColorScheme.SecondaryClearText && [\n        // Focus ring\n        'ring-offset-[1.5px]',\n        'focus-visible:ring-[2.5px]',\n        {\n          'ring-grape-500': darkMode === false,\n          'ring-canary-500': darkMode === true,\n          'ring-grape-500 dark:ring-canary-500': darkMode === 'auto',\n        },\n        ringOffsetColorClasses || {\n          // Tailwind uses box shadows for focus rings.\n          // We'll have to deviate from TW paradigm if we want truly transparent ring-offset color.\n          'ring-offset-white': darkMode === false,\n          'ring-offset-grey-900': darkMode === true,\n          'ring-offset-white dark:ring-offset-grey-900': darkMode === 'auto',\n        },\n\n        // Background color\n        {\n          'bg-button-light': darkMode === false,\n          'bg-button-dark': darkMode === true,\n          'bg-button-light dark:bg-button-dark': darkMode === 'auto',\n        },\n\n        // Background hover color\n        !disabled && {\n          'hhover:hover:bg-button-hover-light': darkMode === false,\n          'hhover:hover:bg-button-hover-dark': darkMode === true,\n          'hhover:hover:bg-button-hover-light hhover:dark:hover:bg-button-hover-dark': darkMode === 'auto',\n        },\n\n        // Text color\n        textColorClasses || {\n          'text-dark-text-200': darkMode === false,\n          'text-light-text-200': darkMode === true,\n          'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n        },\n      ],\n\n      colorScheme === OzDropdownButtonColorScheme.SecondaryClear && [\n        // Focus ring\n        'focus-visible:ring-2',\n        {\n          'ring-grape-500': darkMode === false,\n          'ring-canary-500': darkMode === true,\n          'ring-grape-500 dark:ring-canary-500': darkMode === 'auto',\n        },\n\n        // Base\n        'bg-transparent',\n        textColorClasses || {\n          'text-dark-text-100': darkMode === false,\n          'text-light-text-100': darkMode === true,\n          'text-dark-text-100 dark:text-light-text-100': darkMode === 'auto',\n        },\n\n        // Hover\n        {\n          'hhover:bg-overlay-text-bg-light-mode-light-hover': darkMode === false,\n          'hhover:bg-overlay-text-bg-dark-mode-dark-hover': darkMode === true,\n          'hhover:bg-overlay-text-bg-light-mode-light-hover dark:hhover:bg-overlay-text-bg-dark-mode-dark-hover':\n            darkMode === 'auto',\n        },\n      ],\n\n      colorScheme === OzDropdownButtonColorScheme.SecondaryClearActive && [\n        {\n          'bg-overlay-text-bg-light-mode-light-hover': darkMode === false,\n          'bg-overlay-text-bg-light-mode-dark-hover': darkMode === true,\n          'bg-overlay-text-bg-light-mode-light-hover dark:bg-overlay-text-bg-light-mode-dark-hover':\n            darkMode === 'auto',\n        },\n        textColorClasses || {\n          'text-dark-text-100': darkMode === false,\n          'text-light-text-100': darkMode === true,\n          'text-dark-text-100 dark:text-light-text-100': darkMode === 'auto',\n        },\n      ],\n      colorScheme === OzDropdownButtonColorScheme.TransparentSecondaryText && [\n        // Focus ring\n        'focus-visible:ring-2',\n        {\n          'ring-grape-500': darkMode === false,\n          'ring-canary-500': darkMode === true,\n          'ring-grape-500 dark:ring-canary-500': darkMode === 'auto',\n        },\n\n        // Base\n        'bg-transparent',\n        textColorClasses || {\n          'text-dark-text-200': darkMode === false,\n          'text-light-text-200': darkMode === true,\n          'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n        },\n\n        // Hover\n        {\n          'hhover:text-dark-text-100': darkMode === false,\n          'hhover:text-light-text-100': darkMode === true,\n          'hhover:text-dark-text-100 dark:hhover:text-light-text-100': darkMode === 'auto',\n        },\n      ],\n    ]\"\n    @click=\"$emit('click', $event)\"\n    @focus=\"$emit('focus', $event)\"\n    @blur=\"$emit('blur', $event)\"\n    @mouseenter=\"$emit('mouseenter', $event)\"\n    @mouseleave=\"$emit('mouseleave', $event)\"\n  >\n    <OzIcon\n      v-if=\"!!startIconName\"\n      :name=\"startIconName\"\n      :size=\"sizePreset === OzDropdownButtonSizePreset.H32px ? 16 : 20\"\n      class=\"me-1.5\"\n    />\n    <slot v-else name=\"startAdornment\"></slot>\n    <span\n      :class=\"[\n        !disabled && 'me-1.5',\n        shouldTruncateText && 'truncate',\n        'text-start grow',\n        'high-contrast:font-semibold',\n        shouldBoldText && 'font-semibold',\n      ]\"\n      >{{ text }}</span\n    >\n    <OzIcon\n      v-if=\"!disabled\"\n      :name=\"chevronDirection === 'up_down' ? 'chevron_up_down' : 'disclosure'\"\n      :size=\"16\"\n      :class=\"[\n        'justify-self-end',\n        textColorClasses || {\n          'text-dark-text-200': darkMode === false,\n          'text-light-text-200': darkMode === true,\n          'text-dark-text-200 dark:text-light-text-200': darkMode === 'auto',\n        },\n        activeHighlightMode === 'background' && {\n          'group-active:text-light-text-200': darkMode === false,\n          'dark:group-active:text-dark-text-200': darkMode === true,\n          'group-active:text-light-text-200 dark:group-active:text-dark-text-200': darkMode === 'auto',\n        },\n        activeHighlightMode === 'background' && {\n          'hhover:group-active:text-light-text-200': darkMode === false,\n          'hhover:dark:group-active:text-dark-text-200': darkMode === true,\n          'hhover:group-active:text-light-text-200 hhover:dark:group-active:text-dark-text-200': darkMode === 'auto',\n        },\n        'transition-transform motion-reduce:transition-none',\n        {\n          '-rotate-90': chevronDirection === 'end',\n          'rotate-90': chevronDirection === 'start',\n          'rotate-180': chevronDirection === 'up',\n        },\n      ]\"\n    />\n  </OzBaseButton>\n</template>\n"],"names":["OzDropdownButtonSizePreset","OzDropdownButtonColorScheme","OzDropdownButtonactiveHighlightMode","__default__"],"mappings":"sdAoEYA,GAAAA,IACVA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAHEA,IAAAA,GAAA,CAAA,CAAA,EAMAC,GAAAA,IACVA,EAAA,UAAY,YACZA,EAAA,eAAiB,iBACjBA,EAAA,qBAAuB,uBACvBA,EAAA,mBAAqB,qBACrBA,EAAA,cAAgB,gBAChBA,EAAA,yBAA2B,2BANjBA,IAAAA,GAAA,CAAA,CAAA,EASAC,GAAAA,IACVA,EAAA,WAAa,aACbA,EAAA,KAAO,OAFGA,IAAAA,GAAA,CAAA,CAAA,EAKZ,MAAAC,EAAe,CAAA"}