@pg-labs-incubator/cobweb 0.0.0-stage → 0.0.2
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/LICENSE +163 -0
- package/README.md +82 -2
- package/package.json +112 -3
- package/src/action/action.yaml +291 -0
- package/src/action/button-group.yaml +56 -0
- package/src/action/button.yaml +239 -0
- package/src/action/split-button.yaml +87 -0
- package/src/color/color.yaml +181 -0
- package/src/color/palette.yaml +147 -0
- package/src/container/card.yaml +170 -0
- package/src/container/corner-radius.yaml +50 -0
- package/src/container/elevation.yaml +19 -0
- package/src/design.yaml +41 -0
- package/src/feedback/feedback.yaml +225 -0
- package/src/icon/icon-font.yaml +28 -0
- package/src/icon/icon.yaml +31 -0
- package/src/input/date-picker.yaml +144 -0
- package/src/input/date-range-input.yaml +162 -0
- package/src/input/range-slider.yaml +161 -0
- package/src/input/select.yaml +230 -0
- package/src/input/slider.yaml +172 -0
- package/src/input/text-field.yaml +240 -0
- package/src/input/time-picker.yaml +220 -0
- package/src/motion/motion.yaml +371 -0
- package/src/navigation/app-bar.yaml +147 -0
- package/src/navigation/navigation.yaml +339 -0
- package/src/navigation/scroll.yaml +23 -0
- package/src/navigation/search.yaml +112 -0
- package/src/navigation/tabs.yaml +144 -0
- package/src/navigation/toolbar.yaml +130 -0
- package/src/selection/checkbox.yaml +162 -0
- package/src/selection/chip.yaml +219 -0
- package/src/selection/radio.yaml +125 -0
- package/src/selection/segmented-group.yaml +11 -0
- package/src/selection/segmented.yaml +69 -0
- package/src/selection/switch.yaml +209 -0
- package/src/spacing/measurement.yaml +80 -0
- package/src/state/state.yaml +38 -0
- package/src/surface/surface.yaml +483 -0
- package/src/text/line-height.yaml +144 -0
- package/src/text/typeface.yaml +31 -0
- package/src/text/typescale.yaml +726 -0
- package/target/esbuild/action/action.css +1 -0
- package/target/esbuild/action/base.jsx +1 -0
- package/target/esbuild/action/button.jsx +17 -0
- package/target/esbuild/action/fab-menu-context.jsx +1 -0
- package/target/esbuild/action/fab-menu.jsx +15 -0
- package/target/esbuild/action/fab.jsx +7 -0
- package/target/esbuild/action/group.jsx +22 -0
- package/target/esbuild/action/icon-button.jsx +5 -0
- package/target/esbuild/action/index.jsx +1 -0
- package/target/esbuild/action/split-button.jsx +12 -0
- package/target/esbuild/color/contrast.jsx +1 -0
- package/target/esbuild/color/dynamic.jsx +1 -0
- package/target/esbuild/color/hct.jsx +1 -0
- package/target/esbuild/color/index.css +1 -0
- package/target/esbuild/color/index.jsx +1 -0
- package/target/esbuild/color/palette.jsx +1 -0
- package/target/esbuild/color/scheme.jsx +1 -0
- package/target/esbuild/color/temperature.jsx +1 -0
- package/target/esbuild/container/card.css +1 -0
- package/target/esbuild/container/card.jsx +1 -0
- package/target/esbuild/container/elevation-shadow.css +1 -0
- package/target/esbuild/container/elevation-shadow.jsx +1 -0
- package/target/esbuild/container/index.jsx +1 -0
- package/target/esbuild/dom/client.jsx +1 -0
- package/target/esbuild/dom/index.jsx +1 -0
- package/target/esbuild/dom/server.jsx +1 -0
- package/target/esbuild/dom/types.jsx +1 -0
- package/target/esbuild/feedback/badge.jsx +15 -0
- package/target/esbuild/feedback/feedback.css +1 -0
- package/target/esbuild/feedback/focus.jsx +1 -0
- package/target/esbuild/feedback/index.jsx +1 -0
- package/target/esbuild/feedback/loading.jsx +7 -0
- package/target/esbuild/feedback/observe.jsx +1 -0
- package/target/esbuild/feedback/progress.jsx +35 -0
- package/target/esbuild/feedback/snackbar.jsx +23 -0
- package/target/esbuild/feedback/tooltip.jsx +24 -0
- package/target/esbuild/icon/icon.css +1 -0
- package/target/esbuild/icon/icon.jsx +1 -0
- package/target/esbuild/icon/index.jsx +1 -0
- package/target/esbuild/index.css +1 -0
- package/target/esbuild/index.jsx +1 -0
- package/target/esbuild/input/autocomplete.jsx +5 -0
- package/target/esbuild/input/base.jsx +4 -0
- package/target/esbuild/input/date-picker.css +1 -0
- package/target/esbuild/input/date-picker.jsx +104 -0
- package/target/esbuild/input/date-range-input.css +1 -0
- package/target/esbuild/input/date-time.jsx +21 -0
- package/target/esbuild/input/index.css +1 -0
- package/target/esbuild/input/index.jsx +1 -0
- package/target/esbuild/input/paired-input.jsx +1 -0
- package/target/esbuild/input/picker-dialog.css +1 -0
- package/target/esbuild/input/picker-dialog.jsx +14 -0
- package/target/esbuild/input/select.css +1 -0
- package/target/esbuild/input/select.jsx +63 -0
- package/target/esbuild/input/slider.css +1 -0
- package/target/esbuild/input/slider.jsx +51 -0
- package/target/esbuild/input/text-field.css +1 -0
- package/target/esbuild/input/text-field.jsx +67 -0
- package/target/esbuild/input/time-picker.css +1 -0
- package/target/esbuild/input/time-picker.jsx +29 -0
- package/target/esbuild/motion/frame.jsx +1 -0
- package/target/esbuild/motion/index.css +1 -0
- package/target/esbuild/motion/index.jsx +1 -0
- package/target/esbuild/motion/material.jsx +1 -0
- package/target/esbuild/motion/motion.jsx +1 -0
- package/target/esbuild/motion/spring.jsx +1 -0
- package/target/esbuild/motion/transition.css +1 -0
- package/target/esbuild/motion/transition.jsx +1 -0
- package/target/esbuild/motion/velocity.jsx +1 -0
- package/target/esbuild/navigation/app-bar.jsx +51 -0
- package/target/esbuild/navigation/base.jsx +1 -0
- package/target/esbuild/navigation/drawer.jsx +25 -0
- package/target/esbuild/navigation/index.jsx +1 -0
- package/target/esbuild/navigation/navigation.css +1 -0
- package/target/esbuild/navigation/navigation.jsx +29 -0
- package/target/esbuild/navigation/scroll.jsx +1 -0
- package/target/esbuild/navigation/search.jsx +29 -0
- package/target/esbuild/navigation/tabs.jsx +7 -0
- package/target/esbuild/navigation/toolbar.jsx +23 -0
- package/target/esbuild/selection/base.jsx +1 -0
- package/target/esbuild/selection/checkbox.jsx +14 -0
- package/target/esbuild/selection/chip.jsx +23 -0
- package/target/esbuild/selection/index.jsx +1 -0
- package/target/esbuild/selection/radio.jsx +9 -0
- package/target/esbuild/selection/segmented.jsx +15 -0
- package/target/esbuild/selection/selection.css +1 -0
- package/target/esbuild/selection/switch.jsx +14 -0
- package/target/esbuild/shape/corner-rounding.jsx +1 -0
- package/target/esbuild/shape/cubic.jsx +1 -0
- package/target/esbuild/shape/index.jsx +1 -0
- package/target/esbuild/shape/material-shapes.jsx +1 -0
- package/target/esbuild/shape/morph.jsx +1 -0
- package/target/esbuild/shape/path.jsx +1 -0
- package/target/esbuild/shape/point.jsx +1 -0
- package/target/esbuild/shape/rounded-polygon.jsx +1 -0
- package/target/esbuild/shape/shapes.jsx +1 -0
- package/target/esbuild/spacing/index.jsx +1 -0
- package/target/esbuild/state/component.css +1 -0
- package/target/esbuild/state/component.jsx +1 -0
- package/target/esbuild/state/controller.jsx +1 -0
- package/target/esbuild/state/index.jsx +1 -0
- package/target/esbuild/state/ripple.jsx +1 -0
- package/target/esbuild/state/state.jsx +1 -0
- package/target/esbuild/state/style.jsx +1 -0
- package/target/esbuild/surface/carousel-layout.jsx +1 -0
- package/target/esbuild/surface/carousel.css +1 -0
- package/target/esbuild/surface/carousel.jsx +10 -0
- package/target/esbuild/surface/dialog.jsx +35 -0
- package/target/esbuild/surface/divider.jsx +1 -0
- package/target/esbuild/surface/drag.jsx +1 -0
- package/target/esbuild/surface/gestures.css +1 -0
- package/target/esbuild/surface/gestures.jsx +7 -0
- package/target/esbuild/surface/index.css +1 -0
- package/target/esbuild/surface/index.jsx +1 -0
- package/target/esbuild/surface/interactive.jsx +1 -0
- package/target/esbuild/surface/list-patterns.jsx +26 -0
- package/target/esbuild/surface/list.css +1 -0
- package/target/esbuild/surface/list.jsx +9 -0
- package/target/esbuild/surface/menu.css +1 -0
- package/target/esbuild/surface/menu.jsx +12 -0
- package/target/esbuild/surface/scaffold.jsx +47 -0
- package/target/esbuild/surface/sheet.jsx +21 -0
- package/target/esbuild/surface/side-sheet.jsx +17 -0
- package/target/esbuild/surface/slots.jsx +1 -0
- package/target/esbuild/surface/surface.css +1 -0
- package/target/esbuild/surface/surface.jsx +1 -0
- package/target/esbuild/text/index.css +1 -0
- package/target/esbuild/text/index.jsx +1 -0
- package/target/esbuild/text/text.css +1 -0
- package/target/esbuild/text/text.jsx +3 -0
- package/target/esbuild/text/typography.css +1 -0
- package/target/esbuild/text/typography.jsx +1 -0
- package/target/esbuild/util/box-side.jsx +1 -0
- package/target/esbuild/util/debug.jsx +1 -0
- package/target/esbuild/util/dom.jsx +1 -0
- package/target/esbuild/util/event.jsx +1 -0
- package/target/esbuild/util/index.jsx +1 -0
- package/target/esbuild/util/preconditions.jsx +1 -0
- package/target/esbuild/util/reactive.jsx +1 -0
- package/target/tsc/action/action.css.d.ts +3 -0
- package/target/tsc/action/base.d.ts +211 -0
- package/target/tsc/action/button.d.ts +126 -0
- package/target/tsc/action/fab-menu-context.d.ts +16 -0
- package/target/tsc/action/fab-menu.d.ts +112 -0
- package/target/tsc/action/fab.d.ts +98 -0
- package/target/tsc/action/group.d.ts +166 -0
- package/target/tsc/action/icon-button.d.ts +79 -0
- package/target/tsc/action/index.d.ts +24 -0
- package/target/tsc/action/split-button.d.ts +78 -0
- package/target/tsc/color/contrast.d.ts +48 -0
- package/target/tsc/color/dynamic.d.ts +203 -0
- package/target/tsc/color/hct.d.ts +114 -0
- package/target/tsc/color/index.css.d.ts +3 -0
- package/target/tsc/color/index.d.ts +23 -0
- package/target/tsc/color/palette.d.ts +30 -0
- package/target/tsc/color/scheme.d.ts +446 -0
- package/target/tsc/color/temperature.d.ts +24 -0
- package/target/tsc/container/card.css.d.ts +3 -0
- package/target/tsc/container/card.d.ts +110 -0
- package/target/tsc/container/elevation-shadow.css.d.ts +3 -0
- package/target/tsc/container/elevation-shadow.d.ts +23 -0
- package/target/tsc/container/index.d.ts +44 -0
- package/target/tsc/dom/client.d.ts +387 -0
- package/target/tsc/dom/index.d.ts +93 -0
- package/target/tsc/dom/server.d.ts +65 -0
- package/target/tsc/dom/types.d.ts +134 -0
- package/target/tsc/feedback/badge.d.ts +116 -0
- package/target/tsc/feedback/feedback.css.d.ts +3 -0
- package/target/tsc/feedback/focus.d.ts +20 -0
- package/target/tsc/feedback/index.d.ts +17 -0
- package/target/tsc/feedback/loading.d.ts +194 -0
- package/target/tsc/feedback/observe.d.ts +75 -0
- package/target/tsc/feedback/progress.d.ts +281 -0
- package/target/tsc/feedback/snackbar.d.ts +398 -0
- package/target/tsc/feedback/tooltip.d.ts +326 -0
- package/target/tsc/icon/icon.css.d.ts +3 -0
- package/target/tsc/icon/icon.d.ts +69 -0
- package/target/tsc/icon/index.d.ts +13 -0
- package/target/tsc/index.css.d.ts +3 -0
- package/target/tsc/index.d.ts +7 -0
- package/target/tsc/input/autocomplete.d.ts +119 -0
- package/target/tsc/input/base.d.ts +282 -0
- package/target/tsc/input/date-picker.css.d.ts +3 -0
- package/target/tsc/input/date-picker.d.ts +351 -0
- package/target/tsc/input/date-range-input.css.d.ts +3 -0
- package/target/tsc/input/date-time.d.ts +171 -0
- package/target/tsc/input/index.css.d.ts +3 -0
- package/target/tsc/input/index.d.ts +27 -0
- package/target/tsc/input/paired-input.d.ts +435 -0
- package/target/tsc/input/picker-dialog.css.d.ts +3 -0
- package/target/tsc/input/picker-dialog.d.ts +84 -0
- package/target/tsc/input/select.css.d.ts +3 -0
- package/target/tsc/input/select.d.ts +267 -0
- package/target/tsc/input/slider.css.d.ts +3 -0
- package/target/tsc/input/slider.d.ts +372 -0
- package/target/tsc/input/text-field.css.d.ts +3 -0
- package/target/tsc/input/text-field.d.ts +415 -0
- package/target/tsc/input/time-picker.css.d.ts +3 -0
- package/target/tsc/input/time-picker.d.ts +212 -0
- package/target/tsc/motion/frame.d.ts +36 -0
- package/target/tsc/motion/index.css.d.ts +3 -0
- package/target/tsc/motion/index.d.ts +34 -0
- package/target/tsc/motion/material.d.ts +110 -0
- package/target/tsc/motion/motion.d.ts +235 -0
- package/target/tsc/motion/spring.d.ts +223 -0
- package/target/tsc/motion/transition.css.d.ts +3 -0
- package/target/tsc/motion/transition.d.ts +597 -0
- package/target/tsc/motion/velocity.d.ts +54 -0
- package/target/tsc/navigation/app-bar.d.ts +473 -0
- package/target/tsc/navigation/base.d.ts +331 -0
- package/target/tsc/navigation/drawer.d.ts +301 -0
- package/target/tsc/navigation/index.d.ts +25 -0
- package/target/tsc/navigation/navigation.css.d.ts +3 -0
- package/target/tsc/navigation/navigation.d.ts +537 -0
- package/target/tsc/navigation/scroll.d.ts +218 -0
- package/target/tsc/navigation/search.d.ts +332 -0
- package/target/tsc/navigation/tabs.d.ts +497 -0
- package/target/tsc/navigation/toolbar.d.ts +248 -0
- package/target/tsc/selection/base.d.ts +100 -0
- package/target/tsc/selection/checkbox.d.ts +194 -0
- package/target/tsc/selection/chip.d.ts +358 -0
- package/target/tsc/selection/index.d.ts +21 -0
- package/target/tsc/selection/radio.d.ts +198 -0
- package/target/tsc/selection/segmented.d.ts +333 -0
- package/target/tsc/selection/selection.css.d.ts +3 -0
- package/target/tsc/selection/switch.d.ts +165 -0
- package/target/tsc/shape/corner-rounding.d.ts +36 -0
- package/target/tsc/shape/cubic.d.ts +215 -0
- package/target/tsc/shape/index.d.ts +35 -0
- package/target/tsc/shape/material-shapes.d.ts +176 -0
- package/target/tsc/shape/morph.d.ts +91 -0
- package/target/tsc/shape/path.d.ts +177 -0
- package/target/tsc/shape/point.d.ts +165 -0
- package/target/tsc/shape/rounded-polygon.d.ts +289 -0
- package/target/tsc/shape/shapes.d.ts +76 -0
- package/target/tsc/spacing/index.d.ts +19 -0
- package/target/tsc/state/component.css.d.ts +3 -0
- package/target/tsc/state/component.d.ts +276 -0
- package/target/tsc/state/controller.d.ts +257 -0
- package/target/tsc/state/index.d.ts +19 -0
- package/target/tsc/state/ripple.d.ts +50 -0
- package/target/tsc/state/state.d.ts +129 -0
- package/target/tsc/state/style.d.ts +22 -0
- package/target/tsc/surface/carousel-layout.d.ts +212 -0
- package/target/tsc/surface/carousel.css.d.ts +3 -0
- package/target/tsc/surface/carousel.d.ts +231 -0
- package/target/tsc/surface/dialog.d.ts +582 -0
- package/target/tsc/surface/divider.d.ts +92 -0
- package/target/tsc/surface/drag.d.ts +92 -0
- package/target/tsc/surface/gestures.css.d.ts +3 -0
- package/target/tsc/surface/gestures.d.ts +292 -0
- package/target/tsc/surface/index.css.d.ts +3 -0
- package/target/tsc/surface/index.d.ts +29 -0
- package/target/tsc/surface/interactive.d.ts +22 -0
- package/target/tsc/surface/list-patterns.d.ts +384 -0
- package/target/tsc/surface/list.css.d.ts +3 -0
- package/target/tsc/surface/list.d.ts +340 -0
- package/target/tsc/surface/menu.css.d.ts +3 -0
- package/target/tsc/surface/menu.d.ts +590 -0
- package/target/tsc/surface/scaffold.d.ts +337 -0
- package/target/tsc/surface/sheet.d.ts +384 -0
- package/target/tsc/surface/side-sheet.d.ts +183 -0
- package/target/tsc/surface/slots.d.ts +21 -0
- package/target/tsc/surface/surface.css.d.ts +3 -0
- package/target/tsc/surface/surface.d.ts +192 -0
- package/target/tsc/text/index.css.d.ts +3 -0
- package/target/tsc/text/index.d.ts +18 -0
- package/target/tsc/text/text.css.d.ts +3 -0
- package/target/tsc/text/text.d.ts +94 -0
- package/target/tsc/text/typography.css.d.ts +3 -0
- package/target/tsc/text/typography.d.ts +82 -0
- package/target/tsc/util/box-side.d.ts +76 -0
- package/target/tsc/util/debug.d.ts +20 -0
- package/target/tsc/util/dom.d.ts +35 -0
- package/target/tsc/util/event.d.ts +93 -0
- package/target/tsc/util/index.d.ts +12 -0
- package/target/tsc/util/preconditions.d.ts +79 -0
- package/target/tsc/util/reactive.d.ts +36 -0
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import{defineDomComponent as P}from"..";import{DomController as re}from"../dom/client";import{CornerRounding as z,Morph as te,Path as ne,Shapes as x,morphToPath as se}from"../shape";import{observeInlineSize as oe,observeVisibility as ie,whenInDocument as ae}from"./observe";import"./feedback.css";const y=4,de=4,b=3,ce=40,ue=20,M=240,D=40,le=48,pe=4,me=4,ge=15,Pe=5,he=16,R=[.1,.95],k=4,p="cw-Progress",fe="cw-Progress-determinate",ve="cw-Progress-indeterminate",Se="_cw-Progress-paused",h="_cw-Progress-waving",T="_cw-Progress-flattening",O="cw-LinearProgressIndicator",N="cw-LinearWavyProgressIndicator",G="cw-CircularProgressIndicator",V="cw-CircularWavyProgressIndicator",c=new Map;function d(r,e){return r!==void 0&&Number.isFinite(r)?r:e}function a(r,e){return r!==void 0&&Number.isFinite(r)&&r>0?r:e}function u(r){return`${r}px`}function $(r){return r===void 0?void 0:`${r}s`}function l(r){const e=d(r.min,0),t=Math.max(e,d(r.max,1)),n=Math.min(t,Math.max(e,d(r.value,e)));return{min:e,max:t,value:n,ratio:t===e?0:(n-e)/(t-e),indeterminate:r.indeterminate===!0||r.value===void 0}}function X(r){return r===void 0?void 0:`_cw-Progress-${r}`}function H(r){return r.indeterminate?ve:fe}function J(r,e){return r!==void 0?Math.min(1,Math.max(0,d(r,0))):e.indeterminate||e.ratio>R[0]&&e.ratio<R[1]?1:0}function U(r,e,t){const n=e===void 0?t:d(e,0);return n>0?r/n:void 0}function I(r,e){return Math.max(k,a(r,e.indeterminate?ue:ce))}function j(r,e,t,n){const s=e/2,o=Math.floor((Math.max(0,r)+2*e)/s),i=t/2+b,m=2*b*n,L=new ne().moveTo(0,i);for(let g=0;g<o;g++){const _=g*s,W=_+s,A=i+(g%2===0?m:-m)*2/3;L.cubicTo(_+s/3,A,W-s/3,A,W,i)}return{d:L.toSvgPathData(),length:o*s}}function f(r,e){const t=e/2/(r-e);return`${-t} ${-t} ${1+2*t} ${1+2*t}`}function w(r,e){return Math.min(r/2,a(e,pe))}function E(r,e,t,n){return{"--_cw-Progress-circularGap":`${(Math.max(0,d(t,me))+e)/(Math.PI*(n?r-e:r))}`,"--_cw-Progress-size":u(r),"--_cw-Progress-strokeWidth":`${e/(r-e)}`}}function Ce(r,e,t){return Math.max(Pe,Math.round(Math.PI*(r-e)/t))}function be(r){let e=c.get(r);return e===void 0?(e=new te(x.circle(r).normalized(),x.star(r,1,.75,new z(.35,.4),new z(.5)).normalized()),c.size>=he&&c.delete(c.keys().next().value)):c.delete(r),c.set(r,e),e}function B(r,e){return se(be(r),e,{repeatPath:!0,startAngle:270}).toSvgPathData()}function F(){return<div class="cw-Progress-track">
|
|
2
|
+
<span class="_cw-Progress-trackStart"/>
|
|
3
|
+
<span class="_cw-Progress-trackMiddle"/>
|
|
4
|
+
<span class="_cw-Progress-trackEnd"/>
|
|
5
|
+
<span class="cw-LinearProgressIndicator-secondaryIndicator"/>
|
|
6
|
+
<span class="cw-LinearProgressIndicator-indicator"/>
|
|
7
|
+
<span class="cw-Progress-stopIndicator"/>
|
|
8
|
+
</div>}function Z(r,e){return<div class="cw-Progress-track">
|
|
9
|
+
<span class="_cw-Progress-trackStart"/>
|
|
10
|
+
<span class="_cw-Progress-trackMiddle"/>
|
|
11
|
+
<span class="_cw-Progress-trackEnd"/>
|
|
12
|
+
<svg aria-hidden="true"class="cw-LinearWavyProgressIndicator-wave">
|
|
13
|
+
<path class="cw-LinearWavyProgressIndicator-secondaryIndicator"d={r}pathLength={e}/>
|
|
14
|
+
<path class="cw-LinearWavyProgressIndicator-indicator"d={r}pathLength={e}/>
|
|
15
|
+
</svg>
|
|
16
|
+
<span class="cw-Progress-stopIndicator"/>
|
|
17
|
+
</div>}function q(r){return<svg aria-hidden="true"viewBox={r}>
|
|
18
|
+
<g class="_cw-Progress-rotation">
|
|
19
|
+
<circle class="cw-CircularProgressIndicator-track"cx="0.5"cy="0.5"pathLength="1"r="0.5"transform="rotate(-90 0.5 0.5)"/>
|
|
20
|
+
<circle class="cw-CircularProgressIndicator-indicator"cx="0.5"cy="0.5"pathLength="1"r="0.5"transform="rotate(-90 0.5 0.5)"/>
|
|
21
|
+
</g>
|
|
22
|
+
</svg>}function Y(r,e){return<svg aria-hidden="true"viewBox={r}>
|
|
23
|
+
<g class="_cw-Progress-rotation">
|
|
24
|
+
<circle class="cw-CircularWavyProgressIndicator-track"cx="0.5"cy="0.5"pathLength="1"r="0.5"transform="rotate(-90 0.5 0.5)"/>
|
|
25
|
+
<path class="cw-CircularWavyProgressIndicator-indicator"d={e}pathLength="2"/>
|
|
26
|
+
</g>
|
|
27
|
+
</svg>}function v(r,e,t,n,s){const o=l(e),i=X(e.color);return<div{...r}aria-label={e.label??r["aria-label"]}aria-valuemax={o.max}aria-valuemin={o.min}aria-valuenow={o.indeterminate?void 0:o.value}classList={{...r.classList,...t,...i===void 0?void 0:{[i]:!0},[p]:!0,[H(o)]:!0}}role="progressbar"style={{...r.style,...n,"--cw-Progress-value":o.indeterminate?void 0:`${o.ratio}`}}>{s()}</div>}class S extends re{#e;#t;#n;constructor(e){super(e,{styleElementIsFunction:!0}),this.#e=null,this.#t=[],this.#n=!1}get progressState(){return this.#e??l({})}applyComponentProps(){const e=super.readProps(["color","indeterminate","label","max","min","value"]),t=e.indeterminateChanged||e.maxChanged||e.minChanged||e.valueChanged;if(e.colorChanged&&super.setClass("color",X(e.color)),e.labelChanged&&(e.label!==void 0||e.labelPrevious!==void 0)&&super.setAttribute("aria-label",e.label),t){const n=l(e);this.#e=n,super.setClass("state",H(n)),super.setStyle("--cw-Progress-value",n.indeterminate?void 0:n.ratio),super.setAttribute("aria-valuemax",n.max),super.setAttribute("aria-valuemin",n.min),super.setAttribute("aria-valuenow",n.indeterminate?void 0:n.value)}this.applyIndicatorProps(this.progressState,t)}observe(e){const t=ie(e,n=>{super.setClass(Se,!n)});return t===void 0?[]:[t]}onStyleElementChanged(e){super.onStyleElementChanged(e),this.#r(),e!==null&&ae(e,()=>{!this.#n&&this.styleElement===e&&(this.#t=this.observe(e))})}onControllerCleanup(){this.#n=!0,this.#r(),super.onControllerCleanup()}#r(){for(const e of this.#t.splice(0))e()}}function C(r){const e=r.stopSize;return{"--_cw-Progress-gap":u(Math.max(0,d(r.gapSize,de))),"--_cw-Progress-thickness":u(a(r.size,y)),"--cw-Feedback-progress-stopSize":e===void 0?void 0:u(Math.max(0,d(e,0)))}}class ye extends S{applyIndicatorProps(){const e=super.readProps(["gapSize","size","stopSize"]);if(e.gapSizeChanged||e.sizeChanged||e.stopSizeChanged)for(const[t,n]of Object.entries(C(e)))super.setStyle(t,n)}render(){return<div class={`${p} ${O}`}role="progressbar">
|
|
28
|
+
{F()}
|
|
29
|
+
</div>}}const De=P(()=>(r,e)=>v(r,e,{[O]:!0},C(e),F),()=>ye);function K(r,e){const t=I(r.wavelength,e),n=U(t,r.waveSpeed,t);return{amplitude:J(r.amplitude,e),style:{"--_cw-LinearWavyProgressIndicator-amplitude":u(b),"--_cw-LinearWavyProgressIndicator-wavelength":u(t),"--_cw-Progress-phaseDuration":$(n)}}}class Ie extends S{#e;#t;#n;#r;constructor(e){super(e),this.#e=[],this.#t=void 0,this.#n="",this.#r=void 0}applyIndicatorProps(e,t){const n=super.readProps(["amplitude","gapSize","size","stopSize","waveSpeed","wavelength"]);if(n.gapSizeChanged||n.sizeChanged||n.stopSizeChanged)for(const[s,o]of Object.entries(C(n)))super.setStyle(s,o);if(t||n.amplitudeChanged||n.sizeChanged||n.waveSpeedChanged||n.wavelengthChanged){const s=K(n,e);this.#r!==void 0&&s.amplitude!==this.#r&&super.setClass(T,s.amplitude<this.#r),this.#r=s.amplitude,super.setClass(h,s.amplitude>0);for(const[o,i]of Object.entries(s.style))super.setStyle(o,i);this.#s()}}observe(e){const t=oe(e,n=>{this.#t=n,this.#s()});return t===void 0?super.observe(e):[...super.observe(e),t]}#s(){const e=j(this.#t??M,I(super.readProp("wavelength",!0)[0],this.progressState),a(super.readProp("size",!0)[0],y),this.#r??0);if(e.d!==this.#n){this.#n=e.d;for(const t of this.#e)t.setAttribute("d",e.d),t.setAttribute("pathLength",`${e.length}`)}}render(){const e=<div class={`${p} ${N}`}role="progressbar">
|
|
30
|
+
{Z()}
|
|
31
|
+
</div>;return this.#e=Array.from(e.querySelectorAll("path")),e}}function we(r,e){const t=l(e),n=K(e,t),s=j(M,I(e.wavelength,t),a(e.size,y),n.amplitude);return v(r,e,{[N]:!0,[h]:n.amplitude>0},{...C(e),...n.style},()=>Z(s.d,s.length))}const ke=P(()=>we,()=>Ie);class Ee extends S{#e;constructor(e){super(e),this.#e=null}applyIndicatorProps(){const e=super.readProps(["gapSize","size","strokeWidth"]);if(e.gapSizeChanged||e.sizeChanged||e.strokeWidthChanged){const t=a(e.size,D),n=w(t,e.strokeWidth),s=E(t,n,e.gapSize,!1);for(const[o,i]of Object.entries(s))super.setStyle(o,i);this.#e?.setAttribute("viewBox",f(t,n))}}render(){const e=<div class={`${p} ${G}`}role="progressbar">
|
|
32
|
+
{q()}
|
|
33
|
+
</div>;return this.#e=e.querySelector("svg"),e}}function Le(r,e){const t=a(e.size,D),n=w(t,e.strokeWidth);return v(r,e,{[G]:!0},E(t,n,e.gapSize,!1),()=>q(f(t,n)))}const Te=P(()=>Le,()=>Ee);function Q(r,e){const t=a(r.size,le),n=w(t,r.strokeWidth),s=Math.max(k,a(r.wavelength,ge)),o=Ce(t,n,s);return{size:t,strokeWidth:n,amplitude:J(r.amplitude,e),vertexCount:o,cycle:U(o*s,r.waveSpeed,s)}}function ee(r,e){return{...E(r.size,r.strokeWidth,e,!0),"--_cw-Progress-phaseDuration":$(r.cycle)}}class _e extends S{#e;#t;#n;#r;constructor(e){super(e),this.#e=null,this.#t=null,this.#n="",this.#r=void 0}applyIndicatorProps(e,t){const n=super.readProps(["amplitude","gapSize","size","strokeWidth","waveSpeed","wavelength"]);if(!t&&!n.amplitudeChanged&&!n.gapSizeChanged&&!n.sizeChanged&&!n.strokeWidthChanged&&!n.waveSpeedChanged&&!n.wavelengthChanged)return;const s=Q(n,e),o=B(s.vertexCount,s.amplitude);this.#r!==void 0&&s.amplitude!==this.#r&&super.setClass(T,s.amplitude<this.#r),this.#r=s.amplitude,super.setClass(h,s.amplitude>0);for(const[i,m]of Object.entries(ee(s,n.gapSize)))super.setStyle(i,m);this.#e?.setAttribute("viewBox",f(s.size,s.strokeWidth)),o!==this.#n&&(this.#n=o,this.#t?.setAttribute("d",o))}render(){const e=<div class={`${p} ${V}`}role="progressbar">
|
|
34
|
+
{Y()}
|
|
35
|
+
</div>;return this.#e=e.querySelector("svg"),this.#t=e.querySelector("path"),e}}function We(r,e){const t=Q(e,l(e));return v(r,e,{[V]:!0,[h]:t.amplitude>0},ee(t,e.gapSize),()=>Y(f(t.size,t.strokeWidth),B(t.vertexCount,t.amplitude)))}const Oe=P(()=>We,()=>_e);export{Te as CircularProgressIndicator,Oe as CircularWavyProgressIndicator,De as LinearProgressIndicator,ke as LinearWavyProgressIndicator};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import{For as X,Show as S,createSignal as w,children as I,untrack as k}from"solid-js";import{insert as v}from"solid-js/web";import{defineDomComponent as D}from"..";import{Button as Q,IconButton as F}from"../action";import{ELEVATION_SHADOW_CSS_CLASS as A}from"../container/elevation-shadow";import{DomController as H}from"../dom/client";import{isFocusWithin as V}from"./focus";import{whenExitMotionFinished as O}from"./observe";import"../container/elevation-shadow.css";import"./feedback.css";const W=4e3,K=100,N="Dismiss",M="cw-Snackbar",R="cw-Snackbar-open",C="_cw-Snackbar-closing",_="_cw-Snackbar-actionOnNewLine",L=new WeakMap,g=new WeakMap;function U(s,e){return s!==void 0&&Number.isFinite(s)?Math.max(0,s):e?0:W}function B(s,e){let n=L.get(s);const t=s.defaultView,i={};t===null||s.body===null||e===""||(n===void 0&&(n=s.createElement("div"),n.className="_cw-Snackbar-announcer",n.setAttribute("aria-atomic","true"),n.setAttribute("aria-live","polite"),n.setAttribute("role","status"),L.set(s,n)),n.isConnected||s.body.append(n),n.textContent="",g.set(n,i),t.setTimeout(()=>{g.get(n)===i&&(n.textContent=e)},K))}function j(s){return Array.from(s.querySelectorAll(".cw-Snackbar-message, .cw-Snackbar-action"),e=>e.textContent?.trim()??"").filter(e=>e!=="").join(" ")}function $(s){return typeof s=="object"&&s!==null&&"message"in s}class z{#s;#e;#n;#t;constructor(){this.#s=new Set,this.#e=[],this.#n=null,this.#t=1}get current(){return this.#n}get pendingCount(){return this.#e.length}subscribe(e){return this.#s.add(e),()=>this.#s.delete(e)}enqueue(e,n={}){const t=$(e)?e:{...n,message:e},i=t.id??`cw-snackbar-${this.#t++}`,o={...t,id:i},J=o.dedupeKey??i,E=(this.#n===null?this.#e:[this.#n,...this.#e]).find(y=>(y.dedupeKey??y.id)===J);return E!==void 0?E.id:(this.#n===null?this.#n=o:this.#e.push(o),this.#i(),o.id)}dismiss(e,n="programmatic"){const t=this.#e.findIndex(o=>o.id===e),i=this.#n;return i!==null&&(e===void 0||i.id===e)?(this.#n=this.#e.shift()??null,this.#i(n,i.id),!0):t<0?!1:(this.#e.splice(t,1),this.#i(n,e),!0)}clear(){const e=this.#n;e===null&&this.#e.length===0||(this.#n=null,this.#e.length=0,this.#i(e===null?void 0:"programmatic",e?.id))}#i(e,n){for(const t of this.#s)t(e,n)}}function le(){return new z}function x(s){return[<S when={s.action()!==void 0||s.actionLabel()!==void 0}>
|
|
2
|
+
<Q class="cw-Snackbar-action"size="sm"variant="text"onClick={s.onAction}>{s.action()??s.actionLabel()}</Q>
|
|
3
|
+
</S>,<S when={s.dismissible()}>
|
|
4
|
+
<F attr:aria-label={s.dismissLabel()}class="cw-Snackbar-dismiss"name="close"size="sm"onClick={s.onDismiss}/>
|
|
5
|
+
</S>]}class G extends H{#s;#e;#n;#t;#i;#r;#a;#u;#d;#h;#p;#b;#m;#c;constructor(e){super(e,{styleElementIsFunction:!0}),this.#s="open"in e,this.#e=null,this.#n=!1,this.#t=!1,this.#i=!1,this.#r=!1,this.#a=0,this.#u=0,this.#d=void 0,this.#h=void 0,this.#p=0,this.#b=!1,this.#m=0,this.#c=!1}applyComponentProps(){const e=super.readProps(["actionLabel","actionOnNewLine","duration","open","pauseOnHover","request"]),n=e.request,t=this.#e?.()!==void 0||(n?.actionLabel??e.actionLabel)!==void 0,i=e.requestChanged&&e.requestPrevious!==void 0&&n!==void 0;if((e.actionOnNewLineChanged||e.requestChanged)&&super.setClass(_,(n?.actionOnNewLine??e.actionOnNewLine)===!0),i&&this.#t&&(this.#o(),k(()=>this.props.onDismiss?.("replacement",void 0,this))),e.durationChanged||e.requestChanged||t!==this.#n){const o=U(n?.duration??e.duration,t);this.#n=t,o!==this.#a&&(this.#o(),this.#a=o,this.#u=o,this.#l())}(e.pauseOnHoverChanged||e.requestChanged)&&!this.#S()&&this.#c&&(this.#c=!1,this.#l()),(e.openChanged||e.requestChanged)&&this.#f(this.#s?e.open!==!1:i||!this.#i,i)}dismiss(e,n="programmatic"){!this.#t||this.#i||this.#r||(this.#i=!0,this.#o(),this.#s||this.#f(!1,!1),k(()=>{this.props.onOpenChange?.(!1,e,n),this.props.onDismiss?.(n,e,this)}))}#f(e,n){const t=this.styleElement,i=!e&&this.#t&&t?.isConnected===!0;e===this.#t&&!n||(this.#t=e,e&&(this.#i=!1),this.#u=this.#a,this.#m++,super.setClass(C,i),super.setClass(R,e),super.setAttribute("hidden",!e),super.setAttribute("inert",!e),this.#o(),i&&this.#y(t),!(!e||t===null)&&(this.#l(),queueMicrotask(()=>{this.#t&&!this.#r&&this.styleElement===t&&B(t.ownerDocument,j(t))})))}#y(e){const n=this.#m;O(e,()=>{n===this.#m&&super.setClass(C,!1)})}#S(){return(super.readProp("request",!0)[0]?.pauseOnHover??super.readProp("pauseOnHover",!0)[0])!==!1}#l(){const e=this.styleElement?.ownerDocument.defaultView;this.#o(),!(this.#r||!this.#t||this.#i||this.#c||this.#a===0||e===null||e===void 0)&&(this.#h=e,this.#p=e.performance.now(),this.#d=e.setTimeout(()=>{this.#d=void 0,this.#u=0,this.dismiss(void 0,"timeout")},this.#u))}#o(){const e=this.#h;this.#d===void 0||e===void 0||(e.clearTimeout(this.#d),this.#u=Math.max(0,this.#u-(e.performance.now()-this.#p)),this.#d=void 0,this.#h=void 0)}#k(){const e=this.styleElement,n=this.#S()&&(this.#b||e!==null&&V(e));n!==this.#c&&(this.#c=n,n?this.#o():this.#l())}#C=e=>{(this.props.request?.onAction??this.props.onAction)?.(e,this),e.defaultPrevented||this.dismiss(e,"action")};#L=e=>this.dismiss(e,"dismiss");#g=e=>{e.key!=="Escape"||e.defaultPrevented||!this.#t||(e.preventDefault(),this.dismiss(e,"escape"))};#v=e=>{this.#b=e.type==="pointerenter",this.#k()};#E=()=>{(this.styleElement?.ownerDocument.defaultView?.queueMicrotask??queueMicrotask)(()=>this.#k())};onStyleElementChanged(e){super.onStyleElementChanged(e),this.#o(),e!==null&&(e.ownerDocument.defaultView?.queueMicrotask??queueMicrotask)(()=>{this.styleElement===e&&this.#l()})}onControllerCleanup(){this.#r=!0,this.#o(),super.onControllerCleanup()}render(e){const n=<div class={`${M} ${A}`}hidden inert>
|
|
6
|
+
<div class="cw-Snackbar-message"/>
|
|
7
|
+
<div class="cw-Snackbar-actions"/>
|
|
8
|
+
</div>,t=()=>this.props.request;return v(n.firstElementChild,()=>t()?.message??this.props.message??e),this.#e=I(()=>t()?.action??this.props.action),v(n.lastElementChild,x({action:this.#e,actionLabel:()=>t()?.actionLabel??this.props.actionLabel,dismissible:()=>(t()?.dismissible??this.props.dismissible)===!0,dismissLabel:()=>t()?.dismissLabel??this.props.dismissLabel??N,onAction:this.#C,onDismiss:this.#L})),n.addEventListener("keydown",this.#g),n.addEventListener("pointerenter",this.#v),n.addEventListener("pointerleave",this.#v),n.addEventListener("focusin",this.#E),n.addEventListener("focusout",this.#E),n}}function Y(s,e){const n=e.request,t=e.open!==!1,i=(n?.actionOnNewLine??e.actionOnNewLine)===!0;return<div{...s}classList={{...s.classList,[_]:i,[A]:!0,[R]:t,[M]:!0}}hidden={!t}inert={!t}>
|
|
9
|
+
<div class="cw-Snackbar-message">
|
|
10
|
+
{n?.message??e.message??s.children}
|
|
11
|
+
</div>
|
|
12
|
+
<div class="cw-Snackbar-actions">
|
|
13
|
+
{x({action:()=>n?.action??e.action,actionLabel:()=>n?.actionLabel??e.actionLabel,dismissible:()=>(n?.dismissible??e.dismissible)===!0,dismissLabel:()=>n?.dismissLabel??e.dismissLabel??N})}
|
|
14
|
+
</div>
|
|
15
|
+
</div>}const P=D(()=>Y,()=>G);function q(s){const[e,n]=w(!0);return{request:s,open:e,setOpen:n}}function T(s){return`_cw-SnackbarHost-${s??"bottom"}`}class Z extends H{#s;#e;#n;#t;constructor(e){const n=k(()=>e.queue.current),[t,i]=w(n===null?[]:[q(n)]);super(e,{styleElementIsFunction:!0}),this.#s=t,this.#e=i,this.#n=null,this.#t=void 0}applyComponentProps(){const e=super.readProps(["position","queue"]);e.positionChanged&&super.setClass("position",T(e.position)),e.queueChanged&&(this.#t?.(),this.#n=e.queue,this.#t=e.queue.subscribe(this.#a),this.#i(e.queue.current))}#i(e){const t=this.#s().at(-1);t?.request===e&&t.open()||(t?.open()===!0&&this.#r(t),e!==null&&this.#e([...this.#s(),q(e)]))}#r(e){const n=e.controller?.styleElement,t=()=>{e.open()||this.#e(this.#s().filter(i=>i!==e))};if(e.setOpen(!1),n==null){t();return}(n.ownerDocument.defaultView?.queueMicrotask??queueMicrotask)(()=>{O(n,t)})}#a=(e,n)=>{const t=this.#s().at(-1);e!==void 0&&t!==void 0&&t.request.id===n&&t.controller?.dismiss(void 0,e),this.#i(this.#n?.current??null)};onControllerCleanup(){this.#t?.(),this.#t=void 0,super.onControllerCleanup()}render(){const e=<div class="cw-SnackbarHost">
|
|
16
|
+
<div class="cw-SnackbarHost-content"/>
|
|
17
|
+
</div>;return v(e.firstElementChild,<X each={this.#s()}>{n=><P controllerRef={t=>n.controller=t}open={n.open()}request={n.request}onDismiss={(t,i,o)=>{this.props.onDismiss?.(t,i,o),this.#n?.dismiss(n.request.id,t)}}/>}</X>),e}}const he=D(()=>(s,e)=><div{...s}classList={{...s.classList,[T(e.position)]:!0,"cw-SnackbarHost":!0}}>
|
|
18
|
+
<div class="cw-SnackbarHost-content">
|
|
19
|
+
<S when={e.queue.current}>
|
|
20
|
+
{n=><P open request={n()}/>}
|
|
21
|
+
</S>
|
|
22
|
+
</div>
|
|
23
|
+
</div>,()=>Z);export{P as Snackbar,G as SnackbarController,he as SnackbarHost,Z as SnackbarHostController,z as SnackbarQueue,le as createSnackbarQueue};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import{Show as V,children as j,createSignal as x,createUniqueId as M,getListener as O,untrack as a}from"solid-js";import{insert as T}from"solid-js/web";import{defineDomComponent as H}from"..";import{ELEVATION_SHADOW_CSS_CLASS as F}from"../container/elevation-shadow";import{DomController as G}from"../dom/client";import{resolveSurfaceSlots as _}from"../surface/slots";import{isLeaveWithin as U}from"../util/event";import{FOCUSABLE_SELECTORS as q,isFocusWithin as A}from"./focus";import{observeMutations as z,whenExitMotionFinished as Y,whenInDocument as K}from"./observe";import"../container/elevation-shadow.css";import"./feedback.css";const Q=500,Z=1500,ee=500,te=8,ie=4,g=8,X="Tooltip",W=["aria-controls","aria-describedby","aria-expanded","aria-haspopup"],ne=[...q,"[role=button]"].join(","),se={attributeFilter:["contenteditable","disabled","href","tabindex","type"],attributes:!0,childList:!0,subtree:!0},R="_cw-Tooltip-closing",w="_cw-Tooltip-caret",y=new WeakMap;function I(o,e){return o===void 0||!Number.isFinite(o)?e:Math.max(0,o)}function k(o){return W.includes(o)}function C(o,e,t){return Math.max(e,Math.min(o,t))}function D(o,e){return Number.parseFloat(o.getPropertyValue(e))||0}function S(o){return Array.isArray(o)?o.some(S):o!=null&&o!==!1&&o!==""}function L(o){return o==null?void 0:`${o}`}function E(o,e,t){t===null?o.removeAttribute(e):o.setAttribute(e,t)}function J(o,e,t){const i=Object.create(null);return Object.defineProperties(i,{open:{configurable:!0,enumerable:!1,get:e},popupId:{configurable:!0,enumerable:!1,get:t}}),Object.setPrototypeOf(o,i)}class N extends G{#n;#P;#q;#de;#z;#c;#le;#t;#i;#s;#f;#O;#x;#r;#b;#R;#m;#g;#v;#T;#Y;#K;#e;#y;#I;#o;#h;#D;#A;#a;#d;#Q;#Z;#E;#u;#w;#H;#F;#he;#ee;#ue;#_;#pe;constructor(e,t){const i=a(()=>e.id)??M(),n=a(()=>e.disabled===!0),s=a(()=>e.open===!0)&&!n,[d,r]=x(s),[c,l]=x(n),[p,h]=x(i),f=new Map;super(e);for(const u of Object.keys(e))if(u.startsWith("attr:aria-")){const m=u.slice(5);f.set(m,a(()=>e[u]))}this.#n=t,this.#P=i,this.#q="open"in e,this.#de="trigger"in e,this.#z="attr:tabindex"in e,this.#c=[...f.keys()],this.#le=f,this.#t=null,this.#i=null,this.#s=null,this.#f=a(()=>e.trigger!==void 0),this.#O=new Set,this.#x=new Map,this.#r=new Map,this.#b=null,this.#R=null,this.#m=void 0,this.#g=void 0,this.#v=void 0,this.#T=void 0,this.#Y=0,this.#K=0,this.#e=s,this.#y=!1,this.#I=0,this.#o=!1,this.#h=!1,this.#D=!1,this.#A=!1,this.#a=void 0,this.#d=!1,this.#Q=0,this.#Z=0,this.#E=void 0,this.#u=void 0,this.#w=void 0,this.#H=null,this.#F=c,this.#he=l,this.#ee=d,this.#ue=r,this.#_=p,this.#pe=h}get persistent(){return!1}applyComponentProps(){const e=super.readProps(["caret","disabled","id","open","placement","trigger"]);if(this.#f=e.trigger!==void 0,e.disabledChanged&&(this.#he(e.disabled===!0),e.disabled===!0&&this.#p()),e.caretChanged&&this.#i?.classList.toggle(w,e.caret===!0),e.idChanged){const t=e.id??this.#P;this.#pe(t),this.#i?.setAttribute("id",t)}(e.openChanged||e.disabledChanged)&&this.#ce(this.#q?e.open===!0:this.#e,!1),this.#i!==null&&this.applyPopupName(this.#i),this.#C(),this.#e&&e.placementChanged&&this.#ae()}applyPopupName(e){}onFunctionElementChanged(e){const t=e;super.onFunctionElementChanged(e),this.#t!==t&&this.#fe(this.#t),this.#t=t,this.#Ce(),this.#m?.(),this.#m=void 0,t!==null&&K(t,()=>{!this.#o&&this.#t===t&&(this.#m=z(t,se,()=>this.#C()))}),this.#C()}onStyleElementChanged(e){super.onStyleElementChanged(e),(e===null||this.#T!==e.ownerDocument.defaultView)&&this.#p()}onControllerCleanup(){this.#Oe(),super.onControllerCleanup()}#te(e){const t=`attr:${e}`;if(this.#c.includes(e))return L(t in this.props?this.props[t]:this.#le.get(e))}#ie(e){const t=this.#i?.id??this.#P;return this.#c.includes(e)?this.#te(e):a(()=>this.props.disabled===!0)?void 0:e==="aria-describedby"?t:this.#n?e==="aria-controls"?t:e==="aria-expanded"?`${this.#e}`:"dialog":void 0}#Le(){const e=n=>O()===this.#H?a(n):n(),t=(n,s)=>({enumerable:!0,get:()=>(e(s),e(this.#F),this.#ie(n))}),i={};Object.defineProperties(i,{"aria-controls":t("aria-controls",this.#_),"aria-describedby":t("aria-describedby",this.#_),"aria-expanded":t("aria-expanded",this.#ee),"aria-haspopup":t("aria-haspopup",this.#F),tabIndex:{enumerable:!0,get:()=>e(this.#F)?void 0:0}});for(const n of this.#c)k(n)||Object.defineProperty(i,n,{enumerable:!0,get:()=>this.#te(n)});return J(i,()=>e(this.#ee),()=>e(this.#_))}renderTrigger(e){const t=this.#Le();return j(()=>{const i=this.#de?this.props.trigger:void 0;if(i===void 0)return e;this.#H=O();try{return i(t)}finally{this.#H=null}})}setPopup(e){this.#i=e,e.id=a(()=>this.props.id)??this.#P,e.classList.toggle(w,a(()=>this.props.caret)===!0),e.addEventListener("pointerenter",this.#W),e.addEventListener("pointerleave",this.#J),e.addEventListener("focusin",this.#N),e.addEventListener("focusout",this.#$)}#ce(e,t){const i=this.#i,n=a(()=>this.props.disabled===!0),s=e&&!n,d=s&&this.#y,r=!s&&i!==null&&A(i);if(!this.#o){if(this.#y=!1,!s&&this.#e&&(this.#h=this.#oe()),this.#I++,this.#p(),this.#e=s,s&&this.#a!==void 0&&(this.#d=!0),this.#ue(s),super.setClass(`${this.#n?"cw-RichTooltip":"cw-PlainTooltip"}-open`,s),i!==null&&(i.classList.toggle(R,!s&&i.matches(":popover-open")),i.inert=!s,i.hidden=!s,s?i.removeAttribute("aria-hidden"):i.setAttribute("aria-hidden","true")),this.#C(),this.#re(),r&&this.#s?.focus({preventScroll:!0}),d&&i!==null)for(const c of y.get(i.ownerDocument)??[])c!==this.#l&&c();t&&a(()=>this.props.onOpenChange?.(s))}}#L(e){if(!(this.#o||e&&a(()=>this.props.disabled===!0))){if(e&&this.#e&&this.#a!==void 0&&(this.#d=!0),e===this.#e){e||(this.#y=!1);return}this.#y=e,this.#q?(this.#p(),a(()=>this.props.onOpenChange?.(e))):this.#ce(e,!0)}}#C(){const e=this.#t,t=e?.querySelector(ne)??null,i=t??e,n=this.#f||!this.#z;if(e===null){this.#se();return}if(t!==null){for(const s of W)e.getAttribute(s)===this.#ie(s)&&e.removeAttribute(s);n&&e.removeAttribute("tabindex")}else n&&(a(()=>this.props.disabled===!0)?this.#z||e.removeAttribute("tabindex"):e.getAttribute("tabindex")!=="0"&&(e.tabIndex=0));i!==this.#s&&(this.#se(),this.#s=i),this.#Se(i),this.#Pe(),this.#Ae()}#Se(e){if(!this.#f||e===this.#t){this.#ne();return}if(e!==this.#b){const t=e.getAttribute("tabindex");this.#ne(),this.#b=e,this.#R=t==="0"?null:t}a(()=>this.props.disabled===!0)?e.removeAttribute("tabindex"):e.getAttribute("tabindex")!=="0"&&e.setAttribute("tabindex","0")}#ne(){this.#b!==null&&E(this.#b,"tabindex",this.#R),this.#b=null,this.#R=null}#Pe(){const e=this.#t,t=this.#s;if(!(e===null||t===null))for(const i of this.#c){const n=this.#te(i);if(t===e){n===void 0?e.removeAttribute(i):e.setAttribute(i,n);continue}e.removeAttribute(i),this.#xe(t,i,n)}}#xe(e,t,i){if(i===void 0){this.#r.has(t)&&(E(e,t,this.#r.get(t)),this.#r.delete(t));return}if(!this.#r.has(t)){const n=e.getAttribute(t);this.#r.set(t,this.#f&&k(t)&&n===this.#ie(t)?null:n)}e.setAttribute(t,i)}#Ae(){const e=this.#s,t=this.#i?.id??this.#P;if(e!==null){if(a(()=>this.props.disabled===!0)){for(const[i,n]of this.#x)E(e,i,n);return}this.#n&&(this.#X(e,"aria-controls",t),this.#X(e,"aria-expanded",`${this.#e}`),this.#X(e,"aria-haspopup","dialog")),this.#X(e,"aria-describedby",t)}}#X(e,t,i){if(!this.#c.includes(t)){if(!this.#O.has(t)){if(!this.#f&&e.hasAttribute(t))return;this.#O.add(t),this.#x.set(t,e.getAttribute(t))}e.setAttribute(t,i)}}#se(){const e=this.#s;if(e!==null){for(const[t,i]of this.#x)E(e,t,i);for(const[t,i]of this.#r)E(e,t,i)}this.#O.clear(),this.#x.clear(),this.#r.clear(),this.#ne(),this.#s=null}#Ce(){const e=this.#t;e!==null&&(e.addEventListener("pointerenter",this.#W),e.addEventListener("pointerleave",this.#J),e.addEventListener("focusin",this.#N),e.addEventListener("focusout",this.#$),e.addEventListener("pointerdown",this.#ge),e.addEventListener("pointermove",this.#ve),e.addEventListener("pointerup",this.#S),e.addEventListener("pointercancel",this.#S),e.addEventListener("click",this.#Te,!0),e.addEventListener("contextmenu",this.#ye))}#fe(e){e!==null&&(e.removeEventListener("pointerenter",this.#W),e.removeEventListener("pointerleave",this.#J),e.removeEventListener("focusin",this.#N),e.removeEventListener("focusout",this.#$),e.removeEventListener("pointerdown",this.#ge),e.removeEventListener("pointermove",this.#ve),e.removeEventListener("pointerup",this.#S),e.removeEventListener("pointercancel",this.#S),e.removeEventListener("click",this.#Te,!0),e.removeEventListener("contextmenu",this.#ye))}#W=e=>{e.pointerType!=="touch"&&(e.currentTarget===this.#t?this.#D=!0:this.#A=!0,this.#h=!1,this.#U(),this.#e||this.#V())};#J=e=>{if(e.pointerType==="touch"){this.#S(e);return}U(e,e.currentTarget)||(e.currentTarget===this.#t?this.#D=!1:this.#A=!1,this.#B()||this.#j())};#N=e=>{const i=e.target?.matches(":focus-visible")===!0;this.#h||(this.#C(),this.#U(),!this.#e&&e.currentTarget===this.#t&&i&&this.#V())};#$=()=>{(this.#M()?.queueMicrotask??queueMicrotask)(()=>{this.#o||(this.#oe()||(this.#h=!1),this.#B()||this.#j())})};#be=e=>{const t=this.#i?.ownerDocument,i=t===void 0?void 0:y.get(t);e.key!=="Escape"||!this.#e||i!==void 0&&[...i].at(-1)!==this.#l||(e.preventDefault(),e.stopImmediatePropagation(),this.#l())};#l=()=>{this.#p(),this.#L(!1)};#me=e=>{const t=e.composedPath();!t.includes(this.#t)&&!t.includes(this.#i)&&this.#l()};#B(){return this.persistent||this.#D||this.#A||this.#a!==void 0||!this.#h&&this.#oe()}#oe(){return this.#t!==null&&A(this.#t)||this.#i!==null&&A(this.#i)}#ge=e=>{this.#d=!1,!(e.pointerType!=="touch"||!e.isPrimary||a(()=>this.props.disabled===!0))&&(this.#h=!0,this.#a=e.pointerId,this.#Q=e.clientX,this.#Z=e.clientY,this.#V(ee))};#ve=e=>{e.pointerId===this.#a&&Math.hypot(e.clientX-this.#Q,e.clientY-this.#Z)>te&&this.#S(e)};#S=e=>{e.pointerId===this.#a&&(this.#a=void 0,this.#G(),e.type==="pointerup"?this.#e&&this.#j():(this.#d=!1,this.#l()))};#Te=e=>{const t=this.#d;if(this.#d=!1,t&&(e.detail>0||e.pointerType==="touch")){e.preventDefault(),e.stopImmediatePropagation();return}if(this.persistent&&!this.#e){this.#p(),this.#L(!0);return}this.#l()};#ye=e=>{this.#d&&e.preventDefault()};#re(){const e=this.#i,t=e?.ownerDocument.defaultView??null;if(e!==null){if(!this.#e){this.#ke(),this.#Me(e);return}if(!e.isConnected){queueMicrotask(()=>{this.#e&&e.isConnected&&this.#re()});return}if(!e.matches(":popover-open"))try{e.showPopover()}catch{return}if(this.#E===void 0&&t!==null){const i=y.get(t.document)??new Set;this.#E=t,i.add(this.#l),y.set(t.document,i),t.addEventListener("resize",this.#k),t.document.addEventListener("scroll",this.#k,!0),t.document.addEventListener("keydown",this.#be,!0),t.document.addEventListener("pointerdown",this.#me,!0),this.#w=new t.ResizeObserver(this.#k),this.#w.observe(e),this.#s!==null&&this.#w.observe(this.#s)}this.#ae()}}#ke(){const e=this.#E;e!==void 0&&(e.removeEventListener("resize",this.#k),e.document.removeEventListener("scroll",this.#k,!0),e.document.removeEventListener("keydown",this.#be,!0),e.document.removeEventListener("pointerdown",this.#me,!0),y.get(e.document)?.delete(this.#l),this.#u!==void 0&&e.cancelAnimationFrame(this.#u)),this.#u=void 0,this.#E=void 0,this.#A=!1,this.#w?.disconnect(),this.#w=void 0}#Me(e){const t=++this.#I,i=()=>{if(!(t!==this.#I||this.#e)){e.classList.remove(R);try{e.matches(":popover-open")&&e.hidePopover()}catch{}}};this.#o?i():Y(e,i)}#k=()=>{const e=this.#E;this.#u!==void 0||e===void 0||(this.#u=e.requestAnimationFrame(()=>{this.#u=void 0,this.#ae()}))};#ae(){const e=this.#i,t=this.#s??this.#t,i=e?.ownerDocument.defaultView??null;if(!this.#e||e===null||t===null||i===null)return;const n=t.getBoundingClientRect(),s={height:e.offsetHeight,width:e.offsetWidth},d=i.getComputedStyle(e),r=e.classList.contains(w),c=r?D(d,"--cw-Feedback-tooltip-caretHeight"):0,l=ie+c,p=a(()=>this.props.placement)??"top",h=p==="top"||p==="bottom";let f,u,m;if(h){const v=n.top-s.height-l,b=n.bottom+l,P=b+s.height>i.innerHeight-g;f=p==="top"&&v<g?"bottom":p==="bottom"&&P?"top":p,u=n.left+(n.width-s.width)/2,m=f==="top"?v:b}else{const v=i.getComputedStyle(t).direction==="rtl";let b=p==="end"!==v;u=b?n.right+l:n.left-s.width-l,(u<g||u+s.width>i.innerWidth-g)&&(b=!b,u=b?n.right+l:n.left-s.width-l),f=b?"right":"left",m=n.top+(n.height-s.height)/2}if(u=C(u,g,i.innerWidth-s.width-g),m=C(m,g,i.innerHeight-s.height-g),e.dataset.placement=f,e.style.left=`${u}px`,e.style.top=`${m}px`,r){const v=D(d,"--cw-Feedback-tooltip-caretWidth")/2,b=h?n.left+n.width/2-u:n.top+n.height/2-m,P=h?s.width:s.height;e.style.setProperty("--_cw-Tooltip-caretOffset",`${C(b,v,P-v)}px`)}}#V(e){const t=this.#M(),i=e??I(a(()=>this.props.showDelay),Q);if(!(this.#o||a(()=>this.props.disabled===!0))){if(this.#G(),i===0||t===void 0){this.#L(!0);return}this.#Ee(t,i),this.#g=t.setTimeout(()=>{const n=this.#we(t);if(this.#g=void 0,this.#M()!==t){this.#V(n);return}this.#L(!0)},i)}}#j(e){const t=this.#M(),i=e??I(a(()=>this.props.hideDelay),Z);if(this.#G(),this.#U(),this.#y=!1,!(this.#o||!this.#e||this.#B())){if(i===0||t===void 0){this.#L(!1);return}this.#Ee(t,i),this.#v=t.setTimeout(()=>{const n=this.#we(t);if(this.#v=void 0,this.#M()!==t){this.#j(n);return}this.#B()||this.#L(!1)},i)}}#Ee(e,t){this.#T=e,this.#Y=e.performance.now(),this.#K=t}#we(e){return Math.max(0,this.#K-(e.performance.now()-this.#Y))}#G(){this.#g!==void 0&&(this.#T?.clearTimeout(this.#g),this.#g=void 0)}#U(){this.#v!==void 0&&(this.#T?.clearTimeout(this.#v),this.#v=void 0)}#p(){this.#G(),this.#U(),this.#T=void 0}#M(){return(this.#t?.ownerDocument??this.#i?.ownerDocument??this.styleElement?.ownerDocument)?.defaultView??void 0}#Oe(){const e=this.#i;this.#o=!0,this.#e=!1,this.#re(),this.#p(),this.#m?.(),this.#m=void 0,this.#se(),this.#fe(this.#t),e!==null&&(e.removeEventListener("pointerenter",this.#W),e.removeEventListener("pointerleave",this.#J),e.removeEventListener("focusin",this.#N),e.removeEventListener("focusout",this.#$))}}function oe(o,e,t,i,n){const s=(r,c)=>r in i?L(i[r]):n?void 0:c,d={"aria-controls":s("aria-controls",t?o:void 0),"aria-describedby":s("aria-describedby",o),"aria-expanded":s("aria-expanded",t?`${e}`:void 0),"aria-haspopup":s("aria-haspopup",t?"dialog":void 0),tabIndex:n?void 0:0};for(const r of Object.keys(i))r.startsWith("aria-")&&!k(r)&&(d[r]=L(i[r]));return J(d,()=>e,()=>o)}function $(o,e,t,i,n){const s=e.disabled===!0,d=e.trigger,r=o,c=d===void 0&&!s&&!("tabindex"in r),l=(h,f)=>d!==void 0?void 0:h in r?L(r[h]):s?void 0:f,p={};for(const h of Object.keys(r))!["children","class","classList","ref","style"].includes(h)&&(d===void 0||!h.startsWith("aria-"))&&(p[h]=r[h]);return{attributes:{...p,"aria-controls":n?l("aria-controls",t):void 0,"aria-describedby":l("aria-describedby",t),"aria-expanded":n?l("aria-expanded",`${i}`):void 0,"aria-haspopup":n?l("aria-haspopup","dialog"):void 0,class:n?"cw-RichTooltip-trigger":"cw-PlainTooltip-trigger",tabIndex:c?0:void 0},content:()=>d===void 0?o.children:d(oe(t,i,n,r,s))}}function B(o){return<V when={S(o())}>
|
|
2
|
+
<span class="cw-RichTooltip-action">{o()}</span>
|
|
3
|
+
</V>}class re extends N{constructor(e){super(e,!1)}render(e,t){const i=<span class="cw-PlainTooltip">
|
|
4
|
+
<span class="cw-PlainTooltip-trigger"/>
|
|
5
|
+
<span aria-hidden="true"class="cw-PlainTooltip-popup"hidden popover="manual"role="tooltip"/>
|
|
6
|
+
</span>,n=i.firstElementChild,s=i.lastElementChild;return T(n,this.renderTrigger(e)),T(s,()=>this.props.content),this.setPopup(s),t?.(n),i}}const ae=H(()=>(o,e)=>{const t=e.id??M(),i=e.open===!0&&e.disabled!==!0,n=$(o,e,t,i,!1);return<span class={o.class}classList={{...o.classList,"cw-PlainTooltip":!0,"cw-PlainTooltip-open":i}}style={o.style}>
|
|
7
|
+
<span{...n.attributes}>{n.content()}</span>
|
|
8
|
+
<span aria-hidden={i?void 0:"true"}class="cw-PlainTooltip-popup"classList={{[w]:e.caret===!0}}hidden={!i}id={t}popover="manual"role="tooltip">{e.content}</span>
|
|
9
|
+
</span>},()=>re),Ee=o=>ae(_(o,["children","content"]));class de extends N{#n;constructor(e){super(e,!0),this.#n=null}get persistent(){return super.readProp("persistent",!0)[0]===!0}applyComponentProps(){super.readProp("persistent"),super.applyComponentProps()}applyPopupName(e){const t=super.readProps(["popupLabel","title"]),i=S(t.title),n=`${e.id}-title`;i?(e.setAttribute("aria-labelledby",n),e.removeAttribute("aria-label")):(e.removeAttribute("aria-labelledby"),e.setAttribute("aria-label",t.popupLabel??X)),this.#n!==null&&(this.#n.id=n,i?this.#n.removeAttribute("aria-hidden"):this.#n.setAttribute("aria-hidden","true"))}render(e,t){const i=<span class="cw-RichTooltip">
|
|
10
|
+
<span class="cw-RichTooltip-trigger"/>
|
|
11
|
+
<span aria-hidden="true"class={`cw-RichTooltip-popup ${F}`}hidden popover="manual"role="dialog"tabindex="-1">
|
|
12
|
+
<span class="cw-RichTooltip-title"/>
|
|
13
|
+
<span class="cw-RichTooltip-supportingText"/>
|
|
14
|
+
</span>
|
|
15
|
+
</span>,n=i.firstElementChild,s=i.lastElementChild;return this.#n=s.firstElementChild,T(n,this.renderTrigger(e)),T(this.#n,()=>this.props.title),T(s.lastElementChild,()=>this.props.supportingText??this.props.content),T(s,B(()=>this.props.action),null),this.setPopup(s),t?.(n),i}}const le=H(()=>(o,e)=>{const t=e.id??M(),i=e.open===!0&&e.disabled!==!0,n=S(e.title),s=$(o,e,t,i,!0);return<span class={o.class}classList={{...o.classList,"cw-RichTooltip":!0,"cw-RichTooltip-open":i}}style={o.style}>
|
|
16
|
+
<span{...s.attributes}>{s.content()}</span>
|
|
17
|
+
<span aria-hidden={i?void 0:"true"}aria-label={n?void 0:e.popupLabel??X}aria-labelledby={n?`${t}-title`:void 0}class={`cw-RichTooltip-popup ${F}`}classList={{[w]:e.caret===!0}}hidden={!i}id={t}popover="manual"role="dialog"tabindex="-1">
|
|
18
|
+
<span aria-hidden={n?void 0:"true"}class="cw-RichTooltip-title"id={`${t}-title`}>{e.title}</span>
|
|
19
|
+
<span class="cw-RichTooltip-supportingText">
|
|
20
|
+
{e.supportingText??e.content}
|
|
21
|
+
</span>
|
|
22
|
+
{B(()=>e.action)}
|
|
23
|
+
</span>
|
|
24
|
+
</span>},()=>de),we=o=>le(_(o,["action","children","content","supportingText","title"]));export{Ee as PlainTooltip,re as PlainTooltipController,we as RichTooltip,de as RichTooltipController,N as TooltipController};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@cw-attribute-roles cw-Icon;@layer cw-style{.cw-Icon{-moz-osx-font-smoothing:grayscale;color:cw-var(--cw-Icon-color);contain:strict;contain-intrinsic-size:cw-var(--cw-Icon-size) cw-var(--cw-Icon-size);direction:ltr;display:inline-block;font-family:cw-var(--cw-IconFont-font);font-size:cw-var(--cw-Icon-size);font-style:normal;font-variation-settings:cw-var(--cw-IconFont-axis-fill) var(--cw-Icon-fill),cw-var(--cw-IconFont-axis-grade) var(--cw-Icon-grade),cw-var(--cw-IconFont-axis-weight) var(--cw-Icon-weight);font-weight:400;height:cw-var(--cw-Icon-size);letter-spacing:normal;line-height:1;max-height:cw-var(--cw-Icon-size);max-width:cw-var(--cw-Icon-size);min-height:cw-var(--cw-Icon-size);min-width:cw-var(--cw-Icon-size);opacity:cw-var(--cw-Icon-opacity);overflow-wrap:normal;padding:0;pointer-events:none;text-transform:none;touch-action:none;user-select:none;white-space:nowrap;width:cw-var(--cw-Icon-size)}._cw-Icon-autoMirror:dir(rtl){scale:-1 1}@media (forced-colors: none){.cw-Icon:not(:has(>*)){-webkit-text-fill-color:transparent;background-clip:text;background-color:color-mix(in srgb,currentcolor calc(cw-var(--cw-Icon-opacity)*100%),transparent);opacity:1}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{insert as s}from"solid-js/web";import{defineDomComponent as a}from"..";import"./icon.css";const n="_cw-Icon-autoMirror",d=a(()=>(o,e)=>("name"in e&&(o.children=e.name),<i aria-hidden="true"role="img"{...o}classList={{...o.classList,[n]:e.autoMirror,"cw-Icon":!0}}/>),o=>class extends o{#e;constructor(e){super(e,{styleElementIsFunction:!0}),this.#e="name"in e}applyComponentProps(){const[e,r]=super.readProp("autoMirror");if(r&&super.setClass(n,e??!1),!this.#e)return;const[t,i]=super.readProp("name");i&&(super.styleElement.textContent=t??"")}render(e){const r=<i aria-hidden="true"class="cw-Icon"role="img"/>;return this.#e||s(r,e),r}});export{d as Icon};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{Icon as p}from"./icon";export{p as Icon};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import"./color/index.css";@import"./text/index.css";@import"./motion/index.css";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{defineDomComponent as m}from"./dom";export{m as defineDomComponent};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import{For as E,createUniqueId as w,onCleanup as A,untrack as P}from"solid-js";import{defineDomComponent as C}from"..";import{TextFieldController as D,renderTextField as L}from"./text-field";import"../container/elevation-shadow.css";const x="cw-Autocomplete",y="cw-Autocomplete-menu",r="cw-Autocomplete-option",a=8;function M(l,e){return L(l,e,()=>{const t=w();return{className:x,labelId:`${t}-label`,controlAttributes:{"aria-autocomplete":"list","aria-controls":t,"aria-expanded":"false",autocomplete:e.autocomplete??"off",role:"combobox"},content:()=><div aria-labelledby={`${t}-label`}class={`${y} cw-elevationShadow`}id={t}popover="manual"role="listbox">
|
|
2
|
+
<E each={e.options}>{o=><div aria-selected="false"class={r}role="option">{o}</div>}</E>
|
|
3
|
+
</div>}})}class S extends D{#i;#e;#n;#r;#c;#s;constructor(e){super(e),this.#i=w(),this.#e=null,this.#n=!1,this.#r=null,this.#c=0,this.#s=void 0,A(()=>{this.#t(!1),this.#s!==void 0&&this.#e?.ownerDocument.defaultView?.cancelAnimationFrame(this.#s)})}#l(){return this.#e===null?[]:Array.from(this.#e.children)}#p(){return this.#r===null?-1:this.#l().indexOf(this.#r)}#a(){const e=this.functionElement;return e!==null&&!e.readOnly&&!e.matches(":disabled")}#t(e){this.#n=e&&this.#a(),this.#n||this.#o(-1),this.#d()}#o(e){const t=this.#l(),o=t[e]??null;for(const n of t)n.setAttribute("aria-selected",n===o?"true":"false");if(this.#r=o,o===null){super.setAttribute("aria-activedescendant",void 0);return}o.id===""&&(o.id=`${this.#i}-${this.#c++}`),super.setAttribute("aria-activedescendant",o.id),o.scrollIntoView({block:"nearest"})}#d(){const e=this.#e,t=this.#l().length,o=this.#n&&t>0;if(this.#r!==null&&this.#p()<0&&this.#o(-1),super.setAttribute("aria-expanded",o?"true":"false"),!(e===null||!e.isConnected)){if(e.matches(":popover-open")===o){o&&this.#u();return}o?(e.showPopover(),this.#m(),e.ownerDocument.defaultView?.addEventListener("resize",this.#u),e.ownerDocument.addEventListener("scroll",this.#u,!0)):(e.hidePopover(),e.ownerDocument.defaultView?.removeEventListener("resize",this.#u),e.ownerDocument.removeEventListener("scroll",this.#u,!0))}}#m(){const e=this.#e,t=this.styleElement?.querySelector(".cw-TextField-control")??null,o=e?.ownerDocument.defaultView??null;if(e===null||t===null||o===null)return;const n=t.getBoundingClientRect(),s=o.innerHeight-n.bottom-a,u=n.top-a,i=s<e.scrollHeight&&u>s;e.style.setProperty("inline-size",`${n.width}px`),e.style.setProperty("left",`${n.left}px`),e.style.setProperty("top",i?"auto":`${n.bottom}px`),e.style.setProperty("bottom",i?`${o.innerHeight-n.top}px`:"auto"),e.style.setProperty("max-block-size",`${Math.max(0,i?u:s)}px`),e.style.setProperty("transform-origin",i?"bottom center":"top center")}#u=()=>{const e=this.#e?.ownerDocument.defaultView??null;e===null||this.#s!==void 0||(this.#s=e.requestAnimationFrame(()=>{this.#s=void 0,this.#e?.matches(":popover-open")===!0&&this.#m()}))};#h(e,t){const o=P(()=>this.props.options)[e];this.#t(!1),o!==void 0&&this.#a()&&this.commitValue(o,t)}#f=()=>{this.#o(-1),this.#t(!0)};#v=e=>{const t=this.#l().length,o=this.#n&&t>0,n=this.#p();if(!(e.defaultPrevented||e.isComposing))switch(e.key){case"ArrowDown":case"ArrowUp":{const s=e.key==="ArrowDown";if(t===0||!this.#a())return;e.preventDefault(),o?s?this.#o(n<t-1?n+1:0):this.#o(n>0?n-1:t-1):(this.#t(!0),e.altKey||this.#o(s?0:t-1));return}case"Home":case"End":if(!o||n<0)return;e.preventDefault(),this.#o(e.key==="Home"?0:t-1);return;case"Enter":if(!o||n<0)return;e.preventDefault(),this.#h(n,e);return;case"Escape":if(!o)return;e.preventDefault(),this.#t(!1);return}};#b=e=>{const t=e.relatedTarget;(t===null||!(this.styleElement?.contains(t)??!1))&&this.#t(!1)};#E=e=>{e.preventDefault()};#w=e=>{const t=e.target.closest(`.${r}`),o=t===null?-1:this.#l().indexOf(t);o>=0&&this.#h(o,e)};applyComponentProps(){const[e]=super.readProp("autocomplete"),[,t]=super.readProp("options");super.applyComponentProps(),super.setClass(x,!0),super.setAttribute("autocomplete",e??"off"),this.labelElement?.setAttribute("id",`${this.#i}-label`),this.#n&&!this.#a()&&this.#t(!1),t&&queueMicrotask(()=>this.#d())}onFunctionElementChanged(e){const t=e;super.onFunctionElementChanged(e),t!==null&&(super.setAttribute("aria-autocomplete","list"),super.setAttribute("aria-controls",this.#i),super.setAttribute("aria-expanded","false"),super.setAttribute("role","combobox"),t.addEventListener("focusout",this.#b),t.addEventListener("input",this.#f),t.addEventListener("keydown",this.#v))}renderExtension(){const e=this.#i;return<div aria-labelledby={`${e}-label`}class={`${y} cw-elevationShadow`}id={e}on:click={this.#w}on:mousedown={this.#E}popover="manual"ref={t=>this.#e=t}role="listbox">
|
|
4
|
+
<E each={this.props.options}>{t=><div aria-selected="false"class={r}role="option">{t}</div>}</E>
|
|
5
|
+
</div>}}const $=C(()=>M,()=>S);export{$ as Autocomplete,S as AutocompleteController};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import{createEffect as b,createMemo as x,createSignal as m,onCleanup as O}from"solid-js";import{isServer as L}from"solid-js/web";const M=new Set(["class","classList","style"]),l=new WeakMap;function S(e){const t=e.getRootNode();return t.nodeType===Node.DOCUMENT_NODE||t.nodeType===Node.DOCUMENT_FRAGMENT_NODE?t:e.ownerDocument}function E(e){const{form:t}=e;return t===void 0?e.closest("form"):t}function a(e,t){let n=l.get(t);n===void 0&&(n=new Set,l.set(t,n),t.addEventListener("reset",F,!0)),n.add(e)}function p(e,t){const n=l.get(t);n===void 0||!n.delete(e)||n.size!==0||(l.delete(t),t.removeEventListener("reset",F,!0))}function I(e){const t=S(e.element),n=E(e.element);e.root=t,a(e,t),n!==null&&!n.isConnected&&(e.detachedForm=n,a(e,n))}function R(e){e.root!==null&&p(e,e.root),e.detachedForm!==null&&p(e,e.detachedForm),e.root=null,e.detachedForm=null}function w(e,t){let n=!0;const r=()=>{!n||e.root===null||t.eventPhase!==Event.NONE||(n=!1,t.defaultPrevented||e.callback())};e.lastEvent=t,queueMicrotask(r),setTimeout(r,0)}function F(e){const t=l.get(e.currentTarget);if(t!==void 0)for(const n of Array.from(t))n.root===null||n.lastEvent===e||(n.root!==S(n.element)&&(R(n),I(n),n.onRootChanged?.()),E(n.element)===e.target&&w(n,e))}function D(e){const t=e,n={},r={};for(const o of Object.keys(t).filter(u=>u!=="children")){const u=M.has(o)?n:r;Object.defineProperty(u,o,{enumerable:!0,get:()=>t[o]})}return{containerProps:n,elementProps:r,get children(){return t.children}}}function s(e){return e!=null&&typeof e!="boolean"&&e!==""}function T(...e){return e.find(s)}function h(...e){for(const t of e){const n=t();if(s(n))return n}}function H(e){const t=e.errorText;if(s(t))return t;const n=e.error;return n===!0||s(n)?n:void 0}function J(e,t){return t!==void 0&&t!==!0?t:h(()=>e.supportingText,()=>e.helperText)}function X(...e){const t=e.filter(n=>n!==void 0&&n!=="");return t.length===0?void 0:t.join(" ")}function z(e){return T(e.errorText,e.error,e.supportingText,e.helperText)}function j(e){const{error:t,errorText:n}=e;return t===!0||T(n,t)!==void 0}const N=["restingMotion","floatingMotion","restingLabel"],P="--_cw-field-label-inline-size",k={attributes:!0,characterData:!0,childList:!0,subtree:!0};function c(e){return typeof e=="function"?c(e()):Array.isArray(e)?e.flatMap(c):s(e)?[typeof e.nodeType=="number"?e:String(e)]:[]}function g(e,t){return N.map(n=><span aria-hidden="true"class={`${e}-${n}`}inert>
|
|
2
|
+
{t()}
|
|
3
|
+
<span class={`${e}-asterisk`}>*</span>
|
|
4
|
+
</span>)}function A(e,t,n){const r=x(()=>c(t())),[o,u]=m(void 0,{equals:!1});let d;return b(()=>{if(d!==void 0||r().every(f=>typeof f=="string"))return;const i=n();if(i===null)return;const v=i.ownerDocument.defaultView?.MutationObserver??MutationObserver;d=new v(f=>{f.some(y=>y.target!==i)&&u()}),d.observe(i,k)}),O(()=>d?.disconnect()),g(e,()=>(o(),r().map(i=>typeof i=="string"?i:i.cloneNode(!0))))}function $(e){if(L){let r;return{content(o){return r=o,o},copies(){return g(e,()=>r)}}}const[t,n]=m();return{content(r){return n(()=>r),r},copies(r){return A(e,t,r??(()=>null))}}}function B(e,t){const n=e.styleElement?.querySelector(`.${t}-floatingMotion`)??null,r=n?.ownerDocument.defaultView?.ResizeObserver;if(n===null||r===void 0)return()=>{};const o=new r(([u])=>e.setStyle(P,`${u.borderBoxSize[0].inlineSize}px`));return o.observe(n),()=>o.disconnect()}function V(e,t,n){const r={element:e,callback:t,onRootChanged:n,root:null,detachedForm:null,lastEvent:null};return I(r),()=>R(r)}export{$ as createFieldLabel,T as firstInputSlot,h as firstInputSlotOf,j as hasInputError,X as idReferencesOf,H as inputErrorOf,V as observeFormReset,B as observeLabelInlineSize,D as splitInputElementProps,z as supportingSlot,J as supportingSlotOf};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@cw-attribute-roles cw-DatePicker;@layer cw-style{.cw-DatePicker{--cw-datepicker-cell-size: cw-var(--cw-DatePicker-dateCellSize);--cw-datepicker-container-color: cw-var(--cw-DatePicker-containerColor);--cw-datepicker-container-size: cw-var(--cw-DatePicker-dateContainerSize);--cw-datepicker-date-color: cw-var(--cw-DatePicker-dateLabelTextColor);--cw-datepicker-date-layer-color: cw-var(--cw-DatePicker-dateStateLayerColor);--cw-datepicker-disabled-opacity: cw-var(--cw-DatePicker-disabledOpacity);--cw-datepicker-divider-color: cw-var(--cw-DatePicker-dividerColor);--cw-datepicker-headline-color: cw-var(--cw-DatePicker-headerHeadlineColor);--cw-datepicker-layer-color: currentcolor;--cw-datepicker-list-height: cw-var(--cw-DatePicker-rangeListHeight);--cw-datepicker-menu-color: cw-var(--cw-DatePicker-menuItemLabelTextColor);--cw-datepicker-menu-item-height: cw-var(--cw-DatePicker-menuItemHeight);--cw-datepicker-menu-selected-color: cw-var(--cw-DatePicker-menuItemSelectedLabelTextColor);--cw-datepicker-menu-selected-container-color: cw-var(--cw-DatePicker-menuItemSelectedContainerColor);--cw-datepicker-month-height: calc( var(--cw-datepicker-subhead-height) + 6 * var(--cw-datepicker-cell-size) );--cw-datepicker-navigation-color: cw-var(--cw-DatePicker-navigationColor);--cw-datepicker-outside-color: cw-var(--cw-DatePicker-dateOutsideMonthLabelTextColor);--cw-datepicker-page-duration: cw-var(--cw-Motion-spring-spatial-default-duration);--cw-datepicker-page-easing: cw-var(--cw-Motion-spring-spatial-default-easing);--cw-datepicker-range-color: cw-var(--cw-DatePicker-rangeLabelTextColor);--cw-datepicker-range-container-color: cw-var(--cw-DatePicker-rangeContainerColor);--cw-datepicker-range-container-height: cw-var(--cw-DatePicker-rangeContainerHeight);--cw-datepicker-selected-color: cw-var(--cw-DatePicker-dateSelectedLabelTextColor);--cw-datepicker-selected-container-color: cw-var(--cw-DatePicker-dateSelectedContainerColor);--cw-datepicker-subhead-color: cw-var(--cw-DatePicker-monthSubheadColor);--cw-datepicker-subhead-height: 48px;--cw-datepicker-supporting-color: cw-var(--cw-DatePicker-headerSupportingTextColor);--cw-datepicker-today-color: cw-var(--cw-DatePicker-dateTodayColor);--cw-datepicker-today-outline-width: cw-var(--cw-DatePicker-dateTodayOutlineWidth);--cw-datepicker-weekdays-color: cw-var(--cw-DatePicker-weekdaysLabelTextColor);--cw-datepicker-year-color: cw-var(--cw-DatePicker-yearLabelTextColor);--cw-datepicker-year-height: cw-var(--cw-DatePicker-yearContainerHeight);--cw-datepicker-year-selected-color: cw-var(--cw-DatePicker-yearSelectedLabelTextColor);--cw-datepicker-year-selected-container-color: cw-var(--cw-DatePicker-yearSelectedContainerColor);--cw-datepicker-year-width: cw-var(--cw-DatePicker-yearContainerWidth);-cw-typescale:--cw-Typescale-body-large;background-color:var(--cw-datepicker-container-color);border-radius:cw-var(--cw-DatePicker-containerShape);box-sizing:border-box;color:var(--cw-datepicker-date-color);display:flex;flex-direction:column;inline-size:cw-var(--cw-DatePicker-containerWidth);max-inline-size:100%;padding-block-end:8px}.cw-DatePicker .cw-Icon{--cw-Icon-color: currentcolor;--cw-Icon-size: 24px}.cw-DatePicker-header{color:var(--cw-datepicker-supporting-color);display:flex;flex-direction:column;padding-block-start:16px;padding-inline:24px 12px}.cw-DatePicker-title{-cw-typescale:--cw-Typescale-label-large}.cw-DatePicker-headlineRow{align-items:flex-end;display:flex;gap:12px;justify-content:space-between;padding-block-end:12px}.cw-DatePicker-headline{-cw-typescale:--cw-Typescale-headline-large;color:var(--cw-datepicker-headline-color);min-inline-size:0}.cw-DateRangePicker .cw-DatePicker-headline{-cw-typescale:--cw-Typescale-title-large}.cw-DatePicker-divider{background-color:var(--cw-datepicker-divider-color);block-size:1px;flex:none}.cw-DatePicker-panes{display:grid;overflow:clip}.cw-DatePicker-picker,.cw-DatePicker-inputs{grid-area:1 / 1;transition-behavior:allow-discrete;transition-duration:cw-var(--cw-Motion-spring-effect-default-duration),cw-var(--cw-Motion-spring-effect-default-duration),cw-var(--cw-Motion-spring-spatial-default-duration);transition-property:display,opacity,translate;transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing),cw-var(--cw-Motion-spring-effect-default-easing),cw-var(--cw-Motion-spring-spatial-default-easing)}.cw-DatePicker-picker[hidden],.cw-DatePicker-inputs[hidden]{display:none;opacity:0;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-spatial-default-duration);transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-spatial-default-easing)}.cw-DatePicker-picker[hidden]{translate:0 -48px}.cw-DatePicker-inputs[hidden]{translate:0 100%}@starting-style{.cw-DatePicker-picker:not([hidden]){opacity:0;translate:0 -48px}.cw-DatePicker-inputs:not([hidden]){opacity:0;translate:0 100%}}.cw-DatePicker-navigation{align-items:center;color:var(--cw-datepicker-navigation-color);display:flex;justify-content:space-between;min-block-size:56px;padding-inline:12px}.cw-DatePicker-arrows,.cw-DatePicker-menuGroup{align-items:center;display:flex}.cw-DatePicker-arrows[hidden]{display:none}.cw-DatePicker button{align-items:center;appearance:none;background:transparent;border:0;border-radius:cw-var(--cw-CornerRadius-full);color:inherit;cursor:pointer;display:inline-flex;font:inherit;justify-content:center;margin:0;padding:0;position:relative}.cw-DatePicker button:disabled{cursor:default;opacity:var(--cw-datepicker-disabled-opacity)}.cw-DatePicker-yearToggle,.cw-DatePicker-menuButton{-cw-typescale:--cw-Typescale-label-large;block-size:40px;gap:8px;padding-inline:12px 8px}.cw-DatePicker-menuButton .cw-Icon{--cw-Icon-size: 18px}.cw-DatePicker-iconButton{block-size:48px;inline-size:48px}.cw-DatePicker button:before,.cw-DatePicker-day:after,.cw-DatePicker-yearLabel:after,.cw-DatePicker-menuItem:before{--cw-datepicker-layer-opacity: 0;background-color:currentcolor;border-radius:inherit;color:cw-scale-opacity(var(--cw-datepicker-layer-color),var(--cw-datepicker-layer-opacity));content:"";inset:0;pointer-events:none;position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-DatePicker-iconButton:before{inset:4px}.cw-DatePicker button:hover:not(:disabled):before,.cw-DatePicker-date:hover>.cw-DatePicker-day:after,.cw-DatePicker-year:hover>.cw-DatePicker-yearLabel:after,.cw-DatePicker-menuItem:hover:before{--cw-datepicker-layer-opacity: cw-var(--cw-State-layer-hoverOpacity)}.cw-DatePicker button:focus-visible:before,.cw-DatePicker-date:focus-visible>.cw-DatePicker-day:after,.cw-DatePicker-year:focus-visible>.cw-DatePicker-yearLabel:after,.cw-DatePicker-menuItem:focus-visible:before{--cw-datepicker-layer-opacity: cw-var(--cw-State-layer-focusOpacity)}.cw-DatePicker button:active:not(:disabled):before,.cw-DatePicker-date:active>.cw-DatePicker-day:after,.cw-DatePicker-year:active>.cw-DatePicker-yearLabel:after,.cw-DatePicker-menuItem:active:before{--cw-datepicker-layer-opacity: cw-var(--cw-State-layer-pressOpacity)}.cw-DatePicker button:focus-visible,.cw-DatePicker-date:focus-visible>.cw-DatePicker-day,.cw-DatePicker-year:focus-visible>.cw-DatePicker-yearLabel,.cw-DatePicker-menuItem:focus-visible,.cw-DatePicker-months:focus-visible{outline-color:cw-var(--cw-Color-secondary-fill);outline-offset:cw-var(--cw-State-focusIndicator-outerOffset);outline-style:solid;outline-width:cw-var(--cw-State-focusIndicator-thickness)}.cw-DatePicker-iconButton:focus-visible{outline-offset:calc(cw-var(--cw-State-focusIndicator-outerOffset) - 4px)}.cw-DatePicker-body{padding-inline:12px;position:relative}.cw-DatePicker-days{overflow:hidden;position:relative}.cw-DatePicker-grid{border-collapse:collapse;inline-size:100%;table-layout:fixed}._cw-DatePicker-ghost{inset-block-start:0;inset-inline-start:0;pointer-events:none;position:absolute}.cw-DatePicker-grid th,.cw-DatePicker-weekdays>span{-cw-typescale:--cw-Typescale-body-large;block-size:var(--cw-datepicker-cell-size);color:var(--cw-datepicker-weekdays-color);font-weight:inherit;padding:0;text-align:center}.cw-DatePicker-date{block-size:var(--cw-datepicker-cell-size);cursor:pointer;outline:none;padding:0;text-align:center}.cw-DatePicker-date:not([data-cw-date]),.cw-DatePicker-date[aria-disabled=true]{cursor:default}.cw-DatePicker-day{--cw-datepicker-layer-color: var(--cw-datepicker-date-layer-color);align-items:center;block-size:var(--cw-datepicker-container-size);border-radius:cw-var(--cw-CornerRadius-full);box-sizing:border-box;display:inline-flex;inline-size:var(--cw-datepicker-container-size);justify-content:center;position:relative;transition-duration:cw-var(--cw-Motion-spring-effect-default-duration),cw-var(--cw-Motion-spring-effect-default-duration);transition-property:background-color,color;transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing),cw-var(--cw-Motion-spring-effect-default-easing);vertical-align:middle}.cw-DatePicker-outside>.cw-DatePicker-day{color:var(--cw-datepicker-outside-color)}.cw-DatePicker-today:not(.cw-DatePicker-selected)>.cw-DatePicker-day{--cw-datepicker-layer-color: var(--cw-datepicker-today-color);box-shadow:inset 0 0 0 var(--cw-datepicker-today-outline-width) var(--cw-datepicker-today-color);color:var(--cw-datepicker-today-color)}.cw-DatePicker-inRange{background-image:linear-gradient(var(--cw-datepicker-range-container-color),var(--cw-datepicker-range-container-color));background-position:center;background-repeat:no-repeat;background-size:100% var(--cw-datepicker-range-container-height)}.cw-DatePicker-inRange:not(.cw-DatePicker-selected)>.cw-DatePicker-day{--cw-datepicker-layer-color: var(--cw-datepicker-range-color);color:var(--cw-datepicker-range-color)}.cw-DatePicker-rangeStart,.cw-DatePicker-rangeEnd{background-size:50% var(--cw-datepicker-range-container-height)}.cw-DatePicker-rangeStart,.cw-DatePicker-rangeEnd:dir(rtl){background-position:right center}.cw-DatePicker-rangeEnd,.cw-DatePicker-rangeStart:dir(rtl){background-position:left center}.cw-DatePicker-rangeStart.cw-DatePicker-rangeEnd{background-image:none}.cw-DatePicker-selected>.cw-DatePicker-day{--cw-datepicker-layer-color: var(--cw-datepicker-selected-color);background-color:var(--cw-datepicker-selected-container-color);color:var(--cw-datepicker-selected-color)}.cw-DatePicker-date[aria-disabled=true]>.cw-DatePicker-day{opacity:var(--cw-datepicker-disabled-opacity)}.cw-DatePicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding-inline:12px}.cw-DatePicker-weekdays>span{align-content:center}.cw-DatePicker-month thead{clip-path:inset(50%);position:absolute}.cw-DatePicker-months{block-size:var(--cw-datepicker-list-height);overflow-anchor:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.cw-DatePicker-spacer{block-size:calc(var(--cw-datepicker-months) * var(--cw-datepicker-month-height))}.cw-DatePicker-month{block-size:var(--cw-datepicker-month-height);overflow:hidden;position:relative}.cw-DatePicker-subhead{-cw-typescale:--cw-Typescale-title-small;block-size:var(--cw-datepicker-subhead-height);box-sizing:border-box;color:var(--cw-datepicker-subhead-color);margin:0;padding-block:20px 8px;padding-inline-start:12px}.cw-DatePicker-years,.cw-DatePicker-monthMenu{background-color:var(--cw-datepicker-container-color);box-sizing:border-box;clip-path:inset(0);inset:0;overflow-y:auto;overscroll-behavior:contain;padding-inline:12px;position:absolute;transition-behavior:allow-discrete;transition-duration:cw-var(--cw-Motion-spring-effect-default-duration),cw-var(--cw-Motion-spring-effect-default-duration),cw-var(--cw-Motion-spring-effect-default-duration);transition-property:clip-path,display,opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing),cw-var(--cw-Motion-spring-effect-default-easing),cw-var(--cw-Motion-spring-effect-default-easing)}.cw-DatePicker-years[hidden],.cw-DatePicker-monthMenu[hidden]{clip-path:inset(0 0 100% 0);display:none;opacity:0;transition-duration:cw-var(--cw-Motion-spring-effect-default-duration),cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration);transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing),cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing)}@starting-style{.cw-DatePicker-years:not([hidden]),.cw-DatePicker-monthMenu:not([hidden]){clip-path:inset(0 0 100% 0);opacity:.6}}.cw-DatePicker-yearGrid{border-collapse:collapse;inline-size:100%;table-layout:fixed}.cw-DatePicker-year{block-size:calc(var(--cw-datepicker-year-height) + 16px);cursor:pointer;outline:none;padding:0;text-align:center}.cw-DatePicker-yearLabel{--cw-datepicker-layer-color: var(--cw-datepicker-year-color);align-items:center;block-size:var(--cw-datepicker-year-height);border-radius:cw-var(--cw-CornerRadius-full);box-sizing:border-box;color:var(--cw-datepicker-year-color);display:inline-flex;inline-size:var(--cw-datepicker-year-width);justify-content:center;position:relative;transition-duration:cw-var(--cw-Motion-spring-effect-default-duration),cw-var(--cw-Motion-spring-effect-default-duration);transition-property:background-color,color;transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing),cw-var(--cw-Motion-spring-effect-default-easing);vertical-align:middle}.cw-DatePicker-current:not(.cw-DatePicker-selected)>.cw-DatePicker-yearLabel{--cw-datepicker-layer-color: var(--cw-datepicker-today-color);box-shadow:inset 0 0 0 var(--cw-datepicker-today-outline-width) var(--cw-datepicker-today-color);color:var(--cw-datepicker-today-color)}.cw-DatePicker-year.cw-DatePicker-selected>.cw-DatePicker-yearLabel{--cw-datepicker-layer-color: var(--cw-datepicker-year-selected-color);background-color:var(--cw-datepicker-year-selected-container-color);color:var(--cw-datepicker-year-selected-color)}.cw-DatePicker-menu{list-style:none;margin:0;padding:0}.cw-DatePicker-menuItem{--cw-datepicker-layer-color: var(--cw-datepicker-menu-color);align-items:center;block-size:var(--cw-datepicker-menu-item-height);color:var(--cw-datepicker-menu-color);cursor:pointer;display:flex;gap:16px;outline:none;padding-inline:12px 16px;position:relative}.cw-DatePicker-menuItem[aria-selected=true]{--cw-datepicker-layer-color: var(--cw-datepicker-menu-selected-color);background-color:var(--cw-datepicker-menu-selected-container-color);color:var(--cw-datepicker-menu-selected-color)}.cw-DatePicker-menuCheck{display:inline-flex;inline-size:24px}.cw-DatePicker-inputs{display:flex;flex-direction:column;gap:16px;padding-block:16px 8px;padding-inline:24px}.cw-DatePicker-inputs[hidden]{display:none}.cw-DatePicker-inputs>*{inline-size:100%}.cw-DatePicker-docked .cw-DatePicker-navigation{min-block-size:64px;padding-inline:4px}.cw-DatePicker[hidden]{display:none}@media (forced-colors: active){.cw-DatePicker-selected>.cw-DatePicker-day,.cw-DatePicker-year.cw-DatePicker-selected>.cw-DatePicker-yearLabel,.cw-DatePicker-menuItem[aria-selected=true]{outline:2px solid Highlight}.cw-DatePicker-inRange{border-block-end:2px solid Highlight}}}@layer cw-theme{.cw-DatePicker-docked{@cw-apply-theme docked,cw-DatePicker;}}
|
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import{For as P,Show as M,batch as v,createMemo as y,createRenderEffect as x,createSelector as G,createSignal as w,createUniqueId as q,on as Y,onCleanup as xe,onMount as Ye,untrack as u}from"solid-js";import{defineDomComponent as ne}from"..";import{DomController as _e}from"../dom/client";import{Icon as E}from"../icon";import{applyMotion as W}from"../motion";import{observeFormReset as Ne}from"./base";import{TextField as He}from"./text-field";import"./date-picker.css";const $e={selectDate:"Select date",selectRange:"Select dates",enterDate:"Enter date",enterRange:"Enter dates",selectedDate:"Selected date",enteredDate:"Entered date",date:"Date",startDate:"Start date",endDate:"End date",previousMonth:"Previous month",nextMonth:"Next month",previousYear:"Previous year",nextYear:"Next year",month:"Month",year:"Year",yearSelection:"Switch to selecting a year",daySelection:"Switch to selecting a day",switchToInput:"Switch to date input",switchToCalendar:"Switch to calendar",invalidPattern:"Date does not match expected pattern: {pattern}",invalidYearRange:"Date out of expected year range {start} - {end}",notAllowed:"Date not allowed: {date}",invalidRange:"Invalid date range input"},Z="en-US",Ve="1900-01-01",Ue="2100-12-31",p=7,re=6,T=3,_=201,j=5,N=4800,Ke=366,$={year:4,month:2,day:2},Je={year:"YYYY",month:"MM",day:"DD"},ae=8,Be="/",se=/^[\s\u061c\u200e\u200f]$/u,Xe=/^[0-9]$/u,U="2023-01-01",Ge=new Set(["AG","AS","BD","BR","BS","BT","BW","BZ","CA","CN","CO","DM","DO","ET","GT","GU","HK","HN","ID","IL","IN","JM","JP","KE","KH","KR","LA","MH","MM","MO","MT","MX","MZ","NI","NP","PA","PE","PH","PK","PR","PT","PY","SA","SG","SV","TH","TT","TW","UM","US","VE","VI","WS","YE","ZA","ZW"]),qe=new Set(["AF","BH","DJ","DZ","EG","IQ","IR","JO","KW","LY","OM","QA","SD","SY"]),z={sun:0,mon:1,tue:2,wed:3,thu:4,fri:5,sat:6};function D(r){if(r===void 0||!/^\d{4}-\d{2}-\d{2}$/u.test(r)||r.startsWith("0000"))return;const e=new Date(`${r}T00:00:00.000Z`);return Number.isFinite(e.getTime())&&oe(e)===r?e:void 0}function oe(r){return r.toISOString().slice(0,10)}function A(r,e,t=0){const n=D(r);if(t!==0){const a=n.getUTCDate();n.setUTCDate(1),n.setUTCMonth(n.getUTCMonth()+t+1,0),n.setUTCDate(Math.min(a,n.getUTCDate()))}return n.setUTCDate(n.getUTCDate()+e),oe(n)}function g(r){return Number(r.slice(0,4))*12+Number(r.slice(5,7))-1}function V(r){return`${String(Math.floor(r/12)).padStart(4,"0")}-${String(r%12+1).padStart(2,"0")}`}function k(r,e,t){return Math.min(t,Math.max(e,r))}function F(r,e){return D(r)===void 0?e:r}function We(){const r=new Date,e=String(r.getFullYear()).padStart(4,"0"),t=String(r.getMonth()+1).padStart(2,"0");return`${e}-${t}-${String(r.getDate()).padStart(2,"0")}`}function Ze(r){const e=/-u(?:-[a-z0-9]{2,8})*?-fw-([a-z]{3})(?:-|$)/u.exec(r.toLowerCase());let t;if(e!==null&&e[1]in z)return z[e[1]];try{t=new Intl.Locale(r).maximize().region}catch{t=void 0}return t===void 0?1:Ge.has(t)?0:qe.has(t)?6:t==="MV"?5:1}function H(r,e){return r.replace(/\{(\w+)\}/gu,(t,n)=>e[n]??t)}function je(r){const e=t=>new Intl.DateTimeFormat(r,{...t,calendar:"gregory",timeZone:"UTC"});return{monthYear:e({month:"long",year:"numeric"}),monthShort:e({month:"short"}),monthLong:e({month:"long"}),year:e({year:"numeric"}),date:e({dateStyle:"full"}),headline:e({day:"numeric",month:"short",year:"numeric"}),day:e({day:"numeric"}),weekday:e({weekday:"narrow"}),weekdayLong:e({weekday:"long"}),entry:ze(r)}}function ze(r){const e=new Intl.DateTimeFormat(r,{calendar:"gregory",day:"2-digit",month:"2-digit",timeZone:"UTC",year:"numeric"}),t=e.formatToParts(D(U)),n=t.map(o=>o.type).filter(o=>o==="year"||o==="month"||o==="day"),a=t.filter(o=>o.type==="literal").flatMap(o=>Array.from(o.value)).find(o=>!se.test(o))??Be,s=new Intl.NumberFormat(r,{numberingSystem:e.resolvedOptions().numberingSystem});return{fields:n,delimiter:a,pattern:n.map(o=>Je[o]).join(a),digits:Array.from({length:10},(o,i)=>s.format(i))}}function C(r,e){const t={year:r.slice(0,4),month:r.slice(5,7),day:r.slice(8,10)};return D(r)===void 0?"":e.fields.map(n=>t[n]).join("")}function K(r,e){const t=e.digits.indexOf(r);return t>=0?String(t):Xe.test(r)?r:void 0}function Qe(r,e){let t="";for(const n of r){const a=K(n,e);if(a!==void 0)t+=a;else if(n!==e.delimiter&&!se.test(n))return}return t}function Q(r,e){return Array.from(r).filter(t=>K(t,e)!==void 0).length}function et(r,e){let t="",n=0;for(const a of e.fields){const s=n+$[a];for(const o of r.slice(n,s))t+=e.digits[Number(o)];r.length>s&&(t+=e.delimiter),n=s}return t}function ee(r,e){const t={year:"",month:"",day:""};let n=0;for(const a of e.fields)t[a]=r.slice(n,n+$[a]),n+=$[a];return F(`${t.year}-${t.month}-${t.day}`,"")}function tt(r,e,t){let n=0,a=0;for(const s of r){if(n===e)return a;K(s,t)!==void 0&&n++,a+=s.length}return a}function m(r,e){return r.format(D(e.length===7?`${e}-01`:e))}class nt{range;today;props;selection;minimum;maximum;format;firstDay;month;focused;inputMode;overlay;yearsShown;focusedYear;drafts;errors;listStart;windowStart;#a;#u;#h;#m;#s;#t;#n;#o;#i;#c;#e;#d;#D;#f;constructor(e,t,n,a,s,o){const[i,c]=w(n),l=y(()=>F(e.min,Ve)),d=y(()=>F(e.max,Ue)),h=u(()=>F(e.today,We())),f=u(()=>D(n[0])===void 0?h:n[0]),S=u(()=>this.#g(f,l(),d())),R=u(()=>{const b=`${e.defaultMonth}-01`;return D(b)===void 0?S.slice(0,7):this.#g(b,l(),d()).slice(0,7)}),[I,ye]=w(R),[pe,De]=w(S),[be,we]=w(u(()=>e.defaultDisplayMode==="input")),[ve,Pe]=w("none"),[Se,ke]=w(!1),[Ee,Me]=w(Number(R.slice(0,4))),O=y(()=>je(e.locale??Z)),B=u(O).entry,[Te,Re]=w([C(n[0],B),C(n[1],B)]),[Ce,Ae]=w([void 0,void 0]),[Le,Ie]=w(g(R)),[Fe,Oe]=w(g(R));this.range=s,this.today=h,this.props=e,this.selection=y(()=>a?t():i(),n,{equals:(b,X)=>b[0]===X[0]&&b[1]===X[1]}),this.minimum=l,this.maximum=d,this.format=O,this.firstDay=y(()=>e.firstDayOfWeek??Ze(e.locale??Z)),this.month=I,this.focused=pe,this.inputMode=be,this.overlay=ve,this.yearsShown=Se,this.focusedYear=Ee,this.drafts=Te,this.errors=Ce,this.listStart=Le,this.windowStart=Fe,this.#a=a,this.#u=n,this.#h=o,this.#m=c,this.#s=ye,this.#t=De,this.#n=we,this.#o=Pe,this.#i=ke,this.#c=Me,this.#e=Re,this.#d=Ae,this.#D=Ie,this.#f=Oe,x(Y(()=>this.selection()[0],b=>{D(b)!==void 0&&(this.#t(b),this.continuous()||this.#s(b.slice(0,7)))},{defer:!0})),x(Y(this.selection,b=>this.#b(b),{defer:!0})),x(Y(O,()=>this.#r(this.selection()),{defer:!0}))}#g(e,t,n){return e<t?t:e>n?n:e}label(e){return this.props.labels?.[e]??$e[e]}docked(){return this.props.presentation==="docked"}continuous(){return this.range&&!this.docked()&&this.props.rangeLayout!=="paged"}minimumMonth(){return g(this.minimum())}maximumMonth(){return g(this.maximum())}listEnd(){return Math.min(this.maximumMonth(),this.listStart()+N-1)}windowMonths(){const e=this.windowStart(),t=Math.max(0,Math.min(j,this.listEnd()-e+1));return Array.from({length:t},(n,a)=>V(e+a))}isSelectable(e){return D(e)!==void 0&&e>=this.minimum()&&e<=this.maximum()&&this.props.disabled!==!0&&this.props.isDateDisabled?.(e)!==!0}flagsOf(e,t,n){const[a,s]=this.selection(),o=this.range&&a!==""&&s!=="";return e===""?0:(e===a||e===s?1:0)|(o&&e===a?2:0)|(o&&e===s?4:0)|(o&&e>=a&&e<=s?8:0)|(e===this.today?16:0)|(t?0:32)|(e.slice(0,7)===n?0:64)}daysOf(e){const t=`${e}-01`,n=(D(t).getUTCDay()-this.firstDay()+p)%p,a=this.docked();return Array.from({length:re*p},(s,o)=>{const i=A(t,o-n);return a||i.slice(0,7)===e?i:""})}#y(e,t){this.props.disabled===!0||this.props.readOnly===!0||(this.#a||this.#m(e),this.#h(e,t))}select(e,t){const[n,a]=this.selection();this.isSelectable(e)&&this.#y(this.range&&n!==""&&a===""&&e>=n?[n,e]:[e,""],t)}showMonth(e){const t=this.#g(`${e}-01`,this.minimum(),this.maximum());v(()=>{this.#s(t.slice(0,7)),this.#t(t)})}focus(e){v(()=>{this.#t(e),this.continuous()||this.#s(e.slice(0,7))})}trackFocus(e){this.#t(e)}scrollTo(e){const t=V(k(e,this.minimumMonth(),this.maximumMonth()));t!==u(this.month)&&this.#s(t)}centerList(e){const t=k(e-N/2,this.minimumMonth(),Math.max(this.minimumMonth(),this.maximumMonth()-N+1));this.#D(t)}renderFrom(e){const t=k(e,this.listStart(),Math.max(this.listStart(),this.listEnd()-j+1));t!==u(this.windowStart)&&this.#f(t)}setInputMode(e){v(()=>{this.#o("none"),this.#r(this.selection()),this.#n(e)})}setOverlay(e){v(()=>{e==="years"&&(this.#c(Number(this.month().slice(0,4))),this.#i(!0)),this.#o(e)})}years(){return[Number(this.minimum().slice(0,4)),Number(this.maximum().slice(0,4))]}yearPage(){const[e,t]=this.years(),n=this.focusedYear()-(_-1)/2,a=k(n,e,Math.max(e,t-_+1));return[a,Math.min(t,a+_-1)]}focusYear(e){const[t,n]=this.years();this.#c(k(e,t,n))}edit(e,t,n){const a=this.selection(),s=e===0?[t,this.drafts()[1]]:[this.drafts()[0],t],o=[this.#p(s[0]),this.#p(s[1])],i=[this.#l(s[0],o[0]),this.#l(s[1],o[1])];this.range&&i[0]!==""&&i[1]!==""&&i[0]>i[1]&&(o[e]=this.label("invalidRange"),i[e]=""),v(()=>{this.#e(s),this.#d(o)}),(i[0]!==a[0]||i[1]!==a[1])&&this.#y(i,n)}#p(e){const t=this.format(),n=ee(e,t.entry),a=n.slice(0,4);if(!(e.length<ae))return n===""?H(this.label("invalidPattern"),{pattern:t.entry.pattern}):a<this.minimum().slice(0,4)||a>this.maximum().slice(0,4)?H(this.label("invalidYearRange"),{start:m(t.year,this.minimum()),end:m(t.year,this.maximum())}):this.isSelectable(n)?void 0:H(this.label("notAllowed"),{date:m(t.headline,n)})}#l(e,t){return t===void 0?ee(e,this.format().entry):""}#r(e){const t=this.format().entry,[n,a]=e;v(()=>{this.#e([C(n,t),C(a,t)]),this.#d([void 0,void 0])})}#b(e){const t=this.format().entry,n=this.drafts(),a=this.errors(),s=o=>this.#l(n[o],a[o])===e[o];s(0)&&s(1)||v(()=>{this.#e([s(0)?n[0]:C(e[0],t),s(1)?n[1]:C(e[1],t)]),this.#d([s(0)?a[0]:void 0,s(1)?a[1]:void 0])})}reset(){v(()=>{this.#a||this.#m(this.#u),this.#r(this.#a?this.selection():this.#u)})}}const rt=Array.from({length:re},(r,e)=>e),J=Array.from({length:p},(r,e)=>e),at=Array.from({length:12},(r,e)=>e);function ie(r){const e=y(()=>{const a=r.focused(),s=r.continuous()?r.windowMonths():[r.month()];if(s.includes(a.slice(0,7))&&r.isSelectable(a))return a;for(const o of s)for(let i=`${o}-01`;i.startsWith(o);i=A(i,1))if(r.isSelectable(i))return i;return a}),t=G(e),n=G(r.focusedYear);return{model:r,isTabStop:t,isYearStop:n,descriptionId:q(),yearDescriptionId:q()}}function L(r){return<button aria-label={r.label}class={r.class}data-cw-action={r.action}disabled={r.disabled}type="button">{r.children}</button>}function st(r){const e=r.model,t=()=>e.label(e.inputMode()?e.range?"enterRange":"enterDate":e.range?"selectRange":"selectDate"),n=()=>{const a=e.format().headline,[s,o]=e.selection(),i=(d,h)=>D(d)===void 0?h:m(a,d),c=e.inputMode()?"enteredDate":"selectedDate",l=i(s,e.label(e.range?"startDate":c));return e.range?`${l} \u2013 ${i(o,e.label("endDate"))}`:l};return<>
|
|
2
|
+
<div class="cw-DatePicker-header">
|
|
3
|
+
<span class="cw-DatePicker-title">{t()}</span>
|
|
4
|
+
<div class="cw-DatePicker-headlineRow">
|
|
5
|
+
<span class="cw-DatePicker-headline"aria-live="polite">{n()}</span>
|
|
6
|
+
{L({action:"mode",class:"cw-DatePicker-iconButton cw-DatePicker-mode",get label(){const a=e.inputMode()?"switchToCalendar":"switchToInput";return e.label(a)},get disabled(){return e.props.disabled},get children(){return<E name={e.inputMode()?"calendar_today":"edit"}/>}})}
|
|
7
|
+
</div>
|
|
8
|
+
</div>
|
|
9
|
+
<div class="cw-DatePicker-divider"aria-hidden="true"/>
|
|
10
|
+
</>}function ot(r){const e=r.model,t=()=>e.overlay()==="years",n=()=>g(e.month());return<div class="cw-DatePicker-navigation">
|
|
11
|
+
<button aria-describedby={r.descriptionId}aria-expanded={t()?"true":"false"}class="cw-DatePicker-yearToggle"data-cw-action="years"disabled={e.props.disabled}type="button">
|
|
12
|
+
<span>{m(e.format().monthYear,e.month())}</span>
|
|
13
|
+
<E name={t()?"arrow_drop_up":"arrow_drop_down"}/>
|
|
14
|
+
</button>
|
|
15
|
+
<span id={r.descriptionId}hidden>
|
|
16
|
+
{e.label(t()?"daySelection":"yearSelection")}
|
|
17
|
+
</span>
|
|
18
|
+
<span class="cw-DatePicker-arrows"hidden={t()}>
|
|
19
|
+
{L({action:"previousMonth",class:"cw-DatePicker-iconButton",get label(){return e.label("previousMonth")},get disabled(){return e.props.disabled===!0||n()<=e.minimumMonth()},children:<E autoMirror name="chevron_left"/>})}
|
|
20
|
+
{L({action:"nextMonth",class:"cw-DatePicker-iconButton",get label(){return e.label("nextMonth")},get disabled(){return e.props.disabled===!0||n()>=e.maximumMonth()},children:<E autoMirror name="chevron_right"/>})}
|
|
21
|
+
</span>
|
|
22
|
+
</div>}function it(r){const e=r.model,t=()=>g(e.month()),n=()=>e.overlay()!=="none",a=(s,o,i,c)=>{const l=s==="Month"?"months":"years",d=h=>e.props.disabled===!0||h<e.minimumMonth()||h>e.maximumMonth();return<span class="cw-DatePicker-menuGroup">
|
|
23
|
+
<span class="cw-DatePicker-arrows"hidden={n()}>
|
|
24
|
+
{L({action:`previous${s}`,class:"cw-DatePicker-iconButton",get label(){return e.label(s==="Month"?"previousMonth":"previousYear")},get disabled(){return d(t()-o)},children:<E autoMirror name="chevron_left"/>})}
|
|
25
|
+
</span>
|
|
26
|
+
<button aria-describedby={i}aria-expanded={e.overlay()===l?"true":"false"}aria-haspopup="listbox"class="cw-DatePicker-menuButton"data-cw-action={l}disabled={e.props.disabled===!0||n()&&e.overlay()!==l}type="button">
|
|
27
|
+
<span>{c()}</span>
|
|
28
|
+
<E name={e.overlay()===l?"arrow_drop_up":"arrow_drop_down"}/>
|
|
29
|
+
</button>
|
|
30
|
+
<span id={i}hidden>{e.label(s==="Month"?"month":"year")}</span>
|
|
31
|
+
<span class="cw-DatePicker-arrows"hidden={n()}>
|
|
32
|
+
{L({action:`next${s}`,class:"cw-DatePicker-iconButton",get label(){return e.label(s==="Month"?"nextMonth":"nextYear")},get disabled(){return d(t()+o)},children:<E autoMirror name="chevron_right"/>})}
|
|
33
|
+
</span>
|
|
34
|
+
</span>};return<div class="cw-DatePicker-navigation">
|
|
35
|
+
{a("Month",1,r.descriptionId,()=>m(e.format().monthShort,e.month()))}
|
|
36
|
+
{a("Year",12,r.yearDescriptionId,()=>m(e.format().year,e.month()))}
|
|
37
|
+
</div>}function ct(r){const e=t=>A(U,(r.firstDay()+t)%p);return<thead>
|
|
38
|
+
<tr>
|
|
39
|
+
<P each={J}>{t=><th aria-label={m(r.format().weekdayLong,e(t))}scope="col">{m(r.format().weekday,e(t))}</th>}</P>
|
|
40
|
+
</tr>
|
|
41
|
+
</thead>}function dt(r,e,t,n){const a=r.model,s=y(()=>e()[t]),o=y(()=>a.isSelectable(s())),i=y(()=>a.flagsOf(s(),o(),n())),c=d=>(i()&d)!==0,l=()=>s()==="";return<td aria-current={c(16)?"date":void 0}aria-disabled={!l()&&c(32)?"true":void 0}aria-label={l()?void 0:m(a.format().date,s())}aria-selected={l()?void 0:c(1)||c(8)}class="cw-DatePicker-date"classList={{"cw-DatePicker-selected":c(1),"cw-DatePicker-inRange":c(8),"cw-DatePicker-rangeStart":c(2),"cw-DatePicker-rangeEnd":c(4),"cw-DatePicker-today":c(16),"cw-DatePicker-outside":c(64)}}data-cw-date={l()?void 0:s()}data-cw-initial-focus={!l()&&r.isTabStop(s())?"":void 0}role="gridcell"tabIndex={l()?void 0:r.isTabStop(s())?0:-1}>
|
|
42
|
+
<span class="cw-DatePicker-day">
|
|
43
|
+
{l()?"":m(a.format().day,s())}
|
|
44
|
+
</span>
|
|
45
|
+
</td>}function ce(r,e){const t=r.model,n=y(()=>t.daysOf(e()));return<table aria-label={m(t.format().monthYear,e())}aria-multiselectable={t.range?"true":void 0}aria-readonly={t.props.readOnly===!0?"true":void 0}class="cw-DatePicker-grid"role="grid">
|
|
46
|
+
{ct(t)}
|
|
47
|
+
<tbody>
|
|
48
|
+
<P each={rt}>{a=><tr>
|
|
49
|
+
<P each={J}>{s=>dt(r,n,a*p+s,e)}</P>
|
|
50
|
+
</tr>}</P>
|
|
51
|
+
</tbody>
|
|
52
|
+
</table>}function lt(r){const e=r.model,t=()=>e.listEnd()-e.windowStart()-e.windowMonths().length+1;return<>
|
|
53
|
+
<div class="cw-DatePicker-weekdays"aria-hidden="true">
|
|
54
|
+
<P each={J}>{n=><span>
|
|
55
|
+
{m(e.format().weekday,A(U,(e.firstDay()+n)%p))}
|
|
56
|
+
</span>}</P>
|
|
57
|
+
</div>
|
|
58
|
+
<div aria-label={e.label("selectRange")}class="cw-DatePicker-months"role="region"tabIndex={0}>
|
|
59
|
+
<div class="cw-DatePicker-spacer"style={{"--cw-datepicker-months":e.windowStart()-e.listStart()}}/>
|
|
60
|
+
<P each={e.windowMonths()}>{n=><section class="cw-DatePicker-month"data-cw-month={n}>
|
|
61
|
+
<h3 class="cw-DatePicker-subhead">{m(e.format().monthYear,n)}</h3>
|
|
62
|
+
{ce(r,()=>n)}
|
|
63
|
+
</section>}</P>
|
|
64
|
+
<div class="cw-DatePicker-spacer"style={{"--cw-datepicker-months":t()}}/>
|
|
65
|
+
</div>
|
|
66
|
+
</>}function ut(r){const e=r.model,t=y(()=>{const[a,s]=e.yearPage(),o=s-a+1;return Array.from({length:Math.ceil(o/T)},(i,c)=>Array.from({length:Math.min(T,o-c*T)},(l,d)=>a+c*T+d))}),n=()=>Number(e.month().slice(0,4));return<table aria-label={e.label("year")}class="cw-DatePicker-yearGrid"role="grid">
|
|
67
|
+
<tbody>
|
|
68
|
+
<P each={t()}>{a=><tr>
|
|
69
|
+
<P each={a}>{s=><td aria-selected={s===n()}class="cw-DatePicker-year"classList={{"cw-DatePicker-selected":s===n(),"cw-DatePicker-current":s===Number(e.today.slice(0,4))}}data-cw-year={s}role="gridcell"tabIndex={r.isYearStop(s)?0:-1}>
|
|
70
|
+
<span class="cw-DatePicker-yearLabel">
|
|
71
|
+
{m(e.format().year,`${String(s).padStart(4,"0")}-01`)}
|
|
72
|
+
</span>
|
|
73
|
+
</td>}</P>
|
|
74
|
+
</tr>}</P>
|
|
75
|
+
</tbody>
|
|
76
|
+
</table>}function te(r,e){const t=r.model,n=y(()=>{const[o,i]=t.yearPage();return e==="months"?at:Array.from({length:i-o+1},(c,l)=>o+l)}),a=o=>e==="months"?Number(t.month().slice(5,7))-1===o:Number(t.month().slice(0,4))===o,s=o=>{const i=`2023-${String(o+1).padStart(2,"0")}`,c=`${String(o).padStart(4,"0")}-01`;return e==="months"?m(t.format().monthLong,i):m(t.format().year,c)};return<ul aria-label={t.label(e==="months"?"month":"year")}class="cw-DatePicker-menu"role="listbox">
|
|
77
|
+
<P each={n()}>{o=><li aria-selected={a(o)}class="cw-DatePicker-menuItem"data-cw-option={e==="months"?`month-${o}`:`year-${o}`}role="option"tabIndex={(e==="months"?a(o):r.isYearStop(o))?0:-1}>
|
|
78
|
+
<span class="cw-DatePicker-menuCheck">
|
|
79
|
+
<M when={a(o)}><E name="check"/></M>
|
|
80
|
+
</span>
|
|
81
|
+
<span>{s(o)}</span>
|
|
82
|
+
</li>}</P>
|
|
83
|
+
</ul>}function mt(r){const e=r.model,t=<M when={e.docked()}fallback={ot(r)}>
|
|
84
|
+
{it(r)}
|
|
85
|
+
</M>,n=<div class="cw-DatePicker-days"inert={e.overlay()!=="none"||void 0}>
|
|
86
|
+
<M when={e.continuous()}fallback={ce(r,e.month)}>
|
|
87
|
+
{lt(r)}
|
|
88
|
+
</M>
|
|
89
|
+
</div>,a=<div class="cw-DatePicker-years"hidden={e.overlay()!=="years"}>
|
|
90
|
+
<M when={e.yearsShown()}>
|
|
91
|
+
<M when={e.docked()}fallback={ut(r)}>
|
|
92
|
+
{te(r,"years")}
|
|
93
|
+
</M>
|
|
94
|
+
</M>
|
|
95
|
+
</div>,s=<div class="cw-DatePicker-monthMenu"hidden={e.overlay()!=="months"}>
|
|
96
|
+
<M when={e.docked()}>{te(r,"months")}</M>
|
|
97
|
+
</div>;return<div class="cw-DatePicker-picker"hidden={e.inputMode()}>
|
|
98
|
+
{t}
|
|
99
|
+
<div class="cw-DatePicker-body">{n}{a}{s}</div>
|
|
100
|
+
</div>}function ht(r,e,t,n){const a=n.target,s=r.format().entry,o=r.drafts()[e],i=Qe(t,s),c=i===void 0||i.length>ae,l=Q(t,s)-o.length,d=Q(t.slice(0,a.selectionStart??t.length),s),h=n.inputType,f=i!==o?-1:h==="deleteContentBackward"?d-1:h==="deleteContentForward"?d:-1,S=c?o:f>=0?o.slice(0,f)+o.slice(f+1):i,R=c?d-Math.max(0,l):f>=0?f:d;S!==o&&r.edit(e,S,n),queueMicrotask(()=>{const I=tt(a.value,R,s);a.ownerDocument.activeElement===a&&a.setSelectionRange(I,I)})}function ft(r){const e=r.model,t=n=>e.label(e.range?n===0?"startDate":"endDate":"date");return<div class="cw-DatePicker-inputs"hidden={!e.inputMode()}>
|
|
101
|
+
<P each={e.range?[0,1]:[0]}>{n=><He autocomplete="off"disabled={e.props.disabled}errorText={e.errors()[n]}inputMode="numeric"label={t(n)}onValueChange={(a,s)=>ht(e,n,a,s)}placeholder={e.format().entry.pattern}readOnly={e.props.readOnly}spellCheck={!1}value={et(e.drafts()[n],e.format().entry)}variant="outlined"/>}</P>
|
|
102
|
+
</div>}function gt(r){return<P each={r.range?[0,1]:[0]}>{e=><input disabled={r.props.disabled===!0||r.props.name===void 0}form={r.props.form}name={r.props.name}type="hidden"value={r.selection()[e]}/>}</P>}function de(r){const e=r.model,t=<M when={!e.docked()}>{st(r)}</M>,n=mt(r),a=ft(r),s=gt(e),o=<div class="cw-DatePicker-panes">{n}{a}</div>;return<>{t}{o}{s}</>}function le(r){return{"cw-DatePicker":!0,"cw-DateRangePicker":r.range,"cw-DatePicker-docked":r.docked(),"cw-DatePicker-disabled":r.props.disabled===!0,"_cw-DatePicker-continuous":r.continuous()}}const ue={range:!1,valueOf:(r,e)=>[(e?r.defaultValue:r.value)??"",""],notify:(r,e,t)=>r.onChange?.(e[0],t)},me={range:!0,valueOf:(r,e)=>(e?r.defaultValue:r.value)??["",""],notify:(r,e,t)=>r.onChange?.(e,t)};function he(r,e){const t="value"in r;return new nt(r,()=>e.valueOf(r,!1),u(()=>e.valueOf(r,!t)),t,e.range,(n,a)=>e.notify(r,n,a))}function fe(r){return(e,t)=>{const n=he(t,r),a=de(ie(n)),s=e,o=Object.fromEntries(Object.keys(s).filter(i=>i!=="children").map(i=>[i,s[i]]));return<div{...o}classList={{...o.classList,...le(n)}}data-cw-calendar="">{a}{e.children}</div>}}class ge extends _e{#a;#u;#h;#m;#s;#t;#n;#o;#i;#c;constructor(e,t){super(e,{styleElementIsFunction:!0}),this.#a=ie(he(e,t)),this.#u=n=>this.#C(n),this.#h=n=>this.#L(n),this.#m=n=>this.#A(n),this.#s=n=>{n.target.classList?.contains("cw-DatePicker-months")===!0&&this.#b(n.target)},this.#t=void 0,this.#n=!1,this.#o=void 0,this.#i=!1,this.#c=()=>{},Ye(()=>this.#D()),xe(()=>this.#c())}get#e(){return this.#a.model}#d(){return this.functionElement?.querySelector(".cw-DatePicker-inputs input")?.matches(":disabled")===!0}#D(){const e=this.functionElement,t=e?.ownerDocument.defaultView,n=e?.querySelector(":scope > input[type=hidden]"),a=t?.ResizeObserver,s=n==null?()=>{}:Ne(n,()=>this.#e.reset()),o=a===void 0?void 0:new a(i=>this.#g(i));this.#o=o,this.#c=()=>{s(),o?.disconnect()},this.#f(),this.#e.continuous()&&this.#r(g(u(this.#e.month)),"top")}#f(){const e=this.functionElement,t=this.#y(),n=this.#o;if(!(e===null||n===void 0)&&(n.disconnect(),n.observe(e),t!==null)){n.observe(t);for(const a of Array.from(t.querySelectorAll(":scope > .cw-DatePicker-spacer")))n.observe(a)}}#g(e){const t=e.every(n=>n.target.classList.contains("cw-DatePicker-spacer"));(this.#n||!t)&&this.#l()}#y(){return this.functionElement?.querySelector(".cw-DatePicker-months")??null}#p(e){return e.querySelector(".cw-DatePicker-month")?.offsetHeight??0}#l(){const e=this.#e,t=this.#y(),n=this.#t;if(t===null||n===void 0)return;const a=this.#p(t),s=t.firstElementChild?.style.getPropertyValue("--cw-datepicker-months");this.#n=a===0||s!==String(e.windowStart()-e.listStart()),this.#n||(t.scrollTop=(n-e.listStart())*a)}#r(e,t){const n=this.#e;v(()=>{(!this.#i||e<n.listStart()||e>n.listEnd())&&n.centerList(e),n.renderFrom(t==="top"?e:e-1),t==="top"&&n.scrollTo(e)}),this.#i=!0,t==="top"&&(this.#t=k(e,n.listStart(),n.listEnd()),this.#l(),this.#n&&queueMicrotask(()=>this.#l()))}#b(e){const t=this.#e,n=this.#p(e),a=e.ownerDocument.activeElement;if(n===0||this.#n)return;const s=t.listStart()+e.scrollTop/n,o=Math.floor(s);this.#t=s,v(()=>{t.scrollTo(o),t.renderFrom(o)}),a!==null&&!a.isConnected&&e.focus({preventScroll:!0})}#S(e){return this.functionElement?.querySelector(`.cw-DatePicker-days [data-cw-date="${e}"]`)??null}#w(){this.functionElement?.querySelector(".cw-DatePicker-days [data-cw-date][tabindex='0']")?.focus()}#k(e,t){const n=this.functionElement,a=n?.querySelector(".cw-DatePicker-days > .cw-DatePicker-grid");if(n==null||a===null||a===void 0||!n.isConnected){t();return}const s=a.cloneNode(!0),i=(n.ownerDocument.defaultView?.getComputedStyle(n).direction==="rtl"?-e:e)*100,c={duration:"--cw-datepicker-page-duration",easing:"--cw-datepicker-page-easing"};s.removeAttribute("role"),s.setAttribute("aria-hidden","true"),s.classList.add("_cw-DatePicker-ghost"),s.inert=!0;for(const l of Array.from(s.querySelectorAll("[data-cw-date]")))for(const d of["data-cw-date","data-cw-initial-focus","role","tabindex"])l.removeAttribute(d);a.after(s),t(),W(a,[{translate:`${i}% 0`},{translate:"0 0"}],c),W(s,[{translate:"0 0"},{translate:`${-i}% 0`}],c).finished.then(()=>s.remove(),()=>s.remove())}#M(e){const t=this.#e,n=u(t.month);t.continuous()?(this.#r(g(e),"top"),t.focus(`${e}-01`)):e!==n&&this.#k(e>n?1:-1,()=>t.showMonth(e))}#T(e){const t=this.#e,n=e.slice(0,7),a=u(t.month);t.continuous()?(t.focus(e),this.#S(e)===null&&this.#r(g(n),"nearest")):n!==a?this.#k(n>a?1:-1,()=>t.focus(e)):t.focus(e);const s=this.#S(e);s?.focus({preventScroll:!0}),s?.scrollIntoView({block:"nearest",inline:"nearest"})}#v(e){const t=this.#e,n=this.functionElement;if(t.setOverlay(e),e==="none"){this.#w();return}const a=n?.querySelector(`.cw-DatePicker-${e==="years"?"years":"monthMenu"} [tabindex='0']`);a?.focus({preventScroll:!0}),a?.scrollIntoView({block:"center",inline:"nearest"})}#P(e){const t=this.#e;if(t.continuous()){t.setOverlay("none"),this.#r(g(e),"top"),t.focus(`${e}-01`),this.#w();return}t.showMonth(e),this.#v("none")}#R(e){const t=this.#e,n=u(t.month),a=this.functionElement,s={previousMonth:-1,nextMonth:1,previousYear:-12,nextYear:12};e in s?this.#M(V(g(n)+s[e])):e==="years"||e==="months"?this.#v(u(t.overlay)===e?"none":e):e==="mode"&&(t.setInputMode(!u(t.inputMode)),u(t.inputMode)?a?.querySelector(".cw-DatePicker-inputs input")?.focus():this.#w())}#C(e){const n=e.target.closest("[data-cw-date], [data-cw-year], [data-cw-option], [data-cw-action]")?.dataset,a=u(this.#e.month);n===void 0||e.defaultPrevented||this.#d()||(n.cwDate!==void 0?this.#e.select(n.cwDate,e):n.cwYear!==void 0?this.#P(`${n.cwYear.padStart(4,"0")}${a.slice(4)}`):n.cwOption!==void 0?this.#E(n.cwOption):n.cwAction!==void 0&&this.#R(n.cwAction))}#E(e){const t=u(this.#e.month),[n,a]=e.split("-");this.#P(n==="month"?`${t.slice(0,5)}${String(Number(a)+1).padStart(2,"0")}`:`${a.padStart(4,"0")}${t.slice(4)}`)}#A(e){const t=e.target.dataset;t?.cwDate!==void 0?this.#e.trackFocus(t.cwDate):t?.cwYear!==void 0&&this.#e.focusYear(Number(t.cwYear))}#L(e){const t=e.target,n=t.dataset;if(!(e.defaultPrevented||this.#d()))if(e.key==="Escape"&&u(this.#e.overlay)!=="none"){const a=this.functionElement?.querySelector(`[data-cw-action="${u(this.#e.overlay)}"]`);e.preventDefault(),this.#v("none"),this.#e.docked()&&a?.focus()}else n.cwDate!==void 0?this.#I(e,t,n.cwDate):n.cwYear!==void 0?this.#F(e,t,Number(n.cwYear)):n.cwOption!==void 0&&this.#O(e,t)}#I(e,t,n){const a=this.#e,o=t.ownerDocument.defaultView?.getComputedStyle(t).direction==="rtl"?-1:1,i=(D(n).getUTCDay()-a.firstDay()+p)%p,c=e.shiftKey?12:1,d={ArrowRight:[o,0],ArrowLeft:[-o,0],ArrowDown:[p,0],ArrowUp:[-p,0],Home:[-i,0],End:[p-1-i,0],PageDown:[0,c],PageUp:[0,-c]}[e.key];if(e.key==="Enter"||e.key===" "){e.preventDefault(),a.select(n,e);return}if(d===void 0)return;e.preventDefault();const h=d[0]<0||d[1]<0?-1:1;for(let f=A(n,d[0],d[1]),S=0;S<Ke&&f>=a.minimum()&&f<=a.maximum();f=A(f,h),S++)if(a.isSelectable(f)){this.#T(f);return}}#F(e,t,n){const a=this.#e,s=t.ownerDocument.defaultView?.getComputedStyle(t).direction==="rtl",[o,i]=a.years(),c=T*4,d={ArrowRight:n+(s?-1:1),ArrowLeft:n+(s?1:-1),ArrowDown:n+T,ArrowUp:n-T,Home:o,End:i,PageDown:n+c,PageUp:n-c}[e.key];if(e.key==="Enter"||e.key===" "){e.preventDefault(),this.#P(`${String(n).padStart(4,"0")}${u(a.month).slice(4)}`);return}if(d===void 0)return;e.preventDefault(),a.focusYear(d);const h=this.functionElement?.querySelector(`.cw-DatePicker-years [data-cw-year="${k(d,o,i)}"]`);h?.focus({preventScroll:!0}),h?.scrollIntoView({block:"nearest",inline:"nearest"})}#O(e,t){const n=Array.from(t.parentElement?.querySelectorAll("[data-cw-option]")??[]),a=n.indexOf(t),o={ArrowDown:a+1,ArrowUp:a-1,Home:0,End:n.length-1}[e.key];if(e.key==="Enter"||e.key===" "){e.preventDefault(),this.#E(t.dataset.cwOption);return}if(o===void 0)return;e.preventDefault();const i=n[k(o,0,n.length-1)];for(const c of n)c.tabIndex=c===i?0:-1;i.focus({preventScroll:!0}),i.scrollIntoView({block:"nearest",inline:"nearest"})}applyComponentProps(){const e=super.readProps(["disabled","presentation","rangeLayout"]),t=this.#e,n=e.presentationChanged||e.rangeLayoutChanged;if(e.disabledChanged||n)for(const[a,s]of Object.entries(le(t)))this.setClass(a,s);n&&this.functionElement?.isConnected===!0&&(this.#i=!1,queueMicrotask(()=>{this.#f(),t.continuous()&&this.#r(g(u(t.month)),"top")}))}render(e){const t=de(this.#a),n=<div class="cw-DatePicker"data-cw-calendar="">
|
|
103
|
+
{t}{e}
|
|
104
|
+
</div>;return n.addEventListener("click",this.#u),n.addEventListener("keydown",this.#h),n.addEventListener("focusin",this.#m),n.addEventListener("scroll",this.#s,!0),n}}class yt extends ge{constructor(e){super(e,ue)}}class pt extends ge{constructor(e){super(e,me)}}const Mt=ne(()=>fe(ue),()=>yt),Tt=ne(()=>fe(me),()=>pt);export{Mt as DatePicker,Tt as DateRangePicker};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@cw-attribute-roles cw-DateRangeInput;@layer cw-style{.cw-DateRangeInput{--_cw-daterange-container-color: cw-var(--cw-DateRangeInput-container-color);--_cw-daterange-content-gap: 8px;--_cw-daterange-height: cw-var(--cw-DateRangeInput-container-height);--_cw-daterange-icon-color: cw-var(--cw-DateRangeInput-icon-color);--_cw-daterange-icon-size: cw-var(--cw-DateRangeInput-icon-size);--_cw-daterange-indicator-color: cw-var(--cw-DateRangeInput-indicator-color);--_cw-daterange-indicator-focus-opacity: 0;--_cw-daterange-indicator-focus-thickness: cw-var(--cw-DateRangeInput-focus-indicatorThickness);--_cw-daterange-indicator-thickness: cw-var(--cw-DateRangeInput-indicator-thickness);--_cw-daterange-input-color: cw-var(--cw-DateRangeInput-input-color);--_cw-daterange-label-color: cw-var(--cw-DateRangeInput-label-color);--_cw-daterange-padding: cw-var(--cw-DateRangeInput-container-padding);--_cw-daterange-state-layer-color: transparent;--_cw-daterange-state-layer-opacity: cw-var(--cw-DateRangeInput-hover-stateLayerOpacity);--_cw-daterange-supporting-color: cw-var(--cw-DateRangeInput-supportingText-color);-cw-border-radius:--cw-DateRangeInput-container-shape;border:0;box-sizing:border-box;display:inline-flex;flex-flow:column nowrap;gap:4px;margin:0;max-inline-size:100%;min-inline-size:0;padding:0;position:relative;vertical-align:top}.cw-DateRangeInput:where(:has(>.cw-DateRangeInput-control:hover)){--_cw-daterange-indicator-color: cw-var(--cw-DateRangeInput-hover-indicatorColor);--_cw-daterange-state-layer-color: cw-var(--cw-DateRangeInput-hover-stateLayerColor)}.cw-DateRangeInput:where(:has(.cw-DateRangeInput-input:focus)){--_cw-daterange-indicator-color: cw-var(--cw-DateRangeInput-focus-indicatorColor);--_cw-daterange-indicator-focus-opacity: 1;--_cw-daterange-label-color: cw-var(--cw-DateRangeInput-focus-labelColor)}.cw-DateRangeInput:where(.cw-DateRangeInput-error){--_cw-daterange-indicator-color: cw-var(--cw-DateRangeInput-error-indicatorColor);--_cw-daterange-label-color: cw-var(--cw-DateRangeInput-error-labelColor);--_cw-daterange-supporting-color: cw-var(--cw-DateRangeInput-error-supportingTextColor)}.cw-DateRangeInput:where(.cw-DateRangeInput-error:has(>.cw-DateRangeInput-control:hover)){--_cw-daterange-indicator-color: cw-var(--cw-DateRangeInput-error-hoverIndicatorColor)}.cw-DateRangeInput:where(.cw-DateRangeInput-error:has(.cw-DateRangeInput-input:focus)){--_cw-daterange-indicator-color: cw-var(--cw-DateRangeInput-error-indicatorColor)}.cw-DateRangeInput:where(.cw-DateRangeInput-disabled){--_cw-daterange-container-color: cw-scale-opacity( cw-var(--cw-DateRangeInput-disabled-containerColor), cw-var(--cw-DateRangeInput-disabled-containerOpacity) );--_cw-daterange-content-color: cw-scale-opacity( cw-var(--cw-DateRangeInput-disabled-contentColor), cw-var(--cw-DateRangeInput-disabled-contentOpacity) );--_cw-daterange-icon-color: var(--_cw-daterange-content-color);--_cw-daterange-indicator-color: cw-scale-opacity( cw-var(--cw-DateRangeInput-disabled-indicatorColor), cw-var(--cw-DateRangeInput-disabled-indicatorOpacity) );--_cw-daterange-input-color: var(--_cw-daterange-content-color);--_cw-daterange-label-color: var(--_cw-daterange-content-color);--_cw-daterange-supporting-color: var(--_cw-daterange-content-color);cursor:default;pointer-events:none;user-select:none}.cw-DateRangeInput-label,.cw-DateRangeInput-supporting{display:block;max-inline-size:100%;overflow-wrap:anywhere;padding-block:0;padding-inline:var(--_cw-daterange-padding);transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-DateRangeInput-label{-cw-typescale:--cw-Typescale-body-medium;color:var(--_cw-daterange-label-color)}.cw-DateRangeInput-supporting{-cw-typescale:--cw-Typescale-body-small;color:var(--_cw-daterange-supporting-color)}.cw-DateRangeInput-label:empty,.cw-DateRangeInput-supporting:empty{display:none}.cw-DateRangeInput-control{-cw-typescale:--cw-Typescale-body-large;align-items:center;background-color:var(--_cw-daterange-container-color);border-color:var(--_cw-daterange-indicator-color);border-radius:inherit;border-style:solid;border-width:0 0 var(--_cw-daterange-indicator-thickness);box-sizing:border-box;color:var(--_cw-daterange-input-color);display:flex;gap:var(--_cw-daterange-content-gap);isolation:isolate;min-block-size:var(--_cw-daterange-height);min-inline-size:0;padding-block:var(--_cw-daterange-indicator-thickness) 0;padding-inline:var(--_cw-daterange-padding);position:relative;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:background-color,border-color,color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing)}._cw-DateRangeInput-outlined .cw-DateRangeInput-control{border-width:var(--_cw-daterange-indicator-thickness);padding-block:0;padding-inline:calc(var(--_cw-daterange-padding) - var(--_cw-daterange-indicator-thickness))}.cw-DateRangeInput-control:before{background-color:currentcolor;border-radius:inherit;color:var(--_cw-daterange-state-layer-color);content:"";inset:0;opacity:var(--_cw-daterange-state-layer-opacity);pointer-events:none;position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing);z-index:-1}.cw-DateRangeInput-control:after{border-color:inherit;border-radius:inherit;border-style:solid;border-width:0 0 var(--_cw-daterange-indicator-focus-thickness);box-sizing:border-box;content:"";inset:0 0 calc(-1 * var(--_cw-daterange-indicator-thickness));opacity:var(--_cw-daterange-indicator-focus-opacity);pointer-events:none;position:absolute;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:opacity;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}._cw-DateRangeInput-outlined .cw-DateRangeInput-control:after{border-width:var(--_cw-daterange-indicator-focus-thickness);inset:calc(-1 * var(--_cw-daterange-indicator-thickness))}.cw-DateRangeInput-input{background:transparent;border:0;box-sizing:border-box;color:inherit;flex:1 1 auto;font:inherit;inline-size:100%;min-inline-size:0;outline:none;padding:0}.cw-DateRangeInput-leading,.cw-DateRangeInput-prefix,.cw-DateRangeInput-suffix,.cw-DateRangeInput-trailing{align-items:center;color:var(--_cw-daterange-icon-color);display:inline-flex;flex:0 0 auto;justify-content:center;max-block-size:100%;max-inline-size:100%}:is(.cw-DateRangeInput-leading,.cw-DateRangeInput-trailing)>.cw-Icon{--cw-Icon-color: currentcolor;--cw-Icon-size: var(--_cw-daterange-icon-size)}.cw-DateRangeInput-leading:empty,.cw-DateRangeInput-prefix:empty,.cw-DateRangeInput-suffix:empty,.cw-DateRangeInput-trailing:empty{display:none}}@layer cw-theme{._cw-DateRangeInput-outlined{@cw-apply-theme outlined,cw-DateRangeInput;}}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import{createUniqueId as w,mergeProps as b}from"solid-js";import{insert as i}from"solid-js/web";import{defineDomComponent as A}from"..";import{firstInputSlot as p,hasInputError as H,supportingSlot as M}from"./base";import{PairedInputController as O,pairedInputAttributes as _,resolveInputPair as F,splitFieldProps as J}from"./paired-input";import{TextField as X}from"./text-field";import"./date-range-input.css";const s="cw-DateRangeInput",D="cw-DateRangeInput-input",x=["Start date","End date"],h={start:["startValue"],end:["endValue"]};function E(n,e){return X(b({type:e},n))}function K(n){return E(n,"date")}function Q(n){return E(n,"time")}function y(n,e,a){return n===""?n:e!==void 0&&n<e?e:a!==void 0&&n>a?a:n}function P(n,e){return n===""||e===""?void 0:n<e?-1:n>e?1:0}function $(n,e){return{[s]:!0,[`_${s}-${n.variant??"filled"}`]:!0,[`${s}-disabled`]:n.disabled===!0,[`${s}-error`]:e,[`${s}-readOnly`]:n.readOnly===!0}}function k(n,e){const a=w(),t=J(n),[r,o]=F(e,h,!0,["",""],L=>y(L??"",e.min,e.max),P),d=<legend class="cw-DateRangeInput-label">
|
|
2
|
+
{p(e.label)??n.children}
|
|
3
|
+
</legend>,u=<span class="cw-DateRangeInput-leading">
|
|
4
|
+
{p(e.leading,e.leadingIcon)}
|
|
5
|
+
</span>,l=<span class="cw-DateRangeInput-prefix">{e.prefix}</span>,g=<span class="cw-DateRangeInput-suffix">{e.suffix}</span>,m=<span class="cw-DateRangeInput-trailing">
|
|
6
|
+
{p(e.trailing,e.trailingIcon)}
|
|
7
|
+
</span>,f=<span class="cw-DateRangeInput-supporting"aria-live="polite"id={a}>
|
|
8
|
+
{M(e)}
|
|
9
|
+
</span>,I=e.invalid===!0||H(e),c=_(t.input,e,x,a),R={class:D,max:e.max,min:e.min,readOnly:e.readOnly===!0||void 0,type:"date"},T=<input{...c.start}{...R}value={r}/>,v=<input{...c.end}{...R}value={o}/>,C=<span class="cw-DateRangeInput-separator"aria-hidden="true">–</span>,S=<span class="cw-DateRangeInput-control">
|
|
10
|
+
{u}{l}{T}{C}{v}{g}{m}
|
|
11
|
+
</span>;return<fieldset{...t.container}classList={{...t.container.classList,...$(e,I)}}>
|
|
12
|
+
{d}
|
|
13
|
+
{S}
|
|
14
|
+
{f}
|
|
15
|
+
</fieldset>}class N extends O{constructor(e){super(e,s,x,h,{parse:a=>a.value,compare:P},["",""])}normalize(e){return y(e??"",this.props.min,this.props.max)}applyConstraints(e,a){const t=super.readProps(["max","min"]);if(!t.minChanged&&!t.maxChanged)return!1;for(const r of[e,a])t.min===void 0?r.removeAttribute("min"):r.min=t.min,t.max===void 0?r.removeAttribute("max"):r.max=t.max;return!0}applyReadOnly(e,a,t){e.readOnly=t,a.readOnly=t}changeCallbacks(){return[this.props.onValueChange,this.props.onDateRangeChange,this.props.onChange]}applyComponentProps(){super.applyComponentProps();const e=super.readProps(["variant"]);e.variantChanged&&this.setClass("variant",`_${s}-${e.variant??"filled"}`)}render(e,a){const t=<legend class="cw-DateRangeInput-label"/>;i(t,()=>p(this.props.label)??e);const r=<span class="cw-DateRangeInput-leading"/>;i(r,()=>p(this.props.leading,this.props.leadingIcon));const o=<span class="cw-DateRangeInput-prefix"/>;i(o,()=>this.props.prefix);const d=<span class="cw-DateRangeInput-suffix"/>;i(d,()=>this.props.suffix);const u=<span class="cw-DateRangeInput-trailing"/>;i(u,()=>p(this.props.trailing,this.props.trailingIcon));const l=<span class="cw-DateRangeInput-supporting"aria-live="polite"id={this.supportingId}/>;this.insertSupporting(l);const g=<input class={D}ref={a}type="date"/>,m=<input class={D}ref={c=>this.setEndInput(c)}type="date"/>,f=<span class="cw-DateRangeInput-separator"aria-hidden="true">–</span>,I=<span class="cw-DateRangeInput-control">
|
|
16
|
+
{r}{o}{g}{f}{m}{d}{u}
|
|
17
|
+
</span>;return<fieldset class={s}>
|
|
18
|
+
{t}
|
|
19
|
+
{I}
|
|
20
|
+
{l}
|
|
21
|
+
</fieldset>}}const W=A(()=>k,()=>N);export{K as DateInput,W as DateRangeInput,N as DateRangeInputController,Q as TimeInput};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import"../surface/surface.css";@import"../action/action.css";@import"../icon/icon.css";@import"../container/elevation-shadow.css";@import"./text-field.css";@import"./select.css";@import"./slider.css";@import"./date-range-input.css";@import"./date-picker.css";@import"./time-picker.css";@import"./picker-dialog.css";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{Autocomplete as t,AutocompleteController as o}from"./autocomplete";import{DatePicker as p,DateRangePicker as a}from"./date-picker";import{DateInput as n,DateRangeInput as d,DateRangeInputController as m,TimeInput as c}from"./date-time";import{PickerDialog as P}from"./picker-dialog";import{ExposedDropdownMenu as u,Select as S,SelectController as g}from"./select";import{RangeSlider as D,RangeSliderController as k,Slider as T,SliderController as C}from"./slider";import{FilledTextField as I,OutlinedTextField as R,PasswordField as y,SecureField as h,TextField as H,TextFieldController as O}from"./text-field";import{TimePicker as b}from"./time-picker";export{t as Autocomplete,o as AutocompleteController,n as DateInput,p as DatePicker,d as DateRangeInput,m as DateRangeInputController,a as DateRangePicker,u as ExposedDropdownMenu,I as FilledTextField,R as OutlinedTextField,y as PasswordField,P as PickerDialog,D as RangeSlider,k as RangeSliderController,h as SecureField,S as Select,g as SelectController,T as Slider,C as SliderController,H as TextField,O as TextFieldController,c as TimeInput,b as TimePicker};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{createMemo as g,createUniqueId as y,onCleanup as I,onMount as v}from"solid-js";import{insert as T}from"solid-js/web";import{DomController as P}from"../dom/client";import{dedupeCallbacks as C}from"../navigation/base";import{firstInputSlot as c,hasInputError as E,observeFormReset as b,supportingSlot as A}from"./base";const m={error:!1,content:void 0};function o(a,e){return e in a}function L(a){return g(()=>{const t=a.errorText,n=a.error,r=a.supportingText,s=a.helperText,d=c(t,n);return{error:n===!0||d!==void 0,content:d??c(r,s)}},m,{equals:(t,n)=>t.error===n.error&&t.content===n.content})}function S(a,e,t,n){const r=a?.content===void 0!=(e.content===void 0);return{error:n||a?.error!==e.error?t||e.error:void 0,described:a===void 0||r?e.content!==void 0:void 0}}function M(a){const e=a,t={},n={};for(const r of Object.keys(e))r!=="children"&&(r==="class"||r==="classList"||r==="style"?t[r]=e[r]:n[r]=e[r]);return{container:t,input:n}}function k(a,e,t,n,r,s){const d=[!1,!1],i=[0,1].map(u=>{const p=(u===0?e.start:e.end).find(h=>o(a,h));return d[u]=o(a,"value")||p!==void 0,r(o(a,"value")?a.value?.[u]:p!==void 0?a[p]:t?a.defaultValue?.[u]??(u===0?a.defaultStartValue:a.defaultEndValue):n[u],u)}),l=s(i[0],i[1]);return l===void 0||l<=0?i:d[0]&&!d[1]?[i[0],i[0]]:d[1]&&!d[0]?[i[1],i[1]]:[i[1],i[0]]}function N(a,e,t,n){const r=e.invalid===!0||E(e),s=A(e)===void 0?void 0:n,d=(l,u)=>o(a,l)?a[l]:u,i={"aria-describedby":s,"aria-invalid":r?"true":void 0,"aria-readonly":e.readOnly===!0?"true":void 0,disabled:e.disabled===!0||void 0,required:e.required===!0||void 0};return{start:{...a,...i,"aria-describedby":d("aria-describedby",i["aria-describedby"]),"aria-invalid":d("aria-invalid",i["aria-invalid"]),"aria-label":d("aria-label",e.startLabel??t[0]),"aria-readonly":d("aria-readonly",i["aria-readonly"]),id:e.startId??e.id??a.id,name:e.startName??e.name},end:{...i,"aria-label":e.endLabel??t[1],form:a.form,id:e.endId,name:e.endName??e.name}}}class x extends P{#a;#l;#i;#t;#d;#s;#m;#g;#y;#I;#v;#p;#o;#u;#h;#f;#c;#b;#e;#r;#n;constructor(e,t,n,r,s,d){super(e),this.#a=t,this.#l=n,this.#i=r,this.#t=s,this.#d=o(e,"value")||r.start.some(i=>o(e,i)),this.#s=o(e,"value")||r.end.some(i=>o(e,i)),this.#m=o(e,"attr:aria-label"),this.#g=o(e,"attr:aria-describedby"),this.#y=o(e,"attr:aria-invalid"),this.#I=o(e,"attr:aria-readonly"),this.#v=o(e,"attr:form"),this.#p=y(),this.#o=i=>this.#E(0,i),this.#u=i=>this.#E(1,i),this.#h=()=>this.#C(),this.#f=()=>m,this.#c=void 0,this.#b=!1,this.#e=null,this.#r=d,this.#n=()=>{},v(()=>{const i=this.functionElement;i!==null&&(this.#n(),this.#n=b(i,this.#h))}),I(()=>{this.#n(),this.functionElement?.removeEventListener("input",this.#o),this.#e?.removeEventListener("input",this.#u),this.#e=null})}get values(){const e=this.functionElement,t=this.#e;return e===null||t===null?this.#r:[this.#t.parse(e),this.#t.parse(t)]}get supportingId(){return this.#p}get endInput(){return this.#e}setEndInput(e){this.#e?.removeEventListener("input",this.#u),this.#e=e,e.addEventListener("input",this.#u),this.#A(),this.#L()}insertSupporting(e){const t=L(this.props);this.#f=t,T(e,()=>t().content)}onPairApplied(e){}applyReadOnly(e,t,n){}applyPair(e){const t=this.functionElement,n=this.#e;t===null||n===null||(t.value=String(e[0]),n.value=String(e[1]),this.#r=[this.#t.parse(t),this.#t.parse(n)],this.onPairApplied(this.#r))}#T(e,t){return k(this.props,this.#i,e,t,(n,r)=>this.normalize(n,r),this.#t.compare)}#P(){const e=this.values;this.applyPair(this.#T(!1,[this.#d?void 0:e[0],this.#s?void 0:e[1]]))}#C(){if(this.#d||this.#s){this.#P();return}const[e,t]=this.values,n=[this.normalize(e,0),this.normalize(t,1)],r=this.#t.compare(n[0],n[1]);this.applyPair(r===void 0||r<=0?n:[n[1],n[0]])}#E(e,t){const n=this.functionElement,r=this.#e;if(n===null||r===null||n.disabled)return;if(this.props.readOnly===!0){this.applyPair(this.#r);return}const s=e===0?1:0,d=this.normalize(this.#t.parse(e===0?n:r),e),i=this.normalize(this.#t.parse(e===0?r:n),s),[l,u]=e===0?[d,i]:[i,d],f=this.#t.compare(l,u),p=f!==void 0&&f>0?i:d,h=e===0?[p,i]:[i,p];this.applyPair(h),C(this.changeCallbacks(),h,t),(this.#d||this.#s)&&this.#P()}#A(){const e=this.functionElement,t=this.#m?this.props["attr:aria-label"]:this.props.startLabel??this.#l[0];e!==null&&(t===void 0?e.removeAttribute("aria-label"):e.setAttribute("aria-label",t)),this.#e?.setAttribute("aria-label",this.props.endLabel??this.#l[1])}#L(){const e=this.#e,t=this.props["attr:form"];!this.#v||e===null||(t===void 0?e.removeAttribute("form"):e.setAttribute("form",t))}#S(e,t){const n=this.#f(),r=S(this.#c,n,this.props.invalid===!0,t);if(this.#c=n,r.error!==void 0&&(this.setClass(`${this.#a}-error`,r.error),this.#y||this.setAttribute("aria-invalid",r.error?"true":void 0),r.error?e.setAttribute("aria-invalid","true"):e.removeAttribute("aria-invalid")),r.described!==void 0){const s=r.described?this.#p:void 0;this.#g||this.setAttribute("aria-describedby",s),s===void 0?e.removeAttribute("aria-describedby"):e.setAttribute("aria-describedby",s)}}applyComponentProps(){const e=super.readProps(["attr:id","attr:form","defaultEndValue","defaultStartValue","defaultValue","disabled","endId","endLabel","endName","id","invalid","name","readOnly","required","startId","startLabel","startName","value",...this.#i.start,...this.#i.end]),t=this.functionElement,n=this.#e;if(t===null||n===null)return;const r=this.applyConstraints(t,n),s=[...this.#i.start,...this.#i.end].some(i=>e[`${i}Changed`]===!0),d=e.startId??e.id??e["attr:id"];if(!this.#b){const i=this.#T(!0,[void 0,void 0]);this.#b=!0,t.defaultValue=String(i[0]),n.defaultValue=String(i[1]),this.applyPair(i)}if((e.valueChanged===!0||s||r)&&this.#C(),e.disabledChanged===!0&&(t.disabled=e.disabled===!0,n.disabled=e.disabled===!0,this.setClass(`${this.#a}-disabled`,e.disabled===!0)),e.readOnlyChanged===!0){const i=e.readOnly===!0?"true":void 0;this.setClass(`${this.#a}-readOnly`,i!==void 0),this.#I||this.setAttribute("aria-readonly",i),i===void 0?n.removeAttribute("aria-readonly"):n.setAttribute("aria-readonly",i),this.applyReadOnly(t,n,i!==void 0)}if(e.requiredChanged===!0&&(t.required=e.required===!0,n.required=e.required===!0),e.nameChanged===!0||e.startNameChanged===!0){const i=e.startName??e.name;this.setAttribute("name",i===""?void 0:i)}if(e.nameChanged===!0||e.endNameChanged===!0){const i=e.endName??e.name;i===void 0||i===""?n.removeAttribute("name"):n.name=i}(o(this.props,"startId")||o(this.props,"id"))&&t.getAttribute("id")!==(d??null)&&this.setAttribute("id",d),e.endIdChanged===!0&&(e.endId===void 0||e.endId===""?n.removeAttribute("id"):n.id=e.endId),(e.startLabelChanged===!0||e.endLabelChanged===!0)&&this.#A(),t.getAttribute("form")!==n.getAttribute("form")&&this.#L(),this.#S(n,e.invalidChanged===!0)}onFunctionElementChanged(e){const t=this.functionElement;this.#n(),super.onFunctionElementChanged(e),t?.removeEventListener("input",this.#o),e?.addEventListener("input",this.#o),this.#n=()=>{},e!==null&&(this.#n=b(e,this.#h))}}export{m as NO_SUPPORTING_CONTENT,x as PairedInputController,L as createSupportingContent,N as pairedInputAttributes,k as resolveInputPair,M as splitFieldProps,S as supportingChangesOf};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer cw-style{.cw-PickerDialog{box-sizing:border-box;inline-size:fit-content;max-inline-size:calc(100% - 16px);padding:0}.cw-PickerDialog-docked{--cw-elevationShadow-level: cw-var(--cw-Elevation-level-3);background-color:cw-var(--cw-Color-surface-containerHigh);border:0;border-radius:cw-var(--cw-CornerRadius-large);color:cw-var(--cw-Color-surface-onFill);inset:auto;margin:0;max-block-size:calc(100% - 16px);opacity:1;overflow:auto;position:fixed;scale:1;transform-origin:top;transition-behavior:allow-discrete;transition-duration:cw-var(--cw-Motion-spring-effect-default-duration),cw-var(--cw-Motion-spring-effect-default-duration),cw-var(--cw-Motion-spring-effect-default-duration),cw-var(--cw-Motion-spring-spatial-default-duration);transition-property:display,opacity,overlay,scale;transition-timing-function:cw-var(--cw-Motion-spring-effect-default-easing),cw-var(--cw-Motion-spring-effect-default-easing),cw-var(--cw-Motion-spring-effect-default-easing),cw-var(--cw-Motion-spring-spatial-default-easing)}.cw-PickerDialog-docked:not(:popover-open){opacity:0;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-spatial-default-duration);transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-spatial-default-easing)}@starting-style{.cw-PickerDialog-docked:popover-open{opacity:0;scale:1 .8}}.cw-PickerDialog-actions{display:flex;gap:8px;justify-content:flex-end;padding-block-end:8px;padding-inline-end:6px}.cw-PickerDialog-actions[hidden]{display:none}}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import{Show as R,onCleanup as M,splitProps as O,untrack as A}from"solid-js";import{defineDomComponent as H}from"..";import{Button as E}from"../action/button";import{DomController as T}from"../dom/client";import{Dialog as F}from"../surface/dialog";import"../container/elevation-shadow.css";import"./picker-dialog.css";const w="[data-cw-initial-focus]",D=4,a=8;function P(i,e,t){return Math.max(e,Math.min(i,t))}function I(i,e){const t=i,o=Object.fromEntries(Object.keys(t).filter(n=>n!=="children").map(n=>[n,t[n]]));return<div{...o}aria-label={"aria-label"in o?o["aria-label"]:e.label}classList={{...o.classList,"cw-PickerDialog":!0,"cw-PickerDialog-docked":!0,"cw-elevationShadow":!0}}popover="manual"role={e.role??"dialog"}tabIndex={-1}>{i.children}</div>}class J extends T{#a;#o;#c;#n;#e;#r;#l;#t;#i;constructor(e){super(e,{styleElementIsFunction:!0}),this.#a="open"in e,this.#o=t=>this.#v(t),this.#c=t=>this.#b(t),this.#n=()=>this.#d(),this.#e=!1,this.#r=null,this.#l=!0,this.#t=void 0,this.#i=()=>{},M(()=>this.#i())}isOpen(){return this.#e}open(){this.#s(!0,"programmatic")}close(e="programmatic",t){this.#s(!1,e,t)}toggle(){this.#s(!this.#e,"programmatic")}#s(e,t,o){e!==this.#e&&(this.#l=t!=="backdrop",this.#a||this.#u(e,this.#l),this.props.onOpenChange?.(e,o,e?void 0:t))}#u(e,t){const o=this.functionElement;e===this.#e||o===null||!o.isConnected||(this.#e=e,e?this.#m(o):this.#f(o,t))}#m(e){const t=e.ownerDocument,o=t.defaultView,n=o?.ResizeObserver,r=n===void 0?void 0:new n(()=>this.#d());this.#r=t.activeElement,e.showPopover(),this.#h(),r?.observe(e),t.addEventListener("pointerdown",this.#o,!0),t.addEventListener("focusin",this.#o,!0),t.addEventListener("scroll",this.#n,!0),o?.addEventListener("resize",this.#n),this.#i=()=>{t.removeEventListener("pointerdown",this.#o,!0),t.removeEventListener("focusin",this.#o,!0),t.removeEventListener("scroll",this.#n,!0),o?.removeEventListener("resize",this.#n),r?.disconnect(),this.#t!==void 0&&o?.cancelAnimationFrame(this.#t),this.#t=void 0,this.#i=()=>{}},e.addEventListener("keydown",this.#c),this.#p(e)}#f(e,t){const o=this.#r??this.props.anchor??null,n=e.contains(e.ownerDocument.activeElement);this.#i(),e.removeEventListener("keydown",this.#c),e.hidePopover(),t&&n&&this.props.returnFocus!==!1&&o?.isConnected===!0&&o.focus(),this.#r=null,this.props.onClose?.(new Event("close"))}#p(e){const t=this.props.initialFocus;(t instanceof HTMLElement?t:e.querySelector(t??w)??e.querySelector("button:not(:disabled), [tabindex]:not([tabindex='-1']), input:not(:disabled)")??e).focus({preventScroll:!0})}#d(){const e=this.functionElement?.ownerDocument.defaultView;this.#t!==void 0||e===null||e===void 0||(this.#t=e.requestAnimationFrame(()=>{this.#t=void 0,this.#h()}))}#h(){const e=this.functionElement,t=this.props.anchor,o=e?.ownerDocument.defaultView;if(!this.#e||e===null||t===void 0||o===null||o===void 0)return;const n=t.getBoundingClientRect(),r=e.offsetWidth,l=e.offsetHeight,s=o.getComputedStyle(t).direction==="rtl",c=n.bottom+D,d=n.top-D-l,C=c+l<=o.innerHeight-a||d<a?c:d,L=s?n.right-r:n.left,S=o.innerWidth-r-a,y=o.innerHeight-l-a;this.setStyle("left",`${P(L,a,S)}px`),this.setStyle("top",`${P(C,a,y)}px`)}#v(e){const t=this.functionElement,o=e.composedPath(),n=this.props.anchor;t===null||o.includes(t)||n!==void 0&&o.includes(n)||this.#s(!1,"backdrop",e)}#b(e){e.key!=="Escape"||e.defaultPrevented||(this.props.onCancel?.(e),!e.defaultPrevented&&(e.preventDefault(),this.#s(!1,"cancel",e)))}applyComponentProps(){const e=super.readProps(["anchor","defaultOpen","label","open","role"]);if(e.labelChanged&&!("attr:aria-label"in this.props)&&this.setAttribute("aria-label",e.label),e.roleChanged&&this.setAttribute("role",e.role??"dialog"),e.openChanged||e.defaultOpenChanged){const t=this.#a?e.open===!0:A(()=>this.#e||e.defaultOpen===!0);queueMicrotask(()=>this.#u(t,this.#l))}e.anchorChanged&&this.#d()}render(e){return<div class="cw-PickerDialog cw-PickerDialog-docked cw-elevationShadow"popover="manual"tabIndex={-1}>{e}</div>}}const X=H(()=>I,()=>J);function k(i,e){const t=n=>{i.onDismiss?.(n),n.defaultPrevented||e("dismiss",n)},o=n=>{i.onConfirm?.(n),n.defaultPrevented||e("confirm",n)};return<div class="cw-PickerDialog-actions"hidden={i.showActions===!1||i.showActions===void 0&&i.presentation==="docked"}>
|
|
2
|
+
<E variant="text"size="sm"onClick={t}>{i.dismissLabel??"Cancel"}</E>
|
|
3
|
+
<E variant="text"size="sm"disabled={i.confirmDisabled}onClick={o}>
|
|
4
|
+
{i.confirmLabel??"OK"}
|
|
5
|
+
</E>
|
|
6
|
+
</div>}const W=i=>{const[e,t]=O(i,["anchor","children","confirmDisabled","confirmLabel","controllerRef","dismissLabel","onConfirm","onDismiss","presentation","showActions"]);let o;const n=(s,c)=>o?.close(s,c),r=s=>{o=s,e.controllerRef?.(s)},l=()=>{const s=e.children;return typeof s=="function"?s():s};return<R when={e.presentation==="docked"}fallback={<F{...t}classList={{...t.classList,"cw-PickerDialog":!0}}controllerRef={r}initialFocus={t.initialFocus??w}modal>
|
|
7
|
+
{l()}
|
|
8
|
+
{k(i,n)}
|
|
9
|
+
</F>}>
|
|
10
|
+
<X{...t}anchor={e.anchor}controllerRef={r}>
|
|
11
|
+
{l()}
|
|
12
|
+
{k(i,n)}
|
|
13
|
+
</X>
|
|
14
|
+
</R>};export{W as PickerDialog};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@cw-attribute-roles cw-Select;@layer cw-style{.cw-Select{--_cw-field-container-color: cw-var(--cw-Select-container-color);--_cw-field-height: cw-var(--cw-Select-container-height);--_cw-field-icon-size: cw-var(--cw-Select-icon-size);--_cw-field-indicator-color: cw-var(--cw-Select-indicator-color);--_cw-field-indicator-focus-opacity: 0;--_cw-field-indicator-focus-thickness: cw-var(--cw-Select-focus-indicatorThickness);--_cw-field-indicator-thickness: cw-var(--cw-Select-indicator-thickness);--_cw-field-input-color: cw-var(--cw-Select-input-color);--_cw-field-label-color: cw-var(--cw-Select-label-color);--_cw-field-leading-color: cw-var(--cw-Select-icon-leadingColor);--_cw-field-menu-color: cw-var(--cw-Select-menu-color);--_cw-field-menu-disabled-item-label-color: cw-scale-opacity( cw-var(--cw-Select-menu-itemLabelColor), cw-var(--cw-Select-disabled-contentOpacity) );--_cw-field-menu-item-height: cw-var(--cw-Select-menu-itemHeight);--_cw-field-menu-item-label-color: cw-var(--cw-Select-menu-itemLabelColor);--_cw-field-menu-item-padding: cw-var(--cw-Select-menu-itemPadding);--_cw-field-menu-item-state-layer-color: cw-var(--cw-Select-menu-itemStateLayerColor);--_cw-field-menu-selected-item-color: cw-var(--cw-Select-menu-selectedItemColor);--_cw-field-menu-selected-item-label-color: cw-var(--cw-Select-menu-selectedItemLabelColor);--_cw-field-menu-shadow-color: cw-var(--cw-Select-menu-shadowColor);--_cw-field-menu-shape: cw-var(--cw-Select-menu-shape);--_cw-field-padding: cw-var(--cw-Select-container-padding);--_cw-field-placeholder-color: cw-var(--cw-Select-input-placeholderColor);--_cw-field-state-layer-color: transparent;--_cw-field-state-layer-opacity: cw-var(--cw-Select-hover-stateLayerOpacity);--_cw-field-supporting-color: cw-var(--cw-Select-supportingText-color);--_cw-field-trailing-color: cw-var(--cw-Select-icon-trailingColor);-cw-border-radius:--cw-Select-container-shape}.cw-Select:where(:has(>.cw-Select-control:hover)){--_cw-field-indicator-color: cw-var(--cw-Select-hover-indicatorColor);--_cw-field-label-color: cw-var(--cw-Select-hover-labelColor);--_cw-field-state-layer-color: cw-var(--cw-Select-hover-stateLayerColor)}.cw-Select:where(:has(.cw-Select-select:focus-within)){--_cw-field-indicator-color: cw-var(--cw-Select-focus-indicatorColor);--_cw-field-indicator-focus-opacity: 1;--_cw-field-label-color: cw-var(--cw-Select-focus-labelColor);--_cw-field-trailing-color: cw-var(--cw-Select-focus-trailingIconColor)}.cw-Select:where(.cw-Select-error){--_cw-field-indicator-color: cw-var(--cw-Select-error-indicatorColor);--_cw-field-label-color: cw-var(--cw-Select-error-labelColor);--_cw-field-supporting-color: cw-var(--cw-Select-error-supportingTextColor);--_cw-field-trailing-color: cw-var(--cw-Select-error-trailingIconColor)}.cw-Select:where(.cw-Select-error:has(>.cw-Select-control:hover)){--_cw-field-indicator-color: cw-var(--cw-Select-error-hoverIndicatorColor);--_cw-field-label-color: cw-var(--cw-Select-error-hoverLabelColor);--_cw-field-trailing-color: cw-var(--cw-Select-error-hoverTrailingIconColor)}.cw-Select:where(.cw-Select-error:has(.cw-Select-select:focus-within)){--_cw-field-indicator-color: cw-var(--cw-Select-error-indicatorColor);--_cw-field-label-color: cw-var(--cw-Select-error-labelColor);--_cw-field-trailing-color: cw-var(--cw-Select-error-trailingIconColor)}.cw-Select:where(.cw-Select-disabled){--_cw-field-container-color: cw-scale-opacity( cw-var(--cw-Select-disabled-containerColor), cw-var(--cw-Select-disabled-containerOpacity) );--_cw-field-disabled-content-color: cw-scale-opacity( cw-var(--cw-Select-disabled-contentColor), cw-var(--cw-Select-disabled-contentOpacity) );--_cw-field-indicator-color: cw-scale-opacity( cw-var(--cw-Select-disabled-indicatorColor), cw-var(--cw-Select-disabled-indicatorOpacity) );--_cw-field-input-color: var(--_cw-field-disabled-content-color);--_cw-field-label-color: var(--_cw-field-disabled-content-color);--_cw-field-leading-color: var(--_cw-field-disabled-content-color);--_cw-field-placeholder-color: var(--_cw-field-disabled-content-color);--_cw-field-supporting-color: var(--_cw-field-disabled-content-color);--_cw-field-trailing-color: var(--_cw-field-disabled-content-color)}.cw-Select-control{cursor:pointer;display:grid}:is(.cw-Select-leading,.cw-Select-select,.cw-Select-arrow){grid-area:1 / 1}.cw-Select-leading{justify-self:start;pointer-events:none}.cw-Select-select{appearance:none;background:transparent;block-size:100%;border:0;border-radius:inherit;box-sizing:border-box;color:inherit;cursor:inherit;font:inherit;inline-size:100%;letter-spacing:inherit;margin:0;min-inline-size:0;outline:none;overflow:hidden;padding-block:var(--_cw-field-text-top) var(--_cw-field-text-bottom);padding-inline:var(--_cw-field-padding) var(--_cw-field-icon-text-inset);text-overflow:ellipsis;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing);white-space:nowrap}.cw-Select:has(>.cw-Select-control>.cw-Select-leading:not(:empty)) .cw-Select-select{padding-inline-start:var(--_cw-field-icon-text-inset)}.cw-Select-select:has(.cw-Select-placeholder:checked){color:var(--_cw-field-placeholder-color)}.cw-Select-arrow{--cw-Icon-size: var(--_cw-field-icon-size);align-items:center;color:var(--_cw-field-trailing-color);display:flex;font-size:var(--_cw-field-icon-size);inline-size:var(--_cw-field-icon-box);justify-content:center;justify-self:end;pointer-events:none;transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-spatial-fast-duration);transition-property:color,rotate;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-spatial-fast-easing)}.cw-Select-arrow>.cw-Icon{--cw-Icon-color: currentcolor;--cw-Icon-size: var(--_cw-field-icon-size)}.cw-Select-arrow:empty:before{background-color:currentcolor;block-size:var(--_cw-field-icon-size);clip-path:polygon(29.1667% 41.6667%,70.8333% 41.6667%,50% 62.5%);content:"";inline-size:var(--_cw-field-icon-size)}@supports selector(:open){.cw-Select:has(.cw-Select-select:open) .cw-Select-arrow:empty{rotate:180deg}}.cw-Select:has(.cw-Select-select:required):not(._cw-Select-noAsterisk){.cw-Select-asterisk{display:inline}}.cw-Select:has(.cw-Select-placeholder:checked):not(:has(.cw-Select-select:focus-within)){--_cw-field-label-floated-delay: 0s;--_cw-field-label-rested-delay: cw-var(--cw-Motion-spring-spatial-fast-duration);--_CW-FIELD-LABEL_FLOATED: 0;--_CW-FIELD-LABEL_PROGRESS: 0;--_CW-FIELD-LABEL_RESTED: 1;&:has(.cw-Select-labelText:not(:empty)) .cw-Select-select{color:transparent}}@supports (appearance: base-select){.cw-Select-select,.cw-Select-select::picker(select){appearance:base-select}.cw-Select-select::picker-icon{display:none}.cw-Select-select::picker(select){background-color:var(--_cw-field-menu-color);border:0;border-radius:var(--_cw-field-menu-shape);box-shadow:0 1px 2px 0 cw-scale-opacity(var(--_cw-field-menu-shadow-color),.3),0 2px 6px 2px cw-scale-opacity(var(--_cw-field-menu-shadow-color),.15);box-sizing:border-box;color:var(--_cw-field-menu-item-label-color);inline-size:anchor-size(self-inline);margin:0;opacity:0;padding:8px 0;transform:scale(.8);transform-origin:top center;transition-behavior:allow-discrete;transition-duration:cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-effect-fast-duration),cw-var(--cw-Motion-spring-spatial-fast-duration),cw-var(--cw-Motion-spring-spatial-fast-duration);transition-property:display,opacity,overlay,transform;transition-timing-function:cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-effect-fast-easing),cw-var(--cw-Motion-spring-spatial-fast-easing),cw-var(--cw-Motion-spring-spatial-fast-easing)}.cw-Select-select:open::picker(select){opacity:1;transform:none}@starting-style{.cw-Select-select:open::picker(select){opacity:0;transform:scale(.8)}}.cw-Select-select option{-cw-typescale:--cw-Typescale-label-large;align-items:center;background-color:transparent;box-sizing:border-box;color:inherit;display:flex;min-block-size:var(--_cw-field-menu-item-height);padding-block:0;padding-inline:var(--_cw-field-menu-item-padding);transition-duration:cw-var(--cw-Motion-spring-effect-fast-duration);transition-property:background-color;transition-timing-function:cw-var(--cw-Motion-spring-effect-fast-easing)}.cw-Select-select option::checkmark{display:none}.cw-Select-select option:hover{background-color:cw-scale-opacity(var(--_cw-field-menu-item-state-layer-color),cw-var(--cw-State-layer-hoverOpacity))}.cw-Select-select option:focus-visible{background-color:cw-scale-opacity(var(--_cw-field-menu-item-state-layer-color),cw-var(--cw-State-layer-focusOpacity));outline:none}.cw-Select-select option:checked{background-color:var(--_cw-field-menu-selected-item-color);color:var(--_cw-field-menu-selected-item-label-color)}.cw-Select-select option:disabled{color:var(--_cw-field-menu-disabled-item-label-color)}}}@layer cw-theme{._cw-Select-outlined{@cw-apply-theme outlined,cw-Select;}}
|