npm - @ukic/web-components - Versions diffs - 2.1.0-beta.11 → 2.1.0-beta.13 - Mend

@ukic/web-components 2.1.0-beta.11 → 2.1.0-beta.13

Files changed (580) hide show

package/dist/esm/ic-radio-group.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-radio-group.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","./src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\nic-input-label.error {\n color: var(--ic-status-error);\n}\n\nic-input-validation {\n margin-top: var(--ic-space-sm);\n}\n\n:host([small]) ic-input-validation {\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-label ic-typography {\n margin-bottom: var(--ic-space-sm);\n}\n\n:host([small]) ic-input-label ic-typography {\n margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n.radio-buttons-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-xxs);\n}\n\n:host([small]) .radio-buttons-container {\n gap: var(--ic-space-xxxs);\n}\n\n:host([orientation=\"horizontal\"]) .radio-buttons-container {\n display: flex;\n flex-direction: row;\n gap: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host([small][orientation=\"horizontal\"]) .radio-buttons-container {\n gap: var(--ic-space-xl);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty, IcOrientation } from \"../../utils/types\";\nimport { IcValueEventDetail } from \"../../interface\";\n\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioOptions: HTMLIcRadioOptionElement[];\n\n @Element() host: HTMLIcRadioGroupElement;\n\n /*\n The label for the radio group to be displayed.\n /\n @Prop() label!: string;\n\n /\n The name for the radio group to differentiate from other groups.\n /\n @Prop() name!: string;\n\n /\n If `true`, the radio group will require a value.\n /\n @Prop() required: boolean = false;\n\n /\n The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n /\n @Prop({ reflect: true, mutable: true }) orientation: IcOrientation =\n \"vertical\";\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel: boolean = false;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled: boolean = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText: string;\n\n /\n If `true`, the small styling will be applied to the radio group.\n /\n @Prop() small: boolean = false;\n /\n The validation status - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /\n The validation text - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationText: string = \"\";\n /\n The checked state.\n /\n @State() checkedValue: string = \"\";\n @State() selectedChild: number = -1;\n\n /\n Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n @Listen(\"icCheck\")\n selectHandler(event: CustomEvent<IcValueEventDetail>): void {\n this.checkedValue = event.detail.value;\n this.icChange.emit({ value: this.checkedValue });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = this.checkedValue === radioOption.value;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n this.selectedChild > 0 ? -1 : 0;\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].selected = true;\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].selected = true;\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n //check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n componentDidLoad(): void {\n this.radioOptions = Array.from(\n this.host.querySelectorAll(\"ic-radio-option\")\n );\n\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n });\n this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n this.selectedChild > 0 ? -1 : 0;\n\n if (\n this.orientation === \"horizontal\" &&\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 \|\|\n (this.radioOptions.length === 2 &&\n (isSlotUsed(this.radioOptions[0], \"additional-field\") \|\|\n isSlotUsed(this.radioOptions[1], \"additional-field\"))))\n ) {\n this.orientation = \"vertical\";\n }\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n }\n\n render() {\n renderHiddenInput(\n true,\n this.host,\n this.name,\n this.checkedValue,\n this.disabled\n );\n\n return (\n <Host onKeyDown={this.handleKeyDown}>\n <div\n role=\"radiogroup\"\n aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n >\n {!this.hideLabel && (\n <ic-input-label\n class={{ [`${this.validationStatus}`]: true }}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n disabled={this.disabled}\n ></ic-input-label>\n )}\n <div class=\"radio-buttons-container\">\n <slot></slot>\n </div>\n </div>\n {hasValidationStatus(this.validationStatus, this.disabled) && (\n <ic-input-validation\n ariaLiveMode=\"polite\"\n status={this.validationStatus}\n message={this.validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-radio-group.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","./src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n}\n\nic-input-label.error {\n color: var(--ic-status-error);\n}\n\nic-input-validation {\n margin-top: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-validation {\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\nic-input-label ic-typography {\n margin-bottom: var(--ic-space-sm);\n}\n\n:host(.small) ic-input-label ic-typography {\n margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n.radio-buttons-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-xxs);\n}\n\n:host(.small) .radio-buttons-container {\n gap: var(--ic-space-xxxs);\n}\n\n:host([orientation=\"horizontal\"]) .radio-buttons-container {\n display: flex;\n flex-direction: row;\n gap: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.small[orientation=\"horizontal\"]) .radio-buttons-container {\n gap: var(--ic-space-xl);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcInformationStatusOrEmpty, IcOrientation } from \"../../utils/types\";\nimport { IcValueEventDetail } from \"../../interface\";\n\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioOptions: HTMLIcRadioOptionElement[];\n\n @Element() host: HTMLIcRadioGroupElement;\n\n /*\n The label for the radio group to be displayed.\n /\n @Prop() label!: string;\n\n /\n The name for the radio group to differentiate from other groups.\n /\n @Prop() name!: string;\n\n /\n If `true`, the radio group will require a value.\n /\n @Prop() required: boolean = false;\n\n /\n The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n /\n @Prop({ reflect: true, mutable: true }) orientation: IcOrientation =\n \"vertical\";\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel: boolean = false;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled: boolean = false;\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText: string;\n\n /\n If `true`, the small styling will be applied to the radio group.\n /\n @Prop() small: boolean = false;\n /\n The validation status - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n /\n The validation text - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationText: string = \"\";\n /\n The checked state.\n /\n @State() checkedValue: string = \"\";\n @State() selectedChild: number = -1;\n\n /\n Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcValueEventDetail>;\n\n @Listen(\"icCheck\")\n selectHandler(event: CustomEvent<IcValueEventDetail>): void {\n this.checkedValue = event.detail.value;\n this.icChange.emit({ value: this.checkedValue });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = this.checkedValue === radioOption.value;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n this.selectedChild > 0 ? -1 : 0;\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].selected = true;\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].selected = true;\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n //check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n componentDidLoad(): void {\n this.radioOptions = Array.from(\n this.host.querySelectorAll(\"ic-radio-option\")\n );\n\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n });\n this.radioOptions[0].shadowRoot.querySelector(\"input\").tabIndex =\n this.selectedChild > 0 ? -1 : 0;\n\n if (\n this.orientation === \"horizontal\" &&\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 \|\|\n (this.radioOptions.length === 2 &&\n (isSlotUsed(this.radioOptions[0], \"additional-field\") \|\|\n isSlotUsed(this.radioOptions[1], \"additional-field\"))))\n ) {\n this.orientation = \"vertical\";\n }\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n }\n\n render() {\n renderHiddenInput(\n true,\n this.host,\n this.name,\n this.checkedValue,\n this.disabled\n );\n\n return (\n <Host onKeyDown={this.handleKeyDown} class={{ small: this.small }}>\n <div\n role=\"radiogroup\"\n aria-label={`${this.label}${this.required ? \", required\" : \"\"}`}\n >\n {!this.hideLabel && (\n <ic-input-label\n class={{ [`${this.validationStatus}`]: true }}\n label={this.label}\n helperText={this.helperText}\n required={this.required}\n disabled={this.disabled}\n ></ic-input-label>\n )}\n <div class=\"radio-buttons-container\">\n <slot></slot>\n </div>\n </div>\n {hasValidationStatus(this.validationStatus, this.disabled) && (\n <ic-input-validation\n ariaLiveMode=\"polite\"\n status={this.validationStatus}\n message={this.validationText}\n ></ic-input-validation>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ic-radio-option.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-90721b3c.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3b144b17.js';
 import { u as getSlotContent, d as addFormResetListener, a as onComponentRequiredPropUndefined, r as removeFormResetListener } from './helpers-b2b47a7d.js';
 import './types-dd515332.js';
-const icRadioOptionCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}:host([additional-field-display=\"static\"]) ::slotted(ic-text-field){margin-top:calc(var(--ic-space-sm) / 2);margin-left:var(--ic-space-xl)}:host([disabled]){color:var(--ic-architectural-200)}.container input:focus+span.checkmark,:host(:focus) .container input:checked+span.checkmark{box-shadow:var(--ic-border-focus)}.container{display:grid;grid-template-columns:min-content auto;position:relative;cursor:pointer;align-items:center;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs)}.container.disabled,.container.disabled input:disabled{cursor:default}.container input{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:absolute;cursor:pointer;height:var(--ic-space-lg);width:var(--ic-space-lg);border-radius:50%;border:none}.checkmark{display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:transparent;border:0.063rem solid #a7acb3;border-radius:50%;transition:var(--ic-easing-transition-fast);box-sizing:border-box}.container input:checked~.checkmark::after{display:inline-block}.container:hover input~.checkmark{background-color:var(--ic-action-default-bg-hover);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-hover);border:0.063rem solid var(--ic-action-default)}.container:active input~.checkmark{background-color:var(--ic-action-default-bg-active);border:0.063rem solid var(--ic-action-default-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark{background-color:var(--ic-action-default-bg-active);border:0.125rem solid var(--ic-action-default-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark::after{background-color:var(--ic-action-default-active)}.container input:checked~.checkmark{border:0.125rem solid var(--ic-action-default)}.container input:checked:disabled~.checkmark{background-color:transparent;border:0.125rem solid var(--ic-architectural-200)}.container input:disabled~.checkmark{border:0.063rem dashed var(--ic-architectural-200)}.container input:disabled~.checkmark::after{background:var(--ic-architectural-200)}.container:hover input:disabled~.checkmark{background-color:transparent;box-shadow:none;border:0.125rem solid none}.container:active input:disabled~.checkmark::after{background-color:var(--ic-architectural-200)}.container .checkmark::after{content:\"\";position:absolute;display:none;top:calc(50% - var(--ic-space-xs));left:calc(50% - var(--ic-space-xs));width:var(--ic-space-md);height:var(--ic-space-md);border-radius:50%;background:var(--ic-action-default)}.radio-label{margin-left:var(--ic-space-md)}.additional-field-wrapper{margin-left:var(--ic-space-xs)}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-action-default);border-left:0.125rem solid var(--ic-action-default);margin-left:-0.063rem}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-container.hidden{display:none}.dynamic-text{color:var(--ic-action-default);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){::slotted(ic-text-field){--input-width:100%}}@media (forced-colors: active){.container input:checked~.checkmark,.container:active input:checked~.checkmark{border-color:Highlight}.container input:checked~.checkmark::after,.container:active input:checked~.checkmark::after{background-color:Highlight}.container input:disabled~.checkmark,.container input:checked:disabled~.checkmark{border-color:GrayText}.container input:disabled~.checkmark::after,.container:active input:disabled~.checkmark::after{background-color:GrayText}}";
+const icRadioOptionCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}:host([additional-field-display=\"static\"]) ::slotted(ic-text-field){margin-top:calc(var(--ic-space-sm) / 2);margin-left:var(--ic-space-xl)}:host(.disabled){color:var(--ic-architectural-200)}.container input:focus+span.checkmark,:host(:focus) .container input:checked+span.checkmark{box-shadow:var(--ic-border-focus)}.container{display:grid;grid-template-columns:min-content auto;position:relative;cursor:pointer;align-items:center;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs)}.container.disabled,.container.disabled input:disabled{cursor:default}.container input{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:absolute;cursor:pointer;height:var(--ic-space-lg);width:var(--ic-space-lg);border-radius:50%;border:none}.checkmark{display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:transparent;border:var(--ic-space-1px) solid #a7acb3;border-radius:50%;transition:var(--ic-easing-transition-fast);box-sizing:border-box}.container input:checked~.checkmark::after{display:inline-block}.container:hover input~.checkmark{background-color:var(--ic-action-default-bg-hover);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-hover);border:var(--ic-space-1px) solid var(--ic-action-default)}.container:active input~.checkmark{background-color:var(--ic-action-default-bg-active);border:var(--ic-space-1px) solid var(--ic-action-default-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark{background-color:var(--ic-action-default-bg-active);border:0.125rem solid var(--ic-action-default-active);box-shadow:0 0 0 0.25rem var(--ic-action-default-bg-active)}.container:active input:checked~.checkmark::after{background-color:var(--ic-action-default-active)}.container input:checked~.checkmark{border:0.125rem solid var(--ic-action-default)}.container input:checked:disabled~.checkmark{background-color:transparent;border:0.125rem solid var(--ic-architectural-200)}.container input:disabled~.checkmark{border:var(--ic-space-1px) dashed var(--ic-architectural-200)}.container input:disabled~.checkmark::after{background:var(--ic-architectural-200)}.container:hover input:disabled~.checkmark{background-color:transparent;box-shadow:none;border:0.125rem solid none}.container:active input:disabled~.checkmark::after{background-color:var(--ic-architectural-200)}.container .checkmark::after{content:\"\";position:absolute;display:none;top:calc(50% - var(--ic-space-xs));left:calc(50% - var(--ic-space-xs));width:var(--ic-space-md);height:var(--ic-space-md);border-radius:50%;background:var(--ic-action-default)}.radio-label{margin-left:var(--ic-space-md)}.additional-field-wrapper{margin-left:var(--ic-space-xs)}.branch-corner{color:var(--ic-action-default);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-action-default);border-left:0.125rem solid var(--ic-action-default);margin-left:calc(-1 * var(--ic-space-1px))}.dynamic-container{display:flex;position:relative;margin:var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.dynamic-container.hidden{display:none}.dynamic-text{color:var(--ic-action-default);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){::slotted(ic-text-field){--input-width:100%}}@media (forced-colors: active){.container input:checked~.checkmark,.container:active input:checked~.checkmark{border-color:Highlight}.container input:checked~.checkmark::after,.container:active input:checked~.checkmark::after{background-color:Highlight}.container input:disabled~.checkmark,.container input:checked:disabled~.checkmark{border-color:GrayText}.container input:disabled~.checkmark::after,.container:active input:disabled~.checkmark::after{background-color:GrayText}}";
 const RadioOption = class {
   constructor(hostRef) {
@@ -116,7 +116,7 @@ const RadioOption = class {
   }
   render() {
     const id = `ic-radio-option-${this.label !== undefined ? this.label : this.value}-${this.groupLabel}`;
-    return (h(Host, { onClick: this.handleClick }, h("div", { class: { ["container"]: true, ["disabled"]: this.disabled } }, h("div", null, h("input", { role: "radio", tabindex: this.selected ? "0" : "-1", type: "radio", name: this.name, id: id, value: this.value, disabled: this.disabled ? true : null, checked: this.selected, ref: (el) => (this.radioElement = el) }), h("span", { class: "checkmark" })), h("ic-typography", { class: "radio-label", variant: "body" }, h("label", { htmlFor: id }, this.label))), this.hasAdditionalField && (h("div", { onClick: this.swallowClick, class: {
+    return (h(Host, { onClick: this.handleClick, class: { disabled: this.disabled } }, h("div", { class: { ["container"]: true, ["disabled"]: this.disabled } }, h("div", null, h("input", { role: "radio", tabindex: this.selected ? "0" : "-1", type: "radio", name: this.name, id: id, value: this.value, disabled: this.disabled ? true : null, checked: this.selected, ref: (el) => (this.radioElement = el) }), h("span", { class: "checkmark" })), h("ic-typography", { class: "radio-label", variant: "body" }, h("label", { htmlFor: id }, this.label))), this.hasAdditionalField && (h("div", { onClick: this.swallowClick, class: {
         "dynamic-container": true,
         hidden: this.additionalFieldDisplay === "dynamic" && !this.selected,
       } }, this.additionalFieldDisplay === "dynamic" && (h("div", { class: "branch-corner" })), h("div", null, this.additionalFieldDisplay === "dynamic" && (h("ic-typography", { variant: "caption" }, h("p", { class: "dynamic-text" }, this.dynamicText))), h("div", { class: {

package/dist/esm/ic-radio-option.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-radio-option.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=shadow","./src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: flex;\n flex-direction: column;\n width: fit-content;\n}\n\n:host([additional-field-display=\"static\"]) ::slotted(ic-text-field) {\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled /\n:host([disabled]) {\n color: var(--ic-architectural-200);\n}\n\n/ Focus states /\n\n.container input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n box-shadow: var(--ic-border-focus);\n}\n\n/ The container /\n.container {\n display: grid;\n grid-template-columns: min-content auto;\n position: relative;\n cursor: pointer;\n align-items: center;\n margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n cursor: default;\n}\n\n/ Hide the browser's default radio button /\n.container input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: inline-block;\n position: absolute;\n cursor: pointer;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n border-radius: 50%;\n border: none;\n}\n\n/ Create a custom radio button /\n.checkmark {\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: transparent;\n border: 0.063rem solid #a7acb3;\n border-radius: 50%;\n transition: var(--ic-easing-transition-fast);\n box-sizing: border-box;\n}\n\n/ Show the indicator (dot/circle) when checked /\n.container input:checked ~ .checkmark::after {\n display: inline-block;\n}\n\n/ On mouse-over, add a light blue background color /\n.container:hover input ~ .checkmark {\n background-color: var(--ic-action-default-bg-hover);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n border: 0.063rem solid var(--ic-action-default);\n}\n\n/ When pressed, adds the active colours /\n.container:active input ~ .checkmark {\n background-color: var(--ic-action-default-bg-active);\n border: 0.063rem solid var(--ic-action-default-active);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/ When pressed, adds the active colours /\n.container:active input:checked ~ .checkmark {\n background-color: var(--ic-action-default-bg-active);\n border: 0.125rem solid var(--ic-action-default-active);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/ When pressed and selected, adds the active colours /\n.container:active input:checked ~ .checkmark::after {\n background-color: var(--ic-action-default-active);\n}\n\n/ When the radio button is checked /\n.container input:checked ~ .checkmark {\n border: 0.125rem solid var(--ic-action-default);\n}\n\n/ When the radio button is checked and disabled /\n.container input:checked:disabled ~ .checkmark {\n background-color: transparent;\n border: 0.125rem solid var(--ic-architectural-200);\n}\n\n/ When the radio button is disabled /\n.container input:disabled ~ .checkmark {\n border: 0.063rem dashed var(--ic-architectural-200);\n}\n\n/ When the radio button is disabled /\n.container input:disabled ~ .checkmark::after {\n background: var(--ic-architectural-200);\n}\n\n/ On mouse-over inactive /\n.container:hover input:disabled ~ .checkmark {\n background-color: transparent;\n box-shadow: none;\n border: 0.125rem solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n background-color: var(--ic-architectural-200);\n}\n\n/ Style the indicator (dot/circle) /\n.container .checkmark::after {\n content: \"\";\n position: absolute;\n display: none;\n top: calc(50% - var(--ic-space-xs));\n left: calc(50% - var(--ic-space-xs));\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n border-radius: 50%;\n background: var(--ic-action-default);\n}\n\n.radio-label {\n margin-left: var(--ic-space-md);\n}\n\n.additional-field-wrapper {\n margin-left: var(--ic-space-xs);\n}\n\n/ The line /\n.branch-corner {\n color: var(--ic-action-default);\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 0.188rem;\n border-bottom: 0.125rem solid var(--ic-action-default);\n border-left: 0.125rem solid var(--ic-action-default);\n margin-left: -0.063rem;\n}\n\n/ The dynamic container /\n.dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-container.hidden {\n display: none;\n}\n\n.dynamic-text {\n color: var(--ic-action-default);\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n ::slotted(ic-text-field) {\n --input-width: 100%;\n }\n}\n\n@media (forced-colors: active) {\n / Styles here only apply to Forced Colors Mode /\n\n .container input:checked ~ .checkmark,\n .container:active input:checked ~ .checkmark {\n border-color: Highlight;\n }\n\n .container input:checked ~ .checkmark::after,\n .container:active input:checked ~ .checkmark::after {\n background-color: Highlight;\n }\n\n .container input:disabled ~ .checkmark,\n .container input:checked:disabled ~ .checkmark {\n border-color: GrayText;\n }\n\n .container input:disabled ~ .checkmark::after,\n .container:active input:disabled ~ .checkmark::after {\n background-color: GrayText;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Listen,\n Watch,\n State,\n Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n getSlotContent,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IcValueEventDetail } from \"../../interface\";\n@Component({\n tag: \"ic-radio-option\",\n styleUrl: \"ic-radio-option.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class RadioOption {\n private radioElement: HTMLInputElement;\n /\n If `true`, the radio option will be displayed in a selected state.\n /\n @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n /\n The label for the radio option.\n /\n @Prop() label?: string;\n /\n The value for the radio option.\n /\n @Prop({ mutable: true }) value!: string;\n /\n The name for the radio option.\n /\n @Prop() name: string;\n /\n The group label for the radio option.\n /\n @Prop() groupLabel: string;\n /\n The text to be displayed when dynamic.\n /\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n /\n The style of additionalField that will be displayed if used.\n /\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n\n @State() initiallySelected = this.selected;\n\n @Element() host: HTMLIcRadioOptionElement;\n\n /\n @deprecated This event should not be used anymore. Use icCheck instead.\n /\n @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when a radio is selected.\n /\n @Event() icCheck: EventEmitter<IcValueEventDetail>;\n\n @Watch(\"selected\")\n selectedChangeHandler(selected: boolean): void {\n if (selected) {\n this.handleClick();\n }\n }\n\n /\n Sets focus on the radio option.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.host.shadowRoot.querySelector(\"input\")) {\n this.host.shadowRoot.querySelector(\"input\").focus();\n }\n }\n\n private defaultRadioValue: string = \"\";\n private skipFocus = false;\n\n private handleClick = () => {\n if (!this.disabled) {\n if (this.skipFocus === false) {\n this.radioElement.focus();\n }\n this.skipFocus = false;\n\n if (this.hasAdditionalField) {\n const textfield = this.host.querySelector(\"ic-text-field\");\n this.value =\n textfield.value !== \"\" ? textfield.value : this.defaultRadioValue;\n }\n\n this.icCheck.emit({\n value: this.value,\n });\n\n this.radioOptionSelect.emit({\n value: this.value,\n });\n }\n };\n\n private swallowClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n private hasAdditionalField: boolean = false;\n componentWillLoad(): void {\n const additonalFieldContent = getSlotContent(this.host, \"additional-field\");\n\n if (additonalFieldContent !== null) {\n this.hasAdditionalField = true;\n const Element = additonalFieldContent[0] as HTMLElement;\n if (Element.tagName === \"IC-TEXT-FIELD\") {\n const textField = Element as HTMLIcTextFieldElement;\n textField.hiddenInput = false;\n }\n }\n\n this.defaultRadioValue = this.value;\n\n addFormResetListener(this.host, this.handleFormReset);\n }\n\n private handleFormReset = (): void => {\n this.skipFocus = true;\n this.selected = this.initiallySelected;\n };\n\n @Listen(\"icChange\")\n textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n const textFieldValue = event.detail.value;\n\n if (this.selected) {\n if (textFieldValue !== \"\") {\n this.value = event.detail.value;\n this.icCheck.emit({\n value: this.value,\n });\n this.radioOptionSelect.emit({\n value: this.value,\n });\n } else {\n this.value = this.defaultRadioValue;\n this.icCheck.emit({\n value: this.defaultRadioValue,\n });\n this.radioOptionSelect.emit({\n value: this.defaultRadioValue,\n });\n }\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.value, propName: \"value\" }],\n \"Radio Option\"\n );\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.host.querySelector(\"ic-text-field\");\n if (!this.selected) {\n textfield && textfield.setAttribute(\"disabled\", \"\");\n } else {\n textfield && textfield.removeAttribute(\"disabled\");\n }\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.host, this.handleFormReset);\n }\n\n render() {\n const id = `ic-radio-option-${\n this.label !== undefined ? this.label : this.value\n }-${this.groupLabel}`;\n\n return (\n <Host onClick={this.handleClick}>\n <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n <div>\n <input\n role=\"radio\"\n tabindex={this.selected ? \"0\" : \"-1\"}\n type=\"radio\"\n name={this.name}\n id={id}\n value={this.value}\n disabled={this.disabled ? true : null}\n checked={this.selected}\n ref={(el) => (this.radioElement = el)}\n ></input>\n <span class=\"checkmark\"></span>\n </div>\n <ic-typography class=\"radio-label\" variant=\"body\">\n <label htmlFor={id}>{this.label}</label>\n </ic-typography>\n </div>\n\n {this.hasAdditionalField && (\n <div\n onClick={this.swallowClick}\n class={{\n \"dynamic-container\": true,\n hidden:\n this.additionalFieldDisplay === \"dynamic\" && !this.selected,\n }}\n >\n {this.additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {this.additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\">{this.dynamicText}</p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n this.additionalFieldDisplay === \"static\",\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-radio-option.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=shadow","./src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: flex;\n flex-direction: column;\n width: fit-content;\n}\n\n:host([additional-field-display=\"static\"]) ::slotted(ic-text-field) {\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled /\n:host(.disabled) {\n color: var(--ic-architectural-200);\n}\n\n/ Focus states /\n\n.container input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n box-shadow: var(--ic-border-focus);\n}\n\n/ The container /\n.container {\n display: grid;\n grid-template-columns: min-content auto;\n position: relative;\n cursor: pointer;\n align-items: center;\n margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n cursor: default;\n}\n\n/ Hide the browser's default radio button /\n.container input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: inline-block;\n position: absolute;\n cursor: pointer;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n border-radius: 50%;\n border: none;\n}\n\n/ Create a custom radio button /\n.checkmark {\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: transparent;\n border: var(--ic-space-1px) solid #a7acb3;\n border-radius: 50%;\n transition: var(--ic-easing-transition-fast);\n box-sizing: border-box;\n}\n\n/ Show the indicator (dot/circle) when checked /\n.container input:checked ~ .checkmark::after {\n display: inline-block;\n}\n\n/ On mouse-over, add a light blue background color /\n.container:hover input ~ .checkmark {\n background-color: var(--ic-action-default-bg-hover);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n border: var(--ic-space-1px) solid var(--ic-action-default);\n}\n\n/ When pressed, adds the active colours /\n.container:active input ~ .checkmark {\n background-color: var(--ic-action-default-bg-active);\n border: var(--ic-space-1px) solid var(--ic-action-default-active);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/ When pressed, adds the active colours /\n.container:active input:checked ~ .checkmark {\n background-color: var(--ic-action-default-bg-active);\n border: 0.125rem solid var(--ic-action-default-active);\n box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n}\n\n/ When pressed and selected, adds the active colours /\n.container:active input:checked ~ .checkmark::after {\n background-color: var(--ic-action-default-active);\n}\n\n/ When the radio button is checked /\n.container input:checked ~ .checkmark {\n border: 0.125rem solid var(--ic-action-default);\n}\n\n/ When the radio button is checked and disabled /\n.container input:checked:disabled ~ .checkmark {\n background-color: transparent;\n border: 0.125rem solid var(--ic-architectural-200);\n}\n\n/ When the radio button is disabled /\n.container input:disabled ~ .checkmark {\n border: var(--ic-space-1px) dashed var(--ic-architectural-200);\n}\n\n/ When the radio button is disabled /\n.container input:disabled ~ .checkmark::after {\n background: var(--ic-architectural-200);\n}\n\n/ On mouse-over inactive /\n.container:hover input:disabled ~ .checkmark {\n background-color: transparent;\n box-shadow: none;\n border: 0.125rem solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n background-color: var(--ic-architectural-200);\n}\n\n/ Style the indicator (dot/circle) /\n.container .checkmark::after {\n content: \"\";\n position: absolute;\n display: none;\n top: calc(50% - var(--ic-space-xs));\n left: calc(50% - var(--ic-space-xs));\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n border-radius: 50%;\n background: var(--ic-action-default);\n}\n\n.radio-label {\n margin-left: var(--ic-space-md);\n}\n\n.additional-field-wrapper {\n margin-left: var(--ic-space-xs);\n}\n\n/ The line /\n.branch-corner {\n color: var(--ic-action-default);\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 0.188rem;\n border-bottom: 0.125rem solid var(--ic-action-default);\n border-left: 0.125rem solid var(--ic-action-default);\n margin-left: calc(-1 var(--ic-space-1px));\n}\n\n/* The dynamic container /\n.dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n.dynamic-container.hidden {\n display: none;\n}\n\n.dynamic-text {\n color: var(--ic-action-default);\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n ::slotted(ic-text-field) {\n --input-width: 100%;\n }\n}\n\n@media (forced-colors: active) {\n / Styles here only apply to Forced Colors Mode /\n\n .container input:checked ~ .checkmark,\n .container:active input:checked ~ .checkmark {\n border-color: Highlight;\n }\n\n .container input:checked ~ .checkmark::after,\n .container:active input:checked ~ .checkmark::after {\n background-color: Highlight;\n }\n\n .container input:disabled ~ .checkmark,\n .container input:checked:disabled ~ .checkmark {\n border-color: GrayText;\n }\n\n .container input:disabled ~ .checkmark::after,\n .container:active input:disabled ~ .checkmark::after {\n background-color: GrayText;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Listen,\n Watch,\n State,\n Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n getSlotContent,\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IcValueEventDetail } from \"../../interface\";\n@Component({\n tag: \"ic-radio-option\",\n styleUrl: \"ic-radio-option.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class RadioOption {\n private radioElement: HTMLInputElement;\n /\n If `true`, the radio option will be displayed in a selected state.\n /\n @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n /\n The label for the radio option.\n /\n @Prop() label?: string;\n /\n The value for the radio option.\n /\n @Prop({ mutable: true }) value!: string;\n /\n The name for the radio option.\n /\n @Prop() name: string;\n /\n The group label for the radio option.\n /\n @Prop() groupLabel: string;\n /\n The text to be displayed when dynamic.\n /\n @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n /\n The style of additionalField that will be displayed if used.\n /\n @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n \"static\";\n\n @State() initiallySelected = this.selected;\n\n @Element() host: HTMLIcRadioOptionElement;\n\n /\n @deprecated This event should not be used anymore. Use icCheck instead.\n /\n @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n /\n Emitted when a radio is selected.\n /\n @Event() icCheck: EventEmitter<IcValueEventDetail>;\n\n @Watch(\"selected\")\n selectedChangeHandler(selected: boolean): void {\n if (selected) {\n this.handleClick();\n }\n }\n\n /\n Sets focus on the radio option.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.host.shadowRoot.querySelector(\"input\")) {\n this.host.shadowRoot.querySelector(\"input\").focus();\n }\n }\n\n private defaultRadioValue: string = \"\";\n private skipFocus = false;\n\n private handleClick = () => {\n if (!this.disabled) {\n if (this.skipFocus === false) {\n this.radioElement.focus();\n }\n this.skipFocus = false;\n\n if (this.hasAdditionalField) {\n const textfield = this.host.querySelector(\"ic-text-field\");\n this.value =\n textfield.value !== \"\" ? textfield.value : this.defaultRadioValue;\n }\n\n this.icCheck.emit({\n value: this.value,\n });\n\n this.radioOptionSelect.emit({\n value: this.value,\n });\n }\n };\n\n private swallowClick = (event: MouseEvent) => {\n event.stopPropagation();\n };\n\n private hasAdditionalField: boolean = false;\n componentWillLoad(): void {\n const additonalFieldContent = getSlotContent(this.host, \"additional-field\");\n\n if (additonalFieldContent !== null) {\n this.hasAdditionalField = true;\n const Element = additonalFieldContent[0] as HTMLElement;\n if (Element.tagName === \"IC-TEXT-FIELD\") {\n const textField = Element as HTMLIcTextFieldElement;\n textField.hiddenInput = false;\n }\n }\n\n this.defaultRadioValue = this.value;\n\n addFormResetListener(this.host, this.handleFormReset);\n }\n\n private handleFormReset = (): void => {\n this.skipFocus = true;\n this.selected = this.initiallySelected;\n };\n\n @Listen(\"icChange\")\n textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n const textFieldValue = event.detail.value;\n\n if (this.selected) {\n if (textFieldValue !== \"\") {\n this.value = event.detail.value;\n this.icCheck.emit({\n value: this.value,\n });\n this.radioOptionSelect.emit({\n value: this.value,\n });\n } else {\n this.value = this.defaultRadioValue;\n this.icCheck.emit({\n value: this.defaultRadioValue,\n });\n this.radioOptionSelect.emit({\n value: this.defaultRadioValue,\n });\n }\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.value, propName: \"value\" }],\n \"Radio Option\"\n );\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const textfield = this.host.querySelector(\"ic-text-field\");\n if (!this.selected) {\n textfield && textfield.setAttribute(\"disabled\", \"\");\n } else {\n textfield && textfield.removeAttribute(\"disabled\");\n }\n }\n }\n\n disconnectedCallback(): void {\n removeFormResetListener(this.host, this.handleFormReset);\n }\n\n render() {\n const id = `ic-radio-option-${\n this.label !== undefined ? this.label : this.value\n }-${this.groupLabel}`;\n\n return (\n <Host onClick={this.handleClick} class={{ disabled: this.disabled }}>\n <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n <div>\n <input\n role=\"radio\"\n tabindex={this.selected ? \"0\" : \"-1\"}\n type=\"radio\"\n name={this.name}\n id={id}\n value={this.value}\n disabled={this.disabled ? true : null}\n checked={this.selected}\n ref={(el) => (this.radioElement = el)}\n ></input>\n <span class=\"checkmark\"></span>\n </div>\n <ic-typography class=\"radio-label\" variant=\"body\">\n <label htmlFor={id}>{this.label}</label>\n </ic-typography>\n </div>\n\n {this.hasAdditionalField && (\n <div\n onClick={this.swallowClick}\n class={{\n \"dynamic-container\": true,\n hidden:\n this.additionalFieldDisplay === \"dynamic\" && !this.selected,\n }}\n >\n {this.additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {this.additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\">\n <p class=\"dynamic-text\">{this.dynamicText}</p>\n </ic-typography>\n )}\n <div\n class={{\n \"additional-field-wrapper\":\n this.additionalFieldDisplay === \"static\",\n }}\n >\n <slot name=\"additional-field\"></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ic-search-bar.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-90721b3c.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3b144b17.js';
 import { I as IcThemeForegroundEnum } from './types-dd515332.js';
 import { v as handleHiddenFormButtonClick, w as getFilteredMenuOptions, x as getLabelFromValue, a as onComponentRequiredPropUndefined, h as getInputDescribedByText, e as renderHiddenInput } from './helpers-b2b47a7d.js';
@@ -11,7 +11,7 @@ const searchIcon = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
     <path d="M13.1292 11.8792H12.4708L12.2375 11.6542C13.0542 10.7042 13.5458 9.47083 13.5458 8.12916C13.5458 5.13749 11.1208 2.71249 8.12916 2.71249C5.13749 2.71249 2.71249 5.13749 2.71249 8.12916C2.71249 11.1208 5.13749 13.5458 8.12916 13.5458C9.47083 13.5458 10.7042 13.0542 11.6542 12.2375L11.8792 12.4708V13.1292L16.0458 17.2875L17.2875 16.0458L13.1292 11.8792ZM8.12916 11.8792C6.05416 11.8792 4.37916 10.2042 4.37916 8.12916C4.37916 6.05416 6.05416 4.37916 8.12916 4.37916C10.2042 4.37916 11.8792 6.05416 11.8792 8.12916C11.8792 10.2042 10.2042 11.8792 8.12916 11.8792Z" fill="currentColor"/>
 </svg>`;
-const icSearchBarCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.search){--divider-height:1.5rem}:host(.search.small){--divider-height:1rem}:host(.fullwidth){width:100%}:host(.search) .disabled:hover{border-color:var(--ic-architectural-200)}:host(.search.disabled) .disabled svg{color:var(--ic-architectural-200)}:host(.search) .disabled svg{color:var(--ic-architectural-400)}.clear-button-container{align-items:center;margin-right:0.063rem;display:none;visibility:hidden}.clear-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus,.clear-button:active{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow);border-radius:0.25rem}.clear-button:focus,.clear-button:active *{fill:white}.clear-button-visible{visibility:visible;display:flex}.search-submit-button-container{display:flex;align-items:center}.search-submit-button-disabled .ic-tooltip-container{display:none !important}.search-submit-button:focus,.search-submit-button:active{background-color:var(--ic-focus-blue) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow) !important;border-radius:var(--ic-space-xxs)}.search-submit-button:focus,.search-submit-button:active *{fill:white}.divider{width:0.063rem;background-color:var(--ic-action-dark-active);height:var(--divider-height)}:host(.dark) .divider{background-color:var(--ic-architectural-200)}.menu-container{width:var(--input-width, 20rem);position:relative;top:var(--ic-space-xxxs)}.menu-container.fullwidth{width:100%}ic-menu{transition:var(--ic-easing-transition-slow)}.no-results{cursor:not-allowed}.search-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:0.063rem;margin-bottom:-0.063rem;margin-right:-0.063rem;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:0.063rem}";
+const icSearchBarCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.search){--divider-height:1.5rem}:host(.search.small){--divider-height:1rem}:host(.fullwidth){width:100%}:host(.search) .disabled:hover{border-color:var(--ic-architectural-200)}:host(.search.disabled) .disabled svg{color:var(--ic-architectural-200)}:host(.search) .disabled svg{color:var(--ic-architectural-400)}.clear-button-container{align-items:center;margin-right:var(--ic-space-1px);display:none;visibility:hidden}.clear-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus,.clear-button:active{background-color:var(--ic-focus-blue);box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow);border-radius:0.25rem}.clear-button:focus,.clear-button:active *{fill:white}.clear-button-visible{visibility:visible;display:flex}.search-submit-button-container{display:flex;align-items:center}.search-submit-button-disabled .ic-tooltip-container{display:none !important}.search-submit-button:focus,.search-submit-button:active{background-color:var(--ic-focus-blue) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-focus-glow) !important;border-radius:var(--ic-space-xxs)}.search-submit-button:focus,.search-submit-button:active *{fill:white}.divider{width:var(--ic-space-1px);background-color:var(--ic-action-dark-active);height:var(--divider-height)}:host(.dark) .divider{background-color:var(--ic-architectural-200)}.menu-container{width:var(--input-width, 20rem);position:relative;top:var(--ic-space-xxxs)}.menu-container.fullwidth{width:100%}.no-results{cursor:not-allowed}.search-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);margin-bottom:calc(-1 * var(--ic-space-1px));margin-right:calc(-1 * var(--ic-space-1px));overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}";
 let inputIds = 0;
 const SearchBar = class {
@@ -29,12 +29,17 @@ const SearchBar = class {
     this.icSubmitSearchBlur = createEvent(this, "icSubmitSearchBlur", 7);
     this.icSearchBarBlur = createEvent(this, "icSearchBarBlur", 7);
     this.icSearchBarFocus = createEvent(this, "icSearchBarFocus", 7);
+    this.icRetryLoad = createEvent(this, "icRetryLoad", 7);
     this.inputId = `ic-search-bar-input-${inputIds++}`;
     this.menuId = `${this.inputId}-menu`;
     this.menuCloseFromMenuChangeEvent = false;
     this.truncateValue = false;
     this.assistiveHintEl = null;
     this.preventSubmit = false;
+    this.prevNoOption = false;
+    this.hasTimedOut = false;
+    this.preLoad = true;
+    this.retryButtonClick = false;
     this.handleSubmitSearch = () => {
       this.highlightedValue && (this.value = this.highlightedValue);
       this.highlightedValue = undefined;
@@ -50,6 +55,26 @@ const SearchBar = class {
         this.handleSubmitSearch();
       }
     };
+    this.handleRetry = (ev) => {
+      this.retryViaKeyPress = ev.detail.keyPressed === "Enter";
+      this.icRetryLoad.emit({ value: ev.detail.value });
+      this.triggerLoading();
+      this.retryButtonClick = true;
+    };
+    this.triggerLoading = () => {
+      const loadingOption = [
+        { label: this.loadingLabel, value: "", loading: true },
+      ];
+      if (this.filteredOptions !== loadingOption)
+        this.filteredOptions = loadingOption;
+      if (this.timeout) {
+        this.timeoutTimer = window.setTimeout(() => {
+          this.filteredOptions = [
+            { label: this.loadingErrorLabel, value: "", timedOut: true },
+          ];
+        }, this.timeout);
+      }
+    };
     this.onInput = (ev) => {
       this.value = ev.target.value;
       const noOptions = [{ label: this.emptyOptionListText, value: "" }];
@@ -150,13 +175,22 @@ const SearchBar = class {
     };
     this.handleHostBlur = (ev) => {
       const nextFocus = ev.relatedTarget;
-      if (this.open && this.options && nextFocus !== this.menu) {
+      if (this.open &&
+        this.options &&
+        nextFocus !== this.menu &&
+        !this.retryViaKeyPress &&
+        !this.retryButtonClick) {
         this.setMenuChange(false);
       }
+      if (this.retryButtonClick || this.retryViaKeyPress) {
+        this.inputEl.setFocus();
+      }
       this.handleShowClearButton(false);
       this.handleMenuCloseFromMenuChange(false);
       this.handleTruncateValue(true);
       this.icSearchBarBlur.emit({ relatedTarget: nextFocus, value: this.value });
+      this.retryViaKeyPress = false;
+      this.retryButtonClick = false;
     };
     this.handleShowClearButton = (visible) => {
       this.showClearButton = visible;
@@ -196,7 +230,8 @@ const SearchBar = class {
       else if (this.hasOptionsOrFilterDisabled() &&
         this.filteredOptions.length > 0 &&
         this.open &&
-        searchResultsStatusEl) {
+        searchResultsStatusEl &&
+        !this.filteredOptions[0].loading) {
         if (this.hadNoOptions()) {
           searchResultsStatusEl.innerText = this.emptyOptionListText;
         }
@@ -211,14 +246,21 @@ const SearchBar = class {
     this.isSubmitDisabled = () => {
       const valueNotSet = this.value === undefined || this.value === null || this.value === "";
       const valueLengthLess = this.value.length < this.charactersUntilSuggestion;
-      return (valueNotSet || valueLengthLess || this.disabled || this.hadNoOptions());
+      return (valueNotSet ||
+        valueLengthLess ||
+        this.disabled ||
+        this.hadNoOptions() ||
+        this.hasTimedOut ||
+        this.loading);
     };
     this.highlightFirstOptionAfterNoResults = () => {
-      if (this.prevNoOption && this.menu) {
+      if (this.prevNoOption && this.menu && !this.hasTimedOut) {
         this.menu.handleSetFirstOption();
         this.prevNoOption = false;
       }
-      const prevNoOptionsList = this.filteredOptions.find((filteredOption) => filteredOption.label === this.emptyOptionListText);
+      const prevNoOptionsList = this.filteredOptions.find((filteredOption) => filteredOption.label === this.emptyOptionListText ||
+        filteredOption.label === this.loadingErrorLabel ||
+        filteredOption.label === this.loadingLabel);
       if (prevNoOptionsList) {
         this.prevNoOption = true;
       }
@@ -242,6 +284,10 @@ const SearchBar = class {
     this.name = this.inputId;
     this.spellcheck = false;
     this.options = [];
+    this.timeout = undefined;
+    this.loadingLabel = "Loading...";
+    this.loadingErrorLabel = "Loading Error";
+    this.loading = false;
     this.focusOnLoad = false;
     this.hintText = "When autocomplete results are available use the up and down arrows to choose and press enter to select";
     this.emptyOptionListText = "No results found";
@@ -252,11 +298,21 @@ const SearchBar = class {
     this.showClearButton = false;
     this.clearButtonFocused = false;
     this.searchSubmitFocused = false;
-    this.prevNoOption = false;
     this.highlightedValue = undefined;
   }
+  loadingHandler(newValue) {
+    if (newValue && !this.hasTimedOut) {
+      this.preLoad = false;
+      this.triggerLoading();
+    }
+  }
+  filteredOptionsHandler(newOptions) {
+    this.hasTimedOut = newOptions.some((opt) => opt.timedOut);
+  }
   watchOptionsHandler(newOptions) {
-    if (this.disableFilter) {
+    if (this.disableFilter && !this.hasTimedOut) {
+      this.loading = false;
+      clearTimeout(this.timeoutTimer);
       if (newOptions.length > 0) {
         this.filteredOptions = newOptions;
       }
@@ -265,7 +321,11 @@ const SearchBar = class {
           return;
         }
         this.setMenuChange(true);
-        this.filteredOptions = [{ label: this.emptyOptionListText, value: "" }];
+        !this.preLoad &&
+          (this.filteredOptions = [
+            { label: this.emptyOptionListText, value: "" },
+          ]);
+        this.preLoad = true;
       }
     }
     this.debounceAriaLiveUpdate();
@@ -284,6 +344,8 @@ const SearchBar = class {
    * Sets focus on the native `input`.
    */
   async setFocus() {
+    this.retryViaKeyPress = false;
+    this.retryButtonClick = false;
     if (this.inputEl) {
       this.inputEl.setFocus();
     }
@@ -361,6 +423,9 @@ const SearchBar = class {
     const disabledText = disabledMode && !readonly;
     const hasSuggestedSearch = value && this.hasOptionsOrFilterDisabled();
     const menuOpen = hasSuggestedSearch && open && filteredOptions.length > 0;
+    const isOrHasLoaded = this.filteredOptions.length === 1 &&
+      (this.filteredOptions[0].label === this.loadingLabel ||
+        filteredOptions[0].label === this.loadingErrorLabel);
     let expanded;
     if (options.length > 0) {
       if (menuOpen) {
@@ -398,12 +463,14 @@ const SearchBar = class {
         "menu-container": true,
         fullwidth: fullWidth,
       }, slot: "menu" }, menuOpen && value.length >= this.charactersUntilSuggestion && (h("ic-menu", { class: {
-        "no-results": this.hadNoOptions(),
-      }, activationType: "manual", anchorEl: this.anchorEl, autoFocusOnSelected: false, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), small: small, fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, parentEl: this.el, value: value })))), h("div", { "aria-live": "polite", role: "status", class: "search-results-status" })));
+        "no-results": this.hadNoOptions() || isOrHasLoaded,
+      }, activationType: "manual", anchorEl: this.anchorEl, autoFocusOnSelected: false, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), small: small, fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value })))), h("div", { "aria-live": "polite", role: "status", class: "search-results-status" })));
   }
   static get delegatesFocus() { return true; }
   get el() { return getElement(this); }
   static get watchers() { return {
+    "loading": ["loadingHandler"],
+    "filteredOptions": ["filteredOptionsHandler"],
     "options": ["watchOptionsHandler"],
     "value": ["watchValueHandler"]
   }; }