@telia-ace/widget-runtime-flamingo 1.1.2 → 1.1.3

package/ui/view-outlet.d.ts

@@ -0,0 +1,36 @@
+import { Container } from '@webprovisions/platform';
+import { TriggerType } from './prepare-dom';
+type SymbolType = {
+    type: 'Uri' | 'Svg' | 'FontAwesome' | 'Text' | string;
+    content: string;
+};
+export type BadgeOptions = {
+    symbol?: SymbolType;
+    label?: string;
+    ariaLabel?: string;
+    openTooltip?: string;
+    closedTooltip?: string;
+};
+export type ViewOutletOptions = {
+    widgetDOMElement: HTMLElement;
+    triggerDOMElement?: HTMLElement;
+    triggerOptions?: BadgeOptions | boolean;
+    triggerType: TriggerType;
+    cachedOriginals: {
+        widgetDOMElement?: Node;
+        triggerDOMElement?: Node;
+    };
+};
+export declare class ViewOutlet {
+    options: ViewOutletOptions;
+    container: Container;
+    private unsubscribe;
+    constructor(container: Container, options: ViewOutletOptions);
+    /**
+     * Renders the view outlet to the DOM.
+     */
+    render(): Promise<void>;
+    renderBadge(options: BadgeOptions): void;
+    dispose(): Promise<void>;
+}
+export {};

package/ui/wrapper.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, nothing } from 'lit';
+import { Ref } from 'lit/directives/ref.js';
+import { Container } from '@webprovisions/platform';
+import { ComponentPlatform, WidgetRenderState } from '@telia-ace/widget-core';
+export declare class WrapperComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    private _provider;
+    container: Container | undefined;
+    wrapperRef: Ref<HTMLDivElement>;
+    private _unsubscribeRenderState?;
+    private _unsubscribePropChange?;
+    componentPlatform: ComponentPlatform | undefined;
+    renderState?: WidgetRenderState;
+    breakpoints: string[];
+    breakpointsSet: boolean;
+    entry: string | undefined;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1> | typeof nothing;
+}

package/widget.d.ts

@@ -0,0 +1,54 @@
+import { WidgetRenderState, WidgetSettings } from '@telia-ace/widget-core';
+import { BootstrappingActivationData } from '@webprovisions/bootstrapping';
+import { Container, EventSubscriptionCancellation, WidgetType } from '@webprovisions/platform';
+import { ViewOutlet } from '././ui/view-outlet';
+export declare enum InitialRenderState {
+    Open = "open",
+    Closed = "closed",
+    Hidden = "hidden",
+    Storage = "storage"
+}
+export type RenderData = {
+    widgetDOMElement?: HTMLElement;
+    triggerDOMElement?: HTMLElement;
+    key?: string;
+    open?: boolean;
+    withRenderState?: InitialRenderState;
+};
+export type AttachData = {
+    widgetDOMElement?: HTMLElement;
+    triggerDOMElement?: HTMLElement;
+    key?: string;
+    withRenderState?: InitialRenderState;
+};
+export default class Widget extends WidgetType {
+    outlets: Map<string, ViewOutlet>;
+    activated: Promise<void> | undefined;
+    subs: EventSubscriptionCancellation[];
+    constructor(container: Container);
+    handleBootstrapping: (activationData: BootstrappingActivationData) => void;
+    initialize(): Promise<void>;
+    attach(attachData?: AttachData): any;
+    detach(key?: string): void;
+    private triggerStateIfApplicable;
+    private getOrCreateViewOutlet;
+    render(renderData?: RenderData): any;
+    activate(data?: Record<string, any>): void;
+    setSettings(fn: (settings: WidgetSettings) => Promise<Partial<WidgetSettings>>): Promise<WidgetSettings>;
+    clearSettings(): Promise<void>;
+    action({ action, value }: {
+        action: string;
+        value?: any;
+    }): Promise<void>;
+    renderState(): Promise<WidgetRenderState>;
+    hide(): Promise<void>;
+    open(): Promise<void>;
+    close(): Promise<void>;
+    show(): Promise<void>;
+    private onAction;
+    private setRenderState;
+    private onOpen;
+    private onClose;
+    private setTriggerState;
+    deactivate(): Promise<void[]>;
+}

