scb-wc-test 0.1.107 → 0.1.108

package/all.js

@@ -15,6 +15,7 @@ import './mvc/components/scb-card/scb-card.js';
 import './mvc/components/scb-checkbox/scb-checkbox-group.js';
 import './mvc/components/scb-checkbox/scb-checkbox.js';
 import './mvc/components/scb-chip/scb-chip.js';
+import './mvc/components/scb-datepicker/scb-datepicker.js';
 import './mvc/components/scb-dialog/scb-dialog.js';
 import './mvc/components/scb-divider/scb-divider.js';
 import './mvc/components/scb-drawer/scb-drawer-item.js';
@@ -86,6 +87,7 @@ import './scb-card/scb-card.js';
 import './scb-checkbox/scb-checkbox-group.js';
 import './scb-checkbox/scb-checkbox.js';
 import './scb-chip/scb-chip.js';
+import './scb-datepicker/scb-datepicker.js';
 import './scb-dialog/scb-dialog.js';
 import './scb-divider/scb-divider.js';
 import './scb-drawer/scb-drawer-item.js';

package/index.d.ts

@@ -11,6 +11,7 @@ export * from './scb-card/scb-card';
 export * from './scb-checkbox/scb-checkbox-group';
 export * from './scb-checkbox/scb-checkbox';
 export * from './scb-chip/scb-chip';
+export * from './scb-datepicker/scb-datepicker';
 export * from './scb-dialog/scb-dialog';
 export * from './scb-divider/scb-divider';
 export * from './scb-drawer/scb-drawer-item';

package/index.js

@@ -1,6 +1,6 @@
 import { ScbAccordionItem as e } from "./scb-accordion/scb-accordion-item.js";
 import { ScbAccordion as c } from "./scb-accordion/scb-accordion.js";
-import { ScbAppBar as m } from "./scb-app-bar/scb-app-bar.js";
+import { ScbAppBar as p } from "./scb-app-bar/scb-app-bar.js";
 import { ScbAvatar as b } from "./scb-avatar/scb-avatar.js";
 import { ScbBadge as f } from "./scb-badge/scb-badge.js";
 import { SCBBreadcrumbItem as i } from "./scb-breadcrumb/scb-breadcrumb-item.js";
@@ -9,126 +9,128 @@ import { ScbButton as l } from "./scb-button/scb-button.js";
 import { ScbCalendarCard as I } from "./scb-calendar-card/scb-calendar-card.js";
 import { ScbCard as B } from "./scb-card/scb-card.js";
 import { ScbCheckboxGroup as D } from "./scb-checkbox/scb-checkbox-group.js";
-import { ScbCheckbox as w } from "./scb-checkbox/scb-checkbox.js";
+import { ScbCheckbox as k } from "./scb-checkbox/scb-checkbox.js";
 import { ScbChip as F } from "./scb-chip/scb-chip.js";
