@oicl/openbridge-webcomponents 0.0.12 → 0.0.14

package/src/components/badge/badge.css

@@ -0,0 +1,103 @@
+* {
+    box-sizing: border-box;
+}
+
+.wrapper {
+    display: flex;
+    align-items: center;
+    height: 16px;
+    width: fit-content;
+    padding-left: 1px;
+    padding-right: 1px;
+
+    border-radius: 2px;
+    border-width: 1px;
+    border-style: solid;
+
+
+    &.size-regular {
+        height: 16px;
+
+        & .number {
+            @mixin font-label-active;
+            margin-top: -1px;
+        }
+    }
+
+    &.size-large {
+        height: 24px;
+        
+        & .number {
+            @mixin font-body-active;
+        }
+    }
+
+    &.type-regular {
+        @mixin style style=normal noClick;
+        color: var(--on-normal-neutral-color);
+    }
+
+    &.type-alarm {
+        background-color: var(--alarm-enabled-background-color);
+        border-color: var(--alarm-enabled-background-color);
+        color: var(--on-alarm-active-color);
+    }
+
+    &.type-warning {
+        background-color: var(--warning-enabled-background-color);
+        border-color: var(--warning-enabled-background-color);
+        color: var(--on-warning-active-color);
+    }
+
+    &.type-caution {
+        background-color: var(--caution-enabled-background-color);
+        border-color: var(--caution-enabled-background-color);
+        color: var(--on-caution-active-color);
+    }
+
+    &.type-running {
+        background-color: var(--running-enabled-background-color);
+        border-color: var(--running-enabled-background-color);
+        color: var(--on-running-active-color);
+    }
+
+    &.type-notification {
+        background-color: var(--notification-enabled-background-color);
+        border-color: var(--notification-enabled-background-color);
+        color: var(--on-notification-active-color);
+    }
+
+    &.type-enhance {
+        background-color: var(--instrument-enhanced-secondary-color);
+        border-color: var(--instrument-enhanced-secondary-color);
+        color: var(--on-selected-active-color);
+    }
+
+
+    &.type-flat {
+        background-color: var(--flat-enabled-background-color);
+        border-color: var(--flat-enabled-background-color);
+        color: var(--on-flat-neutral-color);
+    }
+
+    &.type-empty {
+        background-color: var(--flat-enabled-background-color);
+        border-color: var(--normal-enabled-border-color);
+        width: 28px;
+    }
+
+    &.type-automation {
+        background-color: var(--container-background-color);
+        border-color: var(--container-background-color);
+        color: var(--on-flat-neutral-color);
+    }
+
+    .icon {
+        height: calc(100% - 2px);
+    }
+
+    .number {
+        min-width: 12px;
+        text-align: center;
+    }
+}

package/src/components/badge/badge.stories.ts

@@ -0,0 +1,119 @@
+import type {Meta, StoryObj} from '@storybook/web-components';
+import {ObcBadge} from './badge';
+import './badge';
+import {html} from 'lit';
+import '../../icons/icon-01-placeholder';
+
+const meta: Meta<typeof ObcBadge> = {
+  title: 'Automation/Badge',
+  tags: ['autodocs'],
+  component: 'obc-badge',
+  args: {
+    number: 9,
+  },
+} satisfies Meta<ObcBadge>;
+
+export default meta;
+type Story = StoryObj<ObcBadge>;
+
+export const Regular: Story = {
+  render(args) {
+    return html`<obc-badge number=${args.number} size="regular">
+      <obi-01-placeholder></obi-01-placeholder>
+    </obc-badge>`;
+  },
+};
+
+export const Large: Story = {
+  render(args) {
+    return html`<obc-badge number=${args.number} size="large">
+      <obi-01-placeholder></obi-01-placeholder>
+    </obc-badge>`;
+  },
+};
+
+export const NoNumber: Story = {
+  render() {
+    return html`<obc-badge hide-number size="regular">
+      <obi-01-placeholder></obi-01-placeholder>
+    </obc-badge>`;
+  },
+};
+
+export const NoNumberLarge: Story = {
+  render() {
+    return html`<obc-badge hide-number size="large">
+      <obi-01-placeholder></obi-01-placeholder>
+    </obc-badge>`;
+  },
+};
+
+export const Alarm: Story = {
+  render(args) {
+    return html`<obc-badge number=${args.number} type="alarm">
+      <obi-01-placeholder></obi-01-placeholder>
+    </obc-badge>`;
+  },
+};
+
+export const Warning: Story = {
+  render(args) {
+    return html`<obc-badge number=${args.number} type="warning">
+      <obi-01-placeholder></obi-01-placeholder>
+    </obc-badge>`;
+  },
+};
+
+export const Caution: Story = {
+  render(args) {
+    return html`<obc-badge number=${args.number} type="caution">
+      <obi-01-placeholder></obi-01-placeholder>
+    </obc-badge>`;
+  },
+};
+
+export const Running: Story = {
+  render(args) {
+    return html`<obc-badge number=${args.number} type="running">
+      <obi-01-placeholder></obi-01-placeholder>
+    </obc-badge>`;
+  },
+};
+
+export const Notification: Story = {
+  render(args) {
+    return html`<obc-badge number=${args.number} type="notification">
+      <obi-01-placeholder></obi-01-placeholder>
+    </obc-badge>`;
+  },
+};
+
+export const Enhance: Story = {
+  render(args) {
+    return html`<obc-badge number=${args.number} type="enhance">
+      <obi-01-placeholder></obi-01-placeholder>
+    </obc-badge>`;
+  },
+};
+
+export const Flat: Story = {
+  render(args) {
+    return html`<obc-badge number=${args.number} type="flat">
+      <obi-01-placeholder></obi-01-placeholder>
+    </obc-badge>`;
+  },
+};
+
+export const Empty: Story = {
+  render(args) {
+    return html`<obc-badge number=${args.number} type="empty"> </obc-badge>`;
+  },
+};
+
+export const Automation: Story = {
+  render() {
+    return html`<obc-badge hide-number type="automation">
+      <obi-01-placeholder></obi-01-placeholder>
+    </obc-badge>`;
+  },
+};

