scb-wc-test 0.1.116 → 0.1.118

package/all.js

@@ -10,6 +10,8 @@ import './mvc/components/scb-badge/scb-badge.js';
 import './mvc/components/scb-breadcrumb/scb-breadcrumb-item.js';
 import './mvc/components/scb-breadcrumb/scb-breadcrumb.js';
 import './mvc/components/scb-button/scb-button.js';
+import './mvc/components/scb-calendar/scb-calendar-event.js';
+import './mvc/components/scb-calendar/scb-calendar.js';
 import './mvc/components/scb-calendar-card/scb-calendar-card.js';
 import './mvc/components/scb-card/scb-card.js';
 import './mvc/components/scb-checkbox/scb-checkbox-group.js';
@@ -83,6 +85,8 @@ import './scb-badge/scb-badge.js';
 import './scb-breadcrumb/scb-breadcrumb-item.js';
 import './scb-breadcrumb/scb-breadcrumb.js';
 import './scb-button/scb-button.js';
+import './scb-calendar/scb-calendar-event.js';
+import './scb-calendar/scb-calendar.js';
 import './scb-calendar-card/scb-calendar-card.js';
 import './scb-card/scb-card.js';
 import './scb-checkbox/scb-checkbox-group.js';

package/index.d.ts

@@ -6,6 +6,8 @@ export * from './scb-badge/scb-badge';
 export * from './scb-breadcrumb/scb-breadcrumb-item';
 export * from './scb-breadcrumb/scb-breadcrumb';
 export * from './scb-button/scb-button';
+export * from './scb-calendar/scb-calendar-event';
+export * from './scb-calendar/scb-calendar';
 export * from './scb-calendar-card/scb-calendar-card';
 export * from './scb-card/scb-card';
 export * from './scb-checkbox/scb-checkbox-group';

package/index.js

@@ -5,67 +5,69 @@ 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";
 import { SCBBreadcrumb as d } from "./scb-breadcrumb/scb-breadcrumb.js";
