@ukic/web-components 2.35.2 → 3.0.0-alpha.10

package/dist/collection/components/ic-input-validation/ic-input-validation.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-input-validation.js","sourceRoot":"","sources":["../../../src/components/ic-input-validation/ic-input-validation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EACL,mBAAmB,GAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAExD,OAAO,EACL,wBAAwB,EACxB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAG7B,MAAM,IAAI,GAAG;IACX,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;IAC1C,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,SAAS;IACtC,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;CAC3C,CAAC;AAEF;;GAEG;AAKH,MAAM,OAAO,eAAe;;4BAMqB,QAAQ;;yBAU1B,KAAK;;sBAUW,EAAE;;IAE/C,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QAChE,MAAM,EAAE,GAAG,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAC9C,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,MAAM,KAAK,EAAE;gBACjC,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,SAAS;aAC9B;YAEA,WAAW,KAAK,EAAE,IAAI,CACrB,YACE,KAAK,EAAE;oBACL,CAAC,aAAa,CAAC,EAAE,IAAI;oBACrB,CAAC,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,IAAI;iBAC9B,EACD,SAAS,EAAE,WAAW,GACtB,CACH;YAED,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY;gBACjD,yBAAiB,IAAI,CAAC,YAAY,EAAE,EAAE,EAAE,EAAE,IACvC,IAAI,CAAC,OAAO,CACR,CACO;YAEhB,YAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n  getInputValidationTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst icon = {\n  [IcInformationStatus.Warning]: warningIcon,\n  [IcInformationStatus.Error]: errorIcon,\n  [IcInformationStatus.Success]: successIcon,\n};\n\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\n@Component({\n  tag: \"ic-input-validation\",\n  styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n  @Element() el: HTMLIcInputValidationElement;\n\n  /**\n   *  The ARIA live mode to apply to the message.\n   */\n  @Prop() ariaLiveMode: IcAriaLiveModeVariants = \"polite\";\n\n  /**\n   * The ID of the form element the validation is bound to.\n   */\n  @Prop() for: string;\n\n  /**\n   *  If `true`, the input validation will fill the width of the container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * The validation message to display.\n   */\n  @Prop() message!: string;\n\n  /**\n   * The status of the validation - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() status: IcInformationStatusOrEmpty = \"\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.message, propName: \"message\" }],\n      \"Input Validation\"\n    );\n  }\n\n  render() {\n    const displayIcon = this.status !== \"\" ? icon[this.status] : \"\";\n    const id = getInputValidationTextID(this.for);\n    return (\n      <Host\n        class={{\n          [this.status]: this.status !== \"\",\n          [\"fullwidth\"]: this.fullWidth,\n        }}\n      >\n        {displayIcon !== \"\" && (\n          <span\n            class={{\n              [\"status-icon\"]: true,\n              [`icon-${this.status}`]: true,\n            }}\n            innerHTML={displayIcon}\n          />\n        )}\n\n        <ic-typography variant=\"caption\" class=\"statustext\">\n          <span aria-live={this.ariaLiveMode} id={id}>\n            {this.message}\n          </span>\n        </ic-typography>\n\n        <slot name=\"validation-message-adornment\"></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-input-validation.js","sourceRoot":"","sources":["../../../src/components/ic-input-validation/ic-input-validation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EACL,mBAAmB,GAEpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AACxD,OAAO,WAAW,MAAM,+BAA+B,CAAC;AAExD,OAAO,EACL,wBAAwB,EACxB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAG7B,MAAM,IAAI,GAAG;IACX,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;IAC1C,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,SAAS;IACtC,CAAC,mBAAmB,CAAC,OAAO,CAAC,EAAE,WAAW;CAC3C,CAAC;AAEF;;GAEG;AAKH,MAAM,OAAO,eAAe;;4BAMqB,QAAQ;;yBAU1B,KAAK;;sBAUW,EAAE;;IAE/C,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAC1D,MAAM,WAAW,GAAG,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;QACtD,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,CAAC,uBAAuB,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,EAAE;gBAChD,gCAAgC,EAAE,SAAS;aAC5C;YAEA,WAAW,KAAK,EAAE,IAAI,CACrB,YACE,KAAK,EAAE;oBACL,aAAa,EAAE,IAAI;oBACnB,CAAC,QAAQ,MAAM,EAAE,CAAC,EAAE,IAAI;iBACzB,EACD,SAAS,EAAE,WAAW,GACtB,CACH;YAED,qBAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY;gBACjD,yBACa,YAAY,EACvB,EAAE,EAAE,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,IAErC,OAAO,CACH,CACO;YAEhB,YAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n  getInputValidationTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst icon = {\n  [IcInformationStatus.Warning]: warningIcon,\n  [IcInformationStatus.Error]: errorIcon,\n  [IcInformationStatus.Success]: successIcon,\n};\n\n/**\n * @slot validation-message-adornment - Content will be placed to the right of the validation message.\n */\n@Component({\n  tag: \"ic-input-validation\",\n  styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n  @Element() el: HTMLIcInputValidationElement;\n\n  /**\n   *  The ARIA live mode to apply to the message.\n   */\n  @Prop() ariaLiveMode: IcAriaLiveModeVariants = \"polite\";\n\n  /**\n   * The ID of the form element the validation is bound to.\n   */\n  @Prop() for: string;\n\n  /**\n   *  If `true`, the input validation will fill the width of the container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * The validation message to display.\n   */\n  @Prop() message!: string;\n\n  /**\n   * The status of the validation - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() status: IcInformationStatusOrEmpty = \"\";\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.message, propName: \"message\" }],\n      \"Input Validation\"\n    );\n  }\n\n  render() {\n    const { ariaLiveMode, fullWidth, status, message } = this;\n    const displayIcon = status !== \"\" ? icon[status] : \"\";\n    return (\n      <Host\n        class={{\n          [`ic-input-validation-${status}`]: status !== \"\",\n          \"ic-input-validation-full-width\": fullWidth,\n        }}\n      >\n        {displayIcon !== \"\" && (\n          <span\n            class={{\n              \"status-icon\": true,\n              [`icon-${status}`]: true,\n            }}\n            innerHTML={displayIcon}\n          />\n        )}\n\n        <ic-typography variant=\"caption\" class=\"statustext\">\n          <span\n            aria-live={ariaLiveMode}\n            id={getInputValidationTextID(this.for)}\n          >\n            {message}\n          </span>\n        </ic-typography>\n\n        <slot name=\"validation-message-adornment\"></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-input-validation/test/basic/ic-input-validation.spec.js

@@ -22,7 +22,7 @@ describe("ic-input-validation", () => {
             html: `<ic-input-validation for="test-id" message="validation message" status="success"></ic-input-validation>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-validation class="success" for="test-id" message="validation message" status="success">
+    <ic-input-validation class="ic-input-validation-success" for="test-id" message="validation message" status="success">
       <span class="icon-success status-icon">
         svg
       </span>
@@ -40,7 +40,7 @@ describe("ic-input-validation", () => {
             html: `<ic-input-validation for="test-id" message="validation message" status="warning"></ic-input-validation>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-validation class="warning" for="test-id" message="validation message" status="warning">
+    <ic-input-validation class="ic-input-validation-warning" for="test-id" message="validation message" status="warning">
       <span class="icon-warning status-icon">
         svg
       </span>
@@ -58,7 +58,7 @@ describe("ic-input-validation", () => {
             html: `<ic-input-validation for="test-id" message="validation message" status="error"></ic-input-validation>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-validation class="error" for="test-id" message="validation message" status="error">
+    <ic-input-validation class="ic-input-validation-error" for="test-id" message="validation message" status="error">
       <span class="icon-error status-icon">
         svg
       </span>
@@ -76,7 +76,7 @@ describe("ic-input-validation", () => {
             html: `<ic-input-validation for="test-id" message="validation message" full-width=true></ic-input-validation>`,
         });
         expect(page.root).toEqualHtml(`
-    <ic-input-validation for="test-id" class="fullwidth" full-width="true" message="validation message">
+    <ic-input-validation for="test-id" class="ic-input-validation-full-width" full-width="true" message="validation message">
       <ic-typography class="statustext" variant="caption">
         <span aria-live="polite" id="test-id-validation-text">
           validation message

package/dist/collection/components/ic-input-validation/test/basic/ic-input-validation.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-input-validation.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-input-validation/test/basic/ic-input-validation.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,wFAAwF;SAC/F,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,yGAAyG;SAChH,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,yGAAyG;SAChH,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,uGAAuG;SAC9G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,wGAAwG;SAC/G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { InputValidation } from \"../../ic-input-validation\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-validation\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation for=\"test-id\" message=\"validation message\">\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"should render with success status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"success\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"success\" for=\"test-id\" message=\"validation message\" status=\"success\">\n      <span class=\"icon-success status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"should render with warning status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"warning\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"warning\" for=\"test-id\" message=\"validation message\" status=\"warning\">\n      <span class=\"icon-warning status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"should render with error status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"error\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"error\" for=\"test-id\" message=\"validation message\" status=\"error\">\n      <span class=\"icon-error status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"should render with full width\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" full-width=true></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation for=\"test-id\" class=\"fullwidth\" full-width=\"true\" message=\"validation message\">\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"ic-input-validation.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-input-validation/test/basic/ic-input-validation.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,QAAQ,CAAC,qBAAqB,EAAE,GAAG,EAAE;IACnC,EAAE,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC7B,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,wFAAwF;SAC/F,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,yGAAyG;SAChH,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;QACjD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,yGAAyG;SAChH,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAC/C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,uGAAuG;SAC9G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;KAW7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,eAAe,CAAC;YAC7B,IAAI,EAAE,wGAAwG;SAC/G,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { InputValidation } from \"../../ic-input-validation\";\nimport { newSpecPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-input-validation\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation for=\"test-id\" message=\"validation message\">\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"should render with success status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"success\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"ic-input-validation-success\" for=\"test-id\" message=\"validation message\" status=\"success\">\n      <span class=\"icon-success status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"should render with warning status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"warning\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"ic-input-validation-warning\" for=\"test-id\" message=\"validation message\" status=\"warning\">\n      <span class=\"icon-warning status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"should render with error status\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" status=\"error\"></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation class=\"ic-input-validation-error\" for=\"test-id\" message=\"validation message\" status=\"error\">\n      <span class=\"icon-error status-icon\">\n        svg\n      </span>\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n\n  it(\"should render with full width\", async () => {\n    const page = await newSpecPage({\n      components: [InputValidation],\n      html: `<ic-input-validation for=\"test-id\" message=\"validation message\" full-width=true></ic-input-validation>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-input-validation for=\"test-id\" class=\"ic-input-validation-full-width\" full-width=\"true\" message=\"validation message\">\n      <ic-typography class=\"statustext\" variant=\"caption\">\n        <span aria-live=\"polite\" id=\"test-id-validation-text\">\n          validation message\n        </span>\n      </ic-typography>\n    </ic-input-validation>\n    `);\n  });\n});\n"]}

package/dist/collection/components/ic-link/ic-link.css

@@ -441,33 +441,53 @@ video {
 }
 
 
-:host(.link) .ic-link,
-:host(.link) ::slotted(a) {
-  color: var(--ic-hyperlink);
+:host(.ic-link) .link,
+:host(.ic-link) ::slotted(a) {
+  color: var(--ic-link-text);
   text-decoration: underline;
   font-weight: var(--ic-font-weight-bold);
   transition: var(--ic-easing-transition-fast);
 }
 
-:host(.link.dark) .ic-link.dark,
-:host(.link.dark) ::slotted(a) {
-  color: var(--ic-color-primary-text);
+:host(.ic-link) .link:visited,
+:host(.ic-link) ::slotted(a:visited),
+:host(.ic-link) .link:visited:hover,
+:host(.ic-link) ::slotted(a:visited:hover),
+:host(.ic-link) .link:visited:active,
+:host(.ic-link) ::slotted(a:visited:active),
+:host(.ic-link) .link:visited:focus,
+:host(.ic-link) ::slotted(a:visited:focus) {
+  color: var(--ic-link-text-visited);
 }
 
-:host(.link.light) .ic-link.light,
-:host(.link.light) ::slotted(a) {
-  color: var(--ic-color-white-text);
+:host(.ic-link) .link:hover {
+  color: var(--ic-link-text-hover);
 }
 
-:host(.link) .ic-link:visited,
-:host(.link) ::slotted(a:visited) {
-  color: var(--ic-hyperlink-visited);
+:host(.ic-link) .link:active {
+  color: var(--ic-link-text-pressed);
 }
 
-:host(.link) .ic-link:hover,
-:host(.link) .ic-link:focus,
-:host(.link) ::slotted(a:hover),
-:host(.link) ::slotted(a:focus) {
+:host(.ic-link) .link:focus {
+  color: var(--ic-link-text-focused);
+}
+
+:host(.ic-link-monochrome) .link:hover {
+  color: var(--ic-link-text-hover-monochrome);
+}
+
+:host(.ic-link-monochrome) .link:active {
+  color: var(--ic-link-text-pressed-monochrome);
+}
+
+:host(.ic-link-monochrome) .link:focus {
+  color: var(--ic-link-text-focused-monochrome);
+}
+
+:host(.ic-link) .link:hover,
+:host(.ic-link) .link:focus,
+:host(.ic-link) ::slotted(a:hover),
+:host(.ic-link) ::slotted(a:focus) {
   outline: none;
   border-bottom: 0.25rem solid !important;
   margin-bottom: -0.25rem !important;
@@ -475,10 +495,10 @@ video {
 }
 
 @supports (text-underline-offset: 10%) {
-  :host(.link) .ic-link:hover,
-  :host(.link) .ic-link:focus,
-  :host(.link) ::slotted(a:hover),
-  :host(.link) ::slotted(a:focus) {
+  :host(.ic-link) .link:hover,
+  :host(.ic-link) .link:focus,
+  :host(.ic-link) ::slotted(a:hover),
+  :host(.ic-link) ::slotted(a:focus) {
     text-decoration-line: underline;
     text-decoration-thickness: 25%;
     text-underline-offset: 10%;
@@ -487,12 +507,12 @@ video {
   }
 }
 
-:host(.link) .ic-link:active,
-:host(.link) .ic-link:focus:active,
-:host(.link) .ic-link:visited:active,
-:host(.link) ::slotted(a:active),
-:host(.link) ::slotted(a:focus:active),
-:host(.link) ::slotted(a:visited:active) {
+:host(.ic-link) .link:active,
+:host(.ic-link) .link:focus:active,
+:host(.ic-link) .link:visited:active,
+:host(.ic-link) ::slotted(a:active),
+:host(.ic-link) ::slotted(a:focus:active),
+:host(.ic-link) ::slotted(a:visited:active) {
   text-decoration: none;
 }
 
@@ -501,16 +521,8 @@ video {
   margin-left: var(--ic-space-xxs);
 }
 
-.ic-link > .ic-link-open-in-new-icon {
-  fill: var(--ic-hyperlink);
-}
-
-.ic-link.dark > .ic-link-open-in-new-icon {
-  fill: var(--ic-color-primary-text);
-}
-
-.ic-link.light > .ic-link-open-in-new-icon {
-  fill: var(--ic-color-white-text);
+.link > .ic-link-open-in-new-icon {
+  fill: var(--ic-link-icon-launch);
 }
 
 .ic-link-open-in-new-icon > svg {
@@ -519,21 +531,41 @@ video {
   fill: currentcolor;
 }
 
-.ic-link:visited > .ic-link-open-in-new-icon {
-  fill: var(--ic-hyperlink-visited);
+.link:visited > .ic-link-open-in-new-icon {
+  fill: var(--ic-link-icon-launch-visited);
+}
+
+:host(.ic-link-monochrome) .link,
+:host(.ic-link-monochrome) ::slotted(a) {
+  color: var(--ic-link-text-monochrome);
+}
+
+:host(.ic-link-monochrome) .link:visited,
+:host(.ic-link-monochrome) ::slotted(a:visited),
+:host(.ic-link-monochrome) .link:visited:hover,
+:host(.ic-link-monochrome) ::slotted(a:visited:hover),
+:host(.ic-link-monochrome) .link:visited:active,
+:host(.ic-link-monochrome) ::slotted(a:visited:active),
+:host(.ic-link-monochrome) .link:visited:focus,
+:host(.ic-link-monochrome) ::slotted(a:visited:focus) {
+  color: var(--ic-link-text-visited-monochrome);
+}
+
+:host(.ic-link-monochrome) .link > .ic-link-open-in-new-icon {
+  fill: var(--ic-link-icon-launch-monochrome);
 }
 
-.ic-link.light:visited > .ic-link-open-in-new-icon {
-  fill: var(--ic-hyperlink-contrast-visited);
+:host(.ic-link-monochrome) .link:visited > .ic-link-open-in-new-icon {
+  fill: var(--ic-link-icon-launch-visited-monochrome);
 }
 
-:host(.breadcrumb-link) .ic-link {
+:host(.breadcrumb-link) .link {
   display: var(--breadcrumb-link-display);
   align-items: var(--breadcrumb-link-align-items);
   gap: var(--breadcrumb-link-gap);
 }
 
-:host(.breadcrumb-link) .ic-link ::slotted(.back-icon) {
+:host(.breadcrumb-link) .link ::slotted(.back-icon) {
   height: var(--ic-space-lg);
   width: var(--ic-space-lg);
 }
@@ -547,12 +579,12 @@ video {
   align-items: center;
 }
 
-:host(.breadcrumb-link.current-page) .ic-link,
+:host(.breadcrumb-link.current-page) .link,
 :host(.breadcrumb-link.current-page) ::slotted(a:focus) {
   outline: var(--ic-hc-focus-outline);
   text-decoration: none;
 }
 
-:host(.breadcrumb-link.current-page) .ic-link:visited {
-  color: var(--ic-color-primary-text);
+:host(.breadcrumb-link.current-page) .link:visited {
+  color: var(--ic-color-text-primary);
 }

package/dist/collection/components/ic-link/ic-link.js

@@ -1,8 +1,8 @@
 import { h, Host, forceUpdate, } from "@stencil/core";
 import OpenInNew from "../../assets/OpenInNew.svg";
-import { getThemeFromContext, inheritAttributes } from "../../utils/helpers";
+import { getBrandFromContext, inheritAttributes } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
-import { IcThemeForegroundEnum, } from "../../utils/types";
+import { IcBrandForegroundEnum, } from "../../utils/types";
 /**
  * @slot router-item - Handle routing by nesting your routes in this slot.
  */
@@ -24,18 +24,19 @@ export class Link {
                 forceUpdate(this);
             }
         };
-        this.appearance = "default";
         this.download = false;
         this.href = null;
         this.hreflang = undefined;
+        this.monochrome = false;
         this.referrerpolicy = undefined;
         this.rel = undefined;
-        this.showIcon = undefined;
         this.target = undefined;
+        this.theme = "inherit";
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);
         this.updateTheme();
+        this.el.setAttribute("exportparts", "link");
     }
     componentDidLoad() {
         this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
@@ -47,7 +48,7 @@ export class Link {
         var _a;
         (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
-    themeChangeHandler({ detail }) {
+    brandChangeHandler({ detail }) {
         this.updateTheme(detail.mode);
     }
     /**
@@ -57,10 +58,14 @@ export class Link {
         var _a;
         (_a = this.el.shadowRoot.querySelector("a")) === null || _a === void 0 ? void 0 : _a.focus();
     }
-    updateTheme(newTheme = null) {
-        const theme = getThemeFromContext(this.el, newTheme);
-        if (theme !== IcThemeForegroundEnum.Default) {
-            this.appearance = theme;
+    updateTheme(mode = null) {
+        const theme = getBrandFromContext(this.el, mode);
+        if (theme !== IcBrandForegroundEnum.Default) {
+            this.monochrome = true;
+            this.theme =
+                theme === IcBrandForegroundEnum.Light
+                    ? IcBrandForegroundEnum.Dark
+                    : IcBrandForegroundEnum.Light;
         }
     }
     hasRouterSlot() {
@@ -71,11 +76,14 @@ export class Link {
         return !!this.routerSlot;
     }
     render() {
-        const { download, href, hreflang, referrerpolicy, rel, target, showIcon, appearance, } = this;
-        return (h(Host, { class: { ["link"]: true, [`${appearance}`]: true } }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h("a", Object.assign({ class: {
-                ["ic-link"]: href !== null,
-                [`${appearance}`]: href !== null,
-            }, download: download !== false ? download : null, href: href, hrefLang: hreflang, referrerPolicy: referrerpolicy, rel: rel, target: target, tabindex: href !== null ? "0" : "-1" }, this.inheritedAttributes), h("slot", null), (showIcon || target === "_blank") && (h("span", { class: "ic-link-open-in-new-icon", innerHTML: OpenInNew }))))));
+        const { download, href, hreflang, referrerpolicy, rel, target, monochrome, theme, } = this;
+        return (h(Host, { class: {
+                ["ic-link"]: true,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                ["ic-link-monochrome"]: monochrome,
+            } }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h("a", Object.assign({ class: {
+                ["link"]: href !== null,
+            }, download: download !== false ? download : null, href: href, hrefLang: hreflang, referrerPolicy: referrerpolicy, rel: rel, target: target, tabindex: href !== null ? "0" : "-1" }, this.inheritedAttributes, { part: "link" }), h("slot", null), target === "_blank" && (h("span", { class: "ic-link-open-in-new-icon", innerHTML: OpenInNew }))))));
     }
     static get is() { return "ic-link"; }
     static get encapsulation() { return "shadow"; }
@@ -92,30 +100,6 @@ export class Link {
     }
     static get properties() {
         return {
-            "appearance": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "IcThemeForeground",
-                    "resolved": "\"dark\" | \"default\" | \"light\"",
-                    "references": {
-                        "IcThemeForeground": {
-                            "location": "import",
-                            "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcThemeForeground"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The appearance of the link, e.g. dark, light, or default."
-                },
-                "attribute": "appearance",
-                "reflect": false,
-                "defaultValue": "\"default\""
-            },
             "download": {
                 "type": "any",
                 "mutable": false,
@@ -169,6 +153,24 @@ export class Link {
                 "attribute": "hreflang",
                 "reflect": false
             },
+            "monochrome": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the link will display as black in the light theme, and white in the dark theme."
+                },
+                "attribute": "monochrome",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "referrerpolicy": {
                 "type": "string",
                 "mutable": false,
@@ -208,42 +210,46 @@ export class Link {
                 "attribute": "rel",
                 "reflect": false
             },
-            "showIcon": {
-                "type": "boolean",
+            "target": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. The 'open in new tab/window' icon will display automatically if target=\"_blank\"."
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
                 },
-                "attribute": "show-icon",
+                "attribute": "target",
                 "reflect": false
             },
-            "target": {
+            "theme": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe)."
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
-                "attribute": "target",
-                "reflect": false
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
             }
         };
     }
@@ -271,8 +277,8 @@ export class Link {
     static get elementRef() { return "el"; }
     static get listeners() {
         return [{
-                "name": "themeChange",
-                "method": "themeChangeHandler",
+                "name": "brandChange",
+                "method": "brandChangeHandler",
                 "target": "document",
                 "capture": false,
                 "passive": false

package/dist/collection/components/ic-link/ic-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-link.js","sourceRoot":"","sources":["../../../src/components/ic-link/ic-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Prop,\n  h,\n  Host,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getThemeFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n\n@Component({\n  tag: \"ic-link\",\n  styleUrl: \"ic-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Link {\n  private inheritedAttributes: { [k: string]: string } = {};\n  private routerSlot: HTMLElement;\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcLinkElement;\n\n  /**\n   * The appearance of the link, e.g. dark, light, or default.\n   */\n  @Prop({ mutable: true }) appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * @deprecated This prop should not be used anymore. The 'open in new tab/window' icon will display automatically if target=\"_blank\".\n   */\n  @Prop() showIcon?: boolean;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);\n    this.updateTheme();\n  }\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler({ detail }: CustomEvent<IcTheme>): void {\n    this.updateTheme(detail.mode);\n  }\n\n  /**\n   * Sets focus on the link.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector(\"a\")?.focus();\n  }\n\n  private updateTheme(newTheme: IcThemeForeground = null): void {\n    const theme = getThemeFromContext(this.el, newTheme);\n\n    if (theme !== IcThemeForegroundEnum.Default) {\n      this.appearance = theme;\n    }\n  }\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (IC_INHERITED_ARIA.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      download,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      showIcon,\n      appearance,\n    } = this;\n\n    return (\n      <Host class={{ [\"link\"]: true, [`${appearance}`]: true }}>\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\"></slot>\n        ) : (\n          <a\n            class={{\n              [\"ic-link\"]: href !== null,\n              [`${appearance}`]: href !== null,\n            }}\n            download={download !== false ? download : null}\n            href={href}\n            hrefLang={hreflang}\n            referrerPolicy={referrerpolicy}\n            rel={rel}\n            target={target}\n            tabindex={href !== null ? \"0\" : \"-1\"}\n            {...this.inheritedAttributes}\n          >\n            <slot />\n            {(showIcon || target === \"_blank\") && (\n              <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n            )}\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-link.js","sourceRoot":"","sources":["../../../src/components/ic-link/ic-link.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Prop,\n  h,\n  Host,\n  Listen,\n  Method,\n  forceUpdate,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getBrandFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcBrand,\n  IcBrandForeground,\n  IcBrandForegroundEnum,\n  IcThemeMode,\n} from \"../../utils/types\";\n\n/**\n * @slot router-item - Handle routing by nesting your routes in this slot.\n */\n\n@Component({\n  tag: \"ic-link\",\n  styleUrl: \"ic-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Link {\n  private inheritedAttributes: { [k: string]: string } = {};\n  private routerSlot: HTMLElement;\n  private hostMutationObserver: MutationObserver = null;\n\n  @Element() el: HTMLIcLinkElement;\n\n  /**\n   * If `true`, the user can save the linked URL instead of navigating to it.\n   */\n  @Prop() download?: string | boolean = false;\n\n  /**\n   * The URL that the link points to.\n   */\n  @Prop() href?: string = null;\n\n  /**\n   * The human language of the linked URL.\n   */\n  @Prop() hreflang?: string;\n\n  /**\n   * If `true`, the link will display as black in the light theme, and white in the dark theme.\n   */\n  @Prop({ mutable: true }) monochrome?: boolean = false;\n\n  /**\n   * How much of the referrer to send when following the link.\n   */\n  @Prop() referrerpolicy?: ReferrerPolicy;\n\n  /**\n   * The relationship of the linked URL as space-separated link types.\n   */\n  @Prop() rel?: string;\n\n  /**\n   * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n   */\n  @Prop() target?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop({ mutable: true }) theme?: IcThemeMode = \"inherit\";\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.el, IC_INHERITED_ARIA);\n    this.updateTheme();\n    this.el.setAttribute(\"exportparts\", \"link\");\n  }\n\n  componentDidLoad(): void {\n    this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n    this.hostMutationObserver.observe(this.el, {\n      attributes: true,\n    });\n  }\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  @Listen(\"brandChange\", { target: \"document\" })\n  brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n    this.updateTheme(detail.mode);\n  }\n\n  /**\n   * Sets focus on the link.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector(\"a\")?.focus();\n  }\n\n  private updateTheme(mode: IcBrandForeground = null): void {\n    const theme = getBrandFromContext(this.el, mode);\n\n    if (theme !== IcBrandForegroundEnum.Default) {\n      this.monochrome = true;\n      this.theme =\n        theme === IcBrandForegroundEnum.Light\n          ? IcBrandForegroundEnum.Dark\n          : IcBrandForegroundEnum.Light;\n    }\n  }\n\n  private hasRouterSlot(): boolean {\n    this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n    if (this.routerSlot) {\n      this.routerSlot.ariaLabel = this.routerSlot.textContent;\n    }\n    return !!this.routerSlot;\n  }\n\n  // triggered when attributes of host element change\n  private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n    let forceComponentUpdate = false;\n    mutationList.forEach(({ attributeName }) => {\n      if (IC_INHERITED_ARIA.includes(attributeName)) {\n        this.inheritedAttributes[attributeName] =\n          this.el.getAttribute(attributeName);\n        forceComponentUpdate = true;\n      }\n    });\n    if (forceComponentUpdate) {\n      forceUpdate(this);\n    }\n  };\n\n  render() {\n    const {\n      download,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      monochrome,\n      theme,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"ic-link\"]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-link-monochrome\"]: monochrome,\n        }}\n      >\n        {this.hasRouterSlot() ? (\n          <slot name=\"router-item\"></slot>\n        ) : (\n          <a\n            class={{\n              [\"link\"]: href !== null,\n            }}\n            download={download !== false ? download : null}\n            href={href}\n            hrefLang={hreflang}\n            referrerPolicy={referrerpolicy}\n            rel={rel}\n            target={target}\n            tabindex={href !== null ? \"0\" : \"-1\"}\n            {...this.inheritedAttributes}\n            part=\"link\"\n          >\n            <slot />\n            {target === \"_blank\" && (\n              <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n            )}\n          </a>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-link/ic-link.stories.js

@@ -1,9 +1,10 @@
 import { html } from "lit-html";
 
 const defaultArgs = {
-  appearance: "default",
   href: "/",
   target: "",
+  monochrome: false,
+  theme: "inherit",
 };
 
 export default {
@@ -32,7 +33,8 @@ export const Default = {
 };
 
 export const WithIcon = {
-  render: () => html`<ic-link href="/" show-icon>This is a link</ic-link>`,
+  render: () =>
+    html`<ic-link href="/" target="_blank">This is a link</ic-link>`,
   name: "With icon",
 
   parameters: {
@@ -49,63 +51,32 @@ export const DownloadLink = {
   },
 };
 
-export const Dark = {
-  render: () =>
-    html`<ic-link href="/" appearance="dark" target="_blank"
-      >This is a link</ic-link
-    >`,
-
-  name: "Dark",
-
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export const Light = {
-  render: () =>
-    html` <ic-link href="/" appearance="light" show-icon
-      >This is a link</ic-link
-    >`,
-
-  name: "Light",
-
-  parameters: {
-    backgrounds: {
-      default: "dark",
-    },
-  },
-};
-
 export const Playground = {
   render: (args) =>
-    html` <div
-      style="background-color: ${args.appearance == "light" ? "black" : ""}"
-    >
-      <ic-link
-        href=${args.href}
-        appearance=${args.appearance}
-        target=${args.target}
-        >This is a link</ic-link
-      >
-    </div>`,
+    html` <ic-link
+      href=${args.href}
+      target=${args.target}
+      monochrome=${args.monochrome}
+      theme=${args.theme}
+      >This is a link</ic-link
+    >`,
 
   args: defaultArgs,
 
   argTypes: {
-    appearance: {
-      options: ["default", "light", "dark"],
+    target: {
+      options: ["_blank", "_self", "_parent", "_top", ""],
 
       control: {
         type: "radio",
       },
     },
 
-    target: {
-      options: ["_blank", "_self", "_parent", "_top", ""],
+    theme: {
+      options: ["inherit", "light", "dark"],
 
       control: {
-        type: "radio",
+        type: "inline-radio",
       },
     },
   },