@m3e/web 2.1.3 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/dist/all.js +2765 -343
- package/dist/all.js.map +1 -1
- package/dist/all.min.js +77 -41
- package/dist/all.min.js.map +1 -1
- package/dist/app-bar.js +14 -7
- package/dist/app-bar.js.map +1 -1
- package/dist/app-bar.min.js +1 -1
- package/dist/app-bar.min.js.map +1 -1
- package/dist/autocomplete.js +5 -9
- package/dist/autocomplete.js.map +1 -1
- package/dist/autocomplete.min.js +1 -1
- package/dist/autocomplete.min.js.map +1 -1
- package/dist/bottom-sheet.js +8 -27
- package/dist/bottom-sheet.js.map +1 -1
- package/dist/bottom-sheet.min.js +1 -1
- package/dist/bottom-sheet.min.js.map +1 -1
- package/dist/calendar.js +1082 -0
- package/dist/calendar.js.map +1 -0
- package/dist/calendar.min.js +43 -0
- package/dist/calendar.min.js.map +1 -0
- package/dist/chips.js +2 -6
- package/dist/chips.js.map +1 -1
- package/dist/chips.min.js +1 -1
- package/dist/chips.min.js.map +1 -1
- package/dist/core-a11y.js +23 -9
- package/dist/core-a11y.js.map +1 -1
- package/dist/core-a11y.min.js +4 -4
- package/dist/core-a11y.min.js.map +1 -1
- package/dist/core-anchoring.js +135 -15
- package/dist/core-anchoring.js.map +1 -1
- package/dist/core-anchoring.min.js +1 -1
- package/dist/core-anchoring.min.js.map +1 -1
- package/dist/core.js +101 -1
- package/dist/core.js.map +1 -1
- package/dist/core.min.js +1 -1
- package/dist/core.min.js.map +1 -1
- package/dist/css-custom-data.json +819 -319
- package/dist/custom-elements.json +16252 -11972
- package/dist/datepicker.js +552 -0
- package/dist/datepicker.js.map +1 -0
- package/dist/datepicker.min.js +7 -0
- package/dist/datepicker.min.js.map +1 -0
- package/dist/fab-menu.js +1 -1
- package/dist/fab-menu.js.map +1 -1
- package/dist/fab-menu.min.js +1 -1
- package/dist/fab-menu.min.js.map +1 -1
- package/dist/form-field.js +2 -6
- package/dist/form-field.js.map +1 -1
- package/dist/form-field.min.js +3 -3
- package/dist/form-field.min.js.map +1 -1
- package/dist/html-custom-data.json +478 -112
- package/dist/menu.js +3 -7
- package/dist/menu.js.map +1 -1
- package/dist/menu.min.js +1 -1
- package/dist/menu.min.js.map +1 -1
- package/dist/nav-menu.js +3 -11
- package/dist/nav-menu.js.map +1 -1
- package/dist/nav-menu.min.js +1 -1
- package/dist/nav-menu.min.js.map +1 -1
- package/dist/nav-rail.js +2 -6
- package/dist/nav-rail.js.map +1 -1
- package/dist/nav-rail.min.js +1 -1
- package/dist/nav-rail.min.js.map +1 -1
- package/dist/option.js +3 -7
- package/dist/option.js.map +1 -1
- package/dist/option.min.js +1 -1
- package/dist/option.min.js.map +1 -1
- package/dist/paginator.js.map +1 -1
- package/dist/paginator.min.js.map +1 -1
- package/dist/search.js +805 -0
- package/dist/search.js.map +1 -0
- package/dist/search.min.js +7 -0
- package/dist/search.min.js.map +1 -0
- package/dist/select.js +3 -14
- package/dist/select.js.map +1 -1
- package/dist/select.min.js +1 -1
- package/dist/select.min.js.map +1 -1
- package/dist/snackbar.js +2 -6
- package/dist/snackbar.js.map +1 -1
- package/dist/snackbar.min.js +1 -1
- package/dist/snackbar.min.js.map +1 -1
- package/dist/src/all.d.ts +3 -0
- package/dist/src/all.d.ts.map +1 -1
- package/dist/src/app-bar/AppBarElement.d.ts +6 -4
- package/dist/src/app-bar/AppBarElement.d.ts.map +1 -1
- package/dist/src/autocomplete/AutocompleteElement.d.ts +2 -2
- package/dist/src/autocomplete/AutocompleteElement.d.ts.map +1 -1
- package/dist/src/autocomplete/AutocompleteQueryEventDetail.d.ts +12 -0
- package/dist/src/autocomplete/AutocompleteQueryEventDetail.d.ts.map +1 -0
- package/dist/src/autocomplete/QueryEventDetail.d.ts +3 -8
- package/dist/src/autocomplete/QueryEventDetail.d.ts.map +1 -1
- package/dist/src/autocomplete/index.d.ts +1 -0
- package/dist/src/autocomplete/index.d.ts.map +1 -1
- package/dist/src/bottom-sheet/BottomSheetElement.d.ts.map +1 -1
- package/dist/src/calendar/CalendarElement.d.ts +213 -0
- package/dist/src/calendar/CalendarElement.d.ts.map +1 -0
- package/dist/src/calendar/CalendarView.d.ts +3 -0
- package/dist/src/calendar/CalendarView.d.ts.map +1 -0
- package/dist/src/calendar/CalendarViewElementBase.d.ts +28 -0
- package/dist/src/calendar/CalendarViewElementBase.d.ts.map +1 -0
- package/dist/src/calendar/MonthViewElement.d.ts +36 -0
- package/dist/src/calendar/MonthViewElement.d.ts.map +1 -0
- package/dist/src/calendar/MultiYearViewElement.d.ts +27 -0
- package/dist/src/calendar/MultiYearViewElement.d.ts.map +1 -0
- package/dist/src/calendar/YearViewElement.d.ts +27 -0
- package/dist/src/calendar/YearViewElement.d.ts.map +1 -0
- package/dist/src/calendar/index.d.ts +7 -0
- package/dist/src/calendar/index.d.ts.map +1 -0
- package/dist/src/calendar/utils.d.ts +24 -0
- package/dist/src/calendar/utils.d.ts.map +1 -0
- package/dist/src/chips/InputChipSetElement.d.ts.map +1 -1
- package/dist/src/core/a11y/FocusTrapElement.d.ts.map +1 -1
- package/dist/src/core/a11y/InteractivityChecker.d.ts.map +1 -1
- package/dist/src/core/anchoring/AnchorOptions.d.ts +1 -1
- package/dist/src/core/anchoring/AnchorOptions.d.ts.map +1 -1
- package/dist/src/core/anchoring/FloatingPanelElement.d.ts +18 -3
- package/dist/src/core/anchoring/FloatingPanelElement.d.ts.map +1 -1
- package/dist/src/core/anchoring/positionAnchor.d.ts.map +1 -1
- package/dist/src/core/shared/controllers/InertController.d.ts +19 -0
- package/dist/src/core/shared/controllers/InertController.d.ts.map +1 -0
- package/dist/src/core/shared/controllers/index.d.ts +1 -0
- package/dist/src/core/shared/controllers/index.d.ts.map +1 -1
- package/dist/src/core/shared/converters/dateConverter.d.ts +4 -0
- package/dist/src/core/shared/converters/dateConverter.d.ts.map +1 -0
- package/dist/src/core/shared/converters/index.d.ts +1 -0
- package/dist/src/core/shared/converters/index.d.ts.map +1 -1
- package/dist/src/core/shared/utils/index.d.ts +1 -0
- package/dist/src/core/shared/utils/index.d.ts.map +1 -1
- package/dist/src/core/shared/utils/registerStyleSheet.d.ts +7 -0
- package/dist/src/core/shared/utils/registerStyleSheet.d.ts.map +1 -0
- package/dist/src/datepicker/DatepickerElement.d.ts +237 -0
- package/dist/src/datepicker/DatepickerElement.d.ts.map +1 -0
- package/dist/src/datepicker/DatepickerToggleElement.d.ts +21 -0
- package/dist/src/datepicker/DatepickerToggleElement.d.ts.map +1 -0
- package/dist/src/datepicker/DatepickerVariant.d.ts +3 -0
- package/dist/src/datepicker/DatepickerVariant.d.ts.map +1 -0
- package/dist/src/datepicker/index.d.ts +4 -0
- package/dist/src/datepicker/index.d.ts.map +1 -0
- package/dist/src/form-field/FormFieldElement.d.ts.map +1 -1
- package/dist/src/menu/MenuElement.d.ts.map +1 -1
- package/dist/src/nav-menu/NavMenuElement.d.ts.map +1 -1
- package/dist/src/nav-menu/NavMenuItemElement.d.ts.map +1 -1
- package/dist/src/nav-rail/NavRailElement.d.ts.map +1 -1
- package/dist/src/option/OptionPanelElement.d.ts.map +1 -1
- package/dist/src/paginator/PageEventDetail.d.ts +6 -11
- package/dist/src/paginator/PageEventDetail.d.ts.map +1 -1
- package/dist/src/paginator/PaginatorElement.d.ts +2 -2
- package/dist/src/paginator/PaginatorElement.d.ts.map +1 -1
- package/dist/src/paginator/PaginatorPageEventDetail.d.ts +12 -0
- package/dist/src/paginator/PaginatorPageEventDetail.d.ts.map +1 -0
- package/dist/src/paginator/index.d.ts +1 -0
- package/dist/src/paginator/index.d.ts.map +1 -1
- package/dist/src/search/SearchBarElement.d.ts +92 -0
- package/dist/src/search/SearchBarElement.d.ts.map +1 -0
- package/dist/src/search/SearchViewElement.d.ts +146 -0
- package/dist/src/search/SearchViewElement.d.ts.map +1 -0
- package/dist/src/search/SearchViewMode.d.ts +3 -0
- package/dist/src/search/SearchViewMode.d.ts.map +1 -0
- package/dist/src/search/SearchViewQueryEventDetail.d.ts +12 -0
- package/dist/src/search/SearchViewQueryEventDetail.d.ts.map +1 -0
- package/dist/src/search/index.d.ts +5 -0
- package/dist/src/search/index.d.ts.map +1 -0
- package/dist/src/search/styles/SearchBarStyle.d.ts +12 -0
- package/dist/src/search/styles/SearchBarStyle.d.ts.map +1 -0
- package/dist/src/search/styles/SearchBarToken.d.ts +27 -0
- package/dist/src/search/styles/SearchBarToken.d.ts.map +1 -0
- package/dist/src/search/styles/SearchViewStyle.d.ts +12 -0
- package/dist/src/search/styles/SearchViewStyle.d.ts.map +1 -0
- package/dist/src/search/styles/SearchViewToken.d.ts +26 -0
- package/dist/src/search/styles/SearchViewToken.d.ts.map +1 -0
- package/dist/src/search/styles/index.d.ts +3 -0
- package/dist/src/search/styles/index.d.ts.map +1 -0
- package/dist/src/select/SelectElement.d.ts.map +1 -1
- package/dist/src/snackbar/SnackbarElement.d.ts.map +1 -1
- package/dist/src/stepper/StepperElement.d.ts.map +1 -1
- package/dist/stepper.js +2 -6
- package/dist/stepper.js.map +1 -1
- package/dist/stepper.min.js +1 -1
- package/dist/stepper.min.js.map +1 -1
- package/dist/tooltip.js +1 -1
- package/dist/tooltip.js.map +1 -1
- package/dist/tooltip.min.js +1 -1
- package/dist/tooltip.min.js.map +1 -1
- package/package.json +16 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"search.js","sources":["../../src/search/styles/SearchBarToken.ts","../../src/search/styles/SearchBarStyle.ts","../../src/search/styles/SearchViewToken.ts","../../src/search/styles/SearchViewStyle.ts","../../src/search/SearchBarElement.ts","../../src/search/SearchViewElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/** @internal */\r\nexport const SearchBarToken = {\r\n containerColor: unsafeCSS(`var(--m3e-search-bar-container-color, ${DesignToken.color.surfaceContainerHigh})`),\r\n leadingIconColor: unsafeCSS(`var(--m3e-search-bar-leading-icon-color, ${DesignToken.color.onSurface})`),\r\n trailingIconColor: unsafeCSS(`var(--m3e-search-bar-trailing-icon-color, ${DesignToken.color.onSurfaceVariant})`),\r\n containerHeight: unsafeCSS(\"var(--m3e-search-bar-container-height, 3.5rem)\"),\r\n containerShape: unsafeCSS(`var(--m3e-search-bar-container-shape, ${DesignToken.shape.corner.full})`),\r\n iconSize: unsafeCSS(\"var(--m3e-search-bar-icon-size, 1.5rem)\"),\r\n supportingTextColor: unsafeCSS(`var(--m3e-search-bar-supporting-text-color, ${DesignToken.color.onSurfaceVariant})`),\r\n supportingTextFontSize: unsafeCSS(\r\n `var(--m3e-search-bar-supporting-text-font-size, ${DesignToken.typescale.standard.body.large.fontSize})`,\r\n ),\r\n supportingTextFontWeight: unsafeCSS(\r\n `var(--m3e-search-bar-supporting-text-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight})`,\r\n ),\r\n supportingTextLineHeight: unsafeCSS(\r\n `var(--m3e-search-bar-supporting-text-line-height, ${DesignToken.typescale.standard.body.large.lineHeight})`,\r\n ),\r\n supportingTextTracking: unsafeCSS(\r\n `var(--m3e-search-bar-supporting-text-tracking, ${DesignToken.typescale.standard.body.large.tracking})`,\r\n ),\r\n inputColor: unsafeCSS(`var(--m3e-search-bar-input-color, ${DesignToken.color.onSurface})`),\r\n inputTextFontSize: unsafeCSS(\r\n `var(--m3e-search-bar-input-text-font-size, ${DesignToken.typescale.standard.body.large.fontSize})`,\r\n ),\r\n inputTextFontWeight: unsafeCSS(\r\n `var(--m3e-search-bar-input-text-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight})`,\r\n ),\r\n inputTextLineHeight: unsafeCSS(\r\n `var(--m3e-search-bar-input-text-line-height, ${DesignToken.typescale.standard.body.large.lineHeight})`,\r\n ),\r\n inputTextTracking: unsafeCSS(\r\n `var(--m3e-search-bar-input-text-tracking, ${DesignToken.typescale.standard.body.large.tracking})`,\r\n ),\r\n leadingSpace: unsafeCSS(\"var(--m3e-search-bar-leading-space, 0.25rem)\"),\r\n trailingSpace: unsafeCSS(\"var(--m3e-search-bar-trailing-space, 0.25rem)\"),\r\n noActionsLeadingSpace: unsafeCSS(\"var(--m3e-search-bar-no-actions-leading-space, 1rem)\"),\r\n noActionsTrailingSpace: unsafeCSS(\"var(--m3e-search-bar-no-actions-trailing-space, 1rem)\"),\r\n leadingActionsTrailingSpace: unsafeCSS(\"var(--m3e-search-bar-leading-actions-trailing-space, 0.25rem)\"),\r\n trailingActionsLeadingSpace: unsafeCSS(\"var(--m3e-search-bar-trailing-actions-leading-space, 0.25rem)\"),\r\n actionsGap: unsafeCSS(\"var(--m3e-search-bar-actions-gap, 0px)\"),\r\n} as const;\r\n","import { css, CSSResultGroup } from \"lit\";\r\n\r\nimport { SearchBarToken } from \"./SearchBarToken\";\r\n\r\n/**\r\n * Light DOM styles for `M3eSearchBarElement`.\r\n * @internal\r\n */\r\nexport const SearchBarLightDomStyle = css`\r\n m3e-search-bar input[slot=\"input\"]::placeholder {\r\n user-select: none;\r\n color: ${SearchBarToken.supportingTextColor};\r\n font-size: ${SearchBarToken.supportingTextFontSize};\r\n font-weight: ${SearchBarToken.supportingTextFontWeight};\r\n line-height: ${SearchBarToken.supportingTextLineHeight};\r\n letter-spacing: ${SearchBarToken.supportingTextTracking};\r\n }\r\n`;\r\n\r\n/**\r\n * Styles for `M3eSearchBarElement`.\r\n * @internal\r\n */\r\nexport const SearchBarStyle: CSSResultGroup = css`\r\n :host {\r\n display: block;\r\n height: ${SearchBarToken.containerHeight};\r\n }\r\n .base {\r\n cursor: text;\r\n display: flex;\r\n align-items: center;\r\n box-sizing: border-box;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: ${SearchBarToken.containerShape};\r\n background-color: ${SearchBarToken.containerColor};\r\n }\r\n .clear {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n min-width: 3rem;\r\n }\r\n :host(:not(:state(-clearable))) .clear {\r\n display: none;\r\n }\r\n :host(:state(-with-leading)) slot[name=\"leading\"],\r\n :host(:state(-with-trailing)) slot[name=\"trailing\"] {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n min-width: 3rem;\r\n padding-inline: 0.25rem;\r\n column-gap: calc(0.5rem + ${SearchBarToken.actionsGap});\r\n }\r\n ::slotted([slot=\"input\"]) {\r\n flex: 1 1 auto;\r\n outline: unset;\r\n border: unset;\r\n background-color: transparent;\r\n box-shadow: none;\r\n min-width: 0;\r\n padding: unset;\r\n color: ${SearchBarToken.inputColor};\r\n font-size: ${SearchBarToken.inputTextFontSize};\r\n font-weight: ${SearchBarToken.inputTextFontWeight};\r\n line-height: ${SearchBarToken.inputTextLineHeight};\r\n letter-spacing: ${SearchBarToken.inputTextTracking};\r\n }\r\n :host(:state(-with-leading)) .base {\r\n padding-inline-start: ${SearchBarToken.leadingSpace};\r\n }\r\n :host(:not(:state(-with-leading))) .base {\r\n padding-inline-start: ${SearchBarToken.noActionsLeadingSpace};\r\n }\r\n :host(:is(:state(-with-trailing), :state(-clearable))) .base {\r\n padding-inline-end: ${SearchBarToken.trailingSpace};\r\n }\r\n :host(:not(:is(:state(-with-trailing), :state(-clearable)))) .base {\r\n padding-inline-end: ${SearchBarToken.noActionsTrailingSpace};\r\n }\r\n :host(:state(-with-leading)) ::slotted([slot=\"input\"]) {\r\n margin-inline-start: ${SearchBarToken.leadingActionsTrailingSpace};\r\n }\r\n :host(:is(:state(-with-trailing), :state(-clearable))) ::slotted([slot=\"input\"]) {\r\n margin-inline-end: ${SearchBarToken.trailingActionsLeadingSpace};\r\n }\r\n slot[name=\"leading\"] {\r\n color: ${SearchBarToken.leadingIconColor};\r\n --m3e-icon-color: ${SearchBarToken.leadingIconColor};\r\n --m3e-icon-button-icon-color: ${SearchBarToken.leadingIconColor};\r\n --m3e-icon-size: ${SearchBarToken.iconSize};\r\n }\r\n slot[name=\"trailing\"],\r\n .clear {\r\n color: ${SearchBarToken.trailingIconColor};\r\n --m3e-icon-color: ${SearchBarToken.trailingIconColor};\r\n --m3e-icon-button-icon-color: ${SearchBarToken.trailingIconColor};\r\n --m3e-icon-size: ${SearchBarToken.iconSize};\r\n }\r\n ::slotted(svg[slot=\"leading\"]),\r\n ::slotted(svg[slot=\"trailing\"]) {\r\n width: 1em;\r\n font-size: ${SearchBarToken.iconSize};\r\n }\r\n ::slotted([slot=\"clear-icon\"]),\r\n .clear-icon {\r\n width: 1em;\r\n font-size: ${SearchBarToken.iconSize} !important;\r\n }\r\n slot[name=\"clear-icon\"] {\r\n --m3e-icon-size: ${SearchBarToken.iconSize};\r\n }\r\n @media (forced-colors: active) {\r\n .base {\r\n border: 1px var(--_search-bar-forced-color-outline-style, solid) CanvasText;\r\n }\r\n }\r\n`;\r\n","import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/** @internal */\r\nexport const SearchViewToken = {\r\n containerColor: unsafeCSS(`var(--m3e-search-view-container-color, ${DesignToken.color.surfaceContainerHigh})`),\r\n containedContainerColor: unsafeCSS(\r\n `var(--m3e-search-view-contained-container-color, ${DesignToken.color.surfaceContainerLow})`,\r\n ),\r\n dividerColor: unsafeCSS(`var(--m3e-search-view-divider-color, ${DesignToken.color.outline})`),\r\n dividerThickness: unsafeCSS(`var(--m3e-search-view-divider-thickness, 1px)`),\r\n fullScreenContainerShape: unsafeCSS(\r\n `var(--m3e-search-view-full-screen-container-shape, ${DesignToken.shape.corner.none})`,\r\n ),\r\n fullScreenHeaderContainerHeight: unsafeCSS(\"var(--m3e-search-view-full-screen-header-container-height, 4.5rem)\"),\r\n dockedContainerShape: unsafeCSS(\r\n `var(--m3e-search-view-docked-container-shape, ${DesignToken.shape.corner.extraLarge})`,\r\n ),\r\n dockedHeaderContainerHeight: unsafeCSS(\"var(--m3e-search-view-docked-header-container-height, 3.5rem)\"),\r\n containedLeadingMargin: unsafeCSS(\"var(--m3e-search-view-contained-leading-margin, 1.5rem)\"),\r\n containedTrailingMargin: unsafeCSS(\"var(--m3e-search-view-contained-trailing-margin, 1.55rem)\"),\r\n containedFocusedLeadingMargin: unsafeCSS(\"var(--m3e-search-view-contained-focused-leading-margin, 0.75rem)\"),\r\n containedFocusedTrailingMargin: unsafeCSS(\"var(--m3e-search-view-contained-focused-trailing-margin, 0.75rem)\"),\r\n containedDockedBarResultsGap: unsafeCSS(\"var(--m3e-search-view-contained-docked-bar-results-gap, 2px)\"),\r\n containedDockedResultsShape: unsafeCSS(\r\n `var(--m3e-search-view-contained-docked-results-shape, ${DesignToken.shape.corner.medium})`,\r\n ),\r\n containedDockedBarShape: unsafeCSS(\r\n `var(--m3e-search-view-contained-docked-bar-shape, ${DesignToken.shape.corner.full})`,\r\n ),\r\n containedFullScreenBarContainerHeight: unsafeCSS(\r\n \"var(--m3e-search-view-contained-full-screen-bar-container-height, 3.5rem)\",\r\n ),\r\n dockedContainerMinHeight: unsafeCSS(\"var(--m3e-search-view-docked-container-min-height, 240px)\"),\r\n dockedContainerMaxHeight: unsafeCSS(\"var(--m3e-search-view-docked-container-max-height, calc(100vh * 0.6667))\"),\r\n containedDockedResultsSpace: unsafeCSS(\"var(--m3e-search-view-contained-docked-results-space, 0.25rem)\"),\r\n dockedResultsBottomSpace: unsafeCSS(\"var(--m3e-search-view-docked-results-bottom-space, 1rem)\"),\r\n dockedScrimColor: unsafeCSS(`var(--m3e-search-view-docked-scrim-color, ${DesignToken.color.scrim})`),\r\n dockedScrimOpacity: unsafeCSS(\"var(--m3e-search-view-docked-scrim-opacity, 32%)\"),\r\n} as const;\r\n","import { css, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SearchViewToken } from \"./SearchViewToken\";\r\nimport { SearchBarToken } from \"./SearchBarToken\";\r\n\r\n/**\r\n * Light DOM styles for `M3eSearchViewElement`.\r\n * @internal\r\n */\r\nexport const SearchViewLightDomStyle = css`\r\n m3e-search-view input[slot=\"input\"]::placeholder {\r\n user-select: none;\r\n color: ${SearchBarToken.supportingTextColor};\r\n font-size: ${SearchBarToken.supportingTextFontSize};\r\n font-weight: ${SearchBarToken.supportingTextFontWeight};\r\n line-height: ${SearchBarToken.supportingTextLineHeight};\r\n letter-spacing: ${SearchBarToken.supportingTextTracking};\r\n }\r\n`;\r\n\r\n/**\r\n * Styles for `M3eSearchViewElement`.\r\n * @internal\r\n */\r\nexport const SearchViewStyle: CSSResultGroup = css`\r\n :host {\r\n display: block;\r\n }\r\n .base {\r\n position: relative;\r\n width: 100%;\r\n }\r\n .anchor {\r\n position: absolute;\r\n width: 100%;\r\n visibility: hidden;\r\n }\r\n .view {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n width: 100%;\r\n outline: none;\r\n padding: unset;\r\n margin: unset;\r\n border: unset;\r\n }\r\n .header {\r\n flex: none;\r\n display: flex;\r\n align-items: center;\r\n }\r\n .bar {\r\n flex: 1 1 auto;\r\n }\r\n :host(:state(-fullscreen)) .bar {\r\n transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)};\r\n }\r\n :host(:state(-fullscreen)[contained]:not([open])) .bar {\r\n margin-inline-start: ${SearchViewToken.containedLeadingMargin};\r\n margin-inline-end: ${SearchViewToken.containedTrailingMargin};\r\n }\r\n :host(:state(-fullscreen)[contained][open]) .bar,\r\n :host(:state(-fullscreen)[contained][open]) .results {\r\n margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin};\r\n margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin};\r\n }\r\n .icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n min-width: 3rem;\r\n }\r\n ::slotted([slot=\"search-icon\"]),\r\n .search-icon,\r\n ::slotted([slot=\"close-icon\"]),\r\n .close-icon {\r\n width: 1em;\r\n font-size: ${SearchBarToken.iconSize} !important;\r\n }\r\n .results {\r\n overflow: hidden;\r\n flex: 1 1 auto;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .scroll-container {\r\n flex: 1 1 auto;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n scrollbar-color: ${DesignToken.scrollbar.color};\r\n }\r\n .view:not(:popover-open) .results,\r\n .view.closing .results {\r\n display: none;\r\n }\r\n :host(:not(:is(:state(-clearable), [open]))) .clear {\r\n display: none;\r\n }\r\n ::slotted([slot=\"clear-icon\"]),\r\n .clear-icon {\r\n width: 1em;\r\n font-size: ${SearchBarToken.iconSize} !important;\r\n }\r\n slot[name=\"clear-icon\"] {\r\n --m3e-icon-size: ${SearchBarToken.iconSize};\r\n }\r\n :host(:state(-fullscreen)) .header {\r\n transition: height 150ms cubic-bezier(0.2, 0, 0, 1);\r\n }\r\n :host(:state(-fullscreen)) .view:popover-open:not(.closing) .header {\r\n height: ${SearchViewToken.fullScreenHeaderContainerHeight};\r\n }\r\n :host(:state(-fullscreen):not([open])) .header,\r\n :host(:state(-fullscreen)[open]) .view.closing .header {\r\n height: ${SearchViewToken.containedFullScreenBarContainerHeight};\r\n }\r\n :host(:state(-fullscreen)[open]) .bar {\r\n --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight};\r\n }\r\n :host(:state(-fullscreen)) .anchor {\r\n height: ${SearchViewToken.containedFullScreenBarContainerHeight};\r\n }\r\n :host(:state(-fullscreen)) .view:popover-open {\r\n border-radius: ${SearchViewToken.fullScreenContainerShape};\r\n }\r\n :host(:state(-fullscreen)[contained]) .view:popover-open {\r\n background-color: ${SearchViewToken.containedContainerColor};\r\n }\r\n :host(:state(-fullscreen):not([contained])) .view:popover-open {\r\n background-color: ${SearchViewToken.containerColor};\r\n }\r\n :host(:state(-docked)[open]) .header,\r\n :host(:state(-docked)) .anchor {\r\n height: ${SearchViewToken.dockedHeaderContainerHeight};\r\n }\r\n :host(:not([contained])[open]) .results {\r\n border-top-width: ${SearchViewToken.dividerThickness};\r\n border-top-style: solid;\r\n border-top-color: ${SearchViewToken.dividerColor};\r\n }\r\n :host(:state(-docked)[contained]) .results {\r\n margin-top: ${SearchViewToken.containedDockedBarResultsGap};\r\n }\r\n :host(:state(-docked):not([contained])[open]) .view {\r\n background-color: ${SearchViewToken.containerColor};\r\n --m3e-search-bar-container-color: ${SearchViewToken.containerColor};\r\n }\r\n :host(:state(-docked)[contained]) .results {\r\n background-color: ${SearchViewToken.containerColor};\r\n }\r\n :host(:state(-docked):not([contained])[open]) .view,\r\n :host(:state(-docked)[contained]) .results {\r\n border-radius: ${SearchViewToken.dockedContainerShape};\r\n }\r\n :host(:state(-docked)) .results {\r\n min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight});\r\n max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight});\r\n }\r\n :host(:state(-docked)) .scroll-container {\r\n scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n }\r\n :host(:state(-docked):not([contained])) .scroll-container {\r\n padding-bottom: ${SearchViewToken.dockedResultsBottomSpace};\r\n }\r\n :host(:state(-docked)[contained]) .scroll-container {\r\n padding: ${SearchViewToken.containedDockedResultsSpace};\r\n }\r\n :host(:state(-docked)) .results {\r\n transform-origin: top;\r\n transition: ${unsafeCSS(\r\n `transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},\r\n overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n )};\r\n }\r\n :host(:state(-docked):not([open])) .results {\r\n transform: scaleY(0.8);\r\n }\r\n :host(:state(-docked)[open]) .results {\r\n transform: scaleY(1);\r\n }\r\n @starting-style {\r\n :host(:state(-docked)[open]) .results {\r\n transform: scaleY(0.8);\r\n }\r\n }\r\n :host(:state(-docked)[contained]) .view {\r\n background-color: transparent;\r\n }\r\n :host(:state(-docked):not([open])) .view {\r\n transition: ${unsafeCSS(\r\n `border-radius ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},\r\n background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}`,\r\n )};\r\n }\r\n :host(:state(-docked):not([open])) .view::backdrop {\r\n transition: ${unsafeCSS(\r\n `background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n )};\r\n }\r\n :host(:state(-docked)) .view::backdrop {\r\n background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent);\r\n margin-inline-end: -20px;\r\n }\r\n :host(:state(-docked)[open]) .view::backdrop {\r\n background-color: color-mix(\r\n in srgb,\r\n ${SearchViewToken.dockedScrimColor} ${SearchViewToken.dockedScrimOpacity},\r\n transparent\r\n );\r\n transition: ${unsafeCSS(\r\n `background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}, \r\n overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n )};\r\n }\r\n @starting-style {\r\n :host(:state(-docked)[open]) .view::backdrop {\r\n background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent);\r\n }\r\n }\r\n :host(:state(-fullscreen)) .view:popover-open {\r\n width: 100vw;\r\n width: 100dvw;\r\n height: 100vh;\r\n height: 100dvh;\r\n overflow: hidden;\r\n }\r\n @media (prefers-reduced-motion) {\r\n :host(:state(-fullscreen)) .bar,\r\n :host(:state(-fullscreen)) .header,\r\n :host(:state(-docked)) .results,\r\n :host(:state(-docked):not([open])) .view,\r\n :host(:state(-docked):not([open])) .view::backdrop,\r\n :host(:state(-docked)[open]) .view::backdrop {\r\n transition: none;\r\n }\r\n }\r\n @media (forced-colors: active) {\r\n :host(:not([contained])[open]) .bar {\r\n --_search-bar-forced-color-outline-style: none;\r\n }\r\n :host(:state(-docked):not([contained])[open]) .view,\r\n :host(:state(-docked)[contained]) .results {\r\n border: 1px solid CanvasText;\r\n }\r\n :host(:not([contained])[open]) .results {\r\n border-top-color: CanvasText;\r\n }\r\n }\r\n`;\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { html, LitElement, nothing } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n AttachInternals,\r\n customElement,\r\n EventAttribute,\r\n hasAssignedNodes,\r\n registerStyleSheet,\r\n setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/icon-button\";\r\n\r\nimport { SearchBarLightDomStyle, SearchBarStyle } from \"./styles\";\r\n\r\n/**\r\n * A bar that provides a prominent entry point for search.\r\n *\r\n * @description\r\n * The `m3e-search-bar` component provides a prominent entry point for search,\r\n * capturing user input and emitting `query` and `clear` events as the text\r\n * changes. It reflects focus and interaction states through customizable CSS\r\n * properties for container, icons, and text styling.\r\n *\r\n * @example\r\n * The following example illustrates typical usage with a leading icon and the\r\n * ability to clear the current search text.\r\n * ```html\r\n * <m3e-search-bar clearable>\r\n * <m3e-icon name=\"search\" slot=\"leading\"></m3e-icon>\r\n * <input slot=\"input\" placeholder=\"Search...\" />\r\n * </m3e-search-bar>\r\n * ```\r\n *\r\n * @tag m3e-search-bar\r\n *\r\n * @attr clearable - Whether the bar presents a button used to clear the search term.\r\n * @attr clear-label - The accessible label given to the button used to clear the search term.\r\n *\r\n * @slot leading - Renders content before the input of the bar.\r\n * @slot input - Renders the input of the bar.\r\n * @slot trailing - Renders content after the input of the bar.\r\n *\r\n * @fires clear - Dispatched when the search term is cleared.\r\n *\r\n * @cssprop --m3e-search-bar-container-color - Background color of the search bar container.\r\n * @cssprop --m3e-search-bar-leading-icon-color - Color of the leading icon.\r\n * @cssprop --m3e-search-bar-trailing-icon-color - Color of the trailing icon.\r\n * @cssprop --m3e-search-bar-container-height - Height of the search bar container.\r\n * @cssprop --m3e-search-bar-container-shape - Shape (border radius) of the search bar container.\r\n * @cssprop --m3e-search-bar-icon-size - Size of icons inside the search bar.\r\n * @cssprop --m3e-search-bar-supporting-text-color - Color of the supporting text.\r\n * @cssprop --m3e-search-bar-supporting-text-font-size - Font size of the supporting text.\r\n * @cssprop --m3e-search-bar-supporting-text-font-weight - Font weight of the supporting text.\r\n * @cssprop --m3e-search-bar-supporting-text-line-height - Line height of the supporting text.\r\n * @cssprop --m3e-search-bar-supporting-text-tracking - Letter spacing of the supporting text.\r\n * @cssprop --m3e-search-bar-input-color - Color of the input text.\r\n * @cssprop --m3e-search-bar-input-text-font-size - Font size of the input text.\r\n * @cssprop --m3e-search-bar-input-text-font-weight - Font weight of the input text.\r\n * @cssprop --m3e-search-bar-input-text-line-height - Line height of the input text.\r\n * @cssprop --m3e-search-bar-input-text-tracking - Letter spacing of the input text.\r\n * @cssprop --m3e-search-bar-leading-space - Space before the leading icon.\r\n * @cssprop --m3e-search-bar-trailing-space - Space after the trailing icon.\r\n * @cssprop --m3e-search-bar-no-actions-leading-space - Leading padding when no actions are present.\r\n * @cssprop --m3e-search-bar-no-actions-trailing-space - Trailing padding when no actions are present.\r\n * @cssprop --m3e-search-bar-leading-actions-trailing-space - Space between leading actions and the input.\r\n * @cssprop --m3e-search-bar-trailing-actions-leading-space - Space between the input and trailing actions.\r\n * @cssprop --m3e-search-bar-actions-gap - Gap between action icons.\r\n */\r\n@customElement(\"m3e-search-bar\")\r\nexport class M3eSearchBarElement extends EventAttribute(AttachInternals(LitElement), \"clear\") {\r\n static {\r\n registerStyleSheet(SearchBarLightDomStyle);\r\n }\r\n\r\n /** The styles of the element. */\r\n static override styles = SearchBarStyle;\r\n\r\n /** @private */ #input?: HTMLInputElement;\r\n /** @private */ readonly #inputInputHandler = () => this.#handleInputInput();\r\n\r\n /**\r\n * Whether the bar presents a button used to clear the search term.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) clearable = false;\r\n\r\n /**\r\n * The accessible label given to the button used to clear the search term.\r\n * @default \"Clear\"\r\n */\r\n @property({ attribute: \"clear-label\" }) clearLabel = \"Clear\";\r\n\r\n /** Clears the search term. */\r\n clear(): void {\r\n if (!this.#input) return;\r\n this.#input.value = \"\";\r\n this.#handleInputInput();\r\n\r\n this.dispatchEvent(new Event(\"clear\", { bubbles: true, composed: true }));\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`\r\n <div class=\"base\" @click=\"${this.#handleContainerClick}\">\r\n <slot name=\"leading\" @slotchange=\"${this.#handleLeadingSlotChange}\"></slot>\r\n <slot name=\"input\" @slotchange=\"${this.#handleInputSlotChange}\"></slot>\r\n ${this.#renderClearButton()}\r\n <slot name=\"trailing\" @slotchange=\"${this.#handleTrailingSlotChange}\"></slot>\r\n </div>\r\n `;\r\n }\r\n\r\n /** @private */\r\n #renderClearButton(): unknown {\r\n return this.clearable\r\n ? html`<div class=\"clear\">\r\n <m3e-icon-button aria-label=\"${this.clearLabel}\" @click=\"${this.#handleClearClick}\">\r\n <slot name=\"clear-icon\">\r\n <svg class=\"clear-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"\r\n />\r\n </svg>\r\n </slot>\r\n </m3e-icon-button>\r\n </div>`\r\n : nothing;\r\n }\r\n\r\n /** @private */\r\n #handleContainerClick(): void {\r\n if (!this.matches(\":focus-within\")) {\r\n this.#input?.focus();\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleLeadingSlotChange(e: Event): void {\r\n setCustomState(this, \"-with-leading\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n }\r\n\r\n /** @private */\r\n #handleTrailingSlotChange(e: Event): void {\r\n setCustomState(this, \"-with-trailing\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n }\r\n\r\n /** @private */\r\n #handleInputSlotChange(e: Event): void {\r\n const input = (e.target as HTMLSlotElement)\r\n .assignedElements({ flatten: true })\r\n .find((x) => x instanceof HTMLInputElement);\r\n\r\n if (input != this.#input) {\r\n this.#input?.removeEventListener(\"input\", this.#inputInputHandler);\r\n this.#input = input;\r\n this.#input?.addEventListener(\"input\", this.#inputInputHandler);\r\n\r\n if (this.#input) {\r\n this.#input.role = this.#input.role || \"searchbox\";\r\n this.#input.inputMode = this.#input.inputMode || \"search\";\r\n this.#input.type = \"text\";\r\n }\r\n\r\n this.#handleInputInput();\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleInputInput(): void {\r\n setCustomState(this, \"-clearable\", this.clearable && (this.#input?.value ?? \"\").length > 0);\r\n }\r\n\r\n /** @private */\r\n #handleClearClick(): void {\r\n this.clear();\r\n this.#input?.focus();\r\n }\r\n}\r\n\r\ninterface M3eSearchBarElementEventMap extends HTMLElementEventMap {\r\n clear: Event;\r\n}\r\n\r\nexport interface M3eSearchBarElement {\r\n addEventListener<K extends keyof M3eSearchBarElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSearchBarElement, ev: M3eSearchBarElementEventMap[K]) => void,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n addEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener<K extends keyof M3eSearchBarElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSearchBarElement, ev: M3eSearchBarElementEventMap[K]) => void,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-search-bar\": M3eSearchBarElement;\r\n }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { html, LitElement, nothing, PropertyValues, svg } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n AttachInternals,\r\n customElement,\r\n debounce,\r\n EventAttribute,\r\n FocusController,\r\n InertController,\r\n prefersReducedMotion,\r\n registerStyleSheet,\r\n ScrollLockController,\r\n setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\n\r\nimport \"@m3e/web/core/a11y\";\r\n\r\nimport { SearchViewLightDomStyle, SearchViewStyle } from \"./styles\";\r\nimport { SearchViewMode } from \"./SearchViewMode\";\r\nimport { SearchViewQueryEventDetail } from \"./SearchViewQueryEventDetail\";\r\n\r\nimport \"./SearchBarElement\";\r\n\r\n/**\r\n * A surface that presents suggestions and results for a search.\r\n *\r\n * @description\r\n * The `m3e-search-view` component presents the surface for suggestions,\r\n * history, and results, managing the open and close lifecycle around an\r\n * embedded search bar. It emits `query`, `clear`, and `toggle`, events to\r\n * support application driven search logic, and exposes CSS properties for\r\n * container, shape, spacing, and layout across contained, docked, and full\r\n * screen configurations.\r\n *\r\n * @example\r\n * The following example shows a contained view in docked mode with a simple set of search results.\r\n * ```html\r\n * <m3e-search-view mode=\"docked\" contained>\r\n * <input slot=\"input\" placeholder=\"Search...\" />\r\n * <m3e-list>\r\n * <m3e-list-item>Result One</m3e-list-item>\r\n * <m3e-list-item>Result Two</m3e-list-item>\r\n * <m3e-list-item>Result Three</m3e-list-item>\r\n * </m3e-list>\r\n * </m3e-search-view>\r\n * ```\r\n *\r\n * @tag m3e-search-view\r\n *\r\n * @attr contained - Whether the view features a persistent, filled search container.\r\n * @attr mode - The behavior mode of the view.\r\n * @attr open - Whether the view is expanded to show results.\r\n * @attr clear-label - The accessible label given to the button used to clear the search term.\r\n * @attr close-label - The accessible label given to the button used to collapse the view.\r\n * @attr hide-search-icon - Whether to hide the search icon.\r\n *\r\n * @slot - When open, renders the results content of the view.\r\n * @slot input - Renders the input of the view.\r\n * @slot open-leading - When open, renders content before the input of the view.\r\n * @slot open-trailing - When open, renders content after the input of the view.\r\n * @slot closed-leading - When closed, renders content before the input of the view.\r\n * @slot closed-trailing - When closed, renders content after the input of the view.\r\n *\r\n * @fires clear - Dispatched when the search term is cleared.\r\n * @fires query - Dispatched when the view is opened or when the user modifies the search term.\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-search-view-container-color - Background color of the view container.\r\n * @cssprop --m3e-search-view-contained-container-color - Background color of the contained view container.\r\n * @cssprop --m3e-search-view-divider-color - Color of the divider separating header and results.\r\n * @cssprop --m3e-search-view-divider-thickness - Thickness of the divider separating header and results.\r\n * @cssprop --m3e-search-view-full-screen-container-shape - Shape of the fullscreen view container.\r\n * @cssprop --m3e-search-view-full-screen-header-container-height - Height of the header container in fullscreen mode.\r\n * @cssprop --m3e-search-view-docked-container-shape - Shape of the docked view container.\r\n * @cssprop --m3e-search-view-docked-header-container-height - Height of the header container in docked mode.\r\n * @cssprop --m3e-search-view-contained-leading-margin - Leading margin for the contained view.\r\n * @cssprop --m3e-search-view-contained-trailing-margin - Trailing margin for the contained view.\r\n * @cssprop --m3e-search-view-contained-focused-leading-margin - Leading margin when the contained view is focused.\r\n * @cssprop --m3e-search-view-contained-focused-trailing-margin - Trailing margin when the contained view is focused.\r\n * @cssprop --m3e-search-view-contained-docked-bar-results-gap - Gap between the contained docked bar and results.\r\n * @cssprop --m3e-search-view-contained-docked-results-shape - Shape of the results container in contained docked mode.\r\n * @cssprop --m3e-search-view-contained-docked-bar-shape - Shape of the bar in contained docked mode.\r\n * @cssprop --m3e-search-view-contained-full-screen-bar-container-height - Height of the bar container in contained fullscreen mode.\r\n * @cssprop --m3e-search-view-docked-container-min-height - Minimum height of the docked view container.\r\n * @cssprop --m3e-search-view-docked-container-max-height - Maximum height of the docked view container.\r\n * @cssprop --m3e-search-view-contained-docked-results-space - Space above the results in contained docked mode.\r\n * @cssprop --m3e-search-view-docked-results-bottom-space - Space below the results in docked mode.\r\n * @cssprop --m3e-search-view-docked-scrim-color - Color of the scrim behind the docked view.\r\n * @cssprop --m3e-search-view-docked-scrim-opacity - Opacity of the scrim behind the docked view.\r\n */\r\n@customElement(\"m3e-search-view\")\r\nexport class M3eSearchViewElement extends EventAttribute(AttachInternals(LitElement), \"clear\", \"query\") {\r\n static {\r\n registerStyleSheet(SearchViewLightDomStyle);\r\n }\r\n\r\n /** The styles of the element. */\r\n static override styles = SearchViewStyle;\r\n\r\n /** @private */ #input?: HTMLInputElement;\r\n /** @private */ #closeOnInputFocus = false;\r\n /** @private */ readonly #inputInputHandler = () => this.#handleInputInput();\r\n /** @private */ readonly #inputFocusHandler = () => this.#handleInputFocus();\r\n /** @private */ readonly #inputKeyDownHandler = (e: KeyboardEvent) => this.#handleInputKeyDown(e);\r\n /** @private */ readonly #inputPointerHandler = () => this.#handleInputPointerDown();\r\n\r\n /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n /** @private */ readonly #inertController = new InertController(this);\r\n\r\n /** @private */ @state() private _clearable = false;\r\n /** @private */ @state() private _mode?: Exclude<SearchViewMode, \"auto\">;\r\n /** @private */ #openMode?: Exclude<SearchViewMode, \"auto\">;\r\n\r\n /** @private */ #anchorCleanup?: () => void;\r\n /** @private */ #breakpointUnobserve?: () => void;\r\n /** @private */ @query(\".anchor\") private readonly _anchor!: HTMLElement;\r\n /** @private */ @query(\".view\") private readonly _view!: HTMLElement;\r\n\r\n constructor() {\r\n super();\r\n\r\n new FocusController(this, {\r\n callback: (focused) => this._handleFocusChange(focused),\r\n });\r\n }\r\n\r\n /**\r\n * Whether the view features a persistent, filled search container.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) contained = false;\r\n\r\n /**\r\n * The behavior mode of the view.\r\n * @default \"docked\"\r\n */\r\n @property({ reflect: true }) mode: SearchViewMode = \"docked\";\r\n\r\n /**\r\n * Whether the view is expanded to show results.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) open = false;\r\n\r\n /**\r\n * The accessible label given to the button used to clear the search term.\r\n * @default \"Clear\"\r\n */\r\n @property({ attribute: \"clear-label\" }) clearLabel = \"Clear\";\r\n\r\n /**\r\n * The accessible label given to the button used to collapse the view.\r\n * @default \"Close\"\r\n */\r\n @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n /**\r\n * Whether to hide the search icon.\r\n * @default false;\r\n */\r\n @property({ attribute: \"hide-search-icon\", type: Boolean }) hideSearchIcon = false;\r\n\r\n /** The current mode applied to the view. */\r\n get currentMode(): Exclude<SearchViewMode, \"auto\"> {\r\n return this._mode ?? (this.mode !== \"fullscreen\" ? \"docked\" : \"fullscreen\");\r\n }\r\n set currentMode(value: Exclude<SearchViewMode, \"auto\">) {\r\n this._mode = value;\r\n }\r\n\r\n /** Clears the search term. */\r\n clear(): void {\r\n if (!this.#input) return;\r\n this.#input.value = \"\";\r\n this.#updateClearableState();\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<SearchViewQueryEventDetail>(\"query\", {\r\n detail: { term: \"\" },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n\r\n this.dispatchEvent(new Event(\"clear\", { bubbles: true, composed: true }));\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override willUpdate(changedProperties: PropertyValues): void {\r\n super.willUpdate(changedProperties);\r\n\r\n if (changedProperties.has(\"mode\")) {\r\n this.#breakpointUnobserve?.();\r\n\r\n const previousMode = changedProperties.get(\"mode\");\r\n if (previousMode && previousMode !== this.mode && this.open) {\r\n this.open = false;\r\n }\r\n\r\n if (this.mode === \"auto\") {\r\n this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall], (matches) => {\r\n const currentMode = this.currentMode;\r\n this._mode = matches.get(Breakpoint.XSmall) ? \"fullscreen\" : \"docked\";\r\n if (currentMode !== this._mode && this.open) {\r\n this.open = false;\r\n }\r\n this.#updateMode();\r\n });\r\n } else {\r\n this._mode = undefined;\r\n this.#updateMode();\r\n }\r\n }\r\n if (changedProperties.has(\"_mode\")) {\r\n this.#updateMode();\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override updated(_changedProperties: PropertyValues<this>): void {\r\n super.updated(_changedProperties);\r\n if (_changedProperties.has(\"open\")) {\r\n if (!this.open) {\r\n if ((this.#openMode ?? this.currentMode) === \"fullscreen\") {\r\n this.#closeFullscreen();\r\n } else {\r\n this.#closeDocked();\r\n }\r\n } else {\r\n if (this.currentMode === \"fullscreen\") {\r\n this.#openFullscreen();\r\n } else {\r\n this.#openDocked();\r\n }\r\n }\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html` <div class=\"base\">\r\n <div class=\"anchor\"></div>\r\n <div\r\n role=\"${ifDefined(this.open ? \"dialog\" : undefined)}\"\r\n aria-modal=\"${ifDefined(this.open ? \"true\" : undefined)}\"\r\n aria-labelledby=\"${ifDefined(this.open ? \"header\" : undefined)}\"\r\n class=\"view\"\r\n tabindex=\"-1\"\r\n @keydown=\"${this.#handleKeyDown}\"\r\n >\r\n <m3e-focus-trap ?disabled=\"${!this.open}\">\r\n <div class=\"header\" id=\"header\">\r\n <m3e-search-bar class=\"bar\">\r\n ${this.#renderIconOrBackButton()}\r\n ${this.open\r\n ? html`<slot name=\"open-leading\" slot=\"leading\"></slot>`\r\n : html`<slot name=\"closed-leading\" slot=\"leading\"></slot>`}\r\n <slot name=\"input\" slot=\"input\" @slotchange=\"${this.#handleInputSlotChange}\"></slot>\r\n ${this.#renderClearButton()}\r\n ${this.open\r\n ? html`<slot name=\"open-trailing\" slot=\"trailing\"></slot>`\r\n : html`<slot name=\"closed-trailing\" slot=\"trailing\"></slot>`}\r\n </m3e-search-bar>\r\n </div>\r\n <div class=\"results\">\r\n <div class=\"scroll-container\">\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </m3e-focus-trap>\r\n </div>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #renderIconOrBackButton(): unknown {\r\n if (!this.open && this.hideSearchIcon) return nothing;\r\n return html`<div class=\"icon\" slot=\"leading\">${this.open ? this.#renderBackButton() : this.#renderIcon()}</div>`;\r\n }\r\n\r\n /** @private */\r\n #renderIcon(): unknown {\r\n return html`<slot name=\"search-icon\">\r\n <svg class=\"search-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path\r\n d=\"M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z\"\r\n />\r\n </svg>\r\n </slot>`;\r\n }\r\n\r\n /** @private */\r\n #renderBackButton(): unknown {\r\n return html`<m3e-icon-button\r\n class=\"close\"\r\n slot=\"leading\"\r\n aria-label=\"${this.closeLabel}\"\r\n @click=\"${this.#handleCloseClick}\"\r\n >\r\n <slot name=\"close-icon\">\r\n <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n ${this.currentMode === \"docked\"\r\n ? svg`<path d=\"m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z\"/>`\r\n : svg`<path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"/>`}\r\n </svg>\r\n </slot>\r\n </m3e-icon-button>`;\r\n }\r\n\r\n /** @private */\r\n #renderClearButton(): unknown {\r\n return html`<m3e-icon-button\r\n class=\"clear\"\r\n slot=\"trailing\"\r\n aria-label=\"${this.open && !this._clearable ? this.closeLabel : this.clearLabel}\"\r\n @click=\"${this.#handleClearClick}\"\r\n >\r\n <slot name=\"clear-icon\">\r\n <svg class=\"clear-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </slot>\r\n </m3e-icon-button>`;\r\n }\r\n\r\n /** @private */\r\n #handleInputSlotChange(e: Event): void {\r\n const input = (e.target as HTMLSlotElement)\r\n .assignedElements({ flatten: true })\r\n .find((x) => x instanceof HTMLInputElement);\r\n\r\n if (input != this.#input) {\r\n this.#input?.removeEventListener(\"input\", this.#inputInputHandler);\r\n this.#input?.removeEventListener(\"focus\", this.#inputFocusHandler);\r\n this.#input?.removeEventListener(\"keydown\", this.#inputKeyDownHandler);\r\n this.#input?.removeEventListener(\"pointerdown\", this.#inputPointerHandler);\r\n\r\n this.#input = input;\r\n\r\n this.#input?.addEventListener(\"input\", this.#inputInputHandler);\r\n this.#input?.addEventListener(\"focus\", this.#inputFocusHandler);\r\n this.#input?.addEventListener(\"keydown\", this.#inputKeyDownHandler);\r\n this.#input?.addEventListener(\"pointerdown\", this.#inputPointerHandler);\r\n\r\n if (this.#input) {\r\n this.#input.role = this.#input.role || \"searchbox\";\r\n this.#input.inputMode = this.#input.inputMode || \"search\";\r\n this.#input.type = \"text\";\r\n this.#input.ariaHasPopup = \"dialog\";\r\n }\r\n\r\n this.#updateClearableState();\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleInputInput(): void {\r\n this.#updateClearableState();\r\n if (this.open) {\r\n this.dispatchEvent(\r\n new CustomEvent<SearchViewQueryEventDetail>(\"query\", {\r\n detail: { term: this.#input?.value ?? \"\" },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n } else {\r\n this.open = true;\r\n }\r\n }\r\n\r\n /** @private */\r\n #updateMode(): void {\r\n setCustomState(this, \"-fullscreen\", this.currentMode === \"fullscreen\");\r\n setCustomState(this, \"-docked\", this.currentMode === \"docked\");\r\n }\r\n\r\n /** @private */\r\n #updateClearableState(): void {\r\n this._clearable = (this.#input?.value ?? \"\").length > 0;\r\n setCustomState(this, \"-clearable\", this._clearable);\r\n }\r\n\r\n /** @private */\r\n #handleInputFocus(): void {\r\n this.open = !this.#closeOnInputFocus;\r\n this.#closeOnInputFocus = false;\r\n }\r\n\r\n /** @private */\r\n #handleCloseClick(): void {\r\n if (!this.#input) return;\r\n if (this.#input.value) {\r\n this.clear();\r\n }\r\n this.#closeOnInputFocus = true;\r\n this.#input?.focus();\r\n }\r\n\r\n /** @private */\r\n #handleClearClick(): void {\r\n if (!this.#input) return;\r\n if (this.#input.value) {\r\n this.clear();\r\n } else {\r\n this.#closeOnInputFocus = true;\r\n }\r\n this.#input?.focus();\r\n }\r\n\r\n /** @private */\r\n #handleInputPointerDown(): void {\r\n if (!this.open && this.#input?.matches(\":focus\")) {\r\n this.open = true;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleInputKeyDown(e: KeyboardEvent): void {\r\n if (this.open && e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n e.preventDefault();\r\n\r\n const input = e.target as HTMLInputElement;\r\n if (input.value) {\r\n this.clear();\r\n }\r\n\r\n this.open = false;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleKeyDown(e: KeyboardEvent): void {\r\n if (this.open && e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n e.preventDefault();\r\n this.#handleCloseClick();\r\n }\r\n }\r\n\r\n /** @private */\r\n @debounce(40)\r\n private _handleFocusChange(focused: boolean) {\r\n if (!focused && this.currentMode === \"docked\") {\r\n this.clear();\r\n this.open = false;\r\n }\r\n }\r\n\r\n /** @private */\r\n async #openDocked(): Promise<void> {\r\n if (\r\n !this.dispatchEvent(\r\n new ToggleEvent(\"beforetoggle\", {\r\n oldState: \"closed\",\r\n newState: \"open\",\r\n bubbles: true,\r\n composed: true,\r\n cancelable: true,\r\n }),\r\n )\r\n ) {\r\n this.open = false;\r\n return;\r\n }\r\n\r\n this.#openMode = this.currentMode;\r\n const view = this._view;\r\n\r\n this.#anchorCleanup?.();\r\n this.#anchorCleanup = await positionAnchor(\r\n view,\r\n this._anchor,\r\n {\r\n position: \"bottom\",\r\n },\r\n (x, y) => {\r\n const view = this._view;\r\n view.style.top = `${y - this._anchor.clientHeight}px`;\r\n view.style.width = `${this._anchor.clientWidth}px`;\r\n\r\n if (M3eDirectionality.current === \"rtl\") {\r\n view.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n view.style.left = \"\";\r\n } else {\r\n view.style.left = `${x}px`;\r\n view.style.right = \"\";\r\n }\r\n },\r\n );\r\n\r\n this._anchor.style.position = \"relative\";\r\n view.popover = \"manual\";\r\n view.style.position = \"absolute\";\r\n view.showPopover();\r\n this.#scrollLockController.lock();\r\n this.#inertController.lock();\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: \"closed\",\r\n newState: \"open\",\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<SearchViewQueryEventDetail>(\"query\", {\r\n detail: { term: this.#input?.value ?? \"\" },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n\r\n /** @private */\r\n #closeDocked(): void {\r\n const view = this._view;\r\n if (view.popover !== \"manual\") return;\r\n if (\r\n !this.dispatchEvent(\r\n new ToggleEvent(\"beforetoggle\", {\r\n oldState: \"open\",\r\n newState: \"closed\",\r\n bubbles: true,\r\n composed: true,\r\n cancelable: true,\r\n }),\r\n )\r\n ) {\r\n this.open = true;\r\n return;\r\n }\r\n\r\n this.#openMode = undefined;\r\n this.#scrollLockController.unlock();\r\n this.#inertController.unlock();\r\n\r\n if (prefersReducedMotion()) {\r\n this.#hideDocked();\r\n } else {\r\n view.classList.add(\"closing\");\r\n view.addEventListener(\"transitionend\", () => this.#hideDocked(), { once: true });\r\n }\r\n }\r\n\r\n /** @private */\r\n #hideDocked(): void {\r\n this.#anchorCleanup?.();\r\n this.#anchorCleanup = undefined;\r\n\r\n const view = this._view;\r\n view.classList.remove(\"closing\");\r\n view.style.position = \"\";\r\n view.style.width = \"\";\r\n view.style.top = \"\";\r\n view.style.left = \"\";\r\n view.style.right = \"\";\r\n view.hidePopover();\r\n view.popover = null;\r\n this._anchor.style.position = \"\";\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: \"open\",\r\n newState: \"closed\",\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n\r\n /** @private */\r\n async #openFullscreen(): Promise<void> {\r\n if (\r\n !this.dispatchEvent(\r\n new ToggleEvent(\"beforetoggle\", {\r\n oldState: \"closed\",\r\n newState: \"open\",\r\n bubbles: true,\r\n composed: true,\r\n cancelable: true,\r\n }),\r\n )\r\n ) {\r\n this.open = false;\r\n return;\r\n }\r\n\r\n this.#openMode = this.currentMode;\r\n this.#scrollLockController.lock();\r\n this.#inertController.lock();\r\n\r\n const view = this._view;\r\n this.#anchorCleanup?.();\r\n\r\n if (!prefersReducedMotion()) {\r\n const rect = view.getBoundingClientRect();\r\n const startInline = M3eDirectionality.current === \"rtl\" ? window.innerWidth - rect.right : rect.left;\r\n\r\n view.style.position = \"fixed\";\r\n view.popover = \"manual\";\r\n view.showPopover();\r\n this._anchor.style.position = \"relative\";\r\n\r\n view.animate(\r\n [\r\n {\r\n transform: `translateX(${startInline}px)`,\r\n width: `${rect.width}px`,\r\n top: `${rect.top}px`,\r\n height: `${rect.height}px`,\r\n },\r\n { transform: \"translateX(0px)\", width: \"100vw\", top: \"0px\", height: \"100vh\" },\r\n ],\r\n {\r\n duration: 150,\r\n easing: \"cubic-bezier(0.2, 0.0, 0, 1.0)\",\r\n },\r\n );\r\n } else {\r\n view.style.position = \"fixed\";\r\n view.popover = \"manual\";\r\n view.showPopover();\r\n this._anchor.style.position = \"relative\";\r\n }\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: \"closed\",\r\n newState: \"open\",\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<SearchViewQueryEventDetail>(\"query\", {\r\n detail: { term: this.#input?.value ?? \"\" },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n\r\n /** @private */\r\n async #closeFullscreen(): Promise<void> {\r\n const view = this._view;\r\n if (view.popover !== \"manual\") return;\r\n\r\n if (\r\n !this.dispatchEvent(\r\n new ToggleEvent(\"beforetoggle\", {\r\n oldState: \"open\",\r\n newState: \"closed\",\r\n bubbles: true,\r\n composed: true,\r\n cancelable: true,\r\n }),\r\n )\r\n ) {\r\n this.open = true;\r\n return;\r\n }\r\n\r\n this.#openMode = undefined;\r\n this.#scrollLockController.unlock();\r\n this.#inertController.unlock();\r\n\r\n const anchor = this._anchor;\r\n\r\n if (!prefersReducedMotion()) {\r\n const start = view.getBoundingClientRect();\r\n const end = anchor.getBoundingClientRect();\r\n\r\n const startInline = M3eDirectionality.current === \"rtl\" ? window.innerWidth - start.right : start.left;\r\n const endInline = M3eDirectionality.current === \"rtl\" ? window.innerWidth - end.right : end.left;\r\n const dx = M3eDirectionality.current === \"rtl\" ? startInline - endInline : endInline - startInline;\r\n\r\n view.classList.add(\"closing\");\r\n await view.animate(\r\n [\r\n {\r\n transform: `translateX(0px)`,\r\n width: `${start.width}px`,\r\n top: `${start.top}px`,\r\n height: `${start.height}px`,\r\n },\r\n {\r\n transform: `translateX(${dx}px)`,\r\n width: `${end.width}px`,\r\n top: `${end.top}px`,\r\n height: `${end.height}px`,\r\n },\r\n ],\r\n {\r\n duration: 150,\r\n easing: \"cubic-bezier(0.2, 0.0, 0, 1.0)\",\r\n },\r\n ).finished;\r\n }\r\n\r\n view.hidePopover();\r\n view.style.position = \"\";\r\n view.popover = null;\r\n view.classList.remove(\"closing\");\r\n anchor.style.position = \"\";\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: \"open\",\r\n newState: \"closed\",\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n}\r\n\r\ninterface M3eSearchViewElementEventMap extends HTMLElementEventMap {\r\n clear: Event;\r\n query: CustomEvent<SearchViewQueryEventDetail>;\r\n beforetoggle: ToggleEvent;\r\n toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSearchViewElement {\r\n addEventListener<K extends keyof M3eSearchViewElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSearchViewElement, ev: M3eSearchViewElementEventMap[K]) => void,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n addEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener<K extends keyof M3eSearchViewElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSearchViewElement, ev: M3eSearchViewElementEventMap[K]) => void,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-search-view\": M3eSearchViewElement;\r\n }\r\n}\r\n"],"names":["SearchBarToken","containerColor","unsafeCSS","DesignToken","color","surfaceContainerHigh","leadingIconColor","onSurface","trailingIconColor","onSurfaceVariant","containerHeight","containerShape","shape","corner","full","iconSize","supportingTextColor","supportingTextFontSize","typescale","standard","body","large","fontSize","supportingTextFontWeight","fontWeight","supportingTextLineHeight","lineHeight","supportingTextTracking","tracking","inputColor","inputTextFontSize","inputTextFontWeight","inputTextLineHeight","inputTextTracking","leadingSpace","trailingSpace","noActionsLeadingSpace","noActionsTrailingSpace","leadingActionsTrailingSpace","trailingActionsLeadingSpace","actionsGap","SearchBarLightDomStyle","css","SearchBarStyle","SearchViewToken","containedContainerColor","surfaceContainerLow","dividerColor","outline","dividerThickness","fullScreenContainerShape","none","fullScreenHeaderContainerHeight","dockedContainerShape","extraLarge","dockedHeaderContainerHeight","containedLeadingMargin","containedTrailingMargin","containedFocusedLeadingMargin","containedFocusedTrailingMargin","containedDockedBarResultsGap","containedDockedResultsShape","medium","containedDockedBarShape","containedFullScreenBarContainerHeight","dockedContainerMinHeight","dockedContainerMaxHeight","containedDockedResultsSpace","dockedResultsBottomSpace","dockedScrimColor","scrim","dockedScrimOpacity","SearchViewLightDomStyle","SearchViewStyle","motion","duration","short2","easing","scrollbar","thinWidth","long2","short3","M3eSearchBarElement","EventAttribute","AttachInternals","LitElement","constructor","_M3eSearchBarElement_input","set","_M3eSearchBarElement_inputInputHandler","__classPrivateFieldGet","_M3eSearchBarElement_instances","_M3eSearchBarElement_handleInputInput","call","clearable","clearLabel","clear","value","dispatchEvent","Event","bubbles","composed","render","html","_M3eSearchBarElement_handleContainerClick","_M3eSearchBarElement_handleLeadingSlotChange","_M3eSearchBarElement_handleInputSlotChange","_M3eSearchBarElement_renderClearButton","_M3eSearchBarElement_handleTrailingSlotChange","_M3eSearchBarElement_handleClearClick","nothing","matches","focus","e","setCustomState","hasAssignedNodes","target","input","assignedElements","flatten","find","x","HTMLInputElement","removeEventListener","__classPrivateFieldSet","addEventListener","role","inputMode","type","length","registerStyleSheet","styles","__decorate","property","Boolean","reflect","prototype","attribute","customElement","M3eSearchViewElement","_M3eSearchViewElement_input","_M3eSearchViewElement_closeOnInputFocus","_M3eSearchViewElement_inputInputHandler","_M3eSearchViewElement_instances","_M3eSearchViewElement_handleInputInput","_M3eSearchViewElement_inputFocusHandler","_M3eSearchViewElement_handleInputFocus","_M3eSearchViewElement_inputKeyDownHandler","_M3eSearchViewElement_inputPointerHandler","_M3eSearchViewElement_handleInputPointerDown","_M3eSearchViewElement_scrollLockController","ScrollLockController","_M3eSearchViewElement_inertController","InertController","_clearable","_M3eSearchViewElement_openMode","_M3eSearchViewElement_anchorCleanup","_M3eSearchViewElement_breakpointUnobserve","contained","mode","open","closeLabel","hideSearchIcon","FocusController","callback","focused","_handleFocusChange","currentMode","_mode","_M3eSearchViewElement_updateClearableState","CustomEvent","detail","term","willUpdate","changedProperties","has","previousMode","get","M3eBreakpointObserver","observe","Breakpoint","XSmall","_M3eSearchViewElement_updateMode","undefined","updated","_changedProperties","_M3eSearchViewElement_closeFullscreen","_M3eSearchViewElement_closeDocked","_M3eSearchViewElement_openFullscreen","_M3eSearchViewElement_openDocked","ifDefined","_M3eSearchViewElement_handleKeyDown","_M3eSearchViewElement_renderIconOrBackButton","_M3eSearchViewElement_handleInputSlotChange","_M3eSearchViewElement_renderClearButton","_M3eSearchViewElement_renderBackButton","_M3eSearchViewElement_renderIcon","_M3eSearchViewElement_handleCloseClick","svg","_M3eSearchViewElement_handleClearClick","ariaHasPopup","key","shiftKey","ctrlKey","preventDefault","ToggleEvent","oldState","newState","cancelable","view","_view","positionAnchor","_anchor","position","y","style","top","clientHeight","width","clientWidth","M3eDirectionality","current","right","window","innerWidth","left","popover","showPopover","lock","unlock","prefersReducedMotion","_M3eSearchViewElement_hideDocked","classList","add","once","remove","hidePopover","rect","getBoundingClientRect","startInline","animate","transform","height","anchor","start","end","endInline","dx","finished","state","query","debounce"],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license MIT
|
|
3
|
+
* Copyright (c) 2025 matraic
|
|
4
|
+
* See LICENSE file in the project root for full license text.
|
|
5
|
+
*/
|
|
6
|
+
import{__classPrivateFieldGet as e,__classPrivateFieldSet as t,__decorate as o}from"tslib";import{unsafeCSS as i,css as s,LitElement as n,html as a,nothing as r,svg as l}from"lit";import{property as c,state as h,query as d}from"lit/decorators.js";import{DesignToken as p,EventAttribute as m,AttachInternals as u,setCustomState as v,hasAssignedNodes as g,registerStyleSheet as f,customElement as b,ScrollLockController as w,InertController as $,FocusController as y,prefersReducedMotion as k,debounce as x}from"@m3e/web/core";import"@m3e/web/icon-button";import{ifDefined as E}from"lit/directives/if-defined.js";import{positionAnchor as M}from"@m3e/web/core/anchoring";import{M3eDirectionality as _}from"@m3e/web/core/bidi";import{M3eBreakpointObserver as L,Breakpoint as S}from"@m3e/web/core/layout";import"@m3e/web/core/a11y";const z=i(`var(--m3e-search-bar-container-color, ${p.color.surfaceContainerHigh})`),W=i(`var(--m3e-search-bar-leading-icon-color, ${p.color.onSurface})`),C=i(`var(--m3e-search-bar-trailing-icon-color, ${p.color.onSurfaceVariant})`),T=i("var(--m3e-search-bar-container-height, 3.5rem)"),q=i(`var(--m3e-search-bar-container-shape, ${p.shape.corner.full})`),B=i("var(--m3e-search-bar-icon-size, 1.5rem)"),H=i(`var(--m3e-search-bar-supporting-text-color, ${p.color.onSurfaceVariant})`),P=i(`var(--m3e-search-bar-supporting-text-font-size, ${p.typescale.standard.body.large.fontSize})`),X=i(`var(--m3e-search-bar-supporting-text-font-weight, ${p.typescale.standard.body.large.fontWeight})`),Z=i(`var(--m3e-search-bar-supporting-text-line-height, ${p.typescale.standard.body.large.lineHeight})`),j=i(`var(--m3e-search-bar-supporting-text-tracking, ${p.typescale.standard.body.large.tracking})`),I=i(`var(--m3e-search-bar-input-color, ${p.color.onSurface})`),K=i(`var(--m3e-search-bar-input-text-font-size, ${p.typescale.standard.body.large.fontSize})`),F=i(`var(--m3e-search-bar-input-text-font-weight, ${p.typescale.standard.body.large.fontWeight})`),R=i(`var(--m3e-search-bar-input-text-line-height, ${p.typescale.standard.body.large.lineHeight})`),Y=i(`var(--m3e-search-bar-input-text-tracking, ${p.typescale.standard.body.large.tracking})`),D=i("var(--m3e-search-bar-leading-space, 0.25rem)"),U=i("var(--m3e-search-bar-trailing-space, 0.25rem)"),V=i("var(--m3e-search-bar-no-actions-leading-space, 1rem)"),A=i("var(--m3e-search-bar-no-actions-trailing-space, 1rem)"),G=i("var(--m3e-search-bar-leading-actions-trailing-space, 0.25rem)"),J=i("var(--m3e-search-bar-trailing-actions-leading-space, 0.25rem)"),N=i("var(--m3e-search-bar-actions-gap, 0px)"),O=s`m3e-search-bar input[slot="input"]::placeholder { user-select: none; color: ${H}; font-size: ${P}; font-weight: ${X}; line-height: ${Z}; letter-spacing: ${j}; }`,Q=s`:host { display: block; height: ${T}; } .base { cursor: text; display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 100%; border-radius: ${q}; background-color: ${z}; } .clear { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } :host(:not(:state(-clearable))) .clear { display: none; } :host(:state(-with-leading)) slot[name="leading"], :host(:state(-with-trailing)) slot[name="trailing"] { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; padding-inline: 0.25rem; column-gap: calc(0.5rem + ${N}); } ::slotted([slot="input"]) { flex: 1 1 auto; outline: unset; border: unset; background-color: transparent; box-shadow: none; min-width: 0; padding: unset; color: ${I}; font-size: ${K}; font-weight: ${F}; line-height: ${R}; letter-spacing: ${Y}; } :host(:state(-with-leading)) .base { padding-inline-start: ${D}; } :host(:not(:state(-with-leading))) .base { padding-inline-start: ${V}; } :host(:is(:state(-with-trailing), :state(-clearable))) .base { padding-inline-end: ${U}; } :host(:not(:is(:state(-with-trailing), :state(-clearable)))) .base { padding-inline-end: ${A}; } :host(:state(-with-leading)) ::slotted([slot="input"]) { margin-inline-start: ${G}; } :host(:is(:state(-with-trailing), :state(-clearable))) ::slotted([slot="input"]) { margin-inline-end: ${J}; } slot[name="leading"] { color: ${W}; --m3e-icon-color: ${W}; --m3e-icon-button-icon-color: ${W}; --m3e-icon-size: ${B}; } slot[name="trailing"], .clear { color: ${C}; --m3e-icon-color: ${C}; --m3e-icon-button-icon-color: ${C}; --m3e-icon-size: ${B}; } ::slotted(svg[slot="leading"]), ::slotted(svg[slot="trailing"]) { width: 1em; font-size: ${B}; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${B} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${B}; } @media (forced-colors: active) { .base { border: 1px var(--_search-bar-forced-color-outline-style, solid) CanvasText; } }`,ee=i(`var(--m3e-search-view-container-color, ${p.color.surfaceContainerHigh})`),te=i(`var(--m3e-search-view-contained-container-color, ${p.color.surfaceContainerLow})`),oe=i(`var(--m3e-search-view-divider-color, ${p.color.outline})`),ie=i("var(--m3e-search-view-divider-thickness, 1px)"),se=i(`var(--m3e-search-view-full-screen-container-shape, ${p.shape.corner.none})`),ne=i("var(--m3e-search-view-full-screen-header-container-height, 4.5rem)"),ae=i(`var(--m3e-search-view-docked-container-shape, ${p.shape.corner.extraLarge})`),re=i("var(--m3e-search-view-docked-header-container-height, 3.5rem)"),le=i("var(--m3e-search-view-contained-leading-margin, 1.5rem)"),ce=i("var(--m3e-search-view-contained-trailing-margin, 1.55rem)"),he=i("var(--m3e-search-view-contained-focused-leading-margin, 0.75rem)"),de=i("var(--m3e-search-view-contained-focused-trailing-margin, 0.75rem)"),pe=i("var(--m3e-search-view-contained-docked-bar-results-gap, 2px)"),me=(i(`var(--m3e-search-view-contained-docked-results-shape, ${p.shape.corner.medium})`),i(`var(--m3e-search-view-contained-docked-bar-shape, ${p.shape.corner.full})`),i("var(--m3e-search-view-contained-full-screen-bar-container-height, 3.5rem)")),ue=i("var(--m3e-search-view-docked-container-min-height, 240px)"),ve=i("var(--m3e-search-view-docked-container-max-height, calc(100vh * 0.6667))"),ge=i("var(--m3e-search-view-contained-docked-results-space, 0.25rem)"),fe=i("var(--m3e-search-view-docked-results-bottom-space, 1rem)"),be=i(`var(--m3e-search-view-docked-scrim-color, ${p.color.scrim})`),we=i("var(--m3e-search-view-docked-scrim-opacity, 32%)"),$e=s`m3e-search-view input[slot="input"]::placeholder { user-select: none; color: ${H}; font-size: ${P}; font-weight: ${X}; line-height: ${Z}; letter-spacing: ${j}; }`,ye=s`:host { display: block; } .base { position: relative; width: 100%; } .anchor { position: absolute; width: 100%; visibility: hidden; } .view { display: flex; flex-direction: column; box-sizing: border-box; width: 100%; outline: none; padding: unset; margin: unset; border: unset; } .header { flex: none; display: flex; align-items: center; } .bar { flex: 1 1 auto; } :host(:state(-fullscreen)) .bar { transition: ${i(`margin ${p.motion.duration.short2} ${p.motion.easing.standard}`)}; } :host(:state(-fullscreen)[contained]:not([open])) .bar { margin-inline-start: ${le}; margin-inline-end: ${ce}; } :host(:state(-fullscreen)[contained][open]) .bar, :host(:state(-fullscreen)[contained][open]) .results { margin-inline-start: ${he}; margin-inline-end: ${de}; } .icon { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 3rem; } ::slotted([slot="search-icon"]), .search-icon, ::slotted([slot="close-icon"]), .close-icon { width: 1em; font-size: ${B} !important; } .results { overflow: hidden; flex: 1 1 auto; display: flex; flex-direction: column; } .scroll-container { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; scrollbar-color: ${p.scrollbar.color}; } .view:not(:popover-open) .results, .view.closing .results { display: none; } :host(:not(:is(:state(-clearable), [open]))) .clear { display: none; } ::slotted([slot="clear-icon"]), .clear-icon { width: 1em; font-size: ${B} !important; } slot[name="clear-icon"] { --m3e-icon-size: ${B}; } :host(:state(-fullscreen)) .header { transition: height 150ms cubic-bezier(0.2, 0, 0, 1); } :host(:state(-fullscreen)) .view:popover-open:not(.closing) .header { height: ${ne}; } :host(:state(-fullscreen):not([open])) .header, :host(:state(-fullscreen)[open]) .view.closing .header { height: ${me}; } :host(:state(-fullscreen)[open]) .bar { --m3e-search-bar-container-height: ${me}; } :host(:state(-fullscreen)) .anchor { height: ${me}; } :host(:state(-fullscreen)) .view:popover-open { border-radius: ${se}; } :host(:state(-fullscreen)[contained]) .view:popover-open { background-color: ${te}; } :host(:state(-fullscreen):not([contained])) .view:popover-open { background-color: ${ee}; } :host(:state(-docked)[open]) .header, :host(:state(-docked)) .anchor { height: ${re}; } :host(:not([contained])[open]) .results { border-top-width: ${ie}; border-top-style: solid; border-top-color: ${oe}; } :host(:state(-docked)[contained]) .results { margin-top: ${pe}; } :host(:state(-docked):not([contained])[open]) .view { background-color: ${ee}; --m3e-search-bar-container-color: ${ee}; } :host(:state(-docked)[contained]) .results { background-color: ${ee}; } :host(:state(-docked):not([contained])[open]) .view, :host(:state(-docked)[contained]) .results { border-radius: ${ae}; } :host(:state(-docked)) .results { min-height: calc(${ue} - ${re}); max-height: calc(${ve} - ${re}); } :host(:state(-docked)) .scroll-container { scrollbar-width: ${p.scrollbar.thinWidth}; } :host(:state(-docked):not([contained])) .scroll-container { padding-bottom: ${fe}; } :host(:state(-docked)[contained]) .scroll-container { padding: ${ge}; } :host(:state(-docked)) .results { transform-origin: top; transition: ${i(`transform ${p.motion.duration.short2} ${p.motion.easing.standard},\n overlay ${p.motion.duration.short2} ${p.motion.easing.standard} allow-discrete,\n display ${p.motion.duration.short2} ${p.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked):not([open])) .results { transform: scaleY(0.8); } :host(:state(-docked)[open]) .results { transform: scaleY(1); } @starting-style { :host(:state(-docked)[open]) .results { transform: scaleY(0.8); } } :host(:state(-docked)[contained]) .view { background-color: transparent; } :host(:state(-docked):not([open])) .view { transition: ${i(`border-radius ${p.motion.duration.long2} ${p.motion.easing.standard},\n background-color ${p.motion.duration.long2} ${p.motion.easing.standard}`)}; } :host(:state(-docked):not([open])) .view::backdrop { transition: ${i(`background-color ${p.motion.duration.short3} ${p.motion.easing.standard}, \n overlay ${p.motion.duration.short3} ${p.motion.easing.standard} allow-discrete,\n visibility ${p.motion.duration.short3} ${p.motion.easing.standard} allow-discrete`)}; } :host(:state(-docked)) .view::backdrop { background-color: color-mix(in srgb, ${be} 0%, transparent); margin-inline-end: -20px; } :host(:state(-docked)[open]) .view::backdrop { background-color: color-mix( in srgb, ${be} ${we}, transparent ); transition: ${i(`background-color ${p.motion.duration.long2} ${p.motion.easing.standard}, \n overlay ${p.motion.duration.long2} ${p.motion.easing.standard} allow-discrete,\n visibility ${p.motion.duration.long2} ${p.motion.easing.standard} allow-discrete`)}; } @starting-style { :host(:state(-docked)[open]) .view::backdrop { background-color: color-mix(in srgb, ${be} 0%, transparent); } } :host(:state(-fullscreen)) .view:popover-open { width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; overflow: hidden; } @media (prefers-reduced-motion) { :host(:state(-fullscreen)) .bar, :host(:state(-fullscreen)) .header, :host(:state(-docked)) .results, :host(:state(-docked):not([open])) .view, :host(:state(-docked):not([open])) .view::backdrop, :host(:state(-docked)[open]) .view::backdrop { transition: none; } } @media (forced-colors: active) { :host(:not([contained])[open]) .bar { --_search-bar-forced-color-outline-style: none; } :host(:state(-docked):not([contained])[open]) .view, :host(:state(-docked)[contained]) .results { border: 1px solid CanvasText; } :host(:not([contained])[open]) .results { border-top-color: CanvasText; } }`;var ke,xe,Ee,Me,_e,Le,Se,ze,We,Ce;let Te=class extends(m(u(n),"clear")){constructor(){super(...arguments),ke.add(this),xe.set(this,void 0),Ee.set(this,()=>e(this,ke,"m",We).call(this)),this.clearable=!1,this.clearLabel="Clear"}clear(){e(this,xe,"f")&&(e(this,xe,"f").value="",e(this,ke,"m",We).call(this),this.dispatchEvent(new Event("clear",{bubbles:!0,composed:!0})))}render(){return a`<div class="base" @click="${e(this,ke,"m",_e)}"><slot name="leading" @slotchange="${e(this,ke,"m",Le)}"></slot><slot name="input" @slotchange="${e(this,ke,"m",ze)}"></slot>${e(this,ke,"m",Me).call(this)}<slot name="trailing" @slotchange="${e(this,ke,"m",Se)}"></slot></div>`}};var qe,Be,He,Pe,Xe,Ze,je,Ie,Ke,Fe,Re,Ye,De,Ue,Ve,Ae,Ge,Je,Ne,Oe,Qe,et,tt,ot,it,st,nt,at,rt,lt,ct;xe=new WeakMap,Ee=new WeakMap,ke=new WeakSet,Me=function(){return this.clearable?a`<div class="clear"><m3e-icon-button aria-label="${this.clearLabel}" @click="${e(this,ke,"m",Ce)}"><slot name="clear-icon"><svg class="clear-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></slot></m3e-icon-button></div>`:r},_e=function(){this.matches(":focus-within")||e(this,xe,"f")?.focus()},Le=function(e){v(this,"-with-leading",g(e.target))},Se=function(e){v(this,"-with-trailing",g(e.target))},ze=function(o){const i=o.target.assignedElements({flatten:!0}).find(e=>e instanceof HTMLInputElement);i!=e(this,xe,"f")&&(e(this,xe,"f")?.removeEventListener("input",e(this,Ee,"f")),t(this,xe,i,"f"),e(this,xe,"f")?.addEventListener("input",e(this,Ee,"f")),e(this,xe,"f")&&(e(this,xe,"f").role=e(this,xe,"f").role||"searchbox",e(this,xe,"f").inputMode=e(this,xe,"f").inputMode||"search",e(this,xe,"f").type="text"),e(this,ke,"m",We).call(this))},We=function(){v(this,"-clearable",this.clearable&&(e(this,xe,"f")?.value??"").length>0)},Ce=function(){this.clear(),e(this,xe,"f")?.focus()},f(O),Te.styles=Q,o([c({type:Boolean,reflect:!0})],Te.prototype,"clearable",void 0),o([c({attribute:"clear-label"})],Te.prototype,"clearLabel",void 0),Te=o([b("m3e-search-bar")],Te);let ht=class extends(m(u(n),"clear","query")){constructor(){super(),qe.add(this),Be.set(this,void 0),He.set(this,!1),Pe.set(this,()=>e(this,qe,"m",Je).call(this)),Xe.set(this,()=>e(this,qe,"m",Qe).call(this)),Ze.set(this,t=>e(this,qe,"m",it).call(this,t)),je.set(this,()=>e(this,qe,"m",ot).call(this)),Ie.set(this,new w(this)),Ke.set(this,new $(this)),this._clearable=!1,Fe.set(this,void 0),Re.set(this,void 0),Ye.set(this,void 0),this.contained=!1,this.mode="docked",this.open=!1,this.clearLabel="Clear",this.closeLabel="Close",this.hideSearchIcon=!1,new y(this,{callback:e=>this._handleFocusChange(e)})}get currentMode(){return this._mode??("fullscreen"!==this.mode?"docked":"fullscreen")}set currentMode(e){this._mode=e}clear(){e(this,Be,"f")&&(e(this,Be,"f").value="",e(this,qe,"m",Oe).call(this),this.dispatchEvent(new CustomEvent("query",{detail:{term:""},bubbles:!0,composed:!0})),this.dispatchEvent(new Event("clear",{bubbles:!0,composed:!0})))}willUpdate(o){if(super.willUpdate(o),o.has("mode")){e(this,Ye,"f")?.call(this);const i=o.get("mode");i&&i!==this.mode&&this.open&&(this.open=!1),"auto"===this.mode?t(this,Ye,L.observe([S.XSmall],t=>{const o=this.currentMode;this._mode=t.get(S.XSmall)?"fullscreen":"docked",o!==this._mode&&this.open&&(this.open=!1),e(this,qe,"m",Ne).call(this)}),"f"):(this._mode=void 0,e(this,qe,"m",Ne).call(this))}o.has("_mode")&&e(this,qe,"m",Ne).call(this)}updated(t){super.updated(t),t.has("open")&&(this.open?"fullscreen"===this.currentMode?e(this,qe,"m",lt).call(this):e(this,qe,"m",nt).call(this):"fullscreen"===(e(this,Fe,"f")??this.currentMode)?e(this,qe,"m",ct).call(this):e(this,qe,"m",at).call(this))}render(){return a`<div class="base"><div class="anchor"></div><div role="${E(this.open?"dialog":void 0)}" aria-modal="${E(this.open?"true":void 0)}" aria-labelledby="${E(this.open?"header":void 0)}" class="view" tabindex="-1" @keydown="${e(this,qe,"m",st)}"><m3e-focus-trap ?disabled="${!this.open}"><div class="header" id="header"><m3e-search-bar class="bar">${e(this,qe,"m",De).call(this)} ${this.open?a`<slot name="open-leading" slot="leading"></slot>`:a`<slot name="closed-leading" slot="leading"></slot>`}<slot name="input" slot="input" @slotchange="${e(this,qe,"m",Ge)}"></slot>${e(this,qe,"m",Ae).call(this)} ${this.open?a`<slot name="open-trailing" slot="trailing"></slot>`:a`<slot name="closed-trailing" slot="trailing"></slot>`}</m3e-search-bar></div><div class="results"><div class="scroll-container"><slot></slot></div></div></m3e-focus-trap></div></div>`}_handleFocusChange(e){e||"docked"!==this.currentMode||(this.clear(),this.open=!1)}};Be=new WeakMap,He=new WeakMap,Pe=new WeakMap,Xe=new WeakMap,Ze=new WeakMap,je=new WeakMap,Ie=new WeakMap,Ke=new WeakMap,Fe=new WeakMap,Re=new WeakMap,Ye=new WeakMap,qe=new WeakSet,De=function(){return!this.open&&this.hideSearchIcon?r:a`<div class="icon" slot="leading">${this.open?e(this,qe,"m",Ve).call(this):e(this,qe,"m",Ue).call(this)}</div>`},Ue=function(){return a`<slot name="search-icon"><svg class="search-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg></slot>`},Ve=function(){return a`<m3e-icon-button class="close" slot="leading" aria-label="${this.closeLabel}" @click="${e(this,qe,"m",et)}"><slot name="close-icon"><svg class="close-icon" viewBox="0 -960 960 960" fill="currentColor">${"docked"===this.currentMode?l`<path d="m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z"/>`:l`<path d="M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"/>`}</svg></slot></m3e-icon-button>`},Ae=function(){return a`<m3e-icon-button class="clear" slot="trailing" aria-label="${this.open&&!this._clearable?this.closeLabel:this.clearLabel}" @click="${e(this,qe,"m",tt)}"><slot name="clear-icon"><svg class="clear-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></slot></m3e-icon-button>`},Ge=function(o){const i=o.target.assignedElements({flatten:!0}).find(e=>e instanceof HTMLInputElement);i!=e(this,Be,"f")&&(e(this,Be,"f")?.removeEventListener("input",e(this,Pe,"f")),e(this,Be,"f")?.removeEventListener("focus",e(this,Xe,"f")),e(this,Be,"f")?.removeEventListener("keydown",e(this,Ze,"f")),e(this,Be,"f")?.removeEventListener("pointerdown",e(this,je,"f")),t(this,Be,i,"f"),e(this,Be,"f")?.addEventListener("input",e(this,Pe,"f")),e(this,Be,"f")?.addEventListener("focus",e(this,Xe,"f")),e(this,Be,"f")?.addEventListener("keydown",e(this,Ze,"f")),e(this,Be,"f")?.addEventListener("pointerdown",e(this,je,"f")),e(this,Be,"f")&&(e(this,Be,"f").role=e(this,Be,"f").role||"searchbox",e(this,Be,"f").inputMode=e(this,Be,"f").inputMode||"search",e(this,Be,"f").type="text",e(this,Be,"f").ariaHasPopup="dialog"),e(this,qe,"m",Oe).call(this))},Je=function(){e(this,qe,"m",Oe).call(this),this.open?this.dispatchEvent(new CustomEvent("query",{detail:{term:e(this,Be,"f")?.value??""},bubbles:!0,composed:!0})):this.open=!0},Ne=function(){v(this,"-fullscreen","fullscreen"===this.currentMode),v(this,"-docked","docked"===this.currentMode)},Oe=function(){this._clearable=(e(this,Be,"f")?.value??"").length>0,v(this,"-clearable",this._clearable)},Qe=function(){this.open=!e(this,He,"f"),t(this,He,!1,"f")},et=function(){e(this,Be,"f")&&(e(this,Be,"f").value&&this.clear(),t(this,He,!0,"f"),e(this,Be,"f")?.focus())},tt=function(){e(this,Be,"f")&&(e(this,Be,"f").value?this.clear():t(this,He,!0,"f"),e(this,Be,"f")?.focus())},ot=function(){!this.open&&e(this,Be,"f")?.matches(":focus")&&(this.open=!0)},it=function(e){if(this.open&&"Escape"===e.key&&!e.shiftKey&&!e.ctrlKey){e.preventDefault();e.target.value&&this.clear(),this.open=!1}},st=function(t){!this.open||"Escape"!==t.key||t.shiftKey||t.ctrlKey||(t.preventDefault(),e(this,qe,"m",et).call(this))},nt=async function(){if(!this.dispatchEvent(new ToggleEvent("beforetoggle",{oldState:"closed",newState:"open",bubbles:!0,composed:!0,cancelable:!0})))return void(this.open=!1);t(this,Fe,this.currentMode,"f");const o=this._view;e(this,Re,"f")?.call(this),t(this,Re,await M(o,this._anchor,{position:"bottom"},(e,t)=>{const o=this._view;o.style.top=t-this._anchor.clientHeight+"px",o.style.width=`${this._anchor.clientWidth}px`,"rtl"===_.current?(o.style.right=window.innerWidth-e-this.clientWidth+"px",o.style.left=""):(o.style.left=`${e}px`,o.style.right="")}),"f"),this._anchor.style.position="relative",o.popover="manual",o.style.position="absolute",o.showPopover(),e(this,Ie,"f").lock(),e(this,Ke,"f").lock(),this.dispatchEvent(new ToggleEvent("toggle",{oldState:"closed",newState:"open",bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("query",{detail:{term:e(this,Be,"f")?.value??""},bubbles:!0,composed:!0}))},at=function(){const o=this._view;"manual"===o.popover&&(this.dispatchEvent(new ToggleEvent("beforetoggle",{oldState:"open",newState:"closed",bubbles:!0,composed:!0,cancelable:!0}))?(t(this,Fe,void 0,"f"),e(this,Ie,"f").unlock(),e(this,Ke,"f").unlock(),k()?e(this,qe,"m",rt).call(this):(o.classList.add("closing"),o.addEventListener("transitionend",()=>e(this,qe,"m",rt).call(this),{once:!0}))):this.open=!0)},rt=function(){e(this,Re,"f")?.call(this),t(this,Re,void 0,"f");const o=this._view;o.classList.remove("closing"),o.style.position="",o.style.width="",o.style.top="",o.style.left="",o.style.right="",o.hidePopover(),o.popover=null,this._anchor.style.position="",this.dispatchEvent(new ToggleEvent("toggle",{oldState:"open",newState:"closed",bubbles:!0,composed:!0}))},lt=async function(){if(!this.dispatchEvent(new ToggleEvent("beforetoggle",{oldState:"closed",newState:"open",bubbles:!0,composed:!0,cancelable:!0})))return void(this.open=!1);t(this,Fe,this.currentMode,"f"),e(this,Ie,"f").lock(),e(this,Ke,"f").lock();const o=this._view;if(e(this,Re,"f")?.call(this),k())o.style.position="fixed",o.popover="manual",o.showPopover(),this._anchor.style.position="relative";else{const e=o.getBoundingClientRect(),t="rtl"===_.current?window.innerWidth-e.right:e.left;o.style.position="fixed",o.popover="manual",o.showPopover(),this._anchor.style.position="relative",o.animate([{transform:`translateX(${t}px)`,width:`${e.width}px`,top:`${e.top}px`,height:`${e.height}px`},{transform:"translateX(0px)",width:"100vw",top:"0px",height:"100vh"}],{duration:150,easing:"cubic-bezier(0.2, 0.0, 0, 1.0)"})}this.dispatchEvent(new ToggleEvent("toggle",{oldState:"closed",newState:"open",bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("query",{detail:{term:e(this,Be,"f")?.value??""},bubbles:!0,composed:!0}))},ct=async function(){const o=this._view;if("manual"!==o.popover)return;if(!this.dispatchEvent(new ToggleEvent("beforetoggle",{oldState:"open",newState:"closed",bubbles:!0,composed:!0,cancelable:!0})))return void(this.open=!0);t(this,Fe,void 0,"f"),e(this,Ie,"f").unlock(),e(this,Ke,"f").unlock();const i=this._anchor;if(!k()){const e=o.getBoundingClientRect(),t=i.getBoundingClientRect(),s="rtl"===_.current?window.innerWidth-e.right:e.left,n="rtl"===_.current?window.innerWidth-t.right:t.left,a="rtl"===_.current?s-n:n-s;o.classList.add("closing"),await o.animate([{transform:"translateX(0px)",width:`${e.width}px`,top:`${e.top}px`,height:`${e.height}px`},{transform:`translateX(${a}px)`,width:`${t.width}px`,top:`${t.top}px`,height:`${t.height}px`}],{duration:150,easing:"cubic-bezier(0.2, 0.0, 0, 1.0)"}).finished}o.hidePopover(),o.style.position="",o.popover=null,o.classList.remove("closing"),i.style.position="",this.dispatchEvent(new ToggleEvent("toggle",{oldState:"open",newState:"closed",bubbles:!0,composed:!0}))},f($e),ht.styles=ye,o([h()],ht.prototype,"_clearable",void 0),o([h()],ht.prototype,"_mode",void 0),o([d(".anchor")],ht.prototype,"_anchor",void 0),o([d(".view")],ht.prototype,"_view",void 0),o([c({type:Boolean,reflect:!0})],ht.prototype,"contained",void 0),o([c({reflect:!0})],ht.prototype,"mode",void 0),o([c({type:Boolean,reflect:!0})],ht.prototype,"open",void 0),o([c({attribute:"clear-label"})],ht.prototype,"clearLabel",void 0),o([c({attribute:"close-label"})],ht.prototype,"closeLabel",void 0),o([c({attribute:"hide-search-icon",type:Boolean})],ht.prototype,"hideSearchIcon",void 0),o([x(40)],ht.prototype,"_handleFocusChange",null),ht=o([b("m3e-search-view")],ht);export{Te as M3eSearchBarElement,ht as M3eSearchViewElement};
|
|
7
|
+
//# sourceMappingURL=search.min.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"search.min.js","sources":["../../src/search/styles/SearchBarToken.ts","../../src/search/styles/SearchBarStyle.ts","../../src/search/styles/SearchViewToken.ts","../../src/search/styles/SearchViewStyle.ts","../../src/search/SearchBarElement.ts","../../src/search/SearchViewElement.ts"],"sourcesContent":["import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/** @internal */\r\nexport const SearchBarToken = {\r\n containerColor: unsafeCSS(`var(--m3e-search-bar-container-color, ${DesignToken.color.surfaceContainerHigh})`),\r\n leadingIconColor: unsafeCSS(`var(--m3e-search-bar-leading-icon-color, ${DesignToken.color.onSurface})`),\r\n trailingIconColor: unsafeCSS(`var(--m3e-search-bar-trailing-icon-color, ${DesignToken.color.onSurfaceVariant})`),\r\n containerHeight: unsafeCSS(\"var(--m3e-search-bar-container-height, 3.5rem)\"),\r\n containerShape: unsafeCSS(`var(--m3e-search-bar-container-shape, ${DesignToken.shape.corner.full})`),\r\n iconSize: unsafeCSS(\"var(--m3e-search-bar-icon-size, 1.5rem)\"),\r\n supportingTextColor: unsafeCSS(`var(--m3e-search-bar-supporting-text-color, ${DesignToken.color.onSurfaceVariant})`),\r\n supportingTextFontSize: unsafeCSS(\r\n `var(--m3e-search-bar-supporting-text-font-size, ${DesignToken.typescale.standard.body.large.fontSize})`,\r\n ),\r\n supportingTextFontWeight: unsafeCSS(\r\n `var(--m3e-search-bar-supporting-text-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight})`,\r\n ),\r\n supportingTextLineHeight: unsafeCSS(\r\n `var(--m3e-search-bar-supporting-text-line-height, ${DesignToken.typescale.standard.body.large.lineHeight})`,\r\n ),\r\n supportingTextTracking: unsafeCSS(\r\n `var(--m3e-search-bar-supporting-text-tracking, ${DesignToken.typescale.standard.body.large.tracking})`,\r\n ),\r\n inputColor: unsafeCSS(`var(--m3e-search-bar-input-color, ${DesignToken.color.onSurface})`),\r\n inputTextFontSize: unsafeCSS(\r\n `var(--m3e-search-bar-input-text-font-size, ${DesignToken.typescale.standard.body.large.fontSize})`,\r\n ),\r\n inputTextFontWeight: unsafeCSS(\r\n `var(--m3e-search-bar-input-text-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight})`,\r\n ),\r\n inputTextLineHeight: unsafeCSS(\r\n `var(--m3e-search-bar-input-text-line-height, ${DesignToken.typescale.standard.body.large.lineHeight})`,\r\n ),\r\n inputTextTracking: unsafeCSS(\r\n `var(--m3e-search-bar-input-text-tracking, ${DesignToken.typescale.standard.body.large.tracking})`,\r\n ),\r\n leadingSpace: unsafeCSS(\"var(--m3e-search-bar-leading-space, 0.25rem)\"),\r\n trailingSpace: unsafeCSS(\"var(--m3e-search-bar-trailing-space, 0.25rem)\"),\r\n noActionsLeadingSpace: unsafeCSS(\"var(--m3e-search-bar-no-actions-leading-space, 1rem)\"),\r\n noActionsTrailingSpace: unsafeCSS(\"var(--m3e-search-bar-no-actions-trailing-space, 1rem)\"),\r\n leadingActionsTrailingSpace: unsafeCSS(\"var(--m3e-search-bar-leading-actions-trailing-space, 0.25rem)\"),\r\n trailingActionsLeadingSpace: unsafeCSS(\"var(--m3e-search-bar-trailing-actions-leading-space, 0.25rem)\"),\r\n actionsGap: unsafeCSS(\"var(--m3e-search-bar-actions-gap, 0px)\"),\r\n} as const;\r\n","import { css, CSSResultGroup } from \"lit\";\r\n\r\nimport { SearchBarToken } from \"./SearchBarToken\";\r\n\r\n/**\r\n * Light DOM styles for `M3eSearchBarElement`.\r\n * @internal\r\n */\r\nexport const SearchBarLightDomStyle = css`\r\n m3e-search-bar input[slot=\"input\"]::placeholder {\r\n user-select: none;\r\n color: ${SearchBarToken.supportingTextColor};\r\n font-size: ${SearchBarToken.supportingTextFontSize};\r\n font-weight: ${SearchBarToken.supportingTextFontWeight};\r\n line-height: ${SearchBarToken.supportingTextLineHeight};\r\n letter-spacing: ${SearchBarToken.supportingTextTracking};\r\n }\r\n`;\r\n\r\n/**\r\n * Styles for `M3eSearchBarElement`.\r\n * @internal\r\n */\r\nexport const SearchBarStyle: CSSResultGroup = css`\r\n :host {\r\n display: block;\r\n height: ${SearchBarToken.containerHeight};\r\n }\r\n .base {\r\n cursor: text;\r\n display: flex;\r\n align-items: center;\r\n box-sizing: border-box;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: ${SearchBarToken.containerShape};\r\n background-color: ${SearchBarToken.containerColor};\r\n }\r\n .clear {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n min-width: 3rem;\r\n }\r\n :host(:not(:state(-clearable))) .clear {\r\n display: none;\r\n }\r\n :host(:state(-with-leading)) slot[name=\"leading\"],\r\n :host(:state(-with-trailing)) slot[name=\"trailing\"] {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n min-width: 3rem;\r\n padding-inline: 0.25rem;\r\n column-gap: calc(0.5rem + ${SearchBarToken.actionsGap});\r\n }\r\n ::slotted([slot=\"input\"]) {\r\n flex: 1 1 auto;\r\n outline: unset;\r\n border: unset;\r\n background-color: transparent;\r\n box-shadow: none;\r\n min-width: 0;\r\n padding: unset;\r\n color: ${SearchBarToken.inputColor};\r\n font-size: ${SearchBarToken.inputTextFontSize};\r\n font-weight: ${SearchBarToken.inputTextFontWeight};\r\n line-height: ${SearchBarToken.inputTextLineHeight};\r\n letter-spacing: ${SearchBarToken.inputTextTracking};\r\n }\r\n :host(:state(-with-leading)) .base {\r\n padding-inline-start: ${SearchBarToken.leadingSpace};\r\n }\r\n :host(:not(:state(-with-leading))) .base {\r\n padding-inline-start: ${SearchBarToken.noActionsLeadingSpace};\r\n }\r\n :host(:is(:state(-with-trailing), :state(-clearable))) .base {\r\n padding-inline-end: ${SearchBarToken.trailingSpace};\r\n }\r\n :host(:not(:is(:state(-with-trailing), :state(-clearable)))) .base {\r\n padding-inline-end: ${SearchBarToken.noActionsTrailingSpace};\r\n }\r\n :host(:state(-with-leading)) ::slotted([slot=\"input\"]) {\r\n margin-inline-start: ${SearchBarToken.leadingActionsTrailingSpace};\r\n }\r\n :host(:is(:state(-with-trailing), :state(-clearable))) ::slotted([slot=\"input\"]) {\r\n margin-inline-end: ${SearchBarToken.trailingActionsLeadingSpace};\r\n }\r\n slot[name=\"leading\"] {\r\n color: ${SearchBarToken.leadingIconColor};\r\n --m3e-icon-color: ${SearchBarToken.leadingIconColor};\r\n --m3e-icon-button-icon-color: ${SearchBarToken.leadingIconColor};\r\n --m3e-icon-size: ${SearchBarToken.iconSize};\r\n }\r\n slot[name=\"trailing\"],\r\n .clear {\r\n color: ${SearchBarToken.trailingIconColor};\r\n --m3e-icon-color: ${SearchBarToken.trailingIconColor};\r\n --m3e-icon-button-icon-color: ${SearchBarToken.trailingIconColor};\r\n --m3e-icon-size: ${SearchBarToken.iconSize};\r\n }\r\n ::slotted(svg[slot=\"leading\"]),\r\n ::slotted(svg[slot=\"trailing\"]) {\r\n width: 1em;\r\n font-size: ${SearchBarToken.iconSize};\r\n }\r\n ::slotted([slot=\"clear-icon\"]),\r\n .clear-icon {\r\n width: 1em;\r\n font-size: ${SearchBarToken.iconSize} !important;\r\n }\r\n slot[name=\"clear-icon\"] {\r\n --m3e-icon-size: ${SearchBarToken.iconSize};\r\n }\r\n @media (forced-colors: active) {\r\n .base {\r\n border: 1px var(--_search-bar-forced-color-outline-style, solid) CanvasText;\r\n }\r\n }\r\n`;\r\n","import { unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\n/** @internal */\r\nexport const SearchViewToken = {\r\n containerColor: unsafeCSS(`var(--m3e-search-view-container-color, ${DesignToken.color.surfaceContainerHigh})`),\r\n containedContainerColor: unsafeCSS(\r\n `var(--m3e-search-view-contained-container-color, ${DesignToken.color.surfaceContainerLow})`,\r\n ),\r\n dividerColor: unsafeCSS(`var(--m3e-search-view-divider-color, ${DesignToken.color.outline})`),\r\n dividerThickness: unsafeCSS(`var(--m3e-search-view-divider-thickness, 1px)`),\r\n fullScreenContainerShape: unsafeCSS(\r\n `var(--m3e-search-view-full-screen-container-shape, ${DesignToken.shape.corner.none})`,\r\n ),\r\n fullScreenHeaderContainerHeight: unsafeCSS(\"var(--m3e-search-view-full-screen-header-container-height, 4.5rem)\"),\r\n dockedContainerShape: unsafeCSS(\r\n `var(--m3e-search-view-docked-container-shape, ${DesignToken.shape.corner.extraLarge})`,\r\n ),\r\n dockedHeaderContainerHeight: unsafeCSS(\"var(--m3e-search-view-docked-header-container-height, 3.5rem)\"),\r\n containedLeadingMargin: unsafeCSS(\"var(--m3e-search-view-contained-leading-margin, 1.5rem)\"),\r\n containedTrailingMargin: unsafeCSS(\"var(--m3e-search-view-contained-trailing-margin, 1.55rem)\"),\r\n containedFocusedLeadingMargin: unsafeCSS(\"var(--m3e-search-view-contained-focused-leading-margin, 0.75rem)\"),\r\n containedFocusedTrailingMargin: unsafeCSS(\"var(--m3e-search-view-contained-focused-trailing-margin, 0.75rem)\"),\r\n containedDockedBarResultsGap: unsafeCSS(\"var(--m3e-search-view-contained-docked-bar-results-gap, 2px)\"),\r\n containedDockedResultsShape: unsafeCSS(\r\n `var(--m3e-search-view-contained-docked-results-shape, ${DesignToken.shape.corner.medium})`,\r\n ),\r\n containedDockedBarShape: unsafeCSS(\r\n `var(--m3e-search-view-contained-docked-bar-shape, ${DesignToken.shape.corner.full})`,\r\n ),\r\n containedFullScreenBarContainerHeight: unsafeCSS(\r\n \"var(--m3e-search-view-contained-full-screen-bar-container-height, 3.5rem)\",\r\n ),\r\n dockedContainerMinHeight: unsafeCSS(\"var(--m3e-search-view-docked-container-min-height, 240px)\"),\r\n dockedContainerMaxHeight: unsafeCSS(\"var(--m3e-search-view-docked-container-max-height, calc(100vh * 0.6667))\"),\r\n containedDockedResultsSpace: unsafeCSS(\"var(--m3e-search-view-contained-docked-results-space, 0.25rem)\"),\r\n dockedResultsBottomSpace: unsafeCSS(\"var(--m3e-search-view-docked-results-bottom-space, 1rem)\"),\r\n dockedScrimColor: unsafeCSS(`var(--m3e-search-view-docked-scrim-color, ${DesignToken.color.scrim})`),\r\n dockedScrimOpacity: unsafeCSS(\"var(--m3e-search-view-docked-scrim-opacity, 32%)\"),\r\n} as const;\r\n","import { css, CSSResultGroup, unsafeCSS } from \"lit\";\r\n\r\nimport { DesignToken } from \"@m3e/web/core\";\r\n\r\nimport { SearchViewToken } from \"./SearchViewToken\";\r\nimport { SearchBarToken } from \"./SearchBarToken\";\r\n\r\n/**\r\n * Light DOM styles for `M3eSearchViewElement`.\r\n * @internal\r\n */\r\nexport const SearchViewLightDomStyle = css`\r\n m3e-search-view input[slot=\"input\"]::placeholder {\r\n user-select: none;\r\n color: ${SearchBarToken.supportingTextColor};\r\n font-size: ${SearchBarToken.supportingTextFontSize};\r\n font-weight: ${SearchBarToken.supportingTextFontWeight};\r\n line-height: ${SearchBarToken.supportingTextLineHeight};\r\n letter-spacing: ${SearchBarToken.supportingTextTracking};\r\n }\r\n`;\r\n\r\n/**\r\n * Styles for `M3eSearchViewElement`.\r\n * @internal\r\n */\r\nexport const SearchViewStyle: CSSResultGroup = css`\r\n :host {\r\n display: block;\r\n }\r\n .base {\r\n position: relative;\r\n width: 100%;\r\n }\r\n .anchor {\r\n position: absolute;\r\n width: 100%;\r\n visibility: hidden;\r\n }\r\n .view {\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n width: 100%;\r\n outline: none;\r\n padding: unset;\r\n margin: unset;\r\n border: unset;\r\n }\r\n .header {\r\n flex: none;\r\n display: flex;\r\n align-items: center;\r\n }\r\n .bar {\r\n flex: 1 1 auto;\r\n }\r\n :host(:state(-fullscreen)) .bar {\r\n transition: ${unsafeCSS(`margin ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard}`)};\r\n }\r\n :host(:state(-fullscreen)[contained]:not([open])) .bar {\r\n margin-inline-start: ${SearchViewToken.containedLeadingMargin};\r\n margin-inline-end: ${SearchViewToken.containedTrailingMargin};\r\n }\r\n :host(:state(-fullscreen)[contained][open]) .bar,\r\n :host(:state(-fullscreen)[contained][open]) .results {\r\n margin-inline-start: ${SearchViewToken.containedFocusedLeadingMargin};\r\n margin-inline-end: ${SearchViewToken.containedFocusedTrailingMargin};\r\n }\r\n .icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n min-width: 3rem;\r\n }\r\n ::slotted([slot=\"search-icon\"]),\r\n .search-icon,\r\n ::slotted([slot=\"close-icon\"]),\r\n .close-icon {\r\n width: 1em;\r\n font-size: ${SearchBarToken.iconSize} !important;\r\n }\r\n .results {\r\n overflow: hidden;\r\n flex: 1 1 auto;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n .scroll-container {\r\n flex: 1 1 auto;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n scrollbar-color: ${DesignToken.scrollbar.color};\r\n }\r\n .view:not(:popover-open) .results,\r\n .view.closing .results {\r\n display: none;\r\n }\r\n :host(:not(:is(:state(-clearable), [open]))) .clear {\r\n display: none;\r\n }\r\n ::slotted([slot=\"clear-icon\"]),\r\n .clear-icon {\r\n width: 1em;\r\n font-size: ${SearchBarToken.iconSize} !important;\r\n }\r\n slot[name=\"clear-icon\"] {\r\n --m3e-icon-size: ${SearchBarToken.iconSize};\r\n }\r\n :host(:state(-fullscreen)) .header {\r\n transition: height 150ms cubic-bezier(0.2, 0, 0, 1);\r\n }\r\n :host(:state(-fullscreen)) .view:popover-open:not(.closing) .header {\r\n height: ${SearchViewToken.fullScreenHeaderContainerHeight};\r\n }\r\n :host(:state(-fullscreen):not([open])) .header,\r\n :host(:state(-fullscreen)[open]) .view.closing .header {\r\n height: ${SearchViewToken.containedFullScreenBarContainerHeight};\r\n }\r\n :host(:state(-fullscreen)[open]) .bar {\r\n --m3e-search-bar-container-height: ${SearchViewToken.containedFullScreenBarContainerHeight};\r\n }\r\n :host(:state(-fullscreen)) .anchor {\r\n height: ${SearchViewToken.containedFullScreenBarContainerHeight};\r\n }\r\n :host(:state(-fullscreen)) .view:popover-open {\r\n border-radius: ${SearchViewToken.fullScreenContainerShape};\r\n }\r\n :host(:state(-fullscreen)[contained]) .view:popover-open {\r\n background-color: ${SearchViewToken.containedContainerColor};\r\n }\r\n :host(:state(-fullscreen):not([contained])) .view:popover-open {\r\n background-color: ${SearchViewToken.containerColor};\r\n }\r\n :host(:state(-docked)[open]) .header,\r\n :host(:state(-docked)) .anchor {\r\n height: ${SearchViewToken.dockedHeaderContainerHeight};\r\n }\r\n :host(:not([contained])[open]) .results {\r\n border-top-width: ${SearchViewToken.dividerThickness};\r\n border-top-style: solid;\r\n border-top-color: ${SearchViewToken.dividerColor};\r\n }\r\n :host(:state(-docked)[contained]) .results {\r\n margin-top: ${SearchViewToken.containedDockedBarResultsGap};\r\n }\r\n :host(:state(-docked):not([contained])[open]) .view {\r\n background-color: ${SearchViewToken.containerColor};\r\n --m3e-search-bar-container-color: ${SearchViewToken.containerColor};\r\n }\r\n :host(:state(-docked)[contained]) .results {\r\n background-color: ${SearchViewToken.containerColor};\r\n }\r\n :host(:state(-docked):not([contained])[open]) .view,\r\n :host(:state(-docked)[contained]) .results {\r\n border-radius: ${SearchViewToken.dockedContainerShape};\r\n }\r\n :host(:state(-docked)) .results {\r\n min-height: calc(${SearchViewToken.dockedContainerMinHeight} - ${SearchViewToken.dockedHeaderContainerHeight});\r\n max-height: calc(${SearchViewToken.dockedContainerMaxHeight} - ${SearchViewToken.dockedHeaderContainerHeight});\r\n }\r\n :host(:state(-docked)) .scroll-container {\r\n scrollbar-width: ${DesignToken.scrollbar.thinWidth};\r\n }\r\n :host(:state(-docked):not([contained])) .scroll-container {\r\n padding-bottom: ${SearchViewToken.dockedResultsBottomSpace};\r\n }\r\n :host(:state(-docked)[contained]) .scroll-container {\r\n padding: ${SearchViewToken.containedDockedResultsSpace};\r\n }\r\n :host(:state(-docked)) .results {\r\n transform-origin: top;\r\n transition: ${unsafeCSS(\r\n `transform ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard},\r\n overlay ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n display ${DesignToken.motion.duration.short2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n )};\r\n }\r\n :host(:state(-docked):not([open])) .results {\r\n transform: scaleY(0.8);\r\n }\r\n :host(:state(-docked)[open]) .results {\r\n transform: scaleY(1);\r\n }\r\n @starting-style {\r\n :host(:state(-docked)[open]) .results {\r\n transform: scaleY(0.8);\r\n }\r\n }\r\n :host(:state(-docked)[contained]) .view {\r\n background-color: transparent;\r\n }\r\n :host(:state(-docked):not([open])) .view {\r\n transition: ${unsafeCSS(\r\n `border-radius ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard},\r\n background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}`,\r\n )};\r\n }\r\n :host(:state(-docked):not([open])) .view::backdrop {\r\n transition: ${unsafeCSS(\r\n `background-color ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard}, \r\n overlay ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete,\r\n visibility ${DesignToken.motion.duration.short3} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n )};\r\n }\r\n :host(:state(-docked)) .view::backdrop {\r\n background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent);\r\n margin-inline-end: -20px;\r\n }\r\n :host(:state(-docked)[open]) .view::backdrop {\r\n background-color: color-mix(\r\n in srgb,\r\n ${SearchViewToken.dockedScrimColor} ${SearchViewToken.dockedScrimOpacity},\r\n transparent\r\n );\r\n transition: ${unsafeCSS(\r\n `background-color ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard}, \r\n overlay ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete,\r\n visibility ${DesignToken.motion.duration.long2} ${DesignToken.motion.easing.standard} allow-discrete`,\r\n )};\r\n }\r\n @starting-style {\r\n :host(:state(-docked)[open]) .view::backdrop {\r\n background-color: color-mix(in srgb, ${SearchViewToken.dockedScrimColor} 0%, transparent);\r\n }\r\n }\r\n :host(:state(-fullscreen)) .view:popover-open {\r\n width: 100vw;\r\n width: 100dvw;\r\n height: 100vh;\r\n height: 100dvh;\r\n overflow: hidden;\r\n }\r\n @media (prefers-reduced-motion) {\r\n :host(:state(-fullscreen)) .bar,\r\n :host(:state(-fullscreen)) .header,\r\n :host(:state(-docked)) .results,\r\n :host(:state(-docked):not([open])) .view,\r\n :host(:state(-docked):not([open])) .view::backdrop,\r\n :host(:state(-docked)[open]) .view::backdrop {\r\n transition: none;\r\n }\r\n }\r\n @media (forced-colors: active) {\r\n :host(:not([contained])[open]) .bar {\r\n --_search-bar-forced-color-outline-style: none;\r\n }\r\n :host(:state(-docked):not([contained])[open]) .view,\r\n :host(:state(-docked)[contained]) .results {\r\n border: 1px solid CanvasText;\r\n }\r\n :host(:not([contained])[open]) .results {\r\n border-top-color: CanvasText;\r\n }\r\n }\r\n`;\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { html, LitElement, nothing } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n AttachInternals,\r\n customElement,\r\n EventAttribute,\r\n hasAssignedNodes,\r\n registerStyleSheet,\r\n setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport \"@m3e/web/icon-button\";\r\n\r\nimport { SearchBarLightDomStyle, SearchBarStyle } from \"./styles\";\r\n\r\n/**\r\n * A bar that provides a prominent entry point for search.\r\n *\r\n * @description\r\n * The `m3e-search-bar` component provides a prominent entry point for search,\r\n * capturing user input and emitting `query` and `clear` events as the text\r\n * changes. It reflects focus and interaction states through customizable CSS\r\n * properties for container, icons, and text styling.\r\n *\r\n * @example\r\n * The following example illustrates typical usage with a leading icon and the\r\n * ability to clear the current search text.\r\n * ```html\r\n * <m3e-search-bar clearable>\r\n * <m3e-icon name=\"search\" slot=\"leading\"></m3e-icon>\r\n * <input slot=\"input\" placeholder=\"Search...\" />\r\n * </m3e-search-bar>\r\n * ```\r\n *\r\n * @tag m3e-search-bar\r\n *\r\n * @attr clearable - Whether the bar presents a button used to clear the search term.\r\n * @attr clear-label - The accessible label given to the button used to clear the search term.\r\n *\r\n * @slot leading - Renders content before the input of the bar.\r\n * @slot input - Renders the input of the bar.\r\n * @slot trailing - Renders content after the input of the bar.\r\n *\r\n * @fires clear - Dispatched when the search term is cleared.\r\n *\r\n * @cssprop --m3e-search-bar-container-color - Background color of the search bar container.\r\n * @cssprop --m3e-search-bar-leading-icon-color - Color of the leading icon.\r\n * @cssprop --m3e-search-bar-trailing-icon-color - Color of the trailing icon.\r\n * @cssprop --m3e-search-bar-container-height - Height of the search bar container.\r\n * @cssprop --m3e-search-bar-container-shape - Shape (border radius) of the search bar container.\r\n * @cssprop --m3e-search-bar-icon-size - Size of icons inside the search bar.\r\n * @cssprop --m3e-search-bar-supporting-text-color - Color of the supporting text.\r\n * @cssprop --m3e-search-bar-supporting-text-font-size - Font size of the supporting text.\r\n * @cssprop --m3e-search-bar-supporting-text-font-weight - Font weight of the supporting text.\r\n * @cssprop --m3e-search-bar-supporting-text-line-height - Line height of the supporting text.\r\n * @cssprop --m3e-search-bar-supporting-text-tracking - Letter spacing of the supporting text.\r\n * @cssprop --m3e-search-bar-input-color - Color of the input text.\r\n * @cssprop --m3e-search-bar-input-text-font-size - Font size of the input text.\r\n * @cssprop --m3e-search-bar-input-text-font-weight - Font weight of the input text.\r\n * @cssprop --m3e-search-bar-input-text-line-height - Line height of the input text.\r\n * @cssprop --m3e-search-bar-input-text-tracking - Letter spacing of the input text.\r\n * @cssprop --m3e-search-bar-leading-space - Space before the leading icon.\r\n * @cssprop --m3e-search-bar-trailing-space - Space after the trailing icon.\r\n * @cssprop --m3e-search-bar-no-actions-leading-space - Leading padding when no actions are present.\r\n * @cssprop --m3e-search-bar-no-actions-trailing-space - Trailing padding when no actions are present.\r\n * @cssprop --m3e-search-bar-leading-actions-trailing-space - Space between leading actions and the input.\r\n * @cssprop --m3e-search-bar-trailing-actions-leading-space - Space between the input and trailing actions.\r\n * @cssprop --m3e-search-bar-actions-gap - Gap between action icons.\r\n */\r\n@customElement(\"m3e-search-bar\")\r\nexport class M3eSearchBarElement extends EventAttribute(AttachInternals(LitElement), \"clear\") {\r\n static {\r\n registerStyleSheet(SearchBarLightDomStyle);\r\n }\r\n\r\n /** The styles of the element. */\r\n static override styles = SearchBarStyle;\r\n\r\n /** @private */ #input?: HTMLInputElement;\r\n /** @private */ readonly #inputInputHandler = () => this.#handleInputInput();\r\n\r\n /**\r\n * Whether the bar presents a button used to clear the search term.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) clearable = false;\r\n\r\n /**\r\n * The accessible label given to the button used to clear the search term.\r\n * @default \"Clear\"\r\n */\r\n @property({ attribute: \"clear-label\" }) clearLabel = \"Clear\";\r\n\r\n /** Clears the search term. */\r\n clear(): void {\r\n if (!this.#input) return;\r\n this.#input.value = \"\";\r\n this.#handleInputInput();\r\n\r\n this.dispatchEvent(new Event(\"clear\", { bubbles: true, composed: true }));\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`\r\n <div class=\"base\" @click=\"${this.#handleContainerClick}\">\r\n <slot name=\"leading\" @slotchange=\"${this.#handleLeadingSlotChange}\"></slot>\r\n <slot name=\"input\" @slotchange=\"${this.#handleInputSlotChange}\"></slot>\r\n ${this.#renderClearButton()}\r\n <slot name=\"trailing\" @slotchange=\"${this.#handleTrailingSlotChange}\"></slot>\r\n </div>\r\n `;\r\n }\r\n\r\n /** @private */\r\n #renderClearButton(): unknown {\r\n return this.clearable\r\n ? html`<div class=\"clear\">\r\n <m3e-icon-button aria-label=\"${this.clearLabel}\" @click=\"${this.#handleClearClick}\">\r\n <slot name=\"clear-icon\">\r\n <svg class=\"clear-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path\r\n d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\"\r\n />\r\n </svg>\r\n </slot>\r\n </m3e-icon-button>\r\n </div>`\r\n : nothing;\r\n }\r\n\r\n /** @private */\r\n #handleContainerClick(): void {\r\n if (!this.matches(\":focus-within\")) {\r\n this.#input?.focus();\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleLeadingSlotChange(e: Event): void {\r\n setCustomState(this, \"-with-leading\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n }\r\n\r\n /** @private */\r\n #handleTrailingSlotChange(e: Event): void {\r\n setCustomState(this, \"-with-trailing\", hasAssignedNodes(e.target as HTMLSlotElement));\r\n }\r\n\r\n /** @private */\r\n #handleInputSlotChange(e: Event): void {\r\n const input = (e.target as HTMLSlotElement)\r\n .assignedElements({ flatten: true })\r\n .find((x) => x instanceof HTMLInputElement);\r\n\r\n if (input != this.#input) {\r\n this.#input?.removeEventListener(\"input\", this.#inputInputHandler);\r\n this.#input = input;\r\n this.#input?.addEventListener(\"input\", this.#inputInputHandler);\r\n\r\n if (this.#input) {\r\n this.#input.role = this.#input.role || \"searchbox\";\r\n this.#input.inputMode = this.#input.inputMode || \"search\";\r\n this.#input.type = \"text\";\r\n }\r\n\r\n this.#handleInputInput();\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleInputInput(): void {\r\n setCustomState(this, \"-clearable\", this.clearable && (this.#input?.value ?? \"\").length > 0);\r\n }\r\n\r\n /** @private */\r\n #handleClearClick(): void {\r\n this.clear();\r\n this.#input?.focus();\r\n }\r\n}\r\n\r\ninterface M3eSearchBarElementEventMap extends HTMLElementEventMap {\r\n clear: Event;\r\n}\r\n\r\nexport interface M3eSearchBarElement {\r\n addEventListener<K extends keyof M3eSearchBarElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSearchBarElement, ev: M3eSearchBarElementEventMap[K]) => void,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n addEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener<K extends keyof M3eSearchBarElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSearchBarElement, ev: M3eSearchBarElementEventMap[K]) => void,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-search-bar\": M3eSearchBarElement;\r\n }\r\n}\r\n","/* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */\r\nimport { html, LitElement, nothing, PropertyValues, svg } from \"lit\";\r\nimport { property, query, state } from \"lit/decorators.js\";\r\nimport { ifDefined } from \"lit/directives/if-defined.js\";\r\n\r\nimport {\r\n AttachInternals,\r\n customElement,\r\n debounce,\r\n EventAttribute,\r\n FocusController,\r\n InertController,\r\n prefersReducedMotion,\r\n registerStyleSheet,\r\n ScrollLockController,\r\n setCustomState,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { positionAnchor } from \"@m3e/web/core/anchoring\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\nimport { Breakpoint, M3eBreakpointObserver } from \"@m3e/web/core/layout\";\r\n\r\nimport \"@m3e/web/core/a11y\";\r\n\r\nimport { SearchViewLightDomStyle, SearchViewStyle } from \"./styles\";\r\nimport { SearchViewMode } from \"./SearchViewMode\";\r\nimport { SearchViewQueryEventDetail } from \"./SearchViewQueryEventDetail\";\r\n\r\nimport \"./SearchBarElement\";\r\n\r\n/**\r\n * A surface that presents suggestions and results for a search.\r\n *\r\n * @description\r\n * The `m3e-search-view` component presents the surface for suggestions,\r\n * history, and results, managing the open and close lifecycle around an\r\n * embedded search bar. It emits `query`, `clear`, and `toggle`, events to\r\n * support application driven search logic, and exposes CSS properties for\r\n * container, shape, spacing, and layout across contained, docked, and full\r\n * screen configurations.\r\n *\r\n * @example\r\n * The following example shows a contained view in docked mode with a simple set of search results.\r\n * ```html\r\n * <m3e-search-view mode=\"docked\" contained>\r\n * <input slot=\"input\" placeholder=\"Search...\" />\r\n * <m3e-list>\r\n * <m3e-list-item>Result One</m3e-list-item>\r\n * <m3e-list-item>Result Two</m3e-list-item>\r\n * <m3e-list-item>Result Three</m3e-list-item>\r\n * </m3e-list>\r\n * </m3e-search-view>\r\n * ```\r\n *\r\n * @tag m3e-search-view\r\n *\r\n * @attr contained - Whether the view features a persistent, filled search container.\r\n * @attr mode - The behavior mode of the view.\r\n * @attr open - Whether the view is expanded to show results.\r\n * @attr clear-label - The accessible label given to the button used to clear the search term.\r\n * @attr close-label - The accessible label given to the button used to collapse the view.\r\n * @attr hide-search-icon - Whether to hide the search icon.\r\n *\r\n * @slot - When open, renders the results content of the view.\r\n * @slot input - Renders the input of the view.\r\n * @slot open-leading - When open, renders content before the input of the view.\r\n * @slot open-trailing - When open, renders content after the input of the view.\r\n * @slot closed-leading - When closed, renders content before the input of the view.\r\n * @slot closed-trailing - When closed, renders content after the input of the view.\r\n *\r\n * @fires clear - Dispatched when the search term is cleared.\r\n * @fires query - Dispatched when the view is opened or when the user modifies the search term.\r\n * @fires beforetoggle - Dispatched before the toggle state changes.\r\n * @fires toggle - Dispatched after the toggle state has changed.\r\n *\r\n * @cssprop --m3e-search-view-container-color - Background color of the view container.\r\n * @cssprop --m3e-search-view-contained-container-color - Background color of the contained view container.\r\n * @cssprop --m3e-search-view-divider-color - Color of the divider separating header and results.\r\n * @cssprop --m3e-search-view-divider-thickness - Thickness of the divider separating header and results.\r\n * @cssprop --m3e-search-view-full-screen-container-shape - Shape of the fullscreen view container.\r\n * @cssprop --m3e-search-view-full-screen-header-container-height - Height of the header container in fullscreen mode.\r\n * @cssprop --m3e-search-view-docked-container-shape - Shape of the docked view container.\r\n * @cssprop --m3e-search-view-docked-header-container-height - Height of the header container in docked mode.\r\n * @cssprop --m3e-search-view-contained-leading-margin - Leading margin for the contained view.\r\n * @cssprop --m3e-search-view-contained-trailing-margin - Trailing margin for the contained view.\r\n * @cssprop --m3e-search-view-contained-focused-leading-margin - Leading margin when the contained view is focused.\r\n * @cssprop --m3e-search-view-contained-focused-trailing-margin - Trailing margin when the contained view is focused.\r\n * @cssprop --m3e-search-view-contained-docked-bar-results-gap - Gap between the contained docked bar and results.\r\n * @cssprop --m3e-search-view-contained-docked-results-shape - Shape of the results container in contained docked mode.\r\n * @cssprop --m3e-search-view-contained-docked-bar-shape - Shape of the bar in contained docked mode.\r\n * @cssprop --m3e-search-view-contained-full-screen-bar-container-height - Height of the bar container in contained fullscreen mode.\r\n * @cssprop --m3e-search-view-docked-container-min-height - Minimum height of the docked view container.\r\n * @cssprop --m3e-search-view-docked-container-max-height - Maximum height of the docked view container.\r\n * @cssprop --m3e-search-view-contained-docked-results-space - Space above the results in contained docked mode.\r\n * @cssprop --m3e-search-view-docked-results-bottom-space - Space below the results in docked mode.\r\n * @cssprop --m3e-search-view-docked-scrim-color - Color of the scrim behind the docked view.\r\n * @cssprop --m3e-search-view-docked-scrim-opacity - Opacity of the scrim behind the docked view.\r\n */\r\n@customElement(\"m3e-search-view\")\r\nexport class M3eSearchViewElement extends EventAttribute(AttachInternals(LitElement), \"clear\", \"query\") {\r\n static {\r\n registerStyleSheet(SearchViewLightDomStyle);\r\n }\r\n\r\n /** The styles of the element. */\r\n static override styles = SearchViewStyle;\r\n\r\n /** @private */ #input?: HTMLInputElement;\r\n /** @private */ #closeOnInputFocus = false;\r\n /** @private */ readonly #inputInputHandler = () => this.#handleInputInput();\r\n /** @private */ readonly #inputFocusHandler = () => this.#handleInputFocus();\r\n /** @private */ readonly #inputKeyDownHandler = (e: KeyboardEvent) => this.#handleInputKeyDown(e);\r\n /** @private */ readonly #inputPointerHandler = () => this.#handleInputPointerDown();\r\n\r\n /** @private */ readonly #scrollLockController = new ScrollLockController(this);\r\n /** @private */ readonly #inertController = new InertController(this);\r\n\r\n /** @private */ @state() private _clearable = false;\r\n /** @private */ @state() private _mode?: Exclude<SearchViewMode, \"auto\">;\r\n /** @private */ #openMode?: Exclude<SearchViewMode, \"auto\">;\r\n\r\n /** @private */ #anchorCleanup?: () => void;\r\n /** @private */ #breakpointUnobserve?: () => void;\r\n /** @private */ @query(\".anchor\") private readonly _anchor!: HTMLElement;\r\n /** @private */ @query(\".view\") private readonly _view!: HTMLElement;\r\n\r\n constructor() {\r\n super();\r\n\r\n new FocusController(this, {\r\n callback: (focused) => this._handleFocusChange(focused),\r\n });\r\n }\r\n\r\n /**\r\n * Whether the view features a persistent, filled search container.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) contained = false;\r\n\r\n /**\r\n * The behavior mode of the view.\r\n * @default \"docked\"\r\n */\r\n @property({ reflect: true }) mode: SearchViewMode = \"docked\";\r\n\r\n /**\r\n * Whether the view is expanded to show results.\r\n * @default false\r\n */\r\n @property({ type: Boolean, reflect: true }) open = false;\r\n\r\n /**\r\n * The accessible label given to the button used to clear the search term.\r\n * @default \"Clear\"\r\n */\r\n @property({ attribute: \"clear-label\" }) clearLabel = \"Clear\";\r\n\r\n /**\r\n * The accessible label given to the button used to collapse the view.\r\n * @default \"Close\"\r\n */\r\n @property({ attribute: \"close-label\" }) closeLabel = \"Close\";\r\n\r\n /**\r\n * Whether to hide the search icon.\r\n * @default false;\r\n */\r\n @property({ attribute: \"hide-search-icon\", type: Boolean }) hideSearchIcon = false;\r\n\r\n /** The current mode applied to the view. */\r\n get currentMode(): Exclude<SearchViewMode, \"auto\"> {\r\n return this._mode ?? (this.mode !== \"fullscreen\" ? \"docked\" : \"fullscreen\");\r\n }\r\n set currentMode(value: Exclude<SearchViewMode, \"auto\">) {\r\n this._mode = value;\r\n }\r\n\r\n /** Clears the search term. */\r\n clear(): void {\r\n if (!this.#input) return;\r\n this.#input.value = \"\";\r\n this.#updateClearableState();\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<SearchViewQueryEventDetail>(\"query\", {\r\n detail: { term: \"\" },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n\r\n this.dispatchEvent(new Event(\"clear\", { bubbles: true, composed: true }));\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override willUpdate(changedProperties: PropertyValues): void {\r\n super.willUpdate(changedProperties);\r\n\r\n if (changedProperties.has(\"mode\")) {\r\n this.#breakpointUnobserve?.();\r\n\r\n const previousMode = changedProperties.get(\"mode\");\r\n if (previousMode && previousMode !== this.mode && this.open) {\r\n this.open = false;\r\n }\r\n\r\n if (this.mode === \"auto\") {\r\n this.#breakpointUnobserve = M3eBreakpointObserver.observe([Breakpoint.XSmall], (matches) => {\r\n const currentMode = this.currentMode;\r\n this._mode = matches.get(Breakpoint.XSmall) ? \"fullscreen\" : \"docked\";\r\n if (currentMode !== this._mode && this.open) {\r\n this.open = false;\r\n }\r\n this.#updateMode();\r\n });\r\n } else {\r\n this._mode = undefined;\r\n this.#updateMode();\r\n }\r\n }\r\n if (changedProperties.has(\"_mode\")) {\r\n this.#updateMode();\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override updated(_changedProperties: PropertyValues<this>): void {\r\n super.updated(_changedProperties);\r\n if (_changedProperties.has(\"open\")) {\r\n if (!this.open) {\r\n if ((this.#openMode ?? this.currentMode) === \"fullscreen\") {\r\n this.#closeFullscreen();\r\n } else {\r\n this.#closeDocked();\r\n }\r\n } else {\r\n if (this.currentMode === \"fullscreen\") {\r\n this.#openFullscreen();\r\n } else {\r\n this.#openDocked();\r\n }\r\n }\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html` <div class=\"base\">\r\n <div class=\"anchor\"></div>\r\n <div\r\n role=\"${ifDefined(this.open ? \"dialog\" : undefined)}\"\r\n aria-modal=\"${ifDefined(this.open ? \"true\" : undefined)}\"\r\n aria-labelledby=\"${ifDefined(this.open ? \"header\" : undefined)}\"\r\n class=\"view\"\r\n tabindex=\"-1\"\r\n @keydown=\"${this.#handleKeyDown}\"\r\n >\r\n <m3e-focus-trap ?disabled=\"${!this.open}\">\r\n <div class=\"header\" id=\"header\">\r\n <m3e-search-bar class=\"bar\">\r\n ${this.#renderIconOrBackButton()}\r\n ${this.open\r\n ? html`<slot name=\"open-leading\" slot=\"leading\"></slot>`\r\n : html`<slot name=\"closed-leading\" slot=\"leading\"></slot>`}\r\n <slot name=\"input\" slot=\"input\" @slotchange=\"${this.#handleInputSlotChange}\"></slot>\r\n ${this.#renderClearButton()}\r\n ${this.open\r\n ? html`<slot name=\"open-trailing\" slot=\"trailing\"></slot>`\r\n : html`<slot name=\"closed-trailing\" slot=\"trailing\"></slot>`}\r\n </m3e-search-bar>\r\n </div>\r\n <div class=\"results\">\r\n <div class=\"scroll-container\">\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </m3e-focus-trap>\r\n </div>\r\n </div>`;\r\n }\r\n\r\n /** @private */\r\n #renderIconOrBackButton(): unknown {\r\n if (!this.open && this.hideSearchIcon) return nothing;\r\n return html`<div class=\"icon\" slot=\"leading\">${this.open ? this.#renderBackButton() : this.#renderIcon()}</div>`;\r\n }\r\n\r\n /** @private */\r\n #renderIcon(): unknown {\r\n return html`<slot name=\"search-icon\">\r\n <svg class=\"search-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path\r\n d=\"M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z\"\r\n />\r\n </svg>\r\n </slot>`;\r\n }\r\n\r\n /** @private */\r\n #renderBackButton(): unknown {\r\n return html`<m3e-icon-button\r\n class=\"close\"\r\n slot=\"leading\"\r\n aria-label=\"${this.closeLabel}\"\r\n @click=\"${this.#handleCloseClick}\"\r\n >\r\n <slot name=\"close-icon\">\r\n <svg class=\"close-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n ${this.currentMode === \"docked\"\r\n ? svg`<path d=\"m313-440 224 224-57 56-320-320 320-320 57 56-224 224h487v80H313Z\"/>`\r\n : svg`<path d=\"M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z\"/>`}\r\n </svg>\r\n </slot>\r\n </m3e-icon-button>`;\r\n }\r\n\r\n /** @private */\r\n #renderClearButton(): unknown {\r\n return html`<m3e-icon-button\r\n class=\"clear\"\r\n slot=\"trailing\"\r\n aria-label=\"${this.open && !this._clearable ? this.closeLabel : this.clearLabel}\"\r\n @click=\"${this.#handleClearClick}\"\r\n >\r\n <slot name=\"clear-icon\">\r\n <svg class=\"clear-icon\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\r\n <path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\r\n </svg>\r\n </slot>\r\n </m3e-icon-button>`;\r\n }\r\n\r\n /** @private */\r\n #handleInputSlotChange(e: Event): void {\r\n const input = (e.target as HTMLSlotElement)\r\n .assignedElements({ flatten: true })\r\n .find((x) => x instanceof HTMLInputElement);\r\n\r\n if (input != this.#input) {\r\n this.#input?.removeEventListener(\"input\", this.#inputInputHandler);\r\n this.#input?.removeEventListener(\"focus\", this.#inputFocusHandler);\r\n this.#input?.removeEventListener(\"keydown\", this.#inputKeyDownHandler);\r\n this.#input?.removeEventListener(\"pointerdown\", this.#inputPointerHandler);\r\n\r\n this.#input = input;\r\n\r\n this.#input?.addEventListener(\"input\", this.#inputInputHandler);\r\n this.#input?.addEventListener(\"focus\", this.#inputFocusHandler);\r\n this.#input?.addEventListener(\"keydown\", this.#inputKeyDownHandler);\r\n this.#input?.addEventListener(\"pointerdown\", this.#inputPointerHandler);\r\n\r\n if (this.#input) {\r\n this.#input.role = this.#input.role || \"searchbox\";\r\n this.#input.inputMode = this.#input.inputMode || \"search\";\r\n this.#input.type = \"text\";\r\n this.#input.ariaHasPopup = \"dialog\";\r\n }\r\n\r\n this.#updateClearableState();\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleInputInput(): void {\r\n this.#updateClearableState();\r\n if (this.open) {\r\n this.dispatchEvent(\r\n new CustomEvent<SearchViewQueryEventDetail>(\"query\", {\r\n detail: { term: this.#input?.value ?? \"\" },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n } else {\r\n this.open = true;\r\n }\r\n }\r\n\r\n /** @private */\r\n #updateMode(): void {\r\n setCustomState(this, \"-fullscreen\", this.currentMode === \"fullscreen\");\r\n setCustomState(this, \"-docked\", this.currentMode === \"docked\");\r\n }\r\n\r\n /** @private */\r\n #updateClearableState(): void {\r\n this._clearable = (this.#input?.value ?? \"\").length > 0;\r\n setCustomState(this, \"-clearable\", this._clearable);\r\n }\r\n\r\n /** @private */\r\n #handleInputFocus(): void {\r\n this.open = !this.#closeOnInputFocus;\r\n this.#closeOnInputFocus = false;\r\n }\r\n\r\n /** @private */\r\n #handleCloseClick(): void {\r\n if (!this.#input) return;\r\n if (this.#input.value) {\r\n this.clear();\r\n }\r\n this.#closeOnInputFocus = true;\r\n this.#input?.focus();\r\n }\r\n\r\n /** @private */\r\n #handleClearClick(): void {\r\n if (!this.#input) return;\r\n if (this.#input.value) {\r\n this.clear();\r\n } else {\r\n this.#closeOnInputFocus = true;\r\n }\r\n this.#input?.focus();\r\n }\r\n\r\n /** @private */\r\n #handleInputPointerDown(): void {\r\n if (!this.open && this.#input?.matches(\":focus\")) {\r\n this.open = true;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleInputKeyDown(e: KeyboardEvent): void {\r\n if (this.open && e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n e.preventDefault();\r\n\r\n const input = e.target as HTMLInputElement;\r\n if (input.value) {\r\n this.clear();\r\n }\r\n\r\n this.open = false;\r\n }\r\n }\r\n\r\n /** @private */\r\n #handleKeyDown(e: KeyboardEvent): void {\r\n if (this.open && e.key === \"Escape\" && !e.shiftKey && !e.ctrlKey) {\r\n e.preventDefault();\r\n this.#handleCloseClick();\r\n }\r\n }\r\n\r\n /** @private */\r\n @debounce(40)\r\n private _handleFocusChange(focused: boolean) {\r\n if (!focused && this.currentMode === \"docked\") {\r\n this.clear();\r\n this.open = false;\r\n }\r\n }\r\n\r\n /** @private */\r\n async #openDocked(): Promise<void> {\r\n if (\r\n !this.dispatchEvent(\r\n new ToggleEvent(\"beforetoggle\", {\r\n oldState: \"closed\",\r\n newState: \"open\",\r\n bubbles: true,\r\n composed: true,\r\n cancelable: true,\r\n }),\r\n )\r\n ) {\r\n this.open = false;\r\n return;\r\n }\r\n\r\n this.#openMode = this.currentMode;\r\n const view = this._view;\r\n\r\n this.#anchorCleanup?.();\r\n this.#anchorCleanup = await positionAnchor(\r\n view,\r\n this._anchor,\r\n {\r\n position: \"bottom\",\r\n },\r\n (x, y) => {\r\n const view = this._view;\r\n view.style.top = `${y - this._anchor.clientHeight}px`;\r\n view.style.width = `${this._anchor.clientWidth}px`;\r\n\r\n if (M3eDirectionality.current === \"rtl\") {\r\n view.style.right = `${window.innerWidth - x - this.clientWidth}px`;\r\n view.style.left = \"\";\r\n } else {\r\n view.style.left = `${x}px`;\r\n view.style.right = \"\";\r\n }\r\n },\r\n );\r\n\r\n this._anchor.style.position = \"relative\";\r\n view.popover = \"manual\";\r\n view.style.position = \"absolute\";\r\n view.showPopover();\r\n this.#scrollLockController.lock();\r\n this.#inertController.lock();\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: \"closed\",\r\n newState: \"open\",\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<SearchViewQueryEventDetail>(\"query\", {\r\n detail: { term: this.#input?.value ?? \"\" },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n\r\n /** @private */\r\n #closeDocked(): void {\r\n const view = this._view;\r\n if (view.popover !== \"manual\") return;\r\n if (\r\n !this.dispatchEvent(\r\n new ToggleEvent(\"beforetoggle\", {\r\n oldState: \"open\",\r\n newState: \"closed\",\r\n bubbles: true,\r\n composed: true,\r\n cancelable: true,\r\n }),\r\n )\r\n ) {\r\n this.open = true;\r\n return;\r\n }\r\n\r\n this.#openMode = undefined;\r\n this.#scrollLockController.unlock();\r\n this.#inertController.unlock();\r\n\r\n if (prefersReducedMotion()) {\r\n this.#hideDocked();\r\n } else {\r\n view.classList.add(\"closing\");\r\n view.addEventListener(\"transitionend\", () => this.#hideDocked(), { once: true });\r\n }\r\n }\r\n\r\n /** @private */\r\n #hideDocked(): void {\r\n this.#anchorCleanup?.();\r\n this.#anchorCleanup = undefined;\r\n\r\n const view = this._view;\r\n view.classList.remove(\"closing\");\r\n view.style.position = \"\";\r\n view.style.width = \"\";\r\n view.style.top = \"\";\r\n view.style.left = \"\";\r\n view.style.right = \"\";\r\n view.hidePopover();\r\n view.popover = null;\r\n this._anchor.style.position = \"\";\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: \"open\",\r\n newState: \"closed\",\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n\r\n /** @private */\r\n async #openFullscreen(): Promise<void> {\r\n if (\r\n !this.dispatchEvent(\r\n new ToggleEvent(\"beforetoggle\", {\r\n oldState: \"closed\",\r\n newState: \"open\",\r\n bubbles: true,\r\n composed: true,\r\n cancelable: true,\r\n }),\r\n )\r\n ) {\r\n this.open = false;\r\n return;\r\n }\r\n\r\n this.#openMode = this.currentMode;\r\n this.#scrollLockController.lock();\r\n this.#inertController.lock();\r\n\r\n const view = this._view;\r\n this.#anchorCleanup?.();\r\n\r\n if (!prefersReducedMotion()) {\r\n const rect = view.getBoundingClientRect();\r\n const startInline = M3eDirectionality.current === \"rtl\" ? window.innerWidth - rect.right : rect.left;\r\n\r\n view.style.position = \"fixed\";\r\n view.popover = \"manual\";\r\n view.showPopover();\r\n this._anchor.style.position = \"relative\";\r\n\r\n view.animate(\r\n [\r\n {\r\n transform: `translateX(${startInline}px)`,\r\n width: `${rect.width}px`,\r\n top: `${rect.top}px`,\r\n height: `${rect.height}px`,\r\n },\r\n { transform: \"translateX(0px)\", width: \"100vw\", top: \"0px\", height: \"100vh\" },\r\n ],\r\n {\r\n duration: 150,\r\n easing: \"cubic-bezier(0.2, 0.0, 0, 1.0)\",\r\n },\r\n );\r\n } else {\r\n view.style.position = \"fixed\";\r\n view.popover = \"manual\";\r\n view.showPopover();\r\n this._anchor.style.position = \"relative\";\r\n }\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: \"closed\",\r\n newState: \"open\",\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n\r\n this.dispatchEvent(\r\n new CustomEvent<SearchViewQueryEventDetail>(\"query\", {\r\n detail: { term: this.#input?.value ?? \"\" },\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n\r\n /** @private */\r\n async #closeFullscreen(): Promise<void> {\r\n const view = this._view;\r\n if (view.popover !== \"manual\") return;\r\n\r\n if (\r\n !this.dispatchEvent(\r\n new ToggleEvent(\"beforetoggle\", {\r\n oldState: \"open\",\r\n newState: \"closed\",\r\n bubbles: true,\r\n composed: true,\r\n cancelable: true,\r\n }),\r\n )\r\n ) {\r\n this.open = true;\r\n return;\r\n }\r\n\r\n this.#openMode = undefined;\r\n this.#scrollLockController.unlock();\r\n this.#inertController.unlock();\r\n\r\n const anchor = this._anchor;\r\n\r\n if (!prefersReducedMotion()) {\r\n const start = view.getBoundingClientRect();\r\n const end = anchor.getBoundingClientRect();\r\n\r\n const startInline = M3eDirectionality.current === \"rtl\" ? window.innerWidth - start.right : start.left;\r\n const endInline = M3eDirectionality.current === \"rtl\" ? window.innerWidth - end.right : end.left;\r\n const dx = M3eDirectionality.current === \"rtl\" ? startInline - endInline : endInline - startInline;\r\n\r\n view.classList.add(\"closing\");\r\n await view.animate(\r\n [\r\n {\r\n transform: `translateX(0px)`,\r\n width: `${start.width}px`,\r\n top: `${start.top}px`,\r\n height: `${start.height}px`,\r\n },\r\n {\r\n transform: `translateX(${dx}px)`,\r\n width: `${end.width}px`,\r\n top: `${end.top}px`,\r\n height: `${end.height}px`,\r\n },\r\n ],\r\n {\r\n duration: 150,\r\n easing: \"cubic-bezier(0.2, 0.0, 0, 1.0)\",\r\n },\r\n ).finished;\r\n }\r\n\r\n view.hidePopover();\r\n view.style.position = \"\";\r\n view.popover = null;\r\n view.classList.remove(\"closing\");\r\n anchor.style.position = \"\";\r\n\r\n this.dispatchEvent(\r\n new ToggleEvent(\"toggle\", {\r\n oldState: \"open\",\r\n newState: \"closed\",\r\n bubbles: true,\r\n composed: true,\r\n }),\r\n );\r\n }\r\n}\r\n\r\ninterface M3eSearchViewElementEventMap extends HTMLElementEventMap {\r\n clear: Event;\r\n query: CustomEvent<SearchViewQueryEventDetail>;\r\n beforetoggle: ToggleEvent;\r\n toggle: ToggleEvent;\r\n}\r\n\r\nexport interface M3eSearchViewElement {\r\n addEventListener<K extends keyof M3eSearchViewElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSearchViewElement, ev: M3eSearchViewElementEventMap[K]) => void,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n addEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | AddEventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener<K extends keyof M3eSearchViewElementEventMap>(\r\n type: K,\r\n listener: (this: M3eSearchViewElement, ev: M3eSearchViewElementEventMap[K]) => void,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n\r\n removeEventListener(\r\n type: string,\r\n listener: EventListenerOrEventListenerObject,\r\n options?: boolean | EventListenerOptions,\r\n ): void;\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-search-view\": M3eSearchViewElement;\r\n }\r\n}\r\n"],"names":["SearchBarToken","unsafeCSS","DesignToken","color","surfaceContainerHigh","onSurface","onSurfaceVariant","shape","corner","full","typescale","standard","body","large","fontSize","fontWeight","lineHeight","tracking","SearchBarLightDomStyle","css","SearchBarStyle","SearchViewToken","surfaceContainerLow","outline","none","extraLarge","medium","scrim","SearchViewLightDomStyle","SearchViewStyle","motion","duration","short2","easing","scrollbar","thinWidth","long2","short3","M3eSearchBarElement","EventAttribute","AttachInternals","LitElement","constructor","_M3eSearchBarElement_input","set","this","_M3eSearchBarElement_inputInputHandler","__classPrivateFieldGet","_M3eSearchBarElement_instances","_M3eSearchBarElement_handleInputInput","call","clearable","clearLabel","clear","value","dispatchEvent","Event","bubbles","composed","render","html","_M3eSearchBarElement_handleContainerClick","_M3eSearchBarElement_handleLeadingSlotChange","_M3eSearchBarElement_handleInputSlotChange","_M3eSearchBarElement_renderClearButton","_M3eSearchBarElement_handleTrailingSlotChange","_M3eSearchBarElement_handleClearClick","nothing","matches","focus","e","setCustomState","hasAssignedNodes","target","input","assignedElements","flatten","find","x","HTMLInputElement","removeEventListener","__classPrivateFieldSet","addEventListener","role","inputMode","type","length","registerStyleSheet","styles","__decorate","property","Boolean","reflect","prototype","attribute","customElement","M3eSearchViewElement","super","_M3eSearchViewElement_input","_M3eSearchViewElement_closeOnInputFocus","_M3eSearchViewElement_inputInputHandler","_M3eSearchViewElement_instances","_M3eSearchViewElement_handleInputInput","_M3eSearchViewElement_inputFocusHandler","_M3eSearchViewElement_handleInputFocus","_M3eSearchViewElement_inputKeyDownHandler","_M3eSearchViewElement_inputPointerHandler","_M3eSearchViewElement_handleInputPointerDown","_M3eSearchViewElement_scrollLockController","ScrollLockController","_M3eSearchViewElement_inertController","InertController","_clearable","_M3eSearchViewElement_openMode","_M3eSearchViewElement_anchorCleanup","_M3eSearchViewElement_breakpointUnobserve","contained","mode","open","closeLabel","hideSearchIcon","FocusController","callback","focused","_handleFocusChange","currentMode","_mode","_M3eSearchViewElement_updateClearableState","CustomEvent","detail","term","willUpdate","changedProperties","has","previousMode","get","M3eBreakpointObserver","observe","Breakpoint","XSmall","_M3eSearchViewElement_updateMode","undefined","updated","_changedProperties","_M3eSearchViewElement_openFullscreen","_M3eSearchViewElement_openDocked","_M3eSearchViewElement_closeFullscreen","_M3eSearchViewElement_closeDocked","ifDefined","_M3eSearchViewElement_handleKeyDown","_M3eSearchViewElement_renderIconOrBackButton","_M3eSearchViewElement_handleInputSlotChange","_M3eSearchViewElement_renderClearButton","_M3eSearchViewElement_renderBackButton","_M3eSearchViewElement_renderIcon","_M3eSearchViewElement_handleCloseClick","svg","_M3eSearchViewElement_handleClearClick","ariaHasPopup","key","shiftKey","ctrlKey","preventDefault","async","ToggleEvent","oldState","newState","cancelable","view","_view","positionAnchor","_anchor","position","y","style","top","clientHeight","width","clientWidth","M3eDirectionality","current","right","window","innerWidth","left","popover","showPopover","lock","unlock","prefersReducedMotion","_M3eSearchViewElement_hideDocked","classList","add","once","remove","hidePopover","rect","getBoundingClientRect","startInline","animate","transform","height","anchor","start","end","endInline","dx","finished","state","query","debounce"],"mappings":"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"}
|
package/dist/select.js
CHANGED
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from 'tslib';
|
|
7
7
|
import { LitElement, html, css } from 'lit';
|
|
8
8
|
import { query, property } from 'lit/decorators.js';
|
|
9
|
-
import { Focusable, Labelled, RequiredConstraintValidation, Dirty, Touched, Required, ConstraintValidation, FormAssociated, Disabled, AttachInternals, Role,
|
|
9
|
+
import { Focusable, Labelled, RequiredConstraintValidation, Dirty, Touched, Required, ConstraintValidation, FormAssociated, Disabled, AttachInternals, Role, MutationController, formValue, setCustomState, prefersReducedMotion, scrollIntoViewIfNeeded, deleteCustomState, addCustomState, forcedColorsActive, DesignToken, customElement } from '@m3e/web/core';
|
|
10
10
|
import { ListKeyManager } from '@m3e/web/core/a11y';
|
|
11
11
|
|
|
12
|
-
var _M3eSelectElement_instances, _M3eSelectElement_clone, _M3eSelectElement_menu, _M3eSelectElement_ignoreKeyUp, _M3eSelectElement_ignoreFocusVisible, _M3eSelectElement_id, _M3eSelectElement_listId, _M3eSelectElement_clickHandler, _M3eSelectElement_keyDownHandler, _M3eSelectElement_keyUpHandler, _M3eSelectElement_menuToggleHandler, _M3eSelectElement_menuPointerDownHandler, _M3eSelectElement_options_get, _M3eSelectElement_selected_get,
|
|
12
|
+
var _M3eSelectElement_instances, _M3eSelectElement_clone, _M3eSelectElement_menu, _M3eSelectElement_ignoreKeyUp, _M3eSelectElement_ignoreFocusVisible, _M3eSelectElement_id, _M3eSelectElement_listId, _M3eSelectElement_clickHandler, _M3eSelectElement_keyDownHandler, _M3eSelectElement_keyUpHandler, _M3eSelectElement_menuToggleHandler, _M3eSelectElement_menuPointerDownHandler, _M3eSelectElement_options_get, _M3eSelectElement_selected_get, _M3eSelectElement_formField_get, _M3eSelectElement_handleMutation, _M3eSelectElement_handleClick, _M3eSelectElement_handleKeyDown, _M3eSelectElement_handleKeyUp, _M3eSelectElement_handleMenuPointerDown, _M3eSelectElement_handleMenuToggle, _M3eSelectElement_destroyMenu, _M3eSelectElement_toggleMenu, _M3eSelectElement_showMenu, _M3eSelectElement_hideMenu, _M3eSelectElement_activateOption, _M3eSelectElement_updateSelectionState, _M3eSelectElement_selectOption;
|
|
13
13
|
var M3eSelectElement_1;
|
|
14
14
|
/**
|
|
15
15
|
* A form control that allows users to select a value from a set of predefined options.
|
|
@@ -113,13 +113,6 @@ let M3eSelectElement = M3eSelectElement_1 = class M3eSelectElement extends Focus
|
|
|
113
113
|
* @default ""
|
|
114
114
|
*/
|
|
115
115
|
this.panelClass = "";
|
|
116
|
-
new ResizeController(this, {
|
|
117
|
-
callback: () => {
|
|
118
|
-
if (__classPrivateFieldGet(this, _M3eSelectElement_menu, "f")) {
|
|
119
|
-
__classPrivateFieldGet(this, _M3eSelectElement_menu, "f").style.minWidth = __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_minMenuWidth_get);
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
});
|
|
123
116
|
new MutationController(this, {
|
|
124
117
|
config: {
|
|
125
118
|
childList: true,
|
|
@@ -237,10 +230,6 @@ let M3eSelectElement = M3eSelectElement_1 = class M3eSelectElement extends Focus
|
|
|
237
230
|
return html`<m3e-focus-ring class="focus-ring"></m3e-focus-ring><div class="base"><m3e-text-overflow><slot name="value">${this.selected.filter(x => !x.isEmpty).map((x, i) => i > 0 ? html`<span>, </span>${x.label}` : x.label)}</slot></m3e-text-overflow><div class="arrow-wrapper" aria-hidden="true"><slot name="arrow"><svg class="arrow" viewBox="0 -960 960 960" fill="currentColor"><path d="M480-360 280-560h400L480-360Z"/></svg></slot></div></div><div class="options" aria-hidden="true"><slot></slot></div>`;
|
|
238
231
|
}
|
|
239
232
|
};
|
|
240
|
-
_M3eSelectElement_minMenuWidth_get = function _M3eSelectElement_minMenuWidth_get() {
|
|
241
|
-
const formField = __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get);
|
|
242
|
-
return `${formField ? formField.menuAnchor.clientWidth : this.clientWidth}px`;
|
|
243
|
-
};
|
|
244
233
|
_M3eSelectElement_formField_get = function _M3eSelectElement_formField_get() {
|
|
245
234
|
return this.closest("m3e-form-field");
|
|
246
235
|
};
|
|
@@ -414,7 +403,7 @@ _M3eSelectElement_showMenu = function _M3eSelectElement_showMenu() {
|
|
|
414
403
|
}
|
|
415
404
|
}
|
|
416
405
|
__classPrivateFieldGet(this, _M3eSelectElement_menu, "f").style.overflowX = "hidden";
|
|
417
|
-
__classPrivateFieldGet(this, _M3eSelectElement_menu, "f").
|
|
406
|
+
__classPrivateFieldGet(this, _M3eSelectElement_menu, "f").fitAnchorWidth = true;
|
|
418
407
|
__classPrivateFieldGet(this, _M3eSelectElement_menu, "f").addEventListener("toggle", __classPrivateFieldGet(this, _M3eSelectElement_menuToggleHandler, "f"));
|
|
419
408
|
__classPrivateFieldGet(this, _M3eSelectElement_menu, "f").addEventListener("pointerdown", __classPrivateFieldGet(this, _M3eSelectElement_menuPointerDownHandler, "f"));
|
|
420
409
|
if (__classPrivateFieldGet(this, _M3eSelectElement_clone, "f")) {
|