@api-client/ui 0.5.6 → 0.5.8
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/.cursor/rules/html-and-css-best-practices.mdc +63 -0
- package/.cursor/rules/lit-best-practices.mdc +78 -0
- package/.github/instructions/html-and-css-best-practices.instructions.md +70 -0
- package/.github/instructions/lit-best-practices.instructions.md +86 -0
- package/build/src/elements/currency/currency-picker.d.ts +10 -0
- package/build/src/elements/currency/currency-picker.d.ts.map +1 -0
- package/build/src/elements/currency/currency-picker.js +27 -0
- package/build/src/elements/currency/currency-picker.js.map +1 -0
- package/build/src/elements/currency/internals/Picker.d.ts +311 -0
- package/build/src/elements/currency/internals/Picker.d.ts.map +1 -0
- package/build/src/elements/currency/internals/Picker.js +857 -0
- package/build/src/elements/currency/internals/Picker.js.map +1 -0
- package/build/src/elements/currency/internals/Picker.styles.d.ts +3 -0
- package/build/src/elements/currency/internals/Picker.styles.d.ts.map +1 -0
- package/build/src/elements/currency/internals/Picker.styles.js +58 -0
- package/build/src/elements/currency/internals/Picker.styles.js.map +1 -0
- package/build/src/elements/mention-textarea/internals/MentionTextArea.d.ts +216 -0
- package/build/src/elements/mention-textarea/internals/MentionTextArea.d.ts.map +1 -0
- package/build/src/elements/mention-textarea/internals/MentionTextArea.js +1037 -0
- package/build/src/elements/mention-textarea/internals/MentionTextArea.js.map +1 -0
- package/build/src/elements/mention-textarea/internals/MentionTextArea.styles.d.ts +3 -0
- package/build/src/elements/mention-textarea/internals/MentionTextArea.styles.d.ts.map +1 -0
- package/build/src/elements/mention-textarea/internals/MentionTextArea.styles.js +274 -0
- package/build/src/elements/mention-textarea/internals/MentionTextArea.styles.js.map +1 -0
- package/build/src/elements/mention-textarea/ui-mention-textarea.d.ts +13 -0
- package/build/src/elements/mention-textarea/ui-mention-textarea.d.ts.map +1 -0
- package/build/src/elements/mention-textarea/ui-mention-textarea.js +28 -0
- package/build/src/elements/mention-textarea/ui-mention-textarea.js.map +1 -0
- package/build/src/md/button/internals/base.d.ts +1 -0
- package/build/src/md/button/internals/base.d.ts.map +1 -1
- package/build/src/md/button/internals/base.js +7 -0
- package/build/src/md/button/internals/base.js.map +1 -1
- package/build/src/md/chip/internals/Chip.styles.d.ts.map +1 -1
- package/build/src/md/chip/internals/Chip.styles.js +2 -0
- package/build/src/md/chip/internals/Chip.styles.js.map +1 -1
- package/build/src/md/date-picker/internals/DatePicker.styles.d.ts.map +1 -1
- package/build/src/md/date-picker/internals/DatePicker.styles.js +73 -0
- package/build/src/md/date-picker/internals/DatePicker.styles.js.map +1 -1
- package/build/src/md/date-picker/internals/DatePickerCalendar.d.ts +164 -51
- package/build/src/md/date-picker/internals/DatePickerCalendar.d.ts.map +1 -1
- package/build/src/md/date-picker/internals/DatePickerCalendar.js +660 -368
- package/build/src/md/date-picker/internals/DatePickerCalendar.js.map +1 -1
- package/build/src/md/date-picker/ui-date-picker-input.d.ts +65 -13
- package/build/src/md/date-picker/ui-date-picker-input.d.ts.map +1 -1
- package/build/src/md/date-picker/ui-date-picker-input.js +143 -76
- package/build/src/md/date-picker/ui-date-picker-input.js.map +1 -1
- package/build/src/md/date-picker/ui-date-picker-modal-input.d.ts +76 -17
- package/build/src/md/date-picker/ui-date-picker-modal-input.d.ts.map +1 -1
- package/build/src/md/date-picker/ui-date-picker-modal-input.js +192 -127
- package/build/src/md/date-picker/ui-date-picker-modal-input.js.map +1 -1
- package/build/src/md/date-picker/ui-date-picker-modal.d.ts +63 -15
- package/build/src/md/date-picker/ui-date-picker-modal.d.ts.map +1 -1
- package/build/src/md/date-picker/ui-date-picker-modal.js +143 -64
- package/build/src/md/date-picker/ui-date-picker-modal.js.map +1 -1
- package/demo/elements/currency/index.html +91 -0
- package/demo/elements/currency/index.ts +272 -0
- package/demo/elements/index.html +6 -0
- package/demo/elements/mention-textarea/index.html +19 -0
- package/demo/elements/mention-textarea/index.ts +205 -0
- package/demo/md/date-picker/date-picker.ts +138 -103
- package/package.json +2 -2
- package/src/elements/currency/currency-picker.ts +14 -0
- package/src/elements/currency/internals/Picker.styles.ts +58 -0
- package/src/elements/currency/internals/Picker.ts +846 -0
- package/src/elements/mention-textarea/internals/MentionTextArea.styles.ts +274 -0
- package/src/elements/mention-textarea/internals/MentionTextArea.ts +1036 -0
- package/src/elements/mention-textarea/ui-mention-textarea.ts +18 -0
- package/src/md/button/internals/base.ts +7 -0
- package/src/md/chip/internals/Chip.styles.ts +2 -0
- package/src/md/date-picker/internals/DatePicker.styles.ts +73 -0
- package/src/md/date-picker/internals/DatePickerCalendar.ts +643 -309
- package/src/md/date-picker/ui-date-picker-input.ts +110 -49
- package/src/md/date-picker/ui-date-picker-modal-input.ts +168 -99
- package/src/md/date-picker/ui-date-picker-modal.ts +136 -53
- package/test/README.md +3 -2
- package/test/elements/currency/CurrencyPicker.accessibility.test.ts +328 -0
- package/test/elements/currency/CurrencyPicker.core.test.ts +318 -0
- package/test/elements/currency/CurrencyPicker.integration.test.ts +482 -0
- package/test/elements/currency/CurrencyPicker.test.ts +486 -0
- package/test/elements/mention-textarea/MentionTextArea.basic.test.ts +63 -0
- package/test/elements/mention-textarea/MentionTextArea.test.ts +321 -0
- package/tsconfig.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, type PropertyValues, type TemplateResult } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { nanoid } from 'nanoid'\nimport { UiElement } from '../../UiElement.js'\nimport type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport type UiRipple from '../../ripple/internals/ripple.js'\nimport { findElementInShadowRoots } from '../../../lib/Dom.js'\n\nimport '../../ripple/ui-ripple.js'\nimport '@material/web/focus/md-focus-ring.js'\n\nexport type ButtonType = 'submit' | 'reset' | 'button'\nexport type MdButtonShape = 'round' | 'square'\nexport type MdButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'\n\n/**\n * A material design button with M3 Expressive features - CSS-native implementation.\n *\n * @slot icon - A slot for the icon element\n * @slot - The default slot for the label\n * @attribute {string} form - The form associated with this element when the element is outside the form.\n * @fires {ToggleEvent} toggle - Fired when the `toggle` property is true and the button is clicked,\n * changing its selection state.\n * The event's `newState` and `oldState` properties (string values: 'selected' or\n * 'unselected') detail this selection change.\n */\nexport default class BaseButton extends UiElement {\n static readonly formAssociated = true\n\n #internals = this.attachInternals()\n\n /**\n * The form associated with this element\n * @attribute\n */\n get form(): HTMLFormElement | null | string {\n return this.#internals.form\n }\n\n get validity() {\n return this.#internals.validity\n }\n\n get validationMessage() {\n return this.#internals.validationMessage\n }\n\n get willValidate() {\n return this.#internals.willValidate\n }\n\n /**\n * The name of the button, submitted as a pair with the button's value as part of the form data.\n * @attribute\n */\n @property({ type: String }) accessor name: string | undefined\n\n #value?: string\n\n get value(): string | undefined {\n return this.#value\n }\n\n /**\n * Defines the value associated with the button's name when it's submitted with the form data.\n * @attribute\n */\n @property({ type: String })\n set value(value: string | undefined) {\n if (this.#value === value) {\n return\n }\n this.#value = value\n this.#internals?.setFormValue(value || null)\n }\n\n /**\n * Whether to render the icon at the inline end of the label rather than the inline start.\n * @attribute\n */\n @property({ type: Boolean, attribute: 'trailingicon', reflect: true }) accessor trailingIcon = false\n\n /**\n * The default behavior of the button.\n * @attribute\n */\n @property({ type: String, reflect: true }) accessor type: ButtonType = 'button'\n\n /**\n * When set, the button is a toggle button.\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor toggle = false\n\n /**\n * Indicates that the button is currently selected.\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor selected = false\n\n /**\n * The shape of the button.\n * @attribute\n */\n @property({ type: String, reflect: true }) accessor shape: MdButtonShape = 'round'\n\n /**\n * The size of the button.\n * @attribute\n */\n @property({ type: String, reflect: true }) accessor size: MdButtonSize = 's'\n\n get disabled(): boolean {\n return isDisabled(this)\n }\n\n /**\n * When set, the button is in a disabled state.\n * @attribute\n */\n @property({ reflect: true, type: Boolean })\n set disabled(value: boolean) {\n const old = isDisabled(this)\n setDisabled(this, value)\n this.requestUpdate('disabled', old)\n }\n\n @query('ui-ripple') protected accessor ripple!: UiRipple | null\n\n /**\n * Turns a `<ui-button>` element into a popover control button; takes the ID\n * of the popover element to control as its value.\n * @attribute\n */\n @property({ type: String, reflect: true }) accessor popoverTarget: string | undefined\n /**\n * Specifies the action to be performed on a popover element being controlled\n * by a control <ui-button>. Possible values are:\n *\n * - `hide` - The button will hide a shown popover. If you try to hide an already hidden popover,\n * no action will be taken.\n * - `show` - The button will show a hidden popover. If you try to show an already showing popover,\n * no action will be taken.\n * - `toggle` - The button will toggle a popover between showing and hidden. If the popover is hidden,\n * it will be shown; if the popover is showing, it will be hidden. If popoverTargetAction is omitted,\n * \"toggle\" is the default action that will be performed by the control button.\n */\n @property({ type: String, reflect: true }) accessor popoverTargetAction: string | undefined\n\n constructor() {\n super()\n this.actionController.cancelKeyboardEvents = true\n this.addEventListener('keydown', this.handleKeyDown.bind(this))\n this.addEventListener('keyup', this.handleKeyUp.bind(this))\n this.addEventListener('click', this.handleClick.bind(this))\n this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))\n this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'button')\n }\n if (!this.hasAttribute('tabindex') && !this.disabled) {\n this.setAttribute('tabindex', '0')\n }\n }\n\n protected override update(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('popoverTarget')) {\n this.setupPopoverTarget()\n }\n super.update(changedProperties)\n }\n\n protected override updated(cp: PropertyValues<this>): void {\n super.updated(cp)\n\n // If the button is disabled, remove the tabindex attribute\n if (cp.has('disabled')) {\n if (this.disabled) {\n this.removeAttribute('tabindex')\n } else if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0')\n }\n }\n\n if (cp.has('toggle') || cp.has('selected')) {\n this.updatePressedState()\n }\n }\n\n protected updatePressedState(): void {\n if (this.toggle) {\n this.ariaPressed = String(this.selected)\n } else {\n this.selected = false\n this.removeAttribute('aria-pressed')\n }\n }\n\n checkValidity() {\n return this.#internals.checkValidity()\n }\n\n reportValidity() {\n return this.#internals.reportValidity()\n }\n\n protected override firstUpdated(): void {\n this.#internals?.setFormValue(this.value || null)\n }\n\n override beginPress(options: BeginPressConfig): void {\n super.beginPress(options)\n this.classList.add('pressed')\n this.ripple?.beginFocus()\n }\n\n override endPress(config: EndPressConfig): void {\n super.endPress(config)\n this.classList.remove('pressed')\n this.ripple?.endFocus()\n const { cancelled, reason } = config\n if (cancelled) {\n return\n }\n const allowedReasons = reason === 'enter' || reason === 'space'\n if (this.type === 'submit' && (!reason || allowedReasons)) {\n this.handleSubmit()\n } else if (allowedReasons) {\n this.click()\n }\n }\n\n override handleClick(e: MouseEvent): void {\n // Do not call super.handleClick() here, as it would call `endPress` again.\n if (this.disabled) {\n e.preventDefault()\n e.stopPropagation()\n return\n }\n\n if (this.toggle) {\n this.selected = !this.selected\n const e = new ToggleEvent('toggle', {\n bubbles: true,\n composed: true,\n newState: this.selected ? 'selected' : 'unselected',\n oldState: this.selected ? 'unselected' : 'selected',\n })\n this.dispatchEvent(e)\n }\n this.handlePopoverAction()\n this.endPress({ cancelled: false, actionData: { event: e } })\n }\n\n protected setupPopoverTarget(): void {\n const id = this.popoverTarget\n if (!id) {\n return\n }\n const element = findElementInShadowRoots(id, this)\n if (!element) {\n return\n }\n // A regular button first sets its value to the popover target ID,\n this.value = id\n // create an anchor association with the popover target\n if (!this.id) {\n this.id = nanoid()\n }\n const anchorName = `--anchor-${this.id}`\n this.style.setProperty('anchor-name', anchorName)\n element.style.setProperty('position-anchor', anchorName)\n this.setAttribute('aria-details', id)\n this.setAttribute('aria-controls', id)\n }\n\n /**\n * When the button has a popover target, this method toggles the popover\n * visibility by finding the element in the shadow roots and calling its\n * `togglePopover` method.\n */\n protected handlePopoverAction(): void {\n const id = this.popoverTarget\n if (!id) {\n return\n }\n const element = findElementInShadowRoots(id, this)\n if (!element) {\n return\n }\n const action = this.popoverTargetAction || 'toggle'\n if (action === 'hide') {\n element.hidePopover()\n } else if (action === 'show') {\n element.showPopover()\n } else {\n element.togglePopover()\n }\n element.focus()\n }\n\n protected handleSubmit(): void {\n const { name, value, type, disabled, form } = this\n if (!form || !type || disabled) {\n return\n }\n const typedForm = form as HTMLFormElement\n let button: HTMLButtonElement | undefined\n if (name || value) {\n button = document.createElement('button')\n if (name) {\n button.name = name\n }\n if (value) {\n button.value = value\n }\n button.type = type\n button.hidden = true\n typedForm.append(button)\n }\n try {\n typedForm.requestSubmit(button)\n } catch {\n // Ignore errors\n }\n if (button) {\n typedForm.removeChild(button)\n }\n }\n\n override handlePointerEnter(e: PointerEvent): void {\n super.handlePointerEnter(e)\n this.ripple?.beginHover(e)\n }\n\n override handlePointerLeave(e: PointerEvent): void {\n super.handlePointerLeave(e)\n this.ripple?.endHover()\n }\n\n protected override render(): TemplateResult {\n const { trailingIcon = false } = this\n const icon = this.renderIcon()\n\n return html`\n ${this.renderFocusRing()} ${this.renderRipple()} ${trailingIcon ? nothing : icon}\n <slot></slot>\n ${trailingIcon ? icon : nothing}\n `\n }\n\n protected renderIcon(): TemplateResult {\n return html`<slot name=\"icon\"></slot>`\n }\n\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring part=\"focus-ring\" class=\"focus-ring\" .control=\"${this as HTMLElement}\"></md-focus-ring>`\n }\n\n protected renderRipple(): TemplateResult {\n return html`<ui-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></ui-ripple>`\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, type PropertyValues, type TemplateResult } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { nanoid } from 'nanoid'\nimport { UiElement } from '../../UiElement.js'\nimport type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport type UiRipple from '../../ripple/internals/ripple.js'\nimport { findElementInShadowRoots } from '../../../lib/Dom.js'\n\nimport '../../ripple/ui-ripple.js'\nimport '@material/web/focus/md-focus-ring.js'\n\nexport type ButtonType = 'submit' | 'reset' | 'button'\nexport type MdButtonShape = 'round' | 'square'\nexport type MdButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'\n\n/**\n * A material design button with M3 Expressive features - CSS-native implementation.\n *\n * @slot icon - A slot for the icon element\n * @slot - The default slot for the label\n * @attribute {string} form - The form associated with this element when the element is outside the form.\n * @fires {ToggleEvent} toggle - Fired when the `toggle` property is true and the button is clicked,\n * changing its selection state.\n * The event's `newState` and `oldState` properties (string values: 'selected' or\n * 'unselected') detail this selection change.\n */\nexport default class BaseButton extends UiElement {\n static readonly formAssociated = true\n\n #internals = this.attachInternals()\n\n /**\n * The form associated with this element\n * @attribute\n */\n get form(): HTMLFormElement | null | string {\n return this.#internals.form\n }\n\n get validity() {\n return this.#internals.validity\n }\n\n get validationMessage() {\n return this.#internals.validationMessage\n }\n\n get willValidate() {\n return this.#internals.willValidate\n }\n\n /**\n * The name of the button, submitted as a pair with the button's value as part of the form data.\n * @attribute\n */\n @property({ type: String }) accessor name: string | undefined\n\n #value?: string\n\n get value(): string | undefined {\n return this.#value\n }\n\n /**\n * Defines the value associated with the button's name when it's submitted with the form data.\n * @attribute\n */\n @property({ type: String })\n set value(value: string | undefined) {\n if (this.#value === value) {\n return\n }\n this.#value = value\n this.#internals?.setFormValue(value || null)\n }\n\n /**\n * Whether to render the icon at the inline end of the label rather than the inline start.\n * @attribute\n */\n @property({ type: Boolean, attribute: 'trailingicon', reflect: true }) accessor trailingIcon = false\n\n /**\n * The default behavior of the button.\n * @attribute\n */\n @property({ type: String, reflect: true }) accessor type: ButtonType = 'button'\n\n /**\n * When set, the button is a toggle button.\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor toggle = false\n\n /**\n * Indicates that the button is currently selected.\n * @attribute\n */\n @property({ type: Boolean, reflect: true }) accessor selected = false\n\n /**\n * The shape of the button.\n * @attribute\n */\n @property({ type: String, reflect: true }) accessor shape: MdButtonShape = 'round'\n\n /**\n * The size of the button.\n * @attribute\n */\n @property({ type: String, reflect: true }) accessor size: MdButtonSize = 's'\n\n get disabled(): boolean {\n return isDisabled(this)\n }\n\n /**\n * When set, the button is in a disabled state.\n * @attribute\n */\n @property({ reflect: true, type: Boolean })\n set disabled(value: boolean) {\n const old = isDisabled(this)\n setDisabled(this, value)\n this.requestUpdate('disabled', old)\n }\n\n @query('ui-ripple') protected accessor ripple!: UiRipple | null\n\n /**\n * Turns a `<ui-button>` element into a popover control button; takes the ID\n * of the popover element to control as its value.\n * @attribute\n */\n @property({ type: String, reflect: true }) accessor popoverTarget: string | undefined\n /**\n * Specifies the action to be performed on a popover element being controlled\n * by a control <ui-button>. Possible values are:\n *\n * - `hide` - The button will hide a shown popover. If you try to hide an already hidden popover,\n * no action will be taken.\n * - `show` - The button will show a hidden popover. If you try to show an already showing popover,\n * no action will be taken.\n * - `toggle` - The button will toggle a popover between showing and hidden. If the popover is hidden,\n * it will be shown; if the popover is showing, it will be hidden. If popoverTargetAction is omitted,\n * \"toggle\" is the default action that will be performed by the control button.\n */\n @property({ type: String, reflect: true }) accessor popoverTargetAction: string | undefined\n\n constructor() {\n super()\n this.actionController.cancelKeyboardEvents = true\n this.addEventListener('keydown', this.handleKeyDown.bind(this))\n this.addEventListener('keyup', this.handleKeyUp.bind(this))\n this.addEventListener('click', this.handleClick.bind(this))\n this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))\n this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'button')\n }\n if (!this.hasAttribute('tabindex') && !this.disabled) {\n this.setAttribute('tabindex', '0')\n }\n }\n\n protected override update(changedProperties: PropertyValues<this>): void {\n if (changedProperties.has('popoverTarget')) {\n this.setupPopoverTarget()\n }\n super.update(changedProperties)\n }\n\n protected override updated(cp: PropertyValues<this>): void {\n super.updated(cp)\n\n // If the button is disabled, remove the tabindex attribute\n if (cp.has('disabled')) {\n if (this.disabled) {\n this.removeAttribute('tabindex')\n } else if (!this.hasAttribute('tabindex')) {\n this.setAttribute('tabindex', '0')\n }\n }\n\n if (cp.has('toggle') || cp.has('selected')) {\n this.updatePressedState()\n }\n }\n\n protected updatePressedState(): void {\n if (this.toggle) {\n this.ariaPressed = String(this.selected)\n } else {\n this.selected = false\n this.removeAttribute('aria-pressed')\n }\n }\n\n checkValidity() {\n return this.#internals.checkValidity()\n }\n\n reportValidity() {\n return this.#internals.reportValidity()\n }\n\n protected override firstUpdated(): void {\n this.#internals?.setFormValue(this.value || null)\n }\n\n override beginPress(options: BeginPressConfig): void {\n super.beginPress(options)\n this.classList.add('pressed')\n this.ripple?.beginFocus()\n }\n\n override endPress(config: EndPressConfig): void {\n super.endPress(config)\n this.classList.remove('pressed')\n this.ripple?.endFocus()\n const { cancelled, reason } = config\n if (cancelled) {\n return\n }\n const allowedReasons = reason === 'enter' || reason === 'space'\n if (this.type === 'submit' && (!reason || allowedReasons)) {\n this.handleSubmit()\n } else if (this.type === 'reset' && (!reason || allowedReasons)) {\n this.handleReset()\n } else if (allowedReasons) {\n this.click()\n }\n }\n\n override handleClick(e: MouseEvent): void {\n // Do not call super.handleClick() here, as it would call `endPress` again.\n if (this.disabled) {\n e.preventDefault()\n e.stopPropagation()\n return\n }\n\n if (this.toggle) {\n this.selected = !this.selected\n const e = new ToggleEvent('toggle', {\n bubbles: true,\n composed: true,\n newState: this.selected ? 'selected' : 'unselected',\n oldState: this.selected ? 'unselected' : 'selected',\n })\n this.dispatchEvent(e)\n }\n this.handlePopoverAction()\n this.endPress({ cancelled: false, actionData: { event: e } })\n }\n\n protected setupPopoverTarget(): void {\n const id = this.popoverTarget\n if (!id) {\n return\n }\n const element = findElementInShadowRoots(id, this)\n if (!element) {\n return\n }\n // A regular button first sets its value to the popover target ID,\n this.value = id\n // create an anchor association with the popover target\n if (!this.id) {\n this.id = nanoid()\n }\n const anchorName = `--anchor-${this.id}`\n this.style.setProperty('anchor-name', anchorName)\n element.style.setProperty('position-anchor', anchorName)\n this.setAttribute('aria-details', id)\n this.setAttribute('aria-controls', id)\n }\n\n /**\n * When the button has a popover target, this method toggles the popover\n * visibility by finding the element in the shadow roots and calling its\n * `togglePopover` method.\n */\n protected handlePopoverAction(): void {\n const id = this.popoverTarget\n if (!id) {\n return\n }\n const element = findElementInShadowRoots(id, this)\n if (!element) {\n return\n }\n const action = this.popoverTargetAction || 'toggle'\n if (action === 'hide') {\n element.hidePopover()\n } else if (action === 'show') {\n element.showPopover()\n } else {\n element.togglePopover()\n }\n element.focus()\n }\n\n protected handleSubmit(): void {\n const { name, value, type, disabled, form } = this\n if (!form || !type || disabled) {\n return\n }\n const typedForm = form as HTMLFormElement\n let button: HTMLButtonElement | undefined\n if (name || value) {\n button = document.createElement('button')\n if (name) {\n button.name = name\n }\n if (value) {\n button.value = value\n }\n button.type = type\n button.hidden = true\n typedForm.append(button)\n }\n try {\n typedForm.requestSubmit(button)\n } catch {\n // Ignore errors\n }\n if (button) {\n typedForm.removeChild(button)\n }\n }\n\n protected handleReset(): void {\n const form = this.form as HTMLFormElement\n form?.reset()\n }\n\n override handlePointerEnter(e: PointerEvent): void {\n super.handlePointerEnter(e)\n this.ripple?.beginHover(e)\n }\n\n override handlePointerLeave(e: PointerEvent): void {\n super.handlePointerLeave(e)\n this.ripple?.endHover()\n }\n\n protected override render(): TemplateResult {\n const { trailingIcon = false } = this\n const icon = this.renderIcon()\n\n return html`\n ${this.renderFocusRing()} ${this.renderRipple()} ${trailingIcon ? nothing : icon}\n <slot></slot>\n ${trailingIcon ? icon : nothing}\n `\n }\n\n protected renderIcon(): TemplateResult {\n return html`<slot name=\"icon\"></slot>`\n }\n\n protected renderFocusRing(): TemplateResult {\n return html`<md-focus-ring part=\"focus-ring\" class=\"focus-ring\" .control=\"${this as HTMLElement}\"></md-focus-ring>`\n }\n\n protected renderRipple(): TemplateResult {\n return html`<ui-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></ui-ripple>`\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/chip/internals/Chip.styles.ts"],"names":[],"mappings":";AAEA,
|
|
1
|
+
{"version":3,"file":"Chip.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/chip/internals/Chip.styles.ts"],"names":[],"mappings":";AAEA,wBAuLC"}
|
|
@@ -13,6 +13,8 @@ export default css `
|
|
|
13
13
|
letter-spacing: var(--md-sys-typescale-label-large-tracking);
|
|
14
14
|
line-height: var(--md-sys-typescale-label-large-height);
|
|
15
15
|
|
|
16
|
+
white-space: normal;
|
|
17
|
+
|
|
16
18
|
--md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface);
|
|
17
19
|
--md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface);
|
|
18
20
|
--md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.styles.js","sourceRoot":"","sources":["../../../../../src/md/chip/internals/Chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"Chip.styles.js","sourceRoot":"","sources":["../../../../../src/md/chip/internals/Chip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuLjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: inline-block;\n vertical-align: middle;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n position: relative;\n user-select: none;\n\n font-family: var(--md-sys-typescale-label-large-font);\n font-size: var(--md-sys-typescale-label-large-size);\n letter-spacing: var(--md-sys-typescale-label-large-tracking);\n line-height: var(--md-sys-typescale-label-large-height);\n\n white-space: normal;\n\n --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface);\n --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface);\n --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);\n\n --_leading-icon-color: currentColor;\n --_trailing-icon-color: currentColor;\n --_background-color: transparent;\n --_color: inherit;\n --_shadow: var(--md-sys-elevation-0);\n --_outline-color: transparent;\n --_outline-size: 0;\n --_inline-padding-start: 16px;\n --_inline-padding-end: 16px;\n --_avatar-size: 24px;\n --_avatar-shape: 24px;\n --_icon-size: 18px;\n\n height: 32px;\n border-radius: var(--md-sys-shape-corner-small);\n box-shadow: var(--_shadow);\n border: var(--_outline-size) solid var(--_outline-color);\n }\n\n .ripple {\n border-radius: inherit;\n transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);\n }\n\n .ripple.activated {\n z-index: 1;\n }\n\n :host([disabled]) {\n --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n --_leading-icon-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n --_trailing-icon-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);\n --_outline-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n box-shadow: none;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .surface {\n height: inherit;\n display: flex;\n align-items: center;\n justify-content: start;\n box-sizing: border-box;\n padding: 0 var(--_inline-padding-end) 0 var(--_inline-padding-start);\n border-radius: inherit;\n background-color: var(--_background-color);\n color: var(--_color);\n gap: 0;\n }\n\n .leading-icon {\n height: var(--_icon-size);\n width: 0px;\n overflow: hidden;\n transition: width 230ms var(--md-sys-animation-easing-standard);\n color: var(--_leading-icon-color);\n fill: currentColor;\n }\n\n .leading-icon::slotted(*) {\n width: var(--_icon-size);\n height: var(--_icon-size);\n margin-right: 8px;\n }\n\n slot[name='avatar']::slotted(*) {\n width: var(--_avatar-size);\n height: var(--_avatar-size);\n border-radius: var(--_avatar-shape);\n flex-shrink: 0;\n flex-grow: 0;\n margin-right: 8px;\n }\n\n .check-mark.checked {\n width: 18px;\n margin-right: 8px;\n }\n\n .trailing-icon {\n margin-left: 8px;\n width: 18px;\n height: 18px;\n color: var(--_trailing-icon-color);\n fill: currentColor;\n }\n\n :host([elevated]) {\n --_shadow: var(--md-sys-elevation-1);\n border: none;\n --_background-color: var(--md-sys-color-surface-container-low);\n }\n\n :host([elevated]:hover:not([disabled])) {\n --_shadow: var(--md-sys-elevation-2);\n }\n\n .surface.has-trailing-icon {\n --_inline-padding-end: 8px;\n }\n\n :host([type='assist']:not([disabled])) {\n --_outline-color: var(--md-sys-color-outline-variant);\n --_outline-size: 1px;\n --_color: var(--md-sys-color-on-surface);\n --_leading-icon-color: var(--md-sys-color-primary);\n }\n\n :host .has-icon {\n --_inline-padding-start: 8px;\n }\n\n :host .has-avatar {\n --_inline-padding-start: 4px;\n }\n\n :host([checked]) {\n --_inline-padding-start: 8px;\n --_background-color: var(--md-sys-color-secondary-container);\n }\n\n :host([type='filter']:not([disabled])) {\n --_leading-icon-color: var(--md-sys-color-primary);\n --_trailing-icon-color: var(--md-sys-on-surface-variant);\n --_outline-color: var(--md-sys-color-outline-variant);\n --_outline-size: 1px;\n --_color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([type='filter'][checked]) {\n --_outline-size: 1px;\n }\n\n :host([type='filter'][checked]:not([disabled])) {\n --_leading-icon-color: var(--md-sys-color-on-secondary-container);\n --_trailing-icon-color: var(--md-sys-on-secondary-container);\n --_outline-color: var(--md-sys-color-secondary-container);\n --_color: var(--md-sys-color-on-secondary-container);\n }\n\n :host([type='input']:not([disabled])) {\n --_outline-color: var(--md-sys-color-outline-variant);\n --_outline-size: 1px;\n --_leading-icon-color: var(--md-sys-color-primary);\n --_trailing-icon-color: var(--md-sys-color-on-surface-variant);\n --_color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([type='input'][checked]) {\n --_outline-size: 0px;\n }\n\n :host([type='suggestion']) {\n --_outline-size: 1px;\n --_outline-color: var(--md-sys-color-outline-variant);\n --_color: var(--md-sys-color-on-surface-variant);\n }\n\n :host([type='suggestion']:not([disabled])) {\n --_leading-icon-color: var(--md-sys-color-primary);\n }\n`\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/date-picker/internals/DatePicker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAyL1B,CAAA;AAED,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"DatePicker.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/date-picker/internals/DatePicker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAyL1B,CAAA;AAED,eAAO,MAAM,WAAW,yBAmCvB,CAAA;AAED,eAAO,MAAM,WAAW,yBAwLvB,CAAA"}
|
|
@@ -216,6 +216,10 @@ export const inputStyles = css `
|
|
|
216
216
|
z-index: 999;
|
|
217
217
|
background: transparent;
|
|
218
218
|
}
|
|
219
|
+
|
|
220
|
+
.calendar-icon {
|
|
221
|
+
cursor: pointer;
|
|
222
|
+
}
|
|
219
223
|
`;
|
|
220
224
|
export const modalStyles = css `
|
|
221
225
|
.modal-header {
|
|
@@ -280,6 +284,75 @@ export const modalStyles = css `
|
|
|
280
284
|
font-size: 18px;
|
|
281
285
|
}
|
|
282
286
|
|
|
287
|
+
/* Input container and format help styles */
|
|
288
|
+
.input-container {
|
|
289
|
+
display: flex;
|
|
290
|
+
flex-direction: column;
|
|
291
|
+
gap: 16px;
|
|
292
|
+
width: 100%;
|
|
293
|
+
max-width: 320px;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.format-help {
|
|
297
|
+
padding: 12px 16px;
|
|
298
|
+
background: var(--md-sys-color-surface-container-highest);
|
|
299
|
+
border-radius: 8px;
|
|
300
|
+
border: 1px solid var(--md-sys-color-outline-variant);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.help-title {
|
|
304
|
+
margin: 0 0 8px 0;
|
|
305
|
+
font-size: 14px;
|
|
306
|
+
color: var(--md-sys-color-on-surface);
|
|
307
|
+
line-height: 1.4;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.help-examples {
|
|
311
|
+
margin: 0;
|
|
312
|
+
font-size: 13px;
|
|
313
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
314
|
+
line-height: 1.4;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
/* Accessibility utilities */
|
|
318
|
+
.visually-hidden {
|
|
319
|
+
position: absolute;
|
|
320
|
+
width: 1px;
|
|
321
|
+
height: 1px;
|
|
322
|
+
padding: 0;
|
|
323
|
+
margin: -1px;
|
|
324
|
+
overflow: hidden;
|
|
325
|
+
clip: rect(0, 0, 0, 0);
|
|
326
|
+
white-space: nowrap;
|
|
327
|
+
border: 0;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
fieldset {
|
|
331
|
+
border: none;
|
|
332
|
+
margin: 0;
|
|
333
|
+
padding: 0;
|
|
334
|
+
display: flex;
|
|
335
|
+
flex-direction: column;
|
|
336
|
+
gap: 16px;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
/* Modal header actions and input mode styles */
|
|
340
|
+
.header-actions {
|
|
341
|
+
display: flex;
|
|
342
|
+
gap: 8px;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
.input-mode-placeholder {
|
|
346
|
+
padding: 24px;
|
|
347
|
+
text-align: center;
|
|
348
|
+
color: var(--md-sys-color-on-surface-variant);
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.input-mode-icon {
|
|
352
|
+
font-size: 48px;
|
|
353
|
+
margin-bottom: 16px;
|
|
354
|
+
}
|
|
355
|
+
|
|
283
356
|
.modal-actions {
|
|
284
357
|
display: flex;
|
|
285
358
|
justify-content: flex-end;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.styles.js","sourceRoot":"","sources":["../../../../../src/md/date-picker/internals/DatePicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLhC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"DatePicker.styles.js","sourceRoot":"","sources":["../../../../../src/md/date-picker/internals/DatePicker.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyLhC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmC7B,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwL7B,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const calendarStyles = css`\n :host {\n display: block;\n font-family: 'Roboto', sans-serif;\n font-size: 14px;\n border-radius: 12px;\n background: var(--md-sys-color-surface-container-high);\n border: 1px solid var(--md-sys-color-outline-variant);\n box-shadow: var(--md-sys-elevation-2);\n overflow: hidden;\n }\n\n .calendar {\n padding: 20px 12px 12px 12px;\n }\n\n /* Header */\n .header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 30px;\n gap: 8px;\n }\n\n .month-year {\n display: flex;\n align-items: center;\n flex: 1;\n justify-content: space-between;\n }\n\n .month-selector,\n .year-selector {\n display: flex;\n align-items: center;\n }\n\n .month-year-text {\n font-size: 16px;\n font-weight: 500;\n color: var(--md-sys-color-on-surface);\n min-width: 120px;\n }\n\n /* Weekdays header */\n .weekdays {\n display: grid;\n grid-template-columns: repeat(7, 40px);\n margin-bottom: 16px;\n }\n\n .weekday {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 32px;\n font-size: 12px;\n font-weight: 500;\n color: var(--md-sys-color-on-surface-variant);\n text-transform: uppercase;\n }\n\n /* Calendar grid */\n .days {\n display: grid;\n grid-template-columns: repeat(7, 40px);\n gap: 0;\n }\n\n .day-cell {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n width: 40px;\n }\n\n .day-cell.in-range.has-complete-range {\n background: var(--md-sys-color-secondary-container);\n }\n\n .day-cell.range-start.has-complete-range:not(.range-end) {\n background: linear-gradient(to right, transparent 50%, var(--md-sys-color-secondary-container) 50%);\n }\n\n .day-cell.range-end.has-complete-range:not(.range-start) {\n background: linear-gradient(to left, transparent 50%, var(--md-sys-color-secondary-container) 50%);\n }\n\n .day-cell.range-start.range-end.has-complete-range {\n background: transparent;\n }\n\n .day-button {\n width: 40px !important;\n height: 40px !important;\n min-width: 40px !important;\n padding: 0;\n }\n\n .day-button.other-month {\n opacity: 0.38;\n }\n\n .nav-button,\n .month-button,\n .year-button,\n .other-month .day-button:not([color='filled']):not([disabled]) {\n color: var(--md-sys-color-on-surface-variant);\n }\n\n .month-button,\n .year-button {\n padding: 0;\n }\n\n .weekday:not([color='filled']),\n .day-button:not([color='filled']):not([disabled]) {\n color: var(--md-sys-color-on-surface);\n }\n\n .today .day-button:not([color='filled']) {\n color: var(--md-sys-color-primary);\n }\n\n .today .day-button {\n --md-button-outline-color: var(--md-sys-color-primary);\n }\n\n /* Dropdown views */\n .dropdown-view {\n min-height: 300px;\n }\n\n .close-button {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border: none;\n background: transparent;\n color: var(--md-sys-color-on-surface-variant);\n cursor: pointer;\n border-radius: 16px;\n transition: background-color 0.2s ease;\n }\n\n .close-button:hover {\n background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);\n }\n\n .close-button:focus {\n outline: none;\n background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);\n }\n\n /* Month dropdown */\n .month-list {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 8px;\n }\n\n .year-option:not(.selected),\n .month-option:not(.selected) {\n color: var(--md-sys-color-on-surface-variant);\n }\n\n /* Year dropdown */\n .year-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 4px;\n max-height: 240px;\n overflow-y: auto;\n padding: 4px;\n }\n\n .actions {\n margin-top: 8px;\n display: flex;\n justify-content: flex-end;\n }\n`\n\nexport const inputStyles = css`\n :host {\n display: inline-block;\n width: 100%;\n }\n\n .input-container {\n position: relative;\n }\n\n .dropdown-container {\n position: absolute;\n position-anchor: --ui-date-picker-anchor;\n top: anchor(bottom);\n left: anchor(left);\n z-index: 1000;\n margin-top: 4px;\n min-width: anchor-size(width);\n width: max-content;\n max-width: calc(100vw - 32px);\n }\n\n .backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 999;\n background: transparent;\n }\n\n .calendar-icon {\n cursor: pointer;\n }\n`\n\nexport const modalStyles = css`\n .modal-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 24px 24px 16px;\n }\n\n .modal-title {\n font-size: 24px;\n font-weight: 400;\n color: var(--md-sys-color-on-surface);\n margin: 0;\n }\n\n .modal-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 24px;\n max-height: 60vh;\n overflow-y: auto;\n }\n\n .modal-content ui-date-picker-calendar {\n box-shadow: none;\n }\n\n .date-range-display {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 16px;\n background: var(--md-sys-color-surface-container-highest);\n border-radius: 12px;\n width: 100%;\n max-width: 320px;\n }\n\n .date-display {\n flex: 1;\n text-align: center;\n }\n\n .date-label {\n font-size: 12px;\n font-weight: 500;\n color: var(--md-sys-color-on-surface-variant);\n text-transform: uppercase;\n margin-bottom: 4px;\n }\n\n .date-value {\n font-size: 16px;\n font-weight: 400;\n color: var(--md-sys-color-on-surface);\n }\n\n .date-separator {\n color: var(--md-sys-color-on-surface-variant);\n font-size: 18px;\n }\n\n /* Input container and format help styles */\n .input-container {\n display: flex;\n flex-direction: column;\n gap: 16px;\n width: 100%;\n max-width: 320px;\n }\n\n .format-help {\n padding: 12px 16px;\n background: var(--md-sys-color-surface-container-highest);\n border-radius: 8px;\n border: 1px solid var(--md-sys-color-outline-variant);\n }\n\n .help-title {\n margin: 0 0 8px 0;\n font-size: 14px;\n color: var(--md-sys-color-on-surface);\n line-height: 1.4;\n }\n\n .help-examples {\n margin: 0;\n font-size: 13px;\n color: var(--md-sys-color-on-surface-variant);\n line-height: 1.4;\n }\n\n /* Accessibility utilities */\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n fieldset {\n border: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n\n /* Modal header actions and input mode styles */\n .header-actions {\n display: flex;\n gap: 8px;\n }\n\n .input-mode-placeholder {\n padding: 24px;\n text-align: center;\n color: var(--md-sys-color-on-surface-variant);\n }\n\n .input-mode-icon {\n font-size: 48px;\n margin-bottom: 16px;\n }\n\n .modal-actions {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n padding: 16px 24px;\n border-top: 1px solid var(--md-sys-color-outline-variant);\n }\n\n /* Calendar Action Buttons */\n .actions {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid var(--md-sys-color-outline-variant);\n }\n\n /* Pending selection state */\n .day.pending {\n background: var(--md-sys-color-secondary-container);\n color: var(--md-sys-color-on-secondary-container);\n border: 2px solid var(--md-sys-color-secondary);\n }\n\n .day.pending.selected {\n background: var(--md-sys-color-secondary);\n color: var(--md-sys-color-on-secondary);\n }\n\n .day.pending.range-start,\n .day.pending.range-end {\n background: var(--md-sys-color-secondary);\n color: var(--md-sys-color-on-secondary);\n }\n\n .day.pending.in-range {\n background: var(--md-sys-color-secondary-container);\n color: var(--md-sys-color-on-secondary-container);\n }\n\n /* Responsive */\n @media (max-width: 640px) {\n .modal-content {\n padding: 16px;\n }\n\n .calendar {\n width: 100%;\n max-width: 320px;\n }\n }\n`\n"]}
|
|
@@ -3,10 +3,18 @@ import { DateRange } from './DatePickerUtils.js';
|
|
|
3
3
|
import '../../../md/icons/ui-icon.js';
|
|
4
4
|
import '../../../md/button/ui-button.js';
|
|
5
5
|
import '../../../md/icon-button/ui-icon-button.js';
|
|
6
|
+
/**
|
|
7
|
+
* Event dispatched when a single date is selected in immediate mode
|
|
8
|
+
* or confirmed in pending mode.
|
|
9
|
+
*/
|
|
6
10
|
export interface DateSelectEvent {
|
|
7
11
|
date: Date;
|
|
8
12
|
formattedDate: string;
|
|
9
13
|
}
|
|
14
|
+
/**
|
|
15
|
+
* Event dispatched when a date range is completed in immediate mode.
|
|
16
|
+
* Only fired when both start and end dates are selected.
|
|
17
|
+
*/
|
|
10
18
|
export interface DateRangeSelectEvent {
|
|
11
19
|
range: DateRange;
|
|
12
20
|
formattedRange: {
|
|
@@ -14,6 +22,10 @@ export interface DateRangeSelectEvent {
|
|
|
14
22
|
end: string | null;
|
|
15
23
|
};
|
|
16
24
|
}
|
|
25
|
+
/**
|
|
26
|
+
* Event dispatched when a date range selection is confirmed
|
|
27
|
+
* via the OK button in pending mode.
|
|
28
|
+
*/
|
|
17
29
|
export interface DateRangeConfirmEvent {
|
|
18
30
|
range: DateRange | null;
|
|
19
31
|
formattedRange: {
|
|
@@ -21,12 +33,30 @@ export interface DateRangeConfirmEvent {
|
|
|
21
33
|
end: string | null;
|
|
22
34
|
};
|
|
23
35
|
}
|
|
36
|
+
/**
|
|
37
|
+
* Event dispatched when user cancels a pending selection
|
|
38
|
+
* via the Cancel button or Escape key.
|
|
39
|
+
*/
|
|
24
40
|
export interface DateCancelEvent {
|
|
25
41
|
reason?: string;
|
|
26
42
|
}
|
|
27
43
|
/**
|
|
28
44
|
* A calendar grid component for date selection.
|
|
29
|
-
* Supports single date selection and date range selection.
|
|
45
|
+
* Supports single date selection and date range selection with full keyboard navigation.
|
|
46
|
+
*
|
|
47
|
+
* ## Features
|
|
48
|
+
* - Single date and date range selection
|
|
49
|
+
* - Keyboard navigation support (arrow keys, home, end, page up/down)
|
|
50
|
+
* - Configurable date restrictions (min/max dates, disabled dates)
|
|
51
|
+
* - Localization support for date formatting and month/day names
|
|
52
|
+
* - Optional action buttons for pending selections
|
|
53
|
+
* - Accessible design with proper ARIA attributes
|
|
54
|
+
*
|
|
55
|
+
* ## Events
|
|
56
|
+
* - `date-select`: Fired when a single date is selected/confirmed
|
|
57
|
+
* - `date-range-select`: Fired when a date range is completed (immediate mode)
|
|
58
|
+
* - `date-range-confirm`: Fired when a date range is confirmed (pending mode)
|
|
59
|
+
* - `date-cancel`: Fired when a pending selection is cancelled
|
|
30
60
|
*
|
|
31
61
|
* ## Usage
|
|
32
62
|
*
|
|
@@ -45,11 +75,24 @@ export interface DateCancelEvent {
|
|
|
45
75
|
* ### Date range selection
|
|
46
76
|
* ```html
|
|
47
77
|
* <ui-date-picker-calendar
|
|
48
|
-
*
|
|
49
|
-
* .
|
|
78
|
+
* rangeSelection
|
|
79
|
+
* .rangeStart=${new Date()}
|
|
80
|
+
* .rangeEnd=${null}
|
|
50
81
|
* @date-range-select=${this.handleRangeSelect}
|
|
51
82
|
* ></ui-date-picker-calendar>
|
|
52
83
|
* ```
|
|
84
|
+
*
|
|
85
|
+
* ### With action buttons and restrictions
|
|
86
|
+
* ```html
|
|
87
|
+
* <ui-date-picker-calendar
|
|
88
|
+
* rangeSelection
|
|
89
|
+
* showActions
|
|
90
|
+
* .minDate=${new Date()}
|
|
91
|
+
* .maxDate=${new Date(Date.now() + 365 * 24 * 60 * 60 * 1000)}
|
|
92
|
+
* @date-range-confirm=${this.handleRangeConfirm}
|
|
93
|
+
* @date-cancel=${this.handleCancel}
|
|
94
|
+
* ></ui-date-picker-calendar>
|
|
95
|
+
* ```
|
|
53
96
|
*/
|
|
54
97
|
export declare class UiDatePickerCalendar extends LitElement {
|
|
55
98
|
static styles: import("lit").CSSResult;
|
|
@@ -58,91 +101,161 @@ export declare class UiDatePickerCalendar extends LitElement {
|
|
|
58
101
|
*/
|
|
59
102
|
accessor year: number;
|
|
60
103
|
/**
|
|
61
|
-
* The currently displayed month (0-indexed)
|
|
104
|
+
* The currently displayed month (0-indexed, where 0 = January)
|
|
62
105
|
*/
|
|
63
106
|
accessor month: number;
|
|
64
107
|
/**
|
|
65
|
-
* The currently selected date for single selection mode
|
|
108
|
+
* The currently selected date for single selection mode.
|
|
109
|
+
* Set to null for no selection.
|
|
66
110
|
*/
|
|
67
111
|
accessor selectedDate: Date | null;
|
|
68
112
|
/**
|
|
69
|
-
* The
|
|
113
|
+
* The start date of the selected range for range selection mode.
|
|
114
|
+
* Used in combination with rangeEnd to define a date range.
|
|
115
|
+
*/
|
|
116
|
+
accessor rangeStart: Date | null;
|
|
117
|
+
/**
|
|
118
|
+
* The end date of the selected range for range selection mode.
|
|
119
|
+
* Used in combination with rangeStart to define a date range.
|
|
70
120
|
*/
|
|
71
|
-
accessor
|
|
121
|
+
accessor rangeEnd: Date | null;
|
|
72
122
|
/**
|
|
73
|
-
* Enable range selection mode
|
|
123
|
+
* Enable range selection mode. When true, users can select date ranges
|
|
124
|
+
* instead of single dates. Affects event dispatching and UI behavior.
|
|
74
125
|
*/
|
|
75
126
|
accessor rangeSelection: boolean;
|
|
76
127
|
/**
|
|
77
|
-
* Minimum selectable date
|
|
128
|
+
* Minimum selectable date. Dates before this will be disabled.
|
|
129
|
+
* Set to undefined for no minimum restriction.
|
|
78
130
|
*/
|
|
79
131
|
accessor minDate: Date | undefined;
|
|
80
132
|
/**
|
|
81
|
-
* Maximum selectable date
|
|
133
|
+
* Maximum selectable date. Dates after this will be disabled.
|
|
134
|
+
* Set to undefined for no maximum restriction.
|
|
82
135
|
*/
|
|
83
136
|
accessor maxDate: Date | undefined;
|
|
84
137
|
/**
|
|
85
|
-
* Array of
|
|
138
|
+
* Array of specific dates to disable. These dates will not be selectable
|
|
139
|
+
* regardless of minDate and maxDate settings.
|
|
86
140
|
*/
|
|
87
141
|
accessor disabledDates: Date[] | undefined;
|
|
88
142
|
/**
|
|
89
|
-
* Locale for date formatting and month/day names
|
|
143
|
+
* Locale for date formatting and month/day names (e.g., 'en-US', 'fr-FR').
|
|
144
|
+
* Defaults to browser locale if not specified.
|
|
90
145
|
*/
|
|
91
146
|
accessor locale: string | undefined;
|
|
92
147
|
/**
|
|
93
|
-
* Whether to show navigation controls
|
|
148
|
+
* Whether to show navigation controls (previous/next month and year buttons).
|
|
149
|
+
* When false, users can only navigate using keyboard or programmatically.
|
|
94
150
|
*/
|
|
95
151
|
accessor showNavigation: boolean;
|
|
96
152
|
/**
|
|
97
|
-
* Whether to show action buttons (OK/Cancel)
|
|
153
|
+
* Whether to show action buttons (OK/Cancel). When true, selections are pending
|
|
154
|
+
* until confirmed with the OK button. When false, selections are immediate.
|
|
98
155
|
*/
|
|
99
156
|
accessor showActions: boolean;
|
|
100
157
|
/**
|
|
101
|
-
* Text for the OK button
|
|
158
|
+
* Text label for the OK/confirm button. Only visible when showActions is true.
|
|
102
159
|
*/
|
|
103
160
|
accessor okButtonText: string;
|
|
104
161
|
/**
|
|
105
|
-
* Text for the Cancel button
|
|
162
|
+
* Text label for the Cancel button. Only visible when showActions is true.
|
|
106
163
|
*/
|
|
107
164
|
accessor cancelButtonText: string;
|
|
108
|
-
private accessor
|
|
109
|
-
private accessor
|
|
110
|
-
private accessor
|
|
111
|
-
private accessor
|
|
112
|
-
private accessor
|
|
113
|
-
private accessor
|
|
114
|
-
private accessor
|
|
165
|
+
private accessor calendarData;
|
|
166
|
+
private accessor monthNames;
|
|
167
|
+
private accessor showMonthDropdown;
|
|
168
|
+
private accessor showYearDropdown;
|
|
169
|
+
private accessor pendingDate;
|
|
170
|
+
private accessor pendingRangeStart;
|
|
171
|
+
private accessor pendingRangeEnd;
|
|
172
|
+
private accessor focusedDate;
|
|
115
173
|
connectedCallback(): void;
|
|
174
|
+
firstUpdated(): void;
|
|
116
175
|
disconnectedCallback(): void;
|
|
117
|
-
updated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
118
|
-
private _scrollSelectedYearIntoView;
|
|
119
176
|
willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
120
|
-
|
|
121
|
-
private
|
|
122
|
-
private
|
|
123
|
-
private
|
|
124
|
-
private
|
|
125
|
-
private
|
|
126
|
-
private
|
|
127
|
-
private
|
|
128
|
-
private
|
|
129
|
-
private
|
|
130
|
-
private
|
|
131
|
-
private
|
|
132
|
-
private
|
|
133
|
-
private
|
|
134
|
-
private
|
|
135
|
-
private
|
|
136
|
-
private
|
|
137
|
-
private
|
|
138
|
-
private
|
|
139
|
-
private
|
|
140
|
-
private
|
|
141
|
-
private
|
|
142
|
-
private
|
|
143
|
-
private
|
|
144
|
-
|
|
145
|
-
|
|
177
|
+
updated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
178
|
+
private updateFocus;
|
|
179
|
+
private scrollSelectedYearIntoView;
|
|
180
|
+
private updateFocusedDateForMonthChange;
|
|
181
|
+
private updateCalendar;
|
|
182
|
+
private updateMonthNames;
|
|
183
|
+
private navigateMonth;
|
|
184
|
+
private handlePrevMonth;
|
|
185
|
+
private handleNextMonth;
|
|
186
|
+
private handlePrevYear;
|
|
187
|
+
private handleNextYear;
|
|
188
|
+
private handleMonthClick;
|
|
189
|
+
private handleYearClick;
|
|
190
|
+
private handleMonthSelect;
|
|
191
|
+
private handleYearSelect;
|
|
192
|
+
private closeDropdowns;
|
|
193
|
+
private navigateDate;
|
|
194
|
+
private findNextAvailableDate;
|
|
195
|
+
private focusFirstDayOfMonth;
|
|
196
|
+
private focusLastDayOfMonth;
|
|
197
|
+
private selectFocusedDate;
|
|
198
|
+
private handleDayClick;
|
|
199
|
+
private handleSingleSelection;
|
|
200
|
+
private handleRangeSelection;
|
|
201
|
+
/**
|
|
202
|
+
* Helper to get the current range state (either immediate or pending)
|
|
203
|
+
*/
|
|
204
|
+
private getCurrentRange;
|
|
205
|
+
/**
|
|
206
|
+
* Helper to check if we have a complete range in the current mode
|
|
207
|
+
*/
|
|
208
|
+
private hasCompleteRange;
|
|
209
|
+
private setRangeValues;
|
|
210
|
+
/**
|
|
211
|
+
* Helper to dispatch date selection events
|
|
212
|
+
*/
|
|
213
|
+
private dispatchDateEvent;
|
|
214
|
+
/**
|
|
215
|
+
* Helper to dispatch range selection events
|
|
216
|
+
*/
|
|
217
|
+
private dispatchRangeEvent;
|
|
218
|
+
/**
|
|
219
|
+
* Helper to dispatch range confirmation events
|
|
220
|
+
*/
|
|
221
|
+
private dispatchRangeConfirmEvent;
|
|
222
|
+
/**
|
|
223
|
+
* Helper to dispatch cancel events
|
|
224
|
+
*/
|
|
225
|
+
private dispatchCancelEvent;
|
|
226
|
+
private isDateDisabled;
|
|
227
|
+
private handleConfirm;
|
|
228
|
+
private handleCancel;
|
|
229
|
+
/**
|
|
230
|
+
* Helper to render navigation buttons
|
|
231
|
+
*/
|
|
232
|
+
private renderNavButton;
|
|
233
|
+
private renderNavigation;
|
|
234
|
+
private renderWeekdays;
|
|
235
|
+
/**
|
|
236
|
+
* Helper to determine day selection state for rendering
|
|
237
|
+
*/
|
|
238
|
+
private getDaySelectionState;
|
|
239
|
+
/**
|
|
240
|
+
* Helper to determine button color for a day
|
|
241
|
+
*/
|
|
242
|
+
private getDayButtonColor;
|
|
243
|
+
private renderDay;
|
|
244
|
+
private renderDays;
|
|
245
|
+
private renderActions;
|
|
246
|
+
/**
|
|
247
|
+
* Helper to render dropdown option buttons
|
|
248
|
+
*/
|
|
249
|
+
private renderDropdownOption;
|
|
250
|
+
private renderMonthDropdown;
|
|
251
|
+
private renderYearDropdown;
|
|
252
|
+
private findFirstAvailableDate;
|
|
253
|
+
private handleKeyDown;
|
|
254
|
+
/**
|
|
255
|
+
* Helper to check if a date is in the current month and not disabled
|
|
256
|
+
*/
|
|
257
|
+
private isDateAvailable;
|
|
258
|
+
private initializeFocusedDate;
|
|
146
259
|
render(): TemplateResult;
|
|
147
260
|
}
|
|
148
261
|
declare global {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePickerCalendar.d.ts","sourceRoot":"","sources":["../../../../../src/md/date-picker/internals/DatePickerCalendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAW,MAAM,KAAK,CAAA;AAI/D,OAAO,EAGL,SAAS,
|
|
1
|
+
{"version":3,"file":"DatePickerCalendar.d.ts","sourceRoot":"","sources":["../../../../../src/md/date-picker/internals/DatePickerCalendar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,cAAc,EAAW,MAAM,KAAK,CAAA;AAI/D,OAAO,EAGL,SAAS,EAOV,MAAM,sBAAsB,CAAA;AAC7B,OAAO,8BAA8B,CAAA;AACrC,OAAO,iCAAiC,CAAA;AACxC,OAAO,2CAA2C,CAAA;AAElD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,IAAI,CAAA;IACV,aAAa,EAAE,MAAM,CAAA;CACtB;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,SAAS,CAAA;IAChB,cAAc,EAAE;QACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;QACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;KACnB,CAAA;CACF;AAED;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,SAAS,GAAG,IAAI,CAAA;IACvB,cAAc,EAAE;QACd,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;QACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;KACnB,CAAA;CACF;AAED;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,oBAAqB,SAAQ,UAAU;IAClD,OAAgB,MAAM,0BAAiB;IAEvC;;OAEG;IACyB,QAAQ,CAAC,IAAI,SAA2B;IAEpE;;OAEG;IACyB,QAAQ,CAAC,KAAK,SAAwB;IAElE;;;OAGG;IACyB,QAAQ,CAAC,YAAY,EAAE,IAAI,GAAG,IAAI,CAAO;IAErE;;;OAGG;IACyB,QAAQ,CAAC,UAAU,EAAE,IAAI,GAAG,IAAI,CAAO;IAEnE;;;OAGG;IACyB,QAAQ,CAAC,QAAQ,EAAE,IAAI,GAAG,IAAI,CAAO;IAEjE;;;OAGG;IAC0B,QAAQ,CAAC,cAAc,UAAQ;IAE5D;;;OAGG;IACyB,QAAQ,CAAC,OAAO,EAAE,IAAI,GAAG,SAAS,CAAY;IAE1E;;;OAGG;IACyB,QAAQ,CAAC,OAAO,EAAE,IAAI,GAAG,SAAS,CAAY;IAE1E;;;OAGG;IACwB,QAAQ,CAAC,aAAa,EAAE,IAAI,EAAE,GAAG,SAAS,CAAY;IAEjF;;;OAGG;IACyB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAE3E;;;OAGG;IAC0B,QAAQ,CAAC,cAAc,UAAO;IAE3D;;;OAGG;IAC0B,QAAQ,CAAC,WAAW,UAAQ;IAEzD;;OAEG;IACyB,QAAQ,CAAC,YAAY,SAAO;IAExD;;OAEG;IACyB,QAAQ,CAAC,gBAAgB,SAAW;IAEvD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAuC;IAEpE,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAe;IAE1C,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAQ;IAE1C,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAQ;IAEzC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAoB;IAEhD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAoB;IAEtD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAoB;IAEpD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAoB;IAEhD,iBAAiB,IAAI,IAAI;IAOzB,YAAY,IAAI,IAAI;IAKpB,oBAAoB,IAAI,IAAI;IAI5B,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAuB3E,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAWjF,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,0BAA0B;IAalC,OAAO,CAAC,+BAA+B;IAmBvC,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,YAAY;IA8BpB,OAAO,CAAC,qBAAqB;IAY7B,OAAO,CAAC,oBAAoB;IAS5B,OAAO,CAAC,mBAAmB;IAgB3B,OAAO,CAAC,iBAAiB;IAUzB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,oBAAoB;IAyB5B;;OAEG;IACH,OAAO,CAAC,eAAe;IAQvB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,cAAc;IAUtB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAezB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAkB1B;;OAEG;IACH,OAAO,CAAC,yBAAyB;IAkBjC;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,aAAa;IA0BrB,OAAO,CAAC,YAAY;IASpB;;OAEG;IACH,OAAO,CAAC,eAAe;IAqBvB,OAAO,CAAC,gBAAgB;IA2CxB,OAAO,CAAC,cAAc;IAUtB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAoC5B;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAmBzB,OAAO,CAAC,SAAS;IAmCjB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,aAAa;IAerB;;OAEG;IACH,OAAO,CAAC,oBAAoB;IAoB5B,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,kBAAkB;IA2B1B,OAAO,CAAC,sBAAsB;IAY9B,OAAO,CAAC,aAAa;IAkDrB;;OAEG;IACH,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,qBAAqB;IAepB,MAAM,IAAI,cAAc;CAgClC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,oBAAoB,CAAA;KAChD;IAED,UAAU,mBAAmB;QAC3B,aAAa,EAAE,WAAW,CAAC,eAAe,CAAC,CAAA;QAC3C,mBAAmB,EAAE,WAAW,CAAC,oBAAoB,CAAC,CAAA;QACtD,oBAAoB,EAAE,WAAW,CAAC,qBAAqB,CAAC,CAAA;QACxD,aAAa,EAAE,WAAW,CAAC,eAAe,CAAC,CAAA;KAC5C;CACF"}
|