@oicl/openbridge-webcomponents 0.0.7 → 0.0.9

package/src/icons/icon-14-alertheader-aggregated-large.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-14-alertheader-aggregated-large')
+export class Obi14AlertheaderAggregatedLarge extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 6H11V11H6V13H11V18H13V13H18V11H13V6Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 6H11V11H6V13H11V18H13V13H18V11H13V6Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-14-alertheader-aggregated-large': Obi14AlertheaderAggregatedLarge;
+  }
+}

package/src/icons/icon-14-alertheader-group-large.ts

@@ -0,0 +1,42 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-14-alertheader-group-large')
+export class Obi14AlertheaderGroupLarge extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 3H9V7H13V9H9V13H7V9H3V7H7V3Z" fill="currentColor"/>
+<path d="M15 11H17V15H21V17H17V21H15V17H11V15H15V11Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 3H9V7H13V9H9V13H7V9H3V7H7V3Z" style="fill: var(--element-active-color)"/>
+<path d="M15 11H17V15H21V17H17V21H15V17H11V15H15V11Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-14-alertheader-group-large': Obi14AlertheaderGroupLarge;
+  }
+}

package/src/icons/icon-14-exclamationmark.ts

@@ -6,14 +6,14 @@ export class Obi14Exclamationmark extends LitElement {
   @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
 
   private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 14H15V2H10V14Z" fill="currentColor"/>
-<path d="M10 22H15V17H10V22Z" fill="currentColor"/>
+<path d="M10 14H14V4H10V14Z" fill="currentColor"/>
+<path d="M10 21H14V17H10V21Z" fill="currentColor"/>
 </svg>
 `;
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 14H15V2H10V14Z" style="fill: var(--element-active-color)"/>
-<path d="M10 22H15V17H10V22Z" style="fill: var(--element-active-color)"/>
+<path d="M10 14H14V4H10V14Z" style="fill: var(--element-active-color)"/>
+<path d="M10 21H14V17H10V21Z" style="fill: var(--element-active-color)"/>
 </svg>
 `;
 

package/src/icons/icon-14-rectified.ts

@@ -13,7 +13,7 @@ export class Obi14Rectified extends LitElement {
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" style="fill: var(--indent-enabled-border-color)" />
-<path d="M21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12Z" stroke="black" stroke-opacity="0.05"/>
+<path d="M21.5 12C21.5 17.2467 17.2467 21.5 12 21.5C6.75329 21.5 2.5 17.2467 2.5 12C2.5 6.75329 6.75329 2.5 12 2.5C17.2467 2.5 21.5 6.75329 21.5 12Z" style="stroke: var(--indent-enabled-border-color)" />
 </svg>
 `;
 

package/src/icons/icon-18-ais-anchored.ts

@@ -16,10 +16,10 @@ export class Obi18AisAnchored extends LitElement {
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <rect x="6.5" y="6.5" width="11" height="11" rx="5.5" fill="none"/>
-<rect x="6.5" y="6.5" width="11" height="11" rx="5.5" stroke="black"/>
-<path d="M14.5 12C14.5 12.3283 14.4353 12.6534 14.3097 12.9567C14.1841 13.26 13.9999 13.5356 13.7678 13.7678C13.5356 13.9999 13.26 14.1841 12.9567 14.3097C12.6534 14.4353 12.3283 14.5 12 14.5C11.6717 14.5 11.3466 14.4353 11.0433 14.3097C10.74 14.1841 10.4644 13.9999 10.2322 13.7678C10.0001 13.5356 9.81594 13.26 9.6903 12.9567C9.56466 12.6534 9.5 12.3283 9.5 12" stroke="black"/>
-<path d="M12 14L12 8" stroke="black"/>
-<path d="M10 10L14 10" stroke="black"/>
+<rect x="6.5" y="6.5" width="11" height="11" rx="5.5" stroke="currentColor"/>
+<path d="M14.5 12C14.5 12.3283 14.4353 12.6534 14.3097 12.9567C14.1841 13.26 13.9999 13.5356 13.7678 13.7678C13.5356 13.9999 13.26 14.1841 12.9567 14.3097C12.6534 14.4353 12.3283 14.5 12 14.5C11.6717 14.5 11.3466 14.4353 11.0433 14.3097C10.74 14.1841 10.4644 13.9999 10.2322 13.7678C10.0001 13.5356 9.81594 13.26 9.6903 12.9567C9.56466 12.6534 9.5 12.3283 9.5 12" stroke="currentColor"/>
+<path d="M12 14L12 8" stroke="currentColor"/>
+<path d="M10 10L14 10" stroke="currentColor"/>
 </svg>
 `;
 

package/src/icons/icon-18-ais-notunderway.ts

@@ -11,7 +11,7 @@ export class Obi18AisNotunderway extends LitElement {
 `;
 
   private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 8.68629L8.68629 4H15.3137L20 8.68629V15.3137L15.3137 20H8.68629L4 15.3137V8.68629Z" stroke="#1A1A1A" stroke-width="2"/>
+<path d="M4 8.68629L8.68629 4H15.3137L20 8.68629V15.3137L15.3137 20H8.68629L4 15.3137V8.68629Z" style="stroke: var(--element-active-color)" stroke-width="2"/>
 </svg>
 `;
 

package/src/icons/icon-iec-02-ais-target-activated-selected.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-iec-02-ais-target-activated-selected')
+export class ObiIEC02AisTargetActivatedSelected extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.40948 20L12 4.02709L17.5905 20H6.40948Z" stroke="black" stroke-width="2"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.40948 20L12 4.02709L17.5905 20H6.40948Z" stroke="currentColor" stroke-width="2"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-iec-02-ais-target-activated-selected': ObiIEC02AisTargetActivatedSelected;
+  }
+}

package/src/icons/icon-iec-02-ais-target-activated.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-iec-02-ais-target-activated')
+export class ObiIEC02AisTargetActivated extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1L5 21H19L12 1ZM12 7.05418L7.81896 19H16.181L12 7.05418Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1L5 21H19L12 1ZM12 7.05418L7.81896 19H16.181L12 7.05418Z" fill="currentColor"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-iec-02-ais-target-activated': ObiIEC02AisTargetActivated;
+  }
+}

