[ Feature ] Checkbox Group + Checkbox

design-system/uilib/src/components/dpdhl-checkbox-group/Item.ts

@@ -0,0 +1,7 @@
+export interface Item {
+    label: string
+    value: string,
+    disabled: boolean,
+    error: boolean,
+    indeterminate: boolean
+}

design-system/uilib/src/components/dpdhl-checkbox-group/dpdhl-checkbox-group.stories.svelte

@@ -0,0 +1,39 @@
+<script>
+    import { Meta, Template, Story } from '@storybook/addon-svelte-csf'
+    import '@sprinteins/dpdhl-uilib'
+
+    let selected = []
+
+    function handleSelectItems(event) {
+        selected = event.detail;
+    }
+</script>
+
+
+<Meta title="11_Components/Checkbox Group" component={null} argTypes={{
+    itemsGap: {
+        name: "Gap between items [rem]", 
+    },
+}}/>
+
+<Template let:args>
+</Template>
+
+
+<Template let:args>
+    <div style="--checkbox-group__items-gap: {args.itemsGap}rem;">
+        <dpdhl-checkbox-group on:select={handleSelectItems}>
+            <dpdhl-checkbox-item label="Option A" value="option-a" />
+            <dpdhl-checkbox-item label="Option B" value="option-b" disabled={true}/>
+            <dpdhl-checkbox-item label="Option C" value="option-c" error={true}/>
+            <dpdhl-checkbox-item label="Option D" value="option-d" indeterminate={true}/>
+        </dpdhl-checkbox-group>
+    </div>
+    <p>Selected Items: {selected.length && selected.join(', ')} </p>
+</Template>
+
+<Story name="Primary" args={{
+    itemsGap: 1.5
+}}/>
+
+<style></style>

