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

package/src/mixins/widget-component.mixin.ts

@@ -1,231 +0,0 @@
-import { LitElement, css } from 'lit';
-import { childrenContext } from '../context/children.context';
-import { propertiesCtx } from '../context/properties.context';
-import { contextCtx } from '../context/context.context';
-import { layoutCtx } from '../context/layout.context';
-import { ContextProvider, consume } from '@lit-labs/context';
-import {
-  Container,
-  EventSubscriptionCancellation,
-} from '@webprovisions/platform';
-import { containerContext } from '../context/container.context';
-import { property, state } from 'lit/decorators.js';
-import {
-  ComponentDescriptor,
-  ComponentPlatform,
-  ComponentResolver,
-  asDescriptor,
-} from '@telia-ace/widget-core';
-import { descriptorContext } from '../context/component-node.context';
-import { ActionsController } from '../controllers/actions-controller';
-import { mapBranding } from '../ui/branding';
-import { appendStyleFromProperties } from '../ui/get-css-props';
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-type Constructor<T = {}> = new (...args: any[]) => T;
-
-export declare class WidgetComponentInterface {
-  entry: string;
-  descriptor?: ComponentDescriptor;
-  component?: any;
-  layout: Record<string, any>;
-  context: Record<string, any>;
-  properties: Record<string, any>;
-  container?: Container;
-  actions: ActionsController;
-  _contextProvider: ContextProvider<typeof contextCtx>;
-  _propertiesProvider: ContextProvider<typeof propertiesCtx>;
-  _childrenProvider: ContextProvider<typeof childrenContext>;
-}
-
-export const WidgetComponent = <T extends Constructor<LitElement>>(
-  superClass: T
-) => {
-  class WidgetComponentClass extends superClass {
-    static styles = [
-      (superClass as unknown as typeof LitElement).styles ?? [],
-      css`
-        :host {
-          font-family: var(--font-family);
-          grid-column: span var(--width);
-          max-width: 100%;
-          overflow: hidden;
-          box-sizing: border-box;
-          display: block;
-        }
-        * {
-          box-sizing: border-box;
-        }
-      `,
-    ];
-
-    @consume({ context: containerContext })
-    @property({ attribute: false })
-    public container?: Container;
-
-    @property()
-    entry = '';
-
-    private _descriptorProvider = new ContextProvider(
-      this,
-      descriptorContext,
-      undefined
-    );
-    _childrenProvider = new ContextProvider(this, childrenContext, []);
-    _propertiesProvider = new ContextProvider(this, propertiesCtx, {});
-    _contextProvider = new ContextProvider(this, contextCtx, {});
-    private _layoutProvider = new ContextProvider(this, layoutCtx, {});
-
-    private _propertyChangeListener?: EventSubscriptionCancellation;
-    private _contextChangeListener?: EventSubscriptionCancellation;
-    private _layoutChangeListener?: EventSubscriptionCancellation;
-    private _unmountNode?: any;
-
-    actions = new ActionsController(this);
-
-    @state()
-    descriptor?: ComponentDescriptor;
-
-    @state()
-    component?: any;
-
-    @state()
-    context: Record<string, any> = {};
-
-    @state()
-    layout: Record<string, any> = {};
-
-    @state()
-    properties: Record<string, any> = {};
-
-    override connectedCallback() {
-      super.connectedCallback();
-
-      if (this.container) {
-        this.actions.setContainer(this.container);
-        ComponentPlatform.getInstance(this.container).then(
-          async (componentPlatform) => {
-            const componentNode = componentPlatform.nodes.get(this.entry);
-            if (componentNode) {
-              this._propertyChangeListener = componentPlatform.events.subscribe(
-                'components:properties-changed',
-                (_event, data) => {
-                  if (
-                    componentNode.id === data.node.id /*&& isMounted.current*/
-                  ) {
-                    this._setProperties(data.node.attributes.properties);
-                  }
-                }
-              );
-              this._contextChangeListener = componentPlatform.events.subscribe(
-                'components:context-changed',
-                (_event, data) => {
-                  if (
-                    componentNode.id === data.node.id /*&& isMounted.current*/
-                  ) {
-                    this._setContext(data.node.attributes.context);
-                  }
-                }
-              );
-              this._layoutChangeListener = componentPlatform.events.subscribe(
-                'components:layout-changed',
-                (_event, data) => {
-                  if (
-                    componentNode.id === data.node.id /*&& isMounted.current*/
-                  ) {
-                    this._setLayout(data.node.attributes.layout);
-                  }
-                }
-              );
-
-              const branch = 'default'; // TODO:
-
-              this._unmountNode = componentNode.mount(this.container!);
-
-              this._setDescriptor(asDescriptor(componentNode, branch));
-              this._setProperties(componentNode.attributes.properties);
-              this._setContext(componentNode.attributes.context);
-              this._setLayout(this.layout);
-
-              const children = componentNode
-                .getChildren(branch)
-                .map((child) => asDescriptor(child));
-
-              this._childrenProvider.setValue(children);
-
-              const resolver: ComponentResolver =
-                await this.container!.getAsync('componentResolver');
-
-              if (this.descriptor?.type === 'area') {
-                return;
-              }
-
-              const componentResolver = resolver.getComponent(
-                this.descriptor?.type || ''
-              );
-              if (componentResolver.then) {
-                componentResolver.then((componentModule: any) => {
-                  this.component = componentModule.default;
-                });
-              }
-            }
-          }
-        );
-      }
-    }
-
-    override disconnectedCallback(): void {
-      super.disconnectedCallback();
-
-      if (this._propertyChangeListener) {
-        this._propertyChangeListener();
-      }
-      if (this._contextChangeListener) {
-        this._contextChangeListener();
-      }
-      if (this._layoutChangeListener) {
-        this._layoutChangeListener();
-      }
-
-      if (this._unmountNode) {
-        this._unmountNode();
-      }
-    }
-
-    override updated() {
-      if (this.container) {
-        this.actions.setContainer(this.container);
-      }
-      mapBranding(this.context, (this.renderRoot as any).host);
-
-      (this.renderRoot as any).host.style.setProperty(
-        '--width',
-        this.layout.size === 'full'
-          ? 'var(--columns, 1)'
-          : `min(${this.layout.size || 'var(--columns)'}, var(--columns))`
-      );
-
-      appendStyleFromProperties((this.renderRoot as any).host, this.properties);
-    }
-
-    private _setProperties(value: Record<string, any>) {
-      this._propertiesProvider.setValue(value);
-      this.properties = value;
-    }
-    private _setContext(value: Record<string, any>) {
-      this._contextProvider.setValue(value);
-      this.context = value;
-    }
-    private _setLayout(value: Record<string, any>) {
-      this._layoutProvider.setValue(value);
-      this.layout = value;
-    }
-    private _setDescriptor(value: ComponentDescriptor) {
-      this.descriptor = value;
-      this._descriptorProvider.setValue(value);
-      this.actions.setDescriptor(value);
-    }
-  }
-  // Cast return type to your mixin's interface intersected with the superClass type
-  return WidgetComponentClass as Constructor<WidgetComponentInterface> & T;
-};

