feat(moduleless): migrating lib to support standalone components

apps/ngx-bootstrap-docs/src/ng-api-doc.ts

@@ -1903,6 +1903,143 @@ export const ngdoc: any = {
       }
     ]
   },
+  "TimepickerConfig": {
+    "fileName": "src/timepicker/timepicker.config.ts",
+    "className": "TimepickerConfig",
+    "description": "<p>Provides default configuration values for timepicker</p>\n",
+    "methods": [],
+    "properties": [
+      {
+        "name": "allowEmptyTime",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>if true emptyTime is not marked as invalid</p>\n"
+      },
+      {
+        "name": "ariaLabelHours",
+        "defaultValue": "hours",
+        "type": "string",
+        "description": "<p>hours aria label</p>\n"
+      },
+      {
+        "name": "ariaLabelMinutes",
+        "defaultValue": "minutes",
+        "type": "string",
+        "description": "<p>minutes aria label</p>\n"
+      },
+      {
+        "name": "ariaLabelSeconds",
+        "defaultValue": "seconds",
+        "type": "string",
+        "description": "<p>seconds aria label</p>\n"
+      },
+      {
+        "name": "arrowkeys",
+        "defaultValue": "true",
+        "type": "boolean",
+        "description": "<p>if true the values of hours and minutes can be changed using the up/down arrow keys on the keyboard</p>\n"
+      },
+      {
+        "name": "disabled",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>if true hours and minutes fields will be disabled</p>\n"
+      },
+      {
+        "name": "hoursPlaceholder",
+        "defaultValue": "HH",
+        "type": "string",
+        "description": "<p>placeholder for hours field in timepicker</p>\n"
+      },
+      {
+        "name": "hourStep",
+        "defaultValue": "1",
+        "type": "number",
+        "description": "<p>hours change step</p>\n"
+      },
+      {
+        "name": "max",
+        "type": "Date",
+        "description": "<p>maximum time user can select</p>\n"
+      },
+      {
+        "name": "meridians",
+        "type": "string[]",
+        "description": "<p>meridian labels based on locale</p>\n"
+      },
+      {
+        "name": "min",
+        "type": "Date",
+        "description": "<p>minimum time user can select</p>\n"
+      },
+      {
+        "name": "minutesPlaceholder",
+        "defaultValue": "MM",
+        "type": "string",
+        "description": "<p>placeholder for minutes field in timepicker</p>\n"
+      },
+      {
+        "name": "minuteStep",
+        "defaultValue": "5",
+        "type": "number",
+        "description": "<p>minutes change step</p>\n"
+      },
+      {
+        "name": "mousewheel",
+        "defaultValue": "true",
+        "type": "boolean",
+        "description": "<p>if true scroll inside hours and minutes inputs will change time</p>\n"
+      },
+      {
+        "name": "readonlyInput",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>if true hours and minutes fields will be readonly</p>\n"
+      },
+      {
+        "name": "secondsPlaceholder",
+        "defaultValue": "SS",
+        "type": "string",
+        "description": "<p>placeholder for seconds field in timepicker</p>\n"
+      },
+      {
+        "name": "secondsStep",
+        "defaultValue": "10",
+        "type": "number",
+        "description": "<p>seconds changes step</p>\n"
+      },
+      {
+        "name": "showMeridian",
+        "defaultValue": "true",
+        "type": "boolean",
+        "description": "<p>if true works in 12H mode and displays AM/PM. If false works in 24H mode and hides AM/PM</p>\n"
+      },
+      {
+        "name": "showMinutes",
+        "defaultValue": "true",
+        "type": "boolean",
+        "description": "<p>show minutes in timepicker</p>\n"
+      },
+      {
+        "name": "showSeconds",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>show seconds in timepicker</p>\n"
+      },
+      {
+        "name": "showSpinners",
+        "defaultValue": "true",
+        "type": "boolean",
+        "description": "<p>if true spinner arrows above and below the inputs will be shown</p>\n"
+      },
+      {
+        "name": "useUtc",
+        "defaultValue": "false",
+        "type": "boolean",
+        "description": "<p>if true displays utc time instead of client time</p>\n"
+      }
+    ]
+  },
   BarValue: {
     fileName: 'src/progressbar/progressbar-type.interface.ts',
     className: 'BarValue',
@@ -1980,138 +2117,6 @@ export const ngdoc: any = {
     methods: [],
     properties: []
   },
-  TimepickerConfig: {
-    fileName: 'src/timepicker/timepicker.config.ts',
-    className: 'TimepickerConfig',
-    description: '<p>Provides default configuration values for timepicker</p>\n',
-    methods: [],
-    properties: [
-      {
-        name: 'allowEmptyTime',
-        defaultValue: 'false',
-        type: 'boolean',
-        description: '<p>if true emptyTime is not marked as invalid</p>\n'
-      },
-      {
-        name: 'ariaLabelHours',
-        defaultValue: 'hours',
-        type: 'string',
-        description: '<p>hours aria label</p>\n'
-      },
-      {
-        name: 'ariaLabelMinutes',
-        defaultValue: 'minutes',
-        type: 'string',
-        description: '<p>minutes aria label</p>\n'
-      },
-      {
-        name: 'ariaLabelSeconds',
-        defaultValue: 'seconds',
-        type: 'string',
-        description: '<p>seconds aria label</p>\n'
-      },
-      {
-        name: 'arrowkeys',
-        defaultValue: 'true',
-        type: 'boolean',
-        description:
-          '<p>if true the values of hours and minutes can be changed using the up/down arrow keys on the keyboard</p>\n'
-      },
-      {
-        name: 'disabled',
-        defaultValue: 'false',
-        type: 'boolean',
-        description: '<p>if true hours and minutes fields will be disabled</p>\n'
-      },
-      {
-        name: 'hoursPlaceholder',
-        defaultValue: 'HH',
-        type: 'string',
-        description: '<p>placeholder for hours field in timepicker</p>\n'
-      },
-      {
-        name: 'hourStep',
-        defaultValue: '1',
-        type: 'number',
-        description: '<p>hours change step</p>\n'
-      },
-      {
-        name: 'max',
-        type: 'Date',
-        description: '<p>maximum time user can select</p>\n'
-      },
-      {
-        name: 'meridians',
-        type: 'string[]',
-        description: '<p>meridian labels based on locale</p>\n'
-      },
-      {
-        name: 'min',
-        type: 'Date',
-        description: '<p>minimum time user can select</p>\n'
-      },
-      {
-        name: 'minutesPlaceholder',
-        defaultValue: 'MM',
-        type: 'string',
-        description: '<p>placeholder for minutes field in timepicker</p>\n'
-      },
-      {
-        name: 'minuteStep',
-        defaultValue: '5',
-        type: 'number',
-        description: '<p>minutes change step</p>\n'
-      },
-      {
-        name: 'mousewheel',
-        defaultValue: 'true',
-        type: 'boolean',
-        description: '<p>if true scroll inside hours and minutes inputs will change time</p>\n'
-      },
-      {
-        name: 'readonlyInput',
-        defaultValue: 'false',
-        type: 'boolean',
-        description: '<p>if true hours and minutes fields will be readonly</p>\n'
-      },
-      {
-        name: 'secondsPlaceholder',
-        defaultValue: 'SS',
-        type: 'string',
-        description: '<p>placeholder for seconds field in timepicker</p>\n'
-      },
-      {
-        name: 'secondsStep',
-        defaultValue: '10',
-        type: 'number',
-        description: '<p>seconds changes step</p>\n'
-      },
-      {
-        name: 'showMeridian',
-        defaultValue: 'true',
-        type: 'boolean',
-        description: '<p>if true works in 12H mode and displays AM/PM. If false works in 24H mode and hides AM/PM</p>\n'
-      },
-      {
-        name: 'showMinutes',
-        defaultValue: 'true',
-        type: 'boolean',
-        description: '<p>show minutes in timepicker</p>\n'
-      },
-      {
-        name: 'showSeconds',
-        defaultValue: 'false',
-        type: 'boolean',
-        description: '<p>show seconds in timepicker</p>\n'
-      },
-      {
-        name: 'showSpinners',
-        defaultValue: 'true',
-        type: 'boolean',
-        description: '<p>if true spinner arrows above and below the inputs will be shown</p>\n'
-      }
-    ]
-  },
   Time: {
     fileName: 'src/timepicker/timepicker.models.ts',
     className: 'Time',

libs/common-docs/src/lib/common/schematics/schematics.component.html

@@ -138,7 +138,7 @@ <h2 id="getting-started">Schematics</h2>
     ],
     <span class="kwd">imports</span>: [
         <span class="pln">  &hellip;</span>
-        <span class="lit">AccordionModule.forRoot()</span>,
+        <span class="lit">AccordionModule</span>,
     ],
         bootstrap: [AppComponent]
     <span class="pun">{{'}'}}</span>)

