@gez/date-time-kit 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/assets/index.d.ts

@@ -0,0 +1,10 @@
+export declare const svg2url: (svg: string) => string;
+export declare const svg2cssUrl: (svg: string) => string;
+export declare const arrowLeftSvg = "<svg class=\"bidirectional-flip\" width=\"16\" height=\"17\" fill=\"currentColor\"><path d=\"M11.687 1.703a.5.5 0 0 0-.707 0L4.852 7.83a.505.505 0 0 0-.045.05.5.5 0 0 0-.051.752l6.128 6.128a.5.5 0 0 0 .707-.707L5.817 8.28l5.87-5.87a.5.5 0 0 0 0-.707Z\"/></svg>";
+export declare const arrowRightSvg = "<svg class=\"bidirectional-flip\" width=\"17\" height=\"17\" fill=\"currentColor\"><path d=\"M5.256 1.703a.5.5 0 0 1 .707 0l6.128 6.128a.493.493 0 0 1 .045.05.5.5 0 0 1 .051.752l-6.128 6.128a.5.5 0 0 1-.707-.707l5.774-5.774-5.87-5.87a.5.5 0 0 1 0-.707Z\"/></svg>";
+export declare const arrowLeftDoubleSvg = "<svg class=\"bidirectional-flip\" width=\"16\" height=\"17\" fill=\"currentColor\"><path d=\"M9.037 1.98a.5.5 0 1 1 .707.707l-5.87 5.87 5.774 5.774a.5.5 0 1 1-.707.707L2.813 8.911a.5.5 0 0 1 .051-.752.505.505 0 0 1 .045-.051L9.037 1.98ZM13.037 1.98a.5.5 0 0 1 .707.707l-5.87 5.87 5.774 5.774a.5.5 0 1 1-.707.707L6.813 8.911a.5.5 0 0 1 .051-.752.505.505 0 0 1 .045-.051l6.128-6.128Z\"/></svg>";
+export declare const arrowRightDoubleSvg = "<svg class=\"bidirectional-flip\" width=\"17\" height=\"17\" fill=\"currentColor\"><path d=\"M7.963 1.703a.5.5 0 0 0-.707.707l5.87 5.87-5.774 5.774a.5.5 0 0 0 .707.707l6.128-6.128a.5.5 0 0 0-.051-.751.493.493 0 0 0-.045-.051L7.963 1.703ZM3.963 1.703a.5.5 0 0 0-.707.707l5.87 5.87-5.774 5.774a.5.5 0 0 0 .707.707l6.128-6.128a.5.5 0 0 0-.051-.751.493.493 0 0 0-.045-.051L3.963 1.703Z\"/></svg>";
+export declare const arrowDownSvg = "<svg class=\"bidirectional-flip\" width=\"15\" height=\"15\" fill=\"currentColor\"><path d=\"m8.02 10.54 3.96-4.4a.583.583 0 0 0-.433-.973h-7.88a.583.583 0 0 0-.434.973l3.94 4.378c.216.24.585.26.824.044l.022-.021Z\"/></svg>";
+export declare const backArrowSvg = "<svg class=\"bidirectional-flip\" width=\"24\" height=\"24\" fill=\"currentColor\"><path d=\"M9.894 5.106a.75.75 0 0 1 0 1.06L4.811 11.25 21 11.25a.75.75 0 0 1 0 1.5l-16.191-.001 5.085 5.085a.75.75 0 0 1-1.06 1.06L2.47 12.53a.75.75 0 0 1 0-1.06l6.364-6.364a.75.75 0 0 1 1.06 0Z\"/></svg>";
+export declare const timeSvg = "<svg width=\"14\" height=\"15\" fill=\"currentColor\"><path d=\"M7.4335 4.241a.4376.4376 0 0 0-.871.0594v3.783l.0044.0622a.4375.4375 0 0 0 .1921.3029L8.9242 9.877l.0566.0317a.4376.4376 0 0 0 .5495-.1559l.0317-.0566a.4376.4376 0 0 0-.1559-.5495L7.4375 7.8471V4.3004l-.004-.0593ZM7 1.6667c-3.2217 0-5.8333 2.6116-5.8333 5.8333 0 3.2217 2.6116 5.8333 5.8333 5.8333 3.2217 0 5.8333-2.6116 5.8333-5.8333 0-3.2217-2.6116-5.8333-5.8333-5.8333Zm0 .814c2.7721 0 5.0194 2.2472 5.0194 5.0193 0 2.7721-2.2473 5.0194-5.0194 5.0194S1.9806 10.2721 1.9806 7.5 4.228 2.4806 7 2.4806Z\"/></svg>";
+export declare const closeBarSvg = "<svg><rect width=\"40\" height=\"4\" rx=\"2\"/></svg>";

package/dist/assets/index.mjs

