scb-wc-test 0.1.11 → 0.1.13

package/scb-notification-card/scb-notification-card.js

@@ -0,0 +1,264 @@
+import { css as d, LitElement as h, html as o } from "lit";
+import { property as e, customElement as f } from "lit/decorators.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "@material/web/icon/icon.js";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (s, r, a, c) => {
+  for (var n = c > 1 ? void 0 : c ? x(r, a) : r, l = s.length - 1, p; l >= 0; l--)
+    (p = s[l]) && (n = (c ? p(r, a, n) : p(n)) || n);
+  return c && n && y(r, a, n), n;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.type = "success", this.direction = "horizontal", this.title = "", this.subtitle = "", this.supportingText = "", this.open = !1, this.linkText = "", this.linkhref = "#", this.showIcon = !1, this.showCloseButton = !1, this._closeNotification = () => {
+      this.open = !1;
+      const s = new CustomEvent("close", {
+        detail: { open: this.open }
+      });
+      this.dispatchEvent(s);
+    };
+  }
+  /** Return icon name for notification type */
+  _iconForType() {
+    switch (this.type) {
+      case "success":
+        return "check_circle";
+      case "error":
+        return "error";
+      case "warning":
+        return "warning";
+      case "info":
+        return "info";
+      default:
+        return "info";
+    }
+  }
+  render() {
+    const s = this.type ? `${this.type.toLowerCase()}` : "", r = this.direction ? `${this.direction.toLowerCase()}` : "", a = this.linkhref ? "clickable" : "";
+    return o`
+            <div class="notification ${r} ${a} ${s}" type=${this.type} role="alert" aria-live="assertive" aria-atomic="true" style="display: ${this.open ? "flex" : "none"};">
+                <div class="notification-content">    
+                    ${this.showIcon || this.showCloseButton ? o`<div class="notification-header">
+                    ${this.showIcon ? o`<md-icon>${this._iconForType()}</md-icon>` : ""}
+                    </div>` : ""}
+                    <div class="notification-text-container">
+                        ${this.title ? o`<div class="notification-title">${this.title}</div>` : ""}
+                        ${this.subtitle ? o`<div class="notification-subtitle">${this.subtitle}</div>` : ""}
+                        ${this.supportingText ? o`<div class="notification-text">${this.supportingText}</div>` : ""}
+                        ${this.linkText ? o`
+                        <div class="notification-footer">
+                            <a class="footer-link" href="${this.linkhref}">${this.linkText}</a>
+                        </div>
+                        ` : ""}
+                    </div>
+                </div>
+                ${this.showCloseButton ? o`<scb-icon-button icon="close" @click=${this._closeNotification}  
+                style="--_icon-color: ${this.type === "success" ? "var(--md-sys-color-on-success-container)" : this.type === "error" ? "var(--md-sys-color-on-error-container)" : this.type === "warning" ? "var(--md-sys-color-on-warning-container)" : "var(--md-sys-color-on-info-container)"};"></scb-icon-button>` : ""}
+            </div>
+            `;
+  }
+};
+t.styles = [
+  d`
+        :host {
+            display: block;
+            position: relative;
+            container-type: inline-size;
+            container-name: notification-container;
+        }
+
+        .notification {
+            border-radius: 12px;
+            padding: 16px;
+            display: flex;
+            gap: 12px;
+            flex-direction: column;
+
+            &.horizontal {
+                max-width: 600px;
+            }
+
+            &.vertical {
+                max-width: 580px;
+                
+                .notification-content{
+                    flex-direction: row;
+                    gap: var(--spacing-spacing-4, 12px);
+                }
+            }
+        }
+
+        @container notification-container (min-width: 400px) {
+            .notification {
+                flex-direction: row;
+            }
+            .notification-label {
+                margin-right: 40px;
+            }
+        }
+
+        .notification-text-container {
+            display: flex;
+            flex-direction: column;  
+            gap: var(--Spacing-Spacing-3, 8px);
+
+            .notification-title {
+                display: flex;
+                padding: 0 0 var(--spacing-spacing-0, 0) 0;
+                align-items: flex-start;
+                align-self: stretch;
+                font-family: var(--Brand, Inter);
+                font-size: var(--md-sys-typescale-headline-small-Size, 24px);
+                font-style: normal;
+                font-weight: var(--weight-bold, 700);
+                line-height: var(--md-sys-typescale-headline-small-line-height2, 30px); 
+                letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.6px);
+            }
+
+            .notification-subtitle {        
+                display: flex;
+                padding: 0 0 var(--spacing-spacing-0, 0) 0;
+                align-items: flex-start;
+                align-self: stretch;
+                font-family: var(--Brand, Inter);
+                font-size: var(--md-sys-typescale-title-medium-size, 18px);
+                font-style: normal;
+                font-weight: var(--weight-semibold, 600);
+                line-height: var(--md-sys-typescale-title-medium-line-height, 26px); 
+                letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+            }
+
+            .notification-text {
+                padding: 0 0 var(--spacing-spacing-0, 0) 0;
+                align-items: flex-start;
+                align-self: stretch;
+                font-family: var(--Brand, Inter);
+                font-size: var(--md-sys-typescale-body-large-size, 18px);
+                font-style: normal;
+                font-weight: var(--eeight-regular, 400);
+                line-height: var(--md-sys-typescale-body-large-line-height, 26px); 
+                letter-spacing: var(--md-sys-typescale-body-large-tracking, -0.3px);
+            }
+         }
+
+        .notification[type="success"] {
+            background: var(--md-sys-color-success-container);
+            color: var(--md-sys-color-on-success-container);   
+
+            a {
+                text-decoration: underline;
+                text-decoration-thickness: 1px;
+                text-underline-offset: .1578em;
+                color: var(--md-sys-color-on-success-container);
+                &:hover {text-decoration-thickness: 2px;}
+            }
+
+            &::part(scb-icon-button){
+                --icon-color: var(--md-sys-color-on-success-container);
+            }
+        }
+
+        .notification[type="error"] {
+            background: var(--md-sys-color-error-container);
+            color: var(--md-sys-color-on-error-container);
+            a {
+                text-decoration: underline;
+                text-decoration-thickness: 1px;
+                text-underline-offset: .1578em;
+                color: var(--md-sys-color-on-error-container);
+                &:hover {text-decoration-thickness: 2px;}
+            }
+        }
+
+        .notification[type="warning"] {
+            background: var(--md-sys-color-warning-container);
+            color: var(--md-sys-color-on-warning-container);
+            a {
+                text-decoration: underline;
+                text-decoration-thickness: 1px;
+                text-underline-offset: .1578em;
+                color: var(--md-sys-color-on-warning-container);
+                &:hover {text-decoration-thickness: 2px;}
+            }
+        }
+
+        .notification[type="info"] {
+            background: var(--md-sys-color-info-container);
+            color: var(--md-sys-color-on-info-container);
+            a {
+                text-decoration: underline;
+                text-decoration-thickness: 1px;
+                text-underline-offset: .1578em;
+                color: var(--md-sys-color-on-info-container);
+                &:hover {text-decoration-thickness: 2px;}
+            }
+        }
+
+        .notification-header scb-icon-button {
+            position: absolute;
+            right: 8px;
+            top: 8px;
+        }
+
+        .notification-content {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+
+        slot {
+            font-size: 18px;
+            line-height: 26px; 
+        }
+
+        .notification-footer {
+            font-size: 18px;
+            margin-top: 4px;
+            line-height: 26px; 
+        }
+
+        :host([open]) .notification {
+            opacity: 1;
+        }
+
+        :host(:not([open])) .notification {
+            opacity: 0;
+            pointer-events: none;
+        }
+    `
+];
+i([
+  e({ type: String })
+], t.prototype, "type", 2);
+i([
+  e({ type: String, reflect: !0 })
+], t.prototype, "direction", 2);
+i([
+  e({ type: String })
+], t.prototype, "title", 2);
+i([
+  e({ type: String })
+], t.prototype, "subtitle", 2);
+i([
+  e({ type: String, attribute: "supporting-text" })
+], t.prototype, "supportingText", 2);
+i([
+  e({ type: Boolean, reflect: !0 })
+], t.prototype, "open", 2);
+i([
+  e({ type: String, attribute: "link-text" })
+], t.prototype, "linkText", 2);
+i([
+  e({ type: String, attribute: "link-href" })
+], t.prototype, "linkhref", 2);
+i([
+  e({ type: Boolean, attribute: "show-icon" })
+], t.prototype, "showIcon", 2);
+i([
+  e({ type: Boolean, attribute: "show-close-button" })
+], t.prototype, "showCloseButton", 2);
+t = i([
+  f("scb-notification-card")
+], t);
+export {
+  t as ScbNotificationCard
+};

