@rd/forms NPM | npm.io

@rd/forms

This module contains any javascript code that is directly related to html forms. (custom input components/directives etc)

It is reliant on the @rd/core, jquery, pickmeup, moment, and ckeditor modules. This module currently contains components/directives such as button-group-input, text-editor, datepicker, rdSelect, etc.

Installation

npm install @rd/forms @rd/core jquery pickmeup moment moment-range ckeditor --save

How to import

import { RdAngularFormsModule } from '@rd/forms';

Examples

The following section contains documentation on any components, directives, or modules which are exported by the RdAngularFormsModule

NgModelInput (base-class)

Beneficial if you are looking to implement a custom component with a dual-bound (ngModel)

NgModelInputValueAccessor

Must be provided along with the NgModelInput base class in order to obtain a dual-bound ngModel (using helper classes)

Simply extend NgModelInput and provide your component a new NgModelInputValueAccessor(componentName) in order to have a fully-functional dual-bound ngModel-ready component

Example usage

import { NgModelInput, NgModelInputValueAccessor } from '@rd/forms';

@Directive({
  selector: 'rd-text-editor, [rd-text-editor]',
  providers: [new NgModelInputValueAccessor(TextEditorDirective)]
})
export class TextEditorDirective extends NgModelInput implements OnInit, AfterViewInit, OnDestroy {

  constructor(){
    super();
  }

  ...

  /* override parent definition */
  writeValue(newVal) {
    this.setPluginValue(newVal);
    super.writeValue(newVal);
  }

}

Datepicker `rd-datepicker`

This datepicker might be useful to you if you need a regular date-picker component w/quick-access-buttons (ie. reporting datepicker)

If you need a date-range picker, refer to the Rangepicker component defined below
Allows you to define the html for the rd-datepicker-toggle-button and the rd-datepicker-quick-access-button array

Example

  <rd-datepicker (change)="onDateChange($event)" [(ngModel)]="ngModelDate" style="display: inline-block;">
      <a rd-datepicker-toggle-button class="btn btn-default" uib-btn-radio="0" uncheckable>
        <div *ngIf="ngModelDate">{{ngModelDate}}&nbsp;&nbsp;<i class="fa fa-sort-desc" style="vertical-align: text-top;"></i></div>
        <div *ngIf="!ngModelDate" class="md-placeholder">select date</div>
      </a>

    <button rd-datepicker-quick-access-button *ngFor="let quickAccessDate of quickAccessDatesAsObservable | async" [value]="quickAccessDate.value" class="btn btn-default btn-block">
      {{quickAccessDate.name}}
    </button>
  </rd-datepicker>

Rangepicker `rd-rangepicker`

Example

  <rd-rangepicker (change)="onRangeChange($event)" [(ngModel)]="ngModelRange" [momentFormat]="'MM/DD/Y'" style="display: inline-block;">
      <a rd-datepicker-toggle-button class="btn btn-default" uib-btn-radio="0" uncheckable>
        <div *ngIf="ngModelRange">{{getDateRangeDisplay()}}&nbsp;&nbsp;<i class="fa fa-sort-desc" style="vertical-align: text-top;"></i></div>
        <div *ngIf="!ngModelRange" class="md-placeholder">select date</div>
      </a>

    <button rd-datepicker-quick-access-button *ngFor="let quickAccessRange of quickAccessRangesAsObservable | async" [value]="quickAccessRange.value" class="btn btn-default btn-block">
      {{quickAccessRange.name}}
    </button>
  </rd-rangepicker>

TextEditorDirective `rd-text-editor, [rd-text-editor]`

Beneficial if you want a fast ckeditor text-editor which is fully configurable and already bound to an (ngModel)

Example

<rd-text-editor [(ngModel)]="ngModel"></rd-text-editor>

Inline example

<div rd-text-editor [(ngModel)]="ngModelInline" [inline]="true">
    <h1>turbo</h1>
</div>

SelectModule

This module is specific to rdSelect and its corresponding directives only

SelectDirective `[rdSelect], [rdSelect][multiple="true"]`

This directive makes it easy to get one or more selected values of any list items quickly and easily via its exposed (ngModel) and (change)="onChange($event)" emitter

