@politiet/sheriff-web-components 1.0.3-alpha.0 → 1.2.0

package/dist/sds-textfield/sds-textfield.spec.js

@@ -0,0 +1,139 @@
+import { test, expect } from '@playwright/test';
+import { expect as sdsExpect } from '../playwright-util/custom-matchers';
+const textfieldIds = [
+    'textfield-name',
+    'textfield-label',
+    'textfield-placeholder',
+    'textfield-helptext',
+    'textfield-disabled',
+    'textfield-readonly',
+    'textfield-required',
+    'textfield-error',
+    'textfield-icon',
+    'textfield-autocomplete-off',
+    'textfield-autocomplete-on',
+    'textfield-pattern',
+    'textfield-min',
+    'textfield-max',
+];
+const pageUrl = 'iframe.html?viewMode=docs&id=test-textfield--docs';
+test.describe('textfield-component', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto(pageUrl);
+    });
+    test('visibility', async ({ page }) => {
+        for (const id of textfieldIds) {
+            await expect(page.locator(`#${id}`)).toBeVisible();
+        }
+    });
+    test('design-implementation', async ({ page }) => {
+        await page.reload();
+        for (const id of textfieldIds) {
+            // Default state
+            await expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}.png`);
+            // Hover state
+            page.locator(`#${id}`).hover();
+            await expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}-hover.png`);
+            // Focus state
+            await page.evaluate((id) => {
+                const element = document.getElementById(id);
+                if (element) {
+                    const parentDiv = document.createElement('div');
+                    parentDiv.style.padding = '10px';
+                    parentDiv.style.backgroundColor = 'white';
+                    element.parentNode?.insertBefore(parentDiv, element);
+                    parentDiv.appendChild(element);
+                }
+            }, id);
+            page.locator(`#${id}`).focus();
+            const parentDiv = await page.locator(`#${id}`).locator('xpath=..');
+            await expect(parentDiv).toHaveScreenshot(`${id}-focus.png`);
+        }
+    });
+    test('form-submission', async ({ page }) => {
+        let requestUrl;
+        page.on('request', (request) => {
+            if (request.url().includes('iframe.html?name=John')) {
+                requestUrl = new URL(request.url());
+            }
+        });
+        await page.locator('#textfield-name').pressSequentially('John');
+        await page.locator('#submit-button').click();
+        await expect(requestUrl?.searchParams.get('name')).toBe('John');
+    });
+    test('form-reset', async ({ page }) => {
+        await page.locator('#textfield-name').pressSequentially('John');
+        await page.locator('#reset-button').click();
+        const value = await page.locator('#textfield-name').getAttribute('value');
+        expect(value).toBeNull();
+    });
+    test('minlength', async ({ page }) => {
+        const textfield = page.locator('#textfield-min');
+        await textfield.pressSequentially('abc');
+        const isValidShort = await textfield.evaluate((el) => el.checkValidity());
+        expect(isValidShort).toBe(false);
+        await page.goto(pageUrl);
+        await textfield.pressSequentially('abcd');
+        const isValidExact = await textfield.evaluate((el) => el.checkValidity());
+        expect(isValidExact).toBe(true);
+    });
+    test('maxlength', async ({ page }) => {
+        const textfield = page.locator('#textfield-max');
+        await textfield.pressSequentially('abcdef');
+        await sdsExpect(textfield).toHaveValue('abcd');
+    });
+    test('pattern', async ({ page }) => {
+        const textfield = page.locator('#textfield-pattern');
+        // Non-digits → invalid
+        await textfield.pressSequentially('abcd');
+        let isValid = await textfield.evaluate((el) => el.checkValidity());
+        expect(isValid).toBe(false);
+        // Too few digits → invalid
+        await page.goto(pageUrl);
+        await textfield.pressSequentially('123');
+        isValid = await textfield.evaluate((el) => el.checkValidity());
+        expect(isValid).toBe(false);
+        // Exactly 4 digits → valid
+        await page.goto(pageUrl);
+        await textfield.pressSequentially('1234');
+        isValid = await textfield.evaluate((el) => el.checkValidity());
+        expect(isValid).toBe(true);
+        // Too many digits → invalid
+        await page.goto(pageUrl);
+        await textfield.pressSequentially('12345');
+        isValid = await textfield.evaluate((el) => el.checkValidity());
+        expect(isValid).toBe(false);
+    });
+    test('required', async ({ page }) => {
+        const textfield = page.locator('#textfield-required');
+        // No value → invalid
+        let isValid = await textfield.evaluate((el) => el.checkValidity());
+        expect(isValid).toBe(false);
+        // Has value → valid
+        await page.goto(pageUrl);
+        await textfield.pressSequentially('abc');
+        isValid = await textfield.evaluate((el) => el.checkValidity());
+        expect(isValid).toBe(true);
+    });
+    test('readonly', async ({ page }) => {
+        const textfield = page.locator('#textfield-readonly');
+        await textfield.pressSequentially('abc');
+        await sdsExpect(textfield).toHaveValue('Kan ikke endres');
+    });
+    test('autocomplete on/off', async ({ page }) => {
+        const textfields = [
+            { id: 'textfield-autocomplete-off', expected: 'off' },
+            { id: 'textfield-autocomplete-on', expected: 'on' },
+        ];
+        for (const { id, expected } of textfields) {
+            const host = page.locator(`#${id}`);
+            await expect(host).toHaveAttribute('autocomplete', expected);
+            const shadowDomInput = await host.evaluate((el) => {
+                const input = el.shadowRoot?.querySelector('input');
+                return input?.autocomplete ?? null;
+            });
+            expect(shadowDomInput).toBe(expected);
+        }
+    });
+});
+//# sourceMappingURL=sds-textfield.spec.js.map

