@carbon/ibmdotcom-web-components 1.30.0-rc.2 → 1.30.0-rc.3

package/es/components/search-with-typeahead/search-with-typeahead-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-with-typeahead-item.js","names":["_classMap2","require","_litElement","_settings","_interopRequireDefault","_settings2","_searchWithTypeaheadCss","_templateObject","_templateObject2","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","arguments","apply","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","prefix","settings","ddsPrefix","ddsSettings","stablePrefix","DDSSearchWithTypeaheadItem","_decorate2","customElement","concat","_initialize","_LitElement","_LitElement2","_inherits2","_super","_this","_classCallCheck2","_len","length","args","Array","_key","_assertThisInitialized2","_createClass2","F","d","kind","decorators","property","key","value","type","reflect","connectedCallback","hasAttribute","setAttribute","_get2","shouldUpdate","changedProperties","has","text","parent","getRootNode","host","_ref","searchQueryString","toLowerCase","_content","lowerCaseText","includes","startingIndex","indexOf","substring","highlightedResult","html","_taggedTemplateLiteral2","content","split","RegExp","reduce","acc","item","push","replace","pop","updated","String","highlighted","render","_classMap","containerClasses","classMap","_defineProperty2","styles","LitElement","_default","exports"],"sources":["components/search-with-typeahead/search-with-typeahead-item.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport {\n  html,\n  property,\n  customElement,\n  LitElement,\n  TemplateResult,\n} from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport styles from './search-with-typeahead.scss';\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/**\n * Search result item in masthead.\n *\n * @element dds-search-with-typeahead-item\n */\n@customElement(`${ddsPrefix}-search-with-typeahead-item`)\nclass DDSSearchWithTypeaheadItem extends LitElement {\n  /**\n   * The the search result to be shown.\n   */\n  private _content?: TemplateResult | string | (TemplateResult | string)[];\n\n  /**\n   * The optional href to redirect the user to.\n   */\n  @property()\n  href = '';\n\n  /**\n   * `true` if this dropdown item should be highlighted.\n   * If `true`, parent `<dds-search-with-typeahead>` selects/deselects this dropdown item upon keyboard interaction.\n   *\n   * @private\n   */\n  @property({ type: Boolean, reflect: true })\n  highlighted = false;\n\n  /**\n   * The search result text.\n   */\n  @property()\n  text = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'option');\n    }\n    super.connectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    const result = super.shouldUpdate(changedProperties);\n    if (changedProperties.has('text')) {\n      const { text } = this;\n      const parent = (this.getRootNode() as any).host;\n      let { searchQueryString } = parent ?? {};\n      searchQueryString = searchQueryString.toLowerCase();\n\n      if (!searchQueryString) {\n        this._content = text;\n      } else {\n        const lowerCaseText = text.toLowerCase();\n        if (lowerCaseText.includes(searchQueryString)) {\n          const startingIndex = lowerCaseText.indexOf(searchQueryString);\n          searchQueryString = text.substring(\n            startingIndex,\n            startingIndex + searchQueryString.length\n          );\n        }\n\n        const highlightedResult = html`\n          <span class=\"${ddsPrefix}-ce--search-with-typeahead-item__highlighted\"\n            >${searchQueryString}</span\n          >\n        `;\n        const content = text\n          .split(new RegExp(searchQueryString, 'i'))\n          .reduce((acc, item) => {\n            acc.push(item.replace(/^\\s/, '\\xa0').replace(/\\s$/, '\\xa0'));\n            acc.push(highlightedResult);\n            return acc;\n          }, [] as (TemplateResult | string)[]);\n        content.pop();\n        this._content = content;\n      }\n    }\n    return result;\n  }\n\n  updated(changedProperties) {\n    super.updated(changedProperties);\n    if (changedProperties.has('highlighted')) {\n      this.setAttribute('aria-selected', String(Boolean(this.highlighted)));\n    }\n  }\n\n  render() {\n    const { highlighted, _content: content } = this;\n    const containerClasses = classMap({\n      [`${prefix}--container-class`]: true,\n      [`${prefix}--container-highlight-class`]: highlighted,\n    });\n    return html`\n      <div class=\"${containerClasses}\" tabindex=\"-1\">${content}</div>\n    `;\n  }\n\n  static styles = styles;\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSSearchWithTypeaheadItem;\n"],"mappings":"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"}
+{"version":3,"file":"search-with-typeahead-item.js","names":["_classMap2","require","_litElement","_settings","_interopRequireDefault","_settings2","_searchWithTypeaheadCss","_carbonElement","_templateObject","_templateObject2","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","arguments","apply","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","prefix","settings","ddsPrefix","ddsSettings","stablePrefix","DDSSearchWithTypeaheadItem","_decorate2","customElement","concat","_initialize","_LitElement","_LitElement2","_inherits2","_super","_this","_classCallCheck2","_len","length","args","Array","_key","_assertThisInitialized2","_createClass2","F","d","kind","decorators","property","key","value","type","reflect","connectedCallback","hasAttribute","setAttribute","_get2","shouldUpdate","changedProperties","has","text","parent","getRootNode","host","_ref","searchQueryString","toLowerCase","_content","lowerCaseText","includes","startingIndex","indexOf","substring","highlightedResult","html","_taggedTemplateLiteral2","content","split","RegExp","reduce","acc","item","push","replace","pop","updated","String","highlighted","render","_classMap","containerClasses","classMap","_defineProperty2","styles","LitElement","_default","exports"],"sources":["components/search-with-typeahead/search-with-typeahead-item.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { html, property, LitElement, TemplateResult } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport styles from './search-with-typeahead.scss';\nimport { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';\n\nconst { prefix } = settings;\nconst { stablePrefix: ddsPrefix } = ddsSettings;\n\n/**\n * Search result item in masthead.\n *\n * @element dds-search-with-typeahead-item\n */\n@customElement(`${ddsPrefix}-search-with-typeahead-item`)\nclass DDSSearchWithTypeaheadItem extends LitElement {\n  /**\n   * The the search result to be shown.\n   */\n  private _content?: TemplateResult | string | (TemplateResult | string)[];\n\n  /**\n   * The optional href to redirect the user to.\n   */\n  @property()\n  href = '';\n\n  /**\n   * `true` if this dropdown item should be highlighted.\n   * If `true`, parent `<dds-search-with-typeahead>` selects/deselects this dropdown item upon keyboard interaction.\n   *\n   * @private\n   */\n  @property({ type: Boolean, reflect: true })\n  highlighted = false;\n\n  /**\n   * The search result text.\n   */\n  @property()\n  text = '';\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'option');\n    }\n    super.connectedCallback();\n  }\n\n  shouldUpdate(changedProperties) {\n    const result = super.shouldUpdate(changedProperties);\n    if (changedProperties.has('text')) {\n      const { text } = this;\n      const parent = (this.getRootNode() as any).host;\n      let { searchQueryString } = parent ?? {};\n      searchQueryString = searchQueryString.toLowerCase();\n\n      if (!searchQueryString) {\n        this._content = text;\n      } else {\n        const lowerCaseText = text.toLowerCase();\n        if (lowerCaseText.includes(searchQueryString)) {\n          const startingIndex = lowerCaseText.indexOf(searchQueryString);\n          searchQueryString = text.substring(\n            startingIndex,\n            startingIndex + searchQueryString.length\n          );\n        }\n\n        const highlightedResult = html`\n          <span class=\"${ddsPrefix}-ce--search-with-typeahead-item__highlighted\"\n            >${searchQueryString}</span\n          >\n        `;\n        const content = text\n          .split(new RegExp(searchQueryString, 'i'))\n          .reduce((acc, item) => {\n            acc.push(item.replace(/^\\s/, '\\xa0').replace(/\\s$/, '\\xa0'));\n            acc.push(highlightedResult);\n            return acc;\n          }, [] as (TemplateResult | string)[]);\n        content.pop();\n        this._content = content;\n      }\n    }\n    return result;\n  }\n\n  updated(changedProperties) {\n    super.updated(changedProperties);\n    if (changedProperties.has('highlighted')) {\n      this.setAttribute('aria-selected', String(Boolean(this.highlighted)));\n    }\n  }\n\n  render() {\n    const { highlighted, _content: content } = this;\n    const containerClasses = classMap({\n      [`${prefix}--container-class`]: true,\n      [`${prefix}--container-highlight-class`]: highlighted,\n    });\n    return html`\n      <div class=\"${containerClasses}\" tabindex=\"-1\">${content}</div>\n    `;\n  }\n\n  static styles = styles;\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSSearchWithTypeaheadItem;\n"],"mappings":";;;;;;;;;;;;;;;;;AASA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,UAAA,GAAAD,sBAAA,CAAAH,OAAA;AACA,IAAAK,uBAAA,GAAAF,sBAAA,CAAAH,OAAA;AACA,IAAAM,cAAA,GAAAN,OAAA;AAAgI,IAAAO,eAAA,EAAAC,gBAAA;AAAA,SAAAC,aAAAC,OAAA,QAAAC,yBAAA,GAAAC,yBAAA,oBAAAC,qBAAA,QAAAC,KAAA,OAAAC,gBAAA,aAAAL,OAAA,GAAAM,MAAA,MAAAL,yBAAA,QAAAM,SAAA,OAAAF,gBAAA,mBAAAG,WAAA,EAAAF,MAAA,GAAAG,OAAA,CAAAC,SAAA,CAAAN,KAAA,EAAAO,SAAA,EAAAJ,SAAA,YAAAD,MAAA,GAAAF,KAAA,CAAAQ,KAAA,OAAAD,SAAA,gBAAAE,2BAAA,mBAAAP,MAAA;AAAA,SAAAJ,0BAAA,eAAAO,OAAA,qBAAAA,OAAA,CAAAC,SAAA,oBAAAD,OAAA,CAAAC,SAAA,CAAAI,IAAA,2BAAAC,KAAA,oCAAAC,OAAA,CAAAC,SAAA,CAAAC,OAAA,CAAAC,IAAA,CAAAV,OAAA,CAAAC,SAAA,CAAAM,OAAA,8CAAAI,CAAA;AAEhI,IAAQC,MAAM,GAAKC,oBAAQ,CAAnBD,MAAM;AACd,IAAsBE,SAAS,GAAKC,qBAAW,CAAvCC,YAAY;;AAEpB;AACA;AACA;AACA;AACA;AAJA,IAMMC,0BAA0B,OAAAC,UAAA,cAD/B,IAAAC,4BAAa,KAAAC,MAAA,CAAIN,SAAS,iCAA8B,aAAAO,WAAA,EAAAC,WAAA;EAAA,IACnDL,0BAA0B,0BAAAM,YAAA;IAAA,IAAAC,UAAA,aAAAP,0BAAA,EAAAM,YAAA;IAAA,IAAAE,MAAA,GAAAnC,YAAA,CAAA2B,0BAAA;IAAA,SAAAA,2BAAA;MAAA,IAAAS,KAAA;MAAA,IAAAC,gBAAA,mBAAAV,0BAAA;MAAA,SAAAW,IAAA,GAAA1B,SAAA,CAAA2B,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAH,IAAA,GAAAI,IAAA,MAAAA,IAAA,GAAAJ,IAAA,EAAAI,IAAA;QAAAF,IAAA,CAAAE,IAAA,IAAA9B,SAAA,CAAA8B,IAAA;MAAA;MAAAN,KAAA,GAAAD,MAAA,CAAAf,IAAA,CAAAP,KAAA,CAAAsB,MAAA,SAAAL,MAAA,CAAAU,IAAA;MAAAT,WAAA,KAAAY,uBAAA,aAAAP,KAAA;MAAA,OAAAA,KAAA;IAAA;IAAA,WAAAQ,aAAA,aAAAjB,0BAAA;EAAA,EAAAK,WAAA;EAAA;IAAAa,CAAA,EAA1BlB,0BAA0B;IAAAmB,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAS7B,IAAAC,oBAAQ,GAAE;MAAAC,GAAA;MAAAC,KAAA,WAAAA,MAAA;QAAA,OACJ,EAAE;MAAA;IAAA;MAAAJ,IAAA;MAAAC,UAAA,GAQR,IAAAC,oBAAQ,EAAC;QAAEG,IAAI,EAAEnC,OAAO;QAAEoC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAH,GAAA;MAAAC,KAAA,WAAAA,MAAA;QAAA,OAC7B,KAAK;MAAA;IAAA;MAAAJ,IAAA;MAAAC,UAAA,GAKlB,IAAAC,oBAAQ,GAAE;MAAAC,GAAA;MAAAC,KAAA,WAAAA,MAAA;QAAA,OACJ,EAAE;MAAA;IAAA;MAAAJ,IAAA;MAAAG,GAAA;MAAAC,KAAA;MAxBT;AACF;AACA;;MAGE;AACF;AACA;;MAIE;AACF;AACA;AACA;AACA;AACA;;MAIE;AACF;AACA;;MAIE,SAAAG,kBAAA,EAAoB;QAClB,IAAI,CAAC,IAAI,CAACC,YAAY,CAAC,MAAM,CAAC,EAAE;UAC9B,IAAI,CAACC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC;QACrC;QACA,IAAAC,KAAA,iBAAAnD,gBAAA,aA/BEqB,0BAA0B,CAAAT,SAAA,8BAAAE,IAAA;MAgC9B;IAAC;MAAA2B,IAAA;MAAAG,GAAA;MAAAC,KAAA,EAED,SAAAO,aAAaC,iBAAiB,EAAE;QAC9B,IAAMpD,MAAM,OAAAkD,KAAA,iBAAAnD,gBAAA,aAnCVqB,0BAA0B,CAAAT,SAAA,yBAAAE,IAAA,OAmCMuC,iBAAiB,CAAC;QACpD,IAAIA,iBAAiB,CAACC,GAAG,CAAC,MAAM,CAAC,EAAE;UACjC,IAAQC,IAAI,GAAK,IAAI,CAAbA,IAAI;UACZ,IAAMC,MAAM,GAAI,IAAI,CAACC,WAAW,EAAE,CAASC,IAAI;UAC/C,IAAAC,IAAA,GAA4BH,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI,CAAC,CAAC;YAAlCI,iBAAiB,GAAAD,IAAA,CAAjBC,iBAAiB;UACvBA,iBAAiB,GAAGA,iBAAiB,CAACC,WAAW,EAAE;UAEnD,IAAI,CAACD,iBAAiB,EAAE;YACtB,IAAI,CAACE,QAAQ,GAAGP,IAAI;UACtB,CAAC,MAAM;YACL,IAAMQ,aAAa,GAAGR,IAAI,CAACM,WAAW,EAAE;YACxC,IAAIE,aAAa,CAACC,QAAQ,CAACJ,iBAAiB,CAAC,EAAE;cAC7C,IAAMK,aAAa,GAAGF,aAAa,CAACG,OAAO,CAACN,iBAAiB,CAAC;cAC9DA,iBAAiB,GAAGL,IAAI,CAACY,SAAS,CAChCF,aAAa,EACbA,aAAa,GAAGL,iBAAiB,CAAC3B,MAAM,CACzC;YACH;YAEA,IAAMmC,iBAAiB,OAAGC,gBAAI,EAAA7E,eAAA,KAAAA,eAAA,OAAA8E,uBAAA,iJACbpD,SAAS,EACnB0C,iBAAiB,CAEvB;YACD,IAAMW,OAAO,GAAGhB,IAAI,CACjBiB,KAAK,CAAC,IAAIC,MAAM,CAACb,iBAAiB,EAAE,GAAG,CAAC,CAAC,CACzCc,MAAM,CAAC,UAACC,GAAG,EAAEC,IAAI,EAAK;cACrBD,GAAG,CAACE,IAAI,CAACD,IAAI,CAACE,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAACA,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;cAC5DH,GAAG,CAACE,IAAI,CAACT,iBAAiB,CAAC;cAC3B,OAAOO,GAAG;YACZ,CAAC,EAAE,EAAE,CAAgC;YACvCJ,OAAO,CAACQ,GAAG,EAAE;YACb,IAAI,CAACjB,QAAQ,GAAGS,OAAO;UACzB;QACF;QACA,OAAOtE,MAAM;MACf;IAAC;MAAAwC,IAAA;MAAAG,GAAA;MAAAC,KAAA,EAED,SAAAmC,QAAQ3B,iBAAiB,EAAE;QACzB,IAAAF,KAAA,iBAAAnD,gBAAA,aA1EEqB,0BAA0B,CAAAT,SAAA,oBAAAE,IAAA,OA0EduC,iBAAiB;QAC/B,IAAIA,iBAAiB,CAACC,GAAG,CAAC,aAAa,CAAC,EAAE;UACxC,IAAI,CAACJ,YAAY,CAAC,eAAe,EAAE+B,MAAM,CAACtE,OAAO,CAAC,IAAI,CAACuE,WAAW,CAAC,CAAC,CAAC;QACvE;MACF;IAAC;MAAAzC,IAAA;MAAAG,GAAA;MAAAC,KAAA,EAED,SAAAsC,OAAA,EAAS;QAAA,IAAAC,SAAA;QACP,IAAQF,WAAW,GAAwB,IAAI,CAAvCA,WAAW;UAAYX,OAAO,GAAK,IAAI,CAA1BT,QAAQ;QAC7B,IAAMuB,gBAAgB,GAAG,IAAAC,mBAAQ,GAAAF,SAAA,WAAAG,gBAAA,aAAAH,SAAA,KAAA5D,MAAA,CAC3BR,MAAM,wBAAsB,IAAI,OAAAuE,gBAAA,aAAAH,SAAA,KAAA5D,MAAA,CAChCR,MAAM,kCAAgCkE,WAAW,GAAAE,SAAA,EACrD;QACF,WAAOf,gBAAI,EAAA5E,gBAAA,KAAAA,gBAAA,OAAA6E,uBAAA,iFACKe,gBAAgB,EAAmBd,OAAO;MAE5D;IAAC;MAAA9B,IAAA;MAAA;MAAAG,GAAA;MAAAC,KAAA,WAAAA,MAAA;QAAA,OAEe2C,kCAAM;MAAA;IAAA;EAAA;AAAA,GA3FiBC,sBAAU;AA8FnD;AAAA,IAAAC,QAAA,GACerE,0BAA0B;AAAAsE,OAAA,cAAAD,QAAA"}

