@zanichelli/albe-web-components 19.3.0 → 19.5.0

package/dist/components/z-range-picker.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as r,h as a,transformTag as i}from"@stencil/core/internal/client";import{f as n,i as o,s as l,v as p,a as c}from"./utils2.js";import{H as s,G as d,I as f,f as h}from"./index2.js";import{d as m}from"./index3.js";import{d as k}from"./index7.js";import{d as u}from"./index8.js";const b=()=>`.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{left:0}.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{right:0}.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer+.dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.flatpickr-monthSelect-months{margin:10px 1px 3px 1px;flex-wrap:wrap}.flatpickr-monthSelect-month{background:none;border:1px solid transparent;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;display:inline-block;font-weight:400;margin:0.5px;justify-content:center;padding:10px;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;text-align:center;width:33%}.flatpickr-monthSelect-month.flatpickr-disabled{color:#eee}.flatpickr-monthSelect-month.flatpickr-disabled:hover,.flatpickr-monthSelect-month.flatpickr-disabled:focus{cursor:not-allowed;background:none !important}.flatpickr-monthSelect-theme-dark{background:#3f4458}.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year{color:#fff}.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month,.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month{color:#fff;fill:#fff}.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month{color:rgba(255, 255, 255, 0.95)}.flatpickr-monthSelect-month.today{border-color:#959ea9}.flatpickr-monthSelect-month.inRange,.flatpickr-monthSelect-month.inRange.today,.flatpickr-monthSelect-month:hover,.flatpickr-monthSelect-month:focus{background:#e6e6e6;cursor:pointer;outline:0;border-color:#e6e6e6}.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.inRange,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus{background:#646c8c;border-color:#646c8c}.flatpickr-monthSelect-month.today:hover,.flatpickr-monthSelect-month.today:focus{background:#959ea9;border-color:#959ea9;color:#fff}.flatpickr-monthSelect-month.selected,.flatpickr-monthSelect-month.startRange,.flatpickr-monthSelect-month.endRange{background-color:#569ff7;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-monthSelect-month.startRange{border-radius:50px 0 0 50px}.flatpickr-monthSelect-month.endRange{border-radius:0 50px 50px 0}.flatpickr-monthSelect-month.startRange.endRange{border-radius:50px}.flatpickr-monthSelect-month.inRange{border-radius:0;box-shadow:-5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6}.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.startRange,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.endRange{background:#80cbc4;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#80cbc4}:host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-range-picker--toggle-height:0}z-date-picker{position:relative}z-date-picker>div>*{cursor:pointer !important}z-range-picker{position:relative}.flatpickr-toggle-container{width:fit-content}.range-pickers-container>div{position:relative}.hidden-input{position:absolute;bottom:0;width:0;height:0;visibility:hidden !important}.flatpickr-calendar::before,.flatpickr-calendar::after{display:none}.flatpickr-calendar{position:absolute !important;top:var(--z-range-picker--toggle-height) !important;left:0 !important;padding-top:calc(var(--space-unit) * 2);border-radius:2px;box-shadow:var(--shadow-2);font-family:var(--font-family-sans) !important}.months.top>.flatpickr-calendar{top:-288px !important}.date.top>.flatpickr-calendar,.date.top>div>.flatpickr-calendar{top:-401px !important}.date-time.top>.flatpickr-calendar,.date-time.top>div>.flatpickr-calendar{top:-523px !important}.flatpickr-calendar,.flatpickr-innerContainer,.flatpickr-days,.dayContainer,.flatpickr-rContainer,.flatpickr-monthSelect-months{width:calc(var(--space-unit) * 42) !important;max-width:calc(var(--space-unit) * 42) !important}.flatpickr-monthSelect-months{box-sizing:border-box;padding:0 !important;margin:calc(var(--space-unit) * 2) 0 !important}.flatpickr-months{position:relative;height:calc(var(--space-unit) * 6) !important;align-items:center;margin-bottom:var(--space-unit) 0 !important}.flatpickr-month{overflow:visible !important;height:calc(var(--space-unit) * 6) !important}.flatpickr-current-month{left:0 !important;display:flex !important;width:fill-available;height:calc(var(--space-unit) * 6);align-items:baseline;justify-content:space-evenly;padding-top:0}.flatpickr-next-month,.flatpickr-prev-month{position:static !important;display:flex;width:calc(var(--space-unit) * 4) !important;height:calc(var(--space-unit) * 4) !important;align-items:center;justify-content:center;padding:0 !important}.flatpickr-prev-month{margin-left:var(--space-unit)}.flatpickr-next-month{margin-right:var(--space-unit)}.flatpickr-next-month>svg,.flatpickr-prev-month>svg{width:calc(var(--space-unit) * 2) !important;height:calc(var(--space-unit) * 2) !important;fill:var(--color-primary01)}.flatpickr-next-month:hover,.flatpickr-prev-month:hover,.flatpickr-next-month:focus,.flatpickr-prev-month:focus{border:none !important;border-color:var(--color-primary03) !important;background-color:var(--color-primary03) !important;border-radius:var(--border-radius);color:var(--color-hover-primary) !important;outline:none !important}.flatpickr-next-month:hover svg,.flatpickr-prev-month:hover svg{fill:var(--color-hover-primary) !important}.flatpickr-next-month:active,.flatpickr-prev-month:active{border-color:var(--color-surface01) !important;background-color:var(--color-surface01) !important;border-radius:var(--border-radius);box-shadow:var(--shadow-2) !important;color:var(--color-primary01) !important}.flatpickr-next-month:focus svg,.flatpickr-prev-month:focus svg{fill:var(--color-primary01) !important}.flatpickr-monthDropdown-months{width:108px !important;height:calc(var(--space-unit) * 5.5) !important;padding-left:var(--space-unit) !important;background:var(--color-surface01) !important;color:var(--color-default-text) !important;font-size:var(--font-size-3) !important;font-weight:var(--font-rg) !important;outline:1px solid black !important}.flatpickr-monthDropdown-months:hover,.flatpickr-monthDropdown-months:focus{outline:1px solid var(--color-primary01) !important}.flatpickr-current-month>.numInputWrapper{display:flex;width:calc(var(--space-unit) * 10);height:calc(var(--space-unit) * 5.5) !important;background:var(--color-surface01) !important;color:var(--color-default-text);outline:1px solid black !important}.flatpickr-current-month>.numInputWrapper:hover,.flatpickr-current-month>.numInputWrapper:focus-within{outline:1px solid var(--color-primary01) !important}.flatpickr-current-month>.numInputWrapper>input{padding:0 calc(var(--space-unit) * 3) 0 var(--space-unit);font-size:var(--font-size-3) !important;font-weight:var(--font-rg) !important;text-align:center}.flatpickr-weekdays{height:calc(var(--space-unit) * 6);border-bottom:1px solid var(--color-surface03)}.flatpickr-weekday{font-size:var(--font-size-3) !important;font-weight:var(--font-rg) !important}.flatpickr-day,.flatpickr-monthSelect-month{width:calc(var(--space-unit) * 6) !important;max-width:100% !important;height:calc(var(--space-unit) * 6) !important;border:none;margin:0 !important;border-radius:0 !important;box-shadow:none !important;font-size:var(--font-size-3) !important;line-height:calc(var(--space-unit) * 6) !important}.flatpickr-day{width:calc(var(--space-unit) * 6) !important;border:none;line-height:calc(var(--space-unit) * 6) !important}.flatpickr-monthSelect-month{width:calc(var(--space-unit) * 14) !important;padding:0 !important;border:2px solid var(--color-surface01) !important;line-height:calc(var(--space-unit) * 5) !important}.flatpickr-day:not(.flatpickr-disabled):hover,.flatpickr-day:not(.flatpickr-disabled):active,.flatpickr-day:not(.flatpickr-disabled):focus,.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:hover,.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:active,.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:focus,.flatpickr-day:not(.flatpickr-disabled).selected:hover,.flatpickr-day:not(.flatpickr-disabled).selected:active,.flatpickr-day:not(.flatpickr-disabled).selected:focus,.flatpickr-monthSelect-month:hover,.flatpickr-monthSelect-month:active,.flatpickr-monthSelect-month:focus{border-color:var(--color-hover-primary) !important;background-color:var(--color-hover-primary) !important;color:var(--color-text-inverse) !important}.flatpickr-day.today,.flatpickr-monthSelect-month.today{border:2px solid var(--color-hover-primary) !important}.flatpickr-day.selected:not(.flatpickr-disabled),.flatpickr-monthSelect-month.selected:not(.flatpickr-disabled){border-color:var(--color-primary01) !important;background-color:var(--color-primary01) !important}.flatpickr-weekday:nth-child(6),.flatpickr-weekday:nth-child(7),.flatpickr-day:nth-child(7n+6),.flatpickr-day:nth-child(7n+7){font-weight:var(--font-sb) !important}.flatpickr-time{display:block;height:90px !important;max-height:90px !important;text-align:left}.flatpickr-time::before{display:block;width:100%;padding-left:var(--space-unit);color:var(--color-default-text) !important;content:"Orario";font-size:var(--font-size-1);font-weight:var(--font-sb);text-transform:uppercase}.flatpickr-time.time24hr{margin:calc(var(--space-unit) * 2) !important}.flatpickr-time.time24hr>.numInputWrapper>input:hover,.flatpickr-time.time24hr>.numInputWrapper>input:focus,.flatpickr-time.time24hr>.numInputWrapper:hover{background-color:var(--color-surface01) !important}.flatpickr-time.time24hr>div{width:calc(var(--space-unit) * 10) !important;height:calc(var(--space-unit) * 5.5) !important;margin-right:var(--space-unit) !important;margin-left:var(--space-unit) !important}.flatpickr-time-separator{display:flex;height:calc(var(--space-unit) * 5.5) !important;align-items:center;justify-content:center;font-weight:unset !important}.flatpickr-minute,.flatpickr-hour{font-size:var(--font-size-3) !important;font-weight:var(--font-rg) !important;outline:1px solid black !important}.numInputWrapper:hover .flatpickr-minute,.numInputWrapper:hover .flatpickr-hour,.flatpickr-minute:focus,.flatpickr-hour:focus{outline:1px solid var(--color-primary01) !important}.arrowUp,.arrowDown{width:calc(var(--space-unit) * 2) !important;height:calc(var(--space-unit) * 2) !important;padding:0 !important;border:none !important;opacity:1 !important}.arrowUp{margin-top:calc(var(--space-unit) / 2) !important;margin-right:calc(var(--space-unit) / 2) !important}.arrowDown{top:auto !important;margin-top:calc(var(--space-unit) * 3) !important;margin-right:calc(var(--space-unit) / 2) !important}.arrowUp:hover,.arrowDown:hover{border-color:var(--color-primary03) !important;background-color:var(--color-primary03) !important;border-radius:var(--border-radius);color:var(--color-hover-primary) !important}.arrowUp:active,.arrowDown:active{border-color:var(--color-surface01) !important;background-color:var(--color-surface01) !important;border-radius:var(--border-radius);box-shadow:var(--shadow-2) !important;color:var(--color-primary01) !important}.arrowUp::after,.arrowDown::after{padding:2.5px !important;border:solid var(--color-primary01) !important;border-width:0 1px 1px 0 !important}.arrowUp::after{top:0 !important;margin-top:6px !important;margin-left:5.5px !important;transform:rotate(-135deg)}.arrowDown::after{top:0 !important;left:5.5px !important;margin-top:4px !important;transform:rotate(45deg)}.flatpickr-day:not(.flatpickr-disabled).inRange:hover,.flatpickr-day:not(.flatpickr-disabled).today.inRange:hover,.flatpickr-day.prevMonthDay:not(.flatpickr-disabled).inRange:hover,.flatpickr-monthSelect-month:not(.flatpickr-disabled).inRange:hover{border-color:var(--color-hover-primary) !important;background-color:var(--color-hover-primary) !important}.flatpickr-day:not(.flatpickr-disabled).inRange,.flatpickr-day:not(.flatpickr-disabled).today.inRange,.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.inRange,.flatpickr-monthSelect-month:not(.flatpickr-disabled).inRange{border-color:var(--color-primary03);background-color:var(--color-primary03)}.flatpickr-day:not(.flatpickr-disabled).startRange,.flatpickr-day:not(.flatpickr-disabled).endRange,.flatpickr-monthSelect-month:not(.flatpickr-disabled).startRange,.flatpickr-monthSelect-month:not(.flatpickr-disabled).endRange{border-color:var(--color-primary01) !important;background-color:var(--color-primary01) !important}.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.selected.startRange,.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.selected.endRange{border-color:var(--color-primary01) !important;background-color:var(--color-primary01) !important}.flatpickr-range.second-input{cursor:pointer}.range-pickers-container{display:flex;gap:16px}`;const g=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.dateSelect=r(this,"dateSelect",7);this.mode=s.DATE;this.firstPickerReadOnly=false;this.lastPickerReadOnly=false;this.firstPickerPlaceholder="";this.lastPickerPlaceholder="";this.flatpickrPosition=d.BOTTOM;this.activeInput="start-input";this.firstInputError=false;this.lastInputError=false}handleClick(){this.getFocusedInput()}handleKeyDown(t){var e,r,a,i,n,o;const l=this.activeInput==="start-input"?this.firstPicker:this.lastPicker;this.getFocusedInput();if(t.key==="Escape"){if(document.activeElement.classList.contains(`${this.rangePickerId}-1`)){(e=this.firstPicker)===null||e===void 0?void 0:e.close()}if(document.activeElement.classList.contains(`${this.rangePickerId}-2`)){(r=this.lastPicker)===null||r===void 0?void 0:r.close()}}if(t.key==="Enter"||t.key===" "){if(document.activeElement.classList.contains(`${this.rangePickerId}-1`)||document.activeElement.classList.contains(`${this.rangePickerId}-2`)){l===null||l===void 0?void 0:l.open()}const e=document.activeElement.classList.contains("reset-icon");if(e){if(this.activeInput==="start-input"){this.firstInputError=false;(a=this.firstPicker)===null||a===void 0?void 0:a.clear();this.printDate(null,((i=this.lastPicker)===null||i===void 0?void 0:i.selectedDates[0])||null)}if(this.activeInput==="end-input"){this.lastInputError=false;(n=this.firstPicker)===null||n===void 0?void 0:n.clear();this.printDate(((o=this.firstPicker)===null||o===void 0?void 0:o.selectedDates[0])||null,null)}}const r=document.activeElement.classList.contains("flatpickr-prev-month");const p=document.activeElement.classList.contains("flatpickr-next-month");const c=r||p;if(c&&t.key===" "){t.preventDefault()}if(r){l===null||l===void 0?void 0:l.changeMonth(-1)}if(p){l===null||l===void 0?void 0:l.changeMonth(1)}}}componentDidLoad(){this.setupPickers()}setupFirstPickersReadOnly(){var t;(t=this.firstPicker)===null||t===void 0?void 0:t.set("clickOpens",!this.firstPickerReadOnly)}setupLastPickersReadOnly(){var t;(t=this.lastPicker)===null||t===void 0?void 0:t.set("clickOpens",!this.lastPickerReadOnly)}setupPickers(){const t={enableTime:this.mode===s.DATE_TIME,locale:o.Italian,allowInput:true,wrap:true,dateFormat:this.mode===s.DATE_TIME?"d-m-Y - H:i":"d-m-Y",ariaDateFormat:"d F Y",minuteIncrement:1,time_24hr:true,onValueUpdate:()=>{const t=this.activeInput==="start-input";const e=this.firstPicker.selectedDates[0];const r=this.lastPicker.selectedDates[0];if(+e>+r){if(t){this.firstInputError=true;this.printDate(null,r||null)}else{this.lastInputError=true;this.printDate(e||null,null)}}else{this.lastInputError=false;this.firstInputError=false;this.printDate(e||null,r||null)}this.setRangeStyle(0);this.setRangeStyle(1)},onChange:(t,e,r)=>{this.onDateSelect();this.setRangeStyle(r.input.classList.contains("start-input")?0:1)},onOpen:(t,e,r)=>{l(this.element,this.mode);this.flatpickrPosition=c(this.element,this.mode);this.setRangeStyle(r.input.classList.contains("start-input")?0:1);this.getFocusedInput()},onYearChange:(t,e,r)=>{this.setRangeStyle(r.input.classList.contains("start-input")?0:1)},onMonthChange:(t,e,r)=>{this.setRangeStyle(r.input.classList.contains("start-input")?0:1)},onKeyDown:()=>{l(this.element,this.mode)}};this.firstPicker=n(`.${this.rangePickerId}-1-container`,Object.assign(Object.assign({},Object.assign(Object.assign({},t),{clickOpens:!this.firstPickerReadOnly})),{mode:"single",appendTo:this.element.querySelector(`.${this.rangePickerId}-1-wrapper`)}));this.lastPicker=n(`.${this.rangePickerId}-2-container`,Object.assign(Object.assign({},Object.assign(Object.assign({},t),{clickOpens:!this.lastPickerReadOnly})),{mode:"single",appendTo:this.element.querySelector(`.${this.rangePickerId}-2-wrapper`)}));this.element.querySelectorAll(".flatpickr-weekday").forEach((t=>{t.innerHTML=t.innerHTML.trim().charAt(0)}))}onDateSelect(){const t=this.activeInput==="start-input";const e=this.firstPicker.selectedDates[0];const r=this.lastPicker.selectedDates[0];if(+e>+r){if(t){this.firstInputError=true;this.printDate(null,r||null)}else{this.lastInputError=true;this.printDate(e||null,null)}}else{this.lastInputError=false;this.firstInputError=false;this.printDate(e||null,r||null)}}disableDates(t,e){const r=this.element.getElementsByClassName("flatpickr-calendar")[e];Array.from(r.getElementsByClassName("flatpickr-day")).forEach((r=>{const a=this.getDateWithoutTime(this.replaceMonths(r.ariaLabel,null));const i=this.getDateWithoutTime(t);const n=e===0?a>i:a<i;if(n){r.classList.toggle("flatpickr-disabled",true)}else{r.classList.toggle("flatpickr-disabled",false)}}));l(this.element,this.mode)}formatDate(t){if(this.mode===s.DATE){return`${n.formatDate(t,"d-m-Y")}`}return`${n.formatDate(t,"d-m-Y - H:i")}`}printDate(t,e){const r=t?this.formatDate(t):null;const a=e?this.formatDate(e):null;this.dateSelect.emit([r,a])}getDateWithoutTime(t){const e=new Date(t.getFullYear(),t.getMonth(),t.getDate(),0,0);return e}replaceMonths(t,e){const r=t.split(" ")[1];const a={Gennaio:"01",Febbraio:"02",Marzo:"03",Aprile:"04",Maggio:"05",Giugno:"06",Luglio:"07",Agosto:"08",Settembre:"09",Ottobre:"10",Novembre:"11",Dicembre:"12"};const i=t.replace(r,a[r]).split(" ");return new Date(parseInt(i[2]),parseInt(i[1])-1,parseInt(i[0]),e?parseInt(e.split(":")[0]):0,e?parseInt(e.split(":")[1]):0)}getFocusedInput(){const t=document.activeElement.closest("z-input");if(!t){return}if(t===null||t===void 0?void 0:t.classList.contains("start-input")){this.activeInput="start-input"}else if(t.classList.contains("end-input")){this.activeInput="end-input"}}setRangeStyle(t){Array.from(this.element.getElementsByClassName("flatpickr-calendar")).forEach((e=>{Array.from(e.getElementsByClassName("flatpickr-day")).forEach((e=>{const r=this.firstPicker.selectedDates.length===1;const a=this.lastPicker.selectedDates.length===1;let i;let n;const o=this.getDateWithoutTime(this.replaceMonths(e.ariaLabel,null));if(r){i=this.getDateWithoutTime(this.firstPicker.selectedDates[0]);if(+o===+i){e.classList.toggle("startRange",true)}else{e.classList.toggle("startRange",false)}}if(a){n=this.getDateWithoutTime(this.lastPicker.selectedDates[0]);if(+o===+n){e.classList.toggle("endRange",true)}else{e.classList.toggle("endRange",false)}}if(r&&a){if(o>i&&o<n){e.classList.toggle("inRange",true)}else{e.classList.toggle("inRange",false)}}if(t===0&&a){this.disableDates(this.lastPicker.selectedDates[0],t)}if(t===1&&r){this.disableDates(this.firstPicker.selectedDates[0],t)}}))}))}onStopTyping(t){const e=t.detail.value.replace("/","-");const r=e.split("-");const a=this.mode===s.DATE_TIME?`T${r[3]}:00`:"";const i=`${r[2]}-${r[1]}-${r[0]}${a}`.split(" ").join("");const n=p(e,this.mode===s.DATE_TIME);const o=Date.parse(i).toString();if(this.activeInput==="start-input"){if(e===""){this.firstInputError=false;this.firstPicker.setDate([]);this.printDate(null,this.lastPicker.selectedDates[0]||null)}else if(!n){this.firstInputError=true;this.printDate(null,this.lastPicker.selectedDates[0]||null)}else if(n){if(this.lastPicker.selectedDates.length===1){if(+o<=+this.lastPicker.selectedDates[0]){this.firstInputError=false;this.firstPicker.setDate([e]);this.printDate(new Date(i),this.lastPicker.selectedDates[0])}else{this.firstInputError=true;this.printDate(null,this.lastPicker.selectedDates[0])}}else{this.firstInputError=false;this.firstPicker.setDate([e]);this.printDate(new Date(i),null)}}}else if(e===""){this.lastInputError=false;this.lastPicker.setDate([]);this.printDate(this.firstPicker.selectedDates[0]||null,null)}else if(!n){this.lastInputError=true;this.printDate(this.firstPicker.selectedDates[0]||null,null)}else if(n){if(this.firstPicker.selectedDates.length===1){if(+o>=+this.firstPicker.selectedDates[0]){this.lastInputError=false;this.lastPicker.setDate([e]);this.printDate(this.firstPicker.selectedDates[0],new Date(i))}else{this.lastInputError=true;this.printDate(this.firstPicker.selectedDates[0],null)}}else{this.lastInputError=false;this.lastPicker.setDate([e]);this.printDate(null,new Date(i))}}this.setRangeStyle(this.activeInput==="start-input"?0:1)}render(){const t={type:f.TEXT,icon:"event",tabindex:"0",message:false,onStopTyping:this.onStopTyping.bind(this),value:""};return a("div",{key:"d2d94a3237b1659fd6ba789ed36717cb74eb7656",class:{["range-pickers-container"]:true,[this.mode]:true,[this.activeInput]:true,[this.flatpickrPosition]:true}},a("div",{key:"d6a31c6bf63475ae192d207b84910801d1dc9812",class:`${this.rangePickerId}-1-wrapper`},a("div",{key:"4755c5035411d352b52c00f762148be686a3849a",class:`${this.rangePickerId}-1-container`},a("z-input",Object.assign({key:"fb5a934e6e7265a716e876fcd317d6682ff498fb"},t,{placeholder:this.firstPickerPlaceholder,readonly:this.firstPickerReadOnly,"data-input":"data-input",class:`start-input ${this.rangePickerId}-1`,ariaLabel:this.firstAriaLabel,label:this.firstLabel,status:this.firstInputError&&h.ERROR,onStartTyping:()=>{this.firstInputError=false}})))),a("div",{key:"4e9889983e2422851e6d6ca2ea4f87ad1e23af21",class:`${this.rangePickerId}-2-wrapper`},a("div",{key:"ce5d885db43f3795863cafe600098eaf77d8836c",class:`${this.rangePickerId}-2-container`},a("z-input",Object.assign({key:"babf71bfafe8788c4b849692ad49fd0f6d015822"},t,{placeholder:this.lastPickerPlaceholder,readonly:this.lastPickerReadOnly,"data-input":"data-input",class:`end-input ${this.rangePickerId}-2`,ariaLabel:this.secondAriaLabel,label:this.secondLabel,status:this.lastInputError&&h.ERROR,onStartTyping:()=>{this.lastInputError=false}})))))}get element(){return this}static get watchers(){return{firstPickerReadOnly:[{setupFirstPickersReadOnly:0}],lastPickerReadOnly:[{setupLastPickersReadOnly:0}],mode:[{setupPickers:0}]}}static get style(){return b()}},[0,"z-range-picker",{rangePickerId:[1,"range-picker-id"],firstAriaLabel:[1,"first-aria-label"],firstLabel:[1,"first-label"],secondAriaLabel:[1,"second-aria-label"],secondLabel:[1,"second-label"],mode:[1],firstPickerReadOnly:[4,"first-picker-read-only"],lastPickerReadOnly:[4,"last-picker-read-only"],firstPickerPlaceholder:[1,"first-picker-placeholder"],lastPickerPlaceholder:[1,"last-picker-placeholder"],flatpickrPosition:[32],activeInput:[32],firstInputError:[32],lastInputError:[32]},[[18,"click","handleClick"],[18,"keyup","handleKeyDown"]],{firstPickerReadOnly:[{setupFirstPickersReadOnly:0}],lastPickerReadOnly:[{setupLastPickersReadOnly:0}],mode:[{setupPickers:0}]}]);function x(){if(typeof customElements==="undefined"){return}const t=["z-range-picker","z-icon","z-input","z-input-message"];t.forEach((t=>{switch(t){case"z-range-picker":if(!customElements.get(i(t))){customElements.define(i(t),g)}break;case"z-icon":if(!customElements.get(i(t))){m()}break;case"z-input":if(!customElements.get(i(t))){k()}break;case"z-input-message":if(!customElements.get(i(t))){u()}break}}))}const y=g;const v=x;export{y as ZRangePicker,v as defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as e,createEvent as r,h as a,transformTag as i}from"@stencil/core/internal/client";import{f as n,i as o,s as l,v as p,a as c}from"./utils2.js";import{J as s,H as d,I as f,f as h}from"./index2.js";import{d as m}from"./index3.js";import{d as k}from"./index7.js";import{d as u}from"./index8.js";const b=()=>`.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{left:0}.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{right:0}.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer+.dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange+.endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange+.endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}.flatpickr-monthSelect-months{margin:10px 1px 3px 1px;flex-wrap:wrap}.flatpickr-monthSelect-month{background:none;border:1px solid transparent;border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;display:inline-block;font-weight:400;margin:0.5px;justify-content:center;padding:10px;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;text-align:center;width:33%}.flatpickr-monthSelect-month.flatpickr-disabled{color:#eee}.flatpickr-monthSelect-month.flatpickr-disabled:hover,.flatpickr-monthSelect-month.flatpickr-disabled:focus{cursor:not-allowed;background:none !important}.flatpickr-monthSelect-theme-dark{background:#3f4458}.flatpickr-monthSelect-theme-dark .flatpickr-current-month input.cur-year{color:#fff}.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-prev-month,.flatpickr-monthSelect-theme-dark .flatpickr-months .flatpickr-next-month{color:#fff;fill:#fff}.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month{color:rgba(255, 255, 255, 0.95)}.flatpickr-monthSelect-month.today{border-color:#959ea9}.flatpickr-monthSelect-month.inRange,.flatpickr-monthSelect-month.inRange.today,.flatpickr-monthSelect-month:hover,.flatpickr-monthSelect-month:focus{background:#e6e6e6;cursor:pointer;outline:0;border-color:#e6e6e6}.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.inRange,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:hover,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month:focus{background:#646c8c;border-color:#646c8c}.flatpickr-monthSelect-month.today:hover,.flatpickr-monthSelect-month.today:focus{background:#959ea9;border-color:#959ea9;color:#fff}.flatpickr-monthSelect-month.selected,.flatpickr-monthSelect-month.startRange,.flatpickr-monthSelect-month.endRange{background-color:#569ff7;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-monthSelect-month.startRange{border-radius:50px 0 0 50px}.flatpickr-monthSelect-month.endRange{border-radius:0 50px 50px 0}.flatpickr-monthSelect-month.startRange.endRange{border-radius:50px}.flatpickr-monthSelect-month.inRange{border-radius:0;box-shadow:-5px 0 0 #e6e6e6, 5px 0 0 #e6e6e6}.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.selected,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.startRange,.flatpickr-monthSelect-theme-dark .flatpickr-monthSelect-month.endRange{background:#80cbc4;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#80cbc4}:host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-range-picker--toggle-height:0}z-date-picker{position:relative}z-date-picker>div>*{cursor:pointer !important}z-range-picker{position:relative}.flatpickr-toggle-container{width:fit-content}.range-pickers-container>div{position:relative}.hidden-input{position:absolute;bottom:0;width:0;height:0;visibility:hidden !important}.flatpickr-calendar::before,.flatpickr-calendar::after{display:none}.flatpickr-calendar{position:absolute !important;top:var(--z-range-picker--toggle-height) !important;left:0 !important;padding-top:calc(var(--space-unit) * 2);border-radius:2px;box-shadow:var(--shadow-2);font-family:var(--font-family-sans) !important}.months.top>.flatpickr-calendar{top:-288px !important}.date.top>.flatpickr-calendar,.date.top>div>.flatpickr-calendar{top:-401px !important}.date-time.top>.flatpickr-calendar,.date-time.top>div>.flatpickr-calendar{top:-523px !important}.flatpickr-calendar,.flatpickr-innerContainer,.flatpickr-days,.dayContainer,.flatpickr-rContainer,.flatpickr-monthSelect-months{width:calc(var(--space-unit) * 42) !important;max-width:calc(var(--space-unit) * 42) !important}.flatpickr-monthSelect-months{box-sizing:border-box;padding:0 !important;margin:calc(var(--space-unit) * 2) 0 !important}.flatpickr-months{position:relative;height:calc(var(--space-unit) * 6) !important;align-items:center;margin-bottom:var(--space-unit) 0 !important}.flatpickr-month{overflow:visible !important;height:calc(var(--space-unit) * 6) !important}.flatpickr-current-month{left:0 !important;display:flex !important;width:fill-available;height:calc(var(--space-unit) * 6);align-items:baseline;justify-content:space-evenly;padding-top:0}.flatpickr-next-month,.flatpickr-prev-month{position:static !important;display:flex;width:calc(var(--space-unit) * 4) !important;height:calc(var(--space-unit) * 4) !important;align-items:center;justify-content:center;padding:0 !important}.flatpickr-prev-month{margin-left:var(--space-unit)}.flatpickr-next-month{margin-right:var(--space-unit)}.flatpickr-next-month>svg,.flatpickr-prev-month>svg{width:calc(var(--space-unit) * 2) !important;height:calc(var(--space-unit) * 2) !important;fill:var(--color-primary01)}.flatpickr-next-month:hover,.flatpickr-prev-month:hover,.flatpickr-next-month:focus,.flatpickr-prev-month:focus{border:none !important;border-color:var(--color-primary03) !important;background-color:var(--color-primary03) !important;border-radius:var(--border-radius);color:var(--color-hover-primary) !important;outline:none !important}.flatpickr-next-month:hover svg,.flatpickr-prev-month:hover svg{fill:var(--color-hover-primary) !important}.flatpickr-next-month:active,.flatpickr-prev-month:active{border-color:var(--color-surface01) !important;background-color:var(--color-surface01) !important;border-radius:var(--border-radius);box-shadow:var(--shadow-2) !important;color:var(--color-primary01) !important}.flatpickr-next-month:focus svg,.flatpickr-prev-month:focus svg{fill:var(--color-primary01) !important}.flatpickr-monthDropdown-months{width:108px !important;height:calc(var(--space-unit) * 5.5) !important;padding-left:var(--space-unit) !important;background:var(--color-surface01) !important;color:var(--color-default-text) !important;font-size:var(--font-size-3) !important;font-weight:var(--font-rg) !important;outline:1px solid black !important}.flatpickr-monthDropdown-months:hover,.flatpickr-monthDropdown-months:focus{outline:1px solid var(--color-primary01) !important}.flatpickr-current-month>.numInputWrapper{display:flex;width:calc(var(--space-unit) * 10);height:calc(var(--space-unit) * 5.5) !important;background:var(--color-surface01) !important;color:var(--color-default-text);outline:1px solid black !important}.flatpickr-current-month>.numInputWrapper:hover,.flatpickr-current-month>.numInputWrapper:focus-within{outline:1px solid var(--color-primary01) !important}.flatpickr-current-month>.numInputWrapper>input{padding:0 calc(var(--space-unit) * 3) 0 var(--space-unit);font-size:var(--font-size-3) !important;font-weight:var(--font-rg) !important;text-align:center}.flatpickr-weekdays{height:calc(var(--space-unit) * 6);border-bottom:1px solid var(--color-surface03)}.flatpickr-weekday{font-size:var(--font-size-3) !important;font-weight:var(--font-rg) !important}.flatpickr-day,.flatpickr-monthSelect-month{width:calc(var(--space-unit) * 6) !important;max-width:100% !important;height:calc(var(--space-unit) * 6) !important;border:none;margin:0 !important;border-radius:0 !important;box-shadow:none !important;font-size:var(--font-size-3) !important;line-height:calc(var(--space-unit) * 6) !important}.flatpickr-day{width:calc(var(--space-unit) * 6) !important;border:none;line-height:calc(var(--space-unit) * 6) !important}.flatpickr-monthSelect-month{width:calc(var(--space-unit) * 14) !important;padding:0 !important;border:2px solid var(--color-surface01) !important;line-height:calc(var(--space-unit) * 5) !important}.flatpickr-day:not(.flatpickr-disabled):hover,.flatpickr-day:not(.flatpickr-disabled):active,.flatpickr-day:not(.flatpickr-disabled):focus,.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:hover,.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:active,.flatpickr-day:not(.flatpickr-disabled).prevMonthDay:focus,.flatpickr-day:not(.flatpickr-disabled).selected:hover,.flatpickr-day:not(.flatpickr-disabled).selected:active,.flatpickr-day:not(.flatpickr-disabled).selected:focus,.flatpickr-monthSelect-month:hover,.flatpickr-monthSelect-month:active,.flatpickr-monthSelect-month:focus{border-color:var(--color-hover-primary) !important;background-color:var(--color-hover-primary) !important;color:var(--color-text-inverse) !important}.flatpickr-day.today,.flatpickr-monthSelect-month.today{border:2px solid var(--color-hover-primary) !important}.flatpickr-day.selected:not(.flatpickr-disabled),.flatpickr-monthSelect-month.selected:not(.flatpickr-disabled){border-color:var(--color-primary01) !important;background-color:var(--color-primary01) !important}.flatpickr-weekday:nth-child(6),.flatpickr-weekday:nth-child(7),.flatpickr-day:nth-child(7n+6),.flatpickr-day:nth-child(7n+7){font-weight:var(--font-sb) !important}.flatpickr-time{display:block;height:90px !important;max-height:90px !important;text-align:left}.flatpickr-time::before{display:block;width:100%;padding-left:var(--space-unit);color:var(--color-default-text) !important;content:"Orario";font-size:var(--font-size-1);font-weight:var(--font-sb);text-transform:uppercase}.flatpickr-time.time24hr{margin:calc(var(--space-unit) * 2) !important}.flatpickr-time.time24hr>.numInputWrapper>input:hover,.flatpickr-time.time24hr>.numInputWrapper>input:focus,.flatpickr-time.time24hr>.numInputWrapper:hover{background-color:var(--color-surface01) !important}.flatpickr-time.time24hr>div{width:calc(var(--space-unit) * 10) !important;height:calc(var(--space-unit) * 5.5) !important;margin-right:var(--space-unit) !important;margin-left:var(--space-unit) !important}.flatpickr-time-separator{display:flex;height:calc(var(--space-unit) * 5.5) !important;align-items:center;justify-content:center;font-weight:unset !important}.flatpickr-minute,.flatpickr-hour{font-size:var(--font-size-3) !important;font-weight:var(--font-rg) !important;outline:1px solid black !important}.numInputWrapper:hover .flatpickr-minute,.numInputWrapper:hover .flatpickr-hour,.flatpickr-minute:focus,.flatpickr-hour:focus{outline:1px solid var(--color-primary01) !important}.arrowUp,.arrowDown{width:calc(var(--space-unit) * 2) !important;height:calc(var(--space-unit) * 2) !important;padding:0 !important;border:none !important;opacity:1 !important}.arrowUp{margin-top:calc(var(--space-unit) / 2) !important;margin-right:calc(var(--space-unit) / 2) !important}.arrowDown{top:auto !important;margin-top:calc(var(--space-unit) * 3) !important;margin-right:calc(var(--space-unit) / 2) !important}.arrowUp:hover,.arrowDown:hover{border-color:var(--color-primary03) !important;background-color:var(--color-primary03) !important;border-radius:var(--border-radius);color:var(--color-hover-primary) !important}.arrowUp:active,.arrowDown:active{border-color:var(--color-surface01) !important;background-color:var(--color-surface01) !important;border-radius:var(--border-radius);box-shadow:var(--shadow-2) !important;color:var(--color-primary01) !important}.arrowUp::after,.arrowDown::after{padding:2.5px !important;border:solid var(--color-primary01) !important;border-width:0 1px 1px 0 !important}.arrowUp::after{top:0 !important;margin-top:6px !important;margin-left:5.5px !important;transform:rotate(-135deg)}.arrowDown::after{top:0 !important;left:5.5px !important;margin-top:4px !important;transform:rotate(45deg)}.flatpickr-day:not(.flatpickr-disabled).inRange:hover,.flatpickr-day:not(.flatpickr-disabled).today.inRange:hover,.flatpickr-day.prevMonthDay:not(.flatpickr-disabled).inRange:hover,.flatpickr-monthSelect-month:not(.flatpickr-disabled).inRange:hover{border-color:var(--color-hover-primary) !important;background-color:var(--color-hover-primary) !important}.flatpickr-day:not(.flatpickr-disabled).inRange,.flatpickr-day:not(.flatpickr-disabled).today.inRange,.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.inRange,.flatpickr-monthSelect-month:not(.flatpickr-disabled).inRange{border-color:var(--color-primary03);background-color:var(--color-primary03)}.flatpickr-day:not(.flatpickr-disabled).startRange,.flatpickr-day:not(.flatpickr-disabled).endRange,.flatpickr-monthSelect-month:not(.flatpickr-disabled).startRange,.flatpickr-monthSelect-month:not(.flatpickr-disabled).endRange{border-color:var(--color-primary01) !important;background-color:var(--color-primary01) !important}.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.selected.startRange,.flatpickr-day:not(.flatpickr-disabled).prevMonthDay.selected.endRange{border-color:var(--color-primary01) !important;background-color:var(--color-primary01) !important}.flatpickr-range.second-input{cursor:pointer}.range-pickers-container{display:flex;gap:16px}`;const g=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.dateSelect=r(this,"dateSelect",7);this.mode=s.DATE;this.firstPickerReadOnly=false;this.lastPickerReadOnly=false;this.firstPickerPlaceholder="";this.lastPickerPlaceholder="";this.flatpickrPosition=d.BOTTOM;this.activeInput="start-input";this.firstInputError=false;this.lastInputError=false}handleClick(){this.getFocusedInput()}handleKeyDown(t){var e,r,a,i,n,o;const l=this.activeInput==="start-input"?this.firstPicker:this.lastPicker;this.getFocusedInput();if(t.key==="Escape"){if(document.activeElement.classList.contains(`${this.rangePickerId}-1`)){(e=this.firstPicker)===null||e===void 0?void 0:e.close()}if(document.activeElement.classList.contains(`${this.rangePickerId}-2`)){(r=this.lastPicker)===null||r===void 0?void 0:r.close()}}if(t.key==="Enter"||t.key===" "){if(document.activeElement.classList.contains(`${this.rangePickerId}-1`)||document.activeElement.classList.contains(`${this.rangePickerId}-2`)){l===null||l===void 0?void 0:l.open()}const e=document.activeElement.classList.contains("reset-icon");if(e){if(this.activeInput==="start-input"){this.firstInputError=false;(a=this.firstPicker)===null||a===void 0?void 0:a.clear();this.printDate(null,((i=this.lastPicker)===null||i===void 0?void 0:i.selectedDates[0])||null)}if(this.activeInput==="end-input"){this.lastInputError=false;(n=this.firstPicker)===null||n===void 0?void 0:n.clear();this.printDate(((o=this.firstPicker)===null||o===void 0?void 0:o.selectedDates[0])||null,null)}}const r=document.activeElement.classList.contains("flatpickr-prev-month");const p=document.activeElement.classList.contains("flatpickr-next-month");const c=r||p;if(c&&t.key===" "){t.preventDefault()}if(r){l===null||l===void 0?void 0:l.changeMonth(-1)}if(p){l===null||l===void 0?void 0:l.changeMonth(1)}}}componentDidLoad(){this.setupPickers()}setupFirstPickersReadOnly(){var t;(t=this.firstPicker)===null||t===void 0?void 0:t.set("clickOpens",!this.firstPickerReadOnly)}setupLastPickersReadOnly(){var t;(t=this.lastPicker)===null||t===void 0?void 0:t.set("clickOpens",!this.lastPickerReadOnly)}setupPickers(){const t={enableTime:this.mode===s.DATE_TIME,locale:o.Italian,allowInput:true,wrap:true,dateFormat:this.mode===s.DATE_TIME?"d-m-Y - H:i":"d-m-Y",ariaDateFormat:"d F Y",minuteIncrement:1,time_24hr:true,onValueUpdate:()=>{const t=this.activeInput==="start-input";const e=this.firstPicker.selectedDates[0];const r=this.lastPicker.selectedDates[0];if(+e>+r){if(t){this.firstInputError=true;this.printDate(null,r||null)}else{this.lastInputError=true;this.printDate(e||null,null)}}else{this.lastInputError=false;this.firstInputError=false;this.printDate(e||null,r||null)}this.setRangeStyle(0);this.setRangeStyle(1)},onChange:(t,e,r)=>{this.onDateSelect();this.setRangeStyle(r.input.classList.contains("start-input")?0:1)},onOpen:(t,e,r)=>{l(this.element,this.mode);this.flatpickrPosition=c(this.element,this.mode);this.setRangeStyle(r.input.classList.contains("start-input")?0:1);this.getFocusedInput()},onYearChange:(t,e,r)=>{this.setRangeStyle(r.input.classList.contains("start-input")?0:1)},onMonthChange:(t,e,r)=>{this.setRangeStyle(r.input.classList.contains("start-input")?0:1)},onKeyDown:()=>{l(this.element,this.mode)}};this.firstPicker=n(`.${this.rangePickerId}-1-container`,Object.assign(Object.assign({},Object.assign(Object.assign({},t),{clickOpens:!this.firstPickerReadOnly})),{mode:"single",appendTo:this.element.querySelector(`.${this.rangePickerId}-1-wrapper`)}));this.lastPicker=n(`.${this.rangePickerId}-2-container`,Object.assign(Object.assign({},Object.assign(Object.assign({},t),{clickOpens:!this.lastPickerReadOnly})),{mode:"single",appendTo:this.element.querySelector(`.${this.rangePickerId}-2-wrapper`)}));this.element.querySelectorAll(".flatpickr-weekday").forEach((t=>{t.innerHTML=t.innerHTML.trim().charAt(0)}))}onDateSelect(){const t=this.activeInput==="start-input";const e=this.firstPicker.selectedDates[0];const r=this.lastPicker.selectedDates[0];if(+e>+r){if(t){this.firstInputError=true;this.printDate(null,r||null)}else{this.lastInputError=true;this.printDate(e||null,null)}}else{this.lastInputError=false;this.firstInputError=false;this.printDate(e||null,r||null)}}disableDates(t,e){const r=this.element.getElementsByClassName("flatpickr-calendar")[e];Array.from(r.getElementsByClassName("flatpickr-day")).forEach((r=>{const a=this.getDateWithoutTime(this.replaceMonths(r.ariaLabel,null));const i=this.getDateWithoutTime(t);const n=e===0?a>i:a<i;if(n){r.classList.toggle("flatpickr-disabled",true)}else{r.classList.toggle("flatpickr-disabled",false)}}));l(this.element,this.mode)}formatDate(t){if(this.mode===s.DATE){return`${n.formatDate(t,"d-m-Y")}`}return`${n.formatDate(t,"d-m-Y - H:i")}`}printDate(t,e){const r=t?this.formatDate(t):null;const a=e?this.formatDate(e):null;this.dateSelect.emit([r,a])}getDateWithoutTime(t){const e=new Date(t.getFullYear(),t.getMonth(),t.getDate(),0,0);return e}replaceMonths(t,e){const r=t.split(" ")[1];const a={Gennaio:"01",Febbraio:"02",Marzo:"03",Aprile:"04",Maggio:"05",Giugno:"06",Luglio:"07",Agosto:"08",Settembre:"09",Ottobre:"10",Novembre:"11",Dicembre:"12"};const i=t.replace(r,a[r]).split(" ");return new Date(parseInt(i[2]),parseInt(i[1])-1,parseInt(i[0]),e?parseInt(e.split(":")[0]):0,e?parseInt(e.split(":")[1]):0)}getFocusedInput(){const t=document.activeElement.closest("z-input");if(!t){return}if(t===null||t===void 0?void 0:t.classList.contains("start-input")){this.activeInput="start-input"}else if(t.classList.contains("end-input")){this.activeInput="end-input"}}setRangeStyle(t){Array.from(this.element.getElementsByClassName("flatpickr-calendar")).forEach((e=>{Array.from(e.getElementsByClassName("flatpickr-day")).forEach((e=>{const r=this.firstPicker.selectedDates.length===1;const a=this.lastPicker.selectedDates.length===1;let i;let n;const o=this.getDateWithoutTime(this.replaceMonths(e.ariaLabel,null));if(r){i=this.getDateWithoutTime(this.firstPicker.selectedDates[0]);if(+o===+i){e.classList.toggle("startRange",true)}else{e.classList.toggle("startRange",false)}}if(a){n=this.getDateWithoutTime(this.lastPicker.selectedDates[0]);if(+o===+n){e.classList.toggle("endRange",true)}else{e.classList.toggle("endRange",false)}}if(r&&a){if(o>i&&o<n){e.classList.toggle("inRange",true)}else{e.classList.toggle("inRange",false)}}if(t===0&&a){this.disableDates(this.lastPicker.selectedDates[0],t)}if(t===1&&r){this.disableDates(this.firstPicker.selectedDates[0],t)}}))}))}onStopTyping(t){const e=t.detail.value.replace("/","-");const r=e.split("-");const a=this.mode===s.DATE_TIME?`T${r[3]}:00`:"";const i=`${r[2]}-${r[1]}-${r[0]}${a}`.split(" ").join("");const n=p(e,this.mode===s.DATE_TIME);const o=Date.parse(i).toString();if(this.activeInput==="start-input"){if(e===""){this.firstInputError=false;this.firstPicker.setDate([]);this.printDate(null,this.lastPicker.selectedDates[0]||null)}else if(!n){this.firstInputError=true;this.printDate(null,this.lastPicker.selectedDates[0]||null)}else if(n){if(this.lastPicker.selectedDates.length===1){if(+o<=+this.lastPicker.selectedDates[0]){this.firstInputError=false;this.firstPicker.setDate([e]);this.printDate(new Date(i),this.lastPicker.selectedDates[0])}else{this.firstInputError=true;this.printDate(null,this.lastPicker.selectedDates[0])}}else{this.firstInputError=false;this.firstPicker.setDate([e]);this.printDate(new Date(i),null)}}}else if(e===""){this.lastInputError=false;this.lastPicker.setDate([]);this.printDate(this.firstPicker.selectedDates[0]||null,null)}else if(!n){this.lastInputError=true;this.printDate(this.firstPicker.selectedDates[0]||null,null)}else if(n){if(this.firstPicker.selectedDates.length===1){if(+o>=+this.firstPicker.selectedDates[0]){this.lastInputError=false;this.lastPicker.setDate([e]);this.printDate(this.firstPicker.selectedDates[0],new Date(i))}else{this.lastInputError=true;this.printDate(this.firstPicker.selectedDates[0],null)}}else{this.lastInputError=false;this.lastPicker.setDate([e]);this.printDate(null,new Date(i))}}this.setRangeStyle(this.activeInput==="start-input"?0:1)}render(){const t={type:f.TEXT,icon:"event",tabindex:"0",message:false,onStopTyping:this.onStopTyping.bind(this),value:""};return a("div",{key:"d2d94a3237b1659fd6ba789ed36717cb74eb7656",class:{["range-pickers-container"]:true,[this.mode]:true,[this.activeInput]:true,[this.flatpickrPosition]:true}},a("div",{key:"d6a31c6bf63475ae192d207b84910801d1dc9812",class:`${this.rangePickerId}-1-wrapper`},a("div",{key:"4755c5035411d352b52c00f762148be686a3849a",class:`${this.rangePickerId}-1-container`},a("z-input",Object.assign({key:"fb5a934e6e7265a716e876fcd317d6682ff498fb"},t,{placeholder:this.firstPickerPlaceholder,readonly:this.firstPickerReadOnly,"data-input":"data-input",class:`start-input ${this.rangePickerId}-1`,ariaLabel:this.firstAriaLabel,label:this.firstLabel,status:this.firstInputError&&h.ERROR,onStartTyping:()=>{this.firstInputError=false}})))),a("div",{key:"4e9889983e2422851e6d6ca2ea4f87ad1e23af21",class:`${this.rangePickerId}-2-wrapper`},a("div",{key:"ce5d885db43f3795863cafe600098eaf77d8836c",class:`${this.rangePickerId}-2-container`},a("z-input",Object.assign({key:"babf71bfafe8788c4b849692ad49fd0f6d015822"},t,{placeholder:this.lastPickerPlaceholder,readonly:this.lastPickerReadOnly,"data-input":"data-input",class:`end-input ${this.rangePickerId}-2`,ariaLabel:this.secondAriaLabel,label:this.secondLabel,status:this.lastInputError&&h.ERROR,onStartTyping:()=>{this.lastInputError=false}})))))}get element(){return this}static get watchers(){return{firstPickerReadOnly:[{setupFirstPickersReadOnly:0}],lastPickerReadOnly:[{setupLastPickersReadOnly:0}],mode:[{setupPickers:0}]}}static get style(){return b()}},[0,"z-range-picker",{rangePickerId:[1,"range-picker-id"],firstAriaLabel:[1,"first-aria-label"],firstLabel:[1,"first-label"],secondAriaLabel:[1,"second-aria-label"],secondLabel:[1,"second-label"],mode:[1],firstPickerReadOnly:[4,"first-picker-read-only"],lastPickerReadOnly:[4,"last-picker-read-only"],firstPickerPlaceholder:[1,"first-picker-placeholder"],lastPickerPlaceholder:[1,"last-picker-placeholder"],flatpickrPosition:[32],activeInput:[32],firstInputError:[32],lastInputError:[32]},[[18,"click","handleClick"],[18,"keyup","handleKeyDown"]],{firstPickerReadOnly:[{setupFirstPickersReadOnly:0}],lastPickerReadOnly:[{setupLastPickersReadOnly:0}],mode:[{setupPickers:0}]}]);function x(){if(typeof customElements==="undefined"){return}const t=["z-range-picker","z-icon","z-input","z-input-message"];t.forEach((t=>{switch(t){case"z-range-picker":if(!customElements.get(i(t))){customElements.define(i(t),g)}break;case"z-icon":if(!customElements.get(i(t))){m()}break;case"z-input":if(!customElements.get(i(t))){k()}break;case"z-input-message":if(!customElements.get(i(t))){u()}break}}))}const y=g;const v=x;export{y as ZRangePicker,v as defineCustomElement};
 //# sourceMappingURL=z-range-picker.js.map

