@politiet/sheriff-web-components 2.13.0 → 2.14.0

package/dist/sds-file-upload/sds-file-upload.styles.js

@@ -0,0 +1,234 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		--_sds-file-upload-gap: var(--sds-file-upload-gap, var(--sds-spacing-4xs));
+		--_sds-file-upload-font-family: var(--sds-file-upload-font-family, var(--sds-typography-font-family));
+		--_sds-file-upload-margin-block-end: var(--sds-file-upload-margin-block-end, var(--sds-spacing-3xs));
+
+		--_sds-file-upload-label-font-size: var(--sds-file-upload-label-font-size, var(--sds-components-font-size-content-md));
+		--_sds-file-upload-label-font-weight: var(--sds-file-upload-label-font-weight, var(--sds-typography-font-weight-medium));
+		--_sds-file-upload-label-line-height: var(--sds-file-upload-label-line-height, var(--sds-components-line-height-squeezed-md));
+		--_sds-file-upload-label-text-color: var(--sds-file-upload-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
+
+		--_sds-file-upload-helptext-text-color: var(--sds-file-upload-helptext-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
+		--_sds-file-upload-helptext-font-size: var(--sds-file-upload-helptext-font-size, var(--sds-components-font-size-content-md));
+		--_sds-file-upload-helptext-font-weight: var(--sds-file-upload-helptext-font-weight, var(--sds-typography-font-weight-regular));
+		--_sds-file-upload-helptext-line-height: var(--sds-file-upload-helptext-line-height, var(--sds-components-line-height-squeezed-md));
+
+		--_sds-file-upload-file-limitation-text-font-size: var(--sds-file-upload-file-limitation-text-font-size, var(--sds-typography-detail-xs-desktop-font-size));
+		--_sds-file-upload-file-limitation-text-font-weight: var(--sds-file-upload-file-limitation-text-font-weight, var(--sds-typography-detail-xs-desktop-font-weight));
+		--_sds-file-upload-file-limitation-text-line-height: var(--sds-file-upload-file-limitation-text-line-height, var(--sds-typography-detail-xs-desktop-line-height));
+		--_sds-file-upload-file-limitation-text-color: var(--sds-file-upload-file-limitation-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
+
+		--_sds-file-upload-dropzone-background: var(--sds-file-upload-dropzone-background, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
+		--_sds-file-upload-dropzone-border-color: var(--sds-file-upload-dropzone-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));
+		--_sds-file-upload-dropzone-border-width: var(--sds-file-upload-dropzone-border-width, var(--sds-border-sm));
+		--_sds-file-upload-dropzone-border-radius: var(--sds-file-upload-dropzone-border-radius, var(--sds-radius-md));
+		--_sds-file-upload-dropzone-padding: var(--sds-file-upload-dropzone-padding, var(--sds-spacing-sm));
+		--_sds-file-upload-dropzone-margin-block-start: var(--sds-file-upload-dropzone-margin-block-start, var(--sds-spacing-3xs));
+		--_sds-file-upload-dropzone-gap: var(--sds-file-upload-dropzone-gap, var(--sds-spacing-xs));
+		--_sds-file-upload-dropzone-dragging-filter: var(--sds-file-upload-dropzone-dragging-filter, blur(8px));
+		--_sds-file-upload-dropzone-drop-hint-display: var(--sds-file-upload-dropzone-drop-hint-display, none);
+
+		--_sds-file-upload-drop-text-font-size: var(--sds-file-upload-drop-text-font-size, var(--sds-components-font-size-content-md));
+		--_sds-file-upload-drop-text-line-height: var(--sds-file-upload-drop-text-line-height, var(--sds-components-line-height-squeezed-md));
+		--_sds-file-upload-drop-text-font-weight: var(--sds-file-upload-drop-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));
+		--_sds-file-upload-drop-text-color: var(--sds-file-upload-drop-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
+
+		--_sds-file-upload-error-border-color: var(--sds-file-upload-error-border-color, var(--sds-color-alert-danger-border-default));
+
+		--_sds-file-upload-focus-color-outer: var(--sds-file-upload-focus-color-outer, var(--sds-color-states-focus-outer));
+		--_sds-file-upload-focus-color-inner: var(--sds-file-upload-focus-color-inner, var(--sds-color-states-focus-inner));
+		--_sds-file-upload-focus-spacing: var(--sds-file-upload-focus-spacing, var(--sds-color-states-focus-spacing));
+		--_sds-file-upload-focus-outline-size: var(--sds-file-upload-focus-outline-size, var(--sds-color-states-focus-outline-size));
+
+		--_sds-file-upload-disabled-opacity: var(--sds-file-upload-disabled-opacity, var(--sds-color-states-disabled-opacity));
+
+		--sds-icon-color: var(--sds-file-upload-icon-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
+
+		all: unset;
+		display: block;
+	}
+
+	:host([size='sm']) {
+		--_sds-file-upload-label-font-size: var(--sds-file-upload-label-font-size, var(--sds-components-font-size-content-sm));
+		--_sds-file-upload-label-line-height: var(--sds-file-upload-label-line-height, var(--sds-components-line-height-squeezed-sm));
+		--_sds-file-upload-helptext-font-size: var(--sds-file-upload-helptext-font-size, var(--sds-components-font-size-content-sm));
+		--_sds-file-upload-helptext-line-height: var(--sds-file-upload-helptext-line-height, var(--sds-components-line-height-squeezed-sm));
+		--_sds-file-upload-drop-text-font-size: var(--sds-file-upload-drop-text-font-size, var(--sds-components-font-size-content-sm));
+		--_sds-file-upload-drop-text-line-height: var(--sds-file-upload-drop-text-line-height, var(--sds-components-line-height-squeezed-sm));
+	}
+
+	:host([size='lg']) {
+		--_sds-file-upload-label-font-size: var(--sds-file-upload-label-font-size, var(--sds-components-font-size-content-lg));
+		--_sds-file-upload-label-line-height: var(--sds-file-upload-label-line-height, var(--sds-components-line-height-squeezed-lg));
+		--_sds-file-upload-helptext-font-size: var(--sds-file-upload-helptext-font-size, var(--sds-components-font-size-content-lg));
+		--_sds-file-upload-helptext-line-height: var(--sds-file-upload-helptext-line-height, var(--sds-components-line-height-squeezed-lg));
+		--_sds-file-upload-drop-text-font-size: var(--sds-file-upload-drop-text-font-size, var(--sds-components-font-size-content-lg));
+		--_sds-file-upload-drop-text-line-height: var(--sds-file-upload-drop-text-line-height, var(--sds-components-line-height-squeezed-lg));
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	:host([disabled]) {
+		opacity: var(--_sds-file-upload-disabled-opacity);
+		pointer-events: none;
+	}
+
+	.sds-file-upload {
+		display: flex;
+		flex-direction: column;
+		gap: var(--_sds-file-upload-gap);
+		font-family: var(--_sds-file-upload-font-family);
+		margin-block-end: var(--_sds-file-upload-margin-block-end);
+	}
+
+	.sds-file-upload__label {
+		font-size: var(--_sds-file-upload-label-font-size);
+		font-weight: var(--_sds-file-upload-label-font-weight);
+		line-height: var(--_sds-file-upload-label-line-height);
+		color: var(--_sds-file-upload-label-text-color);
+
+		&[hidden] {
+			display: none;
+		}
+	}
+
+	.sds-file-upload__help-text {
+		display: block;
+		color: var(--_sds-file-upload-helptext-text-color);
+		font-size: var(--_sds-file-upload-helptext-font-size);
+		font-weight: var(--_sds-file-upload-helptext-font-weight);
+		line-height: var(--_sds-file-upload-helptext-line-height);
+		margin: 0;
+	}
+
+	.sds-file-upload__file-limitation-text {
+		margin: 0;
+		font-size: var(--_sds-file-upload-file-limitation-text-font-size);
+		font-weight: var(--_sds-file-upload-file-limitation-text-font-weight);
+		line-height: var(--_sds-file-upload-file-limitation-text-line-height);
+		color: var(--_sds-file-upload-file-limitation-text-color);
+	}
+
+	.sds-file-upload__input {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		opacity: 0;
+		cursor: pointer;
+	}
+
+	.sds-file-upload__dropzone:has(.sds-file-upload__input:focus-visible) {
+		box-shadow: 0 0 0 var(--_sds-file-upload-focus-spacing) var(--_sds-file-upload-focus-color-inner);
+		outline: var(--_sds-file-upload-focus-outline-size) solid var(--_sds-file-upload-focus-color-outer);
+		outline-offset: var(--_sds-file-upload-focus-spacing);
+	}
+
+	.sds-file-upload__dropzone {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: var(--_sds-file-upload-dropzone-gap);
+		padding: var(--_sds-file-upload-dropzone-padding);
+		margin-block-start: var(--_sds-file-upload-dropzone-margin-block-start);
+		text-align: center;
+		cursor: pointer;
+		background: var(--_sds-file-upload-dropzone-background);
+		border: var(--_sds-file-upload-dropzone-border-width) dashed var(--_sds-file-upload-dropzone-border-color);
+		border-radius: var(--_sds-file-upload-dropzone-border-radius);
+		box-sizing: border-box;
+		position: relative;
+		transition:
+			background-color 0.1s ease-in-out,
+			border-color 0.1s ease-in-out;
+
+		&:hover {
+			--_sds-file-upload-dropzone-background: var(--sds-file-upload-dropzone-background, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));
+			--_sds-file-upload-dropzone-border-color: var(--sds-file-upload-dropzone-border-color, var(--sds-color-border-strong, var(--sds-color-main-border-strong)));
+		}
+
+		&:hover .sds-file-upload__trigger {
+			--sds-button-background-color: transparent;
+			--sds-button-border-color: var(--sds-color-action-default, var(--sds-color-main-action-default));
+			--sds-button-text-color: var(--sds-color-action-default, var(--sds-color-main-action-default));
+		}
+
+		&:active .sds-file-upload__trigger {
+			--sds-button-background-color: var(--sds-color-surface-active, var(--sds-color-main-surface-active));
+			--sds-button-border-color: var(--sds-color-action-active, var(--sds-color-main-action-active));
+		}
+
+		.sds-file-upload__drop-hint {
+			backdrop-filter: var(--_sds-file-upload-dropzone-dragging-filter);
+			display: var(--_sds-file-upload-dropzone-drop-hint-display);
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			gap: var(--_sds-file-upload-dropzone-gap);
+			position: absolute;
+			inset: var(--_sds-file-upload-dropzone-border-width);
+			border-radius: var(--_sds-file-upload-dropzone-border-radius);
+			pointer-events: none;
+
+			.sds-file-upload__drop-hint-text {
+				font-size: var(--_sds-file-upload-drop-text-font-size);
+				font-weight: var(--_sds-file-upload-drop-text-font-weight);
+				line-height: var(--_sds-file-upload-drop-text-line-height);
+			}
+		}
+	}
+
+	.sds-file-upload__dropzone--dragging {
+		--_sds-file-upload-dropzone-background: var(--sds-file-upload-dropzone-background, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));
+		--_sds-file-upload-dropzone-border-color: var(--sds-file-upload-dropzone-border-color, var(--sds-color-border-strong, var(--sds-color-main-border-strong)));
+
+		.sds-file-upload__trigger {
+			--sds-button-background-color: transparent;
+			--sds-button-border-color: var(--sds-color-action-default, var(--sds-color-main-action-default));
+			--sds-button-text-color: var(--sds-color-action-default, var(--sds-color-main-action-default));
+		}
+
+		.sds-file-upload__drop-hint {
+			--_sds-file-upload-dropzone-drop-hint-display: var(--sds-file-upload-dropzone-drop-hint-display, flex);
+		}
+	}
+
+	.sds-file-upload__dropzone--error {
+		border-color: var(--_sds-file-upload-error-border-color);
+	}
+
+	:host([variant='compact']) .sds-file-upload__dropzone {
+		--_sds-file-upload-dropzone-gap: var(--sds-file-upload-dropzone-gap, var(--sds-spacing-3xs));
+		flex-direction: row;
+		flex-wrap: wrap;
+
+		.sds-file-upload__drop-hint {
+			flex-direction: row;
+		}
+	}
+
+	.sds-file-upload__trigger {
+		--sds-button-background-color: transparent;
+		--sds-button-border-color: var(--sds-color-action-default, var(--sds-color-neutral-action-default));
+		--sds-button-text-color: var(--sds-color-action-default, var(--sds-color-neutral-action-default));
+	}
+
+	.sds-file-upload__drop-text {
+		margin: 0;
+		font-size: var(--_sds-file-upload-drop-text-font-size);
+		font-weight: var(--_sds-file-upload-drop-text-font-weight);
+		line-height: var(--_sds-file-upload-drop-text-line-height);
+		color: var(--_sds-file-upload-drop-text-color);
+	}
+
+	.sds-file-upload__error-message {
+		margin-block-end: var(--_sds-file-upload-margin-block-end);
+	}
+`;
+//# sourceMappingURL=sds-file-upload.styles.js.map

package/dist/sds-file-upload/sds-file-upload.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-file-upload.styles.js","sourceRoot":"","sources":["../../src/sds-file-upload/sds-file-upload.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuOxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-file-upload-gap: var(--sds-file-upload-gap, var(--sds-spacing-4xs));\n\t\t--_sds-file-upload-font-family: var(--sds-file-upload-font-family, var(--sds-typography-font-family));\n\t\t--_sds-file-upload-margin-block-end: var(--sds-file-upload-margin-block-end, var(--sds-spacing-3xs));\n\n\t\t--_sds-file-upload-label-font-size: var(--sds-file-upload-label-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-file-upload-label-font-weight: var(--sds-file-upload-label-font-weight, var(--sds-typography-font-weight-medium));\n\t\t--_sds-file-upload-label-line-height: var(--sds-file-upload-label-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-file-upload-label-text-color: var(--sds-file-upload-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-file-upload-helptext-text-color: var(--sds-file-upload-helptext-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\t\t--_sds-file-upload-helptext-font-size: var(--sds-file-upload-helptext-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-file-upload-helptext-font-weight: var(--sds-file-upload-helptext-font-weight, var(--sds-typography-font-weight-regular));\n\t\t--_sds-file-upload-helptext-line-height: var(--sds-file-upload-helptext-line-height, var(--sds-components-line-height-squeezed-md));\n\n\t\t--_sds-file-upload-file-limitation-text-font-size: var(--sds-file-upload-file-limitation-text-font-size, var(--sds-typography-detail-xs-desktop-font-size));\n\t\t--_sds-file-upload-file-limitation-text-font-weight: var(--sds-file-upload-file-limitation-text-font-weight, var(--sds-typography-detail-xs-desktop-font-weight));\n\t\t--_sds-file-upload-file-limitation-text-line-height: var(--sds-file-upload-file-limitation-text-line-height, var(--sds-typography-detail-xs-desktop-line-height));\n\t\t--_sds-file-upload-file-limitation-text-color: var(--sds-file-upload-file-limitation-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));\n\n\t\t--_sds-file-upload-dropzone-background: var(--sds-file-upload-dropzone-background, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));\n\t\t--_sds-file-upload-dropzone-border-color: var(--sds-file-upload-dropzone-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));\n\t\t--_sds-file-upload-dropzone-border-width: var(--sds-file-upload-dropzone-border-width, var(--sds-border-sm));\n\t\t--_sds-file-upload-dropzone-border-radius: var(--sds-file-upload-dropzone-border-radius, var(--sds-radius-md));\n\t\t--_sds-file-upload-dropzone-padding: var(--sds-file-upload-dropzone-padding, var(--sds-spacing-sm));\n\t\t--_sds-file-upload-dropzone-margin-block-start: var(--sds-file-upload-dropzone-margin-block-start, var(--sds-spacing-3xs));\n\t\t--_sds-file-upload-dropzone-gap: var(--sds-file-upload-dropzone-gap, var(--sds-spacing-xs));\n\t\t--_sds-file-upload-dropzone-dragging-filter: var(--sds-file-upload-dropzone-dragging-filter, blur(8px));\n\t\t--_sds-file-upload-dropzone-drop-hint-display: var(--sds-file-upload-dropzone-drop-hint-display, none);\n\n\t\t--_sds-file-upload-drop-text-font-size: var(--sds-file-upload-drop-text-font-size, var(--sds-components-font-size-content-md));\n\t\t--_sds-file-upload-drop-text-line-height: var(--sds-file-upload-drop-text-line-height, var(--sds-components-line-height-squeezed-md));\n\t\t--_sds-file-upload-drop-text-font-weight: var(--sds-file-upload-drop-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));\n\t\t--_sds-file-upload-drop-text-color: var(--sds-file-upload-drop-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\t--_sds-file-upload-error-border-color: var(--sds-file-upload-error-border-color, var(--sds-color-alert-danger-border-default));\n\n\t\t--_sds-file-upload-focus-color-outer: var(--sds-file-upload-focus-color-outer, var(--sds-color-states-focus-outer));\n\t\t--_sds-file-upload-focus-color-inner: var(--sds-file-upload-focus-color-inner, var(--sds-color-states-focus-inner));\n\t\t--_sds-file-upload-focus-spacing: var(--sds-file-upload-focus-spacing, var(--sds-color-states-focus-spacing));\n\t\t--_sds-file-upload-focus-outline-size: var(--sds-file-upload-focus-outline-size, var(--sds-color-states-focus-outline-size));\n\n\t\t--_sds-file-upload-disabled-opacity: var(--sds-file-upload-disabled-opacity, var(--sds-color-states-disabled-opacity));\n\n\t\t--sds-icon-color: var(--sds-file-upload-icon-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));\n\n\t\tall: unset;\n\t\tdisplay: block;\n\t}\n\n\t:host([size='sm']) {\n\t\t--_sds-file-upload-label-font-size: var(--sds-file-upload-label-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-file-upload-label-line-height: var(--sds-file-upload-label-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-file-upload-helptext-font-size: var(--sds-file-upload-helptext-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-file-upload-helptext-line-height: var(--sds-file-upload-helptext-line-height, var(--sds-components-line-height-squeezed-sm));\n\t\t--_sds-file-upload-drop-text-font-size: var(--sds-file-upload-drop-text-font-size, var(--sds-components-font-size-content-sm));\n\t\t--_sds-file-upload-drop-text-line-height: var(--sds-file-upload-drop-text-line-height, var(--sds-components-line-height-squeezed-sm));\n\t}\n\n\t:host([size='lg']) {\n\t\t--_sds-file-upload-label-font-size: var(--sds-file-upload-label-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-file-upload-label-line-height: var(--sds-file-upload-label-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-file-upload-helptext-font-size: var(--sds-file-upload-helptext-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-file-upload-helptext-line-height: var(--sds-file-upload-helptext-line-height, var(--sds-components-line-height-squeezed-lg));\n\t\t--_sds-file-upload-drop-text-font-size: var(--sds-file-upload-drop-text-font-size, var(--sds-components-font-size-content-lg));\n\t\t--_sds-file-upload-drop-text-line-height: var(--sds-file-upload-drop-text-line-height, var(--sds-components-line-height-squeezed-lg));\n\t}\n\n\t:host([hidden]) {\n\t\tdisplay: none;\n\t}\n\n\t:host([disabled]) {\n\t\topacity: var(--_sds-file-upload-disabled-opacity);\n\t\tpointer-events: none;\n\t}\n\n\t.sds-file-upload {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-file-upload-gap);\n\t\tfont-family: var(--_sds-file-upload-font-family);\n\t\tmargin-block-end: var(--_sds-file-upload-margin-block-end);\n\t}\n\n\t.sds-file-upload__label {\n\t\tfont-size: var(--_sds-file-upload-label-font-size);\n\t\tfont-weight: var(--_sds-file-upload-label-font-weight);\n\t\tline-height: var(--_sds-file-upload-label-line-height);\n\t\tcolor: var(--_sds-file-upload-label-text-color);\n\n\t\t&[hidden] {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t.sds-file-upload__help-text {\n\t\tdisplay: block;\n\t\tcolor: var(--_sds-file-upload-helptext-text-color);\n\t\tfont-size: var(--_sds-file-upload-helptext-font-size);\n\t\tfont-weight: var(--_sds-file-upload-helptext-font-weight);\n\t\tline-height: var(--_sds-file-upload-helptext-line-height);\n\t\tmargin: 0;\n\t}\n\n\t.sds-file-upload__file-limitation-text {\n\t\tmargin: 0;\n\t\tfont-size: var(--_sds-file-upload-file-limitation-text-font-size);\n\t\tfont-weight: var(--_sds-file-upload-file-limitation-text-font-weight);\n\t\tline-height: var(--_sds-file-upload-file-limitation-text-line-height);\n\t\tcolor: var(--_sds-file-upload-file-limitation-text-color);\n\t}\n\n\t.sds-file-upload__input {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tmargin: 0;\n\t\topacity: 0;\n\t\tcursor: pointer;\n\t}\n\n\t.sds-file-upload__dropzone:has(.sds-file-upload__input:focus-visible) {\n\t\tbox-shadow: 0 0 0 var(--_sds-file-upload-focus-spacing) var(--_sds-file-upload-focus-color-inner);\n\t\toutline: var(--_sds-file-upload-focus-outline-size) solid var(--_sds-file-upload-focus-color-outer);\n\t\toutline-offset: var(--_sds-file-upload-focus-spacing);\n\t}\n\n\t.sds-file-upload__dropzone {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: var(--_sds-file-upload-dropzone-gap);\n\t\tpadding: var(--_sds-file-upload-dropzone-padding);\n\t\tmargin-block-start: var(--_sds-file-upload-dropzone-margin-block-start);\n\t\ttext-align: center;\n\t\tcursor: pointer;\n\t\tbackground: var(--_sds-file-upload-dropzone-background);\n\t\tborder: var(--_sds-file-upload-dropzone-border-width) dashed var(--_sds-file-upload-dropzone-border-color);\n\t\tborder-radius: var(--_sds-file-upload-dropzone-border-radius);\n\t\tbox-sizing: border-box;\n\t\tposition: relative;\n\t\ttransition:\n\t\t\tbackground-color 0.1s ease-in-out,\n\t\t\tborder-color 0.1s ease-in-out;\n\n\t\t&:hover {\n\t\t\t--_sds-file-upload-dropzone-background: var(--sds-file-upload-dropzone-background, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t\t--_sds-file-upload-dropzone-border-color: var(--sds-file-upload-dropzone-border-color, var(--sds-color-border-strong, var(--sds-color-main-border-strong)));\n\t\t}\n\n\t\t&:hover .sds-file-upload__trigger {\n\t\t\t--sds-button-background-color: transparent;\n\t\t\t--sds-button-border-color: var(--sds-color-action-default, var(--sds-color-main-action-default));\n\t\t\t--sds-button-text-color: var(--sds-color-action-default, var(--sds-color-main-action-default));\n\t\t}\n\n\t\t&:active .sds-file-upload__trigger {\n\t\t\t--sds-button-background-color: var(--sds-color-surface-active, var(--sds-color-main-surface-active));\n\t\t\t--sds-button-border-color: var(--sds-color-action-active, var(--sds-color-main-action-active));\n\t\t}\n\n\t\t.sds-file-upload__drop-hint {\n\t\t\tbackdrop-filter: var(--_sds-file-upload-dropzone-dragging-filter);\n\t\t\tdisplay: var(--_sds-file-upload-dropzone-drop-hint-display);\n\t\t\tflex-direction: column;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tgap: var(--_sds-file-upload-dropzone-gap);\n\t\t\tposition: absolute;\n\t\t\tinset: var(--_sds-file-upload-dropzone-border-width);\n\t\t\tborder-radius: var(--_sds-file-upload-dropzone-border-radius);\n\t\t\tpointer-events: none;\n\n\t\t\t.sds-file-upload__drop-hint-text {\n\t\t\t\tfont-size: var(--_sds-file-upload-drop-text-font-size);\n\t\t\t\tfont-weight: var(--_sds-file-upload-drop-text-font-weight);\n\t\t\t\tline-height: var(--_sds-file-upload-drop-text-line-height);\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-file-upload__dropzone--dragging {\n\t\t--_sds-file-upload-dropzone-background: var(--sds-file-upload-dropzone-background, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t--_sds-file-upload-dropzone-border-color: var(--sds-file-upload-dropzone-border-color, var(--sds-color-border-strong, var(--sds-color-main-border-strong)));\n\n\t\t.sds-file-upload__trigger {\n\t\t\t--sds-button-background-color: transparent;\n\t\t\t--sds-button-border-color: var(--sds-color-action-default, var(--sds-color-main-action-default));\n\t\t\t--sds-button-text-color: var(--sds-color-action-default, var(--sds-color-main-action-default));\n\t\t}\n\n\t\t.sds-file-upload__drop-hint {\n\t\t\t--_sds-file-upload-dropzone-drop-hint-display: var(--sds-file-upload-dropzone-drop-hint-display, flex);\n\t\t}\n\t}\n\n\t.sds-file-upload__dropzone--error {\n\t\tborder-color: var(--_sds-file-upload-error-border-color);\n\t}\n\n\t:host([variant='compact']) .sds-file-upload__dropzone {\n\t\t--_sds-file-upload-dropzone-gap: var(--sds-file-upload-dropzone-gap, var(--sds-spacing-3xs));\n\t\tflex-direction: row;\n\t\tflex-wrap: wrap;\n\n\t\t.sds-file-upload__drop-hint {\n\t\t\tflex-direction: row;\n\t\t}\n\t}\n\n\t.sds-file-upload__trigger {\n\t\t--sds-button-background-color: transparent;\n\t\t--sds-button-border-color: var(--sds-color-action-default, var(--sds-color-neutral-action-default));\n\t\t--sds-button-text-color: var(--sds-color-action-default, var(--sds-color-neutral-action-default));\n\t}\n\n\t.sds-file-upload__drop-text {\n\t\tmargin: 0;\n\t\tfont-size: var(--_sds-file-upload-drop-text-font-size);\n\t\tfont-weight: var(--_sds-file-upload-drop-text-font-weight);\n\t\tline-height: var(--_sds-file-upload-drop-text-line-height);\n\t\tcolor: var(--_sds-file-upload-drop-text-color);\n\t}\n\n\t.sds-file-upload__error-message {\n\t\tmargin-block-end: var(--_sds-file-upload-margin-block-end);\n\t}\n`;\n"]}

package/dist/sds-file-upload-file-list/sds-file-upload-file-list.d.ts

@@ -0,0 +1,14 @@
+import { SDSElement } from '../utils/sds-element';
+export type SDSFileUploadFileListProps = object;
+export declare class SDSFileUploadFileList extends SDSElement {
+    static styles: import("lit").CSSResult[];
+    readonly internals: ElementInternals;
+    constructor();
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-file-upload-file-list': SDSFileUploadFileList;
+    }
+}
+//# sourceMappingURL=sds-file-upload-file-list.d.ts.map

package/dist/sds-file-upload-file-list/sds-file-upload-file-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-file-upload-file-list.d.ts","sourceRoot":"","sources":["../../src/sds-file-upload-file-list/sds-file-upload-file-list.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAMlD,MAAM,MAAM,0BAA0B,GAAG,MAAM,CAAC;AAEhD,qBACa,qBAAsB,SAAQ,UAAU;IACpD,OAAgB,MAAM,4BAAY;IAClC,SAAgB,SAAS,EAAE,gBAAgB,CAAC;;IAQnC,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,2BAA2B,EAAE,qBAAqB,CAAC;KACnD;CACD"}

package/dist/sds-file-upload-file-list/sds-file-upload-file-list.js

@@ -0,0 +1,26 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from 'lit';
+import { SDSElement } from '../utils/sds-element';
+import { guardedCustomElement } from '../utils/guarded-custom-element';
+import { styles } from './sds-file-upload-file-list.styles';
+let SDSFileUploadFileList = class SDSFileUploadFileList extends SDSElement {
+    constructor() {
+        super();
+        this.internals = this.attachInternals();
+        this.internals.role = 'list';
+    }
+    render() {
+        return html `<div class="sds-file-upload-file-list__items" role="presentation"><slot></slot></div>`;
+    }
+};
+SDSFileUploadFileList.styles = [styles];
+SDSFileUploadFileList = __decorate([
+    guardedCustomElement('sds-file-upload-file-list')
+], SDSFileUploadFileList);
+export { SDSFileUploadFileList };
+//# sourceMappingURL=sds-file-upload-file-list.js.map

package/dist/sds-file-upload-file-list/sds-file-upload-file-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-file-upload-file-list.js","sourceRoot":"","sources":["../../src/sds-file-upload-file-list/sds-file-upload-file-list.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,oCAAoC,CAAC;AAOrD,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,UAAU;IAIpD;QACC,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACxC,IAAI,CAAC,SAAS,CAAC,IAAI,GAAG,MAAM,CAAC;IAC9B,CAAC;IAEQ,MAAM;QACd,OAAO,IAAI,CAAA,uFAAuF,CAAC;IACpG,CAAC;;AAXe,4BAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AADtB,qBAAqB;IADjC,oBAAoB,CAAC,2BAA2B,CAAC;GACrC,qBAAqB,CAajC","sourcesContent":["import { html } from 'lit';\nimport { SDSElement } from '../utils/sds-element';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-file-upload-file-list.styles';\n\n// The component has no properties; `object` keeps `keyof` empty so the SSR and framework\n// prop types that merge with this collapse to the plain HTML attributes.\nexport type SDSFileUploadFileListProps = object;\n\n@guardedCustomElement('sds-file-upload-file-list')\nexport class SDSFileUploadFileList extends SDSElement {\n\tstatic override styles = [styles];\n\tpublic readonly internals: ElementInternals;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.internals.role = 'list';\n\t}\n\n\toverride render() {\n\t\treturn html`<div class=\"sds-file-upload-file-list__items\" role=\"presentation\"><slot></slot></div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-file-upload-file-list': SDSFileUploadFileList;\n\t}\n}\n"]}

