@solid-design-system/components 3.13.0 → 3.14.0

package/dist/components/es/navigation-item.js

@@ -1 +1 @@
-import{S as t,t as e,c as i,i as s,n as r,a as o}from"./solid-components2.js";import{H as l}from"./slot.js";import{s as a,n}from"./static.js";import{o as d}from"./if-defined.js";var h=Object.defineProperty,c=Object.getOwnPropertyDescriptor,p=(t,e,i,s)=>{for(var r,o=s>1?void 0:s?c(e,i):e,l=t.length-1;l>=0;l--)(r=t[l])&&(o=(s?r(e,i,o):r(o))||o);return s&&o&&h(e,i,o),o};let u=class extends t{constructor(){super(...arguments),this.hasSlotController=new l(this,"[default]","description","children"),this.current=!1,this.disabled=!1,this.size="base",this.vertical=!1,this.chevron=!1,this.indented=!1,this.relaxed=!1,this.divider=!1,this.open=!1}isButton(){return!this.href&&!this.hasSlotController.test("children")}isLink(){return!!this.href}isAccordion(){return!this.href&&this.hasSlotController.test("children")}handleClickButton(t){this.disabled&&(t.preventDefault(),t.stopPropagation())}handleClickSummary(t){t.preventDefault(),t.stopPropagation(),this.disabled||(this.open?this.hideDetails():this.showDetails())}hideDetails(){this.open=!1,this.emit("sd-hide",{cancelable:!0})}showDetails(){this.open=!0,this.emit("sd-show",{cancelable:!0})}calculatePaddingX(){return this.relaxed&&this.indented?"pl-8 pr-4":this.relaxed?"px-4":this.indented?"pl-4":""}render(){const t=this.isLink(),i=this.isButton(),s=this.isAccordion(),r=(this.hasSlotController.test("[default]"),this.hasSlotController.test("main"),this.hasSlotController.test("description")),o=this.hasSlotController.test("children"),l=t?a`a`:s?a`summary`:a`button`,h=this.vertical?"pb-3":"pb-2",c=n`<${l} part="base" class="${e("px-4 hover:bg-neutral-200 group transition-all min-h-[48px] cursor-pointer relative focus-visible:focus-outline",{base:"text-base",lg:"text-lg",sm:"text-[14px]"}[this.size],this.disabled?"text-neutral-500 pointer-events-none":"text-primary",s?"flex flex-col":"inline-block w-full",this.divider&&this.vertical&&"mt-0.25",!this.vertical&&"inline-flex items-center")}" aria-controls="${d(s?"navigation-item-details":void 0)}" aria-current="${d(this.current?"page":void 0)}" aria-disabled="${this.disabled}" ?disabled="${d(i?this.disabled:void 0)}" href="${d(t?this.href:void 0)}" target="${d(t?this.target:void 0)}" download="${d(t?this.download:void 0)}" rel="${d(t&&this.target?"noreferrer noopener":void 0)}" role="${t?"link":"button"}" tabindex="${this.disabled?"-1":"0"}" @click="${s?this.handleClickSummary:i?this.handleClickButton:void 0}"><div part="current-indicator" class="${e("absolute left-0 pointer-events-none transition-all duration-150",this.vertical?"w-1 h-[calc(100%-16px)] top-2 group-hover:h-full group-hover:top-0":"h-1 w-full bottom-0",this.current?"bg-accent":"bg-transparent",this.disabled&&"bg-neutral-500")}"></div><span part="content-area" class="${e("relative pt-3 inline-flex justify-between items-center",s?"grow":"w-full",r?"pb-1":h,this.calculatePaddingX())}">${this.divider&&this.vertical?n`<sd-divider part="divider" class="${e("w-full transition-all absolute -top-0.25 left-0",this.calculatePaddingX())}"></sd-divider>`:""} <span part="content-container" class="inline-flex items-center flex-auto"><slot part="content" class="inline"></slot></span>${(this.chevron||o)&&this.vertical?n`<sd-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${e("h-6 w-6 ml-2 transition-all",s?this.open?"rotate-180":"rotate-0":"rotate-[270deg]")}"></sd-icon>`:""} </span>${r&&this.vertical?n`<slot name="description" part="description" class="${e("inline-block text-sm text-left text-black",s?"grow":"w-full",h,this.calculatePaddingX())}"></slot>`:""}</${l}>`;return s?n`<details part="details" id="navigation-item-details" ?open="${this.open}" class="relative flex">${c}<slot name="children"></slot></details>`:n`${c}`}};u.styles=[i,t.styles,s`:host{position:relative;box-sizing:border-box;display:inline-block}:host([vertical]){display:block}details summary::-webkit-details-marker{display:none}`],p([r({reflect:!0})],u.prototype,"href",2),p([r()],u.prototype,"target",2),p([r()],u.prototype,"download",2),p([r({type:Boolean,reflect:!0})],u.prototype,"current",2),p([r({type:Boolean,reflect:!0})],u.prototype,"disabled",2),p([r({reflect:!0})],u.prototype,"size",2),p([r({type:Boolean,reflect:!0})],u.prototype,"vertical",2),p([r({type:Boolean,reflect:!0})],u.prototype,"chevron",2),p([r({type:Boolean,reflect:!0})],u.prototype,"indented",2),p([r({type:Boolean,reflect:!0})],u.prototype,"relaxed",2),p([r({type:Boolean,reflect:!0})],u.prototype,"divider",2),p([r({type:Boolean,reflect:!0})],u.prototype,"open",2),u=p([o("sd-navigation-item")],u);export{u as default};
+import{S as t,t as e,c as i,r as s,i as r,n as o,a}from"./solid-components2.js";import{H as l}from"./slot.js";import{s as n,n as d}from"./static.js";import{o as h}from"./if-defined.js";import{I as c}from"./interactive.js";var p=Object.defineProperty,u=Object.getOwnPropertyDescriptor,v=(t,e,i,s)=>{for(var r,o=s>1?void 0:s?u(e,i):e,a=t.length-1;a>=0;a--)(r=t[a])&&(o=(s?r(e,i,o):r(o))||o);return s&&o&&p(e,i,o),o};let f=class extends t{constructor(){super(...arguments),this.hasSlotController=new l(this,"[default]","description","children"),this.current=!1,this.disabled=!1,this.size="base",this.vertical=!1,this.chevron=!1,this.indented=!1,this.relaxed=!1,this.divider=!1,this.open=!1,this.separated=!1}get isButton(){return!this.href&&!this.hasSlotController.test("children")}get isLink(){return!!this.href}get isAccordion(){return!this.href&&this.hasSlotController.test("children")}handleClickButton(t){this.disabled&&(t.preventDefault(),t.stopPropagation())}handleClickSummary(t){t.preventDefault(),t.stopPropagation(),this.disabled||(this.open?this.hideDetails():this.showDetails())}hideDetails(){this.open=!1,this.emit("sd-hide",{cancelable:!0})}showDetails(){this.open=!0,this.emit("sd-show",{cancelable:!0})}get calculatePaddingX(){return this.relaxed&&this.indented?"pl-8 pr-4":this.relaxed?"px-4":this.indented?"pl-4":""}get tag(){return this.isAccordion&&!this.isLink?n`summary`:this.separated?n`div`:this.isLink?n`a`:n`button`}render(){const t=this.tag,i=this.isLink,s=this.isButton,r=this.isAccordion,o=(this.hasSlotController.test("[default]"),this.hasSlotController.test("main"),this.hasSlotController.test("description")),a=this.hasSlotController.test("children"),l=this.vertical?"pb-3":"pb-2",n=d`<${t} part="base" class="${e("cursor-pointer relative focus-visible:focus-outline",{base:"text-base",lg:"text-lg",sm:"text-[14px]"}[this.size],this.disabled?"text-neutral-500 pointer-events-none":"text-primary",r?"flex flex-col":"inline-block w-full",this.divider&&this.vertical&&"mt-0.25",!this.vertical&&"inline-flex items-center",!this.separated&&"hover:bg-neutral-200 group transition-all min-h-[48px] px-4")}" aria-controls="${h(r?"navigation-item-details":void 0)}" aria-current="${h(this.current?"page":void 0)}" aria-disabled="${this.disabled}" ?disabled="${h(s?this.disabled:void 0)}" href="${h(i?this.href:void 0)}" target="${h(i?this.target:void 0)}" download="${h(i?this.download:void 0)}" rel="${h(i&&this.target?"noreferrer noopener":void 0)}" role="${i?"link":"button"}" tabindex="${this.disabled||this.separated?"-1":"0"}" @click="${this.separated?void 0:r?this.handleClickSummary:s?this.handleClickButton:void 0}"><div part="current-indicator" class="${e("absolute left-0 pointer-events-none transition-all duration-150",this.vertical?"w-1 h-[calc(100%-16px)] top-2 group-hover:h-full group-hover:top-0":"h-1 w-full bottom-0",this.current?"bg-accent":"bg-transparent",this.disabled&&"bg-neutral-500")}"></div><span part="content-area" class="${e("relative pt-3 inline-flex justify-between items-center",r?"grow":"w-full",o||this.separated?"pb-1":l,this.calculatePaddingX)}">${this.divider&&this.vertical?d`<sd-divider part="divider" class="${e("w-full transition-all absolute -top-0.25 left-0",this.calculatePaddingX)}"></sd-divider>`:""} <span part="content-container" class="inline-flex items-center flex-auto">${this.separated?d`<a class="${e("mr-4 w-full inline-flex items-center pl-4 cursor-pointer relative focus-visible:focus-outline hover:bg-neutral-200 group transition-all min-h-[48px]",!o&&"py-4")}" href="${h(i?this.href:void 0)}" target="${h(i?this.target:void 0)}" download="${h(i?this.download:void 0)}"><slot part="content" class="inline"></slot></a>`:d`<slot part="content" class="inline"></slot>`} </span>${(this.chevron||a)&&this.vertical?this.separated?d`<button type="button" title="chevron-down-button" class="sd-interactive sd-interactive--reset" @click="${this.handleClickSummary}"><sd-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${e("mr-4 h-6 w-6 transition-all",r||this.separated?this.open?"rotate-180":"rotate-0":"rotate-[270deg]")}"></sd-icon></button>`:d`<sd-icon name="chevron-down" part="chevron" library="system" color="currentColor" class="${e("h-6 w-6 ml-2 transition-all",r?this.open?"rotate-180":"rotate-0":"rotate-[270deg]")}"></sd-icon>`:""} </span>${o&&this.vertical?d`<slot name="description" part="description" class="${e("inline-block text-sm text-left text-black",r||this.separated?"grow":"w-full",this.separated?"px-4":this.calculatePaddingX,l)}"></slot>`:""}</${t}>`;return r?d`<details part="details" id="navigation-item-details" ?open="${this.open}" class="relative flex">${n}<slot name="children"></slot></details>`:this.separated?d`<div part="details" id="navigation-item-details" class="relative flex flex-col">${n}${this.open?d`<slot name="children"></slot>`:""}</div>`:d`${n}`}};f.styles=[i,t.styles,s(c),r`:host{position:relative;box-sizing:border-box;display:inline-block}:host([vertical]){display:block}details summary::-webkit-details-marker{display:none}`],v([o({reflect:!0})],f.prototype,"href",2),v([o()],f.prototype,"target",2),v([o()],f.prototype,"download",2),v([o({type:Boolean,reflect:!0})],f.prototype,"current",2),v([o({type:Boolean,reflect:!0})],f.prototype,"disabled",2),v([o({reflect:!0})],f.prototype,"size",2),v([o({type:Boolean,reflect:!0})],f.prototype,"vertical",2),v([o({type:Boolean,reflect:!0})],f.prototype,"chevron",2),v([o({type:Boolean,reflect:!0})],f.prototype,"indented",2),v([o({type:Boolean,reflect:!0})],f.prototype,"relaxed",2),v([o({type:Boolean,reflect:!0})],f.prototype,"divider",2),v([o({type:Boolean,reflect:!0})],f.prototype,"open",2),v([o({type:Boolean,reflect:!0})],f.prototype,"separated",2),f=v([a("sd-navigation-item")],f);export{f as default};