@paperless/core 3.5.1 → 3.6.1

package/dist/collection/components/helpers/table/column/table-column.stories.js

@@ -0,0 +1,23 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Helpers/Table/Column',
+    component: 'p-table-column',
+};
+export default meta;
+export const Default = {
+    render: ({ path, type, name, 'use-slot': useSlot, 'has-checkbox': hasCheckbox, align, 'is-last': isLast, 'parsed-sizes': parsedSizes, sizes, }) => html `
+		<p-table-column
+			path=${path ?? nothing}
+			type=${type ?? nothing}
+			name=${name ?? nothing}
+			use-slot=${useSlot ?? nothing}
+			has-checkbox=${hasCheckbox ?? nothing}
+			align=${align ?? nothing}
+			is-last=${isLast ?? nothing}
+			parsed-sizes=${parsedSizes ?? nothing}
+			sizes=${sizes ?? nothing}
+			@tableDefinitionChanged=${action('tableDefinitionChanged')}
+		/>
+	`,
+};

package/dist/collection/components/helpers/table/extra-header/table-extra-header.stories.js

@@ -0,0 +1,18 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Helpers/Table/Extra Header',
+    component: 'p-table-extra-header',
+};
+export default meta;
+export const Default = {
+    render: ({ name, align, 'parsed-sizes': parsedSizes, sizes }) => html `
+		<p-table-column
+			name=${name ?? nothing}
+			align=${align ?? nothing}
+			parsed-sizes=${parsedSizes ?? nothing}
+			sizes=${sizes ?? nothing}
+			@tableDefinitionChanged=${action('tableDefinitionChanged')}
+		/>
+	`,
+};

package/dist/collection/components/helpers/table/row-action/table-row-action.stories.js

@@ -0,0 +1,22 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Helpers/Table/Row action',
+    component: 'p-table-row-action',
+};
+export default meta;
+export const Default = {
+    render: ({ type, icon, 'icon-only': iconOnly, 'icon-flip': iconFlip, 'icon-rotate': iconRotate, label, action, disabled, loading, 'show-function': showFunction, }) => html `
+		<p-table-row-action
+			type=${type ?? nothing}
+			icon=${icon ?? nothing}
+			icon-only=${iconOnly ?? nothing}
+			icon-flip=${iconFlip ?? nothing}
+			icon-rotate=${iconRotate ?? nothing}
+			label=${label ?? nothing}
+			action=${action ?? nothing}
+			disabled=${disabled ?? nothing}
+			loading=${loading ?? nothing}
+			show-function=${showFunction ?? nothing}
+		/>
+	`,
+};

package/dist/collection/components/molecules/accordion/accordion.stories.js

@@ -0,0 +1,30 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Accordion',
+    component: 'p-accordion',
+    args: {
+        header: 'Accordion header',
+        content: 'Accordion content!',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, variant, header, open, closeable, openable }) => html `
+		<p-accordion
+			header=${header ?? nothing}
+			variant=${variant ?? nothing}
+			open=${open ?? nothing}
+			closeable=${closeable ?? nothing}
+			openable=${openable ?? nothing}
+			@isOpen=${action('isOpen')}
+		>
+			${content}
+		</p-accordion>
+	`,
+};

package/dist/collection/components/molecules/attachment/attachment.stories.js

@@ -0,0 +1,30 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Attachment',
+    component: 'p-attachment',
+    args: {
+        mode: 'write',
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ value, mode, label, helper, required, error, loading, accept, 'enable-camera-on-mobile': enableCameraOnMobile, 'file-id': fileId, }) => html `
+		<p-attachment
+			mode=${mode ?? nothing}
+			error=${error ?? nothing}
+			value=${value ?? nothing}
+			label=${label ?? nothing}
+			helper=${helper ?? nothing}
+			required=${required ?? nothing}
+			file-id=${fileId ?? nothing}
+			enable-camera-on-mobile=${enableCameraOnMobile ?? nothing}
+			accept=${accept ?? nothing}
+			loading=${loading ?? nothing}
+			@download=${action('download')}
+			@delete=${action('delete')}
+			@upload=${action('upload')}
+		>
+		</p-attachment>
+	`,
+};

package/dist/collection/components/molecules/button/button.stories.js

