@politiet/sheriff-web-components 0.1.4 → 0.6.0

package/dist/sds-label/sds-label.js

@@ -0,0 +1,43 @@
+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 { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './sds-label.styles';
+let SDSLabel = class SDSLabel extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Reactive Props
+        this.size = 'l';
+    }
+    render() {
+        const styleClasses = {
+            'sds-label': true,
+            'sds-label--l': this.size === 'l',
+            'sds-label--m': this.size === 'm',
+            'sds-label--s': this.size === 's',
+        };
+        const classes = classMap(styleClasses);
+        return html `<label for="${ifDefined(this.for)}" class=${classes}
+			><slot></slot
+		></label>`;
+    }
+};
+// Styling
+SDSLabel.styles = [styles];
+__decorate([
+    property({ type: String })
+], SDSLabel.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], SDSLabel.prototype, "for", void 0);
+SDSLabel = __decorate([
+    customElement('sds-label')
+], SDSLabel);
+export { SDSLabel };
+//# sourceMappingURL=sds-label.js.map

package/dist/sds-label/sds-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-label.js","sourceRoot":"","sources":["../../src/sds-label/sds-label.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAKrC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,UAAU;IAAjC;;QAIN,iBAAiB;QAEjB,SAAI,GAAS,GAAG,CAAC;IAmBlB,CAAC;IAdS,MAAM;QACd,MAAM,YAAY,GAAG;YACpB,WAAW,EAAE,IAAI;YACjB,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;YACjC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;YACjC,cAAc,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;SACjC,CAAC;QAEF,MAAM,OAAO,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;QAEvC,OAAO,IAAI,CAAA,eAAe,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,WAAW,OAAO;;YAErD,CAAC;IACZ,CAAC;;AAvBD,UAAU;AACM,eAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACd;AATD,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAyBpB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-label.styles';\n\ntype Size = 'l' | 'm' | 's';\n\n@customElement('sds-label')\nexport class SDSLabel extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String })\n\tsize: Size = 'l';\n\n\t@property({ type: String })\n\tfor?: string;\n\n\toverride render() {\n\t\tconst styleClasses = {\n\t\t\t'sds-label': true,\n\t\t\t'sds-label--l': this.size === 'l',\n\t\t\t'sds-label--m': this.size === 'm',\n\t\t\t'sds-label--s': this.size === 's',\n\t\t};\n\n\t\tconst classes = classMap(styleClasses);\n\n\t\treturn html`<label for=\"${ifDefined(this.for)}\" class=${classes}\n\t\t\t><slot></slot\n\t\t></label>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-label': SDSLabel;\n\t}\n}\n"]}

package/dist/sds-label/sds-label.styles.d.ts

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

package/dist/sds-label/sds-label.styles.d.ts.map

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

package/dist/sds-label/sds-label.styles.js

@@ -0,0 +1,31 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		display: block;
+	}
+
+	.sds-label {
+		font-family: var(--sds-typography-font-family);
+		font-weight: 500;
+		color: var(--sds-color-semantic-text-default);
+		margin: 0;
+		max-width: var(--sds-typography-max-line-width);
+		padding: 0;
+	}
+
+	.sds-label--l {
+		font-size: 1.125rem;
+		line-height: 1.333;
+	}
+
+	.sds-label--m {
+		font-size: 1rem;
+		line-height: 1.5;
+	}
+
+	.sds-label--s {
+		font-size: 0.875rem;
+		line-height: 1.428;
+	}
+`;
+//# sourceMappingURL=sds-label.styles.js.map

package/dist/sds-label/sds-label.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-label.styles.js","sourceRoot":"","sources":["../../src/sds-label/sds-label.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\t.sds-label {\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-weight: 500;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tmargin: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding: 0;\n\t}\n\n\t.sds-label--l {\n\t\tfont-size: 1.125rem;\n\t\tline-height: 1.333;\n\t}\n\n\t.sds-label--m {\n\t\tfont-size: 1rem;\n\t\tline-height: 1.5;\n\t}\n\n\t.sds-label--s {\n\t\tfont-size: 0.875rem;\n\t\tline-height: 1.428;\n\t}\n`;\n"]}

package/dist/sds-link/sds-link.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+type Size = 'l' | 'm' | 's';
+type Target = '_blank' | '_self' | '_parent' | '_top';
+export declare class SDSLink extends LitElement {
+    static styles: import("lit").CSSResult[];
+    href?: string;
+    size: Size;
+    target?: Target;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-link': SDSLink;
+    }
+}
+export {};
+//# sourceMappingURL=sds-link.d.ts.map

package/dist/sds-link/sds-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-link.d.ts","sourceRoot":"","sources":["../../src/sds-link/sds-link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAC5B,KAAK,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEtD,qBACa,OAAQ,SAAQ,UAAU;IAEtC,OAAgB,MAAM,4BAAY;IAIlC,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,IAAI,EAAE,IAAI,CAAO;IAGjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEP,MAAM;CAcf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD"}

package/dist/sds-link/sds-link.js

@@ -0,0 +1,45 @@
+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 { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './sds-link.styles';
+let SDSLink = class SDSLink extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = 'm';
+    }
+    render() {
+        const styleClasses = {
+            'sds-link': true,
+            'sds-link--l': this.size === 'l',
+            'sds-link--m': this.size === 'm',
+            'sds-link--s': this.size === 's',
+        };
+        const classes = classMap(styleClasses);
+        return html `<a href="${ifDefined(this.href)}" target="${ifDefined(this.target)}" class=${classes}
+			><slot></slot
+		></a>`;
+    }
+};
+// Styling
+SDSLink.styles = [styles];
+__decorate([
+    property({ type: String })
+], SDSLink.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], SDSLink.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], SDSLink.prototype, "target", void 0);
+SDSLink = __decorate([
+    customElement('sds-link')
+], SDSLink);
+export { SDSLink };
+//# sourceMappingURL=sds-link.js.map

