@m3e/web 2.2.0 → 2.2.2
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 +2 -2
- package/dist/all.js +173 -66
- package/dist/all.js.map +1 -1
- package/dist/all.min.js +45 -45
- package/dist/all.min.js.map +1 -1
- package/dist/autocomplete.js +55 -15
- package/dist/autocomplete.js.map +1 -1
- package/dist/autocomplete.min.js +1 -1
- package/dist/autocomplete.min.js.map +1 -1
- package/dist/calendar.js +4 -2
- package/dist/calendar.js.map +1 -1
- package/dist/calendar.min.js +3 -3
- package/dist/calendar.min.js.map +1 -1
- package/dist/core.js +1 -1
- package/dist/core.js.map +1 -1
- package/dist/core.min.js.map +1 -1
- package/dist/css-custom-data.json +501 -481
- package/dist/custom-elements.json +8557 -8286
- package/dist/datepicker.js +39 -16
- package/dist/datepicker.js.map +1 -1
- package/dist/datepicker.min.js +1 -1
- package/dist/datepicker.min.js.map +1 -1
- package/dist/drawer-container.js +10 -4
- package/dist/drawer-container.js.map +1 -1
- package/dist/drawer-container.min.js +1 -1
- package/dist/drawer-container.min.js.map +1 -1
- package/dist/html-custom-data.json +220 -220
- package/dist/nav-bar.js +17 -7
- package/dist/nav-bar.js.map +1 -1
- package/dist/nav-bar.min.js +1 -1
- package/dist/nav-bar.min.js.map +1 -1
- package/dist/option.js +1 -1
- package/dist/option.js.map +1 -1
- package/dist/option.min.js +1 -1
- package/dist/option.min.js.map +1 -1
- package/dist/search.js +27 -11
- package/dist/search.js.map +1 -1
- package/dist/search.min.js +1 -1
- package/dist/search.min.js.map +1 -1
- package/dist/segmented-button.js +2 -2
- package/dist/segmented-button.js.map +1 -1
- package/dist/segmented-button.min.js.map +1 -1
- package/dist/select.js +1 -1
- package/dist/select.js.map +1 -1
- package/dist/select.min.js +1 -1
- package/dist/select.min.js.map +1 -1
- package/dist/split-button.js +1 -1
- package/dist/split-button.js.map +1 -1
- package/dist/split-button.min.js.map +1 -1
- package/dist/src/autocomplete/AutocompleteElement.d.ts +5 -0
- package/dist/src/autocomplete/AutocompleteElement.d.ts.map +1 -1
- package/dist/src/calendar/CalendarElement.d.ts +2 -0
- package/dist/src/calendar/CalendarElement.d.ts.map +1 -1
- package/dist/src/calendar/CalendarViewElementBase.d.ts.map +1 -1
- package/dist/src/calendar/MonthViewElement.d.ts.map +1 -1
- package/dist/src/core/shared/utils/registerStyleSheet.d.ts +1 -1
- package/dist/src/datepicker/DatepickerElement.d.ts +5 -1
- package/dist/src/datepicker/DatepickerElement.d.ts.map +1 -1
- package/dist/src/drawer-container/DrawerContainerElement.d.ts +2 -2
- package/dist/src/drawer-container/DrawerContainerElement.d.ts.map +1 -1
- package/dist/src/nav-bar/NavBarElement.d.ts +3 -1
- package/dist/src/nav-bar/NavBarElement.d.ts.map +1 -1
- package/dist/src/search/SearchViewElement.d.ts +5 -1
- package/dist/src/search/SearchViewElement.d.ts.map +1 -1
- package/dist/src/segmented-button/ButtonSegmentElement.d.ts +2 -2
- package/dist/src/split-button/SplitButtonElement.d.ts +1 -1
- package/dist/src/stepper/StepperElement.d.ts +3 -1
- package/dist/src/stepper/StepperElement.d.ts.map +1 -1
- package/dist/src/switch/SwitchElement.d.ts +2 -2
- package/dist/stepper.js +17 -7
- package/dist/stepper.js.map +1 -1
- package/dist/stepper.min.js +1 -1
- package/dist/stepper.min.js.map +1 -1
- package/dist/switch.js +2 -2
- package/dist/switch.js.map +1 -1
- package/dist/switch.min.js.map +1 -1
- package/package.json +1 -1
package/dist/split-button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"split-button.js","sources":["../../src/split-button/SplitButtonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, HoverController, PressedController, Role } from \"@m3e/web/core\";\r\nimport { M3eButtonElement, ButtonSize } from \"@m3e/web/button\";\r\nimport { M3eIconButtonElement } from \"@m3e/web/icon-button\";\r\n\r\nimport \"@m3e/web/button-group\";\r\n\r\nimport { SplitButtonVariant } from \"./SplitButtonVariant\";\r\n\r\n/**\r\n * A button used to show an action with a menu of related actions.\r\n *\r\n * @description\r\n * The `m3e-split-button` component presents a primary action alongside a menu of related actions,\r\n * uniting two buttons in a single expressive surface. Designed for Material 3, it supports `elevated`,\r\n * `filled`, `tonal`, and `outlined` variants, and adapts to all button sizes. The leading button triggers\r\n * the main action, while the trailing icon button reveals additional options, enabling efficient workflows\r\n * and clear visual hierarchy. The split button ensures accessible, adaptive, and visually harmonious\r\n * interactions, reflecting Material 3’s principles of clarity, flexibility, and expressive design.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-split-button` to combine the `m3e-button`,\r\n * `m3e-icon-button`, and `m3e-menu` components into a split button.\r\n *\r\n * ```html\r\n * <m3e-split-button>\r\n * <m3e-button slot=\"leading-button\">\r\n * <m3e-icon slot=\"icon\" name=\"edit\"></m3e-icon>Edit\r\n * </m3e-button>\r\n * <m3e-icon-button slot=\"trailing-button\">\r\n * <m3e-icon name=\"keyboard_arrow_down\"></m3e-icon>\r\n * <m3e-menu-trigger for=\"menu1\"></m3e-menu-trigger>\r\n * </m3e-icon-button>\r\n * ```\r\n *\r\n * @tag m3e-split-button\r\n *\r\n * @slot leading-button - The leading button used to perform the primary action.\r\n * @slot trailing-button - The trailing icon button used to open a menu of related actions.\r\n *\r\n * @attr variant - The appearance variant of the button.\r\n * @attr size - The size of the button.\r\n *\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-small, unselected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-small, unselected).\r\n * @cssprop --m3e-split-button-small-trailing-button-unselected-leading-space - Leading space for the trailing button (small, unselected).\r\n * @cssprop --m3e-split-button-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (small, unselected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-unselected-leading-space - Leading space for the trailing button (medium, unselected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-unselected-trailing-space - Trailing space for the trailing button (medium, unselected).\r\n * @cssprop --m3e-split-button-large-trailing-button-unselected-leading-space - Leading space for the trailing button (large, unselected).\r\n * @cssprop --m3e-split-button-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (large, unselected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-large, unselected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-large, unselected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-selected-leading-space - Leading space for the trailing button (extra-small, selected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-small, selected).\r\n * @cssprop --m3e-split-button-small-trailing-button-selected-leading-space - Leading space for the trailing button (small, selected).\r\n * @cssprop --m3e-split-button-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (small, selected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-selected-leading-space - Leading space for the trailing button (medium, selected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-selected-trailing-space - Trailing space for the trailing button (medium, selected).\r\n * @cssprop --m3e-split-button-large-trailing-button-selected-leading-space - Leading space for the trailing button (large, selected).\r\n * @cssprop --m3e-split-button-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (large, selected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-selected-leading-space - Leading space for the trailing button (extra-large, selected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-large, selected).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-size - Inner corner size for the leading/trailing button (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-size - Inner corner size for the leading/trailing button (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-size - Inner corner size for the leading/trailing button (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-size - Inner corner size for the leading/trailing button (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-size - Inner corner size for the leading/trailing button (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-hover-size - Inner corner size on hover (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-hover-size - Inner corner size on hover (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-hover-size - Inner corner size on hover (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-hover-size - Inner corner size on hover (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-hover-size - Inner corner size on hover (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-pressed-size - Inner corner size on press (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-pressed-size - Inner corner size on press (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-pressed-size - Inner corner size on press (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-pressed-size - Inner corner size on press (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-pressed-size - Inner corner size on press (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-between-spacing - Spacing between leading and trailing buttons (extra-small).\r\n * @cssprop --m3e-split-button-small-between-spacing - Spacing between leading and trailing buttons (small).\r\n * @cssprop --m3e-split-button-medium-between-spacing - Spacing between leading and trailing buttons (medium).\r\n * @cssprop --m3e-split-button-large-between-spacing - Spacing between leading and trailing buttons (large).\r\n * @cssprop --m3e-split-button-extra-large-between-spacing - Spacing between leading and trailing buttons (extra-large).\r\n */\r\n@customElement(\"m3e-split-button\")\r\nexport class M3eSplitButtonElement extends Role(LitElement, \"group\") {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: inline-flex;\r\n vertical-align: middle;\r\n }\r\n ::slotted([slot=\"leading-button\"]) {\r\n flex: 1 1 auto;\r\n min-width: 0;\r\n --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${DesignToken.shape.corner.full});\r\n }\r\n\r\n ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"])) {\r\n --m3e-icon-button-extra-small-default-leading-space: var(\r\n --m3e-split-button-extra-small-trailing-button-unselected-leading-space,\r\n 0.75rem\r\n );\r\n --m3e-icon-button-extra-small-default-trailing-space: var(\r\n --m3e-split-button-extra-small-trailing-button-unselected-trailing-space,\r\n 0.875rem\r\n );\r\n --m3e-icon-button-small-default-leading-space: var(\r\n --m3e-split-button-small-trailing-button-unselected-leading-space,\r\n 0.75rem\r\n );\r\n --m3e-icon-button-small-default-trailing-space: var(\r\n --m3e-split-button-small-trailing-button-unselected-trailing-space,\r\n 0.875rem\r\n );\r\n --m3e-icon-button-medium-default-leading-space: var(\r\n --m3e-split-button-medium-trailing-button-unselected-leading-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-medium-default-trailing-space: var(\r\n --m3e-split-button-medium-trailing-button-unselected-trailing-space,\r\n 1.0625rem\r\n );\r\n --m3e-icon-button-large-default-leading-space: var(\r\n --m3e-split-button-large-trailing-button-unselected-leading-space,\r\n 1.625rem\r\n );\r\n --m3e-icon-button-large-default-trailing-space: var(\r\n --m3e-split-button-large-trailing-button-unselected-trailing-space,\r\n 2rem\r\n );\r\n --m3e-icon-button-extra-large-default-leading-space: var(\r\n --m3e-split-button-extra-large-trailing-button-unselected-leading-space,\r\n 2.3125rem\r\n );\r\n --m3e-icon-button-extra-large-default-trailing-space: var(\r\n --m3e-split-button-extra-large-trailing-button-unselected-trailing-space,\r\n 3.0625rem\r\n );\r\n }\r\n\r\n ::slotted([slot=\"trailing-button\"][aria-expanded=\"true\"]) {\r\n --m3e-icon-button-extra-small-default-leading-space: var(\r\n --m3e-split-button-extra-small-trailing-button-selected-leading-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-extra-small-default-trailing-space: var(\r\n --m3e-split-button-extra-small-trailing-button-selected-trailing-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-small-default-leading-space: var(\r\n --m3e-split-button-small-trailing-button-selected-leading-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-small-default-trailing-space: var(\r\n --m3e-split-button-small-trailing-button-selected-trailing-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-medium-default-leading-space: var(\r\n --m3e-split-button-medium-trailing-button-selected-leading-space,\r\n 0.9375rem\r\n );\r\n --m3e-icon-button-medium-default-trailing-space: var(\r\n --m3e-split-button-medium-trailing-button-selected-trailing-space,\r\n 0.9375rem\r\n );\r\n --m3e-icon-button-large-default-leading-space: var(\r\n --m3e-split-button-large-trailing-button-selected-leading-space,\r\n 1.8125rem\r\n );\r\n --m3e-icon-button-large-default-trailing-space: var(\r\n --m3e-split-button-large-trailing-button-selected-trailing-space,\r\n 1.8125rem\r\n );\r\n --m3e-icon-button-extra-large-default-leading-space: var(\r\n --m3e-split-button-extra-large-trailing-button-selected-leading-space,\r\n 2.6875rem\r\n );\r\n --m3e-icon-button-extra-large-default-trailing-space: var(\r\n --m3e-split-button-extra-large-trailing-button-selected-trailing-space,\r\n 2.6875rem\r\n );\r\n }\r\n\r\n ::slotted([slot=\"leading-button\"]:not(:hover)),\r\n ::slotted([slot=\"leading-button\"]:disabled),\r\n ::slotted([slot=\"leading-button\"][disabled-interactive]) {\r\n --m3e-connected-button-group-extra-small-inner-shape: var(\r\n --m3e-split-button-extra-small-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-small-inner-shape: var(\r\n --m3e-split-button-small-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-medium-inner-shape: var(\r\n --m3e-split-button-medium-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-large-inner-shape: var(\r\n --m3e-split-button-large-inner-corner-size,\r\n ${DesignToken.shape.corner.small}\r\n );\r\n --m3e-connected-button-group-extra-large-inner-shape: var(\r\n --m3e-split-button-extra-large-inner-corner-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n }\r\n ::slotted([slot=\"leading-button\"]:hover:not(:disabled):not([disabled-interactive])),\r\n ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"]):hover:not(:disabled):not([disabled-interactive])) {\r\n --m3e-connected-button-group-extra-small-inner-shape: var(\r\n --m3e-split-button-extra-small-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.small}\r\n );\r\n --m3e-connected-button-group-small-inner-shape: var(\r\n --m3e-split-button-small-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n --m3e-connected-button-group-medium-inner-shape: var(\r\n --m3e-split-button-medium-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n --m3e-connected-button-group-large-inner-shape: var(\r\n --m3e-split-button-large-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.largeIncreased}\r\n );\r\n --m3e-connected-button-group-extra-large-inner-shape: var(\r\n --m3e-split-button-extra-large-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.largeIncreased}\r\n );\r\n }\r\n\r\n ::slotted([slot=\"leading-button\"]),\r\n ::slotted([slot=\"trailing-button\"]) {\r\n --m3e-connected-button-group-extra-small-inner-pressed-shape: var(\r\n --m3e-split-button-extra-small-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.small}\r\n );\r\n --m3e-connected-button-group-small-inner-pressed-shape: var(\r\n --m3e-split-button-small-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n --m3e-connected-button-group-medium-inner-pressed-shape: var(\r\n --m3e-split-button-medium-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n --m3e-connected-button-group-large-inner-pressed-shape: var(\r\n --m3e-split-button-large-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.largeIncreased}\r\n );\r\n --m3e-connected-button-group-extra-large-inner-pressed-shape: var(\r\n --m3e-split-button-extra-large-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.largeIncreased}\r\n );\r\n }\r\n\r\n ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"]):not(:hover)),\r\n ::slotted([slot=\"trailing-button\"]:disabled),\r\n ::slotted([slot=\"trailing-button\"][disabled-interactive]) {\r\n --m3e-connected-button-group-extra-small-inner-shape: var(\r\n --m3e-split-button-extra-small-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-small-inner-shape: var(\r\n --m3e-split-button-small-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-medium-inner-shape: var(\r\n --m3e-split-button-medium-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-large-inner-shape: var(\r\n --m3e-split-button-large-inner-corner-size,\r\n ${DesignToken.shape.corner.small}\r\n );\r\n --m3e-connected-button-group-extra-large-inner-shape: var(\r\n --m3e-split-button-extra-large-inner-corner-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n }\r\n\r\n ::slotted([slot=\"trailing-button\"][aria-expanded=\"true\"]) {\r\n --_icon-button-icon-transform: rotate(180deg);\r\n --_button-rounded-start-shape: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n --_button-rounded-end-shape: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n }\r\n ::slotted([slot=\"trailing-button\"]) {\r\n --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n }\r\n .base {\r\n --m3e-icon-button-extra-small-icon-size: calc(\r\n var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(0)}\r\n );\r\n --m3e-button-extra-small-icon-size: calc(\r\n var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(0)}\r\n );\r\n --m3e-icon-button-small-icon-size: calc(\r\n var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(-1)}\r\n );\r\n --m3e-button-small-icon-size: calc(\r\n var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(-1)}\r\n );\r\n --m3e-icon-button-medium-icon-size: calc(\r\n var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken.density.calc(-2)}\r\n );\r\n --m3e-button-medium-icon-size: calc(\r\n var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken.density.calc(-2)}\r\n );\r\n --m3e-icon-button-large-icon-size: calc(\r\n var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken.density.calc(-3)}\r\n );\r\n --m3e-button-large-icon-size: calc(\r\n var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken.density.calc(-3)}\r\n );\r\n --m3e-icon-button-extra-large-icon-size: calc(\r\n var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken.density.calc(-3)}\r\n );\r\n --m3e-button-extra-large-icon-size: calc(\r\n var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken.density.calc(-3)}\r\n );\r\n }\r\n :host([size=\"extra-small\"]) .base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-small-between-spacing, 0.125rem);\r\n }\r\n :host([size=\"small\"]) .base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-small-between-spacing, 0.125rem);\r\n }\r\n :host([size=\"medium\"]).base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-medium-between-spacing, 0.125rem);\r\n }\r\n :host([size=\"large\"]) .base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-large-between-spacing, 0.125rem);\r\n }\r\n :host([size=\"extra-large\"]) .base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-large-between-spacing, 0.125rem);\r\n }\r\n `;\r\n\r\n @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n /** @private */ #leadingButton?: M3eButtonElement;\r\n /** @private */ #trailingButton?: M3eIconButtonElement;\r\n /** @private */ #trailingButtonHover = false;\r\n\r\n /** @private */ readonly #pressedController = new PressedController(this, {\r\n target: null,\r\n capture: true,\r\n minPressedDuration: 150,\r\n isPressedKey: (key) => key === \" \",\r\n callback: (pressed, _, target) => {\r\n switch (target) {\r\n case this.#leadingButton:\r\n this.#updateLeadingButtonShape(pressed);\r\n break;\r\n case this.#trailingButton:\r\n this.#updateTrailingButtonShape(pressed || this.#trailingButtonHover);\r\n break;\r\n }\r\n },\r\n });\r\n\r\n /** @private */ readonly #hoverController = new HoverController(this, {\r\n target: null,\r\n callback: (hovering, target) => {\r\n switch (target) {\r\n case this.#trailingButton:\r\n if (!this.#trailingButton?.disabled && !this.#trailingButton?.disabledInteractive) {\r\n this.#trailingButtonHover = hovering;\r\n this.#updateTrailingButtonShape(hovering);\r\n }\r\n break;\r\n }\r\n },\r\n });\r\n\r\n /**\r\n * The appearance variant of the button.\r\n * @default \"filled\"\r\n */\r\n @property({ reflect: true }) variant: SplitButtonVariant = \"filled\";\r\n\r\n /**\r\n * The size of the button.\r\n * @default \"small\"\r\n */\r\n @property({ reflect: true }) size: ButtonSize = \"small\";\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"variant\")) {\r\n this.#updateButtons();\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<m3e-button-group class=\"base\" disable-role variant=\"connected\" size=\"${this.size}\">\r\n <slot name=\"leading-button\" @slotchange=\"${this.#handleLeadingSlotChange}\"></slot>\r\n <slot name=\"trailing-button\" @slotchange=\"${this.#handleTrailingSlotChange}\"></slot>\r\n </m3e-button-group>`;\r\n }\r\n\r\n /** @private */\r\n #handleLeadingSlotChange(e: Event): void {\r\n if (this.#leadingButton) {\r\n this.#pressedController.unobserve(this.#leadingButton);\r\n }\r\n\r\n this.#leadingButton = (<HTMLSlotElement>e.target)\r\n .assignedElements({ flatten: true })\r\n .find((x) => x instanceof M3eButtonElement);\r\n\r\n if (this.#leadingButton) {\r\n this.#pressedController.observe(this.#leadingButton);\r\n }\r\n\r\n this.#updateButtons();\r\n }\r\n\r\n /** @private */\r\n #handleTrailingSlotChange(e: Event): void {\r\n if (this.#trailingButton) {\r\n this.#pressedController.unobserve(this.#trailingButton);\r\n this.#hoverController.unobserve(this.#trailingButton);\r\n }\r\n\r\n this.#trailingButton = (<HTMLSlotElement>e.target)\r\n .assignedElements({ flatten: true })\r\n .find((x) => x instanceof M3eIconButtonElement);\r\n\r\n if (this.#trailingButton) {\r\n this.#pressedController.observe(this.#trailingButton);\r\n this.#hoverController.observe(this.#trailingButton);\r\n }\r\n\r\n this.#updateButtons();\r\n }\r\n\r\n /** @private */\r\n #updateButtons(): void {\r\n if (this.#leadingButton) {\r\n this.#leadingButton.variant = this.variant;\r\n this.#leadingButton.size = this.size;\r\n this.#leadingButton.shape = \"rounded\";\r\n }\r\n\r\n if (this.#trailingButton) {\r\n this.#trailingButton.width = \"default\";\r\n this.#trailingButton.shape = \"rounded\";\r\n this.#trailingButton.setAttribute(\"variant\", this.variant);\r\n this.#trailingButton.size = this.size;\r\n }\r\n }\r\n\r\n /** @private */\r\n #updateLeadingButtonShape(update: boolean): void {\r\n if (update && this.#leadingButton) {\r\n this.#updateButtonShape(this.#leadingButton, \"--_leading-button-shape\");\r\n } else {\r\n this._base?.style.removeProperty(\"--_leading-button-shape\");\r\n }\r\n }\r\n\r\n /** @private */\r\n #updateTrailingButtonShape(update: boolean): void {\r\n if (update && this.#trailingButton) {\r\n this.#updateButtonShape(this.#trailingButton, \"--_trailing-button-shape\");\r\n } else {\r\n this._base?.style.removeProperty(\"--_trailing-button-shape\");\r\n }\r\n }\r\n\r\n /** @private */\r\n #updateButtonShape(button: HTMLElement, property: string): void {\r\n const adjustedShape = button.clientHeight / 2;\r\n if (adjustedShape) {\r\n this._base?.style.setProperty(property, `${adjustedShape}px`);\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-split-button\": M3eSplitButtonElement;\r\n }\r\n}\r\n"],"names":["M3eSplitButtonElement","Role","LitElement","constructor","_M3eSplitButtonElement_leadingButton","set","_M3eSplitButtonElement_trailingButton","_M3eSplitButtonElement_trailingButtonHover","_M3eSplitButtonElement_pressedController","PressedController","target","capture","minPressedDuration","isPressedKey","key","callback","pressed","_","__classPrivateFieldGet","_M3eSplitButtonElement_instances","_M3eSplitButtonElement_updateLeadingButtonShape","call","_M3eSplitButtonElement_updateTrailingButtonShape","_M3eSplitButtonElement_hoverController","HoverController","hovering","disabled","disabledInteractive","__classPrivateFieldSet","variant","size","update","changedProperties","has","_M3eSplitButtonElement_updateButtons","render","html","_M3eSplitButtonElement_handleLeadingSlotChange","_M3eSplitButtonElement_handleTrailingSlotChange","e","unobserve","assignedElements","flatten","find","x","M3eButtonElement","observe","M3eIconButtonElement","shape","width","setAttribute","_M3eSplitButtonElement_updateButtonShape","_base","style","removeProperty","button","property","adjustedShape","clientHeight","setProperty","styles","css","DesignToken","corner","full","extraSmall","small","medium","largeIncreased","density","calc","__decorate","query","prototype","reflect","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"split-button.js","sources":["../../src/split-button/SplitButtonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, HoverController, PressedController, Role } from \"@m3e/web/core\";\r\nimport { M3eButtonElement, ButtonSize } from \"@m3e/web/button\";\r\nimport { M3eIconButtonElement } from \"@m3e/web/icon-button\";\r\n\r\nimport \"@m3e/web/button-group\";\r\n\r\nimport { SplitButtonVariant } from \"./SplitButtonVariant\";\r\n\r\n/**\r\n * A button used to show an action with a menu of related actions.\r\n *\r\n * @description\r\n * The `m3e-split-button` component presents a primary action alongside a menu of related actions,\r\n * uniting two buttons in a single expressive surface. Designed for Material 3, it supports `elevated`,\r\n * `filled`, `tonal`, and `outlined` variants, and adapts to all button sizes. The leading button triggers\r\n * the main action, while the trailing icon button reveals additional options, enabling efficient workflows\r\n * and clear visual hierarchy. The split button ensures accessible, adaptive, and visually harmonious\r\n * interactions, reflecting Material 3's principles of clarity, flexibility, and expressive design.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-split-button` to combine the `m3e-button`,\r\n * `m3e-icon-button`, and `m3e-menu` components into a split button.\r\n *\r\n * ```html\r\n * <m3e-split-button>\r\n * <m3e-button slot=\"leading-button\">\r\n * <m3e-icon slot=\"icon\" name=\"edit\"></m3e-icon>Edit\r\n * </m3e-button>\r\n * <m3e-icon-button slot=\"trailing-button\">\r\n * <m3e-icon name=\"keyboard_arrow_down\"></m3e-icon>\r\n * <m3e-menu-trigger for=\"menu1\"></m3e-menu-trigger>\r\n * </m3e-icon-button>\r\n * ```\r\n *\r\n * @tag m3e-split-button\r\n *\r\n * @slot leading-button - The leading button used to perform the primary action.\r\n * @slot trailing-button - The trailing icon button used to open a menu of related actions.\r\n *\r\n * @attr variant - The appearance variant of the button.\r\n * @attr size - The size of the button.\r\n *\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-small, unselected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-small, unselected).\r\n * @cssprop --m3e-split-button-small-trailing-button-unselected-leading-space - Leading space for the trailing button (small, unselected).\r\n * @cssprop --m3e-split-button-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (small, unselected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-unselected-leading-space - Leading space for the trailing button (medium, unselected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-unselected-trailing-space - Trailing space for the trailing button (medium, unselected).\r\n * @cssprop --m3e-split-button-large-trailing-button-unselected-leading-space - Leading space for the trailing button (large, unselected).\r\n * @cssprop --m3e-split-button-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (large, unselected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-large, unselected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-large, unselected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-selected-leading-space - Leading space for the trailing button (extra-small, selected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-small, selected).\r\n * @cssprop --m3e-split-button-small-trailing-button-selected-leading-space - Leading space for the trailing button (small, selected).\r\n * @cssprop --m3e-split-button-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (small, selected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-selected-leading-space - Leading space for the trailing button (medium, selected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-selected-trailing-space - Trailing space for the trailing button (medium, selected).\r\n * @cssprop --m3e-split-button-large-trailing-button-selected-leading-space - Leading space for the trailing button (large, selected).\r\n * @cssprop --m3e-split-button-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (large, selected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-selected-leading-space - Leading space for the trailing button (extra-large, selected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-large, selected).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-size - Inner corner size for the leading/trailing button (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-size - Inner corner size for the leading/trailing button (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-size - Inner corner size for the leading/trailing button (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-size - Inner corner size for the leading/trailing button (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-size - Inner corner size for the leading/trailing button (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-hover-size - Inner corner size on hover (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-hover-size - Inner corner size on hover (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-hover-size - Inner corner size on hover (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-hover-size - Inner corner size on hover (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-hover-size - Inner corner size on hover (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-pressed-size - Inner corner size on press (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-pressed-size - Inner corner size on press (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-pressed-size - Inner corner size on press (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-pressed-size - Inner corner size on press (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-pressed-size - Inner corner size on press (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-between-spacing - Spacing between leading and trailing buttons (extra-small).\r\n * @cssprop --m3e-split-button-small-between-spacing - Spacing between leading and trailing buttons (small).\r\n * @cssprop --m3e-split-button-medium-between-spacing - Spacing between leading and trailing buttons (medium).\r\n * @cssprop --m3e-split-button-large-between-spacing - Spacing between leading and trailing buttons (large).\r\n * @cssprop --m3e-split-button-extra-large-between-spacing - Spacing between leading and trailing buttons (extra-large).\r\n */\r\n@customElement(\"m3e-split-button\")\r\nexport class M3eSplitButtonElement extends Role(LitElement, \"group\") {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: inline-flex;\r\n vertical-align: middle;\r\n }\r\n ::slotted([slot=\"leading-button\"]) {\r\n flex: 1 1 auto;\r\n min-width: 0;\r\n --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${DesignToken.shape.corner.full});\r\n }\r\n\r\n ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"])) {\r\n --m3e-icon-button-extra-small-default-leading-space: var(\r\n --m3e-split-button-extra-small-trailing-button-unselected-leading-space,\r\n 0.75rem\r\n );\r\n --m3e-icon-button-extra-small-default-trailing-space: var(\r\n --m3e-split-button-extra-small-trailing-button-unselected-trailing-space,\r\n 0.875rem\r\n );\r\n --m3e-icon-button-small-default-leading-space: var(\r\n --m3e-split-button-small-trailing-button-unselected-leading-space,\r\n 0.75rem\r\n );\r\n --m3e-icon-button-small-default-trailing-space: var(\r\n --m3e-split-button-small-trailing-button-unselected-trailing-space,\r\n 0.875rem\r\n );\r\n --m3e-icon-button-medium-default-leading-space: var(\r\n --m3e-split-button-medium-trailing-button-unselected-leading-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-medium-default-trailing-space: var(\r\n --m3e-split-button-medium-trailing-button-unselected-trailing-space,\r\n 1.0625rem\r\n );\r\n --m3e-icon-button-large-default-leading-space: var(\r\n --m3e-split-button-large-trailing-button-unselected-leading-space,\r\n 1.625rem\r\n );\r\n --m3e-icon-button-large-default-trailing-space: var(\r\n --m3e-split-button-large-trailing-button-unselected-trailing-space,\r\n 2rem\r\n );\r\n --m3e-icon-button-extra-large-default-leading-space: var(\r\n --m3e-split-button-extra-large-trailing-button-unselected-leading-space,\r\n 2.3125rem\r\n );\r\n --m3e-icon-button-extra-large-default-trailing-space: var(\r\n --m3e-split-button-extra-large-trailing-button-unselected-trailing-space,\r\n 3.0625rem\r\n );\r\n }\r\n\r\n ::slotted([slot=\"trailing-button\"][aria-expanded=\"true\"]) {\r\n --m3e-icon-button-extra-small-default-leading-space: var(\r\n --m3e-split-button-extra-small-trailing-button-selected-leading-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-extra-small-default-trailing-space: var(\r\n --m3e-split-button-extra-small-trailing-button-selected-trailing-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-small-default-leading-space: var(\r\n --m3e-split-button-small-trailing-button-selected-leading-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-small-default-trailing-space: var(\r\n --m3e-split-button-small-trailing-button-selected-trailing-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-medium-default-leading-space: var(\r\n --m3e-split-button-medium-trailing-button-selected-leading-space,\r\n 0.9375rem\r\n );\r\n --m3e-icon-button-medium-default-trailing-space: var(\r\n --m3e-split-button-medium-trailing-button-selected-trailing-space,\r\n 0.9375rem\r\n );\r\n --m3e-icon-button-large-default-leading-space: var(\r\n --m3e-split-button-large-trailing-button-selected-leading-space,\r\n 1.8125rem\r\n );\r\n --m3e-icon-button-large-default-trailing-space: var(\r\n --m3e-split-button-large-trailing-button-selected-trailing-space,\r\n 1.8125rem\r\n );\r\n --m3e-icon-button-extra-large-default-leading-space: var(\r\n --m3e-split-button-extra-large-trailing-button-selected-leading-space,\r\n 2.6875rem\r\n );\r\n --m3e-icon-button-extra-large-default-trailing-space: var(\r\n --m3e-split-button-extra-large-trailing-button-selected-trailing-space,\r\n 2.6875rem\r\n );\r\n }\r\n\r\n ::slotted([slot=\"leading-button\"]:not(:hover)),\r\n ::slotted([slot=\"leading-button\"]:disabled),\r\n ::slotted([slot=\"leading-button\"][disabled-interactive]) {\r\n --m3e-connected-button-group-extra-small-inner-shape: var(\r\n --m3e-split-button-extra-small-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-small-inner-shape: var(\r\n --m3e-split-button-small-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-medium-inner-shape: var(\r\n --m3e-split-button-medium-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-large-inner-shape: var(\r\n --m3e-split-button-large-inner-corner-size,\r\n ${DesignToken.shape.corner.small}\r\n );\r\n --m3e-connected-button-group-extra-large-inner-shape: var(\r\n --m3e-split-button-extra-large-inner-corner-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n }\r\n ::slotted([slot=\"leading-button\"]:hover:not(:disabled):not([disabled-interactive])),\r\n ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"]):hover:not(:disabled):not([disabled-interactive])) {\r\n --m3e-connected-button-group-extra-small-inner-shape: var(\r\n --m3e-split-button-extra-small-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.small}\r\n );\r\n --m3e-connected-button-group-small-inner-shape: var(\r\n --m3e-split-button-small-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n --m3e-connected-button-group-medium-inner-shape: var(\r\n --m3e-split-button-medium-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n --m3e-connected-button-group-large-inner-shape: var(\r\n --m3e-split-button-large-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.largeIncreased}\r\n );\r\n --m3e-connected-button-group-extra-large-inner-shape: var(\r\n --m3e-split-button-extra-large-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.largeIncreased}\r\n );\r\n }\r\n\r\n ::slotted([slot=\"leading-button\"]),\r\n ::slotted([slot=\"trailing-button\"]) {\r\n --m3e-connected-button-group-extra-small-inner-pressed-shape: var(\r\n --m3e-split-button-extra-small-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.small}\r\n );\r\n --m3e-connected-button-group-small-inner-pressed-shape: var(\r\n --m3e-split-button-small-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n --m3e-connected-button-group-medium-inner-pressed-shape: var(\r\n --m3e-split-button-medium-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n --m3e-connected-button-group-large-inner-pressed-shape: var(\r\n --m3e-split-button-large-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.largeIncreased}\r\n );\r\n --m3e-connected-button-group-extra-large-inner-pressed-shape: var(\r\n --m3e-split-button-extra-large-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.largeIncreased}\r\n );\r\n }\r\n\r\n ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"]):not(:hover)),\r\n ::slotted([slot=\"trailing-button\"]:disabled),\r\n ::slotted([slot=\"trailing-button\"][disabled-interactive]) {\r\n --m3e-connected-button-group-extra-small-inner-shape: var(\r\n --m3e-split-button-extra-small-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-small-inner-shape: var(\r\n --m3e-split-button-small-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-medium-inner-shape: var(\r\n --m3e-split-button-medium-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-large-inner-shape: var(\r\n --m3e-split-button-large-inner-corner-size,\r\n ${DesignToken.shape.corner.small}\r\n );\r\n --m3e-connected-button-group-extra-large-inner-shape: var(\r\n --m3e-split-button-extra-large-inner-corner-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n }\r\n\r\n ::slotted([slot=\"trailing-button\"][aria-expanded=\"true\"]) {\r\n --_icon-button-icon-transform: rotate(180deg);\r\n --_button-rounded-start-shape: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n --_button-rounded-end-shape: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n }\r\n ::slotted([slot=\"trailing-button\"]) {\r\n --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n }\r\n .base {\r\n --m3e-icon-button-extra-small-icon-size: calc(\r\n var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(0)}\r\n );\r\n --m3e-button-extra-small-icon-size: calc(\r\n var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(0)}\r\n );\r\n --m3e-icon-button-small-icon-size: calc(\r\n var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(-1)}\r\n );\r\n --m3e-button-small-icon-size: calc(\r\n var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(-1)}\r\n );\r\n --m3e-icon-button-medium-icon-size: calc(\r\n var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken.density.calc(-2)}\r\n );\r\n --m3e-button-medium-icon-size: calc(\r\n var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken.density.calc(-2)}\r\n );\r\n --m3e-icon-button-large-icon-size: calc(\r\n var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken.density.calc(-3)}\r\n );\r\n --m3e-button-large-icon-size: calc(\r\n var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken.density.calc(-3)}\r\n );\r\n --m3e-icon-button-extra-large-icon-size: calc(\r\n var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken.density.calc(-3)}\r\n );\r\n --m3e-button-extra-large-icon-size: calc(\r\n var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken.density.calc(-3)}\r\n );\r\n }\r\n :host([size=\"extra-small\"]) .base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-small-between-spacing, 0.125rem);\r\n }\r\n :host([size=\"small\"]) .base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-small-between-spacing, 0.125rem);\r\n }\r\n :host([size=\"medium\"]).base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-medium-between-spacing, 0.125rem);\r\n }\r\n :host([size=\"large\"]) .base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-large-between-spacing, 0.125rem);\r\n }\r\n :host([size=\"extra-large\"]) .base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-large-between-spacing, 0.125rem);\r\n }\r\n `;\r\n\r\n @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n /** @private */ #leadingButton?: M3eButtonElement;\r\n /** @private */ #trailingButton?: M3eIconButtonElement;\r\n /** @private */ #trailingButtonHover = false;\r\n\r\n /** @private */ readonly #pressedController = new PressedController(this, {\r\n target: null,\r\n capture: true,\r\n minPressedDuration: 150,\r\n isPressedKey: (key) => key === \" \",\r\n callback: (pressed, _, target) => {\r\n switch (target) {\r\n case this.#leadingButton:\r\n this.#updateLeadingButtonShape(pressed);\r\n break;\r\n case this.#trailingButton:\r\n this.#updateTrailingButtonShape(pressed || this.#trailingButtonHover);\r\n break;\r\n }\r\n },\r\n });\r\n\r\n /** @private */ readonly #hoverController = new HoverController(this, {\r\n target: null,\r\n callback: (hovering, target) => {\r\n switch (target) {\r\n case this.#trailingButton:\r\n if (!this.#trailingButton?.disabled && !this.#trailingButton?.disabledInteractive) {\r\n this.#trailingButtonHover = hovering;\r\n this.#updateTrailingButtonShape(hovering);\r\n }\r\n break;\r\n }\r\n },\r\n });\r\n\r\n /**\r\n * The appearance variant of the button.\r\n * @default \"filled\"\r\n */\r\n @property({ reflect: true }) variant: SplitButtonVariant = \"filled\";\r\n\r\n /**\r\n * The size of the button.\r\n * @default \"small\"\r\n */\r\n @property({ reflect: true }) size: ButtonSize = \"small\";\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"variant\")) {\r\n this.#updateButtons();\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<m3e-button-group class=\"base\" disable-role variant=\"connected\" size=\"${this.size}\">\r\n <slot name=\"leading-button\" @slotchange=\"${this.#handleLeadingSlotChange}\"></slot>\r\n <slot name=\"trailing-button\" @slotchange=\"${this.#handleTrailingSlotChange}\"></slot>\r\n </m3e-button-group>`;\r\n }\r\n\r\n /** @private */\r\n #handleLeadingSlotChange(e: Event): void {\r\n if (this.#leadingButton) {\r\n this.#pressedController.unobserve(this.#leadingButton);\r\n }\r\n\r\n this.#leadingButton = (<HTMLSlotElement>e.target)\r\n .assignedElements({ flatten: true })\r\n .find((x) => x instanceof M3eButtonElement);\r\n\r\n if (this.#leadingButton) {\r\n this.#pressedController.observe(this.#leadingButton);\r\n }\r\n\r\n this.#updateButtons();\r\n }\r\n\r\n /** @private */\r\n #handleTrailingSlotChange(e: Event): void {\r\n if (this.#trailingButton) {\r\n this.#pressedController.unobserve(this.#trailingButton);\r\n this.#hoverController.unobserve(this.#trailingButton);\r\n }\r\n\r\n this.#trailingButton = (<HTMLSlotElement>e.target)\r\n .assignedElements({ flatten: true })\r\n .find((x) => x instanceof M3eIconButtonElement);\r\n\r\n if (this.#trailingButton) {\r\n this.#pressedController.observe(this.#trailingButton);\r\n this.#hoverController.observe(this.#trailingButton);\r\n }\r\n\r\n this.#updateButtons();\r\n }\r\n\r\n /** @private */\r\n #updateButtons(): void {\r\n if (this.#leadingButton) {\r\n this.#leadingButton.variant = this.variant;\r\n this.#leadingButton.size = this.size;\r\n this.#leadingButton.shape = \"rounded\";\r\n }\r\n\r\n if (this.#trailingButton) {\r\n this.#trailingButton.width = \"default\";\r\n this.#trailingButton.shape = \"rounded\";\r\n this.#trailingButton.setAttribute(\"variant\", this.variant);\r\n this.#trailingButton.size = this.size;\r\n }\r\n }\r\n\r\n /** @private */\r\n #updateLeadingButtonShape(update: boolean): void {\r\n if (update && this.#leadingButton) {\r\n this.#updateButtonShape(this.#leadingButton, \"--_leading-button-shape\");\r\n } else {\r\n this._base?.style.removeProperty(\"--_leading-button-shape\");\r\n }\r\n }\r\n\r\n /** @private */\r\n #updateTrailingButtonShape(update: boolean): void {\r\n if (update && this.#trailingButton) {\r\n this.#updateButtonShape(this.#trailingButton, \"--_trailing-button-shape\");\r\n } else {\r\n this._base?.style.removeProperty(\"--_trailing-button-shape\");\r\n }\r\n }\r\n\r\n /** @private */\r\n #updateButtonShape(button: HTMLElement, property: string): void {\r\n const adjustedShape = button.clientHeight / 2;\r\n if (adjustedShape) {\r\n this._base?.style.setProperty(property, `${adjustedShape}px`);\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-split-button\": M3eSplitButtonElement;\r\n }\r\n}\r\n"],"names":["M3eSplitButtonElement","Role","LitElement","constructor","_M3eSplitButtonElement_leadingButton","set","_M3eSplitButtonElement_trailingButton","_M3eSplitButtonElement_trailingButtonHover","_M3eSplitButtonElement_pressedController","PressedController","target","capture","minPressedDuration","isPressedKey","key","callback","pressed","_","__classPrivateFieldGet","_M3eSplitButtonElement_instances","_M3eSplitButtonElement_updateLeadingButtonShape","call","_M3eSplitButtonElement_updateTrailingButtonShape","_M3eSplitButtonElement_hoverController","HoverController","hovering","disabled","disabledInteractive","__classPrivateFieldSet","variant","size","update","changedProperties","has","_M3eSplitButtonElement_updateButtons","render","html","_M3eSplitButtonElement_handleLeadingSlotChange","_M3eSplitButtonElement_handleTrailingSlotChange","e","unobserve","assignedElements","flatten","find","x","M3eButtonElement","observe","M3eIconButtonElement","shape","width","setAttribute","_M3eSplitButtonElement_updateButtonShape","_base","style","removeProperty","button","property","adjustedShape","clientHeight","setProperty","styles","css","DesignToken","corner","full","extraSmall","small","medium","largeIncreased","density","calc","__decorate","query","prototype","reflect","customElement"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"split-button.min.js","sources":["../../src/split-button/SplitButtonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, HoverController, PressedController, Role } from \"@m3e/web/core\";\r\nimport { M3eButtonElement, ButtonSize } from \"@m3e/web/button\";\r\nimport { M3eIconButtonElement } from \"@m3e/web/icon-button\";\r\n\r\nimport \"@m3e/web/button-group\";\r\n\r\nimport { SplitButtonVariant } from \"./SplitButtonVariant\";\r\n\r\n/**\r\n * A button used to show an action with a menu of related actions.\r\n *\r\n * @description\r\n * The `m3e-split-button` component presents a primary action alongside a menu of related actions,\r\n * uniting two buttons in a single expressive surface. Designed for Material 3, it supports `elevated`,\r\n * `filled`, `tonal`, and `outlined` variants, and adapts to all button sizes. The leading button triggers\r\n * the main action, while the trailing icon button reveals additional options, enabling efficient workflows\r\n * and clear visual hierarchy. The split button ensures accessible, adaptive, and visually harmonious\r\n * interactions, reflecting Material 3’s principles of clarity, flexibility, and expressive design.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-split-button` to combine the `m3e-button`,\r\n * `m3e-icon-button`, and `m3e-menu` components into a split button.\r\n *\r\n * ```html\r\n * <m3e-split-button>\r\n * <m3e-button slot=\"leading-button\">\r\n * <m3e-icon slot=\"icon\" name=\"edit\"></m3e-icon>Edit\r\n * </m3e-button>\r\n * <m3e-icon-button slot=\"trailing-button\">\r\n * <m3e-icon name=\"keyboard_arrow_down\"></m3e-icon>\r\n * <m3e-menu-trigger for=\"menu1\"></m3e-menu-trigger>\r\n * </m3e-icon-button>\r\n * ```\r\n *\r\n * @tag m3e-split-button\r\n *\r\n * @slot leading-button - The leading button used to perform the primary action.\r\n * @slot trailing-button - The trailing icon button used to open a menu of related actions.\r\n *\r\n * @attr variant - The appearance variant of the button.\r\n * @attr size - The size of the button.\r\n *\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-small, unselected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-small, unselected).\r\n * @cssprop --m3e-split-button-small-trailing-button-unselected-leading-space - Leading space for the trailing button (small, unselected).\r\n * @cssprop --m3e-split-button-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (small, unselected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-unselected-leading-space - Leading space for the trailing button (medium, unselected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-unselected-trailing-space - Trailing space for the trailing button (medium, unselected).\r\n * @cssprop --m3e-split-button-large-trailing-button-unselected-leading-space - Leading space for the trailing button (large, unselected).\r\n * @cssprop --m3e-split-button-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (large, unselected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-large, unselected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-large, unselected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-selected-leading-space - Leading space for the trailing button (extra-small, selected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-small, selected).\r\n * @cssprop --m3e-split-button-small-trailing-button-selected-leading-space - Leading space for the trailing button (small, selected).\r\n * @cssprop --m3e-split-button-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (small, selected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-selected-leading-space - Leading space for the trailing button (medium, selected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-selected-trailing-space - Trailing space for the trailing button (medium, selected).\r\n * @cssprop --m3e-split-button-large-trailing-button-selected-leading-space - Leading space for the trailing button (large, selected).\r\n * @cssprop --m3e-split-button-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (large, selected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-selected-leading-space - Leading space for the trailing button (extra-large, selected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-large, selected).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-size - Inner corner size for the leading/trailing button (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-size - Inner corner size for the leading/trailing button (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-size - Inner corner size for the leading/trailing button (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-size - Inner corner size for the leading/trailing button (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-size - Inner corner size for the leading/trailing button (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-hover-size - Inner corner size on hover (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-hover-size - Inner corner size on hover (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-hover-size - Inner corner size on hover (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-hover-size - Inner corner size on hover (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-hover-size - Inner corner size on hover (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-pressed-size - Inner corner size on press (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-pressed-size - Inner corner size on press (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-pressed-size - Inner corner size on press (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-pressed-size - Inner corner size on press (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-pressed-size - Inner corner size on press (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-between-spacing - Spacing between leading and trailing buttons (extra-small).\r\n * @cssprop --m3e-split-button-small-between-spacing - Spacing between leading and trailing buttons (small).\r\n * @cssprop --m3e-split-button-medium-between-spacing - Spacing between leading and trailing buttons (medium).\r\n * @cssprop --m3e-split-button-large-between-spacing - Spacing between leading and trailing buttons (large).\r\n * @cssprop --m3e-split-button-extra-large-between-spacing - Spacing between leading and trailing buttons (extra-large).\r\n */\r\n@customElement(\"m3e-split-button\")\r\nexport class M3eSplitButtonElement extends Role(LitElement, \"group\") {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: inline-flex;\r\n vertical-align: middle;\r\n }\r\n ::slotted([slot=\"leading-button\"]) {\r\n flex: 1 1 auto;\r\n min-width: 0;\r\n --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${DesignToken.shape.corner.full});\r\n }\r\n\r\n ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"])) {\r\n --m3e-icon-button-extra-small-default-leading-space: var(\r\n --m3e-split-button-extra-small-trailing-button-unselected-leading-space,\r\n 0.75rem\r\n );\r\n --m3e-icon-button-extra-small-default-trailing-space: var(\r\n --m3e-split-button-extra-small-trailing-button-unselected-trailing-space,\r\n 0.875rem\r\n );\r\n --m3e-icon-button-small-default-leading-space: var(\r\n --m3e-split-button-small-trailing-button-unselected-leading-space,\r\n 0.75rem\r\n );\r\n --m3e-icon-button-small-default-trailing-space: var(\r\n --m3e-split-button-small-trailing-button-unselected-trailing-space,\r\n 0.875rem\r\n );\r\n --m3e-icon-button-medium-default-leading-space: var(\r\n --m3e-split-button-medium-trailing-button-unselected-leading-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-medium-default-trailing-space: var(\r\n --m3e-split-button-medium-trailing-button-unselected-trailing-space,\r\n 1.0625rem\r\n );\r\n --m3e-icon-button-large-default-leading-space: var(\r\n --m3e-split-button-large-trailing-button-unselected-leading-space,\r\n 1.625rem\r\n );\r\n --m3e-icon-button-large-default-trailing-space: var(\r\n --m3e-split-button-large-trailing-button-unselected-trailing-space,\r\n 2rem\r\n );\r\n --m3e-icon-button-extra-large-default-leading-space: var(\r\n --m3e-split-button-extra-large-trailing-button-unselected-leading-space,\r\n 2.3125rem\r\n );\r\n --m3e-icon-button-extra-large-default-trailing-space: var(\r\n --m3e-split-button-extra-large-trailing-button-unselected-trailing-space,\r\n 3.0625rem\r\n );\r\n }\r\n\r\n ::slotted([slot=\"trailing-button\"][aria-expanded=\"true\"]) {\r\n --m3e-icon-button-extra-small-default-leading-space: var(\r\n --m3e-split-button-extra-small-trailing-button-selected-leading-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-extra-small-default-trailing-space: var(\r\n --m3e-split-button-extra-small-trailing-button-selected-trailing-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-small-default-leading-space: var(\r\n --m3e-split-button-small-trailing-button-selected-leading-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-small-default-trailing-space: var(\r\n --m3e-split-button-small-trailing-button-selected-trailing-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-medium-default-leading-space: var(\r\n --m3e-split-button-medium-trailing-button-selected-leading-space,\r\n 0.9375rem\r\n );\r\n --m3e-icon-button-medium-default-trailing-space: var(\r\n --m3e-split-button-medium-trailing-button-selected-trailing-space,\r\n 0.9375rem\r\n );\r\n --m3e-icon-button-large-default-leading-space: var(\r\n --m3e-split-button-large-trailing-button-selected-leading-space,\r\n 1.8125rem\r\n );\r\n --m3e-icon-button-large-default-trailing-space: var(\r\n --m3e-split-button-large-trailing-button-selected-trailing-space,\r\n 1.8125rem\r\n );\r\n --m3e-icon-button-extra-large-default-leading-space: var(\r\n --m3e-split-button-extra-large-trailing-button-selected-leading-space,\r\n 2.6875rem\r\n );\r\n --m3e-icon-button-extra-large-default-trailing-space: var(\r\n --m3e-split-button-extra-large-trailing-button-selected-trailing-space,\r\n 2.6875rem\r\n );\r\n }\r\n\r\n ::slotted([slot=\"leading-button\"]:not(:hover)),\r\n ::slotted([slot=\"leading-button\"]:disabled),\r\n ::slotted([slot=\"leading-button\"][disabled-interactive]) {\r\n --m3e-connected-button-group-extra-small-inner-shape: var(\r\n --m3e-split-button-extra-small-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-small-inner-shape: var(\r\n --m3e-split-button-small-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-medium-inner-shape: var(\r\n --m3e-split-button-medium-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-large-inner-shape: var(\r\n --m3e-split-button-large-inner-corner-size,\r\n ${DesignToken.shape.corner.small}\r\n );\r\n --m3e-connected-button-group-extra-large-inner-shape: var(\r\n --m3e-split-button-extra-large-inner-corner-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n }\r\n ::slotted([slot=\"leading-button\"]:hover:not(:disabled):not([disabled-interactive])),\r\n ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"]):hover:not(:disabled):not([disabled-interactive])) {\r\n --m3e-connected-button-group-extra-small-inner-shape: var(\r\n --m3e-split-button-extra-small-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.small}\r\n );\r\n --m3e-connected-button-group-small-inner-shape: var(\r\n --m3e-split-button-small-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n --m3e-connected-button-group-medium-inner-shape: var(\r\n --m3e-split-button-medium-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n --m3e-connected-button-group-large-inner-shape: var(\r\n --m3e-split-button-large-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.largeIncreased}\r\n );\r\n --m3e-connected-button-group-extra-large-inner-shape: var(\r\n --m3e-split-button-extra-large-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.largeIncreased}\r\n );\r\n }\r\n\r\n ::slotted([slot=\"leading-button\"]),\r\n ::slotted([slot=\"trailing-button\"]) {\r\n --m3e-connected-button-group-extra-small-inner-pressed-shape: var(\r\n --m3e-split-button-extra-small-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.small}\r\n );\r\n --m3e-connected-button-group-small-inner-pressed-shape: var(\r\n --m3e-split-button-small-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n --m3e-connected-button-group-medium-inner-pressed-shape: var(\r\n --m3e-split-button-medium-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n --m3e-connected-button-group-large-inner-pressed-shape: var(\r\n --m3e-split-button-large-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.largeIncreased}\r\n );\r\n --m3e-connected-button-group-extra-large-inner-pressed-shape: var(\r\n --m3e-split-button-extra-large-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.largeIncreased}\r\n );\r\n }\r\n\r\n ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"]):not(:hover)),\r\n ::slotted([slot=\"trailing-button\"]:disabled),\r\n ::slotted([slot=\"trailing-button\"][disabled-interactive]) {\r\n --m3e-connected-button-group-extra-small-inner-shape: var(\r\n --m3e-split-button-extra-small-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-small-inner-shape: var(\r\n --m3e-split-button-small-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-medium-inner-shape: var(\r\n --m3e-split-button-medium-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-large-inner-shape: var(\r\n --m3e-split-button-large-inner-corner-size,\r\n ${DesignToken.shape.corner.small}\r\n );\r\n --m3e-connected-button-group-extra-large-inner-shape: var(\r\n --m3e-split-button-extra-large-inner-corner-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n }\r\n\r\n ::slotted([slot=\"trailing-button\"][aria-expanded=\"true\"]) {\r\n --_icon-button-icon-transform: rotate(180deg);\r\n --_button-rounded-start-shape: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n --_button-rounded-end-shape: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n }\r\n ::slotted([slot=\"trailing-button\"]) {\r\n --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n }\r\n .base {\r\n --m3e-icon-button-extra-small-icon-size: calc(\r\n var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(0)}\r\n );\r\n --m3e-button-extra-small-icon-size: calc(\r\n var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(0)}\r\n );\r\n --m3e-icon-button-small-icon-size: calc(\r\n var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(-1)}\r\n );\r\n --m3e-button-small-icon-size: calc(\r\n var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(-1)}\r\n );\r\n --m3e-icon-button-medium-icon-size: calc(\r\n var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken.density.calc(-2)}\r\n );\r\n --m3e-button-medium-icon-size: calc(\r\n var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken.density.calc(-2)}\r\n );\r\n --m3e-icon-button-large-icon-size: calc(\r\n var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken.density.calc(-3)}\r\n );\r\n --m3e-button-large-icon-size: calc(\r\n var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken.density.calc(-3)}\r\n );\r\n --m3e-icon-button-extra-large-icon-size: calc(\r\n var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken.density.calc(-3)}\r\n );\r\n --m3e-button-extra-large-icon-size: calc(\r\n var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken.density.calc(-3)}\r\n );\r\n }\r\n :host([size=\"extra-small\"]) .base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-small-between-spacing, 0.125rem);\r\n }\r\n :host([size=\"small\"]) .base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-small-between-spacing, 0.125rem);\r\n }\r\n :host([size=\"medium\"]).base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-medium-between-spacing, 0.125rem);\r\n }\r\n :host([size=\"large\"]) .base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-large-between-spacing, 0.125rem);\r\n }\r\n :host([size=\"extra-large\"]) .base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-large-between-spacing, 0.125rem);\r\n }\r\n `;\r\n\r\n @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n /** @private */ #leadingButton?: M3eButtonElement;\r\n /** @private */ #trailingButton?: M3eIconButtonElement;\r\n /** @private */ #trailingButtonHover = false;\r\n\r\n /** @private */ readonly #pressedController = new PressedController(this, {\r\n target: null,\r\n capture: true,\r\n minPressedDuration: 150,\r\n isPressedKey: (key) => key === \" \",\r\n callback: (pressed, _, target) => {\r\n switch (target) {\r\n case this.#leadingButton:\r\n this.#updateLeadingButtonShape(pressed);\r\n break;\r\n case this.#trailingButton:\r\n this.#updateTrailingButtonShape(pressed || this.#trailingButtonHover);\r\n break;\r\n }\r\n },\r\n });\r\n\r\n /** @private */ readonly #hoverController = new HoverController(this, {\r\n target: null,\r\n callback: (hovering, target) => {\r\n switch (target) {\r\n case this.#trailingButton:\r\n if (!this.#trailingButton?.disabled && !this.#trailingButton?.disabledInteractive) {\r\n this.#trailingButtonHover = hovering;\r\n this.#updateTrailingButtonShape(hovering);\r\n }\r\n break;\r\n }\r\n },\r\n });\r\n\r\n /**\r\n * The appearance variant of the button.\r\n * @default \"filled\"\r\n */\r\n @property({ reflect: true }) variant: SplitButtonVariant = \"filled\";\r\n\r\n /**\r\n * The size of the button.\r\n * @default \"small\"\r\n */\r\n @property({ reflect: true }) size: ButtonSize = \"small\";\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"variant\")) {\r\n this.#updateButtons();\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<m3e-button-group class=\"base\" disable-role variant=\"connected\" size=\"${this.size}\">\r\n <slot name=\"leading-button\" @slotchange=\"${this.#handleLeadingSlotChange}\"></slot>\r\n <slot name=\"trailing-button\" @slotchange=\"${this.#handleTrailingSlotChange}\"></slot>\r\n </m3e-button-group>`;\r\n }\r\n\r\n /** @private */\r\n #handleLeadingSlotChange(e: Event): void {\r\n if (this.#leadingButton) {\r\n this.#pressedController.unobserve(this.#leadingButton);\r\n }\r\n\r\n this.#leadingButton = (<HTMLSlotElement>e.target)\r\n .assignedElements({ flatten: true })\r\n .find((x) => x instanceof M3eButtonElement);\r\n\r\n if (this.#leadingButton) {\r\n this.#pressedController.observe(this.#leadingButton);\r\n }\r\n\r\n this.#updateButtons();\r\n }\r\n\r\n /** @private */\r\n #handleTrailingSlotChange(e: Event): void {\r\n if (this.#trailingButton) {\r\n this.#pressedController.unobserve(this.#trailingButton);\r\n this.#hoverController.unobserve(this.#trailingButton);\r\n }\r\n\r\n this.#trailingButton = (<HTMLSlotElement>e.target)\r\n .assignedElements({ flatten: true })\r\n .find((x) => x instanceof M3eIconButtonElement);\r\n\r\n if (this.#trailingButton) {\r\n this.#pressedController.observe(this.#trailingButton);\r\n this.#hoverController.observe(this.#trailingButton);\r\n }\r\n\r\n this.#updateButtons();\r\n }\r\n\r\n /** @private */\r\n #updateButtons(): void {\r\n if (this.#leadingButton) {\r\n this.#leadingButton.variant = this.variant;\r\n this.#leadingButton.size = this.size;\r\n this.#leadingButton.shape = \"rounded\";\r\n }\r\n\r\n if (this.#trailingButton) {\r\n this.#trailingButton.width = \"default\";\r\n this.#trailingButton.shape = \"rounded\";\r\n this.#trailingButton.setAttribute(\"variant\", this.variant);\r\n this.#trailingButton.size = this.size;\r\n }\r\n }\r\n\r\n /** @private */\r\n #updateLeadingButtonShape(update: boolean): void {\r\n if (update && this.#leadingButton) {\r\n this.#updateButtonShape(this.#leadingButton, \"--_leading-button-shape\");\r\n } else {\r\n this._base?.style.removeProperty(\"--_leading-button-shape\");\r\n }\r\n }\r\n\r\n /** @private */\r\n #updateTrailingButtonShape(update: boolean): void {\r\n if (update && this.#trailingButton) {\r\n this.#updateButtonShape(this.#trailingButton, \"--_trailing-button-shape\");\r\n } else {\r\n this._base?.style.removeProperty(\"--_trailing-button-shape\");\r\n }\r\n }\r\n\r\n /** @private */\r\n #updateButtonShape(button: HTMLElement, property: string): void {\r\n const adjustedShape = button.clientHeight / 2;\r\n if (adjustedShape) {\r\n this._base?.style.setProperty(property, `${adjustedShape}px`);\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-split-button\": M3eSplitButtonElement;\r\n }\r\n}\r\n"],"names":["M3eSplitButtonElement","Role","LitElement","constructor","_M3eSplitButtonElement_leadingButton","set","this","_M3eSplitButtonElement_trailingButton","_M3eSplitButtonElement_trailingButtonHover","_M3eSplitButtonElement_pressedController","PressedController","target","capture","minPressedDuration","isPressedKey","key","callback","pressed","_","__classPrivateFieldGet","_M3eSplitButtonElement_instances","_M3eSplitButtonElement_updateLeadingButtonShape","call","_M3eSplitButtonElement_updateTrailingButtonShape","_M3eSplitButtonElement_hoverController","HoverController","hovering","disabled","disabledInteractive","__classPrivateFieldSet","variant","size","update","changedProperties","super","has","_M3eSplitButtonElement_updateButtons","render","html","_M3eSplitButtonElement_handleLeadingSlotChange","_M3eSplitButtonElement_handleTrailingSlotChange","e","unobserve","assignedElements","flatten","find","x","M3eButtonElement","observe","M3eIconButtonElement","shape","width","setAttribute","_M3eSplitButtonElement_updateButtonShape","_base","style","removeProperty","button","property","adjustedShape","clientHeight","setProperty","styles","css","DesignToken","corner","full","extraSmall","small","medium","largeIncreased","density","calc","__decorate","query","prototype","reflect","customElement"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"split-button.min.js","sources":["../../src/split-button/SplitButtonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport { customElement, DesignToken, HoverController, PressedController, Role } from \"@m3e/web/core\";\r\nimport { M3eButtonElement, ButtonSize } from \"@m3e/web/button\";\r\nimport { M3eIconButtonElement } from \"@m3e/web/icon-button\";\r\n\r\nimport \"@m3e/web/button-group\";\r\n\r\nimport { SplitButtonVariant } from \"./SplitButtonVariant\";\r\n\r\n/**\r\n * A button used to show an action with a menu of related actions.\r\n *\r\n * @description\r\n * The `m3e-split-button` component presents a primary action alongside a menu of related actions,\r\n * uniting two buttons in a single expressive surface. Designed for Material 3, it supports `elevated`,\r\n * `filled`, `tonal`, and `outlined` variants, and adapts to all button sizes. The leading button triggers\r\n * the main action, while the trailing icon button reveals additional options, enabling efficient workflows\r\n * and clear visual hierarchy. The split button ensures accessible, adaptive, and visually harmonious\r\n * interactions, reflecting Material 3's principles of clarity, flexibility, and expressive design.\r\n *\r\n * @example\r\n * The following example illustrates use of the `m3e-split-button` to combine the `m3e-button`,\r\n * `m3e-icon-button`, and `m3e-menu` components into a split button.\r\n *\r\n * ```html\r\n * <m3e-split-button>\r\n * <m3e-button slot=\"leading-button\">\r\n * <m3e-icon slot=\"icon\" name=\"edit\"></m3e-icon>Edit\r\n * </m3e-button>\r\n * <m3e-icon-button slot=\"trailing-button\">\r\n * <m3e-icon name=\"keyboard_arrow_down\"></m3e-icon>\r\n * <m3e-menu-trigger for=\"menu1\"></m3e-menu-trigger>\r\n * </m3e-icon-button>\r\n * ```\r\n *\r\n * @tag m3e-split-button\r\n *\r\n * @slot leading-button - The leading button used to perform the primary action.\r\n * @slot trailing-button - The trailing icon button used to open a menu of related actions.\r\n *\r\n * @attr variant - The appearance variant of the button.\r\n * @attr size - The size of the button.\r\n *\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-small, unselected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-small, unselected).\r\n * @cssprop --m3e-split-button-small-trailing-button-unselected-leading-space - Leading space for the trailing button (small, unselected).\r\n * @cssprop --m3e-split-button-small-trailing-button-unselected-trailing-space - Trailing space for the trailing button (small, unselected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-unselected-leading-space - Leading space for the trailing button (medium, unselected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-unselected-trailing-space - Trailing space for the trailing button (medium, unselected).\r\n * @cssprop --m3e-split-button-large-trailing-button-unselected-leading-space - Leading space for the trailing button (large, unselected).\r\n * @cssprop --m3e-split-button-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (large, unselected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-unselected-leading-space - Leading space for the trailing button (extra-large, unselected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-unselected-trailing-space - Trailing space for the trailing button (extra-large, unselected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-selected-leading-space - Leading space for the trailing button (extra-small, selected).\r\n * @cssprop --m3e-split-button-extra-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-small, selected).\r\n * @cssprop --m3e-split-button-small-trailing-button-selected-leading-space - Leading space for the trailing button (small, selected).\r\n * @cssprop --m3e-split-button-small-trailing-button-selected-trailing-space - Trailing space for the trailing button (small, selected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-selected-leading-space - Leading space for the trailing button (medium, selected).\r\n * @cssprop --m3e-split-button-medium-trailing-button-selected-trailing-space - Trailing space for the trailing button (medium, selected).\r\n * @cssprop --m3e-split-button-large-trailing-button-selected-leading-space - Leading space for the trailing button (large, selected).\r\n * @cssprop --m3e-split-button-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (large, selected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-selected-leading-space - Leading space for the trailing button (extra-large, selected).\r\n * @cssprop --m3e-split-button-extra-large-trailing-button-selected-trailing-space - Trailing space for the trailing button (extra-large, selected).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-size - Inner corner size for the leading/trailing button (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-size - Inner corner size for the leading/trailing button (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-size - Inner corner size for the leading/trailing button (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-size - Inner corner size for the leading/trailing button (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-size - Inner corner size for the leading/trailing button (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-hover-size - Inner corner size on hover (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-hover-size - Inner corner size on hover (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-hover-size - Inner corner size on hover (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-hover-size - Inner corner size on hover (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-hover-size - Inner corner size on hover (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-inner-corner-pressed-size - Inner corner size on press (extra-small).\r\n * @cssprop --m3e-split-button-small-inner-corner-pressed-size - Inner corner size on press (small).\r\n * @cssprop --m3e-split-button-medium-inner-corner-pressed-size - Inner corner size on press (medium).\r\n * @cssprop --m3e-split-button-large-inner-corner-pressed-size - Inner corner size on press (large).\r\n * @cssprop --m3e-split-button-extra-large-inner-corner-pressed-size - Inner corner size on press (extra-large).\r\n * @cssprop --m3e-split-button-extra-small-between-spacing - Spacing between leading and trailing buttons (extra-small).\r\n * @cssprop --m3e-split-button-small-between-spacing - Spacing between leading and trailing buttons (small).\r\n * @cssprop --m3e-split-button-medium-between-spacing - Spacing between leading and trailing buttons (medium).\r\n * @cssprop --m3e-split-button-large-between-spacing - Spacing between leading and trailing buttons (large).\r\n * @cssprop --m3e-split-button-extra-large-between-spacing - Spacing between leading and trailing buttons (extra-large).\r\n */\r\n@customElement(\"m3e-split-button\")\r\nexport class M3eSplitButtonElement extends Role(LitElement, \"group\") {\r\n /** The styles of the element. */\r\n static override styles: CSSResultGroup = css`\r\n :host {\r\n display: inline-flex;\r\n vertical-align: middle;\r\n }\r\n ::slotted([slot=\"leading-button\"]) {\r\n flex: 1 1 auto;\r\n min-width: 0;\r\n --_button-start-shape-pressed-morph: var(--_leading-button-shape, ${DesignToken.shape.corner.full});\r\n }\r\n\r\n ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"])) {\r\n --m3e-icon-button-extra-small-default-leading-space: var(\r\n --m3e-split-button-extra-small-trailing-button-unselected-leading-space,\r\n 0.75rem\r\n );\r\n --m3e-icon-button-extra-small-default-trailing-space: var(\r\n --m3e-split-button-extra-small-trailing-button-unselected-trailing-space,\r\n 0.875rem\r\n );\r\n --m3e-icon-button-small-default-leading-space: var(\r\n --m3e-split-button-small-trailing-button-unselected-leading-space,\r\n 0.75rem\r\n );\r\n --m3e-icon-button-small-default-trailing-space: var(\r\n --m3e-split-button-small-trailing-button-unselected-trailing-space,\r\n 0.875rem\r\n );\r\n --m3e-icon-button-medium-default-leading-space: var(\r\n --m3e-split-button-medium-trailing-button-unselected-leading-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-medium-default-trailing-space: var(\r\n --m3e-split-button-medium-trailing-button-unselected-trailing-space,\r\n 1.0625rem\r\n );\r\n --m3e-icon-button-large-default-leading-space: var(\r\n --m3e-split-button-large-trailing-button-unselected-leading-space,\r\n 1.625rem\r\n );\r\n --m3e-icon-button-large-default-trailing-space: var(\r\n --m3e-split-button-large-trailing-button-unselected-trailing-space,\r\n 2rem\r\n );\r\n --m3e-icon-button-extra-large-default-leading-space: var(\r\n --m3e-split-button-extra-large-trailing-button-unselected-leading-space,\r\n 2.3125rem\r\n );\r\n --m3e-icon-button-extra-large-default-trailing-space: var(\r\n --m3e-split-button-extra-large-trailing-button-unselected-trailing-space,\r\n 3.0625rem\r\n );\r\n }\r\n\r\n ::slotted([slot=\"trailing-button\"][aria-expanded=\"true\"]) {\r\n --m3e-icon-button-extra-small-default-leading-space: var(\r\n --m3e-split-button-extra-small-trailing-button-selected-leading-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-extra-small-default-trailing-space: var(\r\n --m3e-split-button-extra-small-trailing-button-selected-trailing-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-small-default-leading-space: var(\r\n --m3e-split-button-small-trailing-button-selected-leading-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-small-default-trailing-space: var(\r\n --m3e-split-button-small-trailing-button-selected-trailing-space,\r\n 0.8125rem\r\n );\r\n --m3e-icon-button-medium-default-leading-space: var(\r\n --m3e-split-button-medium-trailing-button-selected-leading-space,\r\n 0.9375rem\r\n );\r\n --m3e-icon-button-medium-default-trailing-space: var(\r\n --m3e-split-button-medium-trailing-button-selected-trailing-space,\r\n 0.9375rem\r\n );\r\n --m3e-icon-button-large-default-leading-space: var(\r\n --m3e-split-button-large-trailing-button-selected-leading-space,\r\n 1.8125rem\r\n );\r\n --m3e-icon-button-large-default-trailing-space: var(\r\n --m3e-split-button-large-trailing-button-selected-trailing-space,\r\n 1.8125rem\r\n );\r\n --m3e-icon-button-extra-large-default-leading-space: var(\r\n --m3e-split-button-extra-large-trailing-button-selected-leading-space,\r\n 2.6875rem\r\n );\r\n --m3e-icon-button-extra-large-default-trailing-space: var(\r\n --m3e-split-button-extra-large-trailing-button-selected-trailing-space,\r\n 2.6875rem\r\n );\r\n }\r\n\r\n ::slotted([slot=\"leading-button\"]:not(:hover)),\r\n ::slotted([slot=\"leading-button\"]:disabled),\r\n ::slotted([slot=\"leading-button\"][disabled-interactive]) {\r\n --m3e-connected-button-group-extra-small-inner-shape: var(\r\n --m3e-split-button-extra-small-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-small-inner-shape: var(\r\n --m3e-split-button-small-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-medium-inner-shape: var(\r\n --m3e-split-button-medium-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-large-inner-shape: var(\r\n --m3e-split-button-large-inner-corner-size,\r\n ${DesignToken.shape.corner.small}\r\n );\r\n --m3e-connected-button-group-extra-large-inner-shape: var(\r\n --m3e-split-button-extra-large-inner-corner-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n }\r\n ::slotted([slot=\"leading-button\"]:hover:not(:disabled):not([disabled-interactive])),\r\n ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"]):hover:not(:disabled):not([disabled-interactive])) {\r\n --m3e-connected-button-group-extra-small-inner-shape: var(\r\n --m3e-split-button-extra-small-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.small}\r\n );\r\n --m3e-connected-button-group-small-inner-shape: var(\r\n --m3e-split-button-small-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n --m3e-connected-button-group-medium-inner-shape: var(\r\n --m3e-split-button-medium-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n --m3e-connected-button-group-large-inner-shape: var(\r\n --m3e-split-button-large-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.largeIncreased}\r\n );\r\n --m3e-connected-button-group-extra-large-inner-shape: var(\r\n --m3e-split-button-extra-large-inner-corner-hover-size,\r\n ${DesignToken.shape.corner.largeIncreased}\r\n );\r\n }\r\n\r\n ::slotted([slot=\"leading-button\"]),\r\n ::slotted([slot=\"trailing-button\"]) {\r\n --m3e-connected-button-group-extra-small-inner-pressed-shape: var(\r\n --m3e-split-button-extra-small-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.small}\r\n );\r\n --m3e-connected-button-group-small-inner-pressed-shape: var(\r\n --m3e-split-button-small-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n --m3e-connected-button-group-medium-inner-pressed-shape: var(\r\n --m3e-split-button-medium-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n --m3e-connected-button-group-large-inner-pressed-shape: var(\r\n --m3e-split-button-large-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.largeIncreased}\r\n );\r\n --m3e-connected-button-group-extra-large-inner-pressed-shape: var(\r\n --m3e-split-button-extra-large-inner-corner-pressed-size,\r\n ${DesignToken.shape.corner.largeIncreased}\r\n );\r\n }\r\n\r\n ::slotted([slot=\"trailing-button\"]:not([aria-expanded=\"true\"]):not(:hover)),\r\n ::slotted([slot=\"trailing-button\"]:disabled),\r\n ::slotted([slot=\"trailing-button\"][disabled-interactive]) {\r\n --m3e-connected-button-group-extra-small-inner-shape: var(\r\n --m3e-split-button-extra-small-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-small-inner-shape: var(\r\n --m3e-split-button-small-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-medium-inner-shape: var(\r\n --m3e-split-button-medium-inner-corner-size,\r\n ${DesignToken.shape.corner.extraSmall}\r\n );\r\n --m3e-connected-button-group-large-inner-shape: var(\r\n --m3e-split-button-large-inner-corner-size,\r\n ${DesignToken.shape.corner.small}\r\n );\r\n --m3e-connected-button-group-extra-large-inner-shape: var(\r\n --m3e-split-button-extra-large-inner-corner-size,\r\n ${DesignToken.shape.corner.medium}\r\n );\r\n }\r\n\r\n ::slotted([slot=\"trailing-button\"][aria-expanded=\"true\"]) {\r\n --_icon-button-icon-transform: rotate(180deg);\r\n --_button-rounded-start-shape: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n --_button-rounded-end-shape: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n }\r\n ::slotted([slot=\"trailing-button\"]) {\r\n --_button-end-shape-pressed-morph: var(--_trailing-button-shape, ${DesignToken.shape.corner.full});\r\n }\r\n .base {\r\n --m3e-icon-button-extra-small-icon-size: calc(\r\n var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(0)}\r\n );\r\n --m3e-button-extra-small-icon-size: calc(\r\n var(--m3e-spit-button-extra-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(0)}\r\n );\r\n --m3e-icon-button-small-icon-size: calc(\r\n var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(-1)}\r\n );\r\n --m3e-button-small-icon-size: calc(\r\n var(--m3e-spit-button-small-trailing-button-icon-size, 1.375rem) + ${DesignToken.density.calc(-1)}\r\n );\r\n --m3e-icon-button-medium-icon-size: calc(\r\n var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken.density.calc(-2)}\r\n );\r\n --m3e-button-medium-icon-size: calc(\r\n var(--m3e-spit-button-medium-trailing-button-icon-size, 1.625rem) + ${DesignToken.density.calc(-2)}\r\n );\r\n --m3e-icon-button-large-icon-size: calc(\r\n var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken.density.calc(-3)}\r\n );\r\n --m3e-button-large-icon-size: calc(\r\n var(--m3e-spit-button-large-trailing-button-icon-size, 2.375rem) + ${DesignToken.density.calc(-3)}\r\n );\r\n --m3e-icon-button-extra-large-icon-size: calc(\r\n var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken.density.calc(-3)}\r\n );\r\n --m3e-button-extra-large-icon-size: calc(\r\n var(--m3e-spit-button-extra-large-trailing-button-icon-size, 3.125rem) + ${DesignToken.density.calc(-3)}\r\n );\r\n }\r\n :host([size=\"extra-small\"]) .base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-small-between-spacing, 0.125rem);\r\n }\r\n :host([size=\"small\"]) .base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-small-between-spacing, 0.125rem);\r\n }\r\n :host([size=\"medium\"]).base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-medium-between-spacing, 0.125rem);\r\n }\r\n :host([size=\"large\"]) .base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-large-between-spacing, 0.125rem);\r\n }\r\n :host([size=\"extra-large\"]) .base {\r\n --m3e-connected-button-group-spacing: var(--m3e-split-button-extra-large-between-spacing, 0.125rem);\r\n }\r\n `;\r\n\r\n @query(\".base\") private readonly _base?: HTMLElement;\r\n\r\n /** @private */ #leadingButton?: M3eButtonElement;\r\n /** @private */ #trailingButton?: M3eIconButtonElement;\r\n /** @private */ #trailingButtonHover = false;\r\n\r\n /** @private */ readonly #pressedController = new PressedController(this, {\r\n target: null,\r\n capture: true,\r\n minPressedDuration: 150,\r\n isPressedKey: (key) => key === \" \",\r\n callback: (pressed, _, target) => {\r\n switch (target) {\r\n case this.#leadingButton:\r\n this.#updateLeadingButtonShape(pressed);\r\n break;\r\n case this.#trailingButton:\r\n this.#updateTrailingButtonShape(pressed || this.#trailingButtonHover);\r\n break;\r\n }\r\n },\r\n });\r\n\r\n /** @private */ readonly #hoverController = new HoverController(this, {\r\n target: null,\r\n callback: (hovering, target) => {\r\n switch (target) {\r\n case this.#trailingButton:\r\n if (!this.#trailingButton?.disabled && !this.#trailingButton?.disabledInteractive) {\r\n this.#trailingButtonHover = hovering;\r\n this.#updateTrailingButtonShape(hovering);\r\n }\r\n break;\r\n }\r\n },\r\n });\r\n\r\n /**\r\n * The appearance variant of the button.\r\n * @default \"filled\"\r\n */\r\n @property({ reflect: true }) variant: SplitButtonVariant = \"filled\";\r\n\r\n /**\r\n * The size of the button.\r\n * @default \"small\"\r\n */\r\n @property({ reflect: true }) size: ButtonSize = \"small\";\r\n\r\n /** @inheritdoc */\r\n protected override update(changedProperties: PropertyValues<this>): void {\r\n super.update(changedProperties);\r\n\r\n if (changedProperties.has(\"variant\")) {\r\n this.#updateButtons();\r\n }\r\n }\r\n\r\n /** @inheritdoc */\r\n protected override render(): unknown {\r\n return html`<m3e-button-group class=\"base\" disable-role variant=\"connected\" size=\"${this.size}\">\r\n <slot name=\"leading-button\" @slotchange=\"${this.#handleLeadingSlotChange}\"></slot>\r\n <slot name=\"trailing-button\" @slotchange=\"${this.#handleTrailingSlotChange}\"></slot>\r\n </m3e-button-group>`;\r\n }\r\n\r\n /** @private */\r\n #handleLeadingSlotChange(e: Event): void {\r\n if (this.#leadingButton) {\r\n this.#pressedController.unobserve(this.#leadingButton);\r\n }\r\n\r\n this.#leadingButton = (<HTMLSlotElement>e.target)\r\n .assignedElements({ flatten: true })\r\n .find((x) => x instanceof M3eButtonElement);\r\n\r\n if (this.#leadingButton) {\r\n this.#pressedController.observe(this.#leadingButton);\r\n }\r\n\r\n this.#updateButtons();\r\n }\r\n\r\n /** @private */\r\n #handleTrailingSlotChange(e: Event): void {\r\n if (this.#trailingButton) {\r\n this.#pressedController.unobserve(this.#trailingButton);\r\n this.#hoverController.unobserve(this.#trailingButton);\r\n }\r\n\r\n this.#trailingButton = (<HTMLSlotElement>e.target)\r\n .assignedElements({ flatten: true })\r\n .find((x) => x instanceof M3eIconButtonElement);\r\n\r\n if (this.#trailingButton) {\r\n this.#pressedController.observe(this.#trailingButton);\r\n this.#hoverController.observe(this.#trailingButton);\r\n }\r\n\r\n this.#updateButtons();\r\n }\r\n\r\n /** @private */\r\n #updateButtons(): void {\r\n if (this.#leadingButton) {\r\n this.#leadingButton.variant = this.variant;\r\n this.#leadingButton.size = this.size;\r\n this.#leadingButton.shape = \"rounded\";\r\n }\r\n\r\n if (this.#trailingButton) {\r\n this.#trailingButton.width = \"default\";\r\n this.#trailingButton.shape = \"rounded\";\r\n this.#trailingButton.setAttribute(\"variant\", this.variant);\r\n this.#trailingButton.size = this.size;\r\n }\r\n }\r\n\r\n /** @private */\r\n #updateLeadingButtonShape(update: boolean): void {\r\n if (update && this.#leadingButton) {\r\n this.#updateButtonShape(this.#leadingButton, \"--_leading-button-shape\");\r\n } else {\r\n this._base?.style.removeProperty(\"--_leading-button-shape\");\r\n }\r\n }\r\n\r\n /** @private */\r\n #updateTrailingButtonShape(update: boolean): void {\r\n if (update && this.#trailingButton) {\r\n this.#updateButtonShape(this.#trailingButton, \"--_trailing-button-shape\");\r\n } else {\r\n this._base?.style.removeProperty(\"--_trailing-button-shape\");\r\n }\r\n }\r\n\r\n /** @private */\r\n #updateButtonShape(button: HTMLElement, property: string): void {\r\n const adjustedShape = button.clientHeight / 2;\r\n if (adjustedShape) {\r\n this._base?.style.setProperty(property, `${adjustedShape}px`);\r\n }\r\n }\r\n}\r\n\r\ndeclare global {\r\n interface HTMLElementTagNameMap {\r\n \"m3e-split-button\": M3eSplitButtonElement;\r\n }\r\n}\r\n"],"names":["M3eSplitButtonElement","Role","LitElement","constructor","_M3eSplitButtonElement_leadingButton","set","this","_M3eSplitButtonElement_trailingButton","_M3eSplitButtonElement_trailingButtonHover","_M3eSplitButtonElement_pressedController","PressedController","target","capture","minPressedDuration","isPressedKey","key","callback","pressed","_","__classPrivateFieldGet","_M3eSplitButtonElement_instances","_M3eSplitButtonElement_updateLeadingButtonShape","call","_M3eSplitButtonElement_updateTrailingButtonShape","_M3eSplitButtonElement_hoverController","HoverController","hovering","disabled","disabledInteractive","__classPrivateFieldSet","variant","size","update","changedProperties","super","has","_M3eSplitButtonElement_updateButtons","render","html","_M3eSplitButtonElement_handleLeadingSlotChange","_M3eSplitButtonElement_handleTrailingSlotChange","e","unobserve","assignedElements","flatten","find","x","M3eButtonElement","observe","M3eIconButtonElement","shape","width","setAttribute","_M3eSplitButtonElement_updateButtonShape","_base","style","removeProperty","button","property","adjustedShape","clientHeight","setProperty","styles","css","DesignToken","corner","full","extraSmall","small","medium","largeIncreased","density","calc","__decorate","query","prototype","reflect","customElement"],"mappings":";;;;;qeAuFO,IAAMA,EAAN,cAAoCC,EAAKC,EAAY,UAArDC,WAAAA,mCA+PWC,EAAAC,IAAAC,aACAC,EAAAF,IAAAC,aACAE,EAAAH,IAAAC,MAAuB,GAEdG,EAAAJ,IAAAC,KAAqB,IAAII,EAAkBJ,KAAM,CACxEK,OAAQ,KACRC,SAAS,EACTC,mBAAoB,IACpBC,aAAeC,GAAgB,MAARA,EACvBC,SAAUA,CAACC,EAASC,EAAGP,KACrB,OAAQA,GACN,KAAKQ,EAAAb,KAAIF,EAAA,KACPe,EAAAb,KAAIc,EAAA,IAAAC,GAA0BC,KAA9BhB,KAA+BW,GAC/B,MACF,KAAKE,EAAAb,KAAIC,EAAA,KACPY,EAAAb,KAAIc,EAAA,IAAAG,GAA2BD,KAA/BhB,KAAgCW,GAAWE,EAAAb,KAAIE,EAAA,WAM9BgB,EAAAnB,IAAAC,KAAmB,IAAImB,EAAgBnB,KAAM,CACpEK,OAAQ,KACRK,SAAUA,CAACU,EAAUf,KACnB,GAAQA,IACDQ,EAAAb,KAAIC,EAAA,KACFY,EAAAb,KAAIC,EAAA,MAAkBoB,UAAaR,EAAAb,KAAIC,EAAA,MAAkBqB,sBAC5DC,EAAAvB,KAAIE,EAAwBkB,EAAQ,KACpCP,EAAAb,KAAIc,EAAA,IAAAG,GAA2BD,KAA/BhB,KAAgCoB,QAWbpB,KAAAwB,QAA8B,SAM9BxB,KAAAyB,KAAmB,OAgGlD,CA7FqBC,MAAAA,CAAOC,GACxBC,MAAMF,OAAOC,GAETA,EAAkBE,IAAI,YACxBhB,EAAAb,KAAIc,EAAA,IAAAgB,GAAed,KAAnBhB,KAEJ,CAGmB+B,MAAAA,GACjB,OAAOC,CAAI,yEAAyEhC,KAAKyB,kDAC5CZ,EAAAb,KAAIc,EAAA,IAAAmB,wDACHpB,EAAAb,KAAIc,EAAA,IAAAoB,gCAEpD,kGAGyBC,GACnBtB,EAAAb,KAAIF,EAAA,MACNe,EAAAb,YAAwBoC,UAAUvB,EAAAb,KAAIF,EAAA,MAGxCyB,EAAAvB,KAAIF,EAAoCqC,EAAE9B,OACvCgC,iBAAiB,CAAEC,SAAS,IAC5BC,KAAMC,GAAMA,aAAaC,GAAiB,KAEzC5B,EAAAb,KAAIF,EAAA,MACNe,EAAAb,YAAwB0C,QAAQ7B,EAAAb,KAAIF,EAAA,MAGtCe,EAAAb,KAAIc,EAAA,IAAAgB,GAAed,KAAnBhB,KACF,aAG0BmC,GACpBtB,EAAAb,KAAIC,EAAA,OACNY,EAAAb,YAAwBoC,UAAUvB,EAAAb,KAAIC,EAAA,MACtCY,EAAAb,YAAsBoC,UAAUvB,EAAAb,KAAIC,EAAA,OAGtCsB,EAAAvB,KAAIC,EAAqCkC,EAAE9B,OACxCgC,iBAAiB,CAAEC,SAAS,IAC5BC,KAAMC,GAAMA,aAAaG,GAAqB,KAE7C9B,EAAAb,KAAIC,EAAA,OACNY,EAAAb,YAAwB0C,QAAQ7B,EAAAb,KAAIC,EAAA,MACpCY,EAAAb,YAAsB0C,QAAQ7B,EAAAb,KAAIC,EAAA,OAGpCY,EAAAb,KAAIc,EAAA,IAAAgB,GAAed,KAAnBhB,KACF,eAIMa,EAAAb,KAAIF,EAAA,OACNe,EAAAb,YAAoBwB,QAAUxB,KAAKwB,QACnCX,EAAAb,YAAoByB,KAAOzB,KAAKyB,KAChCZ,EAAAb,KAAIF,EAAA,KAAgB8C,MAAQ,WAG1B/B,EAAAb,KAAIC,EAAA,OACNY,EAAAb,KAAIC,EAAA,KAAiB4C,MAAQ,UAC7BhC,EAAAb,KAAIC,EAAA,KAAiB2C,MAAQ,UAC7B/B,EAAAb,KAAIC,EAAA,KAAiB6C,aAAa,UAAW9C,KAAKwB,SAClDX,EAAAb,YAAqByB,KAAOzB,KAAKyB,KAErC,aAG0BC,GACpBA,GAAUb,EAAAb,KAAIF,EAAA,KAChBe,EAAAb,KAAIc,EAAA,IAAAiC,GAAmB/B,KAAvBhB,KAAwBa,EAAAb,KAAIF,EAAA,KAAiB,2BAE7CE,KAAKgD,OAAOC,MAAMC,eAAe,0BAErC,aAG2BxB,GACrBA,GAAUb,EAAAb,KAAIC,EAAA,KAChBY,EAAAb,KAAIc,EAAA,IAAAiC,GAAmB/B,KAAvBhB,KAAwBa,EAAAb,KAAIC,EAAA,KAAkB,4BAE9CD,KAAKgD,OAAOC,MAAMC,eAAe,2BAErC,EAGmBH,EAAA,SAAAI,EAAqBC,GACtC,MAAMC,EAAgBF,EAAOG,aAAe,EACxCD,GACFrD,KAAKgD,OAAOC,MAAMM,YAAYH,EAAU,GAAGC,MAE/C,EAzYgB3D,EAAA8D,OAAyBC,CAAG,gMAQ4BC,EAAYd,MAAMe,OAAOC,+jGA8FzFF,EAAYd,MAAMe,OAAOE,kHAIzBH,EAAYd,MAAMe,OAAOE,oHAIzBH,EAAYd,MAAMe,OAAOE,kHAIzBH,EAAYd,MAAMe,OAAOG,yHAIzBJ,EAAYd,MAAMe,OAAOI,0UAOzBL,EAAYd,MAAMe,OAAOG,mHAIzBJ,EAAYd,MAAMe,OAAOI,sHAIzBL,EAAYd,MAAMe,OAAOI,oHAIzBL,EAAYd,MAAMe,OAAOK,wIAIzBN,EAAYd,MAAMe,OAAOK,8NAQzBN,EAAYd,MAAMe,OAAOG,6HAIzBJ,EAAYd,MAAMe,OAAOI,gIAIzBL,EAAYd,MAAMe,OAAOI,8HAIzBL,EAAYd,MAAMe,OAAOK,kJAIzBN,EAAYd,MAAMe,OAAOK,2TASzBN,EAAYd,MAAMe,OAAOE,kHAIzBH,EAAYd,MAAMe,OAAOE,oHAIzBH,EAAYd,MAAMe,OAAOE,kHAIzBH,EAAYd,MAAMe,OAAOG,yHAIzBJ,EAAYd,MAAMe,OAAOI,uLAMkCL,EAAYd,MAAMe,OAAOC,qEAC3BF,EAAYd,MAAMe,OAAOC,mHAGnBF,EAAYd,MAAMe,OAAOC,4IAIfF,EAAYO,QAAQC,KAAK,4HAGzBR,EAAYO,QAAQC,KAAK,qHAG/BR,EAAYO,QAAQC,MAAK,gHAGzBR,EAAYO,QAAQC,MAAK,uHAGxBR,EAAYO,QAAQC,MAAK,kHAGzBR,EAAYO,QAAQC,MAAK,qHAG1BR,EAAYO,QAAQC,MAAK,gHAGzBR,EAAYO,QAAQC,MAAK,iIAGnBR,EAAYO,QAAQC,MAAK,4HAGzBR,EAAYO,QAAQC,oqBAoBpEC,EAAA,CAAhCC,EAAM,UAA8C1E,EAAA2E,UAAA,gBAyCxBF,EAAA,CAA5Bf,EAAS,CAAEkB,SAAS,KAA+C5E,EAAA2E,UAAA,eAAA,GAMvCF,EAAA,CAA5Bf,EAAS,CAAEkB,SAAS,KAAmC5E,EAAA2E,UAAA,YAAA,GA5S7C3E,EAAqByE,EAAA,CADjCI,EAAc,qBACF7E"}
|
|
@@ -48,6 +48,7 @@ declare const M3eAutocompleteElement_base: import("../core/shared/mixins/Constru
|
|
|
48
48
|
*
|
|
49
49
|
* @fires toggle - Emitted when the options menu opens or closes.
|
|
50
50
|
* @fires query - Emitted when the input is focused or when the user modifies its value.
|
|
51
|
+
* @fires change - Emitted when the committed value changes due to selecting an option or clearing the input.
|
|
51
52
|
*/
|
|
52
53
|
export declare class M3eAutocompleteElement extends M3eAutocompleteElement_base {
|
|
53
54
|
#private;
|
|
@@ -119,6 +120,10 @@ export declare class M3eAutocompleteElement extends M3eAutocompleteElement_base
|
|
|
119
120
|
panelClass: string;
|
|
120
121
|
/** The options that can be selected. */
|
|
121
122
|
get options(): readonly M3eOptionElement[];
|
|
123
|
+
/** The selected option. */
|
|
124
|
+
get selected(): M3eOptionElement | null;
|
|
125
|
+
/** The selected (enabled) value. */
|
|
126
|
+
get value(): string | null;
|
|
122
127
|
/** @inheritdoc */
|
|
123
128
|
attach(control: HTMLElement): void;
|
|
124
129
|
/** @inheritdoc */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutocompleteElement.d.ts","sourceRoot":"","sources":["../../../src/autocomplete/AutocompleteElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAiB5E,OAAO,EAAsB,gBAAgB,EAAyB,MAAM,iBAAiB,CAAC;AAG9F,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;;AAE9E
|
|
1
|
+
{"version":3,"file":"AutocompleteElement.d.ts","sourceRoot":"","sources":["../../../src/autocomplete/AutocompleteElement.ts"],"names":[],"mappings":"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"}
|
|
@@ -60,6 +60,7 @@ import "./YearViewElement";
|
|
|
60
60
|
* @cssprop --m3e-calendar-weekday-font-weight - Font weight of weekday labels in month view.
|
|
61
61
|
* @cssprop --m3e-calendar-weekday-line-height - Line height of weekday labels in month view.
|
|
62
62
|
* @cssprop --m3e-calendar-weekday-tracking - Letter spacing of weekday labels in month view.
|
|
63
|
+
* @cssprop --m3e-calendar-weekday-color - Text color for weekday labels in month view.
|
|
63
64
|
* @cssprop --m3e-calendar-date-font-size - Font size of date cells in month view.
|
|
64
65
|
* @cssprop --m3e-calendar-date-font-weight - Font weight of date cells in month view.
|
|
65
66
|
* @cssprop --m3e-calendar-date-line-height - Line height of date cells in month view.
|
|
@@ -68,6 +69,7 @@ import "./YearViewElement";
|
|
|
68
69
|
* @cssprop --m3e-calendar-item-font-weight - Font weight of items in year and multi‑year views.
|
|
69
70
|
* @cssprop --m3e-calendar-item-line-height - Line height of items in year and multi‑year views.
|
|
70
71
|
* @cssprop --m3e-calendar-item-tracking - Letter spacing of items in year and multi‑year views.
|
|
72
|
+
* @cssprop --m3e-calendar-item-color - Text color for date items.
|
|
71
73
|
* @cssprop --m3e-calendar-item-selected-color - Text color for selected date items.
|
|
72
74
|
* @cssprop --m3e-calendar-item-selected-container-color - Background color for selected date items.
|
|
73
75
|
* @cssprop --m3e-calendar-item-selected-ripple-color - Ripple color used when interacting with selected date items.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarElement.d.ts","sourceRoot":"","sources":["../../../src/calendar/CalendarElement.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAQvF,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,mBAAmB,CAAC;AAE3B
|
|
1
|
+
{"version":3,"file":"CalendarElement.d.ts","sourceRoot":"","sources":["../../../src/calendar/CalendarElement.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAa,MAAM,KAAK,CAAC;AAQvF,OAAO,iBAAiB,CAAC;AACzB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,kBAAkB,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAK9C,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,mBAAmB,CAAC;AAE3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AACH,qBACa,kBAAmB,SAAQ,UAAU;;IAChD,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA8GpC;IAGF,eAAe,CAAU,OAAO,CAAC,MAAM,CAAc;IACrD,eAAe,CAAU,OAAO,CAAC,WAAW,CAAyB;IACrE,eAAe,CAAU,OAAO,CAAC,WAAW,CAAoB;IAChE,eAAe,CAAmB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAA0B;IACnF,eAAe,CAAiB,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAe;IAErE;;;OAGG;IACoC,SAAS,EAAE,YAAY,CAAW;IAEzE;;;OAGG;IACqC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEjE;;;OAGG;IAC4D,OAAO,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE3F;;;OAGG;IAC4D,OAAO,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE3F;;;OAGG;IAC4D,OAAO,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE3F;;;OAGG;IAC+D,UAAU,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEjG;;;OAGG;IAC6D,QAAQ,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE7F;;;OAGG;IAC6B,aAAa,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,GAAG,IAAI,CAAQ;IAEvF;;;OAGG;IAC6B,YAAY,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,GAAG,IAAI,CAAQ;IAEtF;;;OAGG;IAC8C,kBAAkB,SAAoB;IAEvF;;;OAGG;IAC6C,iBAAiB,SAAmB;IAEpF;;;OAGG;IACmD,sBAAsB,SAAuB;IAEnG;;;OAGG;IAC0C,cAAc,SAAgB;IAE3E;;;OAGG;IACyC,aAAa,SAAe;IAExE;;;OAGG;IAC+C,kBAAkB,SAAmB;IAEvF,mDAAmD;IACnD,IAAI,WAAW,IAAI,MAAM,CAkBxB;IAED,4DAA4D;IAC5D,IAAI,qBAAqB,IAAI,OAAO,CAYnC;IAED,wDAAwD;IACxD,IAAI,iBAAiB,IAAI,OAAO,CAY/B;IAED;;;OAGG;IACG,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;IAOtC,4BAA4B;IAC5B,eAAe,IAAI,IAAI;IAIvB;;;OAGG;IACG,kBAAkB,IAAI,OAAO,CAAC,IAAI,CAAC;IAqCzC;;;OAGG;IACG,cAAc,IAAI,OAAO,CAAC,IAAI,CAAC;IAqCrC;;;OAGG;IACG,YAAY,IAAI,OAAO,CAAC,IAAI,CAAC;IAMnC,kBAAkB;cACC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAc5E,kBAAkB;cACC,OAAO,CAAC,kBAAkB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAa1E,kBAAkB;cACC,MAAM,IAAI,OAAO;CAwNrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,kBAAkB,CAAC;KACpC;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarViewElementBase.d.ts","sourceRoot":"","sources":["../../../src/calendar/CalendarViewElementBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAOtD;;;GAGG;AACH,8BAAsB,uBAAwB,SAAQ,UAAU;IAC9D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"CalendarViewElementBase.d.ts","sourceRoot":"","sources":["../../../src/calendar/CalendarViewElementBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAOtD;;;GAGG;AACH,8BAAsB,uBAAwB,SAAQ,UAAU;IAC9D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA0GpC;IAEF,eAAe,CAA2B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAc;IAErF,oBAAoB;IACoB,KAAK,EAAE,IAAI,CAAc;IAEjE,yBAAyB;IACe,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEjE,uBAAuB;IAC2C,UAAU,EAAE,IAAI,CAAc;IAEhG,6CAA6C;IACkB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE3F,6CAA6C;IACkB,OAAO,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE3F;;;OAGG;IACG,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;IAUtC,gBAAgB;IAChB,SAAS,CAAC,iBAAiB,CAAC,UAAU,EAAE,IAAI,GAAG,IAAI;CAWpD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MonthViewElement.d.ts","sourceRoot":"","sources":["../../../src/calendar/MonthViewElement.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAO,cAAc,EAAiB,MAAM,KAAK,CAAC;AAQzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAWpE;;;GAGG;AACH,qBACa,mBAAoB,SAAQ,uBAAuB;;IAC9D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,
|
|
1
|
+
{"version":3,"file":"MonthViewElement.d.ts","sourceRoot":"","sources":["../../../src/calendar/MonthViewElement.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAO,cAAc,EAAiB,MAAM,KAAK,CAAC;AAQzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAWpE;;;GAGG;AACH,qBACa,mBAAoB,SAAQ,uBAAuB;;IAC9D,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAyHpC;IAEF,gBAAgB,CAAC,uBAAuB,UAAQ;IAEhD,6BAA6B;IACqC,UAAU,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEjG,2BAA2B;IACqC,QAAQ,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE7F,sEAAsE;IACtC,aAAa,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,GAAG,IAAI,CAAQ;IAEvF,8DAA8D;IAC9B,YAAY,EAAE,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,GAAG,IAAI,CAAQ;IAEtF,kBAAkB;cACC,MAAM,IAAI,OAAO;CAiQrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CSSResult } from "lit";
|
|
2
2
|
/**
|
|
3
|
-
* Registers a constructable stylesheet in the document
|
|
3
|
+
* Registers a constructable stylesheet in the document's `adoptedStyleSheets`.
|
|
4
4
|
* @param css - A `CSSResult` (e.g., from `css```) whose text will be injected into a constructable stylesheet.
|
|
5
5
|
*/
|
|
6
6
|
export declare function registerStyleSheet(css: CSSResult): void;
|
|
@@ -4,7 +4,7 @@ import "@m3e/web/core/a11y";
|
|
|
4
4
|
import "@m3e/web/button";
|
|
5
5
|
import "@m3e/web/calendar";
|
|
6
6
|
import { DatepickerVariant } from "./DatepickerVariant";
|
|
7
|
-
declare const M3eDatepickerElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & import("../core/shared/mixins/Constructor").Constructor & typeof LitElement;
|
|
7
|
+
declare const M3eDatepickerElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").ReconnectedCallbackMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & import("../core/shared/mixins/Constructor").Constructor & typeof LitElement;
|
|
8
8
|
/**
|
|
9
9
|
* Presents a date picker on a temporary surface.
|
|
10
10
|
*
|
|
@@ -52,10 +52,12 @@ declare const M3eDatepickerElement_base: import("../core/shared/mixins/Construct
|
|
|
52
52
|
* @cssprop --m3e-datepicker-container-padding-inline - Inline‑axis padding of the date picker container.
|
|
53
53
|
* @cssprop --m3e-datepicker-container-color - Background color of the standard container surface.
|
|
54
54
|
* @cssprop --m3e-datepicker-container-elevation - Elevation shadow applied to the container surface.
|
|
55
|
+
* @cssprop --m3e-datepicker-modal-headline-color - Color used for the modal headline text.
|
|
55
56
|
* @cssprop --m3e-datepicker-modal-headline-font-size - Font size used for the modal headline text.
|
|
56
57
|
* @cssprop --m3e-datepicker-modal-headline-font-weight - Font weight used for the modal headline text.
|
|
57
58
|
* @cssprop --m3e-datepicker-modal-headline-line-height - Line height used for the modal headline text.
|
|
58
59
|
* @cssprop --m3e-datepicker-modal-headline-tracking - Letter spacing used for the modal headline text.
|
|
60
|
+
* @cssprop --m3e-datepicker-modal-supporting-text-color - Color used for supporting text in modal mode.
|
|
59
61
|
* @cssprop --m3e-datepicker-modal-supporting-text-font-size - Font size used for supporting text in modal mode.
|
|
60
62
|
* @cssprop --m3e-datepicker-modal-supporting-text-font-weight - Font weight used for supporting text in modal mode.
|
|
61
63
|
* @cssprop --m3e-datepicker-modal-supporting-text-line-height - Line height used for supporting text in modal mode.
|
|
@@ -192,6 +194,8 @@ export declare class M3eDatepickerElement extends M3eDatepickerElement_base {
|
|
|
192
194
|
connectedCallback(): void;
|
|
193
195
|
/** @inheritdoc */
|
|
194
196
|
disconnectedCallback(): void;
|
|
197
|
+
/** @inheritdoc */
|
|
198
|
+
reconnectedCallback(): void;
|
|
195
199
|
/**
|
|
196
200
|
* Opens the picker.
|
|
197
201
|
* @param {HTMLElement} trigger The element that triggered the picker.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatepickerElement.d.ts","sourceRoot":"","sources":["../../../src/datepicker/DatepickerElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAa,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"DatepickerElement.d.ts","sourceRoot":"","sources":["../../../src/datepicker/DatepickerElement.ts"],"names":[],"mappings":"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"}
|
|
@@ -46,8 +46,8 @@ declare const M3eDrawerContainerElement_base: import("../core/shared/mixins/Cons
|
|
|
46
46
|
* @cssprop --m3e-drawer-container-elevation - The elevation level of the drawer container.
|
|
47
47
|
* @cssprop --m3e-drawer-container-width - The width of the drawer container.
|
|
48
48
|
* @cssprop --m3e-drawer-container-scrim-opacity - The opacity of the scrim behind the drawer.
|
|
49
|
-
* @cssprop --m3e-modal-drawer-start-shape - The shape of the drawer
|
|
50
|
-
* @cssprop --m3e-modal-drawer-end-shape - The shape of the drawer
|
|
49
|
+
* @cssprop --m3e-modal-drawer-start-shape - The shape of the drawer's start edge (typically left in LTR).
|
|
50
|
+
* @cssprop --m3e-modal-drawer-end-shape - The shape of the drawer's end edge (typically right in LTR).
|
|
51
51
|
* @cssprop --m3e-modal-drawer-container-color - The background color of the modal drawer container.
|
|
52
52
|
* @cssprop --m3e-modal-drawer-elevation - The elevation level of the modal drawer container.
|
|
53
53
|
* @cssprop --m3e-drawer-divider-color - The color of the divider between drawer sections.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DrawerContainerElement.d.ts","sourceRoot":"","sources":["../../../src/drawer-container/DrawerContainerElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAevE,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;AAI1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,yBAA0B,SAAQ,8BAAgD;;IAC7F,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D,eAAe,CAAU,OAAO,CAAC,UAAU,CAAuC;IAClF,eAAe,CAAU,OAAO,CAAC,QAAQ,CAAuC;IAYhF;;;OAGG;IACyC,KAAK,UAAS;IAE1D;;;OAGG;IACmD,SAAS,EAAE,UAAU,CAAU;IAErF;;;OAGG;IACqE,YAAY,UAAS;IAE7F;;;OAGG;IACyC,GAAG,UAAS;IAExD;;;OAGG;IACiD,OAAO,EAAE,UAAU,CAAU;IAEjF;;;OAGG;IACmE,UAAU,UAAS;IAEzF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;cACC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;
|
|
1
|
+
{"version":3,"file":"DrawerContainerElement.d.ts","sourceRoot":"","sources":["../../../src/drawer-container/DrawerContainerElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAevE,OAAO,oBAAoB,CAAC;AAE5B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;AAI1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,yBAA0B,SAAQ,8BAAgD;;IAC7F,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAE9D,eAAe,CAAU,OAAO,CAAC,UAAU,CAAuC;IAClF,eAAe,CAAU,OAAO,CAAC,QAAQ,CAAuC;IAYhF;;;OAGG;IACyC,KAAK,UAAS;IAE1D;;;OAGG;IACmD,SAAS,EAAE,UAAU,CAAU;IAErF;;;OAGG;IACqE,YAAY,UAAS;IAE7F;;;OAGG;IACyC,GAAG,UAAS;IAExD;;;OAGG;IACiD,OAAO,EAAE,UAAU,CAAU;IAEjF;;;OAGG;IACmE,UAAU,UAAS;IAEzF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;cACC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA0B5E,kBAAkB;IACT,mBAAmB,IAAI,IAAI;IASpC,kBAAkB;cACC,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAKzE,kBAAkB;cACC,MAAM,IAAI,OAAO;CA2IrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,yBAAyB,CAAC;KACnD;CACF"}
|
|
@@ -3,7 +3,7 @@ import { SelectionManager, selectionManager } from "@m3e/web/core/a11y";
|
|
|
3
3
|
import { M3eNavItemElement } from "./NavItemElement";
|
|
4
4
|
import { NavItemOrientation } from "./NavItemOrientation";
|
|
5
5
|
import { NavBarMode } from "./NavBarMode";
|
|
6
|
-
declare const M3eNavBarElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & import("../core/shared/mixins/Constructor").Constructor & typeof LitElement;
|
|
6
|
+
declare const M3eNavBarElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").ReconnectedCallbackMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & import("../core/shared/mixins/Constructor").Constructor & typeof LitElement;
|
|
7
7
|
/**
|
|
8
8
|
* A horizontal bar, typically used on smaller devices, that allows a user to switch between 3-5 views.
|
|
9
9
|
*
|
|
@@ -56,6 +56,8 @@ export declare class M3eNavBarElement extends M3eNavBarElement_base {
|
|
|
56
56
|
/** @inheritdoc */
|
|
57
57
|
disconnectedCallback(): void;
|
|
58
58
|
/** @inheritdoc */
|
|
59
|
+
reconnectedCallback(): void;
|
|
60
|
+
/** @inheritdoc */
|
|
59
61
|
protected willUpdate(changedProperties: PropertyValues): void;
|
|
60
62
|
/** @inheritdoc */
|
|
61
63
|
protected render(): unknown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavBarElement.d.ts","sourceRoot":"","sources":["../../../src/nav-bar/NavBarElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5E,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,gBAAiB,SAAQ,
|
|
1
|
+
{"version":3,"file":"NavBarElement.d.ts","sourceRoot":"","sources":["../../../src/nav-bar/NavBarElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAK5E,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,gBAAiB,SAAQ,qBAAoE;;IACxG,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAoBpC;IAEF,gBAAgB,CAAC,QAAQ,CAAC,CAAC,gBAAgB,CAAC,sCAAqE;IAEjH,eAAe,CAAU,OAAO,CAAC,KAAK,CAAC,CAA8B;IAErE;;;OAGG;IAC0B,IAAI,EAAE,UAAU,CAAa;IAE1D,4BAA4B;IAC5B,IAAI,KAAK,IAAI,SAAS,iBAAiB,EAAE,CAExC;IAED,yBAAyB;IACzB,IAAI,QAAQ,IAAI,iBAAiB,GAAG,IAAI,CAEvC;IAED,2CAA2C;IAC3C,IAAI,WAAW,IAAI,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,CAE7C;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,EAEjD;IAED,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;IACT,mBAAmB,IAAI,IAAI;IAQpC,kBAAkB;cACC,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IA0BtE,kBAAkB;cACC,MAAM,IAAI,OAAO;IAkBpC,gBAAgB;IAChB,SAAS,CAAC,YAAY,IAAI,IAAI;IAM9B,gBAAgB;IAChB,SAAS,CAAC,kBAAkB,CAAC,WAAW,EAAE,kBAAkB,GAAG,IAAI;CAGpE;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,gBAAgB,CAAC;KACjC;CACF"}
|
|
@@ -3,7 +3,7 @@ import "@m3e/web/core/a11y";
|
|
|
3
3
|
import { SearchViewMode } from "./SearchViewMode";
|
|
4
4
|
import { SearchViewQueryEventDetail } from "./SearchViewQueryEventDetail";
|
|
5
5
|
import "./SearchBarElement";
|
|
6
|
-
declare const M3eSearchViewElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & typeof LitElement;
|
|
6
|
+
declare const M3eSearchViewElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").ReconnectedCallbackMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & typeof LitElement;
|
|
7
7
|
/**
|
|
8
8
|
* A surface that presents suggestions and results for a search.
|
|
9
9
|
*
|
|
@@ -117,6 +117,10 @@ export declare class M3eSearchViewElement extends M3eSearchViewElement_base {
|
|
|
117
117
|
/** Clears the search term. */
|
|
118
118
|
clear(): void;
|
|
119
119
|
/** @inheritdoc */
|
|
120
|
+
disconnectedCallback(): void;
|
|
121
|
+
/** @inheritdoc */
|
|
122
|
+
reconnectedCallback(): void;
|
|
123
|
+
/** @inheritdoc */
|
|
120
124
|
protected willUpdate(changedProperties: PropertyValues): void;
|
|
121
125
|
/** @inheritdoc */
|
|
122
126
|
protected updated(_changedProperties: PropertyValues<this>): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchViewElement.d.ts","sourceRoot":"","sources":["../../../src/search/SearchViewElement.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,UAAU,EAAW,cAAc,EAAO,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"SearchViewElement.d.ts","sourceRoot":"","sources":["../../../src/search/SearchViewElement.ts"],"names":[],"mappings":"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"}
|
|
@@ -44,8 +44,8 @@ declare const M3eButtonSegmentElement_base: import("../core/shared/mixins/Constr
|
|
|
44
44
|
* @fires click - Emitted when the element is clicked.
|
|
45
45
|
*
|
|
46
46
|
* @cssprop --m3e-segmented-button-height - Total height of the segmented button.
|
|
47
|
-
* @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button
|
|
48
|
-
* @cssprop --m3e-segmented-button-outline-color - Color of the button
|
|
47
|
+
* @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button's border.
|
|
48
|
+
* @cssprop --m3e-segmented-button-outline-color - Color of the button's border.
|
|
49
49
|
* @cssprop --m3e-segmented-button-padding-start - Padding on the leading edge of the button content.
|
|
50
50
|
* @cssprop --m3e-segmented-button-padding-end - Padding on the trailing edge of the button content.
|
|
51
51
|
* @cssprop --m3e-segmented-button-spacing - Horizontal gap between icon and label.
|
|
@@ -12,7 +12,7 @@ declare const M3eSplitButtonElement_base: import("../core/shared/mixins/Construc
|
|
|
12
12
|
* `filled`, `tonal`, and `outlined` variants, and adapts to all button sizes. The leading button triggers
|
|
13
13
|
* the main action, while the trailing icon button reveals additional options, enabling efficient workflows
|
|
14
14
|
* and clear visual hierarchy. The split button ensures accessible, adaptive, and visually harmonious
|
|
15
|
-
* interactions, reflecting Material 3
|
|
15
|
+
* interactions, reflecting Material 3's principles of clarity, flexibility, and expressive design.
|
|
16
16
|
*
|
|
17
17
|
* @example
|
|
18
18
|
* The following example illustrates use of the `m3e-split-button` to combine the `m3e-button`,
|
|
@@ -4,7 +4,7 @@ import { M3eStepElement } from "./StepElement";
|
|
|
4
4
|
import { StepLabelPosition } from "./StepLabelPosition";
|
|
5
5
|
import { StepHeaderPosition } from "./StepHeaderPosition";
|
|
6
6
|
import { StepperOrientation } from "./StepperOrientation";
|
|
7
|
-
declare const M3eStepperElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & typeof LitElement;
|
|
7
|
+
declare const M3eStepperElement_base: import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").ReconnectedCallbackMixin> & import("../core/shared/mixins/Constructor").Constructor<import("@m3e/web/core").AttachInternalsMixin> & typeof LitElement;
|
|
8
8
|
/**
|
|
9
9
|
* Provides a wizard-like workflow by dividing content into logical steps.
|
|
10
10
|
*
|
|
@@ -126,6 +126,8 @@ export declare class M3eStepperElement extends M3eStepperElement_base {
|
|
|
126
126
|
/** @inheritdoc */
|
|
127
127
|
disconnectedCallback(): void;
|
|
128
128
|
/** @inheritdoc */
|
|
129
|
+
reconnectedCallback(): void;
|
|
130
|
+
/** @inheritdoc */
|
|
129
131
|
protected willUpdate(changedProperties: PropertyValues): void;
|
|
130
132
|
/** @inheritdoc */
|
|
131
133
|
protected render(): unknown;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepperElement.d.ts","sourceRoot":"","sources":["../../../src/stepper/StepperElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"StepperElement.d.ts","sourceRoot":"","sources":["../../../src/stepper/StepperElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAQ,UAAU,EAAW,cAAc,EAAE,MAAM,KAAK,CAAC;AAgBrF,OAAO,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGxE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;;AAE1D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,qBACa,iBAAkB,SAAQ,sBAAgD;;IA0CrF,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAgHpC;IAGF,eAAe,CAAU,OAAO,CAAC,YAAY,CAAC,CAAsC;IACpF,eAAe,CAAU,OAAO,CAAC,cAAc,CAAuB;IACtE,gBAAgB,CAAC,QAAQ,CAAC,CAAC,gBAAgB,CAAC,mCAGiB;IAE7D;;;OAGG;IACwD,cAAc,EAAE,kBAAkB,CAAW;IAExG;;;OAGG;IACuD,aAAa,EAAE,iBAAiB,CAAS;IAEnG;;;OAGG;IACyC,MAAM,UAAS;IAE3D;;;OAGG;IAC0B,WAAW,EAAE,kBAAkB,CAAgB;IAE5E,iBAAiB;IACjB,IAAI,KAAK,IAAI,SAAS,cAAc,EAAE,CAErC;IAED,yBAAyB;IACzB,IAAI,YAAY,IAAI,cAAc,GAAG,IAAI,CAExC;IAED,iDAAiD;IACjD,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED;;;OAGG;IACH,YAAY,IAAI,OAAO;IAIvB;;;OAGG;IACH,QAAQ,IAAI,OAAO;IAInB;;;;OAIG;IACH,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IA6C9B,uEAAuE;IACvE,KAAK,IAAI,IAAI;IAUb,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;IACT,oBAAoB,IAAI,IAAI;IAOrC,kBAAkB;IACT,mBAAmB,IAAI,IAAI;IAQpC,kBAAkB;cACC,UAAU,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAkBtE,kBAAkB;cACC,MAAM,IAAI,OAAO;CAsIrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
|