package/dist/components/z-section-title.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as e,h as i,Host as s,transformTag as o}from"@stencil/core/internal/client";import{y as r,D as n}from"./index2.js";import{d as a}from"./index6.js";const d=()=>`:host{--z-section-title--divider-color:var(--red500);display:flex;width:fit-content;flex-direction:column;align-items:flex-start;font-family:var(--font-family-sans)}:host,:host ::slotted(*){box-sizing:border-box}::slotted(*){margin:0}::slotted([slot="secondary-title"]){padding-bottom:calc(var(--space-unit) / 2);border-bottom:var(--border-size-large) solid var(--z-section-title--divider-color);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5rem;text-transform:uppercase}::slotted([slot="primary-title"]){font-size:var(--font-size-6);font-weight:var(--font-sb);line-height:2rem}:host([uppercase]:not([uppercase="false"])) ::slotted([slot="primary-title"]){text-transform:uppercase}@media (min-width: 1152px){::slotted([slot="primary-title"]){font-size:var(--font-size-7);line-height:2.25rem}}`;const l=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.dividerPosition=r.BEFORE;this.uppercase=true}componentWillRender(){this.hasSecondaryTitle=!!this.host.querySelector("[slot=secondary-title]")}render(){return i(s,{key:"020c1a41ff7fa0881464463322b54754e7664957"},i("slot",{key:"c6d7baf944465d1092749cf288636fcd502e659c",name:"secondary-title"}),!this.hasSecondaryTitle&&this.dividerPosition===r.BEFORE&&i("z-divider",{key:"ea70a8579ed61ba8b1d6488566473b90c47540d1",size:n.LARGE,color:"z-section-title--divider-color"}),i("slot",{key:"4cf602491394aaf97cead51bbc7f9b2da299bef3",name:"primary-title"}),!this.hasSecondaryTitle&&this.dividerPosition===r.AFTER&&i("z-divider",{key:"47275d6411b00769db2e244bad13032d43cc9144",size:n.LARGE,color:"z-section-title--divider-color"}))}get host(){return this}static get style(){return d()}},[257,"z-section-title",{dividerPosition:[1,"divider-position"],uppercase:[516]}]);function c(){if(typeof customElements==="undefined"){return}const t=["z-section-title","z-divider"];t.forEach((t=>{switch(t){case"z-section-title":if(!customElements.get(o(t))){customElements.define(o(t),l)}break;case"z-divider":if(!customElements.get(o(t))){a()}break}}))}const f=l;const m=c;export{f as ZSectionTitle,m as defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as e,h as i,Host as s,transformTag as o}from"@stencil/core/internal/client";import{z as r,D as n}from"./index2.js";import{d as a}from"./index6.js";const d=()=>`:host{--z-section-title--divider-color:var(--red500);display:flex;width:fit-content;flex-direction:column;align-items:flex-start;font-family:var(--font-family-sans)}:host,:host ::slotted(*){box-sizing:border-box}::slotted(*){margin:0}::slotted([slot="secondary-title"]){padding-bottom:calc(var(--space-unit) / 2);border-bottom:var(--border-size-large) solid var(--z-section-title--divider-color);font-size:var(--font-size-3);font-weight:var(--font-sb);line-height:1.5rem;text-transform:uppercase}::slotted([slot="primary-title"]){font-size:var(--font-size-6);font-weight:var(--font-sb);line-height:2rem}:host([uppercase]:not([uppercase="false"])) ::slotted([slot="primary-title"]){text-transform:uppercase}@media (min-width: 1152px){::slotted([slot="primary-title"]){font-size:var(--font-size-7);line-height:2.25rem}}`;const l=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.dividerPosition=r.BEFORE;this.uppercase=true}componentWillRender(){this.hasSecondaryTitle=!!this.host.querySelector("[slot=secondary-title]")}render(){return i(s,{key:"020c1a41ff7fa0881464463322b54754e7664957"},i("slot",{key:"c6d7baf944465d1092749cf288636fcd502e659c",name:"secondary-title"}),!this.hasSecondaryTitle&&this.dividerPosition===r.BEFORE&&i("z-divider",{key:"ea70a8579ed61ba8b1d6488566473b90c47540d1",size:n.LARGE,color:"z-section-title--divider-color"}),i("slot",{key:"4cf602491394aaf97cead51bbc7f9b2da299bef3",name:"primary-title"}),!this.hasSecondaryTitle&&this.dividerPosition===r.AFTER&&i("z-divider",{key:"47275d6411b00769db2e244bad13032d43cc9144",size:n.LARGE,color:"z-section-title--divider-color"}))}get host(){return this}static get style(){return d()}},[257,"z-section-title",{dividerPosition:[1,"divider-position"],uppercase:[516]}]);function c(){if(typeof customElements==="undefined"){return}const t=["z-section-title","z-divider"];t.forEach((t=>{switch(t){case"z-section-title":if(!customElements.get(o(t))){customElements.define(o(t),l)}break;case"z-divider":if(!customElements.get(o(t))){a()}break}}))}const f=l;const m=c;export{f as ZSectionTitle,m as defineCustomElement};
 //# sourceMappingURL=z-section-title.js.map