package/dist/sds-link/sds-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-link.js","sourceRoot":"","sources":["../../src/sds-link/sds-link.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAMpC,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QASN,SAAI,GAAS,GAAG,CAAC;IAmBlB,CAAC;IAdS,MAAM;QACd,MAAM,YAAY,GAAG;YACpB,UAAU,EAAE,IAAI;YAChB,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;YAChC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;YAChC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,GAAG;SAChC,CAAC;QAEF,MAAM,OAAO,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAC;QAEvC,OAAO,IAAI,CAAA,YAAY,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,WAAW,OAAO;;QAE1F,CAAC;IACR,CAAC;;AA1BD,UAAU;AACM,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACV;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCACX;AAZJ,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA4BnB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-link.styles';\n\ntype Size = 'l' | 'm' | 's';\ntype Target = '_blank' | '_self' | '_parent' | '_top';\n\n@customElement('sds-link')\nexport class SDSLink extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String })\n\thref?: string;\n\n\t@property({ type: String })\n\tsize: Size = 'm';\n\n\t@property({ type: String })\n\ttarget?: Target;\n\n\toverride render() {\n\t\tconst styleClasses = {\n\t\t\t'sds-link': true,\n\t\t\t'sds-link--l': this.size === 'l',\n\t\t\t'sds-link--m': this.size === 'm',\n\t\t\t'sds-link--s': this.size === 's',\n\t\t};\n\n\t\tconst classes = classMap(styleClasses);\n\n\t\treturn html`<a href=\"${ifDefined(this.href)}\" target=\"${ifDefined(this.target)}\" class=${classes}\n\t\t\t><slot></slot\n\t\t></a>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-link': SDSLink;\n\t}\n}\n"]}

package/dist/sds-link/sds-link.styles.d.ts

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

package/dist/sds-link/sds-link.styles.d.ts.map

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

package/dist/sds-link/sds-link.styles.js

@@ -0,0 +1,74 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		display: inline;
+	}
+
+	:host([display-type='block']) {
+		display: block;
+		max-width: var(--sds-typography-max-line-width);
+
+		.sds-link {
+			display: block;
+			max-width: var(--sds-typography-max-line-width);
+		}
+	}
+
+	:host([display-type='inline-block']) {
+		display: inline-block;
+
+		.sds-link {
+			display: inline-block;
+			max-width: var(--sds-typography-max-line-width);
+		}
+	}
+
+	:host([display-type='inline']) {
+		display: inline;
+	}
+
+	.sds-link {
+		color: var(--sds-color-semantic-text-default);
+		display: inline;
+		font-family: var(--sds-typography-font-family);
+		font-weight: 400;
+		line-height: 1.333;
+		margin: 0;
+		padding: 0;
+
+		&:link,
+		&:visited {
+			color: var(--sds-color-semantic-text-action-default);
+			text-decoration: underline;
+			text-decoration-thickness: 1px;
+			text-underline-offset: 2px;
+		}
+
+		&:active {
+			color: var(--sds-color-semantic-text-action-active);
+		}
+
+		&:hover {
+			color: var(--sds-color-semantic-text-action-hover);
+		}
+
+		&:focus {
+			border-radius: 4px;
+			outline: 2px solid var(--sds-color-semantic-border-focus);
+			outline-offset: 2px;
+		}
+	}
+
+	.sds-link--l {
+		font-size: 1.125rem;
+	}
+
+	.sds-link--m {
+		font-size: 1rem;
+	}
+
+	.sds-link--s {
+		font-size: 0.875rem;
+	}
+`;
+//# sourceMappingURL=sds-link.styles.js.map

package/dist/sds-link/sds-link.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-link.styles.js","sourceRoot":"","sources":["../../src/sds-link/sds-link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: inline;\n\t}\n\n\t:host([display-type='block']) {\n\t\tdisplay: block;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\n\t\t.sds-link {\n\t\t\tdisplay: block;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\t}\n\n\t:host([display-type='inline-block']) {\n\t\tdisplay: inline-block;\n\n\t\t.sds-link {\n\t\t\tdisplay: inline-block;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\t}\n\n\t:host([display-type='inline']) {\n\t\tdisplay: inline;\n\t}\n\n\t.sds-link {\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tdisplay: inline;\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-weight: 400;\n\t\tline-height: 1.333;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&:link,\n\t\t&:visited {\n\t\t\tcolor: var(--sds-color-semantic-text-action-default);\n\t\t\ttext-decoration: underline;\n\t\t\ttext-decoration-thickness: 1px;\n\t\t\ttext-underline-offset: 2px;\n\t\t}\n\n\t\t&:active {\n\t\t\tcolor: var(--sds-color-semantic-text-action-active);\n\t\t}\n\n\t\t&:hover {\n\t\t\tcolor: var(--sds-color-semantic-text-action-hover);\n\t\t}\n\n\t\t&:focus {\n\t\t\tborder-radius: 4px;\n\t\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n\n\t.sds-link--l {\n\t\tfont-size: 1.125rem;\n\t}\n\n\t.sds-link--m {\n\t\tfont-size: 1rem;\n\t}\n\n\t.sds-link--s {\n\t\tfont-size: 0.875rem;\n\t}\n`;\n"]}

