scb-wc-test 0.1.107 → 0.1.108

package/mvc/components/scb-textfield/scb-textfield.js

@@ -1,4 +1,4 @@
-import{a as m,n as a,i as x,x as h,t as v}from"../../vendor/vendor.js";import"../../vendor/vendor-material.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,l,o){try{customElements.get(i)||e(i,l,o)}catch(c){var d=String(c||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var y=Object.defineProperty,g=Object.getOwnPropertyDescriptor,f=t=>{throw TypeError(t)},r=(t,e,i,l)=>{for(var o=l>1?void 0:l?g(e,i):e,d=t.length-1,c;d>=0;d--)(c=t[d])&&(o=(l?c(e,i,o):c(o))||o);return l&&o&&y(e,i,o),o},_=(t,e,i)=>e.has(t)||f("Cannot "+i),w=(t,e,i)=>e.has(t)?f("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),p=(t,e,i)=>(_(t,e,"access private method"),i),n,b,u;let s=class extends x{constructor(){super(),w(this,n),this._internals=null,this.type="text",this.label="",this.supportingText="",this.errorText="",this.leadingIcon="",this.name="",this.pattern="",this.value="",this.underLabel="",this.error=!1,this.disabled=!1,this.required=!1,this.spacing="",this.spacingTop="",this.spacingBottom="",this._form=null,this._formSubmitHandler=null,this._formResetHandler=null,this._initialValue="",this._inputId="","attachInternals"in this&&(this._internals=this.attachInternals())}render(){const t=this.leadingIcon?h`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,e=this.error?h`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>`:null;this.underLabel=this.error?this.errorText||"Ogiltig inmatning.":this.supportingText,this.value=this.value||"";const i=this.underLabel?`${this._inputId}-supporting-text`:void 0,l=this.type==="search"&&this.value?h`
+import{a as m,n as a,i as x,x as h,t as v}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.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,l,o){try{customElements.get(i)||e(i,l,o)}catch(c){var d=String(c||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var y=Object.defineProperty,g=Object.getOwnPropertyDescriptor,f=t=>{throw TypeError(t)},r=(t,e,i,l)=>{for(var o=l>1?void 0:l?g(e,i):e,d=t.length-1,c;d>=0;d--)(c=t[d])&&(o=(l?c(e,i,o):c(o))||o);return l&&o&&y(e,i,o),o},_=(t,e,i)=>e.has(t)||f("Cannot "+i),w=(t,e,i)=>e.has(t)?f("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),p=(t,e,i)=>(_(t,e,"access private method"),i),n,b,u;let s=class extends x{constructor(){super(),w(this,n),this._internals=null,this.type="text",this.label="",this.supportingText="",this.errorText="",this.leadingIcon="",this.name="",this.pattern="",this.value="",this.underLabel="",this.error=!1,this.disabled=!1,this.required=!1,this.spacing="",this.spacingTop="",this.spacingBottom="",this._form=null,this._formSubmitHandler=null,this._formResetHandler=null,this._initialValue="",this._inputId="",this._showDatepicker=!1,this._toggleDatepicker=()=>{this._showDatepicker=!this._showDatepicker},this._onDateSelected=t=>{this.value=t.detail.value,this._showDatepicker=!1,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))},"attachInternals"in this&&(this._internals=this.attachInternals())}render(){const t=this.leadingIcon?h`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,e=this.error?h`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>`:null;this.underLabel=this.error?this.errorText||"Ogiltig inmatning.":this.supportingText,this.value=this.value||"";const i=this.underLabel?`${this._inputId}-supporting-text`:void 0,l=this.type==="search"&&this.value?h`
             <button
               type="button"
               class="scb-textfield-clear"
@@ -52,6 +52,36 @@ import{a as m,n as a,i as x,x as h,t as v}from"../../vendor/vendor.js";import"..
 ${this.value}</textarea
           >
         </div>
+      `:this.type==="date"?h`
+        <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
+        <span
+          class="scb-textfield-supporting-text"
+          id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
+          >${this.underLabel}</span
+        >
+        <div class="scb-textfield-wrapper" style="position:relative;">
+          ${t}
+          <input
+            class="scb-textfield${this.error?" has-error-icon":""}"
+            .value=${this.value}
+            type="text"
+            name="${this.name}"
+            id="${this._inputId}"
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            aria-invalid=${this.error?"true":"false"}
+            aria-describedby=${i}
+            readonly
+          />
+          <scb-icon-button icon="calendar_today" @click=${this._toggleDatepicker} aria-label="Välj datum" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);"></scb-icon-button>
+          <scb-datepicker
+            variant="popup"
+            .selectedValue=${this.value}
+            .open=${this._showDatepicker}
+            @date-selected=${this._onDateSelected}
+          ></scb-datepicker>
+          ${e}
+        </div>
       `:h`
       <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
       <span
@@ -99,6 +129,9 @@ ${this.value}</textarea
       :host([type='text']) {
         --scb-textfield-max-width: var(--scb-textfield-text-max-width);
       }
+      :host([type='date']) {
+        --scb-textfield-max-width: var(--scb-textfield-text-max-width);
+      }
       :host([type='search']) {
         --scb-textfield-max-width: var(--scb-textfield-search-max-width);
       }
@@ -252,4 +285,4 @@ ${this.value}</textarea
         height: 100%;
         display: block;
       }
-    `];r([a({type:String,reflect:!0})],s.prototype,"type",2);r([a({type:String})],s.prototype,"label",2);r([a({type:String,attribute:"supporting-text"})],s.prototype,"supportingText",2);r([a({type:String,attribute:"error-text"})],s.prototype,"errorText",2);r([a({type:String,attribute:"leading-icon"})],s.prototype,"leadingIcon",2);r([a({type:String})],s.prototype,"name",2);r([a({type:String})],s.prototype,"pattern",2);r([a({type:String,attribute:"value"})],s.prototype,"value",2);r([a({type:String})],s.prototype,"underLabel",2);r([a({type:Boolean,reflect:!0})],s.prototype,"error",2);r([a({type:Boolean,reflect:!0})],s.prototype,"disabled",2);r([a({type:Boolean,reflect:!0})],s.prototype,"required",2);r([a({type:String,reflect:!0})],s.prototype,"spacing",2);r([a({type:String,attribute:"spacing-top",reflect:!0})],s.prototype,"spacingTop",2);r([a({type:String,attribute:"spacing-bottom",reflect:!0})],s.prototype,"spacingBottom",2);s=r([v("scb-textfield")],s);
+    `];r([a({type:String,reflect:!0})],s.prototype,"type",2);r([a({type:String})],s.prototype,"label",2);r([a({type:String,attribute:"supporting-text"})],s.prototype,"supportingText",2);r([a({type:String,attribute:"error-text"})],s.prototype,"errorText",2);r([a({type:String,attribute:"leading-icon"})],s.prototype,"leadingIcon",2);r([a({type:String})],s.prototype,"name",2);r([a({type:String})],s.prototype,"pattern",2);r([a({type:String,attribute:"value"})],s.prototype,"value",2);r([a({type:String})],s.prototype,"underLabel",2);r([a({type:Boolean,reflect:!0})],s.prototype,"error",2);r([a({type:Boolean,reflect:!0})],s.prototype,"disabled",2);r([a({type:Boolean,reflect:!0})],s.prototype,"required",2);r([a({type:String,reflect:!0})],s.prototype,"spacing",2);r([a({type:String,attribute:"spacing-top",reflect:!0})],s.prototype,"spacingTop",2);r([a({type:String,attribute:"spacing-bottom",reflect:!0})],s.prototype,"spacingBottom",2);r([a({type:Boolean})],s.prototype,"_showDatepicker",2);s=r([v("scb-textfield")],s);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.107",
+    "version":  "0.1.108",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -123,6 +123,10 @@
                                        "import":  "./scb-chip/scb-chip.js",
                                        "require":  "./scb-chip/scb-chip.js"
                                    },
+                    "./scb-datepicker":  {
+                                             "import":  "./scb-datepicker/scb-datepicker.js",
+                                             "require":  "./scb-datepicker/scb-datepicker.js"
+                                         },
                     "./scb-dialog":  {
                                          "import":  "./scb-dialog/scb-dialog.js",
                                          "require":  "./scb-dialog/scb-dialog.js"
@@ -337,5 +341,5 @@
                                   },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "9C8FDE229A6A7627895483B4195C5836D7D6E708679AC92B7306C433AB2EB029"
+    "buildHash":  "35C00C1CE77F40BCC22105339704C4FB4E5291B028748939B0A8797CF24AB24E"
 }

