scb-wc-test 0.1.104 → 0.1.106

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

@@ -1,23 +1,23 @@
-import { css as p, LitElement as d, html as s } from "lit";
-import { property as e, customElement as f } from "lit/decorators.js";
+import { css as h, LitElement as d, html as r } from "lit";
+import { property as o, customElement as f } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 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;
+var m = Object.defineProperty, g = Object.getOwnPropertyDescriptor, i = (e, n, l, a) => {
+  for (var s = a > 1 ? void 0 : a ? g(n, l) : n, c = e.length - 1, p; c >= 0; c--)
+    (p = e[c]) && (s = (a ? p(n, l, s) : p(s)) || s);
+  return a && s && m(n, l, s), s;
 };
 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.sizing = "stretch", this.width = "", this.maxWidth = "", this.height = "", this.maxHeight = "", 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.spacing = "", this.spacingTop = "", this.spacingBottom = "", this._closeNotification = () => {
       this.open = !1;
-      const o = new CustomEvent("close", {
+      const e = new CustomEvent("close", {
         detail: { open: this.open },
         bubbles: !0,
         composed: !0
       });
-      this.dispatchEvent(o);
+      this.dispatchEvent(e);
     };
   }
   _iconForVariant() {
@@ -33,12 +33,20 @@ let t = class extends d {
         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"));
+  __resolveSpacingToken(e) {
+    const n = (e ?? "").trim();
+    return n ? /^(?:[0-9]|1[0-4])$/.test(n) ? `var(--spacing-${n})` : n : "";
+  }
+  __applySpacing() {
+    const e = this.__resolveSpacingToken(this.spacingTop || this.spacing), n = this.__resolveSpacingToken(this.spacingBottom || this.spacing);
+    e ? this.style.marginBlockStart = e : this.style.removeProperty("margin-block-start"), n ? this.style.marginBlockEnd = n : this.style.removeProperty("margin-block-end");
+  }
+  updated(e) {
+    super.updated(e), e.has("width") && (this.width && this.width.trim() !== "" ? this.style.inlineSize = this.width : this.style.removeProperty("inline-size")), e.has("maxWidth") && (this.maxWidth && this.maxWidth.trim() !== "" ? this.style.maxInlineSize = this.maxWidth : this.style.removeProperty("max-inline-size")), e.has("height") && (this.height && this.height.trim() !== "" ? this.style.blockSize = this.height : this.style.removeProperty("block-size")), e.has("maxHeight") && (this.maxHeight && this.maxHeight.trim() !== "" ? this.style.maxBlockSize = this.maxHeight : this.style.removeProperty("max-block-size")), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom")) && this.__applySpacing();
   }
   render() {
-    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`
+    const e = this.direction === "vertical" ? "vertical" : "horizontal", n = 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 r`
       <div
         class="notification"
         type=${this.variant}
@@ -46,8 +54,8 @@ let t = class extends d {
         aria-live="assertive"
         aria-atomic="true"
       >
-        <div class="notification-main ${o}">
-          ${this.showIcon ? s`
+        <div class="notification-main ${e}">
+          ${this.showIcon ? r`
                 <div class="notification-leading-icon">
                   <md-icon aria-hidden="true">
                     ${this._iconForVariant()}
@@ -55,14 +63,14 @@ let t = class extends d {
                 </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.title ? r`<div class="notification-title">${this.title}</div>` : null}
+            ${this.subtitle ? r`<div class="notification-subtitle">
                   ${this.subtitle}
                 </div>` : null}
-            ${this.supportingText ? s`<div class="notification-text">
+            ${this.supportingText ? r`<div class="notification-text">
                   ${this.supportingText}
                 </div>` : null}
-            ${this.linkText ? s`
+            ${this.linkText ? r`
                   <div class="notification-footer">
                     <a class="footer-link" href="${this.linkHref}">
                       ${this.linkText}
@@ -71,12 +79,12 @@ let t = class extends d {
                 ` : null}
           </div>
         </div>
-        ${this.showCloseButton ? s`
+        ${this.showCloseButton ? r`
               <div class="notification-close-button">
                 <scb-icon-button
                   aria-label="Stäng meddelande"
                   icon="close"
-                  style=${r}
+                  style=${n}
                   @click=${this._closeNotification}
                 >
                 </scb-icon-button>
@@ -88,7 +96,7 @@ let t = class extends d {
   }
 };
 t.styles = [
-  p`
+  h`
       :host {
         display: block;
         position: relative;
@@ -341,56 +349,65 @@ t.styles = [
     `
 ];
 i([
-  e({ type: String })
+  o({ type: String })
 ], t.prototype, "variant", 2);
 i([
-  e({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], t.prototype, "direction", 2);
 i([
-  e({ type: String })
+  o({ type: String })
 ], t.prototype, "title", 2);
 i([
-  e({ type: String })
+  o({ type: String })
 ], t.prototype, "subtitle", 2);
 i([
-  e({ type: String, attribute: "supporting-text" })
+  o({ type: String, attribute: "supporting-text" })
 ], t.prototype, "supportingText", 2);
 i([
-  e({ type: Boolean, reflect: !0 })
+  o({ type: Boolean, reflect: !0 })
 ], t.prototype, "open", 2);
 i([
-  e({ type: String, attribute: "link-text" })
+  o({ type: String, attribute: "link-text" })
 ], t.prototype, "linkText", 2);
 i([
-  e({ type: String, attribute: "link-href" })
+  o({ type: String, attribute: "link-href" })
 ], t.prototype, "linkHref", 2);
 i([
-  e({ type: Boolean, attribute: "show-icon" })
+  o({ type: Boolean, attribute: "show-icon" })
 ], t.prototype, "showIcon", 2);
 i([
-  e({ type: Boolean, attribute: "show-close-button" })
+  o({ type: Boolean, attribute: "show-close-button" })
 ], t.prototype, "showCloseButton", 2);
 i([
-  e({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], t.prototype, "sizing", 2);
 i([
-  e({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], t.prototype, "width", 2);
 i([
-  e({ type: String, reflect: !0, attribute: "max-width" })
+  o({ type: String, reflect: !0, attribute: "max-width" })
 ], t.prototype, "maxWidth", 2);
 i([
-  e({ type: String, reflect: !0 })
+  o({ type: String, reflect: !0 })
 ], t.prototype, "height", 2);
 i([
-  e({ type: String, reflect: !0, attribute: "max-height" })
+  o({ type: String, reflect: !0, attribute: "max-height" })
 ], t.prototype, "maxHeight", 2);
 i([
-  e({ type: Boolean, reflect: !0, attribute: "full-height" })
+  o({ type: Boolean, reflect: !0, attribute: "full-height" })
 ], t.prototype, "fullHeight", 2);
 i([
-  e({ type: Boolean, reflect: !0, attribute: "full-width" })
+  o({ type: Boolean, reflect: !0, attribute: "full-width" })
 ], t.prototype, "fullWidth", 2);
+i([
+  o({ type: String })
+], t.prototype, "spacing", 2);
+i([
+  o({ type: String, attribute: "spacing-top" })
+], t.prototype, "spacingTop", 2);
+i([
+  o({ type: String, attribute: "spacing-bottom" })
+], t.prototype, "spacingBottom", 2);
 t = i([
   f("scb-notification-card")
 ], t);

package/scb-pagination/scb-pagination.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, PropertyValues } from 'lit';
 export declare class ScbPagination extends LitElement {
     variant: 'icon-text' | 'icon';
     page: number;
@@ -8,11 +8,22 @@ export declare class ScbPagination extends LitElement {
     currentAriaLabel: string;
     pagingNumberAriaLabel: string;
     isNarrow: boolean;
+    spacing: string;
+    spacingTop: string;
+    spacingBottom: string;
     static styles: import('lit').CSSResult[];
     private _prevPage;
     private _nextPage;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private _onResize;
+    private __resolveSpacingToken;
+    private __applySpacing;
+    protected updated(changed: PropertyValues): void;
     render(): import('lit-html').TemplateResult<1> | null;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-pagination': ScbPagination;
+    }
+}