@mattermost/compass-ui 0.1.0-alpha.4 → 0.1.0-alpha.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/compass-ui-standalone.css +10 -0
- package/dist/compass-ui.css +2 -0
- package/dist/components/action-button/ActionButton.cjs +1 -1
- package/dist/components/action-button/ActionButton.cjs.map +1 -1
- package/dist/components/action-button/ActionButton.d.ts +2 -1
- package/dist/components/action-button/ActionButton.d.ts.map +1 -1
- package/dist/components/action-button/ActionButton.js +22 -12
- package/dist/components/action-button/ActionButton.js.map +1 -1
- package/dist/components/action-button/ActionButton.module.css +1 -1
- package/dist/components/action-button/ActionButton.module.scss.cjs +1 -1
- package/dist/components/action-button/ActionButton.module.scss.js +5 -5
- package/dist/components/attachment-card/AttachmentCard.cjs +1 -1
- package/dist/components/attachment-card/AttachmentCard.cjs.map +1 -1
- package/dist/components/attachment-card/AttachmentCard.d.ts +3 -1
- package/dist/components/attachment-card/AttachmentCard.d.ts.map +1 -1
- package/dist/components/attachment-card/AttachmentCard.js +92 -82
- package/dist/components/attachment-card/AttachmentCard.js.map +1 -1
- package/dist/components/attachment-card/AttachmentCard.module.css +1 -1
- package/dist/components/attachment-card/AttachmentCard.module.scss.cjs +1 -1
- package/dist/components/attachment-card/AttachmentCard.module.scss.js +19 -18
- package/dist/components/attachment-card/AttachmentCard.module.scss.js.map +1 -1
- package/dist/components/button/Button.module.css +1 -1
- package/dist/components/button/Button.module.scss.cjs +1 -1
- package/dist/components/button/Button.module.scss.js +15 -15
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.cjs +1 -1
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.cjs.map +1 -1
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.d.ts +4 -1
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.d.ts.map +1 -1
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.js +112 -92
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.js.map +1 -1
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.css +1 -1
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.cjs +1 -1
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.js +22 -20
- package/dist/components/channel-sidebar-item/ChannelSidebarItem.module.scss.js.map +1 -1
- package/dist/components/checkbox/Checkbox.cjs +1 -1
- package/dist/components/checkbox/Checkbox.cjs.map +1 -1
- package/dist/components/checkbox/Checkbox.d.ts +3 -3
- package/dist/components/checkbox/Checkbox.d.ts.map +1 -1
- package/dist/components/checkbox/Checkbox.js +21 -20
- package/dist/components/checkbox/Checkbox.js.map +1 -1
- package/dist/components/checkbox/Checkbox.module.css +1 -1
- package/dist/components/checkbox/Checkbox.module.scss.cjs +1 -1
- package/dist/components/checkbox/Checkbox.module.scss.js +7 -7
- package/dist/components/chip/Chip.cjs +1 -1
- package/dist/components/chip/Chip.cjs.map +1 -1
- package/dist/components/chip/Chip.d.ts +3 -5
- package/dist/components/chip/Chip.d.ts.map +1 -1
- package/dist/components/chip/Chip.js +90 -48
- package/dist/components/chip/Chip.js.map +1 -1
- package/dist/components/chip/Chip.module.css +1 -1
- package/dist/components/chip/Chip.module.scss.cjs +1 -1
- package/dist/components/chip/Chip.module.scss.js +9 -9
- package/dist/components/chip/ChipGroup.cjs +2 -0
- package/dist/components/chip/ChipGroup.cjs.map +1 -0
- package/dist/components/chip/ChipGroup.d.ts +16 -0
- package/dist/components/chip/ChipGroup.d.ts.map +1 -0
- package/dist/components/chip/ChipGroup.js +112 -0
- package/dist/components/chip/ChipGroup.js.map +1 -0
- package/dist/components/chip/ChipGroup.module.css +1 -0
- package/dist/components/chip/ChipGroup.module.scss.cjs +2 -0
- package/dist/components/chip/ChipGroup.module.scss.cjs.map +1 -0
- package/dist/components/chip/ChipGroup.module.scss.js +7 -0
- package/dist/components/chip/ChipGroup.module.scss.js.map +1 -0
- package/dist/components/chip/index.cjs +1 -1
- package/dist/components/chip/index.d.ts +2 -0
- package/dist/components/chip/index.d.ts.map +1 -1
- package/dist/components/chip/index.js +4 -2
- package/dist/components/chip/index.js.map +1 -1
- package/dist/components/combobox/Combobox.cjs +1 -1
- package/dist/components/combobox/Combobox.cjs.map +1 -1
- package/dist/components/combobox/Combobox.d.ts.map +1 -1
- package/dist/components/combobox/Combobox.js +115 -109
- package/dist/components/combobox/Combobox.js.map +1 -1
- package/dist/components/combobox/Combobox.module.css +1 -1
- package/dist/components/combobox/Combobox.module.scss.cjs +1 -1
- package/dist/components/combobox/Combobox.module.scss.js +27 -29
- package/dist/components/date-range-picker/DateRangePicker.cjs +1 -1
- package/dist/components/date-range-picker/DateRangePicker.cjs.map +1 -1
- package/dist/components/date-range-picker/DateRangePicker.js +154 -154
- package/dist/components/date-range-picker/DateRangePicker.js.map +1 -1
- package/dist/components/date-range-picker/DateRangePicker.module.css +1 -1
- package/dist/components/date-range-picker/DateRangePicker.module.scss.cjs +1 -1
- package/dist/components/date-range-picker/DateRangePicker.module.scss.js +28 -45
- package/dist/components/dropdown/Dropdown.cjs +1 -1
- package/dist/components/dropdown/Dropdown.cjs.map +1 -1
- package/dist/components/dropdown/Dropdown.js +1 -1
- package/dist/components/dropdown/Dropdown.js.map +1 -1
- package/dist/components/dropdown/Dropdown.module.css +1 -1
- package/dist/components/dropdown/Dropdown.module.scss.cjs +1 -1
- package/dist/components/dropdown/Dropdown.module.scss.js +15 -16
- package/dist/components/global-banner/GlobalBanner.module.css +1 -1
- package/dist/components/global-banner/GlobalBanner.module.scss.cjs +1 -1
- package/dist/components/global-banner/GlobalBanner.module.scss.js +10 -10
- package/dist/components/icon-button/IconButton.cjs +1 -1
- package/dist/components/icon-button/IconButton.cjs.map +1 -1
- package/dist/components/icon-button/IconButton.d.ts +1 -1
- package/dist/components/icon-button/IconButton.d.ts.map +1 -1
- package/dist/components/icon-button/IconButton.js +14 -14
- package/dist/components/icon-button/IconButton.js.map +1 -1
- package/dist/components/icon-button/IconButton.module.css +1 -1
- package/dist/components/icon-button/IconButton.module.scss.cjs +1 -1
- package/dist/components/icon-button/IconButton.module.scss.js +15 -15
- package/dist/components/image-preview/ImagePreview.cjs +1 -1
- package/dist/components/image-preview/ImagePreview.cjs.map +1 -1
- package/dist/components/image-preview/ImagePreview.d.ts +2 -1
- package/dist/components/image-preview/ImagePreview.d.ts.map +1 -1
- package/dist/components/image-preview/ImagePreview.js +70 -52
- package/dist/components/image-preview/ImagePreview.js.map +1 -1
- package/dist/components/image-preview/ImagePreview.module.css +1 -1
- package/dist/components/image-preview/ImagePreview.module.scss.cjs +1 -1
- package/dist/components/image-preview/ImagePreview.module.scss.js +15 -15
- package/dist/components/menu-item/MenuItem.cjs +1 -1
- package/dist/components/menu-item/MenuItem.cjs.map +1 -1
- package/dist/components/menu-item/MenuItem.js +11 -11
- package/dist/components/menu-item/MenuItem.js.map +1 -1
- package/dist/components/menu-item/MenuItem.module.css +1 -1
- package/dist/components/menu-item/MenuItem.module.scss.cjs +1 -1
- package/dist/components/menu-item/MenuItem.module.scss.js +16 -16
- package/dist/components/message/Message.module.css +1 -1
- package/dist/components/message/Message.module.scss.cjs +1 -1
- package/dist/components/message/Message.module.scss.js +20 -20
- package/dist/components/message-reactions/MessageReactions.module.css +1 -1
- package/dist/components/message-reactions/MessageReactions.module.scss.cjs +1 -1
- package/dist/components/message-reactions/MessageReactions.module.scss.js +12 -12
- package/dist/components/more-unreads-banner/MoreUnreadsBanner.module.css +1 -1
- package/dist/components/more-unreads-banner/MoreUnreadsBanner.module.scss.cjs +1 -1
- package/dist/components/more-unreads-banner/MoreUnreadsBanner.module.scss.js +5 -5
- package/dist/components/pagination-dots/PaginationDots.module.css +1 -1
- package/dist/components/pagination-dots/PaginationDots.module.scss.cjs +1 -1
- package/dist/components/pagination-dots/PaginationDots.module.scss.js +8 -8
- package/dist/components/radio/Radio.cjs +1 -1
- package/dist/components/radio/Radio.cjs.map +1 -1
- package/dist/components/radio/Radio.d.ts +3 -3
- package/dist/components/radio/Radio.d.ts.map +1 -1
- package/dist/components/radio/Radio.js +11 -11
- package/dist/components/radio/Radio.js.map +1 -1
- package/dist/components/radio/Radio.module.css +1 -1
- package/dist/components/radio/Radio.module.scss.cjs +1 -1
- package/dist/components/radio/Radio.module.scss.js +11 -11
- package/dist/components/search-input/SearchInput.cjs +1 -1
- package/dist/components/search-input/SearchInput.cjs.map +1 -1
- package/dist/components/search-input/SearchInput.d.ts +2 -0
- package/dist/components/search-input/SearchInput.d.ts.map +1 -1
- package/dist/components/search-input/SearchInput.js +78 -64
- package/dist/components/search-input/SearchInput.js.map +1 -1
- package/dist/components/search-input/SearchInput.module.css +1 -1
- package/dist/components/search-input/SearchInput.module.scss.cjs +1 -1
- package/dist/components/search-input/SearchInput.module.scss.js +16 -23
- package/dist/components/search-input/SearchInput.module.scss.js.map +1 -1
- package/dist/components/select/Select.cjs +1 -1
- package/dist/components/select/Select.cjs.map +1 -1
- package/dist/components/select/Select.d.ts.map +1 -1
- package/dist/components/select/Select.js +64 -64
- package/dist/components/select/Select.js.map +1 -1
- package/dist/components/select/Select.module.css +1 -1
- package/dist/components/select/Select.module.scss.cjs +1 -1
- package/dist/components/select/Select.module.scss.js +24 -26
- package/dist/components/switch/Switch.cjs +1 -1
- package/dist/components/switch/Switch.cjs.map +1 -1
- package/dist/components/switch/Switch.d.ts.map +1 -1
- package/dist/components/switch/Switch.js +2 -2
- package/dist/components/switch/Switch.js.map +1 -1
- package/dist/components/switch/Switch.module.css +1 -1
- package/dist/components/switch/Switch.module.scss.cjs +1 -1
- package/dist/components/switch/Switch.module.scss.js +15 -15
- package/dist/components/tabs/Tabs.cjs +1 -1
- package/dist/components/tabs/Tabs.cjs.map +1 -1
- package/dist/components/tabs/Tabs.d.ts +4 -0
- package/dist/components/tabs/Tabs.d.ts.map +1 -1
- package/dist/components/tabs/Tabs.js +47 -31
- package/dist/components/tabs/Tabs.js.map +1 -1
- package/dist/components/tabs/Tabs.module.css +1 -1
- package/dist/components/tabs/Tabs.module.scss.cjs +1 -1
- package/dist/components/tabs/Tabs.module.scss.js +8 -7
- package/dist/components/tabs/Tabs.module.scss.js.map +1 -1
- package/dist/components/tag/Tag.module.css +1 -1
- package/dist/components/tag/Tag.module.scss.cjs +1 -1
- package/dist/components/tag/Tag.module.scss.js +15 -15
- package/dist/components/text-area/TextArea.cjs +1 -1
- package/dist/components/text-area/TextArea.cjs.map +1 -1
- package/dist/components/text-area/TextArea.d.ts.map +1 -1
- package/dist/components/text-area/TextArea.js +57 -56
- package/dist/components/text-area/TextArea.js.map +1 -1
- package/dist/components/text-area/TextArea.module.css +1 -1
- package/dist/components/text-area/TextArea.module.scss.cjs +1 -1
- package/dist/components/text-area/TextArea.module.scss.js +12 -17
- package/dist/components/text-input/TextInput.cjs +1 -1
- package/dist/components/text-input/TextInput.cjs.map +1 -1
- package/dist/components/text-input/TextInput.d.ts.map +1 -1
- package/dist/components/text-input/TextInput.js +59 -58
- package/dist/components/text-input/TextInput.js.map +1 -1
- package/dist/components/text-input/TextInput.module.css +1 -1
- package/dist/components/text-input/TextInput.module.scss.cjs +1 -1
- package/dist/components/text-input/TextInput.module.scss.js +16 -24
- package/dist/components/thread-footer/ThreadFooter.cjs +1 -1
- package/dist/components/thread-footer/ThreadFooter.cjs.map +1 -1
- package/dist/components/thread-footer/ThreadFooter.d.ts +7 -8
- package/dist/components/thread-footer/ThreadFooter.d.ts.map +1 -1
- package/dist/components/thread-footer/ThreadFooter.js +59 -62
- package/dist/components/thread-footer/ThreadFooter.js.map +1 -1
- package/dist/components/thread-footer/ThreadFooter.module.css +1 -1
- package/dist/components/thread-footer/ThreadFooter.module.scss.cjs +1 -1
- package/dist/components/thread-footer/ThreadFooter.module.scss.js +17 -17
- package/dist/components/thread-footer/index.d.ts +7 -1
- package/dist/components/thread-footer/index.d.ts.map +1 -1
- package/dist/components/thread-list-item/ThreadListItem.cjs +1 -1
- package/dist/components/thread-list-item/ThreadListItem.cjs.map +1 -1
- package/dist/components/thread-list-item/ThreadListItem.d.ts +1 -1
- package/dist/components/thread-list-item/ThreadListItem.d.ts.map +1 -1
- package/dist/components/thread-list-item/ThreadListItem.js +102 -87
- package/dist/components/thread-list-item/ThreadListItem.js.map +1 -1
- package/dist/components/thread-list-item/ThreadListItem.module.css +1 -1
- package/dist/components/thread-list-item/ThreadListItem.module.scss.cjs +1 -1
- package/dist/components/thread-list-item/ThreadListItem.module.scss.js +26 -23
- package/dist/components/thread-list-item/ThreadListItem.module.scss.js.map +1 -1
- package/dist/components/toast/Toast.module.css +1 -1
- package/dist/components/toast/Toast.module.scss.cjs +1 -1
- package/dist/components/toast/Toast.module.scss.js +6 -6
- package/dist/components/tour-point/TourPoint.module.css +1 -1
- package/dist/components/tour-point/TourPoint.module.scss.cjs +1 -1
- package/dist/components/tour-point/TourPoint.module.scss.js +28 -28
- package/dist/index.cjs +1 -1
- package/dist/index.css +31 -29
- package/dist/index.js +156 -154
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AttachmentCard.js","sources":["../../../src/components/attachment-card/AttachmentCard.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport FileAudioOutlineLargeIcon from '@mattermost/compass-icons/components/file-audio-outline-large';\nimport FileCodeOutlineLargeIcon from '@mattermost/compass-icons/components/file-code-outline-large';\nimport FileExcelOutlineLargeIcon from '@mattermost/compass-icons/components/file-excel-outline-large';\nimport FileGenericOutlineLargeIcon from '@mattermost/compass-icons/components/file-generic-outline-large';\nimport FileImageOutlineLargeIcon from '@mattermost/compass-icons/components/file-image-outline-large';\nimport FilePatchOutlineLargeIcon from '@mattermost/compass-icons/components/file-patch-outline-large';\nimport FilePdfOutlineLargeIcon from '@mattermost/compass-icons/components/file-pdf-outline-large';\nimport FilePowerpointOutlineLargeIcon from '@mattermost/compass-icons/components/file-powerpoint-outline-large';\nimport FileTextOutlineLargeIcon from '@mattermost/compass-icons/components/file-text-outline-large';\nimport FileVideoOutlineLargeIcon from '@mattermost/compass-icons/components/file-video-outline-large';\nimport FileWordOutlineLargeIcon from '@mattermost/compass-icons/components/file-word-outline-large';\nimport FileZipOutlineLargeIcon from '@mattermost/compass-icons/components/file-zip-outline-large';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport styles from './AttachmentCard.module.scss';\n\nexport type AttachmentCardFileType =\n | 'text'\n | 'word'\n | 'excel'\n | 'powerpoint'\n | 'pdf'\n | 'image-icon'\n | 'image-thumbnail'\n | 'video'\n | 'audio'\n | 'generic'\n | 'patch'\n | 'zip'\n | 'code';\n\nexport type AttachmentCardState = 'default' | 'uploading' | 'uploaded';\n\nexport interface AttachmentCardProps {\n className?: string;\n /** File name to display. */\n fileName: string;\n /** File type + size string shown below the filename, e.g. \"TXT 15KB\". */\n fileMeta?: string;\n /** Controls the icon shown on the left. Default: \"generic\". */\n fileType?: AttachmentCardFileType;\n /** Card state. Default: \"default\" (browsing context). */\n state?: AttachmentCardState;\n /** Upload progress 0–100. Used when state=\"uploading\". */\n progress?: number;\n /** Thumbnail image URL. Used when fileType=\"image-thumbnail\". */\n thumbnailSrc?: string;\n /** Optional channel tag label shown below the filename, e.g. \"UX Design\". */\n channelTag?: string;\n /** Optional date/time stamp, e.g. \"Sep 24 5:14 PM\". */\n dateTimeStamp?: string;\n /** Called when the remove or cancel button is clicked. */\n onRemove?: () => void;\n /** Called when the download button is clicked (visible on hover in default state). */\n onDownload?: () => void;\n /** Called when the more-options button is clicked (visible on hover in default state). */\n onMore?: () => void;\n}\n\ntype IconComponent = ComponentType<{ size: number; className?: string }>;\n\nconst FILE_TYPE_ICONS: Record<\n Exclude<AttachmentCardFileType, 'image-thumbnail'>,\n IconComponent\n> = {\n audio: FileAudioOutlineLargeIcon,\n code: FileCodeOutlineLargeIcon,\n excel: FileExcelOutlineLargeIcon,\n generic: FileGenericOutlineLargeIcon,\n 'image-icon': FileImageOutlineLargeIcon,\n patch: FilePatchOutlineLargeIcon,\n pdf: FilePdfOutlineLargeIcon,\n powerpoint: FilePowerpointOutlineLargeIcon,\n text: FileTextOutlineLargeIcon,\n video: FileVideoOutlineLargeIcon,\n word: FileWordOutlineLargeIcon,\n zip: FileZipOutlineLargeIcon,\n};\n\nconst FILE_TYPE_COLORS: Record<\n Exclude<AttachmentCardFileType, 'image-thumbnail'>,\n string | undefined\n> = {\n audio: 'var(--attachment-blue)',\n code: undefined,\n excel: 'var(--attachment-green)',\n generic: undefined,\n 'image-icon': 'var(--attachment-blue)',\n patch: undefined,\n pdf: 'var(--attachment-red)',\n powerpoint: 'var(--attachment-orange)',\n text: undefined,\n video: 'var(--attachment-blue)',\n word: 'var(--attachment-blue)',\n zip: undefined,\n};\n\n/**\n * Attachment Cards represent a file shared in a channel, message, or task. Each card shows\n * the file's identity at a glance — type, name, size — and hosts the actions a viewer can\n * take on it.\n */\nexport default function AttachmentCard({\n className = '',\n fileName,\n fileMeta,\n fileType = 'generic',\n state = 'default',\n progress = 0,\n thumbnailSrc,\n channelTag,\n dateTimeStamp,\n onRemove,\n onDownload,\n onMore,\n}: AttachmentCardProps) {\n const isUploading = state === 'uploading';\n const isUploaded = state === 'uploaded';\n const isDefault = state === 'default';\n\n const stateClass = !isDefault ? styles[`attachment-card--${state}`] : '';\n const rootClass = [styles['attachment-card'], stateClass, className]\n .filter(Boolean)\n .join(' ');\n\n const FileIcon =\n fileType !== 'image-thumbnail'\n ? FILE_TYPE_ICONS[fileType]\n : FileGenericOutlineLargeIcon;\n\n const iconColor =\n fileType !== 'image-thumbnail' ? FILE_TYPE_COLORS[fileType] : undefined;\n\n return (\n <div className={rootClass}>\n <div className={styles['attachment-card__container']}>\n <div className={styles['attachment-card__inner']}>\n <div className={styles['attachment-card__left']}>\n {fileType === 'image-thumbnail' && thumbnailSrc ? (\n <img\n src={thumbnailSrc}\n alt=\"\"\n className={styles['attachment-card__thumbnail']}\n />\n ) : (\n <div\n className={styles['attachment-card__icon']}\n style={iconColor ? { color: iconColor } : undefined}\n >\n <Icon glyph={<FileIcon size={40} />} size=\"40\" />\n </div>\n )}\n\n <div className={styles['attachment-card__text']}>\n <p className={styles['attachment-card__filename']}>{fileName}</p>\n <div className={styles['attachment-card__secondary-details']}>\n {isUploading ? (\n <span className={styles['attachment-card__uploading-text']}>\n {`Uploading… (${progress}%)`}\n </span>\n ) : (\n <>\n {channelTag && <Tag label={channelTag} />}\n {fileMeta && (\n <div className={styles['attachment-card__details']}>\n <span>{fileMeta}</span>\n {dateTimeStamp && (\n <span className={styles['attachment-card__datetime']}>\n <span>{'•'}</span>\n <span>{dateTimeStamp}</span>\n </span>\n )}\n </div>\n )}\n </>\n )}\n </div>\n </div>\n </div>\n\n <div className={styles['attachment-card__right']}>\n <div className={styles['attachment-card__actions']}>\n {(isUploaded || isUploading) && (\n <IconButton\n size=\"small\"\n icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n aria-label={\n isUploading ? 'Cancel upload' : 'Remove attachment'\n }\n onClick={onRemove}\n />\n )}\n {isDefault && (\n <>\n <IconButton\n size=\"small\"\n icon={<Icon glyph={<DotsVerticalIcon />} size=\"16\" />}\n aria-label=\"More options\"\n onClick={onMore}\n />\n <IconButton\n size=\"small\"\n icon={<Icon glyph={<DownloadOutlineIcon />} size=\"16\" />}\n aria-label=\"Download\"\n onClick={onDownload}\n />\n </>\n )}\n </div>\n </div>\n </div>\n </div>\n\n {isUploading && (\n <div className={styles['attachment-card__progress-bar']}>\n <div\n className={styles['attachment-card__progress-fill']}\n style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}\n />\n </div>\n )}\n </div>\n );\n}\n"],"names":["FILE_TYPE_ICONS","FileAudioOutlineLargeIcon","FileCodeOutlineLargeIcon","FileExcelOutlineLargeIcon","FileGenericOutlineLargeIcon","FileImageOutlineLargeIcon","FilePatchOutlineLargeIcon","FilePdfOutlineLargeIcon","FilePowerpointOutlineLargeIcon","FileTextOutlineLargeIcon","FileVideoOutlineLargeIcon","FileWordOutlineLargeIcon","FileZipOutlineLargeIcon","FILE_TYPE_COLORS","AttachmentCard","className","fileName","fileMeta","fileType","state","progress","thumbnailSrc","channelTag","dateTimeStamp","onRemove","onDownload","onMore","isUploading","isUploaded","isDefault","stateClass","styles","rootClass","FileIcon","iconColor","jsxs","jsx","Icon","Fragment","Tag","IconButton","CloseIcon","DotsVerticalIcon","DownloadOutlineIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"AttachmentCard.js","sources":["../../../src/components/attachment-card/AttachmentCard.tsx"],"sourcesContent":["import type { ComponentType } from 'react';\nimport CloseIcon from '@mattermost/compass-icons/components/close';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DownloadOutlineIcon from '@mattermost/compass-icons/components/download-outline';\nimport FileAudioOutlineLargeIcon from '@mattermost/compass-icons/components/file-audio-outline-large';\nimport FileCodeOutlineLargeIcon from '@mattermost/compass-icons/components/file-code-outline-large';\nimport FileExcelOutlineLargeIcon from '@mattermost/compass-icons/components/file-excel-outline-large';\nimport FileGenericOutlineLargeIcon from '@mattermost/compass-icons/components/file-generic-outline-large';\nimport FileImageOutlineLargeIcon from '@mattermost/compass-icons/components/file-image-outline-large';\nimport FilePatchOutlineLargeIcon from '@mattermost/compass-icons/components/file-patch-outline-large';\nimport FilePdfOutlineLargeIcon from '@mattermost/compass-icons/components/file-pdf-outline-large';\nimport FilePowerpointOutlineLargeIcon from '@mattermost/compass-icons/components/file-powerpoint-outline-large';\nimport FileTextOutlineLargeIcon from '@mattermost/compass-icons/components/file-text-outline-large';\nimport FileVideoOutlineLargeIcon from '@mattermost/compass-icons/components/file-video-outline-large';\nimport FileWordOutlineLargeIcon from '@mattermost/compass-icons/components/file-word-outline-large';\nimport FileZipOutlineLargeIcon from '@mattermost/compass-icons/components/file-zip-outline-large';\nimport Icon from '@/components/icon/Icon';\nimport IconButton from '@/components/icon-button/IconButton';\nimport Tag from '@/components/tag/Tag';\nimport styles from './AttachmentCard.module.scss';\n\nexport type AttachmentCardFileType =\n | 'text'\n | 'word'\n | 'excel'\n | 'powerpoint'\n | 'pdf'\n | 'image-icon'\n | 'image-thumbnail'\n | 'video'\n | 'audio'\n | 'generic'\n | 'patch'\n | 'zip'\n | 'code';\n\nexport type AttachmentCardState = 'default' | 'uploading' | 'uploaded';\n\nexport interface AttachmentCardProps {\n className?: string;\n /** File name to display. */\n fileName: string;\n /** File type + size string shown below the filename, e.g. \"TXT 15KB\". */\n fileMeta?: string;\n /** Controls the icon shown on the left. Default: \"generic\". */\n fileType?: AttachmentCardFileType;\n /** Card state. Default: \"default\" (browsing context). */\n state?: AttachmentCardState;\n /** Upload progress 0–100. Used when state=\"uploading\". */\n progress?: number;\n /** Thumbnail image URL. Used when fileType=\"image-thumbnail\". */\n thumbnailSrc?: string;\n /** Optional channel tag label shown below the filename, e.g. \"UX Design\". */\n channelTag?: string;\n /** Optional date/time stamp, e.g. \"Sep 24 5:14 PM\". */\n dateTimeStamp?: string;\n /** Called when the card is activated to open the file or its preview. */\n onOpen?: () => void;\n /** Called when the remove or cancel button is clicked. */\n onRemove?: () => void;\n /** Called when the download button is clicked (visible on hover in default state). */\n onDownload?: () => void;\n /** Called when the more-options button is clicked (visible on hover in default state). */\n onMore?: () => void;\n}\n\ntype IconComponent = ComponentType<{ size: number; className?: string }>;\n\nconst FILE_TYPE_ICONS: Record<\n Exclude<AttachmentCardFileType, 'image-thumbnail'>,\n IconComponent\n> = {\n audio: FileAudioOutlineLargeIcon,\n code: FileCodeOutlineLargeIcon,\n excel: FileExcelOutlineLargeIcon,\n generic: FileGenericOutlineLargeIcon,\n 'image-icon': FileImageOutlineLargeIcon,\n patch: FilePatchOutlineLargeIcon,\n pdf: FilePdfOutlineLargeIcon,\n powerpoint: FilePowerpointOutlineLargeIcon,\n text: FileTextOutlineLargeIcon,\n video: FileVideoOutlineLargeIcon,\n word: FileWordOutlineLargeIcon,\n zip: FileZipOutlineLargeIcon,\n};\n\nconst FILE_TYPE_COLORS: Record<\n Exclude<AttachmentCardFileType, 'image-thumbnail'>,\n string | undefined\n> = {\n audio: 'var(--attachment-blue)',\n code: undefined,\n excel: 'var(--attachment-green)',\n generic: undefined,\n 'image-icon': 'var(--attachment-blue)',\n patch: undefined,\n pdf: 'var(--attachment-red)',\n powerpoint: 'var(--attachment-orange)',\n text: undefined,\n video: 'var(--attachment-blue)',\n word: 'var(--attachment-blue)',\n zip: undefined,\n};\n\n/**\n * Attachment Cards represent a file shared in a channel, message, or task. Each card shows\n * the file's identity at a glance — type, name, size — and hosts the actions a viewer can\n * take on it.\n */\nexport default function AttachmentCard({\n className = '',\n fileName,\n fileMeta,\n fileType = 'generic',\n state = 'default',\n progress = 0,\n thumbnailSrc,\n channelTag,\n dateTimeStamp,\n onOpen,\n onRemove,\n onDownload,\n onMore,\n}: AttachmentCardProps) {\n const isUploading = state === 'uploading';\n const isUploaded = state === 'uploaded';\n const isDefault = state === 'default';\n\n const stateClass = !isDefault ? styles[`attachment-card--${state}`] : '';\n const rootClass = [styles['attachment-card'], stateClass, className]\n .filter(Boolean)\n .join(' ');\n\n const FileIcon =\n fileType !== 'image-thumbnail'\n ? FILE_TYPE_ICONS[fileType]\n : FileGenericOutlineLargeIcon;\n\n const iconColor =\n fileType !== 'image-thumbnail' ? FILE_TYPE_COLORS[fileType] : undefined;\n\n const fileIdentity = (\n <>\n {fileType === 'image-thumbnail' && thumbnailSrc ? (\n <img\n src={thumbnailSrc}\n alt=\"\"\n className={styles['attachment-card__thumbnail']}\n />\n ) : (\n <div\n className={styles['attachment-card__icon']}\n style={iconColor ? { color: iconColor } : undefined}\n >\n <Icon glyph={<FileIcon size={40} />} size=\"40\" />\n </div>\n )}\n\n <div className={styles['attachment-card__text']}>\n <span className={styles['attachment-card__filename']}>{fileName}</span>\n <div className={styles['attachment-card__secondary-details']}>\n {isUploading ? (\n <span className={styles['attachment-card__uploading-text']}>\n {`Uploading… (${progress}%)`}\n </span>\n ) : (\n <>\n {channelTag && <Tag label={channelTag} />}\n {fileMeta && (\n <div className={styles['attachment-card__details']}>\n <span>{fileMeta}</span>\n {dateTimeStamp && (\n <span className={styles['attachment-card__datetime']}>\n <span>{'•'}</span>\n <span>{dateTimeStamp}</span>\n </span>\n )}\n </div>\n )}\n </>\n )}\n </div>\n </div>\n </>\n );\n\n return (\n <div className={rootClass}>\n <div className={styles['attachment-card__container']}>\n <div className={styles['attachment-card__inner']}>\n {isDefault && onOpen ? (\n <button\n type=\"button\"\n className={`${styles['attachment-card__left']} ${styles['attachment-card__open']}`}\n onClick={onOpen}\n aria-label={`Open ${fileName}`}\n >\n {fileIdentity}\n </button>\n ) : (\n <div className={styles['attachment-card__left']}>{fileIdentity}</div>\n )}\n\n <div className={styles['attachment-card__right']}>\n <div className={styles['attachment-card__actions']}>\n {(isUploaded || isUploading) && (\n <IconButton\n size=\"small\"\n icon={<Icon glyph={<CloseIcon />} size=\"16\" />}\n aria-label={\n isUploading ? 'Cancel upload' : 'Remove attachment'\n }\n onClick={onRemove}\n />\n )}\n {isDefault && (\n <>\n <IconButton\n size=\"small\"\n icon={<Icon glyph={<DotsVerticalIcon />} size=\"16\" />}\n aria-label=\"More options\"\n onClick={onMore}\n />\n <IconButton\n size=\"small\"\n icon={<Icon glyph={<DownloadOutlineIcon />} size=\"16\" />}\n aria-label=\"Download\"\n onClick={onDownload}\n />\n </>\n )}\n </div>\n </div>\n </div>\n </div>\n\n {isUploading && (\n <div className={styles['attachment-card__progress-bar']}>\n <div\n className={styles['attachment-card__progress-fill']}\n style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}\n />\n </div>\n )}\n </div>\n );\n}\n"],"names":["FILE_TYPE_ICONS","FileAudioOutlineLargeIcon","FileCodeOutlineLargeIcon","FileExcelOutlineLargeIcon","FileGenericOutlineLargeIcon","FileImageOutlineLargeIcon","FilePatchOutlineLargeIcon","FilePdfOutlineLargeIcon","FilePowerpointOutlineLargeIcon","FileTextOutlineLargeIcon","FileVideoOutlineLargeIcon","FileWordOutlineLargeIcon","FileZipOutlineLargeIcon","FILE_TYPE_COLORS","AttachmentCard","className","fileName","fileMeta","fileType","state","progress","thumbnailSrc","channelTag","dateTimeStamp","onOpen","onRemove","onDownload","onMore","isUploading","isUploaded","isDefault","stateClass","styles","rootClass","FileIcon","iconColor","fileIdentity","jsxs","Fragment","jsx","Icon","Tag","IconButton","CloseIcon","DotsVerticalIcon","DownloadOutlineIcon"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._attachment-
|
|
1
|
+
._attachment-card_ffd4i_2{display:flex;flex-direction:column;width:320px;background-color:var(--center-channel-bg);border:1px solid rgba(var(--center-channel-color-rgb),.16);border-radius:var(--radius-s);box-shadow:var(--elevation-1);overflow:hidden;transition:box-shadow var(--duration-quick) var(--ease-transition),border-color var(--duration-quick) var(--ease-transition)}._attachment-card_ffd4i_2:hover,._attachment-card_ffd4i_2:focus-within{box-shadow:var(--elevation-2);border-color:rgba(var(--center-channel-color-rgb),.24);overflow:visible}._attachment-card_ffd4i_2:hover{cursor:pointer}._attachment-card_ffd4i_2:hover ._attachment-card__inner_ffd4i_21,._attachment-card_ffd4i_2:focus-within ._attachment-card__inner_ffd4i_21{overflow:visible}._attachment-card__container_ffd4i_24{display:flex;flex-direction:column;padding:var(--spacing-xxs);width:100%}._attachment-card__inner_ffd4i_21{display:flex;align-items:stretch;overflow:hidden;border-radius:var(--radius-s);width:100%}._attachment-card__left_ffd4i_37{display:flex;flex:1 0 0;gap:var(--spacing-m);align-items:center;min-width:0;padding:var(--spacing-xxs)}._attachment-card__open_ffd4i_45{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin:0;border:none;background:transparent;cursor:pointer;font:inherit;color:inherit;text-align:left;align-self:stretch;border-radius:var(--radius-s);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0;transition:outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition)}._attachment-card__open_ffd4i_45:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._attachment-card__icon_ffd4i_64{display:flex;align-items:center;flex-shrink:0;color:rgba(var(--center-channel-color-rgb),.64)}._attachment-card__thumbnail_ffd4i_70{width:var(--icon-size-40);height:var(--icon-size-40);border-radius:var(--radius-s);border:1px solid rgba(var(--center-channel-color-rgb),.04);object-fit:cover;flex-shrink:0;display:block}._attachment-card__text_ffd4i_79{display:flex;flex-direction:column;flex:1 0 0;min-width:0;overflow:hidden}._attachment-card__filename_ffd4i_86{display:block;font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-semibold);line-height:var(--line-height-75);color:var(--center-channel-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;flex-shrink:0;margin:0}._attachment-card__secondary-details_ffd4i_100{display:flex;align-items:flex-start;gap:var(--spacing-xxxs);width:100%;flex-shrink:0;overflow:hidden}._attachment-card__details_ffd4i_108{display:flex;align-items:flex-start;gap:var(--spacing-xxxs);font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.64);white-space:nowrap;overflow:hidden;flex-shrink:0}._attachment-card__datetime_ffd4i_121{display:flex;gap:var(--spacing-xxxs);align-items:flex-start;flex-shrink:0;overflow:hidden}._attachment-card__datetime_ffd4i_121 span:last-child{overflow:hidden;text-overflow:ellipsis}._attachment-card__uploading-text_ffd4i_132{font-family:var(--font-family-body);font-size:var(--font-size-75);font-weight:var(--font-weight-regular);line-height:var(--line-height-75);color:rgba(var(--center-channel-color-rgb),.56);white-space:nowrap;flex-shrink:0}._attachment-card__right_ffd4i_141{display:flex;align-items:stretch;justify-content:flex-end;flex-shrink:0;align-self:stretch}._attachment-card__actions_ffd4i_148{display:flex;align-items:center;justify-content:flex-end;padding:var(--spacing-xs);gap:var(--spacing-xxxs);opacity:0;pointer-events:none;transition:opacity var(--duration-quick) var(--ease-transition)}._attachment-card_ffd4i_2:hover ._attachment-card__actions_ffd4i_148,._attachment-card_ffd4i_2:focus-within ._attachment-card__actions_ffd4i_148{opacity:1;pointer-events:auto}._attachment-card__progress-bar_ffd4i_162{height:4px;width:100%;background-color:rgba(var(--center-channel-color-rgb),.16);border-radius:0 0 var(--radius-xs) var(--radius-xs);flex-shrink:0}._attachment-card__progress-fill_ffd4i_169{height:100%;background-color:var(--button-bg);border-radius:var(--radius-xs)}._attachment-card--uploading_ffd4i_174{box-shadow:none}._attachment-card--uploading_ffd4i_174:hover,._attachment-card--uploading_ffd4i_174:focus-within{box-shadow:none}._attachment-card--uploading_ffd4i_174 ._attachment-card__container_ffd4i_24{padding-bottom:var(--spacing-xxxxs)}._attachment-card--uploading_ffd4i_174 ._attachment-card__actions_ffd4i_148,._attachment-card--uploaded_ffd4i_187 ._attachment-card__actions_ffd4i_148{opacity:1;pointer-events:auto}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./AttachmentCard.module.css');const t={"attachment-card":"_attachment-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./AttachmentCard.module.css');const t={"attachment-card":"_attachment-card_ffd4i_2","attachment-card__inner":"_attachment-card__inner_ffd4i_21","attachment-card__container":"_attachment-card__container_ffd4i_24","attachment-card__left":"_attachment-card__left_ffd4i_37","attachment-card__open":"_attachment-card__open_ffd4i_45","attachment-card__icon":"_attachment-card__icon_ffd4i_64","attachment-card__thumbnail":"_attachment-card__thumbnail_ffd4i_70","attachment-card__text":"_attachment-card__text_ffd4i_79","attachment-card__filename":"_attachment-card__filename_ffd4i_86","attachment-card__secondary-details":"_attachment-card__secondary-details_ffd4i_100","attachment-card__details":"_attachment-card__details_ffd4i_108","attachment-card__datetime":"_attachment-card__datetime_ffd4i_121","attachment-card__uploading-text":"_attachment-card__uploading-text_ffd4i_132","attachment-card__right":"_attachment-card__right_ffd4i_141","attachment-card__actions":"_attachment-card__actions_ffd4i_148","attachment-card__progress-bar":"_attachment-card__progress-bar_ffd4i_162","attachment-card__progress-fill":"_attachment-card__progress-fill_ffd4i_169","attachment-card--uploading":"_attachment-card--uploading_ffd4i_174","attachment-card--uploaded":"_attachment-card--uploaded_ffd4i_187"};exports.default=t;
|
|
2
2
|
//# sourceMappingURL=AttachmentCard.module.scss.cjs.map
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import './AttachmentCard.module.css';const t = {
|
|
2
|
-
"attachment-card": "_attachment-
|
|
3
|
-
"attachment-
|
|
4
|
-
"attachment-
|
|
5
|
-
"attachment-card__left": "_attachment-
|
|
6
|
-
"attachment-
|
|
7
|
-
"attachment-
|
|
8
|
-
"attachment-
|
|
9
|
-
"attachment-
|
|
10
|
-
"attachment-
|
|
11
|
-
"attachment-
|
|
12
|
-
"attachment-
|
|
13
|
-
"attachment-
|
|
14
|
-
"attachment-
|
|
15
|
-
"attachment-
|
|
16
|
-
"attachment-
|
|
17
|
-
"attachment-card__progress-
|
|
18
|
-
"attachment-
|
|
19
|
-
"attachment-card--
|
|
2
|
+
"attachment-card": "_attachment-card_ffd4i_2",
|
|
3
|
+
"attachment-card__inner": "_attachment-card__inner_ffd4i_21",
|
|
4
|
+
"attachment-card__container": "_attachment-card__container_ffd4i_24",
|
|
5
|
+
"attachment-card__left": "_attachment-card__left_ffd4i_37",
|
|
6
|
+
"attachment-card__open": "_attachment-card__open_ffd4i_45",
|
|
7
|
+
"attachment-card__icon": "_attachment-card__icon_ffd4i_64",
|
|
8
|
+
"attachment-card__thumbnail": "_attachment-card__thumbnail_ffd4i_70",
|
|
9
|
+
"attachment-card__text": "_attachment-card__text_ffd4i_79",
|
|
10
|
+
"attachment-card__filename": "_attachment-card__filename_ffd4i_86",
|
|
11
|
+
"attachment-card__secondary-details": "_attachment-card__secondary-details_ffd4i_100",
|
|
12
|
+
"attachment-card__details": "_attachment-card__details_ffd4i_108",
|
|
13
|
+
"attachment-card__datetime": "_attachment-card__datetime_ffd4i_121",
|
|
14
|
+
"attachment-card__uploading-text": "_attachment-card__uploading-text_ffd4i_132",
|
|
15
|
+
"attachment-card__right": "_attachment-card__right_ffd4i_141",
|
|
16
|
+
"attachment-card__actions": "_attachment-card__actions_ffd4i_148",
|
|
17
|
+
"attachment-card__progress-bar": "_attachment-card__progress-bar_ffd4i_162",
|
|
18
|
+
"attachment-card__progress-fill": "_attachment-card__progress-fill_ffd4i_169",
|
|
19
|
+
"attachment-card--uploading": "_attachment-card--uploading_ffd4i_174",
|
|
20
|
+
"attachment-card--uploaded": "_attachment-card--uploaded_ffd4i_187"
|
|
20
21
|
};
|
|
21
22
|
export {
|
|
22
23
|
t as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AttachmentCard.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AttachmentCard.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._button_1e05o_2{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);border-radius:var(--radius-s);border:0;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition)}._button_1e05o_2:focus-visible{outline:none}._button_1e05o_2:disabled{cursor:not-allowed}._button__label_1e05o_20{line-height:1}._button__icon-slot_1e05o_23{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._button--size-x-small_1e05o_29{padding:var(--spacing-xxxs) var(--spacing-m)}._button--size-x-small_1e05o_29 ._button__label_1e05o_20{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-small_1e05o_36{padding:var(--spacing-xs) var(--spacing-l)}._button--size-small_1e05o_36 ._button__label_1e05o_20{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-medium_1e05o_43{padding:var(--spacing-s) var(--spacing-xl)}._button--size-medium_1e05o_43 ._button__label_1e05o_20{font-size:var(--font-size-100);line-height:var(--line-height-100)}._button--size-large_1e05o_50{padding:var(--spacing-m) var(--spacing-xxl)}._button--size-large_1e05o_50 ._button__label_1e05o_20{font-size:var(--font-size-200);line-height:var(--line-height-200)}._button--emphasis-primary_1e05o_57{background-color:var(--button-bg);color:var(--button-color)}._button--emphasis-primary_1e05o_57:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--button-bg))}._button--emphasis-primary_1e05o_57:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg))}._button--emphasis-primary_1e05o_57:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-primary_1e05o_57:focus-visible{box-shadow:0 0 0 3px var(--center-channel-bg),0 0 0 5px var(--button-bg)}._button--emphasis-secondary_1e05o_74{background-color:transparent;color:var(--link-color);box-shadow:inset 0 0 0 1px var(--link-color)}._button--emphasis-secondary_1e05o_74:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-secondary_1e05o_74:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-secondary_1e05o_74:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-secondary_1e05o_74:focus-visible{box-shadow:inset 0 0 0 1px var(--link-color),0 0 0 3px var(--center-channel-bg),0 0 0 5px var(--link-color)}._button--emphasis-tertiary_1e05o_92{background-color:rgba(var(--link-color-rgb),.08);color:var(--link-color)}._button--emphasis-tertiary_1e05o_92:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-tertiary_1e05o_92:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-tertiary_1e05o_92:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-tertiary_1e05o_92:focus-visible{box-shadow:0 0 0 3px var(--center-channel-bg),0 0 0 5px var(--button-bg)}._button--emphasis-quaternary_1e05o_109{background-color:transparent;color:var(--link-color)}._button--emphasis-quaternary_1e05o_109:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-quaternary_1e05o_109:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-quaternary_1e05o_109:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-quaternary_1e05o_109:focus-visible{box-shadow:0 0 0 3px var(--center-channel-bg),0 0 0 5px var(--link-color)}._button--destructive_1e05o_125._button--emphasis-primary_1e05o_57{background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._button--destructive_1e05o_125._button--emphasis-primary_1e05o_57:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--error-text, var(--color-danger)))}._button--destructive_1e05o_125._button--emphasis-primary_1e05o_57:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--error-text, var(--color-danger)))}._button--destructive_1e05o_125._button--emphasis-primary_1e05o_57:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_1e05o_125._button--emphasis-primary_1e05o_57:focus-visible{box-shadow:0 0 0 3px var(--center-channel-bg),0 0 0 5px var(--error-text, var(--color-danger))}._button--destructive_1e05o_125._button--emphasis-secondary_1e05o_74{color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._button--destructive_1e05o_125._button--emphasis-secondary_1e05o_74:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_1e05o_125._button--emphasis-secondary_1e05o_74:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_1e05o_125._button--emphasis-secondary_1e05o_74:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_1e05o_125._button--emphasis-secondary_1e05o_74:focus-visible{box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger)),0 0 0 3px var(--center-channel-bg),0 0 0 5px var(--error-text, var(--color-danger))}._button--destructive_1e05o_125._button--emphasis-tertiary_1e05o_92{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._button--destructive_1e05o_125._button--emphasis-tertiary_1e05o_92:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.12)}._button--destructive_1e05o_125._button--emphasis-tertiary_1e05o_92:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_1e05o_125._button--emphasis-tertiary_1e05o_92:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_1e05o_125._button--emphasis-tertiary_1e05o_92:focus-visible{box-shadow:0 0 0 3px var(--center-channel-bg),0 0 0 5px var(--error-text, var(--color-danger))}._button--destructive_1e05o_125._button--emphasis-quaternary_1e05o_109{color:var(--error-text, var(--color-danger))}._button--destructive_1e05o_125._button--emphasis-quaternary_1e05o_109:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_1e05o_125._button--emphasis-quaternary_1e05o_109:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_1e05o_125._button--emphasis-quaternary_1e05o_109:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_1e05o_125._button--emphasis-quaternary_1e05o_109:focus-visible{box-shadow:0 0 0 3px var(--center-channel-bg),0 0 0 5px var(--error-text, var(--color-danger))}._button--appearance-inverted_1e05o_191._button--emphasis-primary_1e05o_57{background-color:var(--sidebar-text);color:var(--sidebar-bg)}._button--appearance-inverted_1e05o_191._button--emphasis-primary_1e05o_57:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.92)}._button--appearance-inverted_1e05o_191._button--emphasis-primary_1e05o_57:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.88)}._button--appearance-inverted_1e05o_191._button--emphasis-primary_1e05o_57:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_1e05o_191._button--emphasis-primary_1e05o_57:focus-visible{box-shadow:0 0 0 3px var(--sidebar-bg),0 0 0 5px var(--button-bg)}._button--appearance-inverted_1e05o_191._button--emphasis-secondary_1e05o_74{color:var(--sidebar-text);box-shadow:inset 0 0 0 1px var(--sidebar-text)}._button--appearance-inverted_1e05o_191._button--emphasis-secondary_1e05o_74:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_1e05o_191._button--emphasis-secondary_1e05o_74:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_1e05o_191._button--emphasis-secondary_1e05o_74:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_1e05o_191._button--emphasis-secondary_1e05o_74:focus-visible{box-shadow:inset 0 0 0 1px var(--sidebar-text),0 0 0 3px var(--sidebar-bg),0 0 0 5px var(--button-bg)}._button--appearance-inverted_1e05o_191._button--emphasis-tertiary_1e05o_92{background-color:rgba(var(--sidebar-text-rgb),.08);color:var(--sidebar-text)}._button--appearance-inverted_1e05o_191._button--emphasis-tertiary_1e05o_92:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_1e05o_191._button--emphasis-tertiary_1e05o_92:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.16)}._button--appearance-inverted_1e05o_191._button--emphasis-tertiary_1e05o_92:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_1e05o_191._button--emphasis-tertiary_1e05o_92:focus-visible{box-shadow:0 0 0 3px var(--sidebar-bg),0 0 0 5px var(--button-bg)}._button--appearance-inverted_1e05o_191._button--emphasis-quaternary_1e05o_109{color:var(--sidebar-text)}._button--appearance-inverted_1e05o_191._button--emphasis-quaternary_1e05o_109:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_1e05o_191._button--emphasis-quaternary_1e05o_109:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_1e05o_191._button--emphasis-quaternary_1e05o_109:disabled{color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_1e05o_191._button--emphasis-quaternary_1e05o_109:focus-visible{box-shadow:0 0 0 3px var(--sidebar-bg),0 0 0 5px var(--button-bg)}
|
|
1
|
+
._button_1odpk_2{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);font-family:var(--font-family-body);font-weight:var(--font-weight-semibold);border-radius:var(--radius-s);border:0;cursor:pointer;transition:background-color var(--duration-quick) var(--ease-transition),color var(--duration-quick) var(--ease-transition),box-shadow var(--duration-quick) var(--ease-transition),outline-color var(--duration-quick) var(--ease-transition),outline-offset var(--duration-quick) var(--ease-transition);outline:2px solid color-mix(in srgb,var(--focus-ring-color) 0%,transparent);outline-offset:0}._button_1odpk_2:focus-visible{outline-color:var(--focus-ring-color);outline-offset:3px}._button_1odpk_2:disabled{cursor:not-allowed}._button__label_1odpk_23{line-height:1}._button__icon-slot_1odpk_26{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}._button--size-x-small_1odpk_32{padding:var(--spacing-xxxs) var(--spacing-m)}._button--size-x-small_1odpk_32 ._button__label_1odpk_23{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-small_1odpk_39{padding:var(--spacing-xs) var(--spacing-l)}._button--size-small_1odpk_39 ._button__label_1odpk_23{font-size:var(--font-size-75);line-height:var(--line-height-75)}._button--size-medium_1odpk_46{padding:var(--spacing-s) var(--spacing-xl)}._button--size-medium_1odpk_46 ._button__label_1odpk_23{font-size:var(--font-size-100);line-height:var(--line-height-100)}._button--size-large_1odpk_53{padding:var(--spacing-m) var(--spacing-xxl)}._button--size-large_1odpk_53 ._button__label_1odpk_23{font-size:var(--font-size-200);line-height:var(--line-height-200)}._button--emphasis-primary_1odpk_60{background-color:var(--button-bg);color:var(--button-color)}._button--emphasis-primary_1odpk_60:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--button-bg))}._button--emphasis-primary_1odpk_60:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--button-bg))}._button--emphasis-primary_1odpk_60:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-secondary_1odpk_74{--focus-ring-color: var(--link-color);background-color:transparent;color:var(--link-color);box-shadow:inset 0 0 0 1px var(--link-color)}._button--emphasis-secondary_1odpk_74:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-secondary_1odpk_74:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-secondary_1odpk_74:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-tertiary_1odpk_90{background-color:rgba(var(--link-color-rgb),.08);color:var(--link-color)}._button--emphasis-tertiary_1odpk_90:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-tertiary_1odpk_90:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.16)}._button--emphasis-tertiary_1odpk_90:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--emphasis-quaternary_1odpk_104{background-color:transparent;color:var(--link-color)}._button--emphasis-quaternary_1odpk_104:hover:not(:disabled){background-color:rgba(var(--link-color-rgb),.08)}._button--emphasis-quaternary_1odpk_104:active:not(:disabled){background-color:rgba(var(--link-color-rgb),.12)}._button--emphasis-quaternary_1odpk_104:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_1odpk_117{--focus-ring-color: var(--error-text, var(--color-danger))}._button--destructive_1odpk_117._button--emphasis-primary_1odpk_60{background-color:var(--error-text, var(--color-danger));color:var(--button-color)}._button--destructive_1odpk_117._button--emphasis-primary_1odpk_60:hover:not(:disabled){background-color:color-mix(in srgb,black 8%,var(--error-text, var(--color-danger)))}._button--destructive_1odpk_117._button--emphasis-primary_1odpk_60:active:not(:disabled){background-color:color-mix(in srgb,black 16%,var(--error-text, var(--color-danger)))}._button--destructive_1odpk_117._button--emphasis-primary_1odpk_60:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_1odpk_117._button--emphasis-secondary_1odpk_74{color:var(--error-text, var(--color-danger));box-shadow:inset 0 0 0 1px var(--error-text, var(--color-danger))}._button--destructive_1odpk_117._button--emphasis-secondary_1odpk_74:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_1odpk_117._button--emphasis-secondary_1odpk_74:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_1odpk_117._button--emphasis-secondary_1odpk_74:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_1odpk_117._button--emphasis-tertiary_1odpk_90{background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08);color:var(--error-text, var(--color-danger))}._button--destructive_1odpk_117._button--emphasis-tertiary_1odpk_90:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.12)}._button--destructive_1odpk_117._button--emphasis-tertiary_1odpk_90:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_1odpk_117._button--emphasis-tertiary_1odpk_90:disabled{background-color:rgba(var(--center-channel-color-rgb),.08);color:rgba(var(--center-channel-color-rgb),.32)}._button--destructive_1odpk_117._button--emphasis-quaternary_1odpk_104{color:var(--error-text, var(--color-danger))}._button--destructive_1odpk_117._button--emphasis-quaternary_1odpk_104:hover:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.08)}._button--destructive_1odpk_117._button--emphasis-quaternary_1odpk_104:active:not(:disabled){background-color:rgba(var(--error-text-color-rgb, var(--color-danger-rgb)),.16)}._button--destructive_1odpk_117._button--emphasis-quaternary_1odpk_104:disabled{color:rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_1odpk_174._button--emphasis-primary_1odpk_60{background-color:var(--sidebar-text);color:var(--sidebar-bg)}._button--appearance-inverted_1odpk_174._button--emphasis-primary_1odpk_60:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.92)}._button--appearance-inverted_1odpk_174._button--emphasis-primary_1odpk_60:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.88)}._button--appearance-inverted_1odpk_174._button--emphasis-primary_1odpk_60:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_1odpk_174._button--emphasis-secondary_1odpk_74{color:var(--sidebar-text);box-shadow:inset 0 0 0 1px var(--sidebar-text)}._button--appearance-inverted_1odpk_174._button--emphasis-secondary_1odpk_74:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_1odpk_174._button--emphasis-secondary_1odpk_74:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_1odpk_174._button--emphasis-secondary_1odpk_74:disabled{box-shadow:inset 0 0 0 1px rgba(var(--center-channel-color-rgb),.32);color:rgba(var(--center-channel-color-rgb),.32)}._button--appearance-inverted_1odpk_174._button--emphasis-tertiary_1odpk_90{background-color:rgba(var(--sidebar-text-rgb),.08);color:var(--sidebar-text)}._button--appearance-inverted_1odpk_174._button--emphasis-tertiary_1odpk_90:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_1odpk_174._button--emphasis-tertiary_1odpk_90:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.16)}._button--appearance-inverted_1odpk_174._button--emphasis-tertiary_1odpk_90:disabled{background-color:rgba(var(--sidebar-text-rgb),.08);color:rgba(var(--sidebar-text-rgb),.32)}._button--appearance-inverted_1odpk_174._button--emphasis-quaternary_1odpk_104{color:var(--sidebar-text)}._button--appearance-inverted_1odpk_174._button--emphasis-quaternary_1odpk_104:hover:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.12)}._button--appearance-inverted_1odpk_174._button--emphasis-quaternary_1odpk_104:active:not(:disabled){background-color:rgba(var(--sidebar-text-rgb),.2)}._button--appearance-inverted_1odpk_174._button--emphasis-quaternary_1odpk_104:disabled{color:rgba(var(--sidebar-text-rgb),.32)}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.module.css');const t="
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});require('./Button.module.css');const t="_button_1odpk_2",o="_button__label_1odpk_23",e={button:t,button__label:o,"button__icon-slot":"_button__icon-slot_1odpk_26","button--size-x-small":"_button--size-x-small_1odpk_32","button--size-small":"_button--size-small_1odpk_39","button--size-medium":"_button--size-medium_1odpk_46","button--size-large":"_button--size-large_1odpk_53","button--emphasis-primary":"_button--emphasis-primary_1odpk_60","button--emphasis-secondary":"_button--emphasis-secondary_1odpk_74","button--emphasis-tertiary":"_button--emphasis-tertiary_1odpk_90","button--emphasis-quaternary":"_button--emphasis-quaternary_1odpk_104","button--destructive":"_button--destructive_1odpk_117","button--appearance-inverted":"_button--appearance-inverted_1odpk_174"};exports.button=t;exports.button__label=o;exports.default=e;
|
|
2
2
|
//# sourceMappingURL=Button.module.scss.cjs.map
|
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import './Button.module.css';const t = "
|
|
1
|
+
import './Button.module.css';const t = "_button_1odpk_2", o = "_button__label_1odpk_23", _ = {
|
|
2
2
|
button: t,
|
|
3
|
-
button__label:
|
|
4
|
-
"button__icon-slot": "_button__icon-
|
|
5
|
-
"button--size-x-small": "_button--size-x-
|
|
6
|
-
"button--size-small": "_button--size-
|
|
7
|
-
"button--size-medium": "_button--size-
|
|
8
|
-
"button--size-large": "_button--size-
|
|
9
|
-
"button--emphasis-primary": "_button--emphasis-
|
|
10
|
-
"button--emphasis-secondary": "_button--emphasis-
|
|
11
|
-
"button--emphasis-tertiary": "_button--emphasis-
|
|
12
|
-
"button--emphasis-quaternary": "_button--emphasis-
|
|
13
|
-
"button--destructive": "_button--
|
|
14
|
-
"button--appearance-inverted": "_button--appearance-
|
|
3
|
+
button__label: o,
|
|
4
|
+
"button__icon-slot": "_button__icon-slot_1odpk_26",
|
|
5
|
+
"button--size-x-small": "_button--size-x-small_1odpk_32",
|
|
6
|
+
"button--size-small": "_button--size-small_1odpk_39",
|
|
7
|
+
"button--size-medium": "_button--size-medium_1odpk_46",
|
|
8
|
+
"button--size-large": "_button--size-large_1odpk_53",
|
|
9
|
+
"button--emphasis-primary": "_button--emphasis-primary_1odpk_60",
|
|
10
|
+
"button--emphasis-secondary": "_button--emphasis-secondary_1odpk_74",
|
|
11
|
+
"button--emphasis-tertiary": "_button--emphasis-tertiary_1odpk_90",
|
|
12
|
+
"button--emphasis-quaternary": "_button--emphasis-quaternary_1odpk_104",
|
|
13
|
+
"button--destructive": "_button--destructive_1odpk_117",
|
|
14
|
+
"button--appearance-inverted": "_button--appearance-inverted_1odpk_174"
|
|
15
15
|
};
|
|
16
16
|
export {
|
|
17
17
|
t as button,
|
|
18
|
-
|
|
19
|
-
|
|
18
|
+
o as button__label,
|
|
19
|
+
_ as default
|
|
20
20
|
};
|
|
21
21
|
//# sourceMappingURL=Button.module.scss.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),__B=require("@mattermost/compass-icons/components/globe.js"),B=__B?.default??__B,__D=require("@mattermost/compass-icons/components/lock-outline.js"),D=__D?.default??__D,__S=require("@mattermost/compass-icons/components/message-text-outline.js"),S=__S?.default??__S,__y=require("@mattermost/compass-icons/components/send-outline.js"),y=__y?.default??__y,__M=require("@mattermost/compass-icons/components/chart-line.js"),M=__M?.default??__M,__P=require("@mattermost/compass-icons/components/circle-multiple-outline.js"),P=__P?.default??__P,__T=require("@mattermost/compass-icons/components/phone-in-talk.js"),T=__T?.default??__T,__$=require("@mattermost/compass-icons/components/dots-vertical.js"),$=__$?.default??__$,__w=require("@mattermost/compass-icons/components/dialpad.js"),w=__w?.default??__w,A=require("../user-avatar/UserAvatar.cjs"),G=require("../mention-badge/MentionBadge.cjs"),H=require("../icon-button/IconButton.cjs"),s=require("./ChannelSidebarItem.module.scss.cjs");function R({leadingVisual:i,memberCount:r,avatarSrc:a,showAvatarStatus:t}){switch(i){case"private":return e.jsx(D,{size:16});case"group-message":return e.jsx("div",{className:s.default["channel-sidebar-item__group-icon"],children:r??2});case"direct-message":return e.jsx(A.default,{src:a??"",alt:"",size:"20",status:!!t});case"drafts":return e.jsx(y,{size:16});case"insights":return e.jsx(M,{size:16});case"threads":return e.jsx(S,{size:16});case"dial-pad":return e.jsx(w,{size:16});case"public":default:return e.jsx(B,{size:16})}}function U({className:i,name:r,hideLeadingVisual:a=!1,leadingVisual:t="public",status:o="read",active:c=!1,muted:_=!1,callActive:x=!1,sharedChannel:j=!1,mentionCount:l,memberCount:p,avatarSrc:v,showAvatarStatus:N=!1,customStatusEmoji:u,onClick:q,onMenuClick:d}){const m=!a&&t==="direct-message",h=!a&&t==="drafts",n=h&&o==="unread"?"read":o,I=n==="mention",g=!a&&["public","private","group-message","direct-message"].includes(t),z=[s.default["channel-sidebar-item"],a?s.default["channel-sidebar-item--text-only"]:"",c?s.default["channel-sidebar-item--active"]:"",_?s.default["channel-sidebar-item--muted"]:"",s.default[`channel-sidebar-item--status-${n.toLowerCase()}`],h?s.default["channel-sidebar-item--drafts"]:"",i].filter(Boolean).join(" "),C=[s.default["channel-sidebar-item__icon-container"],m?s.default["channel-sidebar-item__icon-container--dm"]:""].filter(Boolean).join(" "),O=s.default["channel-sidebar-item__right"],f=n==="mention"?`${l??1} mention${(l??1)===1?"":"s"}`:n==="unread"?"unread":void 0;return e.jsxs("div",{className:z,children:[c&&e.jsx("div",{className:s.default["channel-sidebar-item__active-border"]}),e.jsxs("button",{type:"button",className:s.default["channel-sidebar-item__left"],onClick:q,"aria-current":c?!0:void 0,children:[!a&&e.jsx("div",{className:C,"aria-hidden":!0,children:e.jsx(R,{leadingVisual:t,memberCount:p,avatarSrc:v,showAvatarStatus:N})}),e.jsxs("div",{className:s.default["channel-sidebar-item__content"],children:[e.jsx("span",{className:s.default["channel-sidebar-item__name"],children:r}),f&&e.jsx("span",{className:s.default["channel-sidebar-item__status-hint"],children:f}),j&&e.jsx("span",{className:s.default["channel-sidebar-item__shared-icon"],"aria-hidden":!0,children:e.jsx(P,{size:12})}),m&&u&&e.jsx("span",{className:s.default["channel-sidebar-item__custom-status"],"aria-hidden":!0,children:u})]})]}),e.jsxs("div",{className:O,children:[x&&e.jsx("div",{className:s.default["channel-sidebar-item__call"],"aria-hidden":!0,children:e.jsx(T,{size:12})}),I&&e.jsx("span",{className:s.default["channel-sidebar-item__mention-badge"],"aria-hidden":!0,children:e.jsx(G.default,{count:l??1,location:"sidebar",size:"medium"})}),g&&e.jsx("span",{className:s.default["channel-sidebar-item__menu-button"],children:e.jsx(H.default,{className:s.default["channel-sidebar-item__menu-icon"],size:"x-small",style:"inverted",icon:e.jsx($,{size:12}),"aria-label":"Channel options",onClick:b=>{b.stopPropagation(),d==null||d(b)}})})]})]})}exports.default=U;
|
|
2
2
|
//# sourceMappingURL=ChannelSidebarItem.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChannelSidebarItem.cjs","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"sourcesContent":["import GlobeIcon from '@mattermost/compass-icons/components/globe';\nimport LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';\nimport MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';\nimport SendOutlineIcon from '@mattermost/compass-icons/components/send-outline';\nimport ChartLineIcon from '@mattermost/compass-icons/components/chart-line';\nimport CircleMultipleOutlineIcon from '@mattermost/compass-icons/components/circle-multiple-outline';\nimport PhoneInTalkIcon from '@mattermost/compass-icons/components/phone-in-talk';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DialpadIcon from '@mattermost/compass-icons/components/dialpad';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport IconButton from '@/components/icon-button/IconButton';\nimport styles from './ChannelSidebarItem.module.scss';\n\nexport type ChannelSidebarItemLeadingVisual =\n | 'public'\n | 'private'\n | 'group-message'\n | 'direct-message'\n | 'drafts'\n | 'insights'\n | 'threads'\n | 'dial-pad';\n\nexport type ChannelSidebarItemStatus = 'read' | 'unread' | 'mention';\n\nexport interface ChannelSidebarItemProps {\n className?: string;\n /** Channel or user display name. */\n name: string;\n /**\n * Text-only row (e.g. System Console navigation): no channel glyph or\n * overflow menu; name aligns with channel sidebar label padding.\n */\n hideLeadingVisual?: boolean;\n /** Leading visual type. Default: Public. Ignored when `hideLeadingVisual`. */\n leadingVisual?: ChannelSidebarItemLeadingVisual;\n /** Read/unread/mention state. Default: Read. */\n status?: ChannelSidebarItemStatus;\n /** Highlighted as the currently active item. */\n active?: boolean;\n /** Muted channel — reduces visual prominence. */\n muted?: boolean;\n /** Shows a call-in-progress indicator on the right. */\n callActive?: boolean;\n /** Shows the shared-channel icon after the name. */\n sharedChannel?: boolean;\n /** Mention count shown in the badge when status='mention'. */\n mentionCount?: number;\n /** Member count shown in the group icon when leadingVisual='group-message'. */\n memberCount?: number;\n /** Avatar image URL for leadingVisual='direct-message'. */\n avatarSrc?: string;\n /** Avatar alt text for leadingVisual='direct-message'. */\n avatarAlt?: string;\n /** Shows status badge on the avatar when leadingVisual='direct-message'. */\n showAvatarStatus?: boolean;\n /** Custom status emoji shown after the name for leadingVisual='direct-message'. */\n customStatusEmoji?: string;\n onClick?: () => void;\n}\n\nfunction LeadingVisualContent({\n leadingVisual,\n memberCount,\n avatarSrc,\n avatarAlt,\n showAvatarStatus,\n}: {\n leadingVisual: ChannelSidebarItemLeadingVisual;\n memberCount: number | undefined;\n avatarSrc: string | undefined;\n avatarAlt: string | undefined;\n showAvatarStatus: boolean | undefined;\n}) {\n switch (leadingVisual) {\n case 'private':\n return <LockOutlineIcon size={16} />;\n case 'group-message':\n return (\n <div className={styles['channel-sidebar-item__group-icon']}>\n {memberCount ?? 2}\n </div>\n );\n case 'direct-message':\n return (\n <UserAvatar\n src={avatarSrc ?? ''}\n alt={avatarAlt ?? ''}\n size=\"20\"\n status={!!showAvatarStatus}\n />\n );\n case 'drafts':\n return <SendOutlineIcon size={16} />;\n case 'insights':\n return <ChartLineIcon size={16} />;\n case 'threads':\n return <MessageTextOutlineIcon size={16} />;\n case 'dial-pad':\n return <DialpadIcon size={16} />;\n case 'public':\n default:\n return <GlobeIcon size={16} />;\n }\n}\n\n/**\n * The Channel Sidebar Item is the row people use to move between channels, DMs, and group\n * messages. It compresses a lot of state — channel type, unread, mention count, mute,\n * in-call — into a single, scannable line.\n */\nexport default function ChannelSidebarItem({\n className,\n name,\n hideLeadingVisual = false,\n leadingVisual = 'public',\n status = 'read',\n active = false,\n muted = false,\n callActive = false,\n sharedChannel = false,\n mentionCount,\n memberCount,\n avatarSrc,\n avatarAlt,\n showAvatarStatus = false,\n customStatusEmoji,\n onClick,\n}: ChannelSidebarItemProps) {\n const isDM = !hideLeadingVisual && leadingVisual === 'direct-message';\n const isDrafts = !hideLeadingVisual && leadingVisual === 'drafts';\n const effectiveStatus = isDrafts && status === 'unread' ? 'read' : status;\n const hasMentionBadge = effectiveStatus === 'mention';\n const isChannelOrDM =\n !hideLeadingVisual &&\n ['public', 'private', 'group-message', 'direct-message'].includes(\n leadingVisual,\n );\n\n const rootClass = [\n styles['channel-sidebar-item'],\n hideLeadingVisual ? styles['channel-sidebar-item--text-only'] : '',\n active ? styles['channel-sidebar-item--active'] : '',\n muted ? styles['channel-sidebar-item--muted'] : '',\n styles[`channel-sidebar-item--status-${effectiveStatus.toLowerCase()}`],\n isDrafts ? styles['channel-sidebar-item--drafts'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const iconContainerClass = [\n styles['channel-sidebar-item__icon-container'],\n isDM ? styles['channel-sidebar-item__icon-container--dm'] : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n const rightClass = styles['channel-sidebar-item__right'];\n\n return (\n <div\n role=\"button\"\n tabIndex={0}\n className={rootClass}\n onClick={onClick}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n onClick?.();\n }\n }}\n >\n {active && (\n <div className={styles['channel-sidebar-item__active-border']} />\n )}\n <div className={styles['channel-sidebar-item__left']}>\n {!hideLeadingVisual && (\n <div className={iconContainerClass}>\n <LeadingVisualContent\n leadingVisual={leadingVisual}\n memberCount={memberCount}\n avatarSrc={avatarSrc}\n avatarAlt={avatarAlt}\n showAvatarStatus={showAvatarStatus}\n />\n </div>\n )}\n <div className={styles['channel-sidebar-item__content']}>\n <span className={styles['channel-sidebar-item__name']}>{name}</span>\n {sharedChannel && (\n <span className={styles['channel-sidebar-item__shared-icon']}>\n <CircleMultipleOutlineIcon size={12} />\n </span>\n )}\n {isDM && customStatusEmoji && (\n <span className={styles['channel-sidebar-item__custom-status']}>\n {customStatusEmoji}\n </span>\n )}\n </div>\n </div>\n <div className={rightClass}>\n {callActive && (\n <div className={styles['channel-sidebar-item__call']}>\n <PhoneInTalkIcon size={12} />\n </div>\n )}\n {hasMentionBadge && (\n <span className={styles['channel-sidebar-item__mention-badge']}>\n <MentionBadge\n count={mentionCount ?? 1}\n location=\"sidebar\"\n size=\"medium\"\n />\n </span>\n )}\n {isChannelOrDM && (\n <span className={styles['channel-sidebar-item__menu-button']}>\n <IconButton\n size=\"x-small\"\n style=\"inverted\"\n icon={<DotsVerticalIcon size={12} />}\n aria-label=\"Channel options\"\n onClick={(e) => e.stopPropagation()}\n />\n </span>\n )}\n </div>\n </div>\n );\n}\n"],"names":["LeadingVisualContent","leadingVisual","memberCount","avatarSrc","avatarAlt","showAvatarStatus","jsx","LockOutlineIcon","styles","UserAvatar","SendOutlineIcon","ChartLineIcon","MessageTextOutlineIcon","DialpadIcon","GlobeIcon","ChannelSidebarItem","className","name","hideLeadingVisual","status","active","muted","callActive","sharedChannel","mentionCount","customStatusEmoji","onClick","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","rootClass","iconContainerClass","rightClass","jsxs","e","CircleMultipleOutlineIcon","PhoneInTalkIcon","MentionBadge","IconButton","DotsVerticalIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ChannelSidebarItem.cjs","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"sourcesContent":["import type { MouseEvent } from 'react';\nimport GlobeIcon from '@mattermost/compass-icons/components/globe';\nimport LockOutlineIcon from '@mattermost/compass-icons/components/lock-outline';\nimport MessageTextOutlineIcon from '@mattermost/compass-icons/components/message-text-outline';\nimport SendOutlineIcon from '@mattermost/compass-icons/components/send-outline';\nimport ChartLineIcon from '@mattermost/compass-icons/components/chart-line';\nimport CircleMultipleOutlineIcon from '@mattermost/compass-icons/components/circle-multiple-outline';\nimport PhoneInTalkIcon from '@mattermost/compass-icons/components/phone-in-talk';\nimport DotsVerticalIcon from '@mattermost/compass-icons/components/dots-vertical';\nimport DialpadIcon from '@mattermost/compass-icons/components/dialpad';\nimport UserAvatar from '@/components/user-avatar/UserAvatar';\nimport MentionBadge from '@/components/mention-badge/MentionBadge';\nimport IconButton from '@/components/icon-button/IconButton';\nimport styles from './ChannelSidebarItem.module.scss';\n\nexport type ChannelSidebarItemLeadingVisual =\n | 'public'\n | 'private'\n | 'group-message'\n | 'direct-message'\n | 'drafts'\n | 'insights'\n | 'threads'\n | 'dial-pad';\n\nexport type ChannelSidebarItemStatus = 'read' | 'unread' | 'mention';\n\nexport interface ChannelSidebarItemProps {\n className?: string;\n /** Channel or user display name. */\n name: string;\n /**\n * Text-only row (e.g. System Console navigation): no channel glyph or\n * overflow menu; name aligns with channel sidebar label padding.\n */\n hideLeadingVisual?: boolean;\n /** Leading visual type. Default: Public. Ignored when `hideLeadingVisual`. */\n leadingVisual?: ChannelSidebarItemLeadingVisual;\n /** Read/unread/mention state. Default: Read. */\n status?: ChannelSidebarItemStatus;\n /** Highlighted as the currently active item. */\n active?: boolean;\n /** Muted channel — reduces visual prominence. */\n muted?: boolean;\n /** Shows a call-in-progress indicator on the right. */\n callActive?: boolean;\n /** Shows the shared-channel icon after the name. */\n sharedChannel?: boolean;\n /** Mention count shown in the badge when status='mention'. */\n mentionCount?: number;\n /** Member count shown in the group icon when leadingVisual='group-message'. */\n memberCount?: number;\n /** Avatar image URL for leadingVisual='direct-message'. */\n avatarSrc?: string;\n /** Avatar alt text for leadingVisual='direct-message'. */\n avatarAlt?: string;\n /** Shows status badge on the avatar when leadingVisual='direct-message'. */\n showAvatarStatus?: boolean;\n /** Custom status emoji shown after the name for leadingVisual='direct-message'. */\n customStatusEmoji?: string;\n onClick?: () => void;\n /** Overflow menu (kebab). Sibling of the channel control so it is keyboard-reachable. */\n onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\nfunction LeadingVisualContent({\n leadingVisual,\n memberCount,\n avatarSrc,\n showAvatarStatus,\n}: {\n leadingVisual: ChannelSidebarItemLeadingVisual;\n memberCount: number | undefined;\n avatarSrc: string | undefined;\n showAvatarStatus: boolean | undefined;\n}) {\n switch (leadingVisual) {\n case 'private':\n return <LockOutlineIcon size={16} />;\n case 'group-message':\n return (\n <div className={styles['channel-sidebar-item__group-icon']}>\n {memberCount ?? 2}\n </div>\n );\n case 'direct-message':\n return (\n <UserAvatar\n src={avatarSrc ?? ''}\n alt=\"\"\n size=\"20\"\n status={!!showAvatarStatus}\n />\n );\n case 'drafts':\n return <SendOutlineIcon size={16} />;\n case 'insights':\n return <ChartLineIcon size={16} />;\n case 'threads':\n return <MessageTextOutlineIcon size={16} />;\n case 'dial-pad':\n return <DialpadIcon size={16} />;\n case 'public':\n default:\n return <GlobeIcon size={16} />;\n }\n}\n\n/**\n * The Channel Sidebar Item is the row people use to move between channels, DMs, and group\n * messages. It compresses a lot of state — channel type, unread, mention count, mute,\n * in-call — into a single, scannable line.\n */\nexport default function ChannelSidebarItem({\n className,\n name,\n hideLeadingVisual = false,\n leadingVisual = 'public',\n status = 'read',\n active = false,\n muted = false,\n callActive = false,\n sharedChannel = false,\n mentionCount,\n memberCount,\n avatarSrc,\n showAvatarStatus = false,\n customStatusEmoji,\n onClick,\n onMenuClick,\n}: ChannelSidebarItemProps) {\n const isDM = !hideLeadingVisual && leadingVisual === 'direct-message';\n const isDrafts = !hideLeadingVisual && leadingVisual === 'drafts';\n const effectiveStatus = isDrafts && status === 'unread' ? 'read' : status;\n const hasMentionBadge = effectiveStatus === 'mention';\n const isChannelOrDM =\n !hideLeadingVisual &&\n ['public', 'private', 'group-message', 'direct-message'].includes(\n leadingVisual,\n );\n\n const rootClass = [\n styles['channel-sidebar-item'],\n hideLeadingVisual ? styles['channel-sidebar-item--text-only'] : '',\n active ? styles['channel-sidebar-item--active'] : '',\n muted ? styles['channel-sidebar-item--muted'] : '',\n styles[`channel-sidebar-item--status-${effectiveStatus.toLowerCase()}`],\n isDrafts ? styles['channel-sidebar-item--drafts'] : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n const iconContainerClass = [\n styles['channel-sidebar-item__icon-container'],\n isDM ? styles['channel-sidebar-item__icon-container--dm'] : '',\n ]\n .filter(Boolean)\n .join(' ');\n\n const rightClass = styles['channel-sidebar-item__right'];\n\n const statusHint =\n effectiveStatus === 'mention'\n ? `${mentionCount ?? 1} mention${(mentionCount ?? 1) === 1 ? '' : 's'}`\n : effectiveStatus === 'unread'\n ? 'unread'\n : undefined;\n\n return (\n <div className={rootClass}>\n {active && (\n <div className={styles['channel-sidebar-item__active-border']} />\n )}\n <button\n type=\"button\"\n className={styles['channel-sidebar-item__left']}\n onClick={onClick}\n aria-current={active ? true : undefined}\n >\n {!hideLeadingVisual && (\n <div className={iconContainerClass} aria-hidden>\n <LeadingVisualContent\n leadingVisual={leadingVisual}\n memberCount={memberCount}\n avatarSrc={avatarSrc}\n showAvatarStatus={showAvatarStatus}\n />\n </div>\n )}\n <div className={styles['channel-sidebar-item__content']}>\n <span className={styles['channel-sidebar-item__name']}>{name}</span>\n {statusHint && (\n <span className={styles['channel-sidebar-item__status-hint']}>\n {statusHint}\n </span>\n )}\n {sharedChannel && (\n <span\n className={styles['channel-sidebar-item__shared-icon']}\n aria-hidden\n >\n <CircleMultipleOutlineIcon size={12} />\n </span>\n )}\n {isDM && customStatusEmoji && (\n <span\n className={styles['channel-sidebar-item__custom-status']}\n aria-hidden\n >\n {customStatusEmoji}\n </span>\n )}\n </div>\n </button>\n <div className={rightClass}>\n {callActive && (\n <div className={styles['channel-sidebar-item__call']} aria-hidden>\n <PhoneInTalkIcon size={12} />\n </div>\n )}\n {hasMentionBadge && (\n <span\n className={styles['channel-sidebar-item__mention-badge']}\n aria-hidden\n >\n <MentionBadge\n count={mentionCount ?? 1}\n location=\"sidebar\"\n size=\"medium\"\n />\n </span>\n )}\n {isChannelOrDM && (\n <span className={styles['channel-sidebar-item__menu-button']}>\n <IconButton\n className={styles['channel-sidebar-item__menu-icon']}\n size=\"x-small\"\n style=\"inverted\"\n icon={<DotsVerticalIcon size={12} />}\n aria-label=\"Channel options\"\n onClick={(e) => {\n e.stopPropagation();\n onMenuClick?.(e);\n }}\n />\n </span>\n )}\n </div>\n </div>\n );\n}\n"],"names":["LeadingVisualContent","leadingVisual","memberCount","avatarSrc","showAvatarStatus","jsx","LockOutlineIcon","styles","UserAvatar","SendOutlineIcon","ChartLineIcon","MessageTextOutlineIcon","DialpadIcon","GlobeIcon","ChannelSidebarItem","className","name","hideLeadingVisual","status","active","muted","callActive","sharedChannel","mentionCount","customStatusEmoji","onClick","onMenuClick","isDM","isDrafts","effectiveStatus","hasMentionBadge","isChannelOrDM","rootClass","iconContainerClass","rightClass","statusHint","jsxs","CircleMultipleOutlineIcon","PhoneInTalkIcon","MentionBadge","IconButton","DotsVerticalIcon","e"],"mappings":"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"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { MouseEvent } from 'react';
|
|
1
2
|
export type ChannelSidebarItemLeadingVisual = 'public' | 'private' | 'group-message' | 'direct-message' | 'drafts' | 'insights' | 'threads' | 'dial-pad';
|
|
2
3
|
export type ChannelSidebarItemStatus = 'read' | 'unread' | 'mention';
|
|
3
4
|
export interface ChannelSidebarItemProps {
|
|
@@ -34,11 +35,13 @@ export interface ChannelSidebarItemProps {
|
|
|
34
35
|
/** Custom status emoji shown after the name for leadingVisual='direct-message'. */
|
|
35
36
|
customStatusEmoji?: string;
|
|
36
37
|
onClick?: () => void;
|
|
38
|
+
/** Overflow menu (kebab). Sibling of the channel control so it is keyboard-reachable. */
|
|
39
|
+
onMenuClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
37
40
|
}
|
|
38
41
|
/**
|
|
39
42
|
* The Channel Sidebar Item is the row people use to move between channels, DMs, and group
|
|
40
43
|
* messages. It compresses a lot of state — channel type, unread, mention count, mute,
|
|
41
44
|
* in-call — into a single, scannable line.
|
|
42
45
|
*/
|
|
43
|
-
export default function ChannelSidebarItem({ className, name, hideLeadingVisual, leadingVisual, status, active, muted, callActive, sharedChannel, mentionCount, memberCount, avatarSrc,
|
|
46
|
+
export default function ChannelSidebarItem({ className, name, hideLeadingVisual, leadingVisual, status, active, muted, callActive, sharedChannel, mentionCount, memberCount, avatarSrc, showAvatarStatus, customStatusEmoji, onClick, onMenuClick, }: ChannelSidebarItemProps): import("react/jsx-runtime").JSX.Element;
|
|
44
47
|
//# sourceMappingURL=ChannelSidebarItem.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChannelSidebarItem.d.ts","sourceRoot":"","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ChannelSidebarItem.d.ts","sourceRoot":"","sources":["../../../src/components/channel-sidebar-item/ChannelSidebarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAexC,MAAM,MAAM,+BAA+B,GACvC,QAAQ,GACR,SAAS,GACT,eAAe,GACf,gBAAgB,GAChB,QAAQ,GACR,UAAU,GACV,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,MAAM,wBAAwB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;AAErE,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8EAA8E;IAC9E,aAAa,CAAC,EAAE,+BAA+B,CAAC;IAChD,gDAAgD;IAChD,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iDAAiD;IACjD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oDAAoD;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,8DAA8D;IAC9D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mFAAmF;IACnF,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,yFAAyF;IACzF,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC9D;AA6CD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,SAAS,EACT,IAAI,EACJ,iBAAyB,EACzB,aAAwB,EACxB,MAAe,EACf,MAAc,EACd,KAAa,EACb,UAAkB,EAClB,aAAqB,EACrB,YAAY,EACZ,WAAW,EACX,SAAS,EACT,gBAAwB,EACxB,iBAAiB,EACjB,OAAO,EACP,WAAW,GACZ,EAAE,uBAAuB,2CAyHzB"}
|