@@ -0,0 +1,14 @@
+const symbols = /[\r\n%#()<>?[\\\]^`{|}]/g;
+export const svg2url = (svg) => "data:image/svg+xml," + svg.replace(
+  "<svg",
+  ~svg.indexOf("xmlns") ? "<svg" : '<svg xmlns="http://www.w3.org/2000/svg"'
+).replace(/"/g, "'").replace(/>\s{1,}</g, "><").replace(/\s{2,}/g, " ").replace(symbols, encodeURIComponent);
+export const svg2cssUrl = (svg) => 'url("'.concat(svg2url(svg), '")');
+export const arrowLeftSvg = '<svg class="bidirectional-flip" width="16" height="17" fill="currentColor"><path d="M11.687 1.703a.5.5 0 0 0-.707 0L4.852 7.83a.505.505 0 0 0-.045.05.5.5 0 0 0-.051.752l6.128 6.128a.5.5 0 0 0 .707-.707L5.817 8.28l5.87-5.87a.5.5 0 0 0 0-.707Z"/></svg>';
+export const arrowRightSvg = '<svg class="bidirectional-flip" width="17" height="17" fill="currentColor"><path d="M5.256 1.703a.5.5 0 0 1 .707 0l6.128 6.128a.493.493 0 0 1 .045.05.5.5 0 0 1 .051.752l-6.128 6.128a.5.5 0 0 1-.707-.707l5.774-5.774-5.87-5.87a.5.5 0 0 1 0-.707Z"/></svg>';
+export const arrowLeftDoubleSvg = '<svg class="bidirectional-flip" width="16" height="17" fill="currentColor"><path d="M9.037 1.98a.5.5 0 1 1 .707.707l-5.87 5.87 5.774 5.774a.5.5 0 1 1-.707.707L2.813 8.911a.5.5 0 0 1 .051-.752.505.505 0 0 1 .045-.051L9.037 1.98ZM13.037 1.98a.5.5 0 0 1 .707.707l-5.87 5.87 5.774 5.774a.5.5 0 1 1-.707.707L6.813 8.911a.5.5 0 0 1 .051-.752.505.505 0 0 1 .045-.051l6.128-6.128Z"/></svg>';
+export const arrowRightDoubleSvg = '<svg class="bidirectional-flip" width="17" height="17" fill="currentColor"><path d="M7.963 1.703a.5.5 0 0 0-.707.707l5.87 5.87-5.774 5.774a.5.5 0 0 0 .707.707l6.128-6.128a.5.5 0 0 0-.051-.751.493.493 0 0 0-.045-.051L7.963 1.703ZM3.963 1.703a.5.5 0 0 0-.707.707l5.87 5.87-5.774 5.774a.5.5 0 0 0 .707.707l6.128-6.128a.5.5 0 0 0-.051-.751.493.493 0 0 0-.045-.051L3.963 1.703Z"/></svg>';
+export const arrowDownSvg = '<svg class="bidirectional-flip" width="15" height="15" fill="currentColor"><path d="m8.02 10.54 3.96-4.4a.583.583 0 0 0-.433-.973h-7.88a.583.583 0 0 0-.434.973l3.94 4.378c.216.24.585.26.824.044l.022-.021Z"/></svg>';
+export const backArrowSvg = '<svg class="bidirectional-flip" width="24" height="24" fill="currentColor"><path d="M9.894 5.106a.75.75 0 0 1 0 1.06L4.811 11.25 21 11.25a.75.75 0 0 1 0 1.5l-16.191-.001 5.085 5.085a.75.75 0 0 1-1.06 1.06L2.47 12.53a.75.75 0 0 1 0-1.06l6.364-6.364a.75.75 0 0 1 1.06 0Z"/></svg>';
+export const timeSvg = '<svg width="14" height="15" fill="currentColor"><path d="M7.4335 4.241a.4376.4376 0 0 0-.871.0594v3.783l.0044.0622a.4375.4375 0 0 0 .1921.3029L8.9242 9.877l.0566.0317a.4376.4376 0 0 0 .5495-.1559l.0317-.0566a.4376.4376 0 0 0-.1559-.5495L7.4375 7.8471V4.3004l-.004-.0593ZM7 1.6667c-3.2217 0-5.8333 2.6116-5.8333 5.8333 0 3.2217 2.6116 5.8333 5.8333 5.8333 3.2217 0 5.8333-2.6116 5.8333-5.8333 0-3.2217-2.6116-5.8333-5.8333-5.8333Zm0 .814c2.7721 0 5.0194 2.2472 5.0194 5.0193 0 2.7721-2.2473 5.0194-5.0194 5.0194S1.9806 10.2721 1.9806 7.5 4.228 2.4806 7 2.4806Z"/></svg>';
+export const closeBarSvg = '<svg><rect width="40" height="4" rx="2"/></svg>';

package/dist/components/calendar/index.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export default _default;

package/dist/components/calendar/index.css.mjs

@@ -0,0 +1,11 @@
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
+var _a;
+import {
+  css,
+  cssDirLtrSelector1,
+  cssDirLtrSelector2,
+  cssDirLtrSelector3
+} from "../../utils.mjs";
+export default css(_a || (_a = __template(["\n:host {\n  --gap: var(--calendar-item-gap, 10px 0);\n  --item-size: var(--calendar-item-size, 30px);\n  --color-disabled-text: var(--calendar-item-disabled-text, #aaa);\n  --color-active-bg: var(--calendar-item-active-bg, #002BE7);\n  --color-active-text: var(--calendar-item-active-text, #fff);\n  --color-in-range-bg: var(--calendar-item-in-range-bg, #002BE726);\n  --color-in-range-text: var(--calendar-item-in-range-text, #002BE7);\n  --color-hover-bg: var(--calendar-item-hover-bg, #0000000D);\n  --color-hover-text: var(--calendar-item-hover-text, #000);\n  --color-active-hover-bg: var(--calendar-item-active-hover-bg, var(--color-active-bg));\n  --color-active-hover-text: var(--calendar-item-active-hover-text, var(--color-active-text));\n}\n\n.wrapper {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: var(--gap);\n  width: 100%;\n  height: 100%;\n  justify-content: space-between;\n  text-align: center;\n}\n\n.week {\n  min-width: var(--item-size);\n  display: inline-block;\n}\n\n.item {\n  min-width: var(--item-size);\n  line-height: var(--item-size);\n  height: var(--item-size);\n  position: relative;\n  --half-period-bg-w: calc(50% + var(--item-size) / 2);\n}\n.item span {\n  position: relative;\n  z-index: 2;\n}\n.item:not(.disabled) {\n  cursor: pointer;\n}\n:host([show-other-month]) .item.prev.disabled, :host([show-other-month]) .item.next.disabled, .item.disabled:not(.prev, .next) {\n  cursor: not-allowed;\n  color: var(--color-disabled-text);\n}\n.item:hover {\n  color: var(--color-hover-text);\n}\n.item.in-range {\n  color: var(--color-in-range-text);\n}\n.item:not(.disabled) .highlight {\n  display: block;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: var(--item-size);\n  height: var(--item-size);\n  transform: translate(-50%, -50%);\n}\n.item.start, .item.end {\n  color: var(--color-active-text);\n}\n.item.start .highlight, .item.end .highlight {\n  background-color: var(--color-active-bg);\n}\n.item:hover .highlight {\n  background-color: var(--color-hover-bg);\n}\n.item.start:hover .highlight, .item.end:hover .highlight {\n  background-color: var(--color-active-hover-bg);\n}\n.item.start:hover, .item.end:hover {\n  color: var(--color-active-hover-text);\n}\n.item.in-range .bg {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 43, 231, 0.1490196078);\n}\n.item:nth-of-type(7n + 1) .bg {\n  border-radius: var(--item-size) 0 0 var(--item-size);\n  width: var(--half-period-bg-w);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item:nth-of-type(7n) .bg {\n  border-radius: 0 var(--item-size) var(--item-size) 0;\n  width: var(--half-period-bg-w);\n}\n.item:nth-of-type(7n).range-start .bg {\n  width: var(--item-size);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item.range-start .bg {\n  border-top-left-radius: var(--item-size);\n  border-bottom-left-radius: var(--item-size);\n  width: var(--half-period-bg-w);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item.range-end .bg {\n  border-top-right-radius: var(--item-size);\n  border-bottom-right-radius: var(--item-size);\n  width: var(--half-period-bg-w);\n}\n.item.range-start.range-end .bg {\n  width: var(--item-size);\n}\n.item:nth-of-type(7n).range-start .bg, .item:nth-of-type(7n + 1).range-end .bg {\n  width: var(--item-size);\n}\n\n.item .bg", " { border-radius: 0; }\n.item .bg", " { border-radius: 0; }\n.item .bg", " { border-radius: 0; }\n.item.in-range .bg", " { left: auto; right: 0; }\n.item.in-range .bg", " { left: auto; right: 0; }\n.item.in-range .bg", " { left: auto; right: 0; }\n.item:nth-of-type(7n + 1) .bg", " { left: auto; right: calc(50% - var(--item-size) / 2); border-radius: 0 var(--item-size) var(--item-size) 0; }\n.item:nth-of-type(7n + 1) .bg", " { left: auto; right: calc(50% - var(--item-size) / 2); border-radius: 0 var(--item-size) var(--item-size) 0; }\n.item:nth-of-type(7n + 1) .bg", " { left: auto; right: calc(50% - var(--item-size) / 2); border-radius: 0 var(--item-size) var(--item-size) 0; }\n.item:nth-of-type(7n) .bg", " { border-radius: var(--item-size) 0 0 var(--item-size); }\n.item:nth-of-type(7n) .bg", " { border-radius: var(--item-size) 0 0 var(--item-size); }\n.item:nth-of-type(7n) .bg", " { border-radius: var(--item-size) 0 0 var(--item-size); }\n.item:nth-of-type(7n).range-start .bg", " { left: auto; right: calc(50% - var(--item-size) / 2); }\n.item:nth-of-type(7n).range-start .bg", " { left: auto; right: calc(50% - var(--item-size) / 2); }\n.item:nth-of-type(7n).range-start .bg", " { left: auto; right: calc(50% - var(--item-size) / 2); }\n.item.range-start .bg", " {\n  border-top-right-radius: var(--item-size);\n  border-bottom-right-radius: var(--item-size);\n  left: auto;\n  right: calc(50% - var(--item-size) / 2);\n}\n.item.range-start .bg", " {\n  border-top-right-radius: var(--item-size);\n  border-bottom-right-radius: var(--item-size);\n  left: auto;\n  right: calc(50% - var(--item-size) / 2);\n}\n.item.range-start .bg", " {\n  border-top-right-radius: var(--item-size);\n  border-bottom-right-radius: var(--item-size);\n  left: auto;\n  right: calc(50% - var(--item-size) / 2);\n}\n.item.range-end .bg", " {\n  border-top-left-radius: var(--item-size);\n  border-bottom-left-radius: var(--item-size);\n}\n.item.range-end .bg", " {\n  border-top-left-radius: var(--item-size);\n  border-bottom-left-radius: var(--item-size);\n}\n.item.range-end .bg", " {\n  border-top-left-radius: var(--item-size);\n  border-bottom-left-radius: var(--item-size);\n}\n"])), cssDirLtrSelector1, cssDirLtrSelector2, cssDirLtrSelector3, cssDirLtrSelector1, cssDirLtrSelector2, cssDirLtrSelector3, cssDirLtrSelector1, cssDirLtrSelector2, cssDirLtrSelector3, cssDirLtrSelector1, cssDirLtrSelector2, cssDirLtrSelector3, cssDirLtrSelector1, cssDirLtrSelector2, cssDirLtrSelector3, cssDirLtrSelector1, cssDirLtrSelector2, cssDirLtrSelector3, cssDirLtrSelector1, cssDirLtrSelector2, cssDirLtrSelector3);

package/dist/components/calendar/index.d.ts

@@ -1,7 +1,6 @@
-import { type BaseAttrs, type Emit2EventMap, UiBase } from '../web-component-base';
-export type Weeks = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
-export declare const weekKey: Weeks[];
-export declare const getWeekInOrder: (startAt?: Weeks | null) => Weeks[];
+import { type BaseAttrs, type BaseEmits, type Emit2EventMap, UiBase } from '../web-component-base';
+import { type Weeks } from './weeks';
+export { type Weeks, weekKey, getWeekInOrder } from './weeks';
 export interface Attrs extends BaseAttrs {
     /**
      * The showing time, used to determine the month to show on calendar.
@@ -44,7 +43,7 @@ export interface Attrs extends BaseAttrs {
      */
     'show-other-month'?: boolean;
 }
-export interface Emits {
+export interface Emits extends BaseEmits {
     'select-time': Date;
     'hover-item': Date;
 }
@@ -75,7 +74,7 @@ export declare class Ele extends UiBase<Attrs, Emits> {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    protected _onAttrChanged(name: string, oldValue: string | null, newValue: string | null): void;
     private _onWeekStartAtChange;
     private _onTimeChange;
     private _onClick;

package/dist/components/calendar/index.html.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export default _default;

package/dist/components/calendar/index.html.mjs

@@ -0,0 +1,13 @@
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
+var _a, _b, _c;
+import { html } from "../../utils.mjs";
+import { Ele as I18nEle } from "../i18n/index.mjs";
+I18nEle.define();
+import { weekKey } from "./weeks.mjs";
+export default html(_c || (_c = __template(['\n<div class="wrapper">', "</div>"])), weekKey.map(
+  (key) => html(_a || (_a = __template(['<dt-i18n class="week" i18n-key="date.', '" part="week"></dt-i18n>'])), key)
+).join("") + [...Array(7 * 6)].map(
+  (_, i) => html(_b || (_b = __template(['<div class="item" part="item"><i class="bg"></i><i class="highlight"></i><span>', "</span></div>"])), i % 31 + 1)
+).join(""));

package/dist/components/calendar/index.mjs

@@ -1,40 +1,19 @@
-var __freeze = Object.freeze;
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
-var _a, _b, _c, _d;
-import { closestByEvent, css, debounce, html } from "../../utils.mjs";
-import { Ele as I18nEle } from "../i18n/index.mjs";
-I18nEle.define();
+import { closestByEvent, debounce } from "../../utils.mjs";
 import {
   UiBase
 } from "../web-component-base/index.mjs";
-const styleStr = css(_a || (_a = __template(["\n:host {\n  --gap: var(--calendar-item-gap, 10px 0);\n  --item-size: var(--calendar-item-size, 30px);\n  --color-disabled-text: var(--calendar-item-disabled-text, #aaa);\n  --color-active-bg: var(--calendar-item-active-bg, #002BE7);\n  --color-active-text: var(--calendar-item-active-text, #fff);\n  --color-in-range-bg: var(--calendar-item-in-range-bg, #002BE726);\n  --color-in-range-text: var(--calendar-item-in-range-text, #002BE7);\n  --color-hover-bg: var(--calendar-item-hover-bg, #0000000D);\n  --color-hover-text: var(--calendar-item-hover-text, #000);\n}\n\n.wrapper {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: var(--gap);\n  width: 100%;\n  height: 100%;\n  justify-content: space-between;\n  text-align: center;\n}\n\n.week {\n  min-width: var(--item-size);\n}\n\n.item {\n  min-width: var(--item-size);\n  line-height: var(--item-size);\n  height: var(--item-size);\n  position: relative;\n  --half-period-bg-w: calc(50% + var(--item-size) / 2);\n}\n.item span {\n  position: relative;\n  z-index: 2;\n}\n.item:not(.disabled) {\n  cursor: pointer;\n}\n:host([show-other-month]) .item.prev.disabled, :host([show-other-month]) .item.next.disabled, .item.disabled:not(.prev, .next) {\n  cursor: not-allowed;\n  color: var(--color-disabled-text);\n}\n.item:hover {\n  color: var(--color-hover-text);\n}\n.item.in-range {\n  color: var(--color-in-range-text);\n}\n.item:not(.disabled) .highlight {\n  display: block;\n  border-radius: 50%;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: var(--item-size);\n  height: var(--item-size);\n  transform: translate(-50%, -50%);\n}\n.item.start, .item.end {\n  color: var(--color-active-text);\n}\n.item.start .highlight, .item.end .highlight {\n  background-color: var(--color-active-bg);\n}\n.item:hover .highlight {\n  background-color: var(--color-hover-bg);\n}\n.item.in-range .bg {\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 43, 231, 0.1490196078);\n}\n.item:nth-of-type(7n + 1) .bg {\n  border-radius: var(--item-size) 0 0 var(--item-size);\n  width: var(--half-period-bg-w);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item:nth-of-type(7n) .bg {\n  border-radius: 0 var(--item-size) var(--item-size) 0;\n  width: var(--half-period-bg-w);\n}\n.item:nth-of-type(7n).range-start .bg {\n  width: var(--item-size);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item.range-start .bg {\n  border-top-left-radius: var(--item-size);\n  border-bottom-left-radius: var(--item-size);\n  width: var(--half-period-bg-w);\n  left: calc(50% - var(--item-size) / 2);\n}\n.item.range-end .bg {\n  border-top-right-radius: var(--item-size);\n  border-bottom-right-radius: var(--item-size);\n  width: var(--half-period-bg-w);\n}\n.item.range-start.range-end .bg {\n  width: var(--item-size);\n}\n.item:nth-of-type(7n).range-start .bg, .item:nth-of-type(7n + 1).range-end .bg {\n  width: var(--item-size);\n}\n"])));
-export const weekKey = [
-  "sun",
-  "mon",
-  "tue",
-  "wed",
-  "thu",
-  "fri",
-  "sat"
-];
-export const getWeekInOrder = (startAt) => {
-  if (!startAt) startAt = "sun";
-  const index = weekKey.indexOf(startAt);
-  if (index === -1) return weekKey;
-  return [...weekKey.slice(index), ...weekKey.slice(0, index)];
-};
+import styleStr from "./index.css.mjs";
+import html from "./index.html.mjs";
+import { getWeekInOrder, weekKey } from "./weeks.mjs";
+export { weekKey, getWeekInOrder } from "./weeks.mjs";
 export class Ele extends UiBase {
   constructor() {
     super();
     __publicField(this, "_style", styleStr);
-    __publicField(this, "_template", html(_d || (_d = __template(['\n<div class="wrapper">', "</div>"])), weekKey.map(
-      (key) => html(_b || (_b = __template(['<dt-i18n class="week" i18n-key="date.', '" part="week"></dt-i18n>'])), key)
-    ).join("") + [...Array(7 * 6)].map(
-      (_, i) => html(_c || (_c = __template(['<div class="item" part="item"><i class="bg"></i><i class="highlight"></i><span>', "</span></div>"])), i % 31 + 1)
-    ).join("")));
+    __publicField(this, "_template", html);
     __publicField(this, "_onWeekStartAtChange", debounce(() => {
       if (!this.isConnected) return;
       const weekOrder = getWeekInOrder(this.weekStartAt);
@@ -58,8 +37,8 @@ export class Ele extends UiBase {
       if (timeStart > timeEnd) {
         [timeStart, timeEnd] = [timeEnd, timeStart];
       }
-      const minTime = new Date(this._getAttr("min-time") || "");
-      const maxTime = new Date(this._getAttr("max-time") || "");
+      const minTime = this.minTime;
+      const maxTime = this.maxTime;
       minTime.setHours(0, 0, 0, 0);
       maxTime.setHours(0, 0, 0, 0);
       if (maxTime < timeEnd) timeEnd = maxTime;
@@ -160,11 +139,11 @@ export class Ele extends UiBase {
     return new Date(Number.isNaN(+v) ? v : +v);
   }
   get minTime() {
-    const v = this._getAttr("min-time", "");
+    const v = this._getAttr("min-time", "null");
     return new Date(Number.isNaN(+v) ? v : +v);
   }
   get maxTime() {
-    const v = this._getAttr("max-time", "");
+    const v = this._getAttr("max-time", "null");
     return new Date(Number.isNaN(+v) ? v : +v);
   }
   _setTimeAttr(name, value) {

package/dist/components/calendar/weeks.d.ts

@@ -0,0 +1,3 @@
+export type Weeks = 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';
+export declare const weekKey: Weeks[];
+export declare const getWeekInOrder: (startAt?: Weeks | null) => Weeks[];

package/dist/components/calendar/weeks.mjs

@@ -0,0 +1,15 @@
+export const weekKey = [
+  "sun",
+  "mon",
+  "tue",
+  "wed",
+  "thu",
+  "fri",
+  "sat"
+];
+export const getWeekInOrder = (startAt) => {
+  if (!startAt) startAt = "sun";
+  const index = weekKey.indexOf(startAt);
+  if (index === -1) return weekKey;
+  return [...weekKey.slice(index), ...weekKey.slice(0, index)];
+};

package/dist/components/date-time-selector/index.d.ts

@@ -1,6 +1,10 @@
-import { type BaseAttrs, type Emit2EventMap, UiBase } from '../web-component-base';
 import { type Weeks } from '../calendar';
-export interface Attrs extends BaseAttrs {
+import { type Granularity as TimeGranularity } from '../hhmmss-ms-list-grp/selector';
+import { type reExportPopoverAttrs } from '../popover/attr-sync-helper';
+import { type BaseAttrs, type BaseEmits, type Emit2EventMap, UiBase } from '../web-component-base';
+export declare const granularityList: readonly ["day", "hour", "minute", "second", "millisecond"];
+export type Granularity = (typeof granularityList)[number];
+export type Attrs = BaseAttrs & reExportPopoverAttrs & {
     /**
      * Set which day of the week is the first day.
      * @type `'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'`
@@ -10,7 +14,7 @@ export interface Attrs extends BaseAttrs {
     /**
      * The time of the calendar.
      * @type {`string | number`} A value that can be passed to the Date constructor.
-     * @default Date.now()
+     * @default Math.min('max-time', Math.max('min-time', Date.now()))
      */
     'current-time'?: string | number;
     /**
@@ -23,39 +27,62 @@ export interface Attrs extends BaseAttrs {
      * 选择器的粒度，表示最小可选的时间单位。默认为 millisecond。
      * 例如设置为 'minute'，则表示只能选择到分钟，秒和毫秒将被忽略。
      */
-    'min-granularity'?: 'day' | 'hour' | 'minute' | 'second' | 'millisecond';
-}
-export interface Emits {
+    'min-granularity'?: Granularity;
+    /**
+     * The minimum time of the calendar display range.
+     * @type {`string | number`} A value that can be passed to the Date constructor.
+     */
+    'min-time'?: string | number;
+    /**
+     * The maximum time of the calendar display range.
+     * @type {`string | number`} A value that can be passed to the Date constructor.
+     */
+    'max-time'?: string | number;
+};
+export interface Emits extends BaseEmits {
     'select-time': Date;
     'open-change': boolean;
 }
 export type EventMap = Emit2EventMap<Emits>;
+/**
+ * 日期时间选择器（单个时间点）
+ * 包括日历和时分秒毫秒选择。
+ *
+ * 存在一个 timeFormatter 方法，用于格式化时分秒毫秒显示时间。
+ */
 export declare class Ele extends UiBase<Attrs, Emits> {
     static readonly tagName: "dt-date-time-selector";
     static get observedAttributes(): string[];
+    private _getTimeAttr;
+    private _setTimeAttr;
+    private _getMaxMinTime;
     get currentTime(): number | string | Date;
     set currentTime(val: number | string | Date);
     get showingTime(): number | string | Date;
     set showingTime(val: number | string | Date);
+    get minTime(): number | string | Date;
+    set minTime(val: number | string | Date);
+    get maxTime(): number | string | Date;
+    set maxTime(val: number | string | Date);
     get weekStartAt(): Weeks;
     set weekStartAt(val: Weeks);
-    get minGranularity(): "day" | "hour" | "minute" | "second" | "millisecond";
-    set minGranularity(val: 'day' | 'hour' | 'minute' | 'second' | 'millisecond');
+    get minGranularity(): NonNullable<Attrs["min-granularity"]>;
+    set minGranularity(val: NonNullable<Attrs['min-granularity']>);
     protected _style: string;
     protected _template: string;
     private get _navEle();
     private get _calendar();
     private get _timeSelector();
-    private get _timePopover();
+    private get _popoverEle();
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected _onAttrChanged(name: string, oldValue: string, newValue: string): void;
+    protected _onAttrChanged(name: string, oldValue: string | null, newValue: string | null): void;
     private _render;
     private _onCalendarSelect;
     private _onNavChange;
-    private _onTimePopoverOpenChange;
     private _onNavOpenToggle;
-    private _onTimeSelectorDoneClick;
-    timeFormatter: (time: Date, minGranularity: "day" | "hour" | "minute" | "second" | "millisecond") => string;
+    private _onTimeSelectorChange;
+    get timeFormatter(): (time: Date, minGranularity: TimeGranularity) => string;
+    set timeFormatter(fn: (time: Date, minGranularity: TimeGranularity) => string);
 }

package/dist/components/date-time-selector/index.html.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string;
+export default _default;

package/dist/components/date-time-selector/index.html.mjs

@@ -0,0 +1,14 @@
+var __freeze = Object.freeze;
+var __defProp = Object.defineProperty;
+var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
+var _a;
+import { html } from "../../utils.mjs";
+import { Ele as PopoverEle } from "../popover/index.mjs";
+PopoverEle.define();
+import { Ele as YyyyMmNavEle } from "../yyyymm-nav/index.mjs";
+YyyyMmNavEle.define();
+import { Ele as CalendarBaseEle } from "../calendar/index.mjs";
+CalendarBaseEle.define();
+import { Ele as HhMmSsMsSelector } from "../hhmmss-ms-list-grp/selector.mjs";
+HhMmSsMsSelector.define();
+export default html(_a || (_a = __template(['\n<dt-popover part="popover">\n    <slot slot="trigger" name="trigger"><button>select date and time</button></slot>\n    <div slot="pop" class="wrapper" part="pop">\n        <dt-yyyymm-nav\n            show-ctrl-btn-month-add\n            show-ctrl-btn-month-sub\n        ></dt-yyyymm-nav>\n        <dt-calendar-base></dt-calendar-base>\n        <dt-hhmmss-ms-selector></dt-hhmmss-ms-selector>\n    </div>\n</dt-popover>\n'])));

package/dist/components/date-time-selector/index.mjs

@@ -1,56 +1,50 @@
-var __freeze = Object.freeze;
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", { value: __freeze(raw || cooked.slice()) }));
-var _a;
-import { closestByEvent, debounce, html } from "../../utils.mjs";
+import { closestByEvent, debounce } from "../../utils.mjs";
+import {
+  weekKey
+} from "../calendar/index.mjs";
+import {
+  granularityList as timeGranularityList
+} from "../hhmmss-ms-list-grp/selector.mjs";
+import {
+  clearupPopEleAttrSync2Parent,
+  parentPopAttrSync2PopEle,
+  popEleAttrSync2Parent,
+  popoverAttrKeys
+} from "../popover/attr-sync-helper.mjs";
 import {
   UiBase
 } from "../web-component-base/index.mjs";
 import {
   Ele as YyyyMmNavEle
 } from "../yyyymm-nav/index.mjs";
+import html from "./index.html.mjs";
 import { styleStr } from "./styleStr.mjs";
-YyyyMmNavEle.define();
-import {
-  Ele as CalendarBaseEle,
-  weekKey
-} from "../calendar/index.mjs";
-CalendarBaseEle.define();
-import { Ele as HhMmSsMsListGrpEle } from "../hhmmss-ms-list-grp/index.mjs";
-HhMmSsMsListGrpEle.define();
-import { Ele as PopoverEle } from "../popover/index.mjs";
-PopoverEle.define();
-const granularityList = [
-  "day",
-  "hour",
-  "minute",
-  "second",
-  "millisecond"
-];
+export const granularityList = ["day", ...timeGranularityList];
 export class Ele extends UiBase {
   constructor() {
     super();
     __publicField(this, "_style", styleStr);
-    __publicField(this, "_template", html(_a || (_a = __template(['\n<dt-popover>\n    <slot slot="trigger" name="trigger"><button>select date and time</button></slot>\n    <div slot="pop" class="wrapper menu">\n        <dt-yyyymm-nav\n            show-ctrl-btn-month-add\n            show-ctrl-btn-month-sub\n        ></dt-yyyymm-nav>\n        <dt-calendar-base></dt-calendar-base>\n        <dt-popover id="time-popover">\n            <div slot="trigger" class="time-echo-wrapper">\n                <i class="time-icon"></i>\n                <span class="time-echo">hh:mm:ss.sss</span>\n            </div>\n            <div slot="pop" class="time-selector">\n                <h3 class="title">Select Time</h3>\n                <dt-hhmmss-ms-list-grp></dt-hhmmss-ms-list-grp>\n                <button id="time-selector-done-btn">Done</button>\n            </div>\n        </dt-popover>\n    </div>\n</dt-popover>\n']))));
+    __publicField(this, "_template", html);
     __publicField(this, "_render", debounce(() => {
       if (!this.isConnected) return;
       const currentTime = this.currentTime;
-      this._calendar.weekStartAt = this.weekStartAt;
-      const tz = (/* @__PURE__ */ new Date()).getTimezoneOffset() * 60 * 1e3;
-      this._navEle.millisecond = this._calendar.timeStart = this._calendar.timeEnd = +currentTime;
-      this._calendar.showingTime = this.showingTime;
-      const selectorWrapper = this.shadowRoot.querySelector(".time-selector");
+      const { _calendar, _timeSelector } = this;
+      _calendar.weekStartAt = this.weekStartAt;
+      this._navEle.millisecond = _calendar.timeStart = _calendar.timeEnd = +currentTime;
+      _calendar.showingTime = this.showingTime;
+      const { min, max } = this._getMaxMinTime();
+      _calendar.minTime = min;
+      _calendar.maxTime = max;
       if (this.minGranularity === "day") {
-        this._timeSelector.millisecond = 0;
-        selectorWrapper.style.display = "none";
+        _timeSelector.style.display = "none";
         return;
       }
-      selectorWrapper.style.display = "";
-      this._timeSelector.minGranularity = this.minGranularity;
-      this._timeSelector.millisecond = (+currentTime - tz) % (24 * 60 * 60 * 1e3);
-      this.shadowRoot.querySelector(".wrapper .time-echo").textContent = this.timeFormatter(currentTime, this.minGranularity);
+      _timeSelector.style.display = "";
+      _timeSelector.minGranularity = this.minGranularity;
+      _timeSelector.currentTime = currentTime;
     }, 0));
     __publicField(this, "_onCalendarSelect", (e) => {
       e.stopPropagation();
@@ -63,40 +57,14 @@ export class Ele extends UiBase {
       const { newTime } = e.detail;
       this._calendar.showingTime = +newTime;
     });
-    __publicField(this, "_onTimePopoverOpenChange", (e) => {
-      var _a2;
-      if (!(e.target instanceof PopoverEle)) return;
-      e.stopPropagation();
-      if (!e.detail) return this._render();
-      (_a2 = e.target.querySelector("dt-hhmmss-ms-list-grp")) == null ? void 0 : _a2.scrollToCurrentItem();
-    });
     __publicField(this, "_onNavOpenToggle", (e) => {
-      var _a2;
+      var _a;
       if (!(e.target instanceof YyyyMmNavEle)) return;
       e.stopPropagation();
-      (_a2 = e.target.nextElementSibling) == null ? void 0 : _a2.classList.toggle("hide", e.detail);
+      (_a = e.target.nextElementSibling) == null ? void 0 : _a.classList.toggle("hide", e.detail);
     });
-    __publicField(this, "_onTimeSelectorDoneClick", (e) => {
-      const btn = closestByEvent(e, "#time-selector-done-btn");
-      if (!btn) return;
-      const calcTime = (time, ms) => {
-        time.setHours(0, 0, 0, 0);
-        time.setMilliseconds(ms);
-        return time;
-      };
-      this.currentTime = calcTime(
-        this.currentTime,
-        this._timeSelector.millisecond
-      );
-      this._timePopover.open = false;
-    });
-    __publicField(this, "timeFormatter", (time, minGranularity) => {
-      const t = new Date(+time - (/* @__PURE__ */ new Date()).getTimezoneOffset() * 60 * 1e3).toISOString().slice(11, 23);
-      if (minGranularity === "day") return "";
-      if (minGranularity === "hour") return t.slice(0, 2);
-      if (minGranularity === "minute") return t.slice(0, 5);
-      if (minGranularity === "second") return t.slice(0, 8);
-      return t;
+    __publicField(this, "_onTimeSelectorChange", (e) => {
+      this.currentTime = e.detail;
     });
     this._applyTemplate();
   }
@@ -106,26 +74,68 @@ export class Ele extends UiBase {
       "week-start-at",
       "current-time",
       "showing-time",
-      "min-granularity"
+      "min-time",
+      "max-time",
+      "min-granularity",
+      ...popoverAttrKeys
     ];
   }
-  get currentTime() {
-    const v = this._getAttr("current-time", "" + Date.now());
+  _getTimeAttr(name, defaultValue) {
+    const v = this._getAttr(name, defaultValue);
     return new Date(Number.isNaN(+v) ? v : +v);
   }
+  _setTimeAttr(name, value) {
+    const v = new Date(value);
+    if (Number.isNaN(+v)) return;
+    this.setAttribute(name, +v + "");
+  }
+  _getMaxMinTime({
+    min = +this._getTimeAttr("min-time", "NaN"),
+    max = +this._getTimeAttr("max-time", "NaN")
+  } = {}) {
+    if (Number.isNaN(min)) min = Number.NEGATIVE_INFINITY;
+    if (Number.isNaN(max)) max = Number.POSITIVE_INFINITY;
+    if (min > max) [min, max] = [max, min];
+    return { min, max };
+  }
+  get currentTime() {
+    const { min, max } = this._getMaxMinTime();
+    const currTime = this._getTimeAttr("current-time", "" + Date.now());
+    if (+currTime < min) return new Date(min);
+    if (+currTime > max) return new Date(max);
+    return currTime;
+  }
   set currentTime(val) {
     const v = new Date(val);
     if (Number.isNaN(+v)) return;
-    this.setAttribute("current-time", +v + "");
+    const { min, max } = this._getMaxMinTime();
+    this._setTimeAttr("current-time", Math.min(max, Math.max(min, +v)));
   }
   get showingTime() {
-    const v = this._getAttr("showing-time", "" + this.currentTime);
-    return new Date(Number.isNaN(+v) ? v : +v);
+    return this._getTimeAttr("showing-time", "" + +this.currentTime);
   }
   set showingTime(val) {
-    const v = new Date(val);
-    if (Number.isNaN(+v)) return;
-    this.setAttribute("showing-time", +v + "");
+    this._setTimeAttr("showing-time", val);
+  }
+  get minTime() {
+    return this._getMaxMinTime().min;
+  }
+  set minTime(val) {
+    const { min, max } = this._getMaxMinTime({
+      min: +new Date(Number.isNaN(+val) ? val : +val)
+    });
+    this._setTimeAttr("min-time", min);
+    this._setTimeAttr("max-time", max);
+  }
+  get maxTime() {
+    return this._getMaxMinTime().max;
+  }
+  set maxTime(val) {
+    const { min, max } = this._getMaxMinTime({
+      max: +new Date(Number.isNaN(+val) ? val : +val)
+    });
+    this._setTimeAttr("min-time", min);
+    this._setTimeAttr("max-time", max);
   }
   get weekStartAt() {
     return this._getAttr("week-start-at", "sun");
@@ -142,71 +152,77 @@ export class Ele extends UiBase {
     this.setAttribute("min-granularity", val);
   }
   get _navEle() {
-    var _a2;
-    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("dt-yyyymm-nav");
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("dt-yyyymm-nav");
   }
   get _calendar() {
-    var _a2;
-    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
       "dt-calendar-base"
     );
   }
   get _timeSelector() {
-    var _a2;
-    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector(
-      "dt-hhmmss-ms-list-grp"
+    var _a;
+    return (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+      "dt-hhmmss-ms-selector"
     );
   }
-  get _timePopover() {
-    var _a2;
-    return (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelector("#time-popover");
+  get _popoverEle() {
+    return this.shadowRoot.querySelector("dt-popover");
   }
   connectedCallback() {
-    var _a2;
     if (!super.connectedCallback()) return;
     this._calendar.formatter = (i) => String(i).padStart(2, "0");
     this._render();
+    popEleAttrSync2Parent(this, this._popoverEle);
     this._calendar.addEventListener("select-time", this._onCalendarSelect);
     this._navEle.addEventListener("change", this._onNavChange);
-    this._timePopover.addEventListener(
-      "open-change",
-      this._onTimePopoverOpenChange
-    );
     this._navEle.addEventListener(
       "popover-open-change",
       this._onNavOpenToggle
     );
-    (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelectorAll("#time-selector-done-btn").forEach((btn) => {
-      btn.addEventListener("click", this._onTimeSelectorDoneClick);
-    });
+    this._timeSelector.addEventListener(
+      "select-time",
+      this._onTimeSelectorChange
+    );
+    this._timeSelector.addEventListener("open-change", this._stopEvent);
+    this.dispatchEvent("select-time", this.currentTime);
   }
   disconnectedCallback() {
-    var _a2;
     if (!super.disconnectedCallback()) return;
+    clearupPopEleAttrSync2Parent(this);
     this._calendar.removeEventListener(
       "select-time",
       this._onCalendarSelect
     );
     this._navEle.removeEventListener("change", this._onNavChange);
-    this._timePopover.removeEventListener(
-      "open-change",
-      this._onTimePopoverOpenChange
-    );
     this._navEle.removeEventListener(
       "popover-open-change",
       this._onNavOpenToggle
     );
-    (_a2 = this.shadowRoot) == null ? void 0 : _a2.querySelectorAll("#time-selector-done-btn").forEach((btn) => {
-      btn.removeEventListener("click", this._onTimeSelectorDoneClick);
-    });
+    this._timeSelector.removeEventListener(
+      "select-time",
+      this._onTimeSelectorChange
+    );
+    this._timeSelector.removeEventListener("open-change", this._stopEvent);
   }
   _onAttrChanged(name, oldValue, newValue) {
     super._onAttrChanged(name, oldValue, newValue);
+    if (parentPopAttrSync2PopEle(name, oldValue, newValue, this._popoverEle)) {
+      return;
+    }
     this._render();
     if (name === "current-time") {
       this.dispatchEvent("select-time", this.currentTime);
     }
   }
+  get timeFormatter() {
+    return this._timeSelector.timeFormatter;
+  }
+  set timeFormatter(fn) {
+    if (typeof fn !== "function") return;
+    this._timeSelector.timeFormatter = fn;
+  }
 }
 __publicField(Ele, "tagName", "dt-date-time-selector");
 Ele.define();