@six-group/ui-library 4.3.3 → 5.0.0-rc.1

package/dist/collection/components/six-date/iso-date.js

@@ -0,0 +1,92 @@
+import { format, formatISO, isValid, parse, parseISO } from "date-fns";
+/**
+ * Validates a date string against a given format and returns an IsoDate if valid.
+ *
+ * Example format patterns for year, month, and day:
+ * - Year: "yyyy" (e.g., "2021")
+ * - Month: "MM" (e.g., "01" for January, "12" for December)
+ * - Day: "dd" (e.g., "08" for the 8th day of the month)
+ *
+ * Common format examples:
+ * - "yyyy-MM-dd" (e.g., "2021-01-08")
+ * - "dd.MM.yyyy" (e.g., "08.01.2021")
+ * - "MM/dd/yyyy" (e.g., "01/08/2021")
+ *
+ * @param dateString - The date string to validate.
+ * @param dateFormat - The expected format of the date string (e.g., "yyyy-MM-dd").
+ * @returns An IsoDate if the date string is valid, otherwise undefined.
+ */
+export function fromFormattedString(dateString, dateFormat) {
+    const date = parse(dateString, dateFormat, new Date());
+    if (isValid(date)) {
+        return fromDate(date);
+    }
+    return undefined;
+}
+/**
+ * Formats a given ISO date string into a specified format.
+ *
+ * Example format patterns for year, month, and day:
+ * - Year: "yyyy" (e.g., "2021")
+ * - Month: "MM" (e.g., "01" for January, "12" for December)
+ * - Day: "dd" (e.g., "08" for the 8th day of the month)
+ *
+ * Common format examples:
+ * - "yyyy-MM-dd" (e.g., "2021-01-08")
+ * - "dd.MM.yyyy" (e.g., "08.01.2021")
+ * - "MM/dd/yyyy" (e.g., "01/08/2021")
+ *
+ * @param {IsoDate} isoDate - The ISO date string to be formatted.
+ * @param {string} dateFormat - The desired date format string.
+ * @return {string} A string representing the formatted date.
+ */
+export function formatDate(isoDate, dateFormat) {
+    return format(parseISO(isoDate), dateFormat);
+}
+export function fromDate(date) {
+    return formatISO(date, { representation: 'date' });
+}
+export function today() {
+    return fromDate(new Date());
+}
+export function isValidIsoDate(isoDate) {
+    return isValid(parseISO(isoDate));
+}
+export function getMonth(isoDate) {
+    return toPointerDate(isoDate).month;
+}
+export function getYear(isoDate) {
+    return toPointerDate(isoDate).year;
+}
+export function toPointerDate(isoDate) {
+    if (!isValidIsoDate(isoDate)) {
+        throw new Error(`Invalid ISO date: ${isoDate}`);
+    }
+    return {
+        year: parseInt(isoDate.slice(0, 4), 10),
+        month: parseInt(isoDate.slice(5, 7), 10),
+        day: parseInt(isoDate.slice(8), 10),
+    };
+}
+export function todayAsPointerDate() {
+    const today = new Date();
+    return {
+        year: today.getFullYear(),
+        month: today.getMonth() + 1,
+        day: today.getDate(),
+    };
+}
+export function cleanupValue(value) {
+    if (value === '') {
+        return { value, pointerDate: todayAsPointerDate() };
+    }
+    if (typeof value !== 'string' || !isValidIsoDate(value)) {
+        return {
+            value: '',
+            pointerDate: todayAsPointerDate(),
+            warning: `The specified value '${value}' does not conform to the required format, "yyyy-MM-dd".`,
+        };
+    }
+    return { value, pointerDate: toPointerDate(value) };
+}
+//# sourceMappingURL=iso-date.js.map

