@bcgov/nr-ngx-component-lib 0.0.70 → 0.0.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/components/date-navigator/date-navigator.component.d.ts +23 -0
  2. package/esm2022/components/button/button.component.mjs +2 -2
  3. package/esm2022/components/date-navigator/date-navigator.component.mjs +90 -0
  4. package/esm2022/nr-ngx-component-lib.module.mjs +12 -3
  5. package/esm2022/public-api.mjs +2 -1
  6. package/fesm2022/bcgov-nr-ngx-component-lib.mjs +94 -5
  7. package/fesm2022/bcgov-nr-ngx-component-lib.mjs.map +1 -1
  8. package/nr-ngx-component-lib.module.d.ts +27 -25
  9. package/package.json +1 -1
  10. package/public-api.d.ts +1 -0
package/fesm2022/bcgov-nr-ngx-component-lib.mjs CHANGED
@@ -47,6 +47,9 @@ import * as i2$6 from '@angular/material/tabs';
47
47
  import { MatTabGroup, MatTabsModule } from '@angular/material/tabs';
48
48
  import * as i2$7 from '@angular/material/menu';
49
49
  import { MatMenuModule } from '@angular/material/menu';
50
+ import { provideMomentDateAdapter } from '@angular/material-moment-adapter';
51
+ import * as i2$8 from '@angular/material/datepicker';
52
+ import { MatDatepickerModule } from '@angular/material/datepicker';
50
53
  import { MatButtonModule } from '@angular/material/button';
51
54
  import { MatCheckboxModule } from '@angular/material/checkbox';
52
55
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -295,7 +298,7 @@ class ButtonComponent extends ConfigurationSubscriberBase {
295
298
  this.useContent = !this.hasLabel && !this.hasIconLeft && !this.hasIconRight && !this.hasIconCompact;
296
299
  }