package/es/components/search-with-typeahead/search-with-typeahead.d.ts

@@ -90,9 +90,7 @@ declare const DDSSearchWithTypeahead_base: {
         releasePointerCapture(pointerId: number): void;
         removeAttribute(qualifiedName: string): void;
         removeAttributeNS(namespace: string | null, localName: string): void;
-        removeAttributeNode(attr: Attr): Attr; /**
-         * Handles `click` event on the close button.
-         */
+        removeAttributeNode(attr: Attr): Attr;
         requestFullscreen(options?: FullscreenOptions | undefined): Promise<void>;
         requestPointerLock(): void;
         scroll(options?: ScrollToOptions | undefined): void;
@@ -114,6 +112,9 @@ declare const DDSSearchWithTypeahead_base: {
         readonly firstChild: ChildNode | null;
         readonly isConnected: boolean;
         readonly lastChild: ChildNode | null;
+        /**
+         * Handles `click` event on the search button.
+         */
         readonly nextSibling: ChildNode | null;
         readonly nodeName: string;
         readonly nodeType: number;
@@ -192,7 +193,7 @@ declare const DDSSearchWithTypeahead_base: {
         ariaValueMin: string | null;
         ariaValueNow: string | null;
         ariaValueText: string | null;
-        animate(keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
+        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
         getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
         after(...nodes: (string | Node)[]): void;
         before(...nodes: (string | Node)[]): void;
@@ -221,7 +222,9 @@ declare const DDSSearchWithTypeahead_base: {
         readonly style: CSSStyleDeclaration;
         contentEditable: string;
         enterKeyHint: string;
-        inputMode: string;
+        inputMode: string; /**
+         * Handles `input` event in the search input.
+         */
         readonly isContentEditable: boolean;
         onabort: ((this: GlobalEventHandlers, ev: UIEvent) => any) | null;
         onanimationcancel: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
@@ -513,7 +516,7 @@ declare const DDSSearchWithTypeahead_base: {
         ariaValueMin: string | null;
         ariaValueNow: string | null;
         ariaValueText: string | null;
-        animate(keyframes: PropertyIndexedKeyframes | Keyframe[] | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
+        animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined): Animation;
         getAnimations(options?: GetAnimationsOptions | undefined): Animation[];
         after(...nodes: (string | Node)[]): void;
         before(...nodes: (string | Node)[]): void;

package/es/components/search-with-typeahead/search-with-typeahead.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/search-with-typeahead/search-with-typeahead.ts"],"names":[],"mappings":"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","file":"search-with-typeahead.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { html, property, query, customElement } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport Close20 from '../../internal/vendor/@carbon/web-components/icons/close/20.js';\nimport Search20 from '../../internal/vendor/@carbon/web-components/icons/search/20.js';\nimport BXDropdown, {\n  DROPDOWN_KEYBOARD_ACTION,\n} from '../../internal/vendor/@carbon/web-components/components/dropdown/dropdown.js';\nimport BXDropdownItem from '../../internal/vendor/@carbon/web-components/components/dropdown/dropdown-item.js';\nimport HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';\nimport HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';\nimport { baseFontSize, breakpoints } from '@carbon/layout';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport SearchTypeaheadAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/SearchTypeahead/SearchTypeahead';\nimport { forEach, indexOf } from '../../globals/internal/collection-helpers';\nimport styles from './search-with-typeahead.scss';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport './search-with-typeahead-item';\n\nconst { stablePrefix: ddsPrefix } = ddsSettings;\nconst { prefix } = settings;\nconst gridBreakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;\n\n/**\n * Search with Typeahead\n *\n * @element dds-search-with-typeahead\n * @csspart open-button The button to show the search box.\n * @csspart close-button The button to hide the search box.\n * @csspart search-input The input box for search.\n * @fires dds-search-with-typeahead-beingredirected\n *   The custom event fired before the page is being redirected to the search result page.\n *   Cancellation of this event stops the user-initiated action of redirection.\n * @fires dds-search-with-typeahead-input\n *   The name of the custom event fired after the search content is changed upon a user gesture.\n * @fires dds-search-with-typeahead-toggled\n *   The name of the custom event fired after this search box is toggled upon a user gesture.\n */\n@customElement(`${ddsPrefix}-search-with-typeahead`)\nclass DDSSearchWithTypeahead extends HostListenerMixin(\n  StableSelectorMixin(BXDropdown)\n) {\n  // eslint-disable-next-line class-methods-use-this\n  async getResults(searchQuery) {\n    const response = await SearchTypeaheadAPI.getResults(\n      searchQuery,\n      this.appId\n    );\n    return response.map((res) => res[0]);\n  }\n\n  /**\n   * The formatter for the placeholder text on the search box.\n   * Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  placeholderFormatter = ({ appId }) => `Search in ${appId}`;\n\n  @property({ attribute: 'leadspace-search', type: Boolean })\n  leadspaceSearch = false;\n\n  @property({ attribute: 'custom-typeahead-api', type: Boolean })\n  customTypeaheadAPI = false;\n\n  @property()\n  currentSearchResults;\n\n  @property()\n  searchResults;\n\n  @property()\n  groupedResults;\n\n  @property({ attribute: 'scope-parameters' })\n  scopeParameters;\n\n  @property({ attribute: 'should-remain-open', type: Boolean })\n  shouldRemainOpen = false;\n\n  @property({ attribute: 'appid', reflect: true })\n  appId;\n\n  @property({ attribute: 'scope-label', reflect: true })\n  scopeLabel;\n\n  @property({ attribute: 'scope-value', reflect: true })\n  scopeValue;\n\n  /**\n   * The `<button>` to open the search box.\n   */\n  @query(`.${prefix}--header__search--search`)\n  private _searchButtonNode!: HTMLButtonElement;\n\n  /**\n   * The `<button>` to open the search box.\n   */\n  @query(`.${prefix}--header__search--close`)\n  private _closeButtonNode!: HTMLButtonElement;\n\n  /**\n   * The `<input>` of the search box.\n   */\n  @query(`.${prefix}--header__search--input`)\n  private _searchInputNode!: HTMLInputElement;\n\n  /**\n   * The `<ul>` containing the search suggestions.\n   */\n  @query(`.react-autosuggest__suggestions-list`)\n  private _searchSuggestions!: HTMLElement;\n\n  /**\n   * Handles hiding search suggestions if focusing on other buttons.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:focusin')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocus = async ({ target }: FocusEvent) => {\n    if (!this._searchSuggestions) return;\n\n    if (target === this._searchInputNode) {\n      this._searchSuggestions.removeAttribute('hidden');\n    } else if (target === (this._searchButtonNode || this._closeButtonNode)) {\n      this._searchSuggestions.setAttribute('hidden', '');\n    }\n\n    if (target === this._closeButtonNode) {\n      this.setAttribute('unfocused', '');\n    } else {\n      this.removeAttribute('unfocused');\n    }\n  };\n\n  /**\n   * Handles `click` event on the close button.\n   */\n  private async _handleClickCloseButton() {\n    if (this.leadspaceSearch) {\n      this._closeButtonNode?.classList.add(`${prefix}--header__search--hide`);\n    }\n    this._handleUserInitiatedToggleActiveState(false);\n  }\n\n  /**\n   * Handles `click` event on the top-level element in the shadow DOM.\n   *\n   * @param event The event.\n   */\n  protected _handleClickInner(event: MouseEvent) {\n    if (\n      (event.target as HTMLElement).closest('.bx--header__search--input') ===\n      event.target\n    ) {\n      this._handleUserInitiatedToggle();\n      if (this._searchInputNode.value && this.leadspaceSearch) {\n        this._closeButtonNode?.classList.remove(\n          `${prefix}--header__search--hide`\n        );\n      }\n    } else {\n      const item = (event.target as Element).closest(\n        (this.constructor as typeof BXDropdown).selectorItem\n      ) as BXDropdownItem;\n      if (this.shadowRoot!.contains(item) && !item.hasAttribute('groupTitle')) {\n        this._handleUserInitiatedSelectItem(item);\n      }\n    }\n  }\n\n  /**\n   * Handles `click` event on the search button.\n   */\n  private async _handleClickSearchButton() {\n    const { active } = this;\n\n    if (active) {\n      if (this._searchInputNode.value) {\n        this._handleUserInitiatedRedirect();\n      }\n    } else {\n      this._handleUserInitiatedToggleActiveState(true);\n    }\n  }\n\n  /**\n   * Handles user-initiated toggling of activated state of the search box.\n   *\n   * @param active `true` to activate the search box.\n   * @param moveFocus\n   *   `true` to move focus upon toggling, to the input box when activated, to the trigger button when deactivated.\n   */\n  private async _handleUserInitiatedToggleActiveState(\n    active,\n    moveFocus = true\n  ) {\n    if (active === this.active) {\n      return;\n    }\n    const { _searchInputNode: searchInputNode } = this;\n    const { eventInput, eventToggle } = this\n      .constructor as typeof DDSSearchWithTypeahead;\n    if (!active && searchInputNode.value) {\n      searchInputNode.value = '';\n      this.dispatchEvent(\n        new CustomEvent(eventInput, {\n          bubbles: true,\n          composed: true,\n          cancelable: false,\n          detail: {\n            value: '',\n          },\n        })\n      );\n    }\n    this.active = this.shouldRemainOpen ? true : !this.active;\n    this.searchResults = [];\n    this.groupedResults = [];\n\n    this.dispatchEvent(\n      new CustomEvent(eventToggle, {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          active,\n        },\n      })\n    );\n    await this.updateComplete;\n    if (moveFocus) {\n      // Does not reuse destructed `searchInputNode` given it's `null` before expanded\n      (this.active ? this._searchInputNode : this._searchButtonNode).focus();\n    }\n  }\n\n  /**\n   * Prevents key types in the `<input>` causing other keyboard shortcuts in application UI.\n   *\n   * @param event The event.\n   */\n  private _handleKeyInput(event: KeyboardEvent) {\n    if (\n      (this.constructor as typeof DDSSearchWithTypeahead).getAction(\n        event.key\n      ) === DROPDOWN_KEYBOARD_ACTION.NONE\n    ) {\n      event.stopPropagation();\n    }\n  }\n\n  /**\n   * Handles user-initiated redirect to the search query page.\n   *\n   * @param [options] The options.\n   * @param [options.targetQuery] The query string the search query page should be of.\n   * @param [options.targetHref] The href string to be redirected to.\n   */\n  private _handleUserInitiatedRedirect({\n    targetQuery,\n    targetHref,\n  }: { targetQuery?: string; targetHref?: string } = {}) {\n    const { eventBeforeRedirect, eventInput } = this\n      .constructor as typeof DDSSearchWithTypeahead;\n    const { language, redirectUrl } = this;\n    const [primary, country] = language.split('-');\n    const tokens = redirectUrl.split('?');\n    const base = tokens.shift();\n    const searchParams = new URLSearchParams(tokens.join('?'));\n    // Setting `this._searchInputNode?.value` as the default value of `targetQuery` seems to cause a Babel bug\n    searchParams.append('q', targetQuery ?? this._searchInputNode?.value);\n    searchParams.append('lang', primary);\n    searchParams.append('cc', country);\n\n    this.dispatchEvent(\n      new CustomEvent(eventInput, {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          value: targetQuery,\n        },\n      })\n    );\n\n    if (this.appId) {\n      searchParams.append('scope-domain', 'scope');\n      searchParams.append('scope-value', this.scopeValue);\n      searchParams.append('scope-type', this.appId);\n\n      if (this.scopeLabel) {\n        searchParams.append('scope-label', this.scopeLabel ?? '');\n      }\n    }\n\n    const redirectUrlWithSearch = targetHref\n      ? `${targetHref}`\n      : `${base}?${searchParams.toString()}`;\n    if (\n      this.dispatchEvent(\n        new CustomEvent(eventBeforeRedirect, {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            redirectUrl: redirectUrlWithSearch,\n          },\n        })\n      )\n    ) {\n      this._redirect(redirectUrlWithSearch);\n    }\n  }\n\n  /**\n   * Handles component reset if focusing outside.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleFocusOut(event: FocusEvent) {\n    super._handleFocusOut(event);\n  }\n\n  /**\n   * Handles search results when using a custom API.\n   *\n   * @param event The event.\n   */\n  @HostListener('document:eventCustomResults')\n  protected _handleCustomResults = (event: CustomEvent) => {\n    if (this.customTypeaheadAPI) {\n      [this.searchResults] = event.detail;\n      this.groupedResults = event.detail.slice(1);\n    }\n  };\n\n  /**\n   * Queries scoped search suggestions.\n   *\n   * @param event The event.\n   */\n  @HostListener('document:eventSelectScope')\n  protected _handleScopeSelect = (event: CustomEvent) => {\n    this.appId = event.detail.appId;\n    let targetScope;\n    this.scopeParameters.forEach((scope) => {\n      if (scope.appId === this.appId) {\n        targetScope = scope;\n      }\n    });\n\n    this.scopeValue = Array.isArray(targetScope?.value)\n      ? `[${targetScope.value\n          .toString()\n          .split(',')\n          .map((word) => `\"${word.trim()}\"`)\n          .join(',')}]`\n      : targetScope.value;\n    this.scopeLabel = targetScope.label ?? '';\n  };\n\n  /**\n   * Handles `input` event in the search input.\n   */\n  private _handleInput(event: InputEvent) {\n    const { target } = event;\n    const { value } = target as HTMLInputElement;\n    this.removeAttribute('unfocused');\n\n    const items = this.shadowRoot!.querySelectorAll(\n      (this.constructor as typeof BXDropdown).selectorItem\n    );\n    items.forEach((e) => {\n      if (e.hasAttribute('highlighted')) {\n        this.setAttribute('unfocused', '');\n      }\n    });\n\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof DDSSearchWithTypeahead).eventInput,\n        {\n          bubbles: true,\n          composed: true,\n          cancelable: false,\n          detail: {\n            value,\n          },\n        }\n      )\n    );\n    this.value = value;\n\n    if (!this.customTypeaheadAPI) {\n      this.getResults(value).then((res) => {\n        this.searchResults = res;\n      });\n    }\n\n    if (value) {\n      this.open = true;\n      if (this.leadspaceSearch)\n        this._closeButtonNode?.classList.remove(\n          `${prefix}--header__search--hide`\n        );\n    }\n\n    // accomodate search results box's width with the scope dropdown\n    if (\n      gridBreakpoint < document.body.clientWidth &&\n      this._searchSuggestions &&\n      this.scopeParameters\n    ) {\n      const scopeBarWidth = (\n        this.shadowRoot?.querySelector(\n          'dds-scoped-search-dropdown'\n        ) as HTMLElement\n      ).offsetWidth;\n      (this._searchSuggestions?.parentElement as HTMLElement)?.setAttribute(\n        'style',\n        `left: ${scopeBarWidth}px; width: calc(100% - ${scopeBarWidth}px);`\n      );\n    } else {\n      (this._searchSuggestions?.parentElement as HTMLElement)?.removeAttribute(\n        'style'\n      );\n    }\n  }\n\n  /**\n   * Prevents form submission if there is a highlighted item.\n   * In such case, `._handleUserInitiatedRedirect()` should have navigated the user to the search result page.\n   *\n   * @param event The event.\n   */\n  private _handleSubmit(event: Event) {\n    const { eventBeforeRedirect } = this\n      .constructor as typeof DDSSearchWithTypeahead;\n    const { selectorItemHighlighted } = this.constructor as typeof BXDropdown;\n    const highlightedItem = this.shadowRoot!.querySelector(\n      selectorItemHighlighted\n    ) as BXDropdownItem;\n    if (highlightedItem || !this._searchInputNode.value) {\n      event.preventDefault();\n    }\n    if (\n      !this.dispatchEvent(\n        new CustomEvent(eventBeforeRedirect, {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            redirectUrl: this.redirectUrl,\n          },\n        })\n      )\n    ) {\n      event.preventDefault();\n    }\n  }\n\n  protected _handleUserInitiatedSelectItem(item?: BXDropdownItem) {\n    if (item) {\n      this._searchInputNode.value = (item as unknown as any).text;\n      this._handleUserInitiatedRedirect({\n        targetQuery: (item as unknown as any).text,\n        targetHref: (item as unknown as any).href,\n      });\n    }\n  }\n\n  /**\n   * Handler for the `keypress` event on the top-level element in the shadow DOM.\n   */\n  protected _handleKeypressInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof BXDropdown).getAction(key);\n    if (!this.open) {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n          this._handleUserInitiatedToggle(true);\n          break;\n        default:\n          break;\n      }\n    } else {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n          {\n            const constructor = this.constructor as typeof BXDropdown;\n            const highlightedItem = this.shadowRoot!.querySelector(\n              constructor.selectorItemHighlighted\n            ) as BXDropdownItem;\n            if (highlightedItem) {\n              this._handleUserInitiatedSelectItem(highlightedItem);\n            } else {\n              this._handleUserInitiatedToggle(false);\n            }\n          }\n          break;\n        default:\n          break;\n      }\n    }\n  }\n\n  /**\n   * Redirects the page to the given target.\n   *\n   * @param target The target URL.\n   */\n  private _redirect(target) {\n    this.ownerDocument!.defaultView!.location.assign(target);\n  }\n\n  /**\n   * Navigate through dropdown items.\n   *\n   * @param direction `-1` to navigate backward, `1` to navigate forward.\n   */\n  protected _navigate(direction: number) {\n    const constructor = this.constructor as typeof DDSSearchWithTypeahead;\n    const items = this.shadowRoot!.querySelectorAll(constructor.selectorItem);\n    const highlightedItem = this.shadowRoot!.querySelector(\n      constructor.selectorItemHighlighted\n    );\n    const highlightedIndex = indexOf(items, highlightedItem!);\n    let nextIndex = highlightedIndex + direction;\n\n    if (items[nextIndex] && items[nextIndex].hasAttribute('groupTitle')) {\n      nextIndex += direction;\n    }\n\n    if (nextIndex < 0) {\n      nextIndex = items.length - 1;\n    }\n    if (nextIndex >= items.length) {\n      nextIndex = 0;\n    }\n    forEach(items, (item, i) => {\n      (item as BXDropdownItem).highlighted = i === nextIndex;\n    });\n\n    this.setAttribute('unfocused', '');\n\n    const nextItem = items[nextIndex];\n    // Using `{ block: 'nearest' }` to prevent scrolling unless scrolling is absolutely necessary.\n    // `scrollIntoViewOptions` seems to work in latest Safari despite of MDN/caniuse table.\n    // IE falls back to the old behavior.\n    nextItem.scrollIntoView({ block: 'nearest' });\n\n    // @ts-ignore: TS does not believe nextItem has a text object\n    const nextItemText = nextItem.text;\n    if (nextItemText) {\n      this._assistiveStatusText = nextItemText;\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * @returns The main content of the trigger button.\n   */\n  protected _renderTriggerContent() {\n    const {\n      searchPlaceholder,\n      searchLabel,\n      _handleInput: handleInput,\n      _handleKeyInput: handleKeyInput,\n    } = this;\n    return html`\n      <input\n        type=\"text\"\n        part=\"search-input\"\n        class=\"${prefix}--header__search--input\"\n        name=\"q\"\n        placeholder=\"${searchPlaceholder}\"\n        autocomplete=\"off\"\n        aria-controls=\"result-list\"\n        aria-autocomplete=\"list\"\n        aria-label=\"${ifNonNull(searchLabel)}\"\n        @input=\"${handleInput}\"\n        @keydown=\"${handleKeyInput}\"\n        @keypress=\"${handleKeyInput}\" />\n    `;\n  }\n\n  /**\n   * Handles `click` event to redirect based on selected item.\n   *\n   * @param event The event.\n   */\n  protected _handleClickItem(event: MouseEvent) {\n    const item = (event.target as Element).closest(\n      (this.constructor as typeof BXDropdown).selectorItem\n    ) as BXDropdownItem;\n    if (this.shadowRoot!.contains(item)) {\n      this._handleUserInitiatedSelectItem(item);\n    }\n  }\n\n  /**\n   * @returns The content of the search box.\n   */\n  private _renderForm() {\n    const {\n      active,\n      language,\n      open,\n      redirectUrl,\n      searchLabel,\n      _assistiveStatusText: assistiveStatusText,\n      _handleClickInner: handleClickInner,\n      _handleKeydownInner: handleKeydownInner,\n      _handleKeypressInner: handleKeypressInner,\n      _handleSubmit: handleSubmit,\n    } = this;\n    if (!active) {\n      return undefined;\n    }\n    const [primary, country] = language.split('-');\n    const classes = classMap({\n      'react-autosuggest__container': true,\n      'react-autosuggest__suggestions-container--open': open,\n    });\n    return html`\n      <form\n        role=\"search\"\n        method=\"get\"\n        action=\"${redirectUrl}\"\n        @submit=\"${handleSubmit}\">\n        <input type=\"hidden\" name=\"lang\" value=\"${primary}\" />\n        <input type=\"hidden\" name=\"cc\" value=\"${country}\" />\n        <input type=\"hidden\" name=\"lnk\" value=\"mhsrch\" />\n        ${this.scopeParameters\n          ? html`\n              <input type=\"hidden\" name=\"scope-domain\" value=\"scope\" />\n              <input type=\"hidden\" name=\"scope-type\" value=\"${this.appId}\" />\n              <input\n                type=\"hidden\"\n                name=\"scope-value\"\n                value=\"${this.scopeValue}\" />\n              <input\n                type=\"hidden\"\n                name=\"scope-label\"\n                value=\"${this.scopeLabel}\" />\n            `\n          : ''}\n\n        <div\n          role=\"combobox\"\n          class=\"${classes}\"\n          aria-haspopup=\"listbox\"\n          aria-owns=\"result-list\"\n          aria-expanded=\"${Boolean(this.active)}\"\n          aria-label=\"${ifNonNull(searchLabel)}\"\n          @click=${handleClickInner}\n          @keydown=\"${handleKeydownInner}\"\n          @keypress=\"${handleKeypressInner}\">\n          ${this.scopeParameters\n            ? html`\n                <dds-scoped-search-dropdown value=\"${this.appId}\">\n                  ${this.scopeParameters.map(\n                    (scope) => html`\n                      <bx-dropdown-item value=\"${scope.appId}\"\n                        >${scope.name}</bx-dropdown-item\n                      >\n                    `\n                  )}\n                </dds-scoped-search-dropdown>\n\n                <dds-scoped-search-dropdown-mobile value=\"${this.appId}\">\n                  ${this.scopeParameters.map(\n                    (scope) => html`\n                      <bx-select-item\n                        label=\"${scope.name}\"\n                        value=\"${scope.appId}\"\n                        >${scope.name}</bx-select-item\n                      >\n                    `\n                  )}\n                </dds-scoped-search-dropdown-mobile>\n              `\n            : ``}\n          ${this._renderTriggerContent()}\n          ${!this.leadspaceSearch\n            ? html`\n                <div\n                  id=\"result-list\"\n                  class=\"react-autosuggest__suggestions-container\">\n                  <ul\n                    role=\"listbox\"\n                    class=\"${ddsPrefix}-ce__search__list react-autosuggest__suggestions-list\">\n                    ${this.searchResults &&\n                    this.searchResults.map(\n                      (item) =>\n                        html`\n                          <dds-search-with-typeahead-item\n                            text=\"${item}\"></dds-search-with-typeahead-item>\n                        `\n                    )}\n                    ${this.groupedResults &&\n                    this.groupedResults.map(\n                      (group) =>\n                        html`\n                          <dds-search-with-typeahead-item\n                            groupTitle\n                            text=\"${group.title}\"></dds-search-with-typeahead-item>\n                          ${group.items.map(\n                            (item) =>\n                              html`\n                                <dds-search-with-typeahead-item\n                                  text=\"${item.name}\"\n                                  href=\"${item.href}\"></dds-search-with-typeahead-item>\n                              `\n                          )}\n                        `\n                    )}\n                  </ul>\n                </div>\n              `\n            : ``}\n        </div>\n      </form>\n      <div\n        class=\"${prefix}--assistive-text\"\n        role=\"status\"\n        aria-live=\"assertive\"\n        aria-relevant=\"additions text\">\n        ${assistiveStatusText}\n      </div>\n    `;\n  }\n\n  /**\n   * @returns `true` if the selection of this dropdown should change if the given item is selected upon user interaction.\n   */\n  // eslint-disable-next-line class-methods-use-this\n  protected _selectionShouldChange() {\n    return true;\n  }\n\n  /**\n   * `true` if this the search box should represent its active state.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * The assistive text for the button to close the search box.\n   */\n  @property({ attribute: 'close-search-button-assistive-text' })\n  closeSearchButtonAssistiveText = 'Clear input';\n\n  /**\n   * The language embedded in the inner form.\n   */\n  @property()\n  language = 'en-US';\n\n  /**\n   * The assistive text for the button to open the search box.\n   */\n  @property({ attribute: 'open-search-button-assistive-text' })\n  openSearchButtonAssistiveText = 'Open IBM search field';\n\n  /**\n   * The assistive text for the button to perform search.\n   */\n  @property({ attribute: 'perform-search-button-assistive-text' })\n  performSearchButtonAssistiveText = 'Search all of IBM';\n\n  /**\n   * Value to display when the input has an empty `value`.\n   */\n  @property()\n  searchPlaceholder = 'Search all of IBM';\n\n  /**\n   * The redirect URL when a user selects a search suggestion.\n   */\n  @property({ attribute: 'redirect-url' })\n  redirectUrl = 'https://www.ibm.com/search?lnk=mhsrch';\n\n  /**\n   * The `aria-label` attribute for the search input.\n   */\n  @property({ attribute: 'search-label' })\n  searchLabel = 'IBM search field';\n\n  /**\n   * The shadow slot this search UI should be in.\n   */\n  @property({ reflect: true })\n  slot = 'search';\n\n  /**\n   * `true` to activate the search box on page load.\n   */\n  @property({ type: Boolean, attribute: 'search-open-on-load' })\n  searchOpenOnload = false;\n\n  /**\n   * The input value.\n   */\n  get searchQueryString() {\n    return this._searchInputNode?.value ?? '';\n  }\n\n  /**\n   * Returns query param `q` for search input if exists. Only available when searchOpenOnload is `true`\n   */\n  private _setSearchParam() {\n    const { _searchInputNode: searchInputNode } = this;\n    const URLParams = new URLSearchParams(\n      this.ownerDocument!.defaultView!.location.search\n    );\n    const searchParam: any = this.searchOpenOnload ? URLParams.get('q') : '';\n    if (searchParam) {\n      searchInputNode.value = searchParam;\n    }\n  }\n\n  firstUpdated() {\n    this._setSearchParam();\n    if (this.leadspaceSearch) {\n      this.setAttribute('should-remain-open', '');\n      this.setAttribute('active', '');\n    }\n\n    if (!this.appId && this.scopeParameters) {\n      this.appId = 'all';\n      this.redirectUrl = 'https://www.ibm.com/search/scoped';\n    }\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('searchResults')) {\n      const titleElements = this.shadowRoot?.querySelectorAll(\n        'dds-search-with-typeahead-item[groupTitle]'\n      );\n      titleElements?.forEach((e) => {\n        e.previousElementSibling?.setAttribute('lastBeforeGroup', '');\n      });\n    }\n\n    if (changedProperties.has('appId')) {\n      if (\n        gridBreakpoint < document.body.clientWidth &&\n        this._searchSuggestions &&\n        this.scopeParameters\n      ) {\n        const scopeBarWidth = (\n          this.shadowRoot?.querySelector(\n            'dds-scoped-search-dropdown'\n          ) as HTMLElement\n        ).offsetWidth;\n        (this._searchSuggestions?.parentElement as HTMLElement)?.setAttribute(\n          'style',\n          `left: ${scopeBarWidth}px; width: calc(100% - ${scopeBarWidth}px);`\n        );\n      } else {\n        (\n          this._searchSuggestions?.parentElement as HTMLElement\n        )?.removeAttribute('style');\n      }\n\n      if (!this.customTypeaheadAPI) {\n        this.getResults(this.value).then((res) => {\n          this.searchResults = res;\n        });\n      }\n\n      const newPlaceholder = this.placeholderFormatter({\n        appId: this.scopeParameters.filter(\n          (e) => e.value === `${this.appId}`\n        )[0]?.name,\n      });\n      this.setAttribute('placeholder', newPlaceholder);\n      this.performSearchButtonAssistiveText = newPlaceholder;\n    }\n  }\n\n  render() {\n    const {\n      active,\n      closeSearchButtonAssistiveText,\n      openSearchButtonAssistiveText,\n      performSearchButtonAssistiveText,\n      _handleClickCloseButton: handleClickCloseButton,\n      _handleClickSearchButton: handleClickSearchButton,\n      _handleClickItem: handleClickItem,\n    } = this;\n    const searchButtonAssistiveText = !active\n      ? openSearchButtonAssistiveText\n      : performSearchButtonAssistiveText;\n    return html`\n      ${!this.leadspaceSearch\n        ? html`\n            ${this._renderForm()}\n            <div class=\"${prefix}--header__search--actions\">\n              <button\n                type=\"button\"\n                part=\"open-button\"\n                class=\"${prefix}--header__action ${prefix}--header__search--search\"\n                aria-label=\"${searchButtonAssistiveText}\"\n                @click=\"${handleClickSearchButton}\">\n                ${Search20()}\n              </button>\n              <button\n                type=\"button\"\n                part=\"close-button\"\n                class=\"${prefix}--header__action ${prefix}--header__search--close\"\n                aria-label=\"${closeSearchButtonAssistiveText}\"\n                @click=\"${handleClickCloseButton}\">\n                ${Close20()}\n              </button>\n            </div>\n          `\n        : html`\n            <div class=\"${prefix}--header__search--actions\">\n              ${Search20({\n                part: 'search-icon',\n                class: `${prefix}--search-magnifier-icon`,\n                role: 'img',\n              })}\n              ${this._renderForm()}\n              <button\n                type=\"button\"\n                part=\"close-button\"\n                class=\"${prefix}--header__action ${prefix}--header__search--close ${this\n                  .value.length === 0\n                  ? `${prefix}--header__search--hide`\n                  : ''}\"\n                aria-label=\"${closeSearchButtonAssistiveText}\"\n                @click=\"${handleClickCloseButton}\">\n                ${Close20()}\n              </button>\n            </div>\n            <div\n              id=\"result-list\"\n              class=\"react-autosuggest__suggestions-container\">\n              <ul\n                role=\"listbox\"\n                class=\"${ddsPrefix}-ce__search__list react-autosuggest__suggestions-list\">\n                ${this.searchResults &&\n                this.searchResults.map(\n                  (item) =>\n                    html`\n                      <dds-search-with-typeahead-item\n                        text=\"${item}\"\n                        @click=${handleClickItem}></dds-search-with-typeahead-item>\n                    `\n                )}\n              </ul>\n            </div>\n          `}\n    `;\n  }\n\n  /**\n   * A selector that will return highlighted search result items.\n   */\n  static get selectorItemHighlighted() {\n    return `${ddsPrefix}-search-with-typeahead-item[highlighted]`;\n  }\n\n  /**\n   * A selector that will return search result items.\n   */\n  static get selectorItem() {\n    return `${ddsPrefix}-search-with-typeahead-item`;\n  }\n\n  /**\n   * The name of the custom event fired before the page is being redirected to the search result page.\n   * Cancellation of this event stops the user-initiated action of redirection.\n   */\n  static get eventBeforeRedirect() {\n    return `${ddsPrefix}-search-with-typeahead-beingredirected`;\n  }\n\n  /**\n   * The name of the custom event fired after the search content is changed upon a user gesture.\n   */\n  static get eventInput() {\n    return `${ddsPrefix}-search-with-typeahead-input`;\n  }\n\n  /**\n   * The name of the custom event captured to retrieve the new search scope.\n   */\n  static get eventSelectScope() {\n    return `${prefix}-select-selected`;\n  }\n\n  /**\n   * The name of the custom event captured to retrieve the custom typeahead API results.\n   */\n  static get eventCustomResults() {\n    return `${ddsPrefix}-custom-typeahead-api-results`;\n  }\n\n  /**\n   * The name of the custom event fired after this search box is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${ddsPrefix}-search-with-typeahead-toggled`;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--search-with-typeahead`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSSearchWithTypeahead;\n"]}
+{"version":3,"sources":["components/search-with-typeahead/search-with-typeahead.ts"],"names":[],"mappings":"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","file":"search-with-typeahead.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { html, property, query } from 'lit-element';\nimport settings from 'carbon-components/es/globals/js/settings.js';\nimport Close20 from '../../internal/vendor/@carbon/web-components/icons/close/20.js';\nimport Search20 from '../../internal/vendor/@carbon/web-components/icons/search/20.js';\nimport BXDropdown, {\n  DROPDOWN_KEYBOARD_ACTION,\n} from '../../internal/vendor/@carbon/web-components/components/dropdown/dropdown.js';\nimport BXDropdownItem from '../../internal/vendor/@carbon/web-components/components/dropdown/dropdown-item.js';\nimport HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';\nimport HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';\nimport { baseFontSize, breakpoints } from '@carbon/layout';\nimport ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';\nimport SearchTypeaheadAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/SearchTypeahead/SearchTypeahead';\nimport { forEach, indexOf } from '../../globals/internal/collection-helpers';\nimport styles from './search-with-typeahead.scss';\nimport StableSelectorMixin from '../../globals/mixins/stable-selector';\nimport './search-with-typeahead-item';\nimport { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';\n\nconst { stablePrefix: ddsPrefix } = ddsSettings;\nconst { prefix } = settings;\nconst gridBreakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;\n\n/**\n * Search with Typeahead\n *\n * @element dds-search-with-typeahead\n * @csspart open-button The button to show the search box.\n * @csspart close-button The button to hide the search box.\n * @csspart search-input The input box for search.\n * @fires dds-search-with-typeahead-beingredirected\n *   The custom event fired before the page is being redirected to the search result page.\n *   Cancellation of this event stops the user-initiated action of redirection.\n * @fires dds-search-with-typeahead-input\n *   The name of the custom event fired after the search content is changed upon a user gesture.\n * @fires dds-search-with-typeahead-toggled\n *   The name of the custom event fired after this search box is toggled upon a user gesture.\n */\n@customElement(`${ddsPrefix}-search-with-typeahead`)\nclass DDSSearchWithTypeahead extends HostListenerMixin(\n  StableSelectorMixin(BXDropdown)\n) {\n  // eslint-disable-next-line class-methods-use-this\n  async getResults(searchQuery) {\n    const response = await SearchTypeaheadAPI.getResults(\n      searchQuery,\n      this.appId\n    );\n    return response.map((res) => res[0]);\n  }\n\n  /**\n   * The formatter for the placeholder text on the search box.\n   * Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  placeholderFormatter = ({ appId }) => `Search in ${appId}`;\n\n  @property({ attribute: 'leadspace-search', type: Boolean })\n  leadspaceSearch = false;\n\n  @property({ attribute: 'custom-typeahead-api', type: Boolean })\n  customTypeaheadAPI = false;\n\n  @property()\n  currentSearchResults;\n\n  @property()\n  searchResults;\n\n  @property()\n  groupedResults;\n\n  @property({ attribute: 'scope-parameters' })\n  scopeParameters;\n\n  @property({ attribute: 'should-remain-open', type: Boolean })\n  shouldRemainOpen = false;\n\n  @property({ attribute: 'appid', reflect: true })\n  appId;\n\n  @property({ attribute: 'scope-label', reflect: true })\n  scopeLabel;\n\n  @property({ attribute: 'scope-value', reflect: true })\n  scopeValue;\n\n  /**\n   * The `<button>` to open the search box.\n   */\n  @query(`.${prefix}--header__search--search`)\n  private _searchButtonNode!: HTMLButtonElement;\n\n  /**\n   * The `<button>` to open the search box.\n   */\n  @query(`.${prefix}--header__search--close`)\n  private _closeButtonNode!: HTMLButtonElement;\n\n  /**\n   * The `<input>` of the search box.\n   */\n  @query(`.${prefix}--header__search--input`)\n  private _searchInputNode!: HTMLInputElement;\n\n  /**\n   * The `<ul>` containing the search suggestions.\n   */\n  @query(`.react-autosuggest__suggestions-list`)\n  private _searchSuggestions!: HTMLElement;\n\n  /**\n   * Handles hiding search suggestions if focusing on other buttons.\n   *\n   * @param event The event.\n   */\n  @HostListener('shadowRoot:focusin')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocus = async ({ target }: FocusEvent) => {\n    if (!this._searchSuggestions) return;\n\n    if (target === this._searchInputNode) {\n      this._searchSuggestions.removeAttribute('hidden');\n    } else if (target === (this._searchButtonNode || this._closeButtonNode)) {\n      this._searchSuggestions.setAttribute('hidden', '');\n    }\n\n    if (target === this._closeButtonNode) {\n      this.setAttribute('unfocused', '');\n    } else {\n      this.removeAttribute('unfocused');\n    }\n  };\n\n  /**\n   * Handles `click` event on the close button.\n   */\n  private async _handleClickCloseButton() {\n    if (this.leadspaceSearch) {\n      this._closeButtonNode?.classList.add(`${prefix}--header__search--hide`);\n    }\n    this._handleUserInitiatedToggleActiveState(false);\n  }\n\n  /**\n   * Handles `click` event on the top-level element in the shadow DOM.\n   *\n   * @param event The event.\n   */\n  protected _handleClickInner(event: MouseEvent) {\n    if (\n      (event.target as HTMLElement).closest('.bx--header__search--input') ===\n      event.target\n    ) {\n      this._handleUserInitiatedToggle();\n      if (this._searchInputNode.value && this.leadspaceSearch) {\n        this._closeButtonNode?.classList.remove(\n          `${prefix}--header__search--hide`\n        );\n      }\n    } else {\n      const item = (event.target as Element).closest(\n        (this.constructor as typeof BXDropdown).selectorItem\n      ) as BXDropdownItem;\n      if (this.shadowRoot!.contains(item) && !item.hasAttribute('groupTitle')) {\n        this._handleUserInitiatedSelectItem(item);\n      }\n    }\n  }\n\n  /**\n   * Handles `click` event on the search button.\n   */\n  private async _handleClickSearchButton() {\n    const { active } = this;\n\n    if (active) {\n      if (this._searchInputNode.value) {\n        this._handleUserInitiatedRedirect();\n      }\n    } else {\n      this._handleUserInitiatedToggleActiveState(true);\n    }\n  }\n\n  /**\n   * Handles user-initiated toggling of activated state of the search box.\n   *\n   * @param active `true` to activate the search box.\n   * @param moveFocus\n   *   `true` to move focus upon toggling, to the input box when activated, to the trigger button when deactivated.\n   */\n  private async _handleUserInitiatedToggleActiveState(\n    active,\n    moveFocus = true\n  ) {\n    if (active === this.active) {\n      return;\n    }\n    const { _searchInputNode: searchInputNode } = this;\n    const { eventInput, eventToggle } = this\n      .constructor as typeof DDSSearchWithTypeahead;\n    if (!active && searchInputNode.value) {\n      searchInputNode.value = '';\n      this.dispatchEvent(\n        new CustomEvent(eventInput, {\n          bubbles: true,\n          composed: true,\n          cancelable: false,\n          detail: {\n            value: '',\n          },\n        })\n      );\n    }\n    this.active = this.shouldRemainOpen ? true : !this.active;\n    this.searchResults = [];\n    this.groupedResults = [];\n\n    this.dispatchEvent(\n      new CustomEvent(eventToggle, {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          active,\n        },\n      })\n    );\n    await this.updateComplete;\n    if (moveFocus) {\n      // Does not reuse destructed `searchInputNode` given it's `null` before expanded\n      (this.active ? this._searchInputNode : this._searchButtonNode).focus();\n    }\n  }\n\n  /**\n   * Prevents key types in the `<input>` causing other keyboard shortcuts in application UI.\n   *\n   * @param event The event.\n   */\n  private _handleKeyInput(event: KeyboardEvent) {\n    if (\n      (this.constructor as typeof DDSSearchWithTypeahead).getAction(\n        event.key\n      ) === DROPDOWN_KEYBOARD_ACTION.NONE\n    ) {\n      event.stopPropagation();\n    }\n  }\n\n  /**\n   * Handles user-initiated redirect to the search query page.\n   *\n   * @param [options] The options.\n   * @param [options.targetQuery] The query string the search query page should be of.\n   * @param [options.targetHref] The href string to be redirected to.\n   */\n  private _handleUserInitiatedRedirect({\n    targetQuery,\n    targetHref,\n  }: { targetQuery?: string; targetHref?: string } = {}) {\n    const { eventBeforeRedirect, eventInput } = this\n      .constructor as typeof DDSSearchWithTypeahead;\n    const { language, redirectUrl } = this;\n    const [primary, country] = language.split('-');\n    const tokens = redirectUrl.split('?');\n    const base = tokens.shift();\n    const searchParams = new URLSearchParams(tokens.join('?'));\n    // Setting `this._searchInputNode?.value` as the default value of `targetQuery` seems to cause a Babel bug\n    searchParams.append('q', targetQuery ?? this._searchInputNode?.value);\n    searchParams.append('lang', primary);\n    searchParams.append('cc', country);\n\n    this.dispatchEvent(\n      new CustomEvent(eventInput, {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          value: targetQuery,\n        },\n      })\n    );\n\n    if (this.appId) {\n      searchParams.append('scope-domain', 'scope');\n      searchParams.append('scope-value', this.scopeValue);\n      searchParams.append('scope-type', this.appId);\n\n      if (this.scopeLabel) {\n        searchParams.append('scope-label', this.scopeLabel ?? '');\n      }\n    }\n\n    const redirectUrlWithSearch = targetHref\n      ? `${targetHref}`\n      : `${base}?${searchParams.toString()}`;\n    if (\n      this.dispatchEvent(\n        new CustomEvent(eventBeforeRedirect, {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            redirectUrl: redirectUrlWithSearch,\n          },\n        })\n      )\n    ) {\n      this._redirect(redirectUrlWithSearch);\n    }\n  }\n\n  /**\n   * Handles component reset if focusing outside.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleFocusOut(event: FocusEvent) {\n    super._handleFocusOut(event);\n  }\n\n  /**\n   * Handles search results when using a custom API.\n   *\n   * @param event The event.\n   */\n  @HostListener('document:eventCustomResults')\n  protected _handleCustomResults = (event: CustomEvent) => {\n    if (this.customTypeaheadAPI) {\n      [this.searchResults] = event.detail;\n      this.groupedResults = event.detail.slice(1);\n    }\n  };\n\n  /**\n   * Queries scoped search suggestions.\n   *\n   * @param event The event.\n   */\n  @HostListener('document:eventSelectScope')\n  protected _handleScopeSelect = (event: CustomEvent) => {\n    this.appId = event.detail.appId;\n    let targetScope;\n    this.scopeParameters.forEach((scope) => {\n      if (scope.appId === this.appId) {\n        targetScope = scope;\n      }\n    });\n\n    this.scopeValue = Array.isArray(targetScope?.value)\n      ? `[${targetScope.value\n          .toString()\n          .split(',')\n          .map((word) => `\"${word.trim()}\"`)\n          .join(',')}]`\n      : targetScope.value;\n    this.scopeLabel = targetScope.label ?? '';\n  };\n\n  /**\n   * Handles `input` event in the search input.\n   */\n  private _handleInput(event: InputEvent) {\n    const { target } = event;\n    const { value } = target as HTMLInputElement;\n    this.removeAttribute('unfocused');\n\n    const items = this.shadowRoot!.querySelectorAll(\n      (this.constructor as typeof BXDropdown).selectorItem\n    );\n    items.forEach((e) => {\n      if (e.hasAttribute('highlighted')) {\n        this.setAttribute('unfocused', '');\n      }\n    });\n\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof DDSSearchWithTypeahead).eventInput,\n        {\n          bubbles: true,\n          composed: true,\n          cancelable: false,\n          detail: {\n            value,\n          },\n        }\n      )\n    );\n    this.value = value;\n\n    if (!this.customTypeaheadAPI) {\n      this.getResults(value).then((res) => {\n        this.searchResults = res;\n      });\n    }\n\n    if (value) {\n      this.open = true;\n      if (this.leadspaceSearch)\n        this._closeButtonNode?.classList.remove(\n          `${prefix}--header__search--hide`\n        );\n    }\n\n    // accomodate search results box's width with the scope dropdown\n    if (\n      gridBreakpoint < document.body.clientWidth &&\n      this._searchSuggestions &&\n      this.scopeParameters\n    ) {\n      const scopeBarWidth = (\n        this.shadowRoot?.querySelector(\n          'dds-scoped-search-dropdown'\n        ) as HTMLElement\n      ).offsetWidth;\n      (this._searchSuggestions?.parentElement as HTMLElement)?.setAttribute(\n        'style',\n        `left: ${scopeBarWidth}px; width: calc(100% - ${scopeBarWidth}px);`\n      );\n    } else {\n      (this._searchSuggestions?.parentElement as HTMLElement)?.removeAttribute(\n        'style'\n      );\n    }\n  }\n\n  /**\n   * Prevents form submission if there is a highlighted item.\n   * In such case, `._handleUserInitiatedRedirect()` should have navigated the user to the search result page.\n   *\n   * @param event The event.\n   */\n  private _handleSubmit(event: Event) {\n    const { eventBeforeRedirect } = this\n      .constructor as typeof DDSSearchWithTypeahead;\n    const { selectorItemHighlighted } = this.constructor as typeof BXDropdown;\n    const highlightedItem = this.shadowRoot!.querySelector(\n      selectorItemHighlighted\n    ) as BXDropdownItem;\n    if (highlightedItem || !this._searchInputNode.value) {\n      event.preventDefault();\n    }\n    if (\n      !this.dispatchEvent(\n        new CustomEvent(eventBeforeRedirect, {\n          bubbles: true,\n          cancelable: true,\n          composed: true,\n          detail: {\n            redirectUrl: this.redirectUrl,\n          },\n        })\n      )\n    ) {\n      event.preventDefault();\n    }\n  }\n\n  protected _handleUserInitiatedSelectItem(item?: BXDropdownItem) {\n    if (item) {\n      this._searchInputNode.value = (item as unknown as any).text;\n      this._handleUserInitiatedRedirect({\n        targetQuery: (item as unknown as any).text,\n        targetHref: (item as unknown as any).href,\n      });\n    }\n  }\n\n  /**\n   * Handler for the `keypress` event on the top-level element in the shadow DOM.\n   */\n  protected _handleKeypressInner(event: KeyboardEvent) {\n    const { key } = event;\n    const action = (this.constructor as typeof BXDropdown).getAction(key);\n    if (!this.open) {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n          this._handleUserInitiatedToggle(true);\n          break;\n        default:\n          break;\n      }\n    } else {\n      switch (action) {\n        case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n          {\n            const constructor = this.constructor as typeof BXDropdown;\n            const highlightedItem = this.shadowRoot!.querySelector(\n              constructor.selectorItemHighlighted\n            ) as BXDropdownItem;\n            if (highlightedItem) {\n              this._handleUserInitiatedSelectItem(highlightedItem);\n            } else {\n              this._handleUserInitiatedToggle(false);\n            }\n          }\n          break;\n        default:\n          break;\n      }\n    }\n  }\n\n  /**\n   * Redirects the page to the given target.\n   *\n   * @param target The target URL.\n   */\n  private _redirect(target) {\n    this.ownerDocument!.defaultView!.location.assign(target);\n  }\n\n  /**\n   * Navigate through dropdown items.\n   *\n   * @param direction `-1` to navigate backward, `1` to navigate forward.\n   */\n  protected _navigate(direction: number) {\n    const constructor = this.constructor as typeof DDSSearchWithTypeahead;\n    const items = this.shadowRoot!.querySelectorAll(constructor.selectorItem);\n    const highlightedItem = this.shadowRoot!.querySelector(\n      constructor.selectorItemHighlighted\n    );\n    const highlightedIndex = indexOf(items, highlightedItem!);\n    let nextIndex = highlightedIndex + direction;\n\n    if (items[nextIndex] && items[nextIndex].hasAttribute('groupTitle')) {\n      nextIndex += direction;\n    }\n\n    if (nextIndex < 0) {\n      nextIndex = items.length - 1;\n    }\n    if (nextIndex >= items.length) {\n      nextIndex = 0;\n    }\n    forEach(items, (item, i) => {\n      (item as BXDropdownItem).highlighted = i === nextIndex;\n    });\n\n    this.setAttribute('unfocused', '');\n\n    const nextItem = items[nextIndex];\n    // Using `{ block: 'nearest' }` to prevent scrolling unless scrolling is absolutely necessary.\n    // `scrollIntoViewOptions` seems to work in latest Safari despite of MDN/caniuse table.\n    // IE falls back to the old behavior.\n    nextItem.scrollIntoView({ block: 'nearest' });\n\n    // @ts-ignore: TS does not believe nextItem has a text object\n    const nextItemText = nextItem.text;\n    if (nextItemText) {\n      this._assistiveStatusText = nextItemText;\n    }\n    this.requestUpdate();\n  }\n\n  /**\n   * @returns The main content of the trigger button.\n   */\n  protected _renderTriggerContent() {\n    const {\n      searchPlaceholder,\n      searchLabel,\n      _handleInput: handleInput,\n      _handleKeyInput: handleKeyInput,\n    } = this;\n    return html`\n      <input\n        type=\"text\"\n        part=\"search-input\"\n        class=\"${prefix}--header__search--input\"\n        name=\"q\"\n        placeholder=\"${searchPlaceholder}\"\n        autocomplete=\"off\"\n        aria-controls=\"result-list\"\n        aria-autocomplete=\"list\"\n        aria-label=\"${ifNonNull(searchLabel)}\"\n        @input=\"${handleInput}\"\n        @keydown=\"${handleKeyInput}\"\n        @keypress=\"${handleKeyInput}\" />\n    `;\n  }\n\n  /**\n   * Handles `click` event to redirect based on selected item.\n   *\n   * @param event The event.\n   */\n  protected _handleClickItem(event: MouseEvent) {\n    const item = (event.target as Element).closest(\n      (this.constructor as typeof BXDropdown).selectorItem\n    ) as BXDropdownItem;\n    if (this.shadowRoot!.contains(item)) {\n      this._handleUserInitiatedSelectItem(item);\n    }\n  }\n\n  /**\n   * @returns The content of the search box.\n   */\n  private _renderForm() {\n    const {\n      active,\n      language,\n      open,\n      redirectUrl,\n      searchLabel,\n      _assistiveStatusText: assistiveStatusText,\n      _handleClickInner: handleClickInner,\n      _handleKeydownInner: handleKeydownInner,\n      _handleKeypressInner: handleKeypressInner,\n      _handleSubmit: handleSubmit,\n    } = this;\n    if (!active) {\n      return undefined;\n    }\n    const [primary, country] = language.split('-');\n    const classes = classMap({\n      'react-autosuggest__container': true,\n      'react-autosuggest__suggestions-container--open': open,\n    });\n    return html`\n      <form\n        role=\"search\"\n        method=\"get\"\n        action=\"${redirectUrl}\"\n        @submit=\"${handleSubmit}\">\n        <input type=\"hidden\" name=\"lang\" value=\"${primary}\" />\n        <input type=\"hidden\" name=\"cc\" value=\"${country}\" />\n        <input type=\"hidden\" name=\"lnk\" value=\"mhsrch\" />\n        ${this.scopeParameters\n          ? html`\n              <input type=\"hidden\" name=\"scope-domain\" value=\"scope\" />\n              <input type=\"hidden\" name=\"scope-type\" value=\"${this.appId}\" />\n              <input\n                type=\"hidden\"\n                name=\"scope-value\"\n                value=\"${this.scopeValue}\" />\n              <input\n                type=\"hidden\"\n                name=\"scope-label\"\n                value=\"${this.scopeLabel}\" />\n            `\n          : ''}\n\n        <div\n          role=\"combobox\"\n          class=\"${classes}\"\n          aria-haspopup=\"listbox\"\n          aria-owns=\"result-list\"\n          aria-expanded=\"${Boolean(this.active)}\"\n          aria-label=\"${ifNonNull(searchLabel)}\"\n          @click=${handleClickInner}\n          @keydown=\"${handleKeydownInner}\"\n          @keypress=\"${handleKeypressInner}\">\n          ${this.scopeParameters\n            ? html`\n                <dds-scoped-search-dropdown value=\"${this.appId}\">\n                  ${this.scopeParameters.map(\n                    (scope) => html`\n                      <bx-dropdown-item value=\"${scope.appId}\"\n                        >${scope.name}</bx-dropdown-item\n                      >\n                    `\n                  )}\n                </dds-scoped-search-dropdown>\n\n                <dds-scoped-search-dropdown-mobile value=\"${this.appId}\">\n                  ${this.scopeParameters.map(\n                    (scope) => html`\n                      <bx-select-item\n                        label=\"${scope.name}\"\n                        value=\"${scope.appId}\"\n                        >${scope.name}</bx-select-item\n                      >\n                    `\n                  )}\n                </dds-scoped-search-dropdown-mobile>\n              `\n            : ``}\n          ${this._renderTriggerContent()}\n          ${!this.leadspaceSearch\n            ? html`\n                <div\n                  id=\"result-list\"\n                  class=\"react-autosuggest__suggestions-container\">\n                  <ul\n                    role=\"listbox\"\n                    class=\"${ddsPrefix}-ce__search__list react-autosuggest__suggestions-list\">\n                    ${this.searchResults &&\n                    this.searchResults.map(\n                      (item) =>\n                        html`\n                          <dds-search-with-typeahead-item\n                            text=\"${item}\"></dds-search-with-typeahead-item>\n                        `\n                    )}\n                    ${this.groupedResults &&\n                    this.groupedResults.map(\n                      (group) =>\n                        html`\n                          <dds-search-with-typeahead-item\n                            groupTitle\n                            text=\"${group.title}\"></dds-search-with-typeahead-item>\n                          ${group.items.map(\n                            (item) =>\n                              html`\n                                <dds-search-with-typeahead-item\n                                  text=\"${item.name}\"\n                                  href=\"${item.href}\"></dds-search-with-typeahead-item>\n                              `\n                          )}\n                        `\n                    )}\n                  </ul>\n                </div>\n              `\n            : ``}\n        </div>\n      </form>\n      <div\n        class=\"${prefix}--assistive-text\"\n        role=\"status\"\n        aria-live=\"assertive\"\n        aria-relevant=\"additions text\">\n        ${assistiveStatusText}\n      </div>\n    `;\n  }\n\n  /**\n   * @returns `true` if the selection of this dropdown should change if the given item is selected upon user interaction.\n   */\n  // eslint-disable-next-line class-methods-use-this\n  protected _selectionShouldChange() {\n    return true;\n  }\n\n  /**\n   * `true` if this the search box should represent its active state.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * The assistive text for the button to close the search box.\n   */\n  @property({ attribute: 'close-search-button-assistive-text' })\n  closeSearchButtonAssistiveText = 'Clear input';\n\n  /**\n   * The language embedded in the inner form.\n   */\n  @property()\n  language = 'en-US';\n\n  /**\n   * The assistive text for the button to open the search box.\n   */\n  @property({ attribute: 'open-search-button-assistive-text' })\n  openSearchButtonAssistiveText = 'Open IBM search field';\n\n  /**\n   * The assistive text for the button to perform search.\n   */\n  @property({ attribute: 'perform-search-button-assistive-text' })\n  performSearchButtonAssistiveText = 'Search all of IBM';\n\n  /**\n   * Value to display when the input has an empty `value`.\n   */\n  @property()\n  searchPlaceholder = 'Search all of IBM';\n\n  /**\n   * The redirect URL when a user selects a search suggestion.\n   */\n  @property({ attribute: 'redirect-url' })\n  redirectUrl = 'https://www.ibm.com/search?lnk=mhsrch';\n\n  /**\n   * The `aria-label` attribute for the search input.\n   */\n  @property({ attribute: 'search-label' })\n  searchLabel = 'IBM search field';\n\n  /**\n   * The shadow slot this search UI should be in.\n   */\n  @property({ reflect: true })\n  slot = 'search';\n\n  /**\n   * `true` to activate the search box on page load.\n   */\n  @property({ type: Boolean, attribute: 'search-open-on-load' })\n  searchOpenOnload = false;\n\n  /**\n   * The input value.\n   */\n  get searchQueryString() {\n    return this._searchInputNode?.value ?? '';\n  }\n\n  /**\n   * Returns query param `q` for search input if exists. Only available when searchOpenOnload is `true`\n   */\n  private _setSearchParam() {\n    const { _searchInputNode: searchInputNode } = this;\n    const URLParams = new URLSearchParams(\n      this.ownerDocument!.defaultView!.location.search\n    );\n    const searchParam: any = this.searchOpenOnload ? URLParams.get('q') : '';\n    if (searchParam) {\n      searchInputNode.value = searchParam;\n    }\n  }\n\n  firstUpdated() {\n    this._setSearchParam();\n    if (this.leadspaceSearch) {\n      this.setAttribute('should-remain-open', '');\n      this.setAttribute('active', '');\n    }\n\n    if (!this.appId && this.scopeParameters) {\n      this.appId = 'all';\n      this.redirectUrl = 'https://www.ibm.com/search/scoped';\n    }\n  }\n\n  updated(changedProperties) {\n    if (changedProperties.has('searchResults')) {\n      const titleElements = this.shadowRoot?.querySelectorAll(\n        'dds-search-with-typeahead-item[groupTitle]'\n      );\n      titleElements?.forEach((e) => {\n        e.previousElementSibling?.setAttribute('lastBeforeGroup', '');\n      });\n    }\n\n    if (changedProperties.has('appId')) {\n      if (\n        gridBreakpoint < document.body.clientWidth &&\n        this._searchSuggestions &&\n        this.scopeParameters\n      ) {\n        const scopeBarWidth = (\n          this.shadowRoot?.querySelector(\n            'dds-scoped-search-dropdown'\n          ) as HTMLElement\n        ).offsetWidth;\n        (this._searchSuggestions?.parentElement as HTMLElement)?.setAttribute(\n          'style',\n          `left: ${scopeBarWidth}px; width: calc(100% - ${scopeBarWidth}px);`\n        );\n      } else {\n        (\n          this._searchSuggestions?.parentElement as HTMLElement\n        )?.removeAttribute('style');\n      }\n\n      if (!this.customTypeaheadAPI) {\n        this.getResults(this.value).then((res) => {\n          this.searchResults = res;\n        });\n      }\n\n      const newPlaceholder = this.placeholderFormatter({\n        appId: this.scopeParameters.filter(\n          (e) => e.value === `${this.appId}`\n        )[0]?.name,\n      });\n      this.setAttribute('placeholder', newPlaceholder);\n      this.performSearchButtonAssistiveText = newPlaceholder;\n    }\n  }\n\n  render() {\n    const {\n      active,\n      closeSearchButtonAssistiveText,\n      openSearchButtonAssistiveText,\n      performSearchButtonAssistiveText,\n      _handleClickCloseButton: handleClickCloseButton,\n      _handleClickSearchButton: handleClickSearchButton,\n      _handleClickItem: handleClickItem,\n    } = this;\n    const searchButtonAssistiveText = !active\n      ? openSearchButtonAssistiveText\n      : performSearchButtonAssistiveText;\n    return html`\n      ${!this.leadspaceSearch\n        ? html`\n            ${this._renderForm()}\n            <div class=\"${prefix}--header__search--actions\">\n              <button\n                type=\"button\"\n                part=\"open-button\"\n                class=\"${prefix}--header__action ${prefix}--header__search--search\"\n                aria-label=\"${searchButtonAssistiveText}\"\n                @click=\"${handleClickSearchButton}\">\n                ${Search20()}\n              </button>\n              <button\n                type=\"button\"\n                part=\"close-button\"\n                class=\"${prefix}--header__action ${prefix}--header__search--close\"\n                aria-label=\"${closeSearchButtonAssistiveText}\"\n                @click=\"${handleClickCloseButton}\">\n                ${Close20()}\n              </button>\n            </div>\n          `\n        : html`\n            <div class=\"${prefix}--header__search--actions\">\n              ${Search20({\n                part: 'search-icon',\n                class: `${prefix}--search-magnifier-icon`,\n                role: 'img',\n              })}\n              ${this._renderForm()}\n              <button\n                type=\"button\"\n                part=\"close-button\"\n                class=\"${prefix}--header__action ${prefix}--header__search--close ${this\n                  .value.length === 0\n                  ? `${prefix}--header__search--hide`\n                  : ''}\"\n                aria-label=\"${closeSearchButtonAssistiveText}\"\n                @click=\"${handleClickCloseButton}\">\n                ${Close20()}\n              </button>\n            </div>\n            <div\n              id=\"result-list\"\n              class=\"react-autosuggest__suggestions-container\">\n              <ul\n                role=\"listbox\"\n                class=\"${ddsPrefix}-ce__search__list react-autosuggest__suggestions-list\">\n                ${this.searchResults &&\n                this.searchResults.map(\n                  (item) =>\n                    html`\n                      <dds-search-with-typeahead-item\n                        text=\"${item}\"\n                        @click=${handleClickItem}></dds-search-with-typeahead-item>\n                    `\n                )}\n              </ul>\n            </div>\n          `}\n    `;\n  }\n\n  /**\n   * A selector that will return highlighted search result items.\n   */\n  static get selectorItemHighlighted() {\n    return `${ddsPrefix}-search-with-typeahead-item[highlighted]`;\n  }\n\n  /**\n   * A selector that will return search result items.\n   */\n  static get selectorItem() {\n    return `${ddsPrefix}-search-with-typeahead-item`;\n  }\n\n  /**\n   * The name of the custom event fired before the page is being redirected to the search result page.\n   * Cancellation of this event stops the user-initiated action of redirection.\n   */\n  static get eventBeforeRedirect() {\n    return `${ddsPrefix}-search-with-typeahead-beingredirected`;\n  }\n\n  /**\n   * The name of the custom event fired after the search content is changed upon a user gesture.\n   */\n  static get eventInput() {\n    return `${ddsPrefix}-search-with-typeahead-input`;\n  }\n\n  /**\n   * The name of the custom event captured to retrieve the new search scope.\n   */\n  static get eventSelectScope() {\n    return `${prefix}-select-selected`;\n  }\n\n  /**\n   * The name of the custom event captured to retrieve the custom typeahead API results.\n   */\n  static get eventCustomResults() {\n    return `${ddsPrefix}-custom-typeahead-api-results`;\n  }\n\n  /**\n   * The name of the custom event fired after this search box is toggled upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${ddsPrefix}-search-with-typeahead-toggled`;\n  }\n\n  static get stableSelector() {\n    return `${ddsPrefix}--search-with-typeahead`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\n/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */\nexport default DDSSearchWithTypeahead;\n"]}

package/es/components/search-with-typeahead/search-with-typeahead.js

@@ -33,6 +33,7 @@ var _collectionHelpers = require("../../globals/internal/collection-helpers.js")
 var _searchWithTypeaheadCss = _interopRequireDefault(require("././search-with-typeahead.css.js"));
 var _stableSelector = _interopRequireDefault(require("../../globals/mixins/stable-selector.js"));
 require("./search-with-typeahead-item.js");
+var _carbonElement = require("../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -58,7 +59,7 @@ var gridBreakpoint = parseFloat(_layout.breakpoints.lg.width) * _layout.baseFont
  * @fires dds-search-with-typeahead-toggled
  *   The name of the custom event fired after this search box is toggled upon a user gesture.
  */
-var DDSSearchWithTypeahead = (0, _decorate2["default"])([(0, _litElement.customElement)("".concat(ddsPrefix, "-search-with-typeahead"))], function (_initialize, _HostListenerMixin) {
+var DDSSearchWithTypeahead = (0, _decorate2["default"])([(0, _carbonElement.carbonElement)("".concat(ddsPrefix, "-search-with-typeahead"))], function (_initialize, _HostListenerMixin) {
   var DDSSearchWithTypeahead = /*#__PURE__*/function (_HostListenerMixin2) {
     (0, _inherits2["default"])(DDSSearchWithTypeahead, _HostListenerMixin2);
     var _super = _createSuper(DDSSearchWithTypeahead);