@@ -0,0 +1,40 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Button',
+    component: 'p-button',
+    args: {
+        label: 'Button',
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ label, as, variant, active, underline, href, target, size, type, loading, chevron, 'chevron-position': chevronPosition, disabled, icon, 'icon-only': iconOnly, 'icon-position': iconPosition, 'icon-flip': iconFlip, 'icon-rotate': iconRotate, 'inherit-text': inheritText, 'button-group-position': buttonGroupPosition, class: className, error, }) => html `
+		<p-button
+			label=${label ?? nothing}
+			as=${as ?? nothing}
+			variant=${variant ?? nothing}
+			active=${active ?? nothing}
+			underline=${underline ?? nothing}
+			href=${href ?? nothing}
+			target=${target ?? nothing}
+			size=${size ?? nothing}
+			type=${type ?? nothing}
+			loading=${loading ?? nothing}
+			chevron=${chevron ?? nothing}
+			chevron-position=${chevronPosition ?? nothing}
+			disabled=${disabled ?? nothing}
+			icon=${icon ?? nothing}
+			icon-only=${iconOnly ?? nothing}
+			icon-position=${iconPosition ?? nothing}
+			icon-flip=${iconFlip ?? nothing}
+			icon-rotate=${iconRotate ?? nothing}
+			inherit-text=${inheritText ?? nothing}
+			button-group-position=${buttonGroupPosition ?? nothing}
+			class=${className ?? nothing}
+			error=${error ?? nothing}
+			@onClick=${action('onClick')}
+		>
+		</p-button>
+	`,
+};

package/dist/collection/components/molecules/button-group/button-group.stories.js

@@ -0,0 +1,15 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Button group',
+    component: 'p-button-group',
+};
+export default meta;
+export const Default = {
+    render: ({ size }) => html `
+		<p-button-group size=${size ?? nothing}>
+			<p-button>One</p-button>
+			<p-button>Two</p-button>
+			<p-button>Three</p-button>
+		</p-button-group>
+	`,
+};

package/dist/collection/components/molecules/calendar/calendar.stories.js

@@ -0,0 +1,32 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Calendar',
+    component: 'p-calendar',
+    argTypes: {
+        'min-date': {
+            type: 'date',
+        },
+        'max-date': {
+            type: 'date',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ variant, value, 'preselect-today': preselectToday, 'disabled-dates': disabledDates, 'min-date': minDate, 'max-date': maxDate, 'disable-weekends': disableWeekends, 'enable-today': enableToday, 'today-text': todayText, mode, }) => html `
+		<p-calendar
+			variant=${variant ?? nothing}
+			value=${value ?? nothing}
+			preselect-today=${preselectToday ?? nothing}
+			disabled-dates=${disabledDates ?? nothing}
+			min-date=${minDate ?? nothing}
+			max-date=${maxDate ?? nothing}
+			disable-weekends=${disableWeekends ?? nothing}
+			enable-today=${enableToday ?? nothing}
+			today-text=${todayText ?? nothing}
+			mode=${mode ?? nothing}
+			@valueChange=${action('valueChange')}
+		/>
+	`,
+};

package/dist/collection/components/molecules/content-slider/content-slider.component.js

