scb-wc-test 0.1.17 → 0.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/mvc/components/scb-button/scb-button.js +1 -1
- package/mvc/components/scb-checkbox/scb-checkbox.js +3 -2
- package/mvc/components/scb-icon-button/scb-icon-button.js +1 -1
- package/mvc/components/scb-notification-card/scb-notification-card.js +107 -118
- package/mvc/components/scb-radio-button/scb-radio-button.js +3 -2
- package/mvc/vendor/vendor-material.js +81 -81
- package/package.json +2 -2
- package/scb-checkbox/scb-checkbox.js +3 -2
- package/scb-notification-card/scb-notification-card.d.ts +5 -3
- package/scb-notification-card/scb-notification-card.js +143 -148
- package/scb-radio-button/scb-radio-button.js +3 -2
- package/scb-wc-test.bundle.js +196 -205
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{_ as f}from"../../vendor/preload-helper.js";import{i as A,a as x,x as h,E as r,n as c,t as I}from"../../vendor/vendor.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,o,a){try{customElements.get(i)||e(i,o,a)}catch(d){var s=String(d||"");if(s.indexOf("already been used")===-1&&s.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var E=Object.defineProperty,L=Object.getOwnPropertyDescriptor,l=(t,e,i,o)=>{for(var a=o>1?void 0:o?L(e,i):e,s=t.length-1,d;s>=0;s--)(d=t[s])&&(a=(o?d(e,i,a):d(a))||a);return o&&a&&E(e,i,a),a};let n=class extends A{constructor(){super(...arguments),this.variant="filled",this.type="button",this.label="Button",this.trailingIcon=!1,this.icon="",this.disabled=!1,this.href="",this.target="",this.rel="",this.__loadedButtons=new Set,this.__iconLoaded=!1}async __ensureDepsLoaded(){if(!this.__loadedButtons.has(this.variant)){switch(this.variant){case"filled":await f(()=>import("../../vendor/vendor-material.js").then(t=>t.f),__vite__mapDeps([0,1]),import.meta.url);break;case"outlined":await f(()=>import("../../vendor/vendor-material.js").then(t=>t.o),__vite__mapDeps([0,1]),import.meta.url);break;case"filled-tonal":await f(()=>import("../../vendor/vendor-material.js").then(t=>t.
|
|
2
|
+
import{_ as f}from"../../vendor/preload-helper.js";import{i as A,a as x,x as h,E as r,n as c,t as I}from"../../vendor/vendor.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,o,a){try{customElements.get(i)||e(i,o,a)}catch(d){var s=String(d||"");if(s.indexOf("already been used")===-1&&s.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var E=Object.defineProperty,L=Object.getOwnPropertyDescriptor,l=(t,e,i,o)=>{for(var a=o>1?void 0:o?L(e,i):e,s=t.length-1,d;s>=0;s--)(d=t[s])&&(a=(o?d(e,i,a):d(a))||a);return o&&a&&E(e,i,a),a};let n=class extends A{constructor(){super(...arguments),this.variant="filled",this.type="button",this.label="Button",this.trailingIcon=!1,this.icon="",this.disabled=!1,this.href="",this.target="",this.rel="",this.__loadedButtons=new Set,this.__iconLoaded=!1}async __ensureDepsLoaded(){if(!this.__loadedButtons.has(this.variant)){switch(this.variant){case"filled":await f(()=>import("../../vendor/vendor-material.js").then(t=>t.f),__vite__mapDeps([0,1]),import.meta.url);break;case"outlined":await f(()=>import("../../vendor/vendor-material.js").then(t=>t.o),__vite__mapDeps([0,1]),import.meta.url);break;case"filled-tonal":await f(()=>import("../../vendor/vendor-material.js").then(t=>t.d),__vite__mapDeps([0,1]),import.meta.url);break;case"text":await f(()=>import("../../vendor/vendor-material.js").then(t=>t.t),__vite__mapDeps([0,1]),import.meta.url);break}this.__loadedButtons.add(this.variant)}this.icon&&!this.__iconLoaded&&(await f(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),this.__iconLoaded=!0)}__getMdHost(){return this.renderRoot.querySelector("md-filled-button, md-outlined-button, md-filled-tonal-button, md-text-button")}__getInnerNativeButton(t){return t?.shadowRoot?.querySelector("button")??null}__syncAriaToInner(){const t=this.__getMdHost(),e=this.__getInnerNativeButton(t);if(!t||!e)return;const i=(this.getAttribute("aria-label")||"").trim(),o=(t.getAttribute("aria-label")||"").trim(),a=this.label.trim()===""?(this.icon||"").trim():"",s=i||o||a;s?e.setAttribute("aria-label",s):e.removeAttribute("aria-label");const d=this.getAttribute("aria-controls");d!==null?e.setAttribute("aria-controls",d):e.removeAttribute("aria-controls");const v=this.getAttribute("aria-expanded");v!==null?e.setAttribute("aria-expanded",v):e.removeAttribute("aria-expanded"),t.removeAttribute("aria-label"),t.removeAttribute("aria-controls"),t.removeAttribute("aria-expanded"),this.removeAttribute("aria-expanded"),this.__ariaObserver?.disconnect(),this.__ariaObserver=new MutationObserver(g=>{const u=this.__getMdHost(),m=this.__getInnerNativeButton(u);if(!(!u||!m)){for(const _ of g){if(_.type!=="attributes"||!_.attributeName)continue;const b=_.attributeName,p=this.getAttribute(b);if(b==="aria-label"){const $=(u.getAttribute("aria-label")||"").trim(),y=(p||$||(this.label.trim()===""?(this.icon||"").trim():"")).trim();y?m.setAttribute("aria-label",y):m.removeAttribute("aria-label"),u.removeAttribute("aria-label")}else(b==="aria-controls"||b==="aria-expanded")&&(p===null?m.removeAttribute(b):m.setAttribute(b,p),b==="aria-expanded"&&this.removeAttribute("aria-expanded"))}u.removeAttribute("aria-label"),u.removeAttribute("aria-controls"),u.removeAttribute("aria-expanded")}}),this.__ariaObserver.observe(this,{attributes:!0,attributeFilter:["aria-label","aria-controls","aria-expanded"]})}firstUpdated(){(this.type==="submit"||this.type==="reset")&&this.addEventListener("click",()=>{if(!this.disabled){const t=this.closest("form");t&&(this.type==="submit"&&t.requestSubmit(),this.type==="reset"&&t.reset())}}),this.__ensureDepsLoaded(),this.__syncAriaToInner()}updated(t){(t.has("variant")||t.has("icon")&&this.icon)&&this.__ensureDepsLoaded(),t.has("variant")&&this.__syncAriaToInner()}disconnectedCallback(){this.__ariaObserver?.disconnect(),super.disconnectedCallback()}static get styles(){return x`
|
|
3
3
|
/* Gör hosten stretchbar i t.ex. flex/grid */
|
|
4
4
|
:host {
|
|
5
5
|
display: inline-flex;
|
|
@@ -21,7 +21,7 @@ import{a as h,n as l,i as b,E as d,x as p,t as u}from"../../vendor/vendor.js";im
|
|
|
21
21
|
display: inline-grid;
|
|
22
22
|
grid-template-columns: auto;
|
|
23
23
|
grid-template-rows: auto auto;
|
|
24
|
-
row-gap:
|
|
24
|
+
row-gap: 0;
|
|
25
25
|
font-family: var(--brand-font, 'Inter', sans-serif);
|
|
26
26
|
}
|
|
27
27
|
|
|
@@ -63,7 +63,8 @@ import{a as h,n as l,i as b,E as d,x as p,t as u}from"../../vendor/vendor.js";im
|
|
|
63
63
|
.supporting-text {
|
|
64
64
|
color: var(--md-sys-color-on-surface-variant);
|
|
65
65
|
line-height: var(--md-sys-typescale-body-medium-line-height, 20px);
|
|
66
|
-
margin-left: calc(var(--spacing-
|
|
66
|
+
margin-left: calc(var(--spacing-3, 6px) + var(--scb-checkbox-target, 40px));
|
|
67
|
+
margin-bottom: var(--spacing-4, 8px);
|
|
67
68
|
}
|
|
68
69
|
:host([disabled]) .supporting-text { color: var(--n-60); }
|
|
69
70
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{_ as c}from"../../vendor/preload-helper.js";import{a as p,n as u,i as m,x as l,t as f}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,r,s){try{customElements.get(i)||e(i,r,s)}catch(a){var o=String(a||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var g=Object.defineProperty,v=Object.getOwnPropertyDescriptor,d=(t,e,i,r)=>{for(var s=r>1?void 0:r?v(e,i):e,o=t.length-1,a;o>=0;o--)(a=t[o])&&(s=(r?a(e,i,s):a(s))||s);return r&&s&&g(e,i,s),s};let n=class extends m{constructor(){super(...arguments),this.ariaLabel="",this.tooltip="",this.variant="standard",this.icon="home",this.toggle=!1,this.selected=!1,this.toggleofficon="add",this.toggleonicon="remove",this.disabled=!1,this.__loadedVariants=new Set,this.__iconLoaded=!1,this.__onInnerChange=()=>{const e=!!this.__getMdHost()?.selected;this.toggle&&(this.selected=e),this.dispatchEvent(new CustomEvent("change",{detail:{selected:e},bubbles:!0,composed:!0}))}}async firstUpdated(){await this.__ensureDepsLoaded(),await this.updateComplete,this.__attachChangeListener(),this.__syncAria()}updated(t){super.updated(t),t.has("variant")||t.has("toggle")||t.has("icon")||t.has("ariaLabel")||t.has("selected")||t.has("disabled")||t.has("tooltip")?this.__ensureDepsLoaded().then(()=>queueMicrotask(()=>{this.__attachChangeListener(),this.__syncAria()})):queueMicrotask(()=>this.__attachChangeListener())}disconnectedCallback(){super.disconnectedCallback(),this.__lastBtn?.removeEventListener?.("change",this.__onInnerChange),this.__lastBtn=null,this.__ariaObserver?.disconnect()}async __ensureDepsLoaded(){if(!this.__loadedVariants.has(this.variant)){switch(this.variant){case"filled":await c(()=>import("../../vendor/vendor-material.js").then(t=>t.
|
|
2
|
+
import{_ as c}from"../../vendor/preload-helper.js";import{a as p,n as u,i as m,x as l,t as f}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,r,s){try{customElements.get(i)||e(i,r,s)}catch(a){var o=String(a||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var g=Object.defineProperty,v=Object.getOwnPropertyDescriptor,d=(t,e,i,r)=>{for(var s=r>1?void 0:r?v(e,i):e,o=t.length-1,a;o>=0;o--)(a=t[o])&&(s=(r?a(e,i,s):a(s))||s);return r&&s&&g(e,i,s),s};let n=class extends m{constructor(){super(...arguments),this.ariaLabel="",this.tooltip="",this.variant="standard",this.icon="home",this.toggle=!1,this.selected=!1,this.toggleofficon="add",this.toggleonicon="remove",this.disabled=!1,this.__loadedVariants=new Set,this.__iconLoaded=!1,this.__onInnerChange=()=>{const e=!!this.__getMdHost()?.selected;this.toggle&&(this.selected=e),this.dispatchEvent(new CustomEvent("change",{detail:{selected:e},bubbles:!0,composed:!0}))}}async firstUpdated(){await this.__ensureDepsLoaded(),await this.updateComplete,this.__attachChangeListener(),this.__syncAria()}updated(t){super.updated(t),t.has("variant")||t.has("toggle")||t.has("icon")||t.has("ariaLabel")||t.has("selected")||t.has("disabled")||t.has("tooltip")?this.__ensureDepsLoaded().then(()=>queueMicrotask(()=>{this.__attachChangeListener(),this.__syncAria()})):queueMicrotask(()=>this.__attachChangeListener())}disconnectedCallback(){super.disconnectedCallback(),this.__lastBtn?.removeEventListener?.("change",this.__onInnerChange),this.__lastBtn=null,this.__ariaObserver?.disconnect()}async __ensureDepsLoaded(){if(!this.__loadedVariants.has(this.variant)){switch(this.variant){case"filled":await c(()=>import("../../vendor/vendor-material.js").then(t=>t.e),__vite__mapDeps([0,1]),import.meta.url);break;case"outlined":await c(()=>import("../../vendor/vendor-material.js").then(t=>t.g),__vite__mapDeps([0,1]),import.meta.url);break;case"filled-tonal":await c(()=>import("../../vendor/vendor-material.js").then(t=>t.h),__vite__mapDeps([0,1]),import.meta.url);break;default:await c(()=>import("../../vendor/vendor-material.js").then(t=>t.c),__vite__mapDeps([0,1]),import.meta.url);break}this.__loadedVariants.add(this.variant)}this.__iconLoaded||(await c(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),this.__iconLoaded=!0)}__getMdHost(){const t=this.renderRoot.querySelector("md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button");if(t)return t;const e=this.renderRoot.querySelector("scb-tooltip");if(e){const i=e.querySelector("md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button");if(i)return i}return null}__getInnerButton(t){const e=t?.shadowRoot;return e?e.querySelector("button")||e.querySelector('[role="button"]'):null}__stripNativeTitles(t){if(!t)return;t.removeAttribute("title"),this.__getInnerButton(t)?.removeAttribute("title");const i=t.shadowRoot;i&&i.querySelectorAll("[title]").forEach(r=>r.removeAttribute("title"))}__syncAria(){const t=this.__getMdHost();if(!t)return;const e=this.__getInnerButton(t),i=(this.ariaLabel||this.getAttribute("aria-label")||"").trim()||this.icon.trim(),r=this.getAttribute("aria-controls"),s=this.getAttribute("aria-expanded");e&&(i?e.setAttribute("aria-label",i):e.removeAttribute("aria-label"),r!==null?e.setAttribute("aria-controls",r):e.removeAttribute("aria-controls"),s!==null?e.setAttribute("aria-expanded",s):e.removeAttribute("aria-expanded"),e.removeAttribute("title")),t.removeAttribute("aria-label"),t.removeAttribute("aria-controls"),t.removeAttribute("aria-expanded"),t.removeAttribute("title"),this.hasAttribute("aria-label")&&this.removeAttribute("aria-label"),this.hasAttribute("aria-controls")&&this.removeAttribute("aria-controls"),this.hasAttribute("aria-expanded")&&this.removeAttribute("aria-expanded"),this.__stripNativeTitles(t),this.__ariaObserver?.disconnect(),this.__ariaObserver=new MutationObserver(()=>{const o=this.__getMdHost(),a=this.__getInnerButton(o);if(!o||!a)return;const b=(this.ariaLabel||this.getAttribute("aria-label")||"").trim()||this.icon.trim(),h=this.getAttribute("aria-controls"),_=this.getAttribute("aria-expanded");b?a.setAttribute("aria-label",b):a.removeAttribute("aria-label"),h!==null?a.setAttribute("aria-controls",h):a.removeAttribute("aria-controls"),_!==null?a.setAttribute("aria-expanded",_):a.removeAttribute("aria-expanded"),this.__stripNativeTitles(o),o.removeAttribute("aria-label"),o.removeAttribute("aria-controls"),o.removeAttribute("aria-expanded"),o.removeAttribute("title"),this.hasAttribute("aria-label")&&this.removeAttribute("aria-label"),this.hasAttribute("aria-controls")&&this.removeAttribute("aria-controls"),this.hasAttribute("aria-expanded")&&this.removeAttribute("aria-expanded")}),this.__ariaObserver.observe(this,{attributes:!0,attributeFilter:["aria-label","aria-controls","aria-expanded"]})}__attachChangeListener(){const t=this.__getMdHost();t&&t!==this.__lastBtn&&(this.__lastBtn?.removeEventListener?.("change",this.__onInnerChange),t.addEventListener("change",this.__onInnerChange),this.__lastBtn=t),this.toggle&&t&&"selected"in t&&(t.selected=this.selected),this.__stripNativeTitles(t||null)}__renderMd(t=!1){const e=!!t,i=l`
|
|
3
3
|
<md-icon aria-hidden="true">${this.toggleofficon}</md-icon>
|
|
4
4
|
<md-icon slot="selected" aria-hidden="true">${this.toggleonicon}</md-icon>
|
|
5
5
|
`,r=l`<md-icon aria-hidden="true">${this.icon}</md-icon>`;if(this.toggle)switch(this.variant){case"filled":return l`
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{a as
|
|
2
|
-
<div class="notification ${
|
|
1
|
+
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`
|
|
2
|
+
<div class="notification ${s} ${n} ${e}" type=${this.variant} role="alert" aria-live="assertive" aria-atomic="true" style="display: ${this.open?"flex":"none"};">
|
|
3
3
|
<div class="notification-content">
|
|
4
4
|
${this.showIcon||this.showCloseButton?a`<div class="notification-header">
|
|
5
|
-
${this.showIcon?a`<md-icon>${this.
|
|
5
|
+
${this.showIcon?a`<md-icon>${this._iconForVariant()}</md-icon>`:""}
|
|
6
6
|
</div>`:""}
|
|
7
7
|
<div class="notification-text-container">
|
|
8
8
|
${this.title?a`<div class="notification-title">${this.title}</div>`:""}
|
|
@@ -15,148 +15,103 @@ import{a as d,n as e,i as h,x as a,t as f}from"../../vendor/vendor.js";import"..
|
|
|
15
15
|
`:""}
|
|
16
16
|
</div>
|
|
17
17
|
</div>
|
|
18
|
-
${this.showCloseButton?a`<
|
|
19
|
-
style="--_icon-color: ${this.
|
|
18
|
+
${this.showCloseButton?a`<div class="notification-close-button"><md-icon-button @click=${this._closeNotification}
|
|
19
|
+
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>`:""}
|
|
20
20
|
</div>
|
|
21
|
-
`}};t.styles=[
|
|
21
|
+
`}};t.styles=[h`
|
|
22
22
|
:host {
|
|
23
23
|
display: block;
|
|
24
24
|
position: relative;
|
|
25
25
|
container-type: inline-size;
|
|
26
26
|
container-name: notification-container;
|
|
27
|
+
--scb-notification-card-h-max-w: 580px;
|
|
28
|
+
--scb-notification-card-v-max-w: 600px;
|
|
27
29
|
}
|
|
30
|
+
:host([stretch]) { block-size: 100%; }
|
|
31
|
+
:host([stretch]) .notification { block-size: 100%; }
|
|
28
32
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
padding: 16px;
|
|
32
|
-
display: flex;
|
|
33
|
-
gap: 12px;
|
|
34
|
-
flex-direction: column;
|
|
33
|
+
:host([full-height]) { block-size: 100%; }
|
|
34
|
+
:host([full-height]) .notification { block-size: 100%; }
|
|
35
35
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
36
|
+
:host([full-width]) { max-width: none; width: 100%; }
|
|
37
|
+
:host([full-width]) .notification.horizontal,
|
|
38
|
+
:host([full-width]) .notification.vertical {
|
|
39
|
+
max-width: none;
|
|
40
|
+
width: auto;
|
|
39
41
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
.notification-content{
|
|
44
|
-
flex-direction: row;
|
|
45
|
-
gap: var(--spacing-spacing-4, 12px);
|
|
46
|
-
}
|
|
42
|
+
.notification-content {
|
|
43
|
+
width: 100%;
|
|
47
44
|
}
|
|
48
|
-
}
|
|
45
|
+
}
|
|
49
46
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
.notification-label {
|
|
55
|
-
margin-right: 40px;
|
|
56
|
-
}
|
|
47
|
+
:host([open]) .notification { opacity: 1; }
|
|
48
|
+
:host(:not([open])) .notification {
|
|
49
|
+
opacity: 0;
|
|
50
|
+
pointer-events: none;
|
|
57
51
|
}
|
|
58
52
|
|
|
59
|
-
.notification
|
|
60
|
-
display: flex;
|
|
61
|
-
flex-direction: column;
|
|
62
|
-
gap: var(--Spacing-Spacing-3, 8px);
|
|
63
|
-
|
|
64
|
-
.notification-title {
|
|
65
|
-
display: flex;
|
|
66
|
-
padding: 0 0 var(--spacing-spacing-0, 0) 0;
|
|
67
|
-
align-items: flex-start;
|
|
68
|
-
align-self: stretch;
|
|
69
|
-
font-family: var(--Brand, Inter);
|
|
70
|
-
font-size: var(--md-sys-typescale-headline-small-Size, 24px);
|
|
71
|
-
font-style: normal;
|
|
72
|
-
font-weight: var(--weight-bold, 700);
|
|
73
|
-
line-height: var(--md-sys-typescale-headline-small-line-height2, 30px);
|
|
74
|
-
letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.6px);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.notification-subtitle {
|
|
78
|
-
display: flex;
|
|
79
|
-
padding: 0 0 var(--spacing-spacing-0, 0) 0;
|
|
80
|
-
align-items: flex-start;
|
|
81
|
-
align-self: stretch;
|
|
82
|
-
font-family: var(--Brand, Inter);
|
|
83
|
-
font-size: var(--md-sys-typescale-title-medium-size, 18px);
|
|
84
|
-
font-style: normal;
|
|
85
|
-
font-weight: var(--weight-semibold, 600);
|
|
86
|
-
line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
|
|
87
|
-
letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.notification-text {
|
|
91
|
-
padding: 0 0 var(--spacing-spacing-0, 0) 0;
|
|
92
|
-
align-items: flex-start;
|
|
93
|
-
align-self: stretch;
|
|
94
|
-
font-family: var(--Brand, Inter);
|
|
95
|
-
font-size: var(--md-sys-typescale-body-large-size, 18px);
|
|
96
|
-
font-style: normal;
|
|
97
|
-
font-weight: var(--eeight-regular, 400);
|
|
98
|
-
line-height: var(--md-sys-typescale-body-large-line-height, 26px);
|
|
99
|
-
letter-spacing: var(--md-sys-typescale-body-large-tracking, -0.3px);
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.notification[type="success"] {
|
|
53
|
+
:host([variant="success"]) .notification {
|
|
104
54
|
background: var(--md-sys-color-success-container);
|
|
105
|
-
color: var(--md-sys-color-on-success-container);
|
|
106
|
-
|
|
55
|
+
color: var(--md-sys-color-on-success-container);
|
|
107
56
|
a {
|
|
108
|
-
|
|
109
|
-
text-decoration-thickness: 1px;
|
|
110
|
-
text-underline-offset: .1578em;
|
|
111
|
-
color: var(--md-sys-color-on-success-container);
|
|
112
|
-
&:hover {text-decoration-thickness: 2px;}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
&::part(scb-icon-button){
|
|
116
|
-
--icon-color: var(--md-sys-color-on-success-container);
|
|
57
|
+
color: var(--md-sys-color-on-success-container);
|
|
117
58
|
}
|
|
118
59
|
}
|
|
119
|
-
|
|
120
|
-
.notification[type="error"] {
|
|
60
|
+
:host([variant="error"]) .notification {
|
|
121
61
|
background: var(--md-sys-color-error-container);
|
|
122
62
|
color: var(--md-sys-color-on-error-container);
|
|
123
63
|
a {
|
|
124
|
-
text-decoration: underline;
|
|
125
|
-
text-decoration-thickness: 1px;
|
|
126
|
-
text-underline-offset: .1578em;
|
|
127
64
|
color: var(--md-sys-color-on-error-container);
|
|
128
|
-
&:hover {text-decoration-thickness: 2px;}
|
|
129
65
|
}
|
|
130
66
|
}
|
|
131
|
-
|
|
132
|
-
.notification[type="warning"] {
|
|
67
|
+
:host([variant="warning"]) .notification {
|
|
133
68
|
background: var(--md-sys-color-warning-container);
|
|
134
69
|
color: var(--md-sys-color-on-warning-container);
|
|
135
70
|
a {
|
|
136
|
-
text-decoration: underline;
|
|
137
|
-
text-decoration-thickness: 1px;
|
|
138
|
-
text-underline-offset: .1578em;
|
|
139
71
|
color: var(--md-sys-color-on-warning-container);
|
|
140
|
-
&:hover {text-decoration-thickness: 2px;}
|
|
141
72
|
}
|
|
142
73
|
}
|
|
143
|
-
|
|
144
|
-
.notification[type="info"] {
|
|
74
|
+
:host([variant="info"]) .notification {
|
|
145
75
|
background: var(--md-sys-color-info-container);
|
|
146
76
|
color: var(--md-sys-color-on-info-container);
|
|
77
|
+
a {
|
|
78
|
+
color: var(--md-sys-color-on-info-container);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.notification {
|
|
83
|
+
border-radius: 12px;
|
|
84
|
+
padding: 16px;
|
|
85
|
+
display: flex;
|
|
86
|
+
gap: var(--spacing-spacing-4, 12px);
|
|
87
|
+
flex-direction: row;
|
|
88
|
+
|
|
89
|
+
&.vertical {
|
|
90
|
+
max-width: var(--scb-notification-card-v-max-w);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
&.horizontal {
|
|
94
|
+
max-width: var(--scb-notification-card-h-max-w);
|
|
95
|
+
|
|
96
|
+
.notification-content{
|
|
97
|
+
flex-direction: row;
|
|
98
|
+
gap: var(--spacing-spacing-4, 12px);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
147
102
|
a {
|
|
148
103
|
text-decoration: underline;
|
|
149
104
|
text-decoration-thickness: 1px;
|
|
150
105
|
text-underline-offset: .1578em;
|
|
151
|
-
color: var(--md-sys-color-on-info-container);
|
|
152
106
|
&:hover {text-decoration-thickness: 2px;}
|
|
153
107
|
}
|
|
154
|
-
}
|
|
155
108
|
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
109
|
+
.notification-close-button {
|
|
110
|
+
position: relative;
|
|
111
|
+
right: 8px;
|
|
112
|
+
top: 8px;
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
}
|
|
160
115
|
}
|
|
161
116
|
|
|
162
117
|
.notification-content {
|
|
@@ -165,23 +120,57 @@ import{a as d,n as e,i as h,x as a,t as f}from"../../vendor/vendor.js";import"..
|
|
|
165
120
|
gap: 4px;
|
|
166
121
|
}
|
|
167
122
|
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
123
|
+
.notification-text-container {
|
|
124
|
+
display: flex;
|
|
125
|
+
flex-direction: column;
|
|
126
|
+
gap: var(--spacing-spacing-3, 8px);
|
|
127
|
+
font-family: var(--Brand, Inter);
|
|
128
|
+
font-style: normal;
|
|
129
|
+
|
|
130
|
+
.notification-title {
|
|
131
|
+
font-size: var(--md-sys-typescale-headline-small-Size, 24px);
|
|
132
|
+
font-weight: var(--weight-bold, 700);
|
|
133
|
+
line-height: var(--md-sys-typescale-headline-small-line-height2, 30px);
|
|
134
|
+
letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.6px);
|
|
135
|
+
}
|
|
172
136
|
|
|
137
|
+
.notification-subtitle {
|
|
138
|
+
font-size: var(--md-sys-typescale-title-medium-size, 18px);
|
|
139
|
+
font-weight: var(--weight-semibold, 600);
|
|
140
|
+
line-height: var(--md-sys-typescale-title-medium-line-height, 26px);
|
|
141
|
+
letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.notification-text {
|
|
145
|
+
font-size: var(--md-sys-typescale-body-large-size, 18px);
|
|
146
|
+
font-weight: var(--eeight-regular, 400);
|
|
147
|
+
line-height: var(--md-sys-typescale-body-large-line-height, 26px);
|
|
148
|
+
letter-spacing: var(--md-sys-typescale-body-large-tracking, -0.3px);
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
173
152
|
.notification-footer {
|
|
174
153
|
font-size: 18px;
|
|
175
154
|
margin-top: 4px;
|
|
176
155
|
line-height: 26px;
|
|
177
|
-
}
|
|
178
156
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
157
|
+
.footer-link {
|
|
158
|
+
display: inline-block;
|
|
159
|
+
vertical-align: middle;
|
|
160
|
+
transition: box-shadow 0.25s cubic-bezier(.4,0,.2,1);
|
|
161
|
+
}
|
|
182
162
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
163
|
+
.footer-link:focus-visible {
|
|
164
|
+
outline: none;
|
|
165
|
+
border-radius: 4px;
|
|
166
|
+
animation: growShrinkRing 0.25s cubic-bezier(.4,0,.2,1);
|
|
167
|
+
box-shadow: 0 0 0 2px var(--md-sys-color-primary, #1976d2);
|
|
168
|
+
}
|
|
186
169
|
}
|
|
187
|
-
|
|
170
|
+
|
|
171
|
+
@keyframes growShrinkRing {
|
|
172
|
+
0% { box-shadow: 0 0 0 2px var(--md-sys-color-primary, #1976d2); }
|
|
173
|
+
50% { box-shadow: 0 0 0 7px var(--md-sys-color-primary, #1976d2); }
|
|
174
|
+
100% { box-shadow: 0 0 0 2px var(--md-sys-color-primary, #1976d2); }
|
|
175
|
+
}
|
|
176
|
+
`];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);
|
|
@@ -26,7 +26,7 @@ import{i as p,x as c,a as h,n as l,t as u}from"../../vendor/vendor.js";import"..
|
|
|
26
26
|
display: inline-grid;
|
|
27
27
|
grid-template-columns: auto;
|
|
28
28
|
grid-template-rows: auto auto;
|
|
29
|
-
row-gap:
|
|
29
|
+
row-gap: 0;
|
|
30
30
|
font-family: var(--brand-font, 'Inter', sans-serif);
|
|
31
31
|
}
|
|
32
32
|
|
|
@@ -76,7 +76,8 @@ import{i as p,x as c,a as h,n as l,t as u}from"../../vendor/vendor.js";import"..
|
|
|
76
76
|
color: var(--md-sys-color-on-surface-variant);
|
|
77
77
|
line-height: var(--md-sys-typescale-body-medium-line-height, 20px);
|
|
78
78
|
/* gap + wrapperbredd så texten linjerar med labeln */
|
|
79
|
-
margin-left: calc(var(--spacing-
|
|
79
|
+
margin-left: calc(var(--spacing-3, 6px) + var(--scb-checkbox-target, 40px));
|
|
80
|
+
margin-bottom: var(--spacing-4, 8px);
|
|
80
81
|
}
|
|
81
82
|
:host([disabled]) .supporting-text { color: var(--n-60); }
|
|
82
83
|
|