@ngxviewbuilder/runtime 0.12.2 → 0.12.4

package/fesm2022/ngxviewbuilder-runtime-custom-html-element-D7ezjkGw.mjs

@@ -1,3 +0,0 @@
-import{t as v}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{Ht as g,Wt as x,g as f,m as y,on as S,p as C}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{nt as T,r as z,rt as w,t as u}from"./ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.mjs";import{t as b}from"./ngxviewbuilder-runtime-nvb-style-outlet-CVovePT_.mjs";import*as a from"@angular/core";import{ChangeDetectionStrategy as k,Component as I,computed as o,inject as m,input as M,signal as N}from"@angular/core";var D=v({CustomHtmlElement:()=>d});const E="\n& {\n  color: var(--nvb-color-neutral-700);\n}\n\n& :is(h1, h2, h3, h4, h5, h6) {\n  margin: 0 0 12px;\n  line-height: 1.25;\n  color: var(--nvb-color-neutral-900);\n}\n\n& :is(p, ul, ol, blockquote, pre) {\n  margin: 0 0 12px;\n}\n\n& ul,\n& ol {\n  padding-inline-start: 22px;\n}\n\n& ul {\n  list-style: disc outside;\n}\n\n& ol {\n  list-style: decimal outside;\n}\n\n& li {\n  display: list-item;\n}\n\n& a {\n  color: #0000ee;\n  text-decoration: underline;\n}\n\n/* Tables, task lists and indents authored in the rich text editor render the same\n   way here: the classes travel with the markup, the rules have to travel with it too. */\n& .nvb-rt-size-8 { font-size: 8px; }\n& .nvb-rt-size-9 { font-size: 9px; }\n& .nvb-rt-size-10 { font-size: 10px; }\n& .nvb-rt-size-11 { font-size: 11px; }\n& .nvb-rt-size-12 { font-size: 12px; }\n& .nvb-rt-size-14 { font-size: 14px; }\n& .nvb-rt-size-16 { font-size: 16px; }\n& .nvb-rt-size-18 { font-size: 18px; }\n& .nvb-rt-size-20 { font-size: 20px; }\n& .nvb-rt-size-24 { font-size: 24px; }\n& .nvb-rt-size-28 { font-size: 28px; }\n& .nvb-rt-size-32 { font-size: 32px; }\n& .nvb-rt-size-36 { font-size: 36px; }\n& .nvb-rt-size-48 { font-size: 48px; }\n& .nvb-rt-size-72 { font-size: 72px; }\n& .nvb-rt-leading-1 { line-height: 1; }\n& .nvb-rt-leading-1-15 { line-height: 1.15; }\n& .nvb-rt-leading-1-25 { line-height: 1.25; }\n& .nvb-rt-leading-1-5 { line-height: 1.5; }\n& .nvb-rt-leading-1-6 { line-height: 1.6; }\n& .nvb-rt-leading-1-75 { line-height: 1.75; }\n& .nvb-rt-leading-2 { line-height: 2; }\n& .nvb-rt-leading-2-5 { line-height: 2.5; }\n& .nvb-rt-leading-3 { line-height: 3; }\n& table.nvb-rt-table { border-collapse: collapse; width: 100%; margin: 12px 0; table-layout: fixed; }\n& table.nvb-rt-table td, table.nvb-rt-table th { padding: 6px 8px; vertical-align: top; word-break: break-word; }\n& table.nvb-rt-table th { background: #f1f5f9; font-weight: 600; text-align: left; }\n& table.nvb-rt-table-border-all td, table.nvb-rt-table-border-all th { border: 1px solid #cbd5e1; }\n& table.nvb-rt-table-border-outer { border: 1px solid #cbd5e1; }\n& table.nvb-rt-table-border-none td, table.nvb-rt-table-border-none th { border: 0; }\n& table.nvb-rt-table .nvb-rt-valign-middle { vertical-align: middle; }\n& table.nvb-rt-table .nvb-rt-valign-bottom { vertical-align: bottom; }\n& ul.nvb-rt-task-list { list-style: none; padding-inline-start: 4px; }\n& li.nvb-rt-task-item { list-style: none; position: relative; padding-inline-start: 26px; display: block; }\n& li.nvb-rt-task-item::before { content: ''; position: absolute; inset-inline-start: 0; top: 0.22em; width: 15px; height: 15px; border: 1.5px solid #94a3b8; border-radius: 3px; background: #fff; box-sizing: border-box; }\n& li.nvb-rt-task-item.nvb-rt-task-checked::before { background: #3b82f6; border-color: #3b82f6; }\n& li.nvb-rt-task-item.nvb-rt-task-checked::after { content: ''; position: absolute; inset-inline-start: 5px; top: 0.4em; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }\n& li.nvb-rt-task-item.nvb-rt-task-checked { color: #64748b; text-decoration: line-through; }\n& .nvb-rt-indent-1 { margin-inline-start: 32px; }\n& .nvb-rt-indent-2 { margin-inline-start: 64px; }\n& .nvb-rt-indent-3 { margin-inline-start: 96px; }\n& .nvb-rt-indent-4 { margin-inline-start: 128px; }\n& .nvb-rt-indent-5 { margin-inline-start: 160px; }\n& .nvb-rt-indent-6 { margin-inline-start: 192px; }\n& .nvb-rt-indent-7 { margin-inline-start: 224px; }\n& .nvb-rt-indent-8 { margin-inline-start: 256px; }\n& .nvb-rt-embed { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }\n& .nvb-rt-media-node video, .nvb-rt-media-node iframe { display: block; max-width: 100%; border-radius: 8px; }\n".trim();var d=class p{templateScopeId=`nvb-custom-html-template-${Math.random().toString(36).slice(2,11)}`;templateScopeSelector=`[data-nvb-template-scope="${this.templateScopeId}"]`;model=M.required(...ngDevMode?[{debugName:"model"}]:[]);tid=z(this.model,"nvb-custom-html","custom-html");renderVersion=N(0,...ngDevMode?[{debugName:"renderVersion"}]:[]);dataService=m(S);eventService=m(f);templateEngineService=m(T);elementActionService=m(w);normalizedTemplate=o(()=>{this.renderVersion();const e=this.templateEngineService.resolveTemplateContentByName(this.resolveTemplateName(),this.resolveTemplateMarkupFallback());return this.normalizeTemplate(e)},...ngDevMode?[{debugName:"normalizedTemplate"}]:[]);renderedTemplate=o(()=>{this.renderVersion();const e=this.normalizedTemplate();if(!e)return{html:"",cssText:""};return this.templateEngineService.renderTemplateWithCss(e,this.buildRuntimeContext())},...ngDevMode?[{debugName:"renderedTemplate"}]:[]);renderedHtml=o(()=>this.renderedTemplate().html,...ngDevMode?[{debugName:"renderedHtml"}]:[]);styleOutletKey=o(()=>{return`custom-html:${String(this.model()?.name??"").trim()||this.templateScopeId}:template-css`},...ngDevMode?[{debugName:"styleOutletKey"}]:[]);templateCss=o(()=>{const e=this.normalizedTemplate();const n=[`${this.templateScopeSelector} {
-  color: var(--nvb-color-neutral-700);
-}`,E.replaceAll("&",this.templateScopeSelector)].join("\n\n");if(!e)return n;return[n,this.templateEngineService.resolveTemplateCss(e,this.templateScopeSelector),this.templateEngineService.resolveTemplateCss(e,".nvb-custom-html")].map(t=>String(t??"").trim()).filter((t,r,i)=>t.length>0&&i.indexOf(t)===r).join("\n\n")},...ngDevMode?[{debugName:"templateCss"}]:[]);valueChangedHandler=()=>{this.bumpRenderVersion()};dataMutatedHandler=()=>{this.bumpRenderVersion()};propertyChangedHandler=()=>{this.bumpRenderVersion()};ngOnInit(){this.bumpRenderVersion();this.dataService.onValueChanged.add(this.valueChangedHandler);this.dataService.onDataMutated.add(this.dataMutatedHandler);this.eventService.afterPropertyChanged.add(this.propertyChangedHandler)}ngOnDestroy(){this.dataService.onValueChanged.remove(this.valueChangedHandler);this.dataService.onDataMutated.remove(this.dataMutatedHandler);this.eventService.afterPropertyChanged.remove(this.propertyChangedHandler)}async onContentClick(e){const n=this.buildRuntimeContext();if(await this.templateEngineService.handleTemplateClickEvent(e,n,this.model()))return;await this.elementActionService.runActions(this.model(),this.model().events??[],"click",n)}buildRuntimeContext(){const e=this.model();const n=String(e?.name??"").trim();const t=this.resolveRepeaterRuntimeContext(e);const r={...this.dataService.getData()??{},...C(e,i=>this.dataService.getValue(i))??{},value:e?.value??null,element:e,row:t.row,panel:t.panel,parentIndex:t.parentIndex};if(n)r[n]=e?.value??null;return this.templateEngineService.applyTemplateFieldMap(r,this.resolveTemplateFieldMap())}resolveRepeaterRuntimeContext(e){const n=y(e,r=>this.dataService.getValue(r));if(n)return{row:n.rowValue,panel:n.rowValue,parentIndex:n.rowIndex};let t=e;while(t?.parentElement){const r=t.parentElement;const i=String(r.type??"").trim();if((g(i)||i==="dynamicTable")&&String(r.dataPath??"").trim()){const l=this.resolveContextIndex(t,r);const h=x(String(r.dataPath),l,i);const s=this.dataService.getValue(h);const c=s&&typeof s==="object"&&!Array.isArray(s)?s:null;return{row:c,panel:c,parentIndex:l}}t=r}return{row:null,panel:null,parentIndex:null}}resolveContextIndex(e,n){const t=this.resolveContextIndexFromDataPath(String(e?.dataPath??""),String(n["dataPath"]??""));if(t!==null)return t;if(typeof e?.index==="number"&&Number.isFinite(e.index))return e.index;const r=Number(n["index"]);if(Number.isFinite(r))return r;return 0}resolveContextIndexFromDataPath(e,n){const t=String(e??"").trim();const r=String(n??"").trim();if(!t||!r)return null;if(!t.startsWith(`${r}[`))return null;const i=t.slice(r.length).match(/^\[(\d+)\]/);if(!i)return null;const l=Number(i[1]);return Number.isFinite(l)?l:null}resolveTemplateFieldMap(){const e=this.model();const n=e["htmlTemplateFieldMap"];if(n&&typeof n==="object"&&!Array.isArray(n))return n;const t=e["templateFieldMap"];return t&&typeof t==="object"&&!Array.isArray(t)?t:null}resolveTemplateName(){const e=this.model();const n=String(e["htmlTemplateName"]??"").trim();if(n)return n;const t=String(e["templateName"]??"").trim();if(t)return t;const r=String(e["htmlTemplateRef"]??e["templateRef"]??"").trim();if(r)return r;return""}resolveTemplateMarkupFallback(){const e=this.model();const n=String(e["htmlTemplate"]??"").trim();if(n)return n;const t=String(e["template"]??"").trim();if(t)return t;const r=String(e["templateHtml"]??e["templateMarkup"]??e["htmlContent"]??"").trim();if(r)return r;return""}normalizeTemplate(e){if(typeof e!=="string")return null;const n=e.trim();if(!n)return null;const t=n.toLowerCase();if(t==="null"||t==="undefined")return null;return n}bumpRenderVersion(){this.renderVersion.update(e=>e+1)}static ɵfac=a.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:a,type:p,deps:[],target:a.ɵɵFactoryTarget.Component});static ɵcmp=a.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:p,isStandalone:true,selector:"custom-html-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},ngImport:a,template:"<element-wrapper [model]=\"model()\">\n  @if (templateCss()) {\n    <nvb-style-outlet\n      [cssText]=\"templateCss()\"\n      [renderInPlace]=\"true\"\n      [styleKey]=\"styleOutletKey()\"\n    ></nvb-style-outlet>\n  }\n\n  <div\n    class=\"nvb-custom-html\"\n    [attr.data-nvb-template-scope]=\"templateScopeId\"\n    [innerHTML]=\"renderedHtml()\"\n    (click)=\"onContentClick($event)\"\n    [attr.data-testid]=\"tid('root')\"\n  ></div>\n</element-wrapper>\n",styles:[".nvb-custom-html{width:100%;color:var(--nvb-color-neutral-700)}\n"],dependencies:[{kind:"component",type:u,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"component",type:b,selector:"nvb-style-outlet",inputs:["cssText","renderInPlace","styleKey"]}],changeDetection:a.ChangeDetectionStrategy.OnPush})};a.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:a,type:d,decorators:[{type:I,args:[{selector:"custom-html-element",changeDetection:k.OnPush,imports:[u,b],template:"<element-wrapper [model]=\"model()\">\n  @if (templateCss()) {\n    <nvb-style-outlet\n      [cssText]=\"templateCss()\"\n      [renderInPlace]=\"true\"\n      [styleKey]=\"styleOutletKey()\"\n    ></nvb-style-outlet>\n  }\n\n  <div\n    class=\"nvb-custom-html\"\n    [attr.data-nvb-template-scope]=\"templateScopeId\"\n    [innerHTML]=\"renderedHtml()\"\n    (click)=\"onContentClick($event)\"\n    [attr.data-testid]=\"tid('root')\"\n  ></div>\n</element-wrapper>\n",styles:[".nvb-custom-html{width:100%;color:var(--nvb-color-neutral-700)}\n"]}]}],propDecorators:{model:[{type:a.Input,args:[{isSignal:true,alias:"model",required:true}]}]}});export{D as n,d as t};

