@bethinkpl/design-system 26.14.3 → 26.14.5

package/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue

@@ -239,7 +239,12 @@ import SurveyToggle, {
 	SURVEY_TOGGLE_STATES,
 	SURVEY_TOGGLE_STATUSES,
 } from '../../SurveyToggle';
-import { SURVEY_QUESTION_SCALE_CONTAINERS, SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
+import {
+	SURVEY_QUESTION_SCALE_CONTAINERS,
+	SURVEY_QUESTION_STATES,
+	SurveyQuestionScaleContainer,
+	SurveyQuestionState,
+} from '../SurveyQuestion.consts';
 import SurveyQuestionTextarea from '../';
 import { SurveyQuestionScaleOption } from '../SurveyQuestion.domain';
 import { randomString } from '../../../utils/string';
@@ -263,14 +268,14 @@ export default defineComponent({
 		state: {
 			type: String,
 			default: SURVEY_QUESTION_STATES.DEFAULT,
-			validator(state) {
+			validator(state: SurveyQuestionState) {
 				return Object.values(SURVEY_QUESTION_STATES).includes(state);
 			},
 		},
 		scaleOptions: {
 			type: Array as () => Array<SurveyQuestionScaleOption>,
 			required: true,
-			validator(scaleOptions) {
+			validator(scaleOptions: Array<SurveyQuestionScaleOption>) {
 				return scaleOptions.every((option) => typeof option === 'object');
 			},
 		},
@@ -293,7 +298,7 @@ export default defineComponent({
 		containers: {
 			type: String,
 			default: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
-			validator(containers) {
+			validator(containers: SurveyQuestionScaleContainer) {
 				return Object.values(SURVEY_QUESTION_SCALE_CONTAINERS).includes(containers);
 			},
 		},

package/lib/js/components/SurveyToggle/SurveyToggle.consts.ts

@@ -1,15 +1,23 @@
+import { Value } from '../../utils/type.utils';
+
 export const SURVEY_TOGGLE_MEANINGS = {
 	PRIMARY: 'primary',
 	NEUTRAL: 'neutral',
 } as const;
 
+export type SurveyToggleMeaning = Value<typeof SURVEY_TOGGLE_MEANINGS>;
+
 export const SURVEY_TOGGLE_STATUSES = {
 	DEFAULT: 'default',
 	SELECTED: 'selected',
 } as const;
 
+export type SurveyToggleStatus = Value<typeof SURVEY_TOGGLE_STATUSES>;
+
 export const SURVEY_TOGGLE_STATES = {
 	DEFAULT: 'default',
 	HOVERED: 'hovered',
 	DISABLED: 'disabled',
 } as const;
+
+export type SurveyToggleState = Value<typeof SURVEY_TOGGLE_STATES>;

package/lib/js/components/SurveyToggle/SurveyToggle.vue

@@ -221,6 +221,9 @@ import {
 	SURVEY_TOGGLE_MEANINGS,
 	SURVEY_TOGGLE_STATES,
 	SURVEY_TOGGLE_STATUSES,
+	SurveyToggleMeaning,
+	SurveyToggleState,
+	SurveyToggleStatus,
 } from './SurveyToggle.consts';
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 
@@ -233,31 +236,31 @@ export default defineComponent({
 	},
 	props: {
 		label: {
-			type: String,
+			type: [String, null],
 			default: null,
 		},
 		contentText: {
-			type: String,
+			type: [String, null],
 			default: null,
 		},
 		meaning: {
-			type: String,
+			type: [String, null],
 			default: SURVEY_TOGGLE_MEANINGS.PRIMARY,
-			validator(meaning) {
+			validator(meaning: SurveyToggleMeaning) {
 				return Object.values(SURVEY_TOGGLE_MEANINGS).includes(meaning);
 			},
 		},
 		status: {
 			type: String,
 			default: SURVEY_TOGGLE_STATUSES.DEFAULT,
-			validator(status) {
+			validator(status: SurveyToggleStatus) {
 				return Object.values(SURVEY_TOGGLE_STATUSES).includes(status);
 			},
 		},
 		state: {
 			type: String,
 			default: SURVEY_TOGGLE_STATES.DEFAULT,
-			validator(state) {
+			validator(state: SurveyToggleState) {
 				return Object.values(SURVEY_TOGGLE_STATES).includes(state);
 			},
 		},

package/lib/js/components/TabItem/TabItem.vue

@@ -116,7 +116,7 @@ export default defineComponent({
 			required: true,
 		},
 		label: {
-			type: [String, null],
+			type: String,
 			default: null,
 		},
 		labelEllipsis: {

package/lib/js/components/TextGroup/TextGroup.vue

@@ -350,7 +350,7 @@ export default defineComponent({
 			default: true,
 		},
 		supportingTextTooltipContent: {
-			type: [String, null],
+			type: String,
 			default: null,
 		},
 	},

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

@@ -11,7 +11,7 @@ export const TILE_COLORS = {
 	INFO: 'info',
 } as const;
 
-export type TileColors = Value<typeof TILE_COLORS>;
+export type TileColor = Value<typeof TILE_COLORS>;
 
 export const TILE_STATES = {
 	DEFAULT: 'default',
@@ -19,7 +19,7 @@ export const TILE_STATES = {
 	LOADING: 'loading',
 } as const;
 
-export type TileStates = Value<typeof TILE_STATES>;
+export type TileState = Value<typeof TILE_STATES>;
 
 export const TILE_BORDER_COLORS = {
 	NEUTRAL: 'neutral',
@@ -45,4 +45,4 @@ export const TILE_ADDITIONAL_TEXT_MAX_WIDTHS = {
 	MEDIUM: 'medium',
 } as const;
 
-export type TileAdditionalTextMaxWidths = Value<typeof TILE_ADDITIONAL_TEXT_MAX_WIDTHS>;
+export type TileAdditionalTextMaxWidth = Value<typeof TILE_ADDITIONAL_TEXT_MAX_WIDTHS>;

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

@@ -4,12 +4,11 @@ import {
 	TILE_ADDITIONAL_TEXT_MAX_WIDTHS,
 	TILE_COLORS,
 	TILE_STATES,
-	TileAdditionalTextMaxWidths,
+	TileAdditionalTextMaxWidth,
 	TileBorderColors,
-	TileColors,
-	TileStates,
+	TileColor,
+	TileState,
 } from './Tile.consts';
-import { Value } from '../../utils/type.utils';
 
 export const props = {
 	interactive: {
@@ -47,9 +46,9 @@ export const props = {
 		default: null,
 	},
 	color: {
-		type: String as PropType<TileColors>,
+		type: String as PropType<TileColor>,
 		default: TILE_COLORS.NEUTRAL,
-		validator(color) {
+		validator(color: TileColor) {
 			return Object.values(TILE_COLORS).includes(color);
 		},
 	},
@@ -58,9 +57,9 @@ export const props = {
 		default: false,
 	},
 	state: {
-		type: String as PropType<TileStates>,
+		type: String as PropType<TileState>,
 		default: TILE_STATES.DEFAULT,
-		validator(value: Value<typeof TILE_STATES>) {
+		validator(value: TileState) {
 			return Object.values(TILE_STATES).includes(value);
 		},
 	},
@@ -77,9 +76,9 @@ export const props = {
 		default: null,
 	},
 	additionalTextMaxWidth: {
-		type: String as PropType<TileAdditionalTextMaxWidths>,
+		type: String as PropType<TileAdditionalTextMaxWidth>,
 		default: TILE_ADDITIONAL_TEXT_MAX_WIDTHS.SMALL,
-		validator(value: TileAdditionalTextMaxWidths) {
+		validator(value: TileAdditionalTextMaxWidth) {
 			return Object.values(TILE_ADDITIONAL_TEXT_MAX_WIDTHS).includes(value);
 		},
 	},

package/lib/js/components/Toggles/CounterToggle/CounterToggle.consts.ts

@@ -1,6 +1,10 @@
+import { Value } from '../../../utils/type.utils';
+
 export const COUNTER_TOGGLE_COLORS = {
 	INVERTED: 'inverted',
 	NEUTRAL_STRONG: 'neutralStrong',
 	NEUTRAL: 'neutral',
 	PRIMARY: 'primary',
-};
+} as const;
+
+export type CounterToggleColor = Value<typeof COUNTER_TOGGLE_COLORS>;

package/lib/js/components/Toggles/CounterToggle/CounterToggle.vue

@@ -251,7 +251,7 @@ $counter-toggle-colors: (
 </style>
 
 <script lang="ts">
-import { COUNTER_TOGGLE_COLORS } from './CounterToggle.consts';
+import { COUNTER_TOGGLE_COLORS, CounterToggleColor } from './CounterToggle.consts';
 import Icon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
 import { defineComponent, toRaw } from 'vue';
 
@@ -268,7 +268,7 @@ export default defineComponent({
 		color: {
 			type: String,
 			default: COUNTER_TOGGLE_COLORS.NEUTRAL_STRONG,
-			validator(color) {
+			validator(color: CounterToggleColor) {
 				return Object.values(COUNTER_TOGGLE_COLORS).includes(color);
 			},
 		},

package/lib/js/components/Toggles/ToggleButton/ToggleButton.vue

@@ -410,7 +410,6 @@ $toggle-button-colors: (
 </style>
 
 <script lang="ts">
-import { Value } from '../../../utils/type.utils';
 import { defineComponent, PropType, toRaw } from 'vue';
 
 import {
@@ -437,7 +436,7 @@ export default defineComponent({
 		color: {
 			type: String as PropType<ToggleButtonColor>,
 			default: TOGGLE_BUTTON_COLORS.NEUTRAL,
-			validator(value: Value<typeof TOGGLE_BUTTON_COLORS>) {
+			validator(value: ToggleButtonColor) {
 				return Object.values(TOGGLE_BUTTON_COLORS).includes(value);
 			},
 		},
@@ -482,21 +481,21 @@ export default defineComponent({
 		radius: {
 			type: String as PropType<ToggleButtonRadius>,
 			default: TOGGLE_BUTTON_RADIUSES.CAPSULE,
-			validator(value: Value<typeof TOGGLE_BUTTON_RADIUSES>) {
+			validator(value: ToggleButtonRadius) {
 				return Object.values(TOGGLE_BUTTON_RADIUSES).includes(value);
 			},
 		},
 		size: {
 			type: String as PropType<ToggleButtonSize>,
 			default: TOGGLE_BUTTON_SIZES.MEDIUM,
-			validator(value: Value<typeof TOGGLE_BUTTON_SIZES>) {
+			validator(value: ToggleButtonSize) {
 				return Object.values(TOGGLE_BUTTON_SIZES).includes(value);
 			},
 		},
 		state: {
 			type: String as PropType<ToggleButtonState>,
 			default: TOGGLE_BUTTON_STATES.DEFAULT,
-			validator(value: Value<typeof TOGGLE_BUTTON_STATES>) {
+			validator(value: ToggleButtonState) {
 				return Object.values(TOGGLE_BUTTON_STATES).includes(value);
 			},
 		},

package/lib/js/components/Well/Well.consts.ts

@@ -1,4 +1,8 @@
+import { Value } from '../../utils/type.utils';
+
 export const WELL_PADDINGS = {
 	SMALL: 'small',
 	MEDIUM: 'medium',
 };
+
+export type WellPadding = Value<typeof WELL_PADDINGS>;

package/lib/js/components/Well/Well.stories.ts

@@ -4,18 +4,39 @@ import { Args, ArgTypes, Meta, StoryObj } from '@storybook/vue3';
 import Well from './Well.vue';
 import { WELL_PADDINGS } from './Well.consts';
 import type { ComponentProps } from 'vue-component-type-helpers';
+import { ICONS } from '../Icons/Icon';
+import { CHIP_COLORS, CHIP_DEFAULT_COLOR, CHIP_RADIUSES } from '../Chip';
+import DsBanner, { BANNER_COLORS } from '../Banner';
 
 type WellProps = ComponentProps<typeof Well>;
 
+function wrapWithContainer(template: string): string {
+	// line-height: 0; is to remove extra space below the badge (as it's an inline element)
+	return `<div style="display: inline-flex; flex-direction: column; width: 100%; gap: 20px;">${template}
+<ds-banner :color="BANNER_COLORS.WARNING" title="Taka kombinacja jest niezgodna z design systemem!" v-if="invalidUsage" /></div>
+`;
+}
+
 const meta: Meta<WellProps> = {
 	title: 'Components/Well',
 	component: Well,
 	render: (args) => ({
-		components: { Well },
+		components: { Well, DsBanner },
 		setup() {
-			return { args };
+			return {
+				args,
+				ICONS,
+				BANNER_COLORS,
+			};
+		},
+		template: wrapWithContainer(
+			'<well v-bind="args" :chip-left-icon="ICONS[args.chipLeftIcon]"><div v-html="args.content" /></well>',
+		),
+		computed: {
+			invalidUsage() {
+				return args.hasChip && !args.padding;
+			},
 		},
-		template: '<well v-bind="args"><div v-html="args.content" /></well>',
 	}),
 	argTypes: {
 		padding: {
@@ -29,7 +50,7 @@ const meta: Meta<WellProps> = {
 	parameters: {
 		design: {
 			type: 'figma',
-			url: 'https://www.figma.com/file/oqNhXXGdc4ZnNQ6YNpkLEK/INI-152-Baza-v3---planowanie?node-id=1807-518161&t=sQ5nflpPY2YcPKNc-4',
+			url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=13194-76861&p=f&m=dev',
 		},
 	},
 };
@@ -43,5 +64,29 @@ export const Interactive: Story = {
 		content:
 			'<h3 style="margin-top: 0">Content</h3>' +
 			'Voluptatem saepe suscipit optio et delectus esse sed velit. Autem maxime soluta aliquam perspiciatis quidem dolor saepe rerum.',
+		hasChip: false,
+		chipLabel: 'Chip z labelem',
+		chipLabelUppercase: false,
+		chipLeftIcon: null,
+		chipRadius: CHIP_RADIUSES.ROUNDED,
+		color: CHIP_DEFAULT_COLOR,
+		colorHex: '',
 	} as Args,
 };
+
+const argTypes = {
+	chipLeftIcon: {
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
+	},
+	chipColor: {
+		control: 'select',
+		options: Object.values(CHIP_COLORS),
+	},
+	chipRadius: {
+		control: 'select',
+		options: Object.values(CHIP_RADIUSES),
+	},
+} as ArgTypes;
+
+Interactive.argTypes = argTypes;

package/lib/js/components/Well/Well.vue

@@ -6,6 +6,21 @@
 			'-ds-small': WELL_PADDINGS.SMALL === padding,
 		}"
 	>
+		<div v-if="hasChip" class="ds-well__chipContainer">
+			<chip
+				:label="chipLabel"
+				:is-label-uppercase="chipLabelUppercase"
+				:left-icon="chipLeftIcon"
+				:radius="chipRadius"
+				:color="chipColor"
+				:color-hex="chipColorHex"
+			>
+				<template v-if="$slots.chipAccessory" #accessory>
+					<slot name="chipAccessory" />
+				</template>
+			</chip>
+		</div>
+
 		<slot />
 	</div>
 </template>
@@ -16,39 +31,59 @@
 @import '../../../styles/settings/colors/tokens';
 
 .ds-well {
+	$root: &;
+
 	background-color: $color-neutral-background;
 	border-radius: $radius-m;
+	position: relative;
+
+	&__chipContainer {
+		display: flex;
+		position: absolute;
+		right: 0;
+		top: -10px;
+	}
 
 	&.-ds-medium {
 		padding: $space-s;
+
+		#{$root}__chipContainer {
+			right: $space-s;
+		}
 	}
 
 	&.-ds-small {
 		padding: $space-xs;
+
+		#{$root}__chipContainer {
+			right: $space-xs;
+		}
 	}
 }
 </style>
 
-<script>
-import { WELL_PADDINGS } from './Well.consts';
-
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-	name: 'Well',
-	props: {
-		padding: {
-			type: String,
-			default: null,
-			validator(padding) {
-				return Object.values(WELL_PADDINGS).includes(padding);
-			},
-		},
-	},
-	data() {
-		return {
-			WELL_PADDINGS: Object.freeze(WELL_PADDINGS),
-		};
-	},
-});
+<script lang="ts" setup>
+import { WELL_PADDINGS, WellPadding } from './Well.consts';
+import Chip, { CHIP_DEFAULT_COLOR, CHIP_RADIUSES, ChipRadius, ChipColor } from '../Chip';
+import { IconItem } from '../Icons/Icon';
+
+const {
+	padding = null,
+	hasChip = false,
+	chipLabel,
+	chipLabelUppercase = false,
+	chipLeftIcon = null,
+	chipRadius = CHIP_RADIUSES.ROUNDED,
+	chipColor = CHIP_DEFAULT_COLOR,
+	chipColorHex,
+} = defineProps<{
+	padding?: WellPadding;
+	hasChip?: boolean;
+	chipLabel?: string;
+	chipLabelUppercase?: boolean;
+	chipLeftIcon?: IconItem;
+	chipRadius?: ChipRadius;
+	chipColor?: ChipColor;
+	chipColorHex?: string;
+}>();
 </script>

package/lib/js/styles/ItemsList.vue

@@ -22,8 +22,14 @@
 					<h3 :id="'category-' + itemCategory" class="itemsList__category">{{
 						itemCategory
 					}}</h3>
-					<items-color v-if="type === TOKENS_TYPES.COLORS" :items="items" />
-					<items-typography v-if="type === TOKENS_TYPES.TYPOGRAPHY" :items="items" />
+					<items-color
+						v-if="type === TOKENS_TYPES.COLORS"
+						:items="items as ColorToken[]"
+					/>
+					<items-typography
+						v-if="type === TOKENS_TYPES.TYPOGRAPHY"
+						:items="items as TypographyToken[]"
+					/>
 				</div>
 			</div>
 		</div>
@@ -64,6 +70,7 @@
 
 <script lang="ts">
 import { ItemsListsItem, TOKENS_TYPES } from './TokenTypes';
+import type { ColorToken, TypographyToken } from './TokenTypes';
 import { Value } from '../utils/type.utils';
 import ItemsColor from './ItemsColor.vue';
 import ItemsTypography from './ItemsTypography.vue';

package/lib/js/styles/TokenTypes.ts

@@ -21,6 +21,7 @@ export interface TypographyToken {
 	label: string;
 	value: string;
 	token: string;
+	ratio: number | null;
 	attributes: Array<string>;
 	attributesRaw: Array<AttributeRaw>;
 }
@@ -28,5 +29,5 @@ export interface TypographyToken {
 export interface ItemsListsItem {
 	title: string;
 	class: string;
-	list: Dict<object>;
+	list: Dict<Array<object>>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "26.14.3",
+  "version": "26.14.5",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build -c .storybook -o public/storybook",
     "test": "jest",
-    "ts:check": "tsc --noEmit",
+    "ts:check": "vue-tsc --noEmit",
     "synchronizeColors": "npx ts-node tools/importers/SynchronizeColorsTokens.ts",
     "synchronizeTypography": "npx ts-node tools/importers/SynchronizeTypographyTokens.ts"
   },
@@ -88,7 +88,8 @@
     "vite-svg-loader": "^5.1.0",
     "vue": "3.5.12",
     "vue-eslint-parser": "^10.1.1",
-    "vue-popperjs": "github:bethinkpl/vue-popper#03c7912c4729386743b0cca8f39b35448cc3db7f"
+    "vue-popperjs": "github:bethinkpl/vue-popper#03c7912c4729386743b0cca8f39b35448cc3db7f",
+    "vue-tsc": "2.2.8"
   },
   "dependencies": {
     "@primevue/themes": "4.0.0-rc.3",

package/docs/assets/Button-yeAor0pZ.js

@@ -1 +0,0 @@
-import{a as L,I as o,b as a}from"./Icon-BPz80dqH.js";import{d as c,t as E,c as N,a as I,b as i,g as r,f,n as A,r as m,o as t}from"./vue.esm-bundler-DmkhfO_9.js";import{_ as U}from"./_plugin-vue_export-helper-DlAUqK2U.js";const s={SMALL:"small",MEDIUM:"medium",LARGE:"large"},n={FILLED:"filled",OUTLINED:"outlined",TEXT:"text"},T={PRIMARY:"primary",NEUTRAL:"neutral",DANGER:"danger",SUCCESS:"success",INVERTED:"inverted"},u={CAPSULE:"capsule",ROUNDED:"rounded"},S={DEFAULT:"default",HOVERED:"hovered",FOCUSED:"focused",DISABLED:"disabled",LOADING:"loading"},d={NONE:"none",X_SMALL:"x-small",SMALL:"small"},z={XX_SMALL:"xx-small",X_SMALL:"x-small",SMALL:"small",MEDIUM:"medium",LARGE:"large"},j={ICON_ONLY:"icon-only",OUTLINED:n.OUTLINED,FILLED:n.FILLED},V={ALL_IN_COLOR:"all-in-color",NEUTRAL_LABEL:"neutral-label"},D={PRIMARY:"primary",NEUTRAL:"neutral",NEUTRAL_WEAK:"neutral-weak",FAIL:"fail",DANGER:"danger",SUCCESS:"success",INVERTED:"inverted",WARNING:"warning",INFO:"info"},h={DEFAULT:"default",HOVERED:"hovered",FOCUSED:"focused",DISABLED:"disabled",LOADING:"loading"},O=c({name:"Button",components:{WnlIcon:L},props:{size:{type:String,default:s.MEDIUM,validator(e){return Object.values(s).includes(e)}},type:{type:String,default:n.FILLED,validator(e){return Object.values(n).includes(e)}},color:{type:String,default:T.PRIMARY,validator(e){return Object.values(D).includes(e)}},radius:{type:String,default:u.CAPSULE,validator(e){return Object.values(u).includes(e)}},state:{type:String,default:S.DEFAULT,validator(e){return Object.values(S).includes(e)}},iconLeft:{type:Object,default:null,validator(e){return Object.values(o).includes(E(e))}},iconRight:{type:Object,default:null,validator(e){return Object.values(o).includes(E(e))}},elevation:{type:String,default:d.NONE,validator(e){return Object.values(d).includes(e)}}},data(){return{ICONS:Object.freeze(o),ICON_SIZES:Object.freeze(a),BUTTON_TYPES:Object.freeze(n),COLORS:Object.freeze(T),RADIUSES:Object.freeze(u),SIZES:Object.freeze(s),STATES:Object.freeze(S),ELEVATIONS:Object.freeze(d)}},computed:{iconSize(){return this.size===this.SIZES.SMALL||this.size===this.SIZES.MEDIUM?a.XX_SMALL:a.X_SMALL},colorClassName(){return`-ds-color-${this.color}`},loadingIconSize(){return this.size===s.LARGE?a.MEDIUM:this.size===s.SMALL?a.X_SMALL:a.SMALL}}}),p={class:"ds-button__content"};function R(e,v,B,g,C,b){const l=m("wnl-icon");return t(),N("span",{class:A(["ds-button",{"-ds-outlined":e.type===e.BUTTON_TYPES.OUTLINED,"-ds-text":e.type===e.BUTTON_TYPES.TEXT,"-ds-small":e.size===e.SIZES.SMALL,"-ds-large":e.size===e.SIZES.LARGE,"-ds-rounded":e.type!==e.BUTTON_TYPES.TEXT&&e.radius===e.RADIUSES.ROUNDED,"-ds-hovered":e.state===e.STATES.HOVERED,"-ds-focused":e.state===e.STATES.FOCUSED,"-ds-loading":e.state===e.STATES.LOADING,"-ds-disabled":e.state===e.STATES.DISABLED,[e.colorClassName]:!0,"-ds-elevation-x-small":e.elevation===e.ELEVATIONS.X_SMALL,"-ds-elevation-small":e.elevation===e.ELEVATIONS.SMALL}])},[I("span",p,[e.iconLeft?(t(),i(l,{key:0,class:"ds-button__icon -ds-left",icon:e.iconLeft,size:e.iconSize},null,8,["icon","size"])):r("",!0),f(e.$slots,"default"),e.iconRight?(t(),i(l,{key:1,class:"ds-button__icon -ds-right",icon:e.iconRight,size:e.iconSize},null,8,["icon","size"])):r("",!0)]),e.state===e.STATES.LOADING?(t(),i(l,{key:0,class:"ds-button__loadingIcon",icon:e.ICONS.FAD_SPINNER_THIRD,size:e.loadingIconSize},null,8,["icon","size"])):r("",!0)],2)}const F=U(O,[["render",R]]);O.__docgenInfo={displayName:"Button",exportName:"default",description:"",tags:{},props:[{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_SIZES.MEDIUM"}},{name:"type",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_TYPES.FILLED"}},{name:"color",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_COLORS.PRIMARY"}},{name:"radius",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_RADIUSES.CAPSULE"}},{name:"state",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_STATES.DEFAULT"}},{name:"iconLeft",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"iconRight",type:{name:"object"},defaultValue:{func:!1,value:"null"}},{name:"elevation",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_ELEVATIONS.NONE"}}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Buttons/Button/Button.vue"]};export{s as B,F as D,z as I,n as a,T as b,u as c,S as d,d as e,j as f,V as g,h,D as i};

package/docs/assets/DatePicker-DHykkoW4.js

@@ -1,2 +0,0 @@
-const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./pl-Cy1N1vsP.js","./_commonjsHelpers-Chg3vePA.js"])))=>i.map(i=>d[i]);
-import{d as $,t as L,r as P,o as a,c as l,a as s,k as C,g as o,j as E,b as N,n as p,F as X,v as g,E as J,w as W,f as Q,x as F}from"./vue.esm-bundler-DmkhfO_9.js";import{a as x,I,b as ee}from"./Icon-BPz80dqH.js";import{c as te,d as ae,b as u}from"./Tile-DvjxsEPO.js";import{_ as Y}from"./_plugin-vue_export-helper-DlAUqK2U.js";import{_ as G}from"./iframe-B7O_YbfU.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:x},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(ee),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=P("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,[C(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(),N(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,[C(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(),N(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-Cy1N1vsP.js").then(b=>b.p);return{Polish:i}},__vite__mapDeps([0,1]),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:te,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(ae)}},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}},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=P("ds-tile"),r=P("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)]),C(n,{class:"ds-datePicker__tile",text:e.text,interactive:e.isInteractive,"additional-text":e.additionalText,color:e.color,"border-color":e.borderColor,state:e.state,"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(),N(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-3e62c767"]]);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,U as d,f as e,Ee as i};

package/docs/assets/GroupRichListItem-onOADtuh.js

@@ -1 +0,0 @@
-import{d as g,t as D,c as l,f as o,g as s,a as d,n as i,k as f,x as c,s as p,b,r as C,o as t}from"./vue.esm-bundler-DmkhfO_9.js";import{D as M}from"./Divider-CeZli6az.js";import{D as V}from"./Checkbox-K_NwPnQU.js";import{a as $,I as v,c as U,b as z}from"./Icon-BPz80dqH.js";import{_ as R}from"./_plugin-vue_export-helper-DlAUqK2U.js";const r={DEFAULT:"default",FLAT:"flat"},n={DEFAULT:"default",LOADING:"loading",DRAG:"drag"},m={SMALL:"small",MEDIUM:"medium"},y={DEFAULT:"default",PRIMARY:"primary",PRIMARY_WEAK:"primary-weak",NEUTRAL_HEAVY:"neutral-heavy",NEUTRAL_STRONG:"neutral-strong",NEUTRAL:"neutral",NEUTRAL_WEAK:"neutral-weak",NEUTRAL_GHOST:"neutral-ghost",DANGER:"danger",DANGER_WEAK:"danger-weak",FAIL:"fail",FAIL_WEAK:"fail-weak",WARNING:"warning",WARNING_WEAK:"warning-weak",SUCCESS:"success",SUCCESS_WEAK:"success-weak",INFO:"info",INFO_WEAK:"info-weak",ACCENT:"accent",ACCENT_WEAK:"accent-weak"},L={NEUTRAL:"neutral",NEUTRAL_WEAK:"neutral-weak"},G={SMALL:"small"},I={HORIZONTAL:"horizontal",VERTICAL:"vertical"},E=g({name:"RichListItem",components:{DsCheckbox:V,DsDivider:M,DsIcon:$},props:{type:{type:String,default:r.DEFAULT,validator(e){return Object.values(r).includes(e)}},layout:{type:String,default:I.HORIZONTAL,validator(e){return Object.values(I).includes(e)}},state:{type:String,default:n.DEFAULT,validator(e){return Object.values(n).includes(e)}},size:{type:String,default:m.MEDIUM,validator(e){return Object.values(m).includes(e)}},isInteractive:{type:Boolean,default:!0},isDimmed:{type:Boolean,default:!1},isDraggable:{type:Boolean,default:!0},icon:{type:Object,default:null,validator(e){return Object.values(v).includes(D(e))}},iconColor:{type:String,default:null,validator(e){return Object.values(U).includes(e)}},iconColorHex:{type:String,default:null},borderColor:{type:String,default:null,validator(e){return Object.values(y).includes(e)}},borderColorHex:{type:String,default:null},draggableIconClassName:{type:String,default:null},backgroundColor:{type:String,default:L.NEUTRAL,validator(e){return Object.values(L).includes(e)}},elevation:{type:String,default:null,validator(e){return Object.values(G).includes(e)}},hasDraggableHandler:{type:Boolean,default:!0},hasActionsSlotDivider:{type:Boolean,default:!0},isSelectable:{type:Boolean,default:!0},isSelected:{type:Boolean,default:!1}},emits:{"icon-click":()=>!0,click:()=>!0,"update:is-selected":e=>!0},data(){return{ICONS:Object.freeze(v),ICON_SIZES:Object.freeze(z),RICH_LIST_ITEM_TYPE:Object.freeze(r),RICH_LIST_ITEM_STATE:Object.freeze(n),RICH_LIST_ITEM_SIZE:Object.freeze(m)}},computed:{classList(){return{"-ds-default":this.type===r.DEFAULT,"-ds-flat":this.type===r.FLAT,"-ds-horizontal":this.isHorizontal,"-ds-verticalWithMedia":this.isVertical&&this.hasMedia,"-ds-vertical":this.isVertical,"-ds-loading":this.state===n.LOADING,"-ds-dimmed":this.isDimmed,"-ds-interactive":this.isInteractive,"-ds-small":this.size===m.SMALL,...this.backgroundColor&&this.type!==r.FLAT&&{[`-ds-background-${this.backgroundColor}`]:!0},...this.elevation&&this.type!==r.FLAT&&{[`-ds-elevation-${this.elevation}`]:!0},"-ds-draggable":this.isDraggable,"-ds-draggable-without-handler":this.isDraggable&&!this.hasDraggableHandler,"-ds-has-media":this.hasMedia,"-ds-drag":this.isDragging}},isHorizontal(){return this.layout===I.HORIZONTAL},isVertical(){return this.layout===I.VERTICAL},iconColorClass(){if(!(!this.iconColor||this.iconColor&&this.iconColorHex))return`-ds-${this.iconColor}`},iconColorStyle(){if(!(!this.iconColor||!this.iconColorHex))return{color:this.iconColorHex}},borderColorClass(){if(!(!this.borderColor||this.borderColorHex))return`-ds-border-${this.borderColor}`},borderColorStyle(){if(this.borderColorHex)return{backgroundColor:this.borderColorHex}},hasMedia(){return!!this.$slots.media},isDragging(){return this.isDraggable&&this.state===n.DRAG}}}),B={key:0,class:"ds-richListItem__mediaVertical -ds-dimmable"},j={class:"ds-richListItem__container -ds-dimmable"},F={key:0,class:"ds-richListItem__mediaHorizontal"},w={key:2,class:"ds-richListItem__iconWrapper"},Z={class:"ds-richListItem__content"},K={class:"ds-richListItem__rightContainer"},W={key:0,class:"ds-richListItem__metadata"},P={key:2,class:"ds-richListItem__checkbox"},Y={key:1,class:"ds-richListItem__metadata -ds-dimmable"};function X(e,a,A,O,k,N){const h=C("ds-icon"),_=C("ds-divider"),H=C("ds-checkbox");return t(),l("div",{class:i(["ds-richListItem",e.classList]),onClick:a[5]||(a[5]=u=>e.$emit("click",u))},[e.hasMedia&&e.isVertical?(t(),l("div",B,[o(e.$slots,"media",{},void 0,!0)])):s("",!0),d("div",j,[e.hasMedia&&e.isHorizontal?(t(),l("div",F,[o(e.$slots,"media",{},void 0,!0)])):s("",!0),e.isDraggable&&e.hasDraggableHandler?(t(),l("div",{key:1,class:i(["ds-richListItem__dragAndDrop",{[e.draggableIconClassName]:!!e.draggableIconClassName}])},[f(h,{icon:e.ICONS.FA_BARS,class:"ds-richListItem__dragAndDropIcon",size:e.size===e.RICH_LIST_ITEM_SIZE.SMALL?e.ICON_SIZES.XX_SMALL:e.ICON_SIZES.X_SMALL,onClick:a[0]||(a[0]=c(()=>{},["stop"]))},null,8,["icon","size"])],2)):s("",!0),e.icon?(t(),l("div",w,[f(h,{icon:e.icon,class:i(["ds-richListItem__icon",e.iconColorClass]),size:e.size===e.RICH_LIST_ITEM_SIZE.SMALL?e.ICON_SIZES.XX_SMALL:e.ICON_SIZES.X_SMALL,style:p(e.iconColorStyle),onClick:a[1]||(a[1]=c(u=>e.$emit("icon-click"),["prevent"]))},null,8,["icon","size","class","style"])])):s("",!0),d("div",Z,[o(e.$slots,"content",{},void 0,!0)]),d("div",K,[e.$slots.metadata&&e.isHorizontal?(t(),l("div",W,[o(e.$slots,"metadata",{},void 0,!0)])):s("",!0),e.$slots.actions?(t(),l("div",{key:1,class:"ds-richListItem__actionSlot",onClick:a[2]||(a[2]=c(()=>{},["stop"]))},[e.$slots.actions&&e.hasActionsSlotDivider&&e.isHorizontal?(t(),b(_,{key:0,"is-vertical":""})):s("",!0),o(e.$slots,"actions",{},void 0,!0)])):s("",!0),e.isSelectable?(t(),l("div",P,[e.isHorizontal?(t(),b(_,{key:0,"is-vertical":""})):s("",!0),f(H,{"is-selected":e.isSelected,"onUpdate:isSelected":a[3]||(a[3]=u=>e.$emit("update:is-selected",u)),onClick:a[4]||(a[4]=c(()=>{},["stop"]))},null,8,["is-selected"])])):s("",!0)])]),e.$slots.metadata&&e.isVertical?(t(),l("div",Y,[o(e.$slots,"metadata",{},void 0,!0)])):s("",!0),e.borderColorClass||e.borderColorStyle?(t(),l("div",{key:2,class:i(["ds-richListItem__border",e.borderColorClass]),style:p(e.borderColorStyle)},null,6)):s("",!0)],2)}const re=R(E,[["render",X],["__scopeId","data-v-3cbe04f4"]]);E.__docgenInfo={displayName:"RichListItem",exportName:"default",description:"",tags:{},props:[{name:"type",type:{name:"RichListItemType"},defaultValue:{func:!1,value:"RICH_LIST_ITEM_TYPE.DEFAULT"}},{name:"layout",type:{name:"RichListItemLayout"},defaultValue:{func:!1,value:"RICH_LIST_ITEM_LAYOUT.HORIZONTAL"}},{name:"state",type:{name:"RichListItemState"},defaultValue:{func:!1,value:"RICH_LIST_ITEM_STATE.DEFAULT"}},{name:"size",type:{name:"RichListItemSize"},defaultValue:{func:!1,value:"RICH_LIST_ITEM_SIZE.MEDIUM"}},{name:"isInteractive",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"isDimmed",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"isDraggable",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"icon",type:{name:"IconItem"},defaultValue:{func:!1,value:"null"}},{name:"iconColor",type:{name:"IconColor"},defaultValue:{func:!1,value:"null"}},{name:"iconColorHex",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"borderColor",type:{name:"RichListItemBorderColor"},defaultValue:{func:!1,value:"null"}},{name:"borderColorHex",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"draggableIconClassName",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"backgroundColor",type:{name:"RichListItemBackgroundColor"},defaultValue:{func:!1,value:"RICH_LIST_ITEM_BACKGROUND_COLOR.NEUTRAL"}},{name:"elevation",type:{name:"RichListItemElevation"},defaultValue:{func:!1,value:"null"}},{name:"hasDraggableHandler",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"hasActionsSlotDivider",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"isSelectable",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"isSelected",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}}],events:[{name:"click"},{name:"icon-click"},{name:"update:is-selected"}],slots:[{name:"media"},{name:"content"},{name:"metadata"},{name:"actions"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/RichList/RichListItem/RichListItem.vue"]};const q={...y},S={...L},T=g({name:"GroupRichListItem",props:{isExpanded:{type:Boolean,default:!1},borderColor:{type:String,default:null,validator(e){return Object.values(q).includes(e)}},borderColorHex:{type:String,default:null},backgroundColor:{type:String,default:S.NEUTRAL,validator(e){return Object.values(S).includes(e)}}},computed:{classList(){return{...this.backgroundColor&&{[`-ds-background-${this.backgroundColor}`]:!0}}},borderColorClass(){if(!(!this.borderColor||this.borderColorHex))return`-ds-border-${this.borderColor}`},borderColorStyle(){if(this.borderColorHex)return{backgroundColor:this.borderColorHex}}}}),J={class:"ds-groupRichListItem__wrapper"},Q={class:"ds-groupRichListItem__parent"},x={key:0,class:"ds-groupRichListItem__children"};function ee(e,a,A,O,k,N){return t(),l("div",{class:i(["ds-groupRichListItem",e.classList])},[d("div",J,[d("div",Q,[o(e.$slots,"parent",{},void 0,!0)]),e.isExpanded?(t(),l("div",x,[o(e.$slots,"children",{},void 0,!0)])):s("",!0)]),e.borderColorClass||e.borderColorStyle?(t(),l("div",{key:0,class:i(["ds-groupRichListItem__border",e.borderColorClass]),style:p(e.borderColorStyle)},null,6)):s("",!0)],2)}const ie=R(T,[["render",ee],["__scopeId","data-v-0d83b403"]]);T.__docgenInfo={displayName:"GroupRichListItem",exportName:"default",description:"",tags:{},props:[{name:"isExpanded",type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"borderColor",type:{name:"GroupRichListItemBorderColor"},defaultValue:{func:!1,value:"null"}},{name:"borderColorHex",type:{name:"string"},defaultValue:{func:!1,value:"null"}},{name:"backgroundColor",type:{name:"GroupRichListItemBackgroundColor"},defaultValue:{func:!1,value:"GROUP_RICH_LIST_ITEM_BACKGROUND_COLOR.NEUTRAL"}}],slots:[{name:"parent"},{name:"children"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.vue"]};export{ie as G,r as R,m as a,I as b,n as c,y as d,L as e,G as f,S as g,q as h,re as i};

package/docs/assets/IconButton-gTykCZIi.js

@@ -1 +0,0 @@
-import{b as s,a as c,I as S}from"./Icon-BPz80dqH.js";import{I as o,D as _,c as N,f as a,i as r,g as u,e as d,h as O,b as m,a as p}from"./Button-yeAor0pZ.js";import{v as B,d as v,t as A,c as I,n as i,f as U,g as y,k as b,e as h,s as M,r as C,o as l,b as f}from"./vue.esm-bundler-DmkhfO_9.js";import{i as R}from"./device-9fgosCm4.js";import{_ as z}from"./_plugin-vue_export-helper-DlAUqK2U.js";function D(){const e=B(!1),t=R();return{isHovered:e,mouseOver(){t||(e.value=!0)},mouseLeave(){t||(e.value=!1)},touchStart(){t&&(e.value=!0)},touchEnd(){t&&(e.value=!1)}}}const g={[o.XX_SMALL]:s.XXX_SMALL,[o.X_SMALL]:s.XX_SMALL,[o.SMALL]:s.X_SMALL,[o.MEDIUM]:s.SMALL,[o.LARGE]:s.MEDIUM},E=v({name:"IconButton",components:{WnlIcon:c,WnlButton:_},props:{size:{type:String,default:o.LARGE,validator(e){return Object.values(o).includes(e)}},radius:{type:String,default:N.CAPSULE,validator(e){return Object.values(N).includes(e)}},type:{type:String,default:a.ICON_ONLY,validator(e){return Object.values(a).includes(e)}},icon:{type:Object,required:!0,validator(e){return Object.values(S).includes(A(e))}},color:{type:String,default:r.PRIMARY,validator(e){return Object.values(r).includes(e)}},colorScheme:{type:String,default:u.ALL_IN_COLOR,validator(e){return Object.values(u).includes(e)}},elevation:{type:String,default:d.NONE,validator(e){return Object.values(d).includes(e)}},touchable:{type:Boolean,default:!0},state:{type:String,default:O.DEFAULT,validator(e){return Object.values(O).includes(e)}}},setup(){return{...D()}},data(){return{ICONS:Object.freeze(S),ICON_SIZES:Object.freeze(s),ICON_BUTTON_SIZES:Object.freeze(o),ICON_BUTTON_COLOR_SCHEMES:Object.freeze(u),ICON_BUTTON_TYPES:Object.freeze(a),ICON_BUTTON_STATES:Object.freeze(O),ICON_BUTTON_COLORS:Object.freeze(r),BUTTON_COLORS:Object.freeze(m)}},computed:{iconSize(){return this.type===a.ICON_ONLY?g[this.size]:this.size===o.XX_SMALL?s.XXX_SMALL:this.size===o.X_SMALL?s.XX_SMALL:s.X_SMALL},buttonType(){return this.type===a.ICON_ONLY?p.OUTLINED:this.type},computedColor(){if(this.isButtonColor)return null;if(this.type===a.ICON_ONLY)return this.color;throw new Error(`Color: ${this.color} is supported only in type: "icon-only"`)},isButtonColor(){return Object.values(r).includes(this.color)},colorClassName(){return`-ds-color-${this.color}`}}});function X(e,t,j,Y,V,P){const T=C("wnl-icon"),L=C("wnl-button");return l(),I("div",{class:i(["ds-iconButton",{"-ds-xx-small":e.size===e.ICON_BUTTON_SIZES.XX_SMALL,"-ds-x-small":e.size===e.ICON_BUTTON_SIZES.X_SMALL,"-ds-small":e.size===e.ICON_BUTTON_SIZES.SMALL,"-ds-large":e.size===e.ICON_BUTTON_SIZES.LARGE,"-ds-hovered":e.state===e.ICON_BUTTON_STATES.HOVERED,"-ds-focused":e.state===e.ICON_BUTTON_STATES.FOCUSED,"-ds-disabled":e.state===e.ICON_BUTTON_STATES.DISABLED,"-ds-loading":e.state===e.ICON_BUTTON_STATES.LOADING,[e.colorClassName]:e.isButtonColor,"-ds-touchable":e.touchable}]),style:M({color:e.computedColor}),onMouseover:t[0]||(t[0]=(...n)=>e.mouseOver&&e.mouseOver(...n)),onMouseleave:t[1]||(t[1]=(...n)=>e.mouseLeave&&e.mouseLeave(...n)),onTouchstart:t[2]||(t[2]=(...n)=>e.touchStart&&e.touchStart(...n)),onTouchend:t[3]||(t[3]=(...n)=>e.touchEnd&&e.touchEnd(...n))},[e.$slots.default&&e.type!==e.ICON_BUTTON_TYPES.ICON_ONLY?(l(),I("div",{key:0,class:i(["ds-iconButton__label",{"-ds-neutral":e.colorScheme===e.ICON_BUTTON_COLOR_SCHEMES.NEUTRAL_LABEL}])},[U(e.$slots,"default",{},void 0,!0)],2)):y("",!0),b(L,{ref:"button",class:i(["ds-iconButton__button",{"-ds-iconOnly":e.type===e.ICON_BUTTON_TYPES.ICON_ONLY,"-ds-hovered":e.state===e.ICON_BUTTON_STATES.HOVERED,"-ds-focused":e.state===e.ICON_BUTTON_STATES.FOCUSED,"-ds-disabled":e.state===e.ICON_BUTTON_STATES.DISABLED}]),radius:e.radius,type:e.buttonType,state:e.isHovered?e.ICON_BUTTON_STATES.HOVERED:e.ICON_BUTTON_STATES.DEFAULT,elevation:e.elevation,color:e.isButtonColor?e.color:null},{default:h(()=>[e.state===e.ICON_BUTTON_STATES.LOADING?(l(),f(T,{key:0,class:"ds-iconButton__icon",icon:e.ICONS.FAD_SPINNER_THIRD,size:e.iconSize,spinning:""},null,8,["icon","size"])):(l(),f(T,{key:1,class:"ds-iconButton__icon",icon:e.icon,size:e.iconSize},null,8,["icon","size"]))]),_:1},8,["class","radius","type","state","elevation","color"])],38)}const F=z(E,[["render",X],["__scopeId","data-v-c667cd8c"]]);E.__docgenInfo={displayName:"IconButton",exportName:"default",description:"",tags:{},props:[{name:"size",type:{name:"string"},defaultValue:{func:!1,value:"ICON_BUTTON_SIZES.LARGE"}},{name:"radius",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_RADIUSES.CAPSULE"}},{name:"type",type:{name:"string"},defaultValue:{func:!1,value:"ICON_BUTTON_TYPES.ICON_ONLY"}},{name:"icon",type:{name:"object"},required:!0},{name:"color",type:{name:"string"},defaultValue:{func:!1,value:"ICON_BUTTON_COLORS.PRIMARY"}},{name:"colorScheme",type:{name:"string"},defaultValue:{func:!1,value:"ICON_BUTTON_COLOR_SCHEMES.ALL_IN_COLOR"}},{name:"elevation",type:{name:"string"},defaultValue:{func:!1,value:"BUTTON_ELEVATIONS.NONE"}},{name:"touchable",type:{name:"boolean"},defaultValue:{func:!1,value:"true"}},{name:"state",type:{name:"string"},defaultValue:{func:!1,value:"ICON_BUTTON_STATES.DEFAULT"}}],slots:[{name:"default"}],sourceFiles:["/home/runner/work/design-system/design-system/lib/js/components/Buttons/IconButton/IconButton.vue"]};export{F as I};