-import { ScbButton as C } from "./scb-button/scb-button.js";
-import { ScbCalendarCard as s } 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 T } from "./scb-checkbox/scb-checkbox.js";
-import { ScbChip as F } from "./scb-chip/scb-chip.js";
-import { ScbCookiesConsent as P } from "./scb-cookies-consent/scb-cookies-consent.js";
-import { ScbDatepicker as G } from "./scb-datepicker/scb-datepicker.js";
-import { ScbDialog as A } from "./scb-dialog/scb-dialog.js";
-import { ScbDivider as M } from "./scb-divider/scb-divider.js";
-import { ScbDrawerItem as z } from "./scb-drawer/scb-drawer-item.js";
-import { ScbDrawerSection as K } from "./scb-drawer/scb-drawer-section.js";
-import { ScbDrawer as O } from "./scb-drawer/scb-drawer.js";
-import { ScbSubDrawer as V } from "./scb-drawer/scb-sub-drawer.js";
-import { ScbFactCardContent as q } from "./scb-fact-card/scb-fact-card-content.js";
-import { ScbFactCard as J } from "./scb-fact-card/scb-fact-card.js";
-import { ScbFooterSection as W } from "./scb-footer/scb-footer-section.js";
-import { ScbFooter as Y } from "./scb-footer/scb-footer.js";
-import { ScbGridItem as _ } from "./scb-grid/scb-grid-item.js";
-import { ScbGrid as rr } from "./scb-grid/scb-grid.js";
-import { ScbStack as er } from "./scb-grid/scb-stack.js";
-import { ScbHeaderDrawerGroup as cr } from "./scb-header/scb-header-drawer-group.js";
-import { ScbHeaderDrawerItem as pr } from "./scb-header/scb-header-drawer-item.js";
-import { ScbHeaderTab as br } from "./scb-header/scb-header-tab.js";
-import { ScbHeaderUtility as fr } from "./scb-header/scb-header-utility.js";
-import { ScbHeader as ir } from "./scb-header/scb-header.js";
-import { ScbHorizontalScroller as dr } from "./scb-horizontal-scroller/scb-horizontal-scroller.js";
-import { ScbIconButton as Cr } from "./scb-icon-button/scb-icon-button.js";
-import { ScbKeyFigureCard as sr } from "./scb-keyfigure-card/scb-keyfigure-card.js";
-import { ScbLink as Br } from "./scb-link/scb-link.js";
-import { ScbListItem as Dr } from "./scb-list/scb-list-item.js";
-import { ScbList as Tr } from "./scb-list/scb-list.js";
-import { ScbMenuItem as Fr } from "./scb-menu/scb-menu-item.js";
-import { ScbMenu as Pr } from "./scb-menu/scb-menu.js";
-import { ScbSubMenu as Gr } from "./scb-menu/scb-sub-menu.js";
-import { ScbNotificationCard as Ar } from "./scb-notification-card/scb-notification-card.js";
-import { ScbPagination as Mr } from "./scb-pagination/scb-pagination.js";
-import { ScbProgressIndicator as zr } from "./scb-progress-indicator/scb-progress-indicator.js";
-import { ScbProgressStep as Kr } from "./scb-progress-stepper/scb-progress-step.js";
-import { ScbProgressStepper as Or } from "./scb-progress-stepper/scb-progress-stepper.js";
-import { ScbRadioButton as Vr } from "./scb-radio-button/scb-radio-button.js";
-import { ScbRadioGroup as qr } from "./scb-radio-button/scb-radio-group.js";
-import { ScbSearch as Jr } from "./scb-search/scb-search.js";
-import { ScbSegmentedButton as Wr } from "./scb-segmented-button/scb-segmented-button.js";
-import { ScbSegmentedItem as Yr } from "./scb-segmented-button/scb-segmented-item.js";
-import { ScbSelectOption as _r } from "./scb-select/scb-select-option.js";
-import { ScbSelect as ro } from "./scb-select/scb-select.js";
-import { ScbSkeleton as eo } from "./scb-skeleton/scb-skeleton.js";
-import { ScbSnackbar as co } from "./scb-snackbar/scb-snackbar.js";
-import { ScbStatusPill as po } from "./scb-status-pill/scb-status-pill.js";
-import { ScbStep as bo } from "./scb-stepper/scb-step.js";
-import { ScbStepper as fo } from "./scb-stepper/scb-stepper.js";
-import { ScbSwitch as io } from "./scb-switch/scb-switch.js";
-import { ScbPrimaryTab as uo } from "./scb-tabs/scb-primary-tab.js";
-import { ScbSecondaryTab as lo } from "./scb-tabs/scb-secondary-tab.js";
-import { ScbTabs as Io } from "./scb-tabs/scb-tabs.js";
-import { ScbTextField as go } from "./scb-textfield/scb-textfield.js";
-import { ScbTocItem as ko } from "./scb-toc/scb-toc-item.js";
-import { ScbToc as wo } from "./scb-toc/scb-toc.js";
-import { ScbTooltip as Ho } from "./scb-tooltip/scb-tooltip.js";
-import { ScbViz as ho } from "./scb-viz/scb-viz.js";
+import { ScbButton as u } from "./scb-button/scb-button.js";
+import { ScbCalendarEvent as s } from "./scb-calendar/scb-calendar-event.js";
+import { ScbCalendar as B } from "./scb-calendar/scb-calendar.js";
+import { ScbCalendarCard as D } from "./scb-calendar-card/scb-calendar-card.js";
+import { ScbCard as T } from "./scb-card/scb-card.js";
+import { ScbCheckboxGroup as F } from "./scb-checkbox/scb-checkbox-group.js";
+import { ScbCheckbox as P } from "./scb-checkbox/scb-checkbox.js";
+import { ScbChip as G } from "./scb-chip/scb-chip.js";
+import { ScbCookiesConsent as A } from "./scb-cookies-consent/scb-cookies-consent.js";
+import { ScbDatepicker as L } from "./scb-datepicker/scb-datepicker.js";
+import { ScbDialog as z } from "./scb-dialog/scb-dialog.js";
+import { ScbDivider as E } from "./scb-divider/scb-divider.js";
+import { ScbDrawerItem as N } from "./scb-drawer/scb-drawer-item.js";
+import { ScbDrawerSection as U } from "./scb-drawer/scb-drawer-section.js";
+import { ScbDrawer as j } from "./scb-drawer/scb-drawer.js";
+import { ScbSubDrawer as J } from "./scb-drawer/scb-sub-drawer.js";
+import { ScbFactCardContent as W } from "./scb-fact-card/scb-fact-card-content.js";
+import { ScbFactCard as Y } from "./scb-fact-card/scb-fact-card.js";
+import { ScbFooterSection as _ } from "./scb-footer/scb-footer-section.js";
+import { ScbFooter as rr } from "./scb-footer/scb-footer.js";
+import { ScbGridItem as er } from "./scb-grid/scb-grid-item.js";
+import { ScbGrid as cr } from "./scb-grid/scb-grid.js";
+import { ScbStack as pr } from "./scb-grid/scb-stack.js";
+import { ScbHeaderDrawerGroup as br } from "./scb-header/scb-header-drawer-group.js";
+import { ScbHeaderDrawerItem as fr } from "./scb-header/scb-header-drawer-item.js";
+import { ScbHeaderTab as ir } from "./scb-header/scb-header-tab.js";
+import { ScbHeaderUtility as dr } from "./scb-header/scb-header-utility.js";
+import { ScbHeader as ur } from "./scb-header/scb-header.js";
+import { ScbHorizontalScroller as sr } from "./scb-horizontal-scroller/scb-horizontal-scroller.js";
+import { ScbIconButton as Br } from "./scb-icon-button/scb-icon-button.js";
+import { ScbKeyFigureCard as Dr } from "./scb-keyfigure-card/scb-keyfigure-card.js";
+import { ScbLink as Tr } from "./scb-link/scb-link.js";
+import { ScbListItem as Fr } from "./scb-list/scb-list-item.js";
+import { ScbList as Pr } from "./scb-list/scb-list.js";
+import { ScbMenuItem as Gr } from "./scb-menu/scb-menu-item.js";
+import { ScbMenu as Ar } from "./scb-menu/scb-menu.js";
+import { ScbSubMenu as Lr } from "./scb-menu/scb-sub-menu.js";
+import { ScbNotificationCard as zr } from "./scb-notification-card/scb-notification-card.js";
+import { ScbPagination as Er } from "./scb-pagination/scb-pagination.js";
+import { ScbProgressIndicator as Nr } from "./scb-progress-indicator/scb-progress-indicator.js";
+import { ScbProgressStep as Ur } from "./scb-progress-stepper/scb-progress-step.js";
+import { ScbProgressStepper as jr } from "./scb-progress-stepper/scb-progress-stepper.js";
+import { ScbRadioButton as Jr } from "./scb-radio-button/scb-radio-button.js";
+import { ScbRadioGroup as Wr } from "./scb-radio-button/scb-radio-group.js";
+import { ScbSearch as Yr } from "./scb-search/scb-search.js";
+import { ScbSegmentedButton as _r } from "./scb-segmented-button/scb-segmented-button.js";
+import { ScbSegmentedItem as ro } from "./scb-segmented-button/scb-segmented-item.js";
+import { ScbSelectOption as eo } from "./scb-select/scb-select-option.js";
+import { ScbSelect as co } from "./scb-select/scb-select.js";
+import { ScbSkeleton as po } from "./scb-skeleton/scb-skeleton.js";
+import { ScbSnackbar as bo } from "./scb-snackbar/scb-snackbar.js";
+import { ScbStatusPill as fo } from "./scb-status-pill/scb-status-pill.js";
+import { ScbStep as io } from "./scb-stepper/scb-step.js";
+import { ScbStepper as Co } from "./scb-stepper/scb-stepper.js";
+import { ScbSwitch as lo } from "./scb-switch/scb-switch.js";
+import { ScbPrimaryTab as Io } from "./scb-tabs/scb-primary-tab.js";
+import { ScbSecondaryTab as go } from "./scb-tabs/scb-secondary-tab.js";
+import { ScbTabs as ko } from "./scb-tabs/scb-tabs.js";
+import { ScbTextField as wo } from "./scb-textfield/scb-textfield.js";
+import { ScbTocItem as Ho } from "./scb-toc/scb-toc-item.js";
+import { ScbToc as ho } from "./scb-toc/scb-toc.js";
+import { ScbTooltip as yo } from "./scb-tooltip/scb-tooltip.js";
+import { ScbViz as vo } from "./scb-viz/scb-viz.js";
 export {
   d as SCBBreadcrumb,
   i as SCBBreadcrumbItem,
@@ -74,65 +76,67 @@ export {
   p as ScbAppBar,
   b as ScbAvatar,
   f as ScbBadge,
-  C as ScbButton,
-  s as ScbCalendarCard,
-  B as ScbCard,
-  T as ScbCheckbox,
-  D as ScbCheckboxGroup,
-  F as ScbChip,
-  P as ScbCookiesConsent,
-  G as ScbDatepicker,
-  A as ScbDialog,
-  M as ScbDivider,
-  O as ScbDrawer,
-  z as ScbDrawerItem,
-  K as ScbDrawerSection,
-  J as ScbFactCard,
-  q as ScbFactCardContent,
-  Y as ScbFooter,
-  W as ScbFooterSection,
-  rr as ScbGrid,
-  _ as ScbGridItem,
-  ir as ScbHeader,
-  cr as ScbHeaderDrawerGroup,
-  pr as ScbHeaderDrawerItem,
-  br as ScbHeaderTab,
-  fr as ScbHeaderUtility,
-  dr as ScbHorizontalScroller,
-  Cr as ScbIconButton,
-  sr as ScbKeyFigureCard,
-  Br as ScbLink,
-  Tr as ScbList,
-  Dr as ScbListItem,
-  Pr as ScbMenu,
-  Fr as ScbMenuItem,
-  Ar as ScbNotificationCard,
-  Mr as ScbPagination,
-  uo as ScbPrimaryTab,
-  zr as ScbProgressIndicator,
-  Kr as ScbProgressStep,
-  Or as ScbProgressStepper,
-  Vr as ScbRadioButton,
-  qr as ScbRadioGroup,
-  Jr as ScbSearch,
-  lo as ScbSecondaryTab,
-  Wr as ScbSegmentedButton,
-  Yr as ScbSegmentedItem,
-  ro as ScbSelect,
-  _r as ScbSelectOption,
-  eo as ScbSkeleton,
-  co as ScbSnackbar,
-  er as ScbStack,
-  po as ScbStatusPill,
-  bo as ScbStep,
-  fo as ScbStepper,
-  V as ScbSubDrawer,
-  Gr as ScbSubMenu,
-  io as ScbSwitch,
-  Io as ScbTabs,
-  go as ScbTextField,
-  wo as ScbToc,
-  ko as ScbTocItem,
-  Ho as ScbTooltip,
-  ho as ScbViz
+  u as ScbButton,
+  B as ScbCalendar,
+  D as ScbCalendarCard,
+  s as ScbCalendarEvent,
+  T as ScbCard,
+  P as ScbCheckbox,
+  F as ScbCheckboxGroup,
+  G as ScbChip,
+  A as ScbCookiesConsent,
+  L as ScbDatepicker,
+  z as ScbDialog,
+  E as ScbDivider,
+  j as ScbDrawer,
+  N as ScbDrawerItem,
+  U as ScbDrawerSection,
+  Y as ScbFactCard,
+  W as ScbFactCardContent,
+  rr as ScbFooter,
+  _ as ScbFooterSection,
+  cr as ScbGrid,
+  er as ScbGridItem,
+  ur as ScbHeader,
+  br as ScbHeaderDrawerGroup,
+  fr as ScbHeaderDrawerItem,
+  ir as ScbHeaderTab,
+  dr as ScbHeaderUtility,
+  sr as ScbHorizontalScroller,
+  Br as ScbIconButton,
+  Dr as ScbKeyFigureCard,
+  Tr as ScbLink,
+  Pr as ScbList,
+  Fr as ScbListItem,
+  Ar as ScbMenu,
+  Gr as ScbMenuItem,
+  zr as ScbNotificationCard,
+  Er as ScbPagination,
+  Io as ScbPrimaryTab,
+  Nr as ScbProgressIndicator,
+  Ur as ScbProgressStep,
+  jr as ScbProgressStepper,
+  Jr as ScbRadioButton,
+  Wr as ScbRadioGroup,
+  Yr as ScbSearch,
+  go as ScbSecondaryTab,
+  _r as ScbSegmentedButton,
+  ro as ScbSegmentedItem,
+  co as ScbSelect,
+  eo as ScbSelectOption,
+  po as ScbSkeleton,
+  bo as ScbSnackbar,
+  pr as ScbStack,
+  fo as ScbStatusPill,
+  io as ScbStep,
+  Co as ScbStepper,
+  J as ScbSubDrawer,
+  Lr as ScbSubMenu,
+  lo as ScbSwitch,
+  ko as ScbTabs,
+  wo as ScbTextField,
+  ho as ScbToc,
+  Ho as ScbTocItem,
+  yo as ScbTooltip,
+  vo as ScbViz
 };

package/mvc/components/all.js

@@ -7,6 +7,8 @@ import './scb-breadcrumb/scb-breadcrumb.js';
 import './scb-breadcrumb/scb-breadcrumb-item.js';
 import './scb-button/scb-button.js';
 import './scb-calendar-card/scb-calendar-card.js';
+import './scb-calendar/scb-calendar.js';
+import './scb-calendar/scb-calendar-event.js';
 import './scb-card/scb-card.js';
 import './scb-checkbox/scb-checkbox.js';
 import './scb-checkbox/scb-checkbox-group.js';

package/mvc/components/scb-calendar/scb-calendar-event.js

@@ -0,0 +1,12 @@
+import{a as p,n as d,i as c,x as f,t as _}from"../../vendor/vendor.js";(function(){try{var a=typeof globalThis<"u"?globalThis:window;if(!a.__scb_ce_guard_installed__){a.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(e,i,t){try{customElements.get(e)||r(e,i,t)}catch(n){var s=String(n||"");if(s.indexOf("already been used")===-1&&s.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var u=Object.defineProperty,h=Object.getOwnPropertyDescriptor,l=(a,r,e,i)=>{for(var t=i>1?void 0:i?h(r,e):r,s=a.length-1,n;s>=0;s--)(n=a[s])&&(t=(i?n(r,e,t):n(t))||t);return i&&t&&u(r,e,t),t};let o=class extends c{constructor(){super(...arguments),this.title="",this.date="",this.description=""}render(){return f`
+      <div>
+        <h3>${this.title}</h3>
+        <p>${this.date}</p>
+        <p>${this.description}</p>
+      </div>
+    `}};o.styles=p`
+    :host {
+      display: block;
+      font-family: var(--brand-font, Arial, sans-serif)
+    }
+    `;l([d({type:String})],o.prototype,"title",2);l([d({type:String})],o.prototype,"date",2);l([d({type:String})],o.prototype,"description",2);o=l([_("scb-calendar-event")],o);

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

@@ -0,0 +1,123 @@
+import{a as x,n as m,i as w,x as d,t as $}from"../../vendor/vendor.js";import"./scb-calendar-event.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.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(n,s,a){try{customElements.get(n)||e(n,s,a)}catch(i){var l=String(i||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();var M=Object.defineProperty,D=Object.getOwnPropertyDescriptor,g=(t,e,n,s)=>{for(var a=s>1?void 0:s?D(e,n):e,l=t.length-1,i;l>=0;l--)(i=t[l])&&(a=(s?i(e,n,a):i(a))||a);return s&&a&&M(e,n,a),a};let v=class extends w{constructor(){super(...arguments),this.label="",this.value="",this._today=new Date,this._current=new Date,this._popupEvent=null}_daysInMonth(t,e){return new Date(t,e+1,0).getDate()}_firstDayOfWeek(t,e){return new Date(t,e,1).getDay()}_prevMonth(){this._current=new Date(this._current.getFullYear(),this._current.getMonth()-1,1),this.requestUpdate()}_nextMonth(){this._current=new Date(this._current.getFullYear(),this._current.getMonth()+1,1),this.requestUpdate()}_showEventPopup(t){this._popupEvent=t,this.requestUpdate(),setTimeout(()=>{const e=n=>{n.target?.closest(".event-popup")||this._closePopup()};window.addEventListener("mousedown",e,{once:!0})},0)}_closePopup(){this._popupEvent=null,this.requestUpdate()}render(){const t=this._current.getFullYear(),e=this._current.getMonth(),n=this._daysInMonth(t,e),s=this._firstDayOfWeek(t,e),a=this._today,l=Array.from(this.querySelectorAll("scb-calendar-event")),i=new Map;for(const r of l)if(r.date&&r.title){const p=i.get(r.date)||[];p.push({title:r.title,description:r.description}),i.set(r.date,p)}const f=[];let c=1;for(let r=0;r<6;r++){const p=[];for(let h=0;h<7;h++)if(r===0&&h<s){const b=e===0?11:e-1,y=e===0?t-1:t,u=this._daysInMonth(y,b)-(s-h-1);p.push(d`
+            <div class="calendar-day calendar-day--other">
+              <span class="calendar-day-number">${u}</span>
+            </div>
+          `)}else if(c>n)p.push(d`<div></div>`);else{const b=a.getFullYear()===t&&a.getMonth()===e&&a.getDate()===c,y=`${t}-${String(e+1).padStart(2,"0")}-${String(c).padStart(2,"0")}`,o=i.get(y)||[];p.push(d`
+            <div
+              class="calendar-day${b?" today":""}${o.length?" has-event":""}"
+              @click=${o.length?()=>this._showEventPopup({date:y,events:o}):null}
+              title=${o.length===1?o[0].title:o.length>1?o.map(u=>u.title).join(", "):""}
+            >
+              <span class="calendar-day-number">${c}</span>
+              <div class="calendar-titles-wrapper">
+              ${o.map(u=>d`<span class="calendar-day-event-title">${u.title}</span>`)}
+              </div>
+            </div>
+          `),c++}if(f.push(d`<div class="calendar-grid">${p}</div>`),c>n)break}const _=["Januari","Februari","Mars","April","Maj","Juni","Juli","Augusti","September","Oktober","November","December"];return d`
+      <div class="calendar-header">
+        <scb-icon-button @click=${this._prevMonth} icon="chevron_left" aria-label="Föregående månad"></scb-icon-button>
+        <span>${_[e]} ${t}</span>
+        <scb-icon-button @click=${this._nextMonth} icon="chevron_right" aria-label="Nästa månad"></scb-icon-button>
+      </div>
+      <div class="calendar-grid calendar-grid-days">
+        <div>Mån</div><div>Tis</div><div>Ons</div><div>Tor</div><div>Fre</div><div>Lör</div><div>Sön</div>
+      </div>
+      <div class="calendar-weeks">
+      ${f}
+      <div>
+      ${this._popupEvent&&Array.isArray(this._popupEvent.events)?d`
+        <div class="event-popup-backdrop" @click=${this._closePopup}></div>
+        <div class="event-popup">
+          <button class="close-btn" @click=${this._closePopup} title="Stäng">×</button>
+          <div>${this._popupEvent.date}</div>
+          <ul>
+            ${this._popupEvent.events.map(r=>d`<li><strong>${r.title}</strong>${r.description?d`<div>${r.description}</div>`:""}</li>`)}
+          </ul>
+        </div>
+      `:""}
+    `}};v.styles=x`
+    :host {
+      display: block;
+      font-family: var(--brand-font, Arial, sans-serif);
+      background: var(--md-sys-color-surface, #fff);
+      color: var(--md-sys-color-on-surface, #222);
+      border-radius: 12px;
+      border: var(--scb-elevation-2, 0 2px 8px rgba(0,0,0,0.08));
+      padding: 16px;
+    }
+    .calendar-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+        border-bottom: 1px solid rgb(224, 224, 224);
+        padding-bottom: 8px;
+    }
+    .calendar-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 4px;
+    margin-bottom: 4px;
+    }
+    .calendar-grid-days{
+        font-weight: 600;
+        margin-bottom: 16px;
+    }
+    .calendar-weeks {
+        display: grid;
+        grid-auto-rows: 1fr;
+    }
+    .calendar-titles-wrapper{
+        display: grid;
+        gap: 4px;
+    }
+    .calendar-day {
+      border-radius: 6px;
+      min-height: 3.2em;
+      display: flex;
+      padding: 8px;
+      box-sizing: border-box;
+      overflow: hidden;
+        gap: 8px;
+        border: 1px solid #e0e0e0;
+        flex-direction: column;
+    }
+    .calendar-day--other {
+      opacity: 0.4;
+    }
+    .calendar-day-number {
+      font-size: 1em;
+      line-height: 1.2;
+    }
+    .calendar-day-event-title {
+      font-size: 12px;
+      color: var(--md-sys-color-primary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: block;
+      width: 100%;
+    }
+    .calendar-day.today {
+      border: 1px solid var(--md-sys-color-primary);
+    }
+    .calendar-day.has-event {
+        cursor: pointer;
+      border: 2px solid var(--md-sys-color-primary);
+      position: relative;
+    }
+    .event-popup {
+      position: fixed;
+      z-index: 1000;
+      background: #fff;
+      color: #222;
+      border-radius: 10px;
+      box-shadow: 0 4px 24px rgba(0,0,0,0.18);
+      min-width: 220px;
+      max-width: 320px;
+      padding: 16px 20px 16px 20px;
+      top: 30%;
+      left: 50%;
+    }
+    
+  `;g([m({type:String})],v.prototype,"label",2);g([m({type:String})],v.prototype,"value",2);v=g([$("scb-calendar")],v);

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

@@ -1,4 +1,4 @@
-import{a as v,n as a,r as x,i as g,x as d,t as y}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.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,n){try{customElements.get(i)||e(i,l,n)}catch(h){var p=String(h||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var _=Object.defineProperty,w=Object.getOwnPropertyDescriptor,m=t=>{throw TypeError(t)},r=(t,e,i,l)=>{for(var n=l>1?void 0:l?w(e,i):e,p=t.length-1,h;p>=0;p--)(h=t[p])&&(n=(l?h(e,i,n):h(n))||n);return l&&n&&_(e,i,n),n},$=(t,e,i)=>e.has(t)||m("Cannot "+i),k=(t,e,i)=>e.has(t)?m("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),o,f,b,u;let s=class extends g{constructor(){super(),k(this,o),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=t=>{t.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&c(this,o,u).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&c(this,o,u).call(this)},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=>{if(this.value=t.detail.value,this._showDatepicker=!1,this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}if(this.pattern){const e=new RegExp(this.pattern);this.error=!e.test(this.value)}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;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?d`
+import{a as v,n as a,r as x,i as g,x as d,t as y}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.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,n){try{customElements.get(i)||e(i,l,n)}catch(h){var p=String(h||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var _=Object.defineProperty,w=Object.getOwnPropertyDescriptor,m=t=>{throw TypeError(t)},r=(t,e,i,l)=>{for(var n=l>1?void 0:l?w(e,i):e,p=t.length-1,h;p>=0;p--)(h=t[p])&&(n=(l?h(e,i,n):h(n))||n);return l&&n&&_(e,i,n),n},$=(t,e,i)=>e.has(t)||m("Cannot "+i),k=(t,e,i)=>e.has(t)?m("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),o,f,b,u;let s=class extends g{constructor(){super(),k(this,o),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=t=>{t.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&c(this,o,u).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&c(this,o,u).call(this)},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=>{if(this.value=t.detail.value,this._showDatepicker=!1,this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}if(this.pattern)if(!this.value)this.error=!1;else{const e=new RegExp(this.pattern);this.error=!e.test(this.value)}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;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?d`
             <button
               type="button"
               class="scb-textfield-clear"
@@ -6,30 +6,9 @@ import{a as v,n as a,r as x,i as g,x as d,t as y}from"../../vendor/vendor.js";im
               aria-label="Rensa fält"
             >
               <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-                <circle
-                  cx="12"
-                  cy="12"
-                  r="10"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                ></circle>
-                <line
-                  x1="8"
-                  y1="8"
-                  x2="16"
-                  y2="16"
-                  stroke="currentColor"
-                  stroke-width="2"
-                ></line>
-                <line
-                  x1="16"
-                  y1="8"
-                  x2="8"
-                  y2="16"
-                  stroke="currentColor"
-                  stroke-width="2"
-                ></line>
+                <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"></circle>
+                <line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2"></line>
+                <line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2"></line>
               </svg>
             </button>
           `:null;return this.type==="textarea"?d`
@@ -84,12 +63,13 @@ ${this.value}</textarea
             <md-focus-ring class="input-ring"></md-focus-ring>
           </div>
           ${this.error?e:d`
-            <scb-icon-button
-              class="scb-textfield-datepicker-button"
-              icon="calendar_today"
-              @click=${this._toggleDatepicker}
-              aria-label="Välj datum"
-            ></scb-icon-button>`}
+                <scb-icon-button
+                  class="scb-textfield-datepicker-button"
+                  icon="calendar_today"
+                  @click=${this._toggleDatepicker}
+                  aria-label="Välj datum"
+                ></scb-icon-button>
+              `}
           <scb-datepicker
             .selectedValue=${this.value}
             .open=${this._showDatepicker}
@@ -105,33 +85,34 @@ ${this.value}</textarea
         >
         <div class="scb-textfield-wrapper" style="position:relative;">
           ${t}
-           <div class="ripple-wrapper">
-          <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
-            @focus=${this._toggleDatepicker}
-            @click=${this._toggleDatepicker}
-          />
-          
-          <md-ripple></md-ripple>
-          <md-focus-ring class="input-ring"></md-focus-ring>
+          <div class="ripple-wrapper">
+            <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
+              @focus=${this._toggleDatepicker}
+              @click=${this._toggleDatepicker}
+            />
+
+            <md-ripple></md-ripple>
+            <md-focus-ring class="input-ring"></md-focus-ring>
           </div>
 
           ${this.error?e:d`
-            <scb-icon-button
-              class="scb-textfield-datepicker-button"
-              icon="calendar_today"
-              @click=${this._toggleDatepicker}
-              aria-label="Välj datum"
-            ></scb-icon-button>`}
+                <scb-icon-button
+                  class="scb-textfield-datepicker-button"
+                  icon="calendar_today"
+                  @click=${this._toggleDatepicker}
+                  aria-label="Välj datum"
+                ></scb-icon-button>
+              `}
           <scb-datepicker
             variant="datetime-local"
             .selectedValue=${this.value}
@@ -193,7 +174,7 @@ ${this.value}</textarea
           <md-focus-ring class="input-ring"></md-focus-ring>
         </div>
       </div>
-    `}firstUpdated(t){super.firstUpdated(t),this._initialValue=this.value;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e.addEventListener("input",()=>{const i=e;if(this.value=i.value,this._internals){const l=this.disabled?null:this.value;this._internals.setFormValue(l)}if(this.pattern){const l=new RegExp(this.pattern);this.error=!l.test(this.value)}this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}),e.addEventListener("change",()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),e.addEventListener("select",()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))}),e.addEventListener("focus",()=>{this._inputFocused=!0,c(this,o,u).call(this)}),e.addEventListener("blur",()=>{this._inputFocused=!1,c(this,o,u).call(this)})),c(this,o,f).call(this)}updated(t){if(super.updated(t),this.toggleAttribute("aria-disabled",this.disabled),this._internals&&(t.has("value")||t.has("disabled"))){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&c(this,o,f).call(this)}formDisabledCallback(t){this.disabled=t}connectedCallback(){super.connectedCallback(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=t=>{this.reportValidity()||(t.preventDefault(),t.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&(t.value=this._initialValue),this.error=!1},this._form.addEventListener("reset",this._formResetHandler,!0)),window.addEventListener("keydown",this._onGlobalKeydown,!0),window.addEventListener("pointerdown",this._onGlobalPointerDown,!0)}disconnectedCallback(){super.disconnectedCallback(),this._form&&this._formSubmitHandler&&(this._form.removeEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0)),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0)}reportValidity(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){this.required&&!t.value?t.setCustomValidity(this.errorText||"Ogiltig inmatning."):t.setCustomValidity("");const e=t.reportValidity();this.error=!e;const i=e?"":this.errorText||t.validationMessage||"Ogiltig inmatning.";return e||(this.errorText=i),this._internals&&(e?this._internals.setValidity({}):this._internals.setValidity({customError:!0},i,t)),e}return!0}_onClearClick(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){if(t.value="",this.value="",this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e),this._internals.setValidity({})}this.error=!1,t.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),t.focus()}}};o=new WeakSet;f=function(){const t=c(this,o,b).call(this,this.spacing),e=c(this,o,b).call(this,this.spacingTop)??t,i=c(this,o,b).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")};b=function(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e};u=function(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))};s.formAssociated=!0;s.styles=[v`
+    `}firstUpdated(t){super.firstUpdated(t),this._initialValue=this.value;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e.addEventListener("input",()=>{const i=e;if(this.value=i.value,this._internals){const l=this.disabled?null:this.value;this._internals.setFormValue(l)}if(this.pattern)if(!this.value)this.error=!1;else{const l=new RegExp(this.pattern);this.error=!l.test(this.value)}this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}),e.addEventListener("change",()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),e.addEventListener("select",()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))}),e.addEventListener("focus",()=>{this._inputFocused=!0,c(this,o,u).call(this)}),e.addEventListener("blur",()=>{this._inputFocused=!1,c(this,o,u).call(this)})),c(this,o,f).call(this)}updated(t){if(super.updated(t),this.toggleAttribute("aria-disabled",this.disabled),this._internals&&(t.has("value")||t.has("disabled"))){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&c(this,o,f).call(this)}formDisabledCallback(t){this.disabled=t}connectedCallback(){super.connectedCallback(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=t=>{this.reportValidity()||(t.preventDefault(),t.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&(t.value=this._initialValue),this.error=!1},this._form.addEventListener("reset",this._formResetHandler,!0)),window.addEventListener("keydown",this._onGlobalKeydown,!0),window.addEventListener("pointerdown",this._onGlobalPointerDown,!0)}disconnectedCallback(){super.disconnectedCallback(),this._form&&this._formSubmitHandler&&(this._form.removeEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0)),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0)}reportValidity(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){this.required&&!t.value?t.setCustomValidity(this.errorText||"Ogiltig inmatning."):t.setCustomValidity("");const e=t.reportValidity();this.error=!e;const i=e?"":this.errorText||t.validationMessage||"Ogiltig inmatning.";return e||(this.errorText=i),this._internals&&(e?this._internals.setValidity({}):this._internals.setValidity({customError:!0},i,t)),e}return!0}_onClearClick(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){if(t.value="",this.value="",this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e),this._internals.setValidity({})}this.error=!1,t.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),t.focus()}}};o=new WeakSet;f=function(){const t=c(this,o,b).call(this,this.spacing),e=c(this,o,b).call(this,this.spacingTop)??t,i=c(this,o,b).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")};b=function(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e};u=function(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))};s.formAssociated=!0;s.styles=[v`
       :host {
         --scb-textfield-number-max-width: 280px;
         --scb-textfield-text-max-width: 400px;
@@ -249,9 +230,9 @@ ${this.value}</textarea
       :host([type='time']) {
         --scb-textfield-max-width: var(--scb-textfield-text-max-width);
       }
-      input[type="time"]::-webkit-calendar-picker-indicator {
-          display: none;
-          background: none;
+      input[type='time']::-webkit-calendar-picker-indicator {
+        display: none;
+        background: none;
       }
 
       :host {