package/dist/sds-loader/sds-loader.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+import { type ColorType } from '../sds-icon/sds-icon.color-types';
+type LoaderSize = 'large' | 'medium' | 'small';
+export declare class SDSLoader extends LitElement {
+    static styles: import("lit").CSSResult[];
+    size: LoaderSize;
+    color: ColorType;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-loader': SDSLoader;
+    }
+}
+export {};
+//# sourceMappingURL=sds-loader.d.ts.map

package/dist/sds-loader/sds-loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-loader.d.ts","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAElE,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE/C,qBACa,SAAU,SAAQ,UAAU;IAExC,OAAgB,MAAM,4BAAY;IAIlC,IAAI,EAAE,UAAU,CAAW;IAG3B,KAAK,EAAE,SAAS,CAAkB;IAEzB,MAAM;CASf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}

package/dist/sds-loader/sds-loader.js

@@ -0,0 +1,39 @@
+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 { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './sds-loader.styles';
+let SDSLoader = class SDSLoader extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Reactive Props
+        this.size = 'large';
+        this.color = 'currentColor';
+    }
+    render() {
+        const loaderClasses = {
+            'sds-loader': true,
+            'sds-loader--medium': this.size === 'medium',
+            'sds-loader--small': this.size === 'small',
+        };
+        return html `<span class="${classMap(loaderClasses)}" style="${`color:${this.color}`}"></span> `;
+    }
+};
+// Styling
+SDSLoader.styles = [styles];
+__decorate([
+    property({ type: String, reflect: true })
+], SDSLoader.prototype, "size", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSLoader.prototype, "color", void 0);
+SDSLoader = __decorate([
+    customElement('sds-loader')
+], SDSLoader);
+export { SDSLoader };
+//# sourceMappingURL=sds-loader.js.map

package/dist/sds-loader/sds-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-loader.js","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAMtC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAIN,iBAAiB;QAEjB,SAAI,GAAe,OAAO,CAAC;QAG3B,UAAK,GAAc,cAAc,CAAC;IAWnC,CAAC;IATS,MAAM;QACd,MAAM,aAAa,GAAG;YACrB,YAAY,EAAE,IAAI;YAClB,oBAAoB,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;YAC5C,mBAAmB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;SAC1C,CAAC;QAEF,OAAO,IAAI,CAAA,gBAAgB,QAAQ,CAAC,aAAa,CAAC,YAAY,SAAS,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC;IACjG,CAAC;;AAlBD,UAAU;AACM,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACf;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACR;AATtB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAoBrB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-loader.styles';\nimport { type ColorType } from '../sds-icon/sds-icon.color-types';\n\ntype LoaderSize = 'large' | 'medium' | 'small';\n\n@customElement('sds-loader')\nexport class SDSLoader extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true })\n\tsize: LoaderSize = 'large';\n\n\t@property({ type: String, reflect: true })\n\tcolor: ColorType = 'currentColor';\n\n\toverride render() {\n\t\tconst loaderClasses = {\n\t\t\t'sds-loader': true,\n\t\t\t'sds-loader--medium': this.size === 'medium',\n\t\t\t'sds-loader--small': this.size === 'small',\n\t\t};\n\n\t\treturn html`<span class=\"${classMap(loaderClasses)}\" style=\"${`color:${this.color}`}\"></span> `;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-loader': SDSLoader;\n\t}\n}\n"]}

package/dist/sds-loader/sds-loader.styles.d.ts

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

package/dist/sds-loader/sds-loader.styles.d.ts.map

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

package/dist/sds-loader/sds-loader.styles.js

