| 1 |
- {"version":3,"file":"style-map.js","sources":["../src/directives/style-map.ts"],"sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\n\nimport {AttributePart, noChange} from '../lit-html.js';\nimport {\n directive,\n Directive,\n DirectiveParameters,\n PartInfo,\n PartType,\n} from '../directive.js';\n\n/**\n * A key-value set of CSS properties and values.\n *\n * The key should be either a valid CSS property name string, like\n * `'background-color'`, or a valid JavaScript camel case property name\n * for CSSStyleDeclaration like `backgroundColor`.\n */\nexport interface StyleInfo {\n readonly [name: string]: string | undefined | null;\n}\n\nclass StyleMapDirective extends Directive {\n _previousStyleProperties?: Set<string>;\n\n constructor(partInfo: PartInfo) {\n super(partInfo);\n if (\n partInfo.type !== PartType.ATTRIBUTE ||\n partInfo.name !== 'style' ||\n (partInfo.strings?.length as number) > 2\n ) {\n throw new Error(\n 'The `styleMap` directive must be used in the `style` attribute ' +\n 'and must be the only part in the attribute.'\n );\n }\n }\n\n render(styleInfo: StyleInfo) {\n return Object.keys(styleInfo).reduce((style, prop) => {\n const value = styleInfo[prop];\n if (value == null) {\n return style;\n }\n // Convert property names from camel-case to dash-case, i.e.:\n // `backgroundColor` -> `background-color`\n // Vendor-prefixed names need an extra `-` appended to front:\n // `webkitAppearance` -> `-webkit-appearance`\n // Exception is any property name containing a dash, including\n // custom properties; we assume these are already dash-cased i.e.:\n // `--my-button-color` --> `--my-button-color`\n prop = prop\n .replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, '-$&')\n .toLowerCase();\n return style + `${prop}:${value};`;\n }, '');\n }\n\n override update(part: AttributePart, [styleInfo]: DirectiveParameters<this>) {\n const {style} = part.element as HTMLElement;\n\n if (this._previousStyleProperties === undefined) {\n this._previousStyleProperties = new Set();\n for (const name in styleInfo) {\n this._previousStyleProperties.add(name);\n }\n return this.render(styleInfo);\n }\n\n // Remove old properties that no longer exist in styleInfo\n // We use forEach() instead of for-of so that re don't require down-level\n // iteration.\n this._previousStyleProperties!.forEach((name) => {\n // If the name isn't in styleInfo or it's null/undefined\n if (styleInfo[name] == null) {\n this._previousStyleProperties!.delete(name);\n if (name.includes('-')) {\n style.removeProperty(name);\n } else {\n // Note reset using empty string (vs null) as IE11 does not always\n // reset via null (https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style#setting_styles)\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (style as any)[name] = '';\n }\n }\n });\n\n // Add or update properties\n for (const name in styleInfo) {\n const value = styleInfo[name];\n if (value != null) {\n this._previousStyleProperties.add(name);\n if (name.includes('-')) {\n style.setProperty(name, value);\n } else {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (style as any)[name] = value;\n }\n }\n }\n return noChange;\n }\n}\n\n/**\n * A directive that applies CSS properties to an element.\n *\n * `styleMap` can only be used in the `style` attribute and must be the only\n * expression in the attribute. It takes the property names in the `styleInfo`\n * object and adds the property values as CSS properties. Property names with\n * dashes (`-`) are assumed to be valid CSS property names and set on the\n * element's style object using `setProperty()`. Names without dashes are\n * assumed to be camelCased JavaScript property names and set on the element's\n * style object using property assignment, allowing the style object to\n * translate JavaScript-style names to CSS property names.\n *\n * For example `styleMap({backgroundColor: 'red', 'border-top': '5px', '--size':\n * '0'})` sets the `background-color`, `border-top` and `--size` properties.\n *\n * @param styleInfo\n */\nexport const styleMap = directive(StyleMapDirective);\n\n/**\n * The type of the class that powers this directive. Necessary for naming the\n * directive's return type.\n */\nexport type {StyleMapDirective};\n"],"names":["styleMap","directive","Directive","constructor","partInfo","super","type","PartType","ATTRIBUTE","name","strings","length","Error","render","styleInfo","Object","keys","reduce","style","prop","value","replace","toLowerCase","update","part","element","undefined","this","_previousStyleProperties","Set","add","forEach","delete","includes","removeProperty","setProperty","noChange"],"mappings":";;;;;SA8HaA,EAAWC,EApGxB,cAAgCC,EAG9BC,YAAYC,SAEV,GADAC,MAAMD,GAEJA,EAASE,OAASC,EAASC,WACT,UAAlBJ,EAASK,iBACRL,EAASM,8BAASC,QAAoB,EAEvC,MAAUC,MACR,8GAMNC,OAAOC,GACL,OAAOC,OAAOC,KAAKF,GAAWG,QAAO,CAACC,EAAOC,KAC3C,MAAMC,EAAQN,EAAUK,GACxB,OAAa,MAATC,EACKF,EAYFA,EAAQ,GAHfC,EAAOA,EACJE,QAAQ,oCAAqC,OAC7CC,iBACuBF,OACzB,IAGIG,OAAOC,GAAsBV,IACpC,MAAMI,MAACA,GAASM,EAAKC,QAErB,QAAsCC,IAAlCC,KAAKC,GAAwC,CAC/CD,KAAKC,GAA2B,IAAIC,IACpC,IAAK,MAAMpB,KAAQK,EACjBa,KAAKC,GAAyBE,IAAIrB,GAEpC,OAAOkB,KAAKd,OAAOC,GAMrBa,KAAKC,GAA0BG,SAAStB,IAEf,MAAnBK,EAAUL,KACZkB,KAAKC,GAA0BI,OAAOvB,GAClCA,EAAKwB,SAAS,KAChBf,EAAMgB,eAAezB,GAKpBS,EAAcT,GAAQ,OAM7B,IAAK,MAAMA,KAAQK,EAAW,CAC5B,MAAMM,EAAQN,EAAUL,GACX,MAATW,IACFO,KAAKC,GAAyBE,IAAIrB,GAC9BA,EAAKwB,SAAS,KAChBf,EAAMiB,YAAY1B,EAAMW,GAGvBF,EAAcT,GAAQW,GAI7B,OAAOgB"}
|