package/dist/components/z-table.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,h as a,Host as s,transformTag as i}from"@stencil/core/internal/client";import"./index2.js";import"./breakpoints.js";import"./iconset.js";import"./index17.js";const o=()=>`:host{--z-table--cells-padding:calc(var(--space-unit) * 2);position:relative;display:block;overflow:auto;min-width:max-content;max-width:100%;box-sizing:border-box;padding:var(--space-unit);background-color:var(--color-surface01)}:host([expandable]){--z-table--expand-button-size:40px}:host([bordered]){--z-table--cell-left-border:1px solid var(--color-surface03)}`;const r=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.bordered=false;this.expandable=false}updateExpandable(){this.expandable=this.host.querySelectorAll("z-tr[expandable]").length>0}componentWillLoad(){this.expandableMutationObserver=new MutationObserver((()=>{this.updateExpandable()}));this.expandableMutationObserver.observe(this.host,{childList:true,subtree:true,attributes:true,attributeFilter:["expandable"],attributeOldValue:false})}disconnectedCallback(){var e;(e=this.expandableMutationObserver)===null||e===void 0?void 0:e.disconnect()}render(){return a(s,{key:"0a7e7725b1eb5387ae1a513430849d3daf02e5e0",expandable:this.expandable},a("div",{key:"9d905726ce93637a2d0eb9bf8022a9f034b8338f",class:"table",role:"table"},a("slot",{key:"447fa001867961ce18907fb89068597bb1a3f20b"})))}get host(){return this}static get style(){return o()}},[257,"z-table",{bordered:[516],expandable:[32]}]);function l(){if(typeof customElements==="undefined"){return}const e=["z-table"];e.forEach((e=>{switch(e){case"z-table":if(!customElements.get(i(e))){customElements.define(i(e),r)}break}}))}const n=r;const c=l;export{n as ZTable,c as defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as e,h as r,Host as o,transformTag as a}from"@stencil/core/internal/client";import"./index2.js";import"./breakpoints.js";import"./iconset.js";import"./index17.js";const l=()=>`:host{position:relative;display:block;overflow:auto;min-width:max-content;max-width:100%;box-sizing:border-box;padding:var(--space-unit)}:host([expandable]){--z-table--expand-button-size:40px}`;const b=()=>`z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover>tbody>tr:hover>td,table.z-table-hover>tfoot>tr:hover>td{position:relative;background-color:var(--color-surface02)}table.z-table-hover>tbody>tr:hover>td::after,table.z-table-hover>tfoot>tr:hover>td::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:-1px;box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);content:""}table.z-table-hover>tbody>tr:hover>td:first-child::after,table.z-table-hover>thead>tr:hover>th:first-child::after,table.z-table-hover>tfoot>tr:hover>td:first-child::after{left:0}`;const s=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.bordered=false;this.expandable=false}updateExpandable(){this.expandable=this.host.querySelectorAll("z-tr[expandable]").length>0}componentWillLoad(){this.expandableMutationObserver=new MutationObserver((()=>{this.updateExpandable()}));this.expandableMutationObserver.observe(this.host,{childList:true,subtree:true,attributes:true,attributeFilter:["expandable"],attributeOldValue:false})}disconnectedCallback(){var t;(t=this.expandableMutationObserver)===null||t===void 0?void 0:t.disconnect()}render(){return r(o,{key:"e6312c6e3bc53f74407f70eca34f9d0ede44b40d",expandable:this.expandable},r("div",{key:"e1009eab29f0b6a02533ee7b542095f6cd83e1a0",class:"table",role:"table"},r("slot",{key:"6f3dbd3fdf96dec314a441c046333c1ab9f67cc1"})))}get host(){return this}static get style(){return l()+b()}},[257,"z-table",{bordered:[516],expandable:[32]}]);function i(){if(typeof customElements==="undefined"){return}const t=["z-table"];t.forEach((t=>{switch(t){case"z-table":if(!customElements.get(a(t))){customElements.define(a(t),s)}break}}))}const d=s;const c=i;export{d as ZTable,c as defineCustomElement};
 //# sourceMappingURL=z-table.js.map