package/src/icons/icon-iec-02-associated-target-ais.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-iec-02-associated-target-ais')
+export class ObiIEC02AssociatedTargetAis extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM18.3262 21C16.5368 22.2601 14.3548 23 12 23C9.64518 23 7.46319 22.2601 5.67384 21H18.3262ZM18.8598 20.5995L12 1C18.0751 1 23 5.92487 23 12C23 15.4808 21.3833 18.5839 18.8598 20.5995ZM5.14017 20.5995C2.6167 18.5839 1 15.4808 1 12C1 5.92487 5.92487 1 12 1L5.14017 20.5995ZM7.81896 19L12 7.05418L16.181 19H7.81896Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37258 5.37258 0 12 0C18.6274 0 24 5.37258 24 12ZM18.3262 21C16.5368 22.2601 14.3548 23 12 23C9.64518 23 7.46319 22.2601 5.67384 21H18.3262ZM18.8598 20.5995L12 1C18.0751 1 23 5.92487 23 12C23 15.4808 21.3833 18.5839 18.8598 20.5995ZM5.14017 20.5995C2.6167 18.5839 1 15.4808 1 12C1 5.92487 5.92487 1 12 1L5.14017 20.5995ZM7.81896 19L12 7.05418L16.181 19H7.81896Z" fill="currentColor"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-iec-02-associated-target-ais': ObiIEC02AssociatedTargetAis;
+  }
+}

