npm - @bethinkpl/design-system - Versions diffs - 28.1.0 → 28.1.2 - Mend

@bethinkpl/design-system 28.1.0 → 28.1.2

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.

Files changed (62) hide show

package/docs/assets/{preview-hC0Zi1u8.js → preview-kJ3x2L6r.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./DocsRenderer-CFRXHY34-BtXyHL3w.js","./iframe-BIhQskTb.js","./index-C7dYv50j.js"])))=>i.map(i=>d[i]);
-import{_ as s}from"./iframe-BIhQskTb.js";import"../sb-preview/runtime.js";const{global:_}=__STORYBOOK_MODULE_GLOBAL__;var o,i=Object.entries((o=_.TAGS_OPTIONS)!=null?o:{}).reduce((e,r)=>{let[t,a]=r;return a.excludeFromDocsStories&&(e[t]=!0),e},{}),d={docs:{renderer:async()=>{let{DocsRenderer:e}=await s(()=>import("./DocsRenderer-CFRXHY34-BtXyHL3w.js").then(r=>r.an),__vite__mapDeps([0,1,2]),import.meta.url);return new e},stories:{filter:e=>{var r;return(e.tags||[]).filter(t=>i[t]).length===0&&!((r=e.parameters.docs)!=null&&r.disable)}}}};export{d as parameters};
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./DocsRenderer-CFRXHY34-BANCZeDH.js","./iframe-DJqDpuzz.js","./index-C7dYv50j.js"])))=>i.map(i=>d[i]);
+import{_ as s}from"./iframe-DJqDpuzz.js";import"../sb-preview/runtime.js";const{global:_}=__STORYBOOK_MODULE_GLOBAL__;var o,i=Object.entries((o=_.TAGS_OPTIONS)!=null?o:{}).reduce((e,r)=>{let[t,a]=r;return a.excludeFromDocsStories&&(e[t]=!0),e},{}),d={docs:{renderer:async()=>{let{DocsRenderer:e}=await s(()=>import("./DocsRenderer-CFRXHY34-BANCZeDH.js").then(r=>r.an),__vite__mapDeps([0,1,2]),import.meta.url);return new e},stories:{filter:e=>{var r;return(e.tags||[]).filter(t=>i[t]).length===0&&!((r=e.parameters.docs)!=null&&r.disable)}}}};export{d as parameters};

package/docs/iframe.html CHANGED Viewed

@@ -510,7 +510,7 @@
 </script>
 <link rel="stylesheet" href="./preview.css">
-    <script type="module" crossorigin src="./assets/iframe-BIhQskTb.js"></script>
+    <script type="module" crossorigin src="./assets/iframe-DJqDpuzz.js"></script>
   </head>
   <body>

package/docs/project.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"generatedAt":~~1753253492063~~,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@vitest/coverage-c8":"0.33.0","@vitest/ui":"3.1.4","vitest":"3.1.4"},"packageManager":{"type":"yarn","version":"1.22.22"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/vue3-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/vue3","portableStoriesFileCount":3,"storybookVersion":"8.3.4","storybookVersionSpecifier":"^8.3.4","language":"typescript","storybookPackages":{"@storybook/vue3":{"version":"8.3.4"},"@storybook/vue3-vite":{"version":"8.3.4"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.3.4"}},"addons":{"@storybook/addon-actions":{"version":"8.3.4"},"@storybook/addon-designs":{"version":"8.0.3"},"@storybook/addon-docs":{"version":"8.3.4"},"@storybook/addon-controls":{"version":"8.3.4"},"@storybook/addon-storysource":{"version":"8.3.4"},"@storybook/addon-viewport":{"version":"8.3.4"}}}
1	+ {"generatedAt":1754641575729,"hasCustomBabel":false,"hasCustomWebpack":false,"hasStaticDirs":true,"hasStorybookEslint":true,"refCount":0,"testPackages":{"@vitest/coverage-c8":"0.33.0","@vitest/ui":"3.1.4","vitest":"3.1.4"},"packageManager":{"type":"yarn","version":"1.22.22"},"preview":{"usesGlobals":false},"framework":{"name":"@storybook/vue3-vite","options":{}},"builder":"@storybook/builder-vite","renderer":"@storybook/vue3","portableStoriesFileCount":3,"storybookVersion":"8.3.4","storybookVersionSpecifier":"^8.3.4","language":"typescript","storybookPackages":{"@storybook/vue3":{"version":"8.3.4"},"@storybook/vue3-vite":{"version":"8.3.4"},"eslint-plugin-storybook":{"version":"0.8.0"},"storybook":{"version":"8.3.4"}},"addons":{"@storybook/addon-actions":{"version":"8.3.4"},"@storybook/addon-designs":{"version":"8.0.3"},"@storybook/addon-docs":{"version":"8.3.4"},"@storybook/addon-controls":{"version":"8.3.4"},"@storybook/addon-storysource":{"version":"8.3.4"},"@storybook/addon-viewport":{"version":"8.3.4"}}}

package/lib/js/components/DatePickers/DatePicker/DatePicker.spec.ts ADDED Viewed

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import DatePicker from './DatePicker.vue';
+import { Tile, TILE_COMPACT_LAYOUTS } from '../../../';
+const createComponent = (props = {}) => {
+	return mount(DatePicker, {
+		props,
+	});
+};
+describe('DatePicker', () => {
+	describe('Hidden Icon', () => {
+		it('should pass DEFAULT compact layout to Tile when isIconHiddenOnMobile is not set', () => {
+			const component = createComponent();
+			const tile = component.findComponent(Tile);
+			expect(tile.exists()).toBeTruthy();
+			expect(tile.props().compactLayout).toEqual(TILE_COMPACT_LAYOUTS.DEFAULT);
+		});
+		it('should pass DEFAULT compact layout to Tile when isIconHiddenOnMobile is set to false', () => {
+			const component = createComponent({ isIconHiddenOnMobile: false });
+			const tile = component.findComponent(Tile);
+			expect(tile.exists()).toBeTruthy();
+			expect(tile.props().compactLayout).toEqual(TILE_COMPACT_LAYOUTS.DEFAULT);
+		});
+		it('should pass ICON_RIGHT_HIDDEN compact layout to Tile when isIconHiddenOnMobile is set to true', () => {
+			const component = createComponent({ isIconHiddenOnMobile: true });
+			const tile = component.findComponent(Tile);
+			expect(tile.exists()).toBeTruthy();
+			expect(tile.props().compactLayout).toEqual(TILE_COMPACT_LAYOUTS.ICON_RIGHT_HIDDEN);
+		});
+	});
+});

package/lib/js/components/DatePickers/DatePicker/DatePicker.vue CHANGED Viewed

@@ -28,10 +28,14 @@
 				:border-color="borderColor"
 				:state="tileState"
 				:icon-right="tileIcon"
-				:is-icon-right-hidden-on-mobile="isIconHiddenOnMobile"
 				:eyebrow-text="eyebrowText"
 				:additional-text-max-width="TILE_ADDITIONAL_TEXT_MAX_WIDTHS.MEDIUM"
 				has-border
+				:compact-layout="
+					isIconHiddenOnMobile
+						? TILE_COMPACT_LAYOUTS.ICON_RIGHT_HIDDEN
+						: TILE_COMPACT_LAYOUTS.DEFAULT
+				"
 				@click.stop.prevent="toggle"
 			/>
 		</template>
@@ -145,6 +149,7 @@ import { Instance as DatePickerInstance } from 'flatpickr/dist/types/instance';
 import DsTile, {
 	TILE_ADDITIONAL_TEXT_MAX_WIDTHS,
 	TILE_BORDER_COLORS,
+	TILE_COMPACT_LAYOUTS,
 	TileColor,
 	TileState,
 } from '../../Tile';
@@ -297,11 +302,12 @@ export default defineComponent({
 			toggleDatePicker,
 			updateDatePicker,
 			createDatePicker,
-			DATE_PICKER_CALENDAR_POSITIONS: Object.freeze(DATE_PICKER_CALENDAR_POSITIONS),
-			DATE_PICKER_COLORS: Object.freeze(DATE_PICKER_COLORS),
-			DATE_PICKER_STATES: Object.freeze(DATE_PICKER_STATES),
-			DATE_PICKER_TRIGGER_TYPES: Object.freeze(DATE_PICKER_TRIGGER_TYPES),
-			TILE_ADDITIONAL_TEXT_MAX_WIDTHS: Object.freeze(TILE_ADDITIONAL_TEXT_MAX_WIDTHS),
+			DATE_PICKER_CALENDAR_POSITIONS,
+			DATE_PICKER_COLORS,
+			DATE_PICKER_STATES,
+			DATE_PICKER_TRIGGER_TYPES,
+			TILE_ADDITIONAL_TEXT_MAX_WIDTHS,
+			TILE_COMPACT_LAYOUTS,
 		};
 	},
 	computed: {

package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.spec.ts ADDED Viewed

@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import DrawerHeader from './DrawerHeader.vue';
+import { IconButton } from '../../../';
+const createComponent = (props = {}) => {
+	return mount(DrawerHeader, {
+		props,
+	});
+};
+describe('DrawerHeader', () => {
+	describe('hasBackButton', () => {
+		it('should show back button on first level when hasBackButton set to true', () => {
+			const component = createComponent({ hasBackButton: true });
+			const backButton = component
+				.find('.ds-drawerHeader__firstLevel')
+				.findComponent(IconButton);
+			expect(backButton.exists()).toBeTruthy();
+		});
+		it('should hide back button on first level when not set', () => {
+			const component = createComponent();
+			const backButton = component
+				.find('.ds-drawerHeader__firstLevel')
+				.findComponent(IconButton);
+			expect(backButton.exists()).toBeFalsy();
+		});
+		it('should hide back button on first level when hasBackButton set to false', () => {
+			const component = createComponent({ hasBackButton: false });
+			const backButton = component
+				.find('.ds-drawerHeader__firstLevel')
+				.findComponent(IconButton);
+			expect(backButton.exists()).toBeFalsy();
+		});
+		it('should emit backClicked when clicking on back', async () => {
+			const component = createComponent({ hasBackButton: true });
+			const backButton = component
+				.find('.ds-drawerHeader__firstLevel')
+				.findComponent(IconButton);
+			expect(backButton.exists()).toBeTruthy();
+			await backButton.trigger('click');
+			expect(component.emitted().backClicked).toHaveLength(1);
+		});
+	});
+});

package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.stories.ts CHANGED Viewed

@@ -32,6 +32,7 @@ const StoryTemplate: StoryFn<typeof DrawerHeader> = (args) => ({
 			:title-color="titleColor"
 			:title-ellipsis="titleEllipsis"
 			:title="title"
+			:has-back-button="hasBackButton"
 		>
 			<template #actions v-if="actions">
 				<div v-html="actions" />
@@ -58,6 +59,7 @@ const args = {
 	isSecondLevel: false,
 	actions: 'actions slot',
 	titleTrailing: 'trailing slot',
+	hasBackButton: false,
 } as Args;
 const argTypes = {
@@ -80,6 +82,7 @@ const argTypes = {
 	isClosable: { control: 'boolean' },
 	actions: { control: 'text' },
 	titleTrailing: { control: 'text' },
+	hasBackButton: { control: 'boolean' },
 } as ArgTypes;
 Interactive.argTypes = argTypes;

package/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue CHANGED Viewed

@@ -11,34 +11,43 @@
 				Wróć
 			</ds-button>
 			<div :class="{ '-ds-hidden': isSecondLevel }" class="ds-drawerHeader__firstLevel">
-				<span
-					v-if="eyebrowText"
-					:class="{
-						'-ds-isInteractive': isInteractiveEyebrow,
-						'-ds-ellipsis': eyebrowEllipsis,
-					}"
-					class="ds-drawerHeader__eyebrow"
-					@click="isInteractiveEyebrow && $emit('eyebrowClicked')"
-				>
-					{{ eyebrowText }}
-				</span>
-				<div class="ds-drawerHeader__title">
-					<icon
-						v-if="leftIcon"
-						:icon="leftIcon"
-						:size="ICON_SIZES.X_SMALL"
-						class="ds-drawerHeader__leftIcon"
-					/>
+				<icon-button
+					v-if="hasBackButton"
+					:size="ICON_BUTTON_SIZES.MEDIUM"
+					:icon="ICONS.FA_CHEVRON_LEFT"
+					:touchable="false"
+					@click="$emit('backClicked')"
+				/>
+				<div class="ds-drawerHeader__textWrapper">
 					<span
-						v-if="title"
-						class="ds-drawerHeader__titleText"
-						:class="{ '-ds-ellipsis': titleEllipsis, [`-ds-${titleColor}`]: true }"
-						:title="titleEllipsis ? title : undefined"
-						>{{ title }}</span
+						v-if="eyebrowText"
+						:class="{
+							'-ds-isInteractive': isInteractiveEyebrow,
+							'-ds-ellipsis': eyebrowEllipsis,
+						}"
+						class="ds-drawerHeader__eyebrow"
+						@click="isInteractiveEyebrow && $emit('eyebrowClicked')"
 					>
-					<chip v-if="chipLabel" :label="chipLabel" />
-					<div v-if="$slots.titleTrailing">
-						<slot name="titleTrailing" />
+						{{ eyebrowText }}
+					</span>
+					<div class="ds-drawerHeader__title">
+						<icon
+							v-if="leftIcon"
+							:icon="leftIcon"
+							:size="ICON_SIZES.X_SMALL"
+							class="ds-drawerHeader__leftIcon"
+						/>
+						<span
+							v-if="title"
+							class="ds-drawerHeader__titleText"
+							:class="{ '-ds-ellipsis': titleEllipsis, [`-ds-${titleColor}`]: true }"
+							:title="titleEllipsis ? title : undefined"
+							>{{ title }}</span
+						>
+						<chip v-if="chipLabel" :label="chipLabel" />
+						<div v-if="$slots.titleTrailing">
+							<slot name="titleTrailing" />
+						</div>
 					</div>
 				</div>
 			</div>
@@ -77,16 +86,23 @@ $minimal-drawer-header-height: 82px;
 	}
 	&__firstLevel {
+		align-items: center;
 		display: flex;
-		flex-direction: column;
 		min-width: 0;
-		row-gap: $space-4xs;
 		&.-ds-hidden {
 			visibility: hidden; // by this we make sure that height does not change when switching to second level
 		}
 	}
+	&__textWrapper {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		padding-left: $space-4xs;
+		row-gap: $space-4xs;
+	}
 	&__eyebrow {
 		@include info-s-extensive-bold-uppercase;
@@ -134,7 +150,7 @@ $minimal-drawer-header-height: 82px;
 		display: flex;
 		justify-content: space-between;
 		min-height: $minimal-drawer-header-height;
-		padding: $space-m $space-xs $space-m $space-s;
+		padding: $space-m $space-xs;
 	}
 	&__actions {
@@ -211,6 +227,10 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		hasBackButton: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	// TODO fix me when touching this file
 	// eslint-disable-next-line vue/require-emit-validator

package/lib/js/components/Tile/Tile.consts.ts CHANGED Viewed

@@ -46,3 +46,12 @@ export const TILE_ADDITIONAL_TEXT_MAX_WIDTHS = {
 } as const;
 export type TileAdditionalTextMaxWidth = Value<typeof TILE_ADDITIONAL_TEXT_MAX_WIDTHS>;
+export const TILE_COMPACT_LAYOUTS = {
+	DEFAULT: 'default',
+	ICON_RIGHT_HIDDEN: 'iconRightHidden',
+	ICON_LEFT_ONLY: 'iconLeftOnly',
+	ICON_RIGHT_ONLY: 'iconRightOnly',
+} as const;
+export type TileCompactLayout = Value<typeof TILE_COMPACT_LAYOUTS>;

package/lib/js/components/Tile/Tile.sb.shared.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { ICONS } from '../Icons/Icon';
-import { TILE_BORDER_COLORS, TILE_COLORS, TILE_STATES } from './Tile.consts';
+import { TILE_BORDER_COLORS, TILE_COLORS, TILE_COMPACT_LAYOUTS, TILE_STATES } from './Tile.consts';
 import { Args, ArgTypes } from '@storybook/vue3';
 import DsBanner, { BANNER_COLORS } from '../Banner';
@@ -12,13 +12,13 @@ export const template = (componentTag: string) => `
 			:eyebrow-text="eyebrowText"
 			:icon-left="ICONS[iconLeft]"
 			:icon-right="ICONS[iconRight]"
-			:is-icon-right-hidden-on-mobile="isIconRightHiddenOnMobile"
 			:interactive="interactive"
 			:is-eyebrow-text-uppercase="isEyebrowTextUppercase"
 			:state="state"
 			:text-ellipsis="textEllipsis"
 			:text="text"
 			:border-color="borderColor"
+			:compact-layout="compactLayout"
 		/>
 		<ds-banner :color="BANNER_COLORS.WARNING" title="Taka kombinacja koloru komponentu z kolorem bordera jest niezgodna z design systemem!" v-if="borderColor && !allowedColorsToBorderColorsMap[color].includes(borderColor)" />
 </div>
@@ -59,7 +59,6 @@ export const args = {
 	borderColor: null,
 	iconLeft: null,
 	iconRight: null,
-	isIconRightHiddenOnMobile: false,
 	eyebrowText: 'this is an eyebrowText text',
 	eyebrowEllipsis: true,
 	isEyebrowTextUppercase: false,
@@ -67,6 +66,7 @@ export const args = {
 	textEllipsis: true,
 	additionalText: '',
 	state: TILE_STATES.DEFAULT,
+	compactLayout: TILE_COMPACT_LAYOUTS.DEFAULT,
 } as Args;
 export const argTypes = {
@@ -90,4 +90,8 @@ export const argTypes = {
 		control: 'select',
 		options: [...Object.values(TILE_STATES)],
 	},
+	compactLayout: {
+		control: 'select',
+		options: [...Object.values(TILE_COMPACT_LAYOUTS)],
+	},
 } as ArgTypes;

package/lib/js/components/Tile/Tile.shared.ts CHANGED Viewed

@@ -3,10 +3,12 @@ import { ICONS } from '../Icons/Icon';
 import {
 	TILE_ADDITIONAL_TEXT_MAX_WIDTHS,
 	TILE_COLORS,
+	TILE_COMPACT_LAYOUTS,
 	TILE_STATES,
 	TileAdditionalTextMaxWidth,
 	TileBorderColors,
 	TileColor,
+	TileCompactLayout,
 	TileState,
 } from './Tile.consts';
@@ -29,10 +31,6 @@ export const props = {
 			return Object.values(ICONS).includes(toRaw(iconRight));
 		},
 	},
-	isIconRightHiddenOnMobile: {
-		type: Boolean,
-		default: false,
-	},
 	text: {
 		type: String,
 		required: true,
@@ -82,4 +80,11 @@ export const props = {
 			return Object.values(TILE_ADDITIONAL_TEXT_MAX_WIDTHS).includes(value);
 		},
 	},
+	compactLayout: {
+		type: String as PropType<TileCompactLayout>,
+		default: TILE_COMPACT_LAYOUTS.DEFAULT,
+		validator(value: TileCompactLayout) {
+			return Object.values(TILE_COMPACT_LAYOUTS).includes(value);
+		},
+	},
 };

package/lib/js/components/Tile/Tile.vue CHANGED Viewed

@@ -3,6 +3,7 @@
 		:class="[
 			tileColor,
 			tileState,
+			tileCompactLayoutClass,
 			{
 				'-ds-interactive': interactive,
 				[`-ds-border-${borderColor}`]: borderColor !== null,
@@ -38,7 +39,6 @@
 		<ds-icon
 			v-else-if="iconRight"
 			class="ds-tile__iconRight"
-			:class="{ '-ds-hiddenOnMobile': isIconRightHiddenOnMobile }"
 			:icon="iconRight"
 			:size="ICON_SIZES.SMALL"
 		/>
@@ -300,6 +300,8 @@ $tile-colors: (
 	border-radius: $radius-s;
 	display: flex;
 	flex-direction: row;
+	gap: $space-xs;
+	justify-content: center;
 	min-height: 48px;
 	padding: $space-2xs $space-xs;
 	transition: background-color ease-in-out $default-transition-time;
@@ -318,6 +320,40 @@ $tile-colors: (
 		}
 	}
+	&.-ds-iconLeftOnly {
+		#{$self}__center,
+		#{$self}__iconRight {
+			display: none;
+		}
+	}
+	&.-ds-iconRightOnly {
+		#{$self}__center,
+		#{$self}__iconLeft {
+			display: none;
+		}
+	}
+	&.-ds-iconRightHidden {
+		#{$self}__iconRight {
+			display: none;
+		}
+	}
+	&.-ds-iconRightHidden,
+	&.-ds-iconLeftOnly,
+	&.-ds-iconRightOnly {
+		container-type: inline-size;
+		@container (width > 165px) {
+			#{$self}__center,
+			#{$self}__iconRight,
+			#{$self}__iconLeft {
+				display: flex;
+			}
+		}
+	}
 	&__additionalText {
 		@include info-s-default-regular;
@@ -370,68 +406,58 @@ $tile-colors: (
 		}
 	}
-	&__iconLeft {
-		margin-right: $space-xs;
-	}
-	&__iconRight {
-		margin-left: $space-xs;
-		&.-ds-hiddenOnMobile {
-			display: none;
-			@media #{breakpoint-s()} {
-				display: block;
-			}
-		}
-	}
 	&.-ds-interactive:not(.-ds-disabled):not(.-ds-loading) {
 		cursor: pointer;
 	}
 }
 </style>
-<script lang="ts">
+<script setup lang="ts">
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
-import { TILE_ADDITIONAL_TEXT_MAX_WIDTHS, TILE_COLORS, TILE_STATES } from './Tile.consts';
-import { props } from './Tile.shared';
-import { defineComponent } from 'vue';
-export default defineComponent({
-	name: 'Tile',
-	components: {
-		DsIcon,
-	},
-	props,
-	data() {
-		return {
-			ICONS: Object.freeze(ICONS),
-			ICON_SIZES: Object.freeze(ICON_SIZES),
-			TILE_STATES: Object.freeze(TILE_STATES),
-			TILE_ADDITIONAL_TEXT_MAX_WIDTHS: Object.freeze(TILE_ADDITIONAL_TEXT_MAX_WIDTHS),
-		};
-	},
-	computed: {
-		tileColor() {
-			return {
-				[TILE_COLORS.NEUTRAL]: '-ds-neutral',
-				[TILE_COLORS.NEUTRAL_WEAK]: '-ds-neutralWeak',
-				[TILE_COLORS.PRIMARY]: '-ds-primary',
-				[TILE_COLORS.SUCCESS]: '-ds-success',
-				[TILE_COLORS.FAIL]: '-ds-fail',
-				[TILE_COLORS.DANGER]: '-ds-danger',
-				[TILE_COLORS.WARNING]: '-ds-warning',
-				[TILE_COLORS.INFO]: '-ds-info',
-			}[this.color];
-		},
-		tileState() {
-			return {
-				[TILE_STATES.DEFAULT]: null,
-				[TILE_STATES.DISABLED]: '-ds-disabled',
-				[TILE_STATES.LOADING]: '-ds-loading',
-			}[this.state];
-		},
-	},
+import {
+	TILE_ADDITIONAL_TEXT_MAX_WIDTHS,
+	TILE_COLORS,
+	TILE_COMPACT_LAYOUTS,
+	TILE_STATES,
+} from './Tile.consts';
+import { props as TileProps } from './Tile.shared';
+import { computed } from 'vue';
+const props = defineProps(TileProps);
+const tileCompactLayoutClass = computed(() => {
+	switch (props.compactLayout) {
+		case TILE_COMPACT_LAYOUTS.ICON_LEFT_ONLY:
+			return '-ds-iconLeftOnly';
+		case TILE_COMPACT_LAYOUTS.ICON_RIGHT_ONLY:
+			return '-ds-iconRightOnly';
+		case TILE_COMPACT_LAYOUTS.ICON_RIGHT_HIDDEN:
+			return '-ds-iconRightHidden';
+		default:
+			return '';
+	}
 });
+const tileColor = computed(
+	() =>
+		({
+			[TILE_COLORS.NEUTRAL]: '-ds-neutral',
+			[TILE_COLORS.NEUTRAL_WEAK]: '-ds-neutralWeak',
+			[TILE_COLORS.PRIMARY]: '-ds-primary',
+			[TILE_COLORS.SUCCESS]: '-ds-success',
+			[TILE_COLORS.FAIL]: '-ds-fail',
+			[TILE_COLORS.DANGER]: '-ds-danger',
+			[TILE_COLORS.WARNING]: '-ds-warning',
+			[TILE_COLORS.INFO]: '-ds-info',
+		}[props.color]),
+);
+const tileState = computed(
+	() =>
+		({
+			[TILE_STATES.DEFAULT]: null,
+			[TILE_STATES.DISABLED]: '-ds-disabled',
+			[TILE_STATES.LOADING]: '-ds-loading',
+		}[props.state]),
+);
 </script>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "28.1.0",
+  "version": "28.1.2",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",
@@ -100,4 +100,4 @@
     "vee-validate": ">=4.15.0",
     "vue": ">=3.5.0"
   }
-}
+}

package/docs/assets/DatePicker-DN-tNmqU.js DELETED Viewed

@@ -1 +0,0 @@

- import{d as $,j as L,c as l,a as s,g as o,e as P,y as E,k as C,v as p,F as X,l as N,o as a,b as g,Y as J,w as W,f as Q,H as F}from"./vue.esm-bundler-DcRN7CPI.js";import{c as x,T as u,d as ee}from"./Tile-DEjMPKc5.js";import{a as te,b as ae,I}from"./Icon-D3_O-s4-.js";import{_ as Y}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{_ as G}from"./iframe-BIhQskTb.js";const c={NEUTRAL_WEAK:"neutralWeak",NEUTRAL:"neutral",WARNING:"warning",DANGER:"danger"},A={DEFAULT:"default",DISABLED:"disabled",LOADING:"loading"},f={TOP:"top",TOP_LEFT:"top-left",TOP_RIGHT:"top-right",BOTTOM:"bottom",BOTTOM_LEFT:"bottom-left",BOTTOM_RIGHT:"bottom-right"},U={BOX:"box",TILE:"tile"},H={[f.BOTTOM_LEFT]:"below left",[f.BOTTOM_RIGHT]:"below right",[f.BOTTOM]:"below",[f.TOP_LEFT]:"above left",[f.TOP_RIGHT]:"above right",[f.TOP]:"above"};function k(e){return e.toLocaleDateString("pl-PL",{dateStyle:void 0,timeStyle:void 0,weekday:"long"})}function ne(e){return e.toLocaleDateString("pl-PL",{dateStyle:"medium",timeStyle:void 0})}function j(e){return e.toLocaleDateString("pl-PL",{month:"short",day:"2-digit"})}const M=e=>e.charAt(0).toUpperCase()+e.slice(1),Z=$({name:"DateBox",components:{DsIcon:te},props:{isInteractive:{type:Boolean,default:!0},placeholder:{type:String,default:"Ustaw"},startDate:{type:Date,default:null},endDate:{type:Date,default:null},startIcon:{type:Object,default:null,validate:e=>e===null||Object.values(I).includes(L(e))},endIcon:{type:Object,default:null,validate:e=>e===null||Object.values(I).includes(L(e))},areIconsHiddenOnMobile:{type:Boolean,default:!1},state:{type:String||null,default:A.DEFAULT},color:{type:String,default:c.NEUTRAL_WEAK},isOpen:{type:Boolean,default:!1}},data(){return{ICONS:Object.freeze(I),ICON_SIZES:Object.freeze(ae),DATE_PICKER_STATES:Object.freeze(A),DATE_PICKER_COLORS:Object.freeze(c)}},computed:{startDateText(){return this.startDate?j(this.startDate):this.placeholder},endDateIfDifferentThanStartDate(){return this.startDate&&this.endDate&&this.startDate.toDateString()!==this.endDate.toDateString()?this.endDate:null},endDateText(){return j(this.endDateIfDifferentThanStartDate)},startDateEyebrowText(){return this.startDate?M(k(this.startDate)):""},endDateEyebrowText(){return this.endDateIfDifferentThanStartDate?M(k(this.endDateIfDifferentThanStartDate)):""}}}),se={key:0,class:"ds-dateBox__loader"},le={class:"ds-dateBox__dateWrapper"},oe={key:0,class:"ds-dateBox__eyebrow"},ie={class:"ds-dateBox__date"},re={class:"ds-dateBox__dateText"},de={key:0,class:"ds-dateBox__loader"},ue={class:"ds-dateBox__dateWrapper"},ce={key:0,class:"ds-dateBox__eyebrow"},fe={class:"ds-dateBox__date"},De={class:"ds-dateBox__dateText"};function Te(e,D,_,T,m,t){const n=N("ds-icon");return a(),l("div",{class:p(["ds-dateBox",{"-ds-disabled":e.state===e.DATE_PICKER_STATES.DISABLED,"-ds-loading":e.state===e.DATE_PICKER_STATES.LOADING,"-ds-interactive":e.isInteractive,"-ds-warning":e.color===e.DATE_PICKER_COLORS.WARNING,"-ds-neutralWeak":e.DATE_PICKER_COLORS.NEUTRAL_WEAK===e.color,"-ds-neutral":e.DATE_PICKER_COLORS.NEUTRAL===e.color,"-ds-danger":e.color===e.DATE_PICKER_COLORS.DANGER,"-ds-isOpen":e.isOpen}])},[s("div",{class:p(["ds-dateBox__widthWrapper",{"-ds-has-icon":e.startIcon,"-ds-iconHiddenOnMobile":e.areIconsHiddenOnMobile}])},[e.state===e.DATE_PICKER_STATES.LOADING?(a(),l("div",se,[P(n,{icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.X_SMALL,spinning:""},null,8,["icon","size"])])):o("",!0),s("div",le,[e.startDateEyebrowText?(a(),l("span",oe,E(e.startDateEyebrowText),1)):o("",!0),s("div",ie,[e.startIcon?(a(),C(n,{key:0,class:p(["ds-dateBox__icon",{"-ds-hiddenOnMobile":e.areIconsHiddenOnMobile}]),icon:e.startIcon,size:e.ICON_SIZES.XX_SMALL},null,8,["class","icon","size"])):o("",!0),s("span",re,E(e.startDateText),1)])])],2),e.startDate&&e.endDateIfDifferentThanStartDate?(a(),l(X,{key:0},[D[0]||(D[0]=s("span",{class:"ds-dateBox__separator"},"–",-1)),s("div",{class:p(["ds-dateBox__widthWrapper -ds-justify-to-end",{"-ds-has-icon":e.endIcon,"-ds-iconHiddenOnMobile":e.areIconsHiddenOnMobile}])},[e.state===e.DATE_PICKER_STATES.LOADING?(a(),l("div",de,[P(n,{icon:e.ICONS.FAD_SPINNER_THIRD,size:e.ICON_SIZES.X_SMALL,spinning:""},null,8,["icon","size"])])):o("",!0),s("div",ue,[e.endDateEyebrowText?(a(),l("span",ce,E(e.endDateEyebrowText),1)):o("",!0),s("div",fe,[e.endIcon?(a(),C(n,{key:0,class:p(["ds-dateBox__icon",{"-ds-hiddenOnMobile":e.areIconsHiddenOnMobile}]),icon:e.endIcon,size:e.ICON_SIZES.XX_SMALL},null,8,["class","icon","size"])):o("",!0),s("span",De,E(e.endDateText),1)])])],2)],64)):o("",!0)],2)}const pe=Y(Z,[["render",Te],["__scopeId","data-v-0e144c0e"]]);Z.__docgenInfo={displayName:"DateBox",exportName:"default",description:"",tags:{},props:[{name:"isInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"placeholder",type:{name:"string"},defaultValue:{func:!1,value:"'Ustaw'"}},{name:"startDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"endDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"startIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"endIcon",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"areIconsHiddenOnMobile",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"state",type:{name:"(String as PropType<DatePickerStates>) || null"},defaultValue:{func:!1,value:"DATE_PICKER_STATES.DEFAULT"}},{name:"color",type:{name:"DatePickerColors"},defaultValue:{func:!1,value:"DATE_PICKER_COLORS.NEUTRAL_WEAK"}},{name:"isOpen",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DateBox/DateBox.vue"]};let v=null,z;function Ee({props:e,onChange:D,onClose:_,defaultDates:T,mode:m="single"}){let t=null;const n=g(!1),r=d=>{t==null||t.setDate(d,!1),t==null||t.updateValue(!1),t==null||t.jumpToDate(Array.isArray(d)?d[0]:d,!1)},R=async(d,h,S)=>{var B,w,K,V;if(!t){if(!v)try{v=(await G(async()=>{const{default:i}=await import("./index-CBmJdl9t.js");return{default:i}},[],import.meta.url)).default,z=(await G(async()=>{const{Polish:i}=await import("./pl-1OaNPZt2.js").then(b=>b.p);return{Polish:i}},[],import.meta.url)).Polish}catch(i){console.error("Failed to load flatpickr",i);return}if(t=v(d,{mode:m,locale:z,disableMobile:!0,positionElement:h,ignoredFocusElements:[h],position:H[e.calendarPosition],defaultDate:T,disable:e.disableDates,minDate:e.minDate,maxDate:e.maxDate,onClose:[()=>{n.value=!1,setTimeout(()=>{_()})}],onOpen:[()=>{n.value=!0}],onChange:D}),S){const i=document.querySelector(S),b=()=>{t==null||t._positionCalendar()};i&&((w=(B=t==null?void 0:t.config)==null?void 0:B.onOpen)==null||w.push(()=>{i.addEventListener("scroll",b,{passive:!0})}),(V=(K=t==null?void 0:t.config)==null?void 0:K.onClose)==null||V.push(()=>{i.removeEventListener("scroll",b)}))}return t}},y=()=>{t==null||t.destroy(),t=null};J(()=>{y()}),W([()=>e.calendarPosition,()=>e.minDate,()=>e.maxDate,()=>e.disableDates,()=>T],()=>{t==null||t.set({position:H[e.calendarPosition],defaultDate:T,disable:e.disableDates,minDate:e.minDate,maxDate:e.maxDate})},{flush:"post"}),W([()=>e.date,()=>e.startDate,()=>e.endDate],()=>{O()},{flush:"post"});const O=()=>{e.date?r(e.date):e.startDate&&e.endDate?r([e.startDate,e.endDate]):e.startDate&&!e.endDate?r(e.startDate):!e.startDate&&e.endDate?r(e.endDate):t==null||t.clear(!1)};return{datePicker:t,createDatePicker:R,destroyDatePicker:y,updateDatePicker:O,isOpen:n,toggle:()=>{t==null||t.toggle()}}}const q=$({name:"DatePicker",components:{DsTile:x,DateBox:pe},props:{triggerType:{type:String,default:U.TILE},isInteractive:{type:Boolean,default:!0},placeholder:{type:String,default:"Wybierz datę"},date:{type:Date,default:null},additionalText:{type:String,default:""},helpMessage:{type:String,default:null},label:{type:String,default:""},isLabelUppercase:{type:Boolean,default:!1},icon:{type:[Object,null],default:I.FA_CALENDAR_DAYS,validator(e){return e===null||Object.values(I).includes(L(e))}},isIconHiddenOnMobile:{type:Boolean,default:!1},errorMessage:{type:String,default:null},state:{type:String,default:A.DEFAULT},color:{type:String,default:c.NEUTRAL_WEAK},calendarPosition:{type:String,default:f.BOTTOM_LEFT},disableDates:{type:Array,default:()=>[]},minDate:{type:Date,default:null},maxDate:{type:Date,default:null},updatePositionBasedOnScrollableSelector:{type:String,default:""}},emits:{"update:date":e=>!0},setup(e,{emit:D}){var h;const _=g(null),T=g(),m=g(),t=S=>{D("update:date",S[0])},n=()=>{O(),_.value=null},{isOpen:r,toggle:R,createDatePicker:y,destroyDatePicker:O,updateDatePicker:d}=Ee({props:e,onChange:t,onClose:n,defaultDates:(h=e.date)!=null?h:new Date,mode:"single"});return{flatpickrInstance:_,flatpickrInputRef:T,datePickerRef:m,isOpen:r,toggleDatePicker:R,updateDatePicker:d,createDatePicker:y,DATE_PICKER_CALENDAR_POSITIONS:Object.freeze(f),DATE_PICKER_COLORS:Object.freeze(c),DATE_PICKER_STATES:Object.freeze(A),DATE_PICKER_TRIGGER_TYPES:Object.freeze(U),TILE_ADDITIONAL_TEXT_MAX_WIDTHS:Object.freeze(ee)}},computed:{borderColor(){return{[c.NEUTRAL]:this.isInteractive?u.PRIMARY:u.NEUTRAL_WEAK,[c.NEUTRAL_WEAK]:this.isInteractive?u.PRIMARY:u.NEUTRAL_WEAK,[c.DANGER]:this.isInteractive?u.DANGER:u.DANGER_WEAK,[c.WARNING]:this.isInteractive?u.WARNING:u.WARNING_WEAK}[this.color]},eyebrowText(){return this.date?M(k(this.date)):""},text(){return this.date?ne(this.date):this.placeholder},tileIcon(){return this.additionalText||!this.icon?null:this.isOpen?I.FA_CHEVRON_UP:this.icon},showErrorMessage(){return this.errorMessage!==null},showHelpMessage(){return this.helpMessage!==null},tileState(){return this.state},tileColor(){return this.color}},methods:{async bindFlatpickrInstance(){this.flatpickrInstance=await this.createDatePicker(this.flatpickrInputRef,this.datePickerRef,this.updatePositionBasedOnScrollableSelector),this.updateDatePicker()},async toggle(){this.isInteractive&&this.state===A.DEFAULT&&(this.flatpickrInstance||await this.bindFlatpickrInstance(),this.toggleDatePicker())}}}),_e={class:"ds-datePicker__labelWrapper"},Ie={key:2,class:"ds-datePicker__errorMessage"},me={key:3,class:"ds-datePicker__helpMessage"},he={ref:"flatpickrInputRef",class:"ds-datePicker__hiddenInput"};function Ae(e,D,_,T,m,t){const n=N("ds-tile"),r=N("date-box");return a(),l("div",{ref:"datePickerRef",class:p(["ds-datePicker",{"-ds-box":e.triggerType===e.DATE_PICKER_TRIGGER_TYPES.BOX}])},[e.triggerType===e.DATE_PICKER_TRIGGER_TYPES.TILE?(a(),l(X,{key:0},[s("div",_e,[e.label?(a(),l("span",{key:0,class:p(["ds-datePicker__label",{"-ds-isUppercase":e.isLabelUppercase,"-ds-disabled":e.state===e.DATE_PICKER_STATES.DISABLED}])},E(e.label),3)):o("",!0),e.$slots.default?Q(e.$slots,"default",{key:1},void 0,!0):o("",!0)]),P(n,{class:"ds-datePicker__tile",text:e.text,interactive:e.isInteractive,"additional-text":e.additionalText,color:e.tileColor,"border-color":e.borderColor,state:e.tileState,"icon-right":e.tileIcon,"is-icon-right-hidden-on-mobile":e.isIconHiddenOnMobile,"eyebrow-text":e.eyebrowText,"additional-text-max-width":e.TILE_ADDITIONAL_TEXT_MAX_WIDTHS.MEDIUM,"has-border":"",onClick:F(e.toggle,["stop","prevent"])},null,8,["text","interactive","additional-text","color","border-color","state","icon-right","is-icon-right-hidden-on-mobile","eyebrow-text","additional-text-max-width","onClick"])],64)):(a(),C(r,{key:1,"is-interactive":e.isInteractive,placeholder:e.placeholder,"start-date":e.date,"start-icon":e.icon,"are-icons-hidden-on-mobile":e.isIconHiddenOnMobile,state:e.state,color:e.color,"is-open":e.isOpen,onClick:F(e.toggle,["stop","prevent"])},null,8,["is-interactive","placeholder","start-date","start-icon","are-icons-hidden-on-mobile","state","color","is-open","onClick"])),e.showErrorMessage?(a(),l("span",Ie,E(e.errorMessage),1)):e.showHelpMessage?(a(),l("span",me,E(e.helpMessage),1)):o("",!0),s("input",he,null,512)],2)}const Re=Y(q,[["render",Ae],["__scopeId","data-v-337a8b07"]]);q.__docgenInfo={displayName:"DatePicker",exportName:"default",description:"",tags:{},props:[{name:"triggerType",type:{name:"DatePickerTriggerTypes"},defaultValue:{func:!1,value:"DATE_PICKER_TRIGGER_TYPES.TILE"}},{name:"isInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"placeholder",type:{name:"string"},defaultValue:{func:!1,value:"'Wybierz datę'"}},{name:"date",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"additionalText",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"helpMessage",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"label",type:{name:"string"},defaultValue:{func:!1,value:"''"}},{name:"isLabelUppercase",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"icon",type:{name:"IconItem | null"},defaultValue:{func:!1,value:"ICONS.FA_CALENDAR_DAYS"}},{name:"isIconHiddenOnMobile",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"errorMessage",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"state",type:{name:"DatePickerStates"},defaultValue:{func:!1,value:"DATE_PICKER_STATES.DEFAULT"}},{name:"color",type:{name:"DatePickerColors"},defaultValue:{func:!1,value:"DATE_PICKER_COLORS.NEUTRAL_WEAK"}},{name:"calendarPosition",type:{name:"DatePickerCalendarPositions"},defaultValue:{func:!1,value:"DATE_PICKER_CALENDAR_POSITIONS.BOTTOM_LEFT"}},{name:"disableDates",type:{name:"Array<Date>"},defaultValue:{func:!0,value:"() => []"}},{name:"minDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"maxDate",type:{name:"date"},defaultValue:{func:!1,value:"null"}},{name:"updatePositionBasedOnScrollableSelector",type:{name:"string"},defaultValue:{func:!1,value:"''"}}],events:[{name:"update:date"}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/DatePickers/DatePicker/DatePicker.vue"]};export{pe as D,A as a,c as b,Re as c,f as d,U as e,Ee as i};

package/docs/assets/DrawerHeader-6wWrTFMU.css DELETED Viewed

@@ -1 +0,0 @@

- .ds-drawerHeader[data-v-5b63b67e]{display:flex;flex-direction:column}.ds-drawerHeader__secondLevel[data-v-5b63b67e]{position:absolute!important}.ds-drawerHeader__leftIcon[data-v-5b63b67e]{color:var(--color-neutral-icon)}.ds-drawerHeader__firstLevel[data-v-5b63b67e]{display:flex;flex-direction:column;min-width:0;row-gap:4px}.ds-drawerHeader__firstLevel.-ds-hidden[data-v-5b63b67e]{visibility:hidden}.ds-drawerHeader__eyebrow[data-v-5b63b67e]{--token: info-s-extensive-bold-uppercase;font-weight:var(--typography-font-weight-bold);font-style:var(--typography-font-style-normal);line-height:var(--typography-line-height-4xs);font-size:var(--typography-font-size-2xs);letter-spacing:var(--typography-letter-spacing-xl);text-decoration:var(--typography-text-decoration-none);text-transform:var(--typography-text-transform-uppercase);color:var(--color-neutral-text-weak)}.ds-drawerHeader__eyebrow.-ds-isInteractive[data-v-5b63b67e]:hover{color:var(--color-neutral-text-weak-hovered);cursor:pointer}.ds-drawerHeader__eyebrow.-ds-ellipsis[data-v-5b63b67e]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-drawerHeader__title[data-v-5b63b67e]{align-items:center;column-gap:6px;display:flex}.ds-drawerHeader__titleText[data-v-5b63b67e]{--token: heading-s-default-bold-uppercase;font-weight:var(--typography-font-weight-bold);font-style:var(--typography-font-style-normal);line-height:var(--typography-line-height-xs);font-size:var(--typography-font-size-s);letter-spacing:var(--typography-letter-spacing-l);text-decoration:var(--typography-text-decoration-none);text-transform:var(--typography-text-transform-uppercase)}.ds-drawerHeader__titleText.-ds-neutralStrong[data-v-5b63b67e]{color:var(--color-neutral-text-strong)}.ds-drawerHeader__titleText.-ds-neutralWeak[data-v-5b63b67e]{color:var(--color-neutral-text-weak)}.ds-drawerHeader__titleText.-ds-ellipsis[data-v-5b63b67e]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ds-drawerHeader__titleWrapper[data-v-5b63b67e]{align-items:center;column-gap:4px;display:flex;justify-content:space-between;min-height:82px;padding:24px 12px 24px 16px}.ds-drawerHeader__actions[data-v-5b63b67e]{margin-left:auto}

package/docs/assets/DrawerHeader-CRcLTxbC.js DELETED Viewed

@@ -1 +0,0 @@

- import{d as b,c as s,a as i,k as n,g as l,h as _,v as r,y as u,f,l as o,o as a,B as v}from"./vue.esm-bundler-DcRN7CPI.js";import{_ as S,d as C}from"./Button-Cvj_OfTr.js";import{D as T,b as N,a as D}from"./Divider-NOTDPuJ1.js";import{I as O,c as w}from"./IconButton-BN-L0wvM.js";import{C as k}from"./Chip-D9pOGYtq.js";import{a as R,b as L,I as V}from"./Icon-D3_O-s4-.js";import{_ as B}from"./_plugin-vue_export-helper-DlAUqK2U.js";const H={NEUTRAL_STRONG:"neutralStrong",NEUTRAL_WEAK:"neutralWeak"},p=b({name:"DrawerHeader",components:{DsButton:S,Divider:T,Icon:R,IconButton:O,Chip:k},props:{eyebrowText:{type:String,default:null},isInteractiveEyebrow:{type:Boolean,default:!1},eyebrowEllipsis:{type:Boolean,default:!1},title:{type:String,default:null},titleEllipsis:{type:Boolean,default:!1},titleColor:{type:String,default:H.NEUTRAL_STRONG},leftIcon:{type:[Object,null],default:null},chipLabel:{type:String,default:null},isClosable:{type:Boolean,default:!0},hasDivider:{type:Boolean,default:!1},isSecondLevel:{type:Boolean,default:!1}},emits:["backClicked","close","eyebrowClicked"],data(){return{BUTTON_TYPES:Object.freeze(C),DIVIDER_SIZES:Object.freeze(D),DIVIDER_PROMINENCES:Object.freeze(N),ICONS:Object.freeze(V),ICON_BUTTON_SIZES:Object.freeze(w),ICON_SIZES:Object.freeze(L)}}}),g={class:"ds-drawerHeader"},$={class:"ds-drawerHeader__titleWrapper"},h={class:"ds-drawerHeader__title"},A=["title"],z={key:3},U={key:1,class:"ds-drawerHeader__actions"};function j(e,t,Z,M,W,P){const c=o("ds-button"),m=o("icon"),E=o("chip"),y=o("icon-button"),I=o("divider");return a(),s("div",g,[i("div",$,[e.isSecondLevel?(a(),n(c,{key:0,"icon-left":e.ICONS.FA_CHEVRON_LEFT,type:e.BUTTON_TYPES.TEXT,class:"ds-drawerHeader__secondLevel",onClick:t[0]||(t[0]=d=>e.$emit("backClicked"))},{default:_(()=>t[3]||(t[3]=[v(" Wróć ")])),_:1,__:[3]},8,["icon-left","type"])):l("",!0),i("div",{class:r([{"-ds-hidden":e.isSecondLevel},"ds-drawerHeader__firstLevel"])},[e.eyebrowText?(a(),s("span",{key:0,class:r([{"-ds-isInteractive":e.isInteractiveEyebrow,"-ds-ellipsis":e.eyebrowEllipsis},"ds-drawerHeader__eyebrow"]),onClick:t[1]||(t[1]=d=>e.isInteractiveEyebrow&&e.$emit("eyebrowClicked"))},u(e.eyebrowText),3)):l("",!0),i("div",h,[e.leftIcon?(a(),n(m,{key:0,icon:e.leftIcon,size:e.ICON_SIZES.X_SMALL,class:"ds-drawerHeader__leftIcon"},null,8,["icon","size"])):l("",!0),e.title?(a(),s("span",{key:1,class:r(["ds-drawerHeader__titleText",{"-ds-ellipsis":e.titleEllipsis,[`-ds-${e.titleColor}`]:!0}]),title:e.titleEllipsis?e.title:void 0},u(e.title),11,A)):l("",!0),e.chipLabel?(a(),n(E,{key:2,label:e.chipLabel},null,8,["label"])):l("",!0),e.$slots.titleTrailing?(a(),s("div",z,[f(e.$slots,"titleTrailing",{},void 0,!0)])):l("",!0)])],2),e.$slots.actions?(a(),s("div",U,[f(e.$slots,"actions",{},void 0,!0)])):l("",!0),e.isClosable?(a(),n(y,{key:2,icon:e.ICONS.FA_XMARK,size:e.ICON_BUTTON_SIZES.MEDIUM,touchable:!1,onClick:t[2]||(t[2]=d=>e.$emit("close"))},null,8,["icon","size"])):l("",!0)]),e.hasDivider?(a(),n(I,{key:0,size:e.DIVIDER_SIZES.L,prominence:e.DIVIDER_PROMINENCES.WEAK},null,8,["size","prominence"])):l("",!0)])}const Q=B(p,[["render",j],["__scopeId","data-v-5b63b67e"]]);p.__docgenInfo={displayName:"DrawerHeader",exportName:"default",description:"",tags:{},props:[{name:"eyebrowText",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"isInteractiveEyebrow",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"eyebrowEllipsis",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"title",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"titleEllipsis",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"titleColor",type:{name:"DrawerHeaderTitleColor"},defaultValue:{func:!1,value:"DRAWER_HEADER_TITLE_COLORS.NEUTRAL_STRONG"}},{name:"leftIcon",type:{name:"object|null"},defaultValue:{func:!1,value:"null"}},{name:"chipLabel",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"isClosable",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"hasDivider",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isSecondLevel",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],events:[{name:"backClicked"},{name:"eyebrowClicked"},{name:"close"}],slots:[{name:"titleTrailing"},{name:"actions"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue"]};export{Q as D,H as a};