@ukic/web-components 2.1.0-beta.1 → 2.1.0-beta.10

package/dist/collection/components/ic-radio-option/ic-radio-option.css

@@ -444,17 +444,12 @@ video {
 :host {
   display: flex;
   flex-direction: column;
-  margin-bottom: var(--ic-space-sm);
   width: -moz-fit-content;
   width: fit-content;
 }
 
-:host([small]) {
-  margin-bottom: 10px;
-}
-
-:host([additional-field-display="static"]) ::slotted(ic-textfield) {
-  margin-top: var(--ic-space-xs);
+:host([additional-field-display="static"]) ::slotted(ic-text-field) {
+  margin-top: calc(var(--ic-space-sm) / 2);
   margin-left: var(--ic-space-xl);
 }
 
@@ -472,11 +467,12 @@ video {
 
 /* The container */
 .container {
-  display: inline-flex;
+  display: grid;
+  grid-template-columns: min-content auto;
   position: relative;
   cursor: pointer;
   align-items: center;
-  margin-left: var(--ic-space-xxs);
+  margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);
 }
 
 .container.disabled,
@@ -492,8 +488,6 @@ video {
   display: inline-block;
   position: absolute;
   cursor: pointer;
-  top: 0;
-  left: 0;
   height: var(--ic-space-lg);
   width: var(--ic-space-lg);
   border-radius: 50%;
@@ -506,13 +500,13 @@ video {
   position: relative;
   top: 0;
   left: 0;
-  height: 20px;
-  width: 20px;
+  height: var(--ic-space-lg);
+  width: var(--ic-space-lg);
   background-color: transparent;
-  border: 1px solid #a7acb3;
+  border: 0.063rem solid #a7acb3;
   border-radius: 50%;
   transition: var(--ic-easing-transition-fast);
-  margin: 0 1px;
+  box-sizing: border-box;
 }
 
 /* Show the indicator (dot/circle) when checked */
@@ -523,22 +517,22 @@ video {
 /* On mouse-over, add a light blue background color */
 .container:hover input ~ .checkmark {
   background-color: var(--ic-action-default-bg-hover);
-  box-shadow: 0 0 0 4px var(--ic-action-default-bg-hover);
-  border: 1px solid var(--ic-action-default);
+  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);
+  border: 0.063rem solid var(--ic-action-default);
 }
 
 /* When pressed, adds the active colours */
 .container:active input ~ .checkmark {
   background-color: var(--ic-action-default-bg-active);
-  border: 1px solid var(--ic-action-default-active);
-  box-shadow: 0 0 0 4px 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);
 }
 
 /* When pressed, adds the active colours */
 .container:active input:checked ~ .checkmark {
   background-color: var(--ic-action-default-bg-active);
-  border: 2px solid var(--ic-action-default-active);
-  box-shadow: 0 0 0 4px 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);
 }
 
 /* When pressed and selected, adds the active colours */
@@ -548,19 +542,18 @@ video {
 
 /* When the radio button is checked */
 .container input:checked ~ .checkmark {
-  border: 2px solid var(--ic-action-default);
-  margin: 0;
+  border: 0.125rem solid var(--ic-action-default);
 }
 
 /* When the radio button is checked and disabled */
 .container input:checked:disabled ~ .checkmark {
   background-color: transparent;
-  border: 2px solid var(--ic-architectural-200);
+  border: 0.125rem solid var(--ic-architectural-200);
 }
 
 /* When the radio button is disabled */
 .container input:disabled ~ .checkmark {
-  border: 1px dashed var(--ic-architectural-200);
+  border: 0.063rem dashed var(--ic-architectural-200);
 }
 
 /* When the radio button is disabled */
@@ -572,7 +565,7 @@ video {
 .container:hover input:disabled ~ .checkmark {
   background-color: transparent;
   box-shadow: none;
-  border: 2px solid none;
+  border: 0.125rem solid none;
 }
 
 .container:active input:disabled ~ .checkmark::after {
@@ -584,22 +577,20 @@ video {
   content: "";
   position: absolute;
   display: none;
-  top: 2px;
-  left: 2px;
-  width: 16px;
-  height: 16px;
+  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 {
-  font-size: 16px;
-  font-weight: 400;
-  margin-left: var(--ic-space-sm);
+  margin-left: var(--ic-space-md);
 }
 
-.addition-field-wrapper {
-  margin-left: 44px;
+.additional-field-wrapper {
+  margin-left: var(--ic-space-xs);
 }
 
 /* The line */
@@ -607,18 +598,17 @@ video {
   color: var(--ic-action-default);
   height: var(--ic-space-md);
   width: var(--ic-space-xl);
-  border-radius: 0 0 0 3px;
-  border-bottom: 2px solid var(--ic-action-default);
-  border-left: 2px solid var(--ic-action-default);
-  margin-left: -1px;
+  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;
 }
 
 /* The dynamic container */
 .dynamic-container {
   display: flex;
   position: relative;
-  margin-left: var(--ic-space-md);
-  margin-top: 6px;
+  margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);
   gap: var(--ic-space-xs);
 }
 
@@ -628,7 +618,7 @@ video {
 
 .dynamic-text {
   color: var(--ic-action-default);
-  margin-top: 5px;
+  margin-top: calc(var(--ic-space-sm) / 2);
   margin-bottom: var(--ic-space-xs);
   border-radius: 2%;
 }

package/dist/collection/components/ic-radio-option/ic-radio-option.js

@@ -15,6 +15,9 @@ export class RadioOption {
           this.value =
             textfield.value !== "" ? textfield.value : this.defaultRadioValue;
         }
+        this.icCheck.emit({
+          value: this.value,
+        });
         this.radioOptionSelect.emit({
           value: this.value,
         });
@@ -43,6 +46,14 @@ export class RadioOption {
       this.handleClick();
     }
   }
+  /**
+   * Sets focus on the radio option.
+   */
+  async setFocus() {
+    if (this.host.shadowRoot.querySelector("input")) {
+      this.host.shadowRoot.querySelector("input").focus();
+    }
+  }
   componentWillLoad() {
     const additonalFieldContent = getSlotContent(this.host, "additional-field");
     if (additonalFieldContent !== null) {
@@ -61,12 +72,18 @@ export class RadioOption {
     if (this.selected) {
       if (textFieldValue !== "") {
         this.value = event.detail.value;
+        this.icCheck.emit({
+          value: this.value,
+        });
         this.radioOptionSelect.emit({
           value: this.value,
         });
       }
       else {
         this.value = this.defaultRadioValue;
+        this.icCheck.emit({
+          value: this.defaultRadioValue,
+        });
         this.radioOptionSelect.emit({
           value: this.defaultRadioValue,
         });
@@ -92,15 +109,16 @@ export class RadioOption {
   }
   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("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 }, 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: {
-        "addition-field-wrapper": this.additionalFieldDisplay === "static",
+        "additional-field-wrapper": this.additionalFieldDisplay === "static",
       } }, h("slot", { name: "additional-field" })))))));
   }
   static get is() { return "ic-radio-option"; }
   static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
   static get originalStyleUrls() {
     return {
       "$": ["ic-radio-option.css"]
@@ -125,7 +143,7 @@ export class RadioOption {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Determines whether the radio should be in selected state."
+          "text": "If `true`, the radio option will be displayed in a selected state."
         },
         "attribute": "selected",
         "reflect": true,
@@ -143,7 +161,7 @@ export class RadioOption {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Determines whether the radio should be in disabled state."
+          "text": "If `true`, the disabled state will be set."
         },
         "attribute": "disabled",
         "reflect": false,
@@ -161,7 +179,7 @@ export class RadioOption {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Provide a label for the input."
+          "text": "The label for the radio option."
         },
         "attribute": "label",
         "reflect": false
@@ -178,7 +196,7 @@ export class RadioOption {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide a value for the input."
+          "text": "The value for the radio option."
         },
         "attribute": "value",
         "reflect": false
@@ -195,7 +213,7 @@ export class RadioOption {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide a name for the input."
+          "text": "The name for the radio option."
         },
         "attribute": "name",
         "reflect": false
@@ -212,7 +230,7 @@ export class RadioOption {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide a group label for the input."
+          "text": "The group label for the radio option."
         },
         "attribute": "group-label",
         "reflect": false
@@ -229,7 +247,7 @@ export class RadioOption {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide a text prop for the dynamic text."
+          "text": "The text to be displayed when dynamic."
         },
         "attribute": "dynamic-text",
         "reflect": false,
@@ -252,7 +270,7 @@ export class RadioOption {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Determines type of additional text field in relation to radio option"
+          "text": "The style of additionalField that will be displayed if used."
         },
         "attribute": "additional-field-display",
         "reflect": true,
@@ -267,23 +285,31 @@ export class RadioOption {
   }
   static get events() {
     return [{
-        "method": "icCheck",
-        "name": "icCheck",
+        "method": "radioOptionSelect",
+        "name": "radioOptionSelect",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
         "docs": {
-          "tags": [],
-          "text": "Emitted when radio is checked"
+          "tags": [{
+              "name": "deprecated",
+              "text": "This event should not be used anymore. Use icCheck instead."
+            }],
+          "text": ""
         },
         "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
+          "original": "IcValueEventDetail",
+          "resolved": "IcValueEventDetail",
+          "references": {
+            "IcValueEventDetail": {
+              "location": "import",
+              "path": "../../interface"
+            }
+          }
         }
       }, {
-        "method": "radioOptionSelect",
-        "name": "radioOptionSelect",
+        "method": "icCheck",
+        "name": "icCheck",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -303,6 +329,26 @@ export class RadioOption {
         }
       }];
   }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the radio option.",
+          "tags": []
+        }
+      }
+    };
+  }
   static get elementRef() { return "host"; }
   static get watchers() {
     return [{

package/dist/collection/components/ic-radio-option/ic-radio-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-radio-option.js","sourceRoot":"","sources":["../../../src/components/ic-radio-option/ic-radio-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  State,\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: true,\n})\nexport class RadioOption {\n  private radioElement: HTMLInputElement;\n  /**\n   * Determines whether the radio should be in selected state.\n   */\n  @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n  /**\n   * Determines whether the radio should be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label?: string;\n  /**\n   * Provide a value for the input.\n   */\n  @Prop({ mutable: true }) value!: string;\n  /**\n   * Provide a name for the input.\n   */\n  @Prop() name: string;\n  /**\n   * Provide a group label for the input.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * Provide a text prop for the dynamic text.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /** Determines type of additional text field in relation to radio option */\n\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  @State() initiallySelected = this.selected;\n\n  @Element() host: HTMLIcRadioOptionElement;\n\n  /**\n   * Emitted when radio is checked\n   */\n  @Event() icCheck!: EventEmitter<void>;\n\n  /**\n   * Emitted when a radio is selected.\n   */\n  @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n  @Watch(\"selected\")\n  selectedChangeHandler(selected: boolean): void {\n    if (selected) {\n      this.handleClick();\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.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.radioOptionSelect.emit({\n          value: this.value,\n        });\n      } else {\n        this.value = this.defaultRadioValue;\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          <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          <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                  \"addition-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,"file":"ic-radio-option.js","sourceRoot":"","sources":["../../../src/components/ic-radio-option/ic-radio-option.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,MAAM,EACN,KAAK,EACL,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AAEvB,OAAO,EACL,cAAc,EACd,gCAAgC,EAChC,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,qBAAqB,CAAC;AAS7B,MAAM,OAAO,WAAW;;IAoEd,sBAAiB,GAAW,EAAE,CAAC;IAC/B,cAAS,GAAG,KAAK,CAAC;IAElB,gBAAW,GAAG,GAAG,EAAE;MACzB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE;UAC5B,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;SAC3B;QACD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QAEvB,IAAI,IAAI,CAAC,kBAAkB,EAAE;UAC3B,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;UAC3D,IAAI,CAAC,KAAK;YACR,SAAS,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC;SACrE;QAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;UAChB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;QAEH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;UAC1B,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;OACJ;IACH,CAAC,CAAC;IAEM,iBAAY,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC3C,KAAK,CAAC,eAAe,EAAE,CAAC;IAC1B,CAAC,CAAC;IAEM,uBAAkB,GAAY,KAAK,CAAC;IAkBpC,oBAAe,GAAG,GAAS,EAAE;MACnC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;MACtB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC;IACzC,CAAC,CAAC;oBAlH2D,KAAK;oBAIrC,KAAK;;;;;uBAoBJ,4CAA4C;kCAMxE,QAAQ;6BAEmB,IAAI,CAAC,QAAQ;;EAe1C,qBAAqB,CAAC,QAAiB;IACrC,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;EACH,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE;MAC/C,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC;KACrD;EACH,CAAC;EAiCD,iBAAiB;IACf,MAAM,qBAAqB,GAAG,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,kBAAkB,CAAC,CAAC;IAE5E,IAAI,qBAAqB,KAAK,IAAI,EAAE;MAClC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;MAC/B,MAAM,OAAO,GAAG,qBAAqB,CAAC,CAAC,CAAgB,CAAC;MACxD,IAAI,OAAO,CAAC,OAAO,KAAK,eAAe,EAAE;QACvC,MAAM,SAAS,GAAG,OAAiC,CAAC;QACpD,SAAS,CAAC,WAAW,GAAG,KAAK,CAAC;OAC/B;KACF;IAED,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC;IAEpC,oBAAoB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;EACxD,CAAC;EAQD,qBAAqB,CAAC,KAAqC;IACzD,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IAE1C,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,cAAc,KAAK,EAAE,EAAE;QACzB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAChC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;UAChB,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;UAC1B,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC;OACJ;WAAM;QACL,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,iBAAiB,CAAC;QACpC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;UAChB,KAAK,EAAE,IAAI,CAAC,iBAAiB;SAC9B,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;UAC1B,KAAK,EAAE,IAAI,CAAC,iBAAiB;SAC9B,CAAC,CAAC;OACJ;KACF;EACH,CAAC;EAED,gBAAgB;IACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,cAAc,CACf,CAAC;EACJ,CAAC;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,sBAAsB,KAAK,QAAQ,EAAE;MAC5C,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;MAC3D,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;QAClB,SAAS,IAAI,SAAS,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;OACrD;WAAM;QACL,SAAS,IAAI,SAAS,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;OACpD;KACF;EACH,CAAC;EAED,oBAAoB;IAClB,uBAAuB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;EAC3D,CAAC;EAED,MAAM;IACJ,MAAM,EAAE,GAAG,mBACT,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAC/C,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;IAEtB,OAAO,CACL,EAAC,IAAI,IAAC,OAAO,EAAE,IAAI,CAAC,WAAW;MAC7B,WAAK,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,QAAQ,EAAE;QAC9D;UACE,aACE,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,EACpC,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EACrC,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,GAC9B;UACT,YAAM,KAAK,EAAC,WAAW,GAAQ,CAC3B;QACN,qBAAe,KAAK,EAAC,aAAa,EAAC,OAAO,EAAC,MAAM;UAC/C,aAAO,OAAO,EAAE,EAAE,IAAG,IAAI,CAAC,KAAK,CAAS,CAC1B,CACZ;MAEL,IAAI,CAAC,kBAAkB,IAAI,CAC1B,WACE,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,KAAK,EAAE;UACL,mBAAmB,EAAE,IAAI;UACzB,MAAM,EACJ,IAAI,CAAC,sBAAsB,KAAK,SAAS,IAAI,CAAC,IAAI,CAAC,QAAQ;SAC9D;QAEA,IAAI,CAAC,sBAAsB,KAAK,SAAS,IAAI,CAC5C,WAAK,KAAK,EAAC,eAAe,GAAO,CAClC;QACD;UACG,IAAI,CAAC,sBAAsB,KAAK,SAAS,IAAI,CAC5C,qBAAe,OAAO,EAAC,SAAS;YAC9B,SAAG,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,WAAW,CAAK,CAChC,CACjB;UACD,WACE,KAAK,EAAE;cACL,0BAA0B,EACxB,IAAI,CAAC,sBAAsB,KAAK,QAAQ;aAC3C;YAED,YAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,CACF,CACF,CACP,CACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/ic-search-bar/ic-search-bar.css

@@ -441,12 +441,16 @@ video {
 }
 
 
+/**
+ * @prop --ic-z-index-menu: z-index of search bar menu
+ */
+
 :host(.search) {
-  --divider-height: 24px;
+  --divider-height: 1.5rem;
 }
 
 :host(.search.small) {
-  --divider-height: 16px;
+  --divider-height: 1rem;
 }
 
 :host(.fullwidth) {
@@ -469,7 +473,7 @@ video {
 
 .clear-button-container {
   align-items: center;
-  margin-right: 1px;
+  margin-right: 0.063rem;
   display: none;
   visibility: hidden;
 }
@@ -480,13 +484,15 @@ video {
     border-radius var(--ic-easing-transition);
 }
 
-.clear-button:focus {
+.clear-button:focus,
+.clear-button:active {
   background-color: var(--ic-focus-blue);
-  box-shadow: inset 0 0 0 2px var(--ic-focus-glow);
-  border-radius: 4px;
+  box-shadow: inset 0 0 0 0.125rem var(--ic-focus-glow);
+  border-radius: 0.25rem;
 }
 
-.clear-button:focus * {
+.clear-button:focus,
+.clear-button:active * {
   fill: white;
 }
 
@@ -504,20 +510,20 @@ video {
   display: none !important;
 }
 
-.search-submit-button:focus {
+.search-submit-button:focus,
+.search-submit-button:active {
   background-color: var(--ic-focus-blue) !important;
-  box-shadow: inset 0 0 0 2px var(--ic-focus-glow) !important;
+  box-shadow: inset 0 0 0 0.125rem var(--ic-focus-glow) !important;
   border-radius: var(--ic-space-xxs);
-  height: var(--ic-space-xl);
-  margin-top: var(--ic-space-xxxs);
 }
 
-.search-submit-button:focus * {
+.search-submit-button:focus,
+.search-submit-button:active * {
   fill: white;
 }
 
 .divider {
-  width: 1px;
+  width: 0.063rem;
   background-color: var(--ic-action-dark-active);
   height: var(--divider-height);
 }
@@ -527,7 +533,7 @@ video {
 }
 
 .menu-container {
-  width: var(--input-width, 320px);
+  width: var(--input-width, 20rem);
   position: relative;
   top: var(--ic-space-xxxs);
 }
@@ -547,12 +553,12 @@ ic-menu {
 .search-results-status {
   border: 0;
   clip: rect(0, 0, 0, 0, 0);
-  height: 1px;
-  margin-bottom: -1px;
-  margin-right: -1px;
+  height: 0.063rem;
+  margin-bottom: -0.063rem;
+  margin-right: -0.063rem;
   overflow: hidden;
   padding: 0;
   position: absolute;
   white-space: nowrap;
-  width: 1px;
+  width: 0.063rem;
 }