design-system/uilib/src/components/dpdhl-checkbox-group/dpdhl-checkbox-group.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+    import { onMount } from 'svelte'
+    import { makeEvent } from '../../x/util/dispatch'
+    import "../dpdhl-icon"
+    import { KeyItemAdded } from './dpdhl-checkbox-item.svelte'
+    import type { Item } from './Item';
+
+    let container: HTMLElement
+    let items: Item[] = []
+    let selectedItems: string[] = []
+    let assignedElements: HTMLElement[] = []
+
+    onMount(() => {
+        registerItems();
+        container.addEventListener(KeyItemAdded, registerItems)
+    })    
+
+    function registerItems(){
+        const slot = container.childNodes[0] as HTMLSlotElement
+
+        assignedElements = slot.assignedElements() as HTMLElement[]
+
+        assignedElements.forEach( (el, ei)  => {
+            const alreadyRegistered = el.hasAttribute('registered')
+            if( alreadyRegistered ){
+                return;
+            }
+            el.setAttribute('registered','');
+            const label = el.getAttribute('label')
+            const value = el.getAttribute('value')
+            const disabled = el.getAttribute('disabled') === "true";
+            const error = el.getAttribute('error') === "true";
+            const indeterminate = el.getAttribute('indeterminate') === "true";
+            if(items){ 
+                items[ei] = {
+                    label,
+                    value,
+                    disabled,
+                    error,
+                    indeterminate
+                }
+            }
+        });
+    }
+
+    let root: HTMLDivElement;
+    function onItemClick(item: Item) {
+        if (selectedItems.includes(item.value)) {
+            selectedItems = [...selectedItems.filter(i => i !== item.value)]
+        } else {
+            selectedItems = [...selectedItems, item.value]
+        }
+        root.dispatchEvent(makeEvent('select', selectedItems))
+    }
+
+</script>
+<svelte:options tag="dpdhl-checkbox-group" />
+
+<div bind:this={root} class="root">
+	{#each items as item}
+		<dpdhl-checkbox
+			on:check={() => onItemClick(item)}
+			checked={selectedItems.includes(item.value)}
+			value={item.value}
+			disabled={item.disabled}
+			error={item.error}
+			indeterminate={item.indeterminate}>
+			{item.label}
+		</dpdhl-checkbox>
+	{/each}
+</div>
+
+
+<div bind:this={container}>
+    <slot />
+</div>
+
+<style>
+	.root {
+        display:        flex;
+        flex-direction: column;
+        gap:            var(--radio-group__items-gap, 1.5rem);
+    }
+
+</style>

design-system/uilib/src/components/dpdhl-checkbox-group/dpdhl-checkbox-item.svelte

@@ -0,0 +1,21 @@
+<script context='module' lang='ts'>
+    export const KeyItemAdded = 'itemadded'
+</script>
+<script lang='ts'>
+    import { onMount } from 'svelte'
+
+    let contentRef: HTMLElement
+    function itemAdded(){
+        if(!contentRef) { return }
+        contentRef.dispatchEvent(new CustomEvent(KeyItemAdded,{
+            bubbles: true,
+            composed: true,
+        }))
+    }
+    onMount(itemAdded);
+</script>
+<svelte:options tag="dpdhl-checkbox-item" />
+
+<span>
+    <slot />
+</span>

design-system/uilib/src/components/dpdhl-checkbox-group/index.ts

@@ -0,0 +1,2 @@
+export { default as DPDHLCheckboxGroup } from './dpdhl-checkbox-group.svelte';
+export { default as DPDHLCheckboxItem } from './dpdhl-checkbox-item.svelte';

design-system/uilib/src/components/dpdhl-checkbox/dpdhl-checkbox.stories.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import "@sprinteins/dpdhl-uilib";
+
+	$: checked = true;
+</script>
+
+<Meta title="11_Components/Checkbox" component={null} />
+
+<Template let:args />
+
+<Story
+	name="Primary"
+	args={{
+		disabled: false,
+		indeterminate: false,
+		error: false,
+	}}
+	let:args
+>
+  	<main>
+		<dpdhl-checkbox
+			on:check={() => checked = !checked}
+			name="checkbox-example"
+			disabled={args.disabled}
+			checked={checked}
+			indeterminate={args.indeterminate}
+			error={args.error}>
+		</dpdhl-checkbox>
+		<p>Checked: {checked}</p>
+  	</main>
+</Story>
+
+<style></style>

design-system/uilib/src/components/dpdhl-checkbox/dpdhl-checkbox.svelte

@@ -0,0 +1,198 @@
+<svelte:options tag="dpdhl-checkbox" />
+
+<script lang="ts">
+	import { makeEvent } from "../../x/util/dispatch";
+
+	/**
+	 * A Checkbox Component
+	 * @component
+	 */
+
+	export let value;
+
+	export let name = "";
+	$: _name = name;
+
+	export let checked = false;
+	$: _checked = checked;
+
+	export let indeterminate = false;
+	$: _indeterminate = indeterminate;
+
+	export let disabled = false;
+	$: _disabled = disabled;
+
+	export let error = false;
+	$: _error = error;
+
+	let root: HTMLDivElement;
+	function handleClick(event) {
+		if (_disabled) {
+			event.preventDefault();
+			return;
+		}
+		if (_indeterminate) {
+			_indeterminate = false;
+		}
+		root.dispatchEvent(makeEvent('check', value ))	
+	}
+
+</script>
+
+<span class="container" class:disabled={_disabled} on:click={handleClick} bind:this={root}>
+	<input
+		{value}
+		id={_name}
+		name={_name}
+		type="checkbox"
+		bind:checked={_checked}
+		bind:indeterminate={_indeterminate}
+		class:disabled={_disabled}
+		class:indeterminate={_indeterminate}
+		class:error={_error}
+	/>
+	<span class="label">
+		<slot></slot>
+	</span>
+</span>
+
+<style>
+
+	.container {
+		display: flex;
+		flex-direction: row;
+		cursor: pointer;
+	}
+
+	.container.disabled {
+		cursor: not-allowed;
+	}
+
+	.label {
+		margin-left:	1rem;
+		line-height:	24px;
+		padding-top:	0.34rem;
+		word-wrap:	normal;
+	}
+	input {
+		position: 		relative;
+		cursor: 		pointer;
+		height: 		1.5rem;
+		-moz-appearance:	none;
+		margin-right: 		1rem;
+	}
+
+	/* box */
+	input:before {
+		content: 		"";
+		display: 		block;
+		position: 		absolute;
+		width: 			1.5rem;
+		height: 		1.5rem;
+		top: 			0;
+		left: 			0;
+		border: 		1px solid var(--color-gray45);
+		border-radius: 		3px;
+		background-color: 	white;
+	}
+
+	/* box checked */
+	input:checked:before {
+		border: 		1px solid var(--color-postyellow);
+		background-color: 	var(--color-postyellow);
+	}
+	/* check */
+	input:checked:after {
+		content: 		"";
+		display: 		block;
+		width: 			0.4375rem;
+		height: 		0.625rem;
+		border: 		solid var(--color-white);
+		border-width: 		0 1px 1px 0;
+		-webkit-transform: 	rotate(45deg);
+		-ms-transform: 		rotate(45deg);
+		transform: 		rotate(45deg);
+		position: 		absolute;
+		top: 			0.3125rem;
+		left: 			0.5625rem;
+	}
+
+	/* box disabled */
+	input.disabled:not(:checked):before {
+		background-color:		var(--color-gray10);
+		border: 			1px solid var(--color-gray10);
+		color: 				grey;
+	}
+	/* box checked disabled */
+	input.disabled:checked:before {
+		background-color: 		var(--color-gray10);
+		color: 				grey;
+		border: 			1px solid var(--color-gray10);
+	}
+	/* check disabled */
+	input.disabled:checked:after {
+		content: 		"";
+		display: 		block;
+		width: 			0.4375rem;
+		height: 		0.625rem;
+		border: 		solid var(--color-gray60);
+		border-width: 		0 1px 1px 0;
+		-webkit-transform: 	rotate(45deg);
+		-ms-transform: 		rotate(45deg);
+		transform: 		rotate(45deg);
+		position: 		absolute;
+		top: 			0.3125rem;
+		left: 			0.5625rem;
+	}
+
+	input.indeterminate:before {
+		border: 		1px solid var(--color-postyellow);
+		background-color: 	var(--color-postyellow);
+	}
+
+	/* indeterminate  */
+	input.indeterminate:after {
+		content: 		"";
+		display: 		block;
+		width: 			0.5rem;
+		height: 		0.2rem;
+		border: 		solid var(--color-white);
+		border-width: 		1px 0 0 0;
+		position: 		absolute;
+		top: 			0.8rem;
+		left: 			0.5625rem;
+	}
+
+	/* indeterminate  */
+	input.indeterminate.error:after {
+		content: 		"";
+		display: 		block;
+		width: 			0.5rem;
+		height: 		0.2rem;
+		border: 		solid var(--color-dhlred);
+		border-width: 		1px 0 0 0;
+		position: 		absolute;
+		top: 			0.8rem;
+		left: 			0.5625rem;
+	}
+
+	/* error */
+	input.error:before {
+		border: 		1px solid var(--color-dhlred);
+		background-color: 	var(--color-dhlred-light);
+	}
+	input.error:checked:after {
+		content: 		"";
+		display: 		block;
+		width: 			0.4375rem;
+		height: 		0.6rem;
+		border: 		solid var(--color-dhlred);
+		border-width:		0 1px 1px 0;
+		-webkit-transform: 	rotate(45deg);
+		-ms-transform: 		rotate(45deg);
+		transform: 		rotate(45deg);
+		position: 		absolute;
+		top: 			0.3125rem;
+		left: 			0.5625rem;
+	}
+</style>