@roadtrip/components 2.37.0 → 2.40.0

package/dist/collection/components/stepper/stepper.css

@@ -0,0 +1,212 @@
+/*
+ * Stepper
+ *
+ * Index
+ * - Item
+ * - Link
+ * - Icon
+ * - Title
+ * - Completed
+ */
+
+:host {
+  display: block;
+}
+
+/* STEPPER
+ -------------------- */
+
+.stepper {
+  display: flex;
+  padding-left: 0;
+  margin: 0;
+  font-family: var(--road-font);
+  line-height: 1.5;
+  list-style: none;
+}
+
+/* STEPPER ITEM
+ -------------------- */
+
+.stepper-item {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  text-align: center;
+}
+
+/**
+ * Line between items
+ */
+
+
+.stepper-item:not(:last-child)::after {
+  position: relative;
+  top: 1rem;
+  left: 50%;
+  order: -1;
+  height: 2px;
+  content: "";
+  background: var(--road-grey-200);
+}
+
+.stepper-outline-light .stepper-item:not(:last-child)::after,
+.stepper-secondary-outline-light .stepper-item:not(:last-child)::after {
+  left: calc(50% + calc(2rem / 2));
+  width: calc(100% - 2rem);
+}
+
+/**
+ * Disabled click for current and next steps
+ */
+
+
+.stepper-item:not(.completed) .stepper-link {
+  cursor: not-allowed;
+}
+
+/* STEPPER LINK
+ -------------------- */
+
+.stepper-link {
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* STEPPER ICON
+ -------------------- */
+
+.stepper-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--road-grey-500);
+  background: var(--road-grey-200);
+  border-radius: 50%;
+  fill: currentColor;
+}
+
+::slotted(.stepper-icon) road-icon{
+  color: var(--road-secondary-600);
+}
+
+.stepper-outline .stepper-icon,
+.stepper-secondary.stepper-outline .stepper-icon {
+  width: calc(2rem - 4px);
+  height: calc(2rem - 4px);
+  color: var(--road-grey-500);
+  background: var(--road-grey-000);
+  border: 2px solid var(--road-grey-500);
+  fill: currentColor;
+}
+
+.stepper-outline-light .stepper-icon,
+.stepper-secondary.stepper-outline-light .stepper-icon {
+  color: var(--road-grey-500);
+  background: none;
+  border: 2px solid var(--road-grey-500);
+  fill: currentColor;
+}
+
+/* STEPPER TITLE
+ -------------------- */
+
+.stepper-title {
+  display: block;
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--road-grey-600);
+}
+
+.stepper-title span{
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: var(--road-grey-600);
+}
+
+/* STEP COMPLETED
+ -------------------- */
+
+.completed:not(:last-child)::after {
+  background: var(--road-primary-500);
+}
+
+.stepper-secondary .completed:not(:last-child)::after,
+.stepper-secondary.stepper-outline .completed:not(:last-child)::after,
+.stepper-secondary.stepper-outline-light .completed:not(:last-child)::after {
+  background: var(--road-secondary-600);
+}
+
+.completed .stepper-icon,
+.current .stepper-icon {
+  width: 2rem;
+  height: 2rem;
+  color: var(--road-primary-contrast);
+  background: var(--road-primary-500);
+  border: 0;
+}
+
+.stepper-outline .completed .stepper-icon {
+  color: var(--road-primary-500);
+  background: var(--road-grey-000);
+  border: 2px solid var(--road-primary-500);
+}
+
+.stepper-outline-light .completed .stepper-icon {
+  color: var(--road-primary-500);
+  background: none;
+  border: 2px solid var(--road-primary-500);
+}
+
+.stepper-secondary .completed .stepper-icon {
+  color: var(--road-grey-900);
+  background: var(--road-secondary-600);
+  border: 0;
+}
+
+.stepper-secondary.stepper-outline .completed .stepper-icon {
+  width: calc(2rem - 4px);
+  height: calc(2rem - 4px);
+  color: var(--road-secondary-600);
+  background: var(--road-grey-000);
+  border: 2px solid var(--road-secondary-600);
+}
+
+.stepper-secondary.stepper-outline-light .completed .stepper-icon {
+  width: calc(2rem - 4px);
+  height: calc(2rem - 4px);
+  color: var(--road-secondary-600);
+  background: none;
+  border: 2px solid var(--road-secondary-600);
+}
+
+.stepper-secondary .current .stepper-icon {
+  width: calc(2rem - 4px);
+  height: calc(2rem - 4px);
+  color: var(--road-grey-900);
+  background: var(--road-secondary-600);
+  border: 2px solid var(--road-secondary-600);
+}
+
+.stepper-secondary.stepper-outline .current .stepper-icon {
+  color: var(--road-grey-900);
+  background: var(--road-secondary-600);
+}
+
+.stepper-secondary.stepper-outline-light .current .stepper-icon {
+  color: var(--road-grey-900);
+  background: var(--road-secondary-600);
+}
+
+.current .stepper-title {
+  font-weight: 700;
+  color: var(--road-grey-900);
+}

