{ "schemaVersion": "1.0.0", "readme": "", "modules": [ { "kind": "javascript-module", "path": "components/bibtemplate/src/auro-bibtemplate.js", "declarations": [ { "kind": "class", "description": "The `auro-bibtemplate` element provides users a template for creating modal dialog elements.", "name": "AuroBibtemplate", "cssParts": [ { "description": "The outermost bibtemplate container element.", "name": "bibtemplate" } ], "slots": [ { "description": "The default slot for the main content.", "name": "default" }, { "description": "Slot for the header content.", "name": "header" }, { "description": "Slot for the subheader content.", "name": "subheader" }, { "description": "Slot for the footer content.", "name": "footer" }, { "description": "Slot for the close button aria-label.", "name": "ariaLabel.close" } ], "members": [ { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-bibtemplate\"", "description": "The name of element that you want to register to.", "optional": true, "type": { "text": "string" } } ], "description": "This will register this element with the browser." }, { "kind": "method", "name": "preventBodyScroll", "parameters": [ { "name": "event", "description": "The touchmove event.", "type": { "text": "Event" } } ], "description": "Prevents scrolling of the body when touching empty areas of the component.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "focusCloseButton", "description": "Focuses the close button inside the bibtemplate's shadow DOM.\nUsed by parent components to set initial focus when the fullscreen dialog opens.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "onCloseButtonClick" }, { "kind": "method", "name": "exposeCssParts", "description": "Exposes CSS parts for styling from parent components.", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "large", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the fullscreen headline renders using the larger display heading style.", "default": "false", "attribute": "large", "reflects": true }, { "kind": "field", "name": "iconTag", "privacy": "private" }, { "kind": "field", "name": "headerTag", "privacy": "private" }, { "kind": "field", "name": "buttonTag", "privacy": "private" }, { "kind": "field", "name": "isFullscreen", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the bibtemplate renders in fullscreen mode, exposing the header, subheader, and footer regions.", "attribute": "isfullscreen", "reflects": true }, { "kind": "field", "name": "showFooter", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the footer slot will be rendered even when not in fullscreen mode.", "attribute": "showfooter", "reflects": true } ], "events": [ { "name": "close-click", "type": { "text": "Event" }, "description": "Notifies when the close button is clicked." }, { "name": "auro-bibtemplate-connected", "type": { "text": "CustomEvent" }, "description": "Notifies that the bibtemplate has connected to the DOM, passing a reference to the element in the event detail." } ], "attributes": [ { "name": "isfullscreen", "type": { "text": "boolean" }, "description": "If declared, the bibtemplate renders in fullscreen mode, exposing the header, subheader, and footer regions.", "fieldName": "isFullscreen" }, { "name": "large", "type": { "text": "boolean" }, "description": "If declared, the fullscreen headline renders using the larger display heading style.", "default": "false", "fieldName": "large" }, { "name": "showfooter", "type": { "text": "boolean" }, "description": "If declared, the footer slot will be rendered even when not in fullscreen mode.", "fieldName": "showFooter" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "auro-bibtemplate", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroBibtemplate", "declaration": { "name": "AuroBibtemplate", "module": "components/bibtemplate/src/auro-bibtemplate.js" } } ] }, { "kind": "javascript-module", "path": "components/bibtemplate/src/buttonVersion.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "12.3.2", "module": "components/bibtemplate/src/buttonVersion.js" } } ] }, { "kind": "javascript-module", "path": "components/bibtemplate/src/headerVersion.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "5.0.1", "module": "components/bibtemplate/src/headerVersion.js" } } ] }, { "kind": "javascript-module", "path": "components/bibtemplate/src/iconVersion.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "9.2.0", "module": "components/bibtemplate/src/iconVersion.js" } } ] }, { "kind": "javascript-module", "path": "components/bibtemplate/src/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "AuroBibtemplate", "declaration": { "name": "AuroBibtemplate", "module": "components/bibtemplate/src/index.js" } } ] }, { "kind": "javascript-module", "path": "components/bibtemplate/src/registered.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "components/combobox/src/auro-combobox.js", "declarations": [ { "kind": "class", "description": "The `auro-combobox` element provides users with a way to select an option from a list of filtered or suggested options based on user input.", "name": "AuroCombobox", "cssParts": [ { "description": "The help text and error message content container.", "name": "helpText" } ], "slots": [ { "description": "Default slot for the menu content.", "name": "" }, { "type": { "text": "HTMLSlotElement" }, "description": "Allows overriding the optional display text \"(optional)\", which appears next to the label.", "name": "optionalLabel" }, { "description": "Sets aria-label on clear button", "name": "ariaLabel.input.clear" }, { "description": "Sets aria-label on close button in fullscreen bib", "name": "ariaLabel.bib.close" }, { "description": "Defines the headline to display above menu-options", "name": "bib.fullscreen.headline" }, { "description": "Defines the content of the label.", "name": "label" }, { "description": "Defines the content of the helpText.", "name": "helpText" }, { "description": "Allows custom HTML content to display the selected value when the combobox is not focused. Only works with `snowflake` and `emphasized` layouts.", "name": "displayValue" } ], "members": [ { "kind": "method", "name": "_initializeDefaults", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "_scheduleTimer", "parameters": [ { "name": "fn", "description": "Callback to run.", "type": { "text": "Function" } }, { "name": "ms", "description": "Delay in milliseconds.", "type": { "text": "number" } } ], "description": "Wraps setTimeout and records the timer id so disconnectedCallback\ncan cancel any outstanding callbacks. The id is removed from the set\nonce the callback fires so the set doesn't grow unbounded.", "return": { "type": { "text": "number" } }, "privacy": "private" }, { "kind": "field", "name": "inputValue", "description": "Returns the current value of the input element within the combobox.", "return": { "type": { "text": "string|undefined" } }, "readonly": true }, { "kind": "method", "name": "isValid", "description": "Checks if the element is valid.", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "'auro-combobox'", "description": "The name of the element that you want to register.", "optional": true, "type": { "text": "string" } } ], "description": "This will register this element with the browser." }, { "kind": "method", "name": "activateFirstEnabledAvailableOption", "description": "Mark the first available (non-hidden), enabled option as `active`.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "activateLastEnabledAvailableOption", "description": "Mark the last available (non-hidden), enabled option as `active`.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "updateFilter", "description": "Updates the filter for the available options based on the input value.", "privacy": "private" }, { "kind": "method", "name": "syncValuesAndStates", "description": "Syncs the values and states of this component, the input, and the menu, including this.optionSelected and this.menu.optionSelected.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "updateTriggerTextDisplay", "parameters": [ { "name": "label", "description": "The label of the selected option.", "type": { "text": "string" } } ], "description": "Update displayValue or input.value, it's called when making a selection.", "privacy": "private" }, { "kind": "method", "name": "syncInputValuesAcrossTriggerAndBib", "parameters": [ { "name": "nextValue", "description": "The value to write to both inputs.", "type": { "text": "string" } } ], "description": "Writes nextValue to the trigger input and the bib input when their current\nvalue differs, then re-asserts imask after Lit's update flushes.", "return": { "type": { "text": "Promise" } }, "privacy": "private" }, { "kind": "method", "name": "handleMenuOptions", "parameters": [ { "name": "{ preferComboboxValue = false }", "default": "{}" }, { "description": "Optional flag bag.", "name": "options", "optional": true, "type": { "text": "@param {boolean} [options.preferComboboxValue=false] - When true,\n * handleMenuOptions matches the selected option against `this.value`\n * first instead of `this.input.value`. Needed on mount and re-mount\n * because under `persistInput` the consumer's typedValue prop can drift\n * from the framework value (Svelte `{#key}` re-mount after a swap, or\n * SPA preselect after route change) and the old input-first match would\n * then pick the stale text. Only handleSlotChange passes this; typing\n * and clearing paths keep the input-first match so user clears aren't\n * undone.\n * " } } ], "description": "Processes hidden state of all menu options and determines if there are any available options not hidden.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "generateOptionsArray", "description": "Determines the element error state based on the `required` attribute and input value.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "hideBib", "description": "Hides the dropdown bib if its open.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "showBib", "description": "Shows the dropdown bib if there are options to show.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "configureDropdown", "description": "Binds all behavior needed to the dropdown after rendering.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "setClearBtnFocus", "privacy": "private" }, { "kind": "method", "name": "setTriggerInputFocus", "privacy": "private" }, { "kind": "method", "name": "setInputFocus", "privacy": "private" }, { "kind": "method", "name": "updateBibDialogRole", "description": "Suppresses or restores dialog semantics on the bib's dialog element.\nOn desktop (non-fullscreen), VoiceOver verbosely announces \"listbox inside\nof a dialog\" which disrupts combobox usage. Setting role=\"presentation\"\nsuppresses this. In fullscreen mode, dialog semantics are restored.", "privacy": "private" }, { "kind": "method", "name": "updateMenuShapeSize", "description": "Update menu to default for fullscreen bib, otherwise to this.size and this.shape.", "privacy": "private" }, { "kind": "method", "name": "_getAnnouncementRoot", "description": "Returns the shadow root containing the live region for screen reader announcements.\nWhen the bib is open in fullscreen modal mode, everything outside the \nis inert, so we target the bib's own shadow root instead of the host's.", "privacy": "private", "return": { "type": { "text": "ShadowRoot" } } }, { "kind": "method", "name": "configureMenu", "description": "Binds all behavior needed to the menu after rendering.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "configureInput", "description": "Binds all behavior needed to the input after rendering.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "trackClearBtnActivation", "parameters": [ { "name": "inputEl", "description": "The auro-input whose clear button to track.", "type": { "text": "Element" } } ], "description": "Flags genuine clear-button activations on an auro-input so the SPA-preselect\nguard in handleInputValueChange doesn't swallow them.\n\nThe auro-input clear button fires an `isProgrammatic` input event (via\nnotifyValueChanged) that is indistinguishable in shape from the\nSPA-preselect echo that guard bails on (isProgrammatic + set value + empty\ninput). Without this one-shot flag, clicking clear would leave\nthis.value/optionSelected stale (AB#1634257).\n\nDelegated on the shadow root so it works regardless of when .clearBtn\nrenders (it only exists after a value is set), and covers both real clicks\nand programmatic clearBtn.click() (which no focusin precedes). Registered in\nthe CAPTURE phase so the flag is set BEFORE the button's own", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleMenuLoadingChange", "parameters": [ { "name": "event", "description": "The event object containing details about the loading state change.", "type": { "text": "CustomEvent" } }, { "description": "Indicates whether the menu is currently loading.", "name": "event.detail.loading", "type": { "text": "boolean" } }, { "description": "Indicates if there are loading placeholders present.", "name": "event.detail.hasLoadingPlaceholder", "type": { "text": "boolean" } } ], "description": "Manages the visibility of the dropdown based on loading state changes.\n\nThis method listens for loading state changes and adjusts the visibility of the dropdown accordingly.\nIf the dropdown is visible and loading is true without any loading placeholders, it hides the dropdown\nand sets a flag to indicate it is hidden while loading. If loading is false and the dropdown was previously\nhidden, it checks if the active element is within the dropdown and shows it again if true.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleInputValueChange", "parameters": [ { "name": "event", "description": "The input event triggered by the input element.", "type": { "text": "Event" } } ], "description": "Handle changes to the input value and trigger changes that should result.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleTriggerInputValueChange", "parameters": [ { "name": "event", "description": "The input event from the trigger input element.", "type": { "text": "Event" } } ], "description": "Handles input value changes originating from the trigger input.\nRefreshes menu options and filtering, delegates to handleInputValueChange\nfor value synchronization, and manages fullscreen bib focus.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "configureCombobox", "description": "Binds all behavior needed to the combobox after rendering.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "focus", "description": "Focuses the combobox trigger input.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "setMenuValue", "parameters": [ { "name": "value", "description": "The value to set on the menu.", "type": { "text": "string" } } ], "description": "Sets the menu value if menu is available.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "reset", "description": "Resets component to initial state.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "clear", "description": "Clears the current value of the combobox.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "validate", "parameters": [ { "name": "force", "default": "false", "description": "Whether to force validation.", "optional": true, "type": { "text": "boolean" } } ], "description": "Validates value." }, { "kind": "method", "name": "transportAssignedNodes", "parameters": [ { "name": "slot", "description": "The slot element containing the nodes to apply.", "type": { "text": "HTMLSlotElement" } }, { "name": "target", "description": "The target element to apply the nodes to.", "type": { "text": "HTMLElement" } }, { "name": "newSlotName", "description": "The new slot name for the applied nodes.", "type": { "text": "string" } } ], "description": "Applies slotted nodes to a target element with a new slot name.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "updateActiveOption", "parameters": [ { "name": "index", "description": "Index of the option to make active.", "type": { "text": "number" } } ], "description": "Updates the active option in the menu." }, { "kind": "method", "name": "handleSlotChange", "parameters": [ { "name": "event", "description": "`slotchange` event.", "type": { "text": "Event" } } ], "description": "Watch for slot changes and recalculate the menuoptions.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "appearance", "privacy": "public", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "'default'", "attribute": "appearance", "reflects": true }, { "kind": "field", "name": "autocomplete", "privacy": "public", "type": { "text": "string" }, "description": "An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete=\"off\"` is supported.", "attribute": "autocomplete", "reflects": true }, { "kind": "field", "name": "autoPlacement", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, bib's position will be automatically calculated where to appear.", "attribute": "autoplacement", "reflects": true }, { "kind": "field", "name": "availableOptions", "privacy": "private", "type": { "text": "HTMLElement[]" }, "description": "Array of available options to display in the dropdown.\nThis array contains all non-hidden options (e.g., hidden by filtering on input value)." }, { "kind": "field", "name": "behavior", "privacy": "public", "type": { "text": "'filter' | 'suggestion'" }, "description": "Sets the behavior of the combobox, \"filter\" or \"suggestion\".\n\"filter\" requires the user to select an option from the menu.\n\"suggestion\" allows the user to enter a value not present in the menu options.", "default": "'suggestion'", "attribute": "behavior", "reflects": true }, { "kind": "field", "name": "checkmark", "privacy": "public", "type": { "text": "boolean" }, "description": "When attribute is present auro-menu will apply check marks to selected options.", "attribute": "checkmark", "reflects": true }, { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, disables the combobox.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "dropdownId", "privacy": "private", "type": { "text": "string" }, "description": "ID for the dropdown." }, { "kind": "field", "name": "dropdownOpen", "privacy": "private", "type": { "text": "boolean" }, "description": "Whether or not the dropdown is open." }, { "kind": "field", "name": "dvInputOnly", "privacy": "public", "type": { "text": "boolean" }, "description": "If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked.", "attribute": "dvinputonly", "reflects": true }, { "kind": "field", "name": "error", "privacy": "public", "type": { "text": "string" }, "description": "When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.", "attribute": "error", "reflects": true }, { "kind": "field", "name": "format", "privacy": "public", "type": { "text": "string" }, "description": "Specifies the input mask format.", "attribute": "format", "reflects": true }, { "kind": "field", "name": "inputmode", "privacy": "public", "type": { "text": "string" }, "description": "Exposes inputmode attribute for input.", "attribute": "inputmode", "reflects": true }, { "kind": "field", "name": "layout", "privacy": "public", "type": { "text": "'classic' | 'emphasized' | 'snowflake'" }, "description": "Sets the layout of the combobox.", "default": "'classic'", "attribute": "layout", "reflects": true }, { "kind": "field", "name": "shape", "privacy": "public", "type": { "text": "'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'" }, "description": "Sets the shape of the combobox.", "default": "'classic'", "attribute": "shape", "reflects": true }, { "kind": "field", "name": "size", "privacy": "public", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, "description": "Sets the size of the combobox.", "default": "'xl'", "attribute": "size", "reflects": true }, { "kind": "field", "name": "matchWidth", "privacy": "private", "type": { "text": "boolean" }, "description": "If declared, the popover and trigger will be set to the same width.", "attribute": "matchwidth", "reflects": true }, { "kind": "field", "name": "noFilter", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, combobox will not filter menuoptions based on input.", "attribute": "nofilter", "reflects": true }, { "kind": "field", "name": "noFlip", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the bib will NOT flip to an alternate position\nwhen there isn't enough space in the specified `placement`.", "attribute": "noflip", "reflects": true }, { "kind": "field", "name": "shift", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the dropdown will shift its position to avoid being cut off by the viewport.", "attribute": "shift", "reflects": true }, { "kind": "field", "name": "noValidate", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, disables auto-validation on blur.", "attribute": "novalidate", "reflects": true }, { "kind": "field", "name": "offset", "privacy": "public", "type": { "text": "number" }, "description": "Gap between the trigger element and bib.", "default": "0", "attribute": "offset", "reflects": true }, { "kind": "field", "name": "onDark", "privacy": "public", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "attribute": "ondark", "reflects": true, "deprecated": "Use `appearance=\"inverse\"` instead.", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "field", "name": "optionSelected", "privacy": "public", "type": { "text": "HTMLElement" }, "description": "Specifies the current selected option." }, { "kind": "field", "name": "persistInput", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, selecting a menu option will not change the input value. By doing so,\nthe current menu filter will be preserved and the user can continue from their last\nfilter state. It is recommended to use this in combination with the `displayValue` slot.", "attribute": "persistinput", "reflects": true }, { "kind": "field", "name": "placement", "privacy": "public", "type": { "text": "'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'" }, "description": "Position where the bib should appear relative to the trigger.", "default": "'bottom-start'", "attribute": "placement", "reflects": true }, { "kind": "field", "name": "placeholder", "privacy": "public", "type": { "text": "string" }, "description": "Define custom placeholder text, only supported by date input formats.", "attribute": "placeholder", "reflects": true }, { "kind": "field", "name": "required", "privacy": "public", "type": { "text": "boolean" }, "description": "Populates the `required` attribute on the input. Used for client-side validation.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "setCustomValidity", "privacy": "public", "type": { "text": "string" }, "description": "Sets a custom help text message to display for all validityStates.", "attribute": "setcustomvalidity" }, { "kind": "field", "name": "setCustomValidityCustomError", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `customError`.", "attribute": "setcustomvaliditycustomerror" }, { "kind": "field", "name": "setCustomValidityValueMissing", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `valueMissing`.", "attribute": "setcustomvalidityvaluemissing" }, { "kind": "field", "name": "setCustomValidityValueMissingFilter", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `valueMissing` due to the user not choosing a menu option when behavior = \"filter\".", "attribute": "setcustomvalidityvaluemissingfilter" }, { "kind": "field", "name": "touched", "privacy": "private", "type": { "text": "boolean" }, "description": "Indicates whether the combobox is in a dirty state (has been interacted with)." }, { "kind": "field", "name": "triggerIcon", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, the `icon` attribute will be applied to the trigger `auro-input` element.\nIcon rendering is currently limited to `type=\"credit-card\"`. Setting `triggerIcon`\nwithout a supported `type` propagates the attribute but does not render a visible icon.", "attribute": "triggericon", "reflects": true }, { "kind": "field", "name": "type", "privacy": "public", "type": { "text": "'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'" }, "description": "Applies the defined value as the type attribute on `auro-input`.", "attribute": "type", "reflects": true }, { "kind": "field", "name": "typedValue", "privacy": "public", "type": { "text": "string" }, "description": "Specifies the value of the input element within the combobox.", "attribute": "typedvalue", "reflects": true }, { "kind": "field", "name": "validity", "privacy": "public", "type": { "text": "string" }, "description": "Specifies the `validityState` this element is in.", "attribute": "validity", "reflects": true }, { "kind": "field", "name": "value", "privacy": "public", "type": { "text": "string" }, "description": "Value selected for the dropdown menu. When set programmatically or as a preset attribute, the value must match a selectable option. If it matches an option marked `disabled` or `static`, the selection is rejected: `value` and `optionSelected` are cleared to `undefined`. `hidden` options (including those filtered out by type-ahead) remain selectable by value.", "attribute": "value" }, { "kind": "field", "name": "largeFullscreenHeadline", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, make bib.fullscreen.headline in HeadingDisplay.\nOtherwise, Heading 600", "attribute": "largefullscreenheadline", "reflects": true }, { "kind": "field", "name": "fullscreenBreakpoint", "privacy": "public", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'" }, "description": "Defines the screen size breakpointat which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.\n\nWhen expanded, the dropdown will automatically display in fullscreen mode\nif the screen size is equal to or smaller than the selected breakpoint.", "default": "'sm'", "attribute": "fullscreenbreakpoint", "reflects": true }, { "kind": "field", "name": "optionActive", "privacy": "private", "type": { "text": "HTMLElement" }, "description": "Specifies the currently active option." }, { "kind": "field", "name": "componentHasFocus", "description": "Returns true if the element has focus.", "privacy": "private", "return": { "type": { "text": "boolean" } }, "readonly": true, "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetShapeClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetLayoutClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "updateComponentArchitecture", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } } ], "events": [ { "name": "inputValue", "type": { "text": "CustomEvent" }, "description": "Notifies that the components internal HTML5 input value has changed." }, { "name": "input", "type": { "text": "CustomEvent" }, "description": "Notifies that the component has a new value set." }, { "name": "auroCombobox-valueSet", "type": { "text": "CustomEvent" }, "description": "Notifies that the component has a new value set. **DEPRECATED** - Use the `input` event instead.", "deprecated": "Use the `input` event instead." }, { "description": "Notifies that the component value(s) have been validated.", "name": "auroFormElement-validated" } ], "attributes": [ { "name": "appearance", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "'default'", "fieldName": "appearance" }, { "name": "autocomplete", "type": { "text": "string" }, "description": "An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete=\"off\"` is supported.", "fieldName": "autocomplete" }, { "name": "autoplacement", "type": { "text": "boolean" }, "description": "If declared, bib's position will be automatically calculated where to appear.", "fieldName": "autoPlacement" }, { "name": "behavior", "type": { "text": "'filter' | 'suggestion'" }, "description": "Sets the behavior of the combobox, \"filter\" or \"suggestion\".\n\"filter\" requires the user to select an option from the menu.\n\"suggestion\" allows the user to enter a value not present in the menu options.", "default": "'suggestion'", "fieldName": "behavior" }, { "name": "checkmark", "type": { "text": "boolean" }, "description": "When attribute is present auro-menu will apply check marks to selected options.", "fieldName": "checkmark" }, { "name": "disabled", "type": { "text": "boolean" }, "description": "If set, disables the combobox.", "fieldName": "disabled" }, { "name": "dvinputonly", "type": { "text": "boolean" }, "description": "If defined, the display value slot content will only mask the HTML5 input element. The inputs label will not be masked.", "fieldName": "dvInputOnly" }, { "name": "error", "type": { "text": "string" }, "description": "When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.", "fieldName": "error" }, { "name": "format", "type": { "text": "string" }, "description": "Specifies the input mask format.", "fieldName": "format" }, { "name": "inputmode", "type": { "text": "string" }, "description": "Exposes inputmode attribute for input.", "fieldName": "inputmode" }, { "name": "layout", "type": { "text": "'classic' | 'emphasized' | 'snowflake'" }, "description": "Sets the layout of the combobox.", "default": "'classic'", "fieldName": "layout" }, { "name": "shape", "type": { "text": "'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'" }, "description": "Sets the shape of the combobox.", "default": "'classic'", "fieldName": "shape" }, { "name": "size", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, "description": "Sets the size of the combobox.", "default": "'xl'", "fieldName": "size" }, { "name": "matchwidth", "type": { "text": "boolean" }, "description": "If declared, the popover and trigger will be set to the same width.", "fieldName": "matchWidth" }, { "name": "nofilter", "type": { "text": "boolean" }, "description": "If set, combobox will not filter menuoptions based on input.", "fieldName": "noFilter" }, { "name": "noflip", "type": { "text": "boolean" }, "description": "If declared, the bib will NOT flip to an alternate position\nwhen there isn't enough space in the specified `placement`.", "fieldName": "noFlip" }, { "name": "shift", "type": { "text": "boolean" }, "description": "If declared, the dropdown will shift its position to avoid being cut off by the viewport.", "fieldName": "shift" }, { "name": "novalidate", "type": { "text": "boolean" }, "description": "If set, disables auto-validation on blur.", "fieldName": "noValidate" }, { "name": "offset", "type": { "text": "number" }, "description": "Gap between the trigger element and bib.", "default": "0", "fieldName": "offset" }, { "name": "ondark", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "fieldName": "onDark", "deprecated": "Use `appearance=\"inverse\"` instead.", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "name": "persistinput", "type": { "text": "boolean" }, "description": "If declared, selecting a menu option will not change the input value. By doing so,\nthe current menu filter will be preserved and the user can continue from their last\nfilter state. It is recommended to use this in combination with the `displayValue` slot.", "fieldName": "persistInput" }, { "name": "placement", "type": { "text": "'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'" }, "description": "Position where the bib should appear relative to the trigger.", "default": "'bottom-start'", "fieldName": "placement" }, { "name": "placeholder", "type": { "text": "string" }, "description": "Define custom placeholder text, only supported by date input formats.", "fieldName": "placeholder" }, { "name": "required", "type": { "text": "boolean" }, "description": "Populates the `required` attribute on the input. Used for client-side validation.", "fieldName": "required" }, { "name": "setcustomvalidity", "type": { "text": "string" }, "description": "Sets a custom help text message to display for all validityStates.", "fieldName": "setCustomValidity" }, { "name": "setcustomvaliditycustomerror", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `customError`.", "fieldName": "setCustomValidityCustomError" }, { "name": "setcustomvalidityvaluemissing", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `valueMissing`.", "fieldName": "setCustomValidityValueMissing" }, { "name": "setcustomvalidityvaluemissingfilter", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `valueMissing` due to the user not choosing a menu option when behavior = \"filter\".", "fieldName": "setCustomValidityValueMissingFilter" }, { "name": "triggericon", "type": { "text": "boolean" }, "description": "If set, the `icon` attribute will be applied to the trigger `auro-input` element.\nIcon rendering is currently limited to `type=\"credit-card\"`. Setting `triggerIcon`\nwithout a supported `type` propagates the attribute but does not render a visible icon.", "fieldName": "triggerIcon" }, { "name": "type", "type": { "text": "'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'" }, "description": "Applies the defined value as the type attribute on `auro-input`.", "fieldName": "type" }, { "name": "typedvalue", "type": { "text": "string" }, "description": "Specifies the value of the input element within the combobox.", "fieldName": "typedValue" }, { "name": "validity", "type": { "text": "string" }, "description": "Specifies the `validityState` this element is in.", "fieldName": "validity" }, { "name": "value", "type": { "text": "string" }, "description": "Value selected for the dropdown menu. When set programmatically or as a preset attribute, the value must match a selectable option. If it matches an option marked `disabled` or `static`, the selection is rejected: `value` and `optionSelected` are cleared to `undefined`. `hidden` options (including those filtered out by type-ahead) remain selectable by value.", "fieldName": "value" }, { "name": "largefullscreenheadline", "type": { "text": "boolean" }, "description": "If declared, make bib.fullscreen.headline in HeadingDisplay.\nOtherwise, Heading 600", "fieldName": "largeFullscreenHeadline" }, { "name": "fullscreenbreakpoint", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'" }, "description": "Defines the screen size breakpointat which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.\n\nWhen expanded, the dropdown will automatically display in fullscreen mode\nif the screen size is equal to or smaller than the selected breakpoint.", "default": "'sm'", "fieldName": "fullscreenBreakpoint" } ], "superclass": { "name": "AuroElement", "module": "/components/layoutElement/src/auroElement.js" }, "tagName": "auro-combobox", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroCombobox", "declaration": { "name": "AuroCombobox", "module": "components/combobox/src/auro-combobox.js" } } ] }, { "kind": "javascript-module", "path": "components/combobox/src/comboboxKeyboardStrategy.js", "declarations": [ { "kind": "variable", "name": "comboboxKeyboardStrategy", "type": { "text": "object" }, "default": "{ ArrowDown(component, evt, ctx) { // If the clear button has focus, let the browser handle ArrowDown normally. if (isClearBtnFocused(ctx)) { return; } // option display and navigation are prevented if there are no available options if (component.availableOptions.length > 0) { evt.preventDefault(); // navigate if bib is open otherwise open it if (component.dropdown.isPopoverVisible) { navigateArrow(component, 'down'); } else { component.showBib(); } } }, ArrowUp(component, evt, ctx) { // If the clear button has focus, let the browser handle ArrowUp normally. if (isClearBtnFocused(ctx)) { return; } // option display and navigation are prevented if there are no available options if (component.availableOptions.length > 0) { evt.preventDefault(); // navigate if bib is open otherwise open it if (component.dropdown.isPopoverVisible) { navigateArrow(component, 'up'); } else { component.showBib(); } } }, End(component, evt, ctx) { if (ctx.isExpanded) { evt.preventDefault(); evt.stopPropagation(); component.activateLastEnabledAvailableOption(); } }, Enter(component, evt, ctx) { // Forms should not submit on Enter from a combobox, regardless of which // child element (input, clear button, menu) is focused. evt.stopPropagation(); if (isClearBtnFocused(ctx)) { // Let the browser dispatch Enter to the focused clear button so its // built-in activation fires and clears the selection. Do NOT call // preventDefault — that would block the activation. return; } if (ctx.isExpanded && component.menu.optionActive) { reconcileMenuIndex(component.menu); component.menu.makeSelection(); if (ctx.isModal) { component.setTriggerInputFocus(); } evt.preventDefault(); } else { evt.preventDefault(); component.showBib(); } }, Escape(component, evt, ctx) { if (!ctx.isExpanded) { return; } // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups evt.stopPropagation(); if (ctx.isModal) { component.setTriggerInputFocus(); } component.hideBib(); }, Home(component, evt, ctx) { if (ctx.isExpanded) { evt.preventDefault(); evt.stopPropagation(); component.activateFirstEnabledAvailableOption(); } }, Tab(component, evt, ctx) { if (ctx.isExpanded && !isClearBtnFocused(ctx)) { if (evt.shiftKey) { if (selectAndExitBackward(component)) { evt.preventDefault(); } return; } selectAndClose(component); if (ctx.isModal) { // Fullscreen close does not automatically restore focus to the input. component.setClearBtnFocus(); } } } }" } ], "exports": [ { "kind": "js", "name": "comboboxKeyboardStrategy", "declaration": { "name": "comboboxKeyboardStrategy", "module": "components/combobox/src/comboboxKeyboardStrategy.js" } } ] }, { "kind": "javascript-module", "path": "components/combobox/src/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "AuroCombobox", "declaration": { "name": "AuroCombobox", "module": "components/combobox/src/index.js" } } ] }, { "kind": "javascript-module", "path": "components/combobox/src/registered.js", "declarations": [], "exports": [ { "kind": "js", "name": "AuroCombobox", "declaration": { "name": "AuroCombobox", "module": "components/combobox/src/registered.js" } } ] }, { "kind": "javascript-module", "path": "components/checkbox/src/auro-checkbox-group.js", "declarations": [ { "kind": "class", "description": "The `auro-checkbox-group` element is a wrapper for `auro-checkbox` elements.", "name": "AuroCheckboxGroup", "cssParts": [ { "description": "Apply css to the help text element that displays helper or error messages.", "name": "helpText" } ], "slots": [ { "description": "Allows for the legend to be overridden.", "name": "legend" }, { "description": "Allows overriding the optional display text \"(optional)\", which appears next to the label.", "name": "optionalLabel" }, { "description": "Allows for the helper text to be overridden.", "name": "helpText" }, { "description": "The default slot for the checkbox items.", "name": "default" } ], "members": [ { "kind": "method", "name": "_initializeDefaults" }, { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-checkbox-group\"", "description": "The name of the element that you want to register.", "optional": true, "type": { "text": "string" } } ], "description": "This will register this element with the browser." }, { "kind": "method", "name": "handleValueUpdate", "parameters": [ { "name": "value", "description": "The value of the checkbox.", "type": { "text": "String" } }, { "name": "selected", "description": "The checked state of the checkbox.", "type": { "text": "Boolean" } } ], "description": "Helper method to handle checkbox value changing.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handlePreselectedItems", "description": "Helper method that handles the state of preselected checkboxes.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleItems", "description": "Helper method that handles the state of checkboxes.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "reset", "description": "Resets component to initial state.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "validate", "parameters": [ { "name": "force", "default": "false", "description": "Whether to force validation.", "optional": true, "type": { "text": "boolean" } } ], "description": "Validates value." }, { "kind": "field", "name": "appearance", "privacy": "public", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "'default'", "attribute": "appearance", "reflects": true }, { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, disables the checkbox group.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "error", "privacy": "public", "type": { "text": "string" }, "description": "When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.", "attribute": "error", "reflects": true }, { "kind": "field", "name": "horizontal", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, checkboxes will be aligned horizontally.", "attribute": "horizontal", "reflects": true }, { "kind": "field", "name": "noValidate", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, disables auto-validation on blur.", "attribute": "novalidate", "reflects": true }, { "kind": "field", "name": "onDark", "privacy": "public", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "deprecated": "Use `appearance=\"inverse\"` instead.", "attribute": "ondark", "reflects": true }, { "kind": "field", "name": "required", "privacy": "public", "type": { "text": "boolean" }, "description": "Populates the `required` attribute on the element. Used for client-side validation.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "setCustomValidity", "privacy": "public", "type": { "text": "string" }, "description": "Sets a custom help text message to display for all validityStates.", "attribute": "setcustomvalidity" }, { "kind": "field", "name": "setCustomValidityCustomError", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `customError`.", "attribute": "setcustomvaliditycustomerror" }, { "kind": "field", "name": "setCustomValidityValueMissing", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `valueMissing`.", "attribute": "setcustomvalidityvaluemissing" }, { "kind": "field", "name": "validity", "privacy": "public", "type": { "text": "string" }, "description": "Specifies the `validityState` this element is in.", "attribute": "validity", "reflects": true } ], "events": [ { "name": "input", "type": { "text": "CustomEvent" }, "description": "Notifies when the group's value changes due to a checkbox selection being added or removed." }, { "description": "Notifies that the `validity` and `errorMessage` values have changed.", "name": "auroFormElement-validated" } ], "attributes": [ { "name": "appearance", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "'default'", "fieldName": "appearance" }, { "name": "disabled", "type": { "text": "boolean" }, "description": "If set, disables the checkbox group.", "fieldName": "disabled" }, { "name": "error", "type": { "text": "string" }, "description": "When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.", "fieldName": "error" }, { "name": "horizontal", "type": { "text": "boolean" }, "description": "If set, checkboxes will be aligned horizontally.", "fieldName": "horizontal" }, { "name": "novalidate", "type": { "text": "boolean" }, "description": "If set, disables auto-validation on blur.", "fieldName": "noValidate" }, { "name": "ondark", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "deprecated": "Use `appearance=\"inverse\"` instead.", "fieldName": "onDark" }, { "name": "required", "type": { "text": "boolean" }, "description": "Populates the `required` attribute on the element. Used for client-side validation.", "fieldName": "required" }, { "name": "setcustomvalidity", "type": { "text": "string" }, "description": "Sets a custom help text message to display for all validityStates.", "fieldName": "setCustomValidity" }, { "name": "setcustomvaliditycustomerror", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `customError`.", "fieldName": "setCustomValidityCustomError" }, { "name": "setcustomvalidityvaluemissing", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `valueMissing`.", "fieldName": "setCustomValidityValueMissing" }, { "name": "validity", "type": { "text": "string" }, "description": "Specifies the `validityState` this element is in.", "fieldName": "validity" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "auro-checkbox-group", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroCheckboxGroup", "declaration": { "name": "AuroCheckboxGroup", "module": "components/checkbox/src/auro-checkbox-group.js" } } ] }, { "kind": "javascript-module", "path": "components/checkbox/src/auro-checkbox.js", "declarations": [ { "kind": "class", "description": "The `auro-checkbox` element is for the purpose of allowing users to select one or more options of a limited number of choices.", "name": "AuroCheckbox", "cssParts": [ { "description": "apply css to a specific checkbox.", "name": "checkbox" }, { "description": "apply css to a specific checkbox's input.", "name": "checkbox-input" }, { "description": "apply css to a specific checkbox's label.", "name": "checkbox-label" } ], "slots": [ { "description": "The default slot for the checkbox label.", "name": "default" } ], "members": [ { "kind": "method", "name": "_initializeDefaults" }, { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-checkbox\"", "description": "The name of element that you want to register to.", "optional": true, "type": { "text": "string" } } ], "description": "This will register this element with the browser." }, { "kind": "method", "name": "handleChange", "parameters": [ { "name": "event", "description": "The change event from the checkbox input.", "type": { "text": "Event" } } ], "description": "Handles the change event for the checkbox input.\nUpdates the checked state and dispatches a corresponding custom event.\nThis custom event is only for the purpose of supporting IE.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleInput", "parameters": [ { "name": "event", "description": "The input event from the checkbox input.", "type": { "text": "Event" } } ], "description": "Handles the input event for the checkbox input.\nUpdates the checked state and dispatches a custom 'auroCheckbox-input' event.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleFocusin", "description": "Function to support", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "generateIconHtml", "description": "Function to generate checkmark svg.", "privacy": "private", "return": { "type": { "text": "HTMLElement" } } }, { "kind": "method", "name": "reset", "description": "Resets component to initial state.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "updateAriaLabel", "description": "Updates the aria-label based on slot content.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleKeyDown", "parameters": [ { "name": "event", "description": "The keydown event from the checkbox input.", "type": { "text": "KeyboardEvent" } } ], "description": "Handles keydown event to toggle the checkbox with Space key.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "appearance", "privacy": "public", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "'default'", "attribute": "appearance", "reflects": true }, { "kind": "field", "name": "checked", "privacy": "public", "type": { "text": "boolean" }, "description": "If set to true, the checkbox will be filled with a checkmark.", "attribute": "checked", "reflects": true }, { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "description": "If set to true, the checkbox will not be clickable.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "error", "privacy": "public", "type": { "text": "boolean" }, "description": "If set to true, the checkbox will be displayed with an error state.", "attribute": "error", "reflects": true }, { "kind": "field", "name": "id", "privacy": "public", "type": { "text": "string" }, "description": "The id global attribute defines an identifier (ID) which must be unique in the whole document.", "attribute": "id", "reflects": true }, { "kind": "field", "name": "inputId", "privacy": "private", "type": { "text": "string" }, "description": "The id for input node." }, { "kind": "field", "name": "name", "privacy": "public", "type": { "text": "string" }, "description": "Accepts any string and is used to identify related checkboxes when submitting form data.", "attribute": "name" }, { "kind": "field", "name": "onDark", "privacy": "public", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "deprecated": "Use `appearance=\"inverse\"` instead.", "attribute": "ondark", "reflects": true }, { "kind": "field", "name": "touched", "privacy": "private", "type": { "text": "boolean" }, "description": "Indicates whether the checkbox has been interacted with." }, { "kind": "field", "name": "value", "privacy": "public", "type": { "text": "string" }, "description": "Sets the element's input value. Must be unique within an auro-checkbox-group element.", "attribute": "value" }, { "kind": "field", "name": "tabIndex", "privacy": "private", "type": { "text": "number" }, "description": "The tabindex attribute for the checkbox.", "attribute": "tabindex", "reflects": true }, { "kind": "field", "name": "ariaChecked", "privacy": "private", "type": { "text": "string" }, "description": "The aria-checked attribute for the checkbox.", "attribute": "aria-checked", "reflects": true }, { "kind": "field", "name": "ariaDisabled", "privacy": "private", "type": { "text": "string" }, "description": "The aria-disabled attribute for the checkbox.", "attribute": "aria-disabled", "reflects": true }, { "kind": "field", "name": "role", "privacy": "private", "type": { "text": "string" }, "description": "The ARIA role for the element. Must remain 'checkbox' for screen readers\nto correctly identify this as a checkbox control.", "attribute": "role", "reflects": true } ], "events": [ { "name": "auroCheckbox-input", "type": { "text": "CustomEvent" }, "description": "Notifies when the checked value is changed by user interaction. **DEPRECATED** - Use the `input` event instead.", "deprecated": "Use the `input` event instead." }, { "name": "auroCheckbox-focusin", "type": { "text": "CustomEvent" }, "description": "Notifies when the checkbox receives focus." }, { "name": "auroCheckbox-focusout", "type": { "text": "CustomEvent" }, "description": "Notifies when the checkbox loses focus." }, { "description": "Notifies when checked value is changed. **DEPRECATED** - Use the `input` event instead.", "name": "change", "deprecated": "Use the `input` event instead." }, { "description": "Notifies when checked value is changed by user's interface.", "name": "input" } ], "attributes": [ { "name": "appearance", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "'default'", "fieldName": "appearance" }, { "name": "checked", "type": { "text": "boolean" }, "description": "If set to true, the checkbox will be filled with a checkmark.", "fieldName": "checked" }, { "name": "disabled", "type": { "text": "boolean" }, "description": "If set to true, the checkbox will not be clickable.", "fieldName": "disabled" }, { "name": "error", "type": { "text": "boolean" }, "description": "If set to true, the checkbox will be displayed with an error state.", "fieldName": "error" }, { "name": "id", "type": { "text": "string" }, "description": "The id global attribute defines an identifier (ID) which must be unique in the whole document.", "fieldName": "id" }, { "name": "name", "type": { "text": "string" }, "description": "Accepts any string and is used to identify related checkboxes when submitting form data.", "fieldName": "name" }, { "name": "ondark", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "deprecated": "Use `appearance=\"inverse\"` instead.", "fieldName": "onDark" }, { "name": "value", "type": { "text": "string" }, "description": "Sets the element's input value. Must be unique within an auro-checkbox-group element.", "fieldName": "value" }, { "name": "tabindex", "type": { "text": "number" }, "description": "The tabindex attribute for the checkbox.", "fieldName": "tabIndex" }, { "name": "aria-checked", "type": { "text": "string" }, "description": "The aria-checked attribute for the checkbox.", "fieldName": "ariaChecked" }, { "name": "aria-disabled", "type": { "text": "string" }, "description": "The aria-disabled attribute for the checkbox.", "fieldName": "ariaDisabled" }, { "name": "role", "type": { "text": "string" }, "description": "The ARIA role for the element. Must remain 'checkbox' for screen readers\nto correctly identify this as a checkbox control.", "fieldName": "role" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "auro-checkbox", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroCheckbox", "declaration": { "name": "AuroCheckbox", "module": "components/checkbox/src/auro-checkbox.js" } } ] }, { "kind": "javascript-module", "path": "components/checkbox/src/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "AuroCheckbox", "declaration": { "name": "AuroCheckbox", "module": "components/checkbox/src/index.js" } }, { "kind": "js", "name": "AuroCheckboxGroup", "declaration": { "name": "AuroCheckboxGroup", "module": "components/checkbox/src/index.js" } } ] }, { "kind": "javascript-module", "path": "components/checkbox/src/registered.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "components/counter/src/auro-counter-button.js", "declarations": [ { "kind": "class", "description": "The `auro-counter-button` element provides the increment and decrement control button used within an `auro-counter`.", "name": "AuroCounterButton", "members": [ { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-counter-button\"", "description": "The name of element that you want to register to.", "optional": true, "type": { "text": "string" } } ], "description": "This will register this element with the browser." }, { "kind": "field", "name": "size", "type": { "text": "string" }, "default": "\"sm\"" }, { "kind": "field", "name": "shape", "type": { "text": "string" }, "default": "\"rounded\"" } ], "superclass": { "name": "AuroButton", "package": "@aurodesignsystem/auro-button/class" }, "tagName": "auro-counter-button", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroCounterButton", "declaration": { "name": "AuroCounterButton", "module": "components/counter/src/auro-counter-button.js" } }, { "kind": "custom-element-definition", "name": "auro-counter-button", "declaration": { "name": "AuroCounterButton", "module": "components/counter/src/auro-counter-button.js" } } ] }, { "kind": "javascript-module", "path": "components/counter/src/auro-counter-group.js", "declarations": [ { "kind": "class", "description": "The `auro-counter-group` element provides a flexible interface for grouping multiple counters, supporting validation, custom validity messages, and disabled states based on the group's value.", "name": "AuroCounterGroup", "cssParts": [ { "description": "The dropdown element rendered when `isDropdown` is true.", "name": "dropdown" }, { "description": "The help text and error message container.", "name": "helpText" } ], "slots": [ { "description": "Slot for counter elements.", "name": "default" }, { "description": "Sets aria-label on close button in fullscreen bib", "name": "ariaLabel.bib.close" }, { "description": " Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required.", "name": "bib.fullscreen.headline" }, { "description": " Defines the footer to display at the bottom of fullscreen bib. Only used when `isDropdown` is true.", "name": "bib.fullscreen.footer" }, { "description": "Dropdown label content. Only used when `isDropdown` is true.", "name": "label" }, { "description": "Dropdown value text display. Only used when `isDropdown` is true.", "name": "valueText" }, { "description": "Dropdown help text content. Only used when `isDropdown` is true.", "name": "helpText" } ], "members": [ { "kind": "method", "name": "manageDisabled", "parameters": [ { "name": "counter", "description": "The counter element to potentially disable.", "type": { "text": "HTMLElement" } } ], "description": "Dynamically disables increment/decrement buttons on a counter based on group value.\nThis method checks the total aggregated value against the group's min and max properties.\nIf the total value is at or below the minimum, the counter's decrement button is disabled; if at or above the maximum, the increment button is disabled.", "privacy": "private" }, { "kind": "method", "name": "configureCounters", "description": "Attaches input event listeners to all auro-counter elements within the component.\nThis method selects all `auro-counter` and `[auro-counter]` elements and adds an `input` event listener to each.\nThe listener calls `this.updateValue()` whenever the value of a counter changes.", "privacy": "private" }, { "kind": "method", "name": "renderHelpTextErrors", "parameters": [ { "name": "messages", "description": "The error messages to render.", "type": { "text": "Array" } } ], "description": "Renders help text error messages.", "return": { "type": { "text": "TemplateResult[]" } }, "privacy": "private" }, { "kind": "method", "name": "getInvalidCounters", "parameters": [ { "name": "counters", "description": "The NodeList of counter elements to check.", "type": { "text": "NodeList" } } ], "description": "Gets and returns an array of counters in an invalid state.", "return": { "type": { "text": "Array" } }, "privacy": "private" }, { "kind": "method", "name": "getErrorMessages", "parameters": [ { "name": "invalidCounters", "description": "The NodeList of counter elements to check.", "type": { "text": "NodeList" } } ], "description": "Gets all valid error messages from errored counters.", "return": { "type": { "text": "Array" } }, "privacy": "private" }, { "kind": "method", "name": "updateValidity", "description": "Updates the validity of the counter group based on the validity of its counters.\nThis method checks all counters within the group, determines if any are invalid, and updates the group's validity state and error message accordingly.\nIf any counter is invalid, it generates a combined error message from all invalid counters.", "return": { "type": { "text": "void" } }, "privacy": "private" }, { "kind": "method", "name": "hideBib", "description": "Hides the dropdown bib if its open.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "showBib", "description": "Shows the dropdown bib if there are options to show.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "configureDropdownCounters", "description": "Configures the dropdown counters by selecting all `auro-counter` elements,\nappending them to the `auro-counter-wrapper` element within the shadow DOM,\nand setting up keyboard navigation and input event listeners.", "privacy": "private" }, { "kind": "method", "name": "configureBibtemplate", "description": "This sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.", "privacy": "private" }, { "kind": "method", "name": "handleSlotChange", "parameters": [ { "name": "event", "description": "`slotchange` event.", "type": { "text": "Event" } } ], "description": "Watch for slot changes and recalculate the menuoptions.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "safeNumberConversion", "parameters": [ { "name": "value", "description": "The value to convert.", "type": { "text": "*" } } ], "description": "Safely converts a value to a number, returning 0 if invalid.", "privacy": "private", "return": { "type": { "text": "number" } } }, { "kind": "method", "name": "updateValue", "description": "Updates the aggregate value based on the values of contained auro-counter components.\nThis method queries for all `auro-counter` elements, sums their values, and updates the component's `value` property.\nAdditionally, it iterates through each counter and calls `manageDisabled()` on it.", "privacy": "private" }, { "kind": "method", "name": "updateValueText", "description": "Updates the value text in the dropdown trigger based on the counters in the counter group.", "privacy": "private" }, { "kind": "method", "name": "validate", "parameters": [ { "name": "force", "default": "false", "description": "Whether to force validation.", "optional": true, "type": { "text": "boolean" } } ], "description": "Validates value." }, { "kind": "method", "name": "reset", "description": "Resets the counter group to its initial state by resetting each child counter and clearing validity.\nEach child reset dispatches an `input` event, which triggers `updateValue()` to recompute `value`/`total`.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-counter-group\"", "description": "The name of the element that you want to register.", "optional": true, "type": { "text": "string" } } ], "description": "Registers the custom element with the browser." }, { "kind": "method", "name": "renderHelpText", "description": "Returns HTML for the help text and error message.", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "method", "name": "renderValidationErrorIcon", "description": "Returns HTML for the validation error icon.", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "method", "name": "renderCounterDropdown", "description": "Render the dropdown structure for the counter group.", "return": { "type": { "text": "TemplateResult" } }, "privacy": "private" }, { "kind": "method", "name": "renderDropdownTrigger", "description": "Render the dropdown trigger for the dropdown.", "return": { "type": { "text": "TemplateResult" } }, "privacy": "private" }, { "kind": "method", "name": "renderBibTemplate", "description": "Render the dropdown bib template for the dropdown.", "return": { "type": { "text": "TemplateResult" } }, "privacy": "private" }, { "kind": "method", "name": "renderFullscreenSlots", "description": "Render the fullscreen bib slots for the dropdown.", "return": { "type": { "text": "TemplateResult" } }, "privacy": "private" }, { "kind": "method", "name": "renderCounterGroup", "parameters": [ { "name": "isInDropdown", "default": "this.isDropdown", "description": "Whether the counter group is inside a dropdown.", "type": { "text": "boolean" } } ], "description": "Render the counter group container.", "return": { "type": { "text": "TemplateResult" } }, "privacy": "private" }, { "kind": "method", "name": "renderLayoutClassic", "description": "Render the classic layout.", "return": { "type": { "text": "TemplateResult" } }, "privacy": "private" }, { "kind": "method", "name": "renderLayoutSnowflake", "description": "Render the snowflake layout.", "return": { "type": { "text": "TemplateResult" } }, "privacy": "private" }, { "kind": "method", "name": "renderLayout", "parameters": [ { "name": "ForcedLayout", "description": "Optionally force a specific layout for rendering.", "optional": true, "type": { "text": "string" } } ], "description": "Renders the component by layout type.", "return": { "type": { "text": "TemplateResult" } }, "privacy": "private" }, { "kind": "field", "name": "appearance", "privacy": "public", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "\"default\"", "attribute": "appearance", "reflects": true }, { "kind": "field", "name": "max", "privacy": "public", "type": { "text": "number" }, "description": "The maximum value allowed for the whole group of counters.", "default": "undefined", "attribute": "max", "reflects": true }, { "kind": "field", "name": "min", "privacy": "public", "type": { "text": "number" }, "description": "The minimum value allowed for the whole group of counters.", "default": "undefined", "attribute": "min", "reflects": true }, { "kind": "field", "name": "onDark", "privacy": "public", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance` instead.", "attribute": "ondark", "reflects": true, "deprecated": "Use `appearance` instead.", "default": "false", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "field", "name": "total", "privacy": "public", "type": { "text": "number" }, "description": "The total value of the counters.", "default": "undefined", "attribute": "total" }, { "kind": "field", "name": "validity", "privacy": "public", "type": { "text": "string" }, "description": "Reflects the validity state.", "default": "undefined", "attribute": "validity", "reflects": true }, { "kind": "field", "name": "value", "privacy": "public", "type": { "text": "Record" }, "description": "The current individual values of the nested counters.", "default": "undefined", "attribute": "value" }, { "kind": "field", "name": "matchWidth", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the dropdown will expand to the width of its parent container.\nOtherwise, the dropdown width will be determined by its content.", "default": "false", "attribute": "matchwidth", "reflects": true }, { "kind": "field", "name": "isDropdown", "privacy": "public", "type": { "text": "boolean" }, "description": "If true, the counter group is displayed as a dropdown.", "default": "false", "attribute": "isdropdown" }, { "kind": "field", "name": "fullscreenBreakpoint", "privacy": "public", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'" }, "description": "Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.\n\nWhen expanded, the dropdown will automatically display in fullscreen mode\nif the screen size is equal to or smaller than the selected breakpoint.", "default": "'sm'", "attribute": "fullscreenbreakpoint", "reflects": true }, { "kind": "field", "name": "largeFullscreenHeadline", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, make bib.fullscreen.headline in HeadingDisplay.\nOtherwise, Heading 600.", "default": "false", "attribute": "largefullscreenheadline", "reflects": true }, { "kind": "field", "name": "autoPlacement", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, bib's position will be automatically calculated where to appear.", "default": "false", "attribute": "autoplacement", "reflects": true }, { "kind": "field", "name": "noFlip", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the bib will NOT flip to an alternate position\nwhen there isn't enough space in the specified `placement`.", "default": "false", "attribute": "noflip", "reflects": true }, { "kind": "field", "name": "shift", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the dropdown will shift its position to avoid being cut off by the viewport.", "default": "false", "attribute": "shift", "reflects": true }, { "kind": "field", "name": "placement", "privacy": "public", "type": { "text": "'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'" }, "description": "Position where the bib should appear relative to the trigger.", "default": "'bottom-start'", "attribute": "placement", "reflects": true }, { "kind": "field", "name": "counters", "privacy": "private", "default": "undefined" }, { "kind": "field", "name": "dropdown", "privacy": "private", "default": "undefined" }, { "kind": "field", "name": "bibtemplate", "privacy": "private", "default": "undefined" }, { "kind": "field", "name": "validation", "privacy": "private", "default": "new AuroFormValidation()" }, { "kind": "field", "name": "dropdownTag", "description": "Dynamically generated dropdown tag.", "privacy": "private", "type": { "text": "string" } }, { "kind": "field", "name": "bibtemplateTag", "description": "Dynamically generated bibtempalate tag.", "privacy": "private", "type": { "text": "string" } }, { "kind": "field", "name": "helpTextTag", "description": "Dynamically generated helpText tag.", "privacy": "private", "type": { "text": "string" } }, { "kind": "field", "name": "iconTag", "privacy": "private" }, { "kind": "field", "name": "error", "privacy": "public", "type": { "text": "string" }, "description": "The current error message to display when the component is invalid.", "attribute": "error" }, { "kind": "field", "name": "errorMessage", "privacy": "private", "type": { "text": "string" }, "description": "The current error message to display when the component is invalid.\nThis is set by validation and is not available to consumers." }, { "kind": "field", "name": "layout", "privacy": "public", "type": { "text": "'classic' | 'snowflake'" }, "description": "Determines the layout style of the counter group when it is a dropdown.", "default": "'classic'", "attribute": "layout", "reflects": true }, { "kind": "field", "name": "shape", "privacy": "public", "type": { "text": "'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'" }, "description": "Sets the shape of the counter group when it is a dropdown.", "default": "'classic'", "attribute": "shape", "reflects": true }, { "kind": "field", "name": "size", "privacy": "public", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, "description": "Sets the size of the counter group when it is a dropdown.", "default": "'xl'", "attribute": "size", "reflects": true }, { "kind": "field", "name": "offset", "privacy": "public", "type": { "text": "number" }, "description": "Gap between the trigger element and bib.", "default": "0", "attribute": "offset", "reflects": true }, { "kind": "field", "name": "valueText", "privacy": "private", "type": { "text": "string" }, "description": "The current text in the valueText slot." }, { "kind": "field", "name": "componentHasFocus", "description": "Returns true if the element has focus.", "privacy": "private", "return": { "type": { "text": "boolean" } }, "readonly": true, "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetShapeClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetLayoutClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "updateComponentArchitecture", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } } ], "events": [ { "name": "input", "type": { "text": "CustomEvent" }, "description": "Notifies that the counter group's value has changed." } ], "attributes": [ { "name": "appearance", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "\"default\"", "fieldName": "appearance" }, { "name": "autoplacement", "type": { "text": "boolean" }, "description": "If declared, bib's position will be automatically calculated where to appear.", "default": "false", "fieldName": "autoPlacement" }, { "name": "error", "type": { "text": "string" }, "description": "The current error message to display when the component is invalid.", "fieldName": "error" }, { "name": "fullscreenbreakpoint", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'" }, "description": "Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.\n\nWhen expanded, the dropdown will automatically display in fullscreen mode\nif the screen size is equal to or smaller than the selected breakpoint.", "default": "'sm'", "fieldName": "fullscreenBreakpoint" }, { "name": "isdropdown", "type": { "text": "boolean" }, "description": "If true, the counter group is displayed as a dropdown.", "default": "false", "fieldName": "isDropdown" }, { "name": "layout", "type": { "text": "'classic' | 'snowflake'" }, "description": "Determines the layout style of the counter group when it is a dropdown.", "default": "'classic'", "fieldName": "layout" }, { "name": "shape", "type": { "text": "'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'" }, "description": "Sets the shape of the counter group when it is a dropdown.", "default": "'classic'", "fieldName": "shape" }, { "name": "size", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, "description": "Sets the size of the counter group when it is a dropdown.", "default": "'xl'", "fieldName": "size" }, { "name": "matchwidth", "type": { "text": "boolean" }, "description": "If declared, the dropdown will expand to the width of its parent container.\nOtherwise, the dropdown width will be determined by its content.", "default": "false", "fieldName": "matchWidth" }, { "name": "max", "type": { "text": "number" }, "description": "The maximum value allowed for the whole group of counters.", "default": "undefined", "fieldName": "max" }, { "name": "min", "type": { "text": "number" }, "description": "The minimum value allowed for the whole group of counters.", "default": "undefined", "fieldName": "min" }, { "name": "largefullscreenheadline", "type": { "text": "boolean" }, "description": "If declared, make bib.fullscreen.headline in HeadingDisplay.\nOtherwise, Heading 600.", "default": "false", "fieldName": "largeFullscreenHeadline" }, { "name": "noflip", "type": { "text": "boolean" }, "description": "If declared, the bib will NOT flip to an alternate position\nwhen there isn't enough space in the specified `placement`.", "default": "false", "fieldName": "noFlip" }, { "name": "shift", "type": { "text": "boolean" }, "description": "If declared, the dropdown will shift its position to avoid being cut off by the viewport.", "default": "false", "fieldName": "shift" }, { "name": "offset", "type": { "text": "number" }, "description": "Gap between the trigger element and bib.", "default": "0", "fieldName": "offset" }, { "name": "ondark", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance` instead.", "fieldName": "onDark", "deprecated": "Use `appearance` instead.", "default": "false", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "name": "placement", "type": { "text": "'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'" }, "description": "Position where the bib should appear relative to the trigger.", "default": "'bottom-start'", "fieldName": "placement" }, { "name": "total", "type": { "text": "number" }, "description": "The total value of the counters.", "default": "undefined", "fieldName": "total" }, { "name": "validity", "type": { "text": "string" }, "description": "Reflects the validity state.", "default": "undefined", "fieldName": "validity" }, { "name": "value", "type": { "text": "Record" }, "description": "The current individual values of the nested counters.", "default": "undefined", "fieldName": "value" } ], "superclass": { "name": "AuroElement", "module": "/components/layoutElement/src/auroElement.js" }, "tagName": "auro-counter-group", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroCounterGroup", "declaration": { "name": "AuroCounterGroup", "module": "components/counter/src/auro-counter-group.js" } } ] }, { "kind": "javascript-module", "path": "components/counter/src/auro-counter-wrapper.js", "declarations": [ { "kind": "class", "description": "Wrapper element for auro-counter elements in an application to provide layout structure for multiple counters.", "name": "AuroCounterWrapper", "slots": [ { "description": "Slot for counter elements.", "name": "Default" } ], "members": [ { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-counter-wrapper\"", "description": "Custom element name to register.", "optional": true, "type": { "text": "string" } } ], "description": "Registers the custom element with the browser." } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "auro-counter-wrapper", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroCounterWrapper", "declaration": { "name": "AuroCounterWrapper", "module": "components/counter/src/auro-counter-wrapper.js" } }, { "kind": "custom-element-definition", "name": "auro-counter-wrapper", "declaration": { "name": "AuroCounterWrapper", "module": "components/counter/src/auro-counter-wrapper.js" } } ] }, { "kind": "javascript-module", "path": "components/counter/src/auro-counter.js", "declarations": [ { "kind": "class", "description": "The `auro-counter` element provides a flexible counter interface with increment and decrement buttons, supporting optional sub-labels and disabled states.", "name": "AuroCounter", "cssParts": [ { "description": "The container for the counter's spinbutton controls and value.", "name": "counterControl" }, { "description": "The decrement button.", "name": "controlMinus" }, { "description": "The increment button.", "name": "controlPlus" }, { "description": "The help text and error message container.", "name": "helpText" } ], "slots": [ { "description": "Main label content for the counter.", "name": "default" }, { "description": "Accessible label for the decrement button.", "name": "ariaLabel.minus" }, { "description": "Accessible label for the increment button.", "name": "ariaLabel.plus" }, { "description": "Help text content for the counter.", "name": "helpText" }, { "description": "Descriptive content for the counter.", "name": "description" } ], "members": [ { "kind": "field", "name": "shadowRootOptions", "static": true, "readonly": true }, { "kind": "method", "name": "_initializeDefaults" }, { "kind": "field", "name": "value", "privacy": "public", "type": { "text": "number" }, "description": "Sets the value of the counter. If the provided value is undefined, null, or cannot be converted to a number, the internal value will be set to undefined.", "return": { "type": { "text": "number|undefined" } }, "parameters": [ { "description": "The value to set for the counter. Can be a number, a string that can be converted to a number, undefined, or null.", "name": "val", "type": { "text": "number|string|undefined|null" } } ], "attribute": "value" }, { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-counter\"", "description": "The name of the element that you want to register.", "optional": true, "type": { "text": "string" } } ], "description": "Registers the custom element with the browser." }, { "kind": "method", "name": "increment", "parameters": [ { "name": "value", "description": "The amount to increment by.", "optional": true, "type": { "text": "number" } } ], "description": "Increments the counter value by 1. If a value is provided, it increments by that amount.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "decrement", "parameters": [ { "name": "value", "description": "The amount to decrement by.", "optional": true, "type": { "text": "number" } } ], "description": "Decrements the value of the counter by 1. If a value is provided, it decrements by that amount.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "focusControl", "description": "Moves focus to the spinbutton control container.\nThe +/- buttons are internal `tabindex=\"-1\"` controls; the container is the\nwidget's single focusable element. `focusVisible: true` forces the container's\n`:focus-visible` ring to render even though the interaction was a pointer\nclick, so focus stays visible on the counter after using its buttons.", "privacy": "private" }, { "kind": "method", "name": "handleControlClick", "parameters": [ { "name": "action", "description": "The control action to perform.", "type": { "text": "'increment' | 'decrement'" } } ], "description": "Handles a pointer click on a control button.\nA pointer click focuses the clicked button, so if the value change disables\nthat button at an extreme the browser would drop focus to the document body.\nMove focus to the spinbutton container first, then change the value: focus is\nno longer on the button when it becomes disabled, so it is never lost and the\ncounter (and any enclosing dropdown) stays operable (AB#1634231).", "privacy": "private" }, { "kind": "method", "name": "initValue", "description": "Initializes the value of the counter.\nIf the current value is undefined, it sets the value to the minimum value.", "privacy": "private" }, { "kind": "method", "name": "isIncrementDisabled", "parameters": [ { "name": "extrema", "description": "The extreme value (either min or max) to compare against the current value.", "type": { "text": "number" } } ], "description": "Determines if the increment button should be disabled based on the current value and extrema.", "return": { "type": { "text": "boolean" } }, "privacy": "private" }, { "kind": "method", "name": "validate", "parameters": [ { "name": "force", "default": "false", "description": "Whether to force validation.", "optional": true, "type": { "text": "boolean" } } ], "description": "Validates value." }, { "kind": "method", "name": "reset", "description": "Resets the counter to its default state, clearing validity/touched state and returning\nthe value to `min` — matching the clear-on-reset behavior of the other Auro form elements.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "setTagAttribute", "parameters": [ { "name": "tagName", "description": "The tag name to set as an attribute.", "type": { "text": "string" } } ], "description": "Sets an attribute that matches the default tag name if the tag name is not the default.", "privacy": "private" }, { "kind": "method", "name": "onDefaultSlotChange", "parameters": [ { "name": "event", "description": "The event object representing the slot change event.", "type": { "text": "Event" } } ], "description": "Handles the change event for the default slot.\nUpdates the defaultSlot property with the trimmed text content of the first assigned node.", "privacy": "private" }, { "kind": "method", "name": "renderHelpText", "description": "Returns HTML for the help text and error message.", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "field", "name": "appearance", "privacy": "public", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "'default'", "attribute": "appearance", "reflects": true }, { "kind": "field", "name": "defaultSlot", "privacy": "private", "type": { "text": "string" }, "description": "The default slot content.", "attribute": "defaultslot" }, { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "description": "Indicates if the counter is disabled.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "disableMax", "privacy": "private", "type": { "text": "boolean" }, "description": "Group will attach to counter to disable the increment button.", "attribute": "disablemax" }, { "kind": "field", "name": "disableMin", "privacy": "private", "type": { "text": "boolean" }, "description": "Group will attach to counter to disable the decrement button.", "attribute": "disablemin" }, { "kind": "field", "name": "error", "privacy": "public", "type": { "text": "string" }, "description": "Error state and message.\nTrue if set, value is the error message.", "attribute": "error" }, { "kind": "field", "name": "max", "privacy": "public", "type": { "text": "number" }, "description": "The maximum value for the counter.", "attribute": "max", "reflects": true }, { "kind": "field", "name": "min", "privacy": "public", "type": { "text": "number" }, "description": "The minimum value for the counter.", "attribute": "min", "reflects": true }, { "kind": "field", "name": "onDark", "privacy": "public", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "deprecated": "Use `appearance=\"inverse\"` instead.", "attribute": "ondark", "reflects": true }, { "kind": "field", "name": "validity", "privacy": "public", "type": { "text": "string" }, "description": "The validity state of the counter.", "attribute": "validity", "reflects": true } ], "events": [ { "name": "input", "type": { "text": "CustomEvent" }, "description": "Notifies that the counter's value has changed." } ], "attributes": [ { "name": "appearance", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "'default'", "fieldName": "appearance" }, { "name": "defaultslot", "type": { "text": "string" }, "description": "The default slot content.", "fieldName": "defaultSlot" }, { "name": "disabled", "type": { "text": "boolean" }, "description": "Indicates if the counter is disabled.", "fieldName": "disabled" }, { "name": "disablemax", "type": { "text": "boolean" }, "description": "Group will attach to counter to disable the increment button.", "fieldName": "disableMax" }, { "name": "disablemin", "type": { "text": "boolean" }, "description": "Group will attach to counter to disable the decrement button.", "fieldName": "disableMin" }, { "name": "error", "type": { "text": "string" }, "description": "Error state and message.\nTrue if set, value is the error message.", "fieldName": "error" }, { "name": "max", "type": { "text": "number" }, "description": "The maximum value for the counter.", "fieldName": "max" }, { "name": "min", "type": { "text": "number" }, "description": "The minimum value for the counter.", "fieldName": "min" }, { "name": "ondark", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "deprecated": "Use `appearance=\"inverse\"` instead.", "fieldName": "onDark" }, { "name": "validity", "type": { "text": "string" }, "description": "The validity state of the counter.", "fieldName": "validity" }, { "name": "value", "type": { "text": "number" }, "description": "Sets the value of the counter. If the provided value is undefined, null, or cannot be converted to a number, the internal value will be set to undefined.", "return": { "type": { "text": "number|undefined" } }, "parameters": [ { "description": "The value to set for the counter. Can be a number, a string that can be converted to a number, undefined, or null.", "name": "val", "type": { "text": "number|string|undefined|null" } } ], "fieldName": "value" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "auro-counter", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroCounter", "declaration": { "name": "AuroCounter", "module": "components/counter/src/auro-counter.js" } } ] }, { "kind": "javascript-module", "path": "components/counter/src/buttonVersion.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "12.3.2", "module": "components/counter/src/buttonVersion.js" } } ] }, { "kind": "javascript-module", "path": "components/counter/src/counterGroupKeyboardStrategy.js", "declarations": [ { "kind": "variable", "name": "counterGroupKeyboardStrategy", "type": { "text": "object" }, "default": "{ Escape(component, evt) { if (!component.dropdown || !component.dropdown.isPopoverVisible) { return; } // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups. // Because stopPropagation prevents the document-level floatingUI keydown handler from // seeing this event, we must also close the dropdown explicitly. evt.stopPropagation(); component.dropdown.hide(); }, Tab(component, evt, ctx) { // Forward Tab already exits past the bib content and the focusout handler // closes the bib. Fullscreen relies on the dialog's native focus trapping. if (!ctx.isExpanded || ctx.isModal || !evt.shiftKey) { return; } // The trigger precedes the bib content in the flattened tab order, so a // native Shift+Tab off the first counter lands back on the trigger and // leaves the bib open. Only intercept when focus is on the first focusable // in the bib; otherwise let the browser move to the previous counter. // `composedPath()` reports the real event origin through every shadow // boundary, unlike `document.activeElement`, which retargets to the first // slotted counter and cannot tell the counters apart. const focusables = getFocusableElements(component.dropdown.bibContent); if (!focusables.length) { return; } const path = evt.composedPath(); const activeIndex = focusables.findIndex((el) => path.includes(el)); if (activeIndex !== 0) { return; } const previousTabStop = getPreviousTabStop(component); // Always suppress the native Shift+Tab. Otherwise it fires against the bib // as it is torn down and lands focus on the trigger (which precedes the // first counter), re-opening the exact loop this handler prevents. When // nothing precedes the group, focus falls to the body instead of the // trigger, which reads as exiting the group backward. evt.preventDefault(); component.hideBib(); if (!previousTabStop) { return; } doubleRaf(() => previousTabStop.focus()); }, }" } ], "exports": [ { "kind": "js", "name": "counterGroupKeyboardStrategy", "declaration": { "name": "counterGroupKeyboardStrategy", "module": "components/counter/src/counterGroupKeyboardStrategy.js" } } ] }, { "kind": "javascript-module", "path": "components/counter/src/iconVersion.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "9.1.2", "module": "components/counter/src/iconVersion.js" } } ] }, { "kind": "javascript-module", "path": "components/counter/src/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "AuroCounter", "declaration": { "name": "AuroCounter", "module": "components/counter/src/index.js" } }, { "kind": "js", "name": "AuroCounterGroup", "declaration": { "name": "AuroCounterGroup", "module": "components/counter/src/index.js" } } ] }, { "kind": "javascript-module", "path": "components/counter/src/keyboardStrategy.js", "declarations": [ { "kind": "variable", "name": "keyboardStrategy", "type": { "text": "object" }, "default": "{ ArrowUp(component, _evt) { if (component.disabled) { return; } _evt.preventDefault(); component.increment(); }, ArrowDown(component, _evt) { if (component.disabled) { return; } _evt.preventDefault(); component.decrement(); } }" } ], "exports": [ { "kind": "js", "name": "keyboardStrategy", "declaration": { "name": "keyboardStrategy", "module": "components/counter/src/keyboardStrategy.js" } } ] }, { "kind": "javascript-module", "path": "components/counter/src/registered.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "components/datepicker/src/auro-calendar-cell.js", "declarations": [ { "kind": "class", "description": "The `auro-calendar-cell` component renders a single selectable day button within a calendar month grid.", "name": "AuroCalendarCell", "cssParts": [ { "description": "Use for customizing the style of the date slot content container.", "name": "dateSlot" } ], "members": [ { "kind": "field", "name": "locale", "privacy": "public", "type": { "text": "string" }, "description": "The BCP 47 locale tag used to format the cell's date.", "attribute": "locale" }, { "kind": "method", "name": "dateChanged", "parameters": [ { "name": "dateFrom", "description": "Depart date.", "type": { "text": "Number" } }, { "name": "dateTo", "description": "Return date.", "type": { "text": "Number" } }, { "name": "day", "description": "An object containing the dateFrom and day of month values.", "type": { "text": "Object" } } ], "description": "Handles selected state of the calendar cell when the selection changes.\nAlso clears any imperative range preview classes so classMap is the\nsole source of truth after a selection update.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleTap", "description": "Handles user click events and calls datepicker to update the value(s).", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleHover", "description": "Handles user hover events and dispatches a custom event.\nDoes NOT set any reactive properties — the range preview is handled\nimperatively by the calendar component to avoid O(N) re-renders.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleFocus", "description": "Handles focus events on the cell button.\nDispatches a lightweight event for the calendar to handle SR\nannouncements and range preview updates without triggering\nany Lit lifecycle updates.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "isOutOfRange", "parameters": [ { "name": "day", "description": "An object containing the dateFrom and day of month values.", "type": { "text": "Object" } }, { "name": "min", "description": "The minimum date value.", "type": { "text": "Number" } }, { "name": "max", "description": "The maximum date value.", "type": { "text": "Number" } } ], "description": "Checks if the current date is outside the valid min/max range.\nOut-of-range cells are not focusable and are hidden from screen readers.", "privacy": "private", "return": { "type": { "text": "Boolean" } } }, { "kind": "method", "name": "isBlackout", "description": "Checks if the current date is a blackout date (in disabledDays but within range).\nBlackout cells are focusable but not selectable.", "privacy": "private", "return": { "type": { "text": "Boolean" } } }, { "kind": "method", "name": "isEnabled", "parameters": [ { "name": "day", "description": "An object containing the dateFrom and day of month values.", "type": { "text": "Object" } }, { "name": "min", "description": "The minimum date value.", "type": { "text": "Number" } }, { "name": "max", "description": "The maximum date value.", "type": { "text": "Number" } }, { "name": "disabledDays", "description": "An array of disabled dates.", "type": { "text": "Array" } } ], "description": "Checks if the current date is disabled based on min/max range or the\nlegacy disabledDays timestamp list. Sets the `disabled` attribute on the\nhost when the date falls outside the allowed range or appears in\ndisabledDays. Note: blackout dates are handled separately by `isBlackout()`.", "privacy": "private", "return": { "type": { "text": "Boolean" } } }, { "kind": "method", "name": "getCellId", "description": "Generates a unique cell ID in the format cell-YYYY-MM-DD.", "privacy": "private", "return": { "type": { "text": "String" } } }, { "kind": "method", "name": "getAriaLabel", "description": "Generates a localized aria-label for the cell button using Intl.DateTimeFormat.\nIncludes range position and blackout status.", "privacy": "private", "return": { "type": { "text": "String" } } }, { "kind": "method", "name": "getRangePosition", "description": "Determines the range position of this cell relative to the current selection.", "privacy": "private", "return": { "type": { "text": "String|null" } } }, { "kind": "method", "name": "isDepartDate", "parameters": [ { "name": "day", "description": "An object containing the dateFrom and day of month values.", "type": { "text": "Object" } }, { "name": "dateFrom", "description": "Depart date.", "type": { "text": "Number" } } ], "description": "Checks if the current date is the depart date.", "privacy": "private", "return": { "type": { "text": "Boolean" } } }, { "kind": "method", "name": "isReturnDate", "parameters": [ { "name": "day", "description": "An object containing the dateFrom and day of month values.", "type": { "text": "Object" } }, { "name": "dateFrom", "description": "Depart date.", "type": { "text": "Number" } }, { "name": "dateTo", "description": "Return date.", "type": { "text": "Number" } } ], "description": "Checks if the current date is the return date.", "privacy": "private", "return": { "type": { "text": "Boolean" } } }, { "kind": "method", "name": "isInRange", "parameters": [ { "name": "day", "description": "An object containing the dateFrom and day of month values.", "type": { "text": "Object" } }, { "name": "dateFrom", "description": "Depart date.", "type": { "text": "Number" } }, { "name": "dateTo", "description": "Return date.", "type": { "text": "Number" } } ], "description": "Checks if the current date is between dateFrom and dateTo.", "privacy": "private", "return": { "type": { "text": "Boolean" } } }, { "kind": "method", "name": "isLastHoveredDate", "parameters": [ { "name": "day", "description": "An object containing the dateFrom and day of month values.", "type": { "text": "Object" } }, { "name": "dateFrom", "description": "Depart date.", "type": { "text": "Number" } }, { "name": "dateTo", "description": "Return date.", "type": { "text": "Number" } }, { "name": "hoveredDate", "description": "Hovered date.", "type": { "text": "Number" } } ], "description": "Determines the hovered date appearing latest in the calendar.", "privacy": "private", "return": { "type": { "text": "Boolean" } } }, { "kind": "method", "name": "isReferenceDate", "parameters": [ { "name": "dateStr", "description": "The date string in YYYY_MM_DD format.", "type": { "text": "Object" } } ], "description": "Checks if the current date is a referenced date.", "return": { "type": { "text": "" } } }, { "kind": "method", "name": "getTitle", "parameters": [ { "name": "date", "description": "The date of the auro-calendar-cell.", "type": { "text": "Number" } } ], "description": "Determines the title of the auro-calendar-cell.", "privacy": "private", "return": { "type": { "text": "String" } } }, { "kind": "method", "name": "setDateSlotName", "description": "Gets the name of the date slot.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleSlotContent", "description": "Remove existing cell slot content and clone any current slot content from the root `auro-datepicker` which matches this cells date.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "_initFromAncestors", "description": "Wires the cell to its ancestor calendar-month and calendar (and, via\nthe calendar, to the datepicker). Extracted from firstUpdated() so the\nretry loop can re-attempt without recursively invoking a Lit lifecycle\nmethod (which is outside the framework's contract).", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "configurePopover", "description": "Configures the popover instance with the calendar month boundary.\nCalled from firstUpdated and updated because the popover element is only\nrendered after hasPopoverContent becomes true (set by handleSlotContent).", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "updateHostAria", "description": "Sets host-level ARIA so each cell exposes its date, selection state,\nand blackout status to assistive tech browsing the month grid.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "focusButton", "description": "Programmatically focuses the cell's interactive button element.\nUses focusVisible: true so the :focus-visible ring appears even when\nthe bib was opened via mouse click (which sets mouse input modality).", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "setActive", "description": "Imperatively marks this cell as active without triggering a Lit re-render.\nButtons stay tabindex=\"-1\" because DOM focus stays on the grid wrapper —\narrow keys move the active cell imperatively and the live region carries\nthe SR announcement.\n\nRefuses to activate out-of-range cells: those are aria-hidden, have no\nclick/focus handlers, and are filtered out of `getFocusableCells`. The\nactive class showing on a disabled cell would be visually misleading,\nso this guard is the single source of truth across every code path\nthat might call setActive (keyboard nav, focus restore, cell click).", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "clearActive", "description": "Imperatively marks this cell as inactive without triggering a Lit re-render.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "updateRangePreviewClasses", "parameters": [ { "name": "hoveredDate", "description": "Unix timestamp of the currently hovered/focused date.", "type": { "text": "Number" } }, { "name": "dateFrom", "description": "Unix timestamp of the selected departure date.", "type": { "text": "Number" } } ], "description": "Updates range preview classes imperatively (no Lit re-render).\nCalled by the calendar component when the hovered date changes\nduring range selection (dateFrom set, dateTo not yet set).", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "clearRangePreviewClasses", "description": "Clears all imperative range preview classes from the cell button.\nCalled when a selection occurs so classMap becomes the sole source of truth.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "applyCommittedRangeClasses", "description": "Re-applies the committed-range classes (inRange / rangeDepartDate /\nrangeReturnDate) imperatively from the cell's current `day`,\n`dateFrom`, and `dateTo`. Used after month navigation flushes:\nclassMap in `renderCellButton` tracks its own previous state, so a\npreceding imperative `classList.remove` (from\n`clearRangePreviewClasses`) leaves classMap thinking the class is\nstill applied. On re-render with the same class-value, classMap emits\nno delta and the class stays missing in the DOM. Re-toggling\nimperatively resyncs the DOM with the committed range.\n\nDelegates to the same `isInRange` / `isDepartDate` / `isReturnDate`\nhelpers `renderCellButton` uses, so the two code paths cannot drift\n(including whatever timestamp normalization those helpers apply).", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "renderCellButton" }, { "kind": "field", "name": "day", "privacy": "public", "type": { "text": "null" }, "description": "The day object for this cell, containing its Unix timestamp (`date`) and day-of-month title.", "default": "null", "attribute": "day" }, { "kind": "field", "name": "selected", "privacy": "public", "type": { "text": "boolean" }, "description": "Whether this cell's date is currently selected.", "default": "false", "attribute": "selected" }, { "kind": "field", "name": "dateTo", "privacy": "public", "type": { "text": "null" }, "description": "The end (return) date of the selected range as a Unix-timestamp string.", "default": "null", "attribute": "dateto" }, { "kind": "field", "name": "dateFrom", "privacy": "public", "type": { "text": "null" }, "description": "The start (depart) date of the selected range as a Unix-timestamp string.", "default": "null", "attribute": "datefrom" }, { "kind": "field", "name": "month", "privacy": "public", "type": { "text": "null" }, "description": "The month this cell belongs to.", "default": "null", "attribute": "month" }, { "kind": "field", "name": "min", "privacy": "public", "type": { "text": "null" }, "description": "The minimum selectable date as a Unix timestamp.", "default": "null", "attribute": "min" }, { "kind": "field", "name": "max", "privacy": "public", "type": { "text": "null" }, "description": "The maximum selectable date as a Unix timestamp.", "default": "null", "attribute": "max" }, { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "description": "Whether this cell is disabled because its date falls outside the min/max range.", "default": "false", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "disabledDays", "privacy": "public", "type": { "text": "number[]" }, "description": "Legacy array of Unix-timestamp dates that cannot be selected.", "deprecated": "Propagated from the legacy `auro-calendar.disabledDays`\nUnix-timestamp array. The cell honors it for backward compatibility\n(see the divergence-check fallback inside `isBlackout`), but\nconsumers should migrate to `auro-datepicker.blackoutDates`\n(YYYY-MM-DD ISO strings). The calendar emits a one-time\ndeprecation warning the first time a non-empty value is observed.", "default": "[]", "attribute": "disableddays" }, { "kind": "field", "name": "isCurrentDate", "privacy": "public", "type": { "text": "boolean" }, "description": "Whether this cell represents the current date (today).", "default": "false", "attribute": "iscurrentdate" }, { "kind": "field", "name": "_locale", "type": { "text": "null" }, "default": "null" }, { "kind": "field", "name": "dateStr", "privacy": "public", "type": { "text": "null" }, "description": "The cell's date formatted as a `YYYY_MM_DD` slot-name string.", "default": "null", "attribute": "datestr" }, { "kind": "field", "name": "renderForDateSlot", "privacy": "public", "type": { "text": "boolean" }, "description": "Whether to render the numerical date off-center to leave room below for date slot content.", "default": "false", "attribute": "renderfordateslot" }, { "kind": "field", "name": "active", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "hasPopoverContent", "privacy": "public", "type": { "text": "boolean" }, "description": "Whether this cell has popover slot content to display.", "default": "false", "attribute": "haspopovercontent" }, { "kind": "field", "name": "runtimeUtils", "default": "new AuroLibraryRuntimeUtils()" }, { "kind": "field", "name": "popoverTag" } ], "events": [ { "name": "calendar-cell-activate", "type": { "text": "CustomEvent" }, "description": "Notifies that this cell has been activated via click or tap." }, { "name": "date-is-hovered", "type": { "text": "CustomEvent" }, "description": "Notifies that this cell's date is being hovered." }, { "name": "calendar-cell-focused", "type": { "text": "CustomEvent" }, "description": "Notifies that this cell's button has received focus." } ], "attributes": [ { "name": "day", "type": { "text": "null" }, "description": "The day object for this cell, containing its Unix timestamp (`date`) and day-of-month title.", "default": "null", "fieldName": "day" }, { "name": "selected", "type": { "text": "boolean" }, "description": "Whether this cell's date is currently selected.", "default": "false", "fieldName": "selected" }, { "name": "dateto", "type": { "text": "null" }, "description": "The end (return) date of the selected range as a Unix-timestamp string.", "default": "null", "fieldName": "dateTo" }, { "name": "datefrom", "type": { "text": "null" }, "description": "The start (depart) date of the selected range as a Unix-timestamp string.", "default": "null", "fieldName": "dateFrom" }, { "name": "month", "type": { "text": "null" }, "description": "The month this cell belongs to.", "default": "null", "fieldName": "month" }, { "name": "min", "type": { "text": "null" }, "description": "The minimum selectable date as a Unix timestamp.", "default": "null", "fieldName": "min" }, { "name": "max", "type": { "text": "null" }, "description": "The maximum selectable date as a Unix timestamp.", "default": "null", "fieldName": "max" }, { "name": "disabled", "type": { "text": "boolean" }, "description": "Whether this cell is disabled because its date falls outside the min/max range.", "default": "false", "fieldName": "disabled" }, { "name": "disableddays", "type": { "text": "number[]" }, "description": "Legacy array of Unix-timestamp dates that cannot be selected.", "deprecated": "Propagated from the legacy `auro-calendar.disabledDays`\nUnix-timestamp array. The cell honors it for backward compatibility\n(see the divergence-check fallback inside `isBlackout`), but\nconsumers should migrate to `auro-datepicker.blackoutDates`\n(YYYY-MM-DD ISO strings). The calendar emits a one-time\ndeprecation warning the first time a non-empty value is observed.", "default": "[]", "fieldName": "disabledDays" }, { "name": "iscurrentdate", "type": { "text": "boolean" }, "description": "Whether this cell represents the current date (today).", "default": "false", "fieldName": "isCurrentDate" }, { "name": "locale", "type": { "text": "string" }, "description": "The BCP 47 locale tag used to format the cell's date.", "fieldName": "locale" }, { "name": "datestr", "type": { "text": "null" }, "description": "The cell's date formatted as a `YYYY_MM_DD` slot-name string.", "default": "null", "fieldName": "dateStr" }, { "name": "renderfordateslot", "type": { "text": "boolean" }, "description": "Whether to render the numerical date off-center to leave room below for date slot content.", "default": "false", "fieldName": "renderForDateSlot" }, { "name": "haspopovercontent", "type": { "text": "boolean" }, "description": "Whether this cell has popover slot content to display.", "default": "false", "fieldName": "hasPopoverContent" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "auro-formkit-calendar-cell", "customElement": true }, { "kind": "variable", "name": "blackout" } ], "exports": [ { "kind": "js", "name": "AuroCalendarCell", "declaration": { "name": "AuroCalendarCell", "module": "components/datepicker/src/auro-calendar-cell.js" } }, { "kind": "custom-element-definition", "name": "auro-formkit-calendar-cell", "declaration": { "name": "AuroCalendarCell", "module": "components/datepicker/src/auro-calendar-cell.js" } } ] }, { "kind": "javascript-module", "path": "components/datepicker/src/auro-calendar-month.js", "declarations": [ { "kind": "class", "description": "The `auro-calendar-month` component renders a single localized month grid of selectable day cells within the calendar.", "name": "AuroCalendarMonth", "members": [ { "kind": "method", "name": "computeCurrentMonthName", "parameters": [ { "name": "month", "description": "The month number (1-12).", "type": { "text": "Number" } } ], "description": "Returns month name to be rendered in the calendar header.", "privacy": "private", "return": { "type": { "text": "String" } } }, { "kind": "method", "name": "getHeadingId", "description": "Returns the unique heading ID for this month, used by aria-labelledby.", "privacy": "private", "return": { "type": { "text": "String" } } }, { "kind": "method", "name": "localeChanged" }, { "kind": "method", "name": "renderDayOfWeek", "parameters": [ { "name": "dayOfWeek", "description": "The short day name.", "type": { "text": "String" } }, { "name": "index", "description": "The index in the dayNamesOfTheWeek array.", "type": { "text": "Number" } } ], "description": "Renders a day-of-week header with abbr attribute for the full day name.", "privacy": "private", "return": { "type": { "text": "Object" } } }, { "kind": "method", "name": "getFocusableCells", "description": "Returns all focusable cell elements (enabled + blackout, not out-of-range) in this month.", "return": { "type": { "text": "Array" } } }, { "kind": "method", "name": "handleDateHovered", "parameters": [ { "name": "event", "description": "The date-is-hovered event from a cell.", "type": { "text": "CustomEvent" } } ], "description": "Overrides the base class handler to prevent setting `this.hoveredDate`\nas a reactive property. Instead, just dispatches the event upward so\nthe calendar can handle range preview imperatively.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleTbodyMouseLeave", "description": "Dispatches a bubbling event when the mouse leaves the date grid body\nso the parent calendar can clear the range hover preview.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "renderWeek", "parameters": [ { "name": "week" } ] }, { "kind": "method", "name": "renderDay", "parameters": [ { "name": "day" } ] }, { "kind": "field", "name": "monthFirst", "privacy": "public", "type": { "text": "boolean" }, "description": "When set, the month name is displayed before the year in the header.", "attribute": "monthfirst", "reflects": true }, { "kind": "field", "name": "localeCode", "privacy": "public", "type": { "text": "string" }, "description": "BCP 47 locale tag (such as `en-US`) for calendar localization.\nAs wc-range-datepicker expects a `locale` prop, we use `localeCode` to avoid conflicts.", "attribute": "localecode" }, { "kind": "field", "name": "monthNames", "privacy": "public", "type": { "text": "string[]" }, "description": "Names of all 12 months. When omitted, names are derived from `localeCode`.", "attribute": "monthnames" } ], "events": [ { "name": "hovered-date-changed", "type": { "text": "CustomEvent" }, "description": "Notifies that the date currently hovered within the month grid has changed." }, { "name": "calendar-month-mouseleave", "type": { "text": "CustomEvent" }, "description": "Notifies that the mouse has left the month's date grid so the range hover preview can be cleared." } ], "attributes": [ { "name": "monthfirst", "type": { "text": "boolean" }, "description": "When set, the month name is displayed before the year in the header.", "fieldName": "monthFirst" }, { "name": "localecode", "type": { "text": "string" }, "description": "BCP 47 locale tag (such as `en-US`) for calendar localization.\nAs wc-range-datepicker expects a `locale` prop, we use `localeCode` to avoid conflicts.", "fieldName": "localeCode" }, { "name": "monthnames", "type": { "text": "string[]" }, "description": "Names of all 12 months. When omitted, names are derived from `localeCode`.", "fieldName": "monthNames" } ], "superclass": { "name": "RangeDatepickerCalendar", "module": "/components/datepicker/src/vendor/wc-range-datepicker/range-datepicker-calendar.js" }, "tagName": "auro-formkit-calendar-month", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroCalendarMonth", "declaration": { "name": "AuroCalendarMonth", "module": "components/datepicker/src/auro-calendar-month.js" } }, { "kind": "custom-element-definition", "name": "auro-formkit-calendar-month", "declaration": { "name": "AuroCalendarMonth", "module": "components/datepicker/src/auro-calendar-month.js" } } ] }, { "kind": "javascript-module", "path": "components/datepicker/src/auro-calendar.js", "declarations": [ { "kind": "class", "description": "The `auro-calendar` component renders the calendar month(s) shown inside the datepicker dropdown and manages date selection, range preview, and keyboard navigation.", "name": "AuroCalendar", "members": [ { "kind": "field", "name": "disabledDays", "deprecated": "See constructor JSDoc — migrate to\n`auro-datepicker.blackoutDates`. The getter/setter pair exists so the\none-time deprecation warning fires as soon as a consumer assigns a\nnon-empty array (empty assignments are ignored — an empty array is\nindistinguishable from the constructor default and would produce a\nspurious warning), rather than only when `_getBlackoutSet()` happens\nto rebuild.", "return": { "type": { "text": "Array" } }, "parameters": [ { "description": "The legacy `disabledDays` array to set.", "name": "value", "type": { "text": "Array" } } ] }, { "kind": "field", "name": "centralDateObject", "return": { "type": { "text": "Date|undefined" } }, "readonly": true }, { "kind": "field", "name": "minDateObject", "return": { "type": { "text": "Date|undefined" } }, "readonly": true }, { "kind": "field", "name": "maxDateObject", "return": { "type": { "text": "Date|undefined" } }, "readonly": true }, { "kind": "method", "name": "handlePrevMonth", "parameters": [ { "name": "options", "description": "Optional settings.", "optional": true, "type": { "text": "@param {boolean} [options.skipActiveUpdate=false] - When true, skip the active cell\n * recomputation. Used by arrow key handlers that manage the active cell themselves.\n * " } } ], "description": "Updates the month and year when the user navigates to the previous calendar month.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleNextMonth", "parameters": [ { "name": "options", "description": "Optional settings.", "optional": true, "type": { "text": "@param {boolean} [options.skipActiveUpdate=false] - When true, skip the active cell\n * recomputation. Used by arrow key handlers that manage the active cell themselves.\n * " } } ], "description": "Updates the month and year when the user navigates to the next calendar month.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "announceMonthChange", "description": "Announces the current month and year via the live region after navigation.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "updateActiveCellForVisibleMonth", "description": "Updates the active cell after month navigation (prev/next buttons).\nAlways moves the active cell to the first enabled date in the newly\nvisible months so that tabbing back to the grid lands on an enabled cell.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "_afterMonthRender", "parameters": [ { "name": "callback", "description": "Runs once after the month re-render and\nthe cells' button caches have refreshed.", "type": { "text": "() => void" } } ], "description": "Schedules `callback` two animation frames out, giving the child\n`auro-formkit-calendar-month` and `auro-formkit-calendar-cell` elements\na full render-and-paint cycle to settle before the callback reads or\nmutates DOM.\n\nWhy two frames, not one:\n1. Lit batches property updates and renders in a microtask, so frame N\n schedules the render but the new DOM may not be painted yet.\n2. Cells re-cache `_cachedButton` inside their own `updateComplete.then`,\n which also lands a tick later. Reading buttons from frame N+1\n (after both renders + cache refresh have flushed) reliably hits the\n new month's cells.\n\nUsed by every code path that calls `handleNextMonth`/`handlePrevMonth`\nand then needs to inspect the freshly-rendered cells (cross-month\nkeyboard nav, boundary events, `updateActiveCellForVisibleMonth`).\nDo NOT collapse to a single rAF — it intermittently lands before\n`_cachedButton` is refreshed, which silently breaks focus restoration\nand `setActiveCell` lookups.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "renderAllCalendars", "description": "Renders all of the auro-calendar-months HTML.", "privacy": "private", "return": { "type": { "text": "Object" } } }, { "kind": "method", "name": "focusCloseButton", "description": "Focuses the close button inside the calendar's bibtemplate.\nUsed by datepicker to set initial focus when the fullscreen dialog opens.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "scrollMonthIntoView", "parameters": [ { "name": "date", "description": "The date to scroll into view.", "type": { "text": "String" } } ], "description": "Request the calendar be scrolled to a given date.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "getMonthComponents", "description": "Gets all rendered month components.", "privacy": "private", "return": { "type": { "text": "Array" } } }, { "kind": "method", "name": "pickNearestCell", "parameters": [ { "name": "cells", "description": "Focusable cells from getAllFocusableCells.", "type": { "text": "Array" } }, { "name": "targetTs", "description": "Desired Unix timestamp (seconds).", "type": { "text": "Number" } }, { "name": "direction", "description": "Navigation direction.", "type": { "text": "'next'|'prev'" } } ], "description": "Picks the focusable cell whose date is closest to targetTs. Used as a\nfallback after a month-boundary nav when the exact target date isn't\nfocusable — typically because the month re-render lagged or the date\nwas filtered out by isOutOfRange. When two cells are equidistant, the\nnavigation direction breaks the tie so the user moves the way they\npressed (forward → later cell, backward → earlier cell).", "privacy": "private", "return": { "type": { "text": "Object|null" } } }, { "kind": "method", "name": "getAllFocusableCells", "description": "Gets all focusable cells across all rendered months.", "privacy": "private", "return": { "type": { "text": "Array" } } }, { "kind": "method", "name": "setActiveCell", "parameters": [ { "name": "date", "description": "Unix timestamp of the cell to activate.", "type": { "text": "Number" } } ], "description": "Sets the active cell across all months. Only one cell has tabindex=\"0\" at a time.\nUses imperative DOM manipulation — no Lit re-render triggered. DOM focus\nstays on the grid wrapper; the live region (see getOrCreateLiveRegion)\nis what announces the active cell to assistive tech.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "focusActiveCell", "description": "Focuses the calendar grid wrapper and sets the active cell.\nDOM focus stays on the grid wrapper; the aria-live region\ntells the screen reader which cell is \"active\".", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleGridFocusIn", "parameters": [ { "name": "event", "description": "The focusin event.", "optional": true, "type": { "text": "FocusEvent" } } ], "description": "Shows the activeCell ring when the grid gains focus.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleGridFocusOut", "description": "Hides the activeCell ring when the grid loses focus.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "_getBlackoutSet", "description": "Returns a memoized Set of blackout timestamps (seconds) drawn from both\nthe legacy `disabledDays` array and the datepicker's ISO `blackoutDates`.\n\nThe cache invalidates on **reference identity** — only when the\nconsumer reassigns the array (`el.blackoutDates = [...]`), matching\nLit's own reactivity semantics for array properties. In-place mutations\non the existing array (`push`, `splice`, index assignment) will NOT\ninvalidate the cache and the new entries will be silently ignored.\nConsumers must reassign to update — see the JSDoc on\n`auro-datepicker.blackoutDates` for the recommended pattern.\n\nA shallow-equality tier was considered but rejected: it would run\nO(N) work on every cell render (this method is called per-cell via\n`isBlackout()`) and still wouldn't catch same-length value swaps,\noffering a false sense of safety.", "privacy": "private", "return": { "type": { "text": "Set" } } }, { "kind": "field", "name": "_warnedDisabledDaysDeprecation", "type": { "text": "boolean" }, "static": true, "default": "false", "description": "Per-class flag that gates the `disabledDays` deprecation warning so it\nfires exactly once per page no matter how many calendars or rebuild\ncycles encounter the legacy array.", "privacy": "private" }, { "kind": "method", "name": "_warnDisabledDaysDeprecated", "description": "One-time `console.debug` directing consumers from the legacy\n`disabledDays` Unix-timestamp API to the ISO `blackoutDates` API. Fires\nthe first time `_getBlackoutSet` rebuilds from a non-empty\n`disabledDays`; subsequent calls (on this or any other AuroCalendar\ninstance on the page) are silent.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "computeActiveDate", "parameters": [ { "name": "options", "default": "{}", "description": "Optional settings.", "optional": true, "type": { "text": "@param {boolean} [options.skipDateFrom=false] - When true, skip the selected-date\n * shortcut (step 1). Used after month navigation so the active cell lands in the\n * newly visible month instead of jumping back to the selected date's month.\n * " } } ], "description": "Computes the initial active date from data properties alone — no DOM required.\nPriority:\n 1. Selected date (dateFrom) if within range\n 2. Today's date if not disabled (in-range and not blackout)\n 3. First future non-disabled date (scans day-by-day from today up to 1 year)\n 4. First previous non-disabled date (scans day-by-day from today up to 1 year)\n 5. First enabled date in finite [min, max] range\n 5b. First enabled date scanning forward from finite min (unbounded max)\n 5c. First enabled date scanning backward from finite max (unbounded min)\n 6. First in-range date (even if blackout) so focus can land somewhere\n 7. Undefined — no valid target.", "privacy": "private", "return": { "type": { "text": "Number|undefined" } } }, { "kind": "method", "name": "isDateInRange", "parameters": [ { "name": "targetTs", "description": "Unix timestamp in seconds.", "type": { "text": "Number" } } ], "description": "Checks if a target date (unix seconds) is within the configured [min, max] range.\nReturns false if the date falls outside the range, preventing navigation\nto months where all dates are disabled.", "privacy": "private", "return": { "type": { "text": "Boolean" } } }, { "kind": "method", "name": "handleGridKeyDown", "parameters": [ { "name": "event", "description": "The keyboard event.", "type": { "text": "KeyboardEvent" } } ], "description": "Handles arrow key navigation on the calendar grid wrapper.\nFocus stays on the grid wrapper; only the visual active-cell indicator\nchanges. The live region announces the new active cell.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleMonthBoundary", "parameters": [ { "name": "event", "description": "The boundary event with direction and source date info.", "type": { "text": "CustomEvent" } } ], "description": "Handles cross-month boundary navigation events from month components.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleCellActivate", "parameters": [ { "name": "event", "description": "The activation event with target date.", "type": { "text": "CustomEvent" } } ], "description": "Handles cell activation events from month components.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleCellFocused", "parameters": [ { "name": "event", "description": "The calendar-cell-focused event.", "type": { "text": "CustomEvent" } } ], "description": "Handles focus events from calendar cells.\nUpdates the live region with an SR announcement and triggers\nthe imperative range preview if applicable.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "buildFocusAnnouncement", "parameters": [ { "name": "date", "description": "Unix timestamp (seconds) of the focused cell.", "type": { "text": "Number" } } ], "description": "Builds a full SR announcement string for a focused cell date.\nIncludes the localized date, range position, popover content,\nand blackout status.", "privacy": "private", "return": { "type": { "text": "String" } } }, { "kind": "method", "name": "getRangePositionLabel", "parameters": [ { "name": "date", "description": "Unix timestamp (seconds).", "type": { "text": "Number" } } ], "description": "Determines the range position label for a given date.", "privacy": "private", "return": { "type": { "text": "String|null" } } }, { "kind": "method", "name": "isDateBlackout", "parameters": [ { "name": "dateTs", "description": "Unix timestamp (seconds).", "type": { "text": "Number" } } ], "description": "Checks whether a given date is a blackout date. Delegates to the\nmemoized `_getBlackoutSet` so the YYYY-MM-DD parsing and the\nlegacy/ISO merge rules live in exactly one place (see `blackoutUtils.js`).", "privacy": "private", "return": { "type": { "text": "Boolean" } } }, { "kind": "method", "name": "updateRangePreview", "parameters": [ { "name": "hoveredDate", "description": "Unix timestamp of the hovered/focused date.", "type": { "text": "Number" } } ], "description": "Updates the range preview classes imperatively across all cells.\nOnly active when in range mode with dateFrom set and dateTo not yet set.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "clearRangePreview", "parameters": [ { "name": "options", "description": "Optional settings.", "optional": true, "type": { "text": "@param {boolean} [options.force=false] - When true, clears classes even\n * when both dateFrom and dateTo are set. Used by month nav handlers to\n * strip the imperative-only `lastHoveredDate` before the re-render.\n * The other two classes (`inRange`, `rangeDepartDate`) are classMap-\n * managed and get stripped as a side effect here; because classMap\n * remembers what it last emitted and does not diff against the actual\n * DOM, the following month re-render will NOT re-add them on its own.\n * Nav handlers must schedule `refreshCommittedRangeClasses` (via\n * `scheduleCommittedRangeClassRefresh`) to resync them.\n * " } } ], "description": "Clears range preview classes from all cells.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "refreshCommittedRangeClasses", "description": "Re-applies the committed-range classes across every focusable cell\nafter a month navigation. classMap in the cell tracks its own\nprevious state: once `clearRangePreview({ force: true })` strips\n`inRange`/`rangeDepartDate` imperatively before the re-render,\nclassMap's next diff sees the same class-value it emitted before and\nproduces no delta, leaving the DOM without the classes even though a\nfull range is committed. Re-applying imperatively resyncs the two\nmonths' cells with `dateFrom`/`dateTo`.\n\nIterates `getAllFocusableCells()` — out-of-range cells (blocked by\n`min`/`max`) can never carry range classes anyway, so skipping them\nis correct and cheaper than a whole-grid walk.\n\nThe cell's `applyCommittedRangeClasses` reuses the same\n`isInRange`/`isDepartDate`/`isReturnDate` helpers `renderCellButton`\nuses, so we don't parse dateFrom/dateTo here — the helpers already\nnormalize their inputs (midnight-truncation, string→int) internally.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "scheduleCommittedRangeClassRefresh", "description": "Schedules `refreshCommittedRangeClasses` to run after the month\nre-render has flushed and the cells' button caches have refreshed.\nBoth `handlePrevMonth` and `handleNextMonth` need this exact call\nshape; keeping it in one place prevents them from drifting apart.\n\nBails synchronously when a full committed range isn't set — otherwise\nevery prev/next click in single-date mode (or before the user picks\nboth dates in range mode) pays for an unused double-rAF hop.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "hoveredDateChanged", "parameters": [ { "name": "event", "description": "The hovered-date-changed event from a month.", "type": { "text": "CustomEvent" } } ], "description": "Overrides the base class handler to prevent setting `this.hoveredDate`\nas a reactive property. Instead, handles the range preview imperatively.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "scrollToActiveCell", "description": "Scrolls the calendar so the active cell is visible.\n\nWalks the flat tree (rendered, slot-aware) outward from the active\ncell's button and calls `scrollBy` on every vertically-scrollable\nancestor by whatever delta still separates the cell from that\nancestor's viewport. Native `scrollIntoView` is not used because the\ncell sits inside multiple nested scroll containers (the dropdown bib's\n``, the bibtemplate's `#bodyContainer`) and the algorithm only\nscrolls one of them on its own, leaving the cell short of the\nviewport in mobile fullscreen.\n\nUses `behavior: 'auto'` (the spec's universally-supported non-animated\nvalue) so each `scrollBy` resolves synchronously and the next\niteration's `getBoundingClientRect` reads post-scroll positions\naccurately. This also satisfies `prefers-reduced-motion` users — the\nscroll containers do not set CSS `scroll-behavior: smooth`, so `auto`\nis effectively instant.\n\nThe active cell is looked up from the cache populated by\n`setActiveCell`. On a cache miss (stale or absent) the cache is\nrefreshed from a single full scan so subsequent calls stay on the\nfast path.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "getOrCreateLiveRegion", "description": "Returns (and lazily creates) an aria-live region inside the dropdown's\n element. This placement is critical for two reasons:\n\n1. Inside the dialog's accessible scope — dialog.showModal() makes\n everything outside the top-layer dialog inert, and desktop modal\n mode uses _setPageInert() on document.body siblings. A live region\n on document.body would be invisible to screen readers in both cases.\n\n2. Not nested in shadow DOM — Chrome inconsistently observes aria-live\n mutations inside shadow DOM across machines and versions. The dialog\n element is only one shadow root deep (the dropdown bib's shadow DOM),\n which Chrome handles reliably. The calendar's own shadow DOM (nested\n inside the bib via slotting) is two+ levels deep and unreliable.", "privacy": "private", "return": { "type": { "text": "HTMLElement" } } }, { "kind": "method", "name": "announceSelection", "parameters": [ { "name": "dateStr", "description": "The localized date string to announce.", "type": { "text": "String" } } ], "description": "Announces a date selection or focus change via the live region.\nUses requestAnimationFrame to ensure the clear and set happen in\nseparate rendering frames — Chrome may coalesce synchronous or\nmicrotask-deferred mutations into a single accessibility tree update.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "_deliverAnnouncement", "parameters": [ { "name": "dateStr", "description": "The localized date string to announce.", "type": { "text": "String" } }, { "name": "attempts", "description": "Number of prior retry attempts.", "type": { "text": "Number" } } ], "description": "Writes `dateStr` to the live region. If the dropdown's dialog hasn't\nmounted yet (so getOrCreateLiveRegion can't attach), retries on the\nnext animation frame up to MAX_LIVE_REGION_RETRIES instead of silently\ndropping the announcement. The retry uses the same `_announceRafId`\nthe double-rAF below uses, so a newer announceSelection call (or\ndisconnectedCallback) cancels any in-flight retry.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "announceFocusDebounced", "parameters": [ { "name": "dateStr", "description": "The localized date string to announce.", "type": { "text": "String" } } ], "description": "Debounced version of announceSelection for focus navigation.\nUses the assertive live region with a 150ms debounce so only the\nfinal cell after rapid arrow-key traversal is announced. We\noriginally tried aria-live=\"polite\" here, but VoiceOver treats\npolite as \"wait until idle\" — which never happens during active\nkeyboard navigation — so the announcements were silently dropped.\n\nThis is a documented deviation from WCAG 2.1 SC 4.1.3, which\nprefers `polite` for status messages. See the \"Documented\nDeviation\" section in components/datepicker/docs/pages/accessibility.md.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "formatAnnouncementDate", "parameters": [ { "name": "timestamp", "description": "Unix timestamp in seconds.", "type": { "text": "String|Number" } } ], "description": "Formats a Unix timestamp (seconds) as a localized date string for SR announcements.", "privacy": "private", "return": { "type": { "text": "String" } } }, { "kind": "method", "name": "injectSlot", "parameters": [ { "name": "slotName" }, { "name": "nodes" } ] }, { "kind": "field", "name": "util", "privacy": "private", "default": "new AuroDatepickerUtilities()" }, { "kind": "field", "name": "utilCal", "privacy": "private", "default": "new CalendarUtilities()" }, { "kind": "field", "name": "utilCalRender", "privacy": "private", "default": "new UtilitiesCalendarRender()" }, { "kind": "field", "name": "calendarStartDate", "default": "undefined" }, { "kind": "field", "name": "calendarEndDate", "default": "undefined" }, { "kind": "field", "name": "centralDate", "privacy": "public", "type": { "text": "string" }, "description": "The date that determines the currently visible month.", "default": "undefined", "attribute": "centraldate", "reflects": true }, { "kind": "field", "name": "showPrevMonthBtn", "type": { "text": "boolean" }, "default": "true" }, { "kind": "field", "name": "showNextMonthBtn", "type": { "text": "boolean" }, "default": "true" }, { "kind": "field", "name": "visible", "privacy": "public", "type": { "text": "boolean" }, "description": "Flag indicating if the calendar is visible.", "default": "false", "attribute": "visible" }, { "kind": "field", "name": "largeFullscreenHeadline", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, make bib.fullscreen.headline in HeadingDisplay.\nOtherwise, Heading 600.", "default": "false", "attribute": "largefullscreenheadline", "reflects": true }, { "kind": "field", "name": "isFullscreen", "privacy": "public", "type": { "text": "boolean" }, "description": "Flag indicating if the calendar is in fullscreen mode.", "default": "false", "attribute": "isfullscreen", "reflects": true }, { "kind": "field", "name": "activeCellDate", "type": { "text": "null" }, "description": "The date of the currently active cell (Unix timestamp).\nOnly one cell across the entire calendar has tabindex=\"0\" at a time.", "privacy": "private", "default": "null" }, { "kind": "field", "name": "_activeCell", "type": { "text": "null" }, "description": "Cached reference to the active cell host. Set by setActiveCell and\nrefreshed by scrollToActiveCell when its cache check misses (stale\nor missing). Lets scrollToActiveCell skip a full cell scan on each\narrow key.", "privacy": "private", "default": "null" }, { "kind": "field", "name": "_gridHasFocus", "type": { "text": "boolean" }, "description": "Whether the #calendarGrid wrapper currently has focus.\nUsed to determine whether the visualFocus ring should be shown.", "privacy": "private", "default": "false" }, { "kind": "field", "name": "firstMonthRenderable", "privacy": "private", "default": "undefined" }, { "kind": "field", "name": "calendarRangeMonths", "type": { "text": "null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "_disabledDays", "type": { "text": "number[]" }, "deprecated": "Use `auro-datepicker.blackoutDates` (an array of\n`YYYY-MM-DD` ISO strings) instead. This legacy array of Unix\ntimestamps is still honored for backward compatibility but emits a\none-time `console.debug` the first time a non-empty value is observed.\nSupport will be removed in a future major release.", "privacy": "private", "default": "[]" }, { "kind": "field", "name": "numCalendars", "privacy": "private", "type": { "text": "number" }, "description": "Number of calendars to render.", "default": "undefined", "attribute": "numcalendars" }, { "kind": "field", "name": "slots", "type": { "text": "Record" }, "description": "Captured light-DOM slot nodes, keyed by slot name, forwarded into the bib.", "privacy": "private", "default": "{}" }, { "kind": "field", "name": "bibtemplateTag", "privacy": "private" }, { "kind": "field", "name": "buttonTag", "privacy": "private" }, { "kind": "field", "name": "dropdown", "privacy": "private", "type": { "text": "HTMLElement" }, "description": "Dropdown element that contains the calendar.", "default": "undefined", "attribute": "dropdown" }, { "kind": "field", "name": "_calendarInstanceId", "description": "Unique instance ID for the live region element.", "privacy": "private" }, { "kind": "field", "name": "calendarEndMonth", "privacy": "public", "type": { "text": "string" }, "description": "The last month that may be displayed in the calendar.", "attribute": "calendarendmonth", "reflects": true }, { "kind": "field", "name": "calendarStartMonth", "privacy": "public", "type": { "text": "string" }, "description": "The first month that may be displayed in the calendar.", "attribute": "calendarstartmonth", "reflects": true }, { "kind": "field", "name": "dateFrom", "privacy": "public", "type": { "text": "string" }, "description": "The starting date of the selected range.", "attribute": "datefrom" }, { "kind": "field", "name": "dateTo", "privacy": "public", "type": { "text": "string" }, "description": "The ending date of the selected range.", "attribute": "dateto" }, { "kind": "field", "name": "maxDate", "privacy": "public", "type": { "text": "string" }, "description": "Maximum date. All dates after will be disabled.", "attribute": "maxdate", "reflects": true }, { "kind": "field", "name": "minDate", "privacy": "public", "type": { "text": "string" }, "description": "Minimum date. All dates before will be disabled.", "attribute": "mindate", "reflects": true }, { "kind": "field", "name": "mobileBreakpoint", "privacy": "private", "type": { "text": "number" }, "description": "Mobile breakpoint for responsive design.", "attribute": "mobilebreakpoint" }, { "kind": "field", "name": "monthFirst", "privacy": "private", "type": { "text": "boolean" }, "description": "If true, the month will be displayed before the year in the calendar header.\nPassed to AuroCalendarMonth via utilitesCalendarRender.", "attribute": "monthfirst" }, { "kind": "field", "name": "localeCode", "privacy": "public", "type": { "text": "string" }, "description": "BCP 47 locale tag (such as `en-US`) for calendar localization.\nas wc-range-datepicker expects a `locale` prop, we use `localeCode` to avoid conflicts and pass the locale down to calendar-month elements.", "attribute": "localecode" }, { "kind": "field", "name": "monthNames", "privacy": "public", "type": { "text": "string[]" }, "description": "Names of all 12 months. When omitted, names are derived from `localeCode`.", "attribute": "monthnames" } ], "events": [ { "name": "auroCalendar-dateSelected", "type": { "text": "CustomEvent" }, "description": "Notifies that a date has been selected in the calendar." }, { "name": "narrow-changedProperties", "type": { "text": "CustomEvent" }, "description": "Notifies that the calendar's narrow (mobile) layout state has changed." }, { "description": "Notifies that the visible calendar month(s) have changed.", "name": "auroCalendar-monthChanged" } ], "attributes": [ { "name": "calendarendmonth", "type": { "text": "string" }, "description": "The last month that may be displayed in the calendar.", "fieldName": "calendarEndMonth" }, { "name": "calendarstartmonth", "type": { "text": "string" }, "description": "The first month that may be displayed in the calendar.", "fieldName": "calendarStartMonth" }, { "name": "centraldate", "type": { "text": "string" }, "description": "The date that determines the currently visible month.", "default": "undefined", "fieldName": "centralDate" }, { "name": "datefrom", "type": { "text": "string" }, "description": "The starting date of the selected range.", "fieldName": "dateFrom" }, { "name": "dateto", "type": { "text": "string" }, "description": "The ending date of the selected range.", "fieldName": "dateTo" }, { "name": "dropdown", "type": { "text": "HTMLElement" }, "description": "Dropdown element that contains the calendar.", "default": "undefined", "fieldName": "dropdown" }, { "name": "isfullscreen", "type": { "text": "boolean" }, "description": "Flag indicating if the calendar is in fullscreen mode.", "default": "false", "fieldName": "isFullscreen" }, { "name": "largefullscreenheadline", "type": { "text": "boolean" }, "description": "If declared, make bib.fullscreen.headline in HeadingDisplay.\nOtherwise, Heading 600.", "default": "false", "fieldName": "largeFullscreenHeadline" }, { "name": "maxdate", "type": { "text": "string" }, "description": "Maximum date. All dates after will be disabled.", "fieldName": "maxDate" }, { "name": "mindate", "type": { "text": "string" }, "description": "Minimum date. All dates before will be disabled.", "fieldName": "minDate" }, { "name": "mobilebreakpoint", "type": { "text": "number" }, "description": "Mobile breakpoint for responsive design.", "fieldName": "mobileBreakpoint" }, { "name": "monthfirst", "type": { "text": "boolean" }, "description": "If true, the month will be displayed before the year in the calendar header.\nPassed to AuroCalendarMonth via utilitesCalendarRender.", "fieldName": "monthFirst" }, { "name": "numcalendars", "type": { "text": "number" }, "description": "Number of calendars to render.", "default": "undefined", "fieldName": "numCalendars" }, { "name": "visible", "type": { "text": "boolean" }, "description": "Flag indicating if the calendar is visible.", "default": "false", "fieldName": "visible" }, { "name": "localecode", "type": { "text": "string" }, "description": "BCP 47 locale tag (such as `en-US`) for calendar localization.\nas wc-range-datepicker expects a `locale` prop, we use `localeCode` to avoid conflicts and pass the locale down to calendar-month elements.", "fieldName": "localeCode" }, { "name": "monthnames", "type": { "text": "string[]" }, "description": "Names of all 12 months. When omitted, names are derived from `localeCode`.", "fieldName": "monthNames" } ], "superclass": { "name": "RangeDatepicker", "module": "/components/datepicker/src/vendor/wc-range-datepicker/range-datepicker.js" }, "tagName": "auro-formkit-calendar", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroCalendar", "declaration": { "name": "AuroCalendar", "module": "components/datepicker/src/auro-calendar.js" } }, { "kind": "custom-element-definition", "name": "auro-formkit-calendar", "declaration": { "name": "AuroCalendar", "module": "components/datepicker/src/auro-calendar.js" } } ] }, { "kind": "javascript-module", "path": "components/datepicker/src/auro-datepicker.js", "declarations": [ { "kind": "class", "description": "The `auro-datepicker` component provides users with a way to select a date or date range from a calendar popup or fullscreen calendar on mobile.", "name": "AuroDatePicker", "cssParts": [ { "description": "Use for customizing the style of the dropdown.", "name": "dropdown" }, { "description": "Use for customizing the style of the datepicker trigger.", "name": "trigger" }, { "description": "Use for customizing the style of the trigger content wrapper.", "name": "wrapper" }, { "description": "Use for customizing the style of the main label in the snowflake layout.", "name": "mainLabel" }, { "description": "Use for customizing the style of the input section within the trigger.", "name": "inputSection" }, { "description": "Use for customizing the style of the leading calendar accent icon.", "name": "accentIcon" }, { "description": "Use for customizing the style of the datepicker inputs.", "name": "input" }, { "description": "Use for customizing the style of the calendar container.", "name": "calendarWrapper" }, { "description": "Use for customizing the style of the calendar.", "name": "calendar" }, { "description": "Use for customizing the style of the datepicker help text span.", "name": "helpTextSpan" }, { "description": "Use for customizing the style of the datepicker help text.", "name": "helpText" } ], "slots": [ { "description": "Defines the content of the helpText.", "name": "helpText" }, { "description": "Sets aria-label on close button in fullscreen bib", "name": "ariaLabel.bib.close" }, { "description": "Sets aria-label on clear button", "name": "ariaLabel.input.clear" }, { "description": "Defines the headline to display above bib.fullscreen.dateLabels in the mobile layout.", "name": "bib.fullscreen.headline" }, { "description": "**DEPRECATED** - Use `bib.fullscreen.fromLabel` instead.", "name": "bib.fullscreen.dateLabel", "deprecated": "Use `bib.fullscreen.fromLabel` instead." }, { "description": "Defines the content to display above the first input in the mobile layout.", "name": "bib.fullscreen.fromLabel" }, { "description": "Defines the content to display above the second input in the mobile layout when `range` is true.", "name": "bib.fullscreen.toLabel" }, { "description": "Defines the label content for the entire datepicker when `layout=\"snowflake\"`.", "name": "label" }, { "description": "Defines the label content for the second input when the `range` attribute is used.", "name": "toLabel" }, { "description": "Defines the label content for the first input.", "name": "fromLabel" }, { "description": "Overrides the \"(optional)\" text rendered next to the first input's label when the datepicker is not `required`.", "name": "optionalFromLabel" }, { "description": "Overrides the \"(optional)\" text rendered next to the second input's label when `range` is set and the datepicker is not `required`.", "name": "optionalToLabel" }, { "description": "Defines the content to display in the auro-calendar-cell for the specified date. The content text is colored using the success state token when the `highlight` attribute is applied to the slot.", "name": "date_YYYY_MM_DD" }, { "description": "Defines the content to display in the auro-calendar-cell popover for the specified date.", "name": "popover_YYYY_MM_DD" } ], "members": [ { "kind": "field", "name": "shadowRootOptions", "static": true, "readonly": true }, { "kind": "method", "name": "initializeArchitectureDefaults" }, { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-datepicker\"", "description": "The name of the element that you want to register.", "optional": true, "type": { "text": "string" } } ], "description": "This will register this element with the browser." }, { "kind": "field", "name": "values", "description": "A convenience wrapper for `value` and `valueEnd`, uses the new Auro \"array value pattern\".", "return": { "type": { "text": "string[]" } }, "readonly": true }, { "kind": "field", "name": "labelHidden", "description": "Whether the label is being hidden currently based on state.", "return": { "type": { "text": "boolean" } }, "privacy": "private", "readonly": true }, { "kind": "field", "name": "dvHidden", "description": "Whether the displayValue container is being hidden currently based on state.", "return": { "type": { "text": "boolean" } }, "privacy": "private", "readonly": true }, { "kind": "field", "name": "displayValueFontClass", "description": "Returns the input font class based on layout and visibility state.", "privacy": "private", "return": { "type": { "text": "string" } }, "readonly": true }, { "kind": "field", "name": "commonDisplayValueWrapperClasses", "description": "Common display value wrapper classes.", "privacy": "private", "return": { "type": { "text": "Object" } }, "readonly": true }, { "kind": "method", "name": "checkDisplayValueSlotChange", "description": "Function to determine if there is any displayValue content to render.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleFocusDateChange", "description": "Force the calendar view to the focus date when it changes.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "generateRandomString", "parameters": [ { "name": "length", "description": "Number of characters for the returned random string.", "type": { "text": "Number" } } ], "privacy": "private", "return": { "type": { "text": "string" } } }, { "kind": "method", "name": "focus", "parameters": [ { "name": "focusInput", "default": "''", "description": "Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input.", "type": { "text": "String" } } ], "description": "Focuses the datepicker trigger input.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "convertToWcValidTime", "parameters": [ { "name": "date", "description": "Date to be converted.", "type": { "text": "Date" } } ], "description": "Converts valid time number to format used by wc-date-range API.", "privacy": "private", "return": { "type": { "text": "Number" } } }, { "kind": "field", "name": "valueObject", "description": "Read-only `Date` object derived from `value`. Returns `undefined` when `value` is empty or not a valid date.", "privacy": "private", "parameters": [ { "description": "Unix timestamp to be converted to a date object.", "name": "time", "type": { "text": "String" } } ], "return": { "type": { "text": "Date|undefined" } }, "readonly": true }, { "kind": "field", "name": "valueEndObject", "description": "Read-only `Date` object derived from `valueEnd`. Returns `undefined` when `valueEnd` is empty or not a valid date.", "return": { "type": { "text": "Date|undefined" } }, "readonly": true }, { "kind": "field", "name": "minDateObject", "description": "Read-only `Date` object derived from `minDate`. Returns `undefined` when `minDate` is empty or not a valid date.", "return": { "type": { "text": "Date|undefined" } }, "readonly": true }, { "kind": "field", "name": "maxDateObject", "description": "Read-only `Date` object derived from `maxDate`. Returns `undefined` when `maxDate` is empty or not a valid date.", "return": { "type": { "text": "Date|undefined" } }, "readonly": true }, { "kind": "field", "name": "calendarStartDateObject", "description": "Read-only `Date` object derived from `calendarStartDate`. Returns `undefined` when `calendarStartDate` is empty or not a valid date.", "return": { "type": { "text": "Date|undefined" } }, "readonly": true }, { "kind": "field", "name": "calendarEndDateObject", "description": "Read-only `Date` object derived from `calendarEndDate`. Returns `undefined` when `calendarEndDate` is empty or not a valid date.", "return": { "type": { "text": "Date|undefined" } }, "readonly": true }, { "kind": "field", "name": "centralDateObject", "description": "Read-only `Date` object derived from `centralDate`. Returns `undefined` when `centralDate` is empty or not a valid date.", "return": { "type": { "text": "Date|undefined" } }, "readonly": true }, { "kind": "field", "name": "calendarFocusDateObject", "description": "Read-only `Date` object derived from `calendarFocusDate`. Returns `undefined` when `calendarFocusDate` is empty or not a valid date.", "return": { "type": { "text": "Date|undefined" } }, "readonly": true }, { "kind": "method", "name": "convertWcTimeToDate", "parameters": [ { "name": "time", "description": "Unix timestamp (seconds), local midnight of the day.", "type": { "text": "number" } } ], "description": "Converts a Unix timestamp (seconds) from the vendored range-datepicker\n(`src/vendor/wc-range-datepicker/day.js`) to an ISO date string.\n\nTimezone contract:\n- INPUT: `time` is assumed to be the seconds-since-epoch of **local\n midnight** for the intended calendar day. The vendor's Day constructor\n builds it via `date-fns format(date, 't')` from a locally-constructed\n Date, so this assumption currently holds end-to-end.\n- OUTPUT: `dateFormatter.toISOFormatString` reads the Date's local\n getFullYear/getMonth/getDate components, so the returned YYYY-MM-DD\n string matches the local calendar day.\n\nIf the vendor ever switches to emitting UTC-midnight timestamps, this\nconversion will silently shift the returned date by one day in zones\nwest of UTC. Any vendor swap should re-verify this contract; the TZ\nregression suite (`npm run test:hst`, UTC-10) will catch the symptom.", "privacy": "private", "return": { "type": { "text": "string" } } }, { "kind": "method", "name": "notifyValueChanged", "description": "Sends event notifying that the input has changed it's value.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleCentralDateChange", "description": "Changes the calendar's visibility to reflect the value of the central date attribute.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "notifyDatepickerToggled", "description": "Sends event notifying that the calendar popover has been opened.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "notifyMonthChanged", "parameters": [ { "name": "event", "description": "Event passed in from auro-calendar when the event triggered this function.", "type": { "text": "Object" } } ], "description": "Sends event notifying that the calendar's visible month has changed.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "focusActiveCellWhenReady", "description": "Attempts to focus the active calendar cell using a rAF retry loop.\nShared by both fullscreen and desktop open paths.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "configureDropdown", "description": "Binds all behavior needed to the dropdown after rendering.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "configureInput", "description": "Binds all behavior needed to the input after rendering.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "configureCalendar", "description": "Binds all behavior needed to the dropdown after rendering.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "configureDatepicker", "description": "Binds all behavior needed to the datepicker after rendering.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "blur", "description": "Blurs the datepicker and hides the dropdown as part of blur action.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "hideBib", "description": "Hides the dropdown bib if its open.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "showBib", "description": "Shows the dropdown bib if there are options to show.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleCalendarCentralDateChange", "parameters": [ { "name": "event", "description": "Event received from calendar with the new central date.", "type": { "text": "Number" } } ], "description": "Keep the datepicker in sync with the calendar's central date.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleCellClick", "parameters": [ { "name": "time", "description": "Unix timestamp to be converted to a date.", "type": { "text": "Number" } } ], "description": "Sets the datepicker's values to the auro-calendar-cell that was clicked.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "pushSlotContent", "description": "Emits an event to notify the calendar cells to fetch their slot content.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "resetInputs", "description": "Resets values without resetting validation." }, { "kind": "method", "name": "reset", "description": "Resets component to initial state.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "clear", "description": "Clears the current value(s) of the datepicker.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "isBlackoutDate", "parameters": [ { "name": "dateStr", "description": "A date string in the component's configured format.", "type": { "text": "string" } } ], "description": "Checks whether a formatted date string matches a blackout date.", "privacy": "private", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "validate", "parameters": [ { "name": "force", "default": "false", "description": "Whether to force validation.", "optional": true, "type": { "text": "boolean" } } ], "description": "Validates value." }, { "kind": "method", "name": "setHasValue", "description": "Private method for interacting with the `hasValue` property.", "privacy": "private" }, { "kind": "field", "name": "hasError", "description": "Returns `true` when the datepicker has an active validation error.", "return": { "type": { "text": "boolean" } }, "readonly": true }, { "kind": "field", "name": "_warnedInvalidLocales", "static": true, "default": "new Set()", "description": "Per-class dedup set used by `_warnInvalidLocale`. Static so the dedup\nspans every datepicker instance on the page; lives on the class (not\nat module scope) so it stays an encapsulated implementation detail of\nthis component and does not interfere with WCA's class-JSDoc\nattachment.", "privacy": "private" }, { "kind": "method", "name": "_warnInvalidLocale", "parameters": [ { "name": "badLocale", "description": "The locale value that failed.", "type": { "text": "string|undefined" } } ], "description": "Logs a one-time `console.debug` when an unsupported locale falls back to\nen-US. Deduped by the offending tag so noisy re-renders that resurface\nthe same bad value stay quiet, but each new bad value still signals so\nconsumers can spot the typo or missing tag.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleSlotToSlot", "parameters": [ { "name": "event", "description": "The event object containing information about the slot transfer.", "type": { "text": "Event" } } ], "description": "Handles the transfer of content between slots in the component.", "privacy": "private" }, { "kind": "method", "name": "handleClick", "parameters": [ { "name": "event", "description": "The pointer event object.", "type": { "text": "PointerEvent" } } ], "description": "Handles click events on the datepicker.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "configureClickHandler", "description": "Set up click handling for the datepicker.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "renderSnowflakeLayout", "description": "Renders the snowflake layout for the datepicker.", "privacy": "private", "return": { "type": { "text": "TemplateResult" } } }, { "kind": "method", "name": "renderClassicLayout", "description": "Renders the snowflake layout for the datepicker.", "privacy": "private", "return": { "type": { "text": "TemplateResult" } } }, { "kind": "method", "name": "renderLayoutFromAttributes", "description": "Renders the layout based on the `layout` attribute.", "privacy": "private", "return": { "type": { "text": "TemplateResult" } } }, { "kind": "method", "name": "formatShortDate", "parameters": [ { "name": "date", "description": "Date format should be in a format Date constructor accepts, like '2023-04-21' or '2023/04/21'.", "type": { "text": "Date" } } ], "description": "Simple formatter that ONLY WORKS FOR US DATES.\nReturns formatted date like Apr 21 or Dec 25.", "privacy": "private", "return": { "type": { "text": "string" } } }, { "kind": "method", "name": "renderDisplayTextDate", "parameters": [ { "name": "date", "description": "The date value to format and render.", "type": { "text": "Date" } } ], "description": "Format and render the provided date value.", "privacy": "private", "return": { "type": { "text": "TemplateResult" } } }, { "kind": "method", "name": "renderHtmlInputs", "description": "Renders the HTML inputs for the datepicker.", "privacy": "private", "return": { "type": { "text": "TemplateResult" } } }, { "kind": "method", "name": "handleClearClick", "parameters": [ { "name": "event", "description": "The mouse event from the clear button click.", "type": { "text": "MouseEvent" } } ], "description": "Handles click on the clear button.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "renderHtmlActionClear", "description": "Renders the clear action button.", "privacy": "private", "return": { "type": { "text": "TemplateResult" } } }, { "kind": "method", "name": "renderHtmlIconError", "description": "Renders the error icon.", "privacy": "private", "return": { "type": { "text": "TemplateResult" } } }, { "kind": "method", "name": "renderHtmlIconCalendar", "description": "Renders the calendar icon.", "privacy": "private", "return": { "type": { "text": "TemplateResult" } } }, { "kind": "method", "name": "renderHtmlHelpText", "description": "Returns HTML for the help text and error message.", "privacy": "private", "return": { "type": { "text": "TemplateResult" } } }, { "kind": "method", "name": "renderCalendar", "description": "Separate method for rendering the calendar.", "privacy": "private", "return": { "type": { "text": "TemplateResult" } } }, { "kind": "field", "name": "util", "privacy": "private", "default": "new AuroDatepickerUtilities()" }, { "kind": "field", "name": "calendarRenderUtil", "privacy": "private", "default": "new UtilitiesCalendarRender()" }, { "kind": "field", "name": "domHandler", "privacy": "private", "default": "new DomHandler()" }, { "kind": "field", "name": "appearance", "privacy": "public", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "\"default\"", "attribute": "appearance", "reflects": true }, { "kind": "field", "name": "touched", "privacy": "private", "type": { "text": "boolean" }, "description": "Indicates whether the datepicker is in a dirty state (has been interacted with).", "default": "false" }, { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, disables the datepicker.", "default": "false", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "dvInputOnly", "privacy": "public", "type": { "text": "boolean" }, "description": "If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.", "default": "false", "attribute": "dvinputonly", "reflects": true }, { "kind": "field", "name": "required", "privacy": "public", "type": { "text": "boolean" }, "description": "Populates the `required` attribute on the input. Used for client-side validation.", "default": "false", "attribute": "required", "reflects": true }, { "kind": "field", "name": "onDark", "privacy": "public", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "attribute": "ondark", "reflects": true, "deprecated": "Use `appearance=\"inverse\"` instead.", "default": "false", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "field", "name": "range", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, turns on date range functionality in auro-calendar.", "default": "false", "attribute": "range", "reflects": true }, { "kind": "field", "name": "rangeLabelStart", "privacy": "public", "type": { "text": "string" }, "description": "Label announced for the range start date cell.", "default": "'range start'", "attribute": "rangelabelstart", "reflects": true }, { "kind": "field", "name": "rangeLabelEnd", "privacy": "public", "type": { "text": "string" }, "description": "Label announced for the range end date cell.", "default": "'range end'", "attribute": "rangelabelend", "reflects": true }, { "kind": "field", "name": "rangeLabelBeforeRange", "privacy": "public", "type": { "text": "string" }, "description": "Label announced for cells before the range start.", "default": "'before range'", "attribute": "rangelabelbeforerange", "reflects": true }, { "kind": "field", "name": "rangeLabelInRange", "privacy": "public", "type": { "text": "string" }, "description": "Label announced for cells within the selected range.", "default": "'in range'", "attribute": "rangelabelinrange", "reflects": true }, { "kind": "field", "name": "rangeLabelAfterRange", "privacy": "public", "type": { "text": "string" }, "description": "Label announced for cells after a fully selected range (both\n`dateFrom` and `dateTo` are set). While a range is still being\npicked (`dateFrom` set, `dateTo` unset), focused cells past the\nstart use `rangeLabelEndPreview` instead.", "default": "'after range'", "attribute": "rangelabelafterrange", "reflects": true }, { "kind": "field", "name": "rangeLabelEndPreview", "privacy": "public", "type": { "text": "string" }, "description": "Label announced for the focused cell while previewing a range end\n(dateFrom set, dateTo not yet selected). Tells AT users that\npressing Enter would commit this cell as the range end.", "default": "'previewing range end'", "attribute": "rangelabelendpreview", "reflects": true }, { "kind": "field", "name": "blackoutDates", "privacy": "public", "type": { "text": "string[]" }, "description": "Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD).\n\n**Immutable update required.** The datepicker treats this array as\nimmutable and memoizes a lookup Set keyed on the array's reference\nidentity — matching Lit's own reactivity semantics for array\nproperties. In-place mutations (`blackoutDates.push(...)`,\n`blackoutDates[i] = ...`, `blackoutDates.splice(...)`) will not\ninvalidate the cache and the new entries will be silently ignored.\nTo update, reassign the property: `el.blackoutDates = [...el.blackoutDates, '2024-12-25']`.", "default": "[]", "attribute": "blackoutdates", "reflects": true }, { "kind": "field", "name": "blackoutLabel", "privacy": "public", "type": { "text": "string" }, "description": "Label announced for blackout (disabled but in-range) date cells.", "default": "'unavailable'", "attribute": "blackoutlabel", "reflects": true }, { "kind": "field", "name": "navLabelPrevMonth", "privacy": "public", "type": { "text": "string" }, "description": "Accessible label for the previous month navigation button.", "default": "'Previous month'", "attribute": "navlabelprevmonth", "reflects": true }, { "kind": "field", "name": "navLabelNextMonth", "privacy": "public", "type": { "text": "string" }, "description": "Accessible label for the next month navigation button.", "default": "'Next month'", "attribute": "navlabelnextmonth", "reflects": true }, { "kind": "field", "name": "calendarGridLabel", "privacy": "public", "type": { "text": "string" }, "description": "Accessible label for the calendar grid containing the days of the month.", "default": "'Calendar days of the month'", "attribute": "calendargridlabel", "reflects": true }, { "kind": "field", "name": "stacked", "privacy": "public", "type": { "text": "boolean" }, "description": "Set true to make datepicker stacked style.", "default": "false", "attribute": "stacked", "reflects": true }, { "kind": "field", "name": "noValidate", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, disables auto-validation on blur.", "default": "false", "attribute": "novalidate", "reflects": true }, { "kind": "field", "name": "validity", "privacy": "public", "type": { "text": "string" }, "description": "Specifies the `validityState` this element is in.", "default": "undefined", "attribute": "validity", "reflects": true }, { "kind": "field", "name": "value", "privacy": "public", "type": { "text": "string" }, "description": "Value selected for the datepicker.", "default": "undefined", "attribute": "value" }, { "kind": "field", "name": "valueEnd", "privacy": "public", "type": { "text": "string" }, "description": "Value selected for the second datepicker when using date range.", "default": "undefined", "attribute": "valueend" }, { "kind": "field", "name": "calendarStartDate", "privacy": "public", "type": { "text": "string" }, "description": "The first date that may be displayed in the calendar.", "default": "undefined", "attribute": "calendarstartdate", "reflects": true }, { "kind": "field", "name": "calendarEndDate", "privacy": "public", "type": { "text": "string" }, "description": "The last date that may be displayed in the calendar.", "default": "undefined", "attribute": "calendarenddate", "reflects": true }, { "kind": "field", "name": "calendarFocusDate", "privacy": "public", "type": { "text": "string" }, "description": "The date that will first be visually rendered to the user in the calendar.", "attribute": "calendarfocusdate", "reflects": true }, { "kind": "field", "name": "fullscreenBreakpoint", "privacy": "public", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'" }, "description": "Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.\n\nWhen expanded, the dropdown will automatically display in fullscreen mode\nif the screen size is equal to or smaller than the selected breakpoint.", "default": "'sm'", "attribute": "fullscreenbreakpoint", "reflects": true }, { "kind": "field", "name": "_validLocale", "type": { "text": "string" }, "default": "'en-US'" }, { "kind": "field", "name": "placement", "privacy": "public", "type": { "text": "'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'" }, "description": "Position where the bib should appear relative to the trigger.", "default": "'bottom-start'", "attribute": "placement", "reflects": true }, { "kind": "field", "name": "offset", "privacy": "public", "type": { "text": "number" }, "description": "Gap between the trigger element and bib.", "default": "0", "attribute": "offset", "reflects": true }, { "kind": "field", "name": "noFlip", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the bib will NOT flip to an alternate position\nwhen there isn't enough space in the specified `placement`.", "default": "false", "attribute": "noflip", "reflects": true }, { "kind": "field", "name": "shift", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the dropdown will shift its position to avoid being cut off by the viewport.", "default": "false", "attribute": "shift", "reflects": true }, { "kind": "field", "name": "autoPlacement", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, bib's position will be automatically calculated where to appear.", "default": "false", "attribute": "autoplacement", "reflects": true }, { "kind": "field", "name": "largeFullscreenHeadline", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, make bib.fullscreen.headline in HeadingDisplay.\nOtherwise, Heading 600.", "default": "false", "attribute": "largefullscreenheadline", "reflects": true }, { "kind": "field", "name": "dateSlotContent", "type": { "text": "HTMLElement[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "hasDisplayValueContent", "type": { "text": "boolean" }, "privacy": "private", "default": "true" }, { "kind": "field", "name": "hasFocus", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "hasValue", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "hasAllValues", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "validation", "privacy": "private", "default": "new AuroFormValidation()" }, { "kind": "field", "name": "runtimeUtils", "privacy": "private", "default": "new AuroLibraryRuntimeUtils()" }, { "kind": "field", "name": "forceScrollOnNextMobileCalendarRender", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "dropdownTag", "privacy": "private" }, { "kind": "field", "name": "buttonTag", "privacy": "private" }, { "kind": "field", "name": "iconTag", "privacy": "private" }, { "kind": "field", "name": "inputTag", "privacy": "private" }, { "kind": "field", "name": "helpTextTag", "privacy": "private" }, { "kind": "field", "name": "_listenerAbortController", "description": "Single AbortController shared by every listener registered in the\nconfigure* methods. Lets disconnectedCallback tear all of them down\nwith one abort() call.\n\nThe genuine leak risk is the listeners attached to children that can\noutlive the host if they get reparented — `this.dropdown`,\n`this.calendar`, and the inputs inside the dropdown's slot.\nListeners attached to `this` (e.g. focusin/focusout on the host)\nform a self-contained reference graph that the GC can collect with\nthe host anyway, but they share the same signal so the cleanup\npattern stays uniform across all configure* sites.", "privacy": "private", "default": "new AbortController()" }, { "kind": "field", "name": "centralDate", "privacy": "public", "type": { "text": "string" }, "description": "The date that determines the currently visible month.", "attribute": "centraldate" }, { "kind": "field", "name": "error", "privacy": "public", "type": { "text": "string" }, "description": "When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.", "attribute": "error", "reflects": true }, { "kind": "field", "name": "format", "privacy": "public", "type": { "text": "string" }, "description": "Specifies the date format. The default is `mm/dd/yyyy`.", "attribute": "format", "reflects": true }, { "kind": "field", "name": "locale", "privacy": "public", "type": { "text": "string" }, "description": "Defines the locale of the element. Used to derive the date format when `format` is not explicitly set.", "attribute": "locale", "reflects": true }, { "kind": "field", "name": "inputmode", "privacy": "public", "type": { "text": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'" }, "description": "Sets the `inputmode` attribute on the underlying input, hinting at the virtual keyboard to display.", "attribute": "inputmode", "reflects": true }, { "kind": "field", "name": "layout", "privacy": "public", "type": { "text": "'classic' | 'snowflake'" }, "description": "Sets the layout of the datepicker.", "default": "'classic'", "attribute": "layout", "reflects": true }, { "kind": "field", "name": "shape", "privacy": "public", "type": { "text": "'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'" }, "description": "Sets the shape of the datepicker.", "default": "'classic'", "attribute": "shape", "reflects": true }, { "kind": "field", "name": "size", "privacy": "public", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, "description": "Sets the size of the datepicker.", "default": "'lg'", "attribute": "size", "reflects": true }, { "kind": "field", "name": "maxDate", "privacy": "public", "type": { "text": "string" }, "description": "Maximum date. All dates after will be disabled.", "attribute": "maxdate", "reflects": true }, { "kind": "field", "name": "minDate", "privacy": "public", "type": { "text": "string" }, "description": "Minimum date. All dates before will be disabled.", "attribute": "mindate", "reflects": true }, { "kind": "field", "name": "monthFirst", "privacy": "public", "type": { "text": "boolean" }, "description": "When set, the calendar displays the month before the year in the header.", "attribute": "monthfirst" }, { "kind": "field", "name": "monthNames", "privacy": "public", "type": { "text": "string[]" }, "description": "Names of all 12 months to render in the calendar.\nWhen omitted, month names will be automatically populated from the active `locale` (falling back to `en-US`).", "attribute": "monthnames" }, { "kind": "field", "name": "placeholder", "privacy": "public", "type": { "text": "string" }, "description": "Placeholder text to display in the input(s) when no value is set.", "attribute": "placeholder", "reflects": true }, { "kind": "field", "name": "placeholderEndDate", "privacy": "public", "type": { "text": "string" }, "description": "Optional placeholder text to display in the second input when using date range.\nBy default, datepicker will use `placeholder` for both inputs if placeholder is\nspecified, but placeholderEndDate is not.", "attribute": "placeholderenddate", "reflects": true }, { "kind": "field", "name": "referenceDates", "privacy": "public", "type": { "text": "string[]" }, "description": "Dates that the user should have for reference as part of their decision-making when selecting a date.\nThis should be a JSON string array of ISO date strings (`YYYY-MM-DD`).", "attribute": "referencedates", "reflects": true }, { "kind": "field", "name": "setCustomValidity", "privacy": "public", "type": { "text": "string" }, "description": "Sets a custom help text message to display for all validityStates.", "attribute": "setcustomvalidity" }, { "kind": "field", "name": "setCustomValidityCustomError", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `customError`.\nAlso used as the validation message when a blackout date is typed into the input.", "attribute": "setcustomvaliditycustomerror" }, { "kind": "field", "name": "setCustomValidityRangeOverflow", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `rangeOverflow`.", "attribute": "setcustomvalidityrangeoverflow" }, { "kind": "field", "name": "setCustomValidityRangeUnderflow", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `rangeUnderflow`.", "attribute": "setcustomvalidityrangeunderflow" }, { "kind": "field", "name": "setCustomValidityValueMissing", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `valueMissing`.", "attribute": "setcustomvalidityvaluemissing" }, { "kind": "field", "name": "componentHasFocus", "description": "Returns true if the element has focus.", "privacy": "private", "return": { "type": { "text": "boolean" } }, "readonly": true, "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetShapeClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetLayoutClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "updateComponentArchitecture", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } } ], "events": [ { "name": "input", "type": { "text": "CustomEvent" }, "description": "Notifies that the datepicker's value has changed." }, { "name": "auroDatePicker-toggled", "type": { "text": "CustomEvent" }, "description": "Notifies that the calendar dropdown has been opened/closed." }, { "name": "auroDatePicker-monthChanged", "type": { "text": "CustomEvent" }, "description": "Notifies that the visible calendar month(s) have changed." }, { "name": "auroDatePicker-newSlotContent", "type": { "text": "CustomEvent" }, "description": "Notifies that new slot content has been added to the datepicker." }, { "name": "auroFormElement-validated", "type": { "text": "CustomEvent" }, "description": "Notifies that the component value(s) have been validated." } ], "attributes": [ { "name": "appearance", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "\"default\"", "fieldName": "appearance" }, { "name": "autoplacement", "type": { "text": "boolean" }, "description": "If declared, bib's position will be automatically calculated where to appear.", "default": "false", "fieldName": "autoPlacement" }, { "name": "blackoutdates", "type": { "text": "string[]" }, "description": "Array of dates that cannot be selected. Dates should be in ISO format (YYYY-MM-DD).\n\n**Immutable update required.** The datepicker treats this array as\nimmutable and memoizes a lookup Set keyed on the array's reference\nidentity — matching Lit's own reactivity semantics for array\nproperties. In-place mutations (`blackoutDates.push(...)`,\n`blackoutDates[i] = ...`, `blackoutDates.splice(...)`) will not\ninvalidate the cache and the new entries will be silently ignored.\nTo update, reassign the property: `el.blackoutDates = [...el.blackoutDates, '2024-12-25']`.", "default": "[]", "fieldName": "blackoutDates" }, { "name": "blackoutlabel", "type": { "text": "string" }, "description": "Label announced for blackout (disabled but in-range) date cells.", "default": "'unavailable'", "fieldName": "blackoutLabel" }, { "name": "calendarenddate", "type": { "text": "string" }, "description": "The last date that may be displayed in the calendar.", "default": "undefined", "fieldName": "calendarEndDate" }, { "name": "calendargridlabel", "type": { "text": "string" }, "description": "Accessible label for the calendar grid containing the days of the month.", "default": "'Calendar days of the month'", "fieldName": "calendarGridLabel" }, { "name": "calendarfocusdate", "type": { "text": "string" }, "description": "The date that will first be visually rendered to the user in the calendar.", "fieldName": "calendarFocusDate" }, { "name": "calendarstartdate", "type": { "text": "string" }, "description": "The first date that may be displayed in the calendar.", "default": "undefined", "fieldName": "calendarStartDate" }, { "name": "centraldate", "type": { "text": "string" }, "description": "The date that determines the currently visible month.", "fieldName": "centralDate" }, { "name": "disabled", "type": { "text": "boolean" }, "description": "If set, disables the datepicker.", "default": "false", "fieldName": "disabled" }, { "name": "dvinputonly", "type": { "text": "boolean" }, "description": "If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.", "default": "false", "fieldName": "dvInputOnly" }, { "name": "error", "type": { "text": "string" }, "description": "When defined, sets persistent validity to `customError` and sets the validation message to the attribute value.", "fieldName": "error" }, { "name": "format", "type": { "text": "string" }, "description": "Specifies the date format. The default is `mm/dd/yyyy`.", "fieldName": "format" }, { "name": "locale", "type": { "text": "string" }, "description": "Defines the locale of the element. Used to derive the date format when `format` is not explicitly set.", "fieldName": "locale" }, { "name": "fullscreenbreakpoint", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'" }, "description": "Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.\n\nWhen expanded, the dropdown will automatically display in fullscreen mode\nif the screen size is equal to or smaller than the selected breakpoint.", "default": "'sm'", "fieldName": "fullscreenBreakpoint" }, { "name": "inputmode", "type": { "text": "'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'" }, "description": "Sets the `inputmode` attribute on the underlying input, hinting at the virtual keyboard to display.", "fieldName": "inputmode" }, { "name": "largefullscreenheadline", "type": { "text": "boolean" }, "description": "If declared, make bib.fullscreen.headline in HeadingDisplay.\nOtherwise, Heading 600.", "default": "false", "fieldName": "largeFullscreenHeadline" }, { "name": "layout", "type": { "text": "'classic' | 'snowflake'" }, "description": "Sets the layout of the datepicker.", "default": "'classic'", "fieldName": "layout" }, { "name": "shape", "type": { "text": "'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'" }, "description": "Sets the shape of the datepicker.", "default": "'classic'", "fieldName": "shape" }, { "name": "size", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, "description": "Sets the size of the datepicker.", "default": "'lg'", "fieldName": "size" }, { "name": "maxdate", "type": { "text": "string" }, "description": "Maximum date. All dates after will be disabled.", "fieldName": "maxDate" }, { "name": "mindate", "type": { "text": "string" }, "description": "Minimum date. All dates before will be disabled.", "fieldName": "minDate" }, { "name": "monthfirst", "type": { "text": "boolean" }, "description": "When set, the calendar displays the month before the year in the header.", "fieldName": "monthFirst" }, { "name": "monthnames", "type": { "text": "string[]" }, "description": "Names of all 12 months to render in the calendar.\nWhen omitted, month names will be automatically populated from the active `locale` (falling back to `en-US`).", "fieldName": "monthNames" }, { "name": "navlabelnextmonth", "type": { "text": "string" }, "description": "Accessible label for the next month navigation button.", "default": "'Next month'", "fieldName": "navLabelNextMonth" }, { "name": "navlabelprevmonth", "type": { "text": "string" }, "description": "Accessible label for the previous month navigation button.", "default": "'Previous month'", "fieldName": "navLabelPrevMonth" }, { "name": "noflip", "type": { "text": "boolean" }, "description": "If declared, the bib will NOT flip to an alternate position\nwhen there isn't enough space in the specified `placement`.", "default": "false", "fieldName": "noFlip" }, { "name": "novalidate", "type": { "text": "boolean" }, "description": "If set, disables auto-validation on blur.", "default": "false", "fieldName": "noValidate" }, { "name": "offset", "type": { "text": "number" }, "description": "Gap between the trigger element and bib.", "default": "0", "fieldName": "offset" }, { "name": "ondark", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "fieldName": "onDark", "deprecated": "Use `appearance=\"inverse\"` instead.", "default": "false", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "name": "placeholder", "type": { "text": "string" }, "description": "Placeholder text to display in the input(s) when no value is set.", "fieldName": "placeholder" }, { "name": "placeholderenddate", "type": { "text": "string" }, "description": "Optional placeholder text to display in the second input when using date range.\nBy default, datepicker will use `placeholder` for both inputs if placeholder is\nspecified, but placeholderEndDate is not.", "fieldName": "placeholderEndDate" }, { "name": "placement", "type": { "text": "'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'" }, "description": "Position where the bib should appear relative to the trigger.", "default": "'bottom-start'", "fieldName": "placement" }, { "name": "range", "type": { "text": "boolean" }, "description": "If set, turns on date range functionality in auro-calendar.", "default": "false", "fieldName": "range" }, { "name": "rangelabelafterrange", "type": { "text": "string" }, "description": "Label announced for cells after a fully selected range (both\n`dateFrom` and `dateTo` are set). While a range is still being\npicked (`dateFrom` set, `dateTo` unset), focused cells past the\nstart use `rangeLabelEndPreview` instead.", "default": "'after range'", "fieldName": "rangeLabelAfterRange" }, { "name": "rangelabelbeforerange", "type": { "text": "string" }, "description": "Label announced for cells before the range start.", "default": "'before range'", "fieldName": "rangeLabelBeforeRange" }, { "name": "rangelabelend", "type": { "text": "string" }, "description": "Label announced for the range end date cell.", "default": "'range end'", "fieldName": "rangeLabelEnd" }, { "name": "rangelabelendpreview", "type": { "text": "string" }, "description": "Label announced for the focused cell while previewing a range end\n(dateFrom set, dateTo not yet selected). Tells AT users that\npressing Enter would commit this cell as the range end.", "default": "'previewing range end'", "fieldName": "rangeLabelEndPreview" }, { "name": "rangelabelinrange", "type": { "text": "string" }, "description": "Label announced for cells within the selected range.", "default": "'in range'", "fieldName": "rangeLabelInRange" }, { "name": "rangelabelstart", "type": { "text": "string" }, "description": "Label announced for the range start date cell.", "default": "'range start'", "fieldName": "rangeLabelStart" }, { "name": "referencedates", "type": { "text": "string[]" }, "description": "Dates that the user should have for reference as part of their decision-making when selecting a date.\nThis should be a JSON string array of ISO date strings (`YYYY-MM-DD`).", "fieldName": "referenceDates" }, { "name": "required", "type": { "text": "boolean" }, "description": "Populates the `required` attribute on the input. Used for client-side validation.", "default": "false", "fieldName": "required" }, { "name": "setcustomvalidity", "type": { "text": "string" }, "description": "Sets a custom help text message to display for all validityStates.", "fieldName": "setCustomValidity" }, { "name": "setcustomvaliditycustomerror", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `customError`.\nAlso used as the validation message when a blackout date is typed into the input.", "fieldName": "setCustomValidityCustomError" }, { "name": "setcustomvalidityrangeoverflow", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `rangeOverflow`.", "fieldName": "setCustomValidityRangeOverflow" }, { "name": "setcustomvalidityrangeunderflow", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `rangeUnderflow`.", "fieldName": "setCustomValidityRangeUnderflow" }, { "name": "setcustomvalidityvaluemissing", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `valueMissing`.", "fieldName": "setCustomValidityValueMissing" }, { "name": "shift", "type": { "text": "boolean" }, "description": "If declared, the dropdown will shift its position to avoid being cut off by the viewport.", "default": "false", "fieldName": "shift" }, { "name": "stacked", "type": { "text": "boolean" }, "description": "Set true to make datepicker stacked style.", "default": "false", "fieldName": "stacked" }, { "name": "validity", "type": { "text": "string" }, "description": "Specifies the `validityState` this element is in.", "default": "undefined", "fieldName": "validity" }, { "name": "value", "type": { "text": "string" }, "description": "Value selected for the datepicker.", "default": "undefined", "fieldName": "value" }, { "name": "valueend", "type": { "text": "string" }, "description": "Value selected for the second datepicker when using date range.", "default": "undefined", "fieldName": "valueEnd" } ], "superclass": { "name": "AuroElement", "package": "@aurodesignsystem/auro-layout-element" }, "tagName": "auro-datepicker", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroDatePicker", "declaration": { "name": "AuroDatePicker", "module": "components/datepicker/src/auro-datepicker.js" } } ] }, { "kind": "javascript-module", "path": "components/datepicker/src/blackoutUtils.js", "declarations": [ { "kind": "function", "name": "parseIsoToTimestamp", "parameters": [ { "name": "isoStr", "description": "Date string in `YYYY-MM-DD` format.", "type": { "text": "string" } } ], "description": "Converts a `YYYY-MM-DD` ISO date string to a Unix timestamp (seconds)\nrepresenting local midnight on that calendar day. Returns `null` for\ninputs that don't parse to a finite timestamp.\n\nUses the `new Date(year, monthIndex, day)` constructor (NOT\n`new Date(isoStr)`) so the result is local-midnight rather than UTC\nmidnight — required to keep the calendar grid aligned with the user's\nlocal calendar day in negative-offset timezones.", "return": { "type": { "text": "number|null" } } }, { "kind": "function", "name": "buildBlackoutSet", "parameters": [ { "name": "disabledDays", "description": "Legacy timestamp array.", "type": { "text": "Array|undefined" } }, { "name": "blackoutDates", "description": "ISO `YYYY-MM-DD` array.", "type": { "text": "Array|undefined" } } ], "description": "Builds a `Set` of seconds-since-epoch timestamps covering both the\nlegacy `disabledDays` (already-numeric) array and the ISO `blackoutDates`\narray. Use this for O(1) membership checks in hot paths.", "return": { "type": { "text": "Set" } } }, { "kind": "function", "name": "isBlackoutTimestamp", "parameters": [ { "name": "dateTs", "description": "Unix timestamp (seconds) to test.", "type": { "text": "number" } }, { "name": "disabledDays", "description": "Legacy timestamp array.", "type": { "text": "Array|undefined" } }, { "name": "blackoutDates", "description": "ISO `YYYY-MM-DD` array.", "type": { "text": "Array|undefined" } } ], "description": "One-shot membership test for a single timestamp against both blackout\nsources. Allocates a Set on each call; only use this in cold paths\n(e.g. the pre-`firstUpdated` cell fallback). Hot paths should hold the\nSet returned from `buildBlackoutSet` and `.has(ts)` directly.", "return": { "type": { "text": "boolean" } } } ], "exports": [ { "kind": "js", "name": "parseIsoToTimestamp", "declaration": { "name": "parseIsoToTimestamp", "module": "components/datepicker/src/blackoutUtils.js" } }, { "kind": "js", "name": "buildBlackoutSet", "declaration": { "name": "buildBlackoutSet", "module": "components/datepicker/src/blackoutUtils.js" } }, { "kind": "js", "name": "isBlackoutTimestamp", "declaration": { "name": "isBlackoutTimestamp", "module": "components/datepicker/src/blackoutUtils.js" } } ] }, { "kind": "javascript-module", "path": "components/datepicker/src/buttonVersion.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "12.3.2", "module": "components/datepicker/src/buttonVersion.js" } } ] }, { "kind": "javascript-module", "path": "components/datepicker/src/datepickerKeyboardStrategy.js", "declarations": [ { "kind": "variable", "name": "datepickerKeyboardStrategy", "type": { "text": "object" }, "default": "{ Escape(component, evt, ctx) { if (!ctx.isExpanded) { return; } // Stop propagation so parent containers (auro-dialog, auro-drawer) // don't also react to Escape. evt.stopPropagation(); evt.preventDefault(); // Signal to the visibility-change handler in auro-datepicker.js that // focus should be restored to the trigger regardless of hasFocus. // hidePopover() (desktop non-modal path) does not auto-restore focus, // and hiding the grid's popover ancestor drops focus to . That // synchronously fires focusout on the datepicker host — clearing // hasFocus — before updated() runs, which would otherwise skip the // input refocus. Native .close() (modal path) restores focus // itself, but the flag is harmless there. component._restoreFocusOnClose = true; component.hideBib(); }, Enter(component, evt, ctx) { if (ctx.isExpanded) { return; } // Only open from the trigger input, not the clear button or other internal elements. // evt.target is retargeted to the host in shadow DOM, so use composedPath() // to find the real origin. The clear button is rendered with class \"clearBtn\". const path = evt.composedPath(); if (path.some(el => el.classList?.contains('clearBtn'))) { return; } evt.preventDefault(); component.dropdown.show(); }, ' '(component, evt, ctx) { if (ctx.isExpanded) { return; } // Only open from the trigger input, not the clear button or other internal elements. // evt.target is retargeted to the host in shadow DOM, so use composedPath() // to find the real origin. The clear button is rendered with class \"clearBtn\". const path = evt.composedPath(); if (path.some(el => el.classList?.contains('clearBtn'))) { return; } evt.preventDefault(); component.dropdown.show(); }, }" } ], "exports": [ { "kind": "js", "name": "datepickerKeyboardStrategy", "declaration": { "name": "datepickerKeyboardStrategy", "module": "components/datepicker/src/datepickerKeyboardStrategy.js" } } ] }, { "kind": "javascript-module", "path": "components/datepicker/src/iconVersion.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "9.2.0", "module": "components/datepicker/src/iconVersion.js" } } ] }, { "kind": "javascript-module", "path": "components/datepicker/src/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "AuroDatePicker", "declaration": { "name": "AuroDatePicker", "module": "components/datepicker/src/index.js" } } ] }, { "kind": "javascript-module", "path": "components/datepicker/src/popoverVersion.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "6.0.1", "module": "components/datepicker/src/popoverVersion.js" } } ] }, { "kind": "javascript-module", "path": "components/datepicker/src/registered.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "components/datepicker/src/utilities.js", "declarations": [ { "kind": "class", "description": "", "name": "AuroDatepickerUtilities", "members": [ { "kind": "method", "name": "convertDateToFirstOfMonth", "parameters": [ { "name": "date", "description": "Date to convert to the first day of the month.", "type": { "text": "Object" } } ], "description": "Converts any date object to a date object representing the first day of the month.", "return": { "type": { "text": "Object" } } }, { "kind": "method", "name": "monthDiff", "parameters": [ { "name": "date1", "description": "First date to compare.", "type": { "text": "Object" } }, { "name": "date2", "description": "Second date to compare.", "type": { "text": "Object" } } ], "description": "Calculate the number of months between two dates.", "return": { "type": { "text": "Number" } } }, { "kind": "method", "name": "generateIconHtml", "parameters": [ { "name": "icon", "description": "Icon object containing the SVG.", "type": { "text": "Object" } } ], "description": "Function to generate checkmark svg.", "privacy": "private", "return": { "type": { "text": "Object" } } }, { "kind": "method", "name": "datesMatch", "parameters": [ { "name": "date1", "description": "First date to compare.", "type": { "text": "Object" } }, { "name": "date2", "description": "Second date to compare.", "type": { "text": "Object" } } ], "description": "Compares two dates to see if they match.", "privacy": "private", "return": { "type": { "text": "Boolean" } } } ] } ], "exports": [ { "kind": "js", "name": "AuroDatepickerUtilities", "declaration": { "name": "AuroDatepickerUtilities", "module": "components/datepicker/src/utilities.js" } } ] }, { "kind": "javascript-module", "path": "components/datepicker/src/utilitiesCalendar.js", "declarations": [ { "kind": "class", "description": "", "name": "CalendarUtilities", "members": [ { "kind": "method", "name": "scrollMonthIntoView", "parameters": [ { "name": "elem", "description": "The calendar element.", "type": { "text": "Object" } }, { "name": "date", "description": "The date to scroll into view.", "type": { "text": "String" } } ], "description": "Scroll the calendar month list to a given valid date if in mobile view.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "requestDismiss", "description": "Sends an event requesting the dropdown bib be closed.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "assessNavigationButtonVisibility", "parameters": [ { "name": "elem", "description": "The auro-calendar element.", "type": { "text": "Object" } } ], "description": "Handles the visibility of the previous and next month buttons.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "centralDateChanged", "parameters": [ { "name": "elem", "description": "The auro-calendar element.", "type": { "text": "Object" } } ], "description": "Handles the change of the centralDate property.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleMonthChange", "parameters": [ { "name": "elem", "description": "The auro-calendar element.", "type": { "text": "Object" } }, { "name": "direction", "description": "The direction the user is navigating.", "type": { "text": "String" } } ], "description": "Updates the month and year when the user navigates to a different calendar month.", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "util", "default": "new AuroDatepickerUtilities()" } ], "events": [ { "name": "auroCalendar-dismissRequest", "type": { "text": "CustomEvent" } } ] } ], "exports": [ { "kind": "js", "name": "CalendarUtilities", "declaration": { "name": "CalendarUtilities", "module": "components/datepicker/src/utilitiesCalendar.js" } } ] }, { "kind": "javascript-module", "path": "components/datepicker/src/utilitiesCalendarRender.js", "declarations": [ { "kind": "class", "description": "", "name": "UtilitiesCalendarRender", "members": [ { "kind": "method", "name": "updateCentralDate", "parameters": [ { "name": "elem", "description": "The element to set the centralDate on.", "type": { "text": "Object" } }, { "name": "date", "description": "The date to set the centralDate to.", "type": { "text": "String" } } ], "description": "Attempt to update the central date but only if the date is a valid date.", "privacy": "private" }, { "kind": "method", "name": "determineDefinedCalendarRange", "parameters": [ { "name": "elem", "description": "The auro-calendar element.", "type": { "text": "Object" } } ], "description": "Determine how many months to render based on the defined calendar range.", "privacy": "private", "return": { "type": { "text": "Number" } } }, { "kind": "method", "name": "maximumRenderableMonths", "parameters": [ { "name": "elem", "description": "The auro-calendar element.", "type": { "text": "Object" } }, { "name": "isMobile", "description": "True if it's to render for mobile view.", "type": { "text": "Boolean" } } ], "description": "Determines how many calendar months can be rendered based on the screen size and defined range.", "privacy": "private", "return": { "type": { "text": "Number" } } }, { "kind": "method", "name": "determineNumCalendarsToRender", "parameters": [ { "name": "elem", "description": "The auro-calendar element.", "type": { "text": "Object" } }, { "name": "isMobile", "description": "True if it's to render for mobile view.", "type": { "text": "Boolean" } } ], "description": "Determines the number of months rendered inside the calendar.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "setFirstRenderableMonthDate", "parameters": [ { "name": "elem", "description": "The auro-calendar element.", "type": { "text": "Object" } } ], "description": "Determine which month is to be rendered first.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "renderCalendar", "parameters": [ { "name": "elem", "description": "The auro-calendar element.", "type": { "text": "Object" } }, { "name": "month", "description": "Month the calendar displays.", "type": { "text": "Number" } }, { "name": "year", "description": "Year the calendar displays.", "type": { "text": "Number" } } ], "description": "Renders one auro-calendar-month HTML for the given month/date combination.", "privacy": "private", "return": { "type": { "text": "Object" } } }, { "kind": "field", "name": "util", "default": "new AuroDatepickerUtilities()" } ] } ], "exports": [ { "kind": "js", "name": "UtilitiesCalendarRender", "declaration": { "name": "UtilitiesCalendarRender", "module": "components/datepicker/src/utilitiesCalendarRender.js" } } ] }, { "kind": "javascript-module", "path": "components/dropdown/src/auro-dropdown.js", "declarations": [ { "kind": "class", "description": "The `auro-dropdown` element provides a way to place content in a bib that can be toggled.", "name": "AuroDropdown", "cssParts": [ { "description": "The trigger content container.", "name": "trigger" }, { "description": "The trigger wrapper element surrounding the trigger content and chevron.", "name": "wrapper" }, { "description": "The collapsed/expanded state icon container.", "name": "chevron" }, { "description": "The size of the dropdown bib. (height, width, maxHeight, maxWidth only)", "name": "size" }, { "description": "The helpText content container.", "name": "helpText" } ], "slots": [ { "description": "Default slot for the dropdown bib content.", "name": "" }, { "description": "Defines the content of the helpText.", "name": "helpText" }, { "description": "Defines the content of the trigger.", "name": "trigger" } ], "members": [ { "kind": "field", "name": "shadowRootOptions", "static": true, "readonly": true }, { "kind": "field", "name": "commonWrapperClasses", "privacy": "private", "return": { "type": { "text": "object" } }, "readonly": true }, { "kind": "method", "name": "_intializeDefaults", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "hide", "description": "Public method to hide the dropdown.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "show", "description": "Public method to show the dropdown.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "focus", "description": "When bib is open, focus on the first element inside of bib.\nIf not, trigger element will get focus." }, { "kind": "method", "name": "focusTrigger", "description": "Focus the trigger content. When the trigger wrapper itself is focusable\n(has tabindex), focus it directly. Otherwise, focus the first focusable\nelement slotted into the trigger slot (for example the auro-input).", "privacy": "private" }, { "kind": "method", "name": "setActiveDescendant", "parameters": [ { "name": "element", "description": "The element to set as the active descendant, or null to clear.", "type": { "text": "HTMLElement|null" } } ], "description": "Sets the active descendant element for accessibility.\nUses ariaActiveDescendantElement to cross shadow DOM boundaries.\nThis function is used in components that contain `auro-dropdown` to set the active descendant.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-dropdown\"", "description": "The name of the element that you want to register.", "optional": true, "type": { "text": "string" } } ], "description": "This will register this element with the browser." }, { "kind": "field", "name": "focusableEntityQuery", "description": "Accessor for reusing the focusable entity query string.", "privacy": "private", "return": { "type": { "text": "string" } }, "readonly": true }, { "kind": "method", "name": "handleDropdownToggle", "parameters": [ { "name": "event", "description": "The custom event that contains the dropdown toggle information.", "type": { "text": "CustomEvent" } } ], "description": "Handles the custom event `auroDropdown-toggled` to update the visibility of the dropdown bib.", "privacy": "private" }, { "kind": "method", "name": "exposeCssParts", "description": "Exposes CSS parts for styling from parent components.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "isCustomSlotContent", "parameters": [ { "name": "element", "description": "The element to check.", "type": { "text": "HTMLElement" } } ], "description": "Determines if content is within a custom slot.", "privacy": "private", "return": { "type": { "text": "Boolean" } } }, { "kind": "method", "name": "handleFocusin", "description": "Function to support", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "updateFocusTrap", "privacy": "private" }, { "kind": "method", "name": "_getActiveElements", "description": "Returns the chain of active (focused) elements through shadow roots.", "privacy": "private", "return": { "type": { "text": "Array" } } }, { "kind": "method", "name": "_setPageInert", "description": "Sets `inert` on sibling elements of the dropdown's top-level host\nso that content outside the dropdown is not interactive while the modal is open.\nWalks up through shadow DOM boundaries to find the outermost host element\nin the light DOM, then sets `inert` on siblings at each ancestor level\nto ensure all page content outside the host subtree is inert.", "privacy": "private" }, { "kind": "method", "name": "_clearPageInert", "description": "Restores `inert` state on siblings that were tracked by `_setPageInert`.\nUses reference counting so inert is only cleared when the last modal\ndropdown releases a given element. Preserves the original inert state\nso externally-inerted elements are not inadvertently re-enabled.", "privacy": "private" }, { "kind": "method", "name": "handleFocusout", "description": "Function to support", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "bindFocusEventToTrigger", "parameters": [ { "name": "event", "description": "The original focus event.", "type": { "text": "Event" } } ], "description": "Creates and dispatches a duplicate focus event on the trigger element.", "privacy": "private" }, { "kind": "method", "name": "setupTriggerFocusEventBinding", "description": "Sets up event listeners to deliver focus and blur events from nested Auro components within the trigger slot to trigger.\nThis ensures that focus/blur events originating from within these components are propagated to the trigger element itself.", "privacy": "private" }, { "kind": "method", "name": "clearTriggerFocusEventBinding", "description": "Clears focus and blur event listeners from nested Auro components within the trigger slot.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "clearTriggerA11yAttributes", "parameters": [ { "name": "triggerElement" } ] }, { "kind": "method", "name": "handleTriggerContentSlotChange", "parameters": [ { "name": "event", "description": "Native slotchange event.", "type": { "text": "Event" } } ], "description": "Handles changes to the trigger content slot and updates related properties.\n\nIt first updates the floater settings\nThen, it retrieves the assigned nodes from the event target and checks if any of\nthe nodes contain non-empty text content, updating the `hasTriggerContent` property accordingly.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleDefaultSlot", "description": "Handles the default slot change event and updates the content.\n\nThis method retrieves all nodes assigned to the default slot of the event target and appends them\nto the `bibContent` element. If a callback function `onSlotChange` is defined, it is invoked to\nnotify about the slot change.", "privacy": "private" }, { "kind": "method", "name": "renderBasicHtml", "parameters": [ { "name": "helpTextClasses", "description": "Classes to apply to the help text container.", "type": { "text": "Object" } } ], "description": "Returns HTML for the common portion of the layouts.", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "method", "name": "renderLayoutClassic", "description": "Returns HTML for the classic layout. Does not support type=\"*\".", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "method", "name": "renderLayoutSnowflake", "description": "Returns HTML for the snowflake layout. Does not support type=\"*\".", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "method", "name": "renderLayoutEmphasized", "description": "Returns HTML for the emphasized layout. Does not support type=\"*\".", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "method", "name": "renderLayout", "parameters": [ { "name": "ForcedLayout", "description": "Used to force a specific layout, pass in the layout name to use.", "optional": true, "type": { "text": "string" } } ], "description": "Logic to determine the layout of the component.", "privacy": "private", "return": { "type": { "text": "HTMLCollection" } } }, { "kind": "field", "name": "isPopoverVisible", "privacy": "public", "type": { "text": "boolean" }, "description": "If true, the dropdown bib is displayed.", "default": "false", "attribute": "open", "reflects": true }, { "kind": "field", "name": "isBibFullscreen", "privacy": "public", "type": { "text": "boolean" }, "description": "If true, the dropdown bib is taking the fullscreen when it's open.", "default": "false", "attribute": "isbibfullscreen", "reflects": true }, { "kind": "field", "name": "matchWidth", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the popover and trigger will be set to the same width.", "default": "false", "attribute": "matchwidth", "reflects": true }, { "kind": "field", "name": "noHideOnThisFocusLoss", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the dropdown will not hide when moving focus outside the element.", "default": "false", "attribute": "nohideonthisfocusloss", "reflects": true }, { "kind": "field", "name": "noFocusRestoreOnClose", "type": { "text": "boolean" }, "description": "When true, the dropdown skips its generic focus restoration on close.\nSet by consumers (for example combobox) that manage their own focus routing\nvia setClearBtnFocus / setInputFocus / keyboard strategy.\nSeparate from noHideOnThisFocusLoss (which controls auto-close behavior).", "privacy": "private", "default": "false" }, { "kind": "field", "name": "errorMessage", "privacy": "public", "type": { "text": "string" }, "description": "Contains the help text message for the current validity error.", "default": "undefined", "attribute": "errormessage" }, { "kind": "field", "name": "layout", "privacy": "public", "type": { "text": "'classic' | 'emphasized' | 'snowflake'" }, "description": "Sets the layout of the dropdown.", "default": "undefined", "attribute": "layout", "reflects": true }, { "kind": "field", "name": "shape", "privacy": "public", "type": { "text": "'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'" }, "description": "Sets the shape of the dropdown.", "default": "undefined", "attribute": "shape", "reflects": true }, { "kind": "field", "name": "size", "privacy": "public", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, "description": "Sets the size of the dropdown.", "default": "undefined", "attribute": "size", "reflects": true }, { "kind": "field", "name": "parentBorder", "privacy": "private", "type": { "text": "boolean" }, "description": "Defines if the trigger should size based on the parent element providing the border UI.", "default": "false", "attribute": "parentborder", "reflects": true }, { "kind": "field", "name": "bibElement", "privacy": "private" }, { "kind": "field", "name": "a11yRole", "privacy": "public", "type": { "text": "string" }, "description": "The value for the role attribute of the trigger element." }, { "kind": "field", "name": "appearance", "privacy": "public", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "'default'", "attribute": "appearance", "reflects": true }, { "kind": "field", "name": "autoPlacement", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, bib's position will be automatically calculated where to appear.", "attribute": "autoplacement", "reflects": true }, { "kind": "field", "name": "desktopModal", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the dropdown will behave as a modal dialog when in a desktop viewport size.", "attribute": "desktopmodal", "reflects": true }, { "kind": "field", "name": "disableEventShow", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the dropdown will only show by calling the API .show() public method.", "attribute": "disableeventshow", "reflects": true }, { "kind": "field", "name": "simple", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, applies a border around the trigger slot.", "attribute": "simple", "reflects": true }, { "kind": "field", "name": "chevron", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the dropdown displays a chevron on the right.", "attribute": "chevron", "reflects": true }, { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the dropdown is not interactive.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "disableKeyboardHandling", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.", "attribute": "disablekeyboardhandling", "reflects": true }, { "kind": "field", "name": "dropdownWidth", "privacy": "public", "type": { "text": "number" }, "description": "Sets the width of the dropdown bib in pixels.", "attribute": "dropdownwidth" }, { "kind": "field", "name": "dropdownId", "privacy": "private", "type": { "text": "string" }, "description": "The unique ID for the dropdown bib element." }, { "kind": "field", "name": "error", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, will apply error UI to the dropdown.", "attribute": "error", "reflects": true }, { "kind": "field", "name": "focusShow", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the bib will display when focus is applied to the trigger.", "attribute": "focusshow", "reflects": true }, { "kind": "field", "name": "hoverToggle", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the trigger will toggle the dropdown on mouseover/mouseout.", "attribute": "hovertoggle", "reflects": true }, { "kind": "field", "name": "hasTriggerContent", "privacy": "private", "type": { "text": "boolean" } }, { "kind": "field", "name": "fullscreenBreakpoint", "privacy": "public", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'" }, "description": "Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.\n\nWhen expanded, the dropdown will automatically display in fullscreen mode\nif the screen size is equal to or smaller than the selected breakpoint.", "default": "'sm'", "attribute": "fullscreenbreakpoint", "reflects": true }, { "kind": "field", "name": "noFlip", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the bib will NOT flip to an alternate position\nwhen there isn't enough space in the specified `placement`.", "attribute": "noflip", "reflects": true }, { "kind": "field", "name": "shift", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the dropdown will shift its position to avoid being cut off by the viewport.", "attribute": "shift", "reflects": true }, { "kind": "field", "name": "noToggle", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the trigger will only show the dropdown bib.", "attribute": "notoggle", "reflects": true }, { "kind": "field", "name": "offset", "privacy": "public", "type": { "text": "number" }, "description": "Gap between the trigger element and bib.", "default": "0", "attribute": "offset", "reflects": true }, { "kind": "field", "name": "onDark", "privacy": "public", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "attribute": "ondark", "reflects": true, "deprecated": "Use `appearance=\"inverse\"` instead.", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "field", "name": "onSlotChange", "privacy": "public", "type": { "text": "() => void" }, "description": "If declared, and a function is set, that function will execute when the slot content is updated." }, { "kind": "field", "name": "placement", "privacy": "public", "type": { "text": "'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'" }, "description": "Position where the bib should appear relative to the trigger.", "default": "'bottom-start'", "attribute": "placement", "reflects": true }, { "kind": "field", "name": "tabIndex", "privacy": "public", "type": { "text": "number" }, "description": "Sets the tabindex applied to the dropdown trigger for keyboard focus order.", "attribute": "tabindex" }, { "kind": "field", "name": "bibDialogLabel", "privacy": "private", "type": { "text": "string" }, "description": "Accessible label for the dropdown bib dialog element." }, { "kind": "field", "name": "componentHasFocus", "description": "Returns true if the element has focus.", "privacy": "private", "return": { "type": { "text": "boolean" } }, "readonly": true, "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetShapeClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetLayoutClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "updateComponentArchitecture", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } } ], "events": [ { "name": "auroDropdown-idAdded", "type": { "text": "CustomEvent<{ id: string }>" }, "description": "Notifies consumers that the unique ID for the dropdown bib has been generated." }, { "name": "auroDropdown-triggerClick", "type": { "text": "CustomEvent" }, "description": "Notifies that the trigger has been clicked." }, { "description": "Notifies that the visibility of the dropdown bib has changed.", "name": "auroDropdown-toggled" } ], "attributes": [ { "name": "appearance", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "'default'", "fieldName": "appearance" }, { "name": "autoplacement", "type": { "text": "boolean" }, "description": "If declared, bib's position will be automatically calculated where to appear.", "fieldName": "autoPlacement" }, { "name": "desktopmodal", "type": { "text": "boolean" }, "description": "If declared, the dropdown will behave as a modal dialog when in a desktop viewport size.", "fieldName": "desktopModal" }, { "name": "disableeventshow", "type": { "text": "boolean" }, "description": "If declared, the dropdown will only show by calling the API .show() public method.", "fieldName": "disableEventShow" }, { "name": "simple", "type": { "text": "boolean" }, "description": "If declared, applies a border around the trigger slot.", "fieldName": "simple" }, { "name": "chevron", "type": { "text": "boolean" }, "description": "If declared, the dropdown displays a chevron on the right.", "fieldName": "chevron" }, { "name": "disabled", "type": { "text": "boolean" }, "description": "If declared, the dropdown is not interactive.", "fieldName": "disabled" }, { "name": "disablekeyboardhandling", "type": { "text": "boolean" }, "description": "If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.", "fieldName": "disableKeyboardHandling" }, { "name": "dropdownwidth", "type": { "text": "number" }, "description": "Sets the width of the dropdown bib in pixels.", "fieldName": "dropdownWidth" }, { "name": "error", "type": { "text": "boolean" }, "description": "If declared, will apply error UI to the dropdown.", "fieldName": "error" }, { "name": "errormessage", "type": { "text": "string" }, "description": "Contains the help text message for the current validity error.", "default": "undefined", "fieldName": "errorMessage" }, { "name": "focusshow", "type": { "text": "boolean" }, "description": "If declared, the bib will display when focus is applied to the trigger.", "fieldName": "focusShow" }, { "name": "open", "type": { "text": "boolean" }, "description": "If true, the dropdown bib is displayed.", "default": "false", "fieldName": "isPopoverVisible" }, { "name": "isbibfullscreen", "type": { "text": "boolean" }, "description": "If true, the dropdown bib is taking the fullscreen when it's open.", "default": "false", "fieldName": "isBibFullscreen" }, { "name": "hovertoggle", "type": { "text": "boolean" }, "description": "If declared, the trigger will toggle the dropdown on mouseover/mouseout.", "fieldName": "hoverToggle" }, { "name": "fullscreenbreakpoint", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'" }, "description": "Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.\n\nWhen expanded, the dropdown will automatically display in fullscreen mode\nif the screen size is equal to or smaller than the selected breakpoint.", "default": "'sm'", "fieldName": "fullscreenBreakpoint" }, { "name": "layout", "type": { "text": "'classic' | 'emphasized' | 'snowflake'" }, "description": "Sets the layout of the dropdown.", "default": "undefined", "fieldName": "layout" }, { "name": "shape", "type": { "text": "'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'" }, "description": "Sets the shape of the dropdown.", "default": "undefined", "fieldName": "shape" }, { "name": "size", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, "description": "Sets the size of the dropdown.", "default": "undefined", "fieldName": "size" }, { "name": "parentborder", "type": { "text": "boolean" }, "description": "Defines if the trigger should size based on the parent element providing the border UI.", "default": "false", "fieldName": "parentBorder" }, { "name": "matchwidth", "type": { "text": "boolean" }, "description": "If declared, the popover and trigger will be set to the same width.", "default": "false", "fieldName": "matchWidth" }, { "name": "noflip", "type": { "text": "boolean" }, "description": "If declared, the bib will NOT flip to an alternate position\nwhen there isn't enough space in the specified `placement`.", "fieldName": "noFlip" }, { "name": "shift", "type": { "text": "boolean" }, "description": "If declared, the dropdown will shift its position to avoid being cut off by the viewport.", "fieldName": "shift" }, { "name": "nohideonthisfocusloss", "type": { "text": "boolean" }, "description": "If declared, the dropdown will not hide when moving focus outside the element.", "default": "false", "fieldName": "noHideOnThisFocusLoss" }, { "name": "notoggle", "type": { "text": "boolean" }, "description": "If declared, the trigger will only show the dropdown bib.", "fieldName": "noToggle" }, { "name": "offset", "type": { "text": "number" }, "description": "Gap between the trigger element and bib.", "default": "0", "fieldName": "offset" }, { "name": "ondark", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "fieldName": "onDark", "deprecated": "Use `appearance=\"inverse\"` instead.", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "name": "placement", "type": { "text": "'top' | 'right' | 'bottom' | 'left' | 'bottom-start' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-end' | 'left-start' | 'left-end'" }, "description": "Position where the bib should appear relative to the trigger.", "default": "'bottom-start'", "fieldName": "placement" }, { "name": "tabindex", "type": { "text": "number" }, "description": "Sets the tabindex applied to the dropdown trigger for keyboard focus order.", "fieldName": "tabIndex" } ], "superclass": { "name": "AuroElement", "module": "/components/layoutElement/src/auroElement.js" }, "tagName": "auro-dropdown", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroDropdown", "declaration": { "name": "AuroDropdown", "module": "components/dropdown/src/auro-dropdown.js" } } ] }, { "kind": "javascript-module", "path": "components/dropdown/src/auro-dropdownBib.js", "declarations": [ { "kind": "class", "description": "The `auro-dropdownbib` element renders the dropdown's bib as a dialog/popover container and manages its fullscreen and modal display.", "name": "AuroDropdownBib", "cssParts": [ { "description": "Apply css to the bib container.", "name": "bibContainer" } ], "members": [ { "kind": "method", "name": "initializeArchitectureDefaults" }, { "kind": "field", "name": "mobileFullscreenBreakpoint" }, { "kind": "method", "name": "_setupCancelHandler", "parameters": [ { "name": "dialog", "description": "The dialog element to attach the cancel listener to.", "type": { "text": "HTMLDialogElement" } } ], "description": "Forwards the dialog's native `cancel` event (fired on ESC) as\nan `auro-bib-cancel` custom event so parent components can close.", "privacy": "private" }, { "kind": "method", "name": "_lockTouchScroll", "description": "Blocks touch-driven page scroll while a fullscreen modal dialog is open.\n\nThe showModal() function places the dialog in the browser's **top layer**,\nwhich is a separate rendering layer above the normal DOM. On mobile, the\ncompositor processes visual-viewport panning before top-layer touch\nhandling. This means the entire viewport — including the top-layer dialog\n— can be panned by a touch gesture, causing the page behind the dialog to\nscroll into view. To prevent this, we add a touchmove listener that cancels\nthe event if the touch started outside the dialog or any scrollable child within it.", "privacy": "private" }, { "kind": "method", "name": "_unlockTouchScroll", "description": "Removes the touchmove listener added by _lockTouchScroll().", "privacy": "private" }, { "kind": "method", "name": "open", "parameters": [ { "name": "modal", "default": "true" } ] }, { "kind": "method", "name": "close", "description": "Closes the dialog." }, { "kind": "field", "name": "_mobileBreakpointName", "privacy": "private", "default": "undefined" }, { "kind": "field", "name": "matchWidth", "privacy": "private", "type": { "text": "boolean" }, "description": "If declared, the bib width will match the trigger width.", "default": "false", "attribute": "matchwidth", "reflects": true }, { "kind": "field", "name": "hasActiveDescendant", "privacy": "private", "type": { "text": "boolean" }, "description": "Tracks whether a menu option is currently highlighted.", "default": "false", "attribute": "hasactivedescendant" }, { "type": { "text": "String" }, "description": "Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the dropdown switches to fullscreen mode on mobile. When expanded, the dropdown will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.", "name": "fullscreenBreakpoint", "kind": "field" }, { "kind": "field", "name": "isFullscreen", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, will take the fullscreen when the bib is displayed.", "attribute": "isfullscreen", "reflects": true }, { "kind": "field", "name": "common", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, will apply all styles for the common theme.", "attribute": "common", "reflects": true }, { "kind": "field", "name": "inset", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, will apply extra padding to bib content.", "attribute": "inset", "reflects": true }, { "kind": "field", "name": "rounded", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, will apply border-radius to the bib.", "attribute": "rounded", "reflects": true }, { "kind": "field", "name": "bibTemplate", "privacy": "public", "type": { "text": "object" }, "description": "A reference to the associated bib template element." }, { "kind": "field", "name": "shape", "privacy": "public", "type": { "text": "'box' | 'classic' | 'pill' | 'rounded' | 'snowflake'" }, "description": "Sets the shape of the dropdown bib.", "default": "'rounded'", "attribute": "shape", "reflects": true }, { "kind": "field", "name": "dialogLabel", "privacy": "private", "type": { "text": "string" }, "description": "Accessible label for the dialog element, used when displayed as a modal.\nApplied via aria-labelledby on a visually hidden element rather than\naria-label because iOS VoiceOver does not reliably read aria-label\non elements.", "attribute": "dialoglabel" }, { "kind": "field", "name": "dialogRole", "privacy": "private", "type": { "text": "string" }, "description": "Overrides the native role of the dialog element.\nFor example, set to `\"presentation\"` on desktop combobox to prevent\nVoiceOver from announcing \"listbox inside of a dialog\".\nWhen `undefined`, the dialog keeps its native role.", "attribute": "dialogrole" } ], "events": [ { "name": "auro-dropdownbib-connected", "type": { "text": "CustomEvent" }, "description": "Notifies that the dropdown bib has connected to the DOM, passing a reference to the element in the event detail." }, { "name": "auro-bib-cancel", "type": { "text": "CustomEvent" }, "description": "Notifies that the bib was cancelled (e.g. via the ESC key) so parent components can close it." } ], "attributes": [ { "name": "isfullscreen", "type": { "text": "boolean" }, "description": "If declared, will take the fullscreen when the bib is displayed.", "fieldName": "isFullscreen" }, { "name": "common", "type": { "text": "boolean" }, "description": "If declared, will apply all styles for the common theme.", "fieldName": "common" }, { "name": "inset", "type": { "text": "boolean" }, "description": "If declared, will apply extra padding to bib content.", "fieldName": "inset" }, { "name": "matchwidth", "type": { "text": "boolean" }, "description": "If declared, the bib width will match the trigger width.", "default": "false", "fieldName": "matchWidth" }, { "name": "rounded", "type": { "text": "boolean" }, "description": "If declared, will apply border-radius to the bib.", "fieldName": "rounded" }, { "name": "shape", "type": { "text": "'box' | 'classic' | 'pill' | 'rounded' | 'snowflake'" }, "description": "Sets the shape of the dropdown bib.", "default": "'rounded'", "fieldName": "shape" }, { "name": "dialoglabel", "type": { "text": "string" }, "description": "Accessible label for the dialog element, used when displayed as a modal.\nApplied via aria-labelledby on a visually hidden element rather than\naria-label because iOS VoiceOver does not reliably read aria-label\non elements.", "fieldName": "dialogLabel" }, { "name": "dialogrole", "type": { "text": "string" }, "description": "Overrides the native role of the dialog element.\nFor example, set to `\"presentation\"` on desktop combobox to prevent\nVoiceOver from announcing \"listbox inside of a dialog\".\nWhen `undefined`, the dialog keeps its native role.", "fieldName": "dialogRole" }, { "name": "hasactivedescendant", "type": { "text": "boolean" }, "description": "Tracks whether a menu option is currently highlighted.", "default": "false", "fieldName": "hasActiveDescendant" } ], "superclass": { "name": "LitElement", "package": "lit" }, "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroDropdownBib", "declaration": { "name": "AuroDropdownBib", "module": "components/dropdown/src/auro-dropdownBib.js" } } ] }, { "kind": "javascript-module", "path": "components/dropdown/src/dropdownBibKeyboardStrategy.js", "declarations": [ { "kind": "function", "name": "createDropdownBibKeyboardStrategy", "parameters": [ { "name": "bib", "description": "The dropdown bib element.", "type": { "text": "HTMLElement" } } ], "description": "Creates a keyboard strategy for dialog-specific key handling.\nAll other keydown behavior is left to the browser's native bubbling path.", "return": { "type": { "text": "Object" } } } ], "exports": [ { "kind": "js", "name": "createDropdownBibKeyboardStrategy", "declaration": { "name": "createDropdownBibKeyboardStrategy", "module": "components/dropdown/src/dropdownBibKeyboardStrategy.js" } } ] }, { "kind": "javascript-module", "path": "components/dropdown/src/iconVersion.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "9.2.0", "module": "components/dropdown/src/iconVersion.js" } } ] }, { "kind": "javascript-module", "path": "components/dropdown/src/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "AuroDropdown", "declaration": { "name": "AuroDropdown", "module": "components/dropdown/src/index.js" } } ] }, { "kind": "javascript-module", "path": "components/dropdown/src/registered.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "components/form/src/auro-form.js", "declarations": [ { "kind": "class", "description": "The `auro-form` element provides users a way to create and manage forms in a consistent manner.", "name": "AuroForm", "slots": [ { "description": "The default slot for form elements.", "name": "default" } ], "members": [ { "kind": "field", "name": "formElementTags", "static": true, "readonly": true }, { "kind": "method", "name": "_isElementTag", "parameters": [ { "name": "elementTag", "description": "The HTML tag name like `auro-datepicker`.", "type": { "text": "string" } }, { "name": "element", "description": "The actual HTML element to compare.", "type": { "text": "HTMLElement" } } ], "description": "Compare tag name with element to identify it (for API purposes).", "return": { "type": { "text": "boolean" } }, "privacy": "private" }, { "kind": "method", "name": "_isInElementCollection", "parameters": [ { "name": "collection", "description": "The array to use for tag name search.", "type": { "text": "string[]" } }, { "name": "element", "description": "The element to compare against the master list.", "type": { "text": "HTMLElement" } } ], "description": "Shared code for determining if an element is something we care about (submit, form element, etc.).", "return": { "type": { "text": "boolean" } }, "privacy": "private" }, { "kind": "method", "name": "isFormElement", "parameters": [ { "name": "element", "description": "The element to check (attr or tag name).", "type": { "text": "HTMLElement" } } ], "description": "Check if the tag name is a form element.", "return": { "type": { "text": "boolean" } }, "privacy": "private" }, { "kind": "method", "name": "_isDisabled", "parameters": [ { "name": "element", "description": "The element to check.", "type": { "text": "HTMLElement | undefined | null" } } ], "description": "Whether a given element is currently disabled. Disabled controls are excluded\nfrom submission, validity, and initial-state checks per the HTML spec\n(section 4.10.19.2 \"Enabling and disabling form controls\":\nhttps://www.w3.org/TR/2011/WD-html5-20110113/association-of-controls-and-forms.html).\n\nImplementation note: we deliberately read only the attribute. Every Auro\nform element in `formElementTags` declares `disabled` with `reflect: true`,\nso the attribute and property stay in sync. Reading the attribute also\nlets the MutationObserver in `connectedCallback` (which is filtered to\n`['disabled', 'name']`) be the single source of truth for re-renders.\nIf a future form-element type ships without attribute reflection, expand\nthis helper to also read `element.disabled`.", "return": { "type": { "text": "boolean" } }, "privacy": "private" }, { "kind": "method", "name": "_isNameDisabled", "parameters": [ { "name": "name", "description": "The `name` attribute used to register the element.", "type": { "text": "string" } } ], "description": "Whether the tracked form element registered under `name` is currently disabled.\nSee `_isDisabled` for the HTML-spec rationale behind excluding disabled\ncontrols from form state.\n\nReads a cached flag on `formState[name]` populated by `_addElementToState`\nat registration and refreshed by `_handleAttributeMutations` whenever the\nelement's `disabled` attribute toggles. The cache is fed by the same\n`hasAttribute('disabled')` read as `_isDisabled`, so the \"future form-element\ntype without attribute reflection\" caveat documented there applies here too.", "return": { "type": { "text": "boolean" } }, "privacy": "private" }, { "kind": "method", "name": "_eventIsValidFormEvent", "parameters": [ { "name": "event", "description": "The event to validate.", "type": { "text": "Event" } } ], "description": "Validates if an event is from a valid form element with a name.", "return": { "type": { "text": "boolean" } }, "privacy": "private" }, { "kind": "field", "name": "buttonElementTags", "static": true, "readonly": true }, { "kind": "method", "name": "isButtonElement", "parameters": [ { "name": "element", "description": "The element to check.", "type": { "text": "HTMLElement" } } ], "description": "Check if the tag name is a button element.", "return": { "type": { "text": "boolean" } }, "privacy": "private" }, { "kind": "field", "name": "value", "description": "Returns the current values of all named, enabled form elements as a key-value object, keyed by each element's `name` attribute. Each value is the child component's own `.value`, so the shape depends on the element type — see that component's documentation for its exact shape (for example, `auro-checkbox-group` yields an array, `auro-counter-group` yields an object keyed by counter name, and `auro-select` with `multiSelect` yields a JSON-encoded string). The one form-specific exception is a `range` `auro-datepicker`, whose `.values` array (`[start, end]`) is stored instead of its single `.value` string.", "return": { "type": { "text": "Record | null>" } }, "readonly": true }, { "kind": "field", "name": "submitElements", "description": "Getter for internal _submitElements.", "return": { "type": { "text": "HTMLButtonElement[]" } }, "privacy": "private", "readonly": true }, { "kind": "field", "name": "resetElements", "description": "Returns a collection of elements that will reset the form.", "return": { "type": { "text": "HTMLButtonElement[]" } }, "privacy": "private", "readonly": true }, { "kind": "method", "name": "_isFormValid", "description": "Raw constraint-validation check. Returns `true` when no enabled field\nhas a validity error. Unlike the public `validity` getter, this does\nNOT gate on `isInitialState` — callers that need to make a decision\nbased on the actual constraint state (submit-button enablement, the\ninternal `submit()` gate) read this so a pre-filled valid form is\ncorrectly recognized as submittable at first render.", "return": { "type": { "text": "boolean" } }, "privacy": "private" }, { "kind": "method", "name": "_hasResetableState", "description": "Whether the reset button should be enabled. True when the form has\ndiverged from its initial state (so the user can always return to\ndefaults — even if the dirty value lives behind a now-disabled field),\nOR when any non-disabled field has a current value or captured initial\nvalue (covers pre-filled forms and user-cleared-back-to-empty cases).", "return": { "type": { "text": "boolean" } }, "privacy": "private" }, { "kind": "method", "name": "_normalizeEmpty", "parameters": [ { "name": "value", "description": "Value to normalize.", "type": { "text": "*" } } ], "description": "Collapse empty representations to a single canonical `null`.\n\n`_addElementToState` captures `null` for a field that mounts without a\n`value` attribute (`element.value || element.getAttribute('value')` is\nfalsy → resolves to `null`), but `sharedInputListener` later stores the\nraw `event.target.value` — which is `''` for a user-cleared text input.\nWithout this normalization, backspacing back to empty would taint the\nform forever (`'' !== null`) and Reset would stay enabled with nothing\nto actually reset.\n\n`''`, `undefined`, and `[]` all collapse to `null`. The empty-array case\ncovers checkbox-group, radio-group, and multiselect, where `[]` means\n\"no selection\" — semantically the same as `null`/`''`. Genuine values\n— including `0`, `false`, non-empty strings, and non-empty arrays —\npass through unchanged so number, boolean, and populated multi-value\nfields still compare correctly.", "return": { "type": { "text": "*" } }, "privacy": "private" }, { "kind": "method", "name": "_calculateValidity", "description": "Infer validity status based on current formState.\n\nValidity stays `null` while the form is in its initial state — this is\nthe \"stay quiet until the user interacts\" UX contract that consumers\ndepend on to delay error indicators. Code that needs the raw\nconstraint-validation result regardless of interaction (e.g.,\nsubmit-button enablement) should call `_isFormValid()` directly.", "privacy": "private" }, { "kind": "field", "name": "validity", "description": "Returns `'valid'` if all required and interacted-with form elements are valid, `'invalid'` if any are not, or `null` if the form has not been interacted with yet.", "return": { "type": { "text": "\"valid\" | \"invalid\" | null" } }, "readonly": true }, { "kind": "method", "name": "_setInitialState", "description": "Determines whether the form is in its initial (untouched) state.\n\nA field is tainted if either:\n - its value differs from the value captured on first render, OR\n - its validity is failing (anything other than `null` or `'valid'`).\n\nValidity acts as a backup signal: it catches users who interact with a\nfield without changing its value (e.g., focusing and blurring a required\nfield). We skip `null` (not yet validated) and `'valid'` (the default\nafter Auro's auto-validation on mount) because neither proves the user\ntouched anything.", "return": { "type": { "text": "void" } }, "privacy": "private" }, { "kind": "field", "name": "isInitialState", "description": "Returns `true` if no form element has been interacted with or had its value changed since the form was initialized or last reset.", "return": { "type": { "text": "boolean" } }, "readonly": true }, { "kind": "method", "name": "setDisabledStateOnButtons", "description": "Enables or disables submit and reset buttons based on the current form state and validity.", "return": { "type": { "text": "void" } }, "privacy": "private" }, { "kind": "method", "name": "queryAuroElements", "description": "Construct the query strings from elements, append them together, execute, and return the NodeList.", "return": { "type": { "text": "NodeList" } }, "privacy": "private" }, { "kind": "method", "name": "_addElementToState", "parameters": [ { "name": "element", "description": "The element to add to our state.", "type": { "text": "HTMLElement" } } ], "description": "Store an element in state and on the _elements array.", "privacy": "private" }, { "kind": "method", "name": "initializeState", "description": "Initialize (or reinitialize) the form state.", "return": { "type": { "text": "void" } }, "privacy": "private" }, { "kind": "method", "name": "reset", "description": "Resets all form elements to their initial state and fires a `reset` event. The event's `detail.previousValue` contains the form values captured immediately before the reset.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "submit", "description": "Validates all form elements. If all are valid, fires a `submit` event with `detail.value` containing the current form values. If any element is invalid, its error state is surfaced and the `submit` event is not fired.", "return": { "type": { "text": "Promise" } } }, { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-form\"", "description": "The custom element tag name to register.", "optional": true, "type": { "text": "string" } } ], "description": "Registers the `auro-form` custom element with the browser under a given tag name." }, { "kind": "method", "name": "sharedInputListener", "parameters": [ { "name": "event", "description": "The event that is fired from the form element.", "type": { "text": "Event" } } ], "description": "Shared input listener for all form elements.", "privacy": "private" }, { "kind": "method", "name": "sharedValidationListener", "parameters": [ { "name": "event", "description": "The event that is fired from the form element.", "type": { "text": "Event" } } ], "description": "Shared validation listener for all form elements.", "privacy": "private" }, { "kind": "method", "name": "handleKeyDown", "parameters": [ { "name": "event", "description": "The keyboard event.", "type": { "text": "KeyboardEvent" } } ], "description": "Handle Enter key press on form elements.", "privacy": "private" }, { "kind": "method", "name": "_attachEventListeners", "description": "Attaches input, validation, and keydown listeners to all tracked form and button elements.\nRemoves existing listeners first to avoid duplicates on re-initialization.", "return": { "type": { "text": "void" } }, "privacy": "private" }, { "kind": "method", "name": "_handleAttributeMutations", "parameters": [ { "name": "mutations", "description": "The batched mutation records.", "type": { "text": "MutationRecord[]" } } ], "description": "Handle batched MutationObserver records for `disabled` and `name`\nattribute changes on tracked form elements. A `name` change invalidates\nthe formState keying — we resolve it by re-initializing state. A `disabled`\nchange simply needs a re-render (so `value` / `validity` getters re-evaluate)\nand a refresh of the submit/reset button enablement.", "return": { "type": { "text": "void" } }, "privacy": "private" }, { "kind": "method", "name": "mutationEventListener", "description": "Mutation observer for form elements. Slot change does not trigger unless\nroot-level elements are added/removed. This is a workaround to ensure\nnested form elements are also observed.", "return": { "type": { "text": "void" } }, "privacy": "private" }, { "kind": "method", "name": "onSlotChange", "parameters": [ { "name": "event", "description": "The slot change event.", "type": { "text": "Event" } } ], "description": "Slot change event listener. This is the main entry point for the form element.", "return": { "type": { "text": "void" } }, "privacy": "private" }, { "kind": "field", "name": "formState", "privacy": "private", "type": { "text": "FormState" }, "default": "{}" }, { "kind": "field", "name": "_validity", "privacy": "private", "type": { "text": "\"valid\" | \"invalid\" | null" }, "default": "null" }, { "kind": "field", "name": "_isInitialState", "privacy": "private", "type": { "text": "boolean" }, "default": "true" }, { "kind": "field", "name": "_elements", "privacy": "private", "type": { "text": "(HTMLElement & {reset: () => void})[]" }, "default": "[]" }, { "kind": "field", "name": "_submitElements", "privacy": "private", "type": { "text": "HTMLButtonElement[]" }, "default": "[]" }, { "kind": "field", "name": "_resetElements", "privacy": "private", "type": { "text": "HTMLButtonElement[]" }, "default": "[]" }, { "kind": "field", "name": "mutationObservers", "type": { "text": "MutationObserver[]" }, "privacy": "private", "default": "[]" }, { "kind": "field", "name": "_initialValues", "type": { "text": "Record | null | undefined>" }, "description": "Captured initial (default) value per field `name`. Populated on first\nsight of each name in `_addElementToState` and preserved across\nsubsequent `initializeState` cycles (slot change, rename, reset) so\n`_setInitialState` can detect user edits as `current !== initial`,\nmatching HTML's `dirtyValueFlag` semantics.", "privacy": "private", "default": "{}" }, { "kind": "field", "name": "_attributeObserver", "type": { "text": "MutationObserver | null" }, "privacy": "private", "default": "null" } ], "events": [ { "name": "change", "type": { "text": "Event" }, "description": "Fires when a child form element's value changes or the form is initialized." }, { "name": "reset", "type": { "text": "CustomEvent" }, "description": "Fires when the form is reset. The event detail contains the previous value of the form before reset." }, { "name": "submit", "type": { "text": "CustomEvent" }, "description": "Fires when the form is submitted. The event detail contains the current value of the form." }, { "description": "Fires when a child form element receives user input.", "name": "input" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "auro-form", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroForm", "declaration": { "name": "AuroForm", "module": "components/form/src/auro-form.js" } } ] }, { "kind": "javascript-module", "path": "components/form/src/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "AuroForm", "declaration": { "name": "AuroForm", "module": "components/form/src/index.js" } } ] }, { "kind": "javascript-module", "path": "components/form/src/registered.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "components/helptext/src/auro-helptext.js", "declarations": [ { "kind": "class", "description": "Displays help text or error messages within form elements - Internal Use Only.", "name": "AuroHelpText", "members": [ { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-helptext\"", "description": "The name of element that you want to register to.", "optional": true, "type": { "text": "string" } } ], "description": "This will register this element with the browser." }, { "kind": "method", "name": "handleSlotChange", "parameters": [ { "name": "event" } ] }, { "kind": "method", "name": "checkSlotsForContent", "parameters": [ { "name": "nodes", "description": "The list of nodes to check for content.", "type": { "text": "NodeList|Array" } } ], "description": "Checks if any of the provided nodes or their nested slot nodes contain non-empty text content.", "return": { "type": { "text": "boolean" } }, "privacy": "private" }, { "kind": "field", "name": "error", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, make font color red.", "default": "false", "attribute": "error", "reflects": true }, { "kind": "field", "name": "appearance", "privacy": "public", "type": { "text": "'default' | 'inverse'" }, "description": "The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).", "default": "\"default\"", "attribute": "appearance", "reflects": true }, { "kind": "field", "name": "onDark", "privacy": "public", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance` instead.", "deprecated": "Use `appearance` instead.", "default": "false", "attribute": "ondark", "reflects": true }, { "kind": "field", "name": "hasTextContent", "privacy": "private", "type": { "text": "boolean" }, "default": "false", "attribute": "hastextcontent" }, { "kind": "field", "name": "slotNodes", "privacy": "private", "type": { "text": "boolean" }, "attribute": "slotnodes" } ], "attributes": [ { "name": "appearance", "type": { "text": "'default' | 'inverse'" }, "description": "The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).", "default": "\"default\"", "fieldName": "appearance" }, { "name": "slotnodes", "type": { "text": "boolean" }, "fieldName": "slotNodes" }, { "name": "hastextcontent", "type": { "text": "boolean" }, "default": "false", "fieldName": "hasTextContent" }, { "name": "error", "type": { "text": "boolean" }, "description": "If declared, make font color red.", "default": "false", "fieldName": "error" }, { "name": "ondark", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance` instead.", "deprecated": "Use `appearance` instead.", "default": "false", "fieldName": "onDark" } ], "superclass": { "name": "LitElement", "package": "lit" }, "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroHelpText", "declaration": { "name": "AuroHelpText", "module": "components/helptext/src/auro-helptext.js" } } ] }, { "kind": "javascript-module", "path": "components/helptext/src/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "AuroHelpText", "declaration": { "name": "AuroHelpText", "module": "components/helptext/src/index.js" } } ] }, { "kind": "javascript-module", "path": "components/helptext/src/registered.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "components/input/src/auro-input-util.js", "declarations": [ { "kind": "function", "name": "formatISODate", "parameters": [ { "name": "isoStr", "description": "ISO date string in yyyy-mm-dd format.", "type": { "text": "string" } }, { "name": "format", "description": "Target display format (e.g. \"mm/dd/yyyy\", \"dd/mm/yyyy\", \"yyyy/mm/dd\").", "type": { "text": "string" } } ], "description": "Converts an ISO date string (yyyy-mm-dd) to a display string in the given format.\n\nMirrors the approach of `toISOFormatString` in dateFormatter.mjs but in reverse:\ninstead of Date → ISO, this goes ISO → display format.", "return": { "type": { "text": "string|undefined" } } }, { "kind": "variable", "name": "AuroInputUtil", "type": { "text": "object" }, "default": "{ toISOFormatString: dateFormatter.toISOFormatString, formatISODate, toFormattedValue: AuroInputUtilities.prototype.toFormattedValue.bind(new AuroInputUtilities()), }" } ], "exports": [ { "kind": "js", "name": "AuroInputUtil", "declaration": { "name": "AuroInputUtil", "module": "components/input/src/auro-input-util.js" } } ] }, { "kind": "javascript-module", "path": "components/input/src/auro-input.js", "declarations": [ { "kind": "class", "description": "The `auro-input` element provides users a way to enter data into a text field.", "name": "AuroInput", "cssParts": [ { "description": "Use for customizing the style of the root element", "name": "wrapper" }, { "description": "Use for customizing the style of the label element", "name": "label" }, { "description": "Use for customizing the style of the helpText element", "name": "helpText" }, { "description": "Use for customizing the style of the input element", "name": "input" }, { "description": "Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon)", "name": "accentIcon" }, { "description": "Use for customizing the style of the iconContainer (e.g. X icon for clearing input value)", "name": "iconContainer" }, { "description": "Use for customizing the style of the left accent element (e.g. padding, margin)", "name": "accent-left" }, { "description": "Use for customizing the style of the right accent element (e.g. padding, margin)", "name": "accent-right" }, { "description": "Use for customizing the style of the displayValue element", "name": "displayValue" }, { "description": "Use for customizing the style of the input help text wrapper", "name": "inputHelpText" } ], "slots": [ { "description": "Sets aria-label on clear button for screen reader to read", "name": "ariaLabel.clear" }, { "description": "Sets aria-label on password button to toggle on showing password", "name": "ariaLabel.password.show" }, { "description": "Sets aria-label on password button to toggle off showing password", "name": "ariaLabel.password.hide" }, { "description": "Sets the help text displayed below the input.", "name": "helpText" }, { "description": "Sets the label text for the input.", "name": "label" }, { "description": "Allows overriding the optional display text \"(optional)\", which appears next to the label.", "name": "optionalLabel" }, { "description": "Allows custom HTML content to display in place of the value when the input is not focused.", "name": "displayValue" } ], "members": [ { "kind": "field", "name": "clearBtnClassMap", "description": "Returns classmap configuration for the clear button visibility.\nThe button is hidden when the input has no value, is read-only, or is disabled.", "privacy": "private", "return": { "type": { "text": "Record" } }, "readonly": true }, { "kind": "field", "name": "inputHidden", "description": "Determines if the HTML input element should be visually hidden.\nReturns true when display value content exists without focus and has a value,\nor when the input has no value, is not focused, and has no placeholder text.", "return": { "type": { "text": "boolean" } }, "privacy": "private", "readonly": true }, { "kind": "field", "name": "isClassicLayout", "description": "Whether the component is rendering the classic/default layout, meaning not\nemphasized and not snowflake. Kept as a single source of truth so\nlayout-scoped behavior such as activeLabel stays consistent across getters.", "return": { "type": { "text": "boolean" } }, "privacy": "private", "readonly": true }, { "kind": "field", "name": "noFocusOrValue", "description": "Determines if the input should display in a state with no focus or value indication.\nReturns true when the input has display content without focus and has a value,\nor when the input has no value and is not focused.", "return": { "type": { "text": "boolean" } }, "privacy": "private", "readonly": true }, { "kind": "field", "name": "labelHidden", "description": "Whether the label is being hidden currently based on state.", "return": { "type": { "text": "boolean" } }, "privacy": "private", "readonly": true }, { "kind": "field", "name": "labelFontClass", "description": "Returns the label font class based on layout and visibility state.", "privacy": "private", "return": { "type": { "text": "string" } }, "readonly": true }, { "kind": "field", "name": "inputFontClass", "description": "Returns the input font class based on layout and visibility state.", "privacy": "private", "return": { "type": { "text": "string" } }, "readonly": true }, { "kind": "field", "name": "commonLabelClasses", "description": "Returns classmap configuration for html5 input labels in all layouts.", "privacy": "private", "return": { "type": { "text": "Record" } }, "readonly": true }, { "kind": "field", "name": "commonInputClasses", "description": "Returns classmap configuration for html5 inputs in all layouts.", "privacy": "private", "return": { "type": { "text": "Record" } }, "readonly": true }, { "kind": "field", "name": "commonDisplayValueWrapperClasses", "description": "Common display value wrapper classes.", "privacy": "private", "return": { "type": { "text": "Record" } }, "readonly": true }, { "kind": "field", "name": "legacyInputClasses", "description": "Returns classmap configuration for html5 inputs in each layout.", "privacy": "private", "return": { "type": { "text": "object" } }, "readonly": true }, { "kind": "field", "name": "commonWrapperClasses", "description": "Returns classmap configuration for wrapper elements in each layout.", "privacy": "private", "return": { "type": { "text": "object" } }, "readonly": true }, { "kind": "field", "name": "helpTextClasses", "description": "Returns classmap configuration for helpText elements in each layout.", "privacy": "private", "return": { "type": { "text": "object" } }, "readonly": true }, { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-input\"", "description": "The name of the element that you want to register.", "optional": true, "type": { "text": "string" } } ], "description": "This will register this element with the browser." }, { "kind": "method", "name": "checkDisplayValueSlotChange", "description": "Function to determine if there is any displayValue content to render.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "getHelpText", "description": "Determines default help text string.", "privacy": "private", "deprecated": "See https://dev.azure.com/itsals/E_Retain_Content/_workitems/edit/1557296.", "return": { "type": { "text": "string" } } }, { "kind": "method", "name": "getInputType", "parameters": [ { "name": "type", "description": "Value entered into component prop.", "type": { "text": "string" } } ], "description": "Validates against list of supported this.allowedInputTypes; return type=text if invalid request.", "privacy": "private", "return": { "type": { "text": "string" } } }, { "kind": "method", "name": "handleClickShowPassword", "description": "Function to support show-password feature.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "definePattern", "privacy": "private", "return": { "type": { "text": "string" } } }, { "kind": "method", "name": "renderValidationErrorIconHtml", "description": "Returns HTML for the validation error icon.", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "method", "name": "renderHtmlInput", "parameters": [ { "name": "useLegacyHiddenState", "default": "false", "description": "If true, the input will be visually hidden when not focused and has no value.", "optional": true, "type": { "text": "boolean" } } ], "description": "Returns HTML for the HTML5 input element.", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "method", "name": "renderHtmlActionClear", "description": "Returns HTML for the clear action button.", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "method", "name": "renderHtmlNotificationPassword", "description": "Returns HTML for the show password button.", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "method", "name": "renderHtmlTypeIcon", "description": "Returns HTML for the input type icon.", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "method", "name": "renderHtmlHelpText", "description": "Returns HTML for the help text and error message.", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "method", "name": "renderLayoutClassic", "description": "Returns HTML for the classic layout.", "privacy": "private", "return": { "type": { "text": "TemplateResult" } } }, { "kind": "method", "name": "renderLayoutEmphasized", "description": "Returns HTML for the emphasized layout. Does not support type=\"*\".", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "method", "name": "renderLayoutSnowflake", "description": "Returns HTML for the emphasized layout. Does not support type=\"*\".", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "method", "name": "renderLayout", "parameters": [ { "name": "ForcedLayout", "description": "Used to force a specific layout, pass in the layout name to use.", "optional": true, "type": { "text": "string" } } ], "description": "Logic to determine the layout of the component.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "buttonTag", "privacy": "private" }, { "kind": "field", "name": "hasDisplayValueContent", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "helpTextTag", "privacy": "private" }, { "kind": "field", "name": "iconTag", "privacy": "private" }, { "kind": "field", "name": "clearButtonRef", "privacy": "private" }, { "kind": "field", "name": "shadowRootOptions", "static": true, "readonly": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "initializeArchitectureDefaults", "description": "Sets the default `layout`, `shape`, and `size` values.\n\nThese are assigned in a helper method rather than the constructor body so\nthe CEM analyzer keeps their `@type` string-literal unions (a literal\nassignment in the constructor would make the analyzer infer `string` and\noverride the union — see AlaskaAirlines/discussions#653, gotcha 1).", "privacy": "private", "return": { "type": { "text": "void" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "valueObject", "description": "Read-only Date object representation of `value` for full date formats.", "return": { "type": { "text": "Date|undefined" } }, "readonly": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "minObject", "description": "Read-only Date object representation of `min` for full date formats.", "return": { "type": { "text": "Date|undefined" } }, "readonly": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "maxObject", "description": "Read-only Date object representation of `max` for full date formats.", "return": { "type": { "text": "Date|undefined" } }, "readonly": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "format", "privacy": "public", "type": { "text": "string" }, "description": "Overrides LitElement's generated accessor so we can track whether the\nconsumer explicitly set `format`. Locale-derived updates use\n`_setFormatFromLocale` instead, which skips this flag.", "attribute": "format", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "_setFormatFromLocale", "parameters": [ { "name": "value", "type": { "text": "string" } } ], "description": "Sets format without marking it as user-set. Used by locale auto-derive\nso that a subsequent locale change can still update the format.", "privacy": "private", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "patchInputEvent", "parameters": [ { "name": "input", "description": "The input element to patch.", "type": { "text": "HTMLInputElement" } } ], "description": "Patches the input element to dispatch an 'input' event whenever its value is set programmatically.\nThis ensures that changes to the input's value are consistently communicated, even if not triggered by user input.", "return": { "type": { "text": "void" } }, "privacy": "private", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "setCustomHelpTextMessage", "privacy": "private", "deprecated": "See https://dev.azure.com/itsals/E_Retain_Content/_workitems/edit/1557296.", "return": { "type": { "text": "void" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "notifyValidityChange", "privacy": "private", "return": { "type": { "text": "void" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "configureAutoFormatting", "description": "Sets up IMasks and logic based on auto-formatting requirements.", "privacy": "private", "return": { "type": { "text": "void" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "notifyValueChanged", "description": "Sends event notifying that the input has changed it's value.", "privacy": "private", "return": { "type": { "text": "void" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "handleClick", "description": "Handles clicking on the auro-input anywhere outside of the HTML5 input and still moving focus in.", "privacy": "private", "return": { "type": { "text": "void" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "focus", "description": "Function to set element focus.", "return": { "type": { "text": "void" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "handleClickClear", "description": "Handles event of clearing input content by clicking the X icon.", "privacy": "private", "return": { "type": { "text": "void" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "handleInput", "parameters": [ { "name": "event", "description": "The input event.", "type": { "text": "Event" } } ], "privacy": "private", "return": { "type": { "text": "void" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "handleFocusin", "description": "Function to support", "privacy": "private", "return": { "type": { "text": "void" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "handleFocusout", "description": "Function to support", "privacy": "private", "return": { "type": { "text": "void" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "handleBlur", "description": "Function to support", "privacy": "private", "return": { "type": { "text": "void" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "getActiveElement", "parameters": [ { "name": "root", "default": "document", "description": "Element to check for focus.", "type": { "text": "Object" } } ], "description": "Returns focused element, even if it's in the shadow DOM.", "privacy": "private", "return": { "type": { "text": "Object" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "setActiveDescendant", "parameters": [ { "name": "element", "description": "The element to set as the active descendant, or null to clear.", "type": { "text": "HTMLElement|null" } } ], "description": "Sets the active descendant element for accessibility.\nUses ariaActiveDescendantElement to cross shadow DOM boundaries.\nThis function is used in components that contain `auro-input` to set the active descendant.", "privacy": "private", "return": { "type": { "text": "void" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "validate", "parameters": [ { "name": "force", "default": "false", "description": "Whether to force validation.", "optional": true, "type": { "text": "boolean" } } ], "description": "Validates value.", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "reset", "description": "Resets component to initial state, including resetting the touched state and validity.", "return": { "type": { "text": "void" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "clear", "description": "Clears the input value.", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "configureDataForType", "description": "Sets configuration data used elsewhere based on the `type` attribute.", "privacy": "private", "return": { "type": { "text": "void" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "placeholderStr", "description": "Support placeholder text.", "privacy": "private", "return": { "type": { "text": "void" } }, "readonly": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "processCreditCard", "description": "Function to support credit-card feature type.", "privacy": "private", "return": { "type": { "text": "void" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "method", "name": "matchInputValueToCreditCard", "description": "Function to support credit-card feature type.", "privacy": "private", "deprecated": "See https://dev.azure.com/itsals/E_Retain_Content/_workitems/edit/1557296.", "return": { "type": { "text": "object" } }, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "activeLabel", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, the label will remain fixed in the active position.\nOnly applies to the classic/default layout; the emphasized and snowflake\nlayouts always render the label inside the field, so this has no effect there.", "default": "false", "attribute": "activelabel", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "allowedInputTypes", "type": { "text": "string[]" }, "privacy": "private", "default": "[ \"text\", \"number\", \"email\", \"password\", \"credit-card\", \"tel\" ]", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "appearance", "privacy": "public", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "\"default\"", "attribute": "appearance", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "dateFormatMap", "type": { "text": "Record" }, "privacy": "private", "default": "{ 'mm/dd/yyyy': 'dateMMDDYYYY', 'dd/mm/yyyy': 'dateDDMMYYYY', 'yyyy/mm/dd': 'dateYYYYMMDD', 'yyyy/dd/mm': 'dateYYYYDDMM', 'mm/yy': 'dateMMYY', 'yy/mm': 'dateYYMM', 'mm/yyyy': 'dateMMYYYY', 'yyyy/mm': 'dateYYYYMM', 'yy': 'dateYY', 'yyyy': 'dateYYYY', 'mm': 'dateMM', 'dd': 'dateDD', 'dd/mm': 'dateDDMM', 'mm/dd': 'dateMMDD' }", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, disables the input.", "default": "false", "attribute": "disabled", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "domHandler", "privacy": "private", "default": "new DomHandler()", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "dvInputOnly", "privacy": "public", "type": { "text": "boolean" }, "description": "If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.", "default": "false", "attribute": "dvinputonly", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "hasValue", "privacy": "public", "type": { "text": "boolean" }, "description": "Flag to indicate if the input currently has value.", "default": "false", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "hideLabelVisually", "privacy": "private", "type": { "text": "boolean" }, "description": "If set, the label will be hidden visually but still accessible to assistive technologies.", "default": "false", "attribute": "hidelabelvisually", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "icon", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.", "default": "false", "attribute": "icon", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "inputIconName", "privacy": "private", "default": "undefined", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "label", "type": { "text": "string" }, "privacy": "private", "default": "'Input label is undefined'", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "locale", "privacy": "public", "type": { "text": "string" }, "description": "Defines the locale of an element.\nUsed for locale-specific formatting, such as date formats.", "default": "'en-US'", "attribute": "locale", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "_format", "default": "undefined", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "_userSetFormat", "type": { "text": "boolean" }, "privacy": "private", "default": "false", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "max", "privacy": "public", "type": { "text": "string" }, "description": "The maximum value allowed. This only applies for inputs with a type of `number` and ISO format.", "default": "undefined", "attribute": "max", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "maxLength", "privacy": "public", "type": { "text": "number" }, "description": "The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.\n**Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers.", "default": "undefined", "attribute": "maxlength", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "min", "privacy": "public", "type": { "text": "string" }, "description": "The minimum value allowed. This only applies for inputs with a type of `number` and ISO date format.", "default": "undefined", "attribute": "min", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "minLength", "privacy": "public", "type": { "text": "number" }, "description": "The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`.", "default": "undefined", "attribute": "minlength", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "noValidate", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, disables auto-validation on blur.", "default": "false", "attribute": "novalidate", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "onDark", "privacy": "public", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "attribute": "ondark", "reflects": true, "deprecated": "Use `appearance=\"inverse\"` instead.", "default": "false", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "field", "name": "required", "privacy": "public", "type": { "text": "boolean" }, "description": "Populates the `required` attribute on the input. Used for client-side validation.", "default": "false", "attribute": "required", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "setCustomValidityForType", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display for the declared element `type` and type validity fails.", "default": "undefined", "attribute": "setcustomvalidityfortype", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "setSelectionInputTypes", "type": { "text": "string[]" }, "privacy": "private", "default": "[ \"text\", \"password\", \"email\" ]", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "showPassword", "privacy": "private", "type": { "text": "boolean" }, "default": "false", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "touched", "privacy": "private", "type": { "text": "boolean" }, "description": "Indicates whether the input is in a dirty state (has been interacted with).", "default": "false", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "uniqueId", "privacy": "private", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "util", "privacy": "private", "default": "new AuroInputUtilities({ locale: this.locale, format: this.format })", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "validation", "privacy": "private", "default": "new AuroFormValidation()", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "validationCCLength", "privacy": "private", "default": "undefined", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "value", "privacy": "public", "type": { "text": "string" }, "description": "Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.\nFor `date` type inputs using a full date format (year/month/day), the `value` should be ISO (YYYY-MM-DD). Partial date formats use the display format.", "default": "undefined", "attribute": "value", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "layout", "privacy": "public", "type": { "text": "'classic' | 'emphasized' | 'emphasized-left' | 'emphasized-right' | 'snowflake' | 'snowflake-left' | 'snowflake-right'" }, "description": "Sets the layout variant of the input.", "default": "'classic'", "attribute": "layout", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "shape", "privacy": "public", "type": { "text": "'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'" }, "description": "Sets the shape of the input.", "default": "'classic'", "attribute": "shape", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "size", "privacy": "public", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, "description": "Sets the size of the input.", "default": "'lg'", "attribute": "size", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "a11yRole", "privacy": "public", "type": { "text": "string" }, "description": "The value for the role attribute.", "attribute": "a11yrole", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "a11yControls", "privacy": "public", "type": { "text": "string" }, "description": "The value for the aria-controls attribute.", "attribute": "a11ycontrols", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "a11yExpanded", "privacy": "public", "type": { "text": "boolean" }, "description": "The value for the aria-expanded attribute.", "attribute": "a11yexpanded", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "a11yActivedescendant", "privacy": "public", "type": { "text": "string" }, "description": "The value for the aria-activedescendant attribute.\nPoints to the ID of the currently active/highlighted option in a listbox.", "attribute": "a11yactivedescendant", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "autocapitalize", "privacy": "public", "type": { "text": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'" }, "description": "An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.", "attribute": "autocapitalize", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "autocomplete", "privacy": "public", "type": { "text": "string" }, "description": "An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete=\"off\"` is supported.", "attribute": "autocomplete", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "autocorrect", "privacy": "public", "type": { "text": "'on' | 'off'" }, "description": "When set to `off`, stops iOS from auto-correcting words when typed into a text box.", "attribute": "autocorrect", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "customValidityTypeEmail", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message for email type validity.", "attribute": "customvaliditytypeemail", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "error", "privacy": "public", "type": { "text": "string" }, "description": "When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.", "attribute": "error", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "errorMessage", "privacy": "public", "type": { "text": "string" }, "description": "Contains the help text message for the current validity error.", "attribute": "errormessage", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "hasFocus", "privacy": "public", "type": { "text": "boolean" }, "description": "Flag to indicate if the input currently has focus.", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "id", "privacy": "public", "type": { "text": "string" }, "description": "The id global attribute defines an identifier (ID) which must be unique in the whole document.", "attribute": "id", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "inputId", "privacy": "private", "type": { "text": "string" }, "description": "The id for input node.", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "inputmode", "privacy": "public", "type": { "text": "string" }, "description": "Exposes inputmode attribute for input.", "attribute": "inputmode", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "lang", "privacy": "public", "type": { "text": "string" }, "description": "Defines the language of an element.", "attribute": "lang", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "name", "privacy": "public", "type": { "text": "string" }, "description": "Populates the `name` attribute on the input.", "attribute": "name", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "nested", "privacy": "public", "type": { "text": "boolean" }, "description": "Sets styles for nested operation - removes borders, hides help + error text, and\nhides accents.", "attribute": "nested", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "pattern", "privacy": "public", "type": { "text": "string" }, "description": "Specifies a regular expression the form control's value should match.", "attribute": "pattern", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "placeholder", "privacy": "public", "type": { "text": "string" }, "description": "Define custom placeholder text.", "attribute": "placeholder", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "readonly", "privacy": "public", "type": { "text": "boolean" }, "description": "Makes the input read-only, but can be set programmatically.", "attribute": "readonly", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "setCustomValidity", "privacy": "public", "type": { "text": "string" }, "description": "Sets a custom help text message to display for all validityStates.", "attribute": "setcustomvalidity", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "setCustomValidityBadInput", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `badInput`.", "attribute": "setcustomvaliditybadinput", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "setCustomValidityCustomError", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `customError`.", "attribute": "setcustomvaliditycustomerror", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "setCustomValidityPatternMismatch", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `patternMismatch`.", "attribute": "setcustomvaliditypatternmismatch", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "setCustomValidityRangeOverflow", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `rangeOverflow`.", "attribute": "setcustomvalidityrangeoverflow", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "setCustomValidityRangeUnderflow", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `rangeUnderflow`.", "attribute": "setcustomvalidityrangeunderflow", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "setCustomValidityTooLong", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `tooLong`.", "attribute": "setcustomvaliditytoolong", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "setCustomValidityTooShort", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `tooShort`.", "attribute": "setcustomvaliditytooshort", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "setCustomValidityValueMissing", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `valueMissing`.", "attribute": "setcustomvalidityvaluemissing", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "simple", "privacy": "public", "type": { "text": "boolean" }, "description": "Simple makes the input render without a border.", "attribute": "simple", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "spellcheck", "privacy": "public", "type": { "text": "'true' | 'false'" }, "description": "An enumerated attribute defines whether the element may be checked for spelling errors. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.", "attribute": "spellcheck", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "type", "privacy": "public", "type": { "text": "'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'" }, "description": "Populates the `type` attribute on the input.", "default": "'text'", "attribute": "type", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "validateOnInput", "privacy": "public", "type": { "text": "boolean" }, "description": "Sets validation mode to re-eval with each input.", "attribute": "validateoninput", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "validity", "privacy": "public", "type": { "text": "string" }, "description": "Specifies the `validityState` this element is in.", "attribute": "validity", "reflects": true, "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "kind": "field", "name": "componentHasFocus", "description": "Returns true if the element has focus.", "privacy": "private", "return": { "type": { "text": "boolean" } }, "readonly": true, "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetShapeClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetLayoutClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "updateComponentArchitecture", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } } ], "superclass": { "name": "BaseInput", "module": "/components/input/src/base-input.js" }, "tagName": "auro-input", "customElement": true, "attributes": [ { "name": "layout", "type": { "text": "'classic' | 'emphasized' | 'emphasized-left' | 'emphasized-right' | 'snowflake' | 'snowflake-left' | 'snowflake-right'" }, "description": "Sets the layout variant of the input.", "default": "'classic'", "fieldName": "layout", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "shape", "type": { "text": "'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'" }, "description": "Sets the shape of the input.", "default": "'classic'", "fieldName": "shape", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "size", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, "description": "Sets the size of the input.", "default": "'lg'", "fieldName": "size", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "a11yrole", "type": { "text": "string" }, "description": "The value for the role attribute.", "fieldName": "a11yRole", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "a11ycontrols", "type": { "text": "string" }, "description": "The value for the aria-controls attribute.", "fieldName": "a11yControls", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "a11yexpanded", "type": { "text": "boolean" }, "description": "The value for the aria-expanded attribute.", "fieldName": "a11yExpanded", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "a11yactivedescendant", "type": { "text": "string" }, "description": "The value for the aria-activedescendant attribute.\nPoints to the ID of the currently active/highlighted option in a listbox.", "fieldName": "a11yActivedescendant", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "activelabel", "type": { "text": "boolean" }, "description": "If set, the label will remain fixed in the active position.\nOnly applies to the classic/default layout; the emphasized and snowflake\nlayouts always render the label inside the field, so this has no effect there.", "default": "false", "fieldName": "activeLabel", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "appearance", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "\"default\"", "fieldName": "appearance", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "autocapitalize", "type": { "text": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'" }, "description": "An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.", "fieldName": "autocapitalize", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "autocomplete", "type": { "text": "string" }, "description": "An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete=\"off\"` is supported.", "fieldName": "autocomplete", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "autocorrect", "type": { "text": "'on' | 'off'" }, "description": "When set to `off`, stops iOS from auto-correcting words when typed into a text box.", "fieldName": "autocorrect", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "customvaliditytypeemail", "type": { "text": "string" }, "description": "Custom help text message for email type validity.", "fieldName": "customValidityTypeEmail", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "disabled", "type": { "text": "boolean" }, "description": "If set, disables the input.", "default": "false", "fieldName": "disabled", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "dvinputonly", "type": { "text": "boolean" }, "description": "If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.", "default": "false", "fieldName": "dvInputOnly", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "error", "type": { "text": "string" }, "description": "When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.", "fieldName": "error", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "errormessage", "type": { "text": "string" }, "description": "Contains the help text message for the current validity error.", "fieldName": "errorMessage", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "format", "type": { "text": "string" }, "description": "Overrides LitElement's generated accessor so we can track whether the\nconsumer explicitly set `format`. Locale-derived updates use\n`_setFormatFromLocale` instead, which skips this flag.", "fieldName": "format", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "hidelabelvisually", "type": { "text": "boolean" }, "description": "If set, the label will be hidden visually but still accessible to assistive technologies.", "default": "false", "fieldName": "hideLabelVisually", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "icon", "type": { "text": "boolean" }, "description": "If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.", "default": "false", "fieldName": "icon", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "id", "type": { "text": "string" }, "description": "The id global attribute defines an identifier (ID) which must be unique in the whole document.", "fieldName": "id", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "inputmode", "type": { "text": "string" }, "description": "Exposes inputmode attribute for input.", "fieldName": "inputmode", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "lang", "type": { "text": "string" }, "description": "Defines the language of an element.", "fieldName": "lang", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "locale", "type": { "text": "string" }, "description": "Defines the locale of an element.\nUsed for locale-specific formatting, such as date formats.", "default": "'en-US'", "fieldName": "locale", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "max", "type": { "text": "string" }, "description": "The maximum value allowed. This only applies for inputs with a type of `number` and ISO format.", "default": "undefined", "fieldName": "max", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "maxlength", "type": { "text": "number" }, "description": "The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.\n**Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers.", "default": "undefined", "fieldName": "maxLength", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "min", "type": { "text": "string" }, "description": "The minimum value allowed. This only applies for inputs with a type of `number` and ISO date format.", "default": "undefined", "fieldName": "min", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "minlength", "type": { "text": "number" }, "description": "The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`.", "default": "undefined", "fieldName": "minLength", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "name", "type": { "text": "string" }, "description": "Populates the `name` attribute on the input.", "fieldName": "name", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "nested", "type": { "text": "boolean" }, "description": "Sets styles for nested operation - removes borders, hides help + error text, and\nhides accents.", "fieldName": "nested", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "novalidate", "type": { "text": "boolean" }, "description": "If set, disables auto-validation on blur.", "default": "false", "fieldName": "noValidate", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "ondark", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "fieldName": "onDark", "deprecated": "Use `appearance=\"inverse\"` instead.", "default": "false", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "name": "pattern", "type": { "text": "string" }, "description": "Specifies a regular expression the form control's value should match.", "fieldName": "pattern", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "placeholder", "type": { "text": "string" }, "description": "Define custom placeholder text.", "fieldName": "placeholder", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "readonly", "type": { "text": "boolean" }, "description": "Makes the input read-only, but can be set programmatically.", "fieldName": "readonly", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "required", "type": { "text": "boolean" }, "description": "Populates the `required` attribute on the input. Used for client-side validation.", "default": "false", "fieldName": "required", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "setcustomvalidity", "type": { "text": "string" }, "description": "Sets a custom help text message to display for all validityStates.", "fieldName": "setCustomValidity", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "setcustomvaliditybadinput", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `badInput`.", "fieldName": "setCustomValidityBadInput", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "setcustomvaliditycustomerror", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `customError`.", "fieldName": "setCustomValidityCustomError", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "setcustomvalidityfortype", "type": { "text": "string" }, "description": "Custom help text message to display for the declared element `type` and type validity fails.", "default": "undefined", "fieldName": "setCustomValidityForType", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "setcustomvaliditypatternmismatch", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `patternMismatch`.", "fieldName": "setCustomValidityPatternMismatch", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "setcustomvalidityrangeoverflow", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `rangeOverflow`.", "fieldName": "setCustomValidityRangeOverflow", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "setcustomvalidityrangeunderflow", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `rangeUnderflow`.", "fieldName": "setCustomValidityRangeUnderflow", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "setcustomvaliditytoolong", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `tooLong`.", "fieldName": "setCustomValidityTooLong", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "setcustomvaliditytooshort", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `tooShort`.", "fieldName": "setCustomValidityTooShort", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "setcustomvalidityvaluemissing", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `valueMissing`.", "fieldName": "setCustomValidityValueMissing", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "simple", "type": { "text": "boolean" }, "description": "Simple makes the input render without a border.", "fieldName": "simple", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "spellcheck", "type": { "text": "'true' | 'false'" }, "description": "An enumerated attribute defines whether the element may be checked for spelling errors. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.", "fieldName": "spellcheck", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "type", "type": { "text": "'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'" }, "description": "Populates the `type` attribute on the input.", "default": "'text'", "fieldName": "type", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "validateoninput", "type": { "text": "boolean" }, "description": "Sets validation mode to re-eval with each input.", "fieldName": "validateOnInput", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "validity", "type": { "text": "string" }, "description": "Specifies the `validityState` this element is in.", "fieldName": "validity", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "name": "value", "type": { "text": "string" }, "description": "Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.\nFor `date` type inputs using a full date format (year/month/day), the `value` should be ISO (YYYY-MM-DD). Partial date formats use the display format.", "default": "undefined", "fieldName": "value", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } } ], "events": [ { "name": "auroInput-validityChange", "type": { "text": "CustomEvent" }, "description": "Notifies that the `validity` state of the input has changed.", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "description": "Event fires when the value of an `auro-input` has been changed.", "name": "input", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } }, { "description": "Notifies that the `validity` and `errorMessage` value has changed.", "name": "auroFormElement-validated", "inheritedFrom": { "name": "BaseInput", "module": "components/input/src/base-input.js" } } ] } ], "exports": [ { "kind": "js", "name": "AuroInput", "declaration": { "name": "AuroInput", "module": "components/input/src/auro-input.js" } } ] }, { "kind": "javascript-module", "path": "components/input/src/base-input.js", "declarations": [ { "kind": "class", "description": "Base class for auro-input component that provides core input functionality.", "name": "BaseInput", "members": [ { "kind": "field", "name": "shadowRootOptions", "static": true, "readonly": true }, { "kind": "method", "name": "initializeArchitectureDefaults", "description": "Sets the default `layout`, `shape`, and `size` values.\n\nThese are assigned in a helper method rather than the constructor body so\nthe CEM analyzer keeps their `@type` string-literal unions (a literal\nassignment in the constructor would make the analyzer infer `string` and\noverride the union — see AlaskaAirlines/discussions#653, gotcha 1).", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "valueObject", "description": "Read-only Date object representation of `value` for full date formats.", "return": { "type": { "text": "Date|undefined" } }, "readonly": true }, { "kind": "field", "name": "minObject", "description": "Read-only Date object representation of `min` for full date formats.", "return": { "type": { "text": "Date|undefined" } }, "readonly": true }, { "kind": "field", "name": "maxObject", "description": "Read-only Date object representation of `max` for full date formats.", "return": { "type": { "text": "Date|undefined" } }, "readonly": true }, { "kind": "field", "name": "format", "privacy": "public", "type": { "text": "string" }, "description": "Overrides LitElement's generated accessor so we can track whether the\nconsumer explicitly set `format`. Locale-derived updates use\n`_setFormatFromLocale` instead, which skips this flag.", "attribute": "format", "reflects": true }, { "kind": "method", "name": "_setFormatFromLocale", "parameters": [ { "name": "value", "type": { "text": "string" } } ], "description": "Sets format without marking it as user-set. Used by locale auto-derive\nso that a subsequent locale change can still update the format.", "privacy": "private" }, { "kind": "method", "name": "patchInputEvent", "parameters": [ { "name": "input", "description": "The input element to patch.", "type": { "text": "HTMLInputElement" } } ], "description": "Patches the input element to dispatch an 'input' event whenever its value is set programmatically.\nThis ensures that changes to the input's value are consistently communicated, even if not triggered by user input.", "return": { "type": { "text": "void" } }, "privacy": "private" }, { "kind": "method", "name": "setCustomHelpTextMessage", "privacy": "private", "deprecated": "See https://dev.azure.com/itsals/E_Retain_Content/_workitems/edit/1557296.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "notifyValidityChange", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "configureAutoFormatting", "description": "Sets up IMasks and logic based on auto-formatting requirements.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "notifyValueChanged", "description": "Sends event notifying that the input has changed it's value.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleClick", "description": "Handles clicking on the auro-input anywhere outside of the HTML5 input and still moving focus in.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "focus", "description": "Function to set element focus.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleClickClear", "description": "Handles event of clearing input content by clicking the X icon.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleInput", "parameters": [ { "name": "event", "description": "The input event.", "type": { "text": "Event" } } ], "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleFocusin", "description": "Function to support", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleFocusout", "description": "Function to support", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleBlur", "description": "Function to support", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "getActiveElement", "parameters": [ { "name": "root", "default": "document", "description": "Element to check for focus.", "type": { "text": "Object" } } ], "description": "Returns focused element, even if it's in the shadow DOM.", "privacy": "private", "return": { "type": { "text": "Object" } } }, { "kind": "method", "name": "setActiveDescendant", "parameters": [ { "name": "element", "description": "The element to set as the active descendant, or null to clear.", "type": { "text": "HTMLElement|null" } } ], "description": "Sets the active descendant element for accessibility.\nUses ariaActiveDescendantElement to cross shadow DOM boundaries.\nThis function is used in components that contain `auro-input` to set the active descendant.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "validate", "parameters": [ { "name": "force", "default": "false", "description": "Whether to force validation.", "optional": true, "type": { "text": "boolean" } } ], "description": "Validates value." }, { "kind": "method", "name": "reset", "description": "Resets component to initial state, including resetting the touched state and validity.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "clear", "description": "Clears the input value." }, { "kind": "method", "name": "configureDataForType", "description": "Sets configuration data used elsewhere based on the `type` attribute.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "placeholderStr", "description": "Support placeholder text.", "privacy": "private", "return": { "type": { "text": "void" } }, "readonly": true }, { "kind": "method", "name": "processCreditCard", "description": "Function to support credit-card feature type.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "matchInputValueToCreditCard", "description": "Function to support credit-card feature type.", "privacy": "private", "deprecated": "See https://dev.azure.com/itsals/E_Retain_Content/_workitems/edit/1557296.", "return": { "type": { "text": "object" } } }, { "kind": "field", "name": "activeLabel", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, the label will remain fixed in the active position.\nOnly applies to the classic/default layout; the emphasized and snowflake\nlayouts always render the label inside the field, so this has no effect there.", "default": "false", "attribute": "activelabel", "reflects": true }, { "kind": "field", "name": "allowedInputTypes", "type": { "text": "string[]" }, "privacy": "private", "default": "[ \"text\", \"number\", \"email\", \"password\", \"credit-card\", \"tel\" ]" }, { "kind": "field", "name": "appearance", "privacy": "public", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "\"default\"", "attribute": "appearance", "reflects": true }, { "kind": "field", "name": "dateFormatMap", "type": { "text": "Record" }, "privacy": "private", "default": "{ 'mm/dd/yyyy': 'dateMMDDYYYY', 'dd/mm/yyyy': 'dateDDMMYYYY', 'yyyy/mm/dd': 'dateYYYYMMDD', 'yyyy/dd/mm': 'dateYYYYDDMM', 'mm/yy': 'dateMMYY', 'yy/mm': 'dateYYMM', 'mm/yyyy': 'dateMMYYYY', 'yyyy/mm': 'dateYYYYMM', 'yy': 'dateYY', 'yyyy': 'dateYYYY', 'mm': 'dateMM', 'dd': 'dateDD', 'dd/mm': 'dateDDMM', 'mm/dd': 'dateMMDD' }" }, { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, disables the input.", "default": "false", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "domHandler", "privacy": "private", "default": "new DomHandler()" }, { "kind": "field", "name": "dvInputOnly", "privacy": "public", "type": { "text": "boolean" }, "description": "If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.", "default": "false", "attribute": "dvinputonly", "reflects": true }, { "kind": "field", "name": "hasValue", "privacy": "public", "type": { "text": "boolean" }, "description": "Flag to indicate if the input currently has value.", "default": "false" }, { "kind": "field", "name": "hideLabelVisually", "privacy": "private", "type": { "text": "boolean" }, "description": "If set, the label will be hidden visually but still accessible to assistive technologies.", "default": "false", "attribute": "hidelabelvisually", "reflects": true }, { "kind": "field", "name": "icon", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.", "default": "false", "attribute": "icon", "reflects": true }, { "kind": "field", "name": "inputIconName", "privacy": "private", "default": "undefined" }, { "kind": "field", "name": "label", "type": { "text": "string" }, "privacy": "private", "default": "'Input label is undefined'" }, { "kind": "field", "name": "locale", "privacy": "public", "type": { "text": "string" }, "description": "Defines the locale of an element.\nUsed for locale-specific formatting, such as date formats.", "default": "'en-US'", "attribute": "locale", "reflects": true }, { "kind": "field", "name": "_format", "default": "undefined" }, { "kind": "field", "name": "_userSetFormat", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "max", "privacy": "public", "type": { "text": "string" }, "description": "The maximum value allowed. This only applies for inputs with a type of `number` and ISO format.", "default": "undefined", "attribute": "max" }, { "kind": "field", "name": "maxLength", "privacy": "public", "type": { "text": "number" }, "description": "The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.\n**Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers.", "default": "undefined", "attribute": "maxlength", "reflects": true }, { "kind": "field", "name": "min", "privacy": "public", "type": { "text": "string" }, "description": "The minimum value allowed. This only applies for inputs with a type of `number` and ISO date format.", "default": "undefined", "attribute": "min" }, { "kind": "field", "name": "minLength", "privacy": "public", "type": { "text": "number" }, "description": "The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`.", "default": "undefined", "attribute": "minlength", "reflects": true }, { "kind": "field", "name": "noValidate", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, disables auto-validation on blur.", "default": "false", "attribute": "novalidate", "reflects": true }, { "kind": "field", "name": "onDark", "privacy": "public", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "attribute": "ondark", "reflects": true, "deprecated": "Use `appearance=\"inverse\"` instead.", "default": "false", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "field", "name": "required", "privacy": "public", "type": { "text": "boolean" }, "description": "Populates the `required` attribute on the input. Used for client-side validation.", "default": "false", "attribute": "required", "reflects": true }, { "kind": "field", "name": "setCustomValidityForType", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display for the declared element `type` and type validity fails.", "default": "undefined", "attribute": "setcustomvalidityfortype" }, { "kind": "field", "name": "setSelectionInputTypes", "type": { "text": "string[]" }, "privacy": "private", "default": "[ \"text\", \"password\", \"email\" ]" }, { "kind": "field", "name": "showPassword", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "touched", "privacy": "private", "type": { "text": "boolean" }, "description": "Indicates whether the input is in a dirty state (has been interacted with).", "default": "false" }, { "kind": "field", "name": "uniqueId", "privacy": "private" }, { "kind": "field", "name": "util", "privacy": "private", "default": "new AuroInputUtilities({ locale: this.locale, format: this.format })" }, { "kind": "field", "name": "validation", "privacy": "private", "default": "new AuroFormValidation()" }, { "kind": "field", "name": "validationCCLength", "privacy": "private", "default": "undefined" }, { "kind": "field", "name": "value", "privacy": "public", "type": { "text": "string" }, "description": "Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.\nFor `date` type inputs using a full date format (year/month/day), the `value` should be ISO (YYYY-MM-DD). Partial date formats use the display format.", "default": "undefined", "attribute": "value" }, { "kind": "field", "name": "layout", "privacy": "public", "type": { "text": "'classic' | 'emphasized' | 'emphasized-left' | 'emphasized-right' | 'snowflake' | 'snowflake-left' | 'snowflake-right'" }, "description": "Sets the layout variant of the input.", "default": "'classic'", "attribute": "layout", "reflects": true }, { "kind": "field", "name": "shape", "privacy": "public", "type": { "text": "'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'" }, "description": "Sets the shape of the input.", "default": "'classic'", "attribute": "shape", "reflects": true }, { "kind": "field", "name": "size", "privacy": "public", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, "description": "Sets the size of the input.", "default": "'lg'", "attribute": "size", "reflects": true }, { "kind": "field", "name": "a11yRole", "privacy": "public", "type": { "text": "string" }, "description": "The value for the role attribute.", "attribute": "a11yrole", "reflects": true }, { "kind": "field", "name": "a11yControls", "privacy": "public", "type": { "text": "string" }, "description": "The value for the aria-controls attribute.", "attribute": "a11ycontrols", "reflects": true }, { "kind": "field", "name": "a11yExpanded", "privacy": "public", "type": { "text": "boolean" }, "description": "The value for the aria-expanded attribute.", "attribute": "a11yexpanded", "reflects": true }, { "kind": "field", "name": "a11yActivedescendant", "privacy": "public", "type": { "text": "string" }, "description": "The value for the aria-activedescendant attribute.\nPoints to the ID of the currently active/highlighted option in a listbox.", "attribute": "a11yactivedescendant", "reflects": true }, { "kind": "field", "name": "autocapitalize", "privacy": "public", "type": { "text": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'" }, "description": "An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.", "attribute": "autocapitalize", "reflects": true }, { "kind": "field", "name": "autocomplete", "privacy": "public", "type": { "text": "string" }, "description": "An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete=\"off\"` is supported.", "attribute": "autocomplete", "reflects": true }, { "kind": "field", "name": "autocorrect", "privacy": "public", "type": { "text": "'on' | 'off'" }, "description": "When set to `off`, stops iOS from auto-correcting words when typed into a text box.", "attribute": "autocorrect", "reflects": true }, { "kind": "field", "name": "customValidityTypeEmail", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message for email type validity.", "attribute": "customvaliditytypeemail" }, { "kind": "field", "name": "error", "privacy": "public", "type": { "text": "string" }, "description": "When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.", "attribute": "error", "reflects": true }, { "kind": "field", "name": "errorMessage", "privacy": "public", "type": { "text": "string" }, "description": "Contains the help text message for the current validity error.", "attribute": "errormessage" }, { "kind": "field", "name": "hasFocus", "privacy": "public", "type": { "text": "boolean" }, "description": "Flag to indicate if the input currently has focus." }, { "kind": "field", "name": "id", "privacy": "public", "type": { "text": "string" }, "description": "The id global attribute defines an identifier (ID) which must be unique in the whole document.", "attribute": "id", "reflects": true }, { "kind": "field", "name": "inputId", "privacy": "private", "type": { "text": "string" }, "description": "The id for input node." }, { "kind": "field", "name": "inputmode", "privacy": "public", "type": { "text": "string" }, "description": "Exposes inputmode attribute for input.", "attribute": "inputmode", "reflects": true }, { "kind": "field", "name": "lang", "privacy": "public", "type": { "text": "string" }, "description": "Defines the language of an element.", "attribute": "lang", "reflects": true }, { "kind": "field", "name": "name", "privacy": "public", "type": { "text": "string" }, "description": "Populates the `name` attribute on the input.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "nested", "privacy": "public", "type": { "text": "boolean" }, "description": "Sets styles for nested operation - removes borders, hides help + error text, and\nhides accents.", "attribute": "nested", "reflects": true }, { "kind": "field", "name": "pattern", "privacy": "public", "type": { "text": "string" }, "description": "Specifies a regular expression the form control's value should match.", "attribute": "pattern", "reflects": true }, { "kind": "field", "name": "placeholder", "privacy": "public", "type": { "text": "string" }, "description": "Define custom placeholder text.", "attribute": "placeholder", "reflects": true }, { "kind": "field", "name": "readonly", "privacy": "public", "type": { "text": "boolean" }, "description": "Makes the input read-only, but can be set programmatically.", "attribute": "readonly", "reflects": true }, { "kind": "field", "name": "setCustomValidity", "privacy": "public", "type": { "text": "string" }, "description": "Sets a custom help text message to display for all validityStates.", "attribute": "setcustomvalidity" }, { "kind": "field", "name": "setCustomValidityBadInput", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `badInput`.", "attribute": "setcustomvaliditybadinput" }, { "kind": "field", "name": "setCustomValidityCustomError", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `customError`.", "attribute": "setcustomvaliditycustomerror" }, { "kind": "field", "name": "setCustomValidityPatternMismatch", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `patternMismatch`.", "attribute": "setcustomvaliditypatternmismatch" }, { "kind": "field", "name": "setCustomValidityRangeOverflow", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `rangeOverflow`.", "attribute": "setcustomvalidityrangeoverflow" }, { "kind": "field", "name": "setCustomValidityRangeUnderflow", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `rangeUnderflow`.", "attribute": "setcustomvalidityrangeunderflow" }, { "kind": "field", "name": "setCustomValidityTooLong", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `tooLong`.", "attribute": "setcustomvaliditytoolong" }, { "kind": "field", "name": "setCustomValidityTooShort", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `tooShort`.", "attribute": "setcustomvaliditytooshort" }, { "kind": "field", "name": "setCustomValidityValueMissing", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `valueMissing`.", "attribute": "setcustomvalidityvaluemissing" }, { "kind": "field", "name": "simple", "privacy": "public", "type": { "text": "boolean" }, "description": "Simple makes the input render without a border.", "attribute": "simple", "reflects": true }, { "kind": "field", "name": "spellcheck", "privacy": "public", "type": { "text": "'true' | 'false'" }, "description": "An enumerated attribute defines whether the element may be checked for spelling errors. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.", "attribute": "spellcheck", "reflects": true }, { "kind": "field", "name": "type", "privacy": "public", "type": { "text": "'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'" }, "description": "Populates the `type` attribute on the input.", "default": "'text'", "attribute": "type", "reflects": true }, { "kind": "field", "name": "validateOnInput", "privacy": "public", "type": { "text": "boolean" }, "description": "Sets validation mode to re-eval with each input.", "attribute": "validateoninput" }, { "kind": "field", "name": "validity", "privacy": "public", "type": { "text": "string" }, "description": "Specifies the `validityState` this element is in.", "attribute": "validity", "reflects": true }, { "kind": "field", "name": "componentHasFocus", "description": "Returns true if the element has focus.", "privacy": "private", "return": { "type": { "text": "boolean" } }, "readonly": true, "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetShapeClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetLayoutClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "updateComponentArchitecture", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } } ], "events": [ { "name": "auroInput-validityChange", "type": { "text": "CustomEvent" }, "description": "Notifies that the `validity` state of the input has changed." }, { "description": "Event fires when the value of an `auro-input` has been changed.", "name": "input" }, { "description": "Notifies that the `validity` and `errorMessage` value has changed.", "name": "auroFormElement-validated" } ], "attributes": [ { "name": "layout", "type": { "text": "'classic' | 'emphasized' | 'emphasized-left' | 'emphasized-right' | 'snowflake' | 'snowflake-left' | 'snowflake-right'" }, "description": "Sets the layout variant of the input.", "default": "'classic'", "fieldName": "layout" }, { "name": "shape", "type": { "text": "'box' | 'classic' | 'pill' | 'pill-left' | 'pill-right' | 'rounded' | 'snowflake'" }, "description": "Sets the shape of the input.", "default": "'classic'", "fieldName": "shape" }, { "name": "size", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, "description": "Sets the size of the input.", "default": "'lg'", "fieldName": "size" }, { "name": "a11yrole", "type": { "text": "string" }, "description": "The value for the role attribute.", "fieldName": "a11yRole" }, { "name": "a11ycontrols", "type": { "text": "string" }, "description": "The value for the aria-controls attribute.", "fieldName": "a11yControls" }, { "name": "a11yexpanded", "type": { "text": "boolean" }, "description": "The value for the aria-expanded attribute.", "fieldName": "a11yExpanded" }, { "name": "a11yactivedescendant", "type": { "text": "string" }, "description": "The value for the aria-activedescendant attribute.\nPoints to the ID of the currently active/highlighted option in a listbox.", "fieldName": "a11yActivedescendant" }, { "name": "activelabel", "type": { "text": "boolean" }, "description": "If set, the label will remain fixed in the active position.\nOnly applies to the classic/default layout; the emphasized and snowflake\nlayouts always render the label inside the field, so this has no effect there.", "default": "false", "fieldName": "activeLabel" }, { "name": "appearance", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "\"default\"", "fieldName": "appearance" }, { "name": "autocapitalize", "type": { "text": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'" }, "description": "An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user.", "fieldName": "autocapitalize" }, { "name": "autocomplete", "type": { "text": "string" }, "description": "An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete=\"off\"` is supported.", "fieldName": "autocomplete" }, { "name": "autocorrect", "type": { "text": "'on' | 'off'" }, "description": "When set to `off`, stops iOS from auto-correcting words when typed into a text box.", "fieldName": "autocorrect" }, { "name": "customvaliditytypeemail", "type": { "text": "string" }, "description": "Custom help text message for email type validity.", "fieldName": "customValidityTypeEmail" }, { "name": "disabled", "type": { "text": "boolean" }, "description": "If set, disables the input.", "default": "false", "fieldName": "disabled" }, { "name": "dvinputonly", "type": { "text": "boolean" }, "description": "If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked.", "default": "false", "fieldName": "dvInputOnly" }, { "name": "error", "type": { "text": "string" }, "description": "When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.", "fieldName": "error" }, { "name": "errormessage", "type": { "text": "string" }, "description": "Contains the help text message for the current validity error.", "fieldName": "errorMessage" }, { "name": "format", "type": { "text": "string" }, "description": "Overrides LitElement's generated accessor so we can track whether the\nconsumer explicitly set `format`. Locale-derived updates use\n`_setFormatFromLocale` instead, which skips this flag.", "fieldName": "format" }, { "name": "hidelabelvisually", "type": { "text": "boolean" }, "description": "If set, the label will be hidden visually but still accessible to assistive technologies.", "default": "false", "fieldName": "hideLabelVisually" }, { "name": "icon", "type": { "text": "boolean" }, "description": "If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.", "default": "false", "fieldName": "icon" }, { "name": "id", "type": { "text": "string" }, "description": "The id global attribute defines an identifier (ID) which must be unique in the whole document.", "fieldName": "id" }, { "name": "inputmode", "type": { "text": "string" }, "description": "Exposes inputmode attribute for input.", "fieldName": "inputmode" }, { "name": "lang", "type": { "text": "string" }, "description": "Defines the language of an element.", "fieldName": "lang" }, { "name": "locale", "type": { "text": "string" }, "description": "Defines the locale of an element.\nUsed for locale-specific formatting, such as date formats.", "default": "'en-US'", "fieldName": "locale" }, { "name": "max", "type": { "text": "string" }, "description": "The maximum value allowed. This only applies for inputs with a type of `number` and ISO format.", "default": "undefined", "fieldName": "max" }, { "name": "maxlength", "type": { "text": "number" }, "description": "The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.\n**Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers.", "default": "undefined", "fieldName": "maxLength" }, { "name": "min", "type": { "text": "string" }, "description": "The minimum value allowed. This only applies for inputs with a type of `number` and ISO date format.", "default": "undefined", "fieldName": "min" }, { "name": "minlength", "type": { "text": "number" }, "description": "The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`.", "default": "undefined", "fieldName": "minLength" }, { "name": "name", "type": { "text": "string" }, "description": "Populates the `name` attribute on the input.", "fieldName": "name" }, { "name": "nested", "type": { "text": "boolean" }, "description": "Sets styles for nested operation - removes borders, hides help + error text, and\nhides accents.", "fieldName": "nested" }, { "name": "novalidate", "type": { "text": "boolean" }, "description": "If set, disables auto-validation on blur.", "default": "false", "fieldName": "noValidate" }, { "name": "ondark", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "fieldName": "onDark", "deprecated": "Use `appearance=\"inverse\"` instead.", "default": "false", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "name": "pattern", "type": { "text": "string" }, "description": "Specifies a regular expression the form control's value should match.", "fieldName": "pattern" }, { "name": "placeholder", "type": { "text": "string" }, "description": "Define custom placeholder text.", "fieldName": "placeholder" }, { "name": "readonly", "type": { "text": "boolean" }, "description": "Makes the input read-only, but can be set programmatically.", "fieldName": "readonly" }, { "name": "required", "type": { "text": "boolean" }, "description": "Populates the `required` attribute on the input. Used for client-side validation.", "default": "false", "fieldName": "required" }, { "name": "setcustomvalidity", "type": { "text": "string" }, "description": "Sets a custom help text message to display for all validityStates.", "fieldName": "setCustomValidity" }, { "name": "setcustomvaliditybadinput", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `badInput`.", "fieldName": "setCustomValidityBadInput" }, { "name": "setcustomvaliditycustomerror", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `customError`.", "fieldName": "setCustomValidityCustomError" }, { "name": "setcustomvalidityfortype", "type": { "text": "string" }, "description": "Custom help text message to display for the declared element `type` and type validity fails.", "default": "undefined", "fieldName": "setCustomValidityForType" }, { "name": "setcustomvaliditypatternmismatch", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `patternMismatch`.", "fieldName": "setCustomValidityPatternMismatch" }, { "name": "setcustomvalidityrangeoverflow", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `rangeOverflow`.", "fieldName": "setCustomValidityRangeOverflow" }, { "name": "setcustomvalidityrangeunderflow", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `rangeUnderflow`.", "fieldName": "setCustomValidityRangeUnderflow" }, { "name": "setcustomvaliditytoolong", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `tooLong`.", "fieldName": "setCustomValidityTooLong" }, { "name": "setcustomvaliditytooshort", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `tooShort`.", "fieldName": "setCustomValidityTooShort" }, { "name": "setcustomvalidityvaluemissing", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `valueMissing`.", "fieldName": "setCustomValidityValueMissing" }, { "name": "simple", "type": { "text": "boolean" }, "description": "Simple makes the input render without a border.", "fieldName": "simple" }, { "name": "spellcheck", "type": { "text": "'true' | 'false'" }, "description": "An enumerated attribute defines whether the element may be checked for spelling errors. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.", "fieldName": "spellcheck" }, { "name": "type", "type": { "text": "'text' | 'password' | 'email' | 'credit-card' | 'tel' | 'number' | 'date'" }, "description": "Populates the `type` attribute on the input.", "default": "'text'", "fieldName": "type" }, { "name": "validateoninput", "type": { "text": "boolean" }, "description": "Sets validation mode to re-eval with each input.", "fieldName": "validateOnInput" }, { "name": "validity", "type": { "text": "string" }, "description": "Specifies the `validityState` this element is in.", "fieldName": "validity" }, { "name": "value", "type": { "text": "string" }, "description": "Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.\nFor `date` type inputs using a full date format (year/month/day), the `value` should be ISO (YYYY-MM-DD). Partial date formats use the display format.", "default": "undefined", "fieldName": "value" } ], "superclass": { "name": "AuroElement", "module": "/components/layoutElement/src/auroElement.js" } } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "BaseInput", "module": "components/input/src/base-input.js" } } ] }, { "kind": "javascript-module", "path": "components/input/src/buttonVersion.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "12.3.2", "module": "components/input/src/buttonVersion.js" } } ] }, { "kind": "javascript-module", "path": "components/input/src/i18n.js", "declarations": [ { "kind": "function", "name": "i18n", "parameters": [ { "name": "lang", "description": "Requested lang for content return.", "type": { "text": "string" } }, { "name": "requestedString", "description": "String requested in context.", "type": { "text": "string" } } ], "description": "Function to support the selected of a string in the set lang.", "privacy": "private", "return": { "type": { "text": "string" } } }, { "kind": "function", "name": "notifyOnLangChange", "parameters": [ { "name": "element", "description": "Pass in the scope of the element in use.", "type": { "text": "object" } } ], "privacy": "private" }, { "kind": "function", "name": "stopNotifyingOnLangChange", "parameters": [ { "name": "element", "description": "Pass in the scope of the element in use.", "type": { "text": "object" } } ], "privacy": "private" } ], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "i18n", "module": "components/input/src/i18n.js" } }, { "kind": "js", "name": "notifyOnLangChange", "declaration": { "name": "notifyOnLangChange", "module": "components/input/src/i18n.js" } }, { "kind": "js", "name": "stopNotifyingOnLangChange", "declaration": { "name": "stopNotifyingOnLangChange", "module": "components/input/src/i18n.js" } } ] }, { "kind": "javascript-module", "path": "components/input/src/iconVersion.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "9.2.0", "module": "components/input/src/iconVersion.js" } } ] }, { "kind": "javascript-module", "path": "components/input/src/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "AuroInput", "declaration": { "name": "AuroInput", "module": "components/input/src/index.js" } }, { "kind": "js", "name": "AuroInputUtil", "declaration": { "name": "AuroInputUtil", "module": "components/input/src/index.js" } } ] }, { "kind": "javascript-module", "path": "components/input/src/registered.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "components/input/src/utilities.js", "declarations": [ { "kind": "class", "description": "", "name": "AuroInputUtilities", "members": [ { "kind": "method", "name": "updateFormat", "parameters": [ { "name": "newFormat", "description": "New date format string.", "type": { "text": "string" } } ], "description": "Updates the date format override.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "toDateFnsMask", "parameters": [ { "name": "mask", "description": "IMask date mask (e.g. \"MM/DD/YYYY\").", "type": { "text": "string" } } ], "description": "Converts an IMask-style date mask to a date-fns compatible format string.", "return": { "type": { "text": "string" } } }, { "kind": "method", "name": "getDateMaskFromLocale", "parameters": [ { "name": "locale", "description": "BCP 47 language tag (e.g. \"en-US\", \"fr-FR\", \"ja-JP\").", "optional": true, "type": { "text": "string" } } ], "description": "Generates a date mask based on the provided locale.", "return": { "type": { "text": "string" } } }, { "kind": "method", "name": "parseDateByMask", "parameters": [ { "name": "dateString", "description": "The date string to parse.", "type": { "text": "string" } }, { "name": "mask", "description": "The date mask to use for parsing.", "type": { "text": "string" } } ], "description": "Parses a date string using the provided mask.", "privacy": "private", "return": { "type": { "text": "string" } } }, { "kind": "method", "name": "getMaskOptions", "parameters": [ { "name": "type", "description": "The input type.", "type": { "text": "string" } }, { "name": "format", "description": "The format of the mask to apply.", "type": { "text": "string" } } ], "description": "Configures the mask to be used on the input element based on format and/or type.\nIMask tool documentation: https://imask.js.org/.", "privacy": "private", "return": { "type": { "text": "object" } } }, { "kind": "method", "name": "isFullDateFormat", "parameters": [ { "name": "type", "description": "The input type.", "type": { "text": "string" } }, { "name": "format", "description": "The date format string.", "type": { "text": "string" } } ], "description": "Determines if the given type and format combination represents a full year/month/day date.", "privacy": "private", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "isValidPartialDate", "parameters": [ { "name": "value", "description": "The user-facing display value.", "type": { "text": "string" } }, { "name": "format", "description": "The partial date format string (e.g. \"mm/yyyy\", \"yyyy\", \"dd\").", "type": { "text": "string" } } ], "description": "Validates a value against a partial date format (one that lacks yy/mm/dd all three).\nDay- and year-only formats (dd/yy/yyyy) are checked as integer ranges; other partial formats use\na date-fns parse + round-trip to confirm both validity and exact formatting.", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "toModelValue", "parameters": [ { "name": "inputValue", "description": "String from the rendered input.", "type": { "text": "string" } }, { "name": "format", "description": "The date format string.", "type": { "text": "string" } } ], "description": "Converts a display string to its model value.\nFor full date formats, converts the display string to an ISO date string.", "privacy": "private", "return": { "type": { "text": "string" } } }, { "kind": "method", "name": "toFormattedValue", "parameters": [ { "name": "valueObject", "description": "Date object representation of value.", "type": { "text": "Date|undefined" } }, { "name": "format", "description": "The date format string.", "type": { "text": "string" } } ], "description": "Converts a model value to a display value for the input element.\nFor full date formats, converts an ISO model value to the configured display format.", "privacy": "private", "return": { "type": { "text": "string | undefined" } } }, { "kind": "field", "name": "overrideFormat" }, { "kind": "field", "name": "formatter", "default": "new Intl.DateTimeFormat(this.locale)" } ] }, { "kind": "function", "name": "getDateFormatFromLocale", "parameters": [ { "name": "locale", "description": "BCP 47 language tag used to determine the date format (e.g. \"en-US\", \"fr-FR\").", "type": { "text": "string" } } ], "description": "Derives a locale-aware date format string suitable for use in input masks. This helper exposes the internal AuroInputUtilities locale logic in a simple function form.", "return": { "type": { "text": "string" } } } ], "exports": [ { "kind": "js", "name": "AuroInputUtilities", "declaration": { "name": "AuroInputUtilities", "module": "components/input/src/utilities.js" } }, { "kind": "js", "name": "getDateFormatFromLocale", "declaration": { "name": "getDateFormatFromLocale", "module": "components/input/src/utilities.js" } } ] }, { "kind": "javascript-module", "path": "components/layoutElement/src/auroElement.js", "declarations": [ { "kind": "class", "description": "AuroElement is the shared base class for layout-aware Auro form components.\n\nIt defines the common `layout`, `shape`, `size`, and `ondark` reactive\nproperties and the architecture helpers (`renderLayout`, `resetShapeClasses`,\n`resetLayoutClasses`) that subclasses use to render a chosen layout and apply\nthe matching `shape-*` / `layout-*` wrapper classes. Subclasses supply their\nown default and valid value set for `layout`, `shape`, and `size`.", "name": "AuroElement", "members": [ { "kind": "field", "name": "componentHasFocus", "description": "Returns true if the element has focus.", "privacy": "private", "return": { "type": { "text": "boolean" } }, "readonly": true }, { "kind": "method", "name": "resetShapeClasses" }, { "kind": "method", "name": "resetLayoutClasses" }, { "kind": "method", "name": "updateComponentArchitecture" }, { "kind": "field", "name": "onDark", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, renders the component styled for use on a dark background.", "attribute": "ondark", "reflects": true } ], "attributes": [ { "name": "ondark", "type": { "text": "boolean" }, "description": "When true, renders the component styled for use on a dark background.", "fieldName": "onDark" } ], "superclass": { "name": "LitElement", "package": "lit" }, "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroElement", "declaration": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } } ] }, { "kind": "javascript-module", "path": "components/layoutElement/src/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "AuroElement", "declaration": { "name": "AuroElement", "module": "components/layoutElement/src/index.js" } } ] }, { "kind": "javascript-module", "path": "components/layoutElement/src/registered.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "components/menu/src/auro-menu-utils.js", "declarations": [ { "kind": "function", "name": "arrayConverter", "parameters": [ { "name": "value", "description": "The value to be converted. Can be a string, array, or undefined.", "type": { "text": "any" } } ], "description": "Converts value to an array.\nIf the value is a JSON string representing an array, it will be parsed.\nIf the value is already an array, it is returned.\nIf the value is undefined, it returns undefined.", "privacy": "private", "return": { "type": { "text": "Array|undefined" } } }, { "kind": "function", "name": "serializeMultiSelectValue", "parameters": [ { "name": "values", "description": "The selected values.", "type": { "text": "Array|undefined" } } ], "description": "Serializes a multi-select value array back into the String `value` property.\nAn empty (or missing) array collapses to `undefined` so an emptied selection\nclears `value` rather than reflecting a `\"[]\"` attribute.", "privacy": "private", "return": { "type": { "text": "string|undefined" } } }, { "kind": "function", "name": "arraysAreEqual", "parameters": [ { "name": "arr1", "description": "First array to compare.", "type": { "text": "Array" } }, { "name": "arr2", "description": "Second array to compare.", "type": { "text": "Array" } } ], "description": "Compare two arrays for equality.", "privacy": "private", "return": { "type": { "text": "boolean" } } }, { "kind": "function", "name": "isOptionInteractive", "parameters": [ { "name": "option", "description": "The option to check.", "type": { "text": "HTMLElement" } } ], "description": "Validates if an option can be interacted with.", "privacy": "private", "return": { "type": { "text": "boolean" } } }, { "kind": "function", "name": "isSelectableByValue", "parameters": [ { "name": "option", "description": "The option to check.", "type": { "text": "HTMLElement" } } ], "description": "Validates if an option may be selected by matching a programmatic value.\nUnlike `isOptionInteractive`, `hidden` is allowed: the combobox toggles\n`hidden` as its type-ahead filter, so a filtered-out option is still a\nvalid programmatic selection. Only disabled and static options — which are\nnever selectable — are rejected.", "return": { "type": { "text": "boolean" } } }, { "kind": "function", "name": "resolveSelectedOption", "parameters": [ { "name": "items", "description": "The menu's flat option list.", "type": { "text": "Array" } }, { "name": "value", "description": "The value to resolve.", "type": { "text": "string" } }, { "name": "selectedKey", "description": "The `_optionKey` of the user-selected option, if any.", "type": { "text": "string|undefined" } } ], "description": "Resolves the single selected option for a given `value`, preferring the\noption tracked by `selectedKey` (a user-initiated selection) over a\nfirst-by-value match. When multiple options share the same `value`, matching\nby `value` alone cannot distinguish which one the user picked; the key\ndisambiguates it.\n\nThe key is trusted only when it still resolves to an option whose `value`\nmatches the requested `value`. If the key is stale (option removed) or the\nvalue was changed programmatically, resolution falls back to value matching —\npreserving backward-compatible behavior for preselection and `selectByValue`.", "privacy": "private", "return": { "type": { "text": "HTMLElement|undefined" } } }, { "kind": "function", "name": "resolveSelectedOptions", "parameters": [ { "name": "items", "description": "The menu's flat option list.", "type": { "text": "Array" } }, { "name": "valueArray", "description": "The selected values.", "type": { "text": "Array" } }, { "name": "selectedKeys", "description": "The `_optionKey`s of the user-selected options, if any.", "type": { "text": "Array|undefined" } } ], "description": "Resolves the selected options for a multi-select `value` array, preferring\noptions tracked by `selectedKeys` (user-initiated selections) and falling\nback to value matching for any values not resolved by key. The result is\nalways sorted into DOM order regardless of selection sequence.", "privacy": "private", "return": { "type": { "text": "Array" } } }, { "kind": "function", "name": "dispatchMenuEvent", "parameters": [ { "name": "element", "description": "Element to dispatch event from.", "type": { "text": "HTMLElement" } }, { "name": "eventName", "description": "Name of the event to dispatch.", "type": { "text": "string" } }, { "name": "detail", "default": "null", "description": "Optional detail object to include with the event.", "optional": true, "type": { "text": "Object" } } ], "description": "Helper method to dispatch custom events." } ], "exports": [ { "kind": "js", "name": "arrayConverter", "declaration": { "name": "arrayConverter", "module": "components/menu/src/auro-menu-utils.js" } }, { "kind": "js", "name": "serializeMultiSelectValue", "declaration": { "name": "serializeMultiSelectValue", "module": "components/menu/src/auro-menu-utils.js" } }, { "kind": "js", "name": "arraysAreEqual", "declaration": { "name": "arraysAreEqual", "module": "components/menu/src/auro-menu-utils.js" } }, { "kind": "js", "name": "isOptionInteractive", "declaration": { "name": "isOptionInteractive", "module": "components/menu/src/auro-menu-utils.js" } }, { "kind": "js", "name": "isSelectableByValue", "declaration": { "name": "isSelectableByValue", "module": "components/menu/src/auro-menu-utils.js" } }, { "kind": "js", "name": "resolveSelectedOption", "declaration": { "name": "resolveSelectedOption", "module": "components/menu/src/auro-menu-utils.js" } }, { "kind": "js", "name": "resolveSelectedOptions", "declaration": { "name": "resolveSelectedOptions", "module": "components/menu/src/auro-menu-utils.js" } }, { "kind": "js", "name": "dispatchMenuEvent", "declaration": { "name": "dispatchMenuEvent", "module": "components/menu/src/auro-menu-utils.js" } } ] }, { "kind": "javascript-module", "path": "components/menu/src/auro-menu.js", "declarations": [ { "kind": "class", "description": "The `auro-menu` element provides users a way to select from a list of options.", "name": "AuroMenu", "slots": [ { "description": "Text to show while loading attribute is set", "name": "loadingText" }, { "description": "Icon to show while loading attribute is set", "name": "loadingIcon" }, { "description": "Slot for insertion of menu options.", "name": "" } ], "members": [ { "kind": "method", "name": "initializeArchitectureDefaults" }, { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-menu\"", "description": "The name of element that you want to register to.", "optional": true, "type": { "text": "string" } } ], "description": "This will register this element with the browser." }, { "kind": "field", "name": "options", "readonly": true, "return": { "type": { "text": "Array" } } }, { "kind": "field", "name": "index", "return": { "type": { "text": "number" } }, "parameters": [ { "description": "Sets the index of the currently active option.", "name": "value", "type": { "text": "number" } } ] }, { "kind": "field", "name": "selectedOptions", "description": "Gets the currently selected options as an array.", "return": { "type": { "text": "Array" } }, "readonly": true }, { "kind": "field", "name": "selectedOption", "description": "Gets the first selected option, or null if none.", "return": { "type": { "text": "HTMLElement|null" } }, "readonly": true }, { "kind": "field", "name": "currentLabel", "readonly": true, "return": { "type": { "text": "string" } } }, { "kind": "field", "name": "formattedValue", "description": "Formatted value based on `multiSelect` state.\nDefault type is `String`, changing to `Array` when `multiSelect` is true.", "privacy": "private", "return": { "type": { "text": "String|Array" } }, "readonly": true }, { "kind": "method", "name": "selectByValue", "parameters": [ { "name": "value", "description": "The value(s) to select.", "type": { "text": "string|string[]|undefined|null" } } ], "description": "Selects options by value. Options marked `disabled` or `static` are not selectable; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option. Passing `undefined`, `null`, an empty string, or an empty array clears the selection without dispatching a failure.", "privacy": "public" }, { "kind": "method", "name": "setTagAttribute", "parameters": [ { "name": "tagName", "description": "The tag name to set as an attribute.", "type": { "text": "string" } } ], "description": "Sets an attribute that matches the default tag name if the tag name is not the default.", "privacy": "private" }, { "kind": "method", "name": "updateItemsState", "parameters": [ { "name": "changedProperties", "description": "LitElement's changed properties map.", "type": { "text": "Map" } } ], "description": "Updates the UI state and appearance of menu items based on changed properties.", "privacy": "private" }, { "kind": "method", "name": "initializeMenu", "description": "Initializes the menu's state and structure.", "privacy": "private" }, { "kind": "method", "name": "initItems", "description": "Initializes menu items and their attributes.", "privacy": "private" }, { "kind": "method", "name": "_assignOptionKeys", "description": "Assigns a private, auto-generated unique key (`_optionKey`) to each menu\noption that does not already have one. Keys are internal state on the\nelement instance — never reflected as an attribute or exposed publicly —\nand let selection tracking distinguish options that share the same `value`.\n\nThe `_optionKey === undefined` guard makes this idempotent: options keep the\nkey they were first assigned across re-renders and slot changes, and if a\nnested menu's lifecycle runs a pass before the root, options simply wait for\nthe root to key them (or keep whatever key they already hold).", "privacy": "private" }, { "kind": "method", "name": "handleSelectState", "parameters": [ { "name": "option", "description": "The option element to select.", "type": { "text": "HTMLElement" } } ], "description": "Updates menu state when an option is selected.", "privacy": "private" }, { "kind": "method", "name": "handleDeselectState", "parameters": [ { "name": "option", "description": "The menuoption to be deselected.", "type": { "text": "HTMLElement" } } ], "description": "Deselects a menu option and updates related state.", "privacy": "private" }, { "kind": "method", "name": "clearSelection", "description": "Resets all options to their default state.", "privacy": "private" }, { "kind": "method", "name": "_sortSelectedByDomOrder", "description": "Re-sorts the multi-select selection into DOM order and rebuilds the derived\n`_selectedKey` and `value` from `optionSelected`. Selection is always stored\nand serialized in the order options appear in the menu, never in click\norder — so selecting C then A yields `[A, C]`.", "privacy": "private" }, { "kind": "method", "name": "reset", "description": "Resets the menu to its initial state.\nThis is the only way to return value to undefined.", "privacy": "public" }, { "kind": "method", "name": "handleNestedMenus", "parameters": [ { "name": "menu", "description": "Root menu element.", "type": { "text": "HTMLElement" } } ], "description": "Handles nested menu structure.", "privacy": "private" }, { "kind": "method", "name": "makeSelection", "description": "Makes a selection based on the current index.", "privacy": "private" }, { "kind": "method", "name": "toggleOption", "parameters": [ { "name": "option", "description": "The menuoption to toggle.", "type": { "text": "HTMLElement" } } ], "description": "Toggle the selection state of the menuoption.", "privacy": "private" }, { "kind": "method", "name": "handleKeyDown", "parameters": [ { "name": "event", "description": "The keydown event.", "type": { "text": "KeyboardEvent" } } ], "description": "Handles keyboard navigation and selection.", "privacy": "private" }, { "kind": "method", "name": "handleMouseSelect", "parameters": [ { "name": "event", "description": "The auroMenuOption-click event.", "type": { "text": "CustomEvent" } } ], "description": "Handles option selection via click events from menuoptions.", "privacy": "private" }, { "kind": "method", "name": "handleOptionHover", "parameters": [ { "name": "event", "description": "Event object from the browser.", "type": { "text": "CustomEvent" } } ], "description": "Handles option hover events.", "privacy": "private" }, { "kind": "method", "name": "handleSlotChange", "description": "Handles slot change events.", "privacy": "private" }, { "kind": "method", "name": "navigateOptions", "parameters": [ { "name": "direction", "description": "'up' or 'down'.", "type": { "text": "string" } } ], "description": "Navigates through options using keyboard." }, { "kind": "method", "name": "updateActiveOption", "parameters": [ { "name": "indexOrOption", "description": "Index of the option or the option element to make active.", "type": { "text": "number|HTMLElement" } } ], "description": "Updates the active option state and dispatches events.\nAccepts either a numeric index or an HTMLElement option." }, { "kind": "method", "name": "handleCustomEvent", "parameters": [ { "name": "option", "description": "Option with custom event.", "type": { "text": "HTMLElement" } } ], "description": "Handles custom events defined on options.", "privacy": "private" }, { "kind": "method", "name": "notifySelectionChange", "parameters": [ { "name": "source", "default": "undefined", "description": "The source that triggers this event.", "type": { "text": "any" } } ], "description": "Notifies selection change to parent components.", "privacy": "private" }, { "kind": "method", "name": "selectionEquals", "parameters": [ { "name": "current", "description": "Current selection.", "type": { "text": "any" } }, { "name": "next", "description": "New selection to compare.", "type": { "text": "any" } } ], "privacy": "private", "return": { "type": { "text": "boolean" } } }, { "kind": "method", "name": "isOptionSelected", "parameters": [ { "name": "option", "description": "The option to check.", "type": { "text": "HTMLElement" } } ], "description": "Checks if an option is currently selected.", "privacy": "private", "return": { "type": { "text": "boolean" } } }, { "kind": "field", "name": "hasLoadingPlaceholder", "description": "Getter for loading placeholder state.", "return": { "type": { "text": "boolean" } }, "readonly": true }, { "kind": "field", "name": "wrapperClasses", "description": "Getter for wrapper classes based on size.", "return": { "type": { "text": "Object" } }, "privacy": "private", "readonly": true }, { "kind": "method", "name": "renderLayout", "description": "Logic to determine the layout of the component.", "privacy": "protected", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "value", "privacy": "public", "type": { "text": "string" }, "description": "The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.\nOptions marked `disabled` or `static` are not selectable by value; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared (`optionSelected` becomes `undefined`) and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped from the value and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option.", "default": "undefined", "attribute": "value", "reflects": true }, { "kind": "field", "name": "optionSelected", "privacy": "public", "type": { "text": "HTMLElement | HTMLElement[]" }, "description": "The currently selected menu option(s). In single-select mode this is a single `HTMLElement` (or `undefined` when nothing is selected). In multi-select mode this is an array of `HTMLElement`s.", "readonly": true, "default": "undefined" }, { "kind": "field", "name": "matchWord", "privacy": "public", "type": { "text": "string" }, "description": "Specifies a string used to highlight matched string parts in options.", "default": "undefined", "attribute": "matchword" }, { "kind": "field", "name": "noCheckmark", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, selected option will not show the checkmark.", "default": "false", "attribute": "nocheckmark", "reflects": true }, { "kind": "field", "name": "optionActive", "privacy": "public", "type": { "text": "HTMLElement" }, "description": "Specifies the current active menuOption.", "readonly": true, "default": "undefined" }, { "kind": "field", "name": "loading", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, displays a loading state using the loadingIcon and loadingText slots if provided.", "default": "false", "attribute": "loading", "reflects": true }, { "kind": "field", "name": "multiSelect", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, the selected option can be multiple options.", "default": "false", "attribute": "multiselect", "reflects": true }, { "kind": "field", "name": "layout", "privacy": "public", "type": { "text": "string" }, "description": "Applies a named layout variant to the menu. Free-form string consumed by the shared architecture helpers; menu defines no closed value set.", "attribute": "layout", "reflects": true }, { "kind": "field", "name": "shape", "privacy": "public", "type": { "text": "'box' | 'pill' | 'snowflake'" }, "description": "Sets the shape of the menu options.", "default": "'box'", "attribute": "shape", "reflects": true }, { "kind": "field", "name": "size", "privacy": "public", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, "description": "Sets the size of the menu options.", "default": "'sm'", "attribute": "size", "reflects": true }, { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, the entire menu and all options are disabled.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "level", "privacy": "private", "type": { "text": "number" }, "description": "Indent level for submenus." }, { "kind": "field", "name": "componentHasFocus", "description": "Returns true if the element has focus.", "privacy": "private", "return": { "type": { "text": "boolean" } }, "readonly": true, "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetShapeClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetLayoutClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "updateComponentArchitecture", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "field", "name": "onDark", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, renders the component styled for use on a dark background.", "attribute": "ondark", "reflects": true, "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } } ], "events": [ { "name": "auroMenu-optionsChange", "type": { "text": "CustomEvent<{ options: Array }>" }, "description": "Notifies that the set of available menu options has changed." }, { "type": { "text": "CustomEvent" }, "description": "Notifies that a menuoption has been made `active`.", "name": "auroMenu-activatedOption" }, { "type": { "text": "CustomEvent" }, "description": "Notifies that a custom event has been fired.", "name": "auroMenu-customEventFired" }, { "type": { "text": "CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>" }, "description": "Notifies when the loading attribute is changed.", "name": "auroMenu-loadingChange" }, { "type": { "text": "CustomEvent" }, "description": "Notifies that an attempt to select a menuoption by matching a value has failed.", "name": "auroMenu-selectValueFailure" }, { "type": { "text": "CustomEvent" }, "description": "Notifies that the component value has been reset.", "name": "auroMenu-selectValueReset" }, { "type": { "text": "CustomEvent" }, "description": "Notifies that a new menuoption selection has been made.", "name": "auroMenu-selectedOption" } ], "attributes": [ { "name": "layout", "type": { "text": "string" }, "description": "Applies a named layout variant to the menu. Free-form string consumed by the shared architecture helpers; menu defines no closed value set.", "fieldName": "layout" }, { "name": "shape", "type": { "text": "'box' | 'pill' | 'snowflake'" }, "description": "Sets the shape of the menu options.", "default": "'box'", "fieldName": "shape" }, { "name": "size", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, "description": "Sets the size of the menu options.", "default": "'sm'", "fieldName": "size" }, { "name": "disabled", "type": { "text": "boolean" }, "description": "When true, the entire menu and all options are disabled.", "fieldName": "disabled" }, { "name": "loading", "type": { "text": "boolean" }, "description": "When true, displays a loading state using the loadingIcon and loadingText slots if provided.", "default": "false", "fieldName": "loading" }, { "name": "matchword", "type": { "text": "string" }, "description": "Specifies a string used to highlight matched string parts in options.", "default": "undefined", "fieldName": "matchWord" }, { "name": "multiselect", "type": { "text": "boolean" }, "description": "When true, the selected option can be multiple options.", "default": "false", "fieldName": "multiSelect" }, { "name": "nocheckmark", "type": { "text": "boolean" }, "description": "When true, selected option will not show the checkmark.", "default": "false", "fieldName": "noCheckmark" }, { "name": "value", "type": { "text": "string" }, "description": "The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.\nOptions marked `disabled` or `static` are not selectable by value; `hidden` options remain selectable. In single-select mode, if the value matches a non-selectable option the selection is cleared (`optionSelected` becomes `undefined`) and `auroMenu-selectValueFailure` is dispatched. In multi-select mode, non-selectable entries are dropped from the value and the remaining selectable entries are selected; `auroMenu-selectValueFailure` is dispatched only when none of the entries match a selectable option.", "default": "undefined", "fieldName": "value" }, { "name": "ondark", "type": { "text": "boolean" }, "description": "When true, renders the component styled for use on a dark background.", "fieldName": "onDark", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } } ], "superclass": { "name": "AuroElement", "module": "/components/layoutElement/src/auroElement.js" }, "tagName": "auro-menu", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroMenu", "declaration": { "name": "AuroMenu", "module": "components/menu/src/auro-menu.js" } } ] }, { "kind": "javascript-module", "path": "components/menu/src/auro-menuoption.js", "declarations": [ { "kind": "class", "description": "The `auro-menuoption` element provides users a way to define a menu option.", "name": "AuroMenuOption", "slots": [ { "description": "The default slot for the menu option text.", "name": "default" } ], "members": [ { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-menuoption\"", "description": "The name of element that you want to register to.", "optional": true, "type": { "text": "string" } } ], "description": "This will register this element with the browser." }, { "kind": "field", "name": "isActive", "description": "Returns whether the menu option is currently active and selectable.", "return": { "type": { "text": "boolean" } }, "readonly": true }, { "kind": "method", "name": "handleMenuChange" }, { "kind": "method", "name": "setSelected", "parameters": [ { "name": "value" } ] }, { "kind": "method", "name": "updateActive", "parameters": [ { "name": "active" } ] }, { "kind": "method", "name": "attachTo" }, { "kind": "method", "name": "handleClick", "description": "Handles click events on the menu option.", "privacy": "private" }, { "kind": "method", "name": "generateIconHtml", "parameters": [ { "name": "svgContent", "description": "The SVG content to be embedded.", "type": { "text": "string" } } ], "description": "Generates an HTML element containing an SVG icon based on the provided `svgContent`.", "privacy": "private", "return": { "type": { "text": "Element" } } }, { "kind": "method", "name": "renderLayout", "description": "Logic to determine the layout of the component.", "privacy": "protected", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "shape", "privacy": "private", "type": { "text": "'box' | 'pill' | 'snowflake'" }, "description": "Sets the shape of the option. When unset, it inherits the shape of the parent `auro-menu`.", "default": "undefined", "attribute": "shape", "reflects": true }, { "kind": "field", "name": "size", "privacy": "private", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, "description": "Sets the size of the option. When unset, it inherits the size of the parent `auro-menu`.", "default": "undefined", "attribute": "size", "reflects": true }, { "kind": "field", "name": "iconTag" }, { "kind": "field", "name": "selected", "privacy": "public", "type": { "text": "boolean" }, "description": "**Deprecated.** Use the `value` attribute on `auro-menu` to set the selected option when the menu renders (or call `menu.selectByValue(value)` programmatically). Support for the child-level `selected` attribute will be removed in a future major release.", "deprecated": "Use the `value` attribute on `auro-menu` instead.", "default": "false", "attribute": "selected", "reflects": true }, { "kind": "field", "name": "noCheckmark", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, this option will not show the checkmark when selected.", "default": "false", "attribute": "nocheckmark", "reflects": true }, { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, the option is disabled and cannot be selected.", "default": "false", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "noMatch", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, marks this option as the \"no matching results\" placeholder shown by combobox\nwhen the user's input does not match any available options.", "default": "false", "attribute": "nomatch", "reflects": true }, { "kind": "field", "name": "persistent", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, this option is excluded from `matchWord` DOM rewriting — useful for utility rows (e.g., \"Add new…\") that must render identically regardless of the current filter.", "default": "false", "attribute": "persistent", "reflects": true }, { "kind": "field", "name": "tabIndex", "privacy": "private", "type": { "text": "number" }, "description": "Sets the tab order of the menu option.", "default": "-1", "attribute": "tabindex", "reflects": true }, { "kind": "field", "name": "runtimeUtils", "privacy": "private", "default": "new AuroLibraryRuntimeUtils()" }, { "kind": "field", "name": "value", "privacy": "public", "type": { "text": "string" }, "description": "The value associated with this menu option.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "event", "privacy": "public", "type": { "text": "string" }, "description": "When set, selecting this option dispatches a custom event of the given name from the parent `auro-menu` (and an `auroMenu-customEventFired` event) instead of selecting the option.", "attribute": "event", "reflects": true }, { "kind": "field", "name": "componentHasFocus", "description": "Returns true if the element has focus.", "privacy": "private", "return": { "type": { "text": "boolean" } }, "readonly": true, "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetShapeClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetLayoutClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "updateComponentArchitecture", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "field", "name": "onDark", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, renders the component styled for use on a dark background.", "attribute": "ondark", "reflects": true, "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } } ], "events": [ { "name": "auroMenuOption-mouseover", "type": { "text": "CustomEvent" }, "description": "Notifies that this option has been hovered over." }, { "name": "auroMenuOption-click", "type": { "text": "CustomEvent" }, "description": "Notifies that this option has been clicked." } ], "attributes": [ { "type": { "text": "Boolean" }, "description": "When present, marks the option as non-interactive — it renders but is skipped during keyboard navigation and cannot be selected. Useful for section headers, informational rows inside a menu, or attaching event listeners.", "name": "static" }, { "name": "shape", "type": { "text": "'box' | 'pill' | 'snowflake'" }, "description": "Sets the shape of the option. When unset, it inherits the shape of the parent `auro-menu`.", "default": "undefined", "fieldName": "shape" }, { "name": "size", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl'" }, "description": "Sets the size of the option. When unset, it inherits the size of the parent `auro-menu`.", "default": "undefined", "fieldName": "size" }, { "name": "nocheckmark", "type": { "text": "boolean" }, "description": "When true, this option will not show the checkmark when selected.", "default": "false", "fieldName": "noCheckmark" }, { "name": "selected", "type": { "text": "boolean" }, "description": "**Deprecated.** Use the `value` attribute on `auro-menu` to set the selected option when the menu renders (or call `menu.selectByValue(value)` programmatically). Support for the child-level `selected` attribute will be removed in a future major release.", "deprecated": "Use the `value` attribute on `auro-menu` instead.", "default": "false", "fieldName": "selected" }, { "name": "disabled", "type": { "text": "boolean" }, "description": "When true, the option is disabled and cannot be selected.", "default": "false", "fieldName": "disabled" }, { "name": "value", "type": { "text": "string" }, "description": "The value associated with this menu option.", "fieldName": "value" }, { "name": "tabindex", "type": { "text": "number" }, "description": "Sets the tab order of the menu option.", "default": "-1", "fieldName": "tabIndex" }, { "name": "event", "type": { "text": "string" }, "description": "When set, selecting this option dispatches a custom event of the given name from the parent `auro-menu` (and an `auroMenu-customEventFired` event) instead of selecting the option.", "fieldName": "event" }, { "name": "nomatch", "type": { "text": "boolean" }, "description": "When true, marks this option as the \"no matching results\" placeholder shown by combobox\nwhen the user's input does not match any available options.", "default": "false", "fieldName": "noMatch" }, { "name": "persistent", "type": { "text": "boolean" }, "description": "When true, this option is excluded from `matchWord` DOM rewriting — useful for utility rows (e.g., \"Add new…\") that must render identically regardless of the current filter.", "default": "false", "fieldName": "persistent" }, { "name": "ondark", "type": { "text": "boolean" }, "description": "When true, renders the component styled for use on a dark background.", "fieldName": "onDark", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } } ], "superclass": { "name": "AuroElement", "module": "/components/layoutElement/src/auroElement.js" }, "tagName": "auro-menuoption", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroMenuOption", "declaration": { "name": "AuroMenuOption", "module": "components/menu/src/auro-menuoption.js" } } ] }, { "kind": "javascript-module", "path": "components/menu/src/iconVersion.js", "declarations": [], "exports": [ { "kind": "js", "name": "default", "declaration": { "name": "9.1.2", "module": "components/menu/src/iconVersion.js" } } ] }, { "kind": "javascript-module", "path": "components/menu/src/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "AuroMenu", "declaration": { "name": "AuroMenu", "module": "components/menu/src/index.js" } }, { "kind": "js", "name": "AuroMenuOption", "declaration": { "name": "AuroMenuOption", "module": "components/menu/src/index.js" } }, { "kind": "js", "name": "arrayConverter", "declaration": { "name": "arrayConverter", "module": "./auro-menu-utils.js" } }, { "kind": "js", "name": "isOptionInteractive", "declaration": { "name": "isOptionInteractive", "module": "./auro-menu-utils.js" } }, { "kind": "js", "name": "dispatchMenuEvent", "declaration": { "name": "dispatchMenuEvent", "module": "./auro-menu-utils.js" } } ] }, { "kind": "javascript-module", "path": "components/menu/src/registered.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "components/radio/src/auro-radio-group.js", "declarations": [ { "kind": "class", "description": "The `auro-radio-group` element is used to group a set `auro-radio` elements.", "name": "AuroRadioGroup", "cssParts": [ { "description": "Apply css to the fieldset element in the shadow DOM", "name": "radio-group" }, { "description": "Apply css to the help text element that displays helper or error messages.", "name": "helpText" } ], "slots": [ { "type": { "text": "HTMLSlotElement" }, "description": "Allows for the legend to be overridden.", "name": "legend" }, { "type": { "text": "HTMLSlotElement" }, "description": "Allows overriding the optional display text \"(optional)\", which appears next to the label.", "name": "optionalLabel" }, { "type": { "text": "HTMLSlotElement" }, "description": "Allows for the helper text to be overridden.", "name": "helpText" } ], "members": [ { "kind": "method", "name": "_initializeDefaults" }, { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-radio-group\"", "description": "The name of the element that you want to register.", "optional": true, "type": { "text": "string" } } ], "description": "This will register this element with the browser." }, { "kind": "method", "name": "handleSelection", "parameters": [ { "name": "event", "description": "The trigger event tied to this function.", "type": { "text": "Event" } } ], "description": "Method for handling of selection of a radio element.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleRadioBlur", "description": "Method handles radio element blur.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "reset", "description": "Resets component to initial state.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "validate", "parameters": [ { "name": "force", "default": "false", "description": "Whether to force validation.", "optional": true, "type": { "text": "boolean" } } ], "description": "Validates value." }, { "kind": "method", "name": "resetRadio", "description": "Method handles the reset event from a radio element.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleItems", "description": "Method for handling the attributes of each radio input.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleSlotChange", "description": "Method for handling slot content changes.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleLegendSlotChange", "description": "Method for handling legend slot changes.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "initializeIndex", "description": "Method for initializing the tab index of the checked radio input.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleToggleSelected", "parameters": [ { "name": "event", "description": "The trigger event tied to this function.", "type": { "text": "Event" } } ], "description": "Method for handling a newly selected radio input.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "selectItem", "parameters": [ { "name": "index", "description": "The value of the element's index attribute.", "type": { "text": "Number" } } ], "description": "Method for selecting a radio input.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "selectNextItem", "parameters": [ { "name": "index", "description": "The value of the element's index attribute.", "type": { "text": "Number" } }, { "name": "moveDirection", "description": "Arrow key pressed by user.", "type": { "text": "String" } } ], "description": "Method for selecting the next radio input.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleKeyDown", "parameters": [ { "name": "event", "description": "The trigger event tied to this function.", "type": { "text": "Event" } } ], "description": "Method for handling a keydown event.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "appearance", "privacy": "public", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "'default'", "attribute": "appearance", "reflects": true }, { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "description": "If true, all radio buttons will be disabled.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "error", "privacy": "public", "type": { "text": "string" }, "description": "If true, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.", "attribute": "error", "reflects": true }, { "kind": "field", "name": "hasLegend", "privacy": "private", "type": { "text": "boolean" }, "description": "Indicates whether the legend slot is set or not." }, { "kind": "field", "name": "horizontal", "privacy": "public", "type": { "text": "boolean" }, "description": "If true, displays radio buttons horizontally.", "attribute": "horizontal" }, { "kind": "field", "name": "noValidate", "privacy": "public", "type": { "text": "boolean" }, "description": "If true, disables auto-validation on blur.", "attribute": "novalidate", "reflects": true }, { "kind": "field", "name": "onDark", "privacy": "public", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "deprecated": "Use `appearance=\"inverse\"` instead.", "attribute": "ondark", "reflects": true }, { "kind": "field", "name": "optionSelected", "privacy": "public", "type": { "text": "HTMLElement" }, "description": "Specifies the current selected radio button." }, { "kind": "field", "name": "required", "privacy": "public", "type": { "text": "boolean" }, "description": "Populates the `required` attribute on the element. Used for client-side validation.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "setCustomValidity", "privacy": "public", "type": { "text": "string" }, "description": "Sets a custom help text message to display for all validityStates.", "attribute": "setcustomvalidity" }, { "kind": "field", "name": "setCustomValidityCustomError", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `customError`.", "attribute": "setcustomvaliditycustomerror" }, { "kind": "field", "name": "setCustomValidityValueMissing", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `valueMissing`.", "attribute": "setcustomvalidityvaluemissing" }, { "kind": "field", "name": "touched", "privacy": "private", "type": { "text": "boolean" }, "description": "Indicates whether the radio group is in a dirty state (has been interacted with)." }, { "kind": "field", "name": "validity", "privacy": "public", "type": { "text": "string" }, "description": "Specifies the `validityState` this element is in.", "attribute": "validity", "reflects": true }, { "kind": "field", "name": "value", "privacy": "public", "type": { "text": "string" }, "description": "Specifies the current value of the selected radio button.", "attribute": "value" } ], "events": [ { "name": "input", "type": { "text": "CustomEvent" }, "description": "Notifies every time the value prop of the element is changed." }, { "description": "Notifies that the element has been validated.", "name": "auroFormElement-validated" } ], "attributes": [ { "name": "appearance", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "'default'", "fieldName": "appearance" }, { "name": "disabled", "type": { "text": "boolean" }, "description": "If true, all radio buttons will be disabled.", "fieldName": "disabled" }, { "name": "error", "type": { "text": "string" }, "description": "If true, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.", "fieldName": "error" }, { "name": "horizontal", "type": { "text": "boolean" }, "description": "If true, displays radio buttons horizontally.", "fieldName": "horizontal" }, { "name": "novalidate", "type": { "text": "boolean" }, "description": "If true, disables auto-validation on blur.", "fieldName": "noValidate" }, { "name": "ondark", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "deprecated": "Use `appearance=\"inverse\"` instead.", "fieldName": "onDark" }, { "name": "required", "type": { "text": "boolean" }, "description": "Populates the `required` attribute on the element. Used for client-side validation.", "fieldName": "required" }, { "name": "setcustomvalidity", "type": { "text": "string" }, "description": "Sets a custom help text message to display for all validityStates.", "fieldName": "setCustomValidity" }, { "name": "setcustomvaliditycustomerror", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `customError`.", "fieldName": "setCustomValidityCustomError" }, { "name": "setcustomvalidityvaluemissing", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `valueMissing`.", "fieldName": "setCustomValidityValueMissing" }, { "name": "validity", "type": { "text": "string" }, "description": "Specifies the `validityState` this element is in.", "fieldName": "validity" }, { "name": "value", "type": { "text": "string" }, "description": "Specifies the current value of the selected radio button.", "fieldName": "value" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "auro-radio-group", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroRadioGroup", "declaration": { "name": "AuroRadioGroup", "module": "components/radio/src/auro-radio-group.js" } } ] }, { "kind": "javascript-module", "path": "components/radio/src/auro-radio.js", "declarations": [ { "kind": "class", "description": "The `auro-radio` element is used to a button that allows the user to select one option from a set.", "name": "AuroRadio", "cssParts": [ { "description": "apply css to a specific checkbox.", "name": "radio" }, { "description": "apply css to a specific checkbox's input.", "name": "radio-input" }, { "description": "apply css to a specific checkbox's label.", "name": "radio-label" } ], "members": [ { "kind": "method", "name": "_initializeDefaults" }, { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-radio\"", "description": "The name of the element that you want to register.", "optional": true, "type": { "text": "string" } } ], "description": "This will register this element with the browser." }, { "kind": "method", "name": "handleChange", "parameters": [ { "name": "event", "description": "The trigger event tied to this function.", "type": { "text": "Event" } } ], "description": "Method for handling content when change event is fired.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleInput", "parameters": [ { "name": "event", "description": "The trigger event tied to this function.", "type": { "text": "Event" } } ], "description": "Method for handling content when input event is fired.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleFocus", "parameters": [ { "name": "event", "description": "The trigger event tied to this function.", "type": { "text": "Event" } } ], "description": "Method for handling focus event.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleBlur", "parameters": [ { "name": "event", "description": "The trigger event tied to this function.", "type": { "text": "Event" } } ], "description": "Method for handling blur event.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "reset", "description": "Resets component to initial state.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "isRequired", "parameters": [ { "name": "required", "description": "The element's required attribute.", "type": { "text": "Boolean" } } ], "description": "Method for handling passing the required status to aria.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "appearance", "privacy": "public", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "'default'", "attribute": "appearance", "reflects": true }, { "kind": "field", "name": "checked", "privacy": "public", "type": { "text": "boolean" }, "description": "If set to true, the radio button will be filled.", "attribute": "checked", "reflects": true }, { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "description": "If set to true, the radio button will be non-clickable.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "error", "privacy": "public", "type": { "text": "boolean" }, "description": "If set to true, sets an error state on the radio button.", "attribute": "error", "reflects": true }, { "kind": "field", "name": "id", "privacy": "public", "type": { "text": "string" }, "description": "The id global attribute defines an identifier (ID) which must be unique in the whole document.", "attribute": "id", "reflects": true }, { "kind": "field", "name": "inputId", "privacy": "private", "type": { "text": "string" }, "description": "ID for input node." }, { "kind": "field", "name": "label", "privacy": "public", "type": { "text": "string" }, "description": "Label for the radio button.", "attribute": "label" }, { "kind": "field", "name": "name", "privacy": "public", "type": { "text": "string" }, "description": "Name for the radio button group.", "attribute": "name" }, { "kind": "field", "name": "onDark", "privacy": "public", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "deprecated": "Use `appearance=\"inverse\"` instead.", "attribute": "ondark", "reflects": true }, { "kind": "field", "name": "required", "privacy": "public", "type": { "text": "boolean" }, "description": "Defines element as required.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "role", "privacy": "private", "type": { "text": "string" }, "description": "Don't add to api.md since changing of this can easily break a11y.", "attribute": "role", "reflects": true }, { "kind": "field", "name": "touched", "privacy": "private", "type": { "text": "boolean" }, "description": "Whether or not the radio button has been touched by the user." }, { "kind": "field", "name": "value", "privacy": "public", "type": { "text": "string" }, "description": "The value of the radio button.", "attribute": "value" } ], "events": [ { "name": "toggleSelected", "type": { "text": "CustomEvent" }, "description": "Notifies that the component has toggled the checked/selected state." }, { "name": "focusSelected", "type": { "text": "CustomEvent" }, "description": "Notifies that the component has gained focus." }, { "name": "auroRadio-blur", "type": { "text": "CustomEvent" }, "description": "Notifies that the component has lost focus." }, { "name": "resetRadio", "type": { "text": "CustomEvent" }, "description": "Notifies that the component has reset the checked/selected state." }, { "name": "auroRadio-selected", "type": { "text": "CustomEvent" }, "description": "Notifies that the component has been marked as checked/selected." }, { "type": { "text": "CustomEvent" }, "description": "Notifies when checked value is changed. **DEPRECATED** - Use the `input` event instead.", "name": "change", "deprecated": "Use the `input` event instead." }, { "type": { "text": "InputEvent" }, "description": "Notifies when checked value is changed by user's interface.", "name": "input" } ], "attributes": [ { "name": "appearance", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "'default'", "fieldName": "appearance" }, { "name": "checked", "type": { "text": "boolean" }, "description": "If set to true, the radio button will be filled.", "fieldName": "checked" }, { "name": "disabled", "type": { "text": "boolean" }, "description": "If set to true, the radio button will be non-clickable.", "fieldName": "disabled" }, { "name": "error", "type": { "text": "boolean" }, "description": "If set to true, sets an error state on the radio button.", "fieldName": "error" }, { "name": "id", "type": { "text": "string" }, "description": "The id global attribute defines an identifier (ID) which must be unique in the whole document.", "fieldName": "id" }, { "name": "label", "type": { "text": "string" }, "description": "Label for the radio button.", "fieldName": "label" }, { "name": "name", "type": { "text": "string" }, "description": "Name for the radio button group.", "fieldName": "name" }, { "name": "ondark", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "deprecated": "Use `appearance=\"inverse\"` instead.", "fieldName": "onDark" }, { "name": "required", "type": { "text": "boolean" }, "description": "Defines element as required.", "fieldName": "required" }, { "name": "role", "type": { "text": "string" }, "description": "Don't add to api.md since changing of this can easily break a11y.", "fieldName": "role" }, { "name": "value", "type": { "text": "string" }, "description": "The value of the radio button.", "fieldName": "value" } ], "superclass": { "name": "LitElement", "package": "lit" }, "tagName": "auro-radio", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroRadio", "declaration": { "name": "AuroRadio", "module": "components/radio/src/auro-radio.js" } } ] }, { "kind": "javascript-module", "path": "components/radio/src/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "AuroRadio", "declaration": { "name": "AuroRadio", "module": "components/radio/src/index.js" } }, { "kind": "js", "name": "AuroRadioGroup", "declaration": { "name": "AuroRadioGroup", "module": "components/radio/src/index.js" } } ] }, { "kind": "javascript-module", "path": "components/radio/src/registered.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "components/select/src/auro-select.js", "declarations": [ { "kind": "class", "description": "The `auro-select` element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.", "name": "AuroSelect", "cssParts": [ { "description": "Apply CSS to the trigger content container.", "name": "dropdownTrigger" }, { "description": "Apply CSS to the collapsed/expanded state icon container.", "name": "dropdownChevron" }, { "description": "Apply size styles to the dropdown bib (height, width, maxHeight, maxWidth only).", "name": "dropdownSize" }, { "description": "Apply CSS to the help text.", "name": "helpText" }, { "description": "Apply CSS to the root wrapper element of the select.", "name": "wrapper" }, { "description": "Apply CSS to the underlying dropdown element.", "name": "dropdown" }, { "description": "Apply CSS to the custom displayValue container.", "name": "displayValue" } ], "slots": [ { "description": "Default slot for the menu content.", "name": "" }, { "description": "Sets aria-label on close button in fullscreen bib", "name": "ariaLabel.bib.close" }, { "description": "Defines the headline to display above menu-options", "name": "bib.fullscreen.headline" }, { "description": "Defines the content of the label.", "name": "label" }, { "type": { "text": "HTMLSlotElement" }, "description": "Allows overriding the optional display text \"(optional)\", which appears next to the label.", "name": "optionalLabel" }, { "description": "Defines the content of the helpText.", "name": "helpText" }, { "description": "Dropdown value text display.", "name": "valueText" }, { "description": "Allows custom HTML content to display the selected value when select is not focused.", "name": "displayValue" } ], "members": [ { "kind": "method", "name": "_initializeDefaults", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "formattedValue", "description": "Formatted value based on `multiSelect` state.\nDefault type is `String`, changing to `Array` when `multiSelect` is true.", "privacy": "private", "return": { "type": { "text": "String|Array" } }, "readonly": true }, { "kind": "field", "name": "commonLabelClasses", "description": "Returns classmap configuration for html5 input labels in all layouts.", "privacy": "private", "return": { "type": { "text": "Record" } }, "readonly": true }, { "kind": "field", "name": "labelFontClass", "description": "Returns the label font class based on layout and selection state.", "privacy": "private", "return": { "type": { "text": "string" } }, "readonly": true }, { "kind": "field", "name": "hasValue", "description": "Whether or not the component has a value.", "return": { "type": { "text": "boolean" } }, "privacy": "private", "readonly": true }, { "kind": "method", "name": "configureDropdown", "description": "Binds all behavior needed to the dropdown after rendering.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "_syncLabelText", "description": "Reads the current label slot text and pushes it to the dropdown bib\n(for dialog naming) and the menu (for listbox aria-label). Safe to call\nbefore either child has been wired up — each branch self-guards.", "privacy": "private" }, { "kind": "method", "name": "_observeLabelChanges", "description": "Keeps the dialog/menu accessible names in sync when consumers mutate the\nlabel slot at runtime (e.g., i18n locale swap). `slotchange` alone is\ninsufficient — it doesn't fire when textContent of an already-assigned\nslotted node changes, which is the common case. We scope the observer to\nthe label node itself (not the whole host subtree) so option-content\nmutations don't trigger label re-syncs, and re-target on `slotchange`\nwhen consumers add or replace the label element.", "privacy": "private" }, { "kind": "method", "name": "register", "static": true, "parameters": [ { "name": "name", "default": "\"auro-select\"", "description": "The name of element that you want to register to.", "optional": true, "type": { "text": "string" } } ], "description": "This will register this element with the browser." }, { "kind": "method", "name": "updateDisplayedValue", "description": "Updates the displayed value in an Auro dropdown component based on optionSelected.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "updateMenuShapeSize", "description": "Update menu to default for fullscreen bib, otherwise to this.size and this.shape.", "privacy": "private" }, { "kind": "method", "name": "updateOptionPositions", "description": "Sets aria-setsize and aria-posinset on each menu option so screen readers\ncan announce position even when the listbox context is broken by\nshadow DOM boundaries.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "_getAnnouncementRoot", "description": "Returns the shadow root containing the live region for screen reader announcements.\nWhen the bib is open in fullscreen modal mode, everything outside the \nis inert, so we target the bib's own shadow root instead of the host's.", "privacy": "private", "return": { "type": { "text": "ShadowRoot" } } }, { "kind": "method", "name": "configureMenu", "description": "Binds all behavior needed to the menu after rendering.\n\nThe `` reference is captured once and not re-targeted on\n`slotchange`. Runtime option mutations are covered via\n`auroMenu-optionsChange`, so swap options inside the menu freely; do not\nswap the `` element itself under a live select — remount the\nparent `` instead.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "configureSelect", "description": "Binds all behavior needed to the component after rendering.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "updateActiveOption", "parameters": [ { "name": "index", "description": "Index of the option to make active.", "type": { "text": "number" } } ], "description": "Updates the active option in the menu." }, { "kind": "method", "name": "_getOptionDisplayText", "parameters": [ { "name": "option", "description": "The menu option element.", "type": { "text": "HTMLElement" } } ], "description": "Returns the lowercase, trimmed text content of a menu option.", "privacy": "private", "return": { "type": { "text": "string" } } }, { "kind": "method", "name": "_clearTypeaheadBuffer", "description": "Empties the type-ahead buffer and cancels any pending reset timeout.\nCalled when focus leaves the component, when Escape closes the bib, and on disconnect\nso a stale buffer never bridges into a fresh interaction.", "privacy": "private" }, { "kind": "method", "name": "updateActiveOptionBasedOnKey", "parameters": [ { "name": "_key", "description": "The key pressed by the user.", "type": { "text": "string" } } ], "description": "Updates the active option in the menu based on keyboard input.\n\nImplements the WAI-ARIA APG Listbox type-ahead pattern: accumulates printable\nkeystrokes into a buffer that resets after `typeaheadTimeoutMs` of inactivity.\nA multi-character buffer matches the first option whose displayed text starts\nwith the buffer; repeating a single character cycles through options that start\nwith that character.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleMenuLoadingChange", "parameters": [ { "name": "event", "description": "The event object containing details about the loading state change.", "type": { "text": "CustomEvent" } }, { "description": "Indicates whether the menu is currently loading.", "name": "event.detail.loading", "type": { "text": "boolean" } }, { "description": "Indicates if there are loading placeholders present.", "name": "event.detail.hasLoadingPlaceholder", "type": { "text": "boolean" } } ], "description": "Manages the visibility of the dropdown based on loading state changes.\n\nThis method listens for loading state changes and adjusts the visibility of the dropdown accordingly.\nIf the dropdown is visible and loading is true without any loading placeholders, it hides the dropdown\nand sets a flag to indicate it is hidden while loading. If loading is false and the dropdown was previously\nhidden, it checks if the active element is within the dropdown and shows it again if true.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "hideBib", "description": "Hides the dropdown bib if its open.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "showBib", "description": "Shows the dropdown bib if there are options to show.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleFocusin", "description": "Function to support", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "handleSlotChange", "parameters": [ { "name": "event", "description": "`slotchange` event.", "type": { "text": "Event" } } ], "description": "Watch for slot changes and recalculate the menuoptions.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "clearSelection", "description": "Resets all options to their default state.", "privacy": "private" }, { "kind": "method", "name": "setMenuValue", "parameters": [ { "name": "value", "description": "The value to match against the menu options.", "type": { "text": "string" } } ], "description": "Sets the selected value by matching it against the menu options. Options marked `disabled` or `static` are not selectable: if the value matches one, the selection is rejected and `value` is cleared to `undefined` while `optionSelected` is cleared to `undefined` in single-select or `[]` in multiSelect. `hidden` options remain selectable." }, { "kind": "method", "name": "scrollActiveOptionIntoView", "description": "Scrolls the currently active option into view.\nRespects user's motion preferences for accessibility.", "privacy": "private" }, { "kind": "method", "name": "scrollSelectedOptionIntoView", "description": "Scrolls the currently selected option into view.\nRespects user's motion preferences for accessibility.", "privacy": "private" }, { "kind": "method", "name": "reset", "description": "Resets component to initial state.", "return": { "type": { "text": "void" } } }, { "kind": "method", "name": "validate", "parameters": [ { "name": "force", "default": "false", "description": "Whether to force validation.", "optional": true, "type": { "text": "boolean" } } ], "description": "Validates value." }, { "kind": "method", "name": "_handleNativeSelectChange", "parameters": [ { "name": "event", "description": "// The change event from the native select element.", "type": { "text": "Event" } } ], "description": "Syncs the value from the native select element to the component's value.", "return": { "type": { "text": "void" } }, "privacy": "private" }, { "kind": "method", "name": "_updateNativeSelect", "description": "Updates the native select element's value based on the component's value.", "return": { "type": { "text": "void" } }, "privacy": "private" }, { "kind": "method", "name": "renderNativeSelect", "description": "Returns HTML for the hidden HTML5 select.", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "method", "name": "renderHtmlHelpText", "description": "Returns HTML for the help text and error message.", "privacy": "private", "return": { "type": { "text": "html" } } }, { "kind": "method", "name": "renderLayoutEmphasized", "description": "Returns HTML for the emphasized layout.", "privacy": "private", "return": { "type": { "text": "TemplateResult" } } }, { "kind": "method", "name": "renderLayoutSnowflake", "description": "Returns HTML for the snowflake layout.", "privacy": "private", "return": { "type": { "text": "TemplateResult" } } }, { "kind": "method", "name": "renderLayoutClassic", "description": "Returns HTML for the classic layout.", "privacy": "private", "return": { "type": { "text": "TemplateResult" } } }, { "kind": "method", "name": "renderLayout", "parameters": [ { "name": "ForcedLayout", "description": "Used to force a specific layout, pass in the layout name to use.", "optional": true, "type": { "text": "string" } } ], "description": "Logic to determine the layout of the component.", "privacy": "private", "return": { "type": { "text": "void" } } }, { "kind": "field", "name": "matchWidth", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the popover and trigger will be set to the same width.", "default": "false", "attribute": "matchwidth", "reflects": true }, { "kind": "field", "name": "placement", "privacy": "public", "type": { "text": "string" }, "description": "Position where the bib should appear relative to the trigger.", "default": "'bottom-start'", "attribute": "placement", "reflects": true }, { "kind": "field", "name": "offset", "privacy": "public", "type": { "text": "number" }, "description": "Gap between the trigger element and bib.", "default": "0", "attribute": "offset", "reflects": true }, { "kind": "field", "name": "noFlip", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the bib will NOT flip to an alternate position\nwhen there isn't enough space in the specified `placement`.", "default": "false", "attribute": "noflip", "reflects": true }, { "kind": "field", "name": "shift", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, the dropdown will shift its position to avoid being cut off by the viewport.", "default": "false", "attribute": "shift", "reflects": true }, { "kind": "field", "name": "autoPlacement", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, bib's position will be automatically calculated where to appear.", "default": "false", "attribute": "autoplacement", "reflects": true }, { "kind": "field", "name": "forceDisplayValue", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, the label and value will be visually hidden and the displayValue will render 100% of the time.", "default": "false", "attribute": "forcedisplayvalue", "reflects": true }, { "kind": "field", "name": "uniqueId", "privacy": "private" }, { "kind": "field", "name": "validation", "privacy": "private", "default": "new AuroFormValidation()" }, { "kind": "field", "name": "runtimeUtils", "privacy": "private", "default": "new AuroLibraryRuntimeUtils()" }, { "kind": "field", "name": "dropdownTag", "privacy": "private" }, { "kind": "field", "name": "bibtemplateTag", "privacy": "private" }, { "kind": "field", "name": "helpTextTag", "privacy": "private" }, { "kind": "field", "name": "isHiddenWhileLoading", "type": { "text": "boolean" }, "privacy": "private", "default": "false" }, { "kind": "field", "name": "hasFocus", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "hasDisplayValueContent", "privacy": "private", "type": { "text": "boolean" }, "default": "false" }, { "kind": "field", "name": "typeaheadBuffer", "type": { "text": "string" }, "privacy": "private", "default": "''" }, { "kind": "field", "name": "_typeaheadTimeout", "type": { "text": "null" }, "privacy": "private", "default": "null" }, { "kind": "field", "name": "appearance", "privacy": "public", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "'default'", "attribute": "appearance", "reflects": true }, { "kind": "field", "name": "autocomplete", "privacy": "public", "type": { "text": "string" }, "description": "If declared, sets the autocomplete attribute for the select element.", "attribute": "autocomplete", "reflects": true }, { "kind": "field", "name": "disabled", "privacy": "public", "type": { "text": "boolean" }, "description": "When attribute is present, element shows disabled state.", "attribute": "disabled", "reflects": true }, { "kind": "field", "name": "error", "privacy": "public", "type": { "text": "string" }, "description": "When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.", "attribute": "error", "reflects": true }, { "kind": "field", "name": "flexMenuWidth", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, make the width of the bib match the width of the content, rather than the trigger.", "attribute": "flexmenuwidth", "reflects": true }, { "kind": "field", "name": "fluid", "privacy": "public", "type": { "text": "boolean" }, "description": "When attribute is present, element will be 100% width of container element.", "attribute": "fluid", "reflects": true }, { "kind": "field", "name": "fullscreenBreakpoint", "privacy": "public", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'" }, "description": "Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.\n\nWhen expanded, the dropdown will automatically display in fullscreen mode\nif the screen size is equal to or smaller than the selected breakpoint.", "default": "'sm'", "attribute": "fullscreenbreakpoint", "reflects": true }, { "kind": "field", "name": "isPopoverVisible", "privacy": "private", "type": { "text": "boolean" } }, { "kind": "field", "name": "largeFullscreenHeadline", "privacy": "public", "type": { "text": "boolean" }, "description": "If declared, make bib.fullscreen.headline in HeadingDisplay.\nOtherwise, Heading 600.", "attribute": "largefullscreenheadline", "reflects": true }, { "kind": "field", "name": "layout", "privacy": "public", "type": { "text": "'classic' | 'emphasized' | 'snowflake'" }, "description": "Determines the overall layout of the select component.", "default": "'classic'", "attribute": "layout", "reflects": true }, { "kind": "field", "name": "multiSelect", "privacy": "public", "type": { "text": "boolean" }, "description": "Sets multi-select mode, allowing multiple options to be selected at once.", "attribute": "multiselect", "reflects": true }, { "kind": "field", "name": "name", "privacy": "public", "type": { "text": "string" }, "description": "The name for the select element.", "attribute": "name", "reflects": true }, { "kind": "field", "name": "noCheckmark", "privacy": "public", "type": { "text": "boolean" }, "description": "When true, checkmark on selected option will no longer be present.", "attribute": "nocheckmark", "reflects": true }, { "kind": "field", "name": "noValidate", "privacy": "public", "type": { "text": "boolean" }, "description": "If set, disables auto-validation on blur.", "attribute": "novalidate", "reflects": true }, { "kind": "field", "name": "onDark", "privacy": "public", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "attribute": "ondark", "reflects": true, "deprecated": "Use `appearance=\"inverse\"` instead.", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "field", "name": "optionSelected", "privacy": "public", "type": { "text": "HTMLElement|Array" }, "description": "Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array` when `multiSelect` is true." }, { "kind": "field", "name": "placeholder", "privacy": "public", "type": { "text": "string" }, "description": "Define custom placeholder text.", "attribute": "placeholder", "reflects": true }, { "kind": "field", "name": "required", "privacy": "public", "type": { "text": "boolean" }, "description": "Populates the `required` attribute on the element. Used for client-side validation.", "attribute": "required", "reflects": true }, { "kind": "field", "name": "setCustomValidity", "privacy": "public", "type": { "text": "string" }, "description": "Sets a custom help text message to display for all validityStates.", "attribute": "setcustomvalidity" }, { "kind": "field", "name": "setCustomValidityCustomError", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `customError`.", "attribute": "setcustomvaliditycustomerror" }, { "kind": "field", "name": "setCustomValidityValueMissing", "privacy": "public", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `valueMissing`.", "attribute": "setcustomvalidityvaluemissing" }, { "kind": "field", "name": "shape", "privacy": "public", "type": { "text": "'classic' | 'pill' | 'pill-left' | 'pill-right' | 'snowflake'" }, "description": "Determines the shape of the dropdown bib.", "attribute": "shape", "reflects": true }, { "kind": "field", "name": "size", "privacy": "public", "type": { "text": "'lg' | 'xl'" }, "description": "Determines the size of the dropdown bib. Only the `emphasized` layout supports size=`xl`, while all other layouts support size=`lg`.", "attribute": "size", "reflects": true }, { "kind": "field", "name": "touched", "privacy": "private", "type": { "text": "boolean" }, "description": "Indicates whether the input is in a dirty state (has been interacted with)." }, { "kind": "field", "name": "typeaheadTimeoutMs", "privacy": "public", "type": { "text": "number" }, "description": "Milliseconds of keyboard inactivity before the type-ahead buffer resets.\nIncrease for users who type slowly.", "default": "500", "attribute": "typeaheadtimeoutms", "reflects": true }, { "kind": "field", "name": "validity", "privacy": "public", "type": { "text": "string" }, "description": "Specifies the `validityState` this element is in.", "attribute": "validity", "reflects": true }, { "kind": "field", "name": "value", "privacy": "public", "type": { "text": "string" }, "description": "Value selected for the component. When set programmatically or as a preset attribute, the value must match a selectable option. If it matches an option marked `disabled` or `static`, the selection is rejected: `value` is cleared to `undefined` while `optionSelected` is cleared to `undefined` in single-select or `[]` in multiSelect. `hidden` options remain selectable by value.", "attribute": "value", "reflects": true }, { "kind": "field", "name": "componentHasFocus", "description": "Returns true if the element has focus.", "privacy": "private", "return": { "type": { "text": "boolean" } }, "readonly": true, "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetShapeClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "resetLayoutClasses", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "kind": "method", "name": "updateComponentArchitecture", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } } ], "events": [ { "name": "auroSelect-valueSet", "type": { "text": "CustomEvent" }, "description": "Notifies that the component has a new value set." }, { "name": "input", "type": { "text": "CustomEvent" }, "description": "Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object." }, { "description": "Notifies that the `validity` and `errorMessage` values have changed.", "name": "auroFormElement-validated" } ], "attributes": [ { "name": "appearance", "type": { "text": "'default' | 'inverse'" }, "description": "Defines whether the component will be on lighter or darker backgrounds.", "default": "'default'", "fieldName": "appearance" }, { "name": "autoplacement", "type": { "text": "boolean" }, "description": "If declared, bib's position will be automatically calculated where to appear.", "default": "false", "fieldName": "autoPlacement" }, { "name": "autocomplete", "type": { "text": "string" }, "description": "If declared, sets the autocomplete attribute for the select element.", "fieldName": "autocomplete" }, { "name": "disabled", "type": { "text": "boolean" }, "description": "When attribute is present, element shows disabled state.", "fieldName": "disabled" }, { "name": "error", "type": { "text": "string" }, "description": "When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value.", "fieldName": "error" }, { "name": "flexmenuwidth", "type": { "text": "boolean" }, "description": "If declared, make the width of the bib match the width of the content, rather than the trigger.", "fieldName": "flexMenuWidth" }, { "name": "fluid", "type": { "text": "boolean" }, "description": "When attribute is present, element will be 100% width of container element.", "fieldName": "fluid" }, { "name": "forcedisplayvalue", "type": { "text": "boolean" }, "description": "If declared, the label and value will be visually hidden and the displayValue will render 100% of the time.", "default": "false", "fieldName": "forceDisplayValue" }, { "name": "fullscreenbreakpoint", "type": { "text": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'disabled'" }, "description": "Defines the screen size breakpoint at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.\n\nWhen expanded, the dropdown will automatically display in fullscreen mode\nif the screen size is equal to or smaller than the selected breakpoint.", "default": "'sm'", "fieldName": "fullscreenBreakpoint" }, { "name": "largefullscreenheadline", "type": { "text": "boolean" }, "description": "If declared, make bib.fullscreen.headline in HeadingDisplay.\nOtherwise, Heading 600.", "fieldName": "largeFullscreenHeadline" }, { "name": "layout", "type": { "text": "'classic' | 'emphasized' | 'snowflake'" }, "description": "Determines the overall layout of the select component.", "default": "'classic'", "fieldName": "layout" }, { "name": "matchwidth", "type": { "text": "boolean" }, "description": "If declared, the popover and trigger will be set to the same width.", "default": "false", "fieldName": "matchWidth" }, { "name": "multiselect", "type": { "text": "boolean" }, "description": "Sets multi-select mode, allowing multiple options to be selected at once.", "fieldName": "multiSelect" }, { "name": "name", "type": { "text": "string" }, "description": "The name for the select element.", "fieldName": "name" }, { "name": "nocheckmark", "type": { "text": "boolean" }, "description": "When true, checkmark on selected option will no longer be present.", "fieldName": "noCheckmark" }, { "name": "noflip", "type": { "text": "boolean" }, "description": "If declared, the bib will NOT flip to an alternate position\nwhen there isn't enough space in the specified `placement`.", "default": "false", "fieldName": "noFlip" }, { "name": "novalidate", "type": { "text": "boolean" }, "description": "If set, disables auto-validation on blur.", "fieldName": "noValidate" }, { "name": "offset", "type": { "text": "number" }, "description": "Gap between the trigger element and bib.", "default": "0", "fieldName": "offset" }, { "name": "ondark", "type": { "text": "boolean" }, "description": "DEPRECATED - use `appearance=\"inverse\"` instead.", "fieldName": "onDark", "deprecated": "Use `appearance=\"inverse\"` instead.", "inheritedFrom": { "name": "AuroElement", "module": "components/layoutElement/src/auroElement.js" } }, { "name": "placeholder", "type": { "text": "string" }, "description": "Define custom placeholder text.", "fieldName": "placeholder" }, { "name": "placement", "type": { "text": "string" }, "description": "Position where the bib should appear relative to the trigger.", "default": "'bottom-start'", "fieldName": "placement" }, { "name": "required", "type": { "text": "boolean" }, "description": "Populates the `required` attribute on the element. Used for client-side validation.", "fieldName": "required" }, { "name": "setcustomvalidity", "type": { "text": "string" }, "description": "Sets a custom help text message to display for all validityStates.", "fieldName": "setCustomValidity" }, { "name": "setcustomvaliditycustomerror", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `customError`.", "fieldName": "setCustomValidityCustomError" }, { "name": "setcustomvalidityvaluemissing", "type": { "text": "string" }, "description": "Custom help text message to display when validity = `valueMissing`.", "fieldName": "setCustomValidityValueMissing" }, { "name": "shape", "type": { "text": "'classic' | 'pill' | 'pill-left' | 'pill-right' | 'snowflake'" }, "description": "Determines the shape of the dropdown bib.", "fieldName": "shape" }, { "name": "shift", "type": { "text": "boolean" }, "description": "If set, the dropdown will shift its position to avoid being cut off by the viewport.", "default": "false", "fieldName": "shift" }, { "name": "size", "type": { "text": "'lg' | 'xl'" }, "description": "Determines the size of the dropdown bib. Only the `emphasized` layout supports size=`xl`, while all other layouts support size=`lg`.", "fieldName": "size" }, { "name": "typeaheadtimeoutms", "type": { "text": "number" }, "description": "Milliseconds of keyboard inactivity before the type-ahead buffer resets.\nIncrease for users who type slowly.", "default": "500", "fieldName": "typeaheadTimeoutMs" }, { "name": "validity", "type": { "text": "string" }, "description": "Specifies the `validityState` this element is in.", "fieldName": "validity" }, { "name": "value", "type": { "text": "string" }, "description": "Value selected for the component. When set programmatically or as a preset attribute, the value must match a selectable option. If it matches an option marked `disabled` or `static`, the selection is rejected: `value` is cleared to `undefined` while `optionSelected` is cleared to `undefined` in single-select or `[]` in multiSelect. `hidden` options remain selectable by value.", "fieldName": "value" } ], "superclass": { "name": "AuroElement", "module": "/components/layoutElement/src/auroElement.js" }, "tagName": "auro-select", "customElement": true } ], "exports": [ { "kind": "js", "name": "AuroSelect", "declaration": { "name": "AuroSelect", "module": "components/select/src/auro-select.js" } } ] }, { "kind": "javascript-module", "path": "components/select/src/index.js", "declarations": [], "exports": [ { "kind": "js", "name": "AuroSelect", "declaration": { "name": "AuroSelect", "module": "components/select/src/index.js" } } ] }, { "kind": "javascript-module", "path": "components/select/src/registered.js", "declarations": [], "exports": [] }, { "kind": "javascript-module", "path": "components/select/src/selectKeyboardStrategy.js", "declarations": [ { "kind": "variable", "name": "selectKeyboardStrategy", "type": { "text": "object" }, "default": "{ ArrowDown(component, evt, ctx) { evt.preventDefault(); if (ctx.isExpanded) { if (evt.altKey || evt.ctrlKey) { // navigate to last enabled option selectKeyboardStrategy.End(component, evt, ctx); } else { navigateArrow(component, 'down', { ctx }); } } else { component.dropdown.show(); } }, ArrowUp(component, evt, ctx) { evt.preventDefault(); if (ctx.isExpanded) { if (evt.altKey || evt.ctrlKey) { // navigate to first enabled option selectKeyboardStrategy.Home(component, evt, ctx); } else { navigateArrow(component, 'up', { ctx }); } } else { component.dropdown.show(); } }, Escape(component, evt, ctx) { // Always clear the type-ahead buffer — Escape is a universal cancel. // Safe to call when the buffer is empty. // eslint-disable-next-line no-underscore-dangle if (typeof component._clearTypeaheadBuffer === 'function') { // eslint-disable-next-line no-underscore-dangle component._clearTypeaheadBuffer(); } if (!ctx.isExpanded) { return; } // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups evt.stopPropagation(); component.dropdown.hide(); }, End(component, evt, ctx) { evt.preventDefault(); evt.stopPropagation(); // `pop()` is safe here: getActiveOptions returns a fresh filtered array. // Uses \"active\" (not \"enabled\") so hidden and static rows — which a screen // reader must not announce as focused — are skipped. const lastOption = getActiveOptions(component.menu).pop(); if (!lastOption) { return; } // Pre-stash before show() so the auroDropdown-toggled handler's // `!optionActive` guard short-circuits the firstActive/selected fallback — // otherwise show() synchronously fires the handler and writes // aria-activedescendant once before we overwrite it. component.menu.updateActiveOption(lastOption); if (!ctx.isExpanded) { component.dropdown.show(); } }, Enter(component, evt, ctx) { // Prevent the keypress from bubbling to parent containers (e.g., forms) // which could interpret Enter as a submit. Matches APG select-only combobox // and native ignores modified keys. // ArrowUp/ArrowDown handle modifier+arrow explicitly above; this // guard only affects the default (printable/Space) branch. if (evt.ctrlKey || evt.metaKey || evt.altKey) { return; } // Space resolves to either typeahead-buffer extension or bib toggle // depending on whether a type-ahead buffer is active. Mirrors native //