@@ -0,0 +1,39 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		line-height: 0;
+	}
+
+	.sds-loader {
+		width: 24px;
+		height: 24px;
+		border: 3px solid currentColor;
+		border-bottom-color: transparent;
+		border-radius: 50%;
+		display: inline-block;
+		box-sizing: border-box;
+		animation: rotation 1s linear infinite;
+
+		&.sds-loader--medium {
+			width: 18px;
+			height: 18px;
+			border-width: 2px;
+		}
+
+		&.sds-loader--small {
+			width: 14px;
+			height: 14px;
+			border-width: 2px;
+		}
+	}
+
+	@keyframes rotation {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+`;
+//# sourceMappingURL=sds-loader.styles.js.map

package/dist/sds-loader/sds-loader.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-loader.styles.js","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tline-height: 0;\n\t}\n\n\t.sds-loader {\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tborder: 3px solid currentColor;\n\t\tborder-bottom-color: transparent;\n\t\tborder-radius: 50%;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tanimation: rotation 1s linear infinite;\n\n\t\t&.sds-loader--medium {\n\t\t\twidth: 18px;\n\t\t\theight: 18px;\n\t\t\tborder-width: 2px;\n\t\t}\n\n\t\t&.sds-loader--small {\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t\tborder-width: 2px;\n\t\t}\n\t}\n\n\t@keyframes rotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\n"]}

package/dist/sds-nav-card/sds-nav-card.d.ts

@@ -13,7 +13,6 @@ export declare class SDSNavCard extends LitElement {
     size: 'large' | 'medium' | 'small';
     heading: string;
     level: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    text: string;
     link: string;
     private hasIcon;
     private iconSlot;
@@ -22,7 +21,7 @@ export declare class SDSNavCard extends LitElement {
     private _filterToMeaningfulNodes;
     private _checkSlotContent;
     private _renderHeading;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/sds-nav-card/sds-nav-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sds-nav-card.d.ts","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,qBACa,UAAW,SAAQ,UAAU;IACzC;;;;;;;;OAQG;IAGH,OAAgB,MAAM,4BAAY;IAIlC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAW;IAG7C,OAAO,EAAG,MAAM,CAAC;IAGjB,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAG/C,IAAI,EAAG,MAAM,CAAC;IAGd,IAAI,EAAG,MAAM,CAAC;IAId,OAAO,CAAC,OAAO,CAAkB;IAGjC,OAAO,CAAC,QAAQ,CAAmB;IAE1B,YAAY;IAIrB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,cAAc;IAmBb,MAAM;CAqBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,UAAU,CAAC;KAC3B;CACD"}
+{"version":3,"file":"sds-nav-card.d.ts","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,qBACa,UAAW,SAAQ,UAAU;IACzC;;;;;;;;OAQG;IAGH,OAAgB,MAAM,4BAAY;IAIlC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAW;IAG7C,OAAO,EAAG,MAAM,CAAC;IAGjB,KAAK,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAG/C,IAAI,EAAG,MAAM,CAAC;IAId,OAAO,CAAC,OAAO,CAAkB;IAGjC,OAAO,CAAC,QAAQ,CAAmB;IAE1B,YAAY;IAIrB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,wBAAwB;IAWhC,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,cAAc;IAmBb,MAAM;CAmBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,UAAU,CAAC;KAC3B;CACD"}

package/dist/sds-nav-card/sds-nav-card.js

@@ -75,12 +75,10 @@ let SDSNavCard = class SDSNavCard extends LitElement {
         };
         return html `
 			<a class="${classMap(navCardClasses)}" href="${this.link}">
-				<slot @slotchange=${this._handleSlotChange}></slot>
+				<slot name="before" @slotchange=${this._handleSlotChange}></slot>
 				<div class="sds-nav-card__content">
 					${this._renderHeading()}
-					${this.size === 'small'
-            ? ''
-            : html `<p class="sds-nav-card__text">${this.text}</p>`}
+					<slot></slot>
 				</div>
 			</a>
 		`;
@@ -89,19 +87,16 @@ let SDSNavCard = class SDSNavCard extends LitElement {
 // Styling
 SDSNavCard.styles = [styles];
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], SDSNavCard.prototype, "size", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], SDSNavCard.prototype, "heading", void 0);
 __decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], SDSNavCard.prototype, "level", void 0);
 __decorate([
-    property({ type: String })
-], SDSNavCard.prototype, "text", void 0);
-__decorate([
-    property({ type: String })
+    property({ type: String, reflect: true })
 ], SDSNavCard.prototype, "link", void 0);
 __decorate([
     state()

package/dist/sds-nav-card/sds-nav-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-nav-card.js","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-nav-card.styles';\n\n@customElement('sds-nav-card')\nexport class SDSNavCard extends LitElement {\n\t/**\n\t * This is the navigation card component\n\t *\n\t * @remarks The way the icon is handled now, causes a double update/side effect when loading the webpage.\n\t * The svg that should be placed inside the slot, currently needs have its stroke attribute manually removed,\n\t * in order for the components CSS to insert its own stroke color.\n\t * This should be looked more into.\n\t *\n\t */\n\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String })\n\tsize: 'large' | 'medium' | 'small' = 'large';\n\n\t@property({ type: String })\n\theading!: string;\n\n\t@property({ type: String })\n\tlevel: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h2';\n\n\t@property({ type: String })\n\ttext!: string;\n\n\t@property({ type: String })\n\tlink!: string;\n\n\t// Managing the icon slot\n\t@state()\n\tprivate hasIcon: boolean = false;\n\n\t@query('slot')\n\tprivate iconSlot!: HTMLSlotElement;\n\n\toverride firstUpdated() {\n\t\tthis._checkSlotContent();\n\t}\n\n\tprivate _handleSlotChange() {\n\t\tthis._checkSlotContent();\n\t}\n\n\t// Filters out text nodes that only contain whitespace\n\tprivate _filterToMeaningfulNodes(nodes: Node[]) {\n\t\treturn nodes.filter((node) => {\n\t\t\tif (node.nodeType === Node.TEXT_NODE) {\n\t\t\t\tconst textContent = (node as Text).textContent;\n\t\t\t\treturn textContent !== null && textContent.trim().length > 0;\n\t\t\t}\n\t\t\treturn true;\n\t\t});\n\t}\n\n\t// Checks if the icon slot has content and updates the state variable\n\tprivate _checkSlotContent() {\n\t\tconst assignedNodes = this.iconSlot.assignedNodes({ flatten: true });\n\t\tconst meaningfulNodes = this._filterToMeaningfulNodes(assignedNodes);\n\t\tthis.hasIcon = meaningfulNodes.length !== 0;\n\t}\n\n\tprivate _renderHeading() {\n\t\tconst headingClass = 'sds-nav-card__heading';\n\n\t\tswitch (this.level) {\n\t\t\tcase 'h2':\n\t\t\t\treturn html`<h2 class=\"${headingClass}\">${this.heading}</h2>`;\n\t\t\tcase 'h3':\n\t\t\t\treturn html`<h3 class=\"${headingClass}\">${this.heading}</h3>`;\n\t\t\tcase 'h4':\n\t\t\t\treturn html`<h4 class=\"${headingClass}\">${this.heading}</h4>`;\n\t\t\tcase 'h5':\n\t\t\t\treturn html`<h5 class=\"${headingClass}\">${this.heading}</h5>`;\n\t\t\tcase 'h6':\n\t\t\t\treturn html`<h6 class=\"${headingClass}\">${this.heading}</h6>`;\n\t\t\tdefault:\n\t\t\t\treturn html`<h2 class=\"${headingClass}\">${this.heading}</h2>`;\n\t\t}\n\t}\n\n\toverride render() {\n\t\tconst navCardClasses = {\n\t\t\t'sds-nav-card': true,\n\t\t\t'sds-nav-card--hasIcon': this.hasIcon,\n\t\t\t'sds-nav-card--small': this.size === 'small',\n\t\t\t'sds-nav-card--medium': this.size === 'medium',\n\t\t\t'sds-nav-card--large': this.size === 'large',\n\t\t};\n\n\t\treturn html`\n\t\t\t<a class=\"${classMap(navCardClasses)}\" href=\"${this.link}\">\n\t\t\t\t<slot @slotchange=${this._handleSlotChange}></slot>\n\t\t\t\t<div class=\"sds-nav-card__content\">\n\t\t\t\t\t${this._renderHeading()}\n\t\t\t\t\t${this.size === 'small'\n\t\t\t\t\t\t? ''\n\t\t\t\t\t\t: html`<p class=\"sds-nav-card__text\">${this.text}</p>`}\n\t\t\t\t</div>\n\t\t\t</a>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-nav-card': SDSNavCard;\n\t}\n}\n"]}
+{"version":3,"file":"sds-nav-card.js","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-nav-card.styles';\n\n@customElement('sds-nav-card')\nexport class SDSNavCard extends LitElement {\n\t/**\n\t * This is the navigation card component\n\t *\n\t * @remarks The way the icon is handled now, causes a double update/side effect when loading the webpage.\n\t * The svg that should be placed inside the slot, currently needs have its stroke attribute manually removed,\n\t * in order for the components CSS to insert its own stroke color.\n\t * This should be looked more into.\n\t *\n\t */\n\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true })\n\tsize: 'large' | 'medium' | 'small' = 'large';\n\n\t@property({ type: String, reflect: true })\n\theading!: string;\n\n\t@property({ type: String, reflect: true })\n\tlevel: 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h2';\n\n\t@property({ type: String, reflect: true })\n\tlink!: string;\n\n\t// Managing the icon slot\n\t@state()\n\tprivate hasIcon: boolean = false;\n\n\t@query('slot')\n\tprivate iconSlot!: HTMLSlotElement;\n\n\toverride firstUpdated() {\n\t\tthis._checkSlotContent();\n\t}\n\n\tprivate _handleSlotChange() {\n\t\tthis._checkSlotContent();\n\t}\n\n\t// Filters out text nodes that only contain whitespace\n\tprivate _filterToMeaningfulNodes(nodes: Node[]) {\n\t\treturn nodes.filter((node) => {\n\t\t\tif (node.nodeType === Node.TEXT_NODE) {\n\t\t\t\tconst textContent = (node as Text).textContent;\n\t\t\t\treturn textContent !== null && textContent.trim().length > 0;\n\t\t\t}\n\t\t\treturn true;\n\t\t});\n\t}\n\n\t// Checks if the icon slot has content and updates the state variable\n\tprivate _checkSlotContent() {\n\t\tconst assignedNodes = this.iconSlot.assignedNodes({ flatten: true });\n\t\tconst meaningfulNodes = this._filterToMeaningfulNodes(assignedNodes);\n\t\tthis.hasIcon = meaningfulNodes.length !== 0;\n\t}\n\n\tprivate _renderHeading() {\n\t\tconst headingClass = 'sds-nav-card__heading';\n\n\t\tswitch (this.level) {\n\t\t\tcase 'h2':\n\t\t\t\treturn html`<h2 class=\"${headingClass}\">${this.heading}</h2>`;\n\t\t\tcase 'h3':\n\t\t\t\treturn html`<h3 class=\"${headingClass}\">${this.heading}</h3>`;\n\t\t\tcase 'h4':\n\t\t\t\treturn html`<h4 class=\"${headingClass}\">${this.heading}</h4>`;\n\t\t\tcase 'h5':\n\t\t\t\treturn html`<h5 class=\"${headingClass}\">${this.heading}</h5>`;\n\t\t\tcase 'h6':\n\t\t\t\treturn html`<h6 class=\"${headingClass}\">${this.heading}</h6>`;\n\t\t\tdefault:\n\t\t\t\treturn html`<h2 class=\"${headingClass}\">${this.heading}</h2>`;\n\t\t}\n\t}\n\n\toverride render() {\n\t\tconst navCardClasses = {\n\t\t\t'sds-nav-card': true,\n\t\t\t'sds-nav-card--hasIcon': this.hasIcon,\n\t\t\t'sds-nav-card--small': this.size === 'small',\n\t\t\t'sds-nav-card--medium': this.size === 'medium',\n\t\t\t'sds-nav-card--large': this.size === 'large',\n\t\t};\n\n\t\treturn html`\n\t\t\t<a class=\"${classMap(navCardClasses)}\" href=\"${this.link}\">\n\t\t\t\t<slot name=\"before\" @slotchange=${this._handleSlotChange}></slot>\n\t\t\t\t<div class=\"sds-nav-card__content\">\n\t\t\t\t\t${this._renderHeading()}\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</a>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-nav-card': SDSNavCard;\n\t}\n}\n"]}