package/dist/collection/components/stepper/stepper.js

@@ -0,0 +1,181 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+/**
+ * @slot stepper-icon - if the state of the step 1 is completed add
+ * `<road-icon name="check-small" class="d-block" color="white"></road-icon>` by default.
+ * `<road-icon name="check-small" class="d-block" color="secondary"></road-icon>` if is outline.
+ * `<road-icon name="check-small" class="d-block" color="defaut"></road-icon>` if the color is secondary.
+ * `<road-icon name="check-small" class="d-block" color="warning"></road-icon>` if the color is secondary and outline.
+ * @slot stepper-title - content not visible when collapsed.
+ * @slot stepper-icon2 - content not visible when collapsed.
+ * `<road-icon name="check-small" class="d-block" color="white"></road-icon>` by default.
+ * `<road-icon name="check-small" class="d-block" color="secondary"></road-icon>` if is outline.
+ * `<road-icon name="check-small" class="d-block" color="defaut"></road-icon>` if the color is secondary.
+ * `<road-icon name="check-small" class="d-block" color="warning"></road-icon>` if the color is secondary and outline.
+ * @slot stepper-title2 - content not visible when collapsed.
+ * @slot stepper-icon3 - content not visible when collapsed.
+ * `<road-icon name="check-small" class="d-block" color="white"></road-icon>` by default.
+ * `<road-icon name="check-small" class="d-block" color="secondary"></road-icon>` if is outline.
+ * `<road-icon name="check-small" class="d-block" color="defaut"></road-icon>` if the color is secondary.
+ * `<road-icon name="check-small" class="d-block" color="warning"></road-icon>` if the color is secondary and outline.
+ * @slot stepper-title3 - content not visible when collapsed.
+ */
+export class Stepper {
+  constructor() {
+    /**
+      * The color stepper.
+      */
+    this.color = 'default';
+    /**
+   * Display an outline without background.
+   */
+    this.light = false;
+    /**
+   * Display an outline style .
+   */
+    this.outline = false;
+  }
+  render() {
+    const colorClass = this.color !== undefined ? `stepper stepper-${this.color}` : 'stepper';
+    const outlineClass = this.outline == true ? `stepper stepper-outline` : 'stepper';
+    const lightClass = this.light == true ? `stepper stepper-outline-light` : 'stepper';
+    const stateClass = this.stateFirstStep !== undefined ? `stepper-item ${this.stateFirstStep}` : 'stepper-item';
+    const stateSecondStepClass = this.stateSecondStep !== undefined ? `stepper-item ${this.stateSecondStep}` : 'stepper-item';
+    const stateThirdStepClass = this.stateSecondStep !== undefined ? `stepper-item ${this.stateThirdStep}` : 'stepper-item';
+    return (h(Host, null,
+      h("nav", null,
+        h("ul", { class: `${colorClass} ${outlineClass} ${lightClass}` },
+          h("li", { class: `${stateClass}` },
+            h("a", { class: "stepper-link" },
+              h("span", { class: "stepper-icon" },
+                h("slot", { name: "stepper-icon" })),
+              h("span", { class: "stepper-title" },
+                h("slot", { name: "stepper-title" })))),
+          h("li", { class: `${stateSecondStepClass}` },
+            h("a", { class: "stepper-link" },
+              h("span", { class: "stepper-icon" },
+                h("slot", { name: "stepper-icon2" })),
+              h("span", { class: "stepper-title" },
+                h("slot", { name: "stepper-title2" })))),
+          h("li", { class: `${stateThirdStepClass}` },
+            h("a", { class: "stepper-link" },
+              h("span", { class: "stepper-icon" },
+                h("slot", { name: "stepper-icon3" })),
+              h("span", { class: "stepper-title" },
+                h("slot", { name: "stepper-title3" }))))))));
+  }
+  static get is() { return "road-stepper"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["stepper.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["stepper.css"]
+  }; }
+  static get properties() { return {
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'secondary'",
+        "resolved": "\"default\" | \"secondary\" | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The color stepper."
+      },
+      "attribute": "color",
+      "reflect": true,
+      "defaultValue": "'default'"
+    },
+    "light": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Display an outline without background."
+      },
+      "attribute": "light",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "outline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Display an outline style ."
+      },
+      "attribute": "outline",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "stateFirstStep": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'current' | 'comleted'",
+        "resolved": "\"comleted\" | \"current\" | \"default\" | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The color of the first step."
+      },
+      "attribute": "state-first-step",
+      "reflect": false
+    },
+    "stateSecondStep": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'current' | 'comleted'",
+        "resolved": "\"comleted\" | \"current\" | \"default\" | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The color of the second step."
+      },
+      "attribute": "state-second-step",
+      "reflect": false
+    },
+    "stateThirdStep": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'default' | 'current' | 'comleted'",
+        "resolved": "\"comleted\" | \"current\" | \"default\" | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "The color of the third step."
+      },
+      "attribute": "state-third-step",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/stepper/stepper.stories.js