package/dist/components/z-table.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZTable","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","bordered","expandable","updateExpandable","host","querySelectorAll","length","componentWillLoad","expandableMutationObserver","MutationObserver","observe","childList","subtree","attributes","attributeFilter","attributeOldValue","disconnectedCallback","_a","disconnect","render","h","Host","key","class","role"],"sources":["src/components/table/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/table/z-table/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-table--cells-padding: Padding of the cells.\n   */\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n\n  position: relative;\n  display: block;\n  overflow: auto;\n  min-width: max-content;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-unit);\n  background-color: var(--color-surface01);\n}\n\n:host([expandable]) {\n  --z-table--expand-button-size: 40px;\n}\n\n:host([bordered]) {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n","import {Component, ComponentInterface, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-tbody/index\";\nimport \"../z-tfoot/index\";\nimport \"../z-thead/index\";\nimport \"../z-tr/index\";\n\n/**\n * ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n */\n@Component({\n  tag: \"z-table\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTable implements ComponentInterface {\n  @Element() host: HTMLZTableElement;\n\n  /**\n   * Whether the table cells should show a border between them.\n   */\n  @Prop({reflect: true})\n  bordered = false;\n\n  /**\n   * Whether the table contains some expandable rows.\n   */\n  @State()\n  expandable = false;\n\n  private updateExpandable(): void {\n    this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n  }\n\n  private expandableMutationObserver: MutationObserver;\n\n  /**\n   * Setup the table creating a mutation observer for the expandable attribute.\n   */\n  componentWillLoad(): void {\n    this.expandableMutationObserver = new MutationObserver(() => {\n      this.updateExpandable();\n    });\n    this.expandableMutationObserver.observe(this.host, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: [\"expandable\"],\n      attributeOldValue: false,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.expandableMutationObserver?.disconnect();\n  }\n\n  render(): HTMLZTableElement {\n    return (\n      <Host expandable={this.expandable}>\n        <div\n          class=\"table\"\n          role=\"table\"\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8MAAA,MAAMA,EAAY,IAAM,+W,MCeXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,kEAYEC,KAAAC,SAAW,MAMXD,KAAAE,WAAa,KAwCd,CAtCS,gBAAAC,GACNH,KAAKE,WAAaF,KAAKI,KAAKC,iBAAiB,oBAAoBC,OAAS,C,CAQ5E,iBAAAC,GACEP,KAAKQ,2BAA6B,IAAIC,kBAAiB,KACrDT,KAAKG,kBAAkB,IAEzBH,KAAKQ,2BAA2BE,QAAQV,KAAKI,KAAM,CACjDO,UAAW,KACXC,QAAS,KACTC,WAAY,KACZC,gBAAiB,CAAC,cAClBC,kBAAmB,O,CAIvB,oBAAAC,G,OACEC,EAAAjB,KAAKQ,8BAA0B,MAAAS,SAAA,SAAAA,EAAEC,Y,CAGnC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACpB,WAAYF,KAAKE,YACrBkB,EAAA,OAAAE,IAAA,2CACEC,MAAM,QACNC,KAAK,SAELJ,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZTable","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","bordered","expandable","updateExpandable","host","querySelectorAll","length","componentWillLoad","expandableMutationObserver","MutationObserver","observe","childList","subtree","attributes","attributeFilter","attributeOldValue","disconnectedCallback","_a","disconnect","render","h","Host","key","class","role"],"sources":["src/components/table/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-table&encapsulation=shadow","src/components/table/z-table/index.tsx"],"sourcesContent":[":host {\n  /**\n   * @prop --z-table--cells-padding: Padding of the cells.\n   */\n\n  position: relative;\n  display: block;\n  overflow: auto;\n  min-width: max-content;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-unit);\n}\n\n:host([expandable]) {\n  --z-table--expand-button-size: 40px;\n}\n","z-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n","import {Component, ComponentInterface, Element, Host, Prop, State, h} from \"@stencil/core\";\nimport \"../z-tbody/index\";\nimport \"../z-tfoot/index\";\nimport \"../z-thead/index\";\nimport \"../z-tr/index\";\n\n/**\n * ZTable component.\n * @slot - Table content (`z-thead`, `z-tbody`, `z-tfoot`, `z-tr`).\n */\n@Component({\n  tag: \"z-table\",\n  styleUrls: [\"styles.css\", \"../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZTable implements ComponentInterface {\n  @Element() host: HTMLZTableElement;\n\n  /**\n   * Whether the table cells should show a border between them.\n   */\n  @Prop({reflect: true})\n  bordered = false;\n\n  /**\n   * Whether the table contains some expandable rows.\n   */\n  @State()\n  expandable = false;\n\n  private updateExpandable(): void {\n    this.expandable = this.host.querySelectorAll(\"z-tr[expandable]\").length > 0;\n  }\n\n  private expandableMutationObserver: MutationObserver;\n\n  /**\n   * Setup the table creating a mutation observer for the expandable attribute.\n   */\n  componentWillLoad(): void {\n    this.expandableMutationObserver = new MutationObserver(() => {\n      this.updateExpandable();\n    });\n    this.expandableMutationObserver.observe(this.host, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: [\"expandable\"],\n      attributeOldValue: false,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.expandableMutationObserver?.disconnect();\n  }\n\n  render(): HTMLZTableElement {\n    return (\n      <Host expandable={this.expandable}>\n        <div\n          class=\"table\"\n          role=\"table\"\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8MAAA,MAAMA,EAAY,IAAM,mMCAxB,MAAMA,EAAY,IAAM,6sD,MCeXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,kEAYEC,KAAAC,SAAW,MAMXD,KAAAE,WAAa,KAwCd,CAtCS,gBAAAC,GACNH,KAAKE,WAAaF,KAAKI,KAAKC,iBAAiB,oBAAoBC,OAAS,C,CAQ5E,iBAAAC,GACEP,KAAKQ,2BAA6B,IAAIC,kBAAiB,KACrDT,KAAKG,kBAAkB,IAEzBH,KAAKQ,2BAA2BE,QAAQV,KAAKI,KAAM,CACjDO,UAAW,KACXC,QAAS,KACTC,WAAY,KACZC,gBAAiB,CAAC,cAClBC,kBAAmB,O,CAIvB,oBAAAC,G,OACEC,EAAAjB,KAAKQ,8BAA0B,MAAAS,SAAA,SAAAA,EAAEC,Y,CAGnC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACpB,WAAYF,KAAKE,YACrBkB,EAAA,OAAAE,IAAA,2CACEC,MAAM,QACNC,KAAK,SAELJ,EAAA,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/components/z-tbody.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,h as o,Host as s,transformTag as n}from"@stencil/core/internal/client";const r=()=>`:host{display:block;box-sizing:border-box}`;const c=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}render(){return o(s,{key:"9ffbee51d10b3318d8044e8f4f45beff637ce8a3",role:"rowgroup"},o("slot",{key:"5143bbe7239e2804d24e634dba17e60060d1c6d0"}))}static get style(){return r()}},[257,"z-tbody"]);function i(){if(typeof customElements==="undefined"){return}const e=["z-tbody"];e.forEach((e=>{switch(e){case"z-tbody":if(!customElements.get(n(e))){customElements.define(n(e),c)}break}}))}const d=c;const b=i;export{d as ZTbody,b as defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as e,h as r,Host as o,transformTag as a}from"@stencil/core/internal/client";const l=()=>`:host{display:block;box-sizing:border-box}`;const b=()=>`z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover>tbody>tr:hover>td,table.z-table-hover>tfoot>tr:hover>td{position:relative;background-color:var(--color-surface02)}table.z-table-hover>tbody>tr:hover>td::after,table.z-table-hover>tfoot>tr:hover>td::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:-1px;box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);content:""}table.z-table-hover>tbody>tr:hover>td:first-child::after,table.z-table-hover>thead>tr:hover>th:first-child::after,table.z-table-hover>tfoot>tr:hover>td:first-child::after{left:0}`;const d=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow()}render(){return r(o,{key:"ff5da26d4d754ab4da901422be45d9cd546807b9",role:"rowgroup"},r("slot",{key:"fe0a17ad217ca1eb372f9f176df75534a3971aa9"}))}static get style(){return l()+b()}},[257,"z-tbody"]);function s(){if(typeof customElements==="undefined"){return}const t=["z-tbody"];t.forEach((t=>{switch(t){case"z-tbody":if(!customElements.get(a(t))){customElements.define(a(t),d)}break}}))}const c=d;const i=s;export{c as ZTbody,i as defineCustomElement};
 //# sourceMappingURL=z-tbody.js.map

package/dist/components/z-tbody.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZTbody","__stencil_proxyCustomElement","HTMLElement","render","h","Host","key","role"],"sources":["src/components/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/table/z-tbody/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n}\n","import {Component, ComponentInterface, Host, h} from \"@stencil/core\";\n\n/**\n * ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n  tag: \"z-tbody\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTbody implements ComponentInterface {\n  render(): HTMLZTbodyElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAAY,IAAM,6C,MCWXC,EAAMC,EAAA,MAAAD,UAAAE,E,iFACjB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACTH,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZTbody","__stencil_proxyCustomElement","HTMLElement","render","h","Host","key","role"],"sources":["src/components/table/z-tbody/styles.css?tag=z-tbody&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-tbody&encapsulation=shadow","src/components/table/z-tbody/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n}\n","z-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n","import {Component, ComponentInterface, Host, h} from \"@stencil/core\";\n\n/**\n * ZTbody component.\n * @slot - ZTbody content (`z-tr`).\n */\n@Component({\n  tag: \"z-tbody\",\n  styleUrls: [\"styles.css\", \"../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZTbody implements ComponentInterface {\n  render(): HTMLZTbodyElement {\n    return (\n      <Host role=\"rowgroup\">\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAAY,IAAM,6CCAxB,MAAMA,EAAY,IAAM,6sD,MCWXC,EAAMC,EAAA,MAAAD,UAAAE,E,iFACjB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,KAAK,YACTH,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/components/z-td.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,createEvent as n,h as o,Host as s,transformTag as i}from"@stencil/core/internal/client";import{P as a,e as c,B as l}from"./index2.js";import{d as r}from"./index5.js";import{d as p}from"./index3.js";import{d as h}from"./index17.js";const d=()=>`:host{position:relative;display:flex;max-width:100%;align-items:center;padding:calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{z-index:1;opacity:1;pointer-events:all}}`;const u=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.colspanChange=n(this,"colspanChange",6);this.sticky=false;this.showMenu=null;this.popoverPosition=a.AUTO;this.isMenuOpen=false}updateColspan(){if(this.colspan){this.host.style.gridColumn=`span ${this.colspan}`}else{this.host.style.removeProperty("grid-column")}this.colspanChange.emit(this.colspan||1)}onMenuButtonClick(e){e.stopPropagation();this.popoverEl.open=!this.popoverEl.open}componentWillLoad(){this.updateColspan()}render(){return o(s,{key:"1058d07bd54d368be4c3ac73bbcb44efd8a1705b",role:"cell","menu-open":this.isMenuOpen},o("div",{key:"3cd22ea20154c545d48ed73063feb9b1534df313",class:"cell--content"},o("slot",{key:"6b14788ea5f25d84609bb9e5e60aa450507a44e6"}),this.showMenu&&o("div",{key:"a35b449393363b0c36cb9baf93e930eb832eb7ec",class:"cell--menu-container prevent-expand"},o("z-button",{key:"ff31b6ad5a6c104f9c6e9ef565119d5f81d3f91a",variant:l.TERTIARY,icon:"contextual-menu",size:c.X_SMALL,ref:e=>this.menuTrigger=e,onClick:this.onMenuButtonClick.bind(this)}),o("z-popover",{key:"919445e5e5d477795a6e21fa7d69c1974da6b05e",class:"cell-popover",ref:e=>this.popoverEl=e,bindTo:this.menuTrigger,onOpenChange:e=>this.isMenuOpen=e.detail.open,position:this.popoverPosition},o("slot",{key:"637935f871e288248376025f899d2c2490dead9c",name:"contextual-menu"})))))}get host(){return this}static get watchers(){return{colspan:[{updateColspan:0}]}}static get style(){return d()}},[257,"z-td",{colspan:[2],sticky:[516],showMenu:[513,"show-menu"],popoverPosition:[1,"popover-position"],isMenuOpen:[32]},undefined,{colspan:[{updateColspan:0}]}]);function m(){if(typeof customElements==="undefined"){return}const e=["z-td","z-button","z-icon","z-popover"];e.forEach((e=>{switch(e){case"z-td":if(!customElements.get(i(e))){customElements.define(i(e),u)}break;case"z-button":if(!customElements.get(i(e))){r()}break;case"z-icon":if(!customElements.get(i(e))){p()}break;case"z-popover":if(!customElements.get(i(e))){h()}break}}))}const f=u;const b=m;export{f as ZTd,b as defineCustomElement};
+import{proxyCustomElement as e,HTMLElement as t,createEvent as o,h as a,Host as r,transformTag as l}from"@stencil/core/internal/client";import{P as s,e as n,B as i}from"./index2.js";import{d as c}from"./index5.js";import{d}from"./index3.js";import{d as b}from"./index17.js";const h=()=>`:host{position:relative;display:flex;max-width:100%;align-items:center;background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{z-index:1;opacity:1;pointer-events:all}}`;const f=()=>`z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover>tbody>tr:hover>td,table.z-table-hover>tfoot>tr:hover>td{position:relative;background-color:var(--color-surface02)}table.z-table-hover>tbody>tr:hover>td::after,table.z-table-hover>tfoot>tr:hover>td::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:-1px;box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);content:""}table.z-table-hover>tbody>tr:hover>td:first-child::after,table.z-table-hover>thead>tr:hover>th:first-child::after,table.z-table-hover>tfoot>tr:hover>td:first-child::after{left:0}`;const p=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.colspanChange=o(this,"colspanChange",6);this.sticky=false;this.showMenu=null;this.popoverPosition=s.AUTO;this.isMenuOpen=false}updateColspan(){if(this.colspan){this.host.style.gridColumn=`span ${this.colspan}`}else{this.host.style.removeProperty("grid-column")}this.colspanChange.emit(this.colspan||1)}onMenuButtonClick(e){e.stopPropagation();this.popoverEl.open=!this.popoverEl.open}componentWillLoad(){this.updateColspan()}render(){return a(r,{key:"2c3552c5c30611595ac619e6ca3a1e93b3d37366",role:"cell","menu-open":this.isMenuOpen},a("div",{key:"d13012a1f16aaa6ab44b4eea1dafa63cf1ebbd3a",class:"cell--content"},a("slot",{key:"b4571116c24bb99dc6ec76486fc948da89a5393b"}),this.showMenu&&a("div",{key:"6ebd3bfc1fcf8dce3afb91931309c4644efc2e49",class:"cell--menu-container prevent-expand"},a("z-button",{key:"3d01c8956127276eb765c3a9f4aabb4ed710b404",variant:i.TERTIARY,icon:"contextual-menu",size:n.X_SMALL,ref:e=>this.menuTrigger=e,onClick:this.onMenuButtonClick.bind(this)}),a("z-popover",{key:"d04c06677e2e8efb5d80bfbfd7cc91c9cbff7231",class:"cell-popover",ref:e=>this.popoverEl=e,bindTo:this.menuTrigger,onOpenChange:e=>this.isMenuOpen=e.detail.open,position:this.popoverPosition},a("slot",{key:"c389c6fdf131aeef86eae687df9c2f7fb6fbc3be",name:"contextual-menu"})))))}get host(){return this}static get watchers(){return{colspan:[{updateColspan:0}]}}static get style(){return h()+f()}},[257,"z-td",{colspan:[2],sticky:[516],showMenu:[513,"show-menu"],popoverPosition:[1,"popover-position"],isMenuOpen:[32]},undefined,{colspan:[{updateColspan:0}]}]);function u(){if(typeof customElements==="undefined"){return}const e=["z-td","z-button","z-icon","z-popover"];e.forEach((e=>{switch(e){case"z-td":if(!customElements.get(l(e))){customElements.define(l(e),p)}break;case"z-button":if(!customElements.get(l(e))){c()}break;case"z-icon":if(!customElements.get(l(e))){d()}break;case"z-popover":if(!customElements.get(l(e))){b()}break}}))}const m=p;const z=u;export{m as ZTd,z as defineCustomElement};
 //# sourceMappingURL=z-td.js.map