package/scb-datepicker/scb-datepicker.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+export declare class ScbDatepicker extends LitElement {
+    private _currentDate;
+    private _selectedDate;
+    private _showMonthDropdown;
+    private _showYearDropdown;
+    variant: 'static' | 'popup';
+    lang: 'sv' | 'en';
+    selectedValue: string;
+    open: boolean;
+    static styles: import('lit').CSSResult[];
+    updated(changed: PropertyValues): void;
+    private _getMonthDays;
+    private _monthNames;
+    render(): TemplateResult;
+    private _toggleMonthDropdown;
+    private _toggleYearDropdown;
+    private _onMonthChangeCustom;
+    private _onYearChangeCustom;
+    private _prevYear;
+    private _nextYear;
+    private _isToday;
+    private _isSelected;
+    private _selectDate;
+    private _prevMonth;
+    private _nextMonth;
+    private _close;
+}

package/scb-datepicker/scb-datepicker.js

@@ -0,0 +1,404 @@
+import { css as g, LitElement as m, html as n } from "lit";
+import { state as h, property as p, customElement as w } from "lit/decorators.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "../scb-button/scb-button.js";
+import "@material/web/icon/icon.js";
+import "@material/web/ripple/ripple.js";
+import "@material/web/focus/md-focus-ring.js";
+import "../scb-divider/scb-divider.js";
+var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, d = (e, t, c, l) => {
+  for (var i = l > 1 ? void 0 : l ? _(t, c) : t, o = e.length - 1, s; o >= 0; o--)
+    (s = e[o]) && (i = (l ? s(t, c, i) : s(i)) || i);
+  return l && i && v(t, c, i), i;
+};
+let a = class extends m {
+  constructor() {
+    super(...arguments), this._currentDate = /* @__PURE__ */ new Date(), this._selectedDate = null, this._showMonthDropdown = !1, this._showYearDropdown = !1, this.variant = "static", this.lang = "sv", this.selectedValue = "", this.open = !0, this._monthNames = [
+      this.lang == "sv" ? "Januari" : "January",
+      this.lang == "sv" ? "Februari" : "February",
+      this.lang == "sv" ? "Mars" : "March",
+      (this.lang == "sv", "April"),
+      this.lang == "sv" ? "Maj" : "May",
+      this.lang == "sv" ? "Juni" : "June",
+      this.lang == "sv" ? "Juli" : "July",
+      this.lang == "sv" ? "Augusti" : "August",
+      (this.lang == "sv", "September"),
+      this.lang == "sv" ? "Oktober" : "October",
+      (this.lang == "sv", "November"),
+      (this.lang == "sv", "December")
+    ], this._prevYear = () => {
+      const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
+      this._currentDate = new Date(e - 1, t, 1);
+    }, this._nextYear = () => {
+      const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
+      this._currentDate = new Date(e + 1, t, 1);
+    }, this._prevMonth = () => {
+      const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
+      this._currentDate = new Date(e, t - 1, 1);
+    }, this._nextMonth = () => {
+      const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
+      this._currentDate = new Date(e, t + 1, 1);
+    }, this._close = () => {
+      this.open = !1, this.dispatchEvent(new CustomEvent("datepicker-closed", {
+        bubbles: !0,
+        composed: !0
+      }));
+    };
+  }
+  updated(e) {
+    if (super.updated(e), e.has("selectedValue") && this.selectedValue) {
+      const t = new Date(this.selectedValue);
+      isNaN(t.getTime()) || (this._selectedDate = t, this._currentDate = new Date(t.getFullYear(), t.getMonth(), 1));
+    }
+  }
+  _getMonthDays(e, t) {
+    const c = new Date(e, t, 1), l = new Date(e, t + 1, 0), i = [];
+    let o = [], s = (c.getDay() + 6) % 7;
+    for (let r = 0; r < s; r++) o.push(null);
+    for (let r = 1; r <= l.getDate(); r++) {
+      const u = new Date(e, t, r);
+      o.push(u), o.length === 7 && (i.push(o), o = []);
+    }
+    if (o.length) {
+      for (; o.length < 7; ) o.push(null);
+      i.push(o);
+    }
+    return i;
+  }
+  render() {
+    if (!this.open) return n``;
+    const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth(), c = /* @__PURE__ */ new Date(), l = this._getMonthDays(e, t), i = Array.from({ length: 101 }, (o, s) => c.getFullYear() - 50 + s);
+    return n`
+      <div class="datepicker-popup ${this.variant === "popup" ? "popup" : "static"}">
+        <div class="header">
+            <div class="month-selector ${this._showMonthDropdown ? "open" : ""} ${this._showYearDropdown ? "disable" : ""}">
+                <scb-icon-button icon="chevron_left" @click=${this._prevMonth} aria-label=${this.lang == "sv" ? "Föregående månad" : "Previous month"}></scb-icon-button>
+                <div class="custom-dropdown month-dropdown">
+                    <div 
+                    @keydown=${(o) => {
+      (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this._toggleMonthDropdown());
+    }}
+                    tabindex="0" class="dropdown-selected" @click=${() => this._toggleMonthDropdown()}>
+                        ${this._monthNames[t].slice(0, 3)}
+                        <md-icon>arrow_drop_down</md-icon>
+                        <md-focus-ring></md-focus-ring>
+                        <md-ripple></md-ripple>
+                    </div>
+                </div>
+                <scb-icon-button icon="chevron_right" @click=${this._nextMonth} aria-label=${this.lang == "sv" ? "Nästa månad" : "Next month"}></scb-icon-button>
+            </div>
+            <div class="year-selector ${this._showMonthDropdown ? "disable" : ""} ${this._showYearDropdown ? "open" : ""}">
+                <scb-icon-button icon="chevron_left" @click=${this._prevYear} aria-label=${this.lang == "sv" ? "Föregående år" : "Previous year"}></scb-icon-button>
+                    <div class="custom-dropdown year-dropdown">
+                        <div 
+                        @keydown=${(o) => {
+      (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this._toggleYearDropdown());
+    }}
+                        tabindex="0" class="dropdown-selected" @click=${() => this._toggleYearDropdown()}>
+                            ${e}
+                            <md-icon>arrow_drop_down</md-icon>
+                            <md-focus-ring></md-focus-ring>
+                            <md-ripple></md-ripple>
+                        </div>
+                    </div>
+                <scb-icon-button icon="chevron_right" @click=${this._nextYear} aria-label=${this.lang == "sv" ? "Nästa år" : "Next year"}></scb-icon-button>
+            </div>
+        </div>
+                ${this._showMonthDropdown || this._showYearDropdown ? n`<scb-divider></scb-divider>` : ""}
+        <div class="datepicker-content" style="position:relative;">
+          ${this._showMonthDropdown ? n`
+            <div class="dropdown-list">
+              ${this._monthNames.map((o, s) => n`
+                <div
+                    @keydown=${(r) => {
+      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._onMonthChangeCustom(s));
+    }}
+                  tabindex="0"
+                  class="dropdown-item${s === t ? " selected" : ""}"
+                  @click=${() => this._onMonthChangeCustom(s)}
+                  id=${s === t ? "selected-month" : ""}
+                >
+                ${s === t ? n`<md-icon>check</md-icon>` : ""}
+                  ${o}
+                  <md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
+                </div>
+              `)}
+            </div>
+          ` : ""}
+          ${this._showYearDropdown ? n`
+            <div class="dropdown-list">
+              ${i.map((o) => n`
+                <div
+                @keydown=${(s) => {
+      (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this._onYearChangeCustom(o));
+    }}
+                  tabindex="0"
+                  class="dropdown-item${o === e ? " selected" : ""}"
+                  @click=${() => this._onYearChangeCustom(o)}
+                  id=${o === e ? "selected-year" : ""}
+                >
+                ${o === e ? n`<md-icon>check</md-icon>` : ""}
+                  ${o}
+                  <md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
+                </div>
+              `)}
+            </div>
+          ` : ""}
+          ${!this._showMonthDropdown && !this._showYearDropdown ? n`
+            <div class="datepicker-calendar">
+            <table>
+              <thead>
+                <tr>
+                  <th>${this.lang == "sv" ? "Må" : "Mo"}</th><th>${this.lang == "sv" ? "Ti" : "Tu"}</th><th>${this.lang == "sv" ? "On" : "We"}</th><th>${this.lang == "sv" ? "To" : "Th"}</th><th>${this.lang == "sv", "Fr"}</th><th>${this.lang == "sv" ? "Lö" : "Sa"}</th><th>${this.lang == "sv" ? "Sö" : "Su"}</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${l.map((o) => n`
+                  <tr>
+                    ${o.map((s) => s ? n`
+                      <td>
+                        <div
+                        @keydown=${(r) => {
+      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._selectDate(s));
+    }}
+                            role="button"
+                            tabindex="0"
+                          class="day${this._isToday(s, c) ? " today" : ""}${this._isSelected(s) ? " selected" : ""}"
+                          @click=${() => this._selectDate(s)}
+                        >${s.getDate()}<md-ripple></md-ripple><md-focus-ring></md-focus-ring></div>
+                      </td>
+                    ` : n`<td></td>`)}
+                  </tr>
+                `)}
+              </tbody>
+            </table>
+            </div>
+          ` : ""}
+        </div>
+        <div class="datepicker-footer">
+        ${!this._showMonthDropdown && !this._showYearDropdown ? n`
+            <scb-button variant="text" label=${this.lang == "sv" ? "Stäng" : "Close"} @click=${this._close}></scb-button>
+        ` : ""}
+        </div>
+         </div>
+    `;
+  }
+  _toggleMonthDropdown() {
+    this._showMonthDropdown = !this._showMonthDropdown, this._showMonthDropdown && (this._showYearDropdown = !1, setTimeout(() => {
+      const e = this.renderRoot.querySelector("#selected-month");
+      e && e.scrollIntoView({ block: "center" });
+    }, 0));
+  }
+  _toggleYearDropdown() {
+    this._showYearDropdown = !this._showYearDropdown, this._showYearDropdown && (this._showMonthDropdown = !1, setTimeout(() => {
+      const e = this.renderRoot.querySelector("#selected-year");
+      e && e.scrollIntoView({ block: "center" });
+    }, 0));
+  }
+  _onMonthChangeCustom(e) {
+    const t = this._currentDate.getFullYear();
+    this._currentDate = new Date(t, e, 1), this._showMonthDropdown = !1;
+  }
+  _onYearChangeCustom(e) {
+    const t = this._currentDate.getMonth();
+    this._currentDate = new Date(e, t, 1), this._showYearDropdown = !1;
+  }
+  _isToday(e, t) {
+    return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
+  }
+  _isSelected(e) {
+    return this._selectedDate && e.getDate() === this._selectedDate.getDate() && e.getMonth() === this._selectedDate.getMonth() && e.getFullYear() === this._selectedDate.getFullYear();
+  }
+  _selectDate(e) {
+    this._selectedDate = e;
+    const t = e.toISOString().slice(0, 10);
+    this.dispatchEvent(new CustomEvent("date-selected", {
+      detail: { value: t },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+};
+a.styles = [
+  g`
+    :host {
+        --scb-datepicker-width: 380px;
+        width: var(--scb-datepicker-width);
+        font-family: var(--brand-font);
+        color: var(--md-sys-color-on-surface);
+    }
+    .month-selector, .year-selector {
+      display: flex;
+      align-items: center;
+      &.disable{
+        pointer-events: none;
+        opacity: 0.3;
+        scb-icon-button{
+            visibility: hidden;
+        }
+      }
+        &.open{
+            scb-icon-button{
+                visibility: hidden;
+            }
+            .dropdown-selected{
+                background: var(--md-sys-color-secondary-container);
+            }
+        }
+    }
+    .dropdown-selected {
+        position: relative;
+        border-radius: 8px;
+        font-size: 16px;
+        cursor: pointer;
+        text-align: left;
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        padding: 4px 8px;
+    }
+    .dropdown-selected:focus {
+      outline: none;
+    }
+    .dropdown-selected md-focus-ring {
+        border-radius: 8px;
+    }
+    .dropdown-list {
+      position: relative;
+      background: var(--md-sys-color-surface);
+      padding: 4px 0;
+    }
+    .dropdown-item {
+        display: flex;
+        position: relative;
+        cursor: pointer;
+        padding: var(--spacing-3) 56px;
+        min-height: 40px;
+        align-items: center;
+    }
+    .dropdown-item:focus-within {
+      outline: none;
+    }
+    .dropdown-item md-focus-ring {
+        border-radius: var(--md-sys-shape-corner-small);
+    }
+    .dropdown-item.selected {
+      background: var(--md-sys-color-secondary-container, #e3f2fd);
+      font-weight: 500;
+      padding-left: 16px;
+        gap: 16px;
+    }
+      .datepicker-popup {
+        background: var(--md-sys-color-surface);
+        border-radius: var(--md-sys-shape-corner-small);
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+        max-width: var(--scb-datepicker-width);
+        width: 100%;
+        font-family: var(--brand-font);
+      }
+      .datepicker-content{
+         overflow-y: auto;
+         max-height: 260px;
+      }
+      .popup {
+        position:absolute;
+        top:110%;
+        left:0;
+        z-index:10;
+      }
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 12px;
+        padding: 16px 24px 0 16px;
+        flex-wrap: wrap;
+      }
+      .datepicker-footer{
+        padding: 8px 16px 24px 16px;
+      }
+      .month-label {
+        font-size: 18px;
+        font-weight: 500;
+      }
+      .datepicker-calendar{
+        padding: 0 16px;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-bottom: 8px;
+      }
+      th {
+        color: var(--md-sys-color-on-surface-variant, #757575);
+        font-size: 16px;
+        font-weight: 600;
+        padding: 4px;
+      }
+      td {
+        text-align: center;
+      }
+
+      .day:focus-within{
+        outline: none;
+      }
+      .day {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border: none;
+        background: none;
+        font-size: 16px;
+        cursor: pointer;
+        font-family: 'Inter';
+        align-content: center;
+      }
+      .day.selected {
+        background: var(--md-sys-color-secondary-container);
+      }
+      .close-datepicker {
+        margin-top: 8px;
+        background: none;
+        border-color: none;
+        color: var(--md-sys-color-primary, #0057b8);
+        font-size: 16px;
+        cursor: pointer;
+        padding: 4px 12px;
+        border-radius: 8px;
+      }
+      .close-datepicker:hover {
+        background: var(--md-sys-color-primary-container, #e3f2fd);
+      }
+    `
+];
+d([
+  h()
+], a.prototype, "_currentDate", 2);
+d([
+  h()
+], a.prototype, "_selectedDate", 2);
+d([
+  h()
+], a.prototype, "_showMonthDropdown", 2);
+d([
+  h()
+], a.prototype, "_showYearDropdown", 2);
+d([
+  p({ type: String })
+], a.prototype, "variant", 2);
+d([
+  p({ type: String })
+], a.prototype, "lang", 2);
+d([
+  p({ type: String })
+], a.prototype, "selectedValue", 2);
+d([
+  p({ type: Boolean })
+], a.prototype, "open", 2);
+a = d([
+  w("scb-datepicker")
+], a);
+export {
+  a as ScbDatepicker
+};

package/scb-textfield/scb-textfield.d.ts

@@ -27,8 +27,11 @@ export declare class ScbTextField extends LitElement {
     private _formResetHandler;
     private _initialValue;
     private _inputId;
+    private _showDatepicker;
     static styles: import('lit').CSSResult[];
     render(): TemplateResult;
+    private _toggleDatepicker;
+    private _onDateSelected;
     /**
      * Vi re-dispatchar inbyggda "input", "change" och "select"-events med { bubbles: true, composed: true }.
      * Vi kör också ett customevent onValueChanged.

package/scb-textfield/scb-textfield.js

@@ -1,16 +1,27 @@
 import { css as m, LitElement as x, html as d } from "lit";
 import { property as a, customElement as v } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
+import "../scb-datepicker/scb-datepicker.js";
 var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, f = (t) => {
   throw TypeError(t);
 }, r = (t, e, i, l) => {
-  for (var o = l > 1 ? void 0 : l ? g(e, i) : e, p = t.length - 1, u; p >= 0; p--)
-    (u = t[p]) && (o = (l ? u(e, i, o) : u(o)) || o);
+  for (var o = l > 1 ? void 0 : l ? g(e, i) : e, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (o = (l ? u(e, i, o) : u(o)) || o);
   return l && o && y(e, i, o), o;
-}, _ = (t, e, i) => e.has(t) || f("Cannot " + i), w = (t, e, i) => e.has(t) ? f("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), c = (t, e, i) => (_(t, e, "access private method"), i), n, b, h;
+}, _ = (t, e, i) => e.has(t) || f("Cannot " + i), w = (t, e, i) => e.has(t) ? f("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), c = (t, e, i) => (_(t, e, "access private method"), i), n, b, p;
 let s = class extends x {
   constructor() {
-    super(), w(this, n), this._internals = null, this.type = "text", this.label = "", this.supportingText = "", this.errorText = "", this.leadingIcon = "", this.name = "", this.pattern = "", this.value = "", this.underLabel = "", this.error = !1, this.disabled = !1, this.required = !1, this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this._form = null, this._formSubmitHandler = null, this._formResetHandler = null, this._initialValue = "", this._inputId = "", "attachInternals" in this && (this._internals = this.attachInternals());
+    super(), w(this, n), this._internals = null, this.type = "text", this.label = "", this.supportingText = "", this.errorText = "", this.leadingIcon = "", this.name = "", this.pattern = "", this.value = "", this.underLabel = "", this.error = !1, this.disabled = !1, this.required = !1, this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this._form = null, this._formSubmitHandler = null, this._formResetHandler = null, this._initialValue = "", this._inputId = "", this._showDatepicker = !1, this._toggleDatepicker = () => {
+      this._showDatepicker = !this._showDatepicker;
+    }, this._onDateSelected = (t) => {
+      this.value = t.detail.value, this._showDatepicker = !1, this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(
+        new CustomEvent("onValueChanged", {
+          detail: { value: this.value },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    }, "attachInternals" in this && (this._internals = this.attachInternals());
   }
   render() {
     const t = this.leadingIcon ? d`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>` : null, e = this.error ? d`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>` : null;
@@ -70,6 +81,36 @@ let s = class extends x {
 ${this.value}</textarea
           >
         </div>
+      ` : this.type === "date" ? d`
+        <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
+        <span
+          class="scb-textfield-supporting-text"
+          id="${this.underLabel ? `${this._inputId}-supporting-text` : ""}"
+          >${this.underLabel}</span
+        >
+        <div class="scb-textfield-wrapper" style="position:relative;">
+          ${t}
+          <input
+            class="scb-textfield${this.error ? " has-error-icon" : ""}"
+            .value=${this.value}
+            type="text"
+            name="${this.name}"
+            id="${this._inputId}"
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            aria-invalid=${this.error ? "true" : "false"}
+            aria-describedby=${i}
+            readonly
+          />
+          <scb-icon-button icon="calendar_today" @click=${this._toggleDatepicker} aria-label="Välj datum" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);"></scb-icon-button>
+          <scb-datepicker
+            variant="popup"
+            .selectedValue=${this.value}
+            .open=${this._showDatepicker}
+            @date-selected=${this._onDateSelected}
+          ></scb-datepicker>
+          ${e}
+        </div>
       ` : d`
       <label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
       <span
@@ -190,10 +231,10 @@ ${this.value}</textarea
 };
 n = /* @__PURE__ */ new WeakSet();
 b = function() {
-  const t = c(this, n, h).call(this, this.spacing), e = c(this, n, h).call(this, this.spacingTop) ?? t, i = c(this, n, h).call(this, this.spacingBottom) ?? t;
+  const t = c(this, n, p).call(this, this.spacing), e = c(this, n, p).call(this, this.spacingTop) ?? t, i = c(this, n, p).call(this, this.spacingBottom) ?? t;
   e ? this.style.setProperty("--scb-textfield-spacing-block-start", e) : this.style.removeProperty("--scb-textfield-spacing-block-start"), i ? this.style.setProperty("--scb-textfield-spacing-block-end", i) : this.style.removeProperty("--scb-textfield-spacing-block-end");
 };
-h = function(t) {
+p = function(t) {
   if (!t) return;
   const e = String(t).trim();
   if (e)
@@ -225,6 +266,9 @@ s.styles = [
       :host([type='text']) {
         --scb-textfield-max-width: var(--scb-textfield-text-max-width);
       }
+      :host([type='date']) {
+        --scb-textfield-max-width: var(--scb-textfield-text-max-width);
+      }
       :host([type='search']) {
         --scb-textfield-max-width: var(--scb-textfield-search-max-width);
       }
@@ -425,6 +469,9 @@ r([
 r([
   a({ type: String, attribute: "spacing-bottom", reflect: !0 })
 ], s.prototype, "spacingBottom", 2);
+r([
+  a({ type: Boolean })
+], s.prototype, "_showDatepicker", 2);
 s = r([
   v("scb-textfield")
 ], s);