@@ -0,0 +1,201 @@
+import { html } from 'lit-html';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+
+export default {
+  title: 'Indicators/Stepper',
+  component: 'road-stepper',
+  argTypes: {
+    color: {
+      options: ['default', 'secondary'],
+      control: {
+        type: 'select',
+      },
+    },
+    outline: {
+      control: 'boolean',
+    },
+    light: {
+      control: 'boolean',
+    },
+    'state-first-step': {
+      options: ['default', 'current', 'completed'],
+      control: {
+        type: 'select',
+      },
+    },
+    'state-second-step': {
+      options: ['default', 'current', 'completed'],
+      control: {
+        type: 'select',
+      },
+    },
+    'state-third-step': {
+      options: ['default', 'current', 'completed'],
+      control: {
+        type: 'select',
+      },
+    },
+    'stepper-icon': {
+      control: 'text',
+    },
+    'stepper-title': {
+      control: 'text',
+    },
+    'stepper-icon2': {
+      control: 'text',
+    },
+    'stepper-title2': {
+      control: 'text',
+    },
+    'stepper-icon3': {
+      control: 'text',
+    },
+    'stepper-title3': {
+      control: 'text',
+    },
+  },
+  args: {
+    color: 'default',
+    'state-first-step': 'default',
+    'state-second-step': 'default',
+    'state-third-step': 'default',
+    outline: null,
+    light: null,
+    'stepper-icon': `1`,
+    'stepper-title': `First step`,
+    'stepper-icon2': `2`,
+    'stepper-title2': `Second step`,
+    'stepper-icon3': `3`,
+    'stepper-title3': `Third step`,
+  },
+};
+
+export const Template = (args) => html`
+  <road-stepper color="${ifDefined(args.color)}" outline="${ifDefined(args.outline)}" light="${ifDefined(args.light)}" state-first-step="${ifDefined(args['state-first-step'])}" state-second-step="${ifDefined(args['state-second-step'])}" state-third-step="${ifDefined(args['state-third-step'])}">
+    <div slot="stepper-icon">
+      ${unsafeHTML(args['stepper-icon'])}
+    </div>
+    <div slot="stepper-title">
+      ${unsafeHTML(args['stepper-title'])}
+      </div>
+      <div slot="stepper-icon2">
+      ${unsafeHTML(args['stepper-icon2'])}
+    </div>
+      <div slot="stepper-title2">
+      ${unsafeHTML(args['stepper-title2'])}
+      </div>
+      <div slot="stepper-icon3">
+      ${unsafeHTML(args['stepper-icon3'])}
+    </div>
+    <div slot="stepper-title3">
+      ${unsafeHTML(args['stepper-title3'])}
+      </div>
+  </road-stepper>
+`;
+
+export const withoutlabel = (args) => html`
+  <road-stepper color="${ifDefined(args.color)}" outline="${ifDefined(args.outline)}" light="${ifDefined(args.light)}" state-first-step="${ifDefined(args['state-first-step'])}" state-second-step="${ifDefined(args['state-second-step'])}" state-third-step="${ifDefined(args['state-third-step'])}">
+    <div slot="stepper-icon">
+      ${unsafeHTML(args['stepper-icon'])}
+    </div>
+      <div slot="stepper-icon2">
+      ${unsafeHTML(args['stepper-icon2'])}
+    </div>
+      <div slot="stepper-icon3">
+      ${unsafeHTML(args['stepper-icon3'])}
+    </div>
+  </road-stepper>
+`;
+
+export const primary = (args) => html`
+  <road-stepper color="default" outline="false" state-first-step="current" state-second-step="default" state-third-step="default">
+  <div slot="stepper-icon">
+  ${unsafeHTML(args['stepper-icon'])}
+  </div>
+  <div slot="stepper-title">
+    ${unsafeHTML(args['stepper-title'])}
+    </div>
+    <div slot="stepper-icon2">
+    ${unsafeHTML(args['stepper-icon2'])}
+  </div>
+    <div slot="stepper-title2">
+    ${unsafeHTML(args['stepper-title2'])}
+    </div>
+    <div slot="stepper-icon3">
+    ${unsafeHTML(args['stepper-icon3'])}
+  </div>
+  <div slot="stepper-title3">
+    ${unsafeHTML(args['stepper-title3'])}
+    </div>
+  </road-stepper>
+`;
+
+export const secondary = (args) => html`
+  <road-stepper color="secondary" outline="false" state-first-step="current" state-second-step="default" state-third-step="default">
+  <div slot="stepper-icon">
+  ${unsafeHTML(args['stepper-icon'])}
+  </div>
+  <div slot="stepper-title">
+    ${unsafeHTML(args['stepper-title'])}
+    </div>
+    <div slot="stepper-icon2">
+    ${unsafeHTML(args['stepper-icon2'])}
+  </div>
+    <div slot="stepper-title2">
+    ${unsafeHTML(args['stepper-title2'])}
+    </div>
+    <div slot="stepper-icon3">
+    ${unsafeHTML(args['stepper-icon3'])}
+  </div>
+  <div slot="stepper-title3">
+    ${unsafeHTML(args['stepper-title3'])}
+    </div>
+  </road-stepper>
+`;
+
+export const stepcompleted = (args) => html`
+  <road-stepper color="secondary" outline="false" state-first-step="completed" state-second-step="current" state-third-step="default">
+  <div slot="stepper-icon">
+    <road-icon name="check-small" class="d-block" color="default"></road-icon>
+  </div>
+  <div slot="stepper-title">
+    ${unsafeHTML(args['stepper-title'])}
+    </div>
+    <div slot="stepper-icon2">
+    ${unsafeHTML(args['stepper-icon2'])}
+  </div>
+    <div slot="stepper-title2">
+    ${unsafeHTML(args['stepper-title2'])}
+    </div>
+    <div slot="stepper-icon3">
+    ${unsafeHTML(args['stepper-icon3'])}
+  </div>
+  <div slot="stepper-title3">
+    ${unsafeHTML(args['stepper-title3'])}
+    </div>
+  </road-stepper>
+`;
+
+export const outline = (args) => html`
+  <road-stepper color="default" outline="true" state-first-step="current" state-second-step="default" state-third-step="default">
+  <div slot="stepper-icon">
+  ${unsafeHTML(args['stepper-icon'])}
+  </div>
+  <div slot="stepper-title">
+    ${unsafeHTML(args['stepper-title'])}
+    </div>
+    <div slot="stepper-icon2">
+    ${unsafeHTML(args['stepper-icon2'])}
+  </div>
+    <div slot="stepper-title2">
+    ${unsafeHTML(args['stepper-title2'])}
+    </div>
+    <div slot="stepper-icon3">
+    ${unsafeHTML(args['stepper-icon3'])}
+  </div>
+  <div slot="stepper-title3">
+    ${unsafeHTML(args['stepper-title3'])}
+    </div>
+  </road-stepper>
+`;