package/fesm2022/ngxviewbuilder-runtime-date-range-element-kRoWWvXf.mjs

@@ -1 +0,0 @@
-import{t as S}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{_ as P,d as V,g as T,n as x,on as C,t as D,yt as R}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{a as W,dt as E,r as z,rt as I,t as w}from"./ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.mjs";import{t as N}from"./ngxviewbuilder-runtime-dropdown-coordinator.service-CDJcQkrB.mjs";import{t as k}from"./ngxviewbuilder-runtime-nvb-select-DuPHFQk6.mjs";import*as c from"@angular/core";import{ChangeDetectionStrategy as L,Component as F,ElementRef as O,HostListener as h,computed as s,inject as v,input as B,signal as i}from"@angular/core";import{NgClass as M}from"@angular/common";var Y=S({DateRangeElement:()=>f});var f=class _{model=B.required(...ngDevMode?[{debugName:"model"}]:[]);tid=z(this.model,"nvb-date-range","date-range");useCompactStyle=i(false,...ngDevMode?[{debugName:"useCompactStyle"}]:[]);isOpen=i(false,...ngDevMode?[{debugName:"isOpen"}]:[]);panelPosition=i("bottom",...ngDevMode?[{debugName:"panelPosition"}]:[]);panelMaxHeight=i(400,...ngDevMode?[{debugName:"panelMaxHeight"}]:[]);panelLeft=i(0,...ngDevMode?[{debugName:"panelLeft"}]:[]);panelTop=i(0,...ngDevMode?[{debugName:"panelTop"}]:[]);panelBottom=i(null,...ngDevMode?[{debugName:"panelBottom"}]:[]);panelMinWidth=i(290,...ngDevMode?[{debugName:"panelMinWidth"}]:[]);panelWidth=i(360,...ngDevMode?[{debugName:"panelWidth"}]:[]);viewDate=i(new Date,...ngDevMode?[{debugName:"viewDate"}]:[]);draftStartDate=i(null,...ngDevMode?[{debugName:"draftStartDate"}]:[]);draftEndDate=i(null,...ngDevMode?[{debugName:"draftEndDate"}]:[]);selectingRangeStart=i(true,...ngDevMode?[{debugName:"selectingRangeStart"}]:[]);dataVersion=i(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);elementActionService=v(I);dataService=v(C);eventService=v(T);localeFormatService=v(P);expressionService=v(V);validatorService=v(E);hostElement=v(O);dropdownCoordinatorService=v(N);dropdownId=`date-range-${Math.random().toString(36).slice(2,11)}`;dropdownCoordinatorSubscription=null;panelDefaultHeight=400;panelVerticalGap=4;panelBoundaryPadding=8;monthOptions=s(()=>{const e=new Intl.DateTimeFormat(this.resolveLocale(),{month:"long"});return Array.from({length:12},(n,a)=>({value:String(a),label:e.format(new Date(2024,a,1))}))},...ngDevMode?[{debugName:"monthOptions"}]:[]);yearOptions=s(()=>{const{minYear:e,maxYear:n}=this.resolveYearBounds();const a=[];for(let t=n;t>=e;t-=1)a.push({value:String(t),label:String(t)});return a},...ngDevMode?[{debugName:"yearOptions"}]:[]);selectedMonth=s(()=>String(this.viewDate().getMonth()),...ngDevMode?[{debugName:"selectedMonth"}]:[]);selectedYear=s(()=>String(this.viewDate().getFullYear()),...ngDevMode?[{debugName:"selectedYear"}]:[]);weekDays=s(()=>this.buildWeekDayLabels(),...ngDevMode?[{debugName:"weekDays"}]:[]);calendarDays=s(()=>{const e=this.viewDate();const n=e.getFullYear();const a=e.getMonth();const t=(new Date(n,a,1).getDay()+6)%7;const o=new Date(n,a,1-t);const r=this.resolveDraftRange();const d=new Date;const m=[];for(let u=0;u<42;u++){const l=new Date(o);l.setDate(o.getDate()+u);const p=this.normalizeDate(l);const b=r.start?this.isSameDate(p,r.start):false;const y=r.end?this.isSameDate(p,r.end):false;const g=r.start&&r.end?p.getTime()>=r.start.getTime()&&p.getTime()<=r.end.getTime():false;m.push({key:`${l.getFullYear()}-${l.getMonth()}-${l.getDate()}`,date:l,day:l.getDate(),outsideMonth:l.getMonth()!==a,isToday:this.isSameDate(l,d),isRangeStart:b,isRangeEnd:y,isInRange:g,disabled:!this.model().isWithinRange(p)})}return m},...ngDevMode?[{debugName:"calendarDays"}]:[]);displayValue=s(()=>{this.dataVersion();return this.resolveDisplayValue(this.model()?.value)},...ngDevMode?[{debugName:"displayValue"}]:[]);minLabel=s(()=>{this.dataVersion();return this.resolveSingleDisplayValue(this.model()?.minValue)},...ngDevMode?[{debugName:"minLabel"}]:[]);maxLabel=s(()=>{this.dataVersion();return this.resolveSingleDisplayValue(this.model()?.maxValue)},...ngDevMode?[{debugName:"maxLabel"}]:[]);canApply=s(()=>{const e=this.resolveDraftRange();if(!e.start||!e.end)return false;return this.model().isWithinRange(e.start)&&this.model().isWithinRange(e.end)},...ngDevMode?[{debugName:"canApply"}]:[]);onDataValueChangedHandler=()=>{this.dataVersion.update(e=>e+1);if(!this.isOpen())this.syncDraftFromModel()};ngOnInit(){this.model().boundExpressionEvaluator=e=>this.expressionService.evaluateInlineExpression(e,this.model());this.model().pickerMode="date";this.model().includeSeconds=false;if(this.model()?.parentElement&&this.model()?.parentElement instanceof R)this.useCompactStyle.set(this.model()?.parentElement["useCompactStyle"]);this.dataService.onValueChanged.add(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.add(this.onDataValueChangedHandler);this.syncDraftFromModel();this.dropdownCoordinatorSubscription=this.dropdownCoordinatorService.activeDropdownId$.subscribe(e=>{if(!this.isOpen())return;if(!e)return;if(e===this.dropdownId)return;if(this.isNestedDropdownInteraction())return;this.closePanel(true)})}ngOnDestroy(){this.dataService.onValueChanged.remove(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.remove(this.onDataValueChangedHandler);this.dropdownCoordinatorSubscription?.unsubscribe();this.dropdownCoordinatorSubscription=null;this.dropdownCoordinatorService.requestClose(this.dropdownId)}onDocumentMouseDown(e){if(!this.isOpen())return;const n=e.target;if(!n)return;if(!this.hostElement.nativeElement.contains(n))this.closePanel(true)}onEscapePressed(){if(!this.isOpen())return;this.closePanel(true)}onWindowResize(){if(!this.isOpen())return;this.calculatePanelPosition()}onDocumentScroll(){if(!this.isOpen())return;this.calculatePanelPosition()}togglePanel(e){e.preventDefault();e.stopPropagation();if(this.model().disabled||this.model().readOnly)return;if(this.isOpen()){this.closePanel(true);return}this.openPanel()}previousMonth(e){e.preventDefault();e.stopPropagation();const n=new Date(this.viewDate());n.setMonth(n.getMonth()-1);this.viewDate.set(new Date(n.getFullYear(),n.getMonth(),1))}nextMonth(e){e.preventDefault();e.stopPropagation();const n=new Date(this.viewDate());n.setMonth(n.getMonth()+1);this.viewDate.set(new Date(n.getFullYear(),n.getMonth(),1))}onMonthPickerChange(e){const n=e.target;const a=Number(n?.value??"");if(!Number.isFinite(a))return;this.updateCalendarView(this.viewDate().getFullYear(),this.clampValue(a,0,11))}onYearPickerChange(e){const n=e.target;const a=Number(n?.value??"");if(!Number.isFinite(a))return;this.updateCalendarView(Math.floor(a),this.viewDate().getMonth())}selectDay(e,n){n.preventDefault();n.stopPropagation();if(e.disabled)return;const a=this.normalizeDate(e.date);const t=this.draftStartDate();const o=this.draftEndDate();if(this.selectingRangeStart()||!t||o){this.draftStartDate.set(a);this.draftEndDate.set(null);this.selectingRangeStart.set(false);this.viewDate.set(new Date(a.getFullYear(),a.getMonth(),1));this.runActions("input",this.buildDraftValue());return}let r=this.normalizeDate(t);let d=a;if(d.getTime()<r.getTime())[r,d]=[d,r];this.draftStartDate.set(r);this.draftEndDate.set(d);this.selectingRangeStart.set(true);this.runActions("input",this.buildDraftValue());this.applySelection()}clearSelection(e){e.preventDefault();e.stopPropagation();this.draftStartDate.set(null);this.draftEndDate.set(null);this.selectingRangeStart.set(true);this.model().setRangeValue(null,"change");this.validatorService.handleElementBlur(this.model());this.dataVersion.update(n=>n+1);this.runActions("input",null);this.runActions("change",null);this.closePanel(true)}applySelection(e){e?.preventDefault();e?.stopPropagation();const n=this.resolveDraftRange();if(!n.start||!n.end)return;if(!this.model().isWithinRange(n.start)||!this.model().isWithinRange(n.end))return;this.model().setRangeValueFromDates(n.start,n.end,"change");this.dataVersion.update(a=>a+1);this.runActions("change",this.model().value);this.closePanel(true)}openPanel(){this.syncDraftFromModel();this.calculatePanelPosition();this.dropdownCoordinatorService.requestClose();this.dropdownCoordinatorService.requestOpen(this.dropdownId);this.isOpen.set(true);this.runActions("focus",this.model().value)}closePanel(e){if(!this.isOpen())return;this.isOpen.set(false);this.dropdownCoordinatorService.requestClose(this.dropdownId);if(e){this.validatorService.handleElementBlur(this.model());this.runActions("blur",this.model().value)}}isNestedDropdownInteraction(){const e=this.resolveActiveElement();return Boolean(e&&this.hostElement.nativeElement.contains(e))}resolveActiveElement(){const e=this.hostElement.nativeElement.getRootNode();if(typeof ShadowRoot!=="undefined"&&e instanceof ShadowRoot)return e.activeElement;if(e instanceof Document)return e.activeElement;if(typeof document!=="undefined")return document.activeElement;return null}calculatePanelPosition(){const e=this.panelDefaultHeight;const n=this.hostElement.nativeElement.querySelector(".nvb-date-range__trigger");if(!n){this.panelPosition.set("bottom");this.panelMaxHeight.set(e);this.panelLeft.set(0);this.panelTop.set(0);this.panelBottom.set(null);this.panelMinWidth.set(290);this.panelWidth.set(360);return}const a=n.getBoundingClientRect();const t=Math.max(window.innerWidth??0,0);const o=Math.max(window.innerHeight??0,0);const r=Math.min(360,Math.max(260,t-this.panelBoundaryPadding*2));const d=this.panelBoundaryPadding;const m=Math.max(d,t-r-this.panelBoundaryPadding);const u=Math.min(Math.max(a.left,d),m);const l=Math.max(0,o-a.bottom-this.panelBoundaryPadding-this.panelVerticalGap);const p=Math.max(0,a.top-this.panelBoundaryPadding-this.panelVerticalGap);const b=l<Math.min(e,260)&&p>l;const y=Math.min(e,Math.max(180,b?p:l));const g=W(n);this.panelPosition.set(b?"top":"bottom");this.panelMaxHeight.set(y);this.panelLeft.set(u-g.left);if(b){this.panelTop.set(null);this.panelBottom.set(g.bottom-a.top+this.panelVerticalGap)}else{this.panelTop.set(a.bottom+this.panelVerticalGap-g.top);this.panelBottom.set(null)}this.panelMinWidth.set(r);this.panelWidth.set(r)}syncDraftFromModel(){const e=this.model().parseRangeValue(this.model()?.value);const n=e.dateFrom;const a=e.dateTo;this.draftStartDate.set(n?this.normalizeDate(n):null);this.draftEndDate.set(a?this.normalizeDate(a):null);this.selectingRangeStart.set(!n||Boolean(a));const t=n??a??this.model().resolveBoundDate(this.model()?.minValue)??new Date;this.viewDate.set(new Date(t.getFullYear(),t.getMonth(),1))}resolveDraftRange(){const e=this.draftStartDate()?this.normalizeDate(this.draftStartDate()):null;const n=this.draftEndDate()?this.normalizeDate(this.draftEndDate()):null;if(e&&n&&n.getTime()<e.getTime())return{start:n,end:e};return{start:e,end:n}}resolveYearBounds(){const e=this.model().resolveBoundDate(this.model()?.minValue);const n=this.model().resolveBoundDate(this.model()?.maxValue);const a=new Date().getFullYear();const t=this.viewDate().getFullYear();let o=e?.getFullYear()??Math.min(a,t)-120;let r=n?.getFullYear()??Math.max(a,t)+20;if(o>r)[o,r]=[r,o];return{minYear:o,maxYear:r}}updateCalendarView(e,n){const a=new Date(e,n,1);if(Number.isNaN(a.getTime()))return;this.viewDate.set(a)}buildWeekDayLabels(){const e=new Intl.DateTimeFormat(this.resolveLocale(),{weekday:"short"});const n=new Date(2024,0,1);return Array.from({length:7},(a,t)=>{const o=new Date(n);o.setDate(n.getDate()+t);return e.format(o)})}resolveDisplayValue(e){const n=this.model().normalizeRangeValue(e);if(!n)return"";const a=this.model().parseValue(n.dateFrom);const t=this.model().parseValue(n.dateTo);if(a&&t)return`${this.formatDisplayDate(a)} - ${this.formatDisplayDate(t)}`;if(a)return this.formatDisplayDate(a);if(t)return this.formatDisplayDate(t);return""}resolveSingleDisplayValue(e){const n=this.model().resolveBoundDate(e);if(!n)return"";return this.formatDisplayDate(n)}formatDisplayDate(e){if(this.model().hasOutputFormatOverride())return this.model().toDisplayValue(this.model().formatDateForOutput(this.normalizeDate(e)));return this.localeFormatService.formatDateTimeValue(this.normalizeDate(e),"date",false,this.resolveLocale())}buildDraftValue(){const e=this.resolveDraftRange();if(!e.start&&!e.end)return null;return{dateFrom:e.start?this.model().formatDateForOutput(e.start):"",dateTo:e.end?this.model().formatDateForOutput(e.end):""}}resolveLocale(){return this.localeFormatService.resolveLocale()}runActions(e,n){const a=n!==void 0?n:this.model().value;const t=String(this.model().name??"").trim();const o={value:a,item:null,row:null};if(t)o[t]=a;this.elementActionService.runActions(this.model(),this.model().events??[],e,o)}normalizeDate(e){const n=new Date(e);n.setHours(0,0,0,0);return n}clampValue(e,n,a){return Math.max(n,Math.min(a,Math.floor(e)))}isSameDate(e,n){return e.getFullYear()===n.getFullYear()&&e.getMonth()===n.getMonth()&&e.getDate()===n.getDate()}static ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:c,type:_,deps:[],target:c.ɵɵFactoryTarget.Component});static ɵcmp=c.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:_,isStandalone:true,selector:"date-range-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},host:{listeners:{"document:mousedown":"onDocumentMouseDown($event)","document:keydown.escape":"onEscapePressed()","window:resize":"onWindowResize()","document:scroll":"onDocumentScroll()"}},ngImport:c,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div\n    class=\"nvb-date-range\"\n    [ngClass]=\"{\n      'nvb-date-range--compact': useCompactStyle(),\n      'nvb-date-range--open': isOpen(),\n    }\"\n  >\n    <button\n      type=\"button\"\n      class=\"nvb-date-range__trigger\"\n      [disabled]=\"model().disabled\"\n      [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n      [attr.aria-required]=\"model().required ? 'true' : null\"\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n      [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.data-testid]=\"tid('trigger')\"\n      (click)=\"togglePanel($event)\"\n    >\n      <span\n        class=\"nvb-date-range__value\"\n        [class.nvb-date-range__value--placeholder]=\"!displayValue()\"\n      >\n        @if (displayValue()) {\n          {{ displayValue() }}\n        } @else if (model().placeholder) {\n          {{ model().placeholder | dynamicText: model() }}\n        } @else {\n          {{ 'dateRange.select' | uiT: 'Select date range' }}\n        }\n      </span>\n\n      <span class=\"material-symbols-outlined nvb-date-range__icon\">date_range</span>\n    </button>\n\n    @if (isOpen()) {\n      <div\n        class=\"nvb-date-range__panel\"\n        role=\"dialog\"\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\n        [attr.data-testid]=\"tid('popup')\"\n        [style.--nvb-date-range-panel-max-height.px]=\"panelMaxHeight()\"\n        [style.left.px]=\"panelLeft()\"\n        [style.top]=\"panelTop() !== null ? panelTop() + 'px' : 'auto'\"\n        [style.bottom]=\"panelBottom() !== null ? panelBottom() + 'px' : 'auto'\"\n        [style.min-width.px]=\"panelMinWidth()\"\n        [style.width.px]=\"panelWidth()\"\n        (mousedown)=\"$event.stopPropagation()\"\n      >\n        <div class=\"nvb-date-range__calendar-header\">\n          <button\n            type=\"button\"\n            class=\"nvb-date-range__nav\"\n            (click)=\"previousMonth($event)\"\n            [attr.aria-label]=\"'datePicker.previousMonth' | uiT: 'Previous month'\"\n            [attr.data-testid]=\"tid('prev-month')\"\n          >\n            <span class=\"material-symbols-outlined\">chevron_left</span>\n          </button>\n\n          <div class=\"nvb-date-range__calendar-selectors\">\n            <nvb-select [testId]=\"tid('month-select')\"\n              class=\"nvb-date-range__calendar-select nvb-date-range__calendar-select--month\"\n              [value]=\"selectedMonth()\"\n              (change)=\"onMonthPickerChange($event)\"\n            >\n              @for (month of monthOptions(); track month.value) {\n                <option [value]=\"month.value\">{{ month.label }}</option>\n              }\n            </nvb-select>\n\n            <nvb-select [testId]=\"tid('year-select')\"\n              class=\"nvb-date-range__calendar-select nvb-date-range__calendar-select--year\"\n              [value]=\"selectedYear()\"\n              (change)=\"onYearPickerChange($event)\"\n            >\n              @for (year of yearOptions(); track year.value) {\n                <option [value]=\"year.value\">{{ year.label }}</option>\n              }\n            </nvb-select>\n          </div>\n\n          <button\n            type=\"button\"\n            class=\"nvb-date-range__nav\"\n            (click)=\"nextMonth($event)\"\n            [attr.aria-label]=\"'datePicker.nextMonth' | uiT: 'Next month'\"\n            [attr.data-testid]=\"tid('next-month')\"\n          >\n            <span class=\"material-symbols-outlined\">chevron_right</span>\n          </button>\n        </div>\n\n        <div class=\"nvb-date-range__weekdays\" aria-hidden=\"true\">\n          @for (weekday of weekDays(); track weekday + $index) {\n            <span>{{ weekday }}</span>\n          }\n        </div>\n\n        <div class=\"nvb-date-range__days\">\n          @for (day of calendarDays(); track day.key) {\n            <button\n              type=\"button\"\n              class=\"nvb-date-range__day\"\n              [class.nvb-date-range__day--outside]=\"day.outsideMonth\"\n              [class.nvb-date-range__day--today]=\"day.isToday\"\n              [class.nvb-date-range__day--in-range]=\"day.isInRange\"\n              [class.nvb-date-range__day--range-start]=\"day.isRangeStart\"\n              [class.nvb-date-range__day--range-end]=\"day.isRangeEnd\"\n              [disabled]=\"day.disabled\"\n              [attr.aria-label]=\"day.key\"\n              [attr.aria-pressed]=\"day.isRangeStart || day.isRangeEnd || day.isInRange\"\n              [attr.data-testid]=\"tid('day', day.key)\"\n              (click)=\"selectDay(day, $event)\"\n            >\n              {{ day.day }}\n            </button>\n          }\n        </div>\n\n        @if (minLabel() || maxLabel()) {\n          <div class=\"nvb-date-range__range-hint\">\n            @if (minLabel()) {\n              <span>{{ 'datePicker.min' | uiT: 'Min' }}: {{ minLabel() }}</span>\n            }\n            @if (maxLabel()) {\n              <span>{{ 'datePicker.max' | uiT: 'Max' }}: {{ maxLabel() }}</span>\n            }\n          </div>\n        }\n\n        <div class=\"nvb-date-range__actions\">\n          <button\n            type=\"button\"\n            class=\"nvb-date-range__action\"\n            (click)=\"clearSelection($event)\"\n            [attr.data-testid]=\"tid('clear')\"\n          >\n            {{ 'datePicker.clear' | uiT: 'Isvalyti' }}\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"nvb-date-range__action nvb-date-range__action--primary\"\n            [disabled]=\"!canApply()\"\n            (click)=\"applySelection($event)\"\n            [attr.data-testid]=\"tid('apply')\"\n          >\n            {{ 'datePicker.apply' | uiT: 'Apply' }}\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size)}.nvb-control__text-input,.nvb-control__column-input{width:100%}.nvb-date-range{position:relative;width:100%;overflow:visible}.nvb-date-range--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-date-range__trigger{width:100%;min-height:var(--nvb-input-height, 40px);border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-input-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;color:var(--nvb-color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size);line-height:20px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-date-range__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-date-range__trigger:focus-visible{border-color:var(--nvb-color-primary-500);box-shadow:var(--nvb-focus-ring);outline:0}.nvb-date-range__value{text-align:left;font-size:var(--nvb-input-font-size);line-height:20px}.nvb-date-range__value--placeholder{color:var(--nvb-color-neutral-500)}.nvb-date-range__icon{font-size:18px;color:var(--nvb-color-neutral-500)}.nvb-date-range__panel{--nvb-date-range-panel-max-height: 408px;position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);min-width:312px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-card-radius, var(--nvb-radius-md)));background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-16, 0 16px 32px color-mix(in oklab, var(--nvb-color-neutral-950) 14%, transparent));padding:8px;display:flex;flex-direction:column;gap:8px;max-height:var(--nvb-date-range-panel-max-height);overflow:auto;overscroll-behavior:contain}.nvb-date-range__calendar-header{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 32px;align-items:center;gap:8px}.nvb-date-range__calendar-selectors{display:contents;min-width:0}.nvb-date-range__calendar-select{width:100%;min-width:0;--nvb-input-height: 32px;--nvb-select-option-min-height: 32px;--nvb-select-option-padding-block: 4px}.nvb-date-range__nav{width:32px;height:32px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}.nvb-date-range__nav:hover{border-color:var(--nvb-color-neutral-400);background:var(--nvb-color-neutral-050);color:var(--nvb-color-neutral-800)}.nvb-date-range__nav:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-date-range__nav span{font-size:18px}.nvb-date-range__weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-date-range__weekdays span{min-height:24px;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:var(--nvb-color-neutral-500);font-weight:600}.nvb-date-range__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-date-range__day{position:relative;height:32px;border:1px solid transparent;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:transparent;color:var(--nvb-color-neutral-700);font-size:12px;cursor:pointer}.nvb-date-range__day:hover:not(:disabled){border-color:color-mix(in oklab,var(--nvb-color-primary-500) 36%,var(--nvb-color-neutral-300));background:color-mix(in oklab,var(--nvb-color-primary-050) 70%,var(--nvb-color-neutral-000))}.nvb-date-range__day:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-date-range__day:disabled{color:var(--nvb-color-neutral-400);cursor:not-allowed}.nvb-date-range__day--outside{color:var(--nvb-color-neutral-400)}.nvb-date-range__day--today{border-color:var(--nvb-color-primary-300)}.nvb-date-range__day--in-range{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 20%,transparent);background:color-mix(in oklab,var(--nvb-color-primary-050) 82%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700)}.nvb-date-range__day--range-start,.nvb-date-range__day--range-end{border-color:var(--nvb-color-primary-600);background:var(--nvb-color-primary-600);color:var(--nvb-color-neutral-000);font-weight:600}.nvb-date-range__range-hint{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--nvb-color-neutral-500)}.nvb-date-range__actions{display:flex;justify-content:flex-end;gap:6px}.nvb-date-range__action{border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-700);cursor:pointer;font-size:12px;min-height:32px;padding:0 10px}.nvb-date-range__action:disabled{cursor:not-allowed;opacity:.55}.nvb-date-range__action--primary{border-color:var(--nvb-color-primary-600);background:var(--nvb-color-primary-600);color:var(--nvb-color-neutral-000)}.nvb-date-range--compact .nvb-date-range__panel{min-width:260px}@media(max-width:480px){.nvb-date-range__calendar-header{gap:6px}.nvb-date-range__calendar-selectors{display:contents}}\n"],dependencies:[{kind:"component",type:k,selector:"nvb-select",inputs:["value","disabled","required","filterable","filterThreshold","allowCustomValue","placeholder","testId"],outputs:["valueChange","change","focus","blur"]},{kind:"component",type:w,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:M,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"pipe",type:D,name:"dynamicText"},{kind:"pipe",type:x,name:"uiT"}],changeDetection:c.ChangeDetectionStrategy.OnPush})};c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:c,type:f,decorators:[{type:F,args:[{selector:"date-range-element",changeDetection:L.OnPush,imports:[k,w,M,D,x],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div\n    class=\"nvb-date-range\"\n    [ngClass]=\"{\n      'nvb-date-range--compact': useCompactStyle(),\n      'nvb-date-range--open': isOpen(),\n    }\"\n  >\n    <button\n      type=\"button\"\n      class=\"nvb-date-range__trigger\"\n      [disabled]=\"model().disabled\"\n      [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n      [attr.aria-required]=\"model().required ? 'true' : null\"\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n      [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.data-testid]=\"tid('trigger')\"\n      (click)=\"togglePanel($event)\"\n    >\n      <span\n        class=\"nvb-date-range__value\"\n        [class.nvb-date-range__value--placeholder]=\"!displayValue()\"\n      >\n        @if (displayValue()) {\n          {{ displayValue() }}\n        } @else if (model().placeholder) {\n          {{ model().placeholder | dynamicText: model() }}\n        } @else {\n          {{ 'dateRange.select' | uiT: 'Select date range' }}\n        }\n      </span>\n\n      <span class=\"material-symbols-outlined nvb-date-range__icon\">date_range</span>\n    </button>\n\n    @if (isOpen()) {\n      <div\n        class=\"nvb-date-range__panel\"\n        role=\"dialog\"\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\n        [attr.data-testid]=\"tid('popup')\"\n        [style.--nvb-date-range-panel-max-height.px]=\"panelMaxHeight()\"\n        [style.left.px]=\"panelLeft()\"\n        [style.top]=\"panelTop() !== null ? panelTop() + 'px' : 'auto'\"\n        [style.bottom]=\"panelBottom() !== null ? panelBottom() + 'px' : 'auto'\"\n        [style.min-width.px]=\"panelMinWidth()\"\n        [style.width.px]=\"panelWidth()\"\n        (mousedown)=\"$event.stopPropagation()\"\n      >\n        <div class=\"nvb-date-range__calendar-header\">\n          <button\n            type=\"button\"\n            class=\"nvb-date-range__nav\"\n            (click)=\"previousMonth($event)\"\n            [attr.aria-label]=\"'datePicker.previousMonth' | uiT: 'Previous month'\"\n            [attr.data-testid]=\"tid('prev-month')\"\n          >\n            <span class=\"material-symbols-outlined\">chevron_left</span>\n          </button>\n\n          <div class=\"nvb-date-range__calendar-selectors\">\n            <nvb-select [testId]=\"tid('month-select')\"\n              class=\"nvb-date-range__calendar-select nvb-date-range__calendar-select--month\"\n              [value]=\"selectedMonth()\"\n              (change)=\"onMonthPickerChange($event)\"\n            >\n              @for (month of monthOptions(); track month.value) {\n                <option [value]=\"month.value\">{{ month.label }}</option>\n              }\n            </nvb-select>\n\n            <nvb-select [testId]=\"tid('year-select')\"\n              class=\"nvb-date-range__calendar-select nvb-date-range__calendar-select--year\"\n              [value]=\"selectedYear()\"\n              (change)=\"onYearPickerChange($event)\"\n            >\n              @for (year of yearOptions(); track year.value) {\n                <option [value]=\"year.value\">{{ year.label }}</option>\n              }\n            </nvb-select>\n          </div>\n\n          <button\n            type=\"button\"\n            class=\"nvb-date-range__nav\"\n            (click)=\"nextMonth($event)\"\n            [attr.aria-label]=\"'datePicker.nextMonth' | uiT: 'Next month'\"\n            [attr.data-testid]=\"tid('next-month')\"\n          >\n            <span class=\"material-symbols-outlined\">chevron_right</span>\n          </button>\n        </div>\n\n        <div class=\"nvb-date-range__weekdays\" aria-hidden=\"true\">\n          @for (weekday of weekDays(); track weekday + $index) {\n            <span>{{ weekday }}</span>\n          }\n        </div>\n\n        <div class=\"nvb-date-range__days\">\n          @for (day of calendarDays(); track day.key) {\n            <button\n              type=\"button\"\n              class=\"nvb-date-range__day\"\n              [class.nvb-date-range__day--outside]=\"day.outsideMonth\"\n              [class.nvb-date-range__day--today]=\"day.isToday\"\n              [class.nvb-date-range__day--in-range]=\"day.isInRange\"\n              [class.nvb-date-range__day--range-start]=\"day.isRangeStart\"\n              [class.nvb-date-range__day--range-end]=\"day.isRangeEnd\"\n              [disabled]=\"day.disabled\"\n              [attr.aria-label]=\"day.key\"\n              [attr.aria-pressed]=\"day.isRangeStart || day.isRangeEnd || day.isInRange\"\n              [attr.data-testid]=\"tid('day', day.key)\"\n              (click)=\"selectDay(day, $event)\"\n            >\n              {{ day.day }}\n            </button>\n          }\n        </div>\n\n        @if (minLabel() || maxLabel()) {\n          <div class=\"nvb-date-range__range-hint\">\n            @if (minLabel()) {\n              <span>{{ 'datePicker.min' | uiT: 'Min' }}: {{ minLabel() }}</span>\n            }\n            @if (maxLabel()) {\n              <span>{{ 'datePicker.max' | uiT: 'Max' }}: {{ maxLabel() }}</span>\n            }\n          </div>\n        }\n\n        <div class=\"nvb-date-range__actions\">\n          <button\n            type=\"button\"\n            class=\"nvb-date-range__action\"\n            (click)=\"clearSelection($event)\"\n            [attr.data-testid]=\"tid('clear')\"\n          >\n            {{ 'datePicker.clear' | uiT: 'Isvalyti' }}\n          </button>\n\n          <button\n            type=\"button\"\n            class=\"nvb-date-range__action nvb-date-range__action--primary\"\n            [disabled]=\"!canApply()\"\n            (click)=\"applySelection($event)\"\n            [attr.data-testid]=\"tid('apply')\"\n          >\n            {{ 'datePicker.apply' | uiT: 'Apply' }}\n          </button>\n        </div>\n      </div>\n    }\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size)}.nvb-control__text-input,.nvb-control__column-input{width:100%}.nvb-date-range{position:relative;width:100%;overflow:visible}.nvb-date-range--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-date-range__trigger{width:100%;min-height:var(--nvb-input-height, 40px);border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-input-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;color:var(--nvb-color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size);line-height:20px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-date-range__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-date-range__trigger:focus-visible{border-color:var(--nvb-color-primary-500);box-shadow:var(--nvb-focus-ring);outline:0}.nvb-date-range__value{text-align:left;font-size:var(--nvb-input-font-size);line-height:20px}.nvb-date-range__value--placeholder{color:var(--nvb-color-neutral-500)}.nvb-date-range__icon{font-size:18px;color:var(--nvb-color-neutral-500)}.nvb-date-range__panel{--nvb-date-range-panel-max-height: 408px;position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);min-width:312px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-card-radius, var(--nvb-radius-md)));background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-16, 0 16px 32px color-mix(in oklab, var(--nvb-color-neutral-950) 14%, transparent));padding:8px;display:flex;flex-direction:column;gap:8px;max-height:var(--nvb-date-range-panel-max-height);overflow:auto;overscroll-behavior:contain}.nvb-date-range__calendar-header{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 32px;align-items:center;gap:8px}.nvb-date-range__calendar-selectors{display:contents;min-width:0}.nvb-date-range__calendar-select{width:100%;min-width:0;--nvb-input-height: 32px;--nvb-select-option-min-height: 32px;--nvb-select-option-padding-block: 4px}.nvb-date-range__nav{width:32px;height:32px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}.nvb-date-range__nav:hover{border-color:var(--nvb-color-neutral-400);background:var(--nvb-color-neutral-050);color:var(--nvb-color-neutral-800)}.nvb-date-range__nav:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-date-range__nav span{font-size:18px}.nvb-date-range__weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-date-range__weekdays span{min-height:24px;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:var(--nvb-color-neutral-500);font-weight:600}.nvb-date-range__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-date-range__day{position:relative;height:32px;border:1px solid transparent;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:transparent;color:var(--nvb-color-neutral-700);font-size:12px;cursor:pointer}.nvb-date-range__day:hover:not(:disabled){border-color:color-mix(in oklab,var(--nvb-color-primary-500) 36%,var(--nvb-color-neutral-300));background:color-mix(in oklab,var(--nvb-color-primary-050) 70%,var(--nvb-color-neutral-000))}.nvb-date-range__day:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-date-range__day:disabled{color:var(--nvb-color-neutral-400);cursor:not-allowed}.nvb-date-range__day--outside{color:var(--nvb-color-neutral-400)}.nvb-date-range__day--today{border-color:var(--nvb-color-primary-300)}.nvb-date-range__day--in-range{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 20%,transparent);background:color-mix(in oklab,var(--nvb-color-primary-050) 82%,var(--nvb-color-neutral-000));color:var(--nvb-color-primary-700)}.nvb-date-range__day--range-start,.nvb-date-range__day--range-end{border-color:var(--nvb-color-primary-600);background:var(--nvb-color-primary-600);color:var(--nvb-color-neutral-000);font-weight:600}.nvb-date-range__range-hint{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--nvb-color-neutral-500)}.nvb-date-range__actions{display:flex;justify-content:flex-end;gap:6px}.nvb-date-range__action{border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-700);cursor:pointer;font-size:12px;min-height:32px;padding:0 10px}.nvb-date-range__action:disabled{cursor:not-allowed;opacity:.55}.nvb-date-range__action--primary{border-color:var(--nvb-color-primary-600);background:var(--nvb-color-primary-600);color:var(--nvb-color-neutral-000)}.nvb-date-range--compact .nvb-date-range__panel{min-width:260px}@media(max-width:480px){.nvb-date-range__calendar-header{gap:6px}.nvb-date-range__calendar-selectors{display:contents}}\n"]}]}],propDecorators:{model:[{type:c.Input,args:[{isSignal:true,alias:"model",required:true}]}],onDocumentMouseDown:[{type:h,args:["document:mousedown",["$event"]]}],onEscapePressed:[{type:h,args:["document:keydown.escape"]}],onWindowResize:[{type:h,args:["window:resize"]}],onDocumentScroll:[{type:h,args:["document:scroll"]}]}});export{Y as n,f as t};

