@mcp-b/web-components 0.2.0

package/dist/date-DtaTBM71.d.ts

@@ -0,0 +1,142 @@
+import { CSSResultGroup } from "lit";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+
+//#region src/components/date/date.d.ts
+/**
+ * <sigvelo-date>
+ *
+ * @summary Outputs a date or time in the specified format.
+ * @tag sigvelo-date
+ * @documentation https://design-system.sigvelo.com/docs/components/date
+ * @status stable
+ * @since 1.0
+ *
+ * @example Default
+ * ```html
+ * <sigvelo-date></sigvelo-date>
+ * ```
+ *
+ * **Note:** If you pass a string to the `date` attribute, always use the [ISO 8601 format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). Otherwise, ambiguous dates such as 01/02/2000 can be parsed as January 2 or February 1 depending on the client's locale.
+ *
+ * @example Simple formatting
+ * This component supports most options from `Intl.DateTimeFormat()` in a declarative syntax. It's very flexible, but it can be a bit verbose to output a simple date or time with individual properties. Fortunately, there are two shortcuts you can use to easily output dates and times in desirable formats.
+ *
+ * The `date-style` and `time-style` attributes both accept `full`, `long`, `medium`, and `short` as options. These attributes can be used together, but they cannot be combined with other date-time formatting options.
+ *
+ * ```html
+ * <h4>Date style</h4>
+ * <sigvelo-date date-style="short" date="2024-01-01 12:00:00"></sigvelo-date><br>
+ * <sigvelo-date date-style="medium" date="2024-01-01 12:00:00"></sigvelo-date><br>
+ * <sigvelo-date date-style="long" date="2024-01-01 12:00:00"></sigvelo-date><br>
+ * <sigvelo-date date-style="full" date="2024-01-01 12:00:00"></sigvelo-date>
+ *
+ * <h4>Time style</h4>
+ * <sigvelo-date time-style="short" date="2024-01-01 12:00:00"></sigvelo-date><br>
+ * <sigvelo-date time-style="medium" date="2024-01-01 12:00:00"></sigvelo-date><br>
+ * <sigvelo-date time-style="long" date="2024-01-01 12:00:00"></sigvelo-date><br>
+ * <sigvelo-date time-style="full" date="2024-01-01 12:00:00"></sigvelo-date>
+ *
+ * <h4>Date + time style</h4>
+ * <sigvelo-date date-style="short" time-style="short" date="2024-01-01 12:00:00"></sigvelo-date><br>
+ * <sigvelo-date date-style="medium" time-style="medium" date="2024-01-01 12:00:00"></sigvelo-date><br>
+ * <sigvelo-date date-style="long" time-style="long" date="2024-01-01 12:00:00"></sigvelo-date><br>
+ * <sigvelo-date date-style="full" time-style="full" date="2024-01-01 12:00:00"></sigvelo-date>
+ * ```
+ *
+ * @example Advanced formatting
+ * More advanced formatting can be achieved through other formatting properties. The presence of an option tells the component to output a corresponding value.
+ *
+ * To show the current time with hours and minutes using a 24 hour clock, use the `hour`, `minute`, and `hour-format` attributes.
+ *
+ * ```html
+ * <sigvelo-date hour="numeric" minute="numeric" hour-format="24"></sigvelo-date>
+ * ```
+ *
+ * Similarly, to show a date with just the month and day, use the `month` and `day` attributes.
+ *
+ * ```html
+ * <sigvelo-date month="long" day="numeric"></sigvelo-date>
+ * ```
+ *
+ * You can combine options to format a more complex date. The order of the attributes doesn't matter. The output will be rendered in a logical order.
+ *
+ * ```html
+ * <sigvelo-date weekday="long" month="short" day="numeric" year="numeric"></sigvelo-date>
+ * ```
+ *
+ * **Note:** Refer to the [`Intl.DateTimeFormat()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) documentation for more information about what options do and the values they accept.
+ *
+ * @example Localization
+ * Set the `lang` attribute on the element to change the language.
+ *
+ * ```html
+ * <sigvelo-date lang="es" date="2024-01-01 12:00:00"></sigvelo-date><br>
+ * <sigvelo-date lang="de" date="2024-01-01 12:00:00"></sigvelo-date><br>
+ * <sigvelo-date lang="ru" date="2024-01-01 12:00:00"></sigvelo-date>
+ * ```
+ *
+ * **Note:** This component also updates based on the page's language, which can be set using `<html lang="…">`.
+ */
+declare class SigveloDate extends SigveloElement {
+  static styles: CSSResultGroup;
+  private localize;
+  /**
+   * The date to format. If an attribute is passed, the date should be an [ISO 8601 string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString).
+   * If set as a property, a `Date` object can be used instead. If unset, the current date will be assumed.
+   */
+  date: Date | string;
+  /**
+   * A shortcut property for formatting the date. This can be used with `time-style`, but not with other formatting
+   * properties such as `weekday`, `hour`, `month`, etc.
+   */
+  dateStyle: "full" | "long" | "medium" | "short";
+  /**
+   * A shortcut property for formatting the time. This can be used with `date-style`, but not with other formatting
+   * properties such as `weekday`, `hour`, `month`, etc.
+   */
+  timeStyle: "full" | "long" | "medium" | "short";
+  /**
+   * Whether to use 12-hour time (as opposed to 24-hour time). If `auto`, the default value is determined by the user's
+   * locale.
+   */
+  hourFormat: "auto" | "12" | "24";
+  /** The hour cycle to use. */
+  hourCycle: "h11" | "h12" | "h23" | "h24";
+  /** The time zone to use. The default is the user's default time zone. */
+  timeZone: string;
+  /** The representation of the weekday. */
+  weekday: "long" | "short" | "narrow";
+  /** The representation of the era. */
+  era: "long" | "short" | "narrow";
+  /** The representation of the year. */
+  year: "numeric" | "2-digit";
+  /** The representation of the month. */
+  month: "numeric" | "2-digit" | "long" | "short" | "narrow";
+  /** The representation of the day. */
+  day: "numeric" | "2-digit";
+  /**
+   * The formatting style used for day periods like "in the morning", "am", "noon", "n" etc. This option only has an
+   * effect if a 12-hour clock is used.
+   */
+  dayPeriod: "long" | "short" | "narrow";
+  /** The representation of the hour. */
+  hour: "numeric" | "2-digit";
+  /** The representation of the minute. */
+  minute: "numeric" | "2-digit";
+  /** The representation of the second. */
+  second: "numeric" | "2-digit";
+  /** The number of digits used to represent fractions of a second (any additional digits are truncated). */
+  fractionalSecondDigits: 1 | 2 | 3;
+  /** The localized representation of the time zone name. */
+  timeZoneName: "long" | "short" | "shortOffset" | "longOffset" | "shortGeneric" | "longGeneric";
+  /** The format matching algorithm to use. */
+  formatMatcher: "basic" | "best-fit";
+  render(): import("lit-html").TemplateResult<1> | "";
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "sigvelo-date": SigveloDate;
+  }
+}
+//#endregion
+export { SigveloDate as t };

package/dist/decorate-DcF3lt7P.js

@@ -0,0 +1,9 @@
+//#region \0@oxc-project+runtime@0.138.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+export { __decorate as t };