package/dist/sds-file-upload-file-list/sds-file-upload-file-list.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=sds-file-upload-file-list.styles.d.ts.map

package/dist/sds-file-upload-file-list/sds-file-upload-file-list.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-file-upload-file-list.styles.d.ts","sourceRoot":"","sources":["../../src/sds-file-upload-file-list/sds-file-upload-file-list.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgBlB,CAAC"}

package/dist/sds-file-upload-file-list/sds-file-upload-file-list.styles.js

@@ -0,0 +1,19 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		display: block;
+	}
+
+	:host([hidden]) {
+		display: none;
+	}
+
+	.sds-file-upload-file-list__items {
+		--_sds-file-upload-file-list-gap: var(--sds-file-upload-file-list-gap, var(--sds-spacing-3xs));
+
+		display: flex;
+		flex-direction: column;
+		gap: var(--_sds-file-upload-file-list-gap);
+	}
+`;
+//# sourceMappingURL=sds-file-upload-file-list.styles.js.map

package/dist/sds-file-upload-file-list/sds-file-upload-file-list.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-file-upload-file-list.styles.js","sourceRoot":"","sources":["../../src/sds-file-upload-file-list/sds-file-upload-file-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\t:host([hidden]) {\n\t\tdisplay: none;\n\t}\n\n\t.sds-file-upload-file-list__items {\n\t\t--_sds-file-upload-file-list-gap: var(--sds-file-upload-file-list-gap, var(--sds-spacing-3xs));\n\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--_sds-file-upload-file-list-gap);\n\t}\n`;\n"]}