-import { ScbDialog as P } from "./scb-dialog/scb-dialog.js";
-import { ScbDivider as G } from "./scb-divider/scb-divider.js";
-import { ScbDrawerItem as A } from "./scb-drawer/scb-drawer-item.js";
-import { ScbDrawerSection as M } from "./scb-drawer/scb-drawer-section.js";
-import { ScbDrawer as z } from "./scb-drawer/scb-drawer.js";
-import { ScbSubDrawer as K } from "./scb-drawer/scb-sub-drawer.js";
-import { ScbFactCardContent as O } from "./scb-fact-card/scb-fact-card-content.js";
-import { ScbFactCard as V } from "./scb-fact-card/scb-fact-card.js";
-import { ScbFooterSection as q } from "./scb-footer/scb-footer-section.js";
-import { ScbFooter as J } from "./scb-footer/scb-footer.js";
-import { ScbGridItem as W } from "./scb-grid/scb-grid-item.js";
-import { ScbGrid as Y } from "./scb-grid/scb-grid.js";
-import { ScbStack as _ } from "./scb-grid/scb-stack.js";
-import { ScbHeaderDrawerGroup as rr } from "./scb-header/scb-header-drawer-group.js";
-import { ScbHeaderDrawerItem as er } from "./scb-header/scb-header-drawer-item.js";
-import { ScbHeaderTab as cr } from "./scb-header/scb-header-tab.js";
-import { ScbHeaderUtility as mr } from "./scb-header/scb-header-utility.js";
-import { ScbHeader as br } from "./scb-header/scb-header.js";
-import { ScbHorizontalScroller as fr } from "./scb-horizontal-scroller/scb-horizontal-scroller.js";
-import { ScbIconButton as ir } from "./scb-icon-button/scb-icon-button.js";
-import { ScbKeyFigureCard as nr } from "./scb-keyfigure-card/scb-keyfigure-card.js";
-import { ScbLink as lr } from "./scb-link/scb-link.js";
-import { ScbListItem as Ir } from "./scb-list/scb-list-item.js";
-import { ScbList as Br } from "./scb-list/scb-list.js";
-import { ScbMenuItem as Dr } from "./scb-menu/scb-menu-item.js";
-import { ScbMenu as wr } from "./scb-menu/scb-menu.js";
-import { ScbSubMenu as Fr } from "./scb-menu/scb-sub-menu.js";
-import { ScbNotificationCard as Pr } from "./scb-notification-card/scb-notification-card.js";
-import { ScbPagination as Gr } from "./scb-pagination/scb-pagination.js";
-import { ScbProgressIndicator as Ar } from "./scb-progress-indicator/scb-progress-indicator.js";
-import { ScbProgressStep as Mr } from "./scb-progress-stepper/scb-progress-step.js";
-import { ScbProgressStepper as zr } from "./scb-progress-stepper/scb-progress-stepper.js";
-import { ScbRadioButton as Kr } from "./scb-radio-button/scb-radio-button.js";
-import { ScbRadioGroup as Or } from "./scb-radio-button/scb-radio-group.js";
-import { ScbSearch as Vr } from "./scb-search/scb-search.js";
-import { ScbSegmentedButton as qr } from "./scb-segmented-button/scb-segmented-button.js";
-import { ScbSegmentedItem as Jr } from "./scb-segmented-button/scb-segmented-item.js";
-import { ScbSelectOption as Wr } from "./scb-select/scb-select-option.js";
-import { ScbSelect as Yr } from "./scb-select/scb-select.js";
-import { ScbSkeleton as _r } from "./scb-skeleton/scb-skeleton.js";
-import { ScbSnackbar as ro } from "./scb-snackbar/scb-snackbar.js";
-import { ScbStatusPill as eo } from "./scb-status-pill/scb-status-pill.js";
-import { ScbStep as co } from "./scb-stepper/scb-step.js";
-import { ScbStepper as mo } from "./scb-stepper/scb-stepper.js";
-import { ScbSwitch as bo } from "./scb-switch/scb-switch.js";
-import { ScbPrimaryTab as fo } from "./scb-tabs/scb-primary-tab.js";
-import { ScbSecondaryTab as io } from "./scb-tabs/scb-secondary-tab.js";
-import { ScbTabs as uo } from "./scb-tabs/scb-tabs.js";
-import { ScbTextField as Co } from "./scb-textfield/scb-textfield.js";
-import { ScbTocItem as so } from "./scb-toc/scb-toc-item.js";
-import { ScbToc as go } from "./scb-toc/scb-toc.js";
-import { ScbTooltip as To } from "./scb-tooltip/scb-tooltip.js";
-import { ScbViz as ko } from "./scb-viz/scb-viz.js";
+import { ScbDatepicker as P } from "./scb-datepicker/scb-datepicker.js";
+import { ScbDialog as G } from "./scb-dialog/scb-dialog.js";
+import { ScbDivider as A } from "./scb-divider/scb-divider.js";
+import { ScbDrawerItem as M } from "./scb-drawer/scb-drawer-item.js";
+import { ScbDrawerSection as z } from "./scb-drawer/scb-drawer-section.js";
+import { ScbDrawer as K } from "./scb-drawer/scb-drawer.js";
+import { ScbSubDrawer as O } from "./scb-drawer/scb-sub-drawer.js";
+import { ScbFactCardContent as V } from "./scb-fact-card/scb-fact-card-content.js";
+import { ScbFactCard as q } from "./scb-fact-card/scb-fact-card.js";
+import { ScbFooterSection as J } from "./scb-footer/scb-footer-section.js";
+import { ScbFooter as W } from "./scb-footer/scb-footer.js";
+import { ScbGridItem as Y } from "./scb-grid/scb-grid-item.js";
+import { ScbGrid as _ } from "./scb-grid/scb-grid.js";
+import { ScbStack as rr } from "./scb-grid/scb-stack.js";
+import { ScbHeaderDrawerGroup as er } from "./scb-header/scb-header-drawer-group.js";
+import { ScbHeaderDrawerItem as cr } from "./scb-header/scb-header-drawer-item.js";
+import { ScbHeaderTab as pr } from "./scb-header/scb-header-tab.js";
+import { ScbHeaderUtility as br } from "./scb-header/scb-header-utility.js";
+import { ScbHeader as fr } from "./scb-header/scb-header.js";
+import { ScbHorizontalScroller as ir } from "./scb-horizontal-scroller/scb-horizontal-scroller.js";
+import { ScbIconButton as nr } from "./scb-icon-button/scb-icon-button.js";
+import { ScbKeyFigureCard as lr } from "./scb-keyfigure-card/scb-keyfigure-card.js";
+import { ScbLink as Ir } from "./scb-link/scb-link.js";
+import { ScbListItem as Br } from "./scb-list/scb-list-item.js";
+import { ScbList as Dr } from "./scb-list/scb-list.js";
+import { ScbMenuItem as kr } from "./scb-menu/scb-menu-item.js";
+import { ScbMenu as Fr } from "./scb-menu/scb-menu.js";
+import { ScbSubMenu as Pr } from "./scb-menu/scb-sub-menu.js";
+import { ScbNotificationCard as Gr } from "./scb-notification-card/scb-notification-card.js";
+import { ScbPagination as Ar } from "./scb-pagination/scb-pagination.js";
+import { ScbProgressIndicator as Mr } from "./scb-progress-indicator/scb-progress-indicator.js";
+import { ScbProgressStep as zr } from "./scb-progress-stepper/scb-progress-step.js";
+import { ScbProgressStepper as Kr } from "./scb-progress-stepper/scb-progress-stepper.js";
+import { ScbRadioButton as Or } from "./scb-radio-button/scb-radio-button.js";
+import { ScbRadioGroup as Vr } from "./scb-radio-button/scb-radio-group.js";
+import { ScbSearch as qr } from "./scb-search/scb-search.js";
+import { ScbSegmentedButton as Jr } from "./scb-segmented-button/scb-segmented-button.js";
+import { ScbSegmentedItem as Wr } from "./scb-segmented-button/scb-segmented-item.js";
+import { ScbSelectOption as Yr } from "./scb-select/scb-select-option.js";
+import { ScbSelect as _r } from "./scb-select/scb-select.js";
+import { ScbSkeleton as ro } from "./scb-skeleton/scb-skeleton.js";
+import { ScbSnackbar as eo } from "./scb-snackbar/scb-snackbar.js";
+import { ScbStatusPill as co } from "./scb-status-pill/scb-status-pill.js";
+import { ScbStep as po } from "./scb-stepper/scb-step.js";
+import { ScbStepper as bo } from "./scb-stepper/scb-stepper.js";
+import { ScbSwitch as fo } from "./scb-switch/scb-switch.js";
+import { ScbPrimaryTab as io } from "./scb-tabs/scb-primary-tab.js";
+import { ScbSecondaryTab as uo } from "./scb-tabs/scb-secondary-tab.js";
+import { ScbTabs as Co } from "./scb-tabs/scb-tabs.js";
+import { ScbTextField as so } from "./scb-textfield/scb-textfield.js";
+import { ScbTocItem as go } from "./scb-toc/scb-toc-item.js";
+import { ScbToc as To } from "./scb-toc/scb-toc.js";
+import { ScbTooltip as wo } from "./scb-tooltip/scb-tooltip.js";
+import { ScbViz as Ho } from "./scb-viz/scb-viz.js";
 export {
   n as SCBBreadcrumb,
   i as SCBBreadcrumbItem,
   c as ScbAccordion,
   e as ScbAccordionItem,
-  m as ScbAppBar,
+  p as ScbAppBar,
   b as ScbAvatar,
   f as ScbBadge,
   l as ScbButton,
   I as ScbCalendarCard,
   B as ScbCard,
-  w as ScbCheckbox,
+  k as ScbCheckbox,
   D as ScbCheckboxGroup,
   F as ScbChip,
-  P as ScbDialog,
-  G as ScbDivider,
-  z as ScbDrawer,
-  A as ScbDrawerItem,
-  M as ScbDrawerSection,
-  V as ScbFactCard,
-  O as ScbFactCardContent,
-  J as ScbFooter,
-  q as ScbFooterSection,
-  Y as ScbGrid,
-  W as ScbGridItem,
-  br as ScbHeader,
-  rr as ScbHeaderDrawerGroup,
-  er as ScbHeaderDrawerItem,
-  cr as ScbHeaderTab,
-  mr as ScbHeaderUtility,
-  fr as ScbHorizontalScroller,
-  ir as ScbIconButton,
-  nr as ScbKeyFigureCard,
-  lr as ScbLink,
-  Br as ScbList,
-  Ir as ScbListItem,
-  wr as ScbMenu,
-  Dr as ScbMenuItem,
-  Pr as ScbNotificationCard,
-  Gr as ScbPagination,
-  fo as ScbPrimaryTab,
-  Ar as ScbProgressIndicator,
-  Mr as ScbProgressStep,
-  zr as ScbProgressStepper,
-  Kr as ScbRadioButton,
-  Or as ScbRadioGroup,
-  Vr as ScbSearch,
-  io as ScbSecondaryTab,
-  qr as ScbSegmentedButton,
-  Jr as ScbSegmentedItem,
-  Yr as ScbSelect,
-  Wr as ScbSelectOption,
-  _r as ScbSkeleton,
-  ro as ScbSnackbar,
-  _ as ScbStack,
-  eo as ScbStatusPill,
-  co as ScbStep,
-  mo as ScbStepper,
-  K as ScbSubDrawer,
-  Fr as ScbSubMenu,
-  bo as ScbSwitch,
-  uo as ScbTabs,
-  Co as ScbTextField,
-  go as ScbToc,
-  so as ScbTocItem,
-  To as ScbTooltip,
-  ko as ScbViz
+  P as ScbDatepicker,
+  G as ScbDialog,
+  A as ScbDivider,
+  K as ScbDrawer,
+  M as ScbDrawerItem,
+  z as ScbDrawerSection,
+  q as ScbFactCard,
+  V as ScbFactCardContent,
+  W as ScbFooter,
+  J as ScbFooterSection,
+  _ as ScbGrid,
+  Y as ScbGridItem,
+  fr as ScbHeader,
+  er as ScbHeaderDrawerGroup,
+  cr as ScbHeaderDrawerItem,
+  pr as ScbHeaderTab,
+  br as ScbHeaderUtility,
+  ir as ScbHorizontalScroller,
+  nr as ScbIconButton,
+  lr as ScbKeyFigureCard,
+  Ir as ScbLink,
+  Dr as ScbList,
+  Br as ScbListItem,
+  Fr as ScbMenu,
+  kr as ScbMenuItem,
+  Gr as ScbNotificationCard,
+  Ar as ScbPagination,
+  io as ScbPrimaryTab,
+  Mr as ScbProgressIndicator,
+  zr as ScbProgressStep,
+  Kr as ScbProgressStepper,
+  Or as ScbRadioButton,
+  Vr as ScbRadioGroup,
+  qr as ScbSearch,
+  uo as ScbSecondaryTab,
+  Jr as ScbSegmentedButton,
+  Wr as ScbSegmentedItem,
+  _r as ScbSelect,
+  Yr as ScbSelectOption,
+  ro as ScbSkeleton,
+  eo as ScbSnackbar,
+  rr as ScbStack,
+  co as ScbStatusPill,
+  po as ScbStep,
+  bo as ScbStepper,
+  O as ScbSubDrawer,
+  Pr as ScbSubMenu,
+  fo as ScbSwitch,
+  Co as ScbTabs,
+  so as ScbTextField,
+  To as ScbToc,
+  go as ScbTocItem,
+  wo as ScbTooltip,
+  Ho as ScbViz
 };