package/dist/esm/{index-9d859bfd.js → index-3e2c0645.js}

@@ -1,10 +1,10 @@
 const alertDangerOutline = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="M40.115 55.5h-15.74a4.222 4.222 0 0 1-3.005-1.245l-11.13-11.13a4.222 4.222 0 0 1-1.245-3.005V24.38a4.222 4.222 0 0 1 1.245-3l11.13-11.13a4.222 4.222 0 0 1 3.005-1.245h15.74a4.222 4.222 0 0 1 3.005 1.245l11.13 11.13a4.222 4.222 0 0 1 1.245 3v15.74a4.222 4.222 0 0 1-1.245 3.005l-11.13 11.13a4.222 4.222 0 0 1-3.005 1.245Zm-15.74-44a1.738 1.738 0 0 0-1.237.513l-11.13 11.13a1.738 1.738 0 0 0-.513 1.237v15.74a1.742 1.742 0 0 0 .513 1.238l11.13 11.129a1.738 1.738 0 0 0 1.237.513h15.74a1.738 1.738 0 0 0 1.237-.513l11.13-11.129a1.742 1.742 0 0 0 .513-1.238V24.38a1.738 1.738 0 0 0-.513-1.237l-11.13-11.13a1.738 1.738 0 0 0-1.237-.513Z"/><path d="M30.75 21.368h3v14.003h-3zm0 18.435h3v3.329h-3z"/></svg>';
 const alertDanger = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="m54.255 21.375-11.13-11.13A4.222 4.222 0 0 0 40.12 9H24.38a4.222 4.222 0 0 0-3 1.245l-11.135 11.13a4.222 4.222 0 0 0-1.245 3V40.12a4.222 4.222 0 0 0 1.245 3.005l11.13 11.13a4.222 4.222 0 0 0 3 1.245H40.12a4.222 4.222 0 0 0 3.005-1.245l11.13-11.13A4.222 4.222 0 0 0 55.5 40.12V24.38a4.222 4.222 0 0 0-1.245-3.005ZM33.75 43.132h-3v-3.329h3Zm0-7.761h-3v-14h3Z"/></svg>';
