@taldor-ltd/tld-angular-fnd

Taldor Angular Fnd

Shared Angular functionality to all Taldor developers.

Install

npm install @taldor-ltd/tld-angular-fnd

Extensions

Usage

Add TldExtensionsModule to your module's 'imports'

Array extension

method	parameters	return value	description
containsElements()	-	boolean	Check if there are elements in the array
any	predicate	bollean	Check if there are elements in the array according to predicate conditions
firstOrDefault	predicate	object or null	Returns the first array's element according to predicate conditions. Returns null if none found
first	predicate	object	Returns the first array's element according to predicate conditions. Throws error if none found
sum	predicate	number	Returns the sum of the property selected in the predicate
where	predicate	object[]	Rturns all the elements according to predicate conditions
min	predicate	number	Returns the minimum value of the property selected in the predicate
max	predicate	number	Returns the maximum value of the property selected in the predicate
orderBy	predicate	object[]	Returns array order ascending by the property selected in the predicate
orderByDesc	predicate	object[]	Returns array order descending by the property selected in the predicate
average	predicate	number	Returns the average value of the property selected in the predicate
select	predicate	object[]	Returns array of all elements property selected in the predicate
groupBy	predicate	object[]	Returns array of [key, values[]] according to the property selected in the predicate
count	predicate	number	Returns the number of elements according to predicate conditions
take	number	object[]	Returns the top X elements of the array
split	predicate	[object[], object[]]	Returns array of elements according to predicate conditions and elements NOT according to predicate conditions

Function extension

method	parameters	description
applyDelayed	(this, args[])	Invokes the function with 0 timeout delay
applyDelayedTimeout	(this,timeOutInMilliseconds args[])	Invokes the function with timeOutInMilliseconds timeout delay

Directives

Usage

Add TldNgFormsModule to your module's imports

This module includes:

Israeli Id Validator

Forms Validator for checking input of TZ

Usage

• Add tldIsraeliId attribute to your <input>

  • Check always

   <input tldIsraeliId>

  • Conditional check

   <input [tldIsraeliId]="someCondition === true">

• Check errors of input's ngModel object for israeliId error

<input placeholder="מספר זהות" name="tz" #tz="ngModel" [(ngModel)]="myTz" tldIsraeliId>
<span *ngIf="(tz.errors && tz.errors.israeliId) && (tz.dirty || tz.touched)">ת.ז. לא תקינה</span>

Email address Validator

Forms Validator for checking input of Email address

Usage

• Add tldEmail attribute to your <input>

   <input tldEmail>

• Check errors of input's ngModel object for email error

<input placeholder="Email Address" name="email" #email="ngModel" [(ngModel)]="myEmail" tldEmail>
<span *ngIf="(email.errors && email.errors.email) && (email.dirty || email.touched)">Invalid Email address</span>

CSS class snippets:

Usage

Configure at the styles section, as follow.

"styles": [
  //...
  "node_modules/@taldor-ltd/tld-angular-fnd/src/resources/tld-snippets.css",
  //...
],

Here are some examples for what each css snippet file contains. For almost each example there are many more options with the same naming conventions.

align

• ar (text-align: right !important;)
• va-middle (vertical-align: middle !important;)
• va-middle-children (vertical-align: middle !important;)
• j-c-c (justify-content: center !important;)

border

• bl-1 border-left: 1px solid black !important;
• b (order-black border: 1px solid black !important;)
• n (o-border-t border-top: unset !important;)

display

• dn (display: none !important;)
• db (display: block !important;)
• dif (display: inline-flex !important;)
• v-h (visibility: hidden;)

flex system (can replace bootstrap grid-system, might need some work)

• flex-container (same as bootstrap row)
• flex-X (X = the size in percent of the column)

fonts & text

• italic (font-style: italic !important;)
• font-X (X = font size in pixels (limited to: 30, 36, 48) + lg (size = large))
• truncate-text ({ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; })
• text-decoration-none (text-decoration: none !important;)

colors

• opacity01 (opacity: 0.1;)
• bg-white (background-color: #ffffff !important;)
• png-white (sets png color to white;)

position

• position-relative (position: relative;)
• pos-abs-center (position: absolute;)
• pos-unset (position: unset !important;)

direction

• fl (float: left !important;)
• dir-rtl (direction: rtl !important;)
• clear-both (clear: both !important;)

bootstrap columns as fraction

• col-1_X (column 1/X available from 2 to 12)

other

• overflow-auto (overflow: auto;)
• c-hand (cursor: pointer !important;)

height

• h-X (X height in pixels. range 0-980)
• min-h-X (X min-height in pixels. range 1-980)
• max-h-X (X max-height in pixels. range 1-1200)
• vh-X (X height in vh. range 1-100)
• min-vh-x (X min-height in vh. range 1-100)
• max-vh-x (X max-height in vh. range 1-100)
• lh-unset (line-height: 0px !important;)
• lh-X (X line-height in pixels. range 0-980)
• h-fit-content (height: fit-content !important;)
• h-auto

width

• w-X (X width in pixels. range 0-1200)
• width-Xp (X width in percents. range 1-100)
• min-w-X (X min-width in pixels. range 1-1500)
• max-w-X (X max-width in pixels. range 1-1500)

margin

• no-margin
• marginX (X margin in pixels. range 1-200)
• marginX-l (X margin-left in pixels. range 1-200)
• marginXminus (X minus margin. range -1 - -100)
• marginXminus-l (X minus margin-left. range -1 - -100)

padding

• no-pad
• no-pad-right (no padding right)
• padX (X padding in pixels. range 1-250)
• padX-l (X padding-left in pixels. range 1-250)
• padX-tb (X padding-top & padding-bottom in pixels. range 1-250)
• padXminus (X minus padding in pixels. range -1 - -100)
• padXminus-l (X minus padding-left in pixels. range -1 - -100)
• pad-p-X (X percent padding. range 1-100)
• pad-p-X-l (X percent padding-left. range 1-100)
• right-minus-X (X minus right in pixels. range -1 - -200)
• right-X (X right in pixels. range 0-200)
• left-minus-X (X minus left in pixels. range -1 - -200)
• left-X (X left in pixels. range 0-200)
• t-X (X top in pixels. range 0-1200)
• b-X (X bottom in pixels. range 0-1200)