package/mvc/components/all.js

@@ -11,6 +11,7 @@ import './scb-card/scb-card.js';
 import './scb-checkbox/scb-checkbox.js';
 import './scb-checkbox/scb-checkbox-group.js';
 import './scb-chip/scb-chip.js';
+import './scb-datepicker/scb-datepicker.js';
 import './scb-dialog/scb-dialog.js';
 import './scb-divider/scb-divider.js';
 import './scb-drawer/scb-drawer.js';

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

@@ -0,0 +1,254 @@
+import{a as g,r as h,n as p,i as w,x as i,t as m}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(a,c,s){try{customElements.get(a)||t(a,c,s)}catch(n){var o=String(n||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var v=Object.defineProperty,_=Object.getOwnPropertyDescriptor,l=(e,t,a,c)=>{for(var s=c>1?void 0:c?_(t,a):t,o=e.length-1,n;o>=0;o--)(n=e[o])&&(s=(c?n(t,a,s):n(s))||s);return c&&s&&v(t,a,s),s};let d=class extends w{constructor(){super(...arguments),this._currentDate=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 a=new Date(e,t,1),c=new Date(e,t+1,0),s=[];let o=[],n=(a.getDay()+6)%7;for(let r=0;r<n;r++)o.push(null);for(let r=1;r<=c.getDate();r++){const u=new Date(e,t,r);o.push(u),o.length===7&&(s.push(o),o=[])}if(o.length){for(;o.length<7;)o.push(null);s.push(o)}return s}render(){if(!this.open)return i``;const e=this._currentDate.getFullYear(),t=this._currentDate.getMonth(),a=new Date,c=this._getMonthDays(e,t),s=Array.from({length:101},(o,n)=>a.getFullYear()-50+n);return i`
+      <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?i`<scb-divider></scb-divider>`:""}
+        <div class="datepicker-content" style="position:relative;">
+          ${this._showMonthDropdown?i`
+            <div class="dropdown-list">
+              ${this._monthNames.map((o,n)=>i`
+                <div
+                    @keydown=${r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),this._onMonthChangeCustom(n))}}
+                  tabindex="0"
+                  class="dropdown-item${n===t?" selected":""}"
+                  @click=${()=>this._onMonthChangeCustom(n)}
+                  id=${n===t?"selected-month":""}
+                >
+                ${n===t?i`<md-icon>check</md-icon>`:""}
+                  ${o}
+                  <md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
+                </div>
+              `)}
+            </div>
+          `:""}
+          ${this._showYearDropdown?i`
+            <div class="dropdown-list">
+              ${s.map(o=>i`
+                <div
+                @keydown=${n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this._onYearChangeCustom(o))}}
+                  tabindex="0"
+                  class="dropdown-item${o===e?" selected":""}"
+                  @click=${()=>this._onYearChangeCustom(o)}
+                  id=${o===e?"selected-year":""}
+                >
+                ${o===e?i`<md-icon>check</md-icon>`:""}
+                  ${o}
+                  <md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
+                </div>
+              `)}
+            </div>
+          `:""}
+          ${!this._showMonthDropdown&&!this._showYearDropdown?i`
+            <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>
+                ${c.map(o=>i`
+                  <tr>
+                    ${o.map(n=>n?i`
+                      <td>
+                        <div
+                        @keydown=${r=>{(r.key==="Enter"||r.key===" ")&&(r.preventDefault(),this._selectDate(n))}}
+                            role="button"
+                            tabindex="0"
+                          class="day${this._isToday(n,a)?" today":""}${this._isSelected(n)?" selected":""}"
+                          @click=${()=>this._selectDate(n)}
+                        >${n.getDate()}<md-ripple></md-ripple><md-focus-ring></md-focus-ring></div>
+                      </td>
+                    `:i`<td></td>`)}
+                  </tr>
+                `)}
+              </tbody>
+            </table>
+            </div>
+          `:""}
+        </div>
+        <div class="datepicker-footer">
+        ${!this._showMonthDropdown&&!this._showYearDropdown?i`
+            <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}))}};d.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);
+      }
+    `];l([h()],d.prototype,"_currentDate",2);l([h()],d.prototype,"_selectedDate",2);l([h()],d.prototype,"_showMonthDropdown",2);l([h()],d.prototype,"_showYearDropdown",2);l([p({type:String})],d.prototype,"variant",2);l([p({type:String})],d.prototype,"lang",2);l([p({type:String})],d.prototype,"selectedValue",2);l([p({type:Boolean})],d.prototype,"open",2);d=l([m("scb-datepicker")],d);

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

@@ -1,4 +1,4 @@
-import{a as u,n as s,i as h,E as p,x as r,t as m}from"../../vendor/vendor.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-textfield/scb-textfield.js";import"../scb-checkbox/scb-checkbox.js";import"../scb-radio-button/scb-radio-button.js";import"../scb-switch/scb-switch.js";import"../scb-chip/scb-chip.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-checkbox/scb-checkbox-group.js";import"../scb-radio-button/scb-radio-group.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(n,c,a){try{customElements.get(n)||e(n,c,a)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,o=(t,e,n,c)=>{for(var a=c>1?void 0:c?f(e,n):e,l=t.length-1,d;l>=0;l--)(d=t[l])&&(a=(c?d(e,n,a):d(a))||a);return c&&a&&b(e,n,a),a};let i=class extends h{constructor(){super(...arguments),this.open=!1,this.inSb=!1,this.scrimClose=!0,this.variant="basic",this.label="",this.icon="",this.supportingText="",this.okButton="OK",this.cancelButton="Avbryt",this.deleteButton="Delete",this.confirmButton="Ta bort",this.denyButton="Avbryt",this.resetButton="Återställ",this.submitButton="Spara",this.formId="",this.formAction="",this.formMethod="",this.__lastTriggerEl=null,this.__onDocumentClick=t=>{this.__getActionFromEvent(t)==="toggle"&&(this.__setOpen(!this.open),t.stopPropagation())},this.__onDocumentKeydown=t=>{this.open&&t.key==="Escape"&&(this.__fire("esc"),this.__setOpen(!1))},this.__onScrimClick=()=>{this.scrimClose&&(this.__fire("scrim"),this.__setOpen(!1))},this.__onOk=()=>{this.__fire("ok"),this.__setOpen(!1)},this.__onCancel=()=>{this.__fire("cancel"),this.__setOpen(!1)},this.__onConfirm=()=>{this.__fire("confirm"),this.__setOpen(!1)},this.__onDeny=()=>{this.__fire("deny"),this.__setOpen(!1)},this.__onReset=()=>{this.shadowRoot?.querySelector("form")?.reset(),(this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??[]).forEach(e=>{const n=e.tagName;n==="SCB-TEXTFIELD"&&(e.value=""),n==="SCB-CHECKBOX"&&(e.checked=!1),n==="SCB-RADIO-BUTTON"&&(e.checked=!1),n==="SCB-SWITCH"&&(e.selected=!1),n==="SCB-CHIP"&&(e.selected=!1)}),this.__fire("reset")},this.__onSubmit=()=>{this.shadowRoot?.querySelector("form")?.requestSubmit(),this.__fire("submit"),this.__setOpen(!1)},this.__onKeydownTrap=t=>{if(!this.open||t.key!=="Tab")return;const e=Array.from(this.shadowRoot.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])')).filter(a=>!a.hasAttribute("disabled"));if(!e.length)return;const n=e[0],c=e[e.length-1];t.shiftKey&&document.activeElement===n?(c.focus(),t.preventDefault()):!t.shiftKey&&document.activeElement===c&&(n.focus(),t.preventDefault())}}__getActionFromEvent(t){if(!this.id)return null;for(const e of t.composedPath())if(e instanceof Element){if(e.getAttribute("data-dialog-toggle")===this.id)return this.__lastTriggerEl=e,"toggle";if(e.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=e,"toggle"}return null}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.__onDocumentClick,!1),document.addEventListener("keydown",this.__onDocumentKeydown,!0),this.addEventListener("keydown",this.__onKeydownTrap)}disconnectedCallback(){document.removeEventListener("click",this.__onDocumentClick,!1),document.removeEventListener("keydown",this.__onDocumentKeydown,!0),this.removeEventListener("keydown",this.__onKeydownTrap),super.disconnectedCallback()}updated(t){if(t.has("open")){const e=t.get("open");this.__updateTriggersExpanded(),this.open&&!e?this.updateComplete.then(()=>{this.shadowRoot?.querySelector('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])')?.focus?.()}):!this.open&&e&&this.__lastTriggerEl?.focus?.(),this.__toggleScrollLock(this.open)}}__updateTriggersExpanded(){this.id&&document.querySelectorAll(`[aria-controls="${this.id}"], [data-dialog-toggle="${this.id}"]`).forEach(t=>{t.hasAttribute("aria-controls")&&t.setAttribute("aria-expanded",String(this.open))})}__toggleScrollLock(t){if(this.inSb)return;const e=document.documentElement;e.style.overflow=t?"hidden":""}__setOpen(t){this.open=t,this.__fire(t?"open":"close")}__fire(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}__slotIsEmpty(){const t=this.shadowRoot?.querySelector("slot");return t?t.assignedElements({flatten:!0}).length===0:!0}renderHeader(t){const e=this.variant==="form"||this.variant==="floating";return r`
+import{a as u,n as s,i as h,E as p,x as r,t as m}from"../../vendor/vendor.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-textfield/scb-textfield.js";import"../scb-checkbox/scb-checkbox.js";import"../scb-radio-button/scb-radio-button.js";import"../scb-switch/scb-switch.js";import"../scb-chip/scb-chip.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-divider/scb-divider.js";import"../scb-checkbox/scb-checkbox-group.js";import"../scb-radio-button/scb-radio-group.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(n,c,a){try{customElements.get(n)||e(n,c,a)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var b=Object.defineProperty,f=Object.getOwnPropertyDescriptor,o=(t,e,n,c)=>{for(var a=c>1?void 0:c?f(e,n):e,l=t.length-1,d;l>=0;l--)(d=t[l])&&(a=(c?d(e,n,a):d(a))||a);return c&&a&&b(e,n,a),a};let i=class extends h{constructor(){super(...arguments),this.open=!1,this.inSb=!1,this.scrimClose=!0,this.variant="basic",this.label="",this.icon="",this.supportingText="",this.okButton="OK",this.cancelButton="Avbryt",this.deleteButton="Delete",this.confirmButton="Ta bort",this.denyButton="Avbryt",this.resetButton="Återställ",this.submitButton="Spara",this.formId="",this.formAction="",this.formMethod="",this.__lastTriggerEl=null,this.__onDocumentClick=t=>{this.__getActionFromEvent(t)==="toggle"&&(this.__setOpen(!this.open),t.stopPropagation())},this.__onDocumentKeydown=t=>{this.open&&t.key==="Escape"&&(this.__fire("esc"),this.__setOpen(!1))},this.__onScrimClick=()=>{this.scrimClose&&(this.__fire("scrim"),this.__setOpen(!1))},this.__onOk=()=>{this.__fire("ok"),this.__setOpen(!1)},this.__onCancel=()=>{this.__fire("cancel"),this.__setOpen(!1)},this.__onConfirm=()=>{this.__fire("confirm"),this.__setOpen(!1)},this.__onDeny=()=>{this.__fire("deny"),this.__setOpen(!1)},this.__onReset=()=>{this.shadowRoot?.querySelector("form")?.reset(),(this.shadowRoot?.querySelector("slot")?.assignedElements({flatten:!0})??[]).forEach(e=>{const n=e.tagName;n==="SCB-TEXTFIELD"&&(e.value=""),n==="SCB-CHECKBOX"&&(e.checked=!1),n==="SCB-RADIO-BUTTON"&&(e.checked=!1),n==="SCB-SWITCH"&&(e.selected=!1),n==="SCB-CHIP"&&(e.selected=!1)}),this.__fire("reset")},this.__onSubmit=()=>{this.shadowRoot?.querySelector("form")?.requestSubmit(),this.__fire("submit"),this.__setOpen(!1)},this.__onKeydownTrap=t=>{if(!this.open||t.key!=="Tab")return;const e=Array.from(this.shadowRoot.querySelectorAll('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])')).filter(a=>!a.hasAttribute("disabled"));if(!e.length)return;const n=e[0],c=e[e.length-1];t.shiftKey&&document.activeElement===n?(c.focus(),t.preventDefault()):!t.shiftKey&&document.activeElement===c&&(n.focus(),t.preventDefault())}}__getActionFromEvent(t){if(!this.id)return null;for(const e of t.composedPath())if(e instanceof Element){if(e.getAttribute("data-dialog-toggle")===this.id)return this.__lastTriggerEl=e,"toggle";if(e.getAttribute("aria-controls")===this.id)return this.__lastTriggerEl=e,"toggle"}return null}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.__onDocumentClick,!1),document.addEventListener("keydown",this.__onDocumentKeydown,!0),this.addEventListener("keydown",this.__onKeydownTrap)}disconnectedCallback(){document.removeEventListener("click",this.__onDocumentClick,!1),document.removeEventListener("keydown",this.__onDocumentKeydown,!0),this.removeEventListener("keydown",this.__onKeydownTrap),super.disconnectedCallback()}updated(t){if(t.has("open")){const e=t.get("open");this.__updateTriggersExpanded(),this.open&&!e?this.updateComplete.then(()=>{this.shadowRoot?.querySelector('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])')?.focus?.()}):!this.open&&e&&this.__lastTriggerEl?.focus?.(),this.__toggleScrollLock(this.open)}}__updateTriggersExpanded(){this.id&&document.querySelectorAll(`[aria-controls="${this.id}"], [data-dialog-toggle="${this.id}"]`).forEach(t=>{t.hasAttribute("aria-controls")&&t.setAttribute("aria-expanded",String(this.open))})}__toggleScrollLock(t){if(this.inSb)return;const e=document.documentElement;e.style.overflow=t?"hidden":""}__setOpen(t){this.open=t,this.__fire(t?"open":"close")}__fire(t,e){this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0}))}__slotIsEmpty(){const t=this.shadowRoot?.querySelector("slot");return t?t.assignedElements({flatten:!0}).length===0:!0}renderHeader(t){const e=this.variant==="form"||this.variant==="floating";return r`
       <div class="header">
         <div class="title">
           ${this.icon?r`<md-icon class="dialog-icon">${this.icon}</md-icon>`:p}