package/.eslintrc.json

@@ -1,30 +0,0 @@
-{
-  "extends": ["../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*"],
-  "overrides": [
-    {
-      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.ts", "*.tsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.js", "*.jsx"],
-      "rules": {}
-    },
-    {
-      "files": ["*.json"],
-      "parser": "jsonc-eslint-parser",
-      "rules": {
-        "@nx/dependency-checks": [
-          "error",
-          {
-            "ignoredFiles": ["{projectRoot}/vite.config.{js,ts,mjs,mts}"]
-          }
-        ]
-      }
-    }
-  ]
-}

package/README.md

@@ -1,11 +0,0 @@
-# widget-runtime
-
-This library was generated with [Nx](https://nx.dev).
-
-## Building
-
-Run `nx build widget-runtime` to build the library.
-
-## Running unit tests
-
-Run `nx test widget-runtime` to execute the unit tests via [Jest](https://jestjs.io).

package/project.json

@@ -1,48 +0,0 @@
-{
-  "name": "runtime",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "libs/runtime/src",
-  "projectType": "library",
-  "targets": {
-    "build": {
-      "executor": "@nx/vite:build",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/libs/runtime"
-      }
-    },
-    "publish": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "npm publish",
-        "cwd": "dist/libs/runtime"
-      }
-    },
-    "prerelease": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "npm publish --tag=rc",
-        "cwd": "dist/libs/runtime"
-      }
-    },
-    "test": {
-      "executor": "@nx/vite:test",
-      "outputs": ["{options.reportsDirectory}"],
-      "options": {
-        "passWithNoTests": true,
-        "reportsDirectory": "../../coverage/libs/runtime"
-      }
-    },
-    "lint": {
-      "executor": "@nx/eslint:lint",
-      "outputs": ["{options.outputFile}"],
-      "options": {
-        "lintFilePatterns": [
-          "libs/runtime/**/*.ts",
-          "libs/runtime/package.json"
-        ]
-      }
-    }
-  },
-  "tags": []
-}

package/src/component-platform-factory.ts

