Unily - Utils Browser

A utility library providing shared Angular tools for use across Unily micro frontends. Currently includes a pipe for translating localized terms.

Prerequisites

• Requires @unily/remote-service as a peer dependency for dynamic module loading.

Installation

Install the package using npm:

npm install @unily/utils-browser

Usage

Unilt Term Pipe

You can import utilities such as the UnilyTermPipe directly into your Angular components, including standalone components, and use them in templates to enable term translation.

For example, import the pipe and use it in your component:

import { Component } from '@angular/core';
import { UnilyTermPipe } from '@unily/utils-browser';

@Component({
  selector: 'app-welcome',
  imports: [UnilyTermPipe],
  template: `<p>{{ 'home.greeting' | unilyTerm }}</p>`
})
export class WelcomeComponent {}

Important Note: Template-Only Usage

The UnilyTermPipe should only be used in HTML templates, not in TypeScript.

Calling transform() directly in TypeScript will not return the translated value, as it relies on asynchronous resolution.

Navigation Directive

The navigation directive offers the possibility to perform navigations from templates found in MFEs. To use the unilyNavigate directive, import it in your component metadata, and add it to your html as follows.

import { Component } from '@angular/core';
import { UnilyNavigateDirective } from '@unily/utils-browser';

@Component({
  selector: 'my-component',
  imports: [UnilyNavigateDirective],
  template: `
    <a unilyNavigate="/path/to/my/url">Navigate to my url</a>
    <div [unilyNavigate]="url">
        <div>My card that i want to navigate from</div>
    </div>
  `
})
export class MyComponent {
    url: string = '/my/path/in/component';
}

The navigate directive supports various options, that can alter navigation. These include

• queryParams - A Record of query parameters that will be appended to the URL.
• skipLocationChange - When true, navigates without pushing a new state into history.
• replaceUrl - When true, navigates while replacing the current state in history.
• mergeQueryParams - When true, include parameters that are present in the current url

Both the skipLocationChange and replaceUrl attributes when added without passing any value, will take the value as true. When not specified they'll be false.

import { Component } from '@angular/core';
import { UnilyNavigateDirective } from '@unily/utils-browser';

@Component({
  selector: 'my-component',
  imports: [UnilyNavigateDirective],
  template: `
    <a unilyNavigate="/path/to/my/url" skipLocationChange replaceUrl>Navigate to my url</a> <!-- Here values will be true -->
    <div [unilyNavigate]="url" [skipLocationChange]="false" [replaceUrl]="true">
        <div>My card that i want to navigate from</div>
    </div>
    <a [unilyNavigate]="url" [replaceUrl]="true">Replace URL</a>
  `
})
export class MyComponent {
    url: string = '/my/path/in/component';
}

Styling mixins

This library provides a couple of mixins which you can use to target styling for desktop and target styling for mobile. These mixins should be used instead of media queries since Unily does not depend on them to serve the respective flavour of the application.

To start, install this library by running npm i @unily/utils-browser

Then in your component, use the mixins as follows

// square.component.ts
import { Component } from '@angular/core';
import { UnilyTermPipe } from '@unily/utils-browser';

@Component({
  selector: 'app-square',
    template: `
        <div>
            <div class="title">I'm a fancy square</div>
            <div class="body">
                <div class="text">
                    I'm a polygon with four sides.
                    My angles are all right.
                    I'm a sqare!
                </div>
            </div>
        </div>
    `,
  styleUrl: 'square.component.scss'
})
export class SquareComponent {}

// square.component.scss
@use "@unily/utils-browser/mixins" as mix;

:host {
  height: 100%;
  max-height: 250px;
  aspect-ratio: 1;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;

  // Common styling for the children
  > div {
    display: flex;
    flex: 1 1 auto;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
  }

  // This styling will be applied to the desktop variant
  @include mix.udl-when-desktop {
    background-color: orange;

    > div {
      background-color: yellow;

      .title {
        color: pink;
        font-size: 2rem;
      }
    }
  }

  // This styling will be applied for the mobile variant
  @include mix.udl-when-mobile {
    background-color: blue;

    > div {
      background-color: green;

      .title {
        font-size: 4rem;
        color: cyan;
      }
    }
  }
}