package/dist/sds-file-upload-item/assets/u-progress.js

@@ -0,0 +1,2 @@
+/*! @u-elements/u-progress v1.0.1 | MIT License | https://u-elements.github.io/u-elements/ */
+var e,t=()=>"undefined"!=typeof window&&void 0!==window.document&&void 0!==window.navigator,n=t(),r=n?navigator.userAgent:"",i=/iPad|iPhone|iPod/.test(r);n&&/^Mac/i.test((null==(e=navigator.userAgentData)?void 0:e.platform)||navigator.platform);var o=n&&window.CSSStyleSheet&&document.adoptedStyleSheets,a="undefined"==typeof HTMLElement?class{}:HTMLElement,s=(e,t,n)=>void 0===n?e.getAttribute(t):(null===n?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n),null),l=(e,t,n)=>{const r=document.createElement(e);if(n&&(r.textContent=n),t)for(const[e,n]of Object.entries(t))s(r,e,n);return r},d=(e,n)=>!t()||window.customElements.get(e)||window.customElements.define(e,n),u="value",h="max",c=":host(:not([hidden])) { box-sizing: border-box; border: 1px solid; display: inline-block; height: .5em; width: 10em; overflow: hidden }\n:host::before { content: ''; display: block; height: 100%; background: currentColor; width: var(--percentage, 0%); transition: width .2s }\n:host(:not([value])) { background: linear-gradient(90deg,currentColor 25%, transparent 50%, currentColor 75%) 50%/400% }\n@media (prefers-reduced-motion: no-preference) { :host { animation: indeterminate 2s linear infinite }  }\n@keyframes indeterminate { from { background-position-x: 100% } to { background-position-x: 0 } }",m=((e,t="<slot></slot>")=>`<template shadowrootmode="open">${t}<style>${e}</style></template>`)(c),b=class extends a{constructor(){var e;super(),this._skipAttrChange=!1,((e,t)=>{const n=e.shadowRoot||e.attachShadow({mode:"open"});if(n.querySelector("slot")||n.append(l("slot")),!n.querySelector("style"))if(o){const e=new CSSStyleSheet;e.replaceSync(t),n.adoptedStyleSheets=[e]}else n.append(l("style",null,t))})(this,c),this._internals=null==(e=this.attachInternals)?void 0:e.call(this)}static get observedAttributes(){return["aria-label","aria-labelledby",u,h]}connectedCallback(){s(this,"aria-valuemin","0"),s(this,"aria-valuemax","100"),s(this,"role",i?"img":"progressbar"),this.attributeChangedCallback()}attributeChangedCallback(){if(this._skipAttrChange||!this.hasAttribute("role"))return;this._skipAttrChange=!0;const e=this.position,t=Math.max(0,Math.round(100*e));this.style.setProperty("--percentage",`${t}%`);let n=(e=>{var t;const n=s(e,"aria-label")||"";return[...((null==(t=s(e,"aria-labelledby"))?void 0:t.split(" "))||[]).map(e=>document.getElementById(e.trim()||"-")),...Array.from(e.labels||[])].reduce((e,t)=>{var n;return e||(null==(n=null==t?void 0:t.innerText)?void 0:n.trim())||""},n).trim()})(this);i&&(n=`${n.replace(/\(\d+%\)$/,"")} (${t}%)`.trim()),s(this,"aria-busy",`${-1===e}`),s(this,"aria-label",n),s(this,"aria-labelledby",null),s(this,"aria-valuenow",-1===e?null:`${t}`),this._skipAttrChange=!1}get labels(){var e;const t=null==(e=this._internals)?void 0:e.labels;if(t)return t;const r=(e=>{if(!e||!n)return null;if(window.uElementsId||(window.uElementsId={}),!e.id){const t=e.nodeName.toLowerCase();window.uElementsId[t]||(window.uElementsId[t]=1),e.id=`:${t}${window.uElementsId[t]++}`}return e.id})(this),i=this.closest("label:not([for])");return i&&s(i,"for",r),(e=>{var t;const n=(null==(t=e.getRootNode)?void 0:t.call(e))||e.ownerDocument;return n instanceof Document||n instanceof ShadowRoot?n:document})(this).querySelectorAll(`label[for="${r}"]`)}get position(){return this.hasAttribute(u)?Math.min(this.value/this.max,1):-1}get value(){return Math.min(p(this,u),this.max)}set value(e){g(this,u,e)}get max(){return p(this,h,1)}set max(e){g(this,h,e,1)}};b.formAssociated=!0;var p=(e,t,n=0)=>{const r=s(e,t),i=Number(r);return null===r?n:Number.isFinite(i)&&Math.max(n,i)||n},g=(e,t,n,r=0)=>{const i=Number(n);if(Number.isFinite(i))return s(e,t,`${Math.max(r,i)||r}`);throw new Error(`Failed to set the '${t}' property on 'UHTMLProgressElement': The provided double value is non-finite.`)};d("u-progress",b);export{b as UHTMLProgressElement,m as UHTMLProgressShadowRoot,c as UHTMLProgressStyle};