package/src/components/badge/badge.ts

@@ -0,0 +1,59 @@
+import {LitElement, html, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+import compentStyle from './badge.css?inline';
+import {classMap} from 'lit/directives/class-map.js';
+
+export enum BadgeSize {
+  regular = 'regular',
+  large = 'large',
+}
+
+export enum BadgeType {
+  alarm = 'alarm',
+  warning = 'warning',
+  caution = 'caution',
+  running = 'running',
+  notification = 'notification',
+  enhance = 'enhance',
+  regular = 'regular',
+  flat = 'flat',
+  empty = 'empty',
+  automation = 'automation',
+}
+
+@customElement('obc-badge')
+export class ObcBadge extends LitElement {
+  @property({type: Number}) number = 0;
+  @property({type: Boolean, attribute: 'hide-number'}) hideNumber = false;
+  @property({type: String}) size: BadgeSize = BadgeSize.regular;
+  @property({type: String}) type: BadgeType = BadgeType.regular;
+
+  override render() {
+    return html`
+      <div
+        class=${classMap({
+          wrapper: true,
+          ['size-' + this.size]: true,
+          ['type-' + this.type]: true,
+        })}
+      >
+        ${this.type !== BadgeType.empty
+          ? html`
+              <div class="icon"><slot></slot></div>
+              ${!this.hideNumber
+                ? html`<div class="number">${this.number}</div>`
+                : ''}
+            `
+          : ''}
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(compentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-badge': ObcBadge;
+  }
+}

package/src/components/input/input.css

@@ -25,9 +25,25 @@ input {
     color: var(--on-normal-neutral-color, rgba(0, 0, 0, 0.55));
   }
 
+  .align-right & {
+    text-align: right;
+  }
+
+  .align-center & {
+    text-align: center;
+  }
+
   .hasIcon & {
     padding-left: 40px;
   }
+
+  .squared  & {
+    border-radius: 0;
+  }
+
+  .font-button & {
+    @mixin font-button;
+  }
 }
 
 .icon {

package/src/components/input/input.stories.ts

@@ -24,12 +24,19 @@ const meta: Meta<typeof Input> = {
       control: {type: 'select'},
       options: ['', ...iconIds],
     },
+    font: {
+      control: {type: 'select'},
+      options: ['body', 'button'],
+    },
   },
   render: (args) => {
     return html`<obc-input
       .placeholder=${args.placeholder}
       .value=${args.value}
       .type=${args.type}
+      .squared=${args.squared}
+      .textAlign=${args.textAlign}
+      .font=${args.font}
     >
       ${args.icon ? iconIdToIconHtml(args.icon, {slot: 'icon'}) : ''}
     </obc-input>`;
@@ -51,3 +58,20 @@ export const WithIcon: Story = {
     icon: '01-search',
   },
 };
+
+export const Squared: Story = {
+  args: {
+    placeholder: 'Placeholder',
+    squared: true,
+    textAlign: 'center',
+  },
+};
+
+export const Bolder: Story = {
+  args: {
+    placeholder: 'Placeholder',
+    squared: true,
+    textAlign: 'center',
+    font: 'button',
+  },
+};

package/src/components/input/input.ts

@@ -37,6 +37,9 @@ export class ObcInput extends LitElement {
   @property({type: String}) value: string = '';
   @property({type: String}) placeholder: string = '';
   @property({type: String}) type: HTMLInputTypeAttribute = 'text';
+  @property({type: Boolean}) squared: boolean = false;
+  @property({type: String}) textAlign: 'left' | 'center' | 'right' = 'left';
+  @property({type: String}) font: 'body' | 'button' = 'body';
 
   onInput(e: Event) {
     this.value = (e.target as HTMLInputElement).value;
@@ -55,7 +58,15 @@ export class ObcInput extends LitElement {
 
   override render() {
     return html`
-      <label class=${classMap({wrapper: true, hasIcon: this.hasIcon})}>
+      <label
+        class=${classMap({
+          wrapper: true,
+          hasIcon: this.hasIcon,
+          squared: this.squared,
+          [`align-` + this.textAlign]: true,
+          [`font-` + this.font]: true,
+        })}
+      >
         <input
           type=${this.type}
           class="input"

package/src/icons/icon-01-add.ts

@@ -25,6 +25,7 @@ export class Obi01Add extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-application-open.ts

@@ -27,6 +27,7 @@ export class Obi01ApplicationOpen extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-apps.ts

@@ -25,6 +25,7 @@ export class Obi01Apps extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-check.ts

@@ -25,6 +25,7 @@ export class Obi01Check extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-checkbox-checked.ts

@@ -25,6 +25,7 @@ export class Obi01CheckboxChecked extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-checkbox-uncheck.ts

@@ -25,6 +25,7 @@ export class Obi01CheckboxUncheck extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-close.ts

@@ -25,6 +25,7 @@ export class Obi01Close extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-content-copy.ts

@@ -25,6 +25,7 @@ export class Obi01ContentCopy extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-content-cut.ts

@@ -25,6 +25,7 @@ export class Obi01ContentCut extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-content-paste.ts

@@ -25,6 +25,7 @@ export class Obi01ContentPaste extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-delete.ts

@@ -27,6 +27,7 @@ export class Obi01Delete extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-edit.ts

@@ -25,6 +25,7 @@ export class Obi01Edit extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-expanditem.ts

@@ -31,6 +31,7 @@ export class Obi01Expanditem extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-file-download.ts

@@ -25,6 +25,7 @@ export class Obi01FileDownload extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-file-export.ts

@@ -27,6 +27,7 @@ export class Obi01FileExport extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-file-upload.ts

@@ -25,6 +25,7 @@ export class Obi01FileUpload extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-log-add.ts

@@ -25,6 +25,7 @@ export class Obi01LogAdd extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-log-edit.ts

@@ -25,6 +25,7 @@ export class Obi01LogEdit extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-log-open.ts

@@ -25,6 +25,7 @@ export class Obi01LogOpen extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-megamenu.ts

@@ -25,6 +25,7 @@ export class Obi01Megamenu extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-menu.ts

@@ -29,6 +29,7 @@ export class Obi01Menu extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-mixed.ts

@@ -25,6 +25,7 @@ export class Obi01Mixed extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-more-vertical.ts

@@ -29,6 +29,7 @@ export class Obi01MoreVertical extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-more.ts

@@ -29,6 +29,7 @@ export class Obi01More extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-note-edit.ts

@@ -25,6 +25,7 @@ export class Obi01NoteEdit extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-off.ts

@@ -25,6 +25,7 @@ export class Obi01Off extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-on.ts

@@ -27,6 +27,7 @@ export class Obi01On extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-open-full.ts

@@ -25,6 +25,7 @@ export class Obi01OpenFull extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-placeholder-device-off.ts

@@ -27,6 +27,7 @@ export class Obi01PlaceholderDeviceOff extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-placeholder-device-on.ts

@@ -27,6 +27,7 @@ export class Obi01PlaceholderDeviceOn extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-placeholder-device-static.ts

@@ -27,6 +27,7 @@ export class Obi01PlaceholderDeviceStatic extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-placeholder.ts

@@ -27,6 +27,7 @@ export class Obi01Placeholder extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;

package/src/icons/icon-01-play.ts

@@ -25,6 +25,7 @@ export class Obi01Play extends LitElement {
     .wrapper {
       height: 100%;
       width: 100%;
+      line-height: 0;
     }
     .wrapper > * {
       height: 100%;