package/dist/collection/components/six-date/iso-date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iso-date.js","sourceRoot":"","sources":["../../../src/components/six-date/iso-date.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAavE;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,mBAAmB,CAAC,UAAkB,EAAE,UAAkB;IACxE,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,EAAE,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC;IACvD,IAAI,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QAClB,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;IACD,OAAO,SAAS,CAAC;AACnB,CAAC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,UAAU,CAAC,OAAgB,EAAE,UAAkB;IAC7D,OAAO,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,UAAU,CAAC,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,IAAU;IACjC,OAAO,SAAS,CAAC,IAAI,EAAE,EAAE,cAAc,EAAE,MAAM,EAAE,CAAY,CAAC;AAChE,CAAC;AAED,MAAM,UAAU,KAAK;IACnB,OAAO,QAAQ,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;AAC9B,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,OAAe;IAC5C,OAAO,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC;AACpC,CAAC;AAED,MAAM,UAAU,QAAQ,CAAC,OAAgB;IACvC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,OAAgB;IACtC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC;AACrC,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,OAAgB;IAC5C,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC;QAC7B,MAAM,IAAI,KAAK,CAAC,qBAAqB,OAAO,EAAE,CAAC,CAAC;IAClD,CAAC;IAED,OAAO;QACL,IAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;QACvC,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;QACxC,GAAG,EAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;KACpC,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,kBAAkB;IAChC,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;IACzB,OAAO;QACL,IAAI,EAAE,KAAK,CAAC,WAAW,EAAE;QACzB,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC;QAC3B,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE;KACrB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,KAAc;IACzC,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;QACjB,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,EAAE,CAAC;IACtD,CAAC;IAED,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC;QACxD,OAAO;YACL,KAAK,EAAE,EAAE;YACT,WAAW,EAAE,kBAAkB,EAAE;YACjC,OAAO,EAAE,wBAAwB,KAAK,0DAA0D;SACjG,CAAC;IACJ,CAAC;IAED,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,aAAa,CAAC,KAAK,CAAC,EAAE,CAAC;AACtD,CAAC","sourcesContent":["import { format, formatISO, isValid, parse, parseISO } from 'date-fns';\n\n/**\n * Represent an iso date string like `2021-01-08`.\n */\nexport type IsoDate = string;\n\nexport interface PointerDate {\n  year: number;\n  month: number;\n  day: number;\n}\n\n/**\n * Validates a date string against a given format and returns an IsoDate if valid.\n *\n * Example format patterns for year, month, and day:\n * - Year: \"yyyy\" (e.g., \"2021\")\n * - Month: \"MM\" (e.g., \"01\" for January, \"12\" for December)\n * - Day: \"dd\" (e.g., \"08\" for the 8th day of the month)\n *\n * Common format examples:\n * - \"yyyy-MM-dd\" (e.g., \"2021-01-08\")\n * - \"dd.MM.yyyy\" (e.g., \"08.01.2021\")\n * - \"MM/dd/yyyy\" (e.g., \"01/08/2021\")\n *\n * @param dateString - The date string to validate.\n * @param dateFormat - The expected format of the date string (e.g., \"yyyy-MM-dd\").\n * @returns An IsoDate if the date string is valid, otherwise undefined.\n */\nexport function fromFormattedString(dateString: string, dateFormat: string): IsoDate | undefined {\n  const date = parse(dateString, dateFormat, new Date());\n  if (isValid(date)) {\n    return fromDate(date);\n  }\n  return undefined;\n}\n\n/**\n * Formats a given ISO date string into a specified format.\n *\n * Example format patterns for year, month, and day:\n * - Year: \"yyyy\" (e.g., \"2021\")\n * - Month: \"MM\" (e.g., \"01\" for January, \"12\" for December)\n * - Day: \"dd\" (e.g., \"08\" for the 8th day of the month)\n *\n * Common format examples:\n * - \"yyyy-MM-dd\" (e.g., \"2021-01-08\")\n * - \"dd.MM.yyyy\" (e.g., \"08.01.2021\")\n * - \"MM/dd/yyyy\" (e.g., \"01/08/2021\")\n *\n * @param {IsoDate} isoDate - The ISO date string to be formatted.\n * @param {string} dateFormat - The desired date format string.\n * @return {string} A string representing the formatted date.\n */\nexport function formatDate(isoDate: IsoDate, dateFormat: string): string {\n  return format(parseISO(isoDate), dateFormat);\n}\n\nexport function fromDate(date: Date): IsoDate {\n  return formatISO(date, { representation: 'date' }) as IsoDate;\n}\n\nexport function today(): IsoDate {\n  return fromDate(new Date());\n}\n\nexport function isValidIsoDate(isoDate: string): isoDate is IsoDate {\n  return isValid(parseISO(isoDate));\n}\n\nexport function getMonth(isoDate: IsoDate): number {\n  return toPointerDate(isoDate).month;\n}\n\nexport function getYear(isoDate: IsoDate): number {\n  return toPointerDate(isoDate).year;\n}\n\nexport function toPointerDate(isoDate: IsoDate): PointerDate {\n  if (!isValidIsoDate(isoDate)) {\n    throw new Error(`Invalid ISO date: ${isoDate}`);\n  }\n\n  return {\n    year: parseInt(isoDate.slice(0, 4), 10),\n    month: parseInt(isoDate.slice(5, 7), 10),\n    day: parseInt(isoDate.slice(8), 10),\n  };\n}\n\nexport function todayAsPointerDate(): PointerDate {\n  const today = new Date();\n  return {\n    year: today.getFullYear(),\n    month: today.getMonth() + 1,\n    day: today.getDate(),\n  };\n}\n\nexport function cleanupValue(value: unknown): { value: IsoDate | ''; pointerDate: PointerDate; warning?: string } {\n  if (value === '') {\n    return { value, pointerDate: todayAsPointerDate() };\n  }\n\n  if (typeof value !== 'string' || !isValidIsoDate(value)) {\n    return {\n      value: '',\n      pointerDate: todayAsPointerDate(),\n      warning: `The specified value '${value}' does not conform to the required format, \"yyyy-MM-dd\".`,\n    };\n  }\n\n  return { value, pointerDate: toPointerDate(value) };\n}\n"]}