package/src/services.ts

@@ -1,27 +0,0 @@
-import { Container } from '@webprovisions/platform';
-import { createPlatform } from './component-platform-factory';
-
-export const createStorageService = (_container: Container) => {
-  return import('@telia-ace/widget-services').then(({ StorageProvider }) => {
-    return new StorageProvider();
-  });
-};
-
-export const createActionResolver = (container: Container) => {
-  return import('@telia-ace/widget-core').then(({ ActionResolver }) => {
-    return new ActionResolver(container);
-  });
-};
-
-export const createComponentResolver = (container: Container) => {
-  return import('@telia-ace/widget-core').then(({ ComponentResolver }) => {
-    return new ComponentResolver(container);
-  });
-};
-
-export const createComponentPlatform = (container: Container) => {
-  return import('@telia-ace/widget-core').then(() => {
-    // ({ ComponentPlatform, createComponentModel }) => {
-    return createPlatform(container.get('$widget'));
-  });
-};

package/src/ui/area.ts

@@ -1,97 +0,0 @@
-import { LitElement, css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { until } from 'lit/directives/until.js';
-import { mapBranding } from './branding';
-import { appendStyleFromProperties } from './get-css-props';
-import { ComponentDescriptor, ComponentResolver } from '@telia-ace/widget-core';
-import { WidgetComponent } from '../mixins/widget-component.mixin';
-
-const WidgetElement = WidgetComponent(LitElement);
-
-@customElement('ace-area')
-export class AreaComponent extends WidgetElement {
-  static override styles = [
-    WidgetElement.styles || [],
-    css`
-      :host {
-        height: 100%;
-        display: grid;
-        justify-content: center;
-        grid-auto-rows: max-content;
-        grid-template-rows: auto;
-        grid-template-columns: repeat(var(--columns), 1fr);
-      }
-    `,
-  ];
-
-  private _resolveChildComponent = async (type: string) => {
-    const resolver: ComponentResolver = await this.container!.getAsync(
-      'componentResolver'
-    );
-
-    const componentResolver = resolver.getComponent(type);
-    if (componentResolver.then) {
-      return componentResolver.then((componentModule: any) => {
-        return componentModule.default;
-      });
-    }
-  };
-
-  private _resolveAllChildren = async (children: ComponentDescriptor[]) => {
-    return Promise.all(
-      children.map(async (child) => {
-        let component: any = customElements.get(`ace-${child.type}`);
-
-        if (!component) {
-          component = await this._resolveChildComponent(child.type || '');
-        }
-
-        return {
-          ...child,
-          component,
-        };
-      })
-    );
-  };
-
-  override render() {
-    mapBranding(this.context, (this.renderRoot as any).host);
-
-    (this.renderRoot as any).host.style.setProperty(
-      '--width',
-      this.layout.size === 'full'
-        ? 'var(--columns, 1)'
-        : `min(${this.layout.size || 'var(--columns)'}, var(--columns))`
-    );
-
-    (this.renderRoot as any).host.style.setProperty(
-      '--columns',
-      this._propertiesProvider.value.columns?.toString() || '1'
-    );
-
-    appendStyleFromProperties(
-      (this.renderRoot as any).host,
-      this._propertiesProvider.value
-    );
-
-    return html`
-      ${until(
-        this._resolveAllChildren(this._childrenProvider.value).then(
-          (children) => {
-            return html`
-              ${children.map((child) => {
-                if (child.type === 'area') {
-                  return html`<ace-area entry=${child.id}></ace-area>`;
-                }
-
-                const instance = new child.component();
-                instance.entry = child.id;
-                return instance;
-              })}
-            `;
-          }
-        )
-      )}
-    `;
-  }
-}

package/src/ui/branding.ts

@@ -1,25 +0,0 @@
-const mapValue = (value: string, cssVar: string, el: HTMLElement) => {
-  if (value) {
-    el.style.setProperty(cssVar, value);
-  }
-};
-
-export const mapBranding = (context: Record<string, any>, el: HTMLElement) => {
-  mapValue(context.colors?.primary, '--primary-color', el);
-  mapValue(context.colors?.secondary, '--secondary-color', el);
-  mapValue(context.colors?.text, '--text-color', el);
-  mapValue(context.colors?.link, '--link-color', el);
-  mapValue(context.colors?.gray, '--gray-color', el);
-  mapValue(context.colors?.grayDark, '--gray-dark-color', el);
-
-  mapValue(context.spacing?.xs, '--spacing-xs', el);
-  mapValue(context.spacing?.sm, '--spacing-sm', el);
-  mapValue(context.spacing?.md, '--spacing-md', el);
-  mapValue(context.spacing?.lg, '--spacing-lg', el);
-  mapValue(context.spacing?.xl, '--spacing-xl', el);
-
-  mapValue(context.boxShadow, '--box-shadow', el);
-  mapValue(context.borderRadius, '--border-radius', el);
-  mapValue(context.borderRadiusSm, '--border-radius-sm', el);
-  mapValue(context.fontFamily, '--font-family', el);
-};

package/src/ui/get-css-props.ts

@@ -1,23 +0,0 @@
-const filterCssProps = (props: Record<string, any>) => {
-  const cssProps: { [key: string]: any } = {};
-
-  Object.keys(props).forEach((key) => {
-    if (key.indexOf('css-') > -1) {
-      cssProps[key] = props[key];
-    }
-  });
-
-  return cssProps;
-};
-
-export const appendStyleFromProperties = (
-  elem: HTMLElement,
-  p: Record<string, any>
-) => {
-  const props = filterCssProps(p);
-  Object.entries(props).forEach(([key, value]) => {
-    elem.style.setProperty(key.replace('css-', ''), value);
-  });
-};
-
-export default filterCssProps;

package/src/ui/get-layout-props.ts

@@ -1,41 +0,0 @@
-type LayoutSettings = {
-  values: Record<string, string>;
-  breakpoints?: string[];
-};
-
-export const getLayoutProps = (
-  settings: LayoutSettings[],
-  activeBreakpoints: string[],
-  hasTrigger = false
-) => {
-  const layoutProps = settings.reduce<Record<string, string>>(
-    (acc, { breakpoints = [], values }) => {
-      if (!breakpoints.length) {
-        return { ...acc, ...values };
-      }
-
-      if (
-        activeBreakpoints.some((breakpoint) => breakpoints.includes(breakpoint))
-      ) {
-        return { ...acc, ...values };
-      }
-      return acc;
-    },
-    {}
-  );
-
-  const styles: Record<string, string> = {};
-  const type = layoutProps.type;
-
-  styles.height = layoutProps.height || '';
-  styles.width = layoutProps.width || '';
-
-  if (layoutProps.type === 'floating') {
-    //
-  } else if (layoutProps.type === 'inline') {
-    if (hasTrigger) {
-      styles['height'] = 'calc(100vh - 120px)';
-    }
-  }
-  return { type, styles };
-};

package/src/ui/html-element-handlers.ts

@@ -1,140 +0,0 @@
-const triggerTabHandler = (triggerDOMElement: HTMLElement) => {
-  const toggleTabbing = (element: HTMLElement, tabbing: boolean) => {
-    if (!element) {
-      return;
-    }
-
-    if (tabbing) {
-      element.classList.add('ace-tabbing');
-    } else {
-      element.classList.remove('ace-tabbing');
-    }
-  };
-
-  const handleKeydown = (e: KeyboardEvent) => {
-    if (e.key === 'Tab') {
-      toggleTabbing(triggerDOMElement, true);
-    } else if (
-      !(
-        e.key === 'Enter' &&
-        document.activeElement &&
-        document.activeElement.classList.contains('ace-widget-trigger')
-      )
-    ) {
-      toggleTabbing(triggerDOMElement, false);
-    }
-  };
-
-  const handleClick = (_e: MouseEvent) => {
-    if (
-      document.activeElement &&
-      document.activeElement.classList.contains('ace-widget-trigger') &&
-      document.activeElement.classList.contains('ace-tabbing')
-    ) {
-      return;
-    }
-    toggleTabbing(triggerDOMElement, false);
-  };
-
-  document.addEventListener('keydown', handleKeydown);
-  document.addEventListener('click', handleClick);
-
-  return () => {
-    document.removeEventListener('keydown', handleKeydown);
-    document.removeEventListener('click', handleClick);
-  };
-};
-
-export type TriggerElementOptions = {
-  symbol?: { type: string; content: string };
-  widgetName: string;
-  label?: string;
-  ariaLabel?: string;
-  tooltip?: string;
-};
-
-export function createTriggerElement(
-  element: HTMLElement,
-  options: TriggerElementOptions
-) {
-  const {
-    // symbol,
-    widgetName,
-    label = '',
-    ariaLabel = '',
-    tooltip = '',
-  } = options;
-
-  element.classList.add('ace-widget-trigger');
-  element.classList.add(`ace-widget_${widgetName}`);
-
-  if (label.length) {
-    element.classList.add('trigger-has-text');
-  }
-
-  if (ariaLabel.length && !element.getAttribute('aria-label')) {
-    element.setAttribute('aria-label', ariaLabel);
-  }
-
-  if (ariaLabel.length && !element.getAttribute('tabindex')) {
-    element.setAttribute('tabindex', '0');
-  }
-
-  if (tooltip.length && !element.getAttribute('title')) {
-    element.setAttribute('title', tooltip);
-  }
-
-  return triggerTabHandler(element);
-}
-
-export function setInactive(
-  elements: HTMLElement | HTMLElement[],
-  title?: string
-) {
-  if (elements instanceof HTMLElement) {
-    if (title) {
-      elements.setAttribute('title', title);
-    }
-    elements.classList.remove('ace-trigger-active');
-    elements.classList.remove('ace-trigger-loading');
-  } else if (elements instanceof Array) {
-    elements.forEach((e) => {
-      if (title) {
-        e.setAttribute('title', title);
-      }
-      e.classList.remove('ace-trigger-active');
-      e.classList.remove('ace-trigger-loading');
-    });
-  }
-}
-export function setLoading(elements: HTMLElement | HTMLElement[]) {
-  if (elements instanceof HTMLElement) {
-    elements.classList.remove('ace-trigger-active');
-    elements.classList.add('ace-trigger-loading');
-  } else if (elements instanceof Array) {
-    elements.forEach((e) => {
-      e.classList.remove('ace-trigger-active');
-      e.classList.add('ace-trigger-loading');
-    });
-  }
-}
-export function setActive(
-  elements: HTMLElement | HTMLElement[],
-  title?: string
-) {
-  if (elements instanceof HTMLElement) {
-    if (title) {
-      elements.setAttribute('title', title);
-    }
-    elements.classList.add('ace-trigger-active');
-    elements.classList.remove('ace-trigger-loading');
-  } else if (elements instanceof Array) {
-    elements.forEach((e) => {
-      if (title) {
-        e.setAttribute('title', title);
-      }
-      e.classList.add('ace-trigger-active');
-      e.classList.remove('ace-trigger-loading');
-    });
-  }
-}

package/src/ui/index.ts

@@ -1,6 +0,0 @@
-// export { default as AnimatedView } from './animated-view';
-// export { default as Component } from './_component';
-export { prepareDOMElements, TriggerType } from './prepare-dom';
-// export { default as ResolvableComponent } from './resolvable-component';
-// export { default as View } from './view';
-// export { default as Wrapper } from './wrapper';