package/dist/sds-file-upload-item/sds-file-upload-item.d.ts

@@ -0,0 +1,62 @@
+import { type PropertyValues } from 'lit';
+import { SDSElement } from '../utils/sds-element';
+import { SheriffEvent } from '../types';
+import '../sds-button/sds-button';
+import '../sds-icon/sds-icon';
+import '../sds-alert/sds-alert';
+import './assets/u-progress.js';
+export interface SDSFileUploadItemProps {
+    file?: string;
+    'size-in-bytes'?: number;
+    'error-message'?: string;
+    preview?: string;
+    'uploaded-percent'?: number;
+    'uploaded-size-in-bytes'?: number;
+    disabled?: boolean;
+    for?: string;
+}
+declare const SDSFileUploadItem_base: import("../mixins/types").Constructable<import("../mixins/sds-event-dispatcher-mixin").SDSEventDispatcherMixinInterface> & typeof SDSElement;
+export declare class SDSFileUploadItem extends SDSFileUploadItem_base {
+    static styles: import("lit").CSSResult[];
+    readonly internals: ElementInternals;
+    file?: string;
+    sizeInBytes?: number;
+    errorMessage?: string;
+    preview?: string;
+    uploadedPercent?: number;
+    uploadedSizeInBytes?: number;
+    disabled: boolean;
+    /**
+     * The `id` of the `sds-file-upload` this item belongs to. When set, pressing the
+     * remove button removes the matching file from that upload (`removeFile`, or
+     * `dismissRejected` for an item with an `error-message`) and removes this element from the DOM.
+     * The `sds-remove` event still fires, and calling `preventDefault()` on it cancels both.
+     */
+    htmlFor?: string;
+    private _previewImg?;
+    private _removeButton?;
+    private _previewLoaded;
+    constructor();
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    focus(options?: FocusOptions): void;
+    private readonly _handleRemove;
+    private get _hasError();
+    private _removeFromAssociatedUpload;
+    private readonly _renderThumbnail;
+    private readonly _renderFileData;
+    private readonly _renderRemoveButton;
+    private readonly _renderProgress;
+    private readonly _renderErrorAlert;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-file-upload-item': SDSFileUploadItem;
+    }
+    interface GlobalEventHandlersEventMap {
+        'sds-remove': SheriffEvent;
+    }
+}
+export {};
+//# sourceMappingURL=sds-file-upload-item.d.ts.map