@@ -47,13 +47,13 @@ export class ContentSlider {
         }
     }
     render() {
-        return (h(Host, { key: 'ced2d428e5bb5831898a3092ea2f0d7b9802ef02', class: 'p-content-slider' }, h("div", { key: 'e3dfda6e2643f979be7d68b908dd282c94c39b1d', class: `
+        return (h(Host, { key: 'bf8924e96712792ca4cc1e41962dca8cc86f1a5e' }, h("div", { key: '7ab2192a27ea1a65f74462a1975880a2d32a7314', class: `
        slider
        ${!this.disableDrag && 'draggable'}
        ${this._dragging && 'dragging'}
      `, ref: el => (this._sliderRef = el), style: {
                 height: `${this._outerHeight}px`,
-            }, onMouseDown: e => this._mouseDownHandler(e), onMouseMove: e => this._mouseMoveHandler(e), onTouchMove: e => this._mouseMoveHandler(e), onTouchStart: e => this._mouseDownHandler(e) }, h("div", { key: 'cfef628f79dd457341ff316119afe53386585fd4', class: 'inner-slider', ref: ref => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() }, h("slot", { key: '08496344b73b4fb1c84d0df7e53d01b83c54a01c', onSlotchange: () => this._slotChange() }))), h("div", { key: '1f058ce1a871ce924a19e5f03733087b347fe7dc', class: `
+            }, onMouseDown: e => this._mouseDownHandler(e), onMouseMove: e => this._mouseMoveHandler(e), onTouchMove: e => this._mouseMoveHandler(e), onTouchStart: e => this._mouseDownHandler(e) }, h("div", { key: 'aa95fdb7ddcaf647947584ae4282822251be5136', class: 'inner-slider', ref: ref => this._setInnerSliderReft(ref), onTransitionEnd: () => this._transitionEndHandler() }, h("slot", { key: 'cffb458194bbdf342e3840aa174469809e282be5', onSlotchange: () => this._slotChange() }))), h("div", { key: '51e08fcb4c2ae6296c1e5042445e40ad28610e84', class: `
        indicator
        ${this.hideMobileIndicator && 'hidden'}
      ` }, this._filteredItems.map((_, i) => (h("div", { class: `

package/dist/collection/components/molecules/content-slider/content-slider.stories.js

@@ -0,0 +1,41 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Content slider',
+    component: 'p-content-slider',
+};
+export default meta;
+export const Default = {
+    render: ({ 'hide-mobile-indicator': hideMobileIndicator, 'disable-drag': disableDrag, 'disable-auto-center': disableAutoCenter, 'disable-indicator-click': disableIndicatorClick, }) => html `
+		<p-content-slider
+			hide-mobile-indicator=${hideMobileIndicator ?? nothing}
+			disable-drag=${disableDrag ?? nothing}
+			disable-auto-center=${disableAutoCenter ?? nothing}
+			disable-indicator-click=${disableIndicatorClick ?? nothing}
+		>
+			<p-card-container class="w-full">
+				<p-card-header header="card"></p-card-header>
+				<p-card-body>
+					Some text in the<br />
+					card body <br />
+					to give it some height
+				</p-card-body>
+			</p-card-container>
+			<p-card-container class="w-full">
+				<p-card-header header="card"></p-card-header>
+				<p-card-body>
+					Some text in the<br />
+					card body <br />
+					to give it some height
+				</p-card-body>
+			</p-card-container>
+			<p-card-container class="hidden w-full desktop-xs:block">
+				<p-card-header header="card"></p-card-header>
+				<p-card-body>
+					Some text in the<br />
+					card body <br />
+					to give it some height
+				</p-card-body>
+			</p-card-container>
+		</p-content-slider>
+	`,
+};

package/dist/collection/components/molecules/cropper/cropper.stories.js

@@ -0,0 +1,21 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Cropper',
+    component: 'p-cropper',
+    args: {
+        value: 'https://images.unsplash.com/photo-1576014662151-46d23666bc28?auto=format&fit=crop&crop=faces&w=300&h=150&q=80',
+        'return-type': 'base64',
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ variant, value, 'return-type': returnType }) => html `
+		<p-cropper
+			variant=${variant ?? nothing}
+			value=${value ?? nothing}
+			return-type=${returnType ?? nothing}
+			@valueChange=${action('valueChange')}
+		/>
+	`,
+};

package/dist/collection/components/molecules/datepicker/datepicker.stories.js

@@ -0,0 +1,57 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Datepicker',
+    component: 'p-datepicker',
+    args: {
+        label: 'Label',
+    },
+    argTypes: {
+        'min-date': {
+            type: 'date',
+        },
+        'max-date': {
+            type: 'date',
+        },
+    },
+    parameters: {
+        docs: {
+            iframeHeight: 600,
+            story: {
+                height: '700px',
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ placeholder, value, 'preselect-today': preselectToday, 'enable-native-picker': enableNativePicker, 'disabled-dates': disabledDates, 'min-date': minDate, 'max-date': maxDate, 'disable-weekends': disableWeekends, 'enable-today': enableToday, 'today-text': todayText, mode, format, 'hide-icon-when-filled': hideIconWhenFilled, size, prefix, label, loading, helper, required, 'show-optional': showOptional, error, disabled, strategy, placement, }) => html `
+		<p-datepicker
+			placeholder=${placeholder ?? nothing}
+			value=${value ?? nothing}
+			preselect-today=${preselectToday ?? nothing}
+			enable-native-picker=${enableNativePicker ?? nothing}
+			disabled-dates=${disabledDates ?? nothing}
+			min-date=${minDate ?? nothing}
+			max-date=${maxDate ?? nothing}
+			disable-weekends=${disableWeekends ?? nothing}
+			enable-today=${enableToday ?? nothing}
+			today-text=${todayText ?? nothing}
+			mode=${mode ?? nothing}
+			format=${format ?? nothing}
+			hide-icon-when-filled=${hideIconWhenFilled ?? nothing}
+			size=${size ?? nothing}
+			prefix=${prefix ?? nothing}
+			label=${label ?? nothing}
+			loading=${loading ?? nothing}
+			helper=${helper ?? nothing}
+			required=${required ?? nothing}
+			show-optional=${showOptional ?? nothing}
+			error=${error ?? nothing}
+			disabled=${disabled ?? nothing}
+			strategy=${strategy ?? nothing}
+			placement=${placement ?? nothing}
+			@valueChange=${action('valueChange')}
+		></p-datepicker>
+	`,
+};

package/dist/collection/components/molecules/dropdown/dropdown.stories.js

@@ -0,0 +1,49 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Dropdown',
+    component: 'p-dropdown',
+    parameters: {
+        docs: {
+            iframeHeight: 100,
+            story: {
+                height: '100px',
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ variant, placement, offset, strategy, show, 'calculate-width': calculateWidth, 'apply-max-width': applyMaxWidth, 'apply-full-width': applyFullWidth, 'allow-overflow': allowOverflow, scrollable, 'inside-click': insideClick, 'disable-trigger-click': disableTriggerClick, 'apply-chevron': applyChevron, 'chevron-position': chevronPosition, 'chevron-direction': chevronDirection, }) => html `
+		<p-dropdown
+			variant=${variant ?? nothing}
+			placement=${placement ?? nothing}
+			offset=${offset ?? nothing}
+			strategy=${strategy ?? nothing}
+			show=${show ?? nothing}
+			calculate-width=${calculateWidth ?? nothing}
+			apply-max-width=${applyMaxWidth ?? nothing}
+			apply-full-width=${applyFullWidth ?? nothing}
+			allow-overflow=${allowOverflow ?? nothing}
+			scrollable=${scrollable ?? nothing}
+			inside-click=${insideClick ?? nothing}
+			disable-trigger-click=${disableTriggerClick ?? nothing}
+			apply-chevron=${applyChevron ?? nothing}
+			chevron-position=${chevronPosition ?? nothing}
+			chevron-direction=${chevronDirection ?? nothing}
+			@isOpen=${action('isOpen')}
+		>
+			<p-button
+				slot="trigger"
+				variant="secondary"
+			>
+				Dropdown
+			</p-button>
+			<slot slot="items">
+				<p-dropdown-menu-item>Item 1</p-dropdown-menu-item>
+				<p-dropdown-menu-item>Item 2</p-dropdown-menu-item>
+				<p-dropdown-menu-item>Item 3</p-dropdown-menu-item>
+			</slot>
+		</p-dropdown>
+	`,
+};

package/dist/collection/components/molecules/empty-state/empty-state.stories.js

@@ -0,0 +1,29 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Empty state',
+    component: 'p-empty-state',
+    args: {
+        illustration: 'table',
+        header: 'Nog niks ingediend',
+        content: 'Er kan geen overzicht worden getoond tot er iets wordt ingediend. Begin met indienen.',
+        'enable-action': true,
+        'action-icon': 'plus',
+        'action-text': 'Nieuw',
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ illustration, header, content, 'enable-action': enableAction, 'action-text': actionText, 'action-icon': actionIcon, 'action-loading': actionLoading, }) => html `
+		<p-empty-state
+			illustration=${illustration ?? nothing}
+			header=${header ?? nothing}
+			content=${content ?? nothing}
+			enable-action=${enableAction ?? nothing}
+			action-text=${actionText ?? nothing}
+			action-icon=${actionIcon ?? nothing}
+			action-loading=${actionLoading ?? nothing}
+			@action=${action('action')}
+		/>
+	`,
+};

package/dist/collection/components/molecules/field/container/field-container.stories.js

@@ -0,0 +1,36 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Field/Container',
+    component: 'p-field-container',
+    args: {
+        label: 'Label',
+        content: 'Content',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ label, loading, variant, helper, required, 'show-optional': showOptional, error, content, align, 'error-placement': errorPlacement, 'force-show-tooltip': forceShowTooltip, 'optional-template': optionalTemplate, }) => html `
+		<p-field-container
+			label=${label ?? nothing}
+			loading=${loading ?? nothing}
+			variant=${variant ?? nothing}
+			helper=${helper ?? nothing}
+			required=${required ?? nothing}
+			error=${error ?? nothing}
+			show-optional=${showOptional ?? nothing}
+			align=${align ?? nothing}
+			error-placement=${errorPlacement ?? nothing}
+			force-show-tooltip=${forceShowTooltip ?? nothing}
+			optional-template=${optionalTemplate ?? nothing}
+			@focus=${action('focus')}
+		>
+			<div slot="content">${content ?? nothing}</div>
+		</p-field-container>
+	`,
+};

package/dist/collection/components/molecules/field/field/field.stories.js

@@ -0,0 +1,112 @@
+import { action } from "@storybook/addon-actions";
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Field/Field',
+    component: 'p-field',
+    args: {
+        label: 'Label',
+    },
+    argTypes: {
+        value: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ variant, size, type, properties, prefix, suffix, icon, 'icon-flip': iconFlip, 'icon-rotate': iconRotate, 'icon-position': iconPosition, value, label, loading, placeholder, helper, required, 'show-optional': showOptional, autofocus, error, 'error-placement': errorPlacement, disabled, focused, 'force-show-tooltip': forceShowTooltip, 'select-all-on-focus': selectAllOnFocus, 'focus-method': focusMethod, 'optional-template': optionalTemplate, 'show-add-on-empty': showAddOnEmpty, 'add-text': addText, }) => html `
+		<p-field
+			variant=${variant ?? nothing}
+			size=${size ?? nothing}
+			type=${type ?? nothing}
+			properties=${properties ?? nothing}
+			prefix=${prefix ?? nothing}
+			suffix=${suffix ?? nothing}
+			icon=${icon ?? nothing}
+			icon-flip=${iconFlip ?? nothing}
+			icon-rotate=${iconRotate ?? nothing}
+			icon-position=${iconPosition ?? nothing}
+			value=${value ?? nothing}
+			label=${label ?? nothing}
+			loading=${loading ?? nothing}
+			placeholder=${placeholder ?? nothing}
+			helper=${helper ?? nothing}
+			required=${required ?? nothing}
+			show-optional=${showOptional ?? nothing}
+			autofocus=${autofocus ?? nothing}
+			error=${error ?? nothing}
+			error-placement=${errorPlacement ?? nothing}
+			disabled=${disabled ?? nothing}
+			focused=${focused ?? nothing}
+			force-show-tooltip=${forceShowTooltip ?? nothing}
+			select-all-on-focus=${selectAllOnFocus ?? nothing}
+			focus-method=${focusMethod ?? nothing}
+			optional-template=${optionalTemplate ?? nothing}
+			show-add-on-empty=${showAddOnEmpty ?? nothing}
+			add-text=${addText ?? nothing}
+			@valueChange=${action('valueChange')}
+			@inputRefChange=${action('inputRefChange')}
+			@add=${action('add clicked')}
+		/>
+	`,
+};
+export const OverflowReadOnly = {
+    render: ({ size, type, properties, prefix, suffix, icon, 'icon-flip': iconFlip, 'icon-rotate': iconRotate, 'icon-position': iconPosition, label, loading, placeholder, helper, required, autofocus, error, 'error-placement': errorPlacement, disabled, focused, 'force-show-tooltip': forceShowTooltip, 'select-all-on-focus': selectAllOnFocus, 'focus-method': focusMethod, 'optional-template': optionalTemplate, }) => html `
+		<p-field
+			variant="read"
+			size=${size ?? nothing}
+			type=${type ?? nothing}
+			properties=${properties ?? nothing}
+			prefix=${prefix ?? nothing}
+			suffix=${suffix ?? nothing}
+			icon=${icon ?? nothing}
+			icon-flip=${iconFlip ?? nothing}
+			icon-rotate=${iconRotate ?? nothing}
+			icon-position=${iconPosition ?? nothing}
+			label=${label ?? nothing}
+			loading=${loading ?? nothing}
+			placeholder=${placeholder ?? nothing}
+			helper=${helper ?? nothing}
+			required=${required ?? nothing}
+			autofocus=${autofocus ?? nothing}
+			error=${error ?? nothing}
+			error-placement=${errorPlacement ?? nothing}
+			disabled=${disabled ?? nothing}
+			focused=${focused ?? nothing}
+			force-show-tooltip=${forceShowTooltip ?? nothing}
+			select-all-on-focus=${selectAllOnFocus ?? nothing}
+			focus-method=${focusMethod ?? nothing}
+			optional-template=${optionalTemplate ?? nothing}
+			@valueChange=${action('valueChange')}
+			@inputRefChange=${action('inputRefChange')}
+		>
+			<a
+				slot="value"
+				class="hover:text-inidgo-700 block w-full overflow-hidden text-ellipsis whitespace-nowrap text-indigo-600 hover:underline"
+				href="https://google.com"
+			>
+				This is a very very very very very very long text This is a very very
+				very very very very long text This is a very very very very very very
+				long text This is a very very very very very very long text This is a
+				very very very very very very long text This is a very very very very
+				very very long text This is a very very very very very very long t;ext
+			</a>
+		</p-field>
+	`,
+};
+const withPreventDefault = handler => e => {
+    e.preventDefault();
+    handler(e);
+};
+export const InsideForm = {
+    render: () => html `
+		<form @submit=${withPreventDefault(action('submit'))}>
+			<p-field
+				value="Test"
+				@input=${action('valuechange')}
+			>
+			</p-field>
+			<p-button type="submit">Submitt</p-button>
+		</form>
+	`,
+};

package/dist/collection/components/molecules/label/label.stories.js

@@ -0,0 +1,28 @@
+import { html, nothing } from "lit";
+const meta = {
+    title: 'Design System/Molecules/Label',
+    component: 'p-label',
+    args: {
+        content: 'Label',
+    },
+    argTypes: {
+        content: {
+            type: 'string',
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: ({ content, variant, 'icon-only': iconOnly, icon, 'icon-flip': iconFlip, 'icon-rotate': iconRotate, 'keep-mobile-content': keepMobileContent, }) => html `
+		<p-label
+			variant=${variant ?? nothing}
+			icon-only=${iconOnly ?? nothing}
+			icon=${icon ?? nothing}
+			icon-flip=${iconFlip ?? nothing}
+			icon-rotate=${iconRotate ?? nothing}
+			keep-mobile-content=${keepMobileContent ?? nothing}
+		>
+			${content}
+		</p-label>
+	`,
+};

package/dist/collection/components/molecules/navigation/item/navigation-item.component.js

@@ -88,13 +88,13 @@ export class NavigationItem {
     render() {
         const TagType = this.as;
         const active = asBoolean(this.active) || this.class?.includes('active');
-        return (h(ThemedHost, { key: 'f683b2979f9fde20b6e37ba7f3460fd052cce426', class: cn('p-navigation-item inline-block', this.class) }, h(TagType, { key: '8f9b4557b535d893375bcbe9108a618aff26974e', class: navigationItem({
+        return (h(ThemedHost, { key: '4ae6c89f2d7534c698b816955488c73bd358d70e', class: cn('inline-block', this.class) }, h(TagType, { key: '911611a89bf9c250328e5b5397d65b5c65970a74', class: navigationItem({
                 icon: !!this.icon,
                 active,
-            }), href: this.href, target: this.target }, h("div", { key: '6a32cd63b465492becb679ba08175e79a9c053c8', class: navigationItemIconContainer({ active }) }, h("p-icon", { key: '5fd49857c3f424479731379311ee426d2bf9b79e', variant: this.icon })), h("span", { key: '8d1527282d584b49e7990455e6bba80debd48cd5', class: cn({
+            }), href: this.href, target: this.target }, h("div", { key: 'bfdc1882c4bedcd1ee2672b7112737eacbb4ad26', class: navigationItemIconContainer({ active }) }, h("p-icon", { key: 'be619184b36c520b9e0b7b60963bffdec115b773', variant: this.icon })), h("span", { key: 'db23af321af6eebca65534c183451920932756d3', class: cn({
                 'has-counter': !!this.counter,
                 'w-full': this.applyFullWidth,
-            }) }, h("slot", { key: '6b9480c94455eeb524a029f21794fc89cb31c857' })), !!this.counter && this.counter !== '0' && (h("p-badge", { key: '7677e25cb31c5f98bbe70b05e4ca95c518ab696c' }, this.counter)), !!this.loading && h("p-loader", { key: 'c006a2604a54309028adda2d3aaff26e1d0acd3c', class: 'ml-auto' }))));
+            }) }, h("slot", { key: 'a555a9e414129555e1375b97f7f8e222fd412fe5' })), !!this.counter && this.counter !== '0' && (h("p-badge", { key: 'a6014594a3c7969cd44705420e285ea81478ac42' }, this.counter)), !!this.loading && h("p-loader", { key: '1755e9547e0fe49a6c9c7f254350ed21f74bca25', class: 'ml-auto' }))));
     }
     static get is() { return "p-navigation-item"; }
     static get encapsulation() { return "scoped"; }