package/dist/components/z-td.js.map

@@ -1 +1 @@
-{"version":3,"names":["zTableCellsCss","ZTd","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","sticky","showMenu","popoverPosition","PopoverPosition","AUTO","isMenuOpen","updateColspan","colspan","host","style","gridColumn","removeProperty","colspanChange","emit","onMenuButtonClick","ev","stopPropagation","popoverEl","open","componentWillLoad","render","h","Host","key","role","class","variant","ButtonVariant","TERTIARY","icon","size","ControlSize","X_SMALL","ref","el","menuTrigger","onClick","bind","bindTo","onOpenChange","event","detail","position","name"],"sources":["src/components/table/cells/z-table-cells.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  max-width: 100%;\n  align-items: center;\n  padding: calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));\n  background-color: var(--color-surface01);\n  gap: calc(var(--space-unit) * 2) var(--space-unit);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  box-shadow: 8px 0 16px -8px var(--shadow-color-base);\n}\n\n:host([menu-open]) {\n  z-index: 2;\n}\n\n.cell--content {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n\n:host([show-menu]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.cell--menu-container {\n  margin-left: auto;\n}\n\n:host(:not([show-menu])) .cell--menu-container {\n  opacity: 0;\n  pointer-events: none;\n}\n\n:host(:is([show-menu], [menu-open])) .cell--menu-container,\n:host([show-menu]) .cell--menu-container:focus-within {\n  z-index: 1;\n  opacity: 1;\n  pointer-events: all;\n}\n\n:host .cell-popover {\n  z-index: 100;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n  :host([show-menu=\"hover\"]) .cell--menu-container {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([show-menu=\"hover\"]:hover) .cell--menu-container {\n    z-index: 1;\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n  tag: \"z-td\",\n  styleUrl: \"../z-table-cells.css\",\n  shadow: true,\n})\nexport class ZTd implements ComponentInterface {\n  @Element() host: HTMLZTdElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Set the popover position, the default is \"auto\".\n   */\n  @Prop()\n  popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  private menuTrigger: HTMLZButtonElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Emitted when the value of the `colspan` changes.\n   */\n  @Event({\n    bubbles: true,\n    cancelable: false,\n  })\n  colspanChange: EventEmitter<number>;\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n\n    this.colspanChange.emit(this.colspan || 1);\n  }\n\n  private onMenuButtonClick(ev: MouseEvent): void {\n    ev.stopPropagation();\n    this.popoverEl.open = !this.popoverEl.open;\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZTdElement {\n    return (\n      <Host\n        role=\"cell\"\n        menu-open={this.isMenuOpen}\n      >\n        <div class=\"cell--content\">\n          <slot></slot>\n          {this.showMenu && (\n            <div class=\"cell--menu-container prevent-expand\">\n              <z-button\n                variant={ButtonVariant.TERTIARY}\n                icon=\"contextual-menu\"\n                size={ControlSize.X_SMALL}\n                ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n                onClick={this.onMenuButtonClick.bind(this)}\n              />\n              <z-popover\n                class=\"cell-popover\"\n                ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n                bindTo={this.menuTrigger as HTMLElement}\n                onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n                position={this.popoverPosition}\n              >\n                <slot name=\"contextual-menu\"></slot>\n              </z-popover>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uRAAA,MAAMA,EAAiB,IAAM,8hC,MCYhBC,EAAGC,EAAA,MAAAD,UAAAE,EALhB,WAAAC,CAAAC,G,+GAkBEC,KAAAC,OAAS,MAQTD,KAAAE,SAAgC,KAMhCF,KAAAG,gBAAoCC,EAAgBC,KAMpDL,KAAAM,WAAa,KAmEd,CAnDW,aAAAC,GACR,GAAIP,KAAKQ,QAAS,CAChBR,KAAKS,KAAKC,MAAMC,WAAa,QAAQX,KAAKQ,S,KACrC,CACLR,KAAKS,KAAKC,MAAME,eAAe,c,CAGjCZ,KAAKa,cAAcC,KAAKd,KAAKQ,SAAW,E,CAGlC,iBAAAO,CAAkBC,GACxBA,EAAGC,kBACHjB,KAAKkB,UAAUC,MAAQnB,KAAKkB,UAAUC,I,CAGxC,iBAAAC,GACEpB,KAAKO,e,CAGP,MAAAc,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,OAAM,YACAzB,KAAKM,YAEhBgB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,iBACTJ,EAAA,QAAAE,IAAA,6CACCxB,KAAKE,UACJoB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uCACTJ,EAAA,YAAAE,IAAA,2CACEG,QAASC,EAAcC,SACvBC,KAAK,kBACLC,KAAMC,EAAYC,QAClBC,IAAMC,GAAQnC,KAAKoC,YAAcD,EACjCE,QAASrC,KAAKe,kBAAkBuB,KAAKtC,QAEvCsB,EAAA,aAAAE,IAAA,2CACEE,MAAM,eACNQ,IAAMC,GAAQnC,KAAKkB,UAAYiB,EAC/BI,OAAQvC,KAAKoC,YACbI,aAAeC,GAAWzC,KAAKM,WAAamC,EAAMC,OAAOvB,KACzDwB,SAAU3C,KAAKG,iBAEfmB,EAAA,QAAAE,IAAA,2CAAMoB,KAAK,uB","ignoreList":[]}
+{"version":3,"names":["zTableCellsCss","stylesCss","ZTd","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","sticky","showMenu","popoverPosition","PopoverPosition","AUTO","isMenuOpen","updateColspan","colspan","host","style","gridColumn","removeProperty","colspanChange","emit","onMenuButtonClick","ev","stopPropagation","popoverEl","open","componentWillLoad","render","h","Host","key","role","class","variant","ButtonVariant","TERTIARY","icon","size","ControlSize","X_SMALL","ref","el","menuTrigger","onClick","bind","bindTo","onOpenChange","event","detail","position","name"],"sources":["src/components/table/cells/z-table-cells.css?tag=z-td&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-td&encapsulation=shadow","src/components/table/cells/z-td/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  max-width: 100%;\n  align-items: center;\n  background-color: var(--color-surface01);\n  gap: calc(var(--space-unit) * 2) var(--space-unit);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  box-shadow: 8px 0 16px -8px var(--shadow-color-base);\n}\n\n:host([menu-open]) {\n  z-index: 2;\n}\n\n.cell--content {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n\n:host([show-menu]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.cell--menu-container {\n  margin-left: auto;\n}\n\n:host(:not([show-menu])) .cell--menu-container {\n  opacity: 0;\n  pointer-events: none;\n}\n\n:host(:is([show-menu], [menu-open])) .cell--menu-container,\n:host([show-menu]) .cell--menu-container:focus-within {\n  z-index: 1;\n  opacity: 1;\n  pointer-events: all;\n}\n\n:host .cell-popover {\n  z-index: 100;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n  :host([show-menu=\"hover\"]) .cell--menu-container {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([show-menu=\"hover\"]:hover) .cell--menu-container {\n    z-index: 1;\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n","z-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTd component.\n * @slot - ZTd content.\n */\n@Component({\n  tag: \"z-td\",\n  styleUrls: [\"../z-table-cells.css\", \"../../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZTd implements ComponentInterface {\n  @Element() host: HTMLZTdElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Set the popover position, the default is \"auto\".\n   */\n  @Prop()\n  popoverPosition?: PopoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  private menuTrigger: HTMLZButtonElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Emitted when the value of the `colspan` changes.\n   */\n  @Event({\n    bubbles: true,\n    cancelable: false,\n  })\n  colspanChange: EventEmitter<number>;\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n\n    this.colspanChange.emit(this.colspan || 1);\n  }\n\n  private onMenuButtonClick(ev: MouseEvent): void {\n    ev.stopPropagation();\n    this.popoverEl.open = !this.popoverEl.open;\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZTdElement {\n    return (\n      <Host\n        role=\"cell\"\n        menu-open={this.isMenuOpen}\n      >\n        <div class=\"cell--content\">\n          <slot></slot>\n          {this.showMenu && (\n            <div class=\"cell--menu-container prevent-expand\">\n              <z-button\n                variant={ButtonVariant.TERTIARY}\n                icon=\"contextual-menu\"\n                size={ControlSize.X_SMALL}\n                ref={(el) => (this.menuTrigger = el as HTMLZButtonElement)}\n                onClick={this.onMenuButtonClick.bind(this)}\n              />\n              <z-popover\n                class=\"cell-popover\"\n                ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n                bindTo={this.menuTrigger as HTMLElement}\n                onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n                position={this.popoverPosition}\n              >\n                <slot name=\"contextual-menu\"></slot>\n              </z-popover>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"kRAAA,MAAMA,EAAiB,IAAM,q9BCA7B,MAAMC,EAAY,IAAM,6sD,MCYXC,EAAGC,EAAA,MAAAD,UAAAE,EALhB,WAAAC,CAAAC,G,+GAkBEC,KAAAC,OAAS,MAQTD,KAAAE,SAAgC,KAMhCF,KAAAG,gBAAoCC,EAAgBC,KAMpDL,KAAAM,WAAa,KAmEd,CAnDW,aAAAC,GACR,GAAIP,KAAKQ,QAAS,CAChBR,KAAKS,KAAKC,MAAMC,WAAa,QAAQX,KAAKQ,S,KACrC,CACLR,KAAKS,KAAKC,MAAME,eAAe,c,CAGjCZ,KAAKa,cAAcC,KAAKd,KAAKQ,SAAW,E,CAGlC,iBAAAO,CAAkBC,GACxBA,EAAGC,kBACHjB,KAAKkB,UAAUC,MAAQnB,KAAKkB,UAAUC,I,CAGxC,iBAAAC,GACEpB,KAAKO,e,CAGP,MAAAc,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,OAAM,YACAzB,KAAKM,YAEhBgB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,iBACTJ,EAAA,QAAAE,IAAA,6CACCxB,KAAKE,UACJoB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,uCACTJ,EAAA,YAAAE,IAAA,2CACEG,QAASC,EAAcC,SACvBC,KAAK,kBACLC,KAAMC,EAAYC,QAClBC,IAAMC,GAAQnC,KAAKoC,YAAcD,EACjCE,QAASrC,KAAKe,kBAAkBuB,KAAKtC,QAEvCsB,EAAA,aAAAE,IAAA,2CACEE,MAAM,eACNQ,IAAMC,GAAQnC,KAAKkB,UAAYiB,EAC/BI,OAAQvC,KAAKoC,YACbI,aAAeC,GAAWzC,KAAKM,WAAamC,EAAMC,OAAOvB,KACzDwB,SAAU3C,KAAKG,iBAEfmB,EAAA,QAAAE,IAAA,2CAAMoB,KAAK,uB","ignoreList":[]}

package/dist/components/z-tfoot.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as o,HTMLElement as t,h as e,Host as s,transformTag as r}from"@stencil/core/internal/client";const c=()=>`:host{display:block;box-sizing:border-box;border-top:1px solid var(--color-surface03);border-bottom:1px solid var(--color-surface03)}:host([sticky]){position:sticky;z-index:1;bottom:0;background-color:var(--color-surface01)}`;const n=o(class o extends t{constructor(o){super();if(o!==false){this.__registerHost()}this.__attachShadow();this.sticky=false}render(){return e(s,{key:"e200294dd24c6a58722245df0b90b8b562fd7293",role:"rowgroup",tabIndex:-1},e("slot",{key:"0db022a1de8dcbe5457598ab55aacd7b07b9dcb4"}))}static get style(){return c()}},[257,"z-tfoot",{sticky:[516]}]);function i(){if(typeof customElements==="undefined"){return}const o=["z-tfoot"];o.forEach((o=>{switch(o){case"z-tfoot":if(!customElements.get(r(o))){customElements.define(r(o),n)}break}}))}const d=n;const a=i;export{d as ZTfoot,a as defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as e,h as o,Host as r,transformTag as a}from"@stencil/core/internal/client";const l=()=>`:host{display:block;box-sizing:border-box;margin-top:-1px}:host([sticky]){position:sticky;z-index:1;bottom:0;background-color:var(--color-surface01)}`;const b=()=>`z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover>tbody>tr:hover>td,table.z-table-hover>tfoot>tr:hover>td{position:relative;background-color:var(--color-surface02)}table.z-table-hover>tbody>tr:hover>td::after,table.z-table-hover>tfoot>tr:hover>td::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:-1px;box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);content:""}table.z-table-hover>tbody>tr:hover>td:first-child::after,table.z-table-hover>thead>tr:hover>th:first-child::after,table.z-table-hover>tfoot>tr:hover>td:first-child::after{left:0}`;const c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.sticky=false}render(){return o(r,{key:"cdd4d2841caada167b8818ff534744445e0d8979",role:"rowgroup",tabIndex:-1},o("slot",{key:"5cf911121ea09dcc13744e9d1d730be92f20cbf4"}))}static get style(){return l()+b()}},[257,"z-tfoot",{sticky:[516]}]);function s(){if(typeof customElements==="undefined"){return}const t=["z-tfoot"];t.forEach((t=>{switch(t){case"z-tfoot":if(!customElements.get(a(t))){customElements.define(a(t),c)}break}}))}const d=c;const i=s;export{d as ZTfoot,i as defineCustomElement};
 //# sourceMappingURL=z-tfoot.js.map

