scb-wc-test 0.1.85 → 0.1.87

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

@@ -1,176 +1,297 @@
-import{a as h,n as o,i as p,x as a,t as f}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(n,c,r){try{customElements.get(n)||s(n,c,r)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var u=Object.defineProperty,v=Object.getOwnPropertyDescriptor,i=(e,s,n,c)=>{for(var r=c>1?void 0:c?v(s,n):s,l=e.length-1,d;l>=0;l--)(d=e[l])&&(r=(c?d(s,n,r):d(r))||r);return c&&r&&u(s,n,r),r};let t=class extends p{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=()=>{this.open=!1;const e=new CustomEvent("close",{detail:{open:this.open}});this.dispatchEvent(e)}}_iconForVariant(){switch(this.variant){case"success":return"check_circle";case"error":return"error";case"warning":return"warning";case"info":return"info";default:return"info"}}render(){const e=this.variant?`${this.variant.toLowerCase()}`:"",s=this.direction?`${this.direction.toLowerCase()}`:"",n=this.linkhref?"clickable":"";return a`
-            <div class="notification ${s} ${n} ${e}" 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?a`<div class="notification-header">
-                    ${this.showIcon?a`<md-icon>${this._iconForVariant()}</md-icon>`:""}
-                    </div>`:""}
-                    <div class="notification-text-container">
-                        ${this.title?a`<div class="notification-title">${this.title}</div>`:""}
-                        ${this.subtitle?a`<div class="notification-subtitle">${this.subtitle}</div>`:""}
-                        ${this.supportingText?a`<div class="notification-text">${this.supportingText}</div>`:""}
-                        ${this.linkText?a`
-                        <div class="notification-footer">
-                            <a class="footer-link" href="${this.linkhref}">${this.linkText}</a>
-                        </div>
-                        `:""}
-                    </div>
+import{a as d,n as e,i as p,x as a,t as f}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";(function(){try{var o=typeof globalThis<"u"?globalThis:window;if(!o.__scb_ce_guard_installed__){o.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(r,l,n){try{customElements.get(r)||s(r,l,n)}catch(h){var c=String(h||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var m=Object.defineProperty,u=Object.getOwnPropertyDescriptor,i=(o,s,r,l)=>{for(var n=l>1?void 0:l?u(s,r):s,c=o.length-1,h;c>=0;c--)(h=o[c])&&(n=(l?h(s,r,n):h(n))||n);return l&&n&&m(s,r,n),n};let t=class extends p{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.sizing="stretch",this.width="",this.maxWidth="",this.height="",this.maxHeight="",this.fullHeight=!1,this.fullWidth=!1,this._closeNotification=()=>{this.open=!1;const o=new CustomEvent("close",{detail:{open:this.open},bubbles:!0,composed:!0});this.dispatchEvent(o)}}_iconForVariant(){switch(this.variant){case"success":return"check_circle";case"error":return"error";case"warning":return"warning";case"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 o=this.direction==="vertical"?"vertical":"horizontal",s=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 a`
+      <div
+        class="notification"
+        type=${this.variant}
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+      >
+        <div class="notification-main ${o}">
+          ${this.showIcon?a`
+                <div class="notification-leading-icon">
+                  <md-icon aria-hidden="true">
+                    ${this._iconForVariant()}
+                  </md-icon>
                 </div>
-                ${this.showCloseButton?a`<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>
-            `}};t.styles=[h`
-        :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;
-        }
+              `:null}
+          <div class="notification-text-container">
+            ${this.title?a`<div class="notification-title">${this.title}</div>`:null}
+            ${this.subtitle?a`<div class="notification-subtitle">
+                  ${this.subtitle}
+                </div>`:null}
+            ${this.supportingText?a`<div class="notification-text">
+                  ${this.supportingText}
+                </div>`:null}
+            ${this.linkText?a`
+                  <div class="notification-footer">
+                    <a class="footer-link" href="${this.linkHref}">
+                      ${this.linkText}
+                    </a>
+                  </div>
+                `:null}
+          </div>
+        </div>
+        ${this.showCloseButton?a`
+              <div class="notification-close-button">
+                <scb-icon-button
+                  aria-label="Stäng meddelande"
+                  icon="close"
+                  style=${s}
+                  @click=${this._closeNotification}
+                >
+                </scb-icon-button>
+              </div>
+            `:null}
+      </div>
+      <md-focus-ring></md-focus-ring>
+    `}};t.styles=[d`
+      :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;
+      }
 
-        @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})],t.prototype,"variant",2);i([o({type:String,reflect:!0})],t.prototype,"direction",2);i([o({type:String})],t.prototype,"title",2);i([o({type:String})],t.prototype,"subtitle",2);i([o({type:String,attribute:"supporting-text"})],t.prototype,"supportingText",2);i([o({type:Boolean,reflect:!0})],t.prototype,"open",2);i([o({type:String,attribute:"link-text"})],t.prototype,"linkText",2);i([o({type:String,attribute:"link-href"})],t.prototype,"linkhref",2);i([o({type:Boolean,attribute:"show-icon"})],t.prototype,"showIcon",2);i([o({type:Boolean,attribute:"show-close-button"})],t.prototype,"showCloseButton",2);i([o({type:Boolean,reflect:!0,attribute:"full-height"})],t.prototype,"fullHeight",2);i([o({type:Boolean,reflect:!0,attribute:"full-width"})],t.prototype,"fullWidth",2);t=i([f("scb-notification-card")],t);
+      .notification a:hover {
+        text-decoration-thickness: 2px;
+      }
+
+      .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([e({type:String})],t.prototype,"variant",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);i([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([e({type:Boolean,reflect:!0,attribute:"full-width"})],t.prototype,"fullWidth",2);t=i([f("scb-notification-card")],t);