@skf-design-system/ui-components 1.0.0-beta.5 → 1.0.1-beta.0

package/dist/components/dialog/dialog.component.js

@@ -0,0 +1,187 @@
+var _ = (o) => {
+  throw TypeError(o);
+};
+var w = (o, e, t) => e.has(o) || _("Cannot " + t);
+var f = (o, e, t) => (w(o, e, "read from private field"), t ? t.call(o) : e.get(o)), g = (o, e, t) => e.has(o) ? _("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(o) : e.set(o, t), h = (o, e, t, a) => (w(o, e, "write to private field"), a ? a.call(o, t) : e.set(o, t), t);
+import "../button/button.js";
+import "../heading/heading.js";
+import "../icon/icon.js";
+import { SkfElement as v } from "../../internal/components/skf-element.js";
+import { watch as C } from "../../internal/helpers/watch.js";
+import B from "../../styles/component.styles.js";
+import { html as b, nothing as k } from "lit";
+import { property as c, state as m, query as P, queryAssignedElements as M } from "lit/decorators.js";
+import { classMap as $ } from "lit/directives/class-map.js";
+import { styles as O } from "./dialog.styles.js";
+var A = Object.defineProperty, E = Object.getOwnPropertyDescriptor, i = (o, e, t, a) => {
+  for (var n = a > 1 ? void 0 : a ? E(e, t) : e, l = o.length - 1, r; l >= 0; l--)
+    (r = o[l]) && (n = (a ? r(e, t, n) : r(n)) || n);
+  return a && n && A(e, t, n), n;
+}, p, u, d;
+const y = class y extends v {
+  constructor() {
+    super(...arguments);
+    g(this, p);
+    g(this, u);
+    g(this, d);
+    h(this, p, 0), h(this, u, 20), h(this, d, !1), this.fullscreen = !1, this.noCloseButton = !1, this.noPadding = !1, this.onClose = null, this.modal = !0, this.renderFoot = !1, this.show = async () => await this.showModal(), this._handleBackdropClick = (t) => {
+      this._isModal || t.target !== this.$dialog || this.close();
+    }, this._handleClose = (t) => {
+      console.log("Handle close reached"), this.onClose && this.onClose(t), this.close();
+    }, this.showModal = async () => await (async () => (console.log("%cmodal ->", "color: red", this.modal), this.$dialog.showModal(), await this._transition().entry(), this.emit("skf-dialog-open"), !0))(), this.close = async () => (console.log("close reached"), f(this, d) ? void 0 : (h(this, d, !0), await (async () => (this.emit("skf-dialog-close"), await this._transition().exit(), this.$dialog.close(), this.open = !1, h(this, d, !1), !0))()));
+  }
+  firstUpdated() {
+    this.$dialog.addEventListener("close", (t) => {
+      t.stopPropagation(), console.log("close event detected 1", t), this.emit("close");
+    });
+  }
+  handleOpenChange() {
+    var t;
+    switch (!0) {
+      case (this.open === !0 && !!this.modal):
+        this.showModal();
+        break;
+      case (this.open === !0 && !this.modal):
+        this.show();
+        break;
+      case this.open === !1:
+        this.close();
+        break;
+    }
+    this.open && (this.renderFoot = !!((t = this.footerEls) != null && t.length));
+  }
+  /** @internal */
+  _transition() {
+    const t = this.fullscreen ? {} : {
+      translate: `${String(f(this, p))} ${String(f(this, u))}px`
+    };
+    return { entry: () => new Promise((l) => {
+      const r = this.$dialog.animate(
+        [
+          {
+            opacity: 0,
+            ...t
+          },
+          { opacity: 1, translate: "0 0" }
+        ],
+        {
+          duration: 200,
+          fill: "forwards",
+          easing: "ease-out"
+        }
+      );
+      this.$dialog.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: 200,
+        fill: "forwards",
+        pseudoElement: "::backdrop"
+      }), r.onfinish = () => {
+        l("opened");
+      };
+    }), exit: () => new Promise((l) => {
+      const r = this.$dialog.animate(
+        [
+          { opacity: 1, translate: "0 0" },
+          {
+            opacity: 0,
+            ...t
+          }
+        ],
+        {
+          duration: 200,
+          fill: "forwards",
+          easing: "ease-in"
+        }
+      );
+      this.$dialog.animate([{ opacity: 1 }, { opacity: 0 }], {
+        duration: 200,
+        fill: "forwards",
+        pseudoElement: "::backdrop"
+      }), r.onfinish = () => {
+        l("closed");
+      };
+    }) };
+  }
+  /** @internal */
+  get _isModal() {
+    return typeof this.modal == "string";
+  }
+  render() {
+    return b`
+			<dialog
+				@close=${this._handleClose}
+				@mousedown=${this._handleBackdropClick}
+				@touchstart=${this._handleBackdropClick}
+				autofocus
+				class=${$({
+      dialog: !0,
+      "dialog--fullscreen": this.fullscreen,
+      "dialog--no-padding": this.noPadding
+    })}
+			>
+				<div class="dialog__head">
+					<h2 class="dialog__heading">${this.heading}</h2>
+					${this.noCloseButton ? k : b`
+								<button
+									@click=${this._handleClose}
+									aria-label=${this.closeButtonAriaLabel ?? "Close dialog"}
+									class="dialog__close-btn"
+								>
+									<skf-icon name="close" color="inverse"></skf-icon>
+								</button>
+							`}
+				</div>
+				<div class="dialog__body">
+					<slot class="dialog__main"></slot>
+					<slot
+						class=${$({
+      dialog__foot: !0,
+      "dialog__foot--hidden": !this.renderFoot
+    })}
+						name="footer"
+					></slot>
+				</div>
+			</dialog>
+		`;
+  }
+};
+p = new WeakMap(), u = new WeakMap(), d = new WeakMap(), y.styles = [B, O];
+let s = y;
+i([
+  c({ attribute: "close-button-aria-label" })
+], s.prototype, "closeButtonAriaLabel", 2);
+i([
+  c()
+], s.prototype, "heading", 2);
+i([
+  c({ type: Boolean })
+], s.prototype, "fullscreen", 2);
+i([
+  c({ type: Boolean, attribute: "no-close-button" })
+], s.prototype, "noCloseButton", 2);
+i([
+  c({ type: Boolean, attribute: "no-padding" })
+], s.prototype, "noPadding", 2);
+i([
+  c({ type: Boolean, reflect: !0 })
+], s.prototype, "open", 2);
+i([
+  m()
+], s.prototype, "onClose", 2);
+i([
+  P("dialog")
+], s.prototype, "$dialog", 2);
+i([
+  M({ slot: "footer" })
+], s.prototype, "footerEls", 2);
+i([
+  m()
+], s.prototype, "modal", 2);
+i([
+  m()
+], s.prototype, "renderFoot", 2);
+i([
+  C("open")
+], s.prototype, "handleOpenChange", 1);
+export {
+  s as SkfDialog
+};

