@politiet/sheriff-web-components 2.0.2 → 2.1.0

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

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import '../sds-icon/sds-icon';
+export interface SDSDetailsProps {
+    open?: boolean;
+    standalone?: boolean;
+    name?: string;
+}
+export declare class SDSDetails extends LitElement {
+    static styles: import("lit").CSSResult[];
+    open: SDSDetailsProps['open'];
+    standalone: SDSDetailsProps['standalone'];
+    name: SDSDetailsProps['name'];
+    private _handleToggle;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sds-details': SDSDetails;
+    }
+}
+//# sourceMappingURL=sds-details.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-details.d.ts","sourceRoot":"","sources":["../../src/sds-details/sds-details.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC,OAAO,sBAAsB,CAAC;AAE9B,MAAM,WAAW,eAAe;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,qBACa,UAAW,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAAY;IAGlC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAS;IAGtC,UAAU,EAAE,eAAe,CAAC,YAAY,CAAC,CAAS;IAGlD,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAa;IAE1C,OAAO,CAAC,aAAa,CAanB;IAEO,MAAM;CAef;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD"}

package/dist/sds-details/sds-details.js

@@ -0,0 +1,60 @@
+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 { property } from 'lit/decorators.js';
+import { guardedCustomElement } from '../utils/guarded-custom-element';
+import { styles } from './sds-details.styles';
+import '../sds-icon/sds-icon';
+let SDSDetails = class SDSDetails extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.standalone = false;
+        this.name = undefined;
+        this._handleToggle = (event) => {
+            const details = event.currentTarget;
+            if (this.open !== details.open) {
+                this.open = details.open;
+            }
+            this.dispatchEvent(new CustomEvent('sds-toggle', {
+                detail: { open: details.open },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    render() {
+        return html `
+			<details class="sds-details" .name="${this.name ?? ''}" ?data-standalone="${this.standalone}" ?open="${this.open}" @toggle="${this._handleToggle}">
+				<summary class="sds-details__summary">
+					<sds-icon name="chevron_up-material-filled"></sds-icon>
+					<div class="sds-details__summary-content">
+						<slot name="summary"></slot>
+					</div>
+				</summary>
+				<div class="sds-details__content">
+					<slot></slot>
+				</div>
+			</details>
+		`;
+    }
+};
+SDSDetails.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSDetails.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SDSDetails.prototype, "standalone", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SDSDetails.prototype, "name", void 0);
+SDSDetails = __decorate([
+    guardedCustomElement('sds-details')
+], SDSDetails);
+export { SDSDetails };
+//# sourceMappingURL=sds-details.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-details.js","sourceRoot":"","sources":["../../src/sds-details/sds-details.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,sBAAsB,CAAC;AASvB,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QAIN,SAAI,GAA4B,KAAK,CAAC;QAGtC,eAAU,GAAkC,KAAK,CAAC;QAGlD,SAAI,GAA4B,SAAS,CAAC;QAElC,kBAAa,GAAG,CAAC,KAAY,EAAE,EAAE;YACxC,MAAM,OAAO,GAAG,KAAK,CAAC,aAAmC,CAAC;YAC1D,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,IAAI,EAAE,CAAC;gBAChC,IAAI,CAAC,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;YAC1B,CAAC;YAED,IAAI,CAAC,aAAa,CACjB,IAAI,WAAW,CAAC,YAAY,EAAE;gBAC7B,MAAM,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE;gBAC9B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACd,CAAC,CACF,CAAC;QACH,CAAC,CAAC;IAiBH,CAAC;IAfS,MAAM;QACd,OAAO,IAAI,CAAA;yCAC4B,IAAI,CAAC,IAAI,IAAI,EAAE,uBAAuB,IAAI,CAAC,UAAU,YAAY,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,aAAa;;;;;;;;;;;GAWhJ,CAAC;IACH,CAAC;;AAxCe,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACL;AAGtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACO;AAGlD;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACA;AAV9B,UAAU;IADtB,oBAAoB,CAAC,aAAa,CAAC;GACvB,UAAU,CA0CtB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-details.styles';\nimport '../sds-icon/sds-icon';\n\nexport interface SDSDetailsProps {\n\topen?: boolean;\n\tstandalone?: boolean;\n\tname?: string;\n}\n\n@guardedCustomElement('sds-details')\nexport class SDSDetails extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: Boolean, reflect: true })\n\topen: SDSDetailsProps['open'] = false;\n\n\t@property({ type: Boolean, reflect: true })\n\tstandalone: SDSDetailsProps['standalone'] = false;\n\n\t@property({ type: String, reflect: true })\n\tname: SDSDetailsProps['name'] = undefined;\n\n\tprivate _handleToggle = (event: Event) => {\n\t\tconst details = event.currentTarget as HTMLDetailsElement;\n\t\tif (this.open !== details.open) {\n\t\t\tthis.open = details.open;\n\t\t}\n\n\t\tthis.dispatchEvent(\n\t\t\tnew CustomEvent('sds-toggle', {\n\t\t\t\tdetail: { open: details.open },\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\treturn html`\n\t\t\t<details class=\"sds-details\" .name=\"${this.name ?? ''}\" ?data-standalone=\"${this.standalone}\" ?open=\"${this.open}\" @toggle=\"${this._handleToggle}\">\n\t\t\t\t<summary class=\"sds-details__summary\">\n\t\t\t\t\t<sds-icon name=\"chevron_up-material-filled\"></sds-icon>\n\t\t\t\t\t<div class=\"sds-details__summary-content\">\n\t\t\t\t\t\t<slot name=\"summary\"></slot>\n\t\t\t\t\t</div>\n\t\t\t\t</summary>\n\t\t\t\t<div class=\"sds-details__content\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</div>\n\t\t\t</details>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-details': SDSDetails;\n\t}\n}\n"]}

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

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

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

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

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

@@ -0,0 +1,139 @@
+import { css } from 'lit';
+export const styles = css `
+	:host {
+		--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));
+
+		--_sds-details-summary-padding: var(--sds-details-summary-padding, var(--sds-spacing-xs));
+		--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));
+		--_sds-details-summary-gap: var(--sds-details-summary-gap, var(--sds-spacing-3xs));
+
+		--_sds-details-content-padding-start: var(--sds-details-content-padding-start, calc(var(--_sds-details-summary-padding) + var(--_sds-details-summary-gap) + var(--sds-components-icon-md)));
+		--_sds-details-content-padding: var(--sds-details-content-padding, var(--sds-spacing-xs));
+		--_sds-details-content-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));
+
+		--_sds-details-focus-outline-width: var(--sds-details-focus-outline-width, var(--sds-border-md));
+		--_sds-details-focus-outline-color: var(--sds-details-focus-outline-color, var(--sds-color-states-focus-outer));
+		--_sds-details-focus-outline-offset: var(--sds-details-focus-outline-offset, var(--sds-color-states-focus-spacing));
+		--_sds-details-focus-inner-color: var(--sds-details-focus-inner-color, var(--sds-color-states-focus-inner));
+
+		--_sds-details-icon-transition: var(--sds-details-icon-transition, transform 0.2s ease);
+
+		--_sds-details-border-color: var(--sds-details-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));
+		--_sds-details-border-bottom: var(--sds-details-border-bottom, solid 1px var(--_sds-details-border-color));
+	}
+
+	:host([data-palette]) {
+		--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));
+		--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));
+	}
+
+	.sds-details {
+		color: var(--_sds-details-text-color);
+
+		&:is([open]) {
+			--_sds-details-summary-background-color: var(----_sds-details-summary-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));
+		}
+
+		&:not([data-standalone]) {
+			border-top: solid 1px var(--_sds-details-border-color);
+			border-bottom: var(--_sds-details-border-bottom);
+		}
+
+		/* Setting the border on the summary element preserves the border
+		   when the element has focus
+		*/
+		&:is([data-standalone]) {
+			summary {
+				border-radius: var(--sds-radius-md);
+				border: solid 1px var(--_sds-details-border-color);
+			}
+
+			&:is([open]) {
+				& summary {
+					border-bottom-left-radius: 0px;
+					border-bottom-right-radius: 0px;
+				}
+
+				& .sds-details__content {
+					border-left: solid 1px var(--_sds-details-border-color);
+					border-right: solid 1px var(--_sds-details-border-color);
+					border-bottom: solid 1px var(--_sds-details-border-color);
+					border-bottom-left-radius: var(--sds-radius-md);
+					border-bottom-right-radius: var(--sds-radius-md);
+				}
+			}
+		}
+	}
+
+	.sds-details__summary {
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: var(--_sds-details-summary-padding);
+		background-color: var(--_sds-details-summary-background-color);
+		gap: var(--_sds-details-summary-gap);
+		list-style: none;
+		user-select: none;
+
+		&:hover {
+			--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));
+		}
+
+		&:active {
+			--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));
+		}
+
+		&:focus-visible {
+			box-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-details-focus-inner-color);
+			outline: var(--_sds-details-focus-outline-width) solid var(--_sds-details-focus-outline-color);
+			outline-offset: var(--_sds-details-focus-outline-offset);
+		}
+	}
+
+	.sds-details__summary-content {
+		flex: 1;
+		min-width: 0;
+	}
+
+	sds-icon {
+		transition: var(--_sds-details-icon-transition);
+	}
+
+	.sds-details[open] sds-icon {
+		transform: rotate(180deg);
+	}
+
+	.sds-details__content {
+		padding: var(--_sds-details-content-padding);
+		padding-inline-start: var(--_sds-details-content-padding-start);
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.sds-details__content {
+			animation: show-content-keyframes 200ms ease-in-out;
+		}
+	}
+
+	@keyframes show-content-keyframes {
+		from {
+			opacity: 0;
+			transform: translateY(-0.5rem);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	::slotted(*) {
+		margin: 0 !important;
+		padding: 0 !important;
+	}
+
+	::slotted([slot='summary']) {
+		display: inline;
+		margin: 0;
+	}
+`;
+//# sourceMappingURL=sds-details.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sds-details.styles.js","sourceRoot":"","sources":["../../src/sds-details/sds-details.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\n\t\t--_sds-details-summary-padding: var(--sds-details-summary-padding, var(--sds-spacing-xs));\n\t\t--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t\t--_sds-details-summary-gap: var(--sds-details-summary-gap, var(--sds-spacing-3xs));\n\n\t\t--_sds-details-content-padding-start: var(--sds-details-content-padding-start, calc(var(--_sds-details-summary-padding) + var(--_sds-details-summary-gap) + var(--sds-components-icon-md)));\n\t\t--_sds-details-content-padding: var(--sds-details-content-padding, var(--sds-spacing-xs));\n\t\t--_sds-details-content-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\n\t\t--_sds-details-focus-outline-width: var(--sds-details-focus-outline-width, var(--sds-border-md));\n\t\t--_sds-details-focus-outline-color: var(--sds-details-focus-outline-color, var(--sds-color-states-focus-outer));\n\t\t--_sds-details-focus-outline-offset: var(--sds-details-focus-outline-offset, var(--sds-color-states-focus-spacing));\n\t\t--_sds-details-focus-inner-color: var(--sds-details-focus-inner-color, var(--sds-color-states-focus-inner));\n\n\t\t--_sds-details-icon-transition: var(--sds-details-icon-transition, transform 0.2s ease);\n\n\t\t--_sds-details-border-color: var(--sds-details-border-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t\t--_sds-details-border-bottom: var(--sds-details-border-bottom, solid 1px var(--_sds-details-border-color));\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-details-text-color: var(--sds-details-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));\n\t\t--_sds-details-summary-background-color: var(--sds-details-background-color, var(--sds-color-surface-default, var(--sds-color-main-surface-default)));\n\t}\n\n\t.sds-details {\n\t\tcolor: var(--_sds-details-text-color);\n\n\t\t&:is([open]) {\n\t\t\t--_sds-details-summary-background-color: var(----_sds-details-summary-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));\n\t\t}\n\n\t\t&:not([data-standalone]) {\n\t\t\tborder-top: solid 1px var(--_sds-details-border-color);\n\t\t\tborder-bottom: var(--_sds-details-border-bottom);\n\t\t}\n\n\t\t/* Setting the border on the summary element preserves the border\n\t\t   when the element has focus\n\t\t*/\n\t\t&:is([data-standalone]) {\n\t\t\tsummary {\n\t\t\t\tborder-radius: var(--sds-radius-md);\n\t\t\t\tborder: solid 1px var(--_sds-details-border-color);\n\t\t\t}\n\n\t\t\t&:is([open]) {\n\t\t\t\t& summary {\n\t\t\t\t\tborder-bottom-left-radius: 0px;\n\t\t\t\t\tborder-bottom-right-radius: 0px;\n\t\t\t\t}\n\n\t\t\t\t& .sds-details__content {\n\t\t\t\t\tborder-left: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-right: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-bottom: solid 1px var(--_sds-details-border-color);\n\t\t\t\t\tborder-bottom-left-radius: var(--sds-radius-md);\n\t\t\t\t\tborder-bottom-right-radius: var(--sds-radius-md);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.sds-details__summary {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: var(--_sds-details-summary-padding);\n\t\tbackground-color: var(--_sds-details-summary-background-color);\n\t\tgap: var(--_sds-details-summary-gap);\n\t\tlist-style: none;\n\t\tuser-select: none;\n\n\t\t&:hover {\n\t\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));\n\t\t}\n\n\t\t&:active {\n\t\t\t--_sds-details-summary-background-color: var(--sds-details-summary-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: 0 0 0 var(--sds-color-states-focus-spacing) var(--_sds-details-focus-inner-color);\n\t\t\toutline: var(--_sds-details-focus-outline-width) solid var(--_sds-details-focus-outline-color);\n\t\t\toutline-offset: var(--_sds-details-focus-outline-offset);\n\t\t}\n\t}\n\n\t.sds-details__summary-content {\n\t\tflex: 1;\n\t\tmin-width: 0;\n\t}\n\n\tsds-icon {\n\t\ttransition: var(--_sds-details-icon-transition);\n\t}\n\n\t.sds-details[open] sds-icon {\n\t\ttransform: rotate(180deg);\n\t}\n\n\t.sds-details__content {\n\t\tpadding: var(--_sds-details-content-padding);\n\t\tpadding-inline-start: var(--_sds-details-content-padding-start);\n\t}\n\n\t@media (prefers-reduced-motion: no-preference) {\n\t\t.sds-details__content {\n\t\t\tanimation: show-content-keyframes 200ms ease-in-out;\n\t\t}\n\t}\n\n\t@keyframes show-content-keyframes {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t\ttransform: translateY(-0.5rem);\n\t\t}\n\t\tto {\n\t\t\topacity: 1;\n\t\t\ttransform: translateY(0);\n\t\t}\n\t}\n\n\t::slotted(*) {\n\t\tmargin: 0 !important;\n\t\tpadding: 0 !important;\n\t}\n\n\t::slotted([slot='summary']) {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t}\n`;\n"]}