@@ -1,163 +0,0 @@
-import {
-  ChangesetOptions,
-  ChangesetProvider,
-  ComponentNodeAttributes,
-  ComponentNodeSettings,
-  ComponentPlatform,
-  ComponentQuery,
-  ComponentQueryRule,
-  createComponentModel,
-  WidgetSettings,
-} from '@telia-ace/widget-core';
-import {
-  createStorageWriter,
-  readStorage,
-  StorageCategory,
-  StorageMedium,
-  StorageWriter,
-} from '@telia-ace/widget-services';
-import { lock } from '@telia-ace/widget-utilities';
-import { Container, Widget, WidgetState } from '@webprovisions/platform';
-
-const STORAGE_KEY = 'changesets';
-
-type ChangesetItem = {
-  rules: ComponentQueryRule[];
-  attributes: Partial<ComponentNodeAttributes>;
-  options: ChangesetOptions;
-};
-
-type ChangesetItemBag = {
-  items?: { [key: string]: ChangesetItem };
-  keys?: string[];
-};
-
-const convertSettingsToAttributes = (
-  settings: Partial<ComponentNodeSettings>
-): Partial<ComponentNodeAttributes> => {
-  const attributes: Partial<ComponentNodeAttributes> = { tags: settings.tags };
-  if (settings.context && typeof settings.context !== 'function') {
-    attributes.context = settings.context;
-  }
-  if (settings.properties && typeof settings.properties !== 'function') {
-    attributes.properties = settings.properties;
-  }
-  if (settings.layout && typeof settings.layout !== 'function') {
-    attributes.layout = settings.layout;
-  }
-
-  return attributes;
-};
-
-export class LocalStorageChangesetProvider implements ChangesetProvider {
-  constructor(
-    private container: Container,
-    private storageWriter: StorageWriter
-  ) {}
-
-  static create(container: Container): Promise<LocalStorageChangesetProvider> {
-    return createStorageWriter(
-      container,
-      STORAGE_KEY,
-      StorageCategory.Necessary,
-      {
-        medium: StorageMedium.Local,
-      }
-    ).then(
-      (storageWriter) =>
-        new LocalStorageChangesetProvider(container, storageWriter)
-    );
-  }
-
-  write(
-    key: string,
-    target: ComponentQuery,
-    attributes: Partial<ComponentNodeSettings>,
-    options: ChangesetOptions
-  ): Promise<any> {
-    return lock(this)(() => {
-      return readStorage<ChangesetItemBag>(
-        this.container,
-        STORAGE_KEY,
-        StorageMedium.Local
-      ).then((bag = {}) => {
-        const { keys = [], items = {} } = bag;
-        const existingIndex = keys.indexOf(key);
-        if (existingIndex > -1) {
-          keys.splice(existingIndex, 1);
-        }
-        keys.push(key);
-        items[key] = {
-          options,
-          attributes: convertSettingsToAttributes(attributes),
-          rules: target.rules,
-        };
-        return this.storageWriter({ keys, items });
-      });
-    });
-  }
-
-  remove(key: string): Promise<any> {
-    return lock(this)(() => {
-      return readStorage<ChangesetItemBag>(
-        this.container,
-        STORAGE_KEY,
-        StorageMedium.Local
-      ).then((bag = {}) => {
-        const { keys = [], items = {} } = bag;
-        const indexToRemove = keys.indexOf(key);
-        if (indexToRemove > -1) {
-          keys.splice(indexToRemove, 1);
-          delete items[key];
-          return this.storageWriter(bag);
-        }
-      });
-    });
-  }
-
-  load(platform: ComponentPlatform): Promise<any> {
-    return lock(this)(() => {
-      return readStorage<ChangesetItemBag>(
-        this.container,
-        STORAGE_KEY,
-        StorageMedium.Local
-      ).then((bag = {}) => {
-        const { keys = [], items = {} } = bag;
-        keys.forEach((key) => {
-          const item = items[key];
-          if (item) {
-            const { rules, attributes, options } = item;
-            platform.write({
-              attributes,
-              options,
-              target: new ComponentQuery(platform, rules),
-            });
-          }
-        });
-      });
-    });
-  }
-}
-
-export const createPlatform = (widget: Widget): Promise<ComponentPlatform> => {
-  const { container } = widget;
-  return LocalStorageChangesetProvider.create(container).then(
-    (localStorage) => {
-      const settings: WidgetSettings = container.get('$settings');
-      const providers = { localStorage };
-      const platform = new ComponentPlatform(widget, providers);
-      const destructComponentModel = createComponentModel(platform, settings);
-
-      widget.events.subscribe(
-        'widget:state-change',
-        (_event, data: { state: WidgetState }) => {
-          if (data.state === WidgetState.Deactivating) {
-            destructComponentModel();
-          }
-        }
-      );
-
-      return platform;
-    }
-  );
-};

package/src/context/children.context.ts

@@ -1,4 +0,0 @@
-import { createContext } from '@lit-labs/context';
-import { ComponentDescriptor } from '@telia-ace/widget-core';
-
-export const childrenContext = createContext<ComponentDescriptor[]>('children');

package/src/context/component-node.context.ts

@@ -1,6 +0,0 @@
-import { createContext } from '@lit-labs/context';
-import { ComponentDescriptor } from '@telia-ace/widget-core';
-
-export const descriptorContext = createContext<ComponentDescriptor | undefined>(
-  'descriptor'
-);

package/src/context/container.context.ts

@@ -1,6 +0,0 @@
-import { Container } from '@webprovisions/platform';
-import { createContext } from '@lit-labs/context';
-
-export const containerContext = createContext<Container | undefined>(
-  'container'
-);

package/src/context/context.context.ts

@@ -1,3 +0,0 @@
-import { createContext } from '@lit-labs/context';
-
-export const contextCtx = createContext<Record<string, any>>('context');

package/src/context/layout.context.ts

@@ -1,3 +0,0 @@
-import { createContext } from '@lit-labs/context';
-
-export const layoutCtx = createContext<Record<string, any>>('layout');

package/src/context/properties.context.ts