package/dist/components/dialog/dialog.d.ts

@@ -0,0 +1,8 @@
+import { SkfDialog } from './dialog.component';
+export * from './dialog.component';
+export default SkfDialog;
+declare global {
+    interface HTMLElementTagNameMap {
+        'skf-dialog': SkfDialog;
+    }
+}

package/dist/components/dialog/dialog.js

@@ -0,0 +1,6 @@
+import { SkfDialog as f } from "./dialog.component.js";
+f.define("skf-dialog");
+export {
+  f as SkfDialog,
+  f as default
+};

package/dist/components/dialog/dialog.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/components/dialog/dialog.styles.js

@@ -0,0 +1,91 @@
+import { css as a } from "lit";
+const o = a`
+	/* stylelint-disable selector-class-pattern */
+	@layer components {
+		.dialog {
+			--_skf-dialog-head-height: var(--skf-size-48);
+			--_skf-dialog-inset: var(--skf-spacing-100);
+
+			all: unset;
+			background-color: var(--skf-bg-color-neutral-1);
+			display: none;
+			grid-template:
+				'head' auto
+				'body' calc(100% - var(--_skf-dialog-head-height)) / 1fr;
+			inset: var(--_skf-dialog-inset);
+			max-block-size: calc(100% - var(--_skf-dialog-inset) * 2);
+			overflow: hidden;
+			position: fixed;
+
+			&[open] {
+				display: grid;
+			}
+
+			&:not(.dialog--fullscreen) {
+				block-size: var(--skf-dialog-height, fit-content);
+				margin: auto;
+				max-inline-size: min(100%, var(--skf-dialog-width, 400px));
+			}
+
+			&::backdrop {
+				background-color: color-mix(in srgb, var(--skf-bg-color-neutral-7), transparent);
+			}
+		}
+
+		.dialog__head {
+			align-items: center;
+			background-color: var(--skf-color-brand-base);
+			block-size: var(--_skf-dialog-head-height);
+			display: flex;
+			grid-area: head;
+			justify-content: space-between;
+			padding-inline: var(--skf-box-spacing);
+		}
+
+		.dialog__heading {
+			color: var(--skf-text-color-inverse);
+			font-size: var(--skf-font-size-200);
+		}
+
+		.dialog__close-btn {
+			align-items: center;
+			display: flex;
+
+			&:focus-visible {
+				border-radius: var(--skf-border-radius-sm);
+				outline: var(--skf-border-width-sm) solid var(--skf-interactive-text-color-inverse);
+			}
+		}
+
+		.dialog__body {
+			/* block-size: calc(100% - (var(--_skf-dialog-head-height) + (var(--skf-box-spacing) * 2))); */
+			display: flex;
+			flex-direction: column;
+			row-gap: var(--skf-spacing-100);
+
+			.dialog:not(.dialog--no-padding) & {
+				padding: var(--skf-box-spacing);
+			}
+		}
+
+		.dialog__main {
+			display: block;
+			flex: 1;
+			overflow-y: auto;
+		}
+
+		.dialog__foot {
+			display: flex;
+			flex-wrap: wrap;
+			gap: var(--skf-spacing-100);
+			justify-content: flex-end;
+		}
+
+		.dialog__foot--hidden {
+			display: none;
+		}
+	}
+`;
+export {
+  o as styles
+};