libs/doc-pages/accordion/src/lib/accordion.module.ts

@@ -17,7 +17,7 @@ export { AccordionSectionComponent } from './accordion-section.component';
         ...DEMO_COMPONENTS
     ],
     imports: [
-        AccordionModule.forRoot(),
+        AccordionModule,
         CommonModule,
         FormsModule,
         DocsModule,

libs/doc-pages/accordion/src/lib/docs/usage.md

@@ -5,7 +5,7 @@ import { AccordionModule } from 'ngx-bootstrap/accordion';
 @NgModule({
   imports: [
     BrowserAnimationsModule,
-    AccordionModule.forRoot(),
+    AccordionModule,
     ...
   ]
 })

libs/doc-pages/timepicker/src/lib/demos/index.ts

@@ -12,6 +12,7 @@ import { DemoTimepickerIsValidComponent } from './isvalid/isvalid';
 import { DemoTimepickerMeridianComponent } from './meridian/meridian';
 import { DemoTimepickerMinMaxComponent } from './min-max/min-max';
 import { DemoTimepickerMousewheelComponent } from './mousewheel/mousewheel';
+import { DemoTimepickerUseUtcComponent } from './use-utc/use-utc';
 import { DemoTimepickerPlaceholderComponent } from './placeholder/placeholder';
 import { DemoTimepickerReadonlyComponent } from './readonly/readonly';
 import { DemoTimepickerSpinnersComponent } from './spinners/spinners';
@@ -31,6 +32,7 @@ export const DEMO_COMPONENTS = [
   DemoTimepickerToggleMinutesSecondsComponent,
   DemoTimepickerArrowkeysComponent,
   DemoTimepickerMousewheelComponent,
+  DemoTimepickerUseUtcComponent,
   DemoTimepickerCustomValidationComponent,
   DemoTimepickerIsValidComponent,
   DemoTimepickerCustomValidationComponent,

libs/doc-pages/timepicker/src/lib/demos/use-utc/use-utc.html

@@ -0,0 +1,3 @@
+<timepicker [(ngModel)]="myTime"></timepicker>
+
+<pre class="alert alert-info">Time is: {{myTime}}</pre>

libs/doc-pages/timepicker/src/lib/demos/use-utc/use-utc.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { TimepickerConfig } from 'ngx-bootstrap/timepicker';
+
+export function getTimepickerConfig(): TimepickerConfig {
+  return Object.assign(new TimepickerConfig(), {
+    useUtc: true
+  });
+}
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'demo-timepicker-use-utc',
+  templateUrl: './use-utc.html',
+  providers: [{ provide: TimepickerConfig, useFactory: getTimepickerConfig }]
+})
+export class DemoTimepickerUseUtcComponent {
+  myTime: Date = new Date();
+}

libs/doc-pages/timepicker/src/lib/timepicker-section.list.ts

@@ -25,6 +25,7 @@ import {
 } from '@ngx-bootstrap-doc/docs';
 import { DemoTimepickerIsValidComponent } from './demos/isvalid/isvalid';
 import { DemoTimepickerFormComponent } from './demos/form/form';
+import { DemoTimepickerUseUtcComponent } from './demos/use-utc/use-utc';
 
 export const demoComponentContent: ContentSection[] = [
   {
@@ -161,6 +162,15 @@ export const demoComponentContent: ContentSection[] = [
         component: require('!!raw-loader!./demos/config/config'),
         html: require('!!raw-loader!./demos/config/config.html'),
         outlet: DemoTimepickerConfigComponent
+      },
+      {
+        title: 'Use utc',
+        anchor: 'use-utc',
+        component: require('!!raw-loader!./demos/use-utc/use-utc'),
+        html: require('!!raw-loader!./demos/use-utc/use-utc.html'),
+        description: `<p><code>useUtc</code> can be used to display utc
+        time instead of client time.`,
+        outlet: DemoTimepickerUseUtcComponent
       }
     ]
   },