package/dist/sds-nav-card/sds-nav-card.styles.js

@@ -104,7 +104,7 @@ export const styles = css `
 	}
 
 	.sds-nav-card__heading {
-		font-weight: 600;
+		font-weight: 700;
 		font-size: 1.5rem;
 		margin: 0;
 		text-decoration: underline;

package/dist/sds-nav-card/sds-nav-card.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"sds-nav-card.styles.js","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0JxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t.sds-nav-card {\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tbackground-color: var(\n\t\t\t--sds-color-global-lightblue-100\n\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\n\t\tfont-size: var(--sds-typography-base-font-size);\n\t\tline-height: var(--sds-typography-base-line-height);\n\t\tfont-weight: var(--sds-typography-base-font-weight);\n\t\tfont-family: var(--sds-typography-font-family);\n\n\t\tdisplay: flex;\n\t\tmin-height: 10.25rem;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tmax-width: 50rem;\n\n\t\tbox-sizing: border-box;\n\t\tpadding: var(--sds-spacing-7) var(--sds-spacing-9) var(--sds-spacing-8);\n\t\tgap: var(--sds-spacing-5);\n\t\ttext-align: left;\n\n\t\tborder-radius: var(--sds-radius-card);\n\t\tborder: 1px solid transparent;\n\n\t\tcursor: pointer;\n\n\t\t& p {\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\thyphens: auto;\n\t\t}\n\n\t\t&:link {\n\t\t\ttext-decoration: none;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(\n\t\t\t\t--sds-color-global-lightblue-300\n\t\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\n\t\t\t.sds-nav-card__heading {\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\t\t}\n\n\t\t&:active,\n\t\t&:focus:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-selected);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\n\t\t\t.sds-nav-card__heading {\n\t\t\t\ttext-decoration: underline;\n\t\t\t\ttext-decoration-thickness: 0.075rem;\n\t\t\t}\n\n\t\t\t::slotted(*) {\n\t\t\t\tstroke: var(--sds-color-semantic-icon-on-action);\n\t\t\t}\n\t\t}\n\n\t\t&:focus {\n\t\t\tborder: 1px solid var(--sds-color-semantic-border-focus);\n\t\t\tbackground: var(\n\t\t\t\t--sds-color-global-lightblue-100\n\t\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-nav-card--hasIcon {\n\t\tpadding: var(--sds-spacing-7) var(--sds-spacing-7) var(--sds-spacing-8);\n\t}\n\n\t.sds-nav-card__content {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\twidth: 100%;\n\t\tgap: var(--sds-spacing-3);\n\t}\n\n\t.sds-nav-card__text {\n\t\tdisplay: -webkit-box;\n\t\t-webkit-line-clamp: 3;\n\t\t-webkit-box-orient: vertical;\n\t\toverflow: hidden;\n\t}\n\n\t::slotted(*) {\n\t\theight: 4.5rem;\n\t\tmin-width: 4.5rem;\n\t\twidth: 4.5rem;\n\t\talign-self: center;\n\t\tstroke: var(\n\t\t\t--sds-color-global-black\n\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\t}\n\n\t.sds-nav-card__heading {\n\t\tfont-weight: 600;\n\t\tfont-size: 1.5rem;\n\t\tmargin: 0;\n\t\ttext-decoration: underline;\n\t\ttext-decoration-thickness: 0.075rem;\n\t\ttext-underline-offset: 0.146rem;\n\t}\n\n\t.sds-nav-card--medium {\n\t\tmin-height: 7rem;\n\n\t\t.sds-nav-card__text {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: flex;\n\n\t\t\t-webkit-line-clamp: 1;\n\t\t\t-webkit-box-orient: vertical;\n\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\n\t\t::slotted(*) {\n\t\t\theight: 3rem;\n\t\t\tmin-width: 3rem;\n\t\t\twidth: 3rem;\n\t\t}\n\t}\n\n\t.sds-nav-card--small {\n\t\tmin-height: 4.5rem;\n\t\tpadding: var(--sds-spacing-5) var(--sds-spacing-8) var(--sds-spacing-6);\n\n\t\t.sds-nav-card--hasIcon {\n\t\t\tpadding: var(--sds-spacing-5) var(--sds-spacing-7)\n\t\t\t\tvar(--sds-spacing-6);\n\t\t}\n\n\t\t.sds-nav-card__content {\n\t\t\tgap: 0;\n\t\t\talign-self: center;\n\t\t}\n\n\t\t::slotted(*) {\n\t\t\theight: 2.5rem;\n\t\t\tmin-width: 2.5rem;\n\t\t\twidth: 2.5rem;\n\t\t}\n\t}\n`;\n"]}
+{"version":3,"file":"sds-nav-card.styles.js","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0JxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t.sds-nav-card {\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tbackground-color: var(\n\t\t\t--sds-color-global-lightblue-100\n\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\n\t\tfont-size: var(--sds-typography-base-font-size);\n\t\tline-height: var(--sds-typography-base-line-height);\n\t\tfont-weight: var(--sds-typography-base-font-weight);\n\t\tfont-family: var(--sds-typography-font-family);\n\n\t\tdisplay: flex;\n\t\tmin-height: 10.25rem;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tmax-width: 50rem;\n\n\t\tbox-sizing: border-box;\n\t\tpadding: var(--sds-spacing-7) var(--sds-spacing-9) var(--sds-spacing-8);\n\t\tgap: var(--sds-spacing-5);\n\t\ttext-align: left;\n\n\t\tborder-radius: var(--sds-radius-card);\n\t\tborder: 1px solid transparent;\n\n\t\tcursor: pointer;\n\n\t\t& p {\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\thyphens: auto;\n\t\t}\n\n\t\t&:link {\n\t\t\ttext-decoration: none;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(\n\t\t\t\t--sds-color-global-lightblue-300\n\t\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\n\t\t\t.sds-nav-card__heading {\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\t\t}\n\n\t\t&:active,\n\t\t&:focus:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-selected);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\n\t\t\t.sds-nav-card__heading {\n\t\t\t\ttext-decoration: underline;\n\t\t\t\ttext-decoration-thickness: 0.075rem;\n\t\t\t}\n\n\t\t\t::slotted(*) {\n\t\t\t\tstroke: var(--sds-color-semantic-icon-on-action);\n\t\t\t}\n\t\t}\n\n\t\t&:focus {\n\t\t\tborder: 1px solid var(--sds-color-semantic-border-focus);\n\t\t\tbackground: var(\n\t\t\t\t--sds-color-global-lightblue-100\n\t\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-nav-card--hasIcon {\n\t\tpadding: var(--sds-spacing-7) var(--sds-spacing-7) var(--sds-spacing-8);\n\t}\n\n\t.sds-nav-card__content {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\twidth: 100%;\n\t\tgap: var(--sds-spacing-3);\n\t}\n\n\t.sds-nav-card__text {\n\t\tdisplay: -webkit-box;\n\t\t-webkit-line-clamp: 3;\n\t\t-webkit-box-orient: vertical;\n\t\toverflow: hidden;\n\t}\n\n\t::slotted(*) {\n\t\theight: 4.5rem;\n\t\tmin-width: 4.5rem;\n\t\twidth: 4.5rem;\n\t\talign-self: center;\n\t\tstroke: var(\n\t\t\t--sds-color-global-black\n\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\t}\n\n\t.sds-nav-card__heading {\n\t\tfont-weight: 700;\n\t\tfont-size: 1.5rem;\n\t\tmargin: 0;\n\t\ttext-decoration: underline;\n\t\ttext-decoration-thickness: 0.075rem;\n\t\ttext-underline-offset: 0.146rem;\n\t}\n\n\t.sds-nav-card--medium {\n\t\tmin-height: 7rem;\n\n\t\t.sds-nav-card__text {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: flex;\n\n\t\t\t-webkit-line-clamp: 1;\n\t\t\t-webkit-box-orient: vertical;\n\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\n\t\t::slotted(*) {\n\t\t\theight: 3rem;\n\t\t\tmin-width: 3rem;\n\t\t\twidth: 3rem;\n\t\t}\n\t}\n\n\t.sds-nav-card--small {\n\t\tmin-height: 4.5rem;\n\t\tpadding: var(--sds-spacing-5) var(--sds-spacing-8) var(--sds-spacing-6);\n\n\t\t.sds-nav-card--hasIcon {\n\t\t\tpadding: var(--sds-spacing-5) var(--sds-spacing-7)\n\t\t\t\tvar(--sds-spacing-6);\n\t\t}\n\n\t\t.sds-nav-card__content {\n\t\t\tgap: 0;\n\t\t\talign-self: center;\n\t\t}\n\n\t\t::slotted(*) {\n\t\t\theight: 2.5rem;\n\t\t\tmin-width: 2.5rem;\n\t\t\twidth: 2.5rem;\n\t\t}\n\t}\n`;\n"]}