-const alertInfoOutline = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="M33.75 29.128h-3v14.004h3V29.128ZM33.75 21.368h-3v3.328h3v-3.328Z"/><path d="M32.25 55.5A23.276 23.276 0 0 1 9 32.25 23.276 23.276 0 0 1 32.25 9 23.276 23.276 0 0 1 55.5 32.25 23.276 23.276 0 0 1 32.25 55.5Zm0-44A20.774 20.774 0 0 0 11.5 32.25 20.773 20.773 0 0 0 32.25 53 20.774 20.774 0 0 0 53 32.25 20.774 20.774 0 0 0 32.25 11.5Z"/></svg>';
+const alertInfoOutline = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="M33.75 29.128h-3v14.004h3V29.128Zm0-7.76h-3v3.328h3v-3.328Z"/><path d="M32.25 55.5A23.276 23.276 0 0 1 9 32.25 23.276 23.276 0 0 1 32.25 9 23.276 23.276 0 0 1 55.5 32.25 23.276 23.276 0 0 1 32.25 55.5Zm0-44A20.774 20.774 0 0 0 11.5 32.25 20.773 20.773 0 0 0 32.25 53 20.774 20.774 0 0 0 53 32.25 20.774 20.774 0 0 0 32.25 11.5Z"/></svg>';
 const alertInfo = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="M32.25 9A23.25 23.25 0 1 0 55.5 32.25 23.276 23.276 0 0 0 32.25 9Zm1.5 34.132h-3v-14h3Zm0-18.436h-3v-3.328h3Z"/></svg>';
 const alertSuccessOutline = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="M32.25 55.5A23.276 23.276 0 0 1 9 32.25 23.276 23.276 0 0 1 32.25 9 23.276 23.276 0 0 1 55.5 32.25 23.276 23.276 0 0 1 32.25 55.5Zm0-44A20.774 20.774 0 0 0 11.5 32.25 20.774 20.774 0 0 0 32.25 53 20.773 20.773 0 0 0 53 32.25 20.774 20.774 0 0 0 32.25 11.5Z"/><path d="m29.53 40.779-6.964-6.963 1.768-1.768 5.2 5.2 12.637-12.64 1.768 1.768Z"/></svg>';
 const alertSuccess = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="M32.25 9A23.25 23.25 0 1 0 55.5 32.25 23.276 23.276 0 0 0 32.25 9Zm-2.721 31.779-6.963-6.962 1.767-1.767 5.2 5.195 12.633-12.64 1.768 1.767Z"/></svg>';