297
300
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
298
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ButtonComponent, selector: "nrcl-button", inputs: { label: "label", icon: "icon", iconRight: "iconRight", iconCompact: "iconCompact", tooltip: "tooltip", compact: "compact", small: "small", primary: ["primary", "primary", booleanAttribute], secondary: ["secondary", "secondary", booleanAttribute], tertiary: ["tertiary", "tertiary", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], anchor: "anchor" }, outputs: { click: "click" }, host: { properties: { "class.disabled": "disabled", "class.primary": "isPrimary", "class.secondary": "isSecondary", "class.tertiary": "isTertiary", "class.anchor": "isAnchor", "class.normal": "!isCompact && !isSmall", "class.compact": "isCompact", "class.small": "isSmall && !isCompact", "class.label": "hasLabel", "class.icon-left": "hasIconLeft", "class.icon-right": "hasIconRight", "class.icon-compact": "hasIconCompact", "class.icon-small": "isIconSmall" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if ( !isAnchor ) {\n <button\n matRipple\n [disabled]=\"disabled\"\n [matTooltip]=\"tooltipVal\"\n >\n @if ( useContent ) {\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n }\n @else {\n @if ( hasIconLeft ) {\n <nrcl-icon class=\"left\" [small]=\"isIconSmall\">{{ icon }}</nrcl-icon>\n }\n\n @if ( hasIconRight ) {\n <nrcl-icon class=\"right\" [small]=\"isIconSmall\">{{ iconRight }}</nrcl-icon>\n }\n\n @if ( hasIconCompact ) {\n <nrcl-icon class=\"compact\" [small]=\"isIconSmall\">{{ iconCompact || icon }}</nrcl-icon>\n }\n\n @if ( hasLabel ) {\n <span class=\"label\">{{ label }}</span>\n }\n }\n </button>\n}\n@else {\n <a \n [attr.href]=\"href\" \n [attr.target]=\"href && target\"\n [matTooltip]=\"tooltipVal\"\n >\n @if ( hasIconLeft ) {\n <nrcl-icon class=\"left\" [small]=\"isIconSmall\">{{ icon }}</nrcl-icon>\n }\n\n @if ( hasIconRight ) {\n <nrcl-icon class=\"right\" [small]=\"isIconSmall\">{{ iconRight }}</nrcl-icon>\n }\n\n @if ( hasIconCompact ) {\n <nrcl-icon class=\"compact\" [small]=\"isIconSmall\">{{ iconCompact || icon }}</nrcl-icon>\n }\n\n @if ( hasLabel ) {\n <span class=\"label\">{{ label }}</span>\n }\n </a>\n}", styles: ["::ng-deep :root{--nrcl-button-normal-height: 36px;--nrcl-button-normal-padding-horizontal: 16px;--nrcl-button-normal-icon-padding-horizontal: 36px;--nrcl-button-normal-font-size: var( --nrcl-font-size );--nrcl-button-normal-icon-size: var( --nrcl-icon-normal-size );--nrcl-button-small-height: 24px;--nrcl-button-small-padding-horizontal: 8px;--nrcl-button-small-icon-padding-horizontal: 24px;--nrcl-button-small-font-size: var( --nrcl-font-size-small );--nrcl-button-small-icon-size: var( --nrcl-icon-small-size );--nrcl-button-compact-height: 44px;--nrcl-button-compact-padding-horizontal: 8px;--nrcl-button-compact-font-size: var( --nrcl-font-size-small );--nrcl-button-compact-icon-size: var( --nrcl-icon-normal-size );--nrcl-button-primary-foreground-color: white;--nrcl-button-primary-background-color: #003366;--nrcl-button-primary-border-color: #003366;--nrcl-button-primary-hover-background-color: #144a89cc;--nrcl-button-primary-disabled-foreground-color: #7E7E7E;--nrcl-button-primary-disabled-background-color: #CCCCCC;--nrcl-button-primary-disabled-border-color: #CCCCCC;--nrcl-button-primary-disabled-hover-background-color: #CCCCCC;--nrcl-button-secondary-foreground-color: black;--nrcl-button-secondary-background-color: white;--nrcl-button-secondary-border-color: #003366;--nrcl-button-secondary-hover-background-color: #f5f5f5;--nrcl-button-secondary-disabled-foreground-color: #7E7E7E;--nrcl-button-secondary-disabled-background-color: #CCCCCC;--nrcl-button-secondary-disabled-border-color: #CCCCCC;--nrcl-button-secondary-disabled-hover-background-color: #CCCCCC;--nrcl-button-tertiary-foreground-color: black;--nrcl-button-tertiary-background-color: transparent;--nrcl-button-tertiary-border-color: transparent;--nrcl-button-tertiary-hover-background-color: rgba(0, 0, 0, .04);--nrcl-button-tertiary-disabled-foreground-color: #7E7E7E;--nrcl-button-tertiary-disabled-background-color: transparent;--nrcl-button-tertiary-disabled-border-color: transparent;--nrcl-button-tertiary-disabled-hover-background-color: transparent;--nrcl-button-anchor-foreground-color: #255a90;--nrcl-button-anchor-background-color: transparent;--nrcl-button-anchor-border-color: transparent;--nrcl-button-anchor-hover-foreground-color: #0000ee;--nrcl-button-anchor-hover-background-color: transparent;--nrcl-button-anchor-disabled-foreground-color: #7E7E7E;--nrcl-button-anchor-disabled-background-color: transparent;--nrcl-button-anchor-disabled-border-color: transparent;--nrcl-button-anchor-disabled-hover-background-color: transparent}:host{--nrcl-button-height: 50px;--nrcl-icon-padding: 50px;--nrcl-button-font-size: 40px;--nrcl-button-font-weight: 500;--nrcl-button-padding-left: 50px;--nrcl-button-padding-right: 50px;--nrcl-button-foreground-color: #red;--nrcl-button-background-color: #green;--nrcl-button-border-color: #yellow;--nrcl-button-hover-background-color: #blue}:host button,:host a{display:inline-flex;align-items:center;position:relative;height:var(--nrcl-button-height);min-width:var(--nrcl-button-height);width:var(--nrcl-button-width);cursor:pointer;-webkit-user-select:none;user-select:none;margin:0;padding:0;background-color:var(--nrcl-button-background-color);color:var(--nrcl-button-foreground-color);border-color:var(--nrcl-button-border-color);border-width:1px;border-style:solid;border-radius:4px}:host button:hover,:host a:hover{background-color:var(--nrcl-button-hover-background-color)}:host button .label,:host button .content,:host a .label,:host a .content{font-family:var(--nrcl-font-family);font-size:var(--nrcl-button-font-size);font-weight:var(--nrcl-button-font-weight);width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}:host button .content,:host a .content{padding-left:var(--nrcl-button-padding-left);padding-right:var(--nrcl-button-padding-right);display:flex;align-items:center}:host.normal{--nrcl-button-height: var( --nrcl-button-normal-height );--nrcl-button-padding-left: var( --nrcl-button-normal-padding-horizontal );--nrcl-button-padding-right: var( --nrcl-button-normal-padding-horizontal );--nrcl-button-font-size: var( --nrcl-button-normal-font-size );--nrcl-button-icon-size: var( --nrcl-button-normal-icon-size );--nrcl-icon-padding: var( --nrcl-button-normal-icon-padding-horizontal )}:host.small{--nrcl-button-height: var( --nrcl-button-small-height );--nrcl-button-font-size: var( --nrcl-button-small-font-size )}:host.icon-small{--nrcl-button-padding-left: var( --nrcl-button-small-padding-horizontal );--nrcl-button-padding-right: var( --nrcl-button-small-padding-horizontal );--nrcl-button-icon-size: var( --nrcl-button-small-icon-size );--nrcl-icon-padding: var( --nrcl-button-small-icon-padding-horizontal )}:host.compact{--nrcl-button-height: var( --nrcl-button-compact-height );--nrcl-button-padding-left: var( --nrcl-button-compact-padding-horizontal );--nrcl-button-padding-right: var( --nrcl-button-compact-padding-horizontal );--nrcl-button-font-size: var( --nrcl-button-compact-font-size );--nrcl-button-icon-size: var( --nrcl-button-normal-icon-size )}:host.compact button{flex-direction:column;justify-content:center}:host.label button,:host.label a{padding-left:var(--nrcl-button-padding-left);padding-right:var(--nrcl-button-padding-right)}:host.icon-left button,:host.icon-left a{--nrcl-button-padding-left: var( --nrcl-icon-padding )}:host.icon-left button .content,:host.icon-left a .content{padding-left:0}:host.icon-left button ::ng-deep .mat-icon.left,:host.icon-left button ::ng-deep nrcl-icon.left,:host.icon-left a ::ng-deep .mat-icon.left,:host.icon-left a ::ng-deep nrcl-icon.left{position:absolute;left:calc((var(--nrcl-icon-padding) - var(--nrcl-button-icon-size)) / 2 - 1px)}:host.icon-right button,:host.icon-right a{--nrcl-button-padding-right: var( --nrcl-icon-padding )}:host.icon-right button .content,:host.icon-right a .content{padding-right:0}:host.icon-right button ::ng-deep .mat-icon.right,:host.icon-right button ::ng-deep nrcl-icon.right,:host.icon-right a ::ng-deep .mat-icon.right,:host.icon-right a ::ng-deep nrcl-icon.right{position:absolute;right:calc((var(--nrcl-icon-padding) - var(--nrcl-button-icon-size)) / 2 - 1px)}:host.primary{--nrcl-button-foreground-color: var( --nrcl-button-primary-foreground-color );--nrcl-button-background-color: var( --nrcl-button-primary-background-color );--nrcl-button-border-color: var( --nrcl-button-primary-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-primary-hover-background-color )}:host.primary button{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host.primary.disabled{--nrcl-button-foreground-color: var( --nrcl-button-primary-disabled-foreground-color );--nrcl-button-background-color: var( --nrcl-button-primary-disabled-background-color );--nrcl-button-border-color: var( --nrcl-button-primary-disabled-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-primary-disabled-hover-background-color )}:host.secondary{--nrcl-button-foreground-color: var( --nrcl-button-secondary-foreground-color );--nrcl-button-background-color: var( --nrcl-button-secondary-background-color );--nrcl-button-border-color: var( --nrcl-button-secondary-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-secondary-hover-background-color )}:host.secondary button{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host.secondary.disabled{--nrcl-button-foreground-color: var( --nrcl-button-secondary-disabled-foreground-color );--nrcl-button-background-color: var( --nrcl-button-secondary-disabled-background-color );--nrcl-button-border-color: var( --nrcl-button-secondary-disabled-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-secondary-disabled-hover-background-color )}:host.tertiary{--nrcl-button-foreground-color: var( --nrcl-button-tertiary-foreground-color );--nrcl-button-background-color: var( --nrcl-button-tertiary-background-color );--nrcl-button-border-color: var( --nrcl-button-tertiary-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-tertiary-hover-background-color )}:host.tertiary.disabled{--nrcl-button-foreground-color: var( --nrcl-button-tertiary-disabled-foreground-color );--nrcl-button-background-color: var( --nrcl-button-tertiary-disabled-background-color );--nrcl-button-border-color: var( --nrcl-button-tertiary-disabled-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-tertiary-disabled-hover-background-color )}:host.anchor{--nrcl-button-foreground-color: var( --nrcl-button-anchor-foreground-color );--nrcl-button-background-color: var( --nrcl-button-anchor-background-color );--nrcl-button-border-color: var( --nrcl-button-anchor-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-anchor-hover-background-color );--nrcl-button-padding-left: 0;--nrcl-button-padding-right: 0;--nrcl-button-normal-height: 20px}:host.anchor a{box-sizing:border-box}:host.anchor a:hover{color:var(--nrcl-button-anchor-hover-foreground-color)}:host.anchor a .label,:host.anchor a .content{text-decoration:underline}:host.anchor.disabled{--nrcl-button-foreground-color: var( --nrcl-button-anchor-disabled-foreground-color );--nrcl-button-background-color: var( --nrcl-button-anchor-disabled-background-color );--nrcl-button-border-color: var( --nrcl-button-anchor-disabled-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-anchor-disabled-hover-background-color )}:host.disabled button,:host.disabled a{cursor:default}:host.disabled button:hover,:host.disabled a:hover{color:var(--nrcl-button-foreground-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon", inputs: ["small", "large"] }] }); }
301
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ButtonComponent, selector: "nrcl-button", inputs: { label: "label", icon: "icon", iconRight: "iconRight", iconCompact: "iconCompact", tooltip: "tooltip", compact: "compact", small: "small", primary: ["primary", "primary", booleanAttribute], secondary: ["secondary", "secondary", booleanAttribute], tertiary: ["tertiary", "tertiary", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], anchor: "anchor" }, outputs: { click: "click" }, host: { properties: { "class.disabled": "disabled", "class.primary": "isPrimary", "class.secondary": "isSecondary", "class.tertiary": "isTertiary", "class.anchor": "isAnchor", "class.normal": "!isCompact && !isSmall", "class.compact": "isCompact", "class.small": "isSmall && !isCompact", "class.label": "hasLabel", "class.icon-left": "hasIconLeft", "class.icon-right": "hasIconRight", "class.icon-compact": "hasIconCompact", "class.icon-small": "isIconSmall" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "@if ( !isAnchor ) {\n <button\n matRipple\n [disabled]=\"disabled\"\n [matTooltip]=\"tooltipVal\"\n >\n @if ( useContent ) {\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n }\n @else {\n @if ( hasIconLeft ) {\n <nrcl-icon class=\"left\" [small]=\"isIconSmall\">{{ icon }}</nrcl-icon>\n }\n\n @if ( hasIconRight ) {\n <nrcl-icon class=\"right\" [small]=\"isIconSmall\">{{ iconRight }}</nrcl-icon>\n }\n\n @if ( hasIconCompact ) {\n <nrcl-icon class=\"compact\" [small]=\"isIconSmall\">{{ iconCompact || icon }}</nrcl-icon>\n }\n\n @if ( hasLabel ) {\n <span class=\"label\">{{ label }}</span>\n }\n }\n </button>\n}\n@else {\n <a \n [attr.href]=\"href\" \n [attr.target]=\"href && target\"\n [matTooltip]=\"tooltipVal\"\n >\n @if ( hasIconLeft ) {\n <nrcl-icon class=\"left\" [small]=\"isIconSmall\">{{ icon }}</nrcl-icon>\n }\n\n @if ( hasIconRight ) {\n <nrcl-icon class=\"right\" [small]=\"isIconSmall\">{{ iconRight }}</nrcl-icon>\n }\n\n @if ( hasIconCompact ) {\n <nrcl-icon class=\"compact\" [small]=\"isIconSmall\">{{ iconCompact || icon }}</nrcl-icon>\n }\n\n @if ( hasLabel ) {\n <span class=\"label\">{{ label }}</span>\n }\n </a>\n}", styles: ["::ng-deep :root{--nrcl-button-normal-height: 36px;--nrcl-button-normal-padding-horizontal: 16px;--nrcl-button-normal-icon-padding-horizontal: 36px;--nrcl-button-normal-font-size: var( --nrcl-font-size );--nrcl-button-normal-icon-size: var( --nrcl-icon-normal-size );--nrcl-button-small-height: 24px;--nrcl-button-small-padding-horizontal: 8px;--nrcl-button-small-icon-padding-horizontal: 24px;--nrcl-button-small-font-size: var( --nrcl-font-size-small );--nrcl-button-small-icon-size: var( --nrcl-icon-small-size );--nrcl-button-compact-height: 44px;--nrcl-button-compact-padding-horizontal: 8px;--nrcl-button-compact-font-size: var( --nrcl-font-size-small );--nrcl-button-compact-icon-size: var( --nrcl-icon-normal-size );--nrcl-button-primary-foreground-color: white;--nrcl-button-primary-background-color: #003366;--nrcl-button-primary-border-color: #003366;--nrcl-button-primary-hover-background-color: #144a89cc;--nrcl-button-primary-disabled-foreground-color: #7E7E7E;--nrcl-button-primary-disabled-background-color: #CCCCCC;--nrcl-button-primary-disabled-border-color: #CCCCCC;--nrcl-button-primary-disabled-hover-background-color: #CCCCCC;--nrcl-button-secondary-foreground-color: black;--nrcl-button-secondary-background-color: white;--nrcl-button-secondary-border-color: #003366;--nrcl-button-secondary-hover-background-color: #f5f5f5;--nrcl-button-secondary-disabled-foreground-color: #7E7E7E;--nrcl-button-secondary-disabled-background-color: #CCCCCC;--nrcl-button-secondary-disabled-border-color: #CCCCCC;--nrcl-button-secondary-disabled-hover-background-color: #CCCCCC;--nrcl-button-tertiary-foreground-color: black;--nrcl-button-tertiary-background-color: transparent;--nrcl-button-tertiary-border-color: transparent;--nrcl-button-tertiary-hover-background-color: rgba(0, 0, 0, .04);--nrcl-button-tertiary-disabled-foreground-color: #7E7E7E;--nrcl-button-tertiary-disabled-background-color: transparent;--nrcl-button-tertiary-disabled-border-color: transparent;--nrcl-button-tertiary-disabled-hover-background-color: transparent;--nrcl-button-anchor-foreground-color: #255a90;--nrcl-button-anchor-background-color: transparent;--nrcl-button-anchor-border-color: transparent;--nrcl-button-anchor-hover-foreground-color: #0000ee;--nrcl-button-anchor-hover-background-color: transparent;--nrcl-button-anchor-disabled-foreground-color: #7E7E7E;--nrcl-button-anchor-disabled-background-color: transparent;--nrcl-button-anchor-disabled-border-color: transparent;--nrcl-button-anchor-disabled-hover-background-color: transparent}:host{--nrcl-button-height: 50px;--nrcl-icon-padding: 50px;--nrcl-button-font-size: 40px;--nrcl-button-font-weight: 500;--nrcl-button-padding-left: 50px;--nrcl-button-padding-right: 50px;--nrcl-button-foreground-color: #red;--nrcl-button-background-color: #green;--nrcl-button-border-color: #yellow;--nrcl-button-hover-background-color: #blue;display:flex}:host button,:host a{display:inline-flex;align-items:center;position:relative;height:var(--nrcl-button-height);min-width:var(--nrcl-button-height);width:var(--nrcl-button-width);cursor:pointer;-webkit-user-select:none;user-select:none;margin:0;padding:0;background-color:var(--nrcl-button-background-color);color:var(--nrcl-button-foreground-color);border-color:var(--nrcl-button-border-color);border-width:1px;border-style:solid;border-radius:4px}:host button:hover,:host a:hover{background-color:var(--nrcl-button-hover-background-color)}:host button .label,:host button .content,:host a .label,:host a .content{font-family:var(--nrcl-font-family);font-size:var(--nrcl-button-font-size);font-weight:var(--nrcl-button-font-weight);width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}:host button .content,:host a .content{padding-left:var(--nrcl-button-padding-left);padding-right:var(--nrcl-button-padding-right);display:flex;align-items:center}:host.normal{--nrcl-button-height: var( --nrcl-button-normal-height );--nrcl-button-padding-left: var( --nrcl-button-normal-padding-horizontal );--nrcl-button-padding-right: var( --nrcl-button-normal-padding-horizontal );--nrcl-button-font-size: var( --nrcl-button-normal-font-size );--nrcl-button-icon-size: var( --nrcl-button-normal-icon-size );--nrcl-icon-padding: var( --nrcl-button-normal-icon-padding-horizontal )}:host.small{--nrcl-button-height: var( --nrcl-button-small-height );--nrcl-button-font-size: var( --nrcl-button-small-font-size )}:host.icon-small{--nrcl-button-padding-left: var( --nrcl-button-small-padding-horizontal );--nrcl-button-padding-right: var( --nrcl-button-small-padding-horizontal );--nrcl-button-icon-size: var( --nrcl-button-small-icon-size );--nrcl-icon-padding: var( --nrcl-button-small-icon-padding-horizontal )}:host.compact{--nrcl-button-height: var( --nrcl-button-compact-height );--nrcl-button-padding-left: var( --nrcl-button-compact-padding-horizontal );--nrcl-button-padding-right: var( --nrcl-button-compact-padding-horizontal );--nrcl-button-font-size: var( --nrcl-button-compact-font-size );--nrcl-button-icon-size: var( --nrcl-button-normal-icon-size )}:host.compact button{flex-direction:column;justify-content:center}:host.label button,:host.label a{padding-left:var(--nrcl-button-padding-left);padding-right:var(--nrcl-button-padding-right)}:host.icon-left button,:host.icon-left a{--nrcl-button-padding-left: var( --nrcl-icon-padding )}:host.icon-left button .content,:host.icon-left a .content{padding-left:0}:host.icon-left button ::ng-deep .mat-icon.left,:host.icon-left button ::ng-deep nrcl-icon.left,:host.icon-left a ::ng-deep .mat-icon.left,:host.icon-left a ::ng-deep nrcl-icon.left{position:absolute;left:calc((var(--nrcl-icon-padding) - var(--nrcl-button-icon-size)) / 2 - 1px)}:host.icon-right button,:host.icon-right a{--nrcl-button-padding-right: var( --nrcl-icon-padding )}:host.icon-right button .content,:host.icon-right a .content{padding-right:0}:host.icon-right button ::ng-deep .mat-icon.right,:host.icon-right button ::ng-deep nrcl-icon.right,:host.icon-right a ::ng-deep .mat-icon.right,:host.icon-right a ::ng-deep nrcl-icon.right{position:absolute;right:calc((var(--nrcl-icon-padding) - var(--nrcl-button-icon-size)) / 2 - 1px)}:host.primary{--nrcl-button-foreground-color: var( --nrcl-button-primary-foreground-color );--nrcl-button-background-color: var( --nrcl-button-primary-background-color );--nrcl-button-border-color: var( --nrcl-button-primary-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-primary-hover-background-color )}:host.primary button{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host.primary.disabled{--nrcl-button-foreground-color: var( --nrcl-button-primary-disabled-foreground-color );--nrcl-button-background-color: var( --nrcl-button-primary-disabled-background-color );--nrcl-button-border-color: var( --nrcl-button-primary-disabled-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-primary-disabled-hover-background-color )}:host.secondary{--nrcl-button-foreground-color: var( --nrcl-button-secondary-foreground-color );--nrcl-button-background-color: var( --nrcl-button-secondary-background-color );--nrcl-button-border-color: var( --nrcl-button-secondary-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-secondary-hover-background-color )}:host.secondary button{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host.secondary.disabled{--nrcl-button-foreground-color: var( --nrcl-button-secondary-disabled-foreground-color );--nrcl-button-background-color: var( --nrcl-button-secondary-disabled-background-color );--nrcl-button-border-color: var( --nrcl-button-secondary-disabled-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-secondary-disabled-hover-background-color )}:host.tertiary{--nrcl-button-foreground-color: var( --nrcl-button-tertiary-foreground-color );--nrcl-button-background-color: var( --nrcl-button-tertiary-background-color );--nrcl-button-border-color: var( --nrcl-button-tertiary-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-tertiary-hover-background-color )}:host.tertiary.disabled{--nrcl-button-foreground-color: var( --nrcl-button-tertiary-disabled-foreground-color );--nrcl-button-background-color: var( --nrcl-button-tertiary-disabled-background-color );--nrcl-button-border-color: var( --nrcl-button-tertiary-disabled-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-tertiary-disabled-hover-background-color )}:host.anchor{--nrcl-button-foreground-color: var( --nrcl-button-anchor-foreground-color );--nrcl-button-background-color: var( --nrcl-button-anchor-background-color );--nrcl-button-border-color: var( --nrcl-button-anchor-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-anchor-hover-background-color );--nrcl-button-padding-left: 0;--nrcl-button-padding-right: 0;--nrcl-button-normal-height: 20px}:host.anchor a{box-sizing:border-box}:host.anchor a:hover{color:var(--nrcl-button-anchor-hover-foreground-color)}:host.anchor a .label,:host.anchor a .content{text-decoration:underline}:host.anchor.disabled{--nrcl-button-foreground-color: var( --nrcl-button-anchor-disabled-foreground-color );--nrcl-button-background-color: var( --nrcl-button-anchor-disabled-background-color );--nrcl-button-border-color: var( --nrcl-button-anchor-disabled-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-anchor-disabled-hover-background-color )}:host.disabled button,:host.disabled a{cursor:default}:host.disabled button:hover,:host.disabled a:hover{color:var(--nrcl-button-foreground-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "nrcl-icon", inputs: ["small", "large"] }] }); }
299
302
  }
300
303
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, decorators: [{
301
304
  type: Component,
@@ -313,7 +316,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
313
316
  '[class.icon-right]': 'hasIconRight',
314
317
  '[class.icon-compact]': 'hasIconCompact',
315
318
  '[class.icon-small]': 'isIconSmall',
316
- }, template: "@if ( !isAnchor ) {\n <button\n matRipple\n [disabled]=\"disabled\"\n [matTooltip]=\"tooltipVal\"\n >\n @if ( useContent ) {\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n }\n @else {\n @if ( hasIconLeft ) {\n <nrcl-icon class=\"left\" [small]=\"isIconSmall\">{{ icon }}</nrcl-icon>\n }\n\n @if ( hasIconRight ) {\n <nrcl-icon class=\"right\" [small]=\"isIconSmall\">{{ iconRight }}</nrcl-icon>\n }\n\n @if ( hasIconCompact ) {\n <nrcl-icon class=\"compact\" [small]=\"isIconSmall\">{{ iconCompact || icon }}</nrcl-icon>\n }\n\n @if ( hasLabel ) {\n <span class=\"label\">{{ label }}</span>\n }\n }\n </button>\n}\n@else {\n <a \n [attr.href]=\"href\" \n [attr.target]=\"href && target\"\n [matTooltip]=\"tooltipVal\"\n >\n @if ( hasIconLeft ) {\n <nrcl-icon class=\"left\" [small]=\"isIconSmall\">{{ icon }}</nrcl-icon>\n }\n\n @if ( hasIconRight ) {\n <nrcl-icon class=\"right\" [small]=\"isIconSmall\">{{ iconRight }}</nrcl-icon>\n }\n\n @if ( hasIconCompact ) {\n <nrcl-icon class=\"compact\" [small]=\"isIconSmall\">{{ iconCompact || icon }}</nrcl-icon>\n }\n\n @if ( hasLabel ) {\n <span class=\"label\">{{ label }}</span>\n }\n </a>\n}", styles: ["::ng-deep :root{--nrcl-button-normal-height: 36px;--nrcl-button-normal-padding-horizontal: 16px;--nrcl-button-normal-icon-padding-horizontal: 36px;--nrcl-button-normal-font-size: var( --nrcl-font-size );--nrcl-button-normal-icon-size: var( --nrcl-icon-normal-size );--nrcl-button-small-height: 24px;--nrcl-button-small-padding-horizontal: 8px;--nrcl-button-small-icon-padding-horizontal: 24px;--nrcl-button-small-font-size: var( --nrcl-font-size-small );--nrcl-button-small-icon-size: var( --nrcl-icon-small-size );--nrcl-button-compact-height: 44px;--nrcl-button-compact-padding-horizontal: 8px;--nrcl-button-compact-font-size: var( --nrcl-font-size-small );--nrcl-button-compact-icon-size: var( --nrcl-icon-normal-size );--nrcl-button-primary-foreground-color: white;--nrcl-button-primary-background-color: #003366;--nrcl-button-primary-border-color: #003366;--nrcl-button-primary-hover-background-color: #144a89cc;--nrcl-button-primary-disabled-foreground-color: #7E7E7E;--nrcl-button-primary-disabled-background-color: #CCCCCC;--nrcl-button-primary-disabled-border-color: #CCCCCC;--nrcl-button-primary-disabled-hover-background-color: #CCCCCC;--nrcl-button-secondary-foreground-color: black;--nrcl-button-secondary-background-color: white;--nrcl-button-secondary-border-color: #003366;--nrcl-button-secondary-hover-background-color: #f5f5f5;--nrcl-button-secondary-disabled-foreground-color: #7E7E7E;--nrcl-button-secondary-disabled-background-color: #CCCCCC;--nrcl-button-secondary-disabled-border-color: #CCCCCC;--nrcl-button-secondary-disabled-hover-background-color: #CCCCCC;--nrcl-button-tertiary-foreground-color: black;--nrcl-button-tertiary-background-color: transparent;--nrcl-button-tertiary-border-color: transparent;--nrcl-button-tertiary-hover-background-color: rgba(0, 0, 0, .04);--nrcl-button-tertiary-disabled-foreground-color: #7E7E7E;--nrcl-button-tertiary-disabled-background-color: transparent;--nrcl-button-tertiary-disabled-border-color: transparent;--nrcl-button-tertiary-disabled-hover-background-color: transparent;--nrcl-button-anchor-foreground-color: #255a90;--nrcl-button-anchor-background-color: transparent;--nrcl-button-anchor-border-color: transparent;--nrcl-button-anchor-hover-foreground-color: #0000ee;--nrcl-button-anchor-hover-background-color: transparent;--nrcl-button-anchor-disabled-foreground-color: #7E7E7E;--nrcl-button-anchor-disabled-background-color: transparent;--nrcl-button-anchor-disabled-border-color: transparent;--nrcl-button-anchor-disabled-hover-background-color: transparent}:host{--nrcl-button-height: 50px;--nrcl-icon-padding: 50px;--nrcl-button-font-size: 40px;--nrcl-button-font-weight: 500;--nrcl-button-padding-left: 50px;--nrcl-button-padding-right: 50px;--nrcl-button-foreground-color: #red;--nrcl-button-background-color: #green;--nrcl-button-border-color: #yellow;--nrcl-button-hover-background-color: #blue}:host button,:host a{display:inline-flex;align-items:center;position:relative;height:var(--nrcl-button-height);min-width:var(--nrcl-button-height);width:var(--nrcl-button-width);cursor:pointer;-webkit-user-select:none;user-select:none;margin:0;padding:0;background-color:var(--nrcl-button-background-color);color:var(--nrcl-button-foreground-color);border-color:var(--nrcl-button-border-color);border-width:1px;border-style:solid;border-radius:4px}:host button:hover,:host a:hover{background-color:var(--nrcl-button-hover-background-color)}:host button .label,:host button .content,:host a .label,:host a .content{font-family:var(--nrcl-font-family);font-size:var(--nrcl-button-font-size);font-weight:var(--nrcl-button-font-weight);width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}:host button .content,:host a .content{padding-left:var(--nrcl-button-padding-left);padding-right:var(--nrcl-button-padding-right);display:flex;align-items:center}:host.normal{--nrcl-button-height: var( --nrcl-button-normal-height );--nrcl-button-padding-left: var( --nrcl-button-normal-padding-horizontal );--nrcl-button-padding-right: var( --nrcl-button-normal-padding-horizontal );--nrcl-button-font-size: var( --nrcl-button-normal-font-size );--nrcl-button-icon-size: var( --nrcl-button-normal-icon-size );--nrcl-icon-padding: var( --nrcl-button-normal-icon-padding-horizontal )}:host.small{--nrcl-button-height: var( --nrcl-button-small-height );--nrcl-button-font-size: var( --nrcl-button-small-font-size )}:host.icon-small{--nrcl-button-padding-left: var( --nrcl-button-small-padding-horizontal );--nrcl-button-padding-right: var( --nrcl-button-small-padding-horizontal );--nrcl-button-icon-size: var( --nrcl-button-small-icon-size );--nrcl-icon-padding: var( --nrcl-button-small-icon-padding-horizontal )}:host.compact{--nrcl-button-height: var( --nrcl-button-compact-height );--nrcl-button-padding-left: var( --nrcl-button-compact-padding-horizontal );--nrcl-button-padding-right: var( --nrcl-button-compact-padding-horizontal );--nrcl-button-font-size: var( --nrcl-button-compact-font-size );--nrcl-button-icon-size: var( --nrcl-button-normal-icon-size )}:host.compact button{flex-direction:column;justify-content:center}:host.label button,:host.label a{padding-left:var(--nrcl-button-padding-left);padding-right:var(--nrcl-button-padding-right)}:host.icon-left button,:host.icon-left a{--nrcl-button-padding-left: var( --nrcl-icon-padding )}:host.icon-left button .content,:host.icon-left a .content{padding-left:0}:host.icon-left button ::ng-deep .mat-icon.left,:host.icon-left button ::ng-deep nrcl-icon.left,:host.icon-left a ::ng-deep .mat-icon.left,:host.icon-left a ::ng-deep nrcl-icon.left{position:absolute;left:calc((var(--nrcl-icon-padding) - var(--nrcl-button-icon-size)) / 2 - 1px)}:host.icon-right button,:host.icon-right a{--nrcl-button-padding-right: var( --nrcl-icon-padding )}:host.icon-right button .content,:host.icon-right a .content{padding-right:0}:host.icon-right button ::ng-deep .mat-icon.right,:host.icon-right button ::ng-deep nrcl-icon.right,:host.icon-right a ::ng-deep .mat-icon.right,:host.icon-right a ::ng-deep nrcl-icon.right{position:absolute;right:calc((var(--nrcl-icon-padding) - var(--nrcl-button-icon-size)) / 2 - 1px)}:host.primary{--nrcl-button-foreground-color: var( --nrcl-button-primary-foreground-color );--nrcl-button-background-color: var( --nrcl-button-primary-background-color );--nrcl-button-border-color: var( --nrcl-button-primary-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-primary-hover-background-color )}:host.primary button{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host.primary.disabled{--nrcl-button-foreground-color: var( --nrcl-button-primary-disabled-foreground-color );--nrcl-button-background-color: var( --nrcl-button-primary-disabled-background-color );--nrcl-button-border-color: var( --nrcl-button-primary-disabled-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-primary-disabled-hover-background-color )}:host.secondary{--nrcl-button-foreground-color: var( --nrcl-button-secondary-foreground-color );--nrcl-button-background-color: var( --nrcl-button-secondary-background-color );--nrcl-button-border-color: var( --nrcl-button-secondary-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-secondary-hover-background-color )}:host.secondary button{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host.secondary.disabled{--nrcl-button-foreground-color: var( --nrcl-button-secondary-disabled-foreground-color );--nrcl-button-background-color: var( --nrcl-button-secondary-disabled-background-color );--nrcl-button-border-color: var( --nrcl-button-secondary-disabled-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-secondary-disabled-hover-background-color )}:host.tertiary{--nrcl-button-foreground-color: var( --nrcl-button-tertiary-foreground-color );--nrcl-button-background-color: var( --nrcl-button-tertiary-background-color );--nrcl-button-border-color: var( --nrcl-button-tertiary-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-tertiary-hover-background-color )}:host.tertiary.disabled{--nrcl-button-foreground-color: var( --nrcl-button-tertiary-disabled-foreground-color );--nrcl-button-background-color: var( --nrcl-button-tertiary-disabled-background-color );--nrcl-button-border-color: var( --nrcl-button-tertiary-disabled-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-tertiary-disabled-hover-background-color )}:host.anchor{--nrcl-button-foreground-color: var( --nrcl-button-anchor-foreground-color );--nrcl-button-background-color: var( --nrcl-button-anchor-background-color );--nrcl-button-border-color: var( --nrcl-button-anchor-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-anchor-hover-background-color );--nrcl-button-padding-left: 0;--nrcl-button-padding-right: 0;--nrcl-button-normal-height: 20px}:host.anchor a{box-sizing:border-box}:host.anchor a:hover{color:var(--nrcl-button-anchor-hover-foreground-color)}:host.anchor a .label,:host.anchor a .content{text-decoration:underline}:host.anchor.disabled{--nrcl-button-foreground-color: var( --nrcl-button-anchor-disabled-foreground-color );--nrcl-button-background-color: var( --nrcl-button-anchor-disabled-background-color );--nrcl-button-border-color: var( --nrcl-button-anchor-disabled-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-anchor-disabled-hover-background-color )}:host.disabled button,:host.disabled a{cursor:default}:host.disabled button:hover,:host.disabled a:hover{color:var(--nrcl-button-foreground-color)}\n"] }]
319
+ }, template: "@if ( !isAnchor ) {\n <button\n matRipple\n [disabled]=\"disabled\"\n [matTooltip]=\"tooltipVal\"\n >\n @if ( useContent ) {\n <div class=\"content\">\n <ng-content></ng-content>\n </div>\n }\n @else {\n @if ( hasIconLeft ) {\n <nrcl-icon class=\"left\" [small]=\"isIconSmall\">{{ icon }}</nrcl-icon>\n }\n\n @if ( hasIconRight ) {\n <nrcl-icon class=\"right\" [small]=\"isIconSmall\">{{ iconRight }}</nrcl-icon>\n }\n\n @if ( hasIconCompact ) {\n <nrcl-icon class=\"compact\" [small]=\"isIconSmall\">{{ iconCompact || icon }}</nrcl-icon>\n }\n\n @if ( hasLabel ) {\n <span class=\"label\">{{ label }}</span>\n }\n }\n </button>\n}\n@else {\n <a \n [attr.href]=\"href\" \n [attr.target]=\"href && target\"\n [matTooltip]=\"tooltipVal\"\n >\n @if ( hasIconLeft ) {\n <nrcl-icon class=\"left\" [small]=\"isIconSmall\">{{ icon }}</nrcl-icon>\n }\n\n @if ( hasIconRight ) {\n <nrcl-icon class=\"right\" [small]=\"isIconSmall\">{{ iconRight }}</nrcl-icon>\n }\n\n @if ( hasIconCompact ) {\n <nrcl-icon class=\"compact\" [small]=\"isIconSmall\">{{ iconCompact || icon }}</nrcl-icon>\n }\n\n @if ( hasLabel ) {\n <span class=\"label\">{{ label }}</span>\n }\n </a>\n}", styles: ["::ng-deep :root{--nrcl-button-normal-height: 36px;--nrcl-button-normal-padding-horizontal: 16px;--nrcl-button-normal-icon-padding-horizontal: 36px;--nrcl-button-normal-font-size: var( --nrcl-font-size );--nrcl-button-normal-icon-size: var( --nrcl-icon-normal-size );--nrcl-button-small-height: 24px;--nrcl-button-small-padding-horizontal: 8px;--nrcl-button-small-icon-padding-horizontal: 24px;--nrcl-button-small-font-size: var( --nrcl-font-size-small );--nrcl-button-small-icon-size: var( --nrcl-icon-small-size );--nrcl-button-compact-height: 44px;--nrcl-button-compact-padding-horizontal: 8px;--nrcl-button-compact-font-size: var( --nrcl-font-size-small );--nrcl-button-compact-icon-size: var( --nrcl-icon-normal-size );--nrcl-button-primary-foreground-color: white;--nrcl-button-primary-background-color: #003366;--nrcl-button-primary-border-color: #003366;--nrcl-button-primary-hover-background-color: #144a89cc;--nrcl-button-primary-disabled-foreground-color: #7E7E7E;--nrcl-button-primary-disabled-background-color: #CCCCCC;--nrcl-button-primary-disabled-border-color: #CCCCCC;--nrcl-button-primary-disabled-hover-background-color: #CCCCCC;--nrcl-button-secondary-foreground-color: black;--nrcl-button-secondary-background-color: white;--nrcl-button-secondary-border-color: #003366;--nrcl-button-secondary-hover-background-color: #f5f5f5;--nrcl-button-secondary-disabled-foreground-color: #7E7E7E;--nrcl-button-secondary-disabled-background-color: #CCCCCC;--nrcl-button-secondary-disabled-border-color: #CCCCCC;--nrcl-button-secondary-disabled-hover-background-color: #CCCCCC;--nrcl-button-tertiary-foreground-color: black;--nrcl-button-tertiary-background-color: transparent;--nrcl-button-tertiary-border-color: transparent;--nrcl-button-tertiary-hover-background-color: rgba(0, 0, 0, .04);--nrcl-button-tertiary-disabled-foreground-color: #7E7E7E;--nrcl-button-tertiary-disabled-background-color: transparent;--nrcl-button-tertiary-disabled-border-color: transparent;--nrcl-button-tertiary-disabled-hover-background-color: transparent;--nrcl-button-anchor-foreground-color: #255a90;--nrcl-button-anchor-background-color: transparent;--nrcl-button-anchor-border-color: transparent;--nrcl-button-anchor-hover-foreground-color: #0000ee;--nrcl-button-anchor-hover-background-color: transparent;--nrcl-button-anchor-disabled-foreground-color: #7E7E7E;--nrcl-button-anchor-disabled-background-color: transparent;--nrcl-button-anchor-disabled-border-color: transparent;--nrcl-button-anchor-disabled-hover-background-color: transparent}:host{--nrcl-button-height: 50px;--nrcl-icon-padding: 50px;--nrcl-button-font-size: 40px;--nrcl-button-font-weight: 500;--nrcl-button-padding-left: 50px;--nrcl-button-padding-right: 50px;--nrcl-button-foreground-color: #red;--nrcl-button-background-color: #green;--nrcl-button-border-color: #yellow;--nrcl-button-hover-background-color: #blue;display:flex}:host button,:host a{display:inline-flex;align-items:center;position:relative;height:var(--nrcl-button-height);min-width:var(--nrcl-button-height);width:var(--nrcl-button-width);cursor:pointer;-webkit-user-select:none;user-select:none;margin:0;padding:0;background-color:var(--nrcl-button-background-color);color:var(--nrcl-button-foreground-color);border-color:var(--nrcl-button-border-color);border-width:1px;border-style:solid;border-radius:4px}:host button:hover,:host a:hover{background-color:var(--nrcl-button-hover-background-color)}:host button .label,:host button .content,:host a .label,:host a .content{font-family:var(--nrcl-font-family);font-size:var(--nrcl-button-font-size);font-weight:var(--nrcl-button-font-weight);width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}:host button .content,:host a .content{padding-left:var(--nrcl-button-padding-left);padding-right:var(--nrcl-button-padding-right);display:flex;align-items:center}:host.normal{--nrcl-button-height: var( --nrcl-button-normal-height );--nrcl-button-padding-left: var( --nrcl-button-normal-padding-horizontal );--nrcl-button-padding-right: var( --nrcl-button-normal-padding-horizontal );--nrcl-button-font-size: var( --nrcl-button-normal-font-size );--nrcl-button-icon-size: var( --nrcl-button-normal-icon-size );--nrcl-icon-padding: var( --nrcl-button-normal-icon-padding-horizontal )}:host.small{--nrcl-button-height: var( --nrcl-button-small-height );--nrcl-button-font-size: var( --nrcl-button-small-font-size )}:host.icon-small{--nrcl-button-padding-left: var( --nrcl-button-small-padding-horizontal );--nrcl-button-padding-right: var( --nrcl-button-small-padding-horizontal );--nrcl-button-icon-size: var( --nrcl-button-small-icon-size );--nrcl-icon-padding: var( --nrcl-button-small-icon-padding-horizontal )}:host.compact{--nrcl-button-height: var( --nrcl-button-compact-height );--nrcl-button-padding-left: var( --nrcl-button-compact-padding-horizontal );--nrcl-button-padding-right: var( --nrcl-button-compact-padding-horizontal );--nrcl-button-font-size: var( --nrcl-button-compact-font-size );--nrcl-button-icon-size: var( --nrcl-button-normal-icon-size )}:host.compact button{flex-direction:column;justify-content:center}:host.label button,:host.label a{padding-left:var(--nrcl-button-padding-left);padding-right:var(--nrcl-button-padding-right)}:host.icon-left button,:host.icon-left a{--nrcl-button-padding-left: var( --nrcl-icon-padding )}:host.icon-left button .content,:host.icon-left a .content{padding-left:0}:host.icon-left button ::ng-deep .mat-icon.left,:host.icon-left button ::ng-deep nrcl-icon.left,:host.icon-left a ::ng-deep .mat-icon.left,:host.icon-left a ::ng-deep nrcl-icon.left{position:absolute;left:calc((var(--nrcl-icon-padding) - var(--nrcl-button-icon-size)) / 2 - 1px)}:host.icon-right button,:host.icon-right a{--nrcl-button-padding-right: var( --nrcl-icon-padding )}:host.icon-right button .content,:host.icon-right a .content{padding-right:0}:host.icon-right button ::ng-deep .mat-icon.right,:host.icon-right button ::ng-deep nrcl-icon.right,:host.icon-right a ::ng-deep .mat-icon.right,:host.icon-right a ::ng-deep nrcl-icon.right{position:absolute;right:calc((var(--nrcl-icon-padding) - var(--nrcl-button-icon-size)) / 2 - 1px)}:host.primary{--nrcl-button-foreground-color: var( --nrcl-button-primary-foreground-color );--nrcl-button-background-color: var( --nrcl-button-primary-background-color );--nrcl-button-border-color: var( --nrcl-button-primary-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-primary-hover-background-color )}:host.primary button{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host.primary.disabled{--nrcl-button-foreground-color: var( --nrcl-button-primary-disabled-foreground-color );--nrcl-button-background-color: var( --nrcl-button-primary-disabled-background-color );--nrcl-button-border-color: var( --nrcl-button-primary-disabled-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-primary-disabled-hover-background-color )}:host.secondary{--nrcl-button-foreground-color: var( --nrcl-button-secondary-foreground-color );--nrcl-button-background-color: var( --nrcl-button-secondary-background-color );--nrcl-button-border-color: var( --nrcl-button-secondary-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-secondary-hover-background-color )}:host.secondary button{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}:host.secondary.disabled{--nrcl-button-foreground-color: var( --nrcl-button-secondary-disabled-foreground-color );--nrcl-button-background-color: var( --nrcl-button-secondary-disabled-background-color );--nrcl-button-border-color: var( --nrcl-button-secondary-disabled-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-secondary-disabled-hover-background-color )}:host.tertiary{--nrcl-button-foreground-color: var( --nrcl-button-tertiary-foreground-color );--nrcl-button-background-color: var( --nrcl-button-tertiary-background-color );--nrcl-button-border-color: var( --nrcl-button-tertiary-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-tertiary-hover-background-color )}:host.tertiary.disabled{--nrcl-button-foreground-color: var( --nrcl-button-tertiary-disabled-foreground-color );--nrcl-button-background-color: var( --nrcl-button-tertiary-disabled-background-color );--nrcl-button-border-color: var( --nrcl-button-tertiary-disabled-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-tertiary-disabled-hover-background-color )}:host.anchor{--nrcl-button-foreground-color: var( --nrcl-button-anchor-foreground-color );--nrcl-button-background-color: var( --nrcl-button-anchor-background-color );--nrcl-button-border-color: var( --nrcl-button-anchor-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-anchor-hover-background-color );--nrcl-button-padding-left: 0;--nrcl-button-padding-right: 0;--nrcl-button-normal-height: 20px}:host.anchor a{box-sizing:border-box}:host.anchor a:hover{color:var(--nrcl-button-anchor-hover-foreground-color)}:host.anchor a .label,:host.anchor a .content{text-decoration:underline}:host.anchor.disabled{--nrcl-button-foreground-color: var( --nrcl-button-anchor-disabled-foreground-color );--nrcl-button-background-color: var( --nrcl-button-anchor-disabled-background-color );--nrcl-button-border-color: var( --nrcl-button-anchor-disabled-border-color );--nrcl-button-hover-background-color: var( --nrcl-button-anchor-disabled-hover-background-color )}:host.disabled button,:host.disabled a{cursor:default}:host.disabled button:hover,:host.disabled a:hover{color:var(--nrcl-button-foreground-color)}\n"] }]
317
320
  }], propDecorators: { label: [{
318
321
  type: Input
319
322
  }], icon: [{
@@ -2663,6 +2666,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
2663
2666
  args: [ResourceScheduleRowHeadingDirective]
2664
2667
  }] } });