package/src/icons/icon-iec-02-associated-target-radar.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-iec-02-associated-target-radar')
+export class ObiIEC02AssociatedTargetRadar extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12ZM13.5138 15.7036C13.0468 15.8947 12.5357 16 12 16C11.4643 16 10.9532 15.8947 10.4862 15.7036L12 11.1623L13.5138 15.7036ZM14.4001 15.2002L12 8C14.2091 8 16 9.79086 16 12C16 13.3086 15.3716 14.4705 14.4001 15.2002ZM9.59992 15.2002C8.62841 14.4705 8 13.3086 8 12C8 9.79086 9.79086 8 12 8L9.59992 15.2002Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12ZM13.5138 15.7036C13.0468 15.8947 12.5357 16 12 16C11.4643 16 10.9532 15.8947 10.4862 15.7036L12 11.1623L13.5138 15.7036ZM14.4001 15.2002L12 8C14.2091 8 16 9.79086 16 12C16 13.3086 15.3716 14.4705 14.4001 15.2002ZM9.59992 15.2002C8.62841 14.4705 8 13.3086 8 12C8 9.79086 9.79086 8 12 8L9.59992 15.2002Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-iec-02-associated-target-radar': ObiIEC02AssociatedTargetRadar;
+  }
+}

package/src/icons/icon-iec-02-radar-target-tracked-selected.ts

@@ -0,0 +1,48 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-iec-02-radar-target-tracked-selected')
+export class ObiIEC02RadarTargetTrackedSelected extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" fill="currentColor"/>
+<path d="M2 5V2H5V0H1C0.447715 0 0 0.447716 0 1V5H2Z" fill="currentColor"/>
+<path d="M2 19H0V23C0 23.5523 0.447716 24 1 24H5V22H2V19Z" fill="currentColor"/>
+<path d="M19 22V24H23C23.5523 24 24 23.5523 24 23V19H22V22H19Z" fill="currentColor"/>
+<path d="M22 5H24V1C24 0.447715 23.5523 0 23 0H19V2H22V5Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" style="fill: var(--element-active-color)"/>
+<path d="M2 5V2H5V0H1C0.447715 0 0 0.447716 0 1V5H2Z" style="fill: var(--element-active-color)"/>
+<path d="M2 19H0V23C0 23.5523 0.447716 24 1 24H5V22H2V19Z" style="fill: var(--element-active-color)"/>
+<path d="M19 22V24H23C23.5523 24 24 23.5523 24 23V19H22V22H19Z" style="fill: var(--element-active-color)"/>
+<path d="M22 5H24V1C24 0.447715 23.5523 0 23 0H19V2H22V5Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-iec-02-radar-target-tracked-selected': ObiIEC02RadarTargetTrackedSelected;
+  }
+}

package/src/icons/icon-iec-02-radar-target-tracked.ts