package/dist/collection/components/six-date/six-date.css

@@ -0,0 +1,168 @@
+:host {
+  position: relative;
+  box-sizing: border-box;
+}
+:host *, :host *:before, :host *:after {
+  box-sizing: border-box;
+}
+
+/* Hides content visually while still making it available to screen readers */
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+:host {
+  display: block;
+  font-family: var(--six-font-family);
+}
+
+.container {
+  position: relative;
+}
+
+/**
+ * PANEL
+ */
+.positioner {
+  position: fixed;
+  z-index: var(--six-z-index-date);
+  background-color: transparent;
+}
+
+.panel {
+  width: 25rem;
+  pointer-events: none;
+  padding: var(--six-spacing-small);
+  padding-bottom: var(--six-spacing-x-large);
+  border: 1px solid var(--six-color-web-rock-300);
+  box-shadow: var(--six-shadow-small);
+  background-color: var(--six-color-white);
+  opacity: 0;
+  transform: scale(0.9);
+  transition: transform var(--six-transition-fast), opacity var(--six-transition-fast);
+}
+
+.popover-visible .panel {
+  opacity: 1;
+  transform: scale(1);
+  pointer-events: all;
+}
+
+/**
+ * PANEL HEADER
+ */
+header {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--six-color-web-rock-400);
+  padding: var(--six-spacing-x-small);
+  margin-bottom: var(--six-spacing-medium);
+  user-select: none;
+}
+header six-icon-button.previous {
+  margin-right: auto;
+  margin-left: calc(-1 * var(--six-spacing-x-small));
+}
+header six-icon-button.next {
+  margin-left: auto;
+  margin-right: calc(-1 * var(--six-spacing-x-small));
+}
+header .selector {
+  display: flex;
+  cursor: pointer;
+  padding: var(--six-spacing-x-small);
+}
+header .selector:hover {
+  background-color: var(--six-color-web-rock-100);
+}
+
+/**
+ * SELECTION CELL
+ */
+.cell {
+  cursor: pointer;
+  text-align: center;
+  padding: var(--six-spacing-x-small);
+}
+.cell:hover {
+  background-color: var(--six-color-web-rock-200);
+}
+
+.cell--header {
+  padding: var(--six-spacing-x-small);
+  text-align: center;
+  font-weight: var(--six-font-weight-bold);
+}
+
+.cell--today .label {
+  padding: var(--six-spacing-xxx-small);
+  border-bottom: 2px solid var(--six-color-web-rock-900);
+}
+
+.cell--selected.cell--today .label {
+  border-bottom: 2px solid var(--six-color-white);
+}
+
+.cell--selected {
+  background-color: var(--six-color-red);
+  color: var(--six-color-white);
+}
+.cell--selected:hover {
+  background-color: var(--six-color-danger-900);
+}
+
+.cell--disabled {
+  cursor: not-allowed;
+  color: var(--six-color-web-rock-400);
+}
+.cell--disabled:hover {
+  background: none;
+}
+
+.cell--selected.cell--disabled {
+  color: var(--six-color-web-rock-500);
+}
+.cell--selected.cell--disabled:hover {
+  background-color: var(--six-color-red);
+}
+
+.cell--outdated {
+  color: var(--six-color-web-rock-400);
+}
+
+.cell--today.cell--disabled .label {
+  border-bottom: 2px solid var(--six-color-web-rock-400);
+}
+
+/**
+ *  DAY SELECTION
+ */
+.day-selection {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--six-spacing-xx-small);
+}
+
+/**
+ *  MONTH SELECTION
+ */
+.month-selection {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--six-spacing-xx-small);
+}
+
+/**
+ *  YEAR SELECTION
+ */
+.year-selection {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: var(--six-spacing-xx-small);
+}