@pg-labs-incubator/cobweb 0.0.5 → 0.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +7 -4
- package/src/action/button.yaml +9 -0
- package/target/esbuild/action/action.css +1 -1
- package/target/esbuild/action/base.jsx +1 -1
- package/target/esbuild/action/button.jsx +6 -4
- package/target/esbuild/action/fab-menu-context.jsx +1 -1
- package/target/esbuild/action/fab-menu.jsx +3 -3
- package/target/esbuild/action/fab.jsx +3 -3
- package/target/esbuild/action/group.jsx +7 -7
- package/target/esbuild/action/icon-button.jsx +3 -3
- package/target/esbuild/action/index.jsx +1 -1
- package/target/esbuild/action/progress-button.css +1 -0
- package/target/esbuild/action/progress-button.jsx +4 -0
- package/target/esbuild/action/split-button.jsx +4 -4
- package/target/esbuild/color/contrast.jsx +1 -1
- package/target/esbuild/color/dynamic.jsx +1 -1
- package/target/esbuild/color/hct.jsx +1 -1
- package/target/esbuild/color/index.jsx +1 -1
- package/target/esbuild/color/palette.jsx +1 -1
- package/target/esbuild/color/scheme.jsx +1 -1
- package/target/esbuild/color/temperature.jsx +1 -1
- package/target/esbuild/container/card.jsx +1 -1
- package/target/esbuild/container/elevation-shadow.jsx +1 -1
- package/target/esbuild/container/index.jsx +1 -1
- package/target/esbuild/dom/client.jsx +1 -1
- package/target/esbuild/dom/index.jsx +1 -1
- package/target/esbuild/dom/server.jsx +1 -1
- package/target/esbuild/dom/types.jsx +1 -1
- package/target/esbuild/feedback/badge.jsx +6 -6
- package/target/esbuild/feedback/focus.jsx +1 -1
- package/target/esbuild/feedback/index.jsx +1 -1
- package/target/esbuild/feedback/loading.jsx +3 -3
- package/target/esbuild/feedback/observe.jsx +1 -1
- package/target/esbuild/feedback/progress.jsx +9 -9
- package/target/esbuild/feedback/snackbar.jsx +6 -6
- package/target/esbuild/feedback/tooltip.jsx +6 -6
- package/target/esbuild/icon/icon.jsx +1 -1
- package/target/esbuild/icon/index.jsx +1 -1
- package/target/esbuild/index.jsx +1 -1
- package/target/esbuild/input/autocomplete.jsx +2 -2
- package/target/esbuild/input/base.jsx +2 -2
- package/target/esbuild/input/date-picker.jsx +19 -19
- package/target/esbuild/input/date-time.jsx +3 -3
- package/target/esbuild/input/index.jsx +1 -1
- package/target/esbuild/input/paired-input.jsx +1 -1
- package/target/esbuild/input/picker-dialog.jsx +3 -3
- package/target/esbuild/input/select.jsx +4 -4
- package/target/esbuild/input/slider.jsx +7 -7
- package/target/esbuild/input/text-field.jsx +4 -4
- package/target/esbuild/input/time-picker.jsx +5 -5
- package/target/esbuild/motion/follow-height.jsx +1 -0
- package/target/esbuild/motion/frame.jsx +1 -1
- package/target/esbuild/motion/index.jsx +1 -1
- package/target/esbuild/motion/material.jsx +1 -1
- package/target/esbuild/motion/motion.jsx +1 -1
- package/target/esbuild/motion/spring.jsx +1 -1
- package/target/esbuild/motion/transition.jsx +1 -1
- package/target/esbuild/motion/velocity.jsx +1 -1
- package/target/esbuild/navigation/app-bar.jsx +8 -8
- package/target/esbuild/navigation/base.jsx +1 -1
- package/target/esbuild/navigation/drawer.jsx +7 -7
- package/target/esbuild/navigation/index.jsx +1 -1
- package/target/esbuild/navigation/navigation.jsx +12 -12
- package/target/esbuild/navigation/scroll.jsx +1 -1
- package/target/esbuild/navigation/search.jsx +4 -4
- package/target/esbuild/navigation/tabs.jsx +3 -3
- package/target/esbuild/navigation/toolbar.jsx +3 -3
- package/target/esbuild/selection/base.jsx +1 -1
- package/target/esbuild/selection/checkbox.jsx +4 -4
- package/target/esbuild/selection/chip.jsx +5 -5
- package/target/esbuild/selection/index.jsx +1 -1
- package/target/esbuild/selection/radio.jsx +3 -3
- package/target/esbuild/selection/segmented.jsx +4 -4
- package/target/esbuild/selection/switch.jsx +3 -3
- package/target/esbuild/shape/corner-rounding.jsx +1 -1
- package/target/esbuild/shape/cubic.jsx +1 -1
- package/target/esbuild/shape/index.jsx +1 -1
- package/target/esbuild/shape/material-shapes.jsx +1 -1
- package/target/esbuild/shape/morph.jsx +1 -1
- package/target/esbuild/shape/path.jsx +1 -1
- package/target/esbuild/shape/point.jsx +1 -1
- package/target/esbuild/shape/rounded-polygon.jsx +1 -1
- package/target/esbuild/shape/shapes.jsx +1 -1
- package/target/esbuild/spacing/index.jsx +1 -1
- package/target/esbuild/state/component.jsx +1 -1
- package/target/esbuild/state/controller.jsx +1 -1
- package/target/esbuild/state/index.jsx +1 -1
- package/target/esbuild/state/ripple.jsx +1 -1
- package/target/esbuild/state/state.jsx +1 -1
- package/target/esbuild/state/style.jsx +1 -1
- package/target/esbuild/surface/carousel-layout.jsx +1 -1
- package/target/esbuild/surface/carousel.jsx +2 -2
- package/target/esbuild/surface/dialog.jsx +5 -5
- package/target/esbuild/surface/divider.jsx +1 -1
- package/target/esbuild/surface/drag.jsx +1 -1
- package/target/esbuild/surface/gestures.jsx +3 -3
- package/target/esbuild/surface/index.jsx +1 -1
- package/target/esbuild/surface/interactive.jsx +1 -1
- package/target/esbuild/surface/list-patterns.jsx +3 -3
- package/target/esbuild/surface/list.jsx +2 -2
- package/target/esbuild/surface/menu.jsx +3 -3
- package/target/esbuild/surface/scaffold.jsx +7 -7
- package/target/esbuild/surface/sheet.jsx +5 -5
- package/target/esbuild/surface/side-sheet.jsx +2 -2
- package/target/esbuild/surface/slots.jsx +1 -1
- package/target/esbuild/surface/surface.jsx +1 -1
- package/target/esbuild/text/index.jsx +1 -1
- package/target/esbuild/text/text.jsx +2 -2
- package/target/esbuild/text/typography.jsx +1 -1
- package/target/esbuild/text/visually-hidden.css +1 -0
- package/target/esbuild/text/visually-hidden.jsx +1 -0
- package/target/esbuild/util/box-side.jsx +1 -1
- package/target/esbuild/util/debug.jsx +1 -1
- package/target/esbuild/util/dom.jsx +1 -1
- package/target/esbuild/util/environment.jsx +1 -0
- package/target/esbuild/util/event.jsx +1 -1
- package/target/esbuild/util/index.jsx +1 -1
- package/target/esbuild/util/preconditions.jsx +1 -1
- package/target/esbuild/util/reactive.jsx +1 -1
- package/target/node/color.js +1 -0
- package/target/node/shape.js +1 -0
- package/target/tsc/action/base.d.ts +27 -8
- package/target/tsc/action/index.d.ts +3 -1
- package/target/tsc/action/progress-button.css.d.ts +3 -0
- package/target/tsc/action/progress-button.d.ts +46 -0
- package/target/tsc/motion/follow-height.d.ts +51 -0
- package/target/tsc/motion/index.d.ts +7 -3
- package/target/tsc/motion/spring.d.ts +3 -3
- package/target/tsc/shape/index.d.ts +1 -1
- package/target/tsc/shape/material-shapes.d.ts +56 -0
- package/target/tsc/shape/path.d.ts +16 -0
- package/target/tsc/text/index.d.ts +5 -2
- package/target/tsc/text/visually-hidden.css.d.ts +3 -0
- package/target/tsc/text/visually-hidden.d.ts +33 -0
- package/target/tsc/util/environment.d.ts +14 -0
- package/target/tsc/util/index.d.ts +2 -1
- package/target/tsc/util/preconditions.d.ts +0 -14
|
@@ -1 +1 @@
|
|
|
1
|
-
import{children as M,createUniqueId as L,mergeProps as x}from"solid-js";import{DragVelocity as A}from"../surface/drag";import{deferAfterDelegatedCancellation as B}from"../util/event";const u
|
|
1
|
+
import{children as M,createUniqueId as L,mergeProps as x}from"solid-js";import{DragVelocity as A}from"../surface/drag";import{deferAfterDelegatedCancellation as B}from"../util/event";const u=/* @__PURE__ */new WeakMap(),d=/* @__PURE__ */new WeakMap(),g=":modal, :popover-open",h=/[^a-zA-Z0-9_-]+/g,D=50,m=8,E=0.5,S=["lostpointercapture","pointercancel","pointerdown","pointermove","pointerup"];function N(t,e,n){const r=t,o={},i=/* @__PURE__ */new Set(["children",...n]),s=l=>{const T=M(()=>l==="children"&&e!==void 0?e:r[l]);Object.defineProperty(o,l,{enumerable:!0,get:T});};for(const l of Object.keys(r))i.delete(l)&&s(l);for(const l of i)l==="children"?s(l):o[l]=void 0;return x(t,o);}function H(t,e){const n=L().replace(h,"-");return e===void 0||e===""?`${t}-${n}`:`${t}-${e.replace(h,"-")}-${n}`;}function X(t){return"value"in t?t.value:"selectedValue"in t?t.selectedValue:t.defaultValue;}function y(t){return t.matches(":disabled")||t.hasAttribute("disabled")||t.getAttribute("aria-disabled")==="true";}function C(t,e){const n=[];let r=!0;for(let o=t;o!==null;o=o.parentElement){const i=e?.get(o);if(i!==void 0){r=i;break;}if(n.push(o),o.hasAttribute("hidden")||o.hasAttribute("inert")){r=!1;break;}const s=p(o);if(s.display==="none"||s.visibility==="hidden"||s.visibility==="collapse"){r=!1;break;}}for(const o of n)e?.set(o,r);return r;}function P(t){const e=t.getAttribute("popover");return e===null||e===""||e==="auto";}function R(t){const e=t.ownerDocument,n=u.get(e)??[];let r=d.get(e);if(r===void 0){const i={order:/* @__PURE__ */new WeakMap(),sequence:0,onToggle(s){!f(s.target)||!("newState"in s)||(s.newState==="open"?i.order.set(s.target,++i.sequence):n.includes(s.target)||i.order.delete(s.target));}};r=i,d.set(e,i),e.addEventListener("beforetoggle",i.onToggle,!0);}try{for(const i of Array.from(e.querySelectorAll(g)))r.order.has(i)||r.order.set(i,++r.sequence);}catch{}r.order.set(t,++r.sequence),n.push(t),u.set(e,n);const o=r;return()=>{const i=n.lastIndexOf(t);i>=0&&n.splice(i,1),n.length===0&&u.get(e)===n&&(e.removeEventListener("beforetoggle",o.onToggle,!0),d.delete(e),u.delete(e));};}function _(t){const e=t.ownerDocument,n=u.get(e),r=d.get(e);let o;if(n===void 0||r===void 0)return!1;try{o=Array.from(e.querySelectorAll(g));}catch{return n.at(-1)===t;}for(const a of o)r.order.has(a)||r.order.set(a,++r.sequence);const i=n.filter(a=>o.some(l=>l.contains(a))),s=r.order.get(t)??0;return(i.length>0?i:n).at(-1)!==t?!1:o.every(a=>a.contains(t)||n.includes(a)||!P(a)||(r.order.get(a)??0)<s);}function f(t){return typeof t=="object"&&t!==null&&t.nodeType===1;}function v(t){return f(t)&&t.localName==="a";}function q(t){return f(t)&&t.localName==="button";}function I(){throw new Error("server renderer requested on the client");}function V(t,e){return v(e)&&(t.button!==0||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey);}function W(t,e){v(e)&&y(e)&&(t.key==="Enter"||t.key===" ")&&t.preventDefault();}function c(t){return(t?.nodeType===9?t:t?.ownerDocument)?.defaultView;}function p(t){return c(t)?.getComputedStyle(t)??getComputedStyle(t);}function J(t){return c(t)?.MutationObserver??globalThis.MutationObserver;}function b(t){const e=Number.parseFloat(t);return Number.isFinite(e)?t.trim().endsWith("ms")?e:e*1e3:0;}function w(t,e){const n=p(t),r=n.transitionDuration.split(","),o=n.transitionDelay.split(",");let i=0;return n.transitionProperty.split(",").forEach((s,a)=>{(e.includes(s.trim())||s.trim()==="all")&&(i=Math.max(0,b(r[a%r.length]??"0s")+b(o[a%o.length]??"0s")));}),i;}function K(t,e,n){const r=c(t),o=w(t,e);let i;const s=()=>{t.removeEventListener("transitionend",a),i!==void 0&&r?.clearTimeout(i),i=void 0;},a=l=>{l.target!==t||!e.includes(l.propertyName)||(s(),n());};return o===0||r===void 0?(n(),()=>{}):(t.addEventListener("transitionend",a),i=r.setTimeout(()=>{s(),n();},o+D),s);}function Y(t,e=!1){return Array.from(t.querySelectorAll("button, a[href], input, select, textarea, [role=button], [tabindex]")).filter(n=>n.closest("[role=toolbar]")===t&&!y(n)&&(n.matches("button, a[href], input, select, textarea")||n.tabIndex>=0||e&&n.matches("[role=button], [tabindex]")));}function j(t,...e){const n=/* @__PURE__ */new Set();for(const r of t)r!==void 0&&!n.has(r)&&(n.add(r),r(...e));}function $(t,e,n){return Math.abs(e)>=n?e>0:e>0?t>=E:t>E;}class F{#s;#n;#l;#u;#r;#t;#d;#i;#e;#a;#o;constructor(e){this.#s=e,this.#n=new A(),this.#l=n=>this.#f(n),this.#u=n=>{this.#o&&(this.#o=!1,n.preventDefault(),n.stopPropagation());},this.#r=null,this.#t=null,this.#d=0,this.#i=0,this.#e=0,this.#a=-1,this.#o=!1;}attach(e){const n=this.#r;if(n!==e){this.#t=null,this.#e=0;for(const r of S)n?.removeEventListener(r,this.#l),e?.addEventListener(r,this.#l);n?.removeEventListener("click",this.#u,!0),e?.addEventListener("click",this.#u,!0),this.#r=e;}}#f(e){const n=this.#t;if(e.type==="pointerdown"){n===null&&e.isPrimary&&e.button===0&&(this.#t=e,this.#i=e.clientX,this.#n.reset(),this.#n.track(e,r=>r.clientX));return;}if(!(n===null||e.pointerId!==n.pointerId)){if(e.type!=="pointermove"){e.type==="pointerup"&&(this.#i=e.clientX),this.#h(e);return;}this.#n.track(e,r=>r.clientX),this.#i=e.clientX,this.#e===0&&this.#p(n,e),this.#e>0&&this.#s.update(this.#c());}}#p(e,n){const r=this.#r,o=n.clientX-e.clientX,i=n.clientY-e.clientY;if(r===null||Math.max(Math.abs(o),Math.abs(i))<=m)return;if(Math.abs(i)>=Math.abs(o)){this.#t=null;return;}const s=this.#s.begin(e);if(s===null||s<=0){this.#t=null;return;}this.#e=s,this.#a=p(r).direction==="rtl"?1:-1,this.#d=e.clientX+Math.sign(o)*m;try{r.setPointerCapture(n.pointerId);}catch{}}#h(e){const n=this.#e,r=c(this.#r);if(this.#t=null,n===0)return;const o=this.#c(),i=e.type==="pointerup"?this.#n.release(e)*this.#a/n:0;this.#e=0,this.#o=!0,r?.setTimeout(()=>this.#o=!1,0),this.#s.end(o,i,e);}#c(){return(this.#i-this.#d)*this.#a/this.#e;}}export{F as DismissDrag,K as afterTransition,p as computedStyleOf,j as dedupeCallbacks,B as deferAfterDelegatedCancellation,Y as directActionableChildren,V as isAlternateLinkActivation,v as isAnchorElement,q as isButtonElement,y as isDisabledElement,$ as isDismissedAt,f as isElementNode,_ as isTopModalLayer,C as isVisibleElement,J as mutationObserverOf,c as ownerWindow,W as preventDisabledLinkKey,R as registerModalLayer,N as resolveNavigationSlots,X as selectedValueOf,w as transitionTimeOf,H as uniqueId,I as unreachableServerRender};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import{splitProps as R,untrack as p}from"solid-js";import{isServer as D}from"solid-js/web";import{defineDomComponent as E}from"..";import{DomController as b}from"../dom/client";import{applySpringMotion as M}from"../motion";import{DismissDrag as T,afterTransition as k,computedStyleOf as A,deferAfterDelegatedCancellation as g,isDisabledElement as H,isDismissedAt as O,isElementNode as d,isTopModalLayer as u,isVisibleElement as x,ownerWindow as f,registerModalLayer as V,resolveNavigationSlots as N,uniqueId as y,unreachableServerRender as S}from"./base";import{NAVIGATION_KIND_ATTRIBUTE as I,NavigationSelection as F,provideNavigationSelection as _}from"./navigation";import"../container/elevation-shadow.css";import"./navigation.css";const C="cw-NavigationDrawer-open",h="Close navigation menu",r="--_CW-NAVIGATION-DRAWER_PROGRESS",w="_cw-NavigationDrawer-dragging",J=400,X=["headline","drawerContent","content"],K=["a[href]","button:not(:disabled)","input:not(:disabled)","select:not(:disabled)","textarea:not(:disabled)",'[tabindex]:not([tabindex="-1"])'].join(", ");function L(o){return o.variant??o.mode??"modal"}function P(o){return`_cw-NavigationDrawer-${o}
|
|
1
|
+
import{splitProps as R,untrack as p}from"solid-js";import{isServer as D}from"solid-js/web";import{defineDomComponent as E}from"..";import{DomController as b}from"../dom/client";import{applySpringMotion as M}from"../motion";import{DismissDrag as T,afterTransition as k,computedStyleOf as A,deferAfterDelegatedCancellation as g,isDisabledElement as H,isDismissedAt as O,isElementNode as d,isTopModalLayer as u,isVisibleElement as x,ownerWindow as f,registerModalLayer as V,resolveNavigationSlots as N,uniqueId as y,unreachableServerRender as S}from"./base";import{NAVIGATION_KIND_ATTRIBUTE as I,NavigationSelection as F,provideNavigationSelection as _}from"./navigation";import"../container/elevation-shadow.css";import"./navigation.css";const C="cw-NavigationDrawer-open",h="Close navigation menu",r="--_CW-NAVIGATION-DRAWER_PROGRESS",w="_cw-NavigationDrawer-dragging",J=400,X=["headline","drawerContent","content"],K=["a[href]","button:not(:disabled)","input:not(:disabled)","select:not(:disabled)","textarea:not(:disabled)",'[tabindex]:not([tabindex="-1"])'].join(", ");function L(o){return o.variant??o.mode??"modal";}function P(o){return`_cw-NavigationDrawer-${o}`;}function m(o){return"value"in o||"selectedValue"in o||"defaultValue"in o;}class q extends b{#o;#l;#D;#E;#b;#N;#v;#p;#s;#y;#e;#t;#d;#S;#g;#n;#h;#i;#u;#m;#a;#c;#f;#C;#w;constructor(e){super(e),this.#o="open"in e,this.#l=m(e)?new F(e):null,this.#D=new T({begin:t=>this.#F(t),update:t=>this.#M(t),end:(t,n,i)=>this.#_(t,n,i)}),this.#E=t=>this.#J(t),this.#b=t=>this.#x(t),this.#N=()=>this.#R(),this.#v=t=>{const n=super.styleElement;t.key==="Escape"&&n!==null&&t.composedPath().includes(n)&&this.#x(t);},this.#p=t=>this.#X(t),this.#s=null,this.#y=null,this.#e=p(()=>L(e)),this.#t=p(()=>(this.#o?e.open:e.defaultOpen)===!0),this.#d=!1,this.#S=!1,this.#g=!1,this.#n=!0,this.#h=null,this.#i=null,this.#u=!1,this.#m=null,this.#a=null,this.#c=null,this.#f=null,this.#C=null,this.#w=()=>{},this.#l!==null&&super.setAttribute(I,"NavigationDrawer");}#r(){return this.#e==="modal"&&this.#t;}#L(){const e=super.functionElement,t=this.#s,n=/* @__PURE__ */new Map();if(e===null)return[];const i=Array.from(e.querySelectorAll(K)).filter(s=>s.tabIndex>=0&&!H(s)&&x(s,n));return t!==null&&!t.hidden&&this.#n&&i.push(t),i;}#T(){const e=super.styleElement,t=this.#e==="permanent"||this.#t;e===null||super.functionElement===null||((t!==this.#S||!this.#g)&&(this.#w(),this.#S=t,super.setClass(C,t),this.#i?.retarget(t?1:0),t||!this.#g?this.#d=t:this.#h===null&&(this.#w=k(e,[r],()=>{this.#d=!1,this.#P();}))),this.#g=!0,this.#P(),this.#V(this.#r()));}#P(){const e=this.#s,t=this.#y,n=this.#d,i=this.#e==="modal"&&n,s=n&&!this.#t&&this.#e!=="permanent";super.setAttribute("hidden",!n),super.setAttribute("aria-hidden",n?void 0:"true"),super.setAttribute("inert",s),e!==null&&(e.hidden=!i,e.inert=s||!this.#n,e.tabIndex=this.#n?0:-1,this.#n?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden","true")),t!==null&&(t.inert=this.#r());}#V(e){const t=super.styleElement;if(t===null||e===this.#u)return;if(this.#u=e,!e){this.#k(),this.#I(t);return;}const n=t.getRootNode().activeElement;this.#f=d(n)&&n!==t.ownerDocument.body?n:null,(f(t)?.queueMicrotask??queueMicrotask)(()=>{!this.#u||super.styleElement!==t||!t.isConnected||(this.#R(),u(t)&&(this.#L()[0]??super.functionElement)?.focus());});}#I(e){const t=this.#f;this.#f=null,t!==null&&(f(e)?.queueMicrotask??queueMicrotask)(()=>{const n=e.getRootNode(),i=n.activeElement;!this.#r()&&t.isConnected&&t.getRootNode()===n&&(i===null||i===e.ownerDocument.body||e.contains(i))&&t.focus();});}#R(){const e=super.styleElement;if(e===null||!this.#u||!e.isConnected)return;const t=e.getRootNode(),n=t.nodeType===11?t:e.ownerDocument;n!==this.#c&&(this.#c?.removeEventListener("focusin",this.#p,!0),this.#c=n,n.addEventListener("focusin",this.#p,!0)),e.ownerDocument!==this.#a&&(this.#a?.removeEventListener("keydown",this.#v,!0),this.#a=e.ownerDocument,this.#a.addEventListener("keydown",this.#v,!0),this.#m?.(),this.#m=V(e));}#k(){this.#m?.(),this.#m=null,this.#c?.removeEventListener("focusin",this.#p,!0),this.#c=null,this.#a?.removeEventListener("keydown",this.#v,!0),this.#a=null;}#A(e,t){this.#e==="permanent"||!this.#n||(this.#o||(this.#t=e,this.#T()),this.props.onOpenChange?.(e,t));}#H(e){const t=super.styleElement;g(e,t,()=>{super.styleElement===t&&t?.isConnected===!0&&this.#A(!1,e);});}#F(e){const t=super.styleElement,n=super.functionElement,i=e.target;if(t===null||n===null||!this.#r()||!this.#n||!u(t)||!d(i)||!(n.contains(i)||i===this.#s))return null;const s=Number.parseFloat(A(t).getPropertyValue(r));return this.#i?.cancel(),this.#i=null,this.#h=Number.isFinite(s)?s:1,super.setClass(w,!0),this.#M(0),n.getBoundingClientRect().width;}#M(e){const t=super.styleElement,n=Math.min(1,Math.max(0,(this.#h??1)-e));return t?.style.setProperty(r,String(n)),n;}#_(e,t,n){const i=super.styleElement,s=super.functionElement,a=this.#M(e),l=s?.getBoundingClientRect().width??0;if(i===null||l===0){this.#O();return;}O(1-a,t,J/l)&&this.#A(!1,n);const c=M(i,r,a,this.#t?1:0,{velocity:-t});this.#i=c,c.finished.then(()=>{this.#i===c&&this.#O();},()=>{});}#O(){const e=super.styleElement;this.#i?.cancel(),this.#i=null,this.#h=null,e?.style.removeProperty(r),super.setClass(w,!1),this.#d&&this.#e!=="permanent"&&!this.#t&&(this.#d=!1,this.#P());}#J(e){e.target===this.#s&&this.#n&&this.#H(e);}#x(e){const t=super.styleElement;if(e===this.#C||t===null||(this.#C=e,this.#R(),this.#e==="modal"&&(!this.#t||!u(t))))return;if(e.key==="Escape"){this.#t&&this.#n&&!e.defaultPrevented&&this.#H(e);return;}if(e.key!=="Tab"||!this.#r())return;const n=this.#L(),i=t.getRootNode().activeElement,s=d(i)?n.indexOf(i):-1;(e.shiftKey?s>0:s>=0&&s<n.length-1)||g(e,t,()=>{const l=n[e.shiftKey?n.length-1:0];super.styleElement===t&&t.isConnected&&this.#r()&&(l??super.functionElement)?.focus();});}#X(e){const t=super.styleElement,n=e.composedPath()[0]??e.target;!this.#r()||t===null||!d(n)||t.contains(n)||!u(t)||t.getRootNode().activeElement===n&&(this.#L()[0]??super.functionElement)?.focus();}applyComponentProps(){const e=super.readProps(["dismissible","mode","open","scrimLabel","selectedValue","value","variant"]);(e.variantChanged||e.modeChanged)&&(this.#e=e.variant??e.mode??"modal",super.setClass("variant",P(this.#e))),e.openChanged&&this.#o&&(this.#t=e.open===!0),e.dismissibleChanged&&(this.#n=e.dismissible!==!1),e.scrimLabelChanged&&this.#s?.setAttribute("aria-label",e.scrimLabel??h),(e.valueChanged||e.selectedValueChanged)&&this.#l?.update(),this.#T(),this.#l?.sync();}onStyleElementChanged(e){const t=super.styleElement;super.onStyleElementChanged(e),t?.removeEventListener("click",this.#E),t?.removeEventListener("keydown",this.#b),t?.removeEventListener("focusin",this.#N),e?.addEventListener("click",this.#E),e?.addEventListener("keydown",this.#b),e?.addEventListener("focusin",this.#N),this.#D.attach(e);}onFunctionElementChanged(e){super.onFunctionElementChanged(e),this.#l?.attach(e);}onControllerCleanup(){this.#w(),this.#i?.cancel(),this.#D.attach(null),this.#u=!1,this.#k(),this.#l?.dispose(),super.onControllerCleanup();}render(e,t){return<div class="cw-NavigationDrawer">
|
|
2
2
|
<nav class="cw-NavigationDrawer-panel cw-elevationShadow"ref={t}role="navigation"tabIndex={-1}>
|
|
3
3
|
<div class="cw-NavigationDrawer-headline">{this.props.headline}</div>
|
|
4
4
|
<div class="cw-NavigationDrawer-items">{this.props.drawerContent??e}</div>
|
|
5
5
|
</nav>
|
|
6
|
-
<button aria-label={h}class="cw-NavigationDrawer-scrim"ref={n=>{this.#s=n}}type="button"/>
|
|
7
|
-
<div class="cw-NavigationDrawer-content"ref={n=>{this.#y=n}}>{this.props.content}</div>
|
|
8
|
-
</div
|
|
6
|
+
<button aria-label={h}class="cw-NavigationDrawer-scrim"ref={n=>{this.#s=n;}}type="button"/>
|
|
7
|
+
<div class="cw-NavigationDrawer-content"ref={n=>{this.#y=n;}}>{this.props.content}</div>
|
|
8
|
+
</div>;}}function B(o,e){const[t,n]=R(o,["children","class","classList","style"]),i=L(e),s=i==="permanent"||("open"in e?e.open:e.defaultOpen)===!0,a=e.dismissible!==!1;return<div class={t.class}classList={{...t.classList,[P(i)]:!0,[C]:s,"cw-NavigationDrawer":!0}}style={t.style}>
|
|
9
9
|
<nav{...n}aria-hidden={s?void 0:"true"}class="cw-NavigationDrawer-panel cw-elevationShadow"data-cw-navigation-kind={m(e)?"NavigationDrawer":void 0}hidden={!s}role="navigation"tabIndex={-1}>
|
|
10
10
|
<div class="cw-NavigationDrawer-headline">{e.headline}</div>
|
|
11
11
|
<div class="cw-NavigationDrawer-items">
|
|
@@ -16,10 +16,10 @@ import{splitProps as R,untrack as p}from"solid-js";import{isServer as D}from"sol
|
|
|
16
16
|
<div class="cw-NavigationDrawer-content"inert={i==="modal"&&s}>
|
|
17
17
|
{e.content}
|
|
18
18
|
</div>
|
|
19
|
-
</div
|
|
19
|
+
</div>;}const G=/* @__PURE__ */E(D?()=>B:S,()=>q),W=o=>_(o,m(o),()=>G(N(o,void 0,X)));function v(o){return e=><W{...e}variant={o}/>;}const se=/* @__PURE__ */v("modal"),ae=/* @__PURE__ */v("dismissible"),re=/* @__PURE__ */v("permanent");class U extends b{#o;constructor(e){super(e,{styleElementIsFunction:!0}),this.#o=y("cw-drawer-section");}applyComponentProps(){const e=super.readProps(["label"]);e.labelChanged&&super.setAttribute("aria-labelledby",e.label===void 0?void 0:this.#o);}render(e){const t=this.#o;return<div class="cw-NavigationDrawerSection"role="group">
|
|
20
20
|
<div class="cw-NavigationDrawerSection-label"id={t}>{this.props.label}</div>
|
|
21
21
|
{e}
|
|
22
|
-
</div
|
|
22
|
+
</div>;}}function j(o,e){const t=y("cw-drawer-section");return<div{...o}aria-labelledby={e.label===void 0?void 0:t}classList={{...o.classList,"cw-NavigationDrawerSection":!0}}role="group">
|
|
23
23
|
<div class="cw-NavigationDrawerSection-label"id={t}>{e.label}</div>
|
|
24
24
|
{o.children}
|
|
25
|
-
</div
|
|
25
|
+
</div>;}const Y=/* @__PURE__ */E(D?()=>j:S,()=>U),le=o=>Y(N(o,void 0,["label"]));export{ae as DismissibleNavigationDrawer,se as ModalNavigationDrawer,W as NavigationDrawer,q as NavigationDrawerController,le as NavigationDrawerSection,U as NavigationDrawerSectionController,re as PermanentNavigationDrawer};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import"./navigation.css";import{LeadingIconTab as t,PrimaryTabRow as e,SecondaryTabRow as i,Tab as p,TabController as l,TabList as n,TabListController as g,TabPanel as b,TabPanelController as m,TabRow as T,Tabs as B,TabsController as s}from"./tabs";import{NavigationBar as c,FlexibleNavigationBar as N,NavigationBarItem as A,NavigationController as P,NavigationDrawerItem as S,NavigationItem as C,NavigationItemController as w,NavigationRail as x,NavigationRailItem as d,ShortNavigationBar as f,ShortNavigationBarItem as D,WideNavigationRailItem as F,WideNavigationRail as h}from"./navigation";import{DismissibleNavigationDrawer as y,ModalNavigationDrawer as R,NavigationDrawer as L,NavigationDrawerController as u,NavigationDrawerSection as V,NavigationDrawerSectionController as H,PermanentNavigationDrawer as M}from"./drawer";import{AppBarColumn as z,AppBarItem as E,AppBarLayoutController as O,AppBarRow as W,BottomAppBar as j,BottomAppBarController as q,CenterAlignedTopAppBar as G,LargeFlexibleTopAppBar as J,LargeTopAppBar as K,MediumFlexibleTopAppBar as Q,MediumTopAppBar as U,SmallTopAppBar as X,TopAppBar as Y,TopAppBarController as Z,TwoRowsTopAppBar as _}from"./app-bar";import{DockedToolbar as oo,FloatingToolbar as ro,FloatingToolbarController as ao,FloatingToolbarItem as to,HorizontalFloatingToolbar as eo,VerticalFloatingToolbar as io}from"./toolbar";import{DockedSearchBar as lo,SearchAppBar as no,SearchBar as go,SearchBarController as bo,SearchView as mo}from"./search";import{HorizontalScrollbar as Bo,Scrollbar as so,ScrollbarController as vo,ScrollField as co,ScrollFieldController as No,VerticalScrollbar as Ao}from"./scroll";export{z as AppBarColumn,E as AppBarItem,O as AppBarLayoutController,W as AppBarRow,j as BottomAppBar,q as BottomAppBarController,G as CenterAlignedTopAppBar,y as DismissibleNavigationDrawer,lo as DockedSearchBar,oo as DockedToolbar,N as FlexibleNavigationBar,ro as FloatingToolbar,ao as FloatingToolbarController,to as FloatingToolbarItem,eo as HorizontalFloatingToolbar,Bo as HorizontalScrollbar,J as LargeFlexibleTopAppBar,K as LargeTopAppBar,t as LeadingIconTab,Q as MediumFlexibleTopAppBar,U as MediumTopAppBar,R as ModalNavigationDrawer,c as NavigationBar,A as NavigationBarItem,P as NavigationController,L as NavigationDrawer,u as NavigationDrawerController,S as NavigationDrawerItem,V as NavigationDrawerSection,H as NavigationDrawerSectionController,C as NavigationItem,w as NavigationItemController,x as NavigationRail,d as NavigationRailItem,M as PermanentNavigationDrawer,e as PrimaryTabRow,co as ScrollField,No as ScrollFieldController,so as Scrollbar,vo as ScrollbarController,no as SearchAppBar,go as SearchBar,bo as SearchBarController,mo as SearchView,i as SecondaryTabRow,f as ShortNavigationBar,D as ShortNavigationBarItem,X as SmallTopAppBar,p as Tab,l as TabController,n as TabList,g as TabListController,b as TabPanel,m as TabPanelController,T as TabRow,B as Tabs,s as TabsController,Y as TopAppBar,Z as TopAppBarController,_ as TwoRowsTopAppBar,io as VerticalFloatingToolbar,Ao as VerticalScrollbar,h as WideNavigationRail,F as WideNavigationRailItem};
|
|
1
|
+
import"./navigation.css";import{LeadingIconTab as t,PrimaryTabRow as e,SecondaryTabRow as i,Tab as p,TabController as l,TabList as n,TabListController as g,TabPanel as b,TabPanelController as m,TabRow as T,Tabs as B,TabsController as s}from"./tabs";import{NavigationBar as c,FlexibleNavigationBar as N,NavigationBarItem as A,NavigationController as P,NavigationDrawerItem as S,NavigationItem as C,NavigationItemController as w,NavigationRail as x,NavigationRailItem as d,ShortNavigationBar as f,ShortNavigationBarItem as D,WideNavigationRailItem as F,WideNavigationRail as h}from"./navigation";import{DismissibleNavigationDrawer as y,ModalNavigationDrawer as R,NavigationDrawer as L,NavigationDrawerController as u,NavigationDrawerSection as V,NavigationDrawerSectionController as H,PermanentNavigationDrawer as M}from"./drawer";import{AppBarColumn as z,AppBarItem as E,AppBarLayoutController as O,AppBarRow as W,BottomAppBar as j,BottomAppBarController as q,CenterAlignedTopAppBar as G,LargeFlexibleTopAppBar as J,LargeTopAppBar as K,MediumFlexibleTopAppBar as Q,MediumTopAppBar as U,SmallTopAppBar as X,TopAppBar as Y,TopAppBarController as Z,TwoRowsTopAppBar as _}from"./app-bar";import{DockedToolbar as oo,FloatingToolbar as ro,FloatingToolbarController as ao,FloatingToolbarItem as to,HorizontalFloatingToolbar as eo,VerticalFloatingToolbar as io}from"./toolbar";import{DockedSearchBar as lo,SearchAppBar as no,SearchBar as go,SearchBarController as bo,SearchView as mo}from"./search";import{HorizontalScrollbar as Bo,Scrollbar as so,ScrollbarController as vo,ScrollField as co,ScrollFieldController as No,VerticalScrollbar as Ao}from"./scroll";export{z as AppBarColumn,E as AppBarItem,O as AppBarLayoutController,W as AppBarRow,j as BottomAppBar,q as BottomAppBarController,G as CenterAlignedTopAppBar,y as DismissibleNavigationDrawer,lo as DockedSearchBar,oo as DockedToolbar,N as FlexibleNavigationBar,ro as FloatingToolbar,ao as FloatingToolbarController,to as FloatingToolbarItem,eo as HorizontalFloatingToolbar,Bo as HorizontalScrollbar,J as LargeFlexibleTopAppBar,K as LargeTopAppBar,t as LeadingIconTab,Q as MediumFlexibleTopAppBar,U as MediumTopAppBar,R as ModalNavigationDrawer,c as NavigationBar,A as NavigationBarItem,P as NavigationController,L as NavigationDrawer,u as NavigationDrawerController,S as NavigationDrawerItem,V as NavigationDrawerSection,H as NavigationDrawerSectionController,C as NavigationItem,w as NavigationItemController,x as NavigationRail,d as NavigationRailItem,M as PermanentNavigationDrawer,e as PrimaryTabRow,co as ScrollField,No as ScrollFieldController,so as Scrollbar,vo as ScrollbarController,no as SearchAppBar,go as SearchBar,bo as SearchBarController,mo as SearchView,i as SecondaryTabRow,f as ShortNavigationBar,D as ShortNavigationBarItem,X as SmallTopAppBar,p as Tab,l as TabController,n as TabList,g as TabListController,b as TabPanel,m as TabPanelController,T as TabRow,B as Tabs,s as TabsController,Y as TopAppBar,Z as TopAppBarController,_ as TwoRowsTopAppBar,io as VerticalFloatingToolbar,Ao as VerticalScrollbar,h as WideNavigationRail,F as WideNavigationRailItem};
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import{createComponent as U,createContext as he,createMemo as X,untrack as H,useContext as ge}from"solid-js";import{isServer as O}from"solid-js/web";import{defineDomComponent as pe}from"..";import{DomController as ve}from"../dom/client";import{applySpringMotion as fe}from"../motion";import{FocusState as me,HoverState as Se,PressState as be,defineInteractableComponent as Ce}from"../state";import{InteractableController as Ee}from"../state/controller";import{DismissDrag as Ne,afterTransition as S,computedStyleOf as b,dedupeCallbacks as $,deferAfterDelegatedCancellation as G,isAlternateLinkActivation as K,isAnchorElement as F,isDisabledElement as x,isDismissedAt as Ae,isElementNode as Le,mutationObserverOf as Te,ownerWindow as Ie,preventDisabledLinkKey as ye,resolveNavigationSlots as Y,selectedValueOf as D,unreachableServerRender as z}from"./base";import"../container/elevation-shadow.css";import"./navigation.css";const q="data-cw-navigation-kind",P=`[${q}]`,v="cw-NavigationItem",j=`.${v}`,E="cw-NavigationItem-icon",N="cw-NavigationItem-label",A="cw-NavigationItem-badge",L="cw-NavigationItem-selected",Q="cw-NavigationItem-disabled",u="data-cw-navigation-value",T="data-cw-navigation-current",B="data-cw-navigation-current-authored",f="data-cw-navigation-selected",Me=["aria-current","aria-disabled",T,"disabled",u],J=me|Se|be,Z="data-cw-navigation-icon-placement",ee="_cw-Navigation-bar",te="_cw-Navigation-rail",g="_cw-Navigation-startIcons",ne="_cw-Navigation-selectedLabel",ie="data-cw-navigation-arrangement",ae="data-cw-navigation-expanded",se="data-cw-navigation-modal",p="data-cw-navigation-hide-collapsed",oe="cw-NavigationRail-content",re="cw-NavigationRail-modal",M="_cw-NavigationRail-modal-closing",V="_cw-NavigationRail-modal-dragging",R="_cw-NavigationRail-morphing",C="--_CW-NAVIGATION-RAIL_WIDTH",l="--_CW-NAVIGATION-MODAL_WIDTH",h="--_CW-NAVIGATION-MODAL_PROGRESS",Re=125,_e="--_CW-NAVIGATION-ITEM_COUNT",_=["inline-size","width"],le=he();function d(a){return a==="NavigationRail"||a==="WideNavigationRail"}function de(a,e){return d(a)&&(e??a==="WideNavigationRail")}function ue(a,e,t){return t==="start"||d(a)&&e&&t!=="top"}function ce(a,e,t){return d(a)?e==="center"?"center":"top":e==="centered"||e==="equalWeight"?e:t==="start"?"centered":"equalWeight"}function we(a){return Array.from(a.querySelectorAll(j)).filter(e=>e.closest(P)===a)}function De(a){return a.find(t=>!x(t)&&(t.getAttribute(f)==="true"||t.hasAttribute("aria-current")))?.getAttribute(u)??void 0}function w(a,e){e===null?a.removeAttribute("aria-current"):a.setAttribute("aria-current",e)}class He{#t;#o;#c;#u;#e;#n;#a;#l;#s;#i;#r;#d;constructor(e,t){this.#t=e,this.#o="value"in e||"selectedValue"in e,this.#c=t,this.#u=n=>this.#h(n),this.#e=null,this.#n=null,this.#a=0,this.#l=H(()=>D(e)),this.#s=new Set,this.#i=new WeakMap,this.#r=new WeakMap,this.#d=new WeakMap}attach(e){const t=this.#e,n=e===null?void 0:Te(e);t!==e&&(this.#a++,t!==null&&(this.#m(t),t.removeEventListener("click",this.#u)),this.#n?.disconnect(),this.#n=null,this.#e=e,e!==null&&(e.addEventListener("click",this.#u),n!==void 0&&(this.#n=new n(()=>this.sync()),this.#n.observe(e,{attributeFilter:Me,attributes:!0,childList:!0,subtree:!0}))))}update(){this.#o&&(this.#l=D(this.#t))}sync(){const e=this.#e;if(e===null)return;const t=we(e),n=new Set(t);for(const i of Array.from(this.#s))n.has(i)||this.#g(i);!this.#o&&this.#l===void 0&&(this.#l=De(t));for(const i of t){const s=this.#l!==void 0&&i.getAttribute(u)===this.#l,r=s?"true":"false",o=s?i.getAttribute(T)??"page":null;this.#v(i),i.classList.contains(L)!==s&&i.classList.toggle(L,s),this.#s.has(i)&&this.#f(i,o),i.getAttribute(f)!==r&&i.setAttribute(f,r)}this.#c?.(t),this.#n?.takeRecords()}dispose(){this.attach(null)}#v(e){const t=e.getAttribute("aria-current");if(this.#r.has(e)){this.#s.has(e)&&t!==this.#i.get(e)&&(this.#s.delete(e),this.#i.delete(e),this.#r.set(e,t));return}const n=e.hasAttribute(B)||this.#d.has(e)&&this.#d.get(e)!==t;this.#d.delete(e),this.#r.set(e,n?t:null),n||(this.#s.add(e),this.#i.set(e,t))}#f(e,t){this.#i.set(e,t),e.getAttribute("aria-current")!==t&&w(e,t)}#g(e){const t=e.getAttribute("aria-current");if(t===this.#i.get(e)){const n=this.#r.get(e)??null;w(e,n),this.#d.set(e,n),this.#r.delete(e)}else this.#r.set(e,t);this.#i.delete(e),this.#s.delete(e)}#m(e){for(const t of this.#s){const n=t.getAttribute("aria-current");e.contains(t)&&n===this.#i.get(t)&&w(t,this.#r.get(t)??null)}this.#s.clear(),this.#i=new WeakMap,this.#r=new WeakMap,this.#d=new WeakMap}#h(e){const t=this.#e,n=Le(e.target)?e.target.closest(j):null,i=this.#a;if(t===null||n===null||n.closest(P)!==t)return;if(x(n)){F(n)&&e.preventDefault();return}const s=n.getAttribute(u);s===null||K(e,n)||G(e,t,()=>{this.#a!==i||!t.isConnected||!t.contains(n)||(this.#o||(this.#l=s),this.sync(),$([this.#t.onChange,this.#t.onValueChange,this.#t.onSelectedChange],s,e))},!1)}}class Oe extends ve{#t;#o;#c;#u;#e;#n;#a;#l;#s;#i;#r;#d;constructor(e,t){super(e,{styleElementIsFunction:!0}),this.#t=t,this.#o=new He(e,n=>{d(t)||super.setStyle(_e,n.length)}),this.#c=new Ne({begin:n=>this.#E(n),update:n=>this.#S(n),end:(n,i,s)=>this.#N(n,i,s)}),this.#u=null,this.#e=null,this.#n=!1,this.#a=!1,this.#l=!1,this.#s=null,this.#i=null,this.#r=()=>{},this.#d=()=>{}}applyComponentProps(){const e=super.readProps(["alwaysShowLabel","arrangement","attr:aria-label","expanded","hideOnCollapse","itemIconPlacement","modal","selectedValue","value"]),t=de(this.#t,e.expanded),n=ue(this.#t,t&&e.modal!==!0,e.itemIconPlacement);e.itemIconPlacementChanged&&super.setAttribute(Z,e.itemIconPlacement),(e.arrangementChanged||e.itemIconPlacementChanged)&&super.setAttribute(ie,ce(this.#t,e.arrangement,e.itemIconPlacement)),(e.valueChanged||e.selectedValueChanged)&&this.#o.update(),d(this.#t)&&(e["attr:aria-labelChanged"]&&this.#C(e["attr:aria-label"]),this.#v(t,e.modal===!0,e.hideOnCollapse===!0)),super.setClass(g,n),super.setClass(ne,e.alwaysShowLabel===!1&&!n),this.#o.sync()}#v(e,t,n){const i=super.styleElement,s=this.#l,r=e&&!t,o=e&&t,c=s&&r!==this.#n&&i?.isConnected===!0?i.getBoundingClientRect().width:void 0;this.#l=!0,super.setAttribute(ae,e?"true":"false"),super.setAttribute(se,t?"true":void 0),super.setAttribute(p,n?"true":void 0),this.#n=r,c!==void 0&&this.#f(c),o!==this.#a&&(this.#a=o,o?this.#g(s):this.#m(s))}#f(e){const t=super.styleElement,n=Ie(t);if(this.#r(),super.setStyle(C,void 0),super.setClass(R,!1),t===null||n===void 0)return;const i=n.requestAnimationFrame(()=>{const s=t.getBoundingClientRect().width;s!==e&&(super.setStyle(C,`${e}px`),b(t).inlineSize,super.setStyle(C,`${s}px`),super.setClass(R,!0),this.#r=S(t,_,()=>{super.setStyle(C,void 0),super.setClass(R,!1)}))});this.#r=()=>n.cancelAnimationFrame(i)}#g(e){const t=super.styleElement,n=this.#e,i=this.#u;if(t===null||n===null||i===null)return;if(this.#d(),this.#i?.retarget(1),n.classList.remove(M),n.classList.add(g),!n.open){if(!n.isConnected){queueMicrotask(()=>{this.#a&&n.isConnected&&!n.open&&this.#g(!1)});return}n.append(i),n.showModal()}if(!e||t.hasAttribute(p))return;const s=t.getBoundingClientRect().width;n.style.removeProperty(l);const r=n.getBoundingClientRect().width;n.style.setProperty(l,`${s}px`),b(n).inlineSize,n.style.setProperty(l,`${r}px`),this.#d=S(n,_,()=>{n.style.removeProperty(l)})}#m(e){const t=super.styleElement,n=this.#e;if(this.#d(),t===null||n===null||this.#s!==null)return;if(!n.open||!e){this.#h();return}if(n.classList.add(M),n.classList.remove(g),t.hasAttribute(p)){this.#d=S(n,[h],()=>this.#h());return}const i=n.getBoundingClientRect().width;n.style.setProperty(l,`${i}px`),b(n).inlineSize,n.style.setProperty(l,`${t.getBoundingClientRect().width}px`),this.#d=S(n,_,()=>this.#h())}#h(){const e=super.styleElement,t=this.#e,n=this.#u;t!==null&&(t.classList.remove(M,g),t.style.removeProperty(l),t.open&&t.close(),e!==null&&n!==null&&n.parentElement!==e&&e.insertBefore(n,t))}#C(e){e===void 0?this.#e?.removeAttribute("aria-label"):this.#e?.setAttribute("aria-label",e)}#p(e){this.props.onExpandedChange?.(!1,e)}#E(e){const t=super.styleElement,n=this.#e;if(t===null||n===null||!this.#a||!n.open||!t.hasAttribute(p))return null;const i=n.getBoundingClientRect(),s=Number.parseFloat(b(n).getPropertyValue(h));return e.clientX<i.left||e.clientX>=i.right||e.clientY<i.top||e.clientY>=i.bottom?null:(this.#i?.cancel(),this.#i=null,this.#s=Number.isFinite(s)?s:1,n.classList.add(V),this.#S(0),i.width)}#S(e){const t=Math.min(1,Math.max(0,(this.#s??1)-e));return this.#e?.style.setProperty(h,String(t)),t}#N(e,t,n){const i=this.#e,s=this.#S(e),r=i?.getBoundingClientRect().width??0;if(i===null||r===0){this.#b();return}Ae(1-s,t,Re/r)&&this.#p(n);const o=fe(i,h,s,this.#a?1:0,{velocity:-t});this.#i=o,o.finished.then(()=>{this.#i===o&&this.#b()},()=>{})}#b(){const e=this.#e;this.#i?.cancel(),this.#i=null,this.#s=null,e?.style.removeProperty(h),e?.classList.remove(V),this.#a||this.#h()}#A(e){this.#e=e,this.#c.attach(e),e.addEventListener("cancel",t=>{t.preventDefault(),this.#p(t)}),e.addEventListener("click",t=>{const n=e.getBoundingClientRect();t.target===e&&(t.clientX<n.left||t.clientX>=n.right||t.clientY<n.top||t.clientY>=n.bottom)&&this.#p(t)}),e.addEventListener("close",t=>{!this.#a||e.open||(this.#a=!1,this.#h(),this.#p(t))})}onStyleElementChanged(e){super.onStyleElementChanged(e),this.#o.attach(e)}onControllerCleanup(){this.#r(),this.#d(),this.#i?.cancel(),this.#c.attach(null),this.#a=!1,this.#h(),this.#o.dispose(),super.onControllerCleanup()}render(e){return d(this.#t)?this.#T(e):this.#L(e)}#L(e){return<nav class={`cw-${this.#t} ${ee}`}data-cw-navigation-kind={this.#t}role="navigation">{e}</nav>}#T(e){return<nav class={`cw-${this.#t} ${te}`}data-cw-navigation-kind={this.#t}role="navigation">
|
|
2
|
-
<div class={
|
|
1
|
+
import{createComponent as K,createContext as ge,createMemo as J,untrack as O,useContext as ve}from"solid-js";import{isServer as x}from"solid-js/web";import{defineDomComponent as pe}from"..";import{DomController as fe}from"../dom/client";import{applySpringMotion as me}from"../motion";import{FocusState as Se,HoverState as be,PressState as Ce,defineInteractableComponent as Ee}from"../state";import{InteractableController as Ne}from"../state/controller";import{DismissDrag as Ae,afterTransition as S,computedStyleOf as b,dedupeCallbacks as G,deferAfterDelegatedCancellation as $,isAlternateLinkActivation as F,isAnchorElement as Y,isDisabledElement as P,isDismissedAt as Le,isElementNode as Te,mutationObserverOf as Ie,ownerWindow as ye,preventDisabledLinkKey as Re,resolveNavigationSlots as z,selectedValueOf as D,unreachableServerRender as q}from"./base";import"../container/elevation-shadow.css";import"./navigation.css";const H={NavigationBar:"cw-NavigationBar",NavigationRail:"cw-NavigationRail",ShortNavigationBar:"cw-ShortNavigationBar",WideNavigationRail:"cw-WideNavigationRail"},j="data-cw-navigation-kind",B=`[${j}]`,p="cw-NavigationItem",Q=`.${p}`,E="cw-NavigationItem-icon",N="cw-NavigationItem-label",A="cw-NavigationItem-badge",L="cw-NavigationItem-selected",Z="cw-NavigationItem-disabled",u="data-cw-navigation-value",T="data-cw-navigation-current",W="data-cw-navigation-current-authored",f="data-cw-navigation-selected",_e=["aria-current","aria-disabled",T,"disabled",u],V=Se|be|Ce,ee="data-cw-navigation-icon-placement",te="_cw-Navigation-bar",ne="_cw-Navigation-rail",g="_cw-Navigation-startIcons",ie="_cw-Navigation-selectedLabel",ae="data-cw-navigation-arrangement",se="data-cw-navigation-expanded",oe="data-cw-navigation-modal",v="data-cw-navigation-hide-collapsed",re="cw-NavigationRail-content",le="cw-NavigationRail-modal",R="_cw-NavigationRail-modal-closing",U="_cw-NavigationRail-modal-dragging",_="_cw-NavigationRail-morphing",C="--_CW-NAVIGATION-RAIL_WIDTH",l="--_CW-NAVIGATION-MODAL_WIDTH",h="--_CW-NAVIGATION-MODAL_PROGRESS",Me=125,we="--_CW-NAVIGATION-ITEM_COUNT",M=["inline-size","width"],de=ge();function d(a){return a==="NavigationRail"||a==="WideNavigationRail";}function ue(a,e){return d(a)&&(e??a==="WideNavigationRail");}function ce(a,e,t){return t==="start"||d(a)&&e&&t!=="top";}function he(a,e,t){return d(a)?e==="center"?"center":"top":e==="centered"||e==="equalWeight"?e:t==="start"?"centered":"equalWeight";}function De(a){return Array.from(a.querySelectorAll(Q)).filter(e=>e.closest(B)===a);}function He(a){return a.find(t=>!P(t)&&(t.getAttribute(f)==="true"||t.hasAttribute("aria-current")))?.getAttribute(u)??void 0;}function w(a,e){e===null?a.removeAttribute("aria-current"):a.setAttribute("aria-current",e);}class Oe{#t;#o;#c;#u;#e;#n;#a;#l;#s;#i;#r;#d;constructor(e,t){this.#t=e,this.#o="value"in e||"selectedValue"in e,this.#c=t,this.#u=n=>this.#h(n),this.#e=null,this.#n=null,this.#a=0,this.#l=O(()=>D(e)),this.#s=/* @__PURE__ */new Set(),this.#i=/* @__PURE__ */new WeakMap(),this.#r=/* @__PURE__ */new WeakMap(),this.#d=/* @__PURE__ */new WeakMap();}attach(e){const t=this.#e,n=e===null?void 0:Ie(e);t!==e&&(this.#a++,t!==null&&(this.#m(t),t.removeEventListener("click",this.#u)),this.#n?.disconnect(),this.#n=null,this.#e=e,e!==null&&(e.addEventListener("click",this.#u),n!==void 0&&(this.#n=new n(()=>this.sync()),this.#n.observe(e,{attributeFilter:_e,attributes:!0,childList:!0,subtree:!0}))));}update(){this.#o&&(this.#l=D(this.#t));}sync(){const e=this.#e;if(e===null)return;const t=De(e),n=new Set(t);for(const i of Array.from(this.#s))n.has(i)||this.#g(i);!this.#o&&this.#l===void 0&&(this.#l=He(t));for(const i of t){const s=this.#l!==void 0&&i.getAttribute(u)===this.#l,r=s?"true":"false",o=s?i.getAttribute(T)??"page":null;this.#p(i),i.classList.contains(L)!==s&&i.classList.toggle(L,s),this.#s.has(i)&&this.#f(i,o),i.getAttribute(f)!==r&&i.setAttribute(f,r);}this.#c?.(t),this.#n?.takeRecords();}dispose(){this.attach(null);}#p(e){const t=e.getAttribute("aria-current");if(this.#r.has(e)){this.#s.has(e)&&t!==this.#i.get(e)&&(this.#s.delete(e),this.#i.delete(e),this.#r.set(e,t));return;}const n=e.hasAttribute(W)||this.#d.has(e)&&this.#d.get(e)!==t;this.#d.delete(e),this.#r.set(e,n?t:null),n||(this.#s.add(e),this.#i.set(e,t));}#f(e,t){this.#i.set(e,t),e.getAttribute("aria-current")!==t&&w(e,t);}#g(e){const t=e.getAttribute("aria-current");if(t===this.#i.get(e)){const n=this.#r.get(e)??null;w(e,n),this.#d.set(e,n),this.#r.delete(e);}else this.#r.set(e,t);this.#i.delete(e),this.#s.delete(e);}#m(e){for(const t of this.#s){const n=t.getAttribute("aria-current");e.contains(t)&&n===this.#i.get(t)&&w(t,this.#r.get(t)??null);}this.#s.clear(),this.#i=/* @__PURE__ */new WeakMap(),this.#r=/* @__PURE__ */new WeakMap(),this.#d=/* @__PURE__ */new WeakMap();}#h(e){const t=this.#e,n=Te(e.target)?e.target.closest(Q):null,i=this.#a;if(t===null||n===null||n.closest(B)!==t)return;if(P(n)){Y(n)&&e.preventDefault();return;}const s=n.getAttribute(u);s===null||F(e,n)||$(e,t,()=>{this.#a!==i||!t.isConnected||!t.contains(n)||(this.#o||(this.#l=s),this.sync(),G([this.#t.onChange,this.#t.onValueChange,this.#t.onSelectedChange],s,e));},!1);}}class xe extends fe{#t;#o;#c;#u;#e;#n;#a;#l;#s;#i;#r;#d;constructor(e,t){super(e,{styleElementIsFunction:!0}),this.#t=t,this.#o=new Oe(e,n=>{d(t)||super.setStyle(we,n.length);}),this.#c=new Ae({begin:n=>this.#E(n),update:n=>this.#S(n),end:(n,i,s)=>this.#N(n,i,s)}),this.#u=null,this.#e=null,this.#n=!1,this.#a=!1,this.#l=!1,this.#s=null,this.#i=null,this.#r=()=>{},this.#d=()=>{};}applyComponentProps(){const e=super.readProps(["alwaysShowLabel","arrangement","attr:aria-label","expanded","hideOnCollapse","itemIconPlacement","modal","selectedValue","value"]),t=ue(this.#t,e.expanded),n=ce(this.#t,t&&e.modal!==!0,e.itemIconPlacement);e.itemIconPlacementChanged&&super.setAttribute(ee,e.itemIconPlacement),(e.arrangementChanged||e.itemIconPlacementChanged)&&super.setAttribute(ae,he(this.#t,e.arrangement,e.itemIconPlacement)),(e.valueChanged||e.selectedValueChanged)&&this.#o.update(),d(this.#t)&&(e["attr:aria-labelChanged"]&&this.#C(e["attr:aria-label"]),this.#p(t,e.modal===!0,e.hideOnCollapse===!0)),super.setClass(g,n),super.setClass(ie,e.alwaysShowLabel===!1&&!n),this.#o.sync();}#p(e,t,n){const i=super.styleElement,s=this.#l,r=e&&!t,o=e&&t,c=s&&r!==this.#n&&i?.isConnected===!0?i.getBoundingClientRect().width:void 0;this.#l=!0,super.setAttribute(se,e?"true":"false"),super.setAttribute(oe,t?"true":void 0),super.setAttribute(v,n?"true":void 0),this.#n=r,c!==void 0&&this.#f(c),o!==this.#a&&(this.#a=o,o?this.#g(s):this.#m(s));}#f(e){const t=super.styleElement,n=ye(t);if(this.#r(),super.setStyle(C,void 0),super.setClass(_,!1),t===null||n===void 0)return;const i=n.requestAnimationFrame(()=>{const s=t.getBoundingClientRect().width;s!==e&&(super.setStyle(C,`${e}px`),b(t).inlineSize,super.setStyle(C,`${s}px`),super.setClass(_,!0),this.#r=S(t,M,()=>{super.setStyle(C,void 0),super.setClass(_,!1);}));});this.#r=()=>n.cancelAnimationFrame(i);}#g(e){const t=super.styleElement,n=this.#e,i=this.#u;if(t===null||n===null||i===null)return;if(this.#d(),this.#i?.retarget(1),n.classList.remove(R),n.classList.add(g),!n.open){if(!n.isConnected){queueMicrotask(()=>{this.#a&&n.isConnected&&!n.open&&this.#g(!1);});return;}n.append(i),n.showModal();}if(!e||t.hasAttribute(v))return;const s=t.getBoundingClientRect().width;n.style.removeProperty(l);const r=n.getBoundingClientRect().width;n.style.setProperty(l,`${s}px`),b(n).inlineSize,n.style.setProperty(l,`${r}px`),this.#d=S(n,M,()=>{n.style.removeProperty(l);});}#m(e){const t=super.styleElement,n=this.#e;if(this.#d(),t===null||n===null||this.#s!==null)return;if(!n.open||!e){this.#h();return;}if(n.classList.add(R),n.classList.remove(g),t.hasAttribute(v)){this.#d=S(n,[h],()=>this.#h());return;}const i=n.getBoundingClientRect().width;n.style.setProperty(l,`${i}px`),b(n).inlineSize,n.style.setProperty(l,`${t.getBoundingClientRect().width}px`),this.#d=S(n,M,()=>this.#h());}#h(){const e=super.styleElement,t=this.#e,n=this.#u;t!==null&&(t.classList.remove(R,g),t.style.removeProperty(l),t.open&&t.close(),e!==null&&n!==null&&n.parentElement!==e&&e.insertBefore(n,t));}#C(e){e===void 0?this.#e?.removeAttribute("aria-label"):this.#e?.setAttribute("aria-label",e);}#v(e){this.props.onExpandedChange?.(!1,e);}#E(e){const t=super.styleElement,n=this.#e;if(t===null||n===null||!this.#a||!n.open||!t.hasAttribute(v))return null;const i=n.getBoundingClientRect(),s=Number.parseFloat(b(n).getPropertyValue(h));return e.clientX<i.left||e.clientX>=i.right||e.clientY<i.top||e.clientY>=i.bottom?null:(this.#i?.cancel(),this.#i=null,this.#s=Number.isFinite(s)?s:1,n.classList.add(U),this.#S(0),i.width);}#S(e){const t=Math.min(1,Math.max(0,(this.#s??1)-e));return this.#e?.style.setProperty(h,String(t)),t;}#N(e,t,n){const i=this.#e,s=this.#S(e),r=i?.getBoundingClientRect().width??0;if(i===null||r===0){this.#b();return;}Le(1-s,t,Me/r)&&this.#v(n);const o=me(i,h,s,this.#a?1:0,{velocity:-t});this.#i=o,o.finished.then(()=>{this.#i===o&&this.#b();},()=>{});}#b(){const e=this.#e;this.#i?.cancel(),this.#i=null,this.#s=null,e?.style.removeProperty(h),e?.classList.remove(U),this.#a||this.#h();}#A(e){this.#e=e,this.#c.attach(e),e.addEventListener("cancel",t=>{t.preventDefault(),this.#v(t);}),e.addEventListener("click",t=>{const n=e.getBoundingClientRect();t.target===e&&(t.clientX<n.left||t.clientX>=n.right||t.clientY<n.top||t.clientY>=n.bottom)&&this.#v(t);}),e.addEventListener("close",t=>{!this.#a||e.open||(this.#a=!1,this.#h(),this.#v(t));});}onStyleElementChanged(e){super.onStyleElementChanged(e),this.#o.attach(e);}onControllerCleanup(){this.#r(),this.#d(),this.#i?.cancel(),this.#c.attach(null),this.#a=!1,this.#h(),this.#o.dispose(),super.onControllerCleanup();}render(e){return d(this.#t)?this.#T(e):this.#L(e);}#L(e){return<nav class={`${H[this.#t]} ${te}`}data-cw-navigation-kind={this.#t}role="navigation">{e}</nav>;}#T(e){return<nav class={`${H[this.#t]} ${ne}`}data-cw-navigation-kind={this.#t}role="navigation">
|
|
2
|
+
<div class={re}ref={t=>{this.#u=t;}}>
|
|
3
3
|
<div class="cw-NavigationRail-header">{this.props.header}</div>
|
|
4
4
|
{e}
|
|
5
5
|
</div>
|
|
6
|
-
<dialog class={`${
|
|
7
|
-
</nav
|
|
8
|
-
<div class={
|
|
6
|
+
<dialog class={`${le} cw-elevationShadow`}ref={t=>this.#A(t)}/>
|
|
7
|
+
</nav>;}}function Pe(a,e,t){const n=d(a),i=ue(a,t.expanded),s=ce(a,i&&t.modal!==!0,t.itemIconPlacement),r={[ae]:he(a,t.arrangement,t.itemIconPlacement),[se]:n?String(i):void 0,[v]:n&&t.hideOnCollapse===!0?"true":void 0,[ee]:t.itemIconPlacement,[oe]:n&&t.modal===!0?"true":void 0,[j]:a,role:"navigation"},o={[H[a]]:!0,[te]:!n,[ne]:n,[ie]:t.alwaysShowLabel===!1&&!s,[g]:s};return n?<nav{...e}{...r}classList={{...e.classList,...o}}>
|
|
8
|
+
<div class={re}>
|
|
9
9
|
<div class="cw-NavigationRail-header">{t.header}</div>
|
|
10
10
|
{e.children}
|
|
11
11
|
</div>
|
|
12
|
-
<dialog aria-label={e["aria-label"]}class={`${
|
|
13
|
-
</nav>:<nav{...e}{...r}classList={{...e.classList,...o}}>{e.children}</nav
|
|
12
|
+
<dialog aria-label={e["aria-label"]}class={`${le} cw-elevationShadow`}/>
|
|
13
|
+
</nav>:<nav{...e}{...r}classList={{...e.classList,...o}}>{e.children}</nav>;}function I(a){const e=(n,i)=>Pe(a,n,i),t=pe(x?()=>e:q,()=>class extends xe{constructor(n){super(n,a);}});return n=>Be(n,!0,()=>K(t,z(n,void 0,["header"])));}function Be(a,e,t){return K(de.Provider,{value:x&&e?{controlled:"value"in a||"selectedValue"in a,value:O(()=>D(a))}:void 0,get children(){return t();}});}const Qe=/* @__PURE__ */I("NavigationBar"),We=/* @__PURE__ */I("ShortNavigationBar"),Ze=We,et=/* @__PURE__ */I("NavigationRail"),tt=/* @__PURE__ */I("WideNavigationRail");class ke extends Ne{#t;#o;#c;#u;#e;#n;constructor(e){super(e,{baseInteractionCssClassName:p,enabledInteractionStates:V,styleElementIsFunction:!1}),this.#t="attr:aria-current"in e,this.#o="selected"in e,this.#c=t=>this.#s(t),this.#u=t=>Re(t,super.functionElement),this.#e=O(()=>(this.#o?e.selected:e.defaultSelected)===!0),this.#n=!1;}#a(){const e=super.functionElement;return e!==null&&e.closest(B)!==null;}#l(){this.#a()||(super.setClass(L,this.#e),super.setAttribute(f,this.#e?"true":"false"),this.#t||super.setAttribute("aria-current",this.#e?this.props.current??"page":void 0));}#s(e){const t=super.functionElement;if(t!==null){if(this.#n||P(t)){Y(t)&&e.preventDefault();return;}this.#a()||F(e,t)||$(e,t,()=>{super.functionElement!==t||!t.isConnected||this.#n||(this.#o||(this.#e=!0),G([this.props.onChange,this.props.onSelect,this.props.onSelectedChange],!0,e),this.#l());},!1);}}applyComponentProps(){const e=super.readProps(["attr:id","attr:tabindex","current","disabled","href","id","selected","tabIndex","value"]),t=e.href!==void 0;e.disabledChanged&&(this.#n=e.disabled===!0,super.setClass(Z,this.#n),super.setEnabledInteractionStates(this.#n?0:V),super.setAttribute("aria-disabled",this.#n?"true":void 0)),super.setAttribute("disabled",!t&&this.#n),super.setAttribute("href",e.href),super.setAttribute("id",e.id??e["attr:id"]),super.setAttribute("tabindex",this.#n?-1:e.tabIndex??e["attr:tabindex"]),e.valueChanged&&super.setAttribute(u,e.value),e.currentChanged&&super.setAttribute(T,e.current),this.#t&&super.setAttribute(W,"true"),e.selectedChanged&&this.#o&&(this.#e=e.selected===!0),this.#l();}onFunctionElementChanged(e){const t=super.functionElement;super.onFunctionElementChanged(e),t?.removeEventListener("click",this.#c),t?.removeEventListener("keydown",this.#u),e?.addEventListener("click",this.#c),e?.addEventListener("keydown",this.#u);}render(e,t){const n=J(()=>this.props.href!==void 0),i=()=>this.props.icon===void 0?void 0:"true";return J(()=>n()?<a class={p}ref={t}>
|
|
14
14
|
<span aria-hidden={i()}class={E}>{this.props.icon}</span>
|
|
15
15
|
<span class={N}>{this.props.label??e}</span>
|
|
16
16
|
<span class={A}>{this.props.badge}</span>
|
|
17
|
-
</a>:<button class={
|
|
17
|
+
</a>:<button class={p}ref={t}type="button">
|
|
18
18
|
<span aria-hidden={i()}class={E}>{this.props.icon}</span>
|
|
19
19
|
<span class={N}>{this.props.label??e}</span>
|
|
20
20
|
<span class={A}>{this.props.badge}</span>
|
|
21
|
-
</button>)}}function
|
|
22
|
-
<span aria-hidden={
|
|
21
|
+
</button>);}}function Xe(a,e){const t=ve(de),n=a,i=e.disabled===!0,s="aria-current"in a;let o=("selected"in e?e.selected:e.defaultSelected)===!0;t!==void 0&&(!t.controlled&&t.value===void 0&&o&&!i&&e.value!==void 0&&(t.value=e.value),o=t.value!==void 0&&e.value===t.value);const y=o?e.current??"page":void 0,c={"aria-disabled":i?"true":void 0,[W]:s?"true":void 0,[T]:e.current,[f]:o?"true":"false",[u]:e.value},k={[Z]:i,[p]:!0,[L]:o},X=e.icon===void 0?void 0:"true";return e.href===void 0?<button{...a}{...c}aria-current={s?n["aria-current"]:y}classList={{...a.classList,...k}}disabled={i}id={e.id??n.id}tabindex={i?-1:e.tabIndex??n.tabindex}type="button">
|
|
22
|
+
<span aria-hidden={X}class={E}>{e.icon}</span>
|
|
23
23
|
<span class={N}>{e.label??a.children}</span>
|
|
24
24
|
<span class={A}>{e.badge}</span>
|
|
25
25
|
</button>:<a{...a}{...c}aria-current={s?n["aria-current"]:y}classList={{...a.classList,...k}}href={e.href}id={e.id??n.id}tabindex={i?-1:e.tabIndex??n.tabindex}>
|
|
26
|
-
<span aria-hidden={
|
|
26
|
+
<span aria-hidden={X}class={E}>{e.icon}</span>
|
|
27
27
|
<span class={N}>{e.label??a.children}</span>
|
|
28
28
|
<span class={A}>{e.badge}</span>
|
|
29
|
-
</a
|
|
29
|
+
</a>;}const Je=/* @__PURE__ */Ee(x?()=>Xe:q,()=>ke),m=a=>Je(z(a,void 0,["icon","label","badge"])),nt=m,it=m,at=m,st=m,ot=m;export{Ze as FlexibleNavigationBar,j as NAVIGATION_KIND_ATTRIBUTE,Qe as NavigationBar,it as NavigationBarItem,xe as NavigationController,nt as NavigationDrawerItem,m as NavigationItem,ke as NavigationItemController,et as NavigationRail,st as NavigationRailItem,Oe as NavigationSelection,We as ShortNavigationBar,at as ShortNavigationBarItem,tt as WideNavigationRail,ot as WideNavigationRailItem,Be as provideNavigationSelection};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{runWithOwner as I,untrack as u}from"solid-js";import{insert as w}from"solid-js/web";import{defineDomComponent as O}from"..";import{DomController as x}from"../dom/client";import{VelocityTracker as k,applySpringMotion as _}from"../motion";import{computedStyleOf as H,dedupeCallbacks as z,deferAfterDelegatedCancellation as B,isElementNode as d,mutationObserverOf as T,ownerWindow as p}from"./base";import"./navigation.css";const v=2,V=24,S=100,g=10,y=1e-6,W=150,U=.01,X=40,M=.015*9.80665*39.37*160*.84,J=Math.log(.78)/(Math.log(.78)-Math.log(.9)),$=.35;function G(n){return n===0?0:Math.sign(n)*M*($*Math.abs(n)/M)**J}function K(n){return p(n)?.ResizeObserver??(typeof ResizeObserver>"u"?void 0:ResizeObserver)}function h(n,t){return n!==void 0&&Number.isFinite(n)?n:t}function C(n,t){return n!==void 0&&Number.isFinite(n)&&n>0?n:t}function c(n){return Math.min(1,Math.max(0,n))}function E(n){return typeof n=="object"&&n!==null&&(n.nodeType===9||n.nodeType===11)}function P(n,t){const e=n.getRootNode();if(!E(e))return null;const i=e.getElementById(t);return d(i)?i:null}const f=new WeakMap;function R(n,t){let e=f.get(n);if(e===void 0){const i=T(n);if(i===void 0)return()=>{};const s=new Set,o=new i(()=>{for(const r of Array.from(s))r()});e={observer:o,listeners:s},f.set(n,e),o.observe(n,{attributeFilter:["id"],attributes:!0,childList:!0,subtree:!0})}return e.listeners.add(t),()=>{const i=f.get(n);i!==void 0&&(i.listeners.delete(t),i.listeners.size===0&&(i.observer.disconnect(),f.delete(n)))}}function b(n,t){return Math.max(0,t==="horizontal"?n.scrollWidth-n.clientWidth:n.scrollHeight-n.clientHeight)}function L(n,t){return t==="horizontal"?n.clientWidth:n.clientHeight}class Y extends x{#h;#L;#T;#P;#E;#g;#M;#R;#b;#w;#e;#i;#s;#r;#n;#a;#t;#o;#d;#u;#m;#l;#c;#f;#p;#v;#S;#y;#I;#C;#D;#O;constructor(t){super(t,{styleElementIsFunction:!0}),this.#h="value"in t,this.#L="attr:aria-controls"in t,this.#T="attr:aria-label"in t,this.#P=e=>this.#Y(e),this.#E=e=>this.#j(e),this.#g=e=>this.#q(e),this.#M=e=>this.#Z(e),this.#R=e=>this.#K(e),this.#b=e=>this.#Q(e),this.#w=()=>this.#A(),this.#i=u(()=>h(t.min,0)),this.#s=u(()=>Math.max(this.#i,h(t.max,S))),this.#e=u(()=>this.#k(h(this.#h?t.value:t.defaultValue,0))),this.#r=u(()=>C(t.step,g)),this.#n=u(()=>t.orientation??"vertical"),this.#a=!1,this.#t=null,this.#o=null,this.#d=()=>{},this.#u=null,this.#m=null,this.#l=null,this.#c=0,this.#f=!1,this.#p=!1,this.#v=0,this.#S=0,this.#y=0,this.#I=[-1,-1,-1],this.#C=null,this.#D=null,this.#O=!1}#k(t){return Math.min(this.#s,Math.max(this.#i,t))}#_(t){return this.#s<=this.#i?0:c((t-this.#i)/(this.#s-this.#i))}#z(t){const e=b(t,this.#n),i=this.#n==="vertical"?t.scrollTop:this.#f?-t.scrollLeft:t.scrollLeft;return Math.min(e,Math.max(0,i))}#$(t,e){this.#n==="vertical"?t.scrollTo({behavior:"instant",top:e}):t.scrollTo({behavior:"instant",left:this.#f?-e:e})}#H(){const t=this.#t;if(t===null)return;const e=b(t,this.#n),i=this.#_(this.#e)*e;e>0&&Math.abs(this.#z(t)-i)>.01&&this.#$(t,i)}#x(t=!0){const e=this.functionElement;if(this.#O||!d(e))return;const i=this.#t,s=this.#n==="horizontal",o=s?e.clientWidth:e.clientHeight,r=i===null?0:L(i,this.#n),l=i===null?0:s?i.scrollWidth:i.scrollHeight,[a,N,A]=this.#I;if(!t&&this.#p&&o===a&&r===N&&l===A){this.#B();return}this.#f=s&&H(i??e).direction==="rtl";const m=Math.max(0,o-v*2),F=l>0?c(r/l):1;this.#v=Math.min(m,Math.max(m*F,Math.min(V,m))),this.#y=Math.max(0,m-this.#v),this.#I=[o,r,l],this.#p=!0,super.setStyle("--cw-Scrollbar-thumb-size",`${this.#v}px`),this.#S=-1,this.#B()}#B(){const t=this.#_(this.#e),e=this.#y*(this.#f?1-t:t);Math.abs(e-this.#S)<=.01||(this.#S=e,super.setStyle("--cw-Scrollbar-thumb-offset",`${e}px`))}#G(){this.#C!==null&&(this.#D?.cancelAnimationFrame(this.#C),this.#C=null,this.#D=null)}#V(){if(this.#O||this.#C!==null)return;const t=p(this.functionElement);if(t===void 0){this.#x();return}this.#D=t,this.#C=t.requestAnimationFrame(()=>{this.#C=null,this.#D=null,this.#x()})}#N(t,e,i){const s=this.#k(t);Math.abs(s-this.#e)<y||((!this.#h||i)&&(this.#e=s,super.setAttribute("aria-valuenow",s),i||this.#H(),this.#x(!1)),z([this.props.onValueChange,this.props.onChange],s,e))}#K(t){if(this.#a)return;this.#t===null&&this.#A();const e=this.#n==="horizontal",i=this.#f?"ArrowLeft":"ArrowRight",s=this.#f?"ArrowRight":"ArrowLeft",o=t.key===(e?i:"ArrowDown")?this.#e+this.#r:t.key===(e?s:"ArrowUp")?this.#e-this.#r:t.key==="PageDown"?this.#e+this.#W():t.key==="PageUp"?this.#e-this.#W():t.key==="Home"?this.#i:t.key==="End"?this.#s:void 0;if(o===void 0)return;const r=this.functionElement;B(t,r,()=>{!this.#O&&!this.#a&&this.functionElement===r&&this.#N(o,t,!1)})}#W(){const t=this.#t,e=this.#s-this.#i;if(t!==null){const i=b(t,this.#n),s=L(t,this.#n);if(i>0&&s>0)return s/i*e}return e/10}#U(t){const e=this.functionElement;if(!d(e))return 0;const i=this.#n==="horizontal",s=e.getBoundingClientRect(),o=i?t.clientX-s.left:t.clientY-s.top,r=(i?e.clientWidth:e.clientHeight)-v*2;return Math.min(Math.max(0,o-v),Math.max(0,r))}#X(t){const e=this.#y>0?Math.min(1,Math.max(0,t/this.#y)):0;return this.#i+(this.#f?1-e:e)*(this.#s-this.#i)}#Y(t){const e=this.functionElement;if(this.#a||!t.isPrimary||this.#l!==null||t.button!==0&&!(t.pointerType!=="mouse"&&t.button===-1)||!d(e))return;this.#t===null&&this.#A(),this.#p||this.#x();const i=this.#U(t),s=i>=this.#S&&i<=this.#S+this.#v;this.#c=s?i-this.#S:this.#v/2,!s&&this.#y>0&&this.#N(this.#X(i-this.#c),t,!1);try{e.setPointerCapture(t.pointerId)}catch{this.#c=0;return}this.#l=t.pointerId,t.preventDefault()}#j(t){this.#l!==t.pointerId||this.#a||this.#y<=0||(this.#N(this.#X(this.#U(t)-this.#c),t,!1),t.preventDefault())}#F(){const t=this.functionElement;if(this.#l!==null&&d(t))try{t.hasPointerCapture(this.#l)&&t.releasePointerCapture(this.#l)}catch{}this.#l=null,this.#c=0}#q(t){this.#l===t.pointerId&&this.#F()}#Z(t){this.#l===t.pointerId&&(this.#l=null,this.#c=0)}#Q(t){const e=this.#t;if(e===null)return;const i=b(e,this.#n),s=this.#z(e);if(i===0){this.#N(this.#i,t,!0);return}Math.abs(s-this.#_(this.#e)*i)<1||this.#N(this.#i+s/i*(this.#s-this.#i),t,!0)}#J(){this.#G(),this.#F(),this.#t?.removeEventListener("scroll",this.#b),this.#u?.disconnect(),this.#u=null,this.#m?.disconnect(),this.#m=null,this.#t=null,this.#p=!1}#A(){const t=this.functionElement;if(this.#O||!d(t))return;const e=t.getRootNode();e!==this.#o&&(this.#d(),this.#d=()=>{},this.#o=E(e)?e:null,this.#o!==null&&(this.#d=R(this.#o,this.#w)));const i=P(t,this.props.controls);if(i!==this.#t){if(this.#J(),this.#t=i,i!==null){i.addEventListener("scroll",this.#b,{passive:!0});const s=K(i);s!==void 0&&(this.#u=new s(()=>this.#V()),this.#u.observe(t),this.#u.observe(i));const o=T(i);o!==void 0&&(this.#m=new o(()=>this.#V()),this.#m.observe(i,{attributeFilter:["class","dir","style"],attributes:!0,characterData:!0,childList:!0,subtree:!0}))}this.#x(),this.#H()}}applyComponentProps(){const t=super.readProps(["controls","defaultValue","disabled","label","max","min","orientation","step","value"]);(t.minChanged||t.maxChanged)&&(this.#i=h(t.min,0),this.#s=Math.max(this.#i,h(t.max,S)),super.setAttribute("aria-valuemin",this.#i),super.setAttribute("aria-valuemax",this.#s)),t.stepChanged&&(this.#r=C(t.step,g)),t.orientationChanged&&(this.#F(),this.#n=t.orientation??"vertical",this.#p=!1,super.setClass("orientation",`_cw-Scrollbar-${this.#n}`),super.setAttribute("aria-orientation",this.#n)),t.disabledChanged&&(this.#a=t.disabled===!0,this.#a&&this.#F(),super.setClass("cw-Scrollbar-disabled",this.#a),super.setAttribute("aria-disabled",this.#a?"true":void 0),super.setAttribute("tabindex",this.#a?-1:0)),t.controlsChanged&&!this.#L&&super.setAttribute("aria-controls",t.controls),t.labelChanged&&!this.#T&&super.setAttribute("aria-label",t.label??"Scroll position"),t.valueChanged&&this.#h&&(this.#e=h(t.value,this.#i)),this.#e=this.#k(this.#e),super.setAttribute("aria-valuenow",this.#e),t.controlsChanged&&this.#A(),this.#H(),this.#x(t.orientationChanged||t.minChanged||t.maxChanged)}onStyleElementChanged(t){super.onStyleElementChanged(t),d(t)&&(t.addEventListener("keydown",this.#R),t.addEventListener("lostpointercapture",this.#M),t.addEventListener("pointercancel",this.#g),t.addEventListener("pointerdown",this.#P),t.addEventListener("pointermove",this.#E),t.addEventListener("pointerup",this.#g),queueMicrotask(()=>this.#A()))}onControllerCleanup(){this.#O=!0,this.#J(),this.#d(),this.#d=()=>{},this.#o=null,super.onControllerCleanup()}render(t){const e=<div class="cw-Scrollbar"role="scrollbar"/>;return w(e,t),e}}function j(n,t){const e=t.orientation??"vertical",i=h(t.min,0),s=Math.max(i,h(t.max,S)),o=Math.min(s,Math.max(i,h("value"in t?t.value:t.defaultValue,0))),r=t.disabled===!0;return<div aria-controls={t.controls}aria-label={t.label??"Scroll position"}{...n}aria-disabled={r?"true":void 0}aria-orientation={e}aria-valuemax={s}aria-valuemin={i}aria-valuenow={o}classList={{...n.classList,"cw-Scrollbar":!0,"cw-Scrollbar-disabled":r,[`_cw-Scrollbar-${e}`]:!0}}role="scrollbar"tabIndex={r?-1:0}/>}const D=O(()=>j,()=>Y);class q extends x{constructor(t){super(t,{styleElementIsFunction:!0})}applyComponentProps(){const[t,e]=super.readProp("orientation");e&&super.setClass("orientation",`_cw-ScrollField-${t??"vertical"}`)}render(t){const e=<div class="cw-ScrollField"/>;return w(e,t),e}}function Z(n,t){return<div{...n}classList={{...n.classList,"cw-ScrollField":!0,[`_cw-ScrollField-${t.orientation??"vertical"}`]:!0}}/>}const ot=O(()=>Z,()=>q),lt=D,at=n=><D{...n}orientation={n.orientation??"horizontal"}/>;class ht{#h;#L;#T;#P;#E;#g;#M;#R;#b;#w;#e;#i;#s;#r;#n;#a;#t;#o;#d;#u;#m;constructor(t,e){this.#h=t,this.#L=e.property,this.#T=e.spring,this.#P=e.onOverlapChange??(()=>{}),this.#E=e.onFractionChange??(()=>{}),this.#g=i=>this.#S(i.timeStamp),this.#M=i=>this.#y(i?.timeStamp),this.#R=()=>this.#c(),this.#b=void 0,this.#w=void 0,this.#e=null,this.#i=()=>{},this.#s=0,this.#r=0,this.#n=0,this.#a=!1,this.#t=void 0,this.#o=void 0,this.#d=new k,this.#u=-1/0,this.#m=!1}get fraction(){return this.#t?.playState==="running"?this.#t.value:this.#r}setRange(t){this.#s=Math.max(0,t),this.#e===null&&this.#b!==void 0&&!this.#m&&this.#c()}setFraction(t){this.#t?.cancel(),this.#t=void 0,this.#l(c(t))}animateFraction(t,e=0){const i=c(t),s=this.#t;if(s?.playState==="running"){s.retarget(i),this.#r=i,this.#E(i);return}if(Math.abs(i-this.#r)<y){this.#l(i);return}const o=this.#r,r=I(null,()=>_(this.#h,this.#L,o,i,{...this.#T,velocity:e}));r!==void 0&&(this.#t=r,this.#r=i,this.#E(i),r.finished.then(()=>{this.#t===r&&(this.#t=void 0)},()=>{}))}bind(t,e){this.#m||(this.#b=t,this.#w=e,this.#c(),t!==void 0&&!this.#h.isConnected&&queueMicrotask(()=>{this.#m||this.#c()}))}dispose(){this.#m=!0,this.#f(),this.#i(),this.#i=()=>{},this.#t?.cancel(),this.#t=void 0}#l(t){this.#r=t,this.#h.style.setProperty(this.#L,`${t}`),this.#E(t)}#c(){const t=this.#b,e=this.#w,i=p(this.#h),s=t===void 0||e===void 0?null:P(this.#h,e),o=t===void 0||i===void 0?null:e===void 0?i:s;if(this.#i(),this.#i=()=>{},t!==void 0&&e!==void 0){const r=this.#h.getRootNode();E(r)&&(this.#i=R(r,this.#R))}o!==this.#e&&(this.#f(),this.#e=o,o!==null&&(o.addEventListener("scroll",this.#g,{passive:!0}),o.addEventListener("scrollend",this.#M),this.#n=this.#p(o),this.#v(this.#n>0)))}#f(){this.#e?.removeEventListener("scroll",this.#g),this.#e?.removeEventListener("scrollend",this.#M),this.#e=null,this.#o!==void 0&&clearTimeout(this.#o),this.#o=void 0,this.#d.resetTracking(),this.#u=-1/0}#p(t){return Math.max(0,"scrollY"in t?t.scrollY:t.scrollTop)}#v(t){t!==this.#a&&(this.#a=t,this.#P(t))}#S(t){const e=this.#e,i=this.#b;if(e===null||i===void 0)return;const s=this.#p(e),o=this.#n,r=s-o;if(this.#n=s,this.#v(s>0),i==="pinned"||this.#s<=0||Math.abs(r)<y)return;const l=this.#t;l?.playState==="running"&&(l.cancel(),this.#r=l.value),this.#t=void 0;let a=-c(this.#r)*this.#s;(r>0||i!=="exitUntilCollapsed")&&(a=Math.min(0,Math.max(-this.#s,a-r))),r<0&&s<-a&&(a=s<=0?0:Math.max(a,a*s/o)),this.#l(-a/this.#s),this.#d.addDataPoint(t,-a),this.#u=t,"onscrollend"in e||(this.#o!==void 0&&clearTimeout(this.#o),this.#o=setTimeout(this.#M,W))}#y(t){const e=this.#b,i=this.#r,s=this.#s;if(this.#o=void 0,e===void 0||e==="pinned"||this.#e===null||this.#t?.playState==="running"||s<=0||i<U||i>=1)return;const r=(t??p(this.#h)?.performance.now()??this.#u)-this.#u>X?0:this.#d.calculateVelocity(),l=i+G(r)/s;this.#d.resetTracking(),this.animateFraction(l<.5?0:1,r/s)}}export{ht as BarScrollState,at as HorizontalScrollbar,ot as ScrollField,q as ScrollFieldController,D as Scrollbar,Y as ScrollbarController,lt as VerticalScrollbar,K as resizeObserverOf};
|
|
1
|
+
import{runWithOwner as I,untrack as u}from"solid-js";import{insert as w}from"solid-js/web";import{defineDomComponent as O}from"..";import{DomController as x}from"../dom/client";import{VelocityTracker as k,applySpringMotion as _}from"../motion";import{computedStyleOf as H,dedupeCallbacks as z,deferAfterDelegatedCancellation as B,isElementNode as d,mutationObserverOf as T,ownerWindow as p}from"./base";import"./navigation.css";const v=2,V=24,S=100,g=10,y=1e-6,W=150,U=0.01,X=40,M=0.015*9.80665*39.37*160*0.84,J=Math.log(0.78)/(Math.log(0.78)-Math.log(0.9)),$=0.35;function G(n){return n===0?0:Math.sign(n)*M*($*Math.abs(n)/M)**J;}function K(n){return p(n)?.ResizeObserver??(typeof ResizeObserver>"u"?void 0:ResizeObserver);}function h(n,t){return n!==void 0&&Number.isFinite(n)?n:t;}function C(n,t){return n!==void 0&&Number.isFinite(n)&&n>0?n:t;}function c(n){return Math.min(1,Math.max(0,n));}function E(n){return typeof n=="object"&&n!==null&&(n.nodeType===9||n.nodeType===11);}function P(n,t){const e=n.getRootNode();if(!E(e))return null;const i=e.getElementById(t);return d(i)?i:null;}const f=/* @__PURE__ */new WeakMap();function R(n,t){let e=f.get(n);if(e===void 0){const i=T(n);if(i===void 0)return()=>{};const s=/* @__PURE__ */new Set(),o=new i(()=>{for(const r of Array.from(s))r();});e={observer:o,listeners:s},f.set(n,e),o.observe(n,{attributeFilter:["id"],attributes:!0,childList:!0,subtree:!0});}return e.listeners.add(t),()=>{const i=f.get(n);i!==void 0&&(i.listeners.delete(t),i.listeners.size===0&&(i.observer.disconnect(),f.delete(n)));};}function b(n,t){return Math.max(0,t==="horizontal"?n.scrollWidth-n.clientWidth:n.scrollHeight-n.clientHeight);}function L(n,t){return t==="horizontal"?n.clientWidth:n.clientHeight;}class Y extends x{#h;#L;#T;#P;#E;#g;#M;#R;#b;#w;#e;#i;#s;#r;#n;#a;#t;#o;#d;#u;#m;#l;#c;#f;#p;#v;#S;#y;#I;#C;#D;#O;constructor(t){super(t,{styleElementIsFunction:!0}),this.#h="value"in t,this.#L="attr:aria-controls"in t,this.#T="attr:aria-label"in t,this.#P=e=>this.#Y(e),this.#E=e=>this.#j(e),this.#g=e=>this.#q(e),this.#M=e=>this.#Z(e),this.#R=e=>this.#K(e),this.#b=e=>this.#Q(e),this.#w=()=>this.#A(),this.#i=u(()=>h(t.min,0)),this.#s=u(()=>Math.max(this.#i,h(t.max,S))),this.#e=u(()=>this.#k(h(this.#h?t.value:t.defaultValue,0))),this.#r=u(()=>C(t.step,g)),this.#n=u(()=>t.orientation??"vertical"),this.#a=!1,this.#t=null,this.#o=null,this.#d=()=>{},this.#u=null,this.#m=null,this.#l=null,this.#c=0,this.#f=!1,this.#p=!1,this.#v=0,this.#S=0,this.#y=0,this.#I=[-1,-1,-1],this.#C=null,this.#D=null,this.#O=!1;}#k(t){return Math.min(this.#s,Math.max(this.#i,t));}#_(t){return this.#s<=this.#i?0:c((t-this.#i)/(this.#s-this.#i));}#z(t){const e=b(t,this.#n),i=this.#n==="vertical"?t.scrollTop:this.#f?-t.scrollLeft:t.scrollLeft;return Math.min(e,Math.max(0,i));}#$(t,e){this.#n==="vertical"?t.scrollTo({behavior:"instant",top:e}):t.scrollTo({behavior:"instant",left:this.#f?-e:e});}#H(){const t=this.#t;if(t===null)return;const e=b(t,this.#n),i=this.#_(this.#e)*e;e>0&&Math.abs(this.#z(t)-i)>0.01&&this.#$(t,i);}#x(t=!0){const e=this.functionElement;if(this.#O||!d(e))return;const i=this.#t,s=this.#n==="horizontal",o=s?e.clientWidth:e.clientHeight,r=i===null?0:L(i,this.#n),l=i===null?0:s?i.scrollWidth:i.scrollHeight,[a,N,A]=this.#I;if(!t&&this.#p&&o===a&&r===N&&l===A){this.#B();return;}this.#f=s&&H(i??e).direction==="rtl";const m=Math.max(0,o-v*2),F=l>0?c(r/l):1;this.#v=Math.min(m,Math.max(m*F,Math.min(V,m))),this.#y=Math.max(0,m-this.#v),this.#I=[o,r,l],this.#p=!0,super.setStyle("--cw-Scrollbar-thumb-size",`${this.#v}px`),this.#S=-1,this.#B();}#B(){const t=this.#_(this.#e),e=this.#y*(this.#f?1-t:t);Math.abs(e-this.#S)<=0.01||(this.#S=e,super.setStyle("--cw-Scrollbar-thumb-offset",`${e}px`));}#G(){this.#C!==null&&(this.#D?.cancelAnimationFrame(this.#C),this.#C=null,this.#D=null);}#V(){if(this.#O||this.#C!==null)return;const t=p(this.functionElement);if(t===void 0){this.#x();return;}this.#D=t,this.#C=t.requestAnimationFrame(()=>{this.#C=null,this.#D=null,this.#x();});}#N(t,e,i){const s=this.#k(t);Math.abs(s-this.#e)<y||((!this.#h||i)&&(this.#e=s,super.setAttribute("aria-valuenow",s),i||this.#H(),this.#x(!1)),z([this.props.onValueChange,this.props.onChange],s,e));}#K(t){if(this.#a)return;this.#t===null&&this.#A();const e=this.#n==="horizontal",i=this.#f?"ArrowLeft":"ArrowRight",s=this.#f?"ArrowRight":"ArrowLeft",o=t.key===(e?i:"ArrowDown")?this.#e+this.#r:t.key===(e?s:"ArrowUp")?this.#e-this.#r:t.key==="PageDown"?this.#e+this.#W():t.key==="PageUp"?this.#e-this.#W():t.key==="Home"?this.#i:t.key==="End"?this.#s:void 0;if(o===void 0)return;const r=this.functionElement;B(t,r,()=>{!this.#O&&!this.#a&&this.functionElement===r&&this.#N(o,t,!1);});}#W(){const t=this.#t,e=this.#s-this.#i;if(t!==null){const i=b(t,this.#n),s=L(t,this.#n);if(i>0&&s>0)return s/i*e;}return e/10;}#U(t){const e=this.functionElement;if(!d(e))return 0;const i=this.#n==="horizontal",s=e.getBoundingClientRect(),o=i?t.clientX-s.left:t.clientY-s.top,r=(i?e.clientWidth:e.clientHeight)-v*2;return Math.min(Math.max(0,o-v),Math.max(0,r));}#X(t){const e=this.#y>0?Math.min(1,Math.max(0,t/this.#y)):0;return this.#i+(this.#f?1-e:e)*(this.#s-this.#i);}#Y(t){const e=this.functionElement;if(this.#a||!t.isPrimary||this.#l!==null||t.button!==0&&!(t.pointerType!=="mouse"&&t.button===-1)||!d(e))return;this.#t===null&&this.#A(),this.#p||this.#x();const i=this.#U(t),s=i>=this.#S&&i<=this.#S+this.#v;this.#c=s?i-this.#S:this.#v/2,!s&&this.#y>0&&this.#N(this.#X(i-this.#c),t,!1);try{e.setPointerCapture(t.pointerId);}catch{this.#c=0;return;}this.#l=t.pointerId,t.preventDefault();}#j(t){this.#l!==t.pointerId||this.#a||this.#y<=0||(this.#N(this.#X(this.#U(t)-this.#c),t,!1),t.preventDefault());}#F(){const t=this.functionElement;if(this.#l!==null&&d(t))try{t.hasPointerCapture(this.#l)&&t.releasePointerCapture(this.#l);}catch{}this.#l=null,this.#c=0;}#q(t){this.#l===t.pointerId&&this.#F();}#Z(t){this.#l===t.pointerId&&(this.#l=null,this.#c=0);}#Q(t){const e=this.#t;if(e===null)return;const i=b(e,this.#n),s=this.#z(e);if(i===0){this.#N(this.#i,t,!0);return;}Math.abs(s-this.#_(this.#e)*i)<1||this.#N(this.#i+s/i*(this.#s-this.#i),t,!0);}#J(){this.#G(),this.#F(),this.#t?.removeEventListener("scroll",this.#b),this.#u?.disconnect(),this.#u=null,this.#m?.disconnect(),this.#m=null,this.#t=null,this.#p=!1;}#A(){const t=this.functionElement;if(this.#O||!d(t))return;const e=t.getRootNode();e!==this.#o&&(this.#d(),this.#d=()=>{},this.#o=E(e)?e:null,this.#o!==null&&(this.#d=R(this.#o,this.#w)));const i=P(t,this.props.controls);if(i!==this.#t){if(this.#J(),this.#t=i,i!==null){i.addEventListener("scroll",this.#b,{passive:!0});const s=K(i);s!==void 0&&(this.#u=new s(()=>this.#V()),this.#u.observe(t),this.#u.observe(i));const o=T(i);o!==void 0&&(this.#m=new o(()=>this.#V()),this.#m.observe(i,{attributeFilter:["class","dir","style"],attributes:!0,characterData:!0,childList:!0,subtree:!0}));}this.#x(),this.#H();}}applyComponentProps(){const t=super.readProps(["controls","defaultValue","disabled","label","max","min","orientation","step","value"]);(t.minChanged||t.maxChanged)&&(this.#i=h(t.min,0),this.#s=Math.max(this.#i,h(t.max,S)),super.setAttribute("aria-valuemin",this.#i),super.setAttribute("aria-valuemax",this.#s)),t.stepChanged&&(this.#r=C(t.step,g)),t.orientationChanged&&(this.#F(),this.#n=t.orientation??"vertical",this.#p=!1,super.setClass("orientation",`_cw-Scrollbar-${this.#n}`),super.setAttribute("aria-orientation",this.#n)),t.disabledChanged&&(this.#a=t.disabled===!0,this.#a&&this.#F(),super.setClass("cw-Scrollbar-disabled",this.#a),super.setAttribute("aria-disabled",this.#a?"true":void 0),super.setAttribute("tabindex",this.#a?-1:0)),t.controlsChanged&&!this.#L&&super.setAttribute("aria-controls",t.controls),t.labelChanged&&!this.#T&&super.setAttribute("aria-label",t.label??"Scroll position"),t.valueChanged&&this.#h&&(this.#e=h(t.value,this.#i)),this.#e=this.#k(this.#e),super.setAttribute("aria-valuenow",this.#e),t.controlsChanged&&this.#A(),this.#H(),this.#x(t.orientationChanged||t.minChanged||t.maxChanged);}onStyleElementChanged(t){super.onStyleElementChanged(t),d(t)&&(t.addEventListener("keydown",this.#R),t.addEventListener("lostpointercapture",this.#M),t.addEventListener("pointercancel",this.#g),t.addEventListener("pointerdown",this.#P),t.addEventListener("pointermove",this.#E),t.addEventListener("pointerup",this.#g),queueMicrotask(()=>this.#A()));}onControllerCleanup(){this.#O=!0,this.#J(),this.#d(),this.#d=()=>{},this.#o=null,super.onControllerCleanup();}render(t){const e=<div class="cw-Scrollbar"role="scrollbar"/>;return w(e,t),e;}}function j(n,t){const e=t.orientation??"vertical",i=h(t.min,0),s=Math.max(i,h(t.max,S)),o=Math.min(s,Math.max(i,h("value"in t?t.value:t.defaultValue,0))),r=t.disabled===!0;return<div aria-controls={t.controls}aria-label={t.label??"Scroll position"}{...n}aria-disabled={r?"true":void 0}aria-orientation={e}aria-valuemax={s}aria-valuemin={i}aria-valuenow={o}classList={{...n.classList,"cw-Scrollbar":!0,"cw-Scrollbar-disabled":r,[`_cw-Scrollbar-${e}`]:!0}}role="scrollbar"tabIndex={r?-1:0}/>;}const D=/* @__PURE__ */O(()=>j,()=>Y);class q extends x{constructor(t){super(t,{styleElementIsFunction:!0});}applyComponentProps(){const[t,e]=super.readProp("orientation");e&&super.setClass("orientation",`_cw-ScrollField-${t??"vertical"}`);}render(t){const e=<div class="cw-ScrollField"/>;return w(e,t),e;}}function Z(n,t){return<div{...n}classList={{...n.classList,"cw-ScrollField":!0,[`_cw-ScrollField-${t.orientation??"vertical"}`]:!0}}/>;}const ot=/* @__PURE__ */O(()=>Z,()=>q),lt=D,at=n=><D{...n}orientation={n.orientation??"horizontal"}/>;class ht{#h;#L;#T;#P;#E;#g;#M;#R;#b;#w;#e;#i;#s;#r;#n;#a;#t;#o;#d;#u;#m;constructor(t,e){this.#h=t,this.#L=e.property,this.#T=e.spring,this.#P=e.onOverlapChange??(()=>{}),this.#E=e.onFractionChange??(()=>{}),this.#g=i=>this.#S(i.timeStamp),this.#M=i=>this.#y(i?.timeStamp),this.#R=()=>this.#c(),this.#b=void 0,this.#w=void 0,this.#e=null,this.#i=()=>{},this.#s=0,this.#r=0,this.#n=0,this.#a=!1,this.#t=void 0,this.#o=void 0,this.#d=new k(),this.#u=-1/0,this.#m=!1;}get fraction(){return this.#t?.playState==="running"?this.#t.value:this.#r;}setRange(t){this.#s=Math.max(0,t),this.#e===null&&this.#b!==void 0&&!this.#m&&this.#c();}setFraction(t){this.#t?.cancel(),this.#t=void 0,this.#l(c(t));}animateFraction(t,e=0){const i=c(t),s=this.#t;if(s?.playState==="running"){s.retarget(i),this.#r=i,this.#E(i);return;}if(Math.abs(i-this.#r)<y){this.#l(i);return;}const o=this.#r,r=I(null,()=>_(this.#h,this.#L,o,i,{...this.#T,velocity:e}));r!==void 0&&(this.#t=r,this.#r=i,this.#E(i),r.finished.then(()=>{this.#t===r&&(this.#t=void 0);},()=>{}));}bind(t,e){this.#m||(this.#b=t,this.#w=e,this.#c(),t!==void 0&&!this.#h.isConnected&&queueMicrotask(()=>{this.#m||this.#c();}));}dispose(){this.#m=!0,this.#f(),this.#i(),this.#i=()=>{},this.#t?.cancel(),this.#t=void 0;}#l(t){this.#r=t,this.#h.style.setProperty(this.#L,`${t}`),this.#E(t);}#c(){const t=this.#b,e=this.#w,i=p(this.#h),s=t===void 0||e===void 0?null:P(this.#h,e),o=t===void 0||i===void 0?null:e===void 0?i:s;if(this.#i(),this.#i=()=>{},t!==void 0&&e!==void 0){const r=this.#h.getRootNode();E(r)&&(this.#i=R(r,this.#R));}o!==this.#e&&(this.#f(),this.#e=o,o!==null&&(o.addEventListener("scroll",this.#g,{passive:!0}),o.addEventListener("scrollend",this.#M),this.#n=this.#p(o),this.#v(this.#n>0)));}#f(){this.#e?.removeEventListener("scroll",this.#g),this.#e?.removeEventListener("scrollend",this.#M),this.#e=null,this.#o!==void 0&&clearTimeout(this.#o),this.#o=void 0,this.#d.resetTracking(),this.#u=-1/0;}#p(t){return Math.max(0,"scrollY"in t?t.scrollY:t.scrollTop);}#v(t){t!==this.#a&&(this.#a=t,this.#P(t));}#S(t){const e=this.#e,i=this.#b;if(e===null||i===void 0)return;const s=this.#p(e),o=this.#n,r=s-o;if(this.#n=s,this.#v(s>0),i==="pinned"||this.#s<=0||Math.abs(r)<y)return;const l=this.#t;l?.playState==="running"&&(l.cancel(),this.#r=l.value),this.#t=void 0;let a=-c(this.#r)*this.#s;(r>0||i!=="exitUntilCollapsed")&&(a=Math.min(0,Math.max(-this.#s,a-r))),r<0&&s<-a&&(a=s<=0?0:Math.max(a,a*s/o)),this.#l(-a/this.#s),this.#d.addDataPoint(t,-a),this.#u=t,"onscrollend"in e||(this.#o!==void 0&&clearTimeout(this.#o),this.#o=setTimeout(this.#M,W));}#y(t){const e=this.#b,i=this.#r,s=this.#s;if(this.#o=void 0,e===void 0||e==="pinned"||this.#e===null||this.#t?.playState==="running"||s<=0||i<U||i>=1)return;const r=(t??p(this.#h)?.performance.now()??this.#u)-this.#u>X?0:this.#d.calculateVelocity(),l=i+G(r)/s;this.#d.resetTracking(),this.animateFraction(l<0.5?0:1,r/s);}}export{ht as BarScrollState,at as HorizontalScrollbar,ot as ScrollField,q as ScrollFieldController,D as Scrollbar,Y as ScrollbarController,lt as VerticalScrollbar,K as resizeObserverOf};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{mergeProps as Q,onMount as z}from"solid-js";import{insert as v}from"solid-js/web";import{defineDomComponent as G}from"..";import{IconButton as U}from"../action/icon-button";import{DomController as W}from"../dom/client";import{Icon as Y}from"../icon";import{observeFormReset as Z}from"../input/base";import{applyMotion as S}from"../motion";import{computedStyleOf as y,dedupeCallbacks as D,deferAfterDelegatedCancellation as g,isDisabledElement as H,isElementNode as C,isTopModalLayer as R,isVisibleElement as F,mutationObserverOf as ee,registerModalLayer as te,resolveNavigationSlots as ne,uniqueId as q}from"./base";import{BarScrollState as se,resizeObserverOf as ie}from"./scroll";import"../container/elevation-shadow.css";import"./navigation.css";const re=["navigationIcon","leadingIcon","trailingIcon","avatar","actions","results"],ae="a[href], button, input, select, textarea, [tabindex]",oe=["aria-disabled","aria-hidden","class","data-value","disabled","hidden","id","inert","role","style"],le={duration:"--cw-Motion-transition-duration-short-2",easing:"--cw-Motion-transition-easing-standard-accelerate",fill:"backwards",startDelay:"--cw-Motion-transition-duration-short-1"},de={duration:"--cw-Motion-transition-duration-short-2",easing:"--cw-Motion-transition-easing-standard-decelerate",fill:"forwards"},ue={duration:"--cw-Motion-transition-duration-short-2",easing:"--cw-Motion-transition-easing-standard-decelerate"},ce={duration:"--cw-Motion-transition-duration-short-2",easing:"--cw-Motion-transition-easing-standard-accelerate",fill:"forwards"},B=["inset(0px round 0px)","0px 0px","1","0px","1"];function N(o,e){const t=o.getBoundingClientRect(),n=y(o);return n.direction==="rtl"?t.right-parseFloat(n.paddingRight)-e.right:t.left+parseFloat(n.paddingLeft)-e.left}function he(o,e){const t=o.getBoundingClientRect();return{bounds:t,text:N(e,t)}}function pe(o){const e=/^linear\((.*)\)$/u.exec(o)?.[1]?.split(","),t=[];let n=-1/0;if(e===void 0)return[o,1];e.forEach((d,c)=>{const h=d.trim().split(/\s+/u),f=Number(h.find(b=>!b.endsWith("%"))),x=h.filter(b=>b.endsWith("%"));for(const b of x)n=Math.max(n,parseFloat(b)/100),t.push([n,f]);x.length===0&&(t.push([c===0?0:c===e.length-1?Math.max(1,n):void 0,f]),c===0&&(n=0))});for(let d=1;d<t.length;d++){const c=t[d-1][0];let h=d;for(;t[h][0]===void 0;)h++;for(let f=d;f<h;f++)t[f][0]=c+(t[h][0]-c)*(f-d+1)/(h-d+1);d=h}const s=t.findIndex(([,d])=>d>=1);if(s<=0)return[o,1];const[i,a]=t[s-1],[r,l]=t[s],u=i+(r-i)*(1-a)/(l-a),p=t.slice(0,s).map(([d,c])=>`${c} ${d*100}%`);return u>=1?[o,1]:[`linear(${p.join(", ")}, 1 ${u*100}%, 1)`,u]}function _(o,e){const t=q("cw-search-input"),n=q("cw-search-results");return{generatedInputId:t,generatedResultsId:n,inputId:o??t,resultsId:e??n}}function P(o){return<U attr:aria-label={o}size="sm">
|
|
1
|
+
import{mergeProps as Q,onMount as z}from"solid-js";import{insert as v}from"solid-js/web";import{defineDomComponent as G}from"..";import{IconButton as U}from"../action/icon-button";import{DomController as W}from"../dom/client";import{Icon as Y}from"../icon";import{observeFormReset as Z}from"../input/base";import{applyMotion as S}from"../motion";import{computedStyleOf as y,dedupeCallbacks as D,deferAfterDelegatedCancellation as g,isDisabledElement as H,isElementNode as C,isTopModalLayer as R,isVisibleElement as F,mutationObserverOf as ee,registerModalLayer as te,resolveNavigationSlots as ne,uniqueId as q}from"./base";import{BarScrollState as se,resizeObserverOf as ie}from"./scroll";import"../container/elevation-shadow.css";import"./navigation.css";const re=["navigationIcon","leadingIcon","trailingIcon","avatar","actions","results"],ae="a[href], button, input, select, textarea, [tabindex]",oe=["aria-disabled","aria-hidden","class","data-value","disabled","hidden","id","inert","role","style"],le={duration:"--cw-Motion-transition-duration-short-2",easing:"--cw-Motion-transition-easing-standard-accelerate",fill:"backwards",startDelay:"--cw-Motion-transition-duration-short-1"},de={duration:"--cw-Motion-transition-duration-short-2",easing:"--cw-Motion-transition-easing-standard-decelerate",fill:"forwards"},ue={duration:"--cw-Motion-transition-duration-short-2",easing:"--cw-Motion-transition-easing-standard-decelerate"},ce={duration:"--cw-Motion-transition-duration-short-2",easing:"--cw-Motion-transition-easing-standard-accelerate",fill:"forwards"},B=["inset(0px round 0px)","0px 0px","1","0px","1"];function N(o,e){const t=o.getBoundingClientRect(),n=y(o);return n.direction==="rtl"?t.right-parseFloat(n.paddingRight)-e.right:t.left+parseFloat(n.paddingLeft)-e.left;}function he(o,e){const t=o.getBoundingClientRect();return{bounds:t,text:N(e,t)};}function pe(o){const e=/^linear\((.*)\)$/u.exec(o)?.[1]?.split(","),t=[];let n=-1/0;if(e===void 0)return[o,1];e.forEach((d,c)=>{const h=d.trim().split(/\s+/u),f=Number(h.find(b=>!b.endsWith("%"))),x=h.filter(b=>b.endsWith("%"));for(const b of x)n=Math.max(n,parseFloat(b)/100),t.push([n,f]);x.length===0&&(t.push([c===0?0:c===e.length-1?Math.max(1,n):void 0,f]),c===0&&(n=0));});for(let d=1;d<t.length;d++){const c=t[d-1][0];let h=d;for(;t[h][0]===void 0;)h++;for(let f=d;f<h;f++)t[f][0]=c+(t[h][0]-c)*(f-d+1)/(h-d+1);d=h;}const s=t.findIndex(([,d])=>d>=1);if(s<=0)return[o,1];const[i,a]=t[s-1],[r,l]=t[s],u=i+(r-i)*(1-a)/(l-a),p=t.slice(0,s).map(([d,c])=>`${c} ${d*100}%`);return u>=1?[o,1]:[`linear(${p.join(", ")}, 1 ${u*100}%, 1)`,u];}function _(o,e){const t=q("cw-search-input"),n=q("cw-search-results");return{generatedInputId:t,generatedResultsId:n,inputId:o??t,resultsId:e??n};}function P(o){return<U attr:aria-label={o}size="sm">
|
|
2
2
|
<Y autoMirror name="arrow_back"/>
|
|
3
|
-
</U
|
|
3
|
+
</U>;}function fe(o,e,t,n){const s=("query"in n?n.query:n.defaultQuery)??"",i=("expanded"in n?n.expanded:n.defaultExpanded)===!0,a=n.actionsPlacement==="inside",r=_(n.inputId,n.resultsId);return<search{...t}classList={{...t.classList,"cw-SearchBar":!0,[o]:!0,"cw-SearchBar-disabled":n.disabled===!0,"cw-SearchBar-expanded":i,"_cw-SearchBar-textCentered":n.textCentered===!0}}data-cw-app-bar-scrolled={n.scrolled===!0?"true":void 0}data-cw-search-design={n.design??"contained"}data-cw-search-expanded={i?"true":"false"}data-cw-search-expansion={n.expansion??e}role="search">
|
|
4
4
|
<span class="cw-SearchAppBar-navigation">{n.navigationIcon}</span>
|
|
5
5
|
<div class="cw-SearchBar-container cw-elevationShadow">
|
|
6
6
|
<div class="cw-SearchBar-header">
|
|
@@ -13,7 +13,7 @@ import{mergeProps as Q,onMount as z}from"solid-js";import{insert as v}from"solid
|
|
|
13
13
|
<div aria-label={n.resultsLabel??"Search results"}class="cw-SearchBar-results cw-elevationShadow"hidden={!i}id={r.resultsId}role="listbox">{n.results??t.children}</div>
|
|
14
14
|
</div>
|
|
15
15
|
<span class="cw-SearchAppBar-actions">{a?void 0:n.actions}</span>
|
|
16
|
-
</search>}class me extends W{#M;#F;#d;#v;#y;#u;#I;#i;#e;#E;#n;#t;#a;#f;#w;#T;#s;#m;#S;#r;#c;#h;#C;#B;#x;#L;#g;#O;#k;#D;#o;#q;#$;#N;#_;#P;#V;#A;#H;constructor(e,t,n){super(e,{styleElementIsFunction:!0}),this.#M=t,this.#F=n,this.#d="query"in e,this.#v="expanded"in e,this.#y={inputId:"",resultsId:""},this.#u="",this.#I=new WeakMap,this.#i=(this.#d?e.query:e.defaultQuery)??"",this.#e=(this.#v?e.expanded:e.defaultExpanded)===!0,this.#E=e.expansion??n,this.#n=null,this.#t=null,this.#a=null,this.#f=null,this.#w=null,this.#T=null,this.#s=null,this.#m=null,this.#S=()=>{},this.#r=null,this.#c=null,this.#h=[],this.#C=0,this.#B=null,this.#x=!1,this.#L=null,this.#g=null,this.#O=void 0,this.#k=!1,this.#D=!1,this.#o=!1,this.#q=s=>this.#ee(s),this.#$=s=>this.#te(s),this.#N=s=>this.#se(s),this.#_=s=>this.#ie(s),this.#P=s=>this.#re(s),this.#V=s=>s.preventDefault(),this.#A=s=>{const i=this.styleElement;this.#e&&i!==null&&!s.composedPath().includes(i)&&g(s,i,()=>this.#l(!1,s),!1)},this.#H=s=>{const i=this.#a;i!==null&&this.#r!==null&&R(i)&&!s.composedPath().includes(i)&&this.#t?.focus()},z(()=>{const s=this.#t;s!==null&&this.#U(s)})}#X(){const e=this.#s;return e===null?[]:Array.from(e.querySelectorAll("[role=option]")).filter(t=>t.closest("[role=listbox]")===e)}#p(e,t){return!H(e)&&e.getAttribute("aria-hidden")!=="true"&&F(e,t)}#j(){const e=new Map;return this.#X().filter(t=>this.#p(t,e))}#R(){const e=this.#t,t=this.#n;t!==null&&(!t.isConnected||!this.#p(t)||t.closest("[role=listbox]")!==this.#s)&&(this.#n=null),this.#X().forEach((n,s)=>{const i=this.#I.get(n),a=n===this.#n?"true":"false";if(n.id===""||n.id===i){const r=`${this.#u}-option-${s}`;n.id!==r&&(n.id=r),this.#I.set(n,r)}n.getAttribute("aria-selected")!==a&&n.setAttribute("aria-selected",a)}),e!==null&&(this.#n===null||!this.#e?e.removeAttribute("aria-activedescendant"):e.setAttribute("aria-activedescendant",this.#n.id))}#b(){const e=this.#t,t=this.#s;e===null||t===null||(super.setClass("cw-SearchBar-expanded",this.#e),super.setClass("cw-SearchBar-disabled",e.disabled),super.setAttribute("data-cw-search-expanded",this.#e?"true":"false"),e.setAttribute("aria-expanded",this.#e?"true":"false"),e.value!==this.#i&&(e.value=this.#i),t.hidden=!this.#e&&this.#c===null,this.#R(),this.#J())}#J(){const e=this.styleElement;if(!C(e)||!e.isConnected)return;const t=e.ownerDocument,n=this.#e&&this.#E==="fullscreen";this.#e?t.addEventListener("pointerdown",this.#A):t.removeEventListener("pointerdown",this.#A),n&&this.#r===null?this.#Z():!n&&this.#r!==null&&this.#z(!this.#e)}#Y(){const e=this.#B;this.#B=null,!(e?.isConnected!==!0||e===e.ownerDocument.activeElement)&&(this.#x=!0,e.focus(),this.#x=!1)}#K(){const e=this.#a,t=this.#f,n=this.#s,s=this.#t,i=this.#w,a=e===null||t===null||n===null||s===null||i===null||this.#h.every(r=>r.playState==="finished")?void 0:[y(e).clipPath.replace(/^none$/u,B[0]),y(t).translate.replace(/^none$/u,B[1]),y(n).opacity,y(s).translate.replace(/^none$/u,B[3]),y(i).opacity];for(const r of this.#h)r.cancel();return this.#h=[],super.setClass("_cw-SearchBar-morphing",!1),a}#Q(e,t){const n=this.#a,s=this.#f,i=this.#t,a=this.#w,r=this.#s;if(n===null||s===null||i===null||a===null||r===null)return Promise.resolve();const l=y(n),u=this.props.design!=="divided",p=u?"fast":t?"slow":"default",[d,c]=pe(l.getPropertyValue(`--cw-Motion-spring-spatial-${p}-easing`).trim()),h={duration:`--cw-Motion-spring-spatial-${p}-duration`,easing:d,fill:t?"none":"forwards",iterations:c},f=u?t?le:de:h,x=this.#T?.matches(":empty")===!1,b=this.#K(),{bounds:m}=e,L=n.getBoundingClientRect(),A=s.getBoundingClientRect(),T=i.getBoundingClientRect(),V=l.direction==="rtl"?m.right-A.right:m.left-A.left,X=`inset(${m.top-L.top}px ${L.right-m.right}px ${L.bottom-m.bottom}px ${m.left-L.left}px round ${m.height/2}px)`,J=`${V}px ${m.top+(m.height-T.height)/2-T.top}px`,O=[X,J,"0",`${e.text-N(i,A)}px`,x?"1":"0"],E=b??(t?O:B),w=t?B:O,k=S(s,[{translate:E[1]},{translate:w[1]}],h),M=[S(n,[{clipPath:E[0]},{clipPath:w[0]}],h),k,S(r,[{opacity:E[2]},{opacity:w[2]}],f),S(i,[{translate:E[3]},{translate:w[3]}],h),S(a,[{opacity:E[4]},{opacity:w[4]}],t?ue:ce)];return this.#h=M,super.setClass("_cw-SearchBar-morphing",!0),t&&k.finished.then(()=>{this.#h===M&&super.setClass("_cw-SearchBar-morphing",!1)},()=>{}),Promise.allSettled(M.map(K=>K.finished))}#Z(){const e=this.styleElement,t=this.#a,n=this.#t;if(!C(e)||t===null||n===null)return;const s=e.ownerDocument,i=this.#c??he(t,n);this.#C++,this.#c=i,this.#B??=s.activeElement,super.setAttribute("data-cw-search-view","true"),t.setAttribute("role","dialog"),t.setAttribute("aria-modal","true"),t.setAttribute("aria-label",this.props.inputLabel??"Search"),typeof t.showPopover=="function"&&(t.setAttribute("popover","manual"),t.showPopover()),this.#r=te(t),s.addEventListener("focusin",this.#H),n.focus(),this.#Q(i,!0)}#z(e){const t=this.#a,n=this.#s,s=this.#c,i=++this.#C;this.#r?.(),this.#r=null,this.styleElement?.ownerDocument.removeEventListener("focusin",this.#H);const a=()=>{i===this.#C&&(this.#K(),t?.hasAttribute("popover")===!0&&(t.hidePopover?.(),t.removeAttribute("popover")),t?.removeAttribute("role"),t?.removeAttribute("aria-modal"),t?.removeAttribute("aria-label"),super.setAttribute("data-cw-search-view",void 0),this.#c=null,n!==null&&(n.hidden=!this.#e),this.#Y())};e&&s!==null&&!this.#o?this.#Q(s,!1).then(a):a()}#l(e,t){this.#o||e===this.#e||(this.#v||(e||(this.#n=null),this.#e=e,this.#b()),this.props.onExpandedChange?.(e,t))}#ee(e){const t=this.#t;t===null||t.disabled||t.readOnly||(this.#n=null,this.#i=t.value,this.#l(!0,e),D([this.props.onQueryChange,this.props.onChange],this.#i,e),this.#d&&(this.#i=this.props.query??""),this.#b())}#te(e){if(e.isComposing||e.keyCode===229)return;const t=this.styleElement,n=this.#t,s=this.#a;if(t===null||n===null||n.disabled||this.#r!==null&&s!==null&&!R(s))return;if(e.key==="Escape"&&this.#e){g(e,t,()=>this.#l(!1,e));return}if(e.key==="Tab"&&this.#r!==null&&s!==null){const a=new Map,r=Array.from(s.querySelectorAll(ae)).filter(u=>u.tabIndex>=0&&!H(u)&&F(u,a)),l=r.indexOf(t.ownerDocument.activeElement);(e.shiftKey?l<=0:l===r.length-1)&&g(e,t,()=>r.at(e.shiftKey?-1:0)?.focus());return}if(e.target!==n)return;if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(this.#s?.querySelector("[role=option]")===null)return;g(e,t,()=>this.#ne(e,n));return}if(e.key!=="Enter")return;const i=this.#n;!n.readOnly&&this.#e&&i!==null&&this.#p(i)?g(e,t,()=>{!this.#o&&this.#p(i)&&this.#G(i,e)}):g(e,t,()=>{!this.#o&&this.#t===n&&this.props.onSearch?.(n.value,e)},!1)}#ne(e,t){if(this.#o||this.#t!==t||t.disabled||!this.#e&&(this.#l(!0,e),!this.#e))return;const n=this.#j();if(n.length===0)return;const s=this.#n===null?-1:n.indexOf(this.#n),i=n.length-1,a=s<0?e.key==="ArrowDown"?0:i:e.key==="ArrowDown"?(s+1)%n.length:(s+i)%n.length,r=n[a],l=this.#s,u=r.offsetTop,p=u+r.offsetHeight;this.#n=r,this.#R(),u<l.scrollTop?l.scrollTop=u:p>l.scrollTop+l.clientHeight&&(l.scrollTop=p-l.clientHeight)}#G(e,t){const n=this.#t;if(n===null||n.disabled||n.readOnly)return;const s=e.dataset.value??e.textContent?.trim()??"";this.#i=s,this.#n=null,D([this.props.onQueryChange,this.props.onChange],s,t),this.#d&&(this.#i=this.props.query??""),this.#b(),this.#l(!1,t),this.props.onSearch?.(s,t)}#se(e){const t=this.styleElement,n=e.target;if(t===null||!C(n))return;if(n.closest(".cw-SearchBar-back")!==null){g(e,t,()=>this.#l(!1,e));return}const s=n.closest("[role=option]");if(s!==null&&s.closest("[role=listbox]")===this.#s&&this.#p(s)){g(e,t,()=>{!this.#o&&this.#p(s)&&this.#G(s,e)});return}n===this.#t&&!this.#e&&!this.#t.disabled&&g(e,t,()=>this.#l(!0,e),!1)}#ie(e){!this.#x&&this.props.openOnFocus===!0&&!this.#e&&this.#l(!0,e)}#re(e){const t=this.styleElement,n=e.relatedTarget;t!==null&&this.#e&&this.#r===null&&C(n)&&!t.contains(n)&&this.#l(!1,e)}#U(e){this.#S(),this.#S=Z(e,()=>this.#ae())}#ae(){const e=this.#t;e!==null&&(this.#i=this.#d?this.props.query??"":e.defaultValue,this.#n=null,this.#b())}#W(){const e=this.#O??this.#k;super.setAttribute("data-cw-app-bar-scrolled",e?"true":void 0)}applyComponentProps(){const e=super.readProps(["actionsPlacement","backLabel","defaultExpanded","defaultQuery","design","disabled","expanded","expansion","inputAutoComplete","inputForm","inputId","inputLabel","inputName","inputRequired","placeholder","query","readOnly","resultsId","resultsLabel","scrollBehavior","scrollTarget","scrolled","textCentered"]),t=this.#t,n=this.#s;t===null||n===null||(e.designChanged&&super.setAttribute("data-cw-search-design",e.design??"contained"),e.textCenteredChanged&&super.setClass("_cw-SearchBar-textCentered",e.textCentered===!0),e.expansionChanged&&(this.#E=e.expansion??this.#F,super.setAttribute("data-cw-search-expansion",this.#E)),e.actionsPlacementChanged&&super.setAttribute("data-cw-actions-placement",e.actionsPlacement??"outside"),e.backLabelChanged&&this.#f?.querySelector(".cw-SearchBar-back button")?.setAttribute("aria-label",e.backLabel??"Close search"),e.queryChanged&&this.#d&&(this.#i=e.query??"",t.defaultValue=this.#i),e.expandedChanged&&this.#v&&(this.#e=e.expanded===!0,this.#e||(this.#n=null)),this.#D||(this.#D=!0,this.#d||(t.defaultValue=this.#i)),e.inputLabelChanged&&(t.setAttribute("aria-label",e.inputLabel??"Search"),this.#r!==null&&this.#a?.setAttribute("aria-label",e.inputLabel??"Search")),e.inputAutoCompleteChanged&&$(t,"autocomplete",e.inputAutoComplete),e.inputFormChanged&&$(t,"form",e.inputForm),e.inputNameChanged&&(t.name=e.inputName??""),e.inputRequiredChanged&&(t.required=e.inputRequired===!0),e.disabledChanged&&(t.disabled=e.disabled===!0),e.readOnlyChanged&&(t.readOnly=e.readOnly===!0),e.placeholderChanged&&(t.placeholder=e.placeholder??""),e.inputIdChanged&&(t.id=e.inputId??this.#y.inputId),e.resultsIdChanged&&(this.#u=e.resultsId??this.#y.resultsId,n.id=this.#u,t.setAttribute("aria-controls",this.#u)),e.resultsLabelChanged&&n.setAttribute("aria-label",e.resultsLabel??"Search results"),e.scrolledChanged&&(this.#O=e.scrolled,this.#W()),(e.scrollBehaviorChanged||e.scrollTargetChanged)&&this.#L?.bind(e.scrollBehavior,e.scrollTarget),this.#b())}onStyleElementChanged(e){super.onStyleElementChanged(e);const t=this.#t,n=this.#s;if(!C(e)||t===null||n===null)return;e.addEventListener("click",this.#N),e.addEventListener("focusout",this.#P),e.addEventListener("keydown",this.#$),t.addEventListener("focus",this.#_),t.addEventListener("input",this.#q),n.addEventListener("mousedown",this.#V),this.#U(t);const s=ee(n);if(s!==void 0&&(this.#m=new s(()=>this.#R()),this.#m.observe(n,{attributeFilter:oe,attributes:!0,childList:!0,subtree:!0})),this.#M==="cw-SearchAppBar"){const i=new se(e,{property:"--cw-SearchAppBar-scroll-progress",spring:{role:"effect",speed:"default"},onOverlapChange:r=>{this.#k=r,this.#W()}}),a=ie(e);this.#L=i,a!==void 0&&(this.#g=new a(r=>{for(const l of r)i.setRange(l.borderBoxSize[0]?.blockSize??l.contentRect.height)}),this.#g.observe(e))}queueMicrotask(()=>{this.#o||this.#J()})}onControllerCleanup(){this.#o=!0,this.#z(!1),this.styleElement?.ownerDocument.removeEventListener("pointerdown",this.#A),this.#m?.disconnect(),this.#m=null,this.#g?.disconnect(),this.#g=null,this.#L?.dispose(),this.#S(),super.onControllerCleanup()}render(e){let t,n,s,i,a,r,l,u,p,d;const c=_(this.props.inputId,this.props.resultsId),h=<search class={`cw-SearchBar ${this.#M}`}role="search">
|
|
16
|
+
</search>;}class me extends W{#M;#F;#d;#v;#y;#u;#I;#i;#e;#E;#n;#t;#a;#f;#w;#T;#s;#m;#S;#r;#c;#h;#C;#B;#x;#L;#g;#O;#k;#D;#o;#q;#$;#N;#_;#P;#V;#A;#H;constructor(e,t,n){super(e,{styleElementIsFunction:!0}),this.#M=t,this.#F=n,this.#d="query"in e,this.#v="expanded"in e,this.#y={inputId:"",resultsId:""},this.#u="",this.#I=/* @__PURE__ */new WeakMap(),this.#i=(this.#d?e.query:e.defaultQuery)??"",this.#e=(this.#v?e.expanded:e.defaultExpanded)===!0,this.#E=e.expansion??n,this.#n=null,this.#t=null,this.#a=null,this.#f=null,this.#w=null,this.#T=null,this.#s=null,this.#m=null,this.#S=()=>{},this.#r=null,this.#c=null,this.#h=[],this.#C=0,this.#B=null,this.#x=!1,this.#L=null,this.#g=null,this.#O=void 0,this.#k=!1,this.#D=!1,this.#o=!1,this.#q=s=>this.#ee(s),this.#$=s=>this.#te(s),this.#N=s=>this.#se(s),this.#_=s=>this.#ie(s),this.#P=s=>this.#re(s),this.#V=s=>s.preventDefault(),this.#A=s=>{const i=this.styleElement;this.#e&&i!==null&&!s.composedPath().includes(i)&&g(s,i,()=>this.#l(!1,s),!1);},this.#H=s=>{const i=this.#a;i!==null&&this.#r!==null&&R(i)&&!s.composedPath().includes(i)&&this.#t?.focus();},z(()=>{const s=this.#t;s!==null&&this.#U(s);});}#X(){const e=this.#s;return e===null?[]:Array.from(e.querySelectorAll("[role=option]")).filter(t=>t.closest("[role=listbox]")===e);}#p(e,t){return!H(e)&&e.getAttribute("aria-hidden")!=="true"&&F(e,t);}#j(){const e=/* @__PURE__ */new Map();return this.#X().filter(t=>this.#p(t,e));}#R(){const e=this.#t,t=this.#n;t!==null&&(!t.isConnected||!this.#p(t)||t.closest("[role=listbox]")!==this.#s)&&(this.#n=null),this.#X().forEach((n,s)=>{const i=this.#I.get(n),a=n===this.#n?"true":"false";if(n.id===""||n.id===i){const r=`${this.#u}-option-${s}`;n.id!==r&&(n.id=r),this.#I.set(n,r);}n.getAttribute("aria-selected")!==a&&n.setAttribute("aria-selected",a);}),e!==null&&(this.#n===null||!this.#e?e.removeAttribute("aria-activedescendant"):e.setAttribute("aria-activedescendant",this.#n.id));}#b(){const e=this.#t,t=this.#s;e===null||t===null||(super.setClass("cw-SearchBar-expanded",this.#e),super.setClass("cw-SearchBar-disabled",e.disabled),super.setAttribute("data-cw-search-expanded",this.#e?"true":"false"),e.setAttribute("aria-expanded",this.#e?"true":"false"),e.value!==this.#i&&(e.value=this.#i),t.hidden=!this.#e&&this.#c===null,this.#R(),this.#J());}#J(){const e=this.styleElement;if(!C(e)||!e.isConnected)return;const t=e.ownerDocument,n=this.#e&&this.#E==="fullscreen";this.#e?t.addEventListener("pointerdown",this.#A):t.removeEventListener("pointerdown",this.#A),n&&this.#r===null?this.#Z():!n&&this.#r!==null&&this.#z(!this.#e);}#Y(){const e=this.#B;this.#B=null,!(e?.isConnected!==!0||e===e.ownerDocument.activeElement)&&(this.#x=!0,e.focus(),this.#x=!1);}#K(){const e=this.#a,t=this.#f,n=this.#s,s=this.#t,i=this.#w,a=e===null||t===null||n===null||s===null||i===null||this.#h.every(r=>r.playState==="finished")?void 0:[y(e).clipPath.replace(/^none$/u,B[0]),y(t).translate.replace(/^none$/u,B[1]),y(n).opacity,y(s).translate.replace(/^none$/u,B[3]),y(i).opacity];for(const r of this.#h)r.cancel();return this.#h=[],super.setClass("_cw-SearchBar-morphing",!1),a;}#Q(e,t){const n=this.#a,s=this.#f,i=this.#t,a=this.#w,r=this.#s;if(n===null||s===null||i===null||a===null||r===null)return Promise.resolve();const l=y(n),u=this.props.design!=="divided",p=u?"fast":t?"slow":"default",[d,c]=pe(l.getPropertyValue(`--cw-Motion-spring-spatial-${p}-easing`).trim()),h={duration:`--cw-Motion-spring-spatial-${p}-duration`,easing:d,fill:t?"none":"forwards",iterations:c},f=u?t?le:de:h,x=this.#T?.matches(":empty")===!1,b=this.#K(),{bounds:m}=e,L=n.getBoundingClientRect(),A=s.getBoundingClientRect(),T=i.getBoundingClientRect(),V=l.direction==="rtl"?m.right-A.right:m.left-A.left,X=`inset(${m.top-L.top}px ${L.right-m.right}px ${L.bottom-m.bottom}px ${m.left-L.left}px round ${m.height/2}px)`,J=`${V}px ${m.top+(m.height-T.height)/2-T.top}px`,O=[X,J,"0",`${e.text-N(i,A)}px`,x?"1":"0"],E=b??(t?O:B),w=t?B:O,k=S(s,[{translate:E[1]},{translate:w[1]}],h),M=[S(n,[{clipPath:E[0]},{clipPath:w[0]}],h),k,S(r,[{opacity:E[2]},{opacity:w[2]}],f),S(i,[{translate:E[3]},{translate:w[3]}],h),S(a,[{opacity:E[4]},{opacity:w[4]}],t?ue:ce)];return this.#h=M,super.setClass("_cw-SearchBar-morphing",!0),t&&k.finished.then(()=>{this.#h===M&&super.setClass("_cw-SearchBar-morphing",!1);},()=>{}),Promise.allSettled(M.map(K=>K.finished));}#Z(){const e=this.styleElement,t=this.#a,n=this.#t;if(!C(e)||t===null||n===null)return;const s=e.ownerDocument,i=this.#c??he(t,n);this.#C++,this.#c=i,this.#B??=s.activeElement,super.setAttribute("data-cw-search-view","true"),t.setAttribute("role","dialog"),t.setAttribute("aria-modal","true"),t.setAttribute("aria-label",this.props.inputLabel??"Search"),typeof t.showPopover=="function"&&(t.setAttribute("popover","manual"),t.showPopover()),this.#r=te(t),s.addEventListener("focusin",this.#H),n.focus(),this.#Q(i,!0);}#z(e){const t=this.#a,n=this.#s,s=this.#c,i=++this.#C;this.#r?.(),this.#r=null,this.styleElement?.ownerDocument.removeEventListener("focusin",this.#H);const a=()=>{i===this.#C&&(this.#K(),t?.hasAttribute("popover")===!0&&(t.hidePopover?.(),t.removeAttribute("popover")),t?.removeAttribute("role"),t?.removeAttribute("aria-modal"),t?.removeAttribute("aria-label"),super.setAttribute("data-cw-search-view",void 0),this.#c=null,n!==null&&(n.hidden=!this.#e),this.#Y());};e&&s!==null&&!this.#o?this.#Q(s,!1).then(a):a();}#l(e,t){this.#o||e===this.#e||(this.#v||(e||(this.#n=null),this.#e=e,this.#b()),this.props.onExpandedChange?.(e,t));}#ee(e){const t=this.#t;t===null||t.disabled||t.readOnly||(this.#n=null,this.#i=t.value,this.#l(!0,e),D([this.props.onQueryChange,this.props.onChange],this.#i,e),this.#d&&(this.#i=this.props.query??""),this.#b());}#te(e){if(e.isComposing||e.keyCode===229)return;const t=this.styleElement,n=this.#t,s=this.#a;if(t===null||n===null||n.disabled||this.#r!==null&&s!==null&&!R(s))return;if(e.key==="Escape"&&this.#e){g(e,t,()=>this.#l(!1,e));return;}if(e.key==="Tab"&&this.#r!==null&&s!==null){const a=/* @__PURE__ */new Map(),r=Array.from(s.querySelectorAll(ae)).filter(u=>u.tabIndex>=0&&!H(u)&&F(u,a)),l=r.indexOf(t.ownerDocument.activeElement);(e.shiftKey?l<=0:l===r.length-1)&&g(e,t,()=>r.at(e.shiftKey?-1:0)?.focus());return;}if(e.target!==n)return;if(e.key==="ArrowDown"||e.key==="ArrowUp"){if(this.#s?.querySelector("[role=option]")===null)return;g(e,t,()=>this.#ne(e,n));return;}if(e.key!=="Enter")return;const i=this.#n;!n.readOnly&&this.#e&&i!==null&&this.#p(i)?g(e,t,()=>{!this.#o&&this.#p(i)&&this.#G(i,e);}):g(e,t,()=>{!this.#o&&this.#t===n&&this.props.onSearch?.(n.value,e);},!1);}#ne(e,t){if(this.#o||this.#t!==t||t.disabled||!this.#e&&(this.#l(!0,e),!this.#e))return;const n=this.#j();if(n.length===0)return;const s=this.#n===null?-1:n.indexOf(this.#n),i=n.length-1,a=s<0?e.key==="ArrowDown"?0:i:e.key==="ArrowDown"?(s+1)%n.length:(s+i)%n.length,r=n[a],l=this.#s,u=r.offsetTop,p=u+r.offsetHeight;this.#n=r,this.#R(),u<l.scrollTop?l.scrollTop=u:p>l.scrollTop+l.clientHeight&&(l.scrollTop=p-l.clientHeight);}#G(e,t){const n=this.#t;if(n===null||n.disabled||n.readOnly)return;const s=e.dataset.value??e.textContent?.trim()??"";this.#i=s,this.#n=null,D([this.props.onQueryChange,this.props.onChange],s,t),this.#d&&(this.#i=this.props.query??""),this.#b(),this.#l(!1,t),this.props.onSearch?.(s,t);}#se(e){const t=this.styleElement,n=e.target;if(t===null||!C(n))return;if(n.closest(".cw-SearchBar-back")!==null){g(e,t,()=>this.#l(!1,e));return;}const s=n.closest("[role=option]");if(s!==null&&s.closest("[role=listbox]")===this.#s&&this.#p(s)){g(e,t,()=>{!this.#o&&this.#p(s)&&this.#G(s,e);});return;}n===this.#t&&!this.#e&&!this.#t.disabled&&g(e,t,()=>this.#l(!0,e),!1);}#ie(e){!this.#x&&this.props.openOnFocus===!0&&!this.#e&&this.#l(!0,e);}#re(e){const t=this.styleElement,n=e.relatedTarget;t!==null&&this.#e&&this.#r===null&&C(n)&&!t.contains(n)&&this.#l(!1,e);}#U(e){this.#S(),this.#S=Z(e,()=>this.#ae());}#ae(){const e=this.#t;e!==null&&(this.#i=this.#d?this.props.query??"":e.defaultValue,this.#n=null,this.#b());}#W(){const e=this.#O??this.#k;super.setAttribute("data-cw-app-bar-scrolled",e?"true":void 0);}applyComponentProps(){const e=super.readProps(["actionsPlacement","backLabel","defaultExpanded","defaultQuery","design","disabled","expanded","expansion","inputAutoComplete","inputForm","inputId","inputLabel","inputName","inputRequired","placeholder","query","readOnly","resultsId","resultsLabel","scrollBehavior","scrollTarget","scrolled","textCentered"]),t=this.#t,n=this.#s;t===null||n===null||(e.designChanged&&super.setAttribute("data-cw-search-design",e.design??"contained"),e.textCenteredChanged&&super.setClass("_cw-SearchBar-textCentered",e.textCentered===!0),e.expansionChanged&&(this.#E=e.expansion??this.#F,super.setAttribute("data-cw-search-expansion",this.#E)),e.actionsPlacementChanged&&super.setAttribute("data-cw-actions-placement",e.actionsPlacement??"outside"),e.backLabelChanged&&this.#f?.querySelector(".cw-SearchBar-back button")?.setAttribute("aria-label",e.backLabel??"Close search"),e.queryChanged&&this.#d&&(this.#i=e.query??"",t.defaultValue=this.#i),e.expandedChanged&&this.#v&&(this.#e=e.expanded===!0,this.#e||(this.#n=null)),this.#D||(this.#D=!0,this.#d||(t.defaultValue=this.#i)),e.inputLabelChanged&&(t.setAttribute("aria-label",e.inputLabel??"Search"),this.#r!==null&&this.#a?.setAttribute("aria-label",e.inputLabel??"Search")),e.inputAutoCompleteChanged&&$(t,"autocomplete",e.inputAutoComplete),e.inputFormChanged&&$(t,"form",e.inputForm),e.inputNameChanged&&(t.name=e.inputName??""),e.inputRequiredChanged&&(t.required=e.inputRequired===!0),e.disabledChanged&&(t.disabled=e.disabled===!0),e.readOnlyChanged&&(t.readOnly=e.readOnly===!0),e.placeholderChanged&&(t.placeholder=e.placeholder??""),e.inputIdChanged&&(t.id=e.inputId??this.#y.inputId),e.resultsIdChanged&&(this.#u=e.resultsId??this.#y.resultsId,n.id=this.#u,t.setAttribute("aria-controls",this.#u)),e.resultsLabelChanged&&n.setAttribute("aria-label",e.resultsLabel??"Search results"),e.scrolledChanged&&(this.#O=e.scrolled,this.#W()),(e.scrollBehaviorChanged||e.scrollTargetChanged)&&this.#L?.bind(e.scrollBehavior,e.scrollTarget),this.#b());}onStyleElementChanged(e){super.onStyleElementChanged(e);const t=this.#t,n=this.#s;if(!C(e)||t===null||n===null)return;e.addEventListener("click",this.#N),e.addEventListener("focusout",this.#P),e.addEventListener("keydown",this.#$),t.addEventListener("focus",this.#_),t.addEventListener("input",this.#q),n.addEventListener("mousedown",this.#V),this.#U(t);const s=ee(n);if(s!==void 0&&(this.#m=new s(()=>this.#R()),this.#m.observe(n,{attributeFilter:oe,attributes:!0,childList:!0,subtree:!0})),this.#M==="cw-SearchAppBar"){const i=new se(e,{property:"--cw-SearchAppBar-scroll-progress",spring:{role:"effect",speed:"default"},onOverlapChange:r=>{this.#k=r,this.#W();}}),a=ie(e);this.#L=i,a!==void 0&&(this.#g=new a(r=>{for(const l of r)i.setRange(l.borderBoxSize[0]?.blockSize??l.contentRect.height);}),this.#g.observe(e));}queueMicrotask(()=>{this.#o||this.#J();});}onControllerCleanup(){this.#o=!0,this.#z(!1),this.styleElement?.ownerDocument.removeEventListener("pointerdown",this.#A),this.#m?.disconnect(),this.#m=null,this.#g?.disconnect(),this.#g=null,this.#L?.dispose(),this.#S(),super.onControllerCleanup();}render(e){let t,n,s,i,a,r,l,u,p,d;const c=_(this.props.inputId,this.props.resultsId),h=<search class={`cw-SearchBar ${this.#M}`}role="search">
|
|
17
17
|
<span class="cw-SearchAppBar-navigation"ref={t}/>
|
|
18
18
|
<div class="cw-SearchBar-container cw-elevationShadow"ref={n}>
|
|
19
19
|
<div class="cw-SearchBar-header"ref={s}>
|
|
@@ -26,4 +26,4 @@ import{mergeProps as Q,onMount as z}from"solid-js";import{insert as v}from"solid
|
|
|
26
26
|
<div class="cw-SearchBar-results cw-elevationShadow"ref={p}role="listbox"/>
|
|
27
27
|
</div>
|
|
28
28
|
<span class="cw-SearchAppBar-actions"ref={d}/>
|
|
29
|
-
</search>;return this.#y={inputId:c.generatedInputId,resultsId:c.generatedResultsId},this.#u=c.resultsId,this.#t=r,this.#a=n,this.#f=s,this.#w=i,this.#T=a,this.#s=p,r.id=c.inputId,r.setAttribute("aria-controls",c.resultsId),p.id=c.resultsId,v(t,()=>this.props.navigationIcon),v(i,P(this.props.backLabel??"Close search")),v(a,()=>this.props.leadingIcon),v(l,()=>this.props.actionsPlacement==="inside"?this.props.actions:this.props.trailingIcon),v(u,()=>this.props.avatar),v(p,()=>this.props.results??e),v(d,()=>this.props.actionsPlacement==="inside"?void 0:this.props.actions),h}}function $(o,e,t){t===void 0?o.removeAttribute(e):o.setAttribute(e,t)}function I(o,e){const t=G(()=>(n,s)=>fe(o,e,n,s),()=>class extends me{constructor(n){super(n,o,e)}});return n=>t(ne(n,void 0,re))}const ge
|
|
29
|
+
</search>;return this.#y={inputId:c.generatedInputId,resultsId:c.generatedResultsId},this.#u=c.resultsId,this.#t=r,this.#a=n,this.#f=s,this.#w=i,this.#T=a,this.#s=p,r.id=c.inputId,r.setAttribute("aria-controls",c.resultsId),p.id=c.resultsId,v(t,()=>this.props.navigationIcon),v(i,P(this.props.backLabel??"Close search")),v(a,()=>this.props.leadingIcon),v(l,()=>this.props.actionsPlacement==="inside"?this.props.actions:this.props.trailingIcon),v(u,()=>this.props.avatar),v(p,()=>this.props.results??e),v(d,()=>this.props.actionsPlacement==="inside"?void 0:this.props.actions),h;}}function $(o,e,t){t===void 0?o.removeAttribute(e):o.setAttribute(e,t);}function I(o,e){const t=G(()=>(n,s)=>fe(o,e,n,s),()=>class extends me{constructor(n){super(n,o,e);}});return n=>t(ne(n,void 0,re));}const ge=/* @__PURE__ */I("cw-SearchBar","docked"),Ie=/* @__PURE__ */I("cw-DockedSearchBar","docked"),Te=o=>{const e=Q({expansion:"fullscreen"},o);return ge(e);},Oe=/* @__PURE__ */I("cw-SearchAppBar","fullscreen");export{Ie as DockedSearchBar,Oe as SearchAppBar,ge as SearchBar,me as SearchBarController,Te as SearchView};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{createComponent as w,createContext as Y,createMemo as oe,mergeProps as G,splitProps as Q,untrack as f,useContext as h}from"solid-js";import{escape as de,isServer as g,ssr as X}from"solid-js/web";import{defineDomComponent as D}from"..";import{DomController as O}from"../dom/client";import{applySpringMotion as F}from"../motion";import{FocusState as ue,HoverState as ce,PressState as he,defineInteractableComponent as fe}from"../state";import{InteractableController as be}from"../state/controller";import{computedStyleOf as pe,dedupeCallbacks as Z,deferAfterDelegatedCancellation as V,isAnchorElement as H,isDisabledElement as L,isElementNode as $,isVisibleElement as ve,mutationObserverOf as ee,ownerWindow as me,preventDisabledLinkKey as Te,resolveNavigationSlots as ge,selectedValueOf as M,uniqueId as A,unreachableServerRender as I}from"./base";import"./navigation.css";const y="cw-TabList",P="[role=tab]",te="cw-Tab-selected",ne="cw-Tab-disabled",B="data-cw-tab-value",Ee="data-cw-tab-variant",K="data-cw-tab-scrollable",ye="data-cw-tab-icon-placement",x="data-cw-tabs-link",k="data-cw-tab-fallback",U=ue|ce|he,z="--_CW-TAB-INDICATOR_SHIFT",q="--_CW-TAB-INDICATOR_STRETCH",Se=new RegExp(["<!--[\\s\\S]*?-->",`<(script|style|textarea|title)\\b(?:[^>"']|"[^"]*"|'[^']*')*>[\\s\\S]*?<\\/\\1\\s*>`,`<(?:[^>"']|"[^"]*"|'[^']*')*>`].join("|"),"gi"),Ce=/^<(?:a|button|div)\s/i,N=/\s+([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g;let Le=0;const p=Y(),S=Y();function ie(s){return`${s}-${++Le}`}function R(s,e){if(s===null||e===null||s===e)return 0;const t=s.compareDocumentPosition(e);return(t&1)!==0?0:(t&4)!==0?-1:(t&2)!==0?1:0}function j(s){const e=new Map;for(const t of s){const n=t.value(),i=n===void 0?void 0:e.get(n);i!==void 0?i.push(t):n!==void 0&&e.set(n,[t])}return e}function se(s,e){const t=new Map(s.map(o=>[o.id(),o])),n=new Map(e.map(o=>[o.id(),o])),i=new Map,l=new Set;for(const o of s){const r=n.get(o.explicitPanelId()??"");r!==void 0&&!l.has(r)&&(i.set(o,r),l.add(r))}for(const o of e){const r=t.get(o.explicitTabId()??"");r!==void 0&&!i.has(r)&&!l.has(o)&&(i.set(r,o),l.add(o))}const a=j(e.filter(o=>!l.has(o)));for(const[o,r]of j(s.filter(u=>!i.has(u))))r.forEach((u,d)=>{const c=a.get(o)?.[d];c!==void 0&&i.set(u,c)});return i}class C{#e;#n;#t;#s;#i;#d;#l;constructor(){this.#e=[],this.#n=[],this.#t=new Map,this.#s=null,this.#i=null,this.#d=!1,this.#l=!1}attach(e){const t=e===null?void 0:ee(e);this.#s?.disconnect(),this.#s=null,!(e===null||t===void 0)&&(this.#s=new t(()=>this.invalidate()),this.#s.observe(e,{childList:!0,subtree:!0}))}addTab(e){return this.#e.push(e),this.#a(),()=>{this.#e.splice(this.#e.indexOf(e),1),this.#t.delete(e),this.#i===e&&(this.#i=null),this.invalidate()}}addPanel(e){return this.#n.push(e),this.#a(),()=>{this.#n.splice(this.#n.indexOf(e),1),this.invalidate()}}select(e){if(this.#d&&e===this.#i)return;const t=this.#i===null?void 0:this.#u(this.#i),n=e===null?void 0:this.#u(e);if(this.#i=e,!this.#d){this.#d=!0;for(const i of this.#n)i.show(i===n);return}t!==n&&(t?.show(!1),n?.show(!0))}invalidate(){this.#l||(this.#l=!0,queueMicrotask(()=>{this.#l=!1,this.#r([...this.#e].sort((e,t)=>R(e.element(),t.element())),[...this.#n].sort((e,t)=>R(e.element(),t.element()))),this.#s?.takeRecords()}))}#u(e){const t=e.element()?.getAttribute("aria-controls");return this.#t.get(e)??(t==null?void 0:this.#n.find(n=>n.id()===t))}#a(){this.#r(this.#e,this.#n)}#r(e,t){const n=se(e,t),i=new Map(Array.from(n,([l,a])=>[a,l]));this.#t.clear();for(const l of e){const a=n.get(l);a!==void 0&&this.#t.set(l,a),l.link(a??null)}for(const l of t)l.link(i.get(l)??null);if(this.#d){const l=this.#i===null?void 0:this.#u(this.#i);for(const a of t)a.show(a===l)}}}class _{#e;#n;#t;#s;onChange;constructor(){this.#e=new Set,this.#n=new Map,this.#t=new Map,this.#s=!1,this.onChange=()=>{}}add(e){return this.#e.add(e),this.invalidate(),()=>{this.#e.delete(e),this.invalidate()}}invalidate(){this.#s=!0,this.onChange()}get(e){return this.#i(),this.#n.get(e)}withValue(e){return this.#i(),this.#t.get(e)??[]}#i(){if(this.#s){this.#s=!1,this.#n.clear(),this.#t.clear();for(const e of this.#e){const t=e.element(),n=e.value(),i=n===void 0?void 0:this.#t.get(n);t!==null&&this.#n.set(t,e),i!==void 0?i.push(e):n!==void 0&&this.#t.set(n,[e])}}}}class we extends O{#e;constructor(e){super(e,{styleElementIsFunction:!0});const t=h(p);this.#e=t instanceof C?t:void 0}applyComponentProps(){}onStyleElementChanged(e){super.onStyleElementChanged(e),this.#e?.attach(e)}onControllerCleanup(){this.#e?.attach(null),super.onControllerCleanup()}render(e){return<div class="cw-Tabs">{e}</div>}}function ae(s,e){const t=X(["",""],de(s)).t;return X(t.replace(Se,n=>Ce.test(n)?e(n):n))}function W(s,e){const t=e.replaceAll("&","&").replaceAll('"',""").replaceAll("<","<").replaceAll(">",">");return e===""?` ${s}`:` ${s}="${t}"`}function le(s,e){const t=new Set,n=s.replace(N,(l,a)=>{const o=a.toLowerCase(),r=e[o];return t.add(o),r===void 0?l:r===null?"":W(a,r)}),i=Object.entries(e).filter(([l,a])=>typeof a=="string"&&!t.has(l)).map(([l,a])=>W(l,a)).join("");return i===""?n:n.replace(/\s*(\/?)>$/,`${i}$1>`)}function Ae(s,e){if(e.links.size===0)return s;const t=se(e.tabs,e.panels),n=new Map(Array.from(t,([a,o])=>[o,a])),i=e.selected,l=i===void 0?void 0:t.get(i)??e.panels.find(a=>a.id()===i.controls);return ae(s,a=>{const o=Array.from(a.matchAll(N)).find(d=>d[1]===x)?.[2],r=o===void 0?void 0:e.links.get(o);if(r===void 0)return a;const u={[x]:null};return r.panel?r.reference&&(u["aria-labelledby"]=n.get(r)?.id()??null):u["aria-controls"]=t.get(r)?.id()??null,r.panel&&e.selection!==void 0&&(u["aria-hidden"]=r===l?"false":"true",u.hidden=r===l?null:""),le(a,u)})}function Ie(s){const e=h(p),[t,n]=Q(s,["children","class","classList"]);return Ae(<div{...n}class={t.class}classList={{...t.classList,"cw-Tabs":!0}}>{t.children}</div>,e)}const Pe=D(g?()=>Ie:I,()=>we),Ye=s=>w(p.Provider,{value:g?{prefix:ie("cw-tabs"),tabs:[],panels:[],links:new Map,selection:void 0,selected:void 0}:new C,get children(){return w(Pe,s)}});class He extends O{#e;#n;#t;#s;#i;#d;#l;#u;#a;#r;#h;#o;#b;#f;#g;#p;#v;#T;#c;#S;#E;#y;#m;constructor(e){super(e,{styleElementIsFunction:!0});const t=h(S),n=h(p);this.#e="value"in e||"selectedValue"in e,this.#n="attr:aria-orientation"in e,this.#t=t instanceof _?t:void 0,this.#s=n instanceof C?n:void 0,this.#i=i=>this.#_(i),this.#d=i=>this.#V(i),this.#l=i=>this.#J(i),this.#u=i=>this.#X(i),this.#a=null,this.#r=f(()=>M(e)),this.#h=!this.#e&&this.#r!==void 0,this.#o=null,this.#b=null,this.#f=null,this.#g="primary",this.#p="horizontal",this.#v="automatic",this.#T=null,this.#c=null,this.#S=!1,this.#E=!1,this.#y=!1,this.#m=null,this.#t!==void 0&&(this.#t.onChange=()=>this.#x())}#L(){const e=super.styleElement,t=this.#t;return e===null||t===void 0?[]:Array.from(e.querySelectorAll(P)).filter(n=>n.closest(`.${y}`)===e).map(n=>t.get(n)).filter(n=>n!==void 0)}#C(e){const t=super.styleElement,n=e.element();return t!==null&&n!==null&&t.contains(n)&&!L(n)}#I(e){const t=e.element()?.closest("[hidden], [inert]")??null;return this.#C(e)&&(t===null||t.contains(super.styleElement))}#x(){this.#E||(this.#E=!0,queueMicrotask(()=>{this.#E=!1,this.#P(!1)}))}#O(){const e=this.#o,t=this.#r;if(!this.#e&&e!==null&&e.value()===t&&this.#C(e))return e;if(t!==void 0){const n=(this.#t?.withValue(t)??[]).filter(i=>this.#C(i)).sort((i,l)=>R(i.element(),l.element()))[0];if(n!==void 0||this.#e||this.#h)return n??null}else if(this.#e)return null;return this.#L().find(n=>this.#C(n))??null}#P(e){const t=this.#O();t!==null&&(this.#h=!1,this.#e||(this.#r=t.value())),this.#k(t,e),this.#s?.select(t),this.#w(),this.#a?.takeRecords()}#k(e,t){const n=this.#o;if(n!==e){if(n?.select(!1),e?.select(!0),this.#o=e,this.#s?.select(e),!t){this.#A();return}this.#B(n,e),e!==null&&this.#N(e)}}#w(){const e=this.#f,t=this.#o,n=e!==null&&this.#I(e)?e:t!==null&&this.#I(t)?t:this.#L().find(i=>this.#I(i))??null;n!==this.#b&&(this.#b?.stop(!1),n?.stop(!0),this.#b=n)}#B(e,t){const n=this.#R(e),i=this.#R(t),l=t?.element()??null,a=this.#m,[o,r]=a!==null&&a.elem===e?.element()?a.springs:[null,null];if(this.#A(),n===null||i===null||l===null||!n.isConnected||!i.isConnected)return;const u=n.getBoundingClientRect(),d=i.getBoundingClientRect(),c=u.width/d.width;if(d.width===0)return;const b=[F(l,z,u.left+(o?.value??0)-d.left,0,{unit:"px",velocity:o?.velocity??0}),F(l,q,(r?.value??1)*c,1,{velocity:(r?.velocity??0)*c})],v={elem:l,springs:b};this.#m=v,Promise.all(b.map(m=>m.finished)).then(()=>{this.#m===v&&this.#A()},()=>{})}#R(e){return e===null?null:this.#g==="secondary"?e.element():e.content()}#A(){const e=this.#m;if(this.#m=null,e!==null){for(const t of e.springs)t.cancel();e.elem.style.removeProperty(z),e.elem.style.removeProperty(q)}}#N(e){const t=super.styleElement,n=e.element(),i=me(t);if(t===null||n===null||i===void 0||!t.hasAttribute(K)||!t.isConnected)return;const l=t.getBoundingClientRect(),a=n.getBoundingClientRect(),o=i.matchMedia("(prefers-reduced-motion: reduce)").matches,r=l.left+t.clientLeft+t.clientWidth/2;t.scrollBy({behavior:o?"instant":"smooth",left:a.left+a.width/2-r})}#D(e,t){const n=e.value();this.#C(e)&&(this.#e||(this.#r=n,this.#h=!1,this.#k(e,!0),this.#w()),n!==void 0&&Z([this.props.onChange,this.props.onValueChange,this.props.onSelectedChange],n,t))}#H(e,t,n){const i=super.styleElement,l=e.element();V(t,i,()=>{i!==null&&super.styleElement===i&&i.isConnected&&l!==null&&i.contains(l)&&this.#D(e,t)},n)}#M(e){const t=super.styleElement,n=$(e)?e.closest(P):null,i=n===null?void 0:this.#t?.get(n);return n===null||i===void 0||n.closest(`.${y}`)!==t?void 0:[n,i]}#_(e){const t=this.#M(e.target);if(t===void 0)return;const[n,i]=t,l=n===this.#c||this.#v==="automatic"&&n===this.#T;if(this.#c=null,this.#T=null,L(n)){H(n)&&e.preventDefault();return}l||this.#H(i,e,!1)}#J(e){const t=this.#M(e.target);if(t===void 0)return;const[n,i]=t;this.#f=i,this.#w(),this.#v==="automatic"&&!this.#S&&i!==this.#o&&(this.#T=n,this.#H(i,e,!1))}#X(e){const t=super.styleElement,n=e.relatedTarget;t!==null&&$(n)&&t.contains(n)||(this.#f=null,this.#w())}#F(e,t,n){const i=super.styleElement,l=this.#p==="horizontal",a=l&&i!==null&&pe(i).direction==="rtl",o=l?a?"ArrowLeft":"ArrowRight":"ArrowDown",r=l?a?"ArrowRight":"ArrowLeft":"ArrowUp",u=new Map,d=e.length,[c,b]=n==="Home"?[-1,1]:n==="End"?[d,-1]:n===o?[t,1]:n===r?[t,-1]:[0,0],v=n!=="Home"&&n!=="End";for(let m=1;b!==0&&m<=d;m++){const E=c+b*m,T=e[v?(E%d+d)%d:E];if(T===void 0)break;if(!L(T)&&ve(T,u))return e.indexOf(T)}return-1}#V(e){const t=super.styleElement,n=this.#M(e.target);if(t===null||n===void 0)return;const[i,l]=n;if(e.key==="Enter"||e.key===" "){if(this.#v!=="manual"||L(i))return;const d=H(i)&&e.key==="Enter";d&&(this.#c=i),this.#H(l,e,!d);return}const a=Array.from(t.querySelectorAll(P)).filter(d=>d.closest(`.${y}`)===t),o=this.#F(a,a.indexOf(i),e.key),r=a[o],u=r===void 0?void 0:this.#t?.get(r);r===void 0||u===void 0||V(e,t,()=>{if(!(super.styleElement!==t||!t.isConnected||!t.contains(r))){this.#S=!0;try{r.focus()}finally{this.#S=!1}this.#v==="automatic"&&this.#D(u,e)}})}applyComponentProps(){const e=super.readProps(["activation","activationMode","orientation","scrollable","selectedValue","value","variant"]);e.variantChanged&&(this.#g=e.variant??"primary",super.setAttribute(Ee,this.#g)),e.scrollableChanged&&super.setAttribute(K,e.scrollable===!0?"true":void 0),e.orientationChanged&&(this.#p=e.orientation??"horizontal",super.setClass("orientation",`_cw-TabList-${this.#p}`),this.#n||super.setAttribute("aria-orientation",this.#p==="vertical"?"vertical":void 0)),(e.activationModeChanged||e.activationChanged)&&(this.#v=e.activationMode??e.activation??"automatic"),(e.valueChanged||e.selectedValueChanged)&&this.#e?(this.#r=M(e),this.#P(this.#y)):this.#P(!1),this.#y=!0}onStyleElementChanged(e){const t=super.styleElement,n=e===null?void 0:ee(e);super.onStyleElementChanged(e),t?.removeEventListener("click",this.#i),t?.removeEventListener("keydown",this.#d),t?.removeEventListener("focusin",this.#l),t?.removeEventListener("focusout",this.#u),e?.addEventListener("click",this.#i),e?.addEventListener("keydown",this.#d),e?.addEventListener("focusin",this.#l),e?.addEventListener("focusout",this.#u),this.#a?.disconnect(),this.#a=null,e!==null&&n!==void 0&&(this.#a=new n(()=>this.#x()),this.#a.observe(e,{attributeFilter:["aria-disabled","disabled","hidden","inert"],attributes:!0,childList:!0,subtree:!0}))}onControllerCleanup(){this.#a?.disconnect(),this.#a=null,this.#A(),super.onControllerCleanup()}render(e){return<div class={y}role="tablist">{e}</div>}}function Me(s,e){return ae(s,t=>Array.from(t.matchAll(N)).some(i=>i[1]===k&&i[2]===e.fallback)?le(t,{[k]:null,tabindex:e.selected===void 0?"0":"-1"}):t)}function xe(s,e){const t=h(S),n=h(p),[i,l]=Q(s,["children","class","classList"]),a=e.orientation??"horizontal";return n!==void 0&&(n.selection??=t),Me(<div aria-orientation={a==="vertical"?"vertical":void 0}{...l}class={i.class}classList={{...i.classList,[`_cw-TabList-${a}`]:!0,[y]:!0}}data-cw-tab-scrollable={e.scrollable===!0?"true":void 0}data-cw-tab-variant={e.variant??"primary"}role="tablist">{i.children}</div>,t)}const ke=D(g?()=>xe:I,()=>He);function Re(s){return{value:f(()=>M(s)),controlled:"value"in s||"selectedValue"in s,selected:void 0,enabledSeen:!1,fallback:ie("cw-tablist")}}const J=s=>w(S.Provider,{value:g?Re(s):new _,get children(){return w(ke,s)}});class De extends be{#e;#n;#t;#s;#i;#d;#l;#u;#a;#r;#h;#o;#b;#f;#g;#p;#v;#T;#c;constructor(e){super(e,{baseInteractionCssClassName:"cw-Tab",enabledInteractionStates:U,styleElementIsFunction:!1});const t=h(S),n=h(p);this.#e=t instanceof _?t:void 0,this.#n=n instanceof C?n:void 0,this.#s=A("cw-tab"),this.#i="selected"in e,this.#d="attr:aria-controls"in e,this.#l="attr:aria-selected"in e,this.#u=a=>this.#L(a),this.#a=a=>Te(a,super.functionElement),this.#h=null,this.#o=f(()=>e.id??e["attr:id"]??this.#s),this.#b=f(()=>e.value),this.#f=f(()=>e.panelId??e.controls),this.#g=void 0,this.#p=f(()=>(this.#i?e.selected:e.defaultSelected)===!0),this.#v=!1,this.#T=!1,this.#c=!1,this.#t={element:()=>super.functionElement,content:()=>this.#h,value:()=>this.#b,id:()=>this.#o,explicitPanelId:()=>this.#f,link:a=>{this.#g=a?.id(),this.#E()},select:a=>{a!==this.#v&&(this.#v=a,this.#y())},stop:a=>{a!==this.#T&&(this.#T=a,this.#m())}};const i=this.#e?.add(this.#t),l=this.#n?.addTab(this.#t);this.#r=()=>{i?.(),l?.()}}#S(e){const t=e??this.#s;t!==this.#o&&(this.#o=t,this.#n?.invalidate()),super.setAttribute("id",t)}#E(){this.#d||super.setAttribute("aria-controls",this.#f??this.#g)}#y(){const e=this.#e!==void 0,t=e?this.#v:this.#p;super.setClass(te,t),(e||!this.#l)&&super.setAttribute("aria-selected",t?"true":"false")}#m(){const e=this.#e!==void 0?this.#T:this.#p;super.setAttribute("tabindex",this.#c?-1:this.props.tabIndex??(e?0:-1))}#L(e){const t=super.functionElement;if(this.#c){H(t)&&e.preventDefault();return}this.#e===void 0&&(this.#i||(this.#p=!0),Z([this.props.onChange,this.props.onSelect,this.props.onSelectedChange],!0,e),this.#y(),this.#m())}applyComponentProps(){super.applyComponentProps();const e=super.readProps(["attr:id","controls","disabled","href","id","panelId","selected","tabIndex","value"]);(e.disabledChanged||e.hrefChanged)&&(this.#c=e.disabled===!0,super.setClass(ne,this.#c),super.setEnabledInteractionStates(this.#c?0:U),super.setAttribute("aria-disabled",this.#c?"true":void 0),super.setAttribute("disabled",this.#c&&e.href===void 0)),e.hrefChanged&&super.setAttribute("href",e.href),this.#S(e.id??e["attr:id"]),e.valueChanged&&(this.#b=e.value,super.setAttribute(B,e.value),this.#n?.invalidate(),this.#e?.invalidate()),(e.panelIdChanged||e.controlsChanged)&&(this.#f=e.panelId??e.controls,this.#n?.invalidate()),e.selectedChanged&&this.#i&&(this.#p=e.selected===!0),this.#E(),this.#y(),this.#m()}onFunctionElementChanged(e){const t=super.functionElement;super.onFunctionElementChanged(e),t?.removeEventListener("click",this.#u),t?.removeEventListener("keydown",this.#a),e?.addEventListener("click",this.#u),e?.addEventListener("keydown",this.#a),this.#e?.invalidate()}onControllerCleanup(){this.#r(),super.onControllerCleanup()}render(e,t){const n=<span class="cw-Tab-content">
|
|
1
|
+
import{createComponent as w,createContext as Y,createMemo as oe,mergeProps as G,splitProps as Q,untrack as f,useContext as h}from"solid-js";import{escape as de,isServer as g,ssr as X}from"solid-js/web";import{defineDomComponent as D}from"..";import{DomController as O}from"../dom/client";import{applySpringMotion as F}from"../motion";import{FocusState as ue,HoverState as ce,PressState as he,defineInteractableComponent as fe}from"../state";import{InteractableController as be}from"../state/controller";import{computedStyleOf as pe,dedupeCallbacks as Z,deferAfterDelegatedCancellation as V,isAnchorElement as H,isDisabledElement as L,isElementNode as $,isVisibleElement as ve,mutationObserverOf as ee,ownerWindow as me,preventDisabledLinkKey as Te,resolveNavigationSlots as ge,selectedValueOf as M,uniqueId as A,unreachableServerRender as I}from"./base";import"./navigation.css";const y="cw-TabList",P="[role=tab]",te="cw-Tab-selected",ne="cw-Tab-disabled",B="data-cw-tab-value",Ee="data-cw-tab-variant",K="data-cw-tab-scrollable",ye="data-cw-tab-icon-placement",x="data-cw-tabs-link",k="data-cw-tab-fallback",U=ue|ce|he,z="--_CW-TAB-INDICATOR_SHIFT",q="--_CW-TAB-INDICATOR_STRETCH",Se=new RegExp(["<!--[\\s\\S]*?-->",`<(script|style|textarea|title)\\b(?:[^>"']|"[^"]*"|'[^']*')*>[\\s\\S]*?<\\/\\1\\s*>`,`<(?:[^>"']|"[^"]*"|'[^']*')*>`].join("|"),"gi"),Ce=/^<(?:a|button|div)\s/i,N=/\s+([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g;let Le=0;const p=Y(),S=Y();function ie(s){return`${s}-${++Le}`;}function R(s,e){if(s===null||e===null||s===e)return 0;const t=s.compareDocumentPosition(e);return(t&1)!==0?0:(t&4)!==0?-1:(t&2)!==0?1:0;}function j(s){const e=/* @__PURE__ */new Map();for(const t of s){const n=t.value(),i=n===void 0?void 0:e.get(n);i!==void 0?i.push(t):n!==void 0&&e.set(n,[t]);}return e;}function se(s,e){const t=new Map(s.map(o=>[o.id(),o])),n=new Map(e.map(o=>[o.id(),o])),i=/* @__PURE__ */new Map(),l=/* @__PURE__ */new Set();for(const o of s){const r=n.get(o.explicitPanelId()??"");r!==void 0&&!l.has(r)&&(i.set(o,r),l.add(r));}for(const o of e){const r=t.get(o.explicitTabId()??"");r!==void 0&&!i.has(r)&&!l.has(o)&&(i.set(r,o),l.add(o));}const a=j(e.filter(o=>!l.has(o)));for(const[o,r]of j(s.filter(u=>!i.has(u))))r.forEach((u,d)=>{const c=a.get(o)?.[d];c!==void 0&&i.set(u,c);});return i;}class C{#e;#n;#t;#s;#i;#d;#l;constructor(){this.#e=[],this.#n=[],this.#t=/* @__PURE__ */new Map(),this.#s=null,this.#i=null,this.#d=!1,this.#l=!1;}attach(e){const t=e===null?void 0:ee(e);this.#s?.disconnect(),this.#s=null,!(e===null||t===void 0)&&(this.#s=new t(()=>this.invalidate()),this.#s.observe(e,{childList:!0,subtree:!0}));}addTab(e){return this.#e.push(e),this.#a(),()=>{this.#e.splice(this.#e.indexOf(e),1),this.#t.delete(e),this.#i===e&&(this.#i=null),this.invalidate();};}addPanel(e){return this.#n.push(e),this.#a(),()=>{this.#n.splice(this.#n.indexOf(e),1),this.invalidate();};}select(e){if(this.#d&&e===this.#i)return;const t=this.#i===null?void 0:this.#u(this.#i),n=e===null?void 0:this.#u(e);if(this.#i=e,!this.#d){this.#d=!0;for(const i of this.#n)i.show(i===n);return;}t!==n&&(t?.show(!1),n?.show(!0));}invalidate(){this.#l||(this.#l=!0,queueMicrotask(()=>{this.#l=!1,this.#r([...this.#e].sort((e,t)=>R(e.element(),t.element())),[...this.#n].sort((e,t)=>R(e.element(),t.element()))),this.#s?.takeRecords();}));}#u(e){const t=e.element()?.getAttribute("aria-controls");return this.#t.get(e)??(t==null?void 0:this.#n.find(n=>n.id()===t));}#a(){this.#r(this.#e,this.#n);}#r(e,t){const n=se(e,t),i=new Map(Array.from(n,([l,a])=>[a,l]));this.#t.clear();for(const l of e){const a=n.get(l);a!==void 0&&this.#t.set(l,a),l.link(a??null);}for(const l of t)l.link(i.get(l)??null);if(this.#d){const l=this.#i===null?void 0:this.#u(this.#i);for(const a of t)a.show(a===l);}}}class _{#e;#n;#t;#s;onChange;constructor(){this.#e=/* @__PURE__ */new Set(),this.#n=/* @__PURE__ */new Map(),this.#t=/* @__PURE__ */new Map(),this.#s=!1,this.onChange=()=>{};}add(e){return this.#e.add(e),this.invalidate(),()=>{this.#e.delete(e),this.invalidate();};}invalidate(){this.#s=!0,this.onChange();}get(e){return this.#i(),this.#n.get(e);}withValue(e){return this.#i(),this.#t.get(e)??[];}#i(){if(this.#s){this.#s=!1,this.#n.clear(),this.#t.clear();for(const e of this.#e){const t=e.element(),n=e.value(),i=n===void 0?void 0:this.#t.get(n);t!==null&&this.#n.set(t,e),i!==void 0?i.push(e):n!==void 0&&this.#t.set(n,[e]);}}}}class we extends O{#e;constructor(e){super(e,{styleElementIsFunction:!0});const t=h(p);this.#e=t instanceof C?t:void 0;}applyComponentProps(){}onStyleElementChanged(e){super.onStyleElementChanged(e),this.#e?.attach(e);}onControllerCleanup(){this.#e?.attach(null),super.onControllerCleanup();}render(e){return<div class="cw-Tabs">{e}</div>;}}function ae(s,e){const t=X(["",""],de(s)).t;return X(t.replace(Se,n=>Ce.test(n)?e(n):n));}function W(s,e){const t=e.replaceAll("&","&").replaceAll('"',""").replaceAll("<","<").replaceAll(">",">");return e===""?` ${s}`:` ${s}="${t}"`;}function le(s,e){const t=/* @__PURE__ */new Set(),n=s.replace(N,(l,a)=>{const o=a.toLowerCase(),r=e[o];return t.add(o),r===void 0?l:r===null?"":W(a,r);}),i=Object.entries(e).filter(([l,a])=>typeof a=="string"&&!t.has(l)).map(([l,a])=>W(l,a)).join("");return i===""?n:n.replace(/\s*(\/?)>$/,`${i}$1>`);}function Ae(s,e){if(e.links.size===0)return s;const t=se(e.tabs,e.panels),n=new Map(Array.from(t,([a,o])=>[o,a])),i=e.selected,l=i===void 0?void 0:t.get(i)??e.panels.find(a=>a.id()===i.controls);return ae(s,a=>{const o=Array.from(a.matchAll(N)).find(d=>d[1]===x)?.[2],r=o===void 0?void 0:e.links.get(o);if(r===void 0)return a;const u={[x]:null};return r.panel?r.reference&&(u["aria-labelledby"]=n.get(r)?.id()??null):u["aria-controls"]=t.get(r)?.id()??null,r.panel&&e.selection!==void 0&&(u["aria-hidden"]=r===l?"false":"true",u.hidden=r===l?null:""),le(a,u);});}function Ie(s){const e=h(p),[t,n]=Q(s,["children","class","classList"]);return Ae(<div{...n}class={t.class}classList={{...t.classList,"cw-Tabs":!0}}>{t.children}</div>,e);}const Pe=/* @__PURE__ */D(g?()=>Ie:I,()=>we),Ye=s=>w(p.Provider,{value:g?{prefix:ie("cw-tabs"),tabs:[],panels:[],links:/* @__PURE__ */new Map(),selection:void 0,selected:void 0}:new C(),get children(){return w(Pe,s);}});class He extends O{#e;#n;#t;#s;#i;#d;#l;#u;#a;#r;#h;#o;#b;#f;#g;#p;#v;#T;#c;#S;#E;#y;#m;constructor(e){super(e,{styleElementIsFunction:!0});const t=h(S),n=h(p);this.#e="value"in e||"selectedValue"in e,this.#n="attr:aria-orientation"in e,this.#t=t instanceof _?t:void 0,this.#s=n instanceof C?n:void 0,this.#i=i=>this.#_(i),this.#d=i=>this.#V(i),this.#l=i=>this.#J(i),this.#u=i=>this.#X(i),this.#a=null,this.#r=f(()=>M(e)),this.#h=!this.#e&&this.#r!==void 0,this.#o=null,this.#b=null,this.#f=null,this.#g="primary",this.#p="horizontal",this.#v="automatic",this.#T=null,this.#c=null,this.#S=!1,this.#E=!1,this.#y=!1,this.#m=null,this.#t!==void 0&&(this.#t.onChange=()=>this.#x());}#L(){const e=super.styleElement,t=this.#t;return e===null||t===void 0?[]:Array.from(e.querySelectorAll(P)).filter(n=>n.closest(`.${y}`)===e).map(n=>t.get(n)).filter(n=>n!==void 0);}#C(e){const t=super.styleElement,n=e.element();return t!==null&&n!==null&&t.contains(n)&&!L(n);}#I(e){const t=e.element()?.closest("[hidden], [inert]")??null;return this.#C(e)&&(t===null||t.contains(super.styleElement));}#x(){this.#E||(this.#E=!0,queueMicrotask(()=>{this.#E=!1,this.#P(!1);}));}#O(){const e=this.#o,t=this.#r;if(!this.#e&&e!==null&&e.value()===t&&this.#C(e))return e;if(t!==void 0){const n=(this.#t?.withValue(t)??[]).filter(i=>this.#C(i)).sort((i,l)=>R(i.element(),l.element()))[0];if(n!==void 0||this.#e||this.#h)return n??null;}else if(this.#e)return null;return this.#L().find(n=>this.#C(n))??null;}#P(e){const t=this.#O();t!==null&&(this.#h=!1,this.#e||(this.#r=t.value())),this.#k(t,e),this.#s?.select(t),this.#w(),this.#a?.takeRecords();}#k(e,t){const n=this.#o;if(n!==e){if(n?.select(!1),e?.select(!0),this.#o=e,this.#s?.select(e),!t){this.#A();return;}this.#B(n,e),e!==null&&this.#N(e);}}#w(){const e=this.#f,t=this.#o,n=e!==null&&this.#I(e)?e:t!==null&&this.#I(t)?t:this.#L().find(i=>this.#I(i))??null;n!==this.#b&&(this.#b?.stop(!1),n?.stop(!0),this.#b=n);}#B(e,t){const n=this.#R(e),i=this.#R(t),l=t?.element()??null,a=this.#m,[o,r]=a!==null&&a.elem===e?.element()?a.springs:[null,null];if(this.#A(),n===null||i===null||l===null||!n.isConnected||!i.isConnected)return;const u=n.getBoundingClientRect(),d=i.getBoundingClientRect(),c=u.width/d.width;if(d.width===0)return;const b=[F(l,z,u.left+(o?.value??0)-d.left,0,{unit:"px",velocity:o?.velocity??0}),F(l,q,(r?.value??1)*c,1,{velocity:(r?.velocity??0)*c})],v={elem:l,springs:b};this.#m=v,Promise.all(b.map(m=>m.finished)).then(()=>{this.#m===v&&this.#A();},()=>{});}#R(e){return e===null?null:this.#g==="secondary"?e.element():e.content();}#A(){const e=this.#m;if(this.#m=null,e!==null){for(const t of e.springs)t.cancel();e.elem.style.removeProperty(z),e.elem.style.removeProperty(q);}}#N(e){const t=super.styleElement,n=e.element(),i=me(t);if(t===null||n===null||i===void 0||!t.hasAttribute(K)||!t.isConnected)return;const l=t.getBoundingClientRect(),a=n.getBoundingClientRect(),o=i.matchMedia("(prefers-reduced-motion: reduce)").matches,r=l.left+t.clientLeft+t.clientWidth/2;t.scrollBy({behavior:o?"instant":"smooth",left:a.left+a.width/2-r});}#D(e,t){const n=e.value();this.#C(e)&&(this.#e||(this.#r=n,this.#h=!1,this.#k(e,!0),this.#w()),n!==void 0&&Z([this.props.onChange,this.props.onValueChange,this.props.onSelectedChange],n,t));}#H(e,t,n){const i=super.styleElement,l=e.element();V(t,i,()=>{i!==null&&super.styleElement===i&&i.isConnected&&l!==null&&i.contains(l)&&this.#D(e,t);},n);}#M(e){const t=super.styleElement,n=$(e)?e.closest(P):null,i=n===null?void 0:this.#t?.get(n);return n===null||i===void 0||n.closest(`.${y}`)!==t?void 0:[n,i];}#_(e){const t=this.#M(e.target);if(t===void 0)return;const[n,i]=t,l=n===this.#c||this.#v==="automatic"&&n===this.#T;if(this.#c=null,this.#T=null,L(n)){H(n)&&e.preventDefault();return;}l||this.#H(i,e,!1);}#J(e){const t=this.#M(e.target);if(t===void 0)return;const[n,i]=t;this.#f=i,this.#w(),this.#v==="automatic"&&!this.#S&&i!==this.#o&&(this.#T=n,this.#H(i,e,!1));}#X(e){const t=super.styleElement,n=e.relatedTarget;t!==null&&$(n)&&t.contains(n)||(this.#f=null,this.#w());}#F(e,t,n){const i=super.styleElement,l=this.#p==="horizontal",a=l&&i!==null&&pe(i).direction==="rtl",o=l?a?"ArrowLeft":"ArrowRight":"ArrowDown",r=l?a?"ArrowRight":"ArrowLeft":"ArrowUp",u=/* @__PURE__ */new Map(),d=e.length,[c,b]=n==="Home"?[-1,1]:n==="End"?[d,-1]:n===o?[t,1]:n===r?[t,-1]:[0,0],v=n!=="Home"&&n!=="End";for(let m=1;b!==0&&m<=d;m++){const E=c+b*m,T=e[v?(E%d+d)%d:E];if(T===void 0)break;if(!L(T)&&ve(T,u))return e.indexOf(T);}return-1;}#V(e){const t=super.styleElement,n=this.#M(e.target);if(t===null||n===void 0)return;const[i,l]=n;if(e.key==="Enter"||e.key===" "){if(this.#v!=="manual"||L(i))return;const d=H(i)&&e.key==="Enter";d&&(this.#c=i),this.#H(l,e,!d);return;}const a=Array.from(t.querySelectorAll(P)).filter(d=>d.closest(`.${y}`)===t),o=this.#F(a,a.indexOf(i),e.key),r=a[o],u=r===void 0?void 0:this.#t?.get(r);r===void 0||u===void 0||V(e,t,()=>{if(!(super.styleElement!==t||!t.isConnected||!t.contains(r))){this.#S=!0;try{r.focus();}finally{this.#S=!1;}this.#v==="automatic"&&this.#D(u,e);}});}applyComponentProps(){const e=super.readProps(["activation","activationMode","orientation","scrollable","selectedValue","value","variant"]);e.variantChanged&&(this.#g=e.variant??"primary",super.setAttribute(Ee,this.#g)),e.scrollableChanged&&super.setAttribute(K,e.scrollable===!0?"true":void 0),e.orientationChanged&&(this.#p=e.orientation??"horizontal",super.setClass("orientation",`_cw-TabList-${this.#p}`),this.#n||super.setAttribute("aria-orientation",this.#p==="vertical"?"vertical":void 0)),(e.activationModeChanged||e.activationChanged)&&(this.#v=e.activationMode??e.activation??"automatic"),(e.valueChanged||e.selectedValueChanged)&&this.#e?(this.#r=M(e),this.#P(this.#y)):this.#P(!1),this.#y=!0;}onStyleElementChanged(e){const t=super.styleElement,n=e===null?void 0:ee(e);super.onStyleElementChanged(e),t?.removeEventListener("click",this.#i),t?.removeEventListener("keydown",this.#d),t?.removeEventListener("focusin",this.#l),t?.removeEventListener("focusout",this.#u),e?.addEventListener("click",this.#i),e?.addEventListener("keydown",this.#d),e?.addEventListener("focusin",this.#l),e?.addEventListener("focusout",this.#u),this.#a?.disconnect(),this.#a=null,e!==null&&n!==void 0&&(this.#a=new n(()=>this.#x()),this.#a.observe(e,{attributeFilter:["aria-disabled","disabled","hidden","inert"],attributes:!0,childList:!0,subtree:!0}));}onControllerCleanup(){this.#a?.disconnect(),this.#a=null,this.#A(),super.onControllerCleanup();}render(e){return<div class={y}role="tablist">{e}</div>;}}function Me(s,e){return ae(s,t=>Array.from(t.matchAll(N)).some(i=>i[1]===k&&i[2]===e.fallback)?le(t,{[k]:null,tabindex:e.selected===void 0?"0":"-1"}):t);}function xe(s,e){const t=h(S),n=h(p),[i,l]=Q(s,["children","class","classList"]),a=e.orientation??"horizontal";return n!==void 0&&(n.selection??=t),Me(<div aria-orientation={a==="vertical"?"vertical":void 0}{...l}class={i.class}classList={{...i.classList,[`_cw-TabList-${a}`]:!0,[y]:!0}}data-cw-tab-scrollable={e.scrollable===!0?"true":void 0}data-cw-tab-variant={e.variant??"primary"}role="tablist">{i.children}</div>,t);}const ke=/* @__PURE__ */D(g?()=>xe:I,()=>He);function Re(s){return{value:f(()=>M(s)),controlled:"value"in s||"selectedValue"in s,selected:void 0,enabledSeen:!1,fallback:ie("cw-tablist")};}const J=s=>w(S.Provider,{value:g?Re(s):new _(),get children(){return w(ke,s);}});class De extends be{#e;#n;#t;#s;#i;#d;#l;#u;#a;#r;#h;#o;#b;#f;#g;#p;#v;#T;#c;constructor(e){super(e,{baseInteractionCssClassName:"cw-Tab",enabledInteractionStates:U,styleElementIsFunction:!1});const t=h(S),n=h(p);this.#e=t instanceof _?t:void 0,this.#n=n instanceof C?n:void 0,this.#s=A("cw-tab"),this.#i="selected"in e,this.#d="attr:aria-controls"in e,this.#l="attr:aria-selected"in e,this.#u=a=>this.#L(a),this.#a=a=>Te(a,super.functionElement),this.#h=null,this.#o=f(()=>e.id??e["attr:id"]??this.#s),this.#b=f(()=>e.value),this.#f=f(()=>e.panelId??e.controls),this.#g=void 0,this.#p=f(()=>(this.#i?e.selected:e.defaultSelected)===!0),this.#v=!1,this.#T=!1,this.#c=!1,this.#t={element:()=>super.functionElement,content:()=>this.#h,value:()=>this.#b,id:()=>this.#o,explicitPanelId:()=>this.#f,link:a=>{this.#g=a?.id(),this.#E();},select:a=>{a!==this.#v&&(this.#v=a,this.#y());},stop:a=>{a!==this.#T&&(this.#T=a,this.#m());}};const i=this.#e?.add(this.#t),l=this.#n?.addTab(this.#t);this.#r=()=>{i?.(),l?.();};}#S(e){const t=e??this.#s;t!==this.#o&&(this.#o=t,this.#n?.invalidate()),super.setAttribute("id",t);}#E(){this.#d||super.setAttribute("aria-controls",this.#f??this.#g);}#y(){const e=this.#e!==void 0,t=e?this.#v:this.#p;super.setClass(te,t),(e||!this.#l)&&super.setAttribute("aria-selected",t?"true":"false");}#m(){const e=this.#e!==void 0?this.#T:this.#p;super.setAttribute("tabindex",this.#c?-1:this.props.tabIndex??(e?0:-1));}#L(e){const t=super.functionElement;if(this.#c){H(t)&&e.preventDefault();return;}this.#e===void 0&&(this.#i||(this.#p=!0),Z([this.props.onChange,this.props.onSelect,this.props.onSelectedChange],!0,e),this.#y(),this.#m());}applyComponentProps(){super.applyComponentProps();const e=super.readProps(["attr:id","controls","disabled","href","id","panelId","selected","tabIndex","value"]);(e.disabledChanged||e.hrefChanged)&&(this.#c=e.disabled===!0,super.setClass(ne,this.#c),super.setEnabledInteractionStates(this.#c?0:U),super.setAttribute("aria-disabled",this.#c?"true":void 0),super.setAttribute("disabled",this.#c&&e.href===void 0)),e.hrefChanged&&super.setAttribute("href",e.href),this.#S(e.id??e["attr:id"]),e.valueChanged&&(this.#b=e.value,super.setAttribute(B,e.value),this.#n?.invalidate(),this.#e?.invalidate()),(e.panelIdChanged||e.controlsChanged)&&(this.#f=e.panelId??e.controls,this.#n?.invalidate()),e.selectedChanged&&this.#i&&(this.#p=e.selected===!0),this.#E(),this.#y(),this.#m();}onFunctionElementChanged(e){const t=super.functionElement;super.onFunctionElementChanged(e),t?.removeEventListener("click",this.#u),t?.removeEventListener("keydown",this.#a),e?.addEventListener("click",this.#u),e?.addEventListener("keydown",this.#a),this.#e?.invalidate();}onControllerCleanup(){this.#r(),super.onControllerCleanup();}render(e,t){const n=<span class="cw-Tab-content">
|
|
2
2
|
<span class="cw-Tab-icon">{this.props.icon}</span>
|
|
3
3
|
<span class="cw-Tab-label">{this.props.label??e}</span>
|
|
4
|
-
</span>,i=oe(()=>this.props.href!==void 0?<a class="cw-Tab"ref={t}role="tab">{n}</a>:<button class="cw-Tab"ref={t}role="tab"type="button">{n}</button>);return this.#h=n,i}}function Oe(s,e,t){const n=!t&&!s.enabledSeen,i=!t&&s.selected===void 0&&(s.value===void 0?!s.controlled&&n:e===s.value);return s.enabledSeen||=!t,i&&(s.selected=e),{selected:i,tabIndex:i?0:-1,fallback:n&&!i?s.fallback:void 0}}function re(s,e){const t=`${s.prefix}-${s.links.size}`;if(e.panel?s.panels.push(e):s.tabs.push(e),!(!e.reference&&!e.panel))return s.links.set(t,e),t}function Be(s,e){const t=h(S),n=h(p),i=A("cw-tab"),l=s,a=e.disabled===!0,o=e.id??l.id??i,r=e.panelId??e.controls,u="aria-controls"in s,d=u?l["aria-controls"]:r,c=t===void 0?void 0:Oe(t,e.value,a),b=c?.selected??("selected"in e?e.selected:e.defaultSelected)===!0,v={panel:!1,id:()=>o,value:()=>e.value,explicitPanelId:()=>r,controls:d,reference:!u&&r===void 0},m=n===void 0?void 0:re(n,v),E=<span class="cw-Tab-content">
|
|
4
|
+
</span>,i=oe(()=>this.props.href!==void 0?<a class="cw-Tab"ref={t}role="tab">{n}</a>:<button class="cw-Tab"ref={t}role="tab"type="button">{n}</button>);return this.#h=n,i;}}function Oe(s,e,t){const n=!t&&!s.enabledSeen,i=!t&&s.selected===void 0&&(s.value===void 0?!s.controlled&&n:e===s.value);return s.enabledSeen||=!t,i&&(s.selected=e),{selected:i,tabIndex:i?0:-1,fallback:n&&!i?s.fallback:void 0};}function re(s,e){const t=`${s.prefix}-${s.links.size}`;if(e.panel?s.panels.push(e):s.tabs.push(e),!(!e.reference&&!e.panel))return s.links.set(t,e),t;}function Be(s,e){const t=h(S),n=h(p),i=A("cw-tab"),l=s,a=e.disabled===!0,o=e.id??l.id??i,r=e.panelId??e.controls,u="aria-controls"in s,d=u?l["aria-controls"]:r,c=t===void 0?void 0:Oe(t,e.value,a),b=c?.selected??("selected"in e?e.selected:e.defaultSelected)===!0,v={panel:!1,id:()=>o,value:()=>e.value,explicitPanelId:()=>r,controls:d,reference:!u&&r===void 0},m=n===void 0?void 0:re(n,v),E=<span class="cw-Tab-content">
|
|
5
5
|
<span class="cw-Tab-icon">{e.icon}</span>
|
|
6
6
|
<span class="cw-Tab-label">{e.label??s.children}</span>
|
|
7
|
-
</span>,T={"aria-controls":d,"aria-disabled":a?"true":void 0,"aria-selected":c===void 0&&"aria-selected"in s?l["aria-selected"]:b?"true":"false",classList:{...s.classList,[ne]:a,[te]:b,"cw-Tab":!0},[k]:e.tabIndex===void 0?c?.fallback:void 0,[x]:m,[B]:e.value,id:o,role:"tab",tabIndex:a?-1:e.tabIndex??c?.tabIndex??(b?0:-1)};return n!==void 0&&c?.selected===!0&&n.selection===t&&(n.selected=v),e.href===void 0?<button{...s}{...T}disabled={a}type="button">{E}</button>:<a{...s}{...T}href={e.href}>{E}</a
|
|
7
|
+
</span>,T={"aria-controls":d,"aria-disabled":a?"true":void 0,"aria-selected":c===void 0&&"aria-selected"in s?l["aria-selected"]:b?"true":"false",classList:{...s.classList,[ne]:a,[te]:b,"cw-Tab":!0},[k]:e.tabIndex===void 0?c?.fallback:void 0,[x]:m,[B]:e.value,id:o,role:"tab",tabIndex:a?-1:e.tabIndex??c?.tabIndex??(b?0:-1)};return n!==void 0&&c?.selected===!0&&n.selection===t&&(n.selected=v),e.href===void 0?<button{...s}{...T}disabled={a}type="button">{E}</button>:<a{...s}{...T}href={e.href}>{E}</a>;}const Ne=/* @__PURE__ */fe(g?()=>Be:I,()=>De),_e=s=>Ne(ge(s,void 0,["icon","label"])),Ge=s=>{const e=G(s,{[`attr:${ye}`]:"start"});return _e(e);};class Je extends O{#e;#n;#t;#s;#i;#d;#l;#u;#a;#r;#h;#o;constructor(e){super(e,{styleElementIsFunction:!0});const t=h(p);this.#e=t instanceof C?t:void 0,this.#t=A("cw-tabpanel"),this.#s="active"in e,this.#i="attr:aria-labelledby"in e,this.#l=f(()=>e.id??e["attr:id"]??this.#t),this.#u=f(()=>e.value),this.#a=f(()=>e.tabId),this.#r=void 0,this.#h=f(()=>(this.#s?e.active:e.defaultActive)??!0),this.#o=void 0,this.#n={element:()=>super.functionElement,value:()=>this.#u,id:()=>this.#l,explicitTabId:()=>this.#a,link:n=>{this.#r=n?.id(),this.#b();},show:n=>{n!==this.#o&&(this.#o=n,this.#f());}},this.#d=this.#e?.addPanel(this.#n)??(()=>{});}#b(){this.#i||super.setAttribute("aria-labelledby",this.#a??this.#r);}#f(){const e=this.#o??this.#h;super.setAttribute("hidden",!e),super.setAttribute("aria-hidden",e?"false":"true");}applyComponentProps(){const e=super.readProps(["active","attr:id","id","tabId","value"]),t=e.id??e["attr:id"]??this.#t;t!==this.#l&&(this.#l=t,this.#e?.invalidate()),super.setAttribute("id",t),e.valueChanged&&(this.#u=e.value,super.setAttribute(B,e.value),this.#e?.invalidate()),e.tabIdChanged&&(this.#a=e.tabId,this.#e?.invalidate()),e.activeChanged&&this.#s&&(this.#h=e.active??!0),this.#b(),this.#f();}onControllerCleanup(){this.#d(),super.onControllerCleanup();}render(e){return<div class="cw-TabPanel"role="tabpanel"tabIndex={0}>{e}</div>;}}function Xe(s,e){const t=h(p),n=A("cw-tabpanel"),i=s,l=e.id??i.id??n,a="aria-labelledby"in s,o=("active"in e?e.active:e.defaultActive)??!0,r=t===void 0?void 0:re(t,{panel:!0,id:()=>l,value:()=>e.value,explicitTabId:()=>e.tabId,reference:!a&&e.tabId===void 0});return<div{...s}aria-hidden={o?"false":"true"}aria-labelledby={a?i["aria-labelledby"]:e.tabId}classList={{...s.classList,"cw-TabPanel":!0}}data-cw-tab-value={e.value}data-cw-tabs-link={r}hidden={!o}id={l}role="tabpanel"tabIndex={0}>{s.children}</div>;}const Qe=/* @__PURE__ */D(g?()=>Xe:I,()=>Je),Ze=J,et=s=>{const e=G({variant:"secondary"},s);return J(e);},tt=J;export{Ge as LeadingIconTab,Ze as PrimaryTabRow,et as SecondaryTabRow,_e as Tab,De as TabController,J as TabList,He as TabListController,Qe as TabPanel,Je as TabPanelController,tt as TabRow,Ye as Tabs,we as TabsController};
|