-const alertWarningOutline = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="M34.295 23.155h-3v14.003h3V23.155ZM34.295 41.59h-3v3.329h3V41.59Z"/><path d="M53.334 53.074H12.256a4.206 4.206 0 0 1-3.68-2.125 4.21 4.21 0 0 1 0-4.25l20.539-35.574A4.208 4.208 0 0 1 32.795 9a4.208 4.208 0 0 1 3.681 2.125L57.015 46.7a4.21 4.21 0 0 1 0 4.25 4.208 4.208 0 0 1-3.681 2.125ZM32.795 11.5a1.73 1.73 0 0 0-1.515.875L10.741 47.95a1.734 1.734 0 0 0 0 1.75 1.734 1.734 0 0 0 1.515.875h41.078a1.733 1.733 0 0 0 1.516-.875 1.734 1.734 0 0 0 0-1.75L34.311 12.375a1.733 1.733 0 0 0-1.516-.875Z"/></svg>';
+const alertWarningOutline = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="M34.295 23.155h-3v14.003h3V23.155Zm0 18.435h-3v3.329h3V41.59Z"/><path d="M53.334 53.074H12.256a4.206 4.206 0 0 1-3.68-2.125 4.21 4.21 0 0 1 0-4.25l20.539-35.574A4.208 4.208 0 0 1 32.795 9a4.208 4.208 0 0 1 3.681 2.125L57.015 46.7a4.21 4.21 0 0 1 0 4.25 4.208 4.208 0 0 1-3.681 2.125ZM32.795 11.5a1.73 1.73 0 0 0-1.515.875L10.741 47.95a1.734 1.734 0 0 0 0 1.75 1.734 1.734 0 0 0 1.515.875h41.078a1.733 1.733 0 0 0 1.516-.875 1.734 1.734 0 0 0 0-1.75L34.311 12.375a1.733 1.733 0 0 0-1.516-.875Z"/></svg>';
 const alertWarning = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="m57.016 46.699-20.54-35.574A4.205 4.205 0 0 0 32.796 9a4.208 4.208 0 0 0-3.68 2.125L8.576 46.699a4.251 4.251 0 0 0 3.681 6.375h41.078a4.25 4.25 0 0 0 3.681-6.375Zm-22.72-1.78h-3V41.59h3Zm0-7.761h-3v-14h3Z"/></svg>';
 const checkWide = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="m25.59 39.75-8.34-8.34-2.84 2.82 11.18 11.18 24-24-2.82-2.82Z"/></svg>';
 const licensePlateStarEu = 'data:image/svg+xml;utf8,<svg viewBox="0 0 64 64"><path d="m22.457 49.187-.774-2.406-.773 2.406h-2.523l2.013 1.489-.774 2.406 2.038-1.482 2.046 1.474-.773-2.407 2.042-1.481ZM19.66 17.173l2.058-1.493 2.042 1.481-.773-2.406 2.042-1.482h-2.522l-.774-2.406-.773 2.406-2.569.012 2.043 1.482Zm-5.66.99-.774 2.406H10.7l2.023 1.482-.774 2.406L14 22.975l2.027 1.466-.774-2.406 2.047-1.466h-2.529ZM32.743 52.1l-.774-2.406-.774 2.406H28.65l2.043 1.482-.774 2.406 2.042-1.488L34 55.984l-.774-2.406 2.047-1.478Zm-2.735-37.79 2.042-1.481 2.043 1.481-.774-2.41 2.043-1.481h-2.523l-.773-2.407-.774 2.407h-2.553l2.042 1.481ZM14.647 41.644l-.774-2.406-.773 2.406h-2.523l2.043 1.481-.774 2.406 2.043-1.481 2.042 1.481-.8-2.406 2.043-1.481Zm-3.613-8.139 2.042 1.481-.776-2.406 2.045-1.48h-2.514l-.774-2.406-.774 2.406H7.761l2 1.481-.774 2.406Zm37.004-8.982 2.039-1.49 2.042 1.482-.774-2.406 2.043-1.482h-2.522l-.774-2.406-.774 2.406-2.549.008 2.043 1.481Zm2.828 17.194-.774-2.406-.774 2.406H46.8l2.039 1.483-.774 2.4 2.043-1.482L52.15 45.6l-.785-2.4 2.042-1.482Zm5.373-10.529h-2.522l-.774-2.406-.774 2.406h-2.522l2.043 1.481-.774 2.406 2.043-1.481L55 35.075l-.8-2.406ZM42.367 10.9l-.774 2.407h-2.522l2.047 1.493-.774 2.4 2.042-1.482 2.043 1.482-.774-2.406 2.062-1.489h-2.576Zm.642 38.329-.773-2.406-.774 2.406h-2.5L41 50.711l-.774 2.406 2.042-1.481 2.043 1.481-.824-2.406 2.042-1.482Z"/></svg>';