Fix for las vegas layout (#316)

* Fix for las vegas layout

* Version up and minify

package.json

@@ -1,6 +1,6 @@
 {
   "name": "formulaone-card",
-  "version": "1.8.8",
+  "version": "1.8.9",
   "description": "Frontend card for Home Assistant to display Formula One data",
   "main": "index.js",
   "scripts": {
@@ -31,6 +31,8 @@
     "eslint": "^8.52.0",
     "home-assistant-js-websocket": "^9.1.0",
     "lit": "^3.0.2",
+    "lit-element": "^3.3.3",
+    "minify-html-literals-loader": "^1.1.1",
     "typescript": "^4.9.5",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4"
@@ -47,6 +49,7 @@
     "jest-environment-jsdom": "^29.6.2",
     "jest-fetch-mock": "^3.0.3",
     "jest-ts-auto-mock": "^2.1.0",
+    "minify-html-literals-loader": "^1.1.1",
     "ts-auto-mock": "^3.6.4",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.5.0",

src/directives/action-handler-directive.ts

@@ -1,9 +1,9 @@
 /* istanbul ignore file */
-import { noChange } from 'lit';
 import { AttributePart, directive, Directive, DirectiveParameters } from 'lit/directive.js';
 import { ActionHandlerDetail, ActionHandlerOptions } from 'custom-card-helpers/dist/types';
 import { fireEvent } from 'custom-card-helpers';
 import { ActionHandlerElement } from '../types/formulaone-card-types';
+import { noChange } from 'lit-element';
 
 const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.maxTouchPoints > 0;
 

src/editor.ts

@@ -1,11 +1,10 @@
-import { css } from "lit";
 import { html, TemplateResult } from "lit-html";
-import { customElement } from 'lit/decorators.js';
 import { CARD_EDITOR_NAME } from "./consts";
 import { CountdownType, FormulaOneCardType, PreviousRaceDisplay, WeatherUnit } from "./types/formulaone-card-types";
 import EditorForm from '@marcokreeft/ha-editor-formbuilder'
 import { FormControlType } from "@marcokreeft/ha-editor-formbuilder/dist/interfaces";
 import { getDropdownOptionsFromEnum } from "@marcokreeft/ha-editor-formbuilder/dist/utils/entities";
+import { css, CSSResult, customElement } from "lit-element";
 
 @customElement(CARD_EDITOR_NAME)
 export class FormulaOneCardEditor extends EditorForm {
@@ -93,7 +92,7 @@ export class FormulaOneCardEditor extends EditorForm {
         ]);
     }
 
-    static get styles() {
+    static get styles() : CSSResult {
         return css`
             .form-row {
                 margin-bottom: 10px;

src/types/formulaone-card-types.ts

@@ -1,5 +1,5 @@
 import { ActionConfig, ActionHandlerOptions, HomeAssistant, LovelaceCardConfig } from 'custom-card-helpers';
-import { HTMLTemplateResult } from 'lit';
+import { HTMLTemplateResult } from 'lit-element';
 
 export interface FormulaOneCardConfig extends LovelaceCardConfig {
     show_icon?: boolean;

src/utils.ts

@@ -87,9 +87,9 @@ export const getCircuitName = (location: Location) => {
         circuitName = exception[0].name; 
     }
 
-    if(location.country == 'USA' && location.locality != 'Austin')
+    if((location.country == 'USA' || location.country == 'United States') && location.locality != 'Austin')
     {
-        circuitName = location.locality;
+        circuitName = location.locality.replace(" ","_");
     }
 
     if(location.country == 'Italy' && location.locality == 'Imola')

webpack.config.js

@@ -24,6 +24,12 @@ module.exports = {
                     },
                 },
             },
+            {
+                test: /\.(js|jsx|ts|tsx)$/,
+                use: [
+                  { loader: 'minify-html-literals-loader' }
+                ],
+            },
             { test: /\.tsx?$/, loader: "ts-loader" }
         ],
     },