import { CSSResultGroup } from "lit"; import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element"; //#region src/components/date/date.d.ts /** * * * @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 * * ``` * * **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 *

Date style

*
*
*
* * *

Time style

*
*
*
* * *

Date + time style

*
*
*
* * ``` * * @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 * * ``` * * Similarly, to show a date with just the month and day, use the `month` and `day` attributes. * * ```html * * ``` * * 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 * * ``` * * **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 *
*
* * ``` * * **Note:** This component also updates based on the page's language, which can be set using ``. */ 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 };