package/dist/sds-textfield/sds-textfield.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-textfield.spec.js","sourceRoot":"","sources":["../../src/sds-textfield/sds-textfield.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { test, expect } from '@playwright/test';\nimport { expect as sdsExpect } from '../playwright-util/custom-matchers';\n\nconst textfieldIds = [\n\t'textfield-name',\n\t'textfield-label',\n\t'textfield-placeholder',\n\t'textfield-helptext',\n\t'textfield-disabled',\n\t'textfield-readonly',\n\t'textfield-required',\n\t'textfield-error',\n\t'textfield-icon',\n\t'textfield-autocomplete-off',\n\t'textfield-autocomplete-on',\n\t'textfield-pattern',\n\t'textfield-min',\n\t'textfield-max',\n];\n\nconst pageUrl = 'iframe.html?viewMode=docs&id=test-textfield--docs';\n\ntest.describe('textfield-component', () => {\n\ttest.beforeEach(async ({ page }) => {\n\t\tawait page.goto(pageUrl);\n\t});\n\n\ttest('visibility', async ({ page }) => {\n\t\tfor (const id of textfieldIds) {\n\t\t\tawait expect(page.locator(`#${id}`)).toBeVisible();\n\t\t}\n\t});\n\n\ttest('design-implementation', async ({ page }) => {\n\t\tawait page.reload();\n\n\t\tfor (const id of textfieldIds) {\n\t\t\t// Default state\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}.png`);\n\t\t\t// Hover state\n\t\t\tpage.locator(`#${id}`).hover();\n\t\t\tawait expect(page.locator(`#${id}`)).toHaveScreenshot(`${id}-hover.png`);\n\t\t\t// Focus state\n\t\t\tawait page.evaluate((id) => {\n\t\t\t\tconst element = document.getElementById(id);\n\t\t\t\tif (element) {\n\t\t\t\t\tconst parentDiv = document.createElement('div');\n\t\t\t\t\tparentDiv.style.padding = '10px';\n\t\t\t\t\tparentDiv.style.backgroundColor = 'white';\n\t\t\t\t\telement.parentNode?.insertBefore(parentDiv, element);\n\t\t\t\t\tparentDiv.appendChild(element);\n\t\t\t\t}\n\t\t\t}, id);\n\t\t\tpage.locator(`#${id}`).focus();\n\t\t\tconst parentDiv = await page.locator(`#${id}`).locator('xpath=..');\n\t\t\tawait expect(parentDiv).toHaveScreenshot(`${id}-focus.png`);\n\t\t}\n\t});\n\n\ttest('form-submission', async ({ page }) => {\n\t\tlet requestUrl: URL | undefined;\n\t\tpage.on('request', (request) => {\n\t\t\tif (request.url().includes('iframe.html?name=John')) {\n\t\t\t\trequestUrl = new URL(request.url());\n\t\t\t}\n\t\t});\n\n\t\tawait page.locator('#textfield-name').pressSequentially('John');\n\t\tawait page.locator('#submit-button').click();\n\t\tawait expect(requestUrl?.searchParams.get('name')).toBe('John');\n\t});\n\n\ttest('form-reset', async ({ page }) => {\n\t\tawait page.locator('#textfield-name').pressSequentially('John');\n\t\tawait page.locator('#reset-button').click();\n\t\tconst value = await page.locator('#textfield-name').getAttribute('value');\n\t\texpect(value).toBeNull();\n\t});\n\n\ttest('minlength', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-min');\n\n\t\tawait textfield.pressSequentially('abc');\n\t\tconst isValidShort = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValidShort).toBe(false);\n\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('abcd');\n\t\tconst isValidExact = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValidExact).toBe(true);\n\t});\n\n\ttest('maxlength', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-max');\n\n\t\tawait textfield.pressSequentially('abcdef');\n\t\tawait sdsExpect(textfield).toHaveValue('abcd');\n\t});\n\n\ttest('pattern', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-pattern');\n\n\t\t// Non-digits → invalid\n\t\tawait textfield.pressSequentially('abcd');\n\t\tlet isValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\n\t\t// Too few digits → invalid\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('123');\n\t\tisValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\n\t\t// Exactly 4 digits → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('1234');\n\t\tisValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(true);\n\n\t\t// Too many digits → invalid\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('12345');\n\t\tisValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\t});\n\n\ttest('required', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-required');\n\n\t\t// No value → invalid\n\t\tlet isValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(false);\n\n\t\t// Has value → valid\n\t\tawait page.goto(pageUrl);\n\t\tawait textfield.pressSequentially('abc');\n\t\tisValid = await textfield.evaluate((el: HTMLInputElement) => el.checkValidity());\n\t\texpect(isValid).toBe(true);\n\t});\n\n\ttest('readonly', async ({ page }) => {\n\t\tconst textfield = page.locator('#textfield-readonly');\n\t\tawait textfield.pressSequentially('abc');\n\t\tawait sdsExpect(textfield).toHaveValue('Kan ikke endres');\n\t});\n\n\ttest('autocomplete on/off', async ({ page }) => {\n\t\tconst textfields = [\n\t\t\t{ id: 'textfield-autocomplete-off', expected: 'off' },\n\t\t\t{ id: 'textfield-autocomplete-on', expected: 'on' },\n\t\t];\n\n\t\tfor (const { id, expected } of textfields) {\n\t\t\tconst host = page.locator(`#${id}`);\n\n\t\t\tawait expect(host).toHaveAttribute('autocomplete', expected);\n\t\t\tconst shadowDomInput = await host.evaluate((el: HTMLElement) => {\n\t\t\t\tconst input = el.shadowRoot?.querySelector('input') as HTMLInputElement | null;\n\t\t\t\treturn input?.autocomplete ?? null;\n\t\t\t});\n\t\t\texpect(shadowDomInput).toBe(expected);\n\t\t}\n\t});\n});\n"]}

package/dist/sheriff-web-components.js

@@ -679,6 +679,12 @@ const styles$h = i$4`
 			border: 2px solid var(--sds-color-semantic-surface-action-hover);
 		}
 
+		&:focus {
+			background-color: var(--sds-color-semantic-surface-action-default);
+			outline: 2px solid var(--sds-color-semantic-surface-action-default);
+			outline-offset: 1px;
+		}
+
 		&:active {
 			background-color: var(--sds-color-semantic-surface-action-active);
 			border: 2px solid var(--sds-color-semantic-surface-action-active);
@@ -693,13 +699,6 @@ const styles$h = i$4`
 		}
 	}
 
-	.sds-button:focus,
-	:host(:focus) .give-focus {
-		background-color: var(--sds-color-semantic-surface-action-default);
-		outline: 2px solid var(--sds-color-semantic-surface-action-default);
-		outline-offset: 1px;
-	}
-
 	.sds-button--secondary {
 		background-color: var(--sds-color-semantic-surface-action-inverted);
 		border: 2px solid var(--sds-color-semantic-border-action);
@@ -793,6 +792,11 @@ const styles$h = i$4`
 		font-size: 0.875rem;
 		padding: 0 var(--sds-spacing-3);
 	}
+
+	.sds-button--as-link {
+		inline-size: auto;
+		text-decoration: none;
+	}
 `;
 var __defProp$h = Object.defineProperty;
 var __getOwnPropDesc$h = Object.getOwnPropertyDescriptor;
@@ -882,8 +886,21 @@ let SDSButton = class extends i$1 {
       "sds-button--tertiary": this.variant === "tertiary",
       "sds-button--critical": this.variant === "critical",
       "sds-button--medium": this.size === "medium",
-      "sds-button--small": this.size === "small"
+      "sds-button--small": this.size === "small",
+      "sds-button--as-link": !!this.href
     };
+    if (this.href) {
+      return x` <a
+				id="link"
+				class="${e$1(buttonClasses)}"
+				href="${this.href}"
+				target="${o$1(this.target)}"
+			>
+				<slot name="before"></slot>
+				<slot></slot>
+				<slot name="after"></slot>
+			</a>`;
+    }
     return x`
 			<button
 				id="control"
@@ -925,6 +942,12 @@ __decorateClass$h([
 __decorateClass$h([
   n2({ type: String, reflect: true })
 ], SDSButton.prototype, "form", 2);
+__decorateClass$h([
+  n2({ type: String, reflect: true })
+], SDSButton.prototype, "href", 2);
+__decorateClass$h([
+  n2({ type: String, reflect: true })
+], SDSButton.prototype, "target", 2);
 SDSButton = __decorateClass$h([
   guardedCustomElement("sds-button")
 ], SDSButton);
@@ -1060,7 +1083,7 @@ let SDSCheckbox = class extends i$1 {
       if (!this.disabled) {
         const elem = event.target;
         this.checked = elem.checked;
-        this.internals.setFormValue(elem.checked ? elem.value : "");
+        this.internals.setFormValue(elem.checked ? elem.value : null);
         this._validate();
         this.dispatchEvent(
           new CustomEvent("change", {
@@ -1101,16 +1124,8 @@ let SDSCheckbox = class extends i$1 {
     super.connectedCallback();
     this._initialChecked = this.checked;
     this.internals.role = "checkbox";
-    if ("FormDataEvent" in window) {
-      this.internals.form?.addEventListener("formdata", (event) => {
-        if (this.disabled || !this.name || !this.checked) {
-          return;
-        }
-        event.formData.set(this.name, this.value ?? "on");
-      });
-    }
     if (this.checked) {
-      this.internals.setFormValue(this.value ? this.value : "");
+      this.internals.setFormValue(this.value ?? "on");
     }
   }
   firstUpdated(_changedProperties) {
@@ -1125,7 +1140,7 @@ let SDSCheckbox = class extends i$1 {
     if (this.control) {
       this.control.checked = this._initialChecked;
     }
-    const resetValue = this.checked && this.value ? this.value : "";
+    const resetValue = this.checked ? this.value ?? "on" : null;
     this.internals.setFormValue(resetValue);
     this._validate();
   }
@@ -1154,6 +1169,9 @@ let SDSCheckbox = class extends i$1 {
       this._validate();
     }
   }
+  get type() {
+    return "checkbox";
+  }
   render() {
     const checkboxClasses = {
       "sds-checkbox": true,
@@ -1519,32 +1537,29 @@ const styles$d = i$4`
 		line-height: 1.25;
 		text-align: center;
 
-		user-select: none;
+		user-select: text;
 		cursor: pointer;
 
-		&:has(input[type='checkbox']:checked) {
+		&:has(:checked) {
 			background-color: var(--sds-color-semantic-surface-action-default);
 			border-color: var(--sds-color-semantic-surface-action-default);
 			color: var(--sds-color-semantic-text-on-action);
 		}
 
-		&:has(
-				input[type='checkbox'][disabled],
-				input[type='checkbox']:checked[disabled]
-			) {
+		&:has(input[type='checkbox'][disabled], input[type='checkbox']:checked[disabled]) {
 			background-color: var(--sds-color-semantic-surface-disabled);
 			border: 2px solid var(--sds-color-semantic-surface-disabled);
 			color: var(--sds-color-semantic-text-disabled);
 			cursor: not-allowed;
 		}
 
-		&:hover {
+		&:not(:has([readonly])):hover {
 			background-color: var(--sds-color-semantic-surface-action-hover);
 			border-color: var(--sds-color-semantic-surface-action-hover);
 			color: var(--sds-color-semantic-text-on-action);
 		}
 
-		&:active {
+		&:not(:has([readonly])):active {
 			background-color: var(--sds-color-semantic-surface-action-active);
 			border: 2px solid var(--sds-color-semantic-surface-action-active);
 		}
@@ -1555,6 +1570,10 @@ const styles$d = i$4`
 			outline-offset: 2px;
 		}
 
+		&:has([readonly]) {
+			cursor: default;
+		}
+
 		&.sds-chip--small {
 			font-size: 0.875rem;
 			line-height: 1.125rem;
@@ -1592,10 +1611,12 @@ let SDSChip = class extends i$1 {
     this.size = "large";
     this.checked = false;
     this.disabled = false;
+    this.readonly = false;
     this._initialChecked = false;
     this._toggle = (event) => {
       event.preventDefault();
       event.stopImmediatePropagation();
+      if (this.disabled || this.readonly) return;
       this.checked = !this.checked;
       this.internals.setFormValue(this.checked && this.value ? this.value : "");
       this.dispatchEvent(
@@ -1606,6 +1627,7 @@ let SDSChip = class extends i$1 {
       );
     };
     this._remove = () => {
+      if (this.disabled || this.readonly) return;
       this.dispatchEvent(
         new CustomEvent("sds-remove", {
           bubbles: true,
@@ -1643,7 +1665,7 @@ let SDSChip = class extends i$1 {
       "sds-chip": true,
       "sds-chip--small": this.size === "small"
     };
-    if (this.variant === "removable") {
+    if (this.variant === "removable" && !this.readonly) {
       return x`<button class="${e$1(chipClasses)}" @click=${this._remove}>
 				<slot></slot>
 				<sds-icon name="close-material-outlined" size="s"></sds-icon>
@@ -1657,6 +1679,7 @@ let SDSChip = class extends i$1 {
 				value="${o$1(this.value)}"
 				?checked="${this.checked}"
 				?disabled="${this.disabled}"
+				?readonly="${this.readonly}"
 			/>
 			<slot></slot>
 		</label>`;
@@ -1682,6 +1705,9 @@ __decorateClass$d([
 __decorateClass$d([
   n2({ type: Boolean, reflect: true })
 ], SDSChip.prototype, "disabled", 2);
+__decorateClass$d([
+  n2({ type: Boolean, reflect: true })
+], SDSChip.prototype, "readonly", 2);
 __decorateClass$d([
   e$3("#control")
 ], SDSChip.prototype, "control", 2);
@@ -2692,7 +2718,7 @@ const styles$4 = i$4`
 		align-items: flex-start;
 		cursor: pointer;
 		color: var(--sds-color-semantic-text-default);
-		display: inline-flex;
+		display: flex;
 		font-family: var(--sds-typography-font-family);
 		font-size: 1rem;
 		font-weight: 400;
@@ -2855,6 +2881,12 @@ let SDSRadio = class extends i$1 {
       event.stopImmediatePropagation();
       this.dispatchEvent(new CustomEvent("blur", { bubbles: true, composed: true }));
     };
+    this._handleClick = (event) => {
+      event.stopImmediatePropagation();
+      if (event.currentTarget === event.target && !this.disabled) {
+        this.shadowRoot?.querySelector("input")?.click();
+      }
+    };
     this.internals = this.attachInternals();
     this.attachShadow({ mode: "open", delegatesFocus: true });
   }
@@ -2905,7 +2937,7 @@ let SDSRadio = class extends i$1 {
   formResetCallback() {
     this.checked = this._initialChecked;
     this.control.checked = this._initialChecked;
-    this.internals.setFormValue(this.checked ? this.value ?? "on" : "on");
+    this.internals.setFormValue(this.checked ? this.value ?? "on" : null);
     this._updateGroupValidation();
   }
   updated(changedProperties) {
@@ -2942,7 +2974,7 @@ let SDSRadio = class extends i$1 {
     return this.internals.form;
   }
   get type() {
-    return this.localName;
+    return "radio";
   }
   get validity() {
     return this.internals.validity;
@@ -2985,7 +3017,7 @@ let SDSRadio = class extends i$1 {
       "sds-radio__input--error": Boolean(this.error)
     };
     return x`
-			<div class="${e$1(radioClasses)}">
+			<div class="${e$1(radioClasses)}" @click="${this._handleClick}">
 				<label class="sds-radio__label">
 					<input
 						id="control"

package/dist/utils/guarded-custom-element.d.ts

@@ -1,7 +1,5 @@
-type NonEmptyString = string & {
-    __nonEmpty__: never;
-};
-export type SdsTagName = `sds-${NonEmptyString}`;
-export declare function guardedCustomElement<Tag extends `sds-${string}`>(tagName: Tag): ClassDecorator;
+type NonEmptyString<T extends string> = '' extends T ? never : T;
+export type SdsTagName<T extends string> = `sds-${NonEmptyString<T>}`;
+export declare function guardedCustomElement<Tag extends string>(tagName: SdsTagName<Tag>): ClassDecorator;
 export {};
 //# sourceMappingURL=guarded-custom-element.d.ts.map

package/dist/utils/guarded-custom-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"guarded-custom-element.d.ts","sourceRoot":"","sources":["../../src/utils/guarded-custom-element.ts"],"names":[],"mappings":"AAEA,KAAK,cAAc,GAAG,MAAM,GAAG;IAAE,YAAY,EAAE,KAAK,CAAA;CAAE,CAAC;AACvD,MAAM,MAAM,UAAU,GAAG,OAAO,cAAc,EAAE,CAAC;AAEjD,wBAAgB,oBAAoB,CAAC,GAAG,SAAS,OAAO,MAAM,EAAE,EAAE,OAAO,EAAE,GAAG,GAAG,cAAc,CAM9F"}
+{"version":3,"file":"guarded-custom-element.d.ts","sourceRoot":"","sources":["../../src/utils/guarded-custom-element.ts"],"names":[],"mappings":"AAEA,KAAK,cAAc,CAAC,CAAC,SAAS,MAAM,IAAI,EAAE,SAAS,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,MAAM,IAAI,OAAO,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;AAEtE,wBAAgB,oBAAoB,CAAC,GAAG,SAAS,MAAM,EAAE,OAAO,EAAE,UAAU,CAAC,GAAG,CAAC,GAAG,cAAc,CAMjG"}

package/dist/utils/guarded-custom-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"guarded-custom-element.js","sourceRoot":"","sources":["../../src/utils/guarded-custom-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAKtE,MAAM,UAAU,oBAAoB,CAA8B,OAAY;IAC7E,OAAO,CAAC,GAAG,EAAE,EAAE;QACd,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YAClC,gBAAgB,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC;QAChC,CAAC;IACF,CAAC,CAAC;AACH,CAAC","sourcesContent":["import { customElement as litCustomElement } from 'lit/decorators.js';\n\ntype NonEmptyString = string & { __nonEmpty__: never };\nexport type SdsTagName = `sds-${NonEmptyString}`;\n\nexport function guardedCustomElement<Tag extends `sds-${string}`>(tagName: Tag): ClassDecorator {\n\treturn (cls) => {\n\t\tif (!customElements.get(tagName)) {\n\t\t\tlitCustomElement(tagName)(cls);\n\t\t}\n\t};\n}\n"]}
+{"version":3,"file":"guarded-custom-element.js","sourceRoot":"","sources":["../../src/utils/guarded-custom-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,IAAI,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAKtE,MAAM,UAAU,oBAAoB,CAAqB,OAAwB;IAChF,OAAO,CAAC,GAAG,EAAE,EAAE;QACd,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YAClC,gBAAgB,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC;QAChC,CAAC;IACF,CAAC,CAAC;AACH,CAAC","sourcesContent":["import { customElement as litCustomElement } from 'lit/decorators.js';\n\ntype NonEmptyString<T extends string> = '' extends T ? never : T;\nexport type SdsTagName<T extends string> = `sds-${NonEmptyString<T>}`;\n\nexport function guardedCustomElement<Tag extends string>(tagName: SdsTagName<Tag>): ClassDecorator {\n\treturn (cls) => {\n\t\tif (!customElements.get(tagName)) {\n\t\t\tlitCustomElement(tagName)(cls);\n\t\t}\n\t};\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@politiet/sheriff-web-components",
-	"version": "1.0.3-alpha.0",
+	"version": "1.2.0",
 	"description": "Sheriff Design System Web Components Library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",