@patternfly/elements 2.4.0 → 3.0.1

package/pf-select/pf-select.js

@@ -0,0 +1,462 @@
+var _PfSelect_instances, _PfSelect_internals, _PfSelect_float, _PfSelect_slots, _PfSelect_listbox, _PfSelect_lastSelected, _PfSelect_listboxElement_get, _PfSelect_hasBadge_get, _PfSelect_buttonLabel_get, _PfSelect_variantChanged, _PfSelect_expandedChanged, _PfSelect_selectedChanged, _PfSelect_onListboxKeydown, _PfSelect_onListboxFocusout, _PfSelect_onButtonKeydown, _PfSelect_onListboxSlotchange, _PfSelect_onChipRemove, _PfSelect_onTypeaheadInput, _PfSelect_computePlaceholderText;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { query } from 'lit/decorators/query.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { ListboxController } from '@patternfly/pfe-core/controllers/listbox-controller.js';
+import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+import { FloatingDOMController, } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+import { PfOption } from './pf-option.js';
+import { css } from "lit";
+const styles = css `:host {\n  font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);\n  font-size: var(--pf-global--FontSize--md, 16px);\n  font-weight: var(--pf-global--FontWeight--normal, 400);\n\tcolor: var(--pf-global--Color--100, #151515);\n  --_pf-option-checkboxes-display: none;\n  --_pf-option-svg-display: block;\n\t--pf-c-select__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);\n\t--pf-c-select__toggle--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-select__toggle--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);\n\t--pf-c-select__toggle--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-select__toggle--MinWidth: var(--pf-global--target-size--MinWidth, 44px);\n\t--pf-c-select__toggle--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-select__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400);\n\t--pf-c-select__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5);\n\t--pf-c-select__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-select__toggle--before--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-select__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-select__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-select__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-select__toggle--before--BorderWidth: initial;\n\t--pf-c-select__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);\n\t--pf-c-select__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);\n\t--pf-c-select__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);\n\t--pf-c-select__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);\n\t--pf-c-select__toggle--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-select__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-select__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-select__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-select__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-select__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-select__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);\n\t--pf-c-select__toggle--m-expanded--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-select__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);\n\t--pf-c-select__toggle--m-plain--before--BorderColor: transparent;\n\t--pf-c-select__toggle--m-placeholder--Color: transparent;\n\t--pf-c-select--m-invalid__toggle--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-select--m-invalid__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-select--m-invalid__toggle--hover--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-select--m-invalid__toggle--focus--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-select--m-invalid__toggle--active--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-select--m-invalid__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-select--m-invalid__toggle-status-icon--Color: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-select--m-success__toggle--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);\n\t--pf-c-select--m-success__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-select--m-success__toggle--hover--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);\n\t--pf-c-select--m-success__toggle--focus--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);\n\t--pf-c-select--m-success__toggle--active--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);\n\t--pf-c-select--m-success__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);\n\t--pf-c-select--m-success__toggle-status-icon--Color: var(--pf-global--success-color--100, #3e8635);\n\t--pf-c-select--m-warning__toggle--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);\n\t--pf-c-select--m-warning__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-select--m-warning__toggle--hover--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);\n\t--pf-c-select--m-warning__toggle--focus--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);\n\t--pf-c-select--m-warning__toggle--active--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);\n\t--pf-c-select--m-warning__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);\n\t--pf-c-select--m-warning__toggle-status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);\n\t--pf-c-select__toggle-wrapper--not-last-child--MarginRight: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-select__toggle-wrapper--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem));\n\t--pf-c-select__toggle-wrapper--c-chip-group--MarginTop: 0.3125rem;\n\t--pf-c-select__toggle-wrapper--c-chip-group--MarginBottom: 0.3125rem;\n\t--pf-c-select__toggle-typeahead--FlexBasis: 10em;\n\t--pf-c-select__toggle-typeahead--BackgroundColor: transparent;\n\t--pf-c-select__toggle-typeahead--BorderTop: var(--pf-global--BorderWidth--sm, 1px) solid transparent;\n\t--pf-c-select__toggle-typeahead--BorderRight: none;\n\t--pf-c-select__toggle-typeahead--BorderLeft: none;\n\t--pf-c-select__toggle-typeahead--MinWidth: 7.5rem;\n\t--pf-c-select__toggle-typeahead--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--md));\n\t--pf-c-select__toggle--m-placeholder__toggle-text--Color: var(--pf-global--Color--dark-200, #6a6e73);\n\t--pf-c-select__toggle-icon--toggle-text--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-select__toggle-badge--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-select__toggle-status-icon--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);\n\t--pf-c-select__toggle-status-icon--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-select__toggle-arrow--MarginLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-select__toggle-arrow--MarginRight: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-select__toggle-arrow--with-clear--MarginLeft: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate: 180deg;\n\t--pf-c-select--m-plain__toggle-arrow--Color: var(--pf-global--Color--200, #6a6e73);\n\t--pf-c-select--m-plain--hover__toggle-arrow--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-select__toggle-clear--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-select__toggle-clear--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-select__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-select__toggle-button--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-select__menu--BackgroundColor: var(--pf-global--BackgroundColor--light-100, #fff);\n\t--pf-c-select__menu--BoxShadow: var(--pf-global--BoxShadow--md, 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06));\n\t--pf-c-select__menu--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-select__menu--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-select__menu--Top: calc(100% + var(--pf-global--spacer--xs, 0.25rem));\n\t--pf-c-select__menu--ZIndex: var(--pf-global--ZIndex--sm, 200);\n\t--pf-c-select__menu--Width: auto;\n\t--pf-c-select__menu--MinWidth: 100%;\n\t--pf-c-select__menu--m-top--TranslateY: calc(-100% - var(--pf-global--spacer--xs, 0.25rem));\n\t--pf-c-select__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-select__menu-item--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-select__menu-item--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-select__menu-item--m-selected--PaddingRight: var(--pf-global--spacer--2xl, 3rem);\n\t--pf-c-select__menu-item--PaddingBottom: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-select__menu-item--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-select__menu-item--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-select__menu-item--FontWeight: var(--pf-global--FontWeight--normal, 400);\n\t--pf-c-select__menu-item--LineHeight: var(--pf-global--LineHeight--md, 1.5);\n\t--pf-c-select__menu-item--Color: var(--pf-global--Color--dark-100, #151515);\n\t--pf-c-select__menu-item--disabled--Color: var(--pf-global--Color--dark-200, #6a6e73);\n\t--pf-c-select__menu-item--Width: 100%;\n\t--pf-c-select__menu-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);\n\t--pf-c-select__menu-item--focus--BackgroundColor: var(--pf-global--BackgroundColor--light-300, #f0f0f0);\n\t--pf-c-select__menu-item--disabled--BackgroundColor: transparent;\n\t--pf-c-select__menu-item--m-link--Width: auto;\n\t--pf-c-select__menu-item--m-link--hover--BackgroundColor: transparent;\n\t--pf-c-select__menu-item--m-link--focus--BackgroundColor: transparent;\n\t--pf-c-select__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);\n\t--pf-c-select__menu-item--m-action--hover--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-select__menu-item--m-action--focus--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-select__menu-item--m-action--disabled--Color: var(--pf-global--disabled-color--200, #d2d2d2);\n\t--pf-c-select__menu-item--m-action--Width: auto;\n\t--pf-c-select__menu-item--m-action--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);\n\t--pf-c-select__menu-item--m-action--hover--BackgroundColor: transparent;\n\t--pf-c-select__menu-item--m-action--focus--BackgroundColor: transparent;\n\t--pf-c-select__menu-item--hover__menu-item--m-action--Color: var(--pf-global--Color--200, #6a6e73);\n\t--pf-c-select__menu-item--m-favorite-action--Color: var(--pf-global--Color--200, #6a6e73);\n\t--pf-c-select__menu-item--m-favorite-action--hover--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-select__menu-item--m-favorite-action--focus--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--Color: var(--pf-global--palette--gold-400, #f0ab00);\n\t--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--hover--Color: var(--pf-global--palette--gold-500, #c58c00);\n\t--pf-c-select__menu-wrapper--m-favorite__menu-item--m-favorite-action--focus--Color: var(--pf-global--palette--gold-500, #c58c00);\n\t--pf-c-select__menu-item--m-load--Color: var(--pf-global--link--Color, #06c);\n\t--pf-c-select__menu-item-icon--Color: var(--pf-global--active-color--100, #06c);\n\t--pf-c-select__menu-item-icon--FontSize: var(--pf-global--icon--FontSize--sm, 0.625rem);\n\t--pf-c-select__menu-item-icon--Right: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-select__menu-item-icon--Top: 50%;\n\t--pf-c-select__menu-item-icon--TranslateY: -50%;\n\t--pf-c-select__menu-item-action-icon--MinHeight: calc(var(--pf-c-select__menu-item--FontSize) * var(--pf-c-select__menu-item--LineHeight));\n\t--pf-c-select__menu-item--match--FontWeight: var(--pf-global--FontWeight--bold, 700);\n\t--pf-c-select__menu-search--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-select__menu-search--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);\n\t--pf-c-select__menu-search--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-select__menu-search--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);\n\t--pf-c-select__menu-group--menu-group--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-select__menu-group-title--PaddingTop: var(--pf-c-select__menu-item--PaddingTop);\n\t--pf-c-select__menu-group-title--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);\n\t--pf-c-select__menu-group-title--PaddingBottom: var(--pf-c-select__menu-item--PaddingBottom);\n\t--pf-c-select__menu-group-title--PaddingLeft: var(--pf-c-select__menu-item--PaddingLeft);\n\t--pf-c-select__menu-group-title--FontSize: var(--pf-global--FontSize--xs, 0.75rem);\n\t--pf-c-select__menu-group-title--FontWeight: var(--pf-global--FontWeight--normal, 400);\n\t--pf-c-select__menu-group-title--Color: var(--pf-global--Color--dark-200, #6a6e73);\n\t--pf-c-select__menu-item-count--MarginLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-select__menu-item-count--FontSize: var(--pf-global--FontSize--sm, 0.875rem);\n\t--pf-c-select__menu-item-count--Color: var(--pf-global--Color--200, #6a6e73);\n\t--pf-c-select__menu-item--disabled__menu-item-count--Color: var(--pf-global--Color--dark-200, #6a6e73);\n\t--pf-c-select__menu-item-description--FontSize: var(--pf-global--FontSize--xs, 0.75rem);\n\t--pf-c-select__menu-item-description--Color: var(--pf-global--Color--200, #6a6e73);\n\t--pf-c-select__menu-item-description--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);\n\t--pf-c-select__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--PaddingRight);\n\t--pf-c-select__menu-item--m-selected__menu-item-main--PaddingRight: var(--pf-c-select__menu-item--m-selected--PaddingRight);\n\t--pf-c-select__menu-footer--BoxShadow: var(--pf-global--BoxShadow--sm-top, 0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16));\n\t--pf-c-select__menu-footer--PaddingTop: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-select__menu-footer--PaddingRight: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-select__menu-footer--PaddingBottom: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-select__menu-footer--PaddingLeft: var(--pf-global--spacer--md, 1rem);\n\t--pf-c-select__menu-footer--MarginTop: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-select__menu-footer--MarginBottom: calc(var(--pf-global--spacer--sm, 0.5rem) * -1);\n\t--pf-c-select-menu--c-divider--MarginTop: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-select-menu--c-divider--MarginBottom: var(--pf-global--spacer--sm, 0.5rem);\n}\n\n:host, #outer {\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n}\n\n:host([hidden]),\n*[hidden] {\n  display: none !important;\n}\n\n:host([disabled]) {\n  pointer-events: none !important;\n}\n\n#outer.disabled {\n  color: var(--pf-global--Color--dark-200, #6a6e73) !important;\n}\n\n#outer {\n  position: relative;\n}\n\n/* TODO(bennyp): see if we can get rid of this wrapping node, for perf reasons */\n#listbox-container {\n  display: inline-flex;\n  border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);\n  position: absolute;\n  background-color: var(--pf-theme--color--surface--lightest, #fff) !important;\n  opacity: 0;\n  --_active-descendant-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important\n}\n\n#outer.expanded #listbox-container {\n  opacity: 1;\n  z-index: 9999 !important;\n}\n\n#listbox {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n}\n\n#listbox slot.disabled {\n  color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;\n  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;\n  border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;\n  pointer-events: none;\n  cursor: not-allowed;;\n  --_active-descendant-color: transparent;\n  --_svg-color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;\n}\n\n\n#toggle {\n  background-color: var(--pf-theme--color--surface--lightest, #fff) !important;\n}\n\n#toggle,\n#toggle-button,\n#toggle-input {\n  display: flex;\n  align-items: center;\n  font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);\n  font-size: var(--pf-global--FontSize--md, 16px);\n  font-weight: var(--pf-global--FontWeight--normal, 400);\n  line-height: 1.6;\n}\n\n#toggle {\n  border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);\n  border-bottom-color: var(--pf-theme--color--text, #151515);\n  justify-content: space-between;\n}\n\n.expanded #toggle {\n  border-bottom-width: 2px;\n  border-bottom-color: var(--pf-theme--color--accent, #0066cc);\n}\n\n.disabled #toggle {\n  color: var(--pf-global--Color--dark-200, #6a6e73) !important;\n  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;\n  border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;\n}\n\n#toggle-input,\n#toggle-button {\n  background: transparent;\n  border: none;\n  text-align: left;\n  border-radius: 0;\n  flex: 1 0 auto;\n  min-height: 44px;\n  min-width: 44px;\n}\n\n#toggle-input {\n  justify-content: space-between;\n  padding: var(--pf-global--spacer--xs, 0.25rem) var(--pf-global--spacer--sm, 0.5rem);\n}\n\n.disabled #toggle-input {\n  pointer-events: none;\n}\n\n#toggle-button {\n  color: currentColor;\n  background-color: transparent;\n  justify-content: flex-end;\n  padding: var(--pf-global--spacer--sm, 0.5rem);\n}\n\n#outer.typeahead #toggle-button {\n  flex: 0 0 auto;\n}\n\n#toggle-badge {\n  flex: 1 0 auto;\n  margin-inline-start: 0.25em;\n}\n\n#toggle-text {\n  flex: 1 1 auto;\n}\n\n#toggle-text.badge {\n  flex: 0 1 auto;\n}\n\npf-badge {\n  padding: 0;\n}\n\n#toggle svg {\n  width: 1em;\n  height: 1em;\n  flex: 0 0 auto;\n  margin-inline-start: 1em;\n}\n\n#description {\n  display: block;\n}\n\n#listbox.checkboxes {\n  --_pf-option-checkboxes-display: inline;\n  --_pf-option-svg-display: none;\n}\n\n::slotted(pf-option-group + hr) {\n  display: none !important;\n}\n\n::slotted(hr:has(+ pf-option-group)) {\n  display: none !important;\n}\n\n.offscreen {\n  position: absolute;\n  left: -99999;\n  width: 0;\n  height: 0;\n  opacity: 0;\n  overflow: hidden;\n}\n\n::slotted(hr) {\n  --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);\n  --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);\n  --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);\n  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2);\n  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);\n  --pf-c-divider--after--FlexBasis: 100%;\n  --pf-c-divider--after--Inset: 0%;\n  --pf-c-divider--m-vertical--after--FlexBasis: 100%;\n  --pf-c-divider--m-horizontal--Display: flex;\n  --pf-c-divider--m-horizontal--FlexDirection: row;\n  --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);\n  --pf-c-divider--m-horizontal--after--Width: auto;\n  --pf-c-divider--m-vertical--Display: inline-flex;\n  --pf-c-divider--m-vertical--FlexDirection: column;\n  --pf-c-divider--m-vertical--after--Height: auto;\n  --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);\n  --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);\n  --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);\n  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);\n  --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);\n  --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);\n  display: var(--pf-c-divider--Display, flex);\n\tflex-direction: var(--pf-c-divider--FlexDirection);\n\tborder: 0;\n  width: 100%;\n  margin-top: var(--pf-c-select-menu--c-divider--MarginTop);\n  margin-bottom: var(--pf-c-select-menu--c-divider--MarginBottom);\n}\n\n::slotted(hr)::after {\n  content: '';\n  width: var(--pf-c-divider--after--Width, 100%) !important;\n  height: var(--pf-c-divider--after--Height, 1px);\n  background-color: var(--pf-c-divider--after--BackgroundColor);\n  flex: 1 0 100%;\n}\n`;
+import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
+export class PfSelectChangeEvent extends Event {
+    constructor() {
+        super('change', { bubbles: true });
+    }
+}
+// NOTE: this file contains numerous // comments, which ordinarily would be deleted
+// They are here to save the work already done on typeahead, which has a much more complex
+// accessibility model, and which is planned for the next release
+// * @fires filter - when the filter value changes. used to perform custom filtering
+/**
+ * A select list enables users to select one or more items from a list.
+ *
+ * A select component consists of a toggle control to open and close a menu of actions or links.
+ * Selects differ from dropdowns in that they persist selection,
+ * whereas dropdowns are typically used to present a list of actions or links.
+ * @slot - insert `pf-option` and/or `pf-option-groups` here
+ * @slot placeholder - placeholder text for the select. Overrides the `placeholder` attribute.
+ * @fires open - when the menu toggles open
+ * @fires close - when the menu toggles closed
+ */
+let PfSelect = class PfSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        _PfSelect_instances.add(this);
+        _PfSelect_internals.set(this, InternalsController.of(this));
+        _PfSelect_float.set(this, new FloatingDOMController(this, {
+            content: () => this.shadowRoot?.getElementById('listbox-container') ?? null,
+        }));
+        _PfSelect_slots.set(this, new SlotController(this, null, 'placeholder'));
+        _PfSelect_listbox.set(this, void 0); /* | ListboxActiveDescendantController */
+        /** Variant of rendered Select */
+        this.variant = 'single';
+        /**
+         * Accessible label for chip group used to describe chips
+         */
+        this.accessibleCurrentSelectionsLabel = 'Current selections';
+        /**
+         * multi listbox button text
+         */
+        this.itemsSelectedText = 'items selected';
+        /**
+         * whether select is disabled
+         */
+        this.disabled = false;
+        /**
+         * Whether the select listbox is expanded
+         */
+        this.expanded = false;
+        /**
+         * enable to flip listbox when it reaches boundary
+         */
+        this.enableFlip = false;
+        /**
+         * Indicates initial popover position.
+         * There are 6 options: `bottom`, `top`, `top-start`, `top-end`, `bottom-start`, `bottom-end`.
+         * Default is `bottom`.
+         */
+        this.position = 'bottom';
+        /** Flag indicating if selection badge should be hidden for checkbox variant,default false */
+        this.checkboxSelectionBadgeHidden = false;
+        _PfSelect_lastSelected.set(this, this.selected);
+    }
+    // @property({ attribute: false }) customFilter?: (option: PfOption) => boolean;
+    /**
+     * Single select option value for single select menus,
+     * or array of select option values for multi select.
+     */
+    set selected(optionsList) {
+        __classPrivateFieldGet(this, _PfSelect_listbox, "f")?.setValue(optionsList);
+    }
+    get selected() {
+        return __classPrivateFieldGet(this, _PfSelect_listbox, "f")?.value;
+    }
+    /**
+     * array of slotted options
+     */
+    get options() {
+        const opts = Array.from(this.querySelectorAll('pf-option'));
+        const placeholder = this.shadowRoot?.getElementById('placeholder');
+        if (placeholder) {
+            return [placeholder, ...opts];
+        }
+        else {
+            return opts;
+        }
+    }
+    willUpdate(changed) {
+        if (this.variant === 'checkbox') {
+            import('@patternfly/elements/pf-badge/pf-badge.js');
+        }
+        if (changed.has('variant')) {
+            __classPrivateFieldGet(this, _PfSelect_instances, "m", _PfSelect_variantChanged).call(this);
+        }
+        if (changed.has('value')) {
+            __classPrivateFieldGet(this, _PfSelect_internals, "f").setFormValue(this.value ?? '');
+        }
+        if (changed.has('disabled')) {
+            __classPrivateFieldGet(this, _PfSelect_listbox, "f").disabled = this.disabled;
+        }
+        // TODO: handle filtering in the element, not the controller
+        // if (changed.has('filter')) {
+        //   this.#listbox.filter = this.filter;
+        // }
+    }
+    render() {
+        const { disabled, expanded, variant } = this;
+        const { anchor = 'bottom', alignment = 'start', styles = {} } = __classPrivateFieldGet(this, _PfSelect_float, "f");
+        const { computedLabelText } = __classPrivateFieldGet(this, _PfSelect_internals, "f");
+        const { height, width } = this.getBoundingClientRect() || {};
+        const buttonLabel = __classPrivateFieldGet(this, _PfSelect_instances, "a", _PfSelect_buttonLabel_get);
+        const hasBadge = __classPrivateFieldGet(this, _PfSelect_instances, "a", _PfSelect_hasBadge_get);
+        const selectedOptions = __classPrivateFieldGet(this, _PfSelect_listbox, "f")?.selectedOptions ?? [];
+        const typeahead = variant.startsWith('typeahead');
+        const checkboxes = variant === 'checkbox';
+        const offscreen = typeahead && 'offscreen';
+        const badge = hasBadge && 'badge';
+        const hasSelection = !!(Array.isArray(this.selected) ? this.selected.length : this.selected);
+        return html `
+      <div id="outer"
+           style="${styleMap(styles)}"
+           class="${classMap({
+            disabled,
+            typeahead,
+            expanded,
+            [anchor]: !!anchor,
+            [alignment]: !!alignment,
+        })}">
+        <div id="toggle">
+          ${!(typeahead && selectedOptions.length < 1) ? '' : html `
+          <pf-chip-group label="${this.accessibleCurrentSelectionsLabel}">
+            ${repeat(selectedOptions, opt => opt.id, opt => html `
+            <pf-chip id="chip-${opt.textContent}"
+                     .readonly="${this.disabled}"
+                     @remove="${__classPrivateFieldGet(this, _PfSelect_instances, "m", _PfSelect_onChipRemove).bind(this, opt)}">${opt.textContent}</pf-chip>`)}
+          </pf-chip-group>`}
+          ${!typeahead ? '' : /* TODO: aria attrs */ html `
+          <input id="toggle-input"
+                 aria-label="${this.accessibleLabel ?? (computedLabelText || buttonLabel)}"
+                 aria-autocomplete="both"
+                 ?disabled="${disabled}"
+                 ?hidden="${!typeahead}"
+                 placeholder="${buttonLabel}"
+                 @input="${__classPrivateFieldGet(this, _PfSelect_instances, "m", _PfSelect_onTypeaheadInput)}">
+          `}
+          <button id="toggle-button"
+                  role="combobox"
+                  aria-hidden="${typeahead.toString()}"
+                  aria-label="${ifDefined(this.accessibleLabel || __classPrivateFieldGet(this, _PfSelect_internals, "f").computedLabelText || undefined)}"
+                  aria-describedby="placeholder"
+                  aria-controls="listbox"
+                  aria-haspopup="listbox"
+                  aria-expanded="${String(this.expanded)}"
+                  @keydown="${__classPrivateFieldGet(this, _PfSelect_instances, "m", _PfSelect_onButtonKeydown)}"
+                  @click="${() => !typeahead && this.toggle()}"
+                  tabindex="${ifDefined(typeahead ? -1 : undefined)}">
+            <span id="button-text" style="display: contents;">
+              <span id="toggle-text"
+                    class="${classMap({ offscreen, badge })}">${buttonLabel}</span>${!hasBadge ? '' : html `
+              <span id="toggle-badge">
+                <pf-badge number="${selectedOptions.length}">${selectedOptions.length}</pf-badge>
+              </span>`}
+            </span>
+            <svg viewBox="0 0 320 512"
+                 fill="currentColor"
+                 aria-hidden="true">
+              <path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path>
+            </svg>
+          </button>
+        </div>
+        <div id="listbox-container"
+             ?hidden="${!expanded}"
+             style="${styleMap({
+            marginTop: `${height || 0}px`,
+            width: width ? `${width}px` : 'auto',
+        })}">
+          <div id="listbox"
+               @focusout="${__classPrivateFieldGet(this, _PfSelect_instances, "m", _PfSelect_onListboxFocusout)}"
+               @keydown="${__classPrivateFieldGet(this, _PfSelect_instances, "m", _PfSelect_onListboxKeydown)}"
+               class="${classMap({ checkboxes })}">
+            <pf-option id="placeholder"
+                       disabled
+                       aria-hidden="${ifDefined(hasSelection ? 'true' : undefined)}"
+                       ?hidden="${!this.placeholder && !__classPrivateFieldGet(this, _PfSelect_slots, "f").hasSlotted('placeholder')}">
+              <slot name="placeholder">${this.placeholder}</slot>
+            </pf-option>
+            <slot @slotchange="${__classPrivateFieldGet(this, _PfSelect_instances, "m", _PfSelect_onListboxSlotchange)}"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    updated(changed) {
+        if (changed.has('expanded')) {
+            __classPrivateFieldGet(this, _PfSelect_instances, "m", _PfSelect_expandedChanged).call(this);
+        }
+        if (changed.has('value')) {
+            this.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
+        }
+        // whether select has removable chips for selected items
+        // NOTE: revisit this in v5
+        // const hasChips = this.variant === 'typeaheadmulti';
+        // reset input if chip has been added
+        // if (this.hasChips && this._input?.value) {
+        //   const chip = this.shadowRoot?.querySelector(`pf-chip#chip-${this._input?.value}`) as HTMLElement;
+        //   if (chip && this._chipGroup) {
+        //     this._chipGroup.focusOnChip(chip);
+        //     this._input.value = '';
+        //   }
+        // }
+    }
+    firstUpdated() {
+        // kick the renderer to that the placeholder gets picked up
+        this.requestUpdate();
+        // TODO: don't do filtering in the controller
+        // if (this.variant === 'typeaheadmulti') {
+        //   this.#listbox.filter = this.filter;
+        // }
+    }
+    /**
+     * Opens the dropdown
+     */
+    async show() {
+        this.expanded = true;
+        await this.updateComplete;
+    }
+    /**
+     * Closes listbox
+     */
+    async hide() {
+        this.expanded = false;
+        await this.updateComplete;
+    }
+    /**
+     * toggles popup based on current state
+     */
+    async toggle() {
+        this.expanded = !this.expanded;
+        await this.updateComplete;
+    }
+};
+_PfSelect_internals = new WeakMap();
+_PfSelect_float = new WeakMap();
+_PfSelect_slots = new WeakMap();
+_PfSelect_listbox = new WeakMap();
+_PfSelect_lastSelected = new WeakMap();
+_PfSelect_instances = new WeakSet();
+_PfSelect_listboxElement_get = function _PfSelect_listboxElement_get() {
+    return this.shadowRoot?.getElementById('listbox') ?? null;
+};
+_PfSelect_hasBadge_get = function _PfSelect_hasBadge_get() {
+    // NOTE: revisit this in v5
+    return this.variant === 'checkbox' && !this.checkboxSelectionBadgeHidden;
+};
+_PfSelect_buttonLabel_get = function _PfSelect_buttonLabel_get() {
+    switch (this.variant) {
+        // TODO: implement typeaheadmulti with ActiveDescendantController
+        // case 'typeaheadmulti':
+        //   return `${this.#listbox?.selectedOptions?.length ?? 0} ${this.itemsSelectedText}`
+        case 'checkbox':
+            return __classPrivateFieldGet(this, _PfSelect_listbox, "f")
+                ?.selectedOptions
+                ?.map?.(option => option.optionText || '')
+                ?.join(' ')
+                ?.trim()
+                || __classPrivateFieldGet(this, _PfSelect_instances, "m", _PfSelect_computePlaceholderText).call(this)
+                || 'Options';
+        default:
+            return (this.selected ? this.value : '')
+                || __classPrivateFieldGet(this, _PfSelect_instances, "m", _PfSelect_computePlaceholderText).call(this)
+                || 'Select a value';
+    }
+};
+_PfSelect_variantChanged = function _PfSelect_variantChanged() {
+    __classPrivateFieldGet(this, _PfSelect_listbox, "f")?.hostDisconnected();
+    const getHTMLElement = () => __classPrivateFieldGet(this, _PfSelect_instances, "a", _PfSelect_listboxElement_get);
+    switch (this.variant) {
+        // TODO
+        // case 'typeahead':
+        // case 'typeaheadmulti':
+        //   this.#controller = new ListboxController.of<PfOption>(this, {
+        //     multi: this.variant==='typeaheadmulti',
+        //     a11yController: ActiveDescendantController.of(this)
+        //   });
+        //   break;
+        default:
+            __classPrivateFieldSet(this, _PfSelect_listbox, ListboxController.of(this, {
+                multi: this.variant === 'checkbox',
+                getHTMLElement,
+                isSelected: option => option.selected,
+                requestSelect: (option, selected) => {
+                    __classPrivateFieldSet(this, _PfSelect_lastSelected, this.selected, "f");
+                    option.selected = !option.disabled && !!selected;
+                    __classPrivateFieldGet(this, _PfSelect_instances, "m", _PfSelect_selectedChanged).call(this);
+                    return true;
+                },
+                a11yController: RovingTabindexController.of(this, {
+                    getHTMLElement,
+                    getItems: () => this.options,
+                }),
+            }), "f");
+            break;
+    }
+};
+_PfSelect_expandedChanged = async function _PfSelect_expandedChanged() {
+    const will = this.expanded ? 'close' : 'open';
+    this.dispatchEvent(new Event(will));
+    if (this.expanded) {
+        await __classPrivateFieldGet(this, _PfSelect_float, "f").show({ placement: this.position || 'bottom', flip: !!this.enableFlip });
+        const focusableItem = __classPrivateFieldGet(this, _PfSelect_listbox, "f")?.activeItem ?? __classPrivateFieldGet(this, _PfSelect_listbox, "f")?.nextItem;
+        focusableItem?.focus();
+    }
+    else if (__classPrivateFieldGet(this, _PfSelect_lastSelected, "f") === this.selected) {
+        await __classPrivateFieldGet(this, _PfSelect_float, "f").hide();
+        this._toggle?.focus();
+    }
+};
+_PfSelect_selectedChanged = async function _PfSelect_selectedChanged() {
+    await this.updateComplete;
+    this.value = [this.selected]
+        .flat()
+        .filter(x => !!x)
+        .map(x => x.value)
+        .join();
+    this.dispatchEvent(new PfSelectChangeEvent());
+    switch (this.variant) {
+        case 'single':
+            this.hide();
+            this._toggle?.focus();
+    }
+};
+_PfSelect_onListboxKeydown = function _PfSelect_onListboxKeydown(event) {
+    switch (event.key) {
+        case 'Escape':
+            this.hide();
+            this._toggle?.focus();
+    }
+};
+_PfSelect_onListboxFocusout = function _PfSelect_onListboxFocusout(event) {
+    switch (this.variant) {
+        case 'single':
+        case 'checkbox':
+            if (this.expanded) {
+                const root = this.getRootNode();
+                if (root instanceof ShadowRoot
+                    || root instanceof Document
+                        && !this.options.includes(event.relatedTarget)) {
+                    this.hide();
+                }
+            }
+    }
+};
+_PfSelect_onButtonKeydown = function _PfSelect_onButtonKeydown(event) {
+    switch (this.variant) {
+        case 'single':
+        case 'checkbox':
+            switch (event.key) {
+                case 'ArrowDown':
+                    this.show();
+            }
+    }
+};
+_PfSelect_onListboxSlotchange = function _PfSelect_onListboxSlotchange() {
+    __classPrivateFieldGet(this, _PfSelect_listbox, "f")?.setOptions(this.options);
+    this.options.forEach((option, index, options) => {
+        option.setSize = options.length;
+        option.posInSet = index;
+    });
+};
+_PfSelect_onChipRemove = function _PfSelect_onChipRemove(opt, event) {
+    //   if (event.chip) {
+    //     opt.selected = false;
+    //     this._input?.focus();
+    //   }
+};
+_PfSelect_onTypeaheadInput = function _PfSelect_onTypeaheadInput() {
+    // update filter
+    // if (this.filter !== this._input?.value) {
+    //   this.filter = this._input?.value || '';
+    //   this.show();
+    // }
+    // TODO: handle hiding && aria hiding options
+};
+_PfSelect_computePlaceholderText = function _PfSelect_computePlaceholderText() {
+    return this.placeholder
+        || this.querySelector('[slot=placeholder]')
+            ?.assignedNodes()
+            ?.reduce((acc, node) => `${acc}${node.textContent}`, '')?.trim()
+        || __classPrivateFieldGet(this, _PfSelect_listbox, "f")?.options
+            ?.filter(x => x !== this.shadowRoot?.getElementById('placeholder'))
+            ?.at(0)?.value
+        || '';
+};
+PfSelect.styles = [styles];
+PfSelect.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+PfSelect.formAssociated = true;
+__decorate([
+    property()
+], PfSelect.prototype, "variant", void 0);
+__decorate([
+    property({ attribute: 'accessible-label' })
+], PfSelect.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({
+        attribute: 'accessible-current-selections-label',
+    })
+], PfSelect.prototype, "accessibleCurrentSelectionsLabel", void 0);
+__decorate([
+    property({ attribute: 'items-selected-text' })
+], PfSelect.prototype, "itemsSelectedText", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfSelect.prototype, "expanded", void 0);
+__decorate([
+    property({ attribute: 'enable-flip', type: Boolean })
+], PfSelect.prototype, "enableFlip", void 0);
+__decorate([
+    property()
+], PfSelect.prototype, "value", void 0);
+__decorate([
+    property()
+], PfSelect.prototype, "placeholder", void 0);
+__decorate([
+    property({ reflect: true })
+], PfSelect.prototype, "position", void 0);
+__decorate([
+    property({
+        attribute: 'checkbox-selection-badge-hidden',
+        type: Boolean,
+    })
+], PfSelect.prototype, "checkboxSelectionBadgeHidden", void 0);
+__decorate([
+    query('#toggle-button')
+], PfSelect.prototype, "_toggle", void 0);
+PfSelect = __decorate([
+    customElement('pf-select')
+], PfSelect);
+export { PfSelect };
+//# sourceMappingURL=pf-select.js.map