package/fesm2022/ngxviewbuilder-runtime-datepicker-element-Co2_JHM2.mjs

@@ -1 +0,0 @@
-import{t as P}from"./ngxviewbuilder-runtime-rolldown-runtime-DpJrqANO.mjs";import{_ as T,d as V,g as C,n as k,on as W,t as x,yt as N}from"./ngxviewbuilder-runtime-dynamic-text.pipe-BUJ4fCqt.mjs";import{a as H,dt as O,r as z,rt as F,t as w}from"./ngxviewbuilder-runtime-element-wrapper-D0lfZvuW.mjs";import{t as L}from"./ngxviewbuilder-runtime-dropdown-coordinator.service-CDJcQkrB.mjs";import{t as D}from"./ngxviewbuilder-runtime-nvb-select-DuPHFQk6.mjs";import*as d from"@angular/core";import{ChangeDetectionStrategy as I,Component as E,ElementRef as $,HostListener as m,computed as r,inject as c,input as Y,signal as l}from"@angular/core";import{NgClass as S}from"@angular/common";var B=P({DatepickerElement:()=>f});var f=class _{model=Y.required(...ngDevMode?[{debugName:"model"}]:[]);tid=z(this.model,"nvb-datepicker","datepicker");useCompactStyle=l(false,...ngDevMode?[{debugName:"useCompactStyle"}]:[]);dataVersion=l(0,...ngDevMode?[{debugName:"dataVersion"}]:[]);isOpen=l(false,...ngDevMode?[{debugName:"isOpen"}]:[]);panelPosition=l("bottom",...ngDevMode?[{debugName:"panelPosition"}]:[]);panelMaxHeight=l(380,...ngDevMode?[{debugName:"panelMaxHeight"}]:[]);panelLeft=l(0,...ngDevMode?[{debugName:"panelLeft"}]:[]);panelTop=l(0,...ngDevMode?[{debugName:"panelTop"}]:[]);panelBottom=l(null,...ngDevMode?[{debugName:"panelBottom"}]:[]);panelMinWidth=l(290,...ngDevMode?[{debugName:"panelMinWidth"}]:[]);panelWidth=l(330,...ngDevMode?[{debugName:"panelWidth"}]:[]);viewDate=l(new Date,...ngDevMode?[{debugName:"viewDate"}]:[]);draftDate=l(null,...ngDevMode?[{debugName:"draftDate"}]:[]);elementActionService=c(F);dataService=c(W);eventService=c(C);localeFormatService=c(T);expressionService=c(V);validatorService=c(O);hostElement=c($);dropdownCoordinatorService=c(L);dropdownId=`datepicker-${Math.random().toString(36).slice(2,11)}`;dropdownCoordinatorSubscription=null;panelVerticalGap=4;panelBoundaryPadding=8;panelPadding=8;timeColumnWidth=62;hours=Array.from({length:24},(e,t)=>t);minutes=Array.from({length:60},(e,t)=>t);seconds=Array.from({length:60},(e,t)=>t);mode=r(()=>this.model().normalizeMode(this.model()?.pickerMode),...ngDevMode?[{debugName:"mode"}]:[]);showCalendar=r(()=>this.mode()!=="time",...ngDevMode?[{debugName:"showCalendar"}]:[]);showTime=r(()=>this.mode()!=="date",...ngDevMode?[{debugName:"showTime"}]:[]);includeSeconds=r(()=>Boolean(this.model()?.includeSeconds),...ngDevMode?[{debugName:"includeSeconds"}]:[]);displayValue=r(()=>{this.dataVersion();return this.resolveDisplayValue(this.model()?.value)},...ngDevMode?[{debugName:"displayValue"}]:[]);monthLabel=r(()=>{if(this.mode()==="time")return"";return new Intl.DateTimeFormat(this.resolveLocale(),{month:"long",year:"numeric"}).format(this.viewDate())},...ngDevMode?[{debugName:"monthLabel"}]:[]);monthOptions=r(()=>{if(!this.showCalendar())return[];const e=new Intl.DateTimeFormat(this.resolveLocale(),{month:"long"});return Array.from({length:12},(t,n)=>({value:String(n),label:e.format(new Date(2024,n,1))}))},...ngDevMode?[{debugName:"monthOptions"}]:[]);yearOptions=r(()=>{if(!this.showCalendar())return[];const{minYear:e,maxYear:t}=this.resolveYearBounds();const n=[];for(let a=t;a>=e;a-=1)n.push({value:String(a),label:String(a)});return n},...ngDevMode?[{debugName:"yearOptions"}]:[]);selectedMonth=r(()=>String(this.viewDate().getMonth()),...ngDevMode?[{debugName:"selectedMonth"}]:[]);selectedYear=r(()=>String(this.viewDate().getFullYear()),...ngDevMode?[{debugName:"selectedYear"}]:[]);weekDays=r(()=>this.buildWeekDayLabels(),...ngDevMode?[{debugName:"weekDays"}]:[]);calendarDays=r(()=>{if(!this.showCalendar())return[];const e=this.viewDate();const t=e.getFullYear();const n=e.getMonth();const a=(new Date(t,n,1).getDay()+6)%7;const i=new Date(t,n,1-a);const s=this.draftDate();const p=new Date;const u=[];for(let v=0;v<42;v++){const o=new Date(i);o.setDate(i.getDate()+v);const b=this.buildCandidateDate(o);u.push({key:`${o.getFullYear()}-${o.getMonth()}-${o.getDate()}`,date:o,day:o.getDate(),outsideMonth:o.getMonth()!==n,isToday:this.isSameDate(o,p),isSelected:s?this.isSameDate(o,s):false,disabled:!this.model().isWithinRange(b)})}return u},...ngDevMode?[{debugName:"calendarDays"}]:[]);selectedHour=r(()=>this.padValue(this.draftDate()?.getHours()??0),...ngDevMode?[{debugName:"selectedHour"}]:[]);selectedMinute=r(()=>this.padValue(this.draftDate()?.getMinutes()??0),...ngDevMode?[{debugName:"selectedMinute"}]:[]);selectedSecond=r(()=>this.padValue(this.draftDate()?.getSeconds()??0),...ngDevMode?[{debugName:"selectedSecond"}]:[]);minLabel=r(()=>{this.dataVersion();return this.resolveBoundDisplayValue(this.model()?.minValue)},...ngDevMode?[{debugName:"minLabel"}]:[]);maxLabel=r(()=>{this.dataVersion();return this.resolveBoundDisplayValue(this.model()?.maxValue)},...ngDevMode?[{debugName:"maxLabel"}]:[]);canApply=r(()=>{const e=this.draftDate();if(!e)return false;return this.model().isWithinRange(e)},...ngDevMode?[{debugName:"canApply"}]:[]);canSelectToday=r(()=>{const e=new Date;e.setHours(0,0,0,0);return this.model().isWithinRange(e)},...ngDevMode?[{debugName:"canSelectToday"}]:[]);onDataValueChangedHandler=()=>{this.dataVersion.update(e=>e+1)};ngOnInit(){this.model().boundExpressionEvaluator=e=>this.expressionService.evaluateInlineExpression(e,this.model());if(this.model()?.parentElement&&this.model()?.parentElement instanceof N)this.useCompactStyle.set(this.model()?.parentElement["useCompactStyle"]);this.dataService.onValueChanged.add(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.add(this.onDataValueChangedHandler);this.syncDraftFromModel();this.dropdownCoordinatorSubscription=this.dropdownCoordinatorService.activeDropdownId$.subscribe(e=>{if(!this.isOpen())return;if(!e)return;if(e===this.dropdownId)return;if(this.isNestedDropdownInteraction())return;this.closePanel(true)})}ngOnDestroy(){this.dataService.onValueChanged.remove(this.onDataValueChangedHandler);this.eventService.afterPropertyChanged.remove(this.onDataValueChangedHandler);this.dropdownCoordinatorSubscription?.unsubscribe();this.dropdownCoordinatorSubscription=null;this.dropdownCoordinatorService.requestClose(this.dropdownId)}onDocumentMouseDown(e){if(!this.isOpen())return;const t=e.target;if(!t)return;if(!this.hostElement.nativeElement.contains(t))this.closePanel(true)}onEscapePressed(){if(!this.isOpen())return;this.closePanel(true)}onWindowResize(){if(!this.isOpen())return;this.calculatePanelPosition()}onDocumentScroll(){if(!this.isOpen())return;this.calculatePanelPosition()}togglePanel(e){e.preventDefault();e.stopPropagation();if(this.model().disabled||this.model().readOnly)return;if(this.isOpen()){this.closePanel(true);return}this.openPanel()}previousMonth(e){e.preventDefault();e.stopPropagation();if(!this.showCalendar())return;const t=new Date(this.viewDate());t.setMonth(t.getMonth()-1);this.viewDate.set(new Date(t.getFullYear(),t.getMonth(),1))}nextMonth(e){e.preventDefault();e.stopPropagation();if(!this.showCalendar())return;const t=new Date(this.viewDate());t.setMonth(t.getMonth()+1);this.viewDate.set(new Date(t.getFullYear(),t.getMonth(),1))}onMonthPickerChange(e){const t=e.target;const n=Number(t?.value??"");if(!Number.isFinite(n))return;this.updateCalendarView(this.viewDate().getFullYear(),this.clampValue(n,0,11))}onYearPickerChange(e){const t=e.target;const n=Number(t?.value??"");if(!Number.isFinite(n))return;this.updateCalendarView(Math.floor(n),this.viewDate().getMonth())}selectDay(e,t){t.preventDefault();t.stopPropagation();if(e.disabled)return;const n=this.getDraftDateOrNow();n.setFullYear(e.date.getFullYear(),e.date.getMonth(),e.date.getDate());if(this.mode()==="date")n.setHours(0,0,0,0);else if(!this.includeSeconds())n.setSeconds(0,0);this.draftDate.set(n);this.viewDate.set(new Date(e.date.getFullYear(),e.date.getMonth(),1));this.runActions("input",this.model().formatDateForOutput(n));if(this.mode()==="date")this.applySelection()}selectHour(e,t){t.preventDefault();t.stopPropagation();this.updateDraftTimePart(e,"hour")}selectMinute(e,t){t.preventDefault();t.stopPropagation();this.updateDraftTimePart(e,"minute")}selectSecond(e,t){t.preventDefault();t.stopPropagation();this.updateDraftTimePart(e,"second")}isHourSelected(e){return this.selectedHour()===this.padValue(e)}isMinuteSelected(e){return this.selectedMinute()===this.padValue(e)}isSecondSelected(e){return this.selectedSecond()===this.padValue(e)}clearSelection(e){e.preventDefault();e.stopPropagation();this.draftDate.set(null);this.model().setValueFromDate(null,"change");this.validatorService.handleElementBlur(this.model());this.dataVersion.update(t=>t+1);this.runActions("input",null);this.runActions("change",null);this.closePanel(true)}selectToday(e){e.preventDefault();e.stopPropagation();const t=new Date;const n=this.getDraftDateOrNow();n.setFullYear(t.getFullYear(),t.getMonth(),t.getDate());if(this.mode()==="date")n.setHours(0,0,0,0);else if(!this.includeSeconds())n.setSeconds(0,0);this.draftDate.set(n);this.viewDate.set(new Date(t.getFullYear(),t.getMonth(),1));this.runActions("input",this.model().formatDateForOutput(n));if(this.mode()==="date")this.applySelection()}applySelection(e){e?.preventDefault();e?.stopPropagation();const t=this.draftDate();if(!t)return;const n=new Date(t);if(this.mode()==="date")n.setHours(0,0,0,0);if(!this.includeSeconds())n.setSeconds(0,0);if(!this.model().isWithinRange(n))return;this.model().setValueFromDate(n,"change");this.dataVersion.update(a=>a+1);this.runActions("change",this.model().value);this.closePanel(true)}padValue(e){return String(Math.max(0,Math.min(99,Math.floor(e)))).padStart(2,"0")}openPanel(){this.syncDraftFromModel();this.calculatePanelPosition();this.dropdownCoordinatorService.requestClose();this.dropdownCoordinatorService.requestOpen(this.dropdownId);this.isOpen.set(true);this.scrollSelectedTimeOptionsIntoView();this.runActions("focus",this.model().value)}scrollSelectedTimeOptionsIntoView(){if(!this.showTime()||typeof window==="undefined")return;window.setTimeout(()=>{if(!this.isOpen())return;this.hostElement.nativeElement.querySelectorAll(".nvb-datepicker__time-list").forEach(e=>{const t=e.querySelector(".nvb-datepicker__time-option--selected");if(!t)return;e.scrollTop=Math.max(0,t.offsetTop-e.clientHeight/2+t.offsetHeight/2)})})}calculatePanelPosition(){const e=this.resolveEstimatedPanelHeight();const t=this.resolvePreferredPanelWidth();const n=this.hostElement.nativeElement.querySelector(".nvb-datepicker__trigger");if(!n){this.panelPosition.set("bottom");this.panelMaxHeight.set(e);this.panelLeft.set(0);this.panelTop.set(0);this.panelBottom.set(null);this.panelMinWidth.set(t);this.panelWidth.set(t);return}const a=n.getBoundingClientRect();const i=Math.max(window.innerWidth??0,0);const s=Math.max(window.innerHeight??0,0);const p=Math.min(t,Math.max(Math.min(t,260),i-this.panelBoundaryPadding*2));const u=this.panelBoundaryPadding;const v=Math.max(u,i-p-this.panelBoundaryPadding);const o=Math.min(Math.max(a.left,u),v);const b=Math.max(0,s-a.bottom-this.panelBoundaryPadding-this.panelVerticalGap);const y=Math.max(0,a.top-this.panelBoundaryPadding-this.panelVerticalGap);const h=b<Math.min(e,260)&&y>b;const M=Math.min(e,Math.max(180,h?y:b));const g=H(n);this.panelPosition.set(h?"top":"bottom");this.panelMaxHeight.set(M);this.panelLeft.set(o-g.left);if(h){this.panelTop.set(null);this.panelBottom.set(g.bottom-a.top+this.panelVerticalGap)}else{this.panelTop.set(a.bottom+this.panelVerticalGap-g.top);this.panelBottom.set(null)}this.panelMinWidth.set(p);this.panelWidth.set(p)}resolvePreferredPanelWidth(){const e=this.showCalendar()?314:0;const t=this.showTime()?this.resolveTimeColumnsWidth():0;return e+(e&&t?8:0)+t+this.panelPadding*2}resolveTimeColumnsWidth(){const e=this.includeSeconds()?3:2;return e*this.timeColumnWidth+(e-1)*4}resolveEstimatedPanelHeight(){if(this.showCalendar())return 380;return 340}closePanel(e){if(!this.isOpen())return;this.isOpen.set(false);this.dropdownCoordinatorService.requestClose(this.dropdownId);if(e){this.validatorService.handleElementBlur(this.model());this.runActions("blur",this.model().value)}}isNestedDropdownInteraction(){const e=this.resolveActiveElement();return Boolean(e&&this.hostElement.nativeElement.contains(e))}resolveActiveElement(){const e=this.hostElement.nativeElement.getRootNode();if(typeof ShadowRoot!=="undefined"&&e instanceof ShadowRoot)return e.activeElement;if(e instanceof Document)return e.activeElement;if(typeof document!=="undefined")return document.activeElement;return null}syncDraftFromModel(){const e=this.model().parseValue(this.model()?.value)??this.model().resolveBoundDate(this.model()?.minValue)??new Date;const t=new Date(e);if(this.mode()==="date")t.setHours(0,0,0,0);if(!this.includeSeconds())t.setSeconds(0,0);this.draftDate.set(t);if(this.showCalendar())this.viewDate.set(new Date(t.getFullYear(),t.getMonth(),1))}resolveYearBounds(){const e=this.model().resolveBoundDate(this.model()?.minValue);const t=this.model().resolveBoundDate(this.model()?.maxValue);const n=new Date().getFullYear();const a=this.viewDate().getFullYear();let i=e?.getFullYear()??Math.min(n,a)-120;let s=t?.getFullYear()??Math.max(n,a)+20;if(i>s)[i,s]=[s,i];return{minYear:i,maxYear:s}}updateCalendarView(e,t){if(!this.showCalendar())return;const n=new Date(e,t,1);if(Number.isNaN(n.getTime()))return;this.viewDate.set(n)}updateDraftTimePart(e,t){const n=Number(e);if(!Number.isFinite(n))return;const a=this.getDraftDateOrNow();if(t==="hour")a.setHours(this.clampValue(n,0,23));else if(t==="minute")a.setMinutes(this.clampValue(n,0,59));else a.setSeconds(this.clampValue(n,0,59));if(!this.includeSeconds())a.setSeconds(0,0);this.draftDate.set(a);this.runActions("input",this.model().formatDateForOutput(a))}buildCandidateDate(e){const t=new Date(e);if(this.mode()==="date"){t.setHours(0,0,0,0);return t}const n=this.draftDate()??this.getDraftDateOrNow();t.setHours(n.getHours(),n.getMinutes(),this.includeSeconds()?n.getSeconds():0,0);return t}buildWeekDayLabels(){const e=new Intl.DateTimeFormat(this.resolveLocale(),{weekday:"short"});const t=new Date(2024,0,1);return Array.from({length:7},(n,a)=>{const i=new Date(t);i.setDate(t.getDate()+a);return e.format(i)})}getDraftDateOrNow(){const e=this.draftDate();if(e)return new Date(e);const t=this.model().parseValue(this.model()?.value);if(t)return new Date(t);return new Date}clampValue(e,t,n){return Math.max(t,Math.min(n,Math.floor(e)))}isSameDate(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate()}resolveBoundDisplayValue(e){const t=String(e??"").trim();if(!t)return"";const n=this.model().resolveBoundDate(t);if(n)return this.resolveDisplayValue(this.model().formatDateForOutput(n));return this.resolveDisplayValue(e)}resolveDisplayValue(e){if(this.model().hasOutputFormatOverride())return this.model().toDisplayValue(e);const t=this.model().parseValue(e);if(!t)return this.model().toDisplayValue(e);return this.localeFormatService.formatDateTimeValue(t,this.mode(),this.includeSeconds(),this.resolveLocale())}resolveLocale(){return this.localeFormatService.resolveLocale()}runActions(e,t){const n=t!==void 0?t:this.model().value;const a=String(this.model().name??"").trim();const i={value:n,item:null,row:null};if(a)i[a]=n;this.elementActionService.runActions(this.model(),this.model().events??[],e,i)}static ɵfac=d.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"22.2.1",ngImport:d,type:_,deps:[],target:d.ɵɵFactoryTarget.Component});static ɵcmp=d.ɵɵngDeclareComponent({minVersion:"17.0.0",version:"22.2.1",type:_,isStandalone:true,selector:"datepicker-element",inputs:{model:{classPropertyName:"model",publicName:"model",isSignal:true,isRequired:true,transformFunction:null}},host:{listeners:{"document:mousedown":"onDocumentMouseDown($event)","document:keydown.escape":"onEscapePressed()","window:resize":"onWindowResize()","document:scroll":"onDocumentScroll()"}},ngImport:d,template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div\n    class=\"nvb-datepicker\"\n    [ngClass]=\"{ 'nvb-datepicker--compact': useCompactStyle(), 'nvb-datepicker--open': isOpen() }\"\n  >\n    <button\n      type=\"button\"\n      class=\"nvb-datepicker__trigger\"\n      [disabled]=\"model().disabled\"\n      [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n      [attr.aria-required]=\"model().required ? 'true' : null\"\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n      [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.data-testid]=\"tid('trigger')\"\n      (click)=\"togglePanel($event)\"\n    >\n      <span\n        class=\"nvb-datepicker__value\"\n        [class.nvb-datepicker__value--placeholder]=\"!displayValue()\"\n      >\n        @if (displayValue()) {\n          {{ displayValue() }}\n        } @else if (model().placeholder) {\n          {{ model().placeholder | dynamicText: model() }}\n        } @else {\n          {{ 'datePicker.select' | uiT: 'Select date' }}\n        }\n      </span>\n\n      <span class=\"material-symbols-outlined nvb-datepicker__icon\">calendar_month</span>\n    </button>\n\n    @if (isOpen()) {\n      <div\n        class=\"nvb-datepicker__panel\"\n        role=\"dialog\"\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\n        [attr.data-testid]=\"tid('popup')\"\n        [style.--nvb-datepicker-panel-max-height.px]=\"panelMaxHeight()\"\n        [style.left.px]=\"panelLeft()\"\n        [style.top]=\"panelTop() !== null ? panelTop() + 'px' : 'auto'\"\n        [style.bottom]=\"panelBottom() !== null ? panelBottom() + 'px' : 'auto'\"\n        [style.min-width.px]=\"panelMinWidth()\"\n        [style.width.px]=\"panelWidth()\"\n        (mousedown)=\"$event.stopPropagation()\"\n      >\n        <div class=\"nvb-datepicker__body\">\n          @if (showCalendar()) {\n            <div class=\"nvb-datepicker__calendar\">\n              <div class=\"nvb-datepicker__calendar-header\">\n                <button\n                  type=\"button\"\n                  class=\"nvb-datepicker__nav\"\n                  (click)=\"previousMonth($event)\"\n                  [attr.aria-label]=\"'datePicker.previousMonth' | uiT: 'Previous month'\"\n                  [attr.data-testid]=\"tid('prev-month')\"\n                >\n                  <span class=\"material-symbols-outlined\">chevron_left</span>\n                </button>\n\n                <div class=\"nvb-datepicker__calendar-selectors\">\n                  <nvb-select [testId]=\"tid('month-select')\"\n                    class=\"nvb-datepicker__calendar-select nvb-datepicker__calendar-select--month\"\n                    [value]=\"selectedMonth()\"\n                    (change)=\"onMonthPickerChange($event)\"\n                  >\n                    @for (month of monthOptions(); track month.value) {\n                      <option [value]=\"month.value\">{{ month.label }}</option>\n                    }\n                  </nvb-select>\n\n                  <nvb-select [testId]=\"tid('year-select')\"\n                    class=\"nvb-datepicker__calendar-select nvb-datepicker__calendar-select--year\"\n                    [value]=\"selectedYear()\"\n                    (change)=\"onYearPickerChange($event)\"\n                  >\n                    @for (year of yearOptions(); track year.value) {\n                      <option [value]=\"year.value\">{{ year.label }}</option>\n                    }\n                  </nvb-select>\n                </div>\n\n                <button\n                  type=\"button\"\n                  class=\"nvb-datepicker__nav\"\n                  (click)=\"nextMonth($event)\"\n                  [attr.aria-label]=\"'datePicker.nextMonth' | uiT: 'Next month'\"\n                  [attr.data-testid]=\"tid('next-month')\"\n                >\n                  <span class=\"material-symbols-outlined\">chevron_right</span>\n                </button>\n              </div>\n\n              <div class=\"nvb-datepicker__weekdays\" aria-hidden=\"true\">\n                @for (weekday of weekDays(); track weekday + $index) {\n                  <span>{{ weekday }}</span>\n                }\n              </div>\n\n              <div class=\"nvb-datepicker__days\">\n                @for (day of calendarDays(); track day.key) {\n                  <button\n                    type=\"button\"\n                    class=\"nvb-datepicker__day\"\n                    [class.nvb-datepicker__day--outside]=\"day.outsideMonth\"\n                    [class.nvb-datepicker__day--today]=\"day.isToday\"\n                    [class.nvb-datepicker__day--selected]=\"day.isSelected\"\n                    [disabled]=\"day.disabled\"\n                    [attr.aria-label]=\"day.key\"\n                    [attr.aria-pressed]=\"day.isSelected\"\n                    [attr.data-testid]=\"tid('day', day.key)\"\n                    (click)=\"selectDay(day, $event)\"\n                  >\n                    {{ day.day }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n\n          @if (showTime()) {\n            <div class=\"nvb-datepicker__time\" [attr.data-testid]=\"tid('time')\">\n              <div class=\"nvb-datepicker__time-column\">\n                <span class=\"nvb-datepicker__time-heading\" aria-hidden=\"true\">HH</span>\n                <div\n                  class=\"nvb-datepicker__time-list\"\n                  role=\"listbox\"\n                  [attr.aria-label]=\"'datePicker.hours' | uiT: 'Hours'\"\n                  [attr.data-testid]=\"tid('hours')\"\n                >\n                  @for (hour of hours; track hour) {\n                    <button\n                      type=\"button\"\n                      role=\"option\"\n                      class=\"nvb-datepicker__time-option\"\n                      [class.nvb-datepicker__time-option--selected]=\"isHourSelected(hour)\"\n                      [attr.aria-selected]=\"isHourSelected(hour)\"\n                      [attr.data-testid]=\"tid('hour', padValue(hour))\"\n                      (click)=\"selectHour(hour, $event)\"\n                    >\n                      {{ padValue(hour) }}\n                    </button>\n                  }\n                </div>\n              </div>\n\n              <div class=\"nvb-datepicker__time-column\">\n                <span class=\"nvb-datepicker__time-heading\" aria-hidden=\"true\">mm</span>\n                <div\n                  class=\"nvb-datepicker__time-list\"\n                  role=\"listbox\"\n                  [attr.aria-label]=\"'datePicker.minutes' | uiT: 'Minutes'\"\n                  [attr.data-testid]=\"tid('minutes')\"\n                >\n                  @for (minute of minutes; track minute) {\n                    <button\n                      type=\"button\"\n                      role=\"option\"\n                      class=\"nvb-datepicker__time-option\"\n                      [class.nvb-datepicker__time-option--selected]=\"isMinuteSelected(minute)\"\n                      [attr.aria-selected]=\"isMinuteSelected(minute)\"\n                      [attr.data-testid]=\"tid('minute', padValue(minute))\"\n                      (click)=\"selectMinute(minute, $event)\"\n                    >\n                      {{ padValue(minute) }}\n                    </button>\n                  }\n                </div>\n              </div>\n\n              @if (includeSeconds()) {\n                <div class=\"nvb-datepicker__time-column\">\n                  <span class=\"nvb-datepicker__time-heading\" aria-hidden=\"true\">ss</span>\n                  <div\n                    class=\"nvb-datepicker__time-list\"\n                    role=\"listbox\"\n                    [attr.aria-label]=\"'datePicker.seconds' | uiT: 'Seconds'\"\n                    [attr.data-testid]=\"tid('seconds')\"\n                  >\n                    @for (second of seconds; track second) {\n                      <button\n                        type=\"button\"\n                        role=\"option\"\n                        class=\"nvb-datepicker__time-option\"\n                        [class.nvb-datepicker__time-option--selected]=\"isSecondSelected(second)\"\n                        [attr.aria-selected]=\"isSecondSelected(second)\"\n                        [attr.data-testid]=\"tid('second', padValue(second))\"\n                        (click)=\"selectSecond(second, $event)\"\n                      >\n                        {{ padValue(second) }}\n                      </button>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n        </div>\n\n        @if (minLabel() || maxLabel()) {\n          <div class=\"nvb-datepicker__range-hint\">\n            @if (minLabel()) {\n              <span>{{ 'datePicker.min' | uiT: 'Min' }}: {{ minLabel() }}</span>\n            }\n            @if (maxLabel()) {\n              <span>{{ 'datePicker.max' | uiT: 'Max' }}: {{ maxLabel() }}</span>\n            }\n          </div>\n        }\n\n        <div class=\"nvb-datepicker__actions\">\n          @if (showCalendar()) {\n            <button\n              type=\"button\"\n              class=\"nvb-datepicker__action nvb-datepicker__action--today\"\n              [disabled]=\"!canSelectToday()\"\n              (click)=\"selectToday($event)\"\n              [attr.data-testid]=\"tid('today')\"\n            >\n              {{ 'datePicker.today' | uiT: 'Today' }}\n            </button>\n          }\n          <button\n            type=\"button\"\n            class=\"nvb-datepicker__action\"\n            (click)=\"clearSelection($event)\"\n            [attr.data-testid]=\"tid('clear')\"\n          >\n            {{ 'datePicker.clear' | uiT: 'Isvalyti' }}\n          </button>\n\n          @if (mode() !== 'date') {\n            <button\n              type=\"button\"\n              class=\"nvb-datepicker__action nvb-datepicker__action--primary\"\n              [disabled]=\"!canApply()\"\n              (click)=\"applySelection($event)\"\n              [attr.data-testid]=\"tid('apply')\"\n            >\n              {{ 'datePicker.apply' | uiT: 'Apply' }}\n            </button>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size)}.nvb-control__text-input,.nvb-control__column-input{width:100%}.nvb-datepicker{position:relative;width:100%;overflow:visible}.nvb-datepicker--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-datepicker__trigger{width:100%;min-height:var(--nvb-input-height, 40px);border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-input-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;color:var(--nvb-color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size);line-height:20px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-datepicker__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-datepicker__trigger:focus-visible{border-color:var(--nvb-color-primary-500);box-shadow:var(--nvb-focus-ring);outline:0}.nvb-datepicker__value{text-align:left;font-size:var(--nvb-input-font-size);line-height:20px}.nvb-datepicker__value--placeholder{color:var(--nvb-color-neutral-500)}.nvb-datepicker__icon{font-size:18px;color:var(--nvb-color-neutral-500)}.nvb-datepicker__panel{--nvb-datepicker-panel-max-height: 392px;position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);min-width:312px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-card-radius, var(--nvb-radius-md)));background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-16, 0 16px 32px color-mix(in oklab, var(--nvb-color-neutral-950) 14%, transparent));padding:8px;display:flex;flex-direction:column;gap:8px;max-height:var(--nvb-datepicker-panel-max-height);overflow:auto;overscroll-behavior:contain}.nvb-datepicker__calendar-header{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 32px;align-items:center;gap:8px}.nvb-datepicker__month{font-size:13px;font-weight:600;text-transform:capitalize;color:var(--nvb-color-neutral-700)}.nvb-datepicker__calendar-selectors{display:contents;min-width:0}.nvb-datepicker__calendar-select{width:100%;min-width:0;--nvb-input-height: 32px;--nvb-select-option-min-height: 32px;--nvb-select-option-padding-block: 4px}.nvb-datepicker__nav{width:32px;height:32px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}.nvb-datepicker__nav:hover{border-color:var(--nvb-color-neutral-400);background:var(--nvb-color-neutral-050);color:var(--nvb-color-neutral-800)}.nvb-datepicker__nav:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-datepicker__nav span{font-size:18px}.nvb-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-datepicker__weekdays span{min-height:24px;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:var(--nvb-color-neutral-500);font-weight:600}.nvb-datepicker__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-datepicker__day{height:32px;border:1px solid transparent;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:transparent;color:var(--nvb-color-neutral-700);font-size:12px;cursor:pointer}.nvb-datepicker__day:hover:not(:disabled){border-color:color-mix(in oklab,var(--nvb-color-primary-500) 36%,var(--nvb-color-neutral-300));background:color-mix(in oklab,var(--nvb-color-primary-050) 70%,var(--nvb-color-neutral-000))}.nvb-datepicker__day:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-datepicker__day:disabled{color:var(--nvb-color-neutral-400);cursor:not-allowed}.nvb-datepicker__day--outside{color:var(--nvb-color-neutral-400)}.nvb-datepicker__day--today{border-color:var(--nvb-color-primary-300)}.nvb-datepicker__day--selected{border-color:var(--nvb-color-primary-600);background:var(--nvb-color-primary-600);color:var(--nvb-color-neutral-000);font-weight:600}.nvb-datepicker__body{display:flex;align-items:stretch;gap:8px;min-height:0}.nvb-datepicker__calendar{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}.nvb-datepicker__time{display:flex;align-items:stretch;gap:4px;flex:0 0 auto;min-height:0}.nvb-datepicker__calendar+.nvb-datepicker__time{padding-left:8px;border-left:1px solid var(--nvb-color-neutral-200)}.nvb-datepicker__time-column{display:flex;flex-direction:column;gap:4px;flex:1 1 62px;min-width:58px;min-height:0}.nvb-datepicker__time-heading{text-align:center;font-size:11px;font-weight:600;color:var(--nvb-color-neutral-500)}.nvb-datepicker__time-list{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-height:0;max-height:264px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--nvb-color-neutral-200) transparent}.nvb-datepicker__time-list::-webkit-scrollbar{width:4px}.nvb-datepicker__time-list::-webkit-scrollbar-thumb{background:var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-sm)}.nvb-datepicker__time-option{flex-shrink:0;padding:6px 8px;border:1px solid transparent;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:transparent;color:var(--nvb-color-neutral-700);font-family:inherit;font-size:12px;font-variant-numeric:tabular-nums;text-align:center;cursor:pointer;transition:background-color .1s ease,border-color .1s ease,color .1s ease}.nvb-datepicker__time-option:hover{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 36%,var(--nvb-color-neutral-300));background:color-mix(in oklab,var(--nvb-color-primary-050) 70%,var(--nvb-color-neutral-000))}.nvb-datepicker__time-option:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-datepicker__time-option--selected,.nvb-datepicker__time-option--selected:hover{border-color:var(--nvb-color-primary-600);background:var(--nvb-color-primary-600);color:var(--nvb-color-neutral-000);font-weight:600}.nvb-datepicker__range-hint{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--nvb-color-neutral-500)}.nvb-datepicker__actions{display:flex;justify-content:flex-end;gap:6px}.nvb-datepicker__action{border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-700);cursor:pointer;font-size:12px;min-height:32px;padding:0 10px}.nvb-datepicker__action:disabled{cursor:not-allowed;opacity:.55}.nvb-datepicker__action--today{margin-right:auto}.nvb-datepicker__action--primary{border-color:var(--nvb-color-primary-600);background:var(--nvb-color-primary-600);color:var(--nvb-color-neutral-000)}.nvb-datepicker--compact .nvb-datepicker__panel{min-width:260px}@media(max-width:480px){.nvb-datepicker__calendar-header{gap:6px}.nvb-datepicker__calendar-selectors{display:contents}}\n"],dependencies:[{kind:"component",type:D,selector:"nvb-select",inputs:["value","disabled","required","filterable","filterThreshold","allowCustomValue","placeholder","testId"],outputs:["valueChange","change","focus","blur"]},{kind:"component",type:w,selector:"element-wrapper",inputs:["model","controlIdInput","labelForInput","groupRole","showTextWrapperInput"],exportAs:["elementWrapper"]},{kind:"directive",type:S,selector:"[ngClass]",inputs:["class","ngClass"]},{kind:"pipe",type:x,name:"dynamicText"},{kind:"pipe",type:k,name:"uiT"}],changeDetection:d.ChangeDetectionStrategy.OnPush})};d.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"22.2.1",ngImport:d,type:f,decorators:[{type:E,args:[{selector:"datepicker-element",changeDetection:I.OnPush,imports:[D,w,S,x,k],template:"<element-wrapper [model]=\"model()\" #fieldWrapper=\"elementWrapper\">\n  <div\n    class=\"nvb-datepicker\"\n    [ngClass]=\"{ 'nvb-datepicker--compact': useCompactStyle(), 'nvb-datepicker--open': isOpen() }\"\n  >\n    <button\n      type=\"button\"\n      class=\"nvb-datepicker__trigger\"\n      [disabled]=\"model().disabled\"\n      [ngClass]=\"this.useCompactStyle() ? 'nvb-control__column-input' : 'nvb-control__text-input'\"\n      [attr.aria-describedby]=\"fieldWrapper.describedByIds()\"\n      [attr.aria-errormessage]=\"fieldWrapper.isInvalid() ? fieldWrapper.errorId() : null\"\n      [attr.aria-invalid]=\"fieldWrapper.isInvalid() ? 'true' : null\"\n      [attr.aria-required]=\"model().required ? 'true' : null\"\n      [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n      [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\n      aria-haspopup=\"dialog\"\n      [attr.aria-expanded]=\"isOpen()\"\n      [attr.data-testid]=\"tid('trigger')\"\n      (click)=\"togglePanel($event)\"\n    >\n      <span\n        class=\"nvb-datepicker__value\"\n        [class.nvb-datepicker__value--placeholder]=\"!displayValue()\"\n      >\n        @if (displayValue()) {\n          {{ displayValue() }}\n        } @else if (model().placeholder) {\n          {{ model().placeholder | dynamicText: model() }}\n        } @else {\n          {{ 'datePicker.select' | uiT: 'Select date' }}\n        }\n      </span>\n\n      <span class=\"material-symbols-outlined nvb-datepicker__icon\">calendar_month</span>\n    </button>\n\n    @if (isOpen()) {\n      <div\n        class=\"nvb-datepicker__panel\"\n        role=\"dialog\"\n        [attr.aria-labelledby]=\"fieldWrapper.hasLabelText() ? fieldWrapper.labelId() : null\"\n        [attr.aria-label]=\"fieldWrapper.hasLabelText() ? null : model().label || model().name\"\n        [attr.data-testid]=\"tid('popup')\"\n        [style.--nvb-datepicker-panel-max-height.px]=\"panelMaxHeight()\"\n        [style.left.px]=\"panelLeft()\"\n        [style.top]=\"panelTop() !== null ? panelTop() + 'px' : 'auto'\"\n        [style.bottom]=\"panelBottom() !== null ? panelBottom() + 'px' : 'auto'\"\n        [style.min-width.px]=\"panelMinWidth()\"\n        [style.width.px]=\"panelWidth()\"\n        (mousedown)=\"$event.stopPropagation()\"\n      >\n        <div class=\"nvb-datepicker__body\">\n          @if (showCalendar()) {\n            <div class=\"nvb-datepicker__calendar\">\n              <div class=\"nvb-datepicker__calendar-header\">\n                <button\n                  type=\"button\"\n                  class=\"nvb-datepicker__nav\"\n                  (click)=\"previousMonth($event)\"\n                  [attr.aria-label]=\"'datePicker.previousMonth' | uiT: 'Previous month'\"\n                  [attr.data-testid]=\"tid('prev-month')\"\n                >\n                  <span class=\"material-symbols-outlined\">chevron_left</span>\n                </button>\n\n                <div class=\"nvb-datepicker__calendar-selectors\">\n                  <nvb-select [testId]=\"tid('month-select')\"\n                    class=\"nvb-datepicker__calendar-select nvb-datepicker__calendar-select--month\"\n                    [value]=\"selectedMonth()\"\n                    (change)=\"onMonthPickerChange($event)\"\n                  >\n                    @for (month of monthOptions(); track month.value) {\n                      <option [value]=\"month.value\">{{ month.label }}</option>\n                    }\n                  </nvb-select>\n\n                  <nvb-select [testId]=\"tid('year-select')\"\n                    class=\"nvb-datepicker__calendar-select nvb-datepicker__calendar-select--year\"\n                    [value]=\"selectedYear()\"\n                    (change)=\"onYearPickerChange($event)\"\n                  >\n                    @for (year of yearOptions(); track year.value) {\n                      <option [value]=\"year.value\">{{ year.label }}</option>\n                    }\n                  </nvb-select>\n                </div>\n\n                <button\n                  type=\"button\"\n                  class=\"nvb-datepicker__nav\"\n                  (click)=\"nextMonth($event)\"\n                  [attr.aria-label]=\"'datePicker.nextMonth' | uiT: 'Next month'\"\n                  [attr.data-testid]=\"tid('next-month')\"\n                >\n                  <span class=\"material-symbols-outlined\">chevron_right</span>\n                </button>\n              </div>\n\n              <div class=\"nvb-datepicker__weekdays\" aria-hidden=\"true\">\n                @for (weekday of weekDays(); track weekday + $index) {\n                  <span>{{ weekday }}</span>\n                }\n              </div>\n\n              <div class=\"nvb-datepicker__days\">\n                @for (day of calendarDays(); track day.key) {\n                  <button\n                    type=\"button\"\n                    class=\"nvb-datepicker__day\"\n                    [class.nvb-datepicker__day--outside]=\"day.outsideMonth\"\n                    [class.nvb-datepicker__day--today]=\"day.isToday\"\n                    [class.nvb-datepicker__day--selected]=\"day.isSelected\"\n                    [disabled]=\"day.disabled\"\n                    [attr.aria-label]=\"day.key\"\n                    [attr.aria-pressed]=\"day.isSelected\"\n                    [attr.data-testid]=\"tid('day', day.key)\"\n                    (click)=\"selectDay(day, $event)\"\n                  >\n                    {{ day.day }}\n                  </button>\n                }\n              </div>\n            </div>\n          }\n\n          @if (showTime()) {\n            <div class=\"nvb-datepicker__time\" [attr.data-testid]=\"tid('time')\">\n              <div class=\"nvb-datepicker__time-column\">\n                <span class=\"nvb-datepicker__time-heading\" aria-hidden=\"true\">HH</span>\n                <div\n                  class=\"nvb-datepicker__time-list\"\n                  role=\"listbox\"\n                  [attr.aria-label]=\"'datePicker.hours' | uiT: 'Hours'\"\n                  [attr.data-testid]=\"tid('hours')\"\n                >\n                  @for (hour of hours; track hour) {\n                    <button\n                      type=\"button\"\n                      role=\"option\"\n                      class=\"nvb-datepicker__time-option\"\n                      [class.nvb-datepicker__time-option--selected]=\"isHourSelected(hour)\"\n                      [attr.aria-selected]=\"isHourSelected(hour)\"\n                      [attr.data-testid]=\"tid('hour', padValue(hour))\"\n                      (click)=\"selectHour(hour, $event)\"\n                    >\n                      {{ padValue(hour) }}\n                    </button>\n                  }\n                </div>\n              </div>\n\n              <div class=\"nvb-datepicker__time-column\">\n                <span class=\"nvb-datepicker__time-heading\" aria-hidden=\"true\">mm</span>\n                <div\n                  class=\"nvb-datepicker__time-list\"\n                  role=\"listbox\"\n                  [attr.aria-label]=\"'datePicker.minutes' | uiT: 'Minutes'\"\n                  [attr.data-testid]=\"tid('minutes')\"\n                >\n                  @for (minute of minutes; track minute) {\n                    <button\n                      type=\"button\"\n                      role=\"option\"\n                      class=\"nvb-datepicker__time-option\"\n                      [class.nvb-datepicker__time-option--selected]=\"isMinuteSelected(minute)\"\n                      [attr.aria-selected]=\"isMinuteSelected(minute)\"\n                      [attr.data-testid]=\"tid('minute', padValue(minute))\"\n                      (click)=\"selectMinute(minute, $event)\"\n                    >\n                      {{ padValue(minute) }}\n                    </button>\n                  }\n                </div>\n              </div>\n\n              @if (includeSeconds()) {\n                <div class=\"nvb-datepicker__time-column\">\n                  <span class=\"nvb-datepicker__time-heading\" aria-hidden=\"true\">ss</span>\n                  <div\n                    class=\"nvb-datepicker__time-list\"\n                    role=\"listbox\"\n                    [attr.aria-label]=\"'datePicker.seconds' | uiT: 'Seconds'\"\n                    [attr.data-testid]=\"tid('seconds')\"\n                  >\n                    @for (second of seconds; track second) {\n                      <button\n                        type=\"button\"\n                        role=\"option\"\n                        class=\"nvb-datepicker__time-option\"\n                        [class.nvb-datepicker__time-option--selected]=\"isSecondSelected(second)\"\n                        [attr.aria-selected]=\"isSecondSelected(second)\"\n                        [attr.data-testid]=\"tid('second', padValue(second))\"\n                        (click)=\"selectSecond(second, $event)\"\n                      >\n                        {{ padValue(second) }}\n                      </button>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n          }\n        </div>\n\n        @if (minLabel() || maxLabel()) {\n          <div class=\"nvb-datepicker__range-hint\">\n            @if (minLabel()) {\n              <span>{{ 'datePicker.min' | uiT: 'Min' }}: {{ minLabel() }}</span>\n            }\n            @if (maxLabel()) {\n              <span>{{ 'datePicker.max' | uiT: 'Max' }}: {{ maxLabel() }}</span>\n            }\n          </div>\n        }\n\n        <div class=\"nvb-datepicker__actions\">\n          @if (showCalendar()) {\n            <button\n              type=\"button\"\n              class=\"nvb-datepicker__action nvb-datepicker__action--today\"\n              [disabled]=\"!canSelectToday()\"\n              (click)=\"selectToday($event)\"\n              [attr.data-testid]=\"tid('today')\"\n            >\n              {{ 'datePicker.today' | uiT: 'Today' }}\n            </button>\n          }\n          <button\n            type=\"button\"\n            class=\"nvb-datepicker__action\"\n            (click)=\"clearSelection($event)\"\n            [attr.data-testid]=\"tid('clear')\"\n          >\n            {{ 'datePicker.clear' | uiT: 'Isvalyti' }}\n          </button>\n\n          @if (mode() !== 'date') {\n            <button\n              type=\"button\"\n              class=\"nvb-datepicker__action nvb-datepicker__action--primary\"\n              [disabled]=\"!canApply()\"\n              (click)=\"applySelection($event)\"\n              [attr.data-testid]=\"tid('apply')\"\n            >\n              {{ 'datePicker.apply' | uiT: 'Apply' }}\n            </button>\n          }\n        </div>\n      </div>\n    }\n  </div>\n</element-wrapper>\n",styles:[":host{display:block;width:100%;font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size)}.nvb-control__text-input,.nvb-control__column-input{width:100%}.nvb-datepicker{position:relative;width:100%;overflow:visible}.nvb-datepicker--open{z-index:var(--nvb-floating-overlay-container-z-index, 2147482990)}.nvb-datepicker__trigger{width:100%;min-height:var(--nvb-input-height, 40px);border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-input-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);padding:0 10px;display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;color:var(--nvb-color-neutral-700);font-family:var(--nvb-font-family);font-size:var(--nvb-input-font-size);line-height:20px;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.nvb-datepicker__trigger:disabled{cursor:not-allowed;opacity:.7}.nvb-datepicker__trigger:focus-visible{border-color:var(--nvb-color-primary-500);box-shadow:var(--nvb-focus-ring);outline:0}.nvb-datepicker__value{text-align:left;font-size:var(--nvb-input-font-size);line-height:20px}.nvb-datepicker__value--placeholder{color:var(--nvb-color-neutral-500)}.nvb-datepicker__icon{font-size:18px;color:var(--nvb-color-neutral-500)}.nvb-datepicker__panel{--nvb-datepicker-panel-max-height: 392px;position:fixed;top:0;left:0;z-index:var(--nvb-floating-overlay-z-index, 2147483000);min-width:312px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-menu-radius, var(--nvb-card-radius, var(--nvb-radius-md)));background:var(--nvb-color-neutral-000);box-shadow:var(--nvb-shadow-16, 0 16px 32px color-mix(in oklab, var(--nvb-color-neutral-950) 14%, transparent));padding:8px;display:flex;flex-direction:column;gap:8px;max-height:var(--nvb-datepicker-panel-max-height);overflow:auto;overscroll-behavior:contain}.nvb-datepicker__calendar-header{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(0,1fr) 32px;align-items:center;gap:8px}.nvb-datepicker__month{font-size:13px;font-weight:600;text-transform:capitalize;color:var(--nvb-color-neutral-700)}.nvb-datepicker__calendar-selectors{display:contents;min-width:0}.nvb-datepicker__calendar-select{width:100%;min-width:0;--nvb-input-height: 32px;--nvb-select-option-min-height: 32px;--nvb-select-option-padding-block: 4px}.nvb-datepicker__nav{width:32px;height:32px;border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-600);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}.nvb-datepicker__nav:hover{border-color:var(--nvb-color-neutral-400);background:var(--nvb-color-neutral-050);color:var(--nvb-color-neutral-800)}.nvb-datepicker__nav:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-datepicker__nav span{font-size:18px}.nvb-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-datepicker__weekdays span{min-height:24px;display:inline-flex;align-items:center;justify-content:center;text-align:center;font-size:11px;color:var(--nvb-color-neutral-500);font-weight:600}.nvb-datepicker__days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.nvb-datepicker__day{height:32px;border:1px solid transparent;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:transparent;color:var(--nvb-color-neutral-700);font-size:12px;cursor:pointer}.nvb-datepicker__day:hover:not(:disabled){border-color:color-mix(in oklab,var(--nvb-color-primary-500) 36%,var(--nvb-color-neutral-300));background:color-mix(in oklab,var(--nvb-color-primary-050) 70%,var(--nvb-color-neutral-000))}.nvb-datepicker__day:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-datepicker__day:disabled{color:var(--nvb-color-neutral-400);cursor:not-allowed}.nvb-datepicker__day--outside{color:var(--nvb-color-neutral-400)}.nvb-datepicker__day--today{border-color:var(--nvb-color-primary-300)}.nvb-datepicker__day--selected{border-color:var(--nvb-color-primary-600);background:var(--nvb-color-primary-600);color:var(--nvb-color-neutral-000);font-weight:600}.nvb-datepicker__body{display:flex;align-items:stretch;gap:8px;min-height:0}.nvb-datepicker__calendar{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}.nvb-datepicker__time{display:flex;align-items:stretch;gap:4px;flex:0 0 auto;min-height:0}.nvb-datepicker__calendar+.nvb-datepicker__time{padding-left:8px;border-left:1px solid var(--nvb-color-neutral-200)}.nvb-datepicker__time-column{display:flex;flex-direction:column;gap:4px;flex:1 1 62px;min-width:58px;min-height:0}.nvb-datepicker__time-heading{text-align:center;font-size:11px;font-weight:600;color:var(--nvb-color-neutral-500)}.nvb-datepicker__time-list{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-height:0;max-height:264px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--nvb-color-neutral-200) transparent}.nvb-datepicker__time-list::-webkit-scrollbar{width:4px}.nvb-datepicker__time-list::-webkit-scrollbar-thumb{background:var(--nvb-color-neutral-200);border-radius:var(--nvb-radius-sm)}.nvb-datepicker__time-option{flex-shrink:0;padding:6px 8px;border:1px solid transparent;border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:transparent;color:var(--nvb-color-neutral-700);font-family:inherit;font-size:12px;font-variant-numeric:tabular-nums;text-align:center;cursor:pointer;transition:background-color .1s ease,border-color .1s ease,color .1s ease}.nvb-datepicker__time-option:hover{border-color:color-mix(in oklab,var(--nvb-color-primary-500) 36%,var(--nvb-color-neutral-300));background:color-mix(in oklab,var(--nvb-color-primary-050) 70%,var(--nvb-color-neutral-000))}.nvb-datepicker__time-option:focus-visible{outline:0;box-shadow:var(--nvb-focus-ring)}.nvb-datepicker__time-option--selected,.nvb-datepicker__time-option--selected:hover{border-color:var(--nvb-color-primary-600);background:var(--nvb-color-primary-600);color:var(--nvb-color-neutral-000);font-weight:600}.nvb-datepicker__range-hint{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--nvb-color-neutral-500)}.nvb-datepicker__actions{display:flex;justify-content:flex-end;gap:6px}.nvb-datepicker__action{border:1px solid var(--nvb-color-neutral-300);border-radius:var(--nvb-control-radius, var(--nvb-radius-md));background:var(--nvb-color-neutral-000);color:var(--nvb-color-neutral-700);cursor:pointer;font-size:12px;min-height:32px;padding:0 10px}.nvb-datepicker__action:disabled{cursor:not-allowed;opacity:.55}.nvb-datepicker__action--today{margin-right:auto}.nvb-datepicker__action--primary{border-color:var(--nvb-color-primary-600);background:var(--nvb-color-primary-600);color:var(--nvb-color-neutral-000)}.nvb-datepicker--compact .nvb-datepicker__panel{min-width:260px}@media(max-width:480px){.nvb-datepicker__calendar-header{gap:6px}.nvb-datepicker__calendar-selectors{display:contents}}\n"]}]}],propDecorators:{model:[{type:d.Input,args:[{isSignal:true,alias:"model",required:true}]}],onDocumentMouseDown:[{type:m,args:["document:mousedown",["$event"]]}],onEscapePressed:[{type:m,args:["document:keydown.escape"]}],onWindowResize:[{type:m,args:["window:resize"]}],onDocumentScroll:[{type:m,args:["document:scroll"]}]}});export{B as n,f as t};