package/dist/components/z-tfoot.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZTfoot","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","sticky","render","h","Host","key","role","tabIndex"],"sources":["src/components/table/z-tfoot/styles.css?tag=z-tfoot&encapsulation=shadow","src/components/table/z-tfoot/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  border-top: 1px solid var(--color-surface03);\n  border-bottom: 1px solid var(--color-surface03);\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  background-color: var(--color-surface01);\n}\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n */\n@Component({\n  tag: \"z-tfoot\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTfoot implements ComponentInterface {\n  /**\n   * If true, the footer will be stuck to the bottom of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): void {\n    return (\n      <Host\n        role=\"rowgroup\"\n        tabIndex={-1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAAY,IAAM,mO,MCWXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,kEAUEC,KAAAC,OAAS,KAYV,CAVC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WACLC,UAAU,GAEVJ,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZTfoot","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","sticky","render","h","Host","key","role","tabIndex"],"sources":["src/components/table/z-tfoot/styles.css?tag=z-tfoot&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-tfoot&encapsulation=shadow","src/components/table/z-tfoot/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  margin-top: -1px;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  bottom: 0;\n  background-color: var(--color-surface01);\n}\n","z-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n","import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n */\n@Component({\n  tag: \"z-tfoot\",\n  styleUrls: [\"styles.css\", \"../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZTfoot implements ComponentInterface {\n  /**\n   * If true, the footer will be stuck to the bottom of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): void {\n    return (\n      <Host\n        role=\"rowgroup\"\n        tabIndex={-1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAAY,IAAM,wJCAxB,MAAMA,EAAY,IAAM,6sD,MCWXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,kEAUEC,KAAAC,OAAS,KAYV,CAVC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WACLC,UAAU,GAEVJ,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/components/z-th.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as o,createEvent as e,h as s,Host as n,transformTag as i}from"@stencil/core/internal/client";import{P as a,S as r,e as c,B as h}from"./index2.js";import{d as l}from"./index5.js";import{d as u}from"./index3.js";import{d as p}from"./index17.js";const d=()=>`:host{position:relative;display:flex;max-width:100%;align-items:center;padding:calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{z-index:1;opacity:1;pointer-events:all}}`;const f=()=>`:host{z-index:1;padding:0;background-color:var(--color-background);font-weight:var(--font-sb)}.cell--content{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2))}:host([show-sorting]) .cell--content{column-gap:var(--space-unit)}.z-th--sort-button{position:relative;padding:0;border:none;background-color:transparent;cursor:pointer;outline:none}.z-th--sort-button:focus,.z-th--sort-button:focus-visible{box-shadow:var(--shadow-focus-primary);opacity:1;outline:none;pointer-events:all}@media (min-width: 768px) and (hover: hover){:host([show-sorting="hover"]) .z-th--sort-button{opacity:0;pointer-events:none}:host([show-sorting="hover"]:hover) .z-th--sort-button,:host([show-sorting="hover"]) .z-th--sort-button:focus:focus-visible,:host([show-sorting="always"]) .z-th--sort-button,:host([sorted]) .z-th--sort-button{opacity:1;pointer-events:all}}:host([show-sorting="hover"]:hover) .z-th--sort-button::after,:host([show-sorting="hover"]) .z-th--sort-button:focus:focus-visible::after,:host([show-sorting="always"]) .z-th--sort-button::after,:host([sorted]) .z-th--sort-button::after{position:absolute;top:6px;left:6px;width:calc(100% - 12px);height:calc(100% - 10px);background-color:transparent;content:""}`;const m=t(class t extends o{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.sort=e(this,"sort",7);this.showMenu=null;this.showSorting=null;this.sticky=false;this.sorted=false;this.popoverPosition=a.AUTO;this.isMenuOpen=false}get ariaSortDirection(){if(!this.sortDirection){return null}return this.sortDirection===r.ASC?"ascending":"descending"}handleSort(){if(!this.sortDirection){this.sorted=false;return}this.sortDirection=this.sortDirection===r.ASC?r.DESC:r.ASC;this.sorted=true;this.sort.emit({sortDirection:this.sortDirection})}updateColspan(){if(this.colspan){this.host.style.gridColumn=`span ${this.colspan}`}else{this.host.style.removeProperty("grid-column")}}componentWillLoad(){this.updateColspan()}render(){return s(n,{key:"029656c92d8e6abda98ecb1c1f8f37df5561993b",role:"columnheader","menu-open":this.isMenuOpen,"aria-sort":this.ariaSortDirection,sortable:this.showSorting},s("div",{key:"a00a37619da7fba5ce5f0ff00644c321f6324d3d",class:"cell--content"},s("slot",{key:"427c778843968776001f3a8486df91a32a51a620"}),this.showSorting&&s("button",{key:"77d2f3841e1398e9df475d91445a9ccd52133335",class:"z-th--sort-button",type:"button",onClick:this.handleSort.bind(this)},s("z-icon",{key:"3e29de562c699e7ea2b1acab0273d759f80f5b1f",name:this.sortDirection===r.DESC?"arrow-simple-up":"arrow-simple-down",width:14,height:14})),this.showMenu&&s("div",{key:"a6fe1bc8e02e9f5238835c57f32a2a17b5f3e5a2",class:"cell--menu-container"},s("z-button",{key:"7df03bf2a1411aa5357a9f31f2812572a9e564df",variant:h.TERTIARY,icon:"contextual-menu",size:c.X_SMALL,ref:t=>this.menuTrigger=t,onClick:()=>this.popoverEl.open=!this.popoverEl.open}),s("z-popover",{key:"73ecdad7bc49295072fa2163e6c94413e269755e",ref:t=>this.popoverEl=t,bindTo:this.menuTrigger,onOpenChange:t=>this.isMenuOpen=t.detail.open,position:this.popoverPosition},s("slot",{key:"c5cb377cc2304e37f508589f818fb97037d9935d",name:"contextual-menu"})))))}get host(){return this}static get watchers(){return{colspan:[{updateColspan:0}]}}static get style(){return d()+f()}},[257,"z-th",{colspan:[2],showMenu:[513,"show-menu"],showSorting:[513,"show-sorting"],sticky:[516],sortDirection:[1025,"sort-direction"],sorted:[1540],popoverPosition:[1,"popover-position"],isMenuOpen:[32]},undefined,{colspan:[{updateColspan:0}]}]);function b(){if(typeof customElements==="undefined"){return}const t=["z-th","z-button","z-icon","z-popover"];t.forEach((t=>{switch(t){case"z-th":if(!customElements.get(i(t))){customElements.define(i(t),m)}break;case"z-button":if(!customElements.get(i(t))){l()}break;case"z-icon":if(!customElements.get(i(t))){u()}break;case"z-popover":if(!customElements.get(i(t))){p()}break}}))}const v=m;const g=b;export{v as ZTh,g as defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as r,Host as s,transformTag as a}from"@stencil/core/internal/client";import{P as n,S as i,e as l,B as c}from"./index2.js";import{d as h}from"./index5.js";import{d}from"./index3.js";import{d as b}from"./index17.js";const u=()=>`:host{position:relative;display:flex;max-width:100%;align-items:center;background-color:var(--color-surface01);gap:calc(var(--space-unit) * 2) var(--space-unit)}:host,*{box-sizing:border-box}:host([sticky]){position:sticky;z-index:1;top:0;left:0;box-shadow:8px 0 16px -8px var(--shadow-color-base)}:host([menu-open]){z-index:2}.cell--content{display:flex;width:100%;height:100%;align-items:center}:host([show-menu]) .cell--content{column-gap:var(--space-unit)}.cell--menu-container{margin-left:auto}:host(:not([show-menu])) .cell--menu-container{opacity:0;pointer-events:none}:host(:is([show-menu],[menu-open])) .cell--menu-container,:host([show-menu]) .cell--menu-container:focus-within{z-index:1;opacity:1;pointer-events:all}:host .cell-popover{z-index:100}@media (min-width: 768px) and (hover: hover){:host([show-menu="hover"]) .cell--menu-container{opacity:0;pointer-events:none}:host([show-menu="hover"]:hover) .cell--menu-container{z-index:1;opacity:1;pointer-events:all}}`;const p=()=>`:host{z-index:1;padding:0;background-color:var(--color-background);font-weight:var(--font-sb)}:host([show-sorting]) .cell--content{column-gap:var(--space-unit)}.z-th--sort-button{position:relative;padding:0;border:none;background-color:transparent;cursor:pointer;outline:none}.z-th--sort-button:focus,.z-th--sort-button:focus-visible{box-shadow:var(--shadow-focus-primary);opacity:1;outline:none;pointer-events:all}@media (min-width: 768px) and (hover: hover){:host([show-sorting="hover"]) .z-th--sort-button{opacity:0;pointer-events:none}:host([show-sorting="hover"]:hover) .z-th--sort-button,:host([show-sorting="hover"]) .z-th--sort-button:focus:focus-visible,:host([show-sorting="always"]) .z-th--sort-button,:host([sorted]) .z-th--sort-button{opacity:1;pointer-events:all}}:host([show-sorting="hover"]:hover) .z-th--sort-button::after,:host([show-sorting="hover"]) .z-th--sort-button:focus:focus-visible::after,:host([show-sorting="always"]) .z-th--sort-button::after,:host([sorted]) .z-th--sort-button::after{position:absolute;top:6px;left:6px;width:calc(100% - 12px);height:calc(100% - 10px);background-color:transparent;content:""}`;const f=()=>`z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover>tbody>tr:hover>td,table.z-table-hover>tfoot>tr:hover>td{position:relative;background-color:var(--color-surface02)}table.z-table-hover>tbody>tr:hover>td::after,table.z-table-hover>tfoot>tr:hover>td::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:-1px;box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);content:""}table.z-table-hover>tbody>tr:hover>td:first-child::after,table.z-table-hover>thead>tr:hover>th:first-child::after,table.z-table-hover>tfoot>tr:hover>td:first-child::after{left:0}`;const v=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.sort=o(this,"sort",7);this.showMenu=null;this.showSorting=null;this.sticky=false;this.sorted=false;this.popoverPosition=n.AUTO;this.isMenuOpen=false}get ariaSortDirection(){if(!this.sortDirection){return null}return this.sortDirection===i.ASC?"ascending":"descending"}handleSort(){if(!this.sortDirection){this.sorted=false;return}this.sortDirection=this.sortDirection===i.ASC?i.DESC:i.ASC;this.sorted=true;this.sort.emit({sortDirection:this.sortDirection})}updateColspan(){if(this.colspan){this.host.style.gridColumn=`span ${this.colspan}`}else{this.host.style.removeProperty("grid-column")}}componentWillLoad(){this.updateColspan()}render(){return r(s,{key:"aef115e04b8a8c37c749a568bcb24250e062008b",role:"columnheader","menu-open":this.isMenuOpen,"aria-sort":this.ariaSortDirection,sortable:this.showSorting},r("div",{key:"5b78767c1d65440363c06d5e4b7137598e74d8b4",class:"cell--content"},r("slot",{key:"340210db9182785b89ed01a26d6dc60558aa9f4f"}),this.showSorting&&r("button",{key:"2c6f42cbf3a2c1d37af04182731503accfe67362",class:"z-th--sort-button",type:"button",onClick:this.handleSort.bind(this)},r("z-icon",{key:"ad73a2838da75772e84e431c36256e77bdf39157",name:this.sortDirection===i.DESC?"arrow-simple-up":"arrow-simple-down",width:14,height:14})),this.showMenu&&r("div",{key:"d4c23d3a5b05ccea94a03efa6b10efc65e4a0cf4",class:"cell--menu-container"},r("z-button",{key:"fb0930c50cd3ac363e764ded3d7be227678a5d2d",variant:c.TERTIARY,icon:"contextual-menu",size:l.X_SMALL,ref:t=>this.menuTrigger=t,onClick:()=>this.popoverEl.open=!this.popoverEl.open}),r("z-popover",{key:"b720485c31c2070d77e33bceacd5be582516ae38",ref:t=>this.popoverEl=t,bindTo:this.menuTrigger,onOpenChange:t=>this.isMenuOpen=t.detail.open,position:this.popoverPosition},r("slot",{key:"7372fa0d1ca9773ebbf8b6c8ec581133967aafdf",name:"contextual-menu"})))))}get host(){return this}static get watchers(){return{colspan:[{updateColspan:0}]}}static get style(){return u()+(p()+f())}},[257,"z-th",{colspan:[2],showMenu:[513,"show-menu"],showSorting:[513,"show-sorting"],sticky:[516],sortDirection:[1025,"sort-direction"],sorted:[1540],popoverPosition:[1,"popover-position"],isMenuOpen:[32]},undefined,{colspan:[{updateColspan:0}]}]);function z(){if(typeof customElements==="undefined"){return}const t=["z-th","z-button","z-icon","z-popover"];t.forEach((t=>{switch(t){case"z-th":if(!customElements.get(a(t))){customElements.define(a(t),v)}break;case"z-button":if(!customElements.get(a(t))){h()}break;case"z-icon":if(!customElements.get(a(t))){d()}break;case"z-popover":if(!customElements.get(a(t))){b()}break}}))}const m=v;const g=z;export{m as ZTh,g as defineCustomElement};
 //# sourceMappingURL=z-th.js.map

package/dist/components/z-th.js.map

@@ -1 +1 @@
-{"version":3,"names":["zTableCellsCss","stylesCss","ZTh","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","showMenu","showSorting","sticky","sorted","popoverPosition","PopoverPosition","AUTO","isMenuOpen","ariaSortDirection","sortDirection","SortDirection","ASC","handleSort","DESC","sort","emit","updateColspan","colspan","host","style","gridColumn","removeProperty","componentWillLoad","render","h","Host","key","role","sortable","class","type","onClick","bind","name","width","height","variant","ButtonVariant","TERTIARY","icon","size","ControlSize","X_SMALL","ref","el","menuTrigger","popoverEl","open","bindTo","onOpenChange","event","detail","position"],"sources":["src/components/table/cells/z-table-cells.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  max-width: 100%;\n  align-items: center;\n  padding: calc(var(--z-table--cells-padding, calc(var(--space-unit) * 2)));\n  background-color: var(--color-surface01);\n  gap: calc(var(--space-unit) * 2) var(--space-unit);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  box-shadow: 8px 0 16px -8px var(--shadow-color-base);\n}\n\n:host([menu-open]) {\n  z-index: 2;\n}\n\n.cell--content {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n\n:host([show-menu]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.cell--menu-container {\n  margin-left: auto;\n}\n\n:host(:not([show-menu])) .cell--menu-container {\n  opacity: 0;\n  pointer-events: none;\n}\n\n:host(:is([show-menu], [menu-open])) .cell--menu-container,\n:host([show-menu]) .cell--menu-container:focus-within {\n  z-index: 1;\n  opacity: 1;\n  pointer-events: all;\n}\n\n:host .cell-popover {\n  z-index: 100;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n  :host([show-menu=\"hover\"]) .cell--menu-container {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([show-menu=\"hover\"]:hover) .cell--menu-container {\n    z-index: 1;\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n",":host {\n  z-index: 1;\n  padding: 0;\n  background-color: var(--color-background);\n  font-weight: var(--font-sb);\n}\n\n.cell--content {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n}\n\n:host([show-sorting]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.z-th--sort-button {\n  position: relative;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  outline: none;\n}\n\n.z-th--sort-button:focus,\n.z-th--sort-button:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  opacity: 1;\n  outline: none;\n  pointer-events: all;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n  :host([show-sorting=\"hover\"]) .z-th--sort-button {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([show-sorting=\"hover\"]:hover) .z-th--sort-button,\n  :host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible,\n  :host([show-sorting=\"always\"]) .z-th--sort-button,\n  :host([sorted]) .z-th--sort-button {\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n\n:host([show-sorting=\"hover\"]:hover) .z-th--sort-button::after,\n:host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible::after,\n:host([show-sorting=\"always\"]) .z-th--sort-button::after,\n:host([sorted]) .z-th--sort-button::after {\n  position: absolute;\n  top: 6px;\n  left: 6px;\n  width: calc(100% - 12px);\n  height: calc(100% - 10px);\n  background-color: transparent;\n  content: \"\";\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, SortDirection, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTh component.\n * @slot - ZTh content.\n * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.\n */\n@Component({\n  tag: \"z-th\",\n  styleUrls: [\"../z-table-cells.css\", \"styles.css\"],\n  shadow: true,\n})\nexport class ZTh implements ComponentInterface {\n  @Element() host: HTMLZThElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Enables the sorting button.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the sort button.\n   */\n  @Prop({reflect: true})\n  showSorting: VisibilityCondition = null;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Current sorting direction.\n   */\n  @Prop({mutable: true})\n  sortDirection?: SortDirection;\n\n  /**\n   * Sorted state of the column.\n   */\n  @Prop({reflect: true, mutable: true})\n  sorted: boolean | null = false;\n\n  /**\n   * Set popover position.\n   */\n  @Prop()\n  popoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  /**\n   * Sort event fired when the user clicks on the sort button.\n   * The sorting logic must be implemented by the app.\n   * You can set an `id` on the `z-th` to easly identify the column in the event listener.\n   */\n  @Event()\n  private sort: EventEmitter;\n\n  private menuTrigger: HTMLElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Get the value to set to the `aria-sort` attribute based on the current sort direction.\n   */\n  private get ariaSortDirection(): string {\n    if (!this.sortDirection) {\n      return null;\n    }\n\n    return this.sortDirection === SortDirection.ASC ? \"ascending\" : \"descending\";\n  }\n\n  /**\n   * Handle the click on the sort button.\n   * @fires sort\n   */\n  private handleSort(): void {\n    if (!this.sortDirection) {\n      this.sorted = false;\n\n      return;\n    }\n\n    this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;\n    this.sorted = true;\n\n    this.sort.emit({sortDirection: this.sortDirection});\n  }\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZThElement {\n    return (\n      <Host\n        role=\"columnheader\"\n        menu-open={this.isMenuOpen}\n        aria-sort={this.ariaSortDirection}\n        sortable={this.showSorting}\n      >\n        <div class=\"cell--content\">\n          <slot></slot>\n          {this.showSorting && (\n            <button\n              class=\"z-th--sort-button\"\n              type=\"button\"\n              onClick={this.handleSort.bind(this)}\n            >\n              <z-icon\n                name={this.sortDirection === SortDirection.DESC ? \"arrow-simple-up\" : \"arrow-simple-down\"}\n                width={14}\n                height={14}\n              />\n            </button>\n          )}\n          {this.showMenu && (\n            <div class=\"cell--menu-container\">\n              <z-button\n                variant={ButtonVariant.TERTIARY}\n                icon=\"contextual-menu\"\n                size={ControlSize.X_SMALL}\n                ref={(el) => (this.menuTrigger = el as HTMLElement)}\n                onClick={() => (this.popoverEl.open = !this.popoverEl.open)}\n              />\n              <z-popover\n                ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n                bindTo={this.menuTrigger}\n                onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n                position={this.popoverPosition}\n              >\n                <slot name=\"contextual-menu\"></slot>\n              </z-popover>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8RAAA,MAAMA,EAAiB,IAAM,8hCCA7B,MAAMC,EAAY,IAAM,wsC,MCaXC,EAAGC,EAAA,MAAAD,UAAAE,EALhB,WAAAC,CAAAC,G,6FAoBEC,KAAAC,SAAgC,KAQhCD,KAAAE,YAAmC,KAMnCF,KAAAG,OAAS,MAYTH,KAAAI,OAAyB,MAMzBJ,KAAAK,gBAAkBC,EAAgBC,KAMlCP,KAAAQ,WAAa,KAqGd,CApFC,qBAAYC,GACV,IAAKT,KAAKU,cAAe,CACvB,OAAO,I,CAGT,OAAOV,KAAKU,gBAAkBC,EAAcC,IAAM,YAAc,Y,CAO1D,UAAAC,GACN,IAAKb,KAAKU,cAAe,CACvBV,KAAKI,OAAS,MAEd,M,CAGFJ,KAAKU,cAAgBV,KAAKU,gBAAkBC,EAAcC,IAAMD,EAAcG,KAAOH,EAAcC,IACnGZ,KAAKI,OAAS,KAEdJ,KAAKe,KAAKC,KAAK,CAACN,cAAeV,KAAKU,e,CAI5B,aAAAO,GACR,GAAIjB,KAAKkB,QAAS,CAChBlB,KAAKmB,KAAKC,MAAMC,WAAa,QAAQrB,KAAKkB,S,KACrC,CACLlB,KAAKmB,KAAKC,MAAME,eAAe,c,EAInC,iBAAAC,GACEvB,KAAKiB,e,CAGP,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,eAAc,YACR5B,KAAKQ,WAAU,YACfR,KAAKS,kBAChBoB,SAAU7B,KAAKE,aAEfuB,EAAA,OAAAE,IAAA,2CAAKG,MAAM,iBACTL,EAAA,QAAAE,IAAA,6CACC3B,KAAKE,aACJuB,EAAA,UAAAE,IAAA,2CACEG,MAAM,oBACNC,KAAK,SACLC,QAAShC,KAAKa,WAAWoB,KAAKjC,OAE9ByB,EAAA,UAAAE,IAAA,2CACEO,KAAMlC,KAAKU,gBAAkBC,EAAcG,KAAO,kBAAoB,oBACtEqB,MAAO,GACPC,OAAQ,MAIbpC,KAAKC,UACJwB,EAAA,OAAAE,IAAA,2CAAKG,MAAM,wBACTL,EAAA,YAAAE,IAAA,2CACEU,QAASC,EAAcC,SACvBC,KAAK,kBACLC,KAAMC,EAAYC,QAClBC,IAAMC,GAAQ7C,KAAK8C,YAAcD,EACjCb,QAAS,IAAOhC,KAAK+C,UAAUC,MAAQhD,KAAK+C,UAAUC,OAExDvB,EAAA,aAAAE,IAAA,2CACEiB,IAAMC,GAAQ7C,KAAK+C,UAAYF,EAC/BI,OAAQjD,KAAK8C,YACbI,aAAeC,GAAWnD,KAAKQ,WAAa2C,EAAMC,OAAOJ,KACzDK,SAAUrD,KAAKK,iBAEfoB,EAAA,QAAAE,IAAA,2CAAMO,KAAK,uB","ignoreList":[]}
+{"version":3,"names":["zTableCellsCss","stylesCss","ZTh","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","showMenu","showSorting","sticky","sorted","popoverPosition","PopoverPosition","AUTO","isMenuOpen","ariaSortDirection","sortDirection","SortDirection","ASC","handleSort","DESC","sort","emit","updateColspan","colspan","host","style","gridColumn","removeProperty","componentWillLoad","render","h","Host","key","role","sortable","class","type","onClick","bind","name","width","height","variant","ButtonVariant","TERTIARY","icon","size","ControlSize","X_SMALL","ref","el","menuTrigger","popoverEl","open","bindTo","onOpenChange","event","detail","position"],"sources":["src/components/table/cells/z-table-cells.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/styles.css?tag=z-th&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-th&encapsulation=shadow","src/components/table/cells/z-th/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  max-width: 100%;\n  align-items: center;\n  background-color: var(--color-surface01);\n  gap: calc(var(--space-unit) * 2) var(--space-unit);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  box-shadow: 8px 0 16px -8px var(--shadow-color-base);\n}\n\n:host([menu-open]) {\n  z-index: 2;\n}\n\n.cell--content {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n}\n\n:host([show-menu]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.cell--menu-container {\n  margin-left: auto;\n}\n\n:host(:not([show-menu])) .cell--menu-container {\n  opacity: 0;\n  pointer-events: none;\n}\n\n:host(:is([show-menu], [menu-open])) .cell--menu-container,\n:host([show-menu]) .cell--menu-container:focus-within {\n  z-index: 1;\n  opacity: 1;\n  pointer-events: all;\n}\n\n:host .cell-popover {\n  z-index: 100;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n  :host([show-menu=\"hover\"]) .cell--menu-container {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([show-menu=\"hover\"]:hover) .cell--menu-container {\n    z-index: 1;\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n",":host {\n  z-index: 1;\n  padding: 0;\n  background-color: var(--color-background);\n  font-weight: var(--font-sb);\n}\n\n:host([show-sorting]) .cell--content {\n  column-gap: var(--space-unit);\n}\n\n.z-th--sort-button {\n  position: relative;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  outline: none;\n}\n\n.z-th--sort-button:focus,\n.z-th--sort-button:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n  opacity: 1;\n  outline: none;\n  pointer-events: all;\n}\n\n@media (min-width: 768px) and (hover: hover) {\n  :host([show-sorting=\"hover\"]) .z-th--sort-button {\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  :host([show-sorting=\"hover\"]:hover) .z-th--sort-button,\n  :host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible,\n  :host([show-sorting=\"always\"]) .z-th--sort-button,\n  :host([sorted]) .z-th--sort-button {\n    opacity: 1;\n    pointer-events: all;\n  }\n}\n\n:host([show-sorting=\"hover\"]:hover) .z-th--sort-button::after,\n:host([show-sorting=\"hover\"]) .z-th--sort-button:focus:focus-visible::after,\n:host([show-sorting=\"always\"]) .z-th--sort-button::after,\n:host([sorted]) .z-th--sort-button::after {\n  position: absolute;\n  top: 6px;\n  left: 6px;\n  width: calc(100% - 12px);\n  height: calc(100% - 10px);\n  background-color: transparent;\n  content: \"\";\n}\n","z-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n","import {Component, ComponentInterface, Element, Event, EventEmitter, Host, Prop, State, Watch, h} from \"@stencil/core\";\nimport {ButtonVariant, ControlSize, PopoverPosition, SortDirection, VisibilityCondition} from \"../../../../beans\";\n\n/**\n * ZTh component.\n * @slot - ZTh content.\n * @slot contextual-menu - Contextual menu content. Only visible when `showMenu` is true.\n */\n@Component({\n  tag: \"z-th\",\n  styleUrls: [\"../z-table-cells.css\", \"styles.css\", \"../../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZTh implements ComponentInterface {\n  @Element() host: HTMLZThElement;\n\n  /**\n   * Number of columns that the cell should span.\n   */\n  @Prop()\n  colspan: number;\n\n  /**\n   * Enables the contextual menu.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the menu button.\n   */\n  @Prop({reflect: true})\n  showMenu: VisibilityCondition = null;\n\n  /**\n   * Enables the sorting button.\n   * Can be set to \"hover\" or \"always\" to show the button only on cell hover or always.\n   * Set a nullish value to hide the sort button.\n   */\n  @Prop({reflect: true})\n  showSorting: VisibilityCondition = null;\n\n  /**\n   * Whether the cell should stick.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * Current sorting direction.\n   */\n  @Prop({mutable: true})\n  sortDirection?: SortDirection;\n\n  /**\n   * Sorted state of the column.\n   */\n  @Prop({reflect: true, mutable: true})\n  sorted: boolean | null = false;\n\n  /**\n   * Set popover position.\n   */\n  @Prop()\n  popoverPosition = PopoverPosition.AUTO;\n\n  /**\n   * Store the open state of the menu.\n   */\n  @State()\n  isMenuOpen = false;\n\n  /**\n   * Sort event fired when the user clicks on the sort button.\n   * The sorting logic must be implemented by the app.\n   * You can set an `id` on the `z-th` to easly identify the column in the event listener.\n   */\n  @Event()\n  private sort: EventEmitter;\n\n  private menuTrigger: HTMLElement;\n\n  private popoverEl: HTMLZPopoverElement;\n\n  /**\n   * Get the value to set to the `aria-sort` attribute based on the current sort direction.\n   */\n  private get ariaSortDirection(): string {\n    if (!this.sortDirection) {\n      return null;\n    }\n\n    return this.sortDirection === SortDirection.ASC ? \"ascending\" : \"descending\";\n  }\n\n  /**\n   * Handle the click on the sort button.\n   * @fires sort\n   */\n  private handleSort(): void {\n    if (!this.sortDirection) {\n      this.sorted = false;\n\n      return;\n    }\n\n    this.sortDirection = this.sortDirection === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC;\n    this.sorted = true;\n\n    this.sort.emit({sortDirection: this.sortDirection});\n  }\n\n  @Watch(\"colspan\")\n  protected updateColspan(): void {\n    if (this.colspan) {\n      this.host.style.gridColumn = `span ${this.colspan}`;\n    } else {\n      this.host.style.removeProperty(\"grid-column\");\n    }\n  }\n\n  componentWillLoad(): void {\n    this.updateColspan();\n  }\n\n  render(): HTMLZThElement {\n    return (\n      <Host\n        role=\"columnheader\"\n        menu-open={this.isMenuOpen}\n        aria-sort={this.ariaSortDirection}\n        sortable={this.showSorting}\n      >\n        <div class=\"cell--content\">\n          <slot></slot>\n          {this.showSorting && (\n            <button\n              class=\"z-th--sort-button\"\n              type=\"button\"\n              onClick={this.handleSort.bind(this)}\n            >\n              <z-icon\n                name={this.sortDirection === SortDirection.DESC ? \"arrow-simple-up\" : \"arrow-simple-down\"}\n                width={14}\n                height={14}\n              />\n            </button>\n          )}\n          {this.showMenu && (\n            <div class=\"cell--menu-container\">\n              <z-button\n                variant={ButtonVariant.TERTIARY}\n                icon=\"contextual-menu\"\n                size={ControlSize.X_SMALL}\n                ref={(el) => (this.menuTrigger = el as HTMLElement)}\n                onClick={() => (this.popoverEl.open = !this.popoverEl.open)}\n              />\n              <z-popover\n                ref={(el) => (this.popoverEl = el as HTMLZPopoverElement)}\n                bindTo={this.menuTrigger}\n                onOpenChange={(event) => (this.isMenuOpen = event.detail.open)}\n                position={this.popoverPosition}\n              >\n                <slot name=\"contextual-menu\"></slot>\n              </z-popover>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yRAAA,MAAMA,EAAiB,IAAM,q9BCA7B,MAAMC,EAAY,IAAM,snCCAxB,MAAMA,EAAY,IAAM,6sD,MCaXC,EAAGC,EAAA,MAAAD,UAAAE,EALhB,WAAAC,CAAAC,G,6FAoBEC,KAAAC,SAAgC,KAQhCD,KAAAE,YAAmC,KAMnCF,KAAAG,OAAS,MAYTH,KAAAI,OAAyB,MAMzBJ,KAAAK,gBAAkBC,EAAgBC,KAMlCP,KAAAQ,WAAa,KAqGd,CApFC,qBAAYC,GACV,IAAKT,KAAKU,cAAe,CACvB,OAAO,I,CAGT,OAAOV,KAAKU,gBAAkBC,EAAcC,IAAM,YAAc,Y,CAO1D,UAAAC,GACN,IAAKb,KAAKU,cAAe,CACvBV,KAAKI,OAAS,MAEd,M,CAGFJ,KAAKU,cAAgBV,KAAKU,gBAAkBC,EAAcC,IAAMD,EAAcG,KAAOH,EAAcC,IACnGZ,KAAKI,OAAS,KAEdJ,KAAKe,KAAKC,KAAK,CAACN,cAAeV,KAAKU,e,CAI5B,aAAAO,GACR,GAAIjB,KAAKkB,QAAS,CAChBlB,KAAKmB,KAAKC,MAAMC,WAAa,QAAQrB,KAAKkB,S,KACrC,CACLlB,KAAKmB,KAAKC,MAAME,eAAe,c,EAInC,iBAAAC,GACEvB,KAAKiB,e,CAGP,MAAAO,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,eAAc,YACR5B,KAAKQ,WAAU,YACfR,KAAKS,kBAChBoB,SAAU7B,KAAKE,aAEfuB,EAAA,OAAAE,IAAA,2CAAKG,MAAM,iBACTL,EAAA,QAAAE,IAAA,6CACC3B,KAAKE,aACJuB,EAAA,UAAAE,IAAA,2CACEG,MAAM,oBACNC,KAAK,SACLC,QAAShC,KAAKa,WAAWoB,KAAKjC,OAE9ByB,EAAA,UAAAE,IAAA,2CACEO,KAAMlC,KAAKU,gBAAkBC,EAAcG,KAAO,kBAAoB,oBACtEqB,MAAO,GACPC,OAAQ,MAIbpC,KAAKC,UACJwB,EAAA,OAAAE,IAAA,2CAAKG,MAAM,wBACTL,EAAA,YAAAE,IAAA,2CACEU,QAASC,EAAcC,SACvBC,KAAK,kBACLC,KAAMC,EAAYC,QAClBC,IAAMC,GAAQ7C,KAAK8C,YAAcD,EACjCb,QAAS,IAAOhC,KAAK+C,UAAUC,MAAQhD,KAAK+C,UAAUC,OAExDvB,EAAA,aAAAE,IAAA,2CACEiB,IAAMC,GAAQ7C,KAAK+C,UAAYF,EAC/BI,OAAQjD,KAAK8C,YACbI,aAAeC,GAAWnD,KAAKQ,WAAa2C,EAAMC,OAAOJ,KACzDK,SAAUrD,KAAKK,iBAEfoB,EAAA,QAAAE,IAAA,2CAAMO,KAAK,uB","ignoreList":[]}

package/dist/components/z-thead.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as e,HTMLElement as t,h as s,Host as o,transformTag as r}from"@stencil/core/internal/client";const i=()=>`:host{--z-table--cells-bottom-border-size:var(     --border-size-medium   );--z-table--cells-background:var(     --color-background   );display:block;box-sizing:border-box}:host([sticky]){position:sticky;z-index:2;top:0;box-shadow:0 2px 4px -2px var(--shadow-color-base)}:host(:focus-visible){box-shadow:none;outline:none}`;const n=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.sticky=false;this.isFocusable=false}render(){return s(o,{key:"c32f2b2d2921e034d18d3b7121f59ee7b3b7b398",role:"rowgroup",tabIndex:this.isFocusable?0:-1},s("slot",{key:"f74ef0383c4111415134df8ae1492fda11da8568"}))}get host(){return this}static get style(){return i()}},[257,"z-thead",{sticky:[516],isFocusable:[516,"is-focusable"]}]);function c(){if(typeof customElements==="undefined"){return}const e=["z-thead"];e.forEach((e=>{switch(e){case"z-thead":if(!customElements.get(r(e))){customElements.define(r(e),n)}break}}))}const a=n;const l=c;export{a as ZThead,l as defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as e,h as o,Host as r,transformTag as a}from"@stencil/core/internal/client";const l=()=>`:host{--z-table--cells-background:var(     --color-background   );display:block;box-sizing:border-box}:host([sticky]){position:sticky;z-index:2;top:0;box-shadow:0 2px 4px -2px var(--shadow-color-base)}:host(:focus-visible){box-shadow:none;outline:none}`;const b=()=>`z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover>tbody>tr:hover>td,table.z-table-hover>tfoot>tr:hover>td{position:relative;background-color:var(--color-surface02)}table.z-table-hover>tbody>tr:hover>td::after,table.z-table-hover>tfoot>tr:hover>td::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:-1px;box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);content:""}table.z-table-hover>tbody>tr:hover>td:first-child::after,table.z-table-hover>thead>tr:hover>th:first-child::after,table.z-table-hover>tfoot>tr:hover>td:first-child::after{left:0}`;const s=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.sticky=false;this.isFocusable=false}render(){return o(r,{key:"0e43e10373817b9ee5e4f1574fb0d46b232c510d",role:"rowgroup",tabIndex:this.isFocusable?0:-1},o("slot",{key:"aefd2ed2698efb7deabd11284f3d6cae95800e50"}))}get host(){return this}static get style(){return l()+b()}},[257,"z-thead",{sticky:[516],isFocusable:[516,"is-focusable"]}]);function d(){if(typeof customElements==="undefined"){return}const t=["z-thead"];t.forEach((t=>{switch(t){case"z-thead":if(!customElements.get(a(t))){customElements.define(a(t),s)}break}}))}const c=s;const i=d;export{c as ZThead,i as defineCustomElement};
 //# sourceMappingURL=z-thead.js.map