package/pf-select/pf-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-select.js","sourceRoot":"","sources":["pf-select.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PfChipRemoveEvent } from '@patternfly/elements/pf-chip/pf-chip.js';\n\nimport { LitElement, html, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { ListboxController } from '@patternfly/pfe-core/controllers/listbox-controller.js';\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\nimport {\n  FloatingDOMController,\n  type Placement,\n} from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport { PfOption } from './pf-option.js';\n\nimport styles from './pf-select.css';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\n\nexport interface PfSelectUserOptions {\n  id: string;\n  value: string;\n}\n\nexport class PfSelectChangeEvent extends Event {\n  constructor() {\n    super('change', { bubbles: true });\n  }\n}\n\n// NOTE: this file contains numerous // comments, which ordinarily would be deleted\n// They are here to save the work already done on typeahead, which has a much more complex\n// accessibility model, and which is planned for the next release\n// * @fires filter - when the filter value changes. used to perform custom filtering\n\n/**\n * A select list enables users to select one or more items from a list.\n *\n * A select component consists of a toggle control to open and close a menu of actions or links.\n * Selects differ from dropdowns in that they persist selection,\n * whereas dropdowns are typically used to present a list of actions or links.\n * @slot - insert `pf-option` and/or `pf-option-groups` here\n * @slot placeholder - placeholder text for the select. Overrides the `placeholder` attribute.\n * @fires open - when the menu toggles open\n * @fires close - when the menu toggles closed\n */\n@customElement('pf-select')\nexport class PfSelect extends LitElement {\n  static readonly styles = [styles];\n\n  static override readonly shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static readonly formAssociated = true;\n\n  #internals = InternalsController.of(this);\n\n  #float = new FloatingDOMController(this, {\n    content: () => this.shadowRoot?.getElementById('listbox-container') ?? null,\n  });\n\n  #slots = new SlotController(this, null, 'placeholder');\n\n  #listbox?: ListboxController<PfOption>; /* | ListboxActiveDescendantController */\n\n  /** Variant of rendered Select */\n  @property() variant: 'single' | 'checkbox' /* | 'typeahead' | 'typeaheadmulti' */ = 'single';\n\n  /**\n   * Accessible label for the select\n   */\n  @property({ attribute: 'accessible-label' }) accessibleLabel?: string;\n\n  /**\n   * Accessible label for chip group used to describe chips\n   */\n  @property({\n    attribute: 'accessible-current-selections-label',\n  }) accessibleCurrentSelectionsLabel = 'Current selections';\n\n  /**\n   * multi listbox button text\n   */\n  @property({ attribute: 'items-selected-text' }) itemsSelectedText = 'items selected';\n\n  /**\n   * whether select is disabled\n   */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /**\n   * Whether the select listbox is expanded\n   */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /**\n   * enable to flip listbox when it reaches boundary\n   */\n  @property({ attribute: 'enable-flip', type: Boolean }) enableFlip = false;\n\n  // @property() filter = '';\n\n  /** Current form value */\n  @property() value?: string;\n\n  /** Placeholder entry. Overridden by the `placeholder` slot */\n  @property() placeholder?: string;\n\n  /**\n   * Indicates initial popover position.\n   * There are 6 options: `bottom`, `top`, `top-start`, `top-end`, `bottom-start`, `bottom-end`.\n   * Default is `bottom`.\n   */\n  @property({ reflect: true }) position: Placement = 'bottom';\n\n  /** Flag indicating if selection badge should be hidden for checkbox variant,default false */\n  @property({\n    attribute: 'checkbox-selection-badge-hidden',\n    type: Boolean,\n  }) checkboxSelectionBadgeHidden = false;\n\n  // @property({ attribute: false }) customFilter?: (option: PfOption) => boolean;\n\n  /**\n   * Single select option value for single select menus,\n   * or array of select option values for multi select.\n   */\n  set selected(optionsList: PfOption | PfOption[]) {\n    this.#listbox?.setValue(optionsList);\n  }\n\n  get selected(): PfOption | PfOption[] | undefined {\n    return this.#listbox?.value;\n  }\n\n  /**\n   * array of slotted options\n   */\n  get options(): PfOption[] {\n    const opts = Array.from(this.querySelectorAll('pf-option'));\n    const placeholder = this.shadowRoot?.getElementById('placeholder') as PfOption | null;\n    if (placeholder) {\n      return [placeholder, ...opts];\n    } else {\n      return opts;\n    }\n  }\n\n  // @query('pf-chip-group') private _chipGroup?: PfChipGroup;\n\n  // @query('#toggle-input') private _input?: HTMLInputElement;\n\n  @query('#toggle-button') private _toggle?: HTMLButtonElement;\n\n  #lastSelected = this.selected;\n\n  get #listboxElement() {\n    return this.shadowRoot?.getElementById('listbox') ?? null;\n  }\n\n  /**\n   * whether select has badge for number of selected items\n   */\n  get #hasBadge() {\n    // NOTE: revisit this in v5\n    return this.variant === 'checkbox' && !this.checkboxSelectionBadgeHidden;\n  }\n\n  get #buttonLabel() {\n    switch (this.variant) {\n      // TODO: implement typeaheadmulti with ActiveDescendantController\n      // case 'typeaheadmulti':\n      //   return `${this.#listbox?.selectedOptions?.length ?? 0} ${this.itemsSelectedText}`\n      case 'checkbox':\n        return this.#listbox\n            ?.selectedOptions\n            ?.map?.(option => option.optionText || '')\n            ?.join(' ')\n            ?.trim()\n          || this.#computePlaceholderText()\n          || 'Options';\n      default:\n        return (this.selected ? this.value : '')\n          || this.#computePlaceholderText()\n          || 'Select a value';\n    }\n  }\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (this.variant === 'checkbox') {\n      import('@patternfly/elements/pf-badge/pf-badge.js');\n    }\n    if (changed.has('variant')) {\n      this.#variantChanged();\n    }\n    if (changed.has('value')) {\n      this.#internals.setFormValue(this.value ?? '');\n    }\n    if (changed.has('disabled')) {\n      this.#listbox!.disabled = this.disabled;\n    }\n    // TODO: handle filtering in the element, not the controller\n    // if (changed.has('filter')) {\n    //   this.#listbox.filter = this.filter;\n    // }\n  }\n\n  override render() {\n    const { disabled, expanded, variant } = this;\n    const { anchor = 'bottom', alignment = 'start', styles = {} } = this.#float;\n    const { computedLabelText } = this.#internals;\n    const { height, width } = this.getBoundingClientRect() || {};\n    const buttonLabel = this.#buttonLabel;\n    const hasBadge = this.#hasBadge;\n    const selectedOptions = this.#listbox?.selectedOptions ?? [];\n    const typeahead = variant.startsWith('typeahead');\n    const checkboxes = variant === 'checkbox';\n    const offscreen = typeahead && 'offscreen';\n    const badge = hasBadge && 'badge';\n    const hasSelection = !!(Array.isArray(this.selected) ? this.selected.length : this.selected);\n\n    return html`\n      <div id=\"outer\"\n           style=\"${styleMap(styles)}\"\n           class=\"${classMap({\n             disabled,\n             typeahead,\n             expanded,\n             [anchor]: !!anchor,\n             [alignment]: !!alignment,\n           })}\">\n        <div id=\"toggle\">\n          ${!(typeahead && selectedOptions.length < 1) ? '' : html`\n          <pf-chip-group label=\"${this.accessibleCurrentSelectionsLabel}\">\n            ${repeat(selectedOptions, opt => opt.id, opt => html`\n            <pf-chip id=\"chip-${opt.textContent}\"\n                     .readonly=\"${this.disabled}\"\n                     @remove=\"${this.#onChipRemove.bind(this, opt)}\">${opt.textContent}</pf-chip>`)}\n          </pf-chip-group>`}\n          ${!typeahead ? '' : /* TODO: aria attrs */ html`\n          <input id=\"toggle-input\"\n                 aria-label=\"${this.accessibleLabel ?? (computedLabelText || buttonLabel)}\"\n                 aria-autocomplete=\"both\"\n                 ?disabled=\"${disabled}\"\n                 ?hidden=\"${!typeahead}\"\n                 placeholder=\"${buttonLabel}\"\n                 @input=\"${this.#onTypeaheadInput}\">\n          `}\n          <button id=\"toggle-button\"\n                  role=\"combobox\"\n                  aria-hidden=\"${typeahead.toString() as 'true' | 'false'}\"\n                  aria-label=\"${ifDefined(this.accessibleLabel || this.#internals.computedLabelText || undefined)}\"\n                  aria-describedby=\"placeholder\"\n                  aria-controls=\"listbox\"\n                  aria-haspopup=\"listbox\"\n                  aria-expanded=\"${String(this.expanded) as 'true' | 'false'}\"\n                  @keydown=\"${this.#onButtonKeydown}\"\n                  @click=\"${() => !typeahead && this.toggle()}\"\n                  tabindex=\"${ifDefined(typeahead ? -1 : undefined)}\">\n            <span id=\"button-text\" style=\"display: contents;\">\n              <span id=\"toggle-text\"\n                    class=\"${classMap({ offscreen, badge })}\">${buttonLabel}</span>${!hasBadge ? '' : html`\n              <span id=\"toggle-badge\">\n                <pf-badge number=\"${selectedOptions.length}\">${selectedOptions.length}</pf-badge>\n              </span>`}\n            </span>\n            <svg viewBox=\"0 0 320 512\"\n                 fill=\"currentColor\"\n                 aria-hidden=\"true\">\n              <path d=\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\"></path>\n            </svg>\n          </button>\n        </div>\n        <div id=\"listbox-container\"\n             ?hidden=\"${!expanded}\"\n             style=\"${styleMap({\n               marginTop: `${height || 0}px`,\n               width: width ? `${width}px` : 'auto',\n             })}\">\n          <div id=\"listbox\"\n               @focusout=\"${this.#onListboxFocusout}\"\n               @keydown=\"${this.#onListboxKeydown}\"\n               class=\"${classMap({ checkboxes })}\">\n            <pf-option id=\"placeholder\"\n                       disabled\n                       aria-hidden=\"${ifDefined(hasSelection ? 'true' : undefined)}\"\n                       ?hidden=\"${!this.placeholder && !this.#slots.hasSlotted('placeholder')}\">\n              <slot name=\"placeholder\">${this.placeholder}</slot>\n            </pf-option>\n            <slot @slotchange=\"${this.#onListboxSlotchange}\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  override updated(changed: PropertyValues<this>) {\n    if (changed.has('expanded')) {\n      this.#expandedChanged();\n    }\n    if (changed.has('value')) {\n      this.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));\n    }\n    // whether select has removable chips for selected items\n    // NOTE: revisit this in v5\n    // const hasChips = this.variant === 'typeaheadmulti';\n    // reset input if chip has been added\n    // if (this.hasChips && this._input?.value) {\n    //   const chip = this.shadowRoot?.querySelector(`pf-chip#chip-${this._input?.value}`) as HTMLElement;\n    //   if (chip && this._chipGroup) {\n    //     this._chipGroup.focusOnChip(chip);\n    //     this._input.value = '';\n    //   }\n    // }\n  }\n\n  override firstUpdated() {\n    // kick the renderer to that the placeholder gets picked up\n    this.requestUpdate();\n    // TODO: don't do filtering in the controller\n    // if (this.variant === 'typeaheadmulti') {\n    //   this.#listbox.filter = this.filter;\n    // }\n  }\n\n  #variantChanged() {\n    this.#listbox?.hostDisconnected();\n    const getHTMLElement = () => this.#listboxElement;\n    switch (this.variant) {\n      // TODO\n      // case 'typeahead':\n      // case 'typeaheadmulti':\n      //   this.#controller = new ListboxController.of<PfOption>(this, {\n      //     multi: this.variant==='typeaheadmulti',\n      //     a11yController: ActiveDescendantController.of(this)\n      //   });\n      //   break;\n      default:\n        this.#listbox = ListboxController.of<PfOption>(this, {\n          multi: this.variant === 'checkbox',\n          getHTMLElement,\n          isSelected: option => option.selected,\n          requestSelect: (option, selected) => {\n            this.#lastSelected = this.selected;\n            option.selected = !option.disabled && !!selected;\n            this.#selectedChanged();\n            return true;\n          },\n          a11yController: RovingTabindexController.of(this, {\n            getHTMLElement,\n            getItems: () => this.options,\n          }),\n        });\n        break;\n    }\n  }\n\n  async #expandedChanged() {\n    const will = this.expanded ? 'close' : 'open';\n    this.dispatchEvent(new Event(will));\n    if (this.expanded) {\n      await this.#float.show({ placement: this.position || 'bottom', flip: !!this.enableFlip });\n      const focusableItem = this.#listbox?.activeItem ?? this.#listbox?.nextItem;\n      focusableItem?.focus();\n    } else if (this.#lastSelected === this.selected) {\n      await this.#float.hide();\n      this._toggle?.focus();\n    }\n  }\n\n  async #selectedChanged() {\n    await this.updateComplete;\n    this.value = [this.selected]\n        .flat()\n        .filter(x => !!x)\n        .map(x => x!.value)\n        .join();\n    this.dispatchEvent(new PfSelectChangeEvent());\n    switch (this.variant) {\n      case 'single':\n        this.hide();\n        this._toggle?.focus();\n    }\n  }\n\n  #onListboxKeydown(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'Escape':\n        this.hide();\n        this._toggle?.focus();\n    }\n  }\n\n  #onListboxFocusout(event: FocusEvent) {\n    switch (this.variant) {\n      case 'single':\n      case 'checkbox':\n        if (this.expanded) {\n          const root = this.getRootNode();\n          if (root instanceof ShadowRoot\n              || root instanceof Document\n              && !this.options.includes(event.relatedTarget as PfOption)\n          ) {\n            this.hide();\n          }\n        }\n    }\n  }\n\n  #onButtonKeydown(event: KeyboardEvent) {\n    switch (this.variant) {\n      case 'single':\n      case 'checkbox':\n        switch (event.key) {\n          case 'ArrowDown':\n            this.show();\n        }\n    }\n  }\n\n  #onListboxSlotchange() {\n    this.#listbox?.setOptions(this.options);\n    this.options.forEach((option, index, options) => {\n      option.setSize = options.length;\n      option.posInSet = index;\n    });\n  }\n\n  /**\n   * handles chip's remove button clicking\n   * @param opt chip text to be removed from values\n   */\n  #onChipRemove(opt: PfOption, event: PfChipRemoveEvent) {\n  //   if (event.chip) {\n  //     opt.selected = false;\n  //     this._input?.focus();\n  //   }\n  }\n\n  /**\n   * handles typeahead combobox input event\n   */\n  #onTypeaheadInput() {\n    // update filter\n    // if (this.filter !== this._input?.value) {\n    //   this.filter = this._input?.value || '';\n    //   this.show();\n    // }\n    // TODO: handle hiding && aria hiding options\n  }\n\n  #computePlaceholderText() {\n    return this.placeholder\n      || this.querySelector<HTMLSlotElement>('[slot=placeholder]')\n          ?.assignedNodes()\n          ?.reduce((acc, node) => `${acc}${node.textContent}`, '')?.trim()\n      || this.#listbox?.options\n          ?.filter(x => x !== this.shadowRoot?.getElementById('placeholder'))\n          ?.at(0)?.value\n      || '';\n  }\n\n  /**\n   * Opens the dropdown\n   */\n  async show() {\n    this.expanded = true;\n    await this.updateComplete;\n  }\n\n  /**\n   * Closes listbox\n   */\n  async hide() {\n    this.expanded = false;\n    await this.updateComplete;\n  }\n\n  /**\n   * toggles popup based on current state\n   */\n  async toggle() {\n    this.expanded = !this.expanded;\n    await this.updateComplete;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-select': PfSelect;\n  }\n}\n"]}

package/pf-select/test/pf-select.e2e.d.ts

@@ -0,0 +1 @@
+export {};

package/pf-select/test/pf-select.e2e.js

@@ -0,0 +1,11 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+const tagName = 'pf-select';
+test.describe(tagName, () => {
+    test('snapshot', async ({ page }) => {
+        const componentPage = new PfeDemoPage(page, tagName);
+        await componentPage.navigate();
+        await componentPage.snapshot();
+    });
+});
+//# sourceMappingURL=pf-select.e2e.js.map

package/pf-select/test/pf-select.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-select.e2e.js","sourceRoot":"","sources":["pf-select.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAEnF,MAAM,OAAO,GAAG,WAAW,CAAC;AAE5B,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACrD,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;QAC/B,MAAM,aAAa,CAAC,QAAQ,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test } from '@playwright/test';\nimport { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';\n\nconst tagName = 'pf-select';\n\ntest.describe(tagName, () => {\n  test('snapshot', async ({ page }) => {\n    const componentPage = new PfeDemoPage(page, tagName);\n    await componentPage.navigate();\n    await componentPage.snapshot();\n  });\n});\n"]}

package/pf-select/test/pf-select.spec.d.ts

@@ -0,0 +1 @@
+export {};