@@ -0,0 +1,40 @@
+import {LitElement, html, css, svg} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-iec-02-radar-target-tracked')
+export class ObiIEC02RadarTargetTracked extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) useCssColor = false;
+
+  private icon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" fill="currentColor"/>
+</svg>
+`;
+
+  private iconCss = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16ZM12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18Z" style="fill: var(--element-active-color)"/>
+</svg>
+`;
+
+  override render() {
+    return html`
+      <div class="wrapper">${this.useCssColor ? this.iconCss : this.icon}</div>
+    `;
+  }
+
+  static override styles = css`
+    .wrapper {
+      height: 100%;
+      width: 100%;
+    }
+    .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-iec-02-radar-target-tracked': ObiIEC02RadarTargetTracked;
+  }
+}

package/src/icons/index.ts

@@ -5,6 +5,9 @@ import './icon-01-check';
 import './icon-01-checkbox-checked';
 import './icon-01-checkbox-uncheck';
 import './icon-01-close';
+import './icon-01-content-copy';
+import './icon-01-content-cut';
+import './icon-01-content-paste';
 import './icon-01-delete';
 import './icon-01-edit';
 import './icon-01-expanditem';
@@ -57,6 +60,9 @@ import './icon-02-chevron-left';
 import './icon-02-chevron-right';
 import './icon-02-chevron-up';
 import './icon-02-collapse-content';
+import './icon-02-dock-bottom';
+import './icon-02-dock-left';
+import './icon-02-dock-right';
 import './icon-02-drop-down';
 import './icon-02-expand-content';
 import './icon-02-page-first';
@@ -74,6 +80,7 @@ import './icon-03-configure';
 import './icon-03-diagnostic';
 import './icon-03-filter';
 import './icon-03-info';
+import './icon-03-license';
 import './icon-03-monitoring';
 import './icon-03-pin-checked';
 import './icon-03-pin-unchecked';
@@ -172,12 +179,12 @@ import './icon-07-report-info';
 import './icon-07-route-planning';
 import './icon-07-silence';
 import './icon-07-smode';
+import './icon-07-target-associated-ais-camera';
+import './icon-07-target-associated-camera-radar';
+import './icon-07-target-associated-radar-camera';
+import './icon-07-target-camera';
 import './icon-07-target-cancel';
 import './icon-07-target-cancel-all';
-import './icon-07-target-ias';
-import './icon-07-target-ias-selected';
-import './icon-07-target-radar';
-import './icon-07-target-radar-selected';
 import './icon-07-target-select';
 import './icon-07-track';
 import './icon-07-track-no';
@@ -393,7 +400,9 @@ import './icon-14-alert-list';
 import './icon-14-alert-off';
 import './icon-14-alert-rectified';
 import './icon-14-alertheader-aggregated';
+import './icon-14-alertheader-aggregated-large';
 import './icon-14-alertheader-group';
+import './icon-14-alertheader-group-large';
 import './icon-14-alerts';
 import './icon-14-audio';
 import './icon-14-audio-low';
@@ -537,4 +546,10 @@ import './icon-20-wifi-wifi_statusbar_4';
 import './icon-20-wifi2';
 import './icon-20-wifi2-off';
 import './icon-frame2622';
+import './icon-iec-02-ais-target-activated';
+import './icon-iec-02-ais-target-activated-selected';
+import './icon-iec-02-associated-target-ais';
+import './icon-iec-02-associated-target-radar';
+import './icon-iec-02-radar-target-tracked';
+import './icon-iec-02-radar-target-tracked-selected';
 import './icon-temp';

package/src/icons/names.ts

@@ -6,6 +6,9 @@ export const iconIds: string[] = [
   '01-checkbox-checked',
   '01-checkbox-uncheck',
   '01-close',
+  '01-content-copy',
+  '01-content-cut',
+  '01-content-paste',
   '01-delete',
   '01-edit',
   '01-expanditem',
@@ -58,6 +61,9 @@ export const iconIds: string[] = [
   '02-chevron-right',
   '02-chevron-up',
   '02-collapse-content',
+  '02-dock-bottom',
+  '02-dock-left',
+  '02-dock-right',
   '02-drop-down',
   '02-expand-content',
   '02-page-first',
@@ -75,6 +81,7 @@ export const iconIds: string[] = [
   '03-diagnostic',
   '03-filter',
   '03-info',
+  '03-license',
   '03-monitoring',
   '03-pin-checked',
   '03-pin-unchecked',
@@ -173,12 +180,12 @@ export const iconIds: string[] = [
   '07-route-planning',
   '07-silence',
   '07-smode',
+  '07-target-associated-ais-camera',
+  '07-target-associated-camera-radar',
+  '07-target-associated-radar-camera',
+  '07-target-camera',
   '07-target-cancel',
   '07-target-cancel-all',
-  '07-target-ias',
-  '07-target-ias-selected',
-  '07-target-radar',
-  '07-target-radar-selected',
   '07-target-select',
   '07-track',
   '07-track-no',
@@ -396,7 +403,9 @@ export const iconIds: string[] = [
   '14-alert-off',
   '14-alert-rectified',
   '14-alertheader-aggregated',
+  '14-alertheader-aggregated-large',
   '14-alertheader-group',
+  '14-alertheader-group-large',
   '14-alerts',
   '14-audio',
   '14-audio-low',
@@ -538,5 +547,11 @@ export const iconIds: string[] = [
   '20-wifi2',
   '20-wifi2-off',
   'Frame2622',
+  'IEC-02-ais-target-activated',
+  'IEC-02-ais-target-activated-selected',
+  'IEC-02-associated-target-ais',
+  'IEC-02-associated-target-radar',
+  'IEC-02-radar-target-tracked',
+  'IEC-02-radar-target-tracked-selected',
   'temp',
 ];

package/src/icons.stories.ts

@@ -0,0 +1,78 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import './icons';
+import {html, unsafeStatic} from 'lit/static-html.js';
+import {iconIds} from './icons/names';
+
+const meta: Meta = {
+  title: 'Icons/icon',
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const List: Story = {
+  args: {
+    search: '',
+    useCssColor: true,
+  },
+  argTypes: {
+    search: {
+      control: {type: 'text', description: 'Search for icon'},
+    },
+    useCssColor: {
+      control: {type: 'boolean'},
+    },
+  },
+  render: (args) => {
+    const items = iconIds.filter((name) => name.includes(args.search));
+    return html`
+      <style>
+        .icon {
+          height: 32px;
+          display: inline-block;
+        }
+
+        .item {
+          display: flex;
+          align-items: center;
+          margin: 4px;
+          gap: 4px;
+        }
+      </style>
+      <div style="display: flex; flex-wrap: wrap; flex-direction: column">
+        ${items.map(
+          (name) =>
+            html`<div class="item"><${unsafeStatic(
+              `obi-${name}`
+            )} ?use-css-color=${args.useCssColor} class="icon"></${unsafeStatic(
+              `obi-${name}`
+            )}> &lt;obi-${name}&gt;</div>`
+        )}
+      </div>
+    `;
+  },
+};
+
+export const UseFontColor: Story = {
+  args: {
+    useCssColor: false,
+    name: '01-log-add',
+    size: 32,
+    color: 'green',
+  },
+  argTypes: {
+    name: {
+      options: iconIds,
+      control: {type: 'select'},
+    },
+    size: {
+      control: {type: 'range', min: 16, max: 128, step: 1},
+    },
+  },
+  render: (args) =>
+    html`<div style="height: ${args.size}px; color: ${args.color}">
+         <${unsafeStatic(`obi-${args.name}`)} ?use-css-color=${
+           args.useCssColor
+         } class="icon"></${unsafeStatic(`obi-${args.name}`)}> 
+         </div>`,
+};

package/src/navigation-instruments/thruster/thruster.stories.ts

@@ -2,15 +2,25 @@ import type {Meta, StoryObj} from '@storybook/web-components';
 import {ObcThruster} from './thruster';
 import './thruster';
 import {InstrumentState} from '../types';
+import {html} from 'lit';
 
 const meta: Meta<typeof ObcThruster> = {
   title: 'Navigation instruments/Thruster',
   tags: ['autodocs'],
   component: 'obc-thruster',
-  args: {},
+  args: {containerSize: 320},
   argTypes: {
     setpoint: {control: {type: 'range', min: -100, max: 100, step: 1}},
   },
+  decorators: [
+    (story, contex) => {
+      return html`<div
+        style="height: ${contex.args.containerSize}px; width: fit-content;"
+      >
+        ${story()}
+      </div>`;
+    },
+  ],
 } satisfies Meta<ObcThruster>;
 
 export default meta;
@@ -31,6 +41,13 @@ export const Tunnel: Story = {
     state: InstrumentState.inCommand,
     tunnel: true,
   },
+  decorators: [
+    (story, contex) => {
+      return html`<div style="width: ${contex.args.containerSize}px">
+        ${story()}
+      </div>`;
+    },
+  ],
 };
 
 export const InCommandAtSetpoint: Story = {