README

Circe :: Angular Core Services and Tools

Some help services, generic types and component styles.

Compatibility

Angular >= v.8.2.14

Installation

Run npm install @lunaeme/circe-core or

run yarn add @lunaeme/circe-core.

Component Style Use

You need to import component SASS file at the top of your SASS file as follows:

@import '~@lunaeme/circe-core/styles/component.styles.scss';

Then you can use some native DOM components cool styled.

Available Component Styles

LABEL

Class: 'mda-label'

SubClasses: 'error'

Example:
<label class="mda-label">Some Text</label>

<label class="mda-label error">Some Text</label>

BUTTON

Class: 'mda-button'

SubClasses: 'disabled'

Example:

<button class="mda-button">
  Some Text
</button>

<button class="mda-button disabled">
  Some Text
</button>

ICON BUTTON

Class: 'mda-icon-button'

SubClasses: 'disabled'

Example:
<i class="mda-icon-button">some_icon</i>

<i class="mda-icon-button disabled some_icon_classes"></i>

TEXTAREA

Class: 'mda-textarea'

SubClasses: 'disabled', 'error'

Example:

<label class="mda-label" for="text">Some Text</label>
<textarea id="text" class="mda-textarea">Some content...</textarea>

<label class="mda-label" for="text">Some Text</label>
<textarea id="text" disabled class="mda-textarea disabled">Some content...</textarea>

<label class="mda-label error" for="text">Some Text</label>
<textarea id="text" class="mda-textarea error">Some content...</textarea>

INPUT CHECKBOX

Class: NO CLASS

SubClasses: 'disabled'

SubComponent: 'mda-switch', 'mda-switch__icon'

Example:

<!-- ###### CHECKBOX ###### -->
<input id="check" type="checkbox">
<label class="mda-label" for="check">Some text</label>

<input id="check" type="checkbox" disabled class="disabled">
<label class="mda-label disabled" for="check">Some text</label>


<!-- ###### CHECKBOX SWITCH ###### -->
<input id="check" type="checkbox" class="mda-switch">
<label class="mda-label" for="check">Some text</label>

<input id="check" type="checkbox" class="mda-switch">
<label class="mda-label" for="check">
  <i class="mda-switch__icon some_icon_classes"></i>
  Some text
</label>

<input id="check" type="checkbox" disabled class="mda-switch disabled">
<label class="mda-label disabled" for="check">
  <i class="mda-switch__icon some_icon_classes"></i>
  Some text
</label>

INPUT RADIO

Class: NO CLASS

SubClasses: NONE

Example:

<input id="option01" type="radio">
<label class="mda-label" for="option01">Some text</label>

SELECT

Class: 'mda-select'

SubClasses: 'mda-select__simple', 'disabled', 'error'

Example:

<label class="mda-label" for="selector03">Some text</label>
<div class="mda-select">
  <select id="selector03">
    <option value="1">Option Text 01</option>
    <option value="2">Option Text 02</option>
  </select>
</div>

<label class="mda-label" for="selector05">Some text</label>
<div class="mda-select mda-select__simple">
  <select id="selector05">
    <option value="1">Option Text 01</option>
    <option value="2">Option Text 02</option>
  </select>
</div>

<label class="mda-label" for="selector06">Some text</label>
<div class="mda-select disabled">
  <select id="selector06" disabled>
    <option value="1">Option Text 01</option>
    <option value="2">Option Text 02</option>
  </select>
</div>

<label class="mda-label error" for="selector08">Some text</label>
<div class="mda-select error">
  <select id="selector08">
    <option value="1">Option Text 01</option>
    <option value="2">Option Text 02</option>
  </select>
</div>

<label class="mda-label error" for="selector12">Some text</label>
<div class="mda-select mda-select__simple error">
  <select id="selector12">
    <option value="1">Option Text 01</option>
    <option value="2">Option Text 02</option>
  </select>
</div>

INPUT TEXT, INPUT NUMBER, INPUT PASSWORD

Class: 'mda-input'

SubClasses: 'disabled', 'error'

Example:

<label class="mda-label" for="input23">Some text</label>
<input id="input23" class="mda-input" type="text">

<label class="mda-label" for="input25">Some text</label>
<input id="input25" class="mda-input disabled" disabled type="number">

<label class="mda-label error" for="input26">Some text</label>
<input id="input26" class="mda-input error" type="password">

INPUT SEARCH (Icon inside)

Class: 'mda-input__search'

SubClasses: NONE

Example:

<label class="mda-label" for="inputSearch">Some text</label>
<div class="mda-input__search">
  <input id="inputSearch" class="mda-input" type="text">
</div>

Mixins Library

By importing components.styles.scss file, you have some mixins available.

You can also directly import the mixins library, as follows:

@import '~@lunaeme/circe-core/styles/app.mixins.scss';

Available Mixins

@mixin createFlexBox($flexDirection, $alignItems, $justifyContent, $wrapMode)
Mixin for apply flex properties to container.

Services Use

You need to declare BoxModelService, EventsService and/or ToolService providers into your module providers section.