package/scb-radio-button/scb-radio-button.js

@@ -1,12 +1,12 @@
 import { LitElement as c, html as p, css as h } from "lit";
 import { property as s, customElement as u } from "lit/decorators.js";
 import "@material/web/radio/radio.js";
-var b = Object.defineProperty, g = Object.getOwnPropertyDescriptor, a = (e, t, n, o) => {
-  for (var i = o > 1 ? void 0 : o ? g(t, n) : t, d = e.length - 1, l; d >= 0; d--)
+var g = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (e, t, n, o) => {
+  for (var i = o > 1 ? void 0 : o ? m(t, n) : t, d = e.length - 1, l; d >= 0; d--)
     (l = e[d]) && (i = (o ? l(t, n, i) : l(i)) || i);
-  return o && i && b(t, n, i), i;
+  return o && i && g(t, n, i), i;
 };
-let r = class extends c {
+let a = class extends c {
   constructor() {
     super(...arguments), this.disabled = !1, this.checked = !1, this.name = "", this.value = "", this.label = "", this.supportingText = "", this._radioId = "", this._onMdRadioChange = (e) => {
       if (this.disabled) return;
@@ -77,33 +77,36 @@ let r = class extends c {
     `;
   }
 };
-r.styles = h`
+a.styles = h`
     /* layout med inline-grid */
     :host {
       display: inline-grid;
       grid-template-columns: auto;
       grid-template-rows: auto auto;
-      row-gap: 4px;
+      row-gap: var(--spacing-2, 4px);
       font-family: var(--brand-font, 'Inter', sans-serif);
     }
 
+    /* Styr horisontellt avstånd när den placeras i horisontell layout */
+    :host([orientation="horizontal"]) {
+      margin-inline-end: var(--scb-radio-gap, var(--spacing-7, 24px));
+    }
+
     /* Wrapper för md-radio + label */
     .wrap {
       display: inline-flex;
       align-items: center;
-      gap: 12px;
+      padding: var(--spacing-2, 4px);
+      gap: var(--spacing-2, 4px);
       cursor: pointer;
-      /* låt ripple/state-layer synas */
       overflow: visible;
     }
-    :host([disabled]) .wrap {
-      cursor: default;
-    }
+    :host([disabled]) .wrap { cursor: default; }
 
-    /* Hit-yta runt md-radio (styr via variabel) */
+    /* Hit-yta runt md-radio */
     .radio-wrap {
-      height: var(--scb-radio-target, 48px);
-      width: var(--scb-radio-target, 48px);
+      height: var(--scb-radio-target, 40px);
+      width: var(--scb-radio-target, 40px);
       align-items: center;
       display: flex;
       justify-content: center;
@@ -111,66 +114,56 @@ r.styles = h`
     }
 
     /* Nollställ md-radio marginal */
-    md-radio {
-      margin: 0;
-    }
+    md-radio { margin: 0; }
 
     /* Label-styling */
     .lbl {
       color: var(--md-sys-color-on-surface);
-      line-height: 1.2;
-      margin-top: 2px;
-    }
-    :host([disabled]) .lbl {
-      color: var(--n-60);
+      font-family: var(--brand-font);
+      font-size: var(--md-sys-typescale-body-medium-size);
+      line-height: var(--md-sys-typescale-body-medium-line-height);
+      font-weight: var(--weight-regular, 400);
+      letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+      margin-top: var(--spacing-1, 2px);
     }
+    :host([disabled]) .lbl { color: var(--n-60); }
 
     /* Supporting text styling */
     .supporting-text {
       color: var(--md-sys-color-on-surface-variant);
-      line-height: 1.2;
-      /* 12px gap + wrapperbredd (inte ikonstorlek) så texten linjerar med labeln */
-      margin-left: calc(12px + var(--scb-radio-target, 48px));
-    }
-    :host([disabled]) .supporting-text {
-      color: var(--n-60);
+      line-height: var(--md-sys-typescale-body-medium-line-height, 20px);
+      /* gap + wrapperbredd så texten linjerar med labeln */
+      margin-left: calc(var(--spacing-2, 4px) + var(--scb-radio-target, 40px));
     }
-
-      :host([orientation="horizontal"]) {
-    margin-inline-end: var(--scb-radio-gap, 24px); /* tweakable */
-  }
+    :host([disabled]) .supporting-text { color: var(--n-60); }
 
     /* Anpassning för mörkt läge */
     @media (prefers-color-scheme: dark) {
-      .lbl {
-        color: var(--md-sys-color-on-surface);
-      }
-      .supporting-text {
-        color: var(--md-sys-color-on-surface-variant);
-      }
+      .lbl { color: var(--md-sys-color-on-surface); }
+      .supporting-text { color: var(--md-sys-color-on-surface-variant); }
     }
   `;
-a([
+r([
   s({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
-a([
+], a.prototype, "disabled", 2);
+r([
   s({ type: Boolean, reflect: !0 })
-], r.prototype, "checked", 2);
-a([
+], a.prototype, "checked", 2);
+r([
   s({ type: String, reflect: !0 })
-], r.prototype, "name", 2);
-a([
+], a.prototype, "name", 2);
+r([
   s({ type: String, reflect: !0 })
-], r.prototype, "value", 2);
-a([
+], a.prototype, "value", 2);
+r([
   s({ type: String })
-], r.prototype, "label", 2);
-a([
+], a.prototype, "label", 2);
+r([
   s({ type: String, attribute: "supporting-text" })
-], r.prototype, "supportingText", 2);
-r = a([
+], a.prototype, "supportingText", 2);
+a = r([
   u("scb-radio-button")
-], r);
+], a);
 export {
-  r as ScbRadioButton
+  a as ScbRadioButton
 };

package/scb-search/scb-search.d.ts

@@ -28,6 +28,7 @@ export declare class ScbSearch extends LitElement {
     private _filterSuggestions;
     private _inputEl;
     private _listEl;
+    private _ringEl;
     private _getVisibleItems;
     private _getActiveItem;
     private _moveActive;
@@ -36,6 +37,13 @@ export declare class ScbSearch extends LitElement {
     private _ensureListboxA11y;
     private _ensureOptionA11y;
     private _updateComboboxA11y;
+    private _positionOptionRing;
+    private _hideOptionRing;
+    private _onWindowResize;
+    private _listScrollHandler;
+    private _listWithHandler?;
+    private _attachListScrollListener;
+    private _detachListScrollListener;
 }
 declare global {
     interface HTMLElementTagNameMap {