package/dist/sds-file-upload-item/sds-file-upload-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-file-upload-item.d.ts","sourceRoot":"","sources":["../../src/sds-file-upload-item/sds-file-upload-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAIzD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGlD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,0BAA0B,CAAC;AAClC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAGhC,MAAM,WAAW,sBAAsB;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;CACb;;AAED,qBACa,iBAAkB,SAAQ,sBAAmC;IAEzE,OAAgB,MAAM,4BAAY;IAElC,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAGD,IAAI,CAAC,EAAE,MAAM,CAAC;IACc,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACc,eAAe,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IACjE,QAAQ,UAAS;IAE7D;;;;;OAKG;IAC0D,OAAO,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,WAAW,CAAC,CAAmB;IACtD,OAAO,CAAC,aAAa,CAAC,CAAc;IAGnE,OAAO,CAAC,cAAc,CAAS;;cASrB,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;cAIzC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAiBhD,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAK5C,OAAO,CAAC,QAAQ,CAAC,aAAa,CAK5B;IAGF,OAAO,KAAK,SAAS,GAEpB;IAED,OAAO,CAAC,2BAA2B;IAsBnC,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAShB;IAEjB,OAAO,CAAC,QAAQ,CAAC,eAAe,CAa9B;IAEF,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAalC;IAEF,OAAO,CAAC,QAAQ,CAAC,eAAe,CAc9B;IAEF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAIhC;IAEO,MAAM;CAqBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,iBAAiB,CAAC;KAC1C;IACD,UAAU,2BAA2B;QACpC,YAAY,EAAE,YAAY,CAAC;KAC3B;CACD"}