Then you can use methods through dependency injection. Some methods are available as static.

Available Services

BoxModelService

Set of methods to make box model task easy:

public readCssUnits(expression: string): ProcessedUnitObject
This method transforms unit string ex. '20px' into an object

{ value: 20, unit: 'px' }.

Units allowed are: 'px' and '%'.

public processSizeString(sizeString: string): SizeObject
This method transforms size string ex. '20px 50px' into an object

{ width: 50, height: 20 }.

Size strings allowed are: 'XXpx', 'XX%', 'XXpx YYpx', 'XX% YY%'.

public getElement(element: string | SelectDomElementObject): Element
Receives string or SelectDomElementObject:

ex. { name: 'some_class', type: 'class' }.

And returns DOM Element for your selection. If method receives string, it will assume that type is class by default.

Types allowed: 'class', 'tag', 'id'.

public getBoxModel(elementId: ElementId, boxModelType?: BoxModelType): BoxModelSwapObject
Receives ElementId complex data and returns analysis object about box model of this ElementId.

ElementId can be: string or array of strings (In this case we assume the type is class). ElementId can be: SelectDomElementObject or array of SelectDomElementObject. SelectDomElementObject works like previous method explains. Optional parameter boxModelType can be: 'horizontal' or 'vertical'. Default value is 'vertical'.

The returned object, BoxModelSwapObject, has the next form:
{
  type: BoxModelType,         // ('horizontal' or 'vertical').
  boxModel: number,           // Width or Height (depends on type) of element id, or the addition of all element id's widths or heights if elementId received is array.
  boxModelAdditions: number,  // Width or Height (depends on type) of element id additions.
                              // Additions are paddings, margins and borders.
  boxModelAggregated: number, // The sum of boxModel and boxModelAdditions.
  boxModelExtracted: number   // The substraction of boxModelAdditions from boxModel.
}

EventsService

Set of methods about DOM events handlers:

public preventNeededEvent(event: Event, immediatePropagation?: boolean): void
This method receives any kind of DOM Event and boolean parameter which indicates if method applies event.stopPropagation() or event.stopImmediatePropagation().

public preventNoNeededEvent(event: Event, immediatePropagation?: boolean): void
This method works in the same way than the previous one and also executes event.preventDefault() method.

public scrollTop(element?: SelectDomElementObject): void
Moves vertical scroll of the element given to top. Element has the form of SelectDomElementObject:

{ name: string, type: SelectDomElementObjectType }

Property name is some element name identifier.

Property type only can be: tag, class or id.

If element is not given, de default will be:

{ name: 'main', type: 'tag' }

ToolService

Several help parameters and methods:

public static readonly PATTERNS = {
  FLOAT: {
    GREATER_THAN_0_LOWER_THAN_1: '^(0|0+(\.[0-9]{1,2})|1*)

,
    GREATER_THAN_0COMMA1_LOWER_THAN_1: '^(0+(\.[1-9]{1,2})|1*)

,
  },
  NUMBER: '^(0|[1-9][0-9]*)


};

Static parameter width some predefined regular expressions to use as patterns.

public months: Array<string> = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
Array parameter defining three letters months to use in several dates use.

public static readonly PATTERNS = {
  FLOAT: {
    GREATER_THAN_0_LOWER_THAN_1: '^(0|0+(\.[0-9]{1,2})|1*)

,
    GREATER_THAN_0COMMA1_LOWER_THAN_1: '^(0+(\.[1-9]{1,2})|1*)

,
  },
  NUMBER: '^(0|[1-9][0-9]*)


};

Static parameter width some predefined regular expressions to use as patterns.

public static getValueFromMultiLevelObject(object: any, key: string, separator?: string): any
This method uses a reducer to check inside the multi-level object given and finds the value for key given.

Parameter key is a string where levels are indicated using an optional separator character.

If separator is not given, default separator will be the dot character: .

Example:
const person = {
  name: 'John Black',
  age: 43,
  sons: {
    kevin: {
      name: 'Kevin Black',
      age: 15
    },
    mary: {
      name: 'Mary Black',
      age: 11
    }
  }
}

const key = 'sons.kevin.age';

const kevinAge = ToolsService.getValueFromMultiLevelObject(person, key);
Variable kevinAge will be 15.

public static formatString(string: string): string
Transforms string into start case string.

public static waitFor(milliseconds: number): void
Stops the execution flow during milliseconds given.

public identifier(index: number, item: any): any
This method is for use in trackBy in *ngFor directives.

Repo

https://github.com/nulpas/circe/tree/master/projects/core

Usage no npm install needed!

README

Circe :: Angular Core Services and Tools

Compatibility

Installation

Component Style Use

Available Component Styles

LABEL

BUTTON

ICON BUTTON

TEXTAREA

INPUT CHECKBOX

INPUT RADIO

SELECT

INPUT TEXT, INPUT NUMBER, INPUT PASSWORD

INPUT SEARCH (Icon inside)

Mixins Library

Available Mixins

Services Use

Available Services

BoxModelService

EventsService

ToolService

Repo