Responsible for UI-agnostic generic select/multiselect functionality
Intended to be paired with one or many child rdOption directives
rdSelectTitle, rdSelectToggleBtn directives are optional
This directive implements the Select interface

Basic example

<div rdSelect #select="rdSelect" [(ngModel)]="ngModelAry" [multiple]="true" rdBlur (blur)="select.open = false">
	<button class="btn" rdSelectToggleBtn [select]="select" rdSelectTitle (title)="setTitle($event)">
		<span *ngIf="!title"><-- select --></span>
		<span *ngIf="title">{{title}}</span>
  	</button>

	<ul rdSelectDropdown [select]="select">
		<li *ngFor="let unit of units" rdOption #option="rdOption" [select]="select" [title]="unit.address" [value]="unit.id" [class.active]="option.isActive()">{{unit.address}}</li>
	</ul>
</div>

<div class="well">{{ngModelAry}}</div>

OptionDirective `[rdOption]`

When this directive is paired with a Select, they work together to provide the select/multiselect functionality that many components require

Compatible with rdSelect
Value(s) may be object(s), number(s), or string(s) (depending on Select -> multiple status)
Not tied to any view so it can be used anywhere for anything select (could probably even be used on something like the rd-list-legend-filter)
Notifies the SelectDirective of its existence onInit() so that it can then do calculations on whether this option is selected or not based on the Select -> ngModel value
Exposes isActive() callback to apply whatever selected/active class you want

Example

		<li *ngFor="let unit of units" rdOption #option="rdOption" [select]="selectName" [title]="unit.address" [value]="unit.id" [class.active]="option.isActive()">
			<a><span>{{unit.address}}</span></a>
		</li>

BootstrapSelect `rd-bootstrap-select`

Presentation-layer component which works hand-in-hand with any directive which implements the Select interface

You can make your own Select presentation-layer component(s)!!

Example

<rd-bootstrap-select [btnClass]="'btn-primary'" [defaultTitle]="'All Districts'" [select]="select2" 
  #select2="rdSelect" rdSelect [multiple]="true" [(ngModel)]="ngModelAry"
	(change)="onChange($event)">
	<rd-bootstrap-dropdown-menu rdSelectDropdown [select]="select2">
		<li *ngFor="let unit of units" rdOption #option="rdOption" [select]="select2" [title]="unit.address" [value]="unit.id" [class.active]="option.isActive()">
			<a><span>{{unit.address}}</span></a>
		</li>
	</rd-bootstrap-dropdown-menu>
</rd-bootstrap-select>

<div class="well">{{ngModelAry}}</div>

ComboSelect `rd-combo-select`

<rd-combo-select #comboselect [(ngModel)]="ngModel" [open]="open" (change)="onChange($event)" (toggle)="open = $event" (title)="title = $event"
	class="col-sm-6 rd-combo-select">
	<div class="rd-combo-select-input-wrapper" [ngClass]="{'rd-state-focused': focus}">
		<input rdComboSelectInput class="rd-combo-select-input" type="text" [(ngModel)]="comboselect.inputNgModel" (focus)="focus = true" (blur)="focus = false"/>
		<div rdComboSelectToggleBtn class="rd-combo-select-toggle-btn right">
			<span class="bs-caret"><span class="caret"></span></span>
		</div>
	</div>
	<ul *ngIf="open" [@animateDropdown] class="rd-combo-select-dropdown"><!-- [@openClose]="open ? 'active' : 'inactive'" -->
		<li rdComboSelectOption *ngFor="let time of times; let i = index" #option="option" [value]="time" [title]="time" [class.active]="option.isActive()"
			(click)="option.setActive()">
			<span>{{option.title}}</span>
		</li>
	</ul>
</rd-combo-select>

Contributing

In order to release this package automatically, you must format the commit message properly so that when it is merged into master, it will semantically release the new changes based on commit msg type and previously tagged version

Don't forget to expose any new additions publicly, ensure everything is accessible via the public_api.ts

-> Code review guidelines for this project

-> Coding standards for this project

-> Contribution guidelines for this project

powered by: https://rentdynamics.com + https://angular.io

tslib

@infinitebrahmanuniverse/nolb-_rd @everything-registry/sub-chunk-762

4.3.0

5 years ago

4.2.0

5 years ago

4.1.0