package/dist/components/z-thead.js.map

@@ -1 +1 @@
-{"version":3,"names":["stylesCss","ZThead","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","sticky","isFocusable","render","h","Host","key","role","tabIndex"],"sources":["src/components/table/z-thead/styles.css?tag=z-thead&encapsulation=shadow","src/components/table/z-thead/index.tsx"],"sourcesContent":[":host {\n  --z-table--cells-bottom-border-size: var(\n    --border-size-medium\n  ); /* Needed to handle the border of the expand button cell */\n\n  --z-table--cells-background: var(\n    --color-background\n  ); /* Needed to handle the background-color of the expand button cell */\n\n  display: block;\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 2;\n  top: 0;\n  box-shadow: 0 2px 4px -2px var(--shadow-color-base);\n}\n\n:host(:focus-visible) {\n  box-shadow: none;\n  outline: none;\n}\n","import {Component, ComponentInterface, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n  tag: \"z-thead\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZThead implements ComponentInterface {\n  @Element() host: HTMLZTheadElement;\n\n  /**\n   * If true, the header will be stuck to the top of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * The element is focusable\n   */\n  @Prop({reflect: true})\n  isFocusable = false;\n\n  render(): HTMLZTheadElement {\n    return (\n      <Host\n        role=\"rowgroup\"\n        tabIndex={this.isFocusable ? 0 : -1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAAY,IAAM,qU,MCWXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,kEAYEC,KAAAC,OAAS,MAMTD,KAAAE,YAAc,KAYf,CAVC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WACLC,SAAUR,KAAKE,YAAc,GAAI,GAEjCE,EAAA,QAAAE,IAAA,6C","ignoreList":[]}
+{"version":3,"names":["stylesCss","ZThead","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","sticky","isFocusable","render","h","Host","key","role","tabIndex"],"sources":["src/components/table/z-thead/styles.css?tag=z-thead&encapsulation=shadow","src/components/css-components/z-table/styles.css?tag=z-thead&encapsulation=shadow","src/components/table/z-thead/index.tsx"],"sourcesContent":[":host {\n  --z-table--cells-background: var(\n    --color-background\n  ); /* Needed to handle the background-color of the expand button cell */\n\n  display: block;\n  box-sizing: border-box;\n}\n\n:host([sticky]) {\n  position: sticky;\n  z-index: 2;\n  top: 0;\n  box-shadow: 0 2px 4px -2px var(--shadow-color-base);\n}\n\n:host(:focus-visible) {\n  box-shadow: none;\n  outline: none;\n}\n","z-table,\ntable.z-table {\n  background-color: var(--color-surface01);\n\n  --z-table--cells-padding: calc(var(--space-unit) * 2);\n}\n\ntable.z-table {\n  border-collapse: collapse;\n}\n\nz-thead,\ntable.z-table thead {\n  background-color: var(--color-background);\n\n  --z-table--cells-bottom-border-size: var(--border-size-medium);\n}\n\nz-tfoot,\ntable.z-table tfoot {\n  border-top: var(--border-size-medium) solid var(--color-surface03);\n  border-bottom: var(--border-size-medium) solid var(--color-surface03);\n}\n\nz-tfoot z-tr,\ntable.z-table tfoot tr {\n  border-bottom: calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important;\n}\n\nz-tr,\ntable.z-table tr {\n  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);\n}\n\nz-td,\nz-th,\ntable.z-table td,\ntable.z-table th {\n  padding: var(--z-table--cells-padding, calc(var(--space-unit) * 2));\n  text-align: left;\n}\n\nz-th:not(:first-child),\nz-td:not(:first-child),\ntable.z-table th:not(:first-child),\ntable.z-table td:not(:first-child) {\n  border-left: var(--z-table--cell-left-border, none);\n}\n\nz-table[bordered],\ntable.z-table.z-table-bordered {\n  --z-table--cell-left-border: 1px solid var(--color-surface03);\n}\n\ntable.z-table-hover > tbody > tr:hover > td,\ntable.z-table-hover > tfoot > tr:hover > td {\n  position: relative;\n  background-color: var(--color-surface02);\n}\n\ntable.z-table-hover > tbody > tr:hover > td::after,\ntable.z-table-hover > tfoot > tr:hover > td::after {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: -1px;\n  box-shadow:\n    inset 0 var(--border-size-small) 0 var(--color-surface04),\n    inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);\n  content: \"\";\n}\n\ntable.z-table-hover > tbody > tr:hover > td:first-child::after,\ntable.z-table-hover > thead > tr:hover > th:first-child::after,\ntable.z-table-hover > tfoot > tr:hover > td:first-child::after {\n  left: 0;\n}\n","import {Component, ComponentInterface, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n  tag: \"z-thead\",\n  styleUrls: [\"styles.css\", \"../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZThead implements ComponentInterface {\n  @Element() host: HTMLZTheadElement;\n\n  /**\n   * If true, the header will be stuck to the top of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * The element is focusable\n   */\n  @Prop({reflect: true})\n  isFocusable = false;\n\n  render(): HTMLZTheadElement {\n    return (\n      <Host\n        role=\"rowgroup\"\n        tabIndex={this.isFocusable ? 0 : -1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"uHAAA,MAAMA,EAAY,IAAM,+PCAxB,MAAMA,EAAY,IAAM,6sD,MCWXC,EAAMC,EAAA,MAAAD,UAAAE,EALnB,WAAAC,CAAAC,G,kEAYEC,KAAAC,OAAS,MAMTD,KAAAE,YAAc,KAYf,CAVC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WACLC,SAAUR,KAAKE,YAAc,GAAI,GAEjCE,EAAA,QAAAE,IAAA,6C","ignoreList":[]}

package/dist/components/z-tr.js

@@ -1,2 +1,2 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as n,Host as a,transformTag as s}from"@stencil/core/internal/client";import{r}from"./utils.js";import"./index2.js";import{d as i}from"./index3.js";import"./index17.js";const d=()=>`:host{position:relative;display:grid;width:100%;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));--columns:1}*{box-sizing:border-box}.z-tr--expand-button-container,::slotted(*){border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}::slotted(*:not(:last-child)){border-right:var(--z-table--cell-left-border, none)}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){background-color:var(--color-background)}:host(:hover):has([tabIndex]) ::slotted(z-td),:host(:hover):has([tabIndex]) ::slotted(z-th){border-top:var(--border-size-small) solid var(--color-surface04);border-bottom:var(--border-size-small) solid var(--color-surface04);background-color:var(--color-surface02)}:host(:focus){position:relative;z-index:20;box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}.z-tr--focus-overlay{position:absolute;z-index:30;right:0;left:0;width:100%;border-radius:4px;box-shadow:none;inset:0;outline:none;pointer-events:none;transition:box-shadow 0.2s}:host(:focus) .z-tr--focus-overlay{box-shadow:0 0 0 2px var(--shadow-focus-primary),     var(--shadow-focus-primary);outline:none}:host(:focus) ::slotted(*){border-bottom:none}:host(:focus) .z-tr--expand-button-container{border-bottom:none}`;const c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.expand=o(this,"expand",7);this.expandable=false;this.expanded=false}updateColumns(){const t=Array.from(this.host.querySelectorAll("z-td, z-th"));if(this.expandable){t.pop()}const e=t.map((t=>t.colspan||1)).reduce(((t,e)=>t+e),0);this.host.style.setProperty("--columns",`${e}`);if(this.expandable){const e=t.pop();e.id=e.id||`z-tr-expandable-content-${r()}`;this.expandableContentId=e.id}}onRowClick(t){const e=t.target.closest(".prevent-expand");if(!this.expandable||e){return}this.expanded=!this.expanded;this.expand.emit({expanded:this.expanded})}onKeyDown(t){if(!this.expandable){return}const e=document.activeElement;if(e!==this.host){return}if(t.key==="Enter"||t.key===" "){t.preventDefault();this.expanded=!this.expanded;this.expand.emit({expanded:this.expanded})}}componentWillLoad(){this.updateColumns()}render(){return n(a,{key:"92be779ec3e863cc85336fcedb02f718fa3a19fa",role:"row",tabIndex:this.expandable?0:undefined,expanded:this.expanded,onClick:this.onRowClick.bind(this),onKeyDown:this.onKeyDown.bind(this)},n("div",{key:"720c8209c21104e78129cbd76c12a6cdf8806ca2",class:"z-tr--focus-overlay","aria-hidden":"true"}),n("div",{key:"3bb4f4d2e5ae60da5c105d1c8a99d6ff0fa59302",class:"z-tr--expand-button-container"},this.expandable&&n("button",{key:"d27d18c1a4515ac055ce7db13ec3efdfc7d0314d",tabIndex:-1,"aria-expanded":this.expanded?"true":"false","aria-label":this.expanded?"Comprimi riga":"Espandi riga","aria-controls":this.expandableContentId,type:"button"},n("z-icon",{key:"9fd14fcab4ea512b42c63928c3e2dabb83fd1da3",name:this.expanded?"minus-circled":"plus-circled"}))),n("slot",{key:"c5fcb7a2f92eb8401c4d27d28e5b68a5001616b7",onSlotchange:this.updateColumns.bind(this)}))}get host(){return this}static get watchers(){return{expandable:[{updateColumns:0}]}}static get style(){return d()}},[257,"z-tr",{expandable:[516],expanded:[32],expandableContentId:[32]},[[0,"colspanchange","updateColumns"]],{expandable:[{updateColumns:0}]}]);function l(){if(typeof customElements==="undefined"){return}const t=["z-tr","z-icon"];t.forEach((t=>{switch(t){case"z-tr":if(!customElements.get(s(t))){customElements.define(s(t),c)}break;case"z-icon":if(!customElements.get(s(t))){i()}break}}))}const b=c;const h=l;export{b as ZTr,h as defineCustomElement};
+import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as r,Host as a,transformTag as s}from"@stencil/core/internal/client";import{r as n}from"./utils.js";import"./index2.js";import{d as l}from"./index3.js";import"./index17.js";const d=()=>`:host{position:relative;display:grid;width:100%;box-sizing:border-box;grid-auto-flow:column;grid-template-columns:var(--z-table--expand-button-size, 0) repeat(var(--columns), minmax(128px, 1fr));--columns:1}*{box-sizing:border-box}:host([expandable]){--show-expandable-button:visible;cursor:pointer}:host([expandable]) ::slotted(*){grid-row:1}:host([expandable]) ::slotted(:nth-last-child(2)){border-right:none}:host([expandable]) ::slotted(*:last-child){border-top:var(--border-size-small) solid var(--color-surface03);border-left:0;grid-column:1 / span calc(var(--columns) + 1);grid-row:2}:host([expandable]:not([expanded])) ::slotted(*:last-child){display:none}:host([expanded]){margin-bottom:4px;box-shadow:0 4px 4px -2px var(--shadow-color-base)}:host([expanded]) .z-tr--expand-button-container,:host([expanded]) ::slotted(*){border-left:0 !important;background-color:var(--color-background)}:host([tabIndex]:hover) ::slotted(z-td),:host([tabIndex]:hover) ::slotted(z-th),:host([tabIndex]:hover) .z-tr--expand-button-container{background-color:var(--color-surface02)}:host([tabIndex]:hover) .z-tr--focus-overlay{border-top:var(--border-size-small) solid var(--color-surface04);border-bottom:var(--border-size-small) solid var(--color-surface04)}:host(:focus){position:relative;z-index:20;border:none !important;box-shadow:var(--shadow-focus-primary);outline:none}.z-tr--expand-button-container{display:flex;align-items:center;justify-content:center;background-color:var(--z-table--cells-background, var(--color-surface01))}.z-tr--expand-button-container button{display:flex;align-items:center;justify-content:center;padding:0;border:none;margin:auto;appearance:none;background:transparent;cursor:pointer;visibility:var(--show-expandable-button, hidden)}.z-tr--expand-button-container button z-icon{--z-icon-width:16px;--z-icon-height:16px}.z-tr--focus-overlay{position:absolute;z-index:30;top:calc(var(--border-size-small) * -1);bottom:0;left:0;width:100%;height:calc(100% + (var(--border-size-small) * 2));box-shadow:none;outline:none;pointer-events:none;transition:box-shadow 0.2s}:host(:focus) .z-tr--focus-overlay{box-shadow:0 0 0 2px var(--shadow-focus-primary),     var(--shadow-focus-primary);outline:none}:host(:focus) ::slotted(*){border-bottom:none}:host(:focus) .z-tr--expand-button-container{border-bottom:none}`;const i=()=>`z-table,table.z-table{background-color:var(--color-surface01);--z-table--cells-padding:calc(var(--space-unit) * 2)}table.z-table{border-collapse:collapse}z-thead,table.z-table thead{background-color:var(--color-background);--z-table--cells-bottom-border-size:var(--border-size-medium)}z-tfoot,table.z-table tfoot{border-top:var(--border-size-medium) solid var(--color-surface03);border-bottom:var(--border-size-medium) solid var(--color-surface03)}z-tfoot z-tr,table.z-table tfoot tr{border-bottom:calc(var(--z-table--cells-bottom-border-size)) solid var(--color-surface03) !important}z-tr,table.z-table tr{border-bottom:var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03)}z-td,z-th,table.z-table td,table.z-table th{padding:var(--z-table--cells-padding, calc(var(--space-unit) * 2));text-align:left}z-th:not(:first-child),z-td:not(:first-child),table.z-table th:not(:first-child),table.z-table td:not(:first-child){border-left:var(--z-table--cell-left-border, none)}z-table[bordered],table.z-table.z-table-bordered{--z-table--cell-left-border:1px solid var(--color-surface03)}table.z-table-hover>tbody>tr:hover>td,table.z-table-hover>tfoot>tr:hover>td{position:relative;background-color:var(--color-surface02)}table.z-table-hover>tbody>tr:hover>td::after,table.z-table-hover>tfoot>tr:hover>td::after{position:absolute;z-index:1;top:0;right:0;bottom:0;left:-1px;box-shadow:inset 0 var(--border-size-small) 0 var(--color-surface04),     inset 0 calc(var(--border-size-small) * -1) 0 var(--color-surface04);content:""}table.z-table-hover>tbody>tr:hover>td:first-child::after,table.z-table-hover>thead>tr:hover>th:first-child::after,table.z-table-hover>tfoot>tr:hover>td:first-child::after{left:0}`;const c=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.expand=o(this,"expand",7);this.expandable=false;this.expanded=false}updateColumns(){const t=Array.from(this.host.querySelectorAll("z-td, z-th"));if(this.expandable){const e=t.pop();e.id=e.id||`z-tr-expandable-content-${n()}`;this.expandableContentId=e.id}const e=t.map((t=>t.colspan||1)).reduce(((t,e)=>t+e),0);this.host.style.setProperty("--columns",`${e}`)}onRowClick(t){const e=t.target.closest(".prevent-expand");if(!this.expandable||e){return}this.expanded=!this.expanded;this.expand.emit({expanded:this.expanded})}onKeyDown(t){if(!this.expandable){return}const e=document.activeElement;if(e!==this.host){return}if(t.key==="Enter"||t.key===" "){t.preventDefault();this.expanded=!this.expanded;this.expand.emit({expanded:this.expanded})}}componentWillLoad(){this.updateColumns()}render(){return r(a,{key:"ffd8e071015ace61e51c603988d84dae42a047bb",role:"row",tabIndex:this.expandable?0:undefined,expanded:this.expanded,onClick:this.onRowClick.bind(this),onKeyDown:this.onKeyDown.bind(this)},r("div",{key:"49539d360bab6d865958910fd21f5c407fc0a16b",class:"z-tr--focus-overlay","aria-hidden":"true"}),r("div",{key:"94c5f36a5f220a7403d0c6057faf41cf0509f68e",class:"z-tr--expand-button-container"},this.expandable&&r("button",{key:"ee46bd7dd59d27c6be18716fc3a46092cdac5eb6",tabIndex:-1,"aria-expanded":this.expanded?"true":"false","aria-label":this.expanded?"Comprimi riga":"Espandi riga","aria-controls":this.expandableContentId,type:"button"},r("z-icon",{key:"ce6fc941625f48f13edc7df3a43da159cf6f064d",name:this.expanded?"minus-circled":"plus-circled"}))),r("slot",{key:"c41ca74f6026dda7813605940e6910a56cd576fb",onSlotchange:this.updateColumns.bind(this)}))}get host(){return this}static get watchers(){return{expandable:[{updateColumns:0}]}}static get style(){return d()+i()}},[257,"z-tr",{expandable:[516],expanded:[32],expandableContentId:[32]},[[0,"colspanchange","updateColumns"]],{expandable:[{updateColumns:0}]}]);function b(){if(typeof customElements==="undefined"){return}const t=["z-tr","z-icon"];t.forEach((t=>{switch(t){case"z-tr":if(!customElements.get(s(t))){customElements.define(s(t),c)}break;case"z-icon":if(!customElements.get(s(t))){l()}break}}))}const h=c;const u=b;export{h as ZTr,u as defineCustomElement};
 //# sourceMappingURL=z-tr.js.map