scb-wc-test 0.1.85 → 0.1.87

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

@@ -1,23 +1,25 @@
-import { css as p, LitElement as d, html as e } from "lit";
-import { property as o, customElement as f } from "lit/decorators.js";
-import "@material/web/iconbutton/icon-button.js";
+import { css as p, LitElement as d, html as s } from "lit";
+import { property as e, customElement as f } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
-var v = Object.defineProperty, u = Object.getOwnPropertyDescriptor, i = (r, s, a, c) => {
-  for (var n = c > 1 ? void 0 : c ? u(s, a) : s, l = r.length - 1, h; l >= 0; l--)
-    (h = r[l]) && (n = (c ? h(s, a, n) : h(n)) || n);
-  return c && n && v(s, a, n), n;
+import "@material/web/focus/md-focus-ring.js";
+import "../scb-icon-button/scb-icon-button.js";
+var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (o, r, l, a) => {
+  for (var n = a > 1 ? void 0 : a ? g(r, l) : r, c = o.length - 1, h; c >= 0; c--)
+    (h = o[c]) && (n = (a ? h(r, l, n) : h(n)) || n);
+  return a && n && m(r, l, n), n;
 };
 let t = class extends d {
   constructor() {
-    super(...arguments), this.variant = "success", this.direction = "horizontal", this.title = "", this.subtitle = "", this.supportingText = "", this.open = !1, this.linkText = "", this.linkhref = "#", this.showIcon = !1, this.showCloseButton = !1, this.fullHeight = !1, this.fullWidth = !1, this._closeNotification = () => {
+    super(...arguments), this.variant = "success", this.direction = "horizontal", this.title = "", this.subtitle = "", this.supportingText = "", this.open = !1, this.linkText = "", this.linkHref = "#", this.showIcon = !1, this.showCloseButton = !1, this.sizing = "stretch", this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", this.fullHeight = !1, this.fullWidth = !1, this._closeNotification = () => {
       this.open = !1;
-      const r = new CustomEvent("close", {
-        detail: { open: this.open }
+      const o = new CustomEvent("close", {
+        detail: { open: this.open },
+        bubbles: !0,
+        composed: !0
       });
-      this.dispatchEvent(r);
+      this.dispatchEvent(o);
     };
   }
-  /** Return icon name for notification variant */
   _iconForVariant() {
     switch (this.variant) {
       case "success":
@@ -27,229 +29,367 @@ let t = class extends d {
       case "warning":
         return "warning";
       case "info":
-        return "info";
       default:
         return "info";
     }
   }
+  updated(o) {
+    super.updated(o), o.has("width") && (this.width && this.width.trim() !== "" ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), o.has("maxWidth") && (this.maxWidth && this.maxWidth.trim() !== "" ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), o.has("height") && (this.height && this.height.trim() !== "" ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), o.has("maxHeight") && (this.maxHeight && this.maxHeight.trim() !== "" ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size"));
+  }
   render() {
-    const r = this.variant ? `${this.variant.toLowerCase()}` : "", s = this.direction ? `${this.direction.toLowerCase()}` : "", a = this.linkhref ? "clickable" : "";
-    return e`
-            <div class="notification ${s} ${a} ${r}" type=${this.variant} role="alert" aria-live="assertive" aria-atomic="true" style="display: ${this.open ? "flex" : "none"};">
-                <div class="notification-content">    
-                    ${this.showIcon || this.showCloseButton ? e`<div class="notification-header">
-                    ${this.showIcon ? e`<md-icon>${this._iconForVariant()}</md-icon>` : ""}
-                    </div>` : ""}
-                    <div class="notification-text-container">
-                        ${this.title ? e`<div class="notification-title">${this.title}</div>` : ""}
-                        ${this.subtitle ? e`<div class="notification-subtitle">${this.subtitle}</div>` : ""}
-                        ${this.supportingText ? e`<div class="notification-text">${this.supportingText}</div>` : ""}
-                        ${this.linkText ? e`
-                        <div class="notification-footer">
-                            <a class="footer-link" href="${this.linkhref}">${this.linkText}</a>
-                        </div>
-                        ` : ""}
-                    </div>
+    const o = this.direction === "vertical" ? "vertical" : "horizontal", r = this.variant === "success" ? "--_icon-color: var(--md-sys-color-on-success-container);" : this.variant === "error" ? "--_icon-color: var(--md-sys-color-on-error-container);" : this.variant === "warning" ? "--_icon-color: var(--md-sys-color-on-warning-container);" : "--_icon-color: var(--md-sys-color-on-info-container);";
+    return s`
+      <div
+        class="notification"
+        type=${this.variant}
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+      >
+        <div class="notification-main ${o}">
+          ${this.showIcon ? s`
+                <div class="notification-leading-icon">
+                  <md-icon aria-hidden="true">
+                    ${this._iconForVariant()}
+                  </md-icon>
                 </div>
-                ${this.showCloseButton ? e`<div class="notification-close-button"><md-icon-button @click=${this._closeNotification}  
-                style="--_icon-color: ${this.variant === "success" ? "var(--md-sys-color-on-success-container)" : this.variant === "error" ? "var(--md-sys-color-on-error-container)" : this.variant === "warning" ? "var(--md-sys-color-on-warning-container)" : "var(--md-sys-color-on-info-container)"};" tabindex="0"><md-icon aria-hidden="true">close</md-icon></md-icon-button></div>` : ""}
-            </div>
-            `;
+              ` : null}
+          <div class="notification-text-container">
+            ${this.title ? s`<div class="notification-title">${this.title}</div>` : null}
+            ${this.subtitle ? s`<div class="notification-subtitle">
+                  ${this.subtitle}
+                </div>` : null}
+            ${this.supportingText ? s`<div class="notification-text">
+                  ${this.supportingText}
+                </div>` : null}
+            ${this.linkText ? s`
+                  <div class="notification-footer">
+                    <a class="footer-link" href="${this.linkHref}">
+                      ${this.linkText}
+                    </a>
+                  </div>
+                ` : null}
+          </div>
+        </div>
+        ${this.showCloseButton ? s`
+              <div class="notification-close-button">
+                <scb-icon-button
+                  aria-label="Stäng meddelande"
+                  icon="close"
+                  style=${r}
+                  @click=${this._closeNotification}
+                >
+                </scb-icon-button>
+              </div>
+            ` : null}
+      </div>
+      <md-focus-ring></md-focus-ring>
+    `;
   }
 };
 t.styles = [
   p`
-        :host {
-            display: block;
-            position: relative;
-            container-type: inline-size;
-            container-name: notification-container;
-            --scb-notification-card-h-max-w: 580px;
-            --scb-notification-card-v-max-w: 600px;
-        }
-        :host([stretch]) { block-size: 100%; }
-        :host([stretch]) .notification { block-size: 100%; }
-
-        :host([full-height]) { block-size: 100%; }
-        :host([full-height]) .notification { block-size: 100%; }
-
-        :host([full-width]) { max-width: none; width: 100%; }
-        :host([full-width]) .notification.horizontal,
-        :host([full-width]) .notification.vertical {
-            max-width: none;
-            width: auto;
-
-            .notification-content {
-                width: 100%;
-            }
-        }  
-
-        :host([open]) .notification { opacity: 1; }
-        :host(:not([open])) .notification {
-            opacity: 0;
-            pointer-events: none;
-        }
+      :host {
+        display: block;
+        position: relative;
+        box-sizing: border-box;
+        inline-size: 100%;
+        min-inline-size: 0;
+        /* Om det behövs kan maxbredd styras via css-variabel, samma idé som övriga kort */
+        max-inline-size: var(--scb-notification-card-max-w, none);
+        height: auto;
+        padding: var(--scb-notification-card-focus-ring-gap, 4px);
+      }
 
-        :host([variant="success"]) .notification {
-            background: var(--md-sys-color-success-container);
-            color: var(--md-sys-color-on-success-container);  
-            a {
-               color: var(--md-sys-color-on-success-container);
-            }
-        }
-        :host([variant="error"]) .notification {
-            background: var(--md-sys-color-error-container);
-            color: var(--md-sys-color-on-error-container);
-            a {
-                color: var(--md-sys-color-on-error-container);
-            }
-        }
-        :host([variant="warning"]) .notification {
-            background: var(--md-sys-color-warning-container);
-            color: var(--md-sys-color-on-warning-container);
-            a {
-                color: var(--md-sys-color-on-warning-container);
-            }
-        }
-        :host([variant="info"]) .notification {
-            background: var(--md-sys-color-info-container);
-            color: var(--md-sys-color-on-info-container);
-            a {
-                color: var(--md-sys-color-on-info-container);
-            }
-        }
+      /* Stretch: fyller både bredd och höjd, som standard */
+      :host([sizing='stretch']) {
+        inline-size: 100%;
+        block-size: 100%;
+        max-inline-size: none;
+      }
 
-        .notification {
-            border-radius: 12px;
-            padding: 16px;
-            display: flex;
-            gap: var(--spacing-spacing-4, 12px);
-            flex-direction: row;
-
-            &.vertical {
-                max-width: var(--scb-notification-card-v-max-w);
-            }
-
-            &.horizontal {
-                max-width: var(--scb-notification-card-h-max-w);
-                
-                .notification-content{
-                    flex-direction: row;
-                    gap: var(--spacing-spacing-4, 12px);
-                }
-            }
-
-            a {
-                text-decoration: underline;
-                text-decoration-thickness: 1px;
-                text-underline-offset: .1578em;
-                &:hover {text-decoration-thickness: 2px;}
-            }
-
-            .notification-close-button {
-                position: relative;
-                right: 8px;
-                top: 8px;
-                cursor: pointer;
-            }
-        }
+      /* Legacy full-width / full-height */
+      :host([full-width]) {
+        inline-size: 100%;
+      }
 
-        .notification-content {
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-        }
+      :host([full-height]) {
+        block-size: 100%;
+      }
 
-        .notification-text-container {
-            display: flex;
-            flex-direction: column;  
-            gap: var(--spacing-spacing-3, 8px);
-            font-family: var(--Brand, Inter);
-            font-style: normal;
-                      
-            .notification-title {  
-                font-size: var(--md-sys-typescale-headline-small-Size, 24px);           
-                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 {             
-                font-size: var(--md-sys-typescale-title-medium-size, 18px);
-                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 {
-                font-size: var(--md-sys-typescale-body-large-size, 18px);
-                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-footer {
-            font-size: 18px;
-            margin-top: 4px;
-            line-height: 26px; 
-
-            .footer-link {
-                display: inline-block;
-                vertical-align: middle;
-                transition: box-shadow 0.25s cubic-bezier(.4,0,.2,1);
-            }
-
-            .footer-link:focus-visible {
-                outline: none;
-                border-radius: 4px;
-                animation: growShrinkRing 0.25s cubic-bezier(.4,0,.2,1);
-                box-shadow: 0 0 0 2px var(--md-sys-color-primary, #1976d2);
-            }
-        }
+      /* content-width: samma upplägg som card / fact-card */
+      :host([sizing='content-width']) {
+        display: inline-block;
+        inline-size: auto;
+        block-size: auto;
+      }
+
+      :host([sizing='content-width']) .notification {
+        inline-size: max-content;
+      }
+
+      /* content-height: bredd fyller, höjd styrs av innehåll */
+      :host([sizing='content-height']) {
+        inline-size: 100%;
+        block-size: auto;
+        max-inline-size: none;
+      }
+
+      /* När värd-elementet fyller höjd ska själva kortet också göra det */
+      :host([height]) .notification,
+      :host([max-height]) .notification,
+      :host([sizing='stretch']) .notification,
+      :host([full-height]) .notification {
+        block-size: 100%;
+      }
+
+      /* Öppen / stängd */
+      :host([open]) .notification {
+        display: flex;
+      }
+
+      :host(:not([open])) .notification {
+        display: none;
+      }
+
+      md-focus-ring {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        display: none;
+        border-radius: var(
+          --scb-notification-card-focus-ring-radius,
+          var(--md-sys-shape-corner-large, 16px)
+        );
+      }
+
+      :host(:focus-within) md-focus-ring {
+        display: block;
+      }
+
+      .notification {
+        box-sizing: border-box;
+        border-radius: var(--md-sys-shape-corner-large, 16px);
+        padding: var(--spacing-5, 16px);
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        justify-content: space-between;
+        column-gap: var(--spacing-4, 12px);
+        row-gap: var(--spacing-3, 8px);
+        inline-size: 100%;
+        max-inline-size: 100%;
+        color: inherit;
+      }
+
+      /* Variantfärger */
+      :host([variant='success']) .notification {
+        background: var(--md-sys-color-success-container);
+        color: var(--md-sys-color-on-success-container);
+      }
+
+      :host([variant='error']) .notification {
+        background: var(--md-sys-color-error-container);
+        color: var(--md-sys-color-on-error-container);
+      }
+
+      :host([variant='warning']) .notification {
+        background: var(--md-sys-color-warning-container);
+        color: var(--md-sys-color-on-warning-container);
+      }
+
+      :host([variant='info']) .notification {
+        background: var(--md-sys-color-info-container);
+        color: var(--md-sys-color-on-info-container);
+      }
+
+      .notification a {
+        text-decoration: underline;
+        text-decoration-thickness: 1px;
+        text-underline-offset: 0.1578em;
+      }
+
+      .notification a:hover {
+        text-decoration-thickness: 2px;
+      }
 
-        @keyframes growShrinkRing {
-            0% { box-shadow: 0 0 0 2px var(--md-sys-color-primary, #1976d2); }
-            50% { box-shadow: 0 0 0 7px var(--md-sys-color-primary, #1976d2); }
-            100% { box-shadow: 0 0 0 2px var(--md-sys-color-primary, #1976d2); }
-        }  
+      .notification-main {
+        display: flex;
+        flex: 1 1 auto;
+        min-width: 0;
+      }
+
+      .notification-main.horizontal {
+        flex-direction: row;
+        column-gap: var(--spacing-4, 12px);
+        row-gap: 0;
+        align-items: flex-start;
+      }
+
+      .notification-main.vertical {
+        flex-direction: column;
+        column-gap: 0;
+        row-gap: var(--spacing-3, 8px);
+        align-items: flex-start;
+      }
+
+      .notification-leading-icon {
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        flex: 0 0 auto;
+        margin-top: 2px;
+      }
+
+      .notification-leading-icon md-icon {
+        font-size: var(--icon-size-small, 24px);
+      }
+
+      .notification-text-container {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-3, 8px);
+        font-family: var(--brand-font, Inter);
+        font-style: normal;
+        min-width: 0;
+      }
+
+      .notification-title {
+        font-size: var(--md-sys-typescale-headline-small-size, 24px);
+        font-weight: var(--weight-bold, 700);
+        line-height: var(--md-sys-typescale-headline-small-line-height, 30px);
+        letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.6px);
+
+        white-space: normal;
+        word-break: normal;
+        overflow-wrap: normal;
+        hyphens: auto;
+        overflow: visible;
+        text-overflow: clip;
+      }
+
+      .notification-subtitle {
+        font-size: var(--md-sys-typescale-title-medium-size, 18px);
+        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);
+
+        white-space: normal;
+        word-break: normal;
+        overflow-wrap: normal;
+        hyphens: auto;
+        overflow: visible;
+        text-overflow: clip;
+      }
+
+      .notification-text {
+        font-size: var(--md-sys-typescale-body-large-size, 18px);
+        font-weight: var(--weight-regular, 400);
+        line-height: var(--md-sys-typescale-body-large-line-height, 26px);
+        letter-spacing: var(--md-sys-typescale-body-large-tracking, -0.3px);
+
+        white-space: normal;
+        word-break: normal;
+        overflow-wrap: normal;
+        hyphens: auto;
+        overflow: visible;
+        text-overflow: clip;
+      }
+
+      .notification-footer {
+        font-size: 18px;
+        margin-top: 4px;
+        line-height: 26px;
+      }
+
+      .footer-link {
+        display: inline-block;
+        vertical-align: middle;
+        transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .footer-link:focus-visible {
+        outline: none;
+        border-radius: 4px;
+        animation: growShrinkRing 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+        box-shadow: 0 0 0 2px var(--md-sys-color-primary, #1976d2);
+      }
+
+      .notification-close-button {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-end;
+      }
+
+      /* Justering så att krysset linjerar bättre med ikon / titel */
+      .notification-close-button scb-icon-button {
+        margin-top: -5px;
+      }
+
+      @keyframes growShrinkRing {
+        0% {
+          box-shadow: 0 0 0 2px var(--md-sys-color-primary, #1976d2);
+        }
+        50% {
+          box-shadow: 0 0 0 7px var(--md-sys-color-primary, #1976d2);
+        }
+        100% {
+          box-shadow: 0 0 0 2px var(--md-sys-color-primary, #1976d2);
+        }
+      }
     `
 ];
 i([
-  o({ type: String })
+  e({ type: String })
 ], t.prototype, "variant", 2);
 i([
-  o({ type: String, reflect: !0 })
+  e({ type: String, reflect: !0 })
 ], t.prototype, "direction", 2);
 i([
-  o({ type: String })
+  e({ type: String })
 ], t.prototype, "title", 2);
 i([
-  o({ type: String })
+  e({ type: String })
 ], t.prototype, "subtitle", 2);
 i([
-  o({ type: String, attribute: "supporting-text" })
+  e({ type: String, attribute: "supporting-text" })
 ], t.prototype, "supportingText", 2);
 i([
-  o({ type: Boolean, reflect: !0 })
+  e({ type: Boolean, reflect: !0 })
 ], t.prototype, "open", 2);
 i([
-  o({ type: String, attribute: "link-text" })
+  e({ type: String, attribute: "link-text" })
 ], t.prototype, "linkText", 2);
 i([
-  o({ type: String, attribute: "link-href" })
-], t.prototype, "linkhref", 2);
+  e({ type: String, attribute: "link-href" })
+], t.prototype, "linkHref", 2);
 i([
-  o({ type: Boolean, attribute: "show-icon" })
+  e({ type: Boolean, attribute: "show-icon" })
 ], t.prototype, "showIcon", 2);
 i([
-  o({ type: Boolean, attribute: "show-close-button" })
+  e({ type: Boolean, attribute: "show-close-button" })
 ], t.prototype, "showCloseButton", 2);
 i([
-  o({ type: Boolean, reflect: !0, attribute: "full-height" })
+  e({ type: String, reflect: !0 })
+], t.prototype, "sizing", 2);
+i([
+  e({ type: String, reflect: !0 })
+], t.prototype, "width", 2);
+i([
+  e({ type: String, reflect: !0, attribute: "max-width" })
+], t.prototype, "maxWidth", 2);
+i([
+  e({ type: String, reflect: !0 })
+], t.prototype, "height", 2);
+i([
+  e({ type: String, reflect: !0, attribute: "max-height" })
+], t.prototype, "maxHeight", 2);
+i([
+  e({ type: Boolean, reflect: !0, attribute: "full-height" })
 ], t.prototype, "fullHeight", 2);
 i([
-  o({ type: Boolean, reflect: !0, attribute: "full-width" })
+  e({ type: Boolean, reflect: !0, attribute: "full-width" })
 ], t.prototype, "fullWidth", 2);
 t = i([
   f("scb-notification-card")

package/scb-viz/scb-viz.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 export declare class ScbViz extends LitElement {
-    variant: 'Standard' | 'Diagram' | 'Table' | 'Image';
+    variant: 'Standard' | 'Table' | 'Image';
     selectedChip: 'Diagram' | 'Table' | null;
     title: string;
     subtitle: string;
@@ -20,5 +20,5 @@ export declare class ScbViz extends LitElement {
     updated(): void;
     private _styleSlottedTable;
     render(): import('lit-html').TemplateResult<1>;
-    private _onChipSelect;
+    private _onSegmentedChange;
 }