2665
2668
 
2669
+ class DateNavigatorComponent extends NrclBase {
2670
+ constructor() {
2671
+ super(...arguments);
2672
+ this.elementRef = inject(ElementRef);
2673
+ this.value = moment().format(DATE_FORMATS.datePickerInput);
2674
+ this.largeChange = 7;
2675
+ this.smallChange = 1;
2676
+ this.valueChange = new EventEmitter();
2677
+ }
2678
+ ngOnChanges(changes) {
2679
+ if (changes.value) {
2680
+ this.date = moment(this.value);
2681
+ }
2682
+ }
2683
+ onDateNav(offset) {
2684
+ if (offset == 0) {
2685
+ this.date = moment();
2686
+ }
2687
+ else {
2688
+ this.date = this.date.clone().add(offset, 'day');
2689
+ }
2690
+ this.valueChange.emit(this.date.format(DATE_FORMATS.datePickerInput));
2691
+ }
2692
+ onDateChange(ev) {
2693
+ this.date = ev;
2694
+ this.valueChange.emit(this.date.format(DATE_FORMATS.datePickerInput));
2695
+ }
2696
+ onInputFocus(ev) {
2697
+ this.picker.open();
2698
+ this.input.nativeElement.blur();
2699
+ }
2700
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateNavigatorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
2701
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: DateNavigatorComponent, selector: "nrcl-date-navigator", inputs: { value: "value", largeChange: ["largeChange", "largeChange", numberAttribute], smallChange: ["smallChange", "smallChange", numberAttribute] }, outputs: { valueChange: "valueChange" }, providers: [
2702
+ provideMomentDateAdapter({
2703
+ parse: {
2704
+ dateInput: 'YYYY-MM-DD'
2705
+ },
2706
+ display: {
2707
+ dateInput: 'MMMM D, YYYY', // Change how date appears in the input
2708
+ monthYearLabel: 'MMM YYYY',
2709
+ dateA11yLabel: 'LL',
2710
+ monthYearA11yLabel: 'MMMM YYYY',
2711
+ }
2712
+ })
2713
+ ], viewQueries: [{ propertyName: "picker", first: true, predicate: ["picker"], descendants: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<nrcl-button tertiary\n label=\"Today\"\n icon=\"event\"\n (click)=\"onDateNav( 0 )\"\n></nrcl-button>\n\n@if ( largeChange ) {\n <nrcl-button tertiary\n icon=\"keyboard_double_arrow_left\"\n (click)=\"onDateNav( -1 * largeChange )\"\n ></nrcl-button>\n}\n\n@if ( smallChange ) {\n <nrcl-button tertiary\n icon=\"keyboard_arrow_left\"\n (click)=\"onDateNav( -1 * smallChange )\"\n ></nrcl-button>\n}\n\n<mat-form-field\n floatLabel=\"auto\"\n appearance=\"fill\"\n subscriptSizing=\"dynamic\"\n>\n <input matInput #input\n [matDatepicker]=\"picker\"\n (focus)=\"onInputFocus( $event )\"\n [ngModel]=\"date\" \n (ngModelChange)=\"onDateChange( $event )\"\n >\n\n <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n\n@if ( smallChange ) {\n <nrcl-button tertiary\n icon=\"keyboard_arrow_right\"\n (click)=\"onDateNav( smallChange )\"\n ></nrcl-button>\n}\n\n@if ( largeChange ) {\n <nrcl-button tertiary\n icon=\"keyboard_double_arrow_right\"\n (click)=\"onDateNav( largeChange )\"\n ></nrcl-button>\n}\n", styles: ["::ng-deep :root{--nrcl-date-navigator-input-width: 150px;--nrcl-date-navigator-height: var( --nrcl-filter-height )}:host{--mat-form-field-container-height: calc( var( --nrcl-date-navigator-height ) - 4px );--mat-form-field-container-vertical-padding: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;--mdc-outlined-text-field-focus-outline-width: 0;--mdc-outlined-text-field-outline-width: 0;display:flex;align-items:center}:host ::ng-deep .mat-mdc-form-field{width:var(--nrcl-date-navigator-input-width)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-date-navigator-height);padding:0}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-date-navigator-input-width)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix input{text-align:center;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$8.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$8.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: ButtonComponent, selector: "nrcl-button", inputs: ["label", "icon", "iconRight", "iconCompact", "tooltip", "compact", "small", "primary", "secondary", "tertiary", "disabled", "anchor"], outputs: ["click"] }] }); }
2714
+ }
2715
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateNavigatorComponent, decorators: [{
2716
+ type: Component,
2717
+ args: [{ selector: 'nrcl-date-navigator', providers: [
2718
+ provideMomentDateAdapter({
2719
+ parse: {
2720
+ dateInput: 'YYYY-MM-DD'
2721
+ },
2722
+ display: {
2723
+ dateInput: 'MMMM D, YYYY', // Change how date appears in the input
2724
+ monthYearLabel: 'MMM YYYY',
2725
+ dateA11yLabel: 'LL',
2726
+ monthYearA11yLabel: 'MMMM YYYY',
2727
+ }
2728
+ })
2729
+ ], template: "<nrcl-button tertiary\n label=\"Today\"\n icon=\"event\"\n (click)=\"onDateNav( 0 )\"\n></nrcl-button>\n\n@if ( largeChange ) {\n <nrcl-button tertiary\n icon=\"keyboard_double_arrow_left\"\n (click)=\"onDateNav( -1 * largeChange )\"\n ></nrcl-button>\n}\n\n@if ( smallChange ) {\n <nrcl-button tertiary\n icon=\"keyboard_arrow_left\"\n (click)=\"onDateNav( -1 * smallChange )\"\n ></nrcl-button>\n}\n\n<mat-form-field\n floatLabel=\"auto\"\n appearance=\"fill\"\n subscriptSizing=\"dynamic\"\n>\n <input matInput #input\n [matDatepicker]=\"picker\"\n (focus)=\"onInputFocus( $event )\"\n [ngModel]=\"date\" \n (ngModelChange)=\"onDateChange( $event )\"\n >\n\n <mat-datepicker #picker></mat-datepicker>\n</mat-form-field>\n\n@if ( smallChange ) {\n <nrcl-button tertiary\n icon=\"keyboard_arrow_right\"\n (click)=\"onDateNav( smallChange )\"\n ></nrcl-button>\n}\n\n@if ( largeChange ) {\n <nrcl-button tertiary\n icon=\"keyboard_double_arrow_right\"\n (click)=\"onDateNav( largeChange )\"\n ></nrcl-button>\n}\n", styles: ["::ng-deep :root{--nrcl-date-navigator-input-width: 150px;--nrcl-date-navigator-height: var( --nrcl-filter-height )}:host{--mat-form-field-container-height: calc( var( --nrcl-date-navigator-height ) - 4px );--mat-form-field-container-vertical-padding: 8px;--mat-form-field-container-text-size: 15px;--mdc-outlined-text-field-focus-label-text-color: black;--mdc-outlined-text-field-hover-label-text-color: black;--mdc-outlined-text-field-focus-outline-width: 0;--mdc-outlined-text-field-outline-width: 0;display:flex;align-items:center}:host ::ng-deep .mat-mdc-form-field{width:var(--nrcl-date-navigator-input-width)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper{background-color:#fff;height:var(--nrcl-date-navigator-height);padding:0}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix{width:var(--nrcl-date-navigator-input-width)}:host ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix input{text-align:center;cursor:pointer}\n"] }]
2730
+ }], propDecorators: { value: [{
2731
+ type: Input
2732
+ }], largeChange: [{
2733
+ type: Input,
2734
+ args: [{ transform: numberAttribute }]
2735
+ }], smallChange: [{
2736
+ type: Input,
2737
+ args: [{ transform: numberAttribute }]
2738
+ }], valueChange: [{
2739
+ type: Output
2740
+ }], picker: [{
2741
+ type: ViewChild,
2742
+ args: ['picker']
2743
+ }], input: [{
2744
+ type: ViewChild,
2745
+ args: ['input']
2746
+ }] } });
2747
+
2666
2748
  class SnackbarUtilService {
2667
2749
  constructor() {
2668
2750
  this.snackbar = inject(MatSnackBar);
@@ -2828,13 +2910,15 @@ class NrNgxComponentLibModule {
2828
2910
  ScheduleItemDirective,
2829
2911
  ScheduleRowHeadingDirective,
2830
2912
  ResourceScheduleComponent,
2831
- ResourceScheduleRowHeadingDirective], imports: [BrowserAnimationsModule,
2913
+ ResourceScheduleRowHeadingDirective,
2914
+ DateNavigatorComponent], imports: [BrowserAnimationsModule,
2832
2915
  CommonModule,
2833
2916
  FormsModule,
2834
2917
  MatButtonModule,
2835
2918
  MatCardModule,
2836
2919
  MatCheckboxModule,
2837
2920
  MatChipsModule,
2921
+ MatDatepickerModule,
2838
2922
  MatExpansionModule,
2839
2923
  MatRadioModule,
2840
2924
  MatFormFieldModule,
@@ -2895,7 +2979,8 @@ class NrNgxComponentLibModule {
2895
2979
  ScheduleItemDirective,
2896
2980
  ScheduleRowHeadingDirective,
2897
2981
  ResourceScheduleComponent,
2898
- ResourceScheduleRowHeadingDirective] }); }
2982
+ ResourceScheduleRowHeadingDirective,
2983
+ DateNavigatorComponent] }); }
2899
2984
  static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NrNgxComponentLibModule, providers: [
2900
2985
  SnackbarUtilService,
2901
2986
  ConfigurationService,
@@ -2909,6 +2994,7 @@ class NrNgxComponentLibModule {
2909
2994
  MatCardModule,
2910
2995
  MatCheckboxModule,
2911
2996
  MatChipsModule,
2997
+ MatDatepickerModule,
2912
2998
  MatExpansionModule,
2913
2999
  MatRadioModule,
2914
3000
  MatFormFieldModule,
@@ -2940,6 +3026,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
2940
3026
  MatCardModule,
2941
3027
  MatCheckboxModule,
2942
3028
  MatChipsModule,
3029
+ MatDatepickerModule,
2943
3030
  MatExpansionModule,
2944
3031
  MatRadioModule,
2945
3032
  MatFormFieldModule,
@@ -3004,6 +3091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
3004
3091
  ScheduleRowHeadingDirective,
3005
3092
  ResourceScheduleComponent,
3006
3093
  ResourceScheduleRowHeadingDirective,
3094
+ DateNavigatorComponent,
3007
3095
  ],
3008
3096
  exports: [
3009
3097
  ButtonComponent,
@@ -3049,6 +3137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
3049
3137
  ScheduleRowHeadingDirective,
3050
3138
  ResourceScheduleComponent,
3051
3139
  ResourceScheduleRowHeadingDirective,
3140
+ DateNavigatorComponent,
3052
3141
  ],
3053
3142
  providers: [
3054
3143
  SnackbarUtilService,
@@ -3068,5 +3157,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
3068
3157
  * Generated bundle index. Do not edit.
3069
3158
  */
3070
3159
 
3071
- export { Aborted, ButtonComponent, CellContentComponent, CodeTable, ConfigurationService, ConfigurationSubscriberBase, DATE_FORMATS, DesktopViewDirective, DeviceViewComponent, DialogBase, DialogComponent, DialogConfirmComponent, DialogService, ExpansionPanelComponent, ExpansionPanelFooterComponent, ExpansionPanelHeaderComponent, ExpansionPanelSectionComponent, FilterContainerComponent, FilterDateComponent, FilterSearchComponent, FilterSelectComponent, FiltersPanelComponent, FormFieldComponent, FormLayoutComponent, GapComponent, IconComponent, IndicatorComponent, IndicatorSelectComponent, ListAttachmentsComponent, ListEventHistoryComponent, ListSelectComponent, LoadingStatusComponent, MobileViewDirective, NrNgxComponentLibModule, NrclBase, ObservableAborter, ObservableAborterGroup, PageContainerComponent, PageHeaderComponent, PageStateService, PaginationBase, ResourceScheduleComponent, ResourceScheduleRowHeadingDirective, RowListBase, RowListDesktopComponent, RowListMobileComponent, RowListPaginationComponent, RowListSortingComponent, ScheduleComponent, ScheduleItemDirective, ScheduleRowHeadingDirective, SnackbarComponent, SnackbarUtilService, TabComponent, TabContentDirective, TabGroupComponent, TabLabelDirective, TagListComponent, mapToCodeDescription, unwrapFilterValue, wrapFilterValue };
3160
+ export { Aborted, ButtonComponent, CellContentComponent, CodeTable, ConfigurationService, ConfigurationSubscriberBase, DATE_FORMATS, DateNavigatorComponent, DesktopViewDirective, DeviceViewComponent, DialogBase, DialogComponent, DialogConfirmComponent, DialogService, ExpansionPanelComponent, ExpansionPanelFooterComponent, ExpansionPanelHeaderComponent, ExpansionPanelSectionComponent, FilterContainerComponent, FilterDateComponent, FilterSearchComponent, FilterSelectComponent, FiltersPanelComponent, FormFieldComponent, FormLayoutComponent, GapComponent, IconComponent, IndicatorComponent, IndicatorSelectComponent, ListAttachmentsComponent, ListEventHistoryComponent, ListSelectComponent, LoadingStatusComponent, MobileViewDirective, NrNgxComponentLibModule, NrclBase, ObservableAborter, ObservableAborterGroup, PageContainerComponent, PageHeaderComponent, PageStateService, PaginationBase, ResourceScheduleComponent, ResourceScheduleRowHeadingDirective, RowListBase, RowListDesktopComponent, RowListMobileComponent, RowListPaginationComponent, RowListSortingComponent, ScheduleComponent, ScheduleItemDirective, ScheduleRowHeadingDirective, SnackbarComponent, SnackbarUtilService, TabComponent, TabContentDirective, TabGroupComponent, TabLabelDirective, TagListComponent, mapToCodeDescription, unwrapFilterValue, wrapFilterValue };
3072
3161
  //# sourceMappingURL=bcgov-nr-ngx-component-lib.mjs.map