@@ -1,3 +0,0 @@
-import { createContext } from '@lit-labs/context';
-
-export const propertiesCtx = createContext<Record<string, any>>('properties');

package/src/controllers/actions-controller.ts

@@ -1,55 +0,0 @@
-import {
-  ReactiveController,
-  ReactiveControllerHost,
-  ReactiveElement,
-} from 'lit';
-import { Container } from '@webprovisions/platform';
-import {
-  ComponentDescriptor,
-  ComponentPlatform,
-  ComponentQuery,
-} from '@telia-ace/widget-core';
-import { uuid } from '@telia-ace/widget-utilities';
-
-export class ActionsController implements ReactiveController {
-  host: ReactiveControllerHost;
-
-  private _container?: Container;
-
-  private _descriptor?: ComponentDescriptor;
-
-  constructor(host: ReactiveElement) {
-    (this.host = host).addController(this);
-  }
-
-  hostConnected() {}
-  hostDisconnected() {}
-
-  setDescriptor(descriptor: ComponentDescriptor) {
-    this._descriptor = descriptor;
-  }
-
-  setContainer(container: Container) {
-    this._container = container;
-  }
-
-  async dispatch(key: string, value: Record<string, any> | string) {
-    if (!this._container || !this._descriptor) {
-      return;
-    }
-
-    const componentPlatform = await ComponentPlatform.getInstance(
-      this._container
-    );
-
-    const query = new ComponentQuery(componentPlatform).withId(
-      this._descriptor.id
-    );
-    const actions = componentPlatform.actions(
-      query,
-      this._descriptor.type || uuid()
-    );
-
-    await actions.dispatch(key, value);
-  }
-}

package/src/core/create-lit-component.ts

@@ -1,31 +0,0 @@
-import {
-  ComponentResolver,
-  extendComponent,
-  ExtendComponentHandler,
-  ExtendComponentOptions,
-} from '@telia-ace/widget-core';
-import { Container } from '@webprovisions/platform';
-
-/**
- * Registers a Lit  component on the component platform.
- * @param container Container to register the component on.
- * @param type Type name to resolve the component from configuration.
- * @param component Promise resolving to the Lit component for rendering.
- * @param fn Handler for controlling the component.
- */
-const createLitComponent = (
-  container: Container,
-  type: string,
-  component: any, // e.g. import('./component.ts)
-  fn?: ExtendComponentHandler,
-  options?: ExtendComponentOptions
-) => {
-  return container
-    .getAsync('componentResolver')
-    .then((componentResolver: ComponentResolver) => {
-      componentResolver.registerComponent(type, component);
-      return extendComponent(container, type, fn || (() => {}), type, options);
-    });
-};
-
-export default createLitComponent;

package/src/core/get-render-state.ts

@@ -1,25 +0,0 @@
-import { ActionResolver, WidgetRenderState } from '@telia-ace/widget-core';
-import { Container } from '@webprovisions/platform';
-
-export const getRenderState = async (container: Container) => {
-  const widget = container.get('$widget');
-
-  const renderState: WidgetRenderState = await widget.invoke('renderState');
-
-  return renderState;
-};
-
-export const subscribeToRenderState = async (
-  container: Container,
-  subscriptionFn: (origin: string, action: string) => void
-) => {
-  const widget = container.get('$widget');
-
-  const actionResolver: ActionResolver = await container.getAsync(
-    'actionResolver'
-  );
-
-  const unsubscribe = actionResolver.subscribe(widget.name, subscriptionFn);
-
-  return unsubscribe;
-};

package/src/data-provider/data-provider.ts

