@nxgt/material 3.87.0 → 3.88.1
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/CHANGELOG.md +20 -0
- package/README.md +1 -0
- package/dist/{alert-dialog-DC_9MW49.js → alert-dialog-CEGs7LMN.js} +1 -1
- package/dist/{async-slice-C6XbESai.js → async-slice-CR0M95Jq.js} +1 -1
- package/dist/{button-BksHtogl.js → button-DuTNpo28.js} +3 -3
- package/dist/{calculator-C_dTrMWE.js → calculator-DsGk_fCw.js} +10 -10
- package/dist/calculator-field.js +6 -6
- package/dist/{calculator-segment-FOUl66f6.js → calculator-segment-DMFptsDf.js} +1 -1
- package/dist/calculator.js +1 -1
- package/dist/charts.js +3 -3
- package/dist/{chip-BWaC87zs.js → chip-C-RAjar5.js} +2 -2
- package/dist/{code-editor-ddbQ0pEc.js → code-editor-DApeIOZ3.js} +4 -4
- package/dist/code-editor.js +4 -4
- package/dist/{code-language-items-jRlQfjAm.js → code-language-items-CGtYfc1l.js} +2 -2
- package/dist/components/ui/dates/duration-field/duration-field-expressive.css +1 -1
- package/dist/components/ui/dates/picker-trigger/typed-box-expressive.css +5 -24
- package/dist/{components-B5p3JKhQ.js → components-DiEY0nrG.js} +11936 -11736
- package/dist/components.js +37 -37
- package/dist/{conversion-variant-Cauk0BMS.js → conversion-variant-DfQiOwYC.js} +3 -3
- package/dist/{currency-field-Dy2e9kSr.js → currency-field-cwC7cqUE.js} +4 -4
- package/dist/{dialog-DNDT81SC.js → dialog-Bul68q8u.js} +3 -3
- package/dist/dnd.js +1 -1
- package/dist/{dropdown-menu-DtVC2xQW.js → dropdown-menu-xUUE5X6T.js} +1 -1
- package/dist/editor.js +7 -7
- package/dist/{empty-state-Dfsp5UF4.js → empty-state-D7ofGDU_.js} +8 -7
- package/dist/{financial-variant-0fJAMale.js → financial-variant-CYgRZzKT.js} +5 -5
- package/dist/{hooks-kPRle6lM.js → hooks-CpvvZCs7.js} +2 -2
- package/dist/hooks.js +2 -2
- package/dist/{hover-card-CsxW7S7D.js → hover-card-CZLFQwZv.js} +1 -1
- package/dist/i18n.js +3 -3
- package/dist/{icon-badge-8CPy2xAU.js → icon-badge-0Xo9q7Ey.js} +1 -1
- package/dist/{icon-button-caFcCpXV.js → icon-button-DE1EcO2-.js} +1 -1
- package/dist/lib/components/ui/collections/server-table/server-table-classes.d.ts +5 -2
- package/dist/lib/components/ui/dates/half-day-range-field/half-day-end.d.ts +21 -0
- package/dist/lib/components/ui/dates/half-day-range-field/half-day-ends.d.ts +11 -0
- package/dist/lib/components/ui/dates/half-day-range-field/half-day-range-field.d.ts +39 -0
- package/dist/lib/components/ui/dates/half-day-range-field/half-day-range-form-field.d.ts +3 -0
- package/dist/lib/components/ui/dates/half-day-range-field/half-day-range.d.ts +25 -0
- package/dist/lib/components/ui/dates/half-day-range-field/index.d.ts +3 -0
- package/dist/lib/components/ui/dates/half-day-range-field/use-half-day-draft.d.ts +30 -0
- package/dist/lib/components/ui/dates/index.d.ts +1 -0
- package/dist/lib/components/ui/dates/picker-trigger/typed-box.d.ts +1 -1
- package/dist/lib/components/ui/display/list-tile/list-tile.d.ts +2 -1
- package/dist/lib/components/ui/display/list-tile/partials/list-tile-line.d.ts +1 -1
- package/dist/lib/components/ui/display/list-tile/partials/list-tile-row.d.ts +3 -1
- package/dist/lib/components/ui/fields/contacts/placeholders.d.ts +1 -1
- package/dist/lib/i18n/resources/en/en.d.ts +7 -0
- package/dist/lib/i18n/resources/en/material.json.d.ts +7 -0
- package/dist/lib/i18n/resources/fr/fr.d.ts +7 -0
- package/dist/lib/i18n/resources/fr/material.json.d.ts +7 -0
- package/dist/lib/i18n/resources/resources.d.ts +14 -0
- package/dist/lib/i18n/translator.d.ts +1 -1
- package/dist/lib.js +1 -1
- package/dist/main.js +53 -53
- package/dist/map.js +7 -7
- package/dist/material.css +1 -1
- package/dist/pdf-reader.js +1 -1
- package/dist/{percent-field-B6mJfY_p.js → percent-field-BFwxazf1.js} +1 -1
- package/dist/{picker-surface-CVAW0t-r.js → picker-surface-DkfTv_ft.js} +4 -4
- package/dist/{popover-DhRPftzZ.js → popover-BM6xApJd.js} +1 -1
- package/dist/{pos-types-QcM9WTr0.js → pos-types-CpTpT4vE.js} +1 -1
- package/dist/{pos-variant-BeON2e_Q.js → pos-variant-Bs5BUB1L.js} +4 -4
- package/dist/print.js +1 -1
- package/dist/{programmer-variant-3cEMiII7.js → programmer-variant-B1eI1fd0.js} +2 -2
- package/dist/{public-DezkDXv3.js → public-CzLMnSsS.js} +9 -9
- package/dist/{rich-code-block-DloPqrFQ.js → rich-code-block-CdVtxD75.js} +5 -5
- package/dist/{scientific-variant-0Fq8HLiY.js → scientific-variant-rfvJKxB4.js} +2 -2
- package/dist/{sortable-provider-OB35mdNh.js → sortable-provider-BopzsciJ.js} +2 -2
- package/dist/{spinner-CngjH5-n.js → spinner-DcW21pN1.js} +1 -1
- package/dist/{tabs-C0CPqX5U.js → tabs-CdoBFtWx.js} +1 -1
- package/dist/theme-picker.js +2 -2
- package/dist/{theme-toggle-BfXRbCwj.js → theme-toggle-Ch3GkDDU.js} +1 -1
- package/dist/{toolbar-items-BU5_H3UA.js → toolbar-items-CZ1lJXZZ.js} +4 -4
- package/dist/{translate-material-B1wzg7uX.js → translate-material-BrYBBZ66.js} +1 -1
- package/dist/{translator-BwUYrek9.js → translator-DoVsjUff.js} +14 -0
- package/dist/{use-chat-composer-Bsc1gCRQ.js → use-chat-composer-C9DG7O1Z.js} +15 -15
- package/dist/{use-heading-spy-BpeWvZ2y.js → use-heading-spy-kyOSe9rb.js} +4 -4
- package/dist/{use-material-translation-BDVGF7-Z.js → use-material-translation-BdrItuwY.js} +1 -1
- package/dist/{use-return-focus-BttT8j1o.js → use-return-focus-Cqzvj9R0.js} +1 -1
- package/docs/components/README.md +2 -1
- package/docs/components/data-table-filter-and-lists.md +1 -1
- package/docs/components/date-and-time.md +111 -0
- package/docs/guides/forms.md +1 -0
- package/docs/guides/i18n.md +7 -0
- package/docs/previews/date-time-halfdayrangefield.webp +0 -0
- package/lib/components/ui/dates/duration-field/duration-field-expressive.css +1 -1
- package/lib/components/ui/dates/picker-trigger/typed-box-expressive.css +5 -24
- package/package.json +1 -1
package/dist/pdf-reader.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { r as e } from "./currency-field-
|
|
1
|
+
import { r as e } from "./currency-field-cwC7cqUE.js";
|
|
2
2
|
import { jsx as t } from "react/jsx-runtime";
|
|
3
3
|
//#region lib/components/ui/fields/percent-field/percent-field.tsx
|
|
4
4
|
function n({ min: n = 0, max: r = 100, step: i = 1, ...a }) {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { t as e } from "./utils-BLfntITJ.js";
|
|
2
2
|
import { r as t, t as n } from "./in-dialog-D61Yeaol.js";
|
|
3
|
-
import { a as r, c as i, i as a, l as o, n as s, o as c, r as l, s as u, t as d, u as f } from "./use-return-focus-
|
|
4
|
-
import { i as p, o as m, r as h, t as g } from "./popover-
|
|
5
|
-
import { t as _ } from "./use-material-translation-
|
|
6
|
-
import { n as v, t as y } from "./icon-button-
|
|
3
|
+
import { a as r, c as i, i as a, l as o, n as s, o as c, r as l, s as u, t as d, u as f } from "./use-return-focus-Cqzvj9R0.js";
|
|
4
|
+
import { i as p, o as m, r as h, t as g } from "./popover-BM6xApJd.js";
|
|
5
|
+
import { t as _ } from "./use-material-translation-BdrItuwY.js";
|
|
6
|
+
import { n as v, t as y } from "./icon-button-DE1EcO2-.js";
|
|
7
7
|
import { t as b } from "./use-ssr-media-query-C6M5m8sf.js";
|
|
8
8
|
import { i as x } from "./escape-owner-DpaP0lm1.js";
|
|
9
9
|
import * as S from "react";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { t as e } from "./utils-BLfntITJ.js";
|
|
2
2
|
import { o as t, r as n } from "./dist-DVRQkaTK.js";
|
|
3
3
|
import { i as r, r as i, t as a } from "./dist-DWZXlCZR.js";
|
|
4
|
-
import { S as o, d as s, f as c, l, p as u, u as d, x as f } from "./spinner-
|
|
4
|
+
import { S as o, d as s, f as c, l, p as u, u as d, x as f } from "./spinner-DcW21pN1.js";
|
|
5
5
|
import { a as p, i as m, r as h } from "./dist-DHdUUM1w.js";
|
|
6
6
|
import { a as g, c as _, l as v, o as y, r as b, s as x, t as S } from "./in-dialog-D61Yeaol.js";
|
|
7
7
|
import { i as C } from "./escape-owner-DpaP0lm1.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as e } from "./use-material-translation-
|
|
1
|
+
import { t as e } from "./use-material-translation-BdrItuwY.js";
|
|
2
2
|
import { n as t } from "./calculator-context-BugcKuVG.js";
|
|
3
3
|
import { t as n } from "./calculator-announce-DRd2c6Dq.js";
|
|
4
4
|
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { t as e } from "./utils-BLfntITJ.js";
|
|
2
|
-
import { t } from "./use-material-translation-
|
|
3
|
-
import { t as n } from "./icon-button-
|
|
2
|
+
import { t } from "./use-material-translation-BdrItuwY.js";
|
|
3
|
+
import { t as n } from "./icon-button-DE1EcO2-.js";
|
|
4
4
|
import { n as r } from "./calculator-context-BugcKuVG.js";
|
|
5
|
-
import { a as i, n as a, r as o, t as s } from "./pos-types-
|
|
5
|
+
import { a as i, n as a, r as o, t as s } from "./pos-types-CpTpT4vE.js";
|
|
6
6
|
import { i as c, n as l, s as u } from "./key-layout-cR79xfGE.js";
|
|
7
7
|
import { n as d, t as f } from "./currency-B-r3ig11.js";
|
|
8
|
-
import { t as p } from "./calculator-segment-
|
|
8
|
+
import { t as p } from "./calculator-segment-DMFptsDf.js";
|
|
9
9
|
import { useId as m, useState as h } from "react";
|
|
10
10
|
import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
|
|
11
11
|
import { ChevronDown as y, X as b } from "lucide-react";
|
package/dist/print.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { i as e, t } from "./translate-material-
|
|
1
|
+
import { i as e, t } from "./translate-material-BrYBBZ66.js";
|
|
2
2
|
import { Children as n, createContext as r, isValidElement as i, useCallback as a, useContext as o, useEffect as s, useMemo as c, useState as l } from "react";
|
|
3
3
|
import { jsx as u, jsxs as d } from "react/jsx-runtime";
|
|
4
4
|
import { resolvePdfFileName as f } from "@nxgt/material-core/pdf-file-name";
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { t as e } from "./use-material-translation-
|
|
1
|
+
import { t as e } from "./use-material-translation-BdrItuwY.js";
|
|
2
2
|
import { t } from "./toggle-FeCCJqbg.js";
|
|
3
3
|
import { n } from "./calculator-context-BugcKuVG.js";
|
|
4
4
|
import { i as r, n as i, s as a } from "./key-layout-cR79xfGE.js";
|
|
5
5
|
import { t as o } from "./programmer-word-CNCF7DJF.js";
|
|
6
|
-
import { t as s } from "./calculator-segment-
|
|
6
|
+
import { t as s } from "./calculator-segment-DMFptsDf.js";
|
|
7
7
|
import { useId as c, useState as l } from "react";
|
|
8
8
|
import { jsx as u, jsxs as d } from "react/jsx-runtime";
|
|
9
9
|
import { calculate as f, formatExpression as p, sessionOptions as m, toCanonical as h, tokenize as g } from "@nxgt/material-core/calculator";
|
|
@@ -3,25 +3,25 @@ import { n as t } from "./ui.utils-CAnKTCw5.js";
|
|
|
3
3
|
import { t as n } from "./utils-BLfntITJ.js";
|
|
4
4
|
import { o as r } from "./dist-DVRQkaTK.js";
|
|
5
5
|
import { i, n as a, r as o } from "./dist-DWZXlCZR.js";
|
|
6
|
-
import { o as s } from "./spinner-
|
|
6
|
+
import { o as s } from "./spinner-DcW21pN1.js";
|
|
7
7
|
import { a as c, i as l, n as u } from "./dist-DHdUUM1w.js";
|
|
8
8
|
import { i as d } from "./dist-DOK3zo5C.js";
|
|
9
9
|
import { r as f, t as p } from "./in-dialog-D61Yeaol.js";
|
|
10
|
-
import { a as m, c as h, i as g, l as _, n as v, o as ee, r as y, s as b, t as te, u as ne } from "./use-return-focus-
|
|
11
|
-
import { c as x, d as S, f as C, i as w, l as T, n as E, o as D, t as re, u as O } from "./dropdown-menu-
|
|
12
|
-
import { a as k, b as ie, d as ae, f as oe, i as se, n as A, o as ce, r as le, s as j, t as M, u as ue, v as de } from "./toolbar-items-
|
|
10
|
+
import { a as m, c as h, i as g, l as _, n as v, o as ee, r as y, s as b, t as te, u as ne } from "./use-return-focus-Cqzvj9R0.js";
|
|
11
|
+
import { c as x, d as S, f as C, i as w, l as T, n as E, o as D, t as re, u as O } from "./dropdown-menu-xUUE5X6T.js";
|
|
12
|
+
import { a as k, b as ie, d as ae, f as oe, i as se, n as A, o as ce, r as le, s as j, t as M, u as ue, v as de } from "./toolbar-items-CZ1lJXZZ.js";
|
|
13
13
|
import { t as fe } from "./dist-DkQbkF9T.js";
|
|
14
|
-
import { t as pe } from "./button-
|
|
15
|
-
import { t as N } from "./use-material-translation-
|
|
16
|
-
import { n as me, t as he } from "./icon-button-
|
|
14
|
+
import { t as pe } from "./button-DuTNpo28.js";
|
|
15
|
+
import { t as N } from "./use-material-translation-BdrItuwY.js";
|
|
16
|
+
import { n as me, t as he } from "./icon-button-DE1EcO2-.js";
|
|
17
17
|
import { t as ge } from "./useEvent-2fKq-6w8.js";
|
|
18
18
|
import { n as _e, t as ve } from "./toggle-group-CVMxEpWi.js";
|
|
19
19
|
import { i as ye } from "./escape-owner-DpaP0lm1.js";
|
|
20
20
|
import { n as be } from "./use-slice-reducer-BGkeGtML.js";
|
|
21
21
|
import { t as xe } from "./input-CC2joTjB.js";
|
|
22
22
|
import { r as Se } from "./use-csp-nonce-ZKs9k-ov.js";
|
|
23
|
-
import { n as Ce, t as we } from "./empty-state-
|
|
24
|
-
import { r as Te, t as Ee, u as De } from "./dialog-
|
|
23
|
+
import { n as Ce, t as we } from "./empty-state-D7ofGDU_.js";
|
|
24
|
+
import { r as Te, t as Ee, u as De } from "./dialog-Bul68q8u.js";
|
|
25
25
|
import { t as Oe } from "./client-only.utils-3nHNzCki.js";
|
|
26
26
|
import { t as ke } from "./use-scroll-away-PQRFZkT2.js";
|
|
27
27
|
import * as P from "react";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { n as e } from "./spinner-
|
|
2
|
-
import { c as t, n, t as r } from "./dropdown-menu-
|
|
3
|
-
import { t as i } from "./use-material-translation-
|
|
4
|
-
import { a, i as o, n as s, o as c, t as l } from "./code-language-items-
|
|
1
|
+
import { n as e } from "./spinner-DcW21pN1.js";
|
|
2
|
+
import { c as t, n, t as r } from "./dropdown-menu-xUUE5X6T.js";
|
|
3
|
+
import { t as i } from "./use-material-translation-BdrItuwY.js";
|
|
4
|
+
import { a, i as o, n as s, o as c, t as l } from "./code-language-items-CGtYfc1l.js";
|
|
5
5
|
import { i as u, n as d, r as f, s as p } from "./dist-C3GR7kJd.js";
|
|
6
6
|
import { t as m } from "./code-block-spec-CGLKRhwD.js";
|
|
7
7
|
import { Suspense as h, lazy as g, useEffect as _, useRef as v, useState as y } from "react";
|
|
@@ -143,7 +143,7 @@ function M({ node: e, editor: t, updateAttributes: n, editable: r, wrap: a, onWr
|
|
|
143
143
|
}
|
|
144
144
|
//#endregion
|
|
145
145
|
//#region lib/components/ui/widgets/editor/extensions/code/code-block-open.tsx
|
|
146
|
-
var N = g(() => import("./code-editor-
|
|
146
|
+
var N = g(() => import("./code-editor-DApeIOZ3.js").then((e) => e.n).then((e) => ({ default: e.CodeEditor })));
|
|
147
147
|
function P() {
|
|
148
148
|
let { t: e } = i();
|
|
149
149
|
return /* @__PURE__ */ b("div", {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { t as e } from "./use-material-translation-
|
|
1
|
+
import { t as e } from "./use-material-translation-BdrItuwY.js";
|
|
2
2
|
import { t } from "./toggle-FeCCJqbg.js";
|
|
3
3
|
import { n } from "./calculator-context-BugcKuVG.js";
|
|
4
4
|
import { i as r, o as i } from "./key-layout-cR79xfGE.js";
|
|
5
5
|
import { t as a } from "./standard-layout-BuSRr3TY.js";
|
|
6
|
-
import { t as o } from "./calculator-segment-
|
|
6
|
+
import { t as o } from "./calculator-segment-DMFptsDf.js";
|
|
7
7
|
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
8
8
|
import { scientificOptions as l } from "@nxgt/material-core/calculator/scientific";
|
|
9
9
|
//#region lib/components/ui/widgets/calculator/variants/scientific/scientific-layout.ts
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { t as e } from "./utils-BLfntITJ.js";
|
|
2
2
|
import { t } from "./dist-DVRQkaTK.js";
|
|
3
|
-
import { t as n } from "./use-material-translation-
|
|
4
|
-
import { t as r } from "./icon-button-
|
|
3
|
+
import { t as n } from "./use-material-translation-BdrItuwY.js";
|
|
4
|
+
import { t as r } from "./icon-button-DE1EcO2-.js";
|
|
5
5
|
import { t as i } from "./compose-refs-G4J4kaUA.js";
|
|
6
6
|
import a, { cloneElement as o, createContext as s, forwardRef as c, memo as l, useCallback as u, useContext as d, useEffect as f, useId as p, useLayoutEffect as m, useMemo as h, useReducer as g, useRef as _, useState as v } from "react";
|
|
7
7
|
import { jsx as y } from "react/jsx-runtime";
|
|
@@ -5,7 +5,7 @@ import { a as i, i as a, n as o, r as s, t as c } from "./dist-DWZXlCZR.js";
|
|
|
5
5
|
import { a as l, i as u, n as d, r as f, t as p } from "./dist-DHdUUM1w.js";
|
|
6
6
|
import { a as m, c as h, d as g, i as _, l as v, o as y, r as b, t as x, u as S } from "./floating-ui.dom-KkZSW8_E.js";
|
|
7
7
|
import { t as C } from "./dist-DkQbkF9T.js";
|
|
8
|
-
import { t as w } from "./use-material-translation-
|
|
8
|
+
import { t as w } from "./use-material-translation-BdrItuwY.js";
|
|
9
9
|
import * as T from "react";
|
|
10
10
|
import { useLayoutEffect as E, useRef as D, useSyncExternalStore as O } from "react";
|
|
11
11
|
import { jsx as k, jsxs as A } from "react/jsx-runtime";
|
|
@@ -3,7 +3,7 @@ import { n as t } from "./dist-DVRQkaTK.js";
|
|
|
3
3
|
import { i as n, r, t as i } from "./dist-DWZXlCZR.js";
|
|
4
4
|
import { a, i as o, r as s } from "./dist-DHdUUM1w.js";
|
|
5
5
|
import { i as c, n as l, r as u, t as d } from "./dist-DOK3zo5C.js";
|
|
6
|
-
import { t as f } from "./use-material-translation-
|
|
6
|
+
import { t as f } from "./use-material-translation-BdrItuwY.js";
|
|
7
7
|
import * as p from "react";
|
|
8
8
|
import { createContext as m, useCallback as h, useContext as g, useEffect as ee, useLayoutEffect as _, useRef as v, useState as te } from "react";
|
|
9
9
|
import { Fragment as ne, jsx as y, jsxs as b } from "react/jsx-runtime";
|
package/dist/theme-picker.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { t as e } from "./utils-BLfntITJ.js";
|
|
2
2
|
import { a as t, i as n, n as r, o as i, r as a, t as o } from "./bubble-input-CQwVSoU3.js";
|
|
3
3
|
import { a as s, r as c } from "./icon-sprites-CaYXzOL4.js";
|
|
4
|
-
import { t as l } from "./use-material-translation-
|
|
4
|
+
import { t as l } from "./use-material-translation-BdrItuwY.js";
|
|
5
5
|
import { t as u } from "./use-theme-BCLireTd.js";
|
|
6
6
|
import { a as d, r as f } from "./theme-context-Cofk6vgs.js";
|
|
7
|
-
import { t as p } from "./theme-toggle-
|
|
7
|
+
import { t as p } from "./theme-toggle-Ch3GkDDU.js";
|
|
8
8
|
import { n as m, t as h } from "./nxgt-theme-DA1IQe0O.js";
|
|
9
9
|
import { useContext as g } from "react";
|
|
10
10
|
import { jsx as _, jsxs as v } from "react/jsx-runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as e } from "./use-material-translation-
|
|
1
|
+
import { t as e } from "./use-material-translation-BdrItuwY.js";
|
|
2
2
|
import { i as t } from "./theme-store-BdPp43cV.js";
|
|
3
3
|
import { n, t as r } from "./use-theme-BCLireTd.js";
|
|
4
4
|
import { r as i } from "./theme-context-Cofk6vgs.js";
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { t as e } from "./utils-BLfntITJ.js";
|
|
2
2
|
import { o as t, t as n } from "./dist-DVRQkaTK.js";
|
|
3
3
|
import { i as r, r as i } from "./dist-DWZXlCZR.js";
|
|
4
|
-
import { n as a } from "./spinner-
|
|
4
|
+
import { n as a } from "./spinner-DcW21pN1.js";
|
|
5
5
|
import { a as o } from "./dist-DHdUUM1w.js";
|
|
6
6
|
import { i as s, n as c, r as l, t as u } from "./dist-DOK3zo5C.js";
|
|
7
7
|
import { t as d } from "./in-dialog-D61Yeaol.js";
|
|
8
|
-
import { A as f, M as p, N as m, b as h, d as g, f as _, i as v, j as y, l as b, n as x, o as S, r as C, t as w, u as T, y as ee } from "./dropdown-menu-
|
|
9
|
-
import { a as te, n as ne } from "./popover-
|
|
8
|
+
import { A as f, M as p, N as m, b as h, d as g, f as _, i as v, j as y, l as b, n as x, o as S, r as C, t as w, u as T, y as ee } from "./dropdown-menu-xUUE5X6T.js";
|
|
9
|
+
import { a as te, n as ne } from "./popover-BM6xApJd.js";
|
|
10
10
|
import { i as re, n as ie, r as ae, t as oe } from "./dist-BZe2evxL.js";
|
|
11
11
|
import { t as se } from "./warn-once-C_e47JM8.js";
|
|
12
|
-
import { t as ce } from "./use-material-translation-
|
|
12
|
+
import { t as ce } from "./use-material-translation-BdrItuwY.js";
|
|
13
13
|
import * as E from "react";
|
|
14
14
|
import { createContext as D, useCallback as le, useContext as O, useEffect as k, useId as ue, useLayoutEffect as A, useMemo as j, useReducer as de, useRef as M, useState as N } from "react";
|
|
15
15
|
import { Fragment as P, jsx as F, jsxs as I } from "react/jsx-runtime";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as e, l as t, r as n, s as r, t as i, u as a } from "./translator-
|
|
1
|
+
import { a as e, l as t, r as n, s as r, t as i, u as a } from "./translator-DoVsjUff.js";
|
|
2
2
|
import { createContext as o, useCallback as s, useContext as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
|
|
3
3
|
import { jsx as p } from "react/jsx-runtime";
|
|
4
4
|
//#region lib/i18n/material-resources-registry.ts
|
|
@@ -3452,6 +3452,13 @@ var r = {
|
|
|
3452
3452
|
footer: "Footer",
|
|
3453
3453
|
"new-tab": "opens in a new tab"
|
|
3454
3454
|
},
|
|
3455
|
+
"half-day-range": {
|
|
3456
|
+
morning: "Morning",
|
|
3457
|
+
afternoon: "Afternoon",
|
|
3458
|
+
"start-half": "Start half-day",
|
|
3459
|
+
"end-half": "End half-day",
|
|
3460
|
+
order: "The end cannot be before the start."
|
|
3461
|
+
},
|
|
3455
3462
|
"marking-list": {
|
|
3456
3463
|
unmarked: "Unmarked",
|
|
3457
3464
|
details: "Details: {name}",
|
|
@@ -6911,6 +6918,13 @@ var r = {
|
|
|
6911
6918
|
footer: "Pied de page",
|
|
6912
6919
|
"new-tab": "s'ouvre dans un nouvel onglet"
|
|
6913
6920
|
},
|
|
6921
|
+
"half-day-range": {
|
|
6922
|
+
morning: "Matin",
|
|
6923
|
+
afternoon: "Après-midi",
|
|
6924
|
+
"start-half": "Demi-journée de début",
|
|
6925
|
+
"end-half": "Demi-journée de fin",
|
|
6926
|
+
order: "La fin ne peut pas précéder le début."
|
|
6927
|
+
},
|
|
6914
6928
|
"marking-list": {
|
|
6915
6929
|
unmarked: "Non marqués",
|
|
6916
6930
|
details: "Détails : {name}",
|
|
@@ -4,28 +4,28 @@ import { t as n } from "./utils-BLfntITJ.js";
|
|
|
4
4
|
import { n as r } from "./use-shape-morph-BKA_R5P5.js";
|
|
5
5
|
import { n as i, o as a, t as o } from "./dist-DVRQkaTK.js";
|
|
6
6
|
import { i as s, n as c, r as l, t as u } from "./dist-DWZXlCZR.js";
|
|
7
|
-
import { _ as d, a as f, b as p, g as m, h, i as g, m as _, n as v, o as y, r as b, s as x, t as S, v as C, y as w } from "./spinner-
|
|
7
|
+
import { _ as d, a as f, b as p, g as m, h, i as g, m as _, n as v, o as y, r as b, s as x, t as S, v as C, y as w } from "./spinner-DcW21pN1.js";
|
|
8
8
|
import { a as T, i as E, n as D, r as O, t as k } from "./dist-DHdUUM1w.js";
|
|
9
9
|
import { a as A, i as ee } from "./dist-DOK3zo5C.js";
|
|
10
10
|
import { i as j, n as M } from "./in-dialog-D61Yeaol.js";
|
|
11
|
-
import { c as N, l as P, n as te, r as F, t as ne } from "./alert-dialog-
|
|
11
|
+
import { c as N, l as P, n as te, r as F, t as ne } from "./alert-dialog-CEGs7LMN.js";
|
|
12
12
|
import { A as re, C as ie, D as ae, E as oe, O as se, S as I, T as ce, _ as le, a as ue, b as de, d as fe, f as pe, g as me, h as he, i as ge, k as _e, l as ve, m as ye, n as be, o as xe, p as Se, r as Ce, s as we, t as Te, u as Ee, v as De, w as Oe, x as ke, y as Ae } from "./floating-ui.dom-KkZSW8_E.js";
|
|
13
|
-
import { D as je, E as Me, N as Ne, O as Pe, c as Fe, d as Ie, f as Le, i as Re, k as ze, m as Be, n as Ve, o as He, p as Ue, t as We, u as Ge } from "./dropdown-menu-
|
|
13
|
+
import { D as je, E as Me, N as Ne, O as Pe, c as Fe, d as Ie, f as Le, i as Re, k as ze, m as Be, n as Ve, o as He, p as Ue, t as We, u as Ge } from "./dropdown-menu-xUUE5X6T.js";
|
|
14
14
|
import { a as Ke, i as qe, n as Je } from "./field-blur-context-BLGgf_3z.js";
|
|
15
|
-
import { i as Ye, n as Xe, r as Ze, t as Qe } from "./popover-
|
|
15
|
+
import { i as Ye, n as Xe, r as Ze, t as Qe } from "./popover-BM6xApJd.js";
|
|
16
16
|
import { a as $e, i as et, n as tt, o as nt, t as rt } from "./bubble-input-CQwVSoU3.js";
|
|
17
|
-
import { n as it, r as at, t as ot, u as st } from "./tabs-
|
|
18
|
-
import { a as ct, n as lt, o as ut, s as dt, v as ft, y as pt } from "./toolbar-items-
|
|
17
|
+
import { n as it, r as at, t as ot, u as st } from "./tabs-CdoBFtWx.js";
|
|
18
|
+
import { a as ct, n as lt, o as ut, s as dt, v as ft, y as pt } from "./toolbar-items-CZ1lJXZZ.js";
|
|
19
19
|
import { t as mt } from "./dist-DkQbkF9T.js";
|
|
20
20
|
import { o as ht, s as gt, t as _t } from "./use-click-lock-Bwg_caHO.js";
|
|
21
21
|
import { a as vt, r as yt } from "./icon-sprites-CaYXzOL4.js";
|
|
22
22
|
import { t as bt } from "./warn-once-C_e47JM8.js";
|
|
23
|
-
import { r as xt, t as St } from "./button-
|
|
24
|
-
import { a as Ct } from "./translator-
|
|
23
|
+
import { r as xt, t as St } from "./button-DuTNpo28.js";
|
|
24
|
+
import { a as Ct } from "./translator-DoVsjUff.js";
|
|
25
25
|
import { h as wt } from "./get-CTzJAwfc.js";
|
|
26
26
|
import { t as Tt } from "./isEmpty-F_g3jLf8.js";
|
|
27
|
-
import { t as L } from "./use-material-translation-
|
|
28
|
-
import { t as R } from "./icon-button-
|
|
27
|
+
import { t as L } from "./use-material-translation-BdrItuwY.js";
|
|
28
|
+
import { t as R } from "./icon-button-DE1EcO2-.js";
|
|
29
29
|
import { t as Et } from "./use-ssr-media-query-C6M5m8sf.js";
|
|
30
30
|
import { n as Dt, t as Ot } from "./typography-CYEquVeb.js";
|
|
31
31
|
import { n as kt, t as At } from "./util-4heV2LPI.js";
|
|
@@ -36,14 +36,14 @@ import { a as Bt } from "./toggle-group-CVMxEpWi.js";
|
|
|
36
36
|
import { n as Vt } from "./use-slice-reducer-BGkeGtML.js";
|
|
37
37
|
import { t as Ht } from "./browser-only-DQ94lWF8.js";
|
|
38
38
|
import { t as Ut } from "./compose-refs-G4J4kaUA.js";
|
|
39
|
-
import { n as Wt, r as Gt, t as Kt } from "./chip-
|
|
39
|
+
import { n as Wt, r as Gt, t as Kt } from "./chip-C-RAjar5.js";
|
|
40
40
|
import { a as qt, c as Jt, o as Yt, r as Xt, s as Zt, t as Qt } from "./input-CC2joTjB.js";
|
|
41
41
|
import { t as $t } from "./text-field-BAdY-kpO.js";
|
|
42
42
|
import { r as en } from "./use-csp-nonce-ZKs9k-ov.js";
|
|
43
|
-
import { t as tn } from "./empty-state-
|
|
43
|
+
import { t as tn } from "./empty-state-D7ofGDU_.js";
|
|
44
44
|
import { t as nn } from "./skeleton-DSdtr2qc.js";
|
|
45
|
-
import { l as rn, n as an, o as on, r as sn, s as cn, t as ln, u as un } from "./dialog-
|
|
46
|
-
import { t as dn } from "./icon-badge-
|
|
45
|
+
import { l as rn, n as an, o as on, r as sn, s as cn, t as ln, u as un } from "./dialog-Bul68q8u.js";
|
|
46
|
+
import { t as dn } from "./icon-badge-0Xo9q7Ey.js";
|
|
47
47
|
import { H as fn, V as pn, X as mn, bt as hn, it as gn, lt as _n, n as vn, t as yn, xt as bn, yt as xn } from "./dist-moutbfbd.js";
|
|
48
48
|
import { t as Sn } from "./markdown-Dw_uH7j7.js";
|
|
49
49
|
import { r as Cn, t as wn } from "./create-store-Dqp-PLLn.js";
|
|
@@ -11229,7 +11229,7 @@ var aS = (e = {}) => Cn({
|
|
|
11229
11229
|
let [{ default: t }, { lowlight: n }, { richCodeBlock: r }] = await Promise.all([
|
|
11230
11230
|
import("./dist-CRMFGjng.js"),
|
|
11231
11231
|
import("./lowlight-OtcjU2Sa.js"),
|
|
11232
|
-
import("./rich-code-block-
|
|
11232
|
+
import("./rich-code-block-CdVtxD75.js")
|
|
11233
11233
|
]);
|
|
11234
11234
|
return [r(t, {
|
|
11235
11235
|
lowlight: n,
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { t as e } from "./utils-BLfntITJ.js";
|
|
2
|
-
import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-
|
|
3
|
-
import { a as l } from "./button-
|
|
4
|
-
import { i as u } from "./translate-material-
|
|
5
|
-
import { t as d } from "./use-material-translation-
|
|
2
|
+
import { a as t, c as n, d as r, i, n as a, r as o, t as s, u as c } from "./alert-dialog-CEGs7LMN.js";
|
|
3
|
+
import { a as l } from "./button-DuTNpo28.js";
|
|
4
|
+
import { i as u } from "./translate-material-BrYBBZ66.js";
|
|
5
|
+
import { t as d } from "./use-material-translation-BdrItuwY.js";
|
|
6
6
|
import { _ as f, g as p, h as m, t as h, v as g, y as _ } from "./date.utils-JTEIo3mM.js";
|
|
7
7
|
import { useCallback as v, useEffect as y, useMemo as b, useRef as x, useState as S } from "react";
|
|
8
8
|
import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { o as e, r as t } from "./dist-DVRQkaTK.js";
|
|
2
2
|
import { i as n, n as r, r as i, t as a } from "./dist-DWZXlCZR.js";
|
|
3
|
-
import { C as o, S as s, x as c } from "./spinner-
|
|
3
|
+
import { C as o, S as s, x as c } from "./spinner-DcW21pN1.js";
|
|
4
4
|
import { a as l, i as u, r as d } from "./dist-DHdUUM1w.js";
|
|
5
5
|
import { c as f, i as p, l as m, o as h, r as g, s as ee } from "./in-dialog-D61Yeaol.js";
|
|
6
6
|
import { r as te } from "./escape-owner-DpaP0lm1.js";
|
|
@@ -46,12 +46,13 @@ Labelled inputs with a value, each with its form-library wrapper, and the compos
|
|
|
46
46
|
|
|
47
47
|
## [Date & time](date-and-time.md)
|
|
48
48
|
|
|
49
|
-
Calendar, date, range, time, duration, a month navigator, the now line.
|
|
49
|
+
Calendar, date, range, half-day range, time, duration, a month navigator, the now line. 9 entries.
|
|
50
50
|
|
|
51
51
|
[<img src="../previews/date-time-datefield.webp" height="72" alt="DateField">](date-and-time.md#datefield)
|
|
52
52
|
[<img src="../previews/date-time-daterangefield.webp" height="72" alt="DateRangeField">](date-and-time.md#daterangefield)
|
|
53
53
|
[<img src="../previews/date-time-timefield.webp" height="72" alt="TimeField">](date-and-time.md#timefield)
|
|
54
54
|
[<img src="../previews/date-time-durationfield.webp" height="72" alt="DurationField">](date-and-time.md#durationfield)
|
|
55
|
+
[<img src="../previews/date-time-halfdayrangefield.webp" height="72" alt="HalfDayRangeField">](date-and-time.md#halfdayrangefield)
|
|
55
56
|
[<img src="../previews/date-time-minimonth.webp" height="72" alt="MiniMonth">](date-and-time.md#minimonth)
|
|
56
57
|
[<img src="../previews/date-time-nowindicator.webp" height="72" alt="NowIndicator">](date-and-time.md#nowindicator)
|
|
57
58
|
|
|
@@ -1049,7 +1049,7 @@ Its props are `ServerTableProps<T>`; `filter` is a `ServerTableFilter`,
|
|
|
1049
1049
|
| `loadMoreLabel` | `string` | "Load more" | with `footer="load-more"`: the button's label |
|
|
1050
1050
|
| `hideOnSinglePage` | `boolean` | `false` | hides the footer's range and Previous / Next when the result is one page (no previous, no next), in the table, cards and tiles layouts; the count is still announced by the live region but no longer shown, so put it in `description` or keep the footer. With `bulkActions` the footer stays for "N rows selected", without its pager |
|
|
1051
1051
|
| `bandActions` | `'stacked' \| 'inline'` | `'stacked'` | with `filter`, where `actions` sit below 768px: `'stacked'` gives them a row above the search; `'inline'` keeps them on the search's row (the search takes the room left), for a lone icon action such as a "+". An action wider than 3.5rem wraps under the search. From 768px both are the same. With a cards or tiles list on a phone, neither applies: [the two-row header](#the-phone-header-of-a-list-in-cards-or-tiles) puts the actions on its second row |
|
|
1052
|
-
| `surface` | `'card' \| 'none'` | `'card'` | the list's own surface: `'card'` a translucent background and 16px of padding (below 768px neither: the layout owns the page gutter and the tiles sit at it, so a `ServerTable` outside a layout that adds a gutter now sits flush with the screen edge below 768px and the caller wraps it in its own padding); `'none'` neither, for a `ServerTable` placed in a `Card`, a page section or any surface that already frames it, so the screen shows one surface, not a frame inside a frame (the tiles keep their own grouped border) |
|
|
1052
|
+
| `surface` | `'card' \| 'none'` | `'card'` | the list's own surface: `'card'` a translucent background and 16px of padding (below 768px neither: the layout owns the page gutter and the tiles sit at it, so a `ServerTable` outside a layout that adds a gutter now sits flush with the screen edge below 768px and the caller wraps it in its own padding); `'none'` neither, for a `ServerTable` placed in a `Card`, a page section or any surface that already frames it, so the screen shows one surface, not a frame inside a frame (the tiles keep their own grouped border); the table's header band and rows also line up flush with the container's other content, as the table's own 4px wrapper padding (room for its shadow on the card surface) is zeroed |
|
|
1053
1053
|
| `filterRef` | `Ref<ServerTableFilterHandle>` | — | with `filter`: `filterRef.current.focus()` focuses the Filter's first control, the search, else the first quick filter, "Add filter" or "Filters (N)" the width shows |
|
|
1054
1054
|
| `sorting` | `createSorting(…)` | — | headers sorted from the URL; without it, no column is sortable (the server sorts, so pass `sorting` to let people sort), and the phone list bar shows only for selection |
|
|
1055
1055
|
| `filters` | `tableFilters(model)` | — | without `filter`: "nothing matches" and its clear |
|
|
@@ -20,6 +20,7 @@ each change and, where one is left, the prop that keeps the old behaviour.
|
|
|
20
20
|
| <img src="../previews/date-time-timefield.webp" width="96" alt=""> | [TimeField](#timefield) | A time typed in segments or picked in a `TimePicker` (a bottom sheet on a phone) |
|
|
21
21
|
| <img src="../previews/date-time-timepicker.webp" width="96" alt=""> | [TimePicker](#timepicker) | Hour and minute tiles (or columns) with AM / PM |
|
|
22
22
|
| <img src="../previews/date-time-durationfield.webp" width="96" alt=""> | [DurationField](#durationfield) | Hours and minutes as a total in minutes, typed on one line: "1 h 29 min" |
|
|
23
|
+
| <img src="../previews/date-time-halfdayrangefield.webp" width="96" alt=""> | [HalfDayRangeField](#halfdayrangefield) | A range whose two ends are each a day plus morning or afternoon, ordered on the half |
|
|
23
24
|
| <img src="../previews/date-time-minimonth.webp" width="96" alt=""> | [MiniMonth](#minimonth) | Compact month navigator with event dots and a keyboard date grid |
|
|
24
25
|
| <img src="../previews/date-time-nowindicator.webp" width="96" alt=""> | [NowIndicator](#nowindicator) | The current-time line of a day schedule, moving each minute |
|
|
25
26
|
|
|
@@ -900,6 +901,116 @@ With `variant="fields"` the inputs are `textbox`es with the same names.
|
|
|
900
901
|
|
|
901
902
|
---
|
|
902
903
|
|
|
904
|
+
## HalfDayRangeField
|
|
905
|
+
|
|
906
|
+

|
|
907
|
+
|
|
908
|
+
A range counted to the half day (a long absence, a closure): each end is a day
|
|
909
|
+
(a `DateField`, typed or picked) plus a morning / afternoon toggle, and the end
|
|
910
|
+
is ordered on the half. The morning of day D is not after the afternoon of day
|
|
911
|
+
D; the afternoon of D to the morning of D is refused.
|
|
912
|
+
|
|
913
|
+
```tsx
|
|
914
|
+
import { useState } from 'react';
|
|
915
|
+
import { type HalfDayRange, HalfDayRangeField } from '@nxgt/material/components';
|
|
916
|
+
|
|
917
|
+
function Absence() {
|
|
918
|
+
const [value, setValue] = useState<HalfDayRange>();
|
|
919
|
+
return <HalfDayRangeField label="Absence" value={value} onValueChange={setValue} />;
|
|
920
|
+
}
|
|
921
|
+
// value: { start: { date: Date, half: 'morning' | 'afternoon' }, end: { … } }
|
|
922
|
+
```
|
|
923
|
+
|
|
924
|
+
With React Hook Form, `HalfDayRangeFormField` takes `control` and `name`, and its
|
|
925
|
+
rule refuses an unordered range in the form (the message is
|
|
926
|
+
`material.half-day-range.order`):
|
|
927
|
+
|
|
928
|
+
```tsx
|
|
929
|
+
import { useForm } from 'react-hook-form';
|
|
930
|
+
import { type HalfDayRange, HalfDayRangeFormField } from '@nxgt/material/components';
|
|
931
|
+
|
|
932
|
+
type Values = { absence?: HalfDayRange };
|
|
933
|
+
|
|
934
|
+
function AbsenceForm() {
|
|
935
|
+
const { control, handleSubmit } = useForm<Values>();
|
|
936
|
+
return (
|
|
937
|
+
<form onSubmit={handleSubmit((values) => save(values.absence))}>
|
|
938
|
+
<HalfDayRangeFormField control={control} name="absence" label="Absence" required />
|
|
939
|
+
</form>
|
|
940
|
+
);
|
|
941
|
+
}
|
|
942
|
+
```
|
|
943
|
+
|
|
944
|
+
Without a resolver the field checks the order itself (a `rules.validate` of your
|
|
945
|
+
own is kept beside it). React Hook Form ignores `rules` when a resolver is set,
|
|
946
|
+
so with zod state the order in the schema, or an end before the start is
|
|
947
|
+
submitted:
|
|
948
|
+
|
|
949
|
+
```tsx
|
|
950
|
+
import { z } from 'zod';
|
|
951
|
+
import { type HalfDayRange, isHalfDayRangeOrdered } from '@nxgt/material/components';
|
|
952
|
+
|
|
953
|
+
const schema = z.object({
|
|
954
|
+
absence: z
|
|
955
|
+
.custom<HalfDayRange>((v) => v != null, { message: 'Choose both days.' })
|
|
956
|
+
.refine(isHalfDayRangeOrdered, { message: 'The end cannot be before the start.' }),
|
|
957
|
+
});
|
|
958
|
+
```
|
|
959
|
+
|
|
960
|
+
| Prop | Type | Default | What it does |
|
|
961
|
+
| --- | --- | --- | --- |
|
|
962
|
+
| `value` | `HalfDayRange \| undefined` | | Controlled: `{ start: { date, half }, end: { date, half } }`; `date` is the local midnight of the day |
|
|
963
|
+
| `defaultValue` | `HalfDayRange` | | Uncontrolled: the range the field starts with and then keeps |
|
|
964
|
+
| `onValueChange` | `(value?: HalfDayRange) => void` | | The range as soon as both days are set, ordered or not; `undefined` while a day is missing |
|
|
965
|
+
| `label`, `helperText`, `error`, `required`, `disabled`, `className`, `id` | | | As on the other fields |
|
|
966
|
+
| `name` | `string` | | A test hook only (`data-pw` on the root, `.start` / `.end` on each end): the date inputs have no native `name`, so nothing is posted by a plain `<form>` |
|
|
967
|
+
| `minDate`, `maxDate` | `Date` | | Bound both ends; the end's calendar also starts at the start's day |
|
|
968
|
+
| `disabledDays`, `locale` | | | As on `DateField` (`timeZone` is not forwarded: days are the local ones) |
|
|
969
|
+
|
|
970
|
+
**What the field says in each state:**
|
|
971
|
+
|
|
972
|
+
| State | `onValueChange` | On screen |
|
|
973
|
+
| --- | --- | --- |
|
|
974
|
+
| A day is missing (start or end empty, or half typed) | `undefined` | The other end is kept; no message |
|
|
975
|
+
| Both days set, end on or after the start on the half | the range | |
|
|
976
|
+
| Both days set, end before the start on the half | the range, as entered | "The end cannot be before the start." under the field, `aria-invalid` on the halves, announced politely; in a form without a resolver, `HalfDayRangeFormField` makes it a field error (with zod, use the `refine` above) |
|
|
977
|
+
| `value` reset to `undefined` from outside (a form `reset`) | | Both days are emptied, the halves go back to morning and afternoon, unless the emitted value was already `undefined` (a half-typed start or a cleared end stays: give the field a `key` that changes on reset) |
|
|
978
|
+
|
|
979
|
+
A new range starts on the morning (start) and the afternoon (end), so one picked
|
|
980
|
+
day is a full day. Each end has its own accessible names ("Start date", "Start
|
|
981
|
+
half-day", "End date", "End half-day": `material.dates.start` / `end` and
|
|
982
|
+
`material.half-day-range.*`, see the [i18n guide](../guides/i18n.md)).
|
|
983
|
+
|
|
984
|
+
The value holds `Date`s: store a day with `format(date, 'yyyy-MM-dd')` (date-fns),
|
|
985
|
+
not `toISOString()`, which moves it to UTC and can shift the day.
|
|
986
|
+
|
|
987
|
+
```tsx
|
|
988
|
+
import {
|
|
989
|
+
compareHalfDays,
|
|
990
|
+
halfDaysIn,
|
|
991
|
+
type HalfDayRange,
|
|
992
|
+
isHalfDayRangeOrdered,
|
|
993
|
+
} from '@nxgt/material/components';
|
|
994
|
+
|
|
995
|
+
const range: HalfDayRange = {
|
|
996
|
+
start: { date: new Date(2030, 5, 3), half: 'morning' },
|
|
997
|
+
end: { date: new Date(2030, 5, 4), half: 'afternoon' },
|
|
998
|
+
};
|
|
999
|
+
|
|
1000
|
+
isHalfDayRangeOrdered(range); // true: the end is not before the start on the half
|
|
1001
|
+
halfDaysIn(range); // 4: Monday morning and afternoon, Tuesday morning and afternoon
|
|
1002
|
+
compareHalfDays(range.start, range.end); // -3: negative when the first comes first
|
|
1003
|
+
```
|
|
1004
|
+
|
|
1005
|
+
`HALF_DAYS` (`['morning', 'afternoon']`, in the order of the day) is exported too.
|
|
1006
|
+
|
|
1007
|
+
**Emits:** `HalfDayRange | undefined`.
|
|
1008
|
+
**Form wrapper:** `HalfDayRangeFormField` — `control` and `name`, see
|
|
1009
|
+
[forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
|
|
1010
|
+
**Storybook:** `Date & time/HalfDayRangeField` and `Date & time/HalfDayRangeField/Form field` · **Vue:** not yet (#2555 tracks the twin)
|
|
1011
|
+
|
|
1012
|
+
---
|
|
1013
|
+
|
|
903
1014
|
## MiniMonth
|
|
904
1015
|
|
|
905
1016
|

|
package/docs/guides/forms.md
CHANGED
|
@@ -523,6 +523,7 @@ or fails validation.
|
|
|
523
523
|
| `DateRangeField` · `DateRangeFormField` | `DateRange \| undefined`: `{ from: Date \| undefined; to?: Date }` | `undefined` |
|
|
524
524
|
| `TimeField` · `TimeFormField` | `Date \| undefined` (with `timeZone`, the true instant). With `asString`: `'HH:mm'`. While empty it shows its `placeholder` | `undefined` / `''` |
|
|
525
525
|
| `DurationField` · `DurationFormField` | `number \| null`: total minutes (hours × 60 + minutes) | `null` |
|
|
526
|
+
| `HalfDayRangeField` · `HalfDayRangeFormField` | `HalfDayRange \| undefined`: `{ start: { date, half }, end: { date, half } }`, `half` `'morning' \| 'afternoon'`; `undefined` while a day is missing; an end before the start is the value, refused by the wrapper's rule (`material.half-day-range.order`) | `undefined` |
|
|
526
527
|
|
|
527
528
|
### Selection & choice
|
|
528
529
|
|
package/docs/guides/i18n.md
CHANGED
|
@@ -397,6 +397,13 @@ dates", "Saisir les dates") on `DateRangeField`. Its hero says
|
|
|
397
397
|
`material.dates.select-date` ("Select date", "Choisir la date") while the date
|
|
398
398
|
is empty, `material.dates.select-dates` on `DateRangeField`, and the Cancel of
|
|
399
399
|
a date-time picker reads `material.buttons.cancel` ("Cancel", "Annuler").
|
|
400
|
+
`HalfDayRangeField` names its ends `material.dates.start` / `end` and its two
|
|
401
|
+
halves `material.half-day-range.start-half` ("Start half-day", "Demi-journée de
|
|
402
|
+
début") and `end-half` ("End half-day", "Demi-journée de fin"); the toggles read
|
|
403
|
+
`material.half-day-range.morning` ("Morning", "Matin") and `afternoon`
|
|
404
|
+
("Afternoon", "Après-midi"), and an end before the start says
|
|
405
|
+
`material.half-day-range.order` ("The end cannot be before the start.", "La fin
|
|
406
|
+
ne peut pas précéder le début.").
|
|
400
407
|
`DateRangeField`'s preset list is a group named by
|
|
401
408
|
`material.date-range-field.presets` ("Presets", "Plages prédéfinies"); its
|
|
402
409
|
built-in presets read `material.date-range-field.preset.today`,
|
|
Binary file
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* DurationField's one-line field (`variant="segments"`, the default), over
|
|
2
|
-
* the date fields'
|
|
2
|
+
* the date fields' shared bordered box (typed-box-expressive.css) and its segments
|
|
3
3
|
* (segmented-input-expressive.css): "1 h 29 min", each amount followed by
|
|
4
4
|
* its muted unit, then one −/+ pair. Every focus ring is drawn inside the
|
|
5
5
|
* field (an inset outline), never clipped. The box keeps its focus boundary
|
|
@@ -1,41 +1,23 @@
|
|
|
1
|
-
/* The date, range and time fields' box, over the field box.
|
|
2
|
-
*
|
|
3
|
-
*
|
|
4
|
-
*
|
|
1
|
+
/* The date, range and time fields' box, over the field box. The same box at
|
|
2
|
+
* rest as a text field (surface, hairline border, radius, hover and filled
|
|
3
|
+
* tint: the shared bordered box, #2406), with a 2px primary boundary
|
|
4
|
+
* while a segment has focus or the picker is open and an error boundary when
|
|
5
|
+
* invalid. The segments are in segmented-input-expressive.css.
|
|
5
6
|
* `data-tonal` belongs to the date and time fields: the typed box and
|
|
6
7
|
* the sheet entry box. No other field sets it. */
|
|
7
8
|
@layer components {
|
|
8
9
|
.nxgt-field-box.nxgt-field-box[data-tonal] {
|
|
9
|
-
--_fx-fill: color-mix(in oklab, var(--primary) 7%, var(--background));
|
|
10
|
-
--_fx-fill-hover: color-mix(
|
|
11
|
-
in oklab,
|
|
12
|
-
var(--primary) 11%,
|
|
13
|
-
var(--background)
|
|
14
|
-
);
|
|
15
10
|
--_fx-tint: color-mix(in oklab, var(--primary) 14%, var(--background));
|
|
16
11
|
--_fx-pill: var(--primary);
|
|
17
12
|
--_fx-pill-fg: var(--primary-foreground);
|
|
18
13
|
--_fx-line: var(--primary-text);
|
|
19
14
|
--_fx-err: var(--error);
|
|
20
|
-
border-color: transparent;
|
|
21
|
-
background-color: var(--_fx-fill);
|
|
22
15
|
}
|
|
23
16
|
:is(.dark, [data-theme="dark"]) .nxgt-field-box.nxgt-field-box[data-tonal] {
|
|
24
|
-
--_fx-fill: color-mix(in oklab, var(--primary) 18%, var(--background));
|
|
25
|
-
--_fx-fill-hover: color-mix(
|
|
26
|
-
in oklab,
|
|
27
|
-
var(--primary) 22%,
|
|
28
|
-
var(--background)
|
|
29
|
-
);
|
|
30
17
|
--_fx-tint: color-mix(in oklab, var(--primary) 34%, var(--background));
|
|
31
18
|
--_fx-pill: var(--primary-text);
|
|
32
19
|
--_fx-pill-fg: var(--background);
|
|
33
20
|
}
|
|
34
|
-
/* Hover: the fill steps up, and the field box's hover border stays away. */
|
|
35
|
-
.nxgt-field-box.nxgt-field-box[data-tonal]:hover {
|
|
36
|
-
border-color: transparent;
|
|
37
|
-
background-color: var(--_fx-fill-hover);
|
|
38
|
-
}
|
|
39
21
|
.nxgt-field-box.nxgt-field-box[data-tonal]:is(
|
|
40
22
|
[data-focused],
|
|
41
23
|
[data-open]:not([data-open="false"])
|
|
@@ -48,7 +30,6 @@
|
|
|
48
30
|
[data-invalid="false"]
|
|
49
31
|
) {
|
|
50
32
|
border-color: var(--_fx-err);
|
|
51
|
-
background-color: color-mix(in oklab, var(--error) 7%, var(--background));
|
|
52
33
|
}
|
|
53
34
|
.nxgt-field-box.nxgt-field-box.nxgt-field-box[data-tonal][data-invalid]:not(
|
|
54
35
|
[data-invalid="false"]
|