@patternfly/elements 4.1.0 → 4.2.0

package/pf-search-input/pf-search-input.js

@@ -0,0 +1,630 @@
+var _PfSearchInput_instances, _PfSearchInput_internals, _PfSearchInput_float, _PfSearchInput_slots, _PfSearchInput_clickedCloseButton, _PfSearchInput_setExpanded, _PfSearchInput_combobox, _PfSearchInput_doExpand, _PfSearchInput_doCollapse, _PfSearchInput_onClickCloseButton, _PfSearchInput_hideCloseButton, _PfSearchInput_onChange, _PfSearchInput_onSubmit, _PfSearchInput_updateValue, _PfSearchInput_onKeyDown, _PfSearchInput_showListbox, _PfSearchInput_setItemSelected, _PfSearchInput_setItemActive, _PfSearchInput_setIsExpanded;
+import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
+import { LitElement, html, isServer } 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 { styleMap } from 'lit/directives/style-map.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ComboboxController } from '@patternfly/pfe-core/controllers/combobox-controller.js';
+import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+import { observes } from '@patternfly/pfe-core/decorators/observes.js';
+import { PfOption } from '../pf-select/pf-option.js';
+import { css } from "lit";
+const styles = css `:host {
+  font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
+  font-size: var(--pf-global--FontSize--md, 16px);
+  font-weight: var(--pf-global--FontWeight--normal, 400);
+  color: var(--pf-global--Color--100, #151515);
+  --_pf-option-checkboxes-display: none;
+  --_pf-option-svg-display: block;
+  --pf-c-search-input__toggle--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
+  --pf-c-search-input__toggle--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-search-input__toggle--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
+  --pf-c-search-input__toggle--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-search-input__toggle--MinWidth: var(--pf-global--target-size--MinWidth, 44px);
+  --pf-c-search-input__toggle--FontSize: var(--pf-global--FontSize--md, 1rem);
+  --pf-c-search-input__toggle--FontWeight: var(--pf-global--FontWeight--normal, 400);
+  --pf-c-search-input__toggle--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+  --pf-c-search-input__toggle--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
+  --pf-c-search-input__toggle--before--BorderTopWidth: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-search-input__toggle--before--BorderRightWidth: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-search-input__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-search-input__toggle--before--BorderLeftWidth: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-search-input__toggle--before--BorderWidth: initial;
+  --pf-c-search-input__toggle--before--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  --pf-c-search-input__toggle--before--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  --pf-c-search-input__toggle--before--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
+  --pf-c-search-input__toggle--before--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);
+  --pf-c-search-input__toggle--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-search-input__toggle--hover--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+  --pf-c-search-input__toggle--focus--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+  --pf-c-search-input__toggle--focus--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-search-input__toggle--active--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+  --pf-c-search-input__toggle--active--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-search-input__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--active-color--100, #06c);
+  --pf-c-search-input__toggle--m-expanded--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-search-input__toggle--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
+  --pf-c-search-input__toggle--m-plain--before--BorderColor: transparent;
+  --pf-c-search-input__toggle--m-placeholder--Color: transparent;
+  --pf-c-search-input--m-invalid__toggle--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+  --pf-c-search-input--m-invalid__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-search-input--m-invalid__toggle--hover--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+  --pf-c-search-input--m-invalid__toggle--focus--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+  --pf-c-search-input--m-invalid__toggle--active--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+  --pf-c-search-input--m-invalid__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
+  --pf-c-search-input--m-invalid__toggle-status-icon--Color: var(--pf-global--danger-color--100, #c9190b);
+  --pf-c-search-input--m-success__toggle--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+  --pf-c-search-input--m-success__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-search-input--m-success__toggle--hover--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+  --pf-c-search-input--m-success__toggle--focus--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+  --pf-c-search-input--m-success__toggle--active--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+  --pf-c-search-input--m-success__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
+  --pf-c-search-input--m-success__toggle-status-icon--Color: var(--pf-global--success-color--100, #3e8635);
+  --pf-c-search-input--m-warning__toggle--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+  --pf-c-search-input--m-warning__toggle--before--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
+  --pf-c-search-input--m-warning__toggle--hover--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+  --pf-c-search-input--m-warning__toggle--focus--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+  --pf-c-search-input--m-warning__toggle--active--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+  --pf-c-search-input--m-warning__toggle--m-expanded--before--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
+  --pf-c-search-input--m-warning__toggle-status-icon--Color: var(--pf-global--warning-color--100, #f0ab00);
+  --pf-c-search-input__toggle-wrapper--not-last-child--MarginRight: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-search-input__toggle-wrapper--MaxWidth: calc(100% - var(--pf-global--spacer--lg, 1.5rem));
+  --pf-c-search-input__toggle--m-placeholder__toggle-text--Color: var(--pf-global--Color--dark-200, #6a6e73);
+  --pf-c-search-input__toggle-icon--toggle-text--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-search-input__toggle-status-icon--MarginLeft: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-search-input__toggle-status-icon--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-search-input--m-plain__toggle-arrow--Color: var(--pf-global--Color--200, #6a6e73);
+  --pf-c-search-input--m-plain--hover__toggle-arrow--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-search-input__toggle-clear--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-search-input__toggle-clear--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+  --pf-c-search-input__toggle-clear--toggle-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-search-input__toggle-button--Color: var(--pf-global--Color--100, #151515);
+  --pf-c-search-input__list-item--m-loading--PaddingTop: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-search-input__menu-content--MaxHeight: 20rem;
+}
+
+:host,
+#outer {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  inline-size: 100%;
+}
+
+:host([hidden]),
+*[hidden] {
+  display: none !important;
+}
+
+:host([aria-disabled="true"]) {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+#outer.disabled {
+  color: var(--pf-global--Color--dark-200, #6a6e73);
+}
+
+#outer {
+  position: relative;
+}
+
+#listbox-container {
+  display: inline-flex;
+  position: absolute;
+  background-color: var(--pf-theme--color--surface--lightest, #fff) !important;
+  opacity: 0;
+  --_active-descendant-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  box-shadow: 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06);
+}
+
+#outer.expanded #listbox-container {
+  opacity: 1;
+  z-index: 9999 !important;
+  max-block-size: var(--pf-c-search-input__menu-content--MaxHeight, 20rem);
+  overflow-y: scroll;
+}
+
+#listbox {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  inline-size: 100%;
+}
+
+#listbox slot.disabled {
+  color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
+  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  pointer-events: none;
+  cursor: not-allowed;
+  
+  --_active-descendant-color: transparent;
+  --_svg-color: var(--pf-c-list__item-icon--Color, #6a6e73) !important;
+}
+
+#toggle {
+  background-color: var(--pf-c-search-input__toggle--BackgroundColor, #fff) !important;
+}
+
+#toggle,
+#toggle-input {
+  display: flex;
+  font-family: var(--pf-global--FontFamily--sans-serif, "RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif);
+  font-size: var(--pf-c-search-input__toggle--FontSize, 1rem);
+  font-weight: var(--pf-c-search-input__toggle--FontWeight, 400);
+  line-height: var(--pf-c-search-input__toggle--LineHeight, 1.5);
+}
+
+#toggle {
+  border: 1px solid var(--pf-global--BorderColor--100, #d2d2d2);
+  border-bottom-color: var(--pf-theme--color--text, #151515);
+  justify-content: space-between;
+}
+
+.disabled #toggle {
+  color: var(--pf-global--Color--dark-200, #6a6e73) !important;
+  background-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
+  caret-color: transparent;
+}
+
+#toggle-input {
+  background: transparent;
+  border: none;
+  text-align: left;
+  border-radius: 0;
+  padding-inline-start: 3rem;
+}
+
+#toggle-input {
+  justify-content: space-between;
+  inline-size: 100%;
+  box-sizing: border-box;
+  block-size: 2.25rem;
+}
+
+.disabled #toggle-input {
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+.close-button {
+  --pf-c-button--PaddingLeft: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-button--PaddingRight: var(--pf-global--spacer--sm, 0.5rem);
+  --pf-c-button--PaddingTop: var(--pf-global--spacer--xs, 0.25rem);
+  --pf-c-button--PaddingBottom: var(--pf-global--spacer--xs, 0.25rem);
+
+  color: currentColor;
+  background-color: transparent;
+  max-block-size: 2.25rem;
+  max-inline-size: 2.25rem;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0px;
+  position: relative;
+
+  pf-icon {
+    position: relative;
+    inset-block-start: 5px;
+  }
+}
+
+.close-button-container {
+  block-size: 2.25rem;
+  inline-size: 2.25rem;
+}
+
+#toggle-text {
+  flex: 1 1 auto;
+}
+
+#description {
+  display: block;
+}
+
+#listbox.checkboxes {
+  --_pf-option-checkboxes-display: none;
+  --_pf-option-svg-display: none;
+}
+
+.visually-hidden {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  block-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  inline-size: 1px;
+}
+
+::slotted(hr) {
+  --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm, 1px);
+  --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
+  --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
+  --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100, #d2d2d2);
+  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
+  --pf-c-divider--after--FlexBasis: 100%;
+  --pf-c-divider--after--Inset: 0%;
+  --pf-c-divider--m-vertical--after--FlexBasis: 100%;
+  --pf-c-divider--m-horizontal--Display: flex;
+  --pf-c-divider--m-horizontal--FlexDirection: row;
+  --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
+  --pf-c-divider--m-horizontal--after--Width: auto;
+  --pf-c-divider--m-vertical--Display: inline-flex;
+  --pf-c-divider--m-vertical--FlexDirection: column;
+  --pf-c-divider--m-vertical--after--Height: auto;
+  --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
+  --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
+  --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+  --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+  --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+  display: var(--pf-c-divider--Display, flex);
+  flex-direction: var(--pf-c-divider--FlexDirection);
+  border: 0;
+  inline-size: 100%;
+  margin-top: var(--pf-c-search-input-menu--c-divider--MarginTop);
+  margin-bottom: var(--pf-c-search-input-menu--c-divider--MarginBottom);
+}
+
+::slotted(hr)::after {
+  content: '';
+  inline-size: var(--pf-c-divider--after--Width, 100%) !important;
+  block-size: var(--pf-c-divider--after--Height, 1px);
+  background-color: var(--pf-c-divider--after--BackgroundColor);
+  flex: 1 0 100%;
+}
+
+div.search-icon {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: var(--pf-global--spacer--md, 1rem);
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+}
+
+#outer:focus-within {
+  #toggle {
+    border-bottom: none;
+    border-bottom-left-radius: 4px;
+
+    #toggle-input {
+      border-bottom: var(--pf-global--spacer--xs, 0.125rem) solid var(--pf-theme--color--accent, #0066cc);
+    }
+  }
+
+  .close-button-container {
+    position: relative;
+
+    &::after {
+      content: '';
+      inline-size: 36px;
+      block-size: var(--pf-global--spacer--xs, 0.125rem);
+      inset-block-end: 0px;
+      inset-inline-start: 0px;
+      background-color: var(--pf-theme--color--accent, #0066cc);
+      position: absolute;
+    }
+  }
+}
+
+::slotted(pf-option[selected]) {
+  --_pf-option-svg-display: none;
+  --_pf-option-selected-background-color: var(--pf-global--BackgroundColor--100, #fff);
+}`;
+/** Fired when a `<pf-search-input>` element's value changes */
+export class PfSearchChangeEvent extends Event {
+    constructor() {
+        super('change', { bubbles: true });
+    }
+}
+let PfSearchInput = class PfSearchInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        _PfSearchInput_instances.add(this);
+        /** Whether the search input is disabled */
+        this.disabled = false;
+        /** Whether the search input's listbox is expanded */
+        this.expanded = 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';
+        _PfSearchInput_internals.set(this, InternalsController.of(this));
+        _PfSearchInput_float.set(this, new FloatingDOMController(this, { content: () => this._listboxContainer }));
+        _PfSearchInput_slots.set(this, new SlotController(this, null, 'placeholder'));
+        /** True when the user just clicked the close button */
+        _PfSearchInput_clickedCloseButton.set(this, false);
+        _PfSearchInput_setExpanded.set(this, false);
+        _PfSearchInput_combobox.set(this, ComboboxController.of(this, {
+            getItems: () => this.options,
+            getFallbackLabel: () => this.accessibleLabel
+                || __classPrivateFieldGet(this, _PfSearchInput_internals, "f").computedLabelText
+                || this.placeholder
+                || __classPrivateFieldGet(this, _PfSearchInput_slots, "f").getSlotted('placeholder').map(x => x.textContent).join(''),
+            getListboxElement: () => this._listbox ?? null,
+            getToggleButton: () => this._toggleButton ?? null,
+            getComboboxInput: () => this._toggleInput ?? null,
+            isExpanded: () => __classPrivateFieldGet(this, _PfSearchInput_instances, "m", _PfSearchInput_setIsExpanded).call(this),
+            requestShowListbox: () => __classPrivateFieldGet(this, _PfSearchInput_instances, "m", _PfSearchInput_showListbox).call(this),
+            requestHideListbox: () => void (this.expanded && (this.expanded = false)),
+            setItemHidden: (item, hidden) => (item.id !== 'placeholder') && void (item.hidden = hidden),
+            isItem: item => item instanceof PfOption,
+            setItemActive: (item, active) => __classPrivateFieldGet(this, _PfSearchInput_instances, "m", _PfSearchInput_setItemActive).call(this, item, active),
+            setItemSelected: (item, selected) => __classPrivateFieldGet(this, _PfSearchInput_instances, "m", _PfSearchInput_setItemSelected).call(this, item, selected),
+        }));
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    /** List of options */
+    get options() {
+        if (isServer) {
+            return []; // TODO: expose a DOM property to allow setting options in SSR scenarios
+        }
+        else {
+            return [
+                this._placeholder,
+                ...Array.from(this.querySelectorAll('pf-option')),
+            ].filter((x) => !!x && !x.hidden);
+        }
+    }
+    render() {
+        const { disabled, expanded, placeholder } = this;
+        const { anchor = 'bottom', alignment = 'start', styles = {} } = __classPrivateFieldGet(this, _PfSearchInput_float, "f");
+        const { height, width } = this.getBoundingClientRect?.() || {};
+        return html `
+      <div id="outer"
+           style="${styleMap(styles)}"
+           class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}">
+        <div id="toggle">
+          <div class="search-icon">
+            <pf-icon size="md" icon="search" set="fas">search</pf-icon>
+          </div>
+          <input id="toggle-input"
+                 aria-disabled="${disabled}"
+                 placeholder="${placeholder}"
+                 @input="${__classPrivateFieldGet(this, _PfSearchInput_instances, "m", _PfSearchInput_onChange)}"
+                 @keyup="${__classPrivateFieldGet(this, _PfSearchInput_instances, "m", _PfSearchInput_onSubmit)}"
+                 @keydown="${__classPrivateFieldGet(this, _PfSearchInput_instances, "m", _PfSearchInput_onKeyDown)}">
+          <div class="close-button-container">
+            <pf-button id="toggle-button"
+                       class="close-button"
+                       plain
+                       label="Close"
+                       ?hidden="${__classPrivateFieldGet(this, _PfSearchInput_instances, "m", _PfSearchInput_hideCloseButton).call(this)}"
+                       @click="${__classPrivateFieldGet(this, _PfSearchInput_instances, "m", _PfSearchInput_onClickCloseButton)}">
+              <pf-icon size="md"
+                       icon="close"
+                       set="patternfly">close</pf-icon>
+            </pf-button>
+          </div>
+        </div>
+        <div id="listbox-container"
+             ?hidden="${!expanded}"
+             tabindex="-1"
+             style="${styleMap({
+            marginTop: `${height || 0}px`,
+            width: width ? `${width}px` : 'auto',
+        })}">
+          <div id="listbox">
+            ${__classPrivateFieldGet(this, _PfSearchInput_combobox, "f").renderItemsToShadowRoot()}
+            <!-- insert \`<pf-option>\` and/or \`<pf-option-groups>\` here -->
+            <slot ?hidden="${!ComboboxController.supportsCrossRootActiveDescendant}"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    disabledChanged() {
+        __classPrivateFieldGet(this, _PfSearchInput_combobox, "f").disabled = this.disabled;
+    }
+    async expandedChanged(old, expanded) {
+        if (this.dispatchEvent(new Event(this.expanded ? 'close' : 'open'))) {
+            if (expanded) {
+                __classPrivateFieldGet(this, _PfSearchInput_instances, "m", _PfSearchInput_doExpand).call(this);
+            }
+            else {
+                __classPrivateFieldGet(this, _PfSearchInput_instances, "m", _PfSearchInput_doCollapse).call(this);
+            }
+        }
+    }
+    valueChanged() {
+        __classPrivateFieldGet(this, _PfSearchInput_internals, "f").setFormValue(this.value ?? '');
+        this.dispatchEvent(new PfSearchChangeEvent());
+    }
+    /**
+     * 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() {
+        if (this.expanded) {
+            await this.hide();
+        }
+        else {
+            await this.show();
+        }
+    }
+};
+_PfSearchInput_internals = new WeakMap();
+_PfSearchInput_float = new WeakMap();
+_PfSearchInput_slots = new WeakMap();
+_PfSearchInput_clickedCloseButton = new WeakMap();
+_PfSearchInput_setExpanded = new WeakMap();
+_PfSearchInput_combobox = new WeakMap();
+_PfSearchInput_instances = new WeakSet();
+_PfSearchInput_doExpand = async function _PfSearchInput_doExpand() {
+    try {
+        await __classPrivateFieldGet(this, _PfSearchInput_float, "f").show({ placement: this.position || 'bottom', flip: true });
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+_PfSearchInput_doCollapse = async function _PfSearchInput_doCollapse() {
+    try {
+        await __classPrivateFieldGet(this, _PfSearchInput_float, "f").hide();
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+_PfSearchInput_onClickCloseButton = function _PfSearchInput_onClickCloseButton() {
+    this._toggleInput.value = '';
+    __classPrivateFieldGet(this, _PfSearchInput_instances, "m", _PfSearchInput_updateValue).call(this, this._toggleInput?.value ?? '');
+    __classPrivateFieldSet(this, _PfSearchInput_clickedCloseButton, true, "f");
+    this._toggleInput?.focus();
+};
+_PfSearchInput_hideCloseButton = function _PfSearchInput_hideCloseButton() {
+    if (!isServer) {
+        return !this.expanded && this._toggleInput?.value.trim() === ''; // SSR or server-side environment: don't hide the element
+    }
+    return false;
+};
+_PfSearchInput_onChange = function _PfSearchInput_onChange() {
+    __classPrivateFieldGet(this, _PfSearchInput_instances, "m", _PfSearchInput_updateValue).call(this, this._toggleInput?.value ?? '');
+};
+_PfSearchInput_onSubmit = function _PfSearchInput_onSubmit(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+        this.dispatchEvent(new PfSearchChangeEvent());
+    }
+};
+_PfSearchInput_updateValue = function _PfSearchInput_updateValue(value) {
+    this.value = value;
+    // it's necessary to reset the 'selected' state of combobox
+    // since otherwise, combobox controller will attempt to prevent us from
+    // re-selecting the last-selected item, even though pf-search-input
+    // doesn't have a selected property
+    __classPrivateFieldGet(this, _PfSearchInput_combobox, "f").selected = [];
+};
+_PfSearchInput_onKeyDown = function _PfSearchInput_onKeyDown(event) {
+    const target = event.target;
+    if (target?.getAttribute('aria-disabled') === 'true') {
+        // Allow Tab and Shift+Tab to move focus
+        if (event.key === 'Tab') {
+            return;
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    }
+};
+_PfSearchInput_showListbox = async function _PfSearchInput_showListbox() {
+    await new Promise(requestAnimationFrame);
+    if (this.disabled) {
+        return;
+    }
+    ;
+    if (__classPrivateFieldGet(this, _PfSearchInput_setExpanded, "f")) {
+        // If expanded is set to true on clicking close button
+        // set expanded to false
+        __classPrivateFieldSet(this, _PfSearchInput_setExpanded, false, "f");
+        this.expanded = false;
+    }
+    else {
+        this.expanded || (this.expanded = true);
+    }
+};
+_PfSearchInput_setItemSelected = function _PfSearchInput_setItemSelected(item, selected) {
+    item.selected = selected;
+    if (selected) {
+        this._toggleInput.value = item.value;
+        __classPrivateFieldGet(this, _PfSearchInput_instances, "m", _PfSearchInput_updateValue).call(this, this._toggleInput?.value ?? '');
+    }
+};
+_PfSearchInput_setItemActive = function _PfSearchInput_setItemActive(item, active) {
+    item.active = active;
+    if (this.expanded && active) {
+        item?.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'nearest' });
+    }
+};
+_PfSearchInput_setIsExpanded = function _PfSearchInput_setIsExpanded() {
+    if (__classPrivateFieldGet(this, _PfSearchInput_clickedCloseButton, "f")) {
+        __classPrivateFieldSet(this, _PfSearchInput_clickedCloseButton, false, "f");
+        __classPrivateFieldSet(this, _PfSearchInput_setExpanded, true, "f");
+        return true;
+    }
+    return this.expanded;
+};
+PfSearchInput.styles = [styles];
+PfSearchInput.formAssociated = true;
+PfSearchInput.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+PfSearchInput.version = "4.2.0";
+__decorate([
+    property({ attribute: 'accessible-label' })
+], PfSearchInput.prototype, "accessibleLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfSearchInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], PfSearchInput.prototype, "expanded", void 0);
+__decorate([
+    property()
+], PfSearchInput.prototype, "value", void 0);
+__decorate([
+    property()
+], PfSearchInput.prototype, "placeholder", void 0);
+__decorate([
+    property({ reflect: true })
+], PfSearchInput.prototype, "position", void 0);
+__decorate([
+    query('#toggle-input')
+], PfSearchInput.prototype, "_toggleInput", void 0);
+__decorate([
+    query('#toggle-button')
+], PfSearchInput.prototype, "_toggleButton", void 0);
+__decorate([
+    query('#listbox')
+], PfSearchInput.prototype, "_listbox", void 0);
+__decorate([
+    query('#listbox-container')
+], PfSearchInput.prototype, "_listboxContainer", void 0);
+__decorate([
+    query('#placeholder')
+], PfSearchInput.prototype, "_placeholder", void 0);
+__decorate([
+    observes('disabled')
+], PfSearchInput.prototype, "disabledChanged", null);
+__decorate([
+    observes('expanded')
+], PfSearchInput.prototype, "expandedChanged", null);
+__decorate([
+    observes('value')
+], PfSearchInput.prototype, "valueChanged", null);
+PfSearchInput = __decorate([
+    customElement('pf-search-input')
+], PfSearchInput);
+export { PfSearchInput };
+//# sourceMappingURL=pf-search-input.js.map

package/pf-search-input/pf-search-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-search-input.js","sourceRoot":"","sources":["pf-search-input.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\nimport type { TemplateResult } from 'lit';\n\nimport { LitElement, html, isServer } 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 { styleMap } from 'lit/directives/style-map.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { ComboboxController } from '@patternfly/pfe-core/controllers/combobox-controller.js';\nimport { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\nimport { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';\n\nimport { observes } from '@patternfly/pfe-core/decorators/observes.js';\nimport { PfOption } from '../pf-select/pf-option.js';\nimport styles from './pf-search-input.css';\n\n/** Fired when a `<pf-search-input>` element's value changes */\nexport class PfSearchChangeEvent extends Event {\n  constructor() {\n    super('change', { bubbles: true });\n  }\n}\n\n/**\n * A search input lets users type in words to find specific items or information.\n * As they type, it can show matching results to help them quickly find what they are looking for.\n *\n * A search input consists of a text field where users can type to find specific content or items.\n * Unlike selects or dropdowns, which offer predefined options, a search input lets users enter\n * their own keywords to filter or locate results. It includes a clear (×) button to easily\n * remove the current input, allowing users to start a new search quickly.\n *\n * @summary Allows users to search through a list for specific search terms\n * @alias Search Input\n *\n * @fires open - when the menu toggles open\n * @fires close - when the menu toggles closed\n */\n@customElement('pf-search-input')\nexport class PfSearchInput extends LitElement {\n  static readonly styles: CSSStyleSheet[] = [styles];\n\n  static readonly formAssociated = true;\n\n  static override readonly shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** Accessible label for the search input */\n  @property({ attribute: 'accessible-label' }) accessibleLabel?: string;\n\n  /** Whether the search input is disabled */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Whether the search input's listbox is expanded */\n  @property({ type: Boolean, reflect: true }) expanded = false;\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  @query('#toggle-input') private _toggleInput?: HTMLInputElement;\n\n  @query('#toggle-button') private _toggleButton?: HTMLDivElement;\n\n  @query('#listbox') private _listbox?: HTMLElement;\n\n  @query('#listbox-container') private _listboxContainer?: HTMLElement;\n\n  @query('#placeholder') private _placeholder?: PfOption;\n\n  #internals = InternalsController.of(this);\n\n  #float = new FloatingDOMController(this, { content: () => this._listboxContainer });\n\n  #slots = new SlotController(this, null, 'placeholder');\n\n  /** True when the user just clicked the close button */\n  #clickedCloseButton = false;\n  #setExpanded = false;\n\n  #combobox = ComboboxController.of(this, {\n    getItems: () => this.options,\n    getFallbackLabel: () => this.accessibleLabel\n      || this.#internals.computedLabelText\n      || this.placeholder\n      || this.#slots.getSlotted('placeholder').map(x => x.textContent).join(''),\n    getListboxElement: () => this._listbox ?? null,\n    getToggleButton: () => this._toggleButton ?? null,\n    getComboboxInput: () => this._toggleInput ?? null,\n    isExpanded: () => this.#setIsExpanded(),\n    requestShowListbox: () => this.#showListbox(),\n    requestHideListbox: () => void (this.expanded &&= false),\n    setItemHidden: (item, hidden) => (item.id !== 'placeholder') && void (item.hidden = hidden),\n    isItem: item => item instanceof PfOption,\n    setItemActive: (item, active) => this.#setItemActive(item, active),\n    setItemSelected: (item, selected) => this.#setItemSelected(item, selected),\n  });\n\n  connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n\n  /** List of options */\n  get options(): PfOption[] {\n    if (isServer) {\n      return []; // TODO: expose a DOM property to allow setting options in SSR scenarios\n    } else {\n      return [\n        this._placeholder,\n        ...Array.from(this.querySelectorAll('pf-option')),\n      ].filter((x): x is PfOption => !!x && !x.hidden);\n    }\n  }\n\n  override render(): TemplateResult<1> {\n    const { disabled, expanded, placeholder } = this;\n    const { anchor = 'bottom', alignment = 'start', styles = {} } = this.#float;\n    const { height, width } = this.getBoundingClientRect?.() || {};\n\n    return html`\n      <div id=\"outer\"\n           style=\"${styleMap(styles)}\"\n           class=\"${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}\">\n        <div id=\"toggle\">\n          <div class=\"search-icon\">\n            <pf-icon size=\"md\" icon=\"search\" set=\"fas\">search</pf-icon>\n          </div>\n          <input id=\"toggle-input\"\n                 aria-disabled=\"${disabled}\"\n                 placeholder=\"${placeholder}\"\n                 @input=\"${this.#onChange}\"\n                 @keyup=\"${this.#onSubmit}\"\n                 @keydown=\"${this.#onKeyDown}\">\n          <div class=\"close-button-container\">\n            <pf-button id=\"toggle-button\"\n                       class=\"close-button\"\n                       plain\n                       label=\"Close\"\n                       ?hidden=\"${this.#hideCloseButton()}\"\n                       @click=\"${this.#onClickCloseButton}\">\n              <pf-icon size=\"md\"\n                       icon=\"close\"\n                       set=\"patternfly\">close</pf-icon>\n            </pf-button>\n          </div>\n        </div>\n        <div id=\"listbox-container\"\n             ?hidden=\"${!expanded}\"\n             tabindex=\"-1\"\n             style=\"${styleMap({\n               marginTop: `${height || 0}px`,\n               width: width ? `${width}px` : 'auto',\n             })}\">\n          <div id=\"listbox\">\n            ${this.#combobox.renderItemsToShadowRoot()}\n            <!-- insert \\`<pf-option>\\` and/or \\`<pf-option-groups>\\` here -->\n            <slot ?hidden=\"${!ComboboxController.supportsCrossRootActiveDescendant}\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n\n  @observes('disabled')\n  private disabledChanged() {\n    this.#combobox.disabled = this.disabled;\n  }\n\n  @observes('expanded')\n  private async expandedChanged(old: boolean, expanded: boolean) {\n    if (this.dispatchEvent(new Event(this.expanded ? 'close' : 'open'))) {\n      if (expanded) {\n        this.#doExpand();\n      } else {\n        this.#doCollapse();\n      }\n    }\n  }\n\n  @observes('value')\n  private valueChanged() {\n    this.#internals.setFormValue(this.value ?? '');\n    this.dispatchEvent(new PfSearchChangeEvent());\n  }\n\n  async #doExpand() {\n    try {\n      await this.#float.show({ placement: this.position || 'bottom', flip: true });\n      return true;\n    } catch {\n      return false;\n    }\n  }\n\n  async #doCollapse() {\n    try {\n      await this.#float.hide();\n      return true;\n    } catch {\n      return false;\n    }\n  }\n\n  /**\n   * Opens the dropdown\n   */\n  async show(): Promise<void> {\n    this.expanded = true;\n    await this.updateComplete;\n  }\n\n  /**\n   * Closes listbox\n   */\n  async hide(): Promise<void> {\n    this.expanded = false;\n    await this.updateComplete;\n  }\n\n  /**\n   * toggles popup based on current state\n   */\n  async toggle(): Promise<void> {\n    if (this.expanded) {\n      await this.hide();\n    } else {\n      await this.show();\n    }\n  }\n\n  #onClickCloseButton() {\n    this._toggleInput!.value = '';\n    this.#updateValue(this._toggleInput?.value ?? '');\n    this.#clickedCloseButton = true;\n    this._toggleInput?.focus();\n  }\n\n  #hideCloseButton() {\n    if (!isServer) {\n      return !this.expanded && this._toggleInput?.value.trim() === ''; // SSR or server-side environment: don't hide the element\n    }\n    return false;\n  }\n\n  #onChange() {\n    this.#updateValue(this._toggleInput?.value ?? '');\n  }\n\n  #onSubmit(event: KeyboardEvent) {\n    if (event.key === 'Enter' || event.key === ' ') {\n      this.dispatchEvent(new PfSearchChangeEvent());\n    }\n  }\n\n  #updateValue(value: string) {\n    this.value = value;\n    // it's necessary to reset the 'selected' state of combobox\n    // since otherwise, combobox controller will attempt to prevent us from\n    // re-selecting the last-selected item, even though pf-search-input\n    // doesn't have a selected property\n    this.#combobox.selected = [];\n  }\n\n  #onKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    if (target?.getAttribute('aria-disabled') === 'true') {\n      // Allow Tab and Shift+Tab to move focus\n      if (event.key === 'Tab') {\n        return;\n      }\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n\n  async #showListbox() {\n    await new Promise(requestAnimationFrame);\n    if (this.disabled) {\n      return;\n    };\n\n    if (this.#setExpanded) {\n      // If expanded is set to true on clicking close button\n      // set expanded to false\n      this.#setExpanded = false;\n      this.expanded = false;\n    } else {\n      this.expanded ||= true;\n    }\n  }\n\n  #setItemSelected(item: PfOption, selected: boolean) {\n    item.selected = selected;\n    if (selected) {\n      this._toggleInput!.value = item.value;\n      this.#updateValue(this._toggleInput?.value ?? '');\n    }\n  }\n\n  #setItemActive(item: PfOption, active: boolean) {\n    item.active = active;\n    if (this.expanded && active) {\n      item?.scrollIntoView({ behavior: 'auto', block: 'nearest', inline: 'nearest' });\n    }\n  }\n\n  #setIsExpanded() {\n    if (this.#clickedCloseButton) {\n      this.#clickedCloseButton = false;\n      this.#setExpanded = true;\n      return true;\n    }\n    return this.expanded;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-search-input': PfSearchInput;\n  }\n}\n"]}

package/pf-search-input/test/pf-search-input.e2e.d.ts

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