@@ -1,87 +0,0 @@
-import { ComponentNodeController } from '@telia-ace/widget-core';
-import { Container } from '@webprovisions/platform';
-
-type DataResource = {
-  query: (
-    input: Record<string, any>,
-    providerSettings: Record<string, any>
-  ) => Promise<any>;
-};
-
-type DataProviderSettings = Record<string, any>;
-
-export const getProvider = async (
-  component: ComponentNodeController,
-  container: Container
-) => {
-  const providerProperty: string | [string, any] | undefined =
-    component.properties().provider;
-  let providerSettings = {};
-
-  let providerKey = '';
-  if (Array.isArray(providerProperty)) {
-    providerKey = providerProperty[0];
-    providerSettings = providerProperty[1];
-  } else {
-    providerKey = providerProperty || '';
-  }
-
-  const provider: DataProvider | undefined = await container.getAsync(
-    providerKey
-  );
-
-  if (!provider) {
-    throw new Error('No provider defined in ListComponent');
-  }
-
-  provider.applyComponentNodeSettings(component.node.id, providerSettings);
-
-  return { provider, settings: providerSettings };
-};
-
-export const createDataProvider = async (
-  component: ComponentNodeController,
-  container: Container
-) => {
-  const { provider, settings = {} } = await getProvider(component, container);
-
-  return {
-    addResource: (resourceKey: string, resource: DataResource) => {
-      return provider.addResource(resourceKey, resource);
-    },
-    getData: (resourceKey: string, input: Record<string, any>) => {
-      return provider.getData(resourceKey, input, settings);
-    },
-  };
-};
-
-export class DataProvider {
-  private resources = new Map<string, DataResource>();
-  private nodeConfiguration = new Map<string, DataProviderSettings>();
-
-  constructor(public container: Container) {}
-
-  async getData(
-    resourceKey: string,
-    input: Record<string, any>,
-    providerSettings: Record<string, any>
-  ) {
-    const entityProvider = this.resources.get(resourceKey);
-
-    if (!entityProvider) {
-      throw new Error(`Unable to get EntityProvider for "${resourceKey}"`);
-    }
-
-    const response = await entityProvider.query(input, providerSettings);
-
-    return response;
-  }
-
-  addResource(resourceKey: string, resource: DataResource) {
-    this.resources.set(resourceKey, resource);
-  }
-
-  applyComponentNodeSettings(nodeId: string, value: DataProviderSettings) {
-    this.nodeConfiguration.set(nodeId, value);
-  }
-}

package/src/data-provider/providers/guide-provider.plugin.ts

@@ -1,64 +0,0 @@
-import { Container } from '@webprovisions/platform';
-import { DataProvider } from '../data-provider';
-
-type RawGuide = any;
-
-const formatGuideToItem = (rawGuide: Record<string, RawGuide>) => {
-  return {
-    title: rawGuide.Title,
-    id: rawGuide.Id.toString(),
-  };
-};
-
-class GuideProvider extends DataProvider {
-  constructor(container: Container) {
-    super(container);
-
-    this.addResource('item', {
-      query: async (input: Record<string, any>, providerSettings) => {
-        const itemId = input.itemId;
-        const client = '78aacc09-ae6f-5485-5ca3-9dacebb95825';
-        const funnel = container.get('$widget').name;
-        const projection = providerSettings.projection || '';
-
-        const response = await fetch(
-          `${projection}/guides/${itemId}?client=${client}&funnel=${funnel}&site=%2F%2Fdemo.humany.cc%2Fadmin%2Finterfaces&phrase=&connectionId=&p.LastGuideId=2857`
-        );
-
-        const data = await response.json();
-
-        return data ? formatGuideToItem(data) : null;
-      },
-    });
-
-    this.addResource('items', {
-      query: async (_input, providerSettings) => {
-        const client = '';
-        const funnel = container.get('$widget').name;
-        const projection = providerSettings.projection || '';
-        const site = '';
-        const skip = '0';
-        const take = '10';
-
-        const response = await fetch(
-          `${projection}/guides?client=${client}&funnel=${funnel}&site=${site}&phrase=&skip=${skip}&take=${take}&sorting.type=popularity&sorting.direction=descending`
-        );
-
-        const data = await response.json();
-
-        return {
-          items: (data.Matches || []).map((item: RawGuide) => {
-            return formatGuideToItem(item);
-          }),
-          totalItems: data?.TotalMatches || 0,
-        };
-      },
-    });
-  }
-}
-
-export const GuideProviderPlugin = async (container: Container) => {
-  container.registerAsync('guideProvider', () => {
-    return new GuideProvider(container);
-  });
-};

package/src/declaration.d.ts

@@ -1,2 +0,0 @@
-declare type Optional<T> = T | undefined;
-declare type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;