{"version":3,"names":["setCssVariable","hostElement","name","value","browserSupportsShadowDom","window","ShadowRoot","componentHasShadowRoot","shadowRoot","componentHasShadowStyle","styleSheets","length","componentHasAdoptedShadowStyle","adoptedStyleSheets","baseStyleSheet","adoptedStyleSheetAmount","variableStyleSheet","variableStyleSheetsLength","CSSStyleSheet","insertRule","cssRules","addRule","style","setProperty","createSchemeStyleScheet","activeScheme","schemeStyleSheet","key","Object","entries","startsWith","getCssVariable","getComputedStyle","getPropertyValue"],"sources":["src/utils/css-variables.ts"],"sourcesContent":["/**\n * Sets a CSS variable for the given component.\n * If the current browser supports ShadowDOM, the variable will be appended to the <style> tag of the shadowRoot.\n * If it does not (IE, Edge < 80, unit/snapshot tests), the variable will be set as inline style on the hostElement.\n *\n * @param hostElement The component in whose context the CSS variable should be set\n * @param name The name of the CSS variable, e.g. \"--myvar\"\n * @param value The value of the CSS variable to set, e.g. \"var(--eon-white)\"\n */\nexport function setCssVariable(hostElement: HTMLElement, name: string, value: string): void {\n  // at least one of those is false in IE, legacy Edge and jest tests (snapshots)\n  const browserSupportsShadowDom = window.ShadowRoot != null;\n  const componentHasShadowRoot = hostElement.shadowRoot != null;\n  // shadowed component in modern browser (FF, Chrome in dev build mode):\n  const componentHasShadowStyle =\n    componentHasShadowRoot &&\n    hostElement.shadowRoot.styleSheets != null &&\n    hostElement.shadowRoot.styleSheets.length > 0;\n  // shadowed component in modern browser (Chrome in prod mode - no idea why this is different):\n  const componentHasAdoptedShadowStyle =\n    componentHasShadowRoot && (hostElement.shadowRoot as any).adoptedStyleSheets != null;\n\n  if (componentHasAdoptedShadowStyle) {\n    // Append the single CSS variable declaration to the <style> tag of the shadowRoot but using the adoptedStyleSheets API.\n    // Get information whether component is a schemable component.\n    // If we would attach new rules to baseStyleSheet, they are applied globally for all components of this type.\n    // Hence we have to create a separate Stylesheet for variables.\n\n    // with scheme:\n    // adoptedStyleSheets[0]: baseStyleSheet\n    // adoptedStyleSheets[1]: schemeStyleSheet\n    // adoptedStyleSheets[2]: varStyleSheet\n\n    // without scheme:\n    // adoptedStyleSheets[0]: baseStyleSheet\n    // adoptedStyleSheets[1]: varStyleSheet\n\n    const baseStyleSheet = hostElement.shadowRoot.adoptedStyleSheets[0];\n    let adoptedStyleSheetAmount: number = hostElement.shadowRoot.adoptedStyleSheets.length;\n    let variableStyleSheet: any;\n    let variableStyleSheetsLength: number;\n\n    switch (adoptedStyleSheetAmount) {\n      case 1:\n        // only baseStyleSheet available --> create variableStyleSheet\n        variableStyleSheet = new CSSStyleSheet();\n        variableStyleSheet.insertRule(`:host { ${name}: ${value} }`);\n        hostElement.shadowRoot.adoptedStyleSheets = [baseStyleSheet, variableStyleSheet];\n        break;\n      case 2:\n        // baseStyleSheet and variableStyleSheet available --> use variableStyleSheet on index 1\n        variableStyleSheet = hostElement.shadowRoot.adoptedStyleSheets[1];\n        variableStyleSheetsLength = variableStyleSheet.cssRules.length;\n        variableStyleSheet.insertRule(`:host { ${name}: ${value} }`, variableStyleSheetsLength);\n        break;\n      case 3:\n        // baseStyleSheet, schemeStyleSheet and variableStyleSheet available --> use variableStyleSheet on index 2\n        variableStyleSheet = hostElement.shadowRoot.adoptedStyleSheets[2];\n        variableStyleSheetsLength = variableStyleSheet.cssRules.length;\n        variableStyleSheet.insertRule(`:host { ${name}: ${value} }`, variableStyleSheetsLength);\n        break;\n    }\n  } else if (componentHasShadowStyle) {\n    // append the CSS variable declaration to the <style> tag of the shadowRoot\n    (hostElement.shadowRoot.styleSheets[0] as any).addRule(`:host`, `${name}: ${value}`);\n  } else if (!componentHasShadowRoot || !browserSupportsShadowDom) {\n    // add the CSS variable declaration as inline style to the hostElement\n    hostElement.style.setProperty(`${name}`, `${value}`);\n  } // else: component might be shadowed in a modern browser but the stylesheet isn't ready yet. Happens frequently in FF/Chrome.\n}\n\nexport function createSchemeStyleScheet(activeScheme: any): any {\n  const schemeStyleSheet: any = new CSSStyleSheet();\n  for (let [key, value] of Object.entries(activeScheme)) {\n    // this check allows also setting non color variable values to a component scheme\n    if (typeof value === \"string\" && value.startsWith(\"eon-\")) {\n      schemeStyleSheet.insertRule(`:host { --${key}: var(--${value}) }`);\n    } else {\n      schemeStyleSheet.insertRule(`:host { --${key}: ${value} }`);\n    }\n  }\n\n  return schemeStyleSheet;\n}\n\n/**\n * Returns the value of the given CSS variable defined as inline style on the hostElement (IE/Edge/tests) or within its shadowRoot.\n *\n * @param hostElement The component in whose context the CSS variable is set\n * @param name The name of the CSS variable, e.g. \"--myvar\"\n */\nexport function getCssVariable(hostElement: HTMLElement, name: string): string {\n  const style = window.getComputedStyle(hostElement);\n  if (style != null) return style.getPropertyValue(name);\n  return null;\n}\n"],"mappings":"SASgBA,EAAeC,EAA0BC,EAAcC,GAErE,MAAMC,EAA2BC,OAAOC,YAAc,KACtD,MAAMC,EAAyBN,EAAYO,YAAc,KAEzD,MAAMC,EACJF,GACAN,EAAYO,WAAWE,aAAe,MACtCT,EAAYO,WAAWE,YAAYC,OAAS,EAE9C,MAAMC,EACJL,GAA2BN,EAAYO,WAAmBK,oBAAsB,KAElF,GAAID,EAAgC,CAelC,MAAME,EAAiBb,EAAYO,WAAWK,mBAAmB,GACjE,IAAIE,EAAkCd,EAAYO,WAAWK,mBAAmBF,OAChF,IAAIK,EACJ,IAAIC,EAEJ,OAAQF,GACN,KAAK,EAEHC,EAAqB,IAAIE,cACzBF,EAAmBG,WAAW,WAAWjB,MAASC,OAClDF,EAAYO,WAAWK,mBAAqB,CAACC,EAAgBE,GAC7D,MACF,KAAK,EAEHA,EAAqBf,EAAYO,WAAWK,mBAAmB,GAC/DI,EAA4BD,EAAmBI,SAAST,OACxDK,EAAmBG,WAAW,WAAWjB,MAASC,MAAWc,GAC7D,MACF,KAAK,EAEHD,EAAqBf,EAAYO,WAAWK,mBAAmB,GAC/DI,EAA4BD,EAAmBI,SAAST,OACxDK,EAAmBG,WAAW,WAAWjB,MAASC,MAAWc,GAC7D,M,MAEC,GAAIR,EAAyB,CAEjCR,EAAYO,WAAWE,YAAY,GAAWW,QAAQ,QAAS,GAAGnB,MAASC,I,MACvE,IAAKI,IAA2BH,EAA0B,CAE/DH,EAAYqB,MAAMC,YAAY,GAAGrB,IAAQ,GAAGC,I,CAEhD,C,SAEgBqB,EAAwBC,GACtC,MAAMC,EAAwB,IAAIR,cAClC,IAAK,IAAKS,EAAKxB,KAAUyB,OAAOC,QAAQJ,GAAe,CAErD,UAAWtB,IAAU,UAAYA,EAAM2B,WAAW,QAAS,CACzDJ,EAAiBP,WAAW,aAAaQ,YAAcxB,O,KAClD,CACLuB,EAAiBP,WAAW,aAAaQ,MAAQxB,M,EAIrD,OAAOuB,CACT,C,SAQgBK,EAAe9B,EAA0BC,GACvD,MAAMoB,EAAQjB,OAAO2B,iBAAiB/B,GACtC,GAAIqB,GAAS,KAAM,OAAOA,EAAMW,iBAAiB/B,GACjD,OAAO,IACT,Q"}