package/dist/sds-notification/sds-notification.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+import '../sds-icon/sds-icon';
+type NotificationVariant = 'info' | 'success' | 'attention' | 'warning' | 'critical';
+export declare class SDSNotification extends LitElement {
+    static styles: import("lit").CSSResult[];
+    variant: NotificationVariant;
+    removableLabel?: string;
+    private readonly _remove;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-notification': SDSNotification;
+    }
+}
+export {};
+//# sourceMappingURL=sds-notification.d.ts.map

package/dist/sds-notification/sds-notification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-notification.d.ts","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMhD,OAAO,sBAAsB,CAAC;AAE9B,KAAK,mBAAmB,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;AAUrF,qBACa,eAAgB,SAAQ,UAAU;IAE9C,OAAgB,MAAM,4BAAY;IAIlC,OAAO,EAAE,mBAAmB,CAAU;IAGtC,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,OAAO,CAAC,QAAQ,CAAC,OAAO,CAOtB;IAEO,MAAM;CA2Bf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,eAAe,CAAC;KACpC;CACD"}

package/dist/sds-notification/sds-notification.js

@@ -0,0 +1,70 @@
+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 { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styles } from './sds-notification.styles';
+import '../sds-icon/sds-icon';
+const notificationIcons = {
+    info: 'info-material-filled',
+    success: 'check_circle-material-filled',
+    attention: 'error-material-filled',
+    warning: 'warning-material-filled',
+    critical: 'dangerous-material-filled',
+};
+let SDSNotification = class SDSNotification extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Reactive Props
+        this.variant = 'info';
+        this._remove = () => {
+            this.dispatchEvent(new CustomEvent('sds-remove', {
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    render() {
+        const notificationClasses = {
+            'sds-notification': true,
+            [`sds-notification--${this.variant}`]: true,
+        };
+        return html `<div class="${classMap(notificationClasses)}">
+			<div class="sds-notification__type">
+				<sds-icon class="sds-notification__icon" name="${notificationIcons[this.variant]}" size="m"></sds-icon>
+			</div>
+			<div class="sds-notification__content">
+				<div class="sds-notification__content-text">
+					<slot name="title"></slot>
+					<slot name="message"></slot>
+				</div>
+				${this.removableLabel
+            ? html `<button
+							class="sds-notification__remove-btn"
+							@click=${this._remove}
+							aria-label="${this.removableLabel}"
+						>
+							<sds-icon name="close-material-outlined" size="s"></sds-icon>
+						</button>`
+            : nothing}
+			</div>
+		</div>`;
+    }
+};
+// Styling
+SDSNotification.styles = [styles];
+__decorate([
+    property({ type: String, reflect: true })
+], SDSNotification.prototype, "variant", void 0);
+__decorate([
+    property({ type: String, attribute: 'removable-label', reflect: true })
+], SDSNotification.prototype, "removableLabel", void 0);
+SDSNotification = __decorate([
+    customElement('sds-notification')
+], SDSNotification);
+export { SDSNotification };
+//# sourceMappingURL=sds-notification.js.map

package/dist/sds-notification/sds-notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sds-notification.js","sourceRoot":"","sources":["../../src/sds-notification/sds-notification.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAGnD,OAAO,sBAAsB,CAAC;AAI9B,MAAM,iBAAiB,GAA0C;IAChE,IAAI,EAAE,sBAAsB;IAC5B,OAAO,EAAE,8BAA8B;IACvC,SAAS,EAAE,uBAAuB;IAClC,OAAO,EAAE,yBAAyB;IAClC,QAAQ,EAAE,2BAA2B;CACrC,CAAC;AAGK,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAIN,iBAAiB;QAEjB,YAAO,GAAwB,MAAM,CAAC;QAKrB,YAAO,GAAG,GAAG,EAAE;YAC/B,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;IA6BH,CAAC;IA3BS,MAAM;QACd,MAAM,mBAAmB,GAAG;YAC3B,kBAAkB,EAAE,IAAI;YACxB,CAAC,qBAAqB,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;SAC3C,CAAC;QAEF,OAAO,IAAI,CAAA,eAAe,QAAQ,CAAC,mBAAmB,CAAC;;qDAEJ,iBAAiB,CAAC,IAAI,CAAC,OAAO,CAAC;;;;;;;MAO9E,IAAI,CAAC,cAAc;YACpB,CAAC,CAAC,IAAI,CAAA;;gBAEK,IAAI,CAAC,OAAO;qBACP,IAAI,CAAC,cAAc;;;gBAGxB;YACX,CAAC,CAAC,OAAO;;SAEL,CAAC;IACT,CAAC;;AA7CD,UAAU;AACM,sBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAIlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACJ;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAChD;AATZ,eAAe;IAD3B,aAAa,CAAC,kBAAkB,CAAC;GACrB,eAAe,CA+C3B","sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './sds-notification.styles';\nimport { type IconType } from 'src/sds-icon/sds-icon.icon-types';\n\nimport '../sds-icon/sds-icon';\n\ntype NotificationVariant = 'info' | 'success' | 'attention' | 'warning' | 'critical';\n\nconst notificationIcons: Record<NotificationVariant, IconType> = {\n\tinfo: 'info-material-filled',\n\tsuccess: 'check_circle-material-filled',\n\tattention: 'error-material-filled',\n\twarning: 'warning-material-filled',\n\tcritical: 'dangerous-material-filled',\n};\n\n@customElement('sds-notification')\nexport class SDSNotification extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\t// Reactive Props\n\t@property({ type: String, reflect: true })\n\tvariant: NotificationVariant = 'info';\n\n\t@property({ type: String, attribute: 'removable-label', reflect: true })\n\tremovableLabel?: string;\n\n\tprivate readonly _remove = () => {\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-remove', {\n\t\t\t\tbubbles: true,\n\t\t\t\tcomposed: true,\n\t\t\t})\n\t\t);\n\t};\n\n\toverride render() {\n\t\tconst notificationClasses = {\n\t\t\t'sds-notification': true,\n\t\t\t[`sds-notification--${this.variant}`]: true,\n\t\t};\n\n\t\treturn html`<div class=\"${classMap(notificationClasses)}\">\n\t\t\t<div class=\"sds-notification__type\">\n\t\t\t\t<sds-icon class=\"sds-notification__icon\" name=\"${notificationIcons[this.variant]}\" size=\"m\"></sds-icon>\n\t\t\t</div>\n\t\t\t<div class=\"sds-notification__content\">\n\t\t\t\t<div class=\"sds-notification__content-text\">\n\t\t\t\t\t<slot name=\"title\"></slot>\n\t\t\t\t\t<slot name=\"message\"></slot>\n\t\t\t\t</div>\n\t\t\t\t${this.removableLabel\n\t\t\t\t\t? html`<button\n\t\t\t\t\t\t\tclass=\"sds-notification__remove-btn\"\n\t\t\t\t\t\t\t@click=${this._remove}\n\t\t\t\t\t\t\taria-label=\"${this.removableLabel}\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<sds-icon name=\"close-material-outlined\" size=\"s\"></sds-icon>\n\t\t\t\t\t\t</button>`\n\t\t\t\t\t: nothing}\n\t\t\t</div>\n\t\t</div>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-notification': SDSNotification;\n\t}\n}\n"]}

package/dist/sds-notification/sds-notification.styles.d.ts

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

package/dist/sds-notification/sds-notification.styles.d.ts.map

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