package/dist/components/divider/divider.component.d.ts

@@ -1,4 +1,4 @@
-import { SkfElement } from '@internal/components/skf-element.js';
+import { SkfElement } from '../../internal/components/skf-element.js';
 import type { BorderColor } from '@skf-design-system/ui-assets';
 import { type CSSResultGroup } from 'lit';
 /**
@@ -20,9 +20,9 @@ export declare class SkfDivider extends SkfElement {
      */
     color: BorderColor;
     /** If true, renders a div for presentational purpose instead of the semantic hr-element */
-    decorative?: boolean;
+    decorative: boolean;
     /** If true, renders the divider vertically */
-    vertical?: boolean;
+    vertical: boolean;
     constructor();
     connectedCallback(): void;
     render(): import("lit").TemplateResult<1>;

package/dist/components/divider/divider.component.js

@@ -1,42 +1,54 @@
-var f = (t) => {
-  throw TypeError(t);
+var v = (r) => {
+  throw TypeError(r);
 };
-var d = (t, r, e) => r.has(t) || f("Cannot " + e);
-var s = (t, r, e) => (d(t, r, "read from private field"), e ? e.call(t) : r.get(t)), v = (t, r, e) => r.has(t) ? f("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, e), y = (t, r, e, l) => (d(t, r, "write to private field"), l ? l.call(t, e) : r.set(t, e), e);
+var m = (r, e, t) => e.has(r) || v("Cannot " + t);
+var c = (r, e, t) => (m(r, e, "read from private field"), t ? t.call(r) : e.get(r)), f = (r, e, t) => e.has(r) ? v("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(r) : e.set(r, t), y = (r, e, t, a) => (m(r, e, "write to private field"), a ? a.call(r, t) : e.set(r, t), t);
 import { SkfElement as u } from "../../internal/components/skf-element.js";
 import b from "../../styles/component.styles.js";
 import { html as C } from "lit";
-import { property as p } from "lit/decorators.js";
-import _ from "./divider.styles.js";
-var x = Object.defineProperty, c = (t, r, e, l) => {
-  for (var o = void 0, n = t.length - 1, h; n >= 0; n--)
-    (h = t[n]) && (o = h(r, e, o) || o);
-  return o && x(r, e, o), o;
+import { property as n } from "lit/decorators.js";
+import { classMap as _ } from "lit/directives/class-map.js";
+import { styles as x } from "./divider.styles.js";
+var B = Object.defineProperty, d = (r, e, t, a) => {
+  for (var o = void 0, l = r.length - 1, h; l >= 0; l--)
+    (h = r[l]) && (o = h(e, t, o) || o);
+  return o && B(e, t, o), o;
 }, i;
-const m = class m extends u {
+const p = class p extends u {
   constructor() {
     super();
-    v(this, i);
-    this.color = "primary", y(this, i, this.attachInternals());
+    f(this, i);
+    this.color = "primary", this.decorative = !1, this.vertical = !1, y(this, i, this.attachInternals());
   }
   connectedCallback() {
-    super.connectedCallback(), s(this, i).role = this.decorative ? "generic" : "separator", s(this, i).ariaOrientation = this.vertical ? "vertical" : "horizontal";
+    super.connectedCallback(), c(this, i).role = this.decorative ? "generic" : "separator", c(this, i).ariaOrientation = this.vertical ? "vertical" : "horizontal";
   }
   render() {
-    return C`<div id="root"></div>`;
+    return C`
+			<div
+				class=${_({
+      divider: !0,
+      "divider--color-emphasised": this.color === "emphasised",
+      "divider--color-inverse": this.color === "inverse",
+      "divider--color-secondary": this.color === "secondary",
+      "divider--color-tertiary": this.color === "tertiary",
+      "divider--vertical": this.vertical
+    })}
+			></div>
+		`;
   }
 };
-i = new WeakMap(), m.styles = [b, _];
-let a = m;
-c([
-  p({ reflect: !0 })
-], a.prototype, "color");
-c([
-  p({ type: Boolean })
-], a.prototype, "decorative");
-c([
-  p({ type: Boolean, reflect: !0 })
-], a.prototype, "vertical");
+i = new WeakMap(), p.styles = [b, x];
+let s = p;
+d([
+  n({ reflect: !0 })
+], s.prototype, "color");
+d([
+  n({ type: Boolean })
+], s.prototype, "decorative");
+d([
+  n({ type: Boolean, reflect: !0 })
+], s.prototype, "vertical");
 export {
-  a as SkfDivider
+  s as SkfDivider
 };

package/dist/components/divider/divider.styles.d.ts

@@ -1,2 +1 @@
-declare const _default: import("lit").CSSResult;
-export default _default;
+export declare const styles: import("lit").CSSResult;

package/dist/components/divider/divider.styles.js

@@ -1,43 +1,43 @@
 import { css as r } from "lit";
-const i = r`
-	#root {
-		--_skf-divider-border-color: var(--skf-border-color-primary);
-		--_skf-divider-border: var(--skf-border-width-sm) solid var(--_skf-divider-border-color);
+const d = r`
+	/* stylelint-disable selector-class-pattern */
+	.divider {
+		--_skf-divider-border: var(--skf-border-width-sm) solid
+			var(--_skf-divider-border-color, var(--skf-border-color-primary));
 
 		display: block;
 
-		:host(:not([vertical])) & {
+		&:not(.divider--vertical) {
 			border-top: var(--_skf-divider-border);
 			margin-block: var(--skf-divider-spacing, var(--skf-spacing-100));
 			margin-inline: var(--skf-divider-inset, 0);
 		}
+	}
 
-		:host([vertical]) & {
-			align-self: stretch;
-			border-left: var(--_skf-divider-border);
-			display: inline-flex;
-			margin-block: var(--skf-divider-inset, 0);
-			margin-inline: var(--skf-divider-spacing, var(--skf-spacing-100));
-		}
+	.divider--vertical {
+		block-size: 100%;
+		border-left: var(--_skf-divider-border);
+		margin-block: var(--skf-divider-inset, 0);
+		margin-inline: var(--skf-divider-spacing, var(--skf-spacing-100));
+	}
 
-		/** Colors */
-		:host([color='secondary']) & {
-			--_skf-divider-border-color: var(--skf-border-color-secondary);
-		}
+	/** Colors */
+	.divider--color-emphasised {
+		--_skf-divider-border-color: var(--skf-border-color-emphasised);
+	}
 
-		:host([color='tertiary']) & {
-			--_skf-divider-border-color: var(--skf-border-color-tertiary);
-		}
+	.divider--color-inverse {
+		--_skf-divider-border-color: var(--skf-border-color-inverse);
+	}
 
-		:host([color='emphasised']) & {
-			--_skf-divider-border-color: var(--skf-border-color-emphasised);
-		}
+	.divider--color-secondary {
+		--_skf-divider-border-color: var(--skf-border-color-secondary);
+	}
 
-		:host([color='inverse']) & {
-			--_skf-divider-border-color: var(--skf-border-color-inverse);
-		}
+	.divider--color-tertiary {
+		--_skf-divider-border-color: var(--skf-border-color-tertiary);
 	}
 `;
 export {
-  i as default
+  d as styles
 };

package/dist/components/heading/heading.component.d.ts

@@ -1,5 +1,5 @@
-import { SkfElement } from '@internal/components/skf-element.js';
-import type { HeadingType } from '@internal/constants/heading.js';
+import { SkfElement } from '../../internal/components/skf-element.js';
+import type { HeadingType } from '../../internal/constants/heading.js';
 import { type CSSResultGroup } from 'lit';
 /**
  * The `<Heading>` component is to deliniate content on a page. When using, take note not to skip heading levels.<br>

package/dist/components/heading/heading.component.js

@@ -1,15 +1,15 @@
-import { SkfElement as n } from "../../internal/components/skf-element.js";
+import { SkfElement as f } from "../../internal/components/skf-element.js";
 import u from "../../styles/component.styles.js";
 import "lit";
-import { property as a } from "lit/decorators.js";
+import { property as n } from "lit/decorators.js";
 import { html as y, unsafeStatic as l } from "lit/static-html.js";
 import c from "./heading.styles.js";
-var h = Object.defineProperty, f = (o, p, i, d) => {
-  for (var t = void 0, s = o.length - 1, m; s >= 0; s--)
-    (m = o[s]) && (t = m(p, i, t) || t);
-  return t && h(p, i, t), t;
+var d = Object.defineProperty, a = (o, p, i, h) => {
+  for (var t = void 0, e = o.length - 1, m; e >= 0; e--)
+    (m = o[e]) && (t = m(p, i, t) || t);
+  return t && d(p, i, t), t;
 };
-const e = class e extends n {
+const s = class s extends f {
   constructor() {
     super(...arguments), this.as = "h1";
   }
@@ -21,13 +21,13 @@ const e = class e extends n {
 		`;
   }
 };
-e.styles = [u, c];
-let r = e;
-f([
-  a({ reflect: !0 })
+s.styles = [u, c];
+let r = s;
+a([
+  n({ reflect: !0 })
 ], r.prototype, "as");
-f([
-  a({ attribute: "styled-as" })
+a([
+  n({ attribute: "styled-as" })
 ], r.prototype, "styledAs");
 export {
   r as SkfHeading

package/dist/components/icon/icon.component.d.ts

@@ -1,4 +1,4 @@
-import { SkfElement } from '@internal/components/skf-element.js';
+import { SkfElement } from '../../internal/components/skf-element.js';
 import { type Icon, type IconColor, type IconSize, type SeverityFgColor } from '@skf-design-system/ui-assets';
 import { type CSSResultGroup } from 'lit';
 /**
@@ -10,7 +10,6 @@ import { type CSSResultGroup } from 'lit';
  */
 export declare class SkfIcon extends SkfElement {
     static styles: CSSResultGroup;
-    private _rootId;
     /**
      * Sets the color of the icon
      * @type { "primary" | "inverse" | "emphasised" | "secondary" | "success" | "info" | "warning" | "error" | "alert" }
@@ -27,8 +26,6 @@ export declare class SkfIcon extends SkfElement {
      * Size of the icon
      * @type { "xs" | "sm" | "md" | "lg" }
      */
-    size?: IconSize;
-    private renderDecorativeIcon;
-    private renderInformativeIcon;
+    size: IconSize;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/components/icon/icon.component.js

@@ -1,42 +1,51 @@
 import { SkfElement as f } from "../../internal/components/skf-element.js";
 import { ICONS as d } from "@skf-design-system/ui-assets";
-import h from "../../styles/component.styles.js";
-import { html as l } from "lit";
+import u from "../../styles/component.styles.js";
+import { html as c } from "lit";
 import { property as t } from "lit/decorators.js";
-import { ifDefined as c } from "lit/directives/if-defined.js";
-import { when as v } from "lit/directives/when.js";
-import u from "./icon.styles.js";
-var y = Object.defineProperty, o = (m, n, p, I) => {
-  for (var r = void 0, i = m.length - 1, a; i >= 0; i--)
-    (a = m[i]) && (r = a(n, p, r) || r);
-  return r && y(n, p, r), r;
+import { classMap as h } from "lit/directives/class-map.js";
+import { ifDefined as s } from "lit/directives/if-defined.js";
+import y from "./icon.styles.js";
+var $ = Object.defineProperty, o = (m, p, n, b) => {
+  for (var e = void 0, i = m.length - 1, a; i >= 0; i--)
+    (a = m[i]) && (e = a(p, n, e) || e);
+  return e && $(p, n, e), e;
 };
-const s = class s extends f {
+const l = class l extends f {
   constructor() {
-    super(...arguments), this._rootId = "root", this.color = "primary", this.size = "md", this.renderDecorativeIcon = () => l`
-		<div aria-hidden="true" id=${this._rootId}>${d[this.name]}</div>
-	`, this.renderInformativeIcon = () => l`
-		<div aria-label=${c(this.label)} id=${this._rootId} role="img">${d[this.name]}</div>
-	`;
+    super(...arguments), this.color = "primary", this.size = "md";
   }
   render() {
-    return v(!!this.label, this.renderInformativeIcon, this.renderDecorativeIcon);
+    return c`
+			<div
+				aria-hidden=${s(this.label ? void 0 : "true")}
+				aria-label=${s(this.label)}
+				class=${h({
+      icon: !0,
+      [`icon--color-${this.color}`]: !0,
+      [`icon--size-${this.size}`]: !0
+    })}
+				role=${s(this.label ? "img" : void 0)}
+			>
+				${d[this.name]}
+			</div>
+		`;
   }
 };
-s.styles = [h, u];
-let e = s;
+l.styles = [u, y];
+let r = l;
 o([
   t({ reflect: !0 })
-], e.prototype, "color");
+], r.prototype, "color");
 o([
   t()
-], e.prototype, "label");
+], r.prototype, "label");
 o([
   t()
-], e.prototype, "name");
+], r.prototype, "name");
 o([
   t({ reflect: !0 })
-], e.prototype, "size");
+], r.prototype, "size");
 export {
-  e as SkfIcon
+  r as SkfIcon
 };