package/dist/sds-file-upload-item/sds-file-upload-item.js

@@ -0,0 +1,205 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { guardedCustomElement } from '../utils/guarded-custom-element';
+import { SDSElement } from '../utils/sds-element';
+import { formatBytes } from '../utils/format-bytes';
+import { SDSEventDispatcherMixin } from '../mixins';
+import { styles } from './sds-file-upload-item.styles';
+import '../sds-button/sds-button';
+import '../sds-icon/sds-icon';
+import '../sds-alert/sds-alert';
+import './assets/u-progress.js';
+let SDSFileUploadItem = class SDSFileUploadItem extends SDSEventDispatcherMixin(SDSElement) {
+    // Lifecycle
+    constructor() {
+        super();
+        this.disabled = false;
+        // Internal state
+        this._previewLoaded = false;
+        // Event handlers
+        this._handleRemove = (event) => {
+            event.stopPropagation();
+            if (this.disabled)
+                return;
+            const notCancelled = this.dispatchSheriffEvent('sds-remove');
+            if (notCancelled)
+                this._removeFromAssociatedUpload();
+        };
+        // Rendering
+        this._renderThumbnail = () => this.preview && !this._hasError
+            ? html `<span class="sds-file-upload-item__content-preview" ?data-loaded="${this._previewLoaded}">
+					<img class="sds-file-upload-item__content-preview-image" src="${this.preview}" alt="" />
+				</span>`
+            : html `<sds-icon
+					class="sds-file-upload-item__content-icon"
+					name="${this._hasError ? 'scan_delete-material-outlined' : 'draft-material-outlined'}"
+					size="md"
+				></sds-icon>`;
+        this._renderFileData = () => {
+            const detail = this.sizeInBytes !== undefined ? formatBytes(this.sizeInBytes) : undefined;
+            return html `
+			<span class="sds-file-upload-item__content-data">
+				<span class="sds-file-upload-item__content-file-name">${this.file}</span>
+				${this._hasError
+                ? html `<span class="sds-file-upload-item__content-file-error">Feil ved opplasting</span>`
+                : detail
+                    ? html `<span class="sds-file-upload-item__content-file-detail">${detail}</span>`
+                    : nothing}
+			</span>
+		`;
+        };
+        this._renderRemoveButton = () => html `
+		<sds-button
+			class="sds-file-upload-item__remove"
+			icon
+			variant="tertiary"
+			size="sm"
+			type="button"
+			label="${this.file ? `Fjern ${this.file}` : 'Fjern fil'}"
+			?disabled="${this.disabled}"
+			@click="${this._handleRemove}"
+		>
+			<sds-icon name="delete-material-outlined" size="md"></sds-icon>
+		</sds-button>
+	`;
+        this._renderProgress = () => {
+            const percent = Math.max(0, Math.min(100, Math.round(this.uploadedPercent ?? 0)));
+            return html `
+			<div class="sds-file-upload-item__progress">
+				<u-progress class="sds-file-upload-item__progress-track" value="${percent}" max="100" aria-label="Laster opp ${this.file ?? ''}"></u-progress>
+				<div class="sds-file-upload-item__progress-meta">
+					${this.uploadedSizeInBytes !== undefined
+                ? html `<span class="sds-file-upload-item__progress-uploaded">${formatBytes(this.uploadedSizeInBytes)}</span>`
+                : nothing}
+					<span class="sds-file-upload-item__progress-percent">${percent}%</span>
+				</div>
+			</div>
+		`;
+        };
+        this._renderErrorAlert = () => html `
+		<sds-alert class="sds-file-upload-item__error-alert" size="sm" variant="secondary" data-palette="danger">
+			<p slot="message">${this.errorMessage}</p>
+		</sds-alert>
+	`;
+        this.internals = this.attachInternals();
+        this.internals.role = 'listitem';
+    }
+    willUpdate(changed) {
+        if (changed.has('preview'))
+            this._previewLoaded = false;
+    }
+    updated(changed) {
+        if (!changed.has('preview'))
+            return;
+        const img = this._previewImg;
+        if (!this.preview || this.errorMessage || !img)
+            return;
+        const src = img.src;
+        const markLoaded = () => {
+            if (img.src === src)
+                this._previewLoaded = true;
+        };
+        if (img.decode) {
+            img.decode().then(markLoaded).catch(() => undefined);
+        }
+        else {
+            markLoaded();
+        }
+    }
+    // Public API
+    focus(options) {
+        this._removeButton?.focus(options);
+    }
+    // Internal helpers
+    get _hasError() {
+        return Boolean(this.errorMessage);
+    }
+    _removeFromAssociatedUpload() {
+        if (!this.htmlFor)
+            return;
+        const root = this.getRootNode();
+        const target = root.getElementById?.(this.htmlFor) ?? document.getElementById(this.htmlFor);
+        if (!target || !('removeFile' in target) || !('dismissRejected' in target))
+            return;
+        const upload = target;
+        const matches = (name, size) => name === this.file && (this.sizeInBytes === undefined || size === this.sizeInBytes);
+        if (this.errorMessage) {
+            const rejected = upload.rejectedFiles.find(({ file }) => matches(file.name, file.size));
+            if (rejected)
+                upload.dismissRejected(rejected.file);
+        }
+        else {
+            const file = upload.files.find((candidate) => matches(candidate.name, candidate.size));
+            if (file)
+                upload.removeFile(file);
+        }
+        this.remove();
+    }
+    render() {
+        const itemClasses = { 'sds-file-upload-item': true, 'sds-file-upload-item--error': this._hasError };
+        const isUploading = this.uploadedPercent !== undefined && !this._hasError;
+        return html `
+			<div class="${classMap(itemClasses)}">
+				<div class="sds-file-upload-item__row">
+					<div class="sds-file-upload-item__content">
+						${this._renderThumbnail()}
+						${this._renderFileData()}
+					</div>
+					<div class="sds-file-upload-item__actions">
+						<slot name="actions-end"></slot>
+						${this._renderRemoveButton()}
+					</div>
+				</div>
+				${isUploading ? this._renderProgress() : nothing}
+			</div>
+			${this._hasError ? this._renderErrorAlert() : nothing}
+		`;
+    }
+};
+// Styling
+SDSFileUploadItem.styles = [styles];
+__decorate([
+    property({ type: String, reflect: true })
+], SDSFileUploadItem.prototype, "file", void 0);
+__decorate([
+    property({ type: Number, attribute: 'size-in-bytes', reflect: true })
+], SDSFileUploadItem.prototype, "sizeInBytes", void 0);
+__decorate([
+    property({ type: String, attribute: 'error-message', reflect: true })
+], SDSFileUploadItem.prototype, "errorMessage", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSFileUploadItem.prototype, "preview", void 0);
+__decorate([
+    property({ type: Number, attribute: 'uploaded-percent', reflect: true })
+], SDSFileUploadItem.prototype, "uploadedPercent", void 0);
+__decorate([
+    property({ type: Number, attribute: 'uploaded-size-in-bytes', reflect: true })
+], SDSFileUploadItem.prototype, "uploadedSizeInBytes", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSFileUploadItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'for', reflect: true })
+], SDSFileUploadItem.prototype, "htmlFor", void 0);
+__decorate([
+    query('.sds-file-upload-item__content-preview-image')
+], SDSFileUploadItem.prototype, "_previewImg", void 0);
+__decorate([
+    query('.sds-file-upload-item__remove')
+], SDSFileUploadItem.prototype, "_removeButton", void 0);
+__decorate([
+    state()
+], SDSFileUploadItem.prototype, "_previewLoaded", void 0);
+SDSFileUploadItem = __decorate([
+    guardedCustomElement('sds-file-upload-item')
+], SDSFileUploadItem);
+export { SDSFileUploadItem };
+//# sourceMappingURL=sds-file-upload-item.js.map