@ukic/canary-web-components 2.0.0-canary.3 → 2.0.0-canary.5

package/dist/core/p-ed35b2d0.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icFooterLinkCss","FooterLink","DEVICE_SIZES","XL","small","grouped","getThemeForegroundColor","componentWillLoad","this","footerConfig","inferConfig","el","footerResizeHandler","footerThemeChangeHandler","ev","theme","detail","foregroundColor","mode","e","parentElement","classList","contains","render","href","hreflang","referrerpolicy","rel","target","download","h","Host","class","referrerPolicy","innerHTML","OpenInNew"],"sources":["src/components/ic-footer-link/ic-footer-link.css?tag=ic-footer-link&encapsulation=shadow","src/components/ic-footer-link/ic-footer-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.footer-link-ungrouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 2.5rem;\n  --footer-link-margin-bottom: 0;\n}\n\n:host(.footer-link-ungrouped-small) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-sparse) {\n  --footer-link-margin-left: 0;\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link-grouped-small) {\n  --footer-link-margin-left: var(--ic-space-md);\n  --footer-link-margin-right: 0;\n  --footer-link-margin-bottom: var(--ic-space-md);\n}\n\n:host(.footer-link) {\n  margin-left: var(--footer-link-margin-left);\n  margin-right: var(--footer-link-margin-right);\n  margin-bottom: var(--footer-link-margin-bottom);\n}\n\n/* Link styling */\n\n:host(.footer-link) a,\n:host(.footer-link) a ::slotted(a) {\n  display: flex;\n  align-items: flex-end;\n  font-weight: var(--ic-font-weight-bold);\n  color: inherit;\n  width: fit-content;\n  font-size: var(--ic-font-size-regular);\n}\n\n:host(.footer-link) a:link,\n:host(.footer-link) a ::slotted(a:link) {\n  color: inherit;\n  text-decoration: underline;\n  font-weight: var(--ic-font-weight-bold);\n}\n\n:host(.footer-link) a:link > ::slotted(svg),\n:host(.footer-link) a:link > ::slotted(img),\n:host(.footer-link) a ::slotted(a:link > ::slotted(svg)),\n:host(.footer-link) a ::slotted(a:link > ::slotted(img)) {\n  padding: var(--ic-space-xxxs);\n  pointer-events: none;\n  transition: var(--ic-easing-transition-fast);\n}\n\n/*\nThere's an apparent defect in Chrome that means this isn't always re-rendered if changed.\nNot an issue in Safari. Line 73-79 implement the same function but less clean.\n\na:link > ::slotted(svg) ,\na:link:visited > ::slotted(svg) {\n  fill: var(--ic-theme-text);\n}\n*/\n\n:host(.footer-link-light) ::slotted(svg) {\n  fill: var(--ic-architectural-white);\n}\n\n:host(.footer-link-dark) ::slotted(svg) {\n  fill: var(--ic-architectural-black);\n}\n\n:host(.footer-link) a:link:hover,\n:host(.footer-link) a:link:focus,\n:host(.footer-link) a ::slotted(a:link:hover),\n:host(.footer-link) a ::slotted(a:link:focus) {\n  border-bottom: 0.25rem solid !important;\n  margin-bottom: -0.25rem !important;\n  text-decoration: none;\n}\n\n@supports (text-decoration-thickness: 25%) {\n  :host(.footer-link) a:link:hover,\n  :host(.footer-link) a:link:focus,\n  :host(.footer-link) a ::slotted(a:link:hover),\n  :host(.footer-link) a ::slotted(a:link:focus) {\n    text-decoration-line: underline;\n    text-decoration-thickness: 25%;\n    text-underline-offset: 25%;\n    border-bottom: 0 !important;\n    margin-bottom: 0 !important;\n  }\n}\n\n:host(.footer-link) a:link:hover,\n:host(.footer-link) a ::slotted(a:link:hover) {\n  outline: none;\n}\n\n:host(.footer-link) a:link:focus,\n:host(.footer-link) a ::slotted(a:link:focus) {\n  outline: var(--ic-hc-focus-outline);\n}\n\n:host(.footer-link) a:link:focus > ::slotted(svg),\n:host(.footer-link) a:link:focus > ::slotted(img),\n:host(.footer-link) a ::slotted(a:link:focus > ::slotted(svg)),\n:host(.footer-link) a ::slotted(a:link:focus > ::slotted(img)) {\n  box-shadow: var(--ic-border-focus);\n  border-radius: var(--ic-border-radius);\n}\n\n:host(.footer-link) a:focus,\n:host(.footer-link) a ::slotted(a:focus) {\n  border-radius: var(--ic-border-radius);\n  outline: var(--ic-hc-focus-outline);\n  transition: var(--ic-transition-duration-fast);\n}\n\n:host(.footer-link) a:link:active,\n:host(.footer-link) a:link:focus:active,\n:host(.footer-link) a:link:visited:active,\n:host(.footer-link) a ::slotted(a:link:active),\n:host(.footer-link) a ::slotted(a:link:focus:active),\n:host(.footer-link) a ::slotted(a:link:visited:active) {\n  color: inherit;\n  text-decoration: none;\n}\n\n:host(.footer-link) a:hover,\n:host(.footer-link) a ::slotted(a:hover) {\n  text-decoration: none;\n}\n\n.open-in-new-icon {\n  padding-left: var(--ic-space-xxs);\n}\n\n.open-in-new-icon,\n.open-in-new-icon svg {\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n:host(.footer-link-light) .open-in-new-icon svg {\n  fill: var(--ic-architectural-white);\n}\n\n:host(.footer-link-dark) .open-in-new-icon svg {\n  fill: var(--ic-architectural-black);\n}\n\n@media screen and (min-width: 769px) {\n  :host(.footer-link.footer-link-ungrouped-sparse:last-of-type) {\n    margin-right: 0;\n  }\n}\n\n@media (forced-colors: active) {\n  :host(.footer-link-light) ::slotted(svg),\n  :host(.footer-link-dark) ::slotted(svg) {\n    fill: currentcolor;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Listen,\n  Prop,\n  h,\n  State,\n} from \"@stencil/core\";\nimport { DEVICE_SIZES, getThemeForegroundColor } from \"../../utils/helpers\";\nimport { IcTheme, IcThemeForeground } from \"../../utils/types\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\n\ntype FooterConfig = { small: boolean; grouped: boolean };\n\n@Component({\n  tag: \"ic-footer-link\",\n  styleUrl: \"ic-footer-link.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class FooterLink {\n  @Element() el: HTMLIcFooterLinkElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() footerConfig: FooterConfig = { small: false, grouped: false };\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\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   * 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.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"footerResized\", { target: \"document\" })\n  footerResizeHandler(): void {\n    this.footerConfig = this.inferConfig(this.el);\n  }\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  footerThemeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  private inferConfig(e: HTMLElement): FooterConfig {\n    if (e.parentElement !== null) {\n      if (e.parentElement.classList.contains(\"footer\")) {\n        return {\n          small: e.parentElement.classList.contains(\"footer-small\"),\n          grouped: e.parentElement.classList.contains(\"footer-grouped\"),\n        };\n      } else {\n        return this.inferConfig(e.parentElement);\n      }\n    } else {\n      return { small: false, grouped: false };\n    }\n  }\n\n  render() {\n    const {\n      footerConfig,\n      href,\n      hreflang,\n      referrerpolicy,\n      rel,\n      target,\n      download,\n    } = this;\n    const { small, grouped } = footerConfig;\n\n    return (\n      <Host\n        class={{\n          \"footer-link\": true,\n          [`footer-link-${grouped ? \"grouped\" : \"ungrouped\"}-${\n            small ? \"small\" : \"sparse\"\n          }`]: true,\n          [`footer-link-${this.foregroundColor}`]: true,\n        }}\n      >\n        <a\n          href={href}\n          hreflang={hreflang}\n          referrerPolicy={referrerpolicy}\n          rel={rel}\n          download={download !== false ? download : null}\n          target={target}\n        >\n          <slot />\n          {target === \"_blank\" && (\n            <span class=\"open-in-new-icon\" innerHTML={OpenInNew} />\n          )}\n        </a>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gKAAA,MAAMA,EAAkB,6gM,MCuBXC,EAAU,M,yCAGSC,EAAaC,G,kBACL,CAAEC,MAAO,MAAOC,QAAS,O,qBACjBC,I,cAKR,M,UAKd,K,+FAsBxB,iBAAAC,GACEC,KAAKC,aAAeD,KAAKE,YAAYF,KAAKG,G,CAI5C,mBAAAC,GACEJ,KAAKC,aAAeD,KAAKE,YAAYF,KAAKG,G,CAI5C,wBAAAE,CAAyBC,GACvB,MAAMC,EAAiBD,EAAGE,OAC1BR,KAAKS,gBAAkBF,EAAMG,I,CAGvB,WAAAR,CAAYS,GAClB,GAAIA,EAAEC,gBAAkB,KAAM,CAC5B,GAAID,EAAEC,cAAcC,UAAUC,SAAS,UAAW,CAChD,MAAO,CACLlB,MAAOe,EAAEC,cAAcC,UAAUC,SAAS,gBAC1CjB,QAASc,EAAEC,cAAcC,UAAUC,SAAS,kB,KAEzC,CACL,OAAOd,KAAKE,YAAYS,EAAEC,c,MAEvB,CACL,MAAO,CAAEhB,MAAO,MAAOC,QAAS,M,EAIpC,MAAAkB,GACE,MAAMd,aACJA,EAAYe,KACZA,EAAIC,SACJA,EAAQC,eACRA,EAAcC,IACdA,EAAGC,OACHA,EAAMC,SACNA,GACErB,KACJ,MAAMJ,MAAEA,EAAKC,QAAEA,GAAYI,EAE3B,OACEqB,EAACC,EAAI,CACHC,MAAO,CACL,cAAe,KACf,CAAC,eAAe3B,EAAU,UAAY,eACpCD,EAAQ,QAAU,YACf,KACL,CAAC,eAAeI,KAAKS,mBAAoB,OAG3Ca,EAAA,KACEN,KAAMA,EACNC,SAAUA,EACVQ,eAAgBP,EAChBC,IAAKA,EACLE,SAAUA,IAAa,MAAQA,EAAW,KAC1CD,OAAQA,GAERE,EAAA,aACCF,IAAW,UACVE,EAAA,QAAME,MAAM,mBAAmBE,UAAWC,K"}

package/dist/core/p-f8d7bda8.entry.js

@@ -1,2 +0,0 @@
-import{r as i,c as e,h as t,H as c,g as s}from"./p-03935e89.js";import{e as a,d as o,r,a as n,f as l,j as h}from"./p-ba27b1e2.js";import"./p-613aa265.js";const d='/*! 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:inline-block}input{overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.ic-switch-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ic-space-xxs);cursor:pointer}.ic-switch-label{margin-left:var(--ic-space-xxs);margin-bottom:var(--ic-space-sm)}.ic-switch-label-small{margin-bottom:0.625rem}.ic-switch-toggle{display:flex;align-items:center;justify-content:space-around;width:4rem;height:var(--ic-space-xl);position:relative;border-radius:100vw;background-color:var(--ic-architectural-200);border:var(--ic-space-1px) solid var(--ic-architectural-700);box-sizing:border-box;transition:var(--ic-transition-duration-fast)}.ic-switch-line-break{flex:1 0 100%}.ic-switch-checked-status{padding-left:var(--ic-space-xxs)}.ic-switch-toggle::before{content:"";width:1.333rem;height:1.333rem;border-radius:50%;position:absolute;z-index:2;top:50%;left:0.333rem;transform:translate(0, -50%);background-color:var(--ic-architectural-700);transition:var(--ic-transition-duration-slow)}.ic-switch-icon{display:inline-block;vertical-align:middle;width:0.625rem;height:0.625rem}.ic-switch-icon-circle,.ic-switch-icon-line{stroke-width:1}.ic-switch-icon-circle{stroke:var(--ic-architectural-700)}.ic-switch-icon-line{stroke:var(--ic-architectural-white)}@media (prefers-reduced-motion: reduce){.ic-switch-toggle::before{transition-duration:0ms}}.ic-switch-input:checked+.ic-switch-toggle{background-color:var(--ic-action-default);border:none}.ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-xl), -50%);background-color:var(--ic-architectural-white)}.ic-switch-input:not([disabled])+.ic-switch-toggle:hover::before{box-shadow:0 0 0 0.75rem var(--ic-action-dark-bg-hover)}.ic-switch-input:not([disabled])+.ic-switch-toggle:active::before{box-shadow:0 0 0 0.75rem var(--ic-action-dark-bg-active)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:hover::before{box-shadow:0 0 0 0.75rem var(--ic-action-default-bg-hover)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:active::before{box-shadow:0 0 0 0.75rem var(--ic-action-default-bg-active)}.ic-switch-input:focus:not([disabled])+.ic-switch-toggle,.ic-switch-input:focus-visible:not([disabled])+.ic-switch-toggle{box-shadow:0 0 0 var(--ic-space-1px) var(--ic-architectural-white),\n    0 0 0 0.188rem var(--ic-action-default),\n    0 0 0 0.5rem var(--ic-action-default-active-alpha)}.ic-switch-disabled{cursor:default}.ic-switch-disabled .ic-switch-icon-circle{stroke:var(--ic-architectural-300)}.ic-switch-disabled .ic-switch-icon-line{stroke:var(--ic-action-default-bg-active)}.ic-switch-input:disabled+.ic-switch-toggle{background-color:var(--ic-architectural-80);border:var(--ic-border-disabled)}.ic-switch-input:disabled~.ic-switch-checked-status{color:var(--ic-architectural-300)}.ic-switch-input:disabled+.ic-switch-toggle::before{background-color:var(--ic-architectural-300)}.ic-switch-input:disabled:checked+.ic-switch-toggle{background-color:var(--ic-status-info-light);border:var(--ic-space-1px) dashed #98c9f5}.ic-switch-input:disabled:checked+.ic-switch-toggle::before{background-color:var(--ic-architectural-white)}.ic-switch-small{gap:var(--ic-space-xxxs)}.ic-switch-small .ic-switch-checked-status{padding-left:0.375rem}.ic-switch-small .ic-switch-toggle{width:var(--ic-space-xxl);height:var(--ic-space-lg)}.ic-switch-small .ic-switch-toggle::before{width:var(--ic-space-md);height:var(--ic-space-md);left:var(--ic-space-xxs)}.ic-switch-small .ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-lg), -50%)}::slotted(*){margin-left:var(--ic-space-sm)}::slotted(svg){fill:currentcolor}@media (forced-colors: active){.ic-switch-toggle::before,.ic-switch-input:checked+.ic-switch-toggle{border:var(--ic-hc-border)}.ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(calc(var(--ic-space-xl) - 0.125rem), -50%)}.ic-switch-input:disabled+.ic-switch-toggle,.ic-switch-input:disabled:checked+.ic-switch-toggle,.ic-switch-input:disabled+.ic-switch-toggle::before{border-color:GrayText}.ic-switch-input:disabled~.ic-switch-checked-status{color:GrayText}.ic-switch-disabled .ic-switch-icon-circle,.ic-switch-disabled .ic-switch-icon-line{stroke:GrayText}}';let b=0;const p=class{constructor(t){i(this,t);this.icBlur=e(this,"icBlur",7);this.icChange=e(this,"icChange",7);this.icFocus=e(this,"icFocus",7);this.inputId=`ic-switch-input-${b++}`;this.handleChange=()=>{this.checkedState=!this.checkedState;this.icChange.emit({checked:this.checkedState,value:this.value})};this.onFocus=()=>{this.icFocus.emit()};this.onBlur=()=>{this.icBlur.emit()};this.handleFormReset=()=>{this.checkedState=this.initiallyChecked};this.checkedState=false;this.initiallyChecked=this.checked;this.checked=false;this.disabled=false;this.helperText="";this.hideLabel=false;this.label=undefined;this.name=this.inputId;this.showState=false;this.small=false;this.value="on"}disconnectedCallback(){a(this.el,this.handleFormReset)}componentWillLoad(){this.checkedState=this.checked;o(this.el,this.handleFormReset);r(this.disabled,this.el)}componentDidLoad(){n([{prop:this.label,propName:"label"}],"Switch")}async setFocus(){if(this.el.shadowRoot.querySelector("input")){this.el.shadowRoot.querySelector("input").focus()}}render(){const{label:i,checkedState:e,small:s,disabled:a,name:o,showState:r,value:n,hideLabel:d,helperText:b,inputId:p}=this;l(true,this.el,o,e?n:"",a);const u=h(p,b!=="",false);return t(c,null,t("label",{class:{["ic-switch-container"]:true,["ic-switch-disabled"]:a,["ic-switch-small"]:s},htmlFor:p},!d&&t("ic-input-label",{for:p,label:i,helperText:b,readonly:true,disabled:a,class:{["ic-switch-label"]:true,["ic-switch-label-small"]:s}}),!d&&t("span",{class:"ic-switch-line-break"}),t("input",{checked:e,disabled:a,"aria-label":i,"aria-checked":e?"true":"false","aria-describedby":u,role:"switch",class:"ic-switch-input",type:"checkbox",name:"toggle",id:p,onFocus:this.onFocus,onBlur:this.onBlur,onChange:this.handleChange}),t("span",{class:"ic-switch-toggle"},t("svg",{class:"ic-switch-icon","aria-hidden":"true",focusable:"false",viewBox:"0 0 10 10",xmlns:"http://www.w3.org/2000/svg"},t("line",{class:"ic-switch-icon-line",x1:"9",y1:s?"2":"1",x2:"9",y2:s?"8":"9"})),t("svg",{class:"ic-switch-icon","aria-hidden":"true",focusable:"false",viewBox:"0 0 10 10",xmlns:"http://www.w3.org/2000/svg"},t("circle",{class:"ic-switch-icon-circle",fill:"none",cx:"5",cy:"5",r:s?"3.335":"4.445"}))),t("slot",{name:"right-adornment"}),r&&t("ic-typography",{"aria-hidden":"true",variant:"label",class:"ic-switch-checked-status"},e?"On":"Off")))}static get delegatesFocus(){return true}get el(){return s(this)}};p.style=d;export{p as ic_switch};
-//# sourceMappingURL=p-f8d7bda8.entry.js.map

package/dist/core/p-f8d7bda8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icSwitchCss","inputIds","Switch","this","inputId","handleChange","checkedState","icChange","emit","checked","value","onFocus","icFocus","onBlur","icBlur","handleFormReset","initiallyChecked","disconnectedCallback","removeFormResetListener","el","componentWillLoad","addFormResetListener","removeDisabledFalse","disabled","componentDidLoad","onComponentRequiredPropUndefined","prop","label","propName","setFocus","shadowRoot","querySelector","focus","render","small","name","showState","hideLabel","helperText","renderHiddenInput","describedBy","getInputDescribedByText","h","Host","class","htmlFor","for","readonly","role","type","id","onChange","focusable","viewBox","xmlns","x1","y1","x2","y2","fill","cx","cy","r","variant"],"sources":["src/components/ic-switch/ic-switch.css?tag=ic-switch&encapsulation=shadow","src/components/ic-switch/ic-switch.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: inline-block;\n}\n\ninput {\n  overflow: hidden;\n  appearance: none;\n}\n\n.ic-switch-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--ic-space-xxs);\n  cursor: pointer;\n}\n\n.ic-switch-label {\n  margin-left: var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-sm);\n}\n\n.ic-switch-label-small {\n  margin-bottom: 0.625rem;\n}\n\n.ic-switch-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 4rem;\n  height: var(--ic-space-xl);\n  position: relative;\n  border-radius: 100vw;\n  background-color: var(--ic-architectural-200);\n  border: var(--ic-space-1px) solid var(--ic-architectural-700);\n  box-sizing: border-box;\n  transition: var(--ic-transition-duration-fast);\n}\n\n.ic-switch-line-break {\n  flex: 1 0 100%;\n}\n\n.ic-switch-checked-status {\n  padding-left: var(--ic-space-xxs);\n}\n\n.ic-switch-toggle::before {\n  content: \"\";\n  width: 1.333rem;\n  height: 1.333rem;\n  border-radius: 50%;\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  left: 0.333rem;\n  transform: translate(0, -50%);\n  background-color: var(--ic-architectural-700);\n  transition: var(--ic-transition-duration-slow);\n}\n\n.ic-switch-icon {\n  display: inline-block;\n  vertical-align: middle;\n  width: 0.625rem;\n  height: 0.625rem;\n}\n\n.ic-switch-icon-circle,\n.ic-switch-icon-line {\n  stroke-width: 1;\n}\n\n.ic-switch-icon-circle {\n  stroke: var(--ic-architectural-700);\n}\n\n.ic-switch-icon-line {\n  stroke: var(--ic-architectural-white);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ic-switch-toggle::before {\n    transition-duration: 0ms;\n  }\n}\n\n.ic-switch-input:checked + .ic-switch-toggle {\n  background-color: var(--ic-action-default);\n  border: none;\n}\n\n.ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-xl), -50%);\n  background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-action-dark-bg-hover);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-action-dark-bg-active);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-action-default-bg-hover);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,\n.ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {\n  box-shadow: 0 0 0 var(--ic-space-1px) var(--ic-architectural-white),\n    0 0 0 0.188rem var(--ic-action-default),\n    0 0 0 0.5rem var(--ic-action-default-active-alpha);\n}\n\n.ic-switch-disabled {\n  cursor: default;\n}\n\n.ic-switch-disabled .ic-switch-icon-circle {\n  stroke: var(--ic-architectural-300);\n}\n\n.ic-switch-disabled .ic-switch-icon-line {\n  stroke: var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle {\n  background-color: var(--ic-architectural-80);\n  border: var(--ic-border-disabled);\n}\n\n.ic-switch-input:disabled ~ .ic-switch-checked-status {\n  color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle::before {\n  background-color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle {\n  background-color: var(--ic-status-info-light);\n  border: var(--ic-space-1px) dashed #98c9f5;\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle::before {\n  background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-small {\n  gap: var(--ic-space-xxxs);\n}\n\n.ic-switch-small .ic-switch-checked-status {\n  padding-left: 0.375rem;\n}\n\n.ic-switch-small .ic-switch-toggle {\n  width: var(--ic-space-xxl);\n  height: var(--ic-space-lg);\n}\n\n.ic-switch-small .ic-switch-toggle::before {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  left: var(--ic-space-xxs);\n}\n\n.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-lg), -50%);\n}\n\n::slotted(*) {\n  margin-left: var(--ic-space-sm);\n}\n\n::slotted(svg) {\n  fill: currentcolor;\n}\n\n@media (forced-colors: active) {\n  .ic-switch-toggle::before,\n  .ic-switch-input:checked + .ic-switch-toggle {\n    border: var(--ic-hc-border);\n  }\n\n  .ic-switch-input:checked + .ic-switch-toggle::before {\n    transform: translate(calc(var(--ic-space-xl) - 0.125rem), -50%);\n  }\n\n  .ic-switch-input:disabled + .ic-switch-toggle,\n  .ic-switch-input:disabled:checked + .ic-switch-toggle,\n  .ic-switch-input:disabled + .ic-switch-toggle::before {\n    border-color: GrayText;\n  }\n\n  .ic-switch-input:disabled ~ .ic-switch-checked-status {\n    color: GrayText;\n  }\n\n  .ic-switch-disabled .ic-switch-icon-circle,\n  .ic-switch-disabled .ic-switch-icon-line {\n    stroke: GrayText;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\n\nlet inputIds = 0;\n\n/**\n * @slot right-adornment - Content is placed to the right of switch before state label.\n */\n@Component({\n  tag: \"ic-switch\",\n  styleUrl: \"ic-switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Switch {\n  private inputId = `ic-switch-input-${inputIds++}`;\n\n  @Element() el: HTMLIcSwitchElement;\n\n  @State() checkedState: boolean = false;\n  @State() initiallyChecked = this.checked;\n\n  /**\n   * If `true`, the switch will display as checked.\n   */\n  @Prop() checked?: 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 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   * The aria-label applied to the switch when no visual 'name' is provided.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n\n  /**\n   * If `true`, the switch will render the On/Off state text.\n   */\n  @Prop() showState?: boolean = false;\n\n  /**\n   * If `true`, the small styling will be applied to the switch.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The value of the toggle does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n   * it's only used when the toggle participates in a native `<form>`.\n   */\n  @Prop() value?: string | null = \"on\";\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n  /**\n   * Emitted when the toggle has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    this.checkedState = this.checked;\n    addFormResetListener(this.el, this.handleFormReset);\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Switch\"\n    );\n  }\n\n  /**\n   * Sets focus on the switch.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"input\")) {\n      this.el.shadowRoot.querySelector(\"input\").focus();\n    }\n  }\n\n  private handleChange = () => {\n    this.checkedState = !this.checkedState;\n    this.icChange.emit({\n      checked: this.checkedState,\n      value: this.value,\n    });\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checkedState = this.initiallyChecked;\n  };\n\n  render() {\n    const {\n      label,\n      checkedState,\n      small,\n      disabled,\n      name,\n      showState,\n      value,\n      hideLabel,\n      helperText,\n      inputId,\n    } = this;\n\n    renderHiddenInput(true, this.el, name, checkedState ? value : \"\", disabled);\n\n    const describedBy = getInputDescribedByText(\n      inputId,\n      helperText !== \"\",\n      false\n    );\n\n    return (\n      <Host>\n        <label\n          class={{\n            [\"ic-switch-container\"]: true,\n            [\"ic-switch-disabled\"]: disabled,\n            [\"ic-switch-small\"]: small,\n          }}\n          htmlFor={inputId}\n        >\n          {!hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              readonly={true}\n              disabled={disabled}\n              class={{\n                [\"ic-switch-label\"]: true,\n                [\"ic-switch-label-small\"]: small,\n              }}\n            ></ic-input-label>\n          )}\n          {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n          <input\n            checked={checkedState}\n            disabled={disabled}\n            aria-label={label}\n            aria-checked={checkedState ? \"true\" : \"false\"}\n            aria-describedby={describedBy}\n            role=\"switch\"\n            class=\"ic-switch-input\"\n            type=\"checkbox\"\n            name=\"toggle\"\n            id={inputId}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onChange={this.handleChange}\n          />\n          <span class=\"ic-switch-toggle\">\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <line\n                class=\"ic-switch-icon-line\"\n                x1=\"9\"\n                y1={small ? \"2\" : \"1\"}\n                x2=\"9\"\n                y2={small ? \"8\" : \"9\"}\n              />\n            </svg>\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle\n                class=\"ic-switch-icon-circle\"\n                fill=\"none\"\n                cx=\"5\"\n                cy=\"5\"\n                r={small ? \"3.335\" : \"4.445\"}\n              />\n            </svg>\n          </span>\n          <slot name=\"right-adornment\"></slot>\n          {showState && (\n            <ic-typography\n              aria-hidden=\"true\"\n              variant=\"label\"\n              class=\"ic-switch-checked-status\"\n            >\n              {checkedState ? \"On\" : \"Off\"}\n            </ic-typography>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0JAAA,MAAMA,EAAc,ggNCqBpB,IAAIC,EAAW,E,MAYFC,EAAM,M,4HACTC,KAAAC,QAAU,mBAAmBH,MAkG7BE,KAAAE,aAAe,KACrBF,KAAKG,cAAgBH,KAAKG,aAC1BH,KAAKI,SAASC,KAAK,CACjBC,QAASN,KAAKG,aACdI,MAAOP,KAAKO,OACZ,EAGIP,KAAAQ,QAAU,KAChBR,KAAKS,QAAQJ,MAAM,EAGbL,KAAAU,OAAS,KACfV,KAAKW,OAAON,MAAM,EAGZL,KAAAY,gBAAkB,KACxBZ,KAAKG,aAAeH,KAAKa,gBAAgB,E,kBA/GV,M,sBACLb,KAAKM,Q,aAKL,M,cAKC,M,gBAKC,G,eAKA,M,+BAUNN,KAAKC,Q,eAKC,M,WAKJ,M,WASM,I,CAiBhC,oBAAAa,GACEC,EAAwBf,KAAKgB,GAAIhB,KAAKY,gB,CAGxC,iBAAAK,GACEjB,KAAKG,aAAeH,KAAKM,QACzBY,EAAqBlB,KAAKgB,GAAIhB,KAAKY,iBACnCO,EAAoBnB,KAAKoB,SAAUpB,KAAKgB,G,CAG1C,gBAAAK,GACEC,EACE,CAAC,CAAEC,KAAMvB,KAAKwB,MAAOC,SAAU,UAC/B,S,CAQJ,cAAMC,GACJ,GAAI1B,KAAKgB,GAAGW,WAAWC,cAAc,SAAU,CAC7C5B,KAAKgB,GAAGW,WAAWC,cAAc,SAASC,O,EAwB9C,MAAAC,GACE,MAAMN,MACJA,EAAKrB,aACLA,EAAY4B,MACZA,EAAKX,SACLA,EAAQY,KACRA,EAAIC,UACJA,EAAS1B,MACTA,EAAK2B,UACLA,EAASC,WACTA,EAAUlC,QACVA,GACED,KAEJoC,EAAkB,KAAMpC,KAAKgB,GAAIgB,EAAM7B,EAAeI,EAAQ,GAAIa,GAElE,MAAMiB,EAAcC,EAClBrC,EACAkC,IAAe,GACf,OAGF,OACEI,EAACC,EAAI,KACHD,EAAA,SACEE,MAAO,CACL,CAAC,uBAAwB,KACzB,CAAC,sBAAuBrB,EACxB,CAAC,mBAAoBW,GAEvBW,QAASzC,IAEPiC,GACAK,EAAA,kBACEI,IAAK1C,EACLuB,MAAOA,EACPW,WAAYA,EACZS,SAAU,KACVxB,SAAUA,EACVqB,MAAO,CACL,CAAC,mBAAoB,KACrB,CAAC,yBAA0BV,MAI/BG,GAAaK,EAAA,QAAME,MAAM,yBAC3BF,EAAA,SACEjC,QAASH,EACTiB,SAAUA,EAAQ,aACNI,EAAK,eACHrB,EAAe,OAAS,QAAO,mBAC3BkC,EAClBQ,KAAK,SACLJ,MAAM,kBACNK,KAAK,WACLd,KAAK,SACLe,GAAI9C,EACJO,QAASR,KAAKQ,QACdE,OAAQV,KAAKU,OACbsC,SAAUhD,KAAKE,eAEjBqC,EAAA,QAAME,MAAM,oBACVF,EAAA,OACEE,MAAM,iBAAgB,cACV,OACZQ,UAAU,QACVC,QAAQ,YACRC,MAAM,8BAENZ,EAAA,QACEE,MAAM,sBACNW,GAAG,IACHC,GAAItB,EAAQ,IAAM,IAClBuB,GAAG,IACHC,GAAIxB,EAAQ,IAAM,OAGtBQ,EAAA,OACEE,MAAM,iBAAgB,cACV,OACZQ,UAAU,QACVC,QAAQ,YACRC,MAAM,8BAENZ,EAAA,UACEE,MAAM,wBACNe,KAAK,OACLC,GAAG,IACHC,GAAG,IACHC,EAAG5B,EAAQ,QAAU,YAI3BQ,EAAA,QAAMP,KAAK,oBACVC,GACCM,EAAA,+BACc,OACZqB,QAAQ,QACRnB,MAAM,4BAELtC,EAAe,KAAO,Q"}

package/dist/core/p-fd8780e2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["icTypographyCss","Typography","this","focusBtnFromKeyboard","lastMarkerTop","lastWidth","resizeObserver","truncatedHeight","toggleExpanded","expanded","checkMaxLines","height","numLines","Math","floor","maxLines","el","setAttribute","clientHeight","truncated","checkMarkerPosition","elTop","markerTop","getElementTop","getClientRects","top","runResizeObserver","ResizeObserver","clearTimeout","resizeInterval","window","setTimeout","resizeObserverCallback","observe","truncWrapperEl","clientWidth","marker","truncButtonFocus","truncButtonFocussed","truncButtonBlur","truncButtonFocusFromMouse","watchExpandedHandler","disconnectedCallback","disconnect","componentDidLoad","variant","document","createElement","style","visibility","appendChild","checkResizeObserver","render","applyVerticalMargins","strikethrough","underline","italic","bold","h","Host","class","ref","focus","onFocus","onBlur","onMouseDown","onClick"],"sources":["src/components/ic-typography/ic-typography.css?tag=ic-typography&encapsulation=shadow","src/components/ic-typography/ic-typography.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  position: relative;\n}\n\n:host(.ic-typography-vertical-margins-h1) {\n  margin: 0 0 var(--ic-space-xl);\n}\n\n:host(.ic-typography-vertical-margins-h2) {\n  margin: var(--ic-space-xxl) 0 var(--ic-space-lg);\n}\n\n:host(.ic-typography-vertical-margins-h3) {\n  margin: var(--ic-space-xl) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-h4) {\n  margin: var(--ic-space-lg) 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-subtitle-large),\n:host(.ic-typography-vertical-margins-subtitle-small),\n:host(.ic-typography-vertical-margins-body),\n:host(.ic-typography-vertical-margins-code-large),\n:host(.ic-typography-vertical-margins-code-small),\n:host(.ic-typography-vertical-margins-code-extra-small) {\n  margin: 0 0 var(--ic-space-md);\n}\n\n:host(.ic-typography-vertical-margins-caption),\n:host(.ic-typography-vertical-margins-caption-uppercase) {\n  margin: 0 0 var(--ic-space-xs);\n}\n\n:host(.ic-typography-vertical-margins-h2:first-child),\n:host(.ic-typography-vertical-margins-h3:first-child),\n:host(.ic-typography-vertical-margins-h4:first-child) {\n  margin-top: 0;\n}\n\n:host(.ic-typography-h1) {\n  font: var(--ic-font-h1) !important;\n}\n\n:host(.ic-typography-h2) {\n  font: var(--ic-font-h2);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-h3) {\n  font: var(--ic-font-h3);\n}\n\n:host(.ic-typography-h4) {\n  font: var(--ic-font-h4);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-large) {\n  font: var(--ic-font-subtitle-large);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-subtitle-small) {\n  font: var(--ic-font-subtitle-small);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0015);\n}\n\n:host(.ic-typography-body) {\n  font: var(--ic-font-body);\n  letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-caption) {\n  font: var(--ic-font-caption);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n}\n\n:host(.ic-typography-caption-uppercase) {\n  font: var(--ic-font-caption);\n  letter-spacing: var(--ic-font-letter-spacing-0pt0025);\n  text-transform: uppercase;\n}\n\n:host(.ic-typography-label) {\n  font: var(--ic-font-label);\n  letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-label-uppercase) {\n  font: var(--ic-font-label);\n  letter-spacing: var(--ic-font-letter-spacing-0pt025);\n  text-transform: uppercase;\n}\n\n:host(.ic-typography-code-large) {\n  font: var(--ic-font-code-large);\n  letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-code-small) {\n  font: var(--ic-font-code-small);\n  letter-spacing: var(--ic-font-letter-spacing-0pt005);\n}\n\n:host(.ic-typography-code-extra-small) {\n  font: var(--ic-font-code-extra-small);\n  letter-spacing: var(--ic-font-letter-spacing-0pt025);\n}\n\n:host(.ic-typography-no-wrap) {\n  white-space: nowrap;\n}\n\n:host ::slotted(h1),\n:host ::slotted(h2),\n:host ::slotted(h3),\n:host ::slotted(h4),\n:host ::slotted(h5),\n:host ::slotted(h6),\n:host ::slotted(p),\n:host ::slotted(label) {\n  font: inherit;\n  letter-spacing: inherit;\n}\n\n.trunc-wrapper {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  line-clamp: var(--truncation-max-lines, initial);\n  -webkit-line-clamp: var(--truncation-max-lines, initial);\n  overflow: hidden;\n}\n\n.trunc-btn {\n  border: none;\n  background: none;\n  padding: 0;\n  color: var(--ic-color-primary-text);\n  text-decoration: underline;\n  font-weight: var(--ic-font-weight-bold);\n  transition: var(--ic-easing-transition-fast);\n}\n\n.trunc-btn:hover,\n.trunc-btn.focus {\n  outline: none;\n  border-bottom: var(--ic-space-xxs) solid !important;\n  margin-bottom: calc(-1 * var(--ic-space-xxs)) !important;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n:host(.strikethrough) {\n  text-decoration: line-through;\n}\n\n:host(.underline) {\n  text-decoration: underline;\n}\n\n:host(.underline.strikethrough) {\n  text-decoration: line-through underline;\n}\n\n:host(.italic) {\n  font-style: italic !important;\n}\n\n:host(.bold) {\n  font-weight: var(--ic-font-weight-bold);\n}\n\n@supports (text-decoration-thickness: 25%) {\n  .trunc-btn:hover,\n  .trunc-btn.focus {\n    text-decoration-line: underline;\n    text-decoration-thickness: 25%;\n    text-underline-offset: 25%;\n    border-bottom: 0 !important;\n    margin-bottom: 0 !important;\n  }\n}\n","import { Component, Prop, h, Element, Host, State, Watch } from \"@stencil/core\";\n\nimport { IcTypographyVariants } from \"../../utils/types\";\nimport { checkResizeObserver } from \"../../utils/helpers\";\n\n@Component({\n  styleUrl: \"ic-typography.css\",\n  tag: \"ic-typography\",\n  shadow: true,\n})\nexport class Typography {\n  private focusBtnFromKeyboard: boolean = true;\n  private lastMarkerTop: number = 0;\n  private lastWidth: number = 0;\n  private marker: HTMLElement;\n  private resizeInterval: number;\n  private resizeObserver: ResizeObserver = null;\n  private truncatedHeight: number = 0;\n  private truncWrapperEl: Element;\n\n  @Element() el: HTMLIcTypographyElement;\n\n  @State() truncated: boolean = false;\n  @State() truncButtonFocussed: boolean = false;\n\n  /**\n   * If `true`, appropriate top and bottom margins will be applied to the typography.\n   */\n  @Prop() applyVerticalMargins?: boolean = false;\n\n  /**\n   * If `true`, the typography will have a bold font weight.\n   * Note: This will have no impact on variants that already use an equivalent or higher font weight (h1, h2, and subtitle-large).\n   */\n  @Prop() bold?: boolean = false;\n\n  /**\n   * If `true`, the typography will have an italic font style.\n   */\n  @Prop() italic?: boolean = false;\n\n  /**\n   * The number of lines to display before truncating the text, only used for the 'body' variant.\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * If `true`, the typography will have a line through it.\n   */\n  @Prop() strikethrough?: boolean = false;\n\n  /**\n   * If `true`, the typography will have a line under it.\n   */\n  @Prop() underline?: boolean = false;\n\n  /**\n   * The ICDS typography style to use.\n   */\n  @Prop() variant?: IcTypographyVariants = \"body\";\n\n  @State() expanded: boolean = false;\n\n  @Watch(\"expanded\")\n  watchExpandedHandler(): void {\n    this.el.setAttribute(\n      \"style\",\n      `--truncation-max-lines: ${this.expanded ? \"initial\" : this.maxLines}`\n    );\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentDidLoad(): void {\n    if (this.variant === \"body\" && this.maxLines > 0) {\n      const marker = document.createElement(\"span\");\n      marker.style.visibility = \"hidden\";\n      this.el.appendChild(marker);\n      this.marker = marker;\n      this.lastWidth = this.el.clientWidth;\n      this.checkMaxLines(this.el.clientHeight);\n      checkResizeObserver(this.runResizeObserver);\n    }\n  }\n\n  private toggleExpanded = () => {\n    this.expanded = !this.expanded;\n  };\n\n  private checkMaxLines = (height: number) => {\n    //24 is the height of a single line\n    const numLines = Math.floor(height / 24);\n    if (numLines > this.maxLines) {\n      this.el.setAttribute(\"style\", `--truncation-max-lines: ${this.maxLines}`);\n      this.truncatedHeight = this.el.clientHeight;\n      this.truncated = true;\n    }\n  };\n\n  private checkMarkerPosition = (elTop: number, markerTop: number) => {\n    if (markerTop - elTop < this.truncatedHeight) {\n      this.truncated = false;\n      this.expanded = false;\n    } else {\n      this.truncated = true;\n    }\n  };\n\n  private getElementTop = (el: HTMLElement) => {\n    return el.getClientRects ? el.getClientRects()[0].top : 0;\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      clearTimeout(this.resizeInterval);\n      this.resizeInterval = window.setTimeout(this.resizeObserverCallback, 50);\n    });\n    this.resizeObserver.observe(this.truncWrapperEl);\n  };\n\n  private resizeObserverCallback = () => {\n    if (this.lastWidth === this.el.clientWidth) {\n      return;\n    }\n\n    if (this.truncatedHeight === 0) {\n      this.checkMaxLines(this.el.clientHeight);\n      return;\n    }\n\n    const markerTop = this.getElementTop(this.marker);\n    if (markerTop === this.lastMarkerTop) {\n      return;\n    }\n\n    this.checkMarkerPosition(this.getElementTop(this.el), markerTop);\n    this.lastMarkerTop = markerTop;\n    this.lastWidth = this.el.clientWidth;\n  };\n\n  private truncButtonFocus = (): void => {\n    if (this.focusBtnFromKeyboard) {\n      this.truncButtonFocussed = true;\n    }\n  };\n\n  private truncButtonBlur = (): void => {\n    this.focusBtnFromKeyboard = true;\n    this.truncButtonFocussed = false;\n  };\n\n  private truncButtonFocusFromMouse = (): void => {\n    this.focusBtnFromKeyboard = false;\n  };\n\n  render() {\n    const {\n      variant,\n      applyVerticalMargins,\n      maxLines,\n      truncated,\n      expanded,\n      strikethrough,\n      underline,\n      italic,\n      bold,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-typography-${variant}`]: true,\n          [`ic-typography-vertical-margins-${variant}`]: applyVerticalMargins,\n          [\"bold\"]: bold,\n          [\"italic\"]: italic,\n          [\"strikethrough\"]: strikethrough,\n          [\"underline\"]: underline,\n        }}\n      >\n        {variant === \"body\" && maxLines > 0 ? (\n          <div class=\"trunc-wrapper\" ref={(el) => (this.truncWrapperEl = el)}>\n            <slot />\n          </div>\n        ) : (\n          <slot />\n        )}\n        {variant === \"body\" && maxLines > 0 && truncated && (\n          <button\n            class={{ \"trunc-btn\": true, focus: this.truncButtonFocussed }}\n            onFocus={this.truncButtonFocus}\n            onBlur={this.truncButtonBlur}\n            onMouseDown={this.truncButtonFocusFromMouse}\n            onClick={this.toggleExpanded}\n            aria-hidden=\"true\"\n          >\n            {expanded ? \"See less\" : \"See more\"}\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"qHAAA,MAAMA,EAAkB,0mM,MCUXC,EAAU,M,yBACbC,KAAAC,qBAAgC,KAChCD,KAAAE,cAAwB,EACxBF,KAAAG,UAAoB,EAGpBH,KAAAI,eAAiC,KACjCJ,KAAAK,gBAA0B,EAwE1BL,KAAAM,eAAiB,KACvBN,KAAKO,UAAYP,KAAKO,QAAQ,EAGxBP,KAAAQ,cAAiBC,IAEvB,MAAMC,EAAWC,KAAKC,MAAMH,EAAS,IACrC,GAAIC,EAAWV,KAAKa,SAAU,CAC5Bb,KAAKc,GAAGC,aAAa,QAAS,2BAA2Bf,KAAKa,YAC9Db,KAAKK,gBAAkBL,KAAKc,GAAGE,aAC/BhB,KAAKiB,UAAY,I,GAIbjB,KAAAkB,oBAAsB,CAACC,EAAeC,KAC5C,GAAIA,EAAYD,EAAQnB,KAAKK,gBAAiB,CAC5CL,KAAKiB,UAAY,MACjBjB,KAAKO,SAAW,K,KACX,CACLP,KAAKiB,UAAY,I,GAIbjB,KAAAqB,cAAiBP,GAChBA,EAAGQ,eAAiBR,EAAGQ,iBAAiB,GAAGC,IAAM,EAGlDvB,KAAAwB,kBAAoB,KAC1BxB,KAAKI,eAAiB,IAAIqB,gBAAe,KACvCC,aAAa1B,KAAK2B,gBAClB3B,KAAK2B,eAAiBC,OAAOC,WAAW7B,KAAK8B,uBAAwB,GAAG,IAE1E9B,KAAKI,eAAe2B,QAAQ/B,KAAKgC,eAAe,EAG1ChC,KAAA8B,uBAAyB,KAC/B,GAAI9B,KAAKG,YAAcH,KAAKc,GAAGmB,YAAa,CAC1C,M,CAGF,GAAIjC,KAAKK,kBAAoB,EAAG,CAC9BL,KAAKQ,cAAcR,KAAKc,GAAGE,cAC3B,M,CAGF,MAAMI,EAAYpB,KAAKqB,cAAcrB,KAAKkC,QAC1C,GAAId,IAAcpB,KAAKE,cAAe,CACpC,M,CAGFF,KAAKkB,oBAAoBlB,KAAKqB,cAAcrB,KAAKc,IAAKM,GACtDpB,KAAKE,cAAgBkB,EACrBpB,KAAKG,UAAYH,KAAKc,GAAGmB,WAAW,EAG9BjC,KAAAmC,iBAAmB,KACzB,GAAInC,KAAKC,qBAAsB,CAC7BD,KAAKoC,oBAAsB,I,GAIvBpC,KAAAqC,gBAAkB,KACxBrC,KAAKC,qBAAuB,KAC5BD,KAAKoC,oBAAsB,KAAK,EAG1BpC,KAAAsC,0BAA4B,KAClCtC,KAAKC,qBAAuB,KAAK,E,eAtIL,M,yBACU,M,0BAKC,M,UAMhB,M,YAKE,M,2CAUO,M,eAKJ,M,aAKW,O,cAEZ,K,CAG7B,oBAAAsC,GACEvC,KAAKc,GAAGC,aACN,QACA,2BAA2Bf,KAAKO,SAAW,UAAYP,KAAKa,W,CAIhE,oBAAA2B,GACE,GAAIxC,KAAKI,iBAAmB,KAAM,CAChCJ,KAAKI,eAAeqC,Y,EAIxB,gBAAAC,GACE,GAAI1C,KAAK2C,UAAY,QAAU3C,KAAKa,SAAW,EAAG,CAChD,MAAMqB,EAASU,SAASC,cAAc,QACtCX,EAAOY,MAAMC,WAAa,SAC1B/C,KAAKc,GAAGkC,YAAYd,GACpBlC,KAAKkC,OAASA,EACdlC,KAAKG,UAAYH,KAAKc,GAAGmB,YACzBjC,KAAKQ,cAAcR,KAAKc,GAAGE,cAC3BiC,EAAoBjD,KAAKwB,kB,EA0E7B,MAAA0B,GACE,MAAMP,QACJA,EAAOQ,qBACPA,EAAoBtC,SACpBA,EAAQI,UACRA,EAASV,SACTA,EAAQ6C,cACRA,EAAaC,UACbA,EAASC,OACTA,EAAMC,KACNA,GACEvD,KAEJ,OACEwD,EAACC,EAAI,CACHC,MAAO,CACL,CAAC,iBAAiBf,KAAY,KAC9B,CAAC,kCAAkCA,KAAYQ,EAC/C,CAAC,QAASI,EACV,CAAC,UAAWD,EACZ,CAAC,iBAAkBF,EACnB,CAAC,aAAcC,IAGhBV,IAAY,QAAU9B,EAAW,EAChC2C,EAAA,OAAKE,MAAM,gBAAgBC,IAAM7C,GAAQd,KAAKgC,eAAiBlB,GAC7D0C,EAAA,cAGFA,EAAA,aAEDb,IAAY,QAAU9B,EAAW,GAAKI,GACrCuC,EAAA,UACEE,MAAO,CAAE,YAAa,KAAME,MAAO5D,KAAKoC,qBACxCyB,QAAS7D,KAAKmC,iBACd2B,OAAQ9D,KAAKqC,gBACb0B,YAAa/D,KAAKsC,0BAClB0B,QAAShE,KAAKM,eAAc,cAChB,QAEXC,EAAW,WAAa,Y"}

package/dist/esm/OpenInNew-cdeed5ce.js.map

@@ -1 +0,0 @@
-{"file":"OpenInNew-cdeed5ce.js","mappings":";;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/check-icon-4a9f8371.js.map

@@ -1 +0,0 @@
-{"file":"check-icon-4a9f8371.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/chevron-icon-589e3b46.js.map

@@ -1 +0,0 @@
-{"file":"chevron-icon-589e3b46.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/close-icon-539ec8d1.js.map

@@ -1 +0,0 @@
-{"file":"close-icon-539ec8d1.js","mappings":";;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}