@sebgroup/green-angular 4.4.1 → 4.6.0

package/fesm2022/sebgroup-green-angular-src-v-angular-button.mjs

@@ -0,0 +1,131 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Self, Optional, Inject, HostBinding, Input, Output, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { TRANSLOCO_SCOPE } from '@ngneat/transloco';
+import { NgvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3 from '@sebgroup/green-angular/src/v-angular/external-link';
+import { NgvExternalLinkDirectiveModule } from '@sebgroup/green-angular/src/v-angular/external-link';
+import * as i4 from '@angular/router';
+import { RouterModule } from '@angular/router';
+
+var ButtonStyle;
+(function (ButtonStyle) {
+    ButtonStyle[ButtonStyle["Primary"] = 0] = "Primary";
+    ButtonStyle[ButtonStyle["Secondary"] = 1] = "Secondary";
+    ButtonStyle[ButtonStyle["Alternative"] = 2] = "Alternative";
+    ButtonStyle[ButtonStyle["Delete"] = 3] = "Delete";
+    ButtonStyle[ButtonStyle["DeleteConfirm"] = 4] = "DeleteConfirm";
+    ButtonStyle[ButtonStyle["Ghost"] = 5] = "Ghost";
+    ButtonStyle[ButtonStyle["GhostDark"] = 6] = "GhostDark";
+    ButtonStyle[ButtonStyle["Link"] = 7] = "Link";
+})(ButtonStyle || (ButtonStyle = {}));
+/**
+ * Buttons allow users to take action with a single tap.
+ * https://designlibrary.sebgroup.com/components/component-button
+ */
+class NgvButtonComponent extends NgvBaseControlValueAccessorComponent {
+    constructor(ngControl, translocoScope, cdr) {
+        super(ngControl, translocoScope, cdr);
+        this.ngControl = ngControl;
+        this.translocoScope = translocoScope;
+        this.cdr = cdr;
+        /** Special property used for selecting DOM elements during automated UI testing. */
+        this.thook = 'button';
+        /** Type of button to one of button|submit|reset|link, where link creates an anchor tag. */
+        this.type = 'button';
+        /** Style of the button to one of Primary|Secondary|Alternative|Delete|DeleteConfirm|Ghost|GhostDark|Link. */
+        this.buttonStyle = this.type === 'link' ? ButtonStyle.Link : ButtonStyle.Primary;
+        /** Size of the button to be smaller. */
+        this.small = false;
+        /** @internal Determines if the the href property should use internal routing. */
+        this.external = false;
+        /** @internal The classes determined by the buttonStyle and small properties. */
+        this.buttonClasses = {};
+        /** Emits click events triggered by the button or link.
+         * Use instead of click to avoid triggering events on disabled buttons and links.
+         */
+        this.ngvClick = new EventEmitter();
+    }
+    /** @internal */
+    static buttonStyleClasses(type, small) {
+        return {
+            small: small,
+            primary: type === ButtonStyle.Primary || type === ButtonStyle.Delete,
+            secondary: type === ButtonStyle.Secondary,
+            tertiary: type === ButtonStyle.Alternative || type === ButtonStyle.Link,
+            danger: type === ButtonStyle.Delete || type === ButtonStyle.DeleteConfirm,
+            ghost: type === ButtonStyle.GhostDark,
+            'ghost-light': type === ButtonStyle.Ghost,
+        };
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (this.href)
+            this.external = /^\w+:\/\/.+$/.test(this.href);
+        this.buttonClasses = NgvButtonComponent.buttonStyleClasses(this.buttonStyle, this.small);
+    }
+    ngOnChanges(changes) {
+        if (changes.buttonStyle || changes.small) {
+            this.buttonClasses = NgvButtonComponent.buttonStyleClasses(this.buttonStyle, this.small);
+        }
+    }
+    /** @internal */
+    onClick(event) {
+        if (this.disabled)
+            return;
+        this.ngvClick.emit(event);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvButtonComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvButtonComponent, selector: "ngv-button", inputs: { thook: "thook", type: "type", buttonStyle: "buttonStyle", small: "small", href: "href" }, outputs: { ngvClick: "ngvClick" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<button\n  #input\n  [ngClass]=\"buttonClasses\"\n  [id]=\"id + '-button'\"\n  [attr.name]=\"name\"\n  [attr.value]=\"value\"\n  [type]=\"type\"\n  [autofocus]=\"autofocus\"\n  [disabled]=\"disabled\"\n  [attr.aria-label]=\"description\"\n  (click)=\"onClick($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  *ngIf=\"type !== 'link'\"\n>\n  <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</button>\n\n<a\n  #input\n  [ngClass]=\"buttonClasses\"\n  role=\"button\"\n  [id]=\"id + '-link'\"\n  [routerLink]=\"href\"\n  [external]=\"external\"\n  [attr.aria-label]=\"description\"\n  (click)=\"onClick($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  *ngIf=\"type === 'link'\"\n>\n  <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</a>\n\n<ng-template #contentRef>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host button,:host a{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}:host button:focus:not(:focus-visible),:host a:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible,:host a:focus,:host a:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button,:host a{min-width:100%}}@media screen and (-ms-high-contrast: active){:host button,:host a{border:2px solid currentcolor}}:host button.small,:host a.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.large,:host a.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .primary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:#007ac7;border-color:#007ac7;color:#fff;--color: #fff}:host .primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: #199be3;--color: rgb(255, 255, 255);border-color:#199be3}:host .primary[aria-selected=true],:host .primary:active,:host .primary.active,:host .primary.active:hover,:host .primary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .primary:focus-visible{background-color:#199be3;color:#fff;--background: #199be3;--color: rgb(255, 255, 255);border-color:#199be3!important}:host .primary:disabled,:host .primary.disabled,:host .primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .primary:disabled::placeholder,:host .primary.disabled::placeholder,:host .primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .secondary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .secondary:focus,:host .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: #199be3;--color: rgb(255, 255, 255);border-color:#199be3}:host .secondary[aria-selected=true],:host .secondary:active,:host .secondary.active,:host .secondary.active:hover,:host .secondary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .secondary:disabled,:host .secondary.disabled,:host .secondary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .secondary:disabled::placeholder,:host .secondary.disabled::placeholder,:host .secondary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .tertiary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:transparent;color:#007ac7;--color: rgb(0, 122, 199)}:host .tertiary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .tertiary:focus,:host .tertiary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .tertiary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: #199be3;--color: rgb(255, 255, 255);border-color:#199be3}:host .tertiary[aria-selected=true],:host .tertiary:active,:host .tertiary.active,:host .tertiary.active:hover,:host .tertiary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .tertiary:disabled,:host .tertiary.disabled,:host .tertiary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .tertiary:disabled::placeholder,:host .tertiary.disabled::placeholder,:host .tertiary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .ghost-light{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#fff;color:#fff;--color: rgb(255, 255, 255)}:host .ghost-light:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}:host .ghost-light[aria-selected=true],:host .ghost-light:active,:host .ghost-light.active,:host .ghost-light.active:hover,:host .ghost-light:active:hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}:host .ghost-light[aria-selected]:hover,:host .ghost-light.active:hover,:host .ghost-light:active:hover{opacity:.9}:host .ghost-light:focus-visible{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff!important}:host .ghost-light:disabled,:host .ghost-light.disabled,:host .ghost-light[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .ghost-light:disabled::placeholder,:host .ghost-light.disabled::placeholder,:host .ghost-light[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .ghost{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51)}:host .ghost:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .ghost[aria-selected=true],:host .ghost:active,:host .ghost.active,:host .ghost.active:hover,:host .ghost:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .ghost[aria-selected]:hover,:host .ghost.active:hover,:host .ghost:active:hover{opacity:.9}:host .ghost:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .ghost:disabled,:host .ghost.disabled,:host .ghost[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .ghost:disabled::placeholder,:host .ghost.disabled::placeholder,:host .ghost[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .danger.primary{background:#bb000c;border-color:#bb000c;color:#fff;--color: #fff;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .danger.primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .danger.primary[aria-selected=true],:host .danger.primary:active,:host .danger.primary.active,:host .danger.primary.active:hover,:host .danger.primary:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .danger.primary[aria-selected]:hover,:host .danger.primary.active:hover,:host .danger.primary:active:hover{opacity:.9}:host .danger.primary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger.primary:focus,:host .danger.primary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .danger.primary:disabled,:host .danger.primary.disabled,:host .danger.primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .danger.primary:disabled::placeholder,:host .danger.primary.disabled::placeholder,:host .danger.primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .danger:not(.primary){color:#bb000c;--color: rgb(187, 0, 12);border-color:transparent;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .danger:not(.primary):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .danger:not(.primary)[aria-selected=true],:host .danger:not(.primary):active,:host .danger:not(.primary).active,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .danger:not(.primary)[aria-selected]:hover,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{opacity:.9}:host .danger:not(.primary):focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger:not(.primary):focus,:host .danger:not(.primary):focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgvExternalLinkDirective, selector: "a[routerLink]", inputs: ["external"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngv-button', template: "<button\n  #input\n  [ngClass]=\"buttonClasses\"\n  [id]=\"id + '-button'\"\n  [attr.name]=\"name\"\n  [attr.value]=\"value\"\n  [type]=\"type\"\n  [autofocus]=\"autofocus\"\n  [disabled]=\"disabled\"\n  [attr.aria-label]=\"description\"\n  (click)=\"onClick($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  *ngIf=\"type !== 'link'\"\n>\n  <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</button>\n\n<a\n  #input\n  [ngClass]=\"buttonClasses\"\n  role=\"button\"\n  [id]=\"id + '-link'\"\n  [routerLink]=\"href\"\n  [external]=\"external\"\n  [attr.aria-label]=\"description\"\n  (click)=\"onClick($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  *ngIf=\"type === 'link'\"\n>\n  <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</a>\n\n<ng-template #contentRef>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host button,:host a{background-color:transparent;border:0;cursor:pointer;font-family:inherit;padding:0;padding:.75rem 1rem;border-radius:var(--sg-border-radius);border:solid var(--sg-border-width) var(--sg-border-color);font-weight:500;min-height:2.75rem;align-items:center;display:inline-flex;justify-content:center}:host button:focus:not(:focus-visible),:host a:focus:not(:focus-visible){box-shadow:none;outline:0}:host button:focus,:host button:focus-visible,:host a:focus,:host a:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}@media (max-width: 35.98em){:host button,:host a{min-width:100%}}@media screen and (-ms-high-contrast: active){:host button,:host a{border:2px solid currentcolor}}:host button.small,:host a.small{min-height:2rem;padding:.4375rem .75rem;line-height:1rem}:host button.large,:host a.large{min-height:4rem;padding:1rem 1.5rem;font-size:1.5rem;line-height:2rem}:host .primary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:#007ac7;border-color:#007ac7;color:#fff;--color: #fff}:host .primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: #199be3;--color: rgb(255, 255, 255);border-color:#199be3}:host .primary[aria-selected=true],:host .primary:active,:host .primary.active,:host .primary.active:hover,:host .primary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .primary:focus-visible{background-color:#199be3;color:#fff;--background: #199be3;--color: rgb(255, 255, 255);border-color:#199be3!important}:host .primary:disabled,:host .primary.disabled,:host .primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .primary:disabled::placeholder,:host .primary.disabled::placeholder,:host .primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .secondary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:#007ac7;color:#007ac7;--color: rgb(0, 122, 199)}:host .secondary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .secondary:focus,:host .secondary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .secondary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: #199be3;--color: rgb(255, 255, 255);border-color:#199be3}:host .secondary[aria-selected=true],:host .secondary:active,:host .secondary.active,:host .secondary.active:hover,:host .secondary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .secondary:disabled,:host .secondary.disabled,:host .secondary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .secondary:disabled::placeholder,:host .secondary.disabled::placeholder,:host .secondary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .tertiary{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;background:transparent;border-color:transparent;color:#007ac7;--color: rgb(0, 122, 199)}:host .tertiary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .tertiary:focus,:host .tertiary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .tertiary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#199be3;color:#fff;--background: #199be3;--color: rgb(255, 255, 255);border-color:#199be3}:host .tertiary[aria-selected=true],:host .tertiary:active,:host .tertiary.active,:host .tertiary.active:hover,:host .tertiary:active:hover{background-color:#007ac7;color:#fff;--background: rgb(0, 122, 199);--color: rgb(255, 255, 255);border-color:#007ac7}:host .tertiary:disabled,:host .tertiary.disabled,:host .tertiary[aria-disabled=true]{background:var(--sg-form-control-bg-disabled)!important;color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .tertiary:disabled::placeholder,:host .tertiary.disabled::placeholder,:host .tertiary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .ghost-light{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#fff;color:#fff;--color: rgb(255, 255, 255)}:host .ghost-light:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}:host .ghost-light[aria-selected=true],:host .ghost-light:active,:host .ghost-light.active,:host .ghost-light.active:hover,:host .ghost-light:active:hover{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff}:host .ghost-light[aria-selected]:hover,:host .ghost-light.active:hover,:host .ghost-light:active:hover{opacity:.9}:host .ghost-light:focus-visible{background-color:#fff;color:#000;--background: rgb(255, 255, 255);--color: black;border-color:#fff!important}:host .ghost-light:disabled,:host .ghost-light.disabled,:host .ghost-light[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .ghost-light:disabled::placeholder,:host .ghost-light.disabled::placeholder,:host .ghost-light[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .ghost{transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s;border-color:#333;color:#333;--color: rgb(51, 51, 51)}:host .ghost:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .ghost[aria-selected=true],:host .ghost:active,:host .ghost.active,:host .ghost.active:hover,:host .ghost:active:hover{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333}:host .ghost[aria-selected]:hover,:host .ghost.active:hover,:host .ghost:active:hover{opacity:.9}:host .ghost:focus-visible{background-color:#333;color:#fff;--background: rgb(51, 51, 51);--color: rgb(255, 255, 255);border-color:#333!important}:host .ghost:disabled,:host .ghost.disabled,:host .ghost[aria-disabled=true]{color:var(--text-disabled-color)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed}:host .ghost:disabled::placeholder,:host .ghost.disabled::placeholder,:host .ghost[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .danger.primary{background:#bb000c;border-color:#bb000c;color:#fff;--color: #fff;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .danger.primary:not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .danger.primary[aria-selected=true],:host .danger.primary:active,:host .danger.primary.active,:host .danger.primary.active:hover,:host .danger.primary:active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .danger.primary[aria-selected]:hover,:host .danger.primary.active:hover,:host .danger.primary:active:hover{opacity:.9}:host .danger.primary:focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger.primary:focus,:host .danger.primary:focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host .danger.primary:disabled,:host .danger.primary.disabled,:host .danger.primary[aria-disabled=true]{background:var(--form-control-primary-bg-disabled)!important;color:var(--text-primary-disabled-color)!important;border-color:var(--border-primary-disabled-color)!important;cursor:not-allowed}:host .danger.primary:disabled::placeholder,:host .danger.primary.disabled::placeholder,:host .danger.primary[aria-disabled=true]::placeholder{color:var(--text-disabled-color)}:host .danger:not(.primary){color:#bb000c;--color: rgb(187, 0, 12);border-color:transparent;transition:all .3s cubic-bezier(.23,1,.32,1),outline-offset 0s,outline-width 0s}:host .danger:not(.primary):not(:disabled,.disabled,[aria-disabled]):hover{background-color:#d81a1a;color:#fff;--background: rgb(216, 26, 26);--color: rgb(255, 255, 255);border-color:#d81a1a}:host .danger:not(.primary)[aria-selected=true],:host .danger:not(.primary):active,:host .danger:not(.primary).active,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{background-color:#bb000c;color:#fff;--background: rgb(187, 0, 12);--color: rgb(255, 255, 255);border-color:#bb000c}:host .danger:not(.primary)[aria-selected]:hover,:host .danger:not(.primary).active:hover,:host .danger:not(.primary):active:hover{opacity:.9}:host .danger:not(.primary):focus:not(:focus-visible){box-shadow:none;outline:0}:host .danger:not(.primary):focus,:host .danger:not(.primary):focus-visible{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TRANSLOCO_SCOPE]
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { thook: [{
+                type: HostBinding,
+                args: ['attr.data-thook']
+            }, {
+                type: Input
+            }], type: [{
+                type: Input
+            }], buttonStyle: [{
+                type: Input
+            }], small: [{
+                type: Input
+            }], href: [{
+                type: Input
+            }], ngvClick: [{
+                type: Output
+            }] } });
+
+class NgvButtonModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NgvButtonModule, declarations: [NgvButtonComponent], imports: [CommonModule, NgvExternalLinkDirectiveModule, RouterModule], exports: [NgvButtonComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvButtonModule, imports: [CommonModule, NgvExternalLinkDirectiveModule, RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvButtonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NgvButtonComponent],
+                    imports: [CommonModule, NgvExternalLinkDirectiveModule, RouterModule],
+                    exports: [NgvButtonComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonStyle, NgvButtonComponent, NgvButtonModule };
+//# sourceMappingURL=sebgroup-green-angular-src-v-angular-button.mjs.map

package/fesm2022/sebgroup-green-angular-src-v-angular-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sebgroup-green-angular-src-v-angular-button.mjs","sources":["../../../../libs/angular/src/v-angular/button/button.component.ts","../../../../libs/angular/src/v-angular/button/button.component.html","../../../../libs/angular/src/v-angular/button/button.module.ts","../../../../libs/angular/src/v-angular/button/sebgroup-green-angular-src-v-angular-button.ts"],"sourcesContent":["import {\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  HostBinding,\n  Inject,\n  InjectionToken,\n  Input,\n  OnChanges,\n  OnInit,\n  Optional,\n  Output,\n  Self,\n  SimpleChanges,\n} from '@angular/core'\nimport { NgControl } from '@angular/forms'\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@ngneat/transloco'\nimport { NgvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\nexport type ButtonTypes = 'button' | 'submit' | 'reset' | 'link'\n\nexport enum ButtonStyle {\n  Primary,\n  Secondary,\n  Alternative,\n  Delete,\n  DeleteConfirm,\n  Ghost,\n  GhostDark,\n  Link,\n}\n\n/**\n * Buttons allow users to take action with a single tap.\n * https://designlibrary.sebgroup.com/components/component-button\n */\n@Component({\n  selector: 'ngv-button',\n  templateUrl: './button.component.html',\n  styleUrls: ['./button.component.scss'],\n})\nexport class NgvButtonComponent\n  extends NgvBaseControlValueAccessorComponent\n  implements OnInit, OnChanges\n{\n  /** Special property used for selecting DOM elements during automated UI testing. */\n  @HostBinding('attr.data-thook') @Input() thook = 'button'\n  /** Type of button to one of button|submit|reset|link, where link creates an anchor tag. */\n  @Input() type: ButtonTypes = 'button'\n  /** Style of the button to one of Primary|Secondary|Alternative|Delete|DeleteConfirm|Ghost|GhostDark|Link. */\n  @Input() buttonStyle: ButtonStyle =\n    this.type === 'link' ? ButtonStyle.Link : ButtonStyle.Primary\n  /** Size of the button to be smaller. */\n  @Input() small = false\n  /** Where the button should link to if {@link ButtonTypes} is set to link. */\n  @Input() href?: string\n\n  /** @internal Determines if the the href property should use internal routing. */\n  external = false\n  /** @internal The classes determined by the buttonStyle and small properties. */\n  buttonClasses: { [className: string]: boolean } = {}\n\n  /** Emits click events triggered by the button or link.\n   * Use instead of click to avoid triggering events on disabled buttons and links.\n   */\n  @Output() ngvClick = new EventEmitter()\n\n  constructor(\n    @Self() @Optional() public ngControl: NgControl,\n    @Optional()\n    @Inject(TRANSLOCO_SCOPE)\n    protected translocoScope: TranslocoScope,\n    protected cdr: ChangeDetectorRef,\n  ) {\n    super(ngControl, translocoScope, cdr)\n  }\n\n  /** @internal */\n  static buttonStyleClasses(type: ButtonStyle, small: boolean) {\n    return {\n      small: small,\n      primary: type === ButtonStyle.Primary || type === ButtonStyle.Delete,\n      secondary: type === ButtonStyle.Secondary,\n      tertiary: type === ButtonStyle.Alternative || type === ButtonStyle.Link,\n      danger: type === ButtonStyle.Delete || type === ButtonStyle.DeleteConfirm,\n      ghost: type === ButtonStyle.GhostDark,\n      'ghost-light': type === ButtonStyle.Ghost,\n    }\n  }\n\n  ngOnInit() {\n    super.ngOnInit()\n    if (this.href) this.external = /^\\w+:\\/\\/.+$/.test(this.href)\n    this.buttonClasses = NgvButtonComponent.buttonStyleClasses(\n      this.buttonStyle,\n      this.small,\n    )\n  }\n\n  ngOnChanges(changes: SimpleChanges) {\n    if (changes.buttonStyle || changes.small) {\n      this.buttonClasses = NgvButtonComponent.buttonStyleClasses(\n        this.buttonStyle,\n        this.small,\n      )\n    }\n  }\n\n  /** @internal */\n  onClick(event: Event) {\n    if (this.disabled) return\n    this.ngvClick.emit(event)\n  }\n}\n","<button\n  #input\n  [ngClass]=\"buttonClasses\"\n  [id]=\"id + '-button'\"\n  [attr.name]=\"name\"\n  [attr.value]=\"value\"\n  [type]=\"type\"\n  [autofocus]=\"autofocus\"\n  [disabled]=\"disabled\"\n  [attr.aria-label]=\"description\"\n  (click)=\"onClick($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  *ngIf=\"type !== 'link'\"\n>\n  <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</button>\n\n<a\n  #input\n  [ngClass]=\"buttonClasses\"\n  role=\"button\"\n  [id]=\"id + '-link'\"\n  [routerLink]=\"href\"\n  [external]=\"external\"\n  [attr.aria-label]=\"description\"\n  (click)=\"onClick($event)\"\n  (focus)=\"onFocus($event)\"\n  (blur)=\"onBlur($event)\"\n  *ngIf=\"type === 'link'\"\n>\n  <ng-container *ngTemplateOutlet=\"contentRef\"></ng-container>\n</a>\n\n<ng-template #contentRef>\n  <ng-content></ng-content>\n</ng-template>\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\nimport { RouterModule } from '@angular/router'\n\nimport { NgvButtonComponent } from './button.component'\nimport { NgvExternalLinkDirectiveModule } from '@sebgroup/green-angular/src/v-angular/external-link'\n\n@NgModule({\n  declarations: [NgvButtonComponent],\n  imports: [CommonModule, NgvExternalLinkDirectiveModule, RouterModule],\n  exports: [NgvButtonComponent],\n})\nexport class NgvButtonModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sebgroup-green-angular-src-v-angular-card.mjs

@@ -0,0 +1,33 @@
+import * as i0 from '@angular/core';
+import { Component, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+class NgvCardComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvCardComponent, selector: "ngv-card", ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, styles: [":host{background-clip:border-box;background:var(--sg-card-background);border:var(--sg-card-border);border-radius:var(--sg-card-border-radius);box-shadow:var(--sg-card-box-shadow);color:var(--sg-card-color);display:flex;flex-direction:column;padding:1rem}:host>header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem;margin-block-end:1rem}:host>header .close{margin:-.5rem -.5rem -.5rem .5rem}:host>*:not(header,footer){flex:1 1 auto}:host>footer{margin-top:.75rem}@media (min-width: 36em){:host>footer{display:flex;justify-content:flex-end}}@media (max-width: 35.98em){:host>footer button:not(.link)+button,:host>footer button:not(.link)+.button,:host>footer .button:not(.link)+button,:host>footer .button:not(.link)+.button{margin-top:.75rem}}@media (min-width: 36em){:host>footer button:not(.link)+button,:host>footer button:not(.link)+.button,:host>footer .button:not(.link)+button,:host>footer .button:not(.link)+.button{margin-left:.75rem}}:host:has(.card-row){display:table;width:inherit;box-sizing:border-box}:host ::ng-deep .card-row{display:table-row}:host ::ng-deep .card-row *{padding-bottom:.5rem}:host ::ng-deep .card-row:last-child *{padding-bottom:0}:host ::ng-deep .card-row.divider *{border-top:1px solid #d8d8d8;padding-top:.375rem}:host ::ng-deep .card-column{display:table-cell;text-align:start}:host ::ng-deep .card-column:first-child{text-align:start}:host ::ng-deep .card-column:not(:first-child):not(:last-child){text-align:center}:host ::ng-deep .card-column:last-child{text-align:end}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngv-card', template: ` <ng-content></ng-content> `, styles: [":host{background-clip:border-box;background:var(--sg-card-background);border:var(--sg-card-border);border-radius:var(--sg-card-border-radius);box-shadow:var(--sg-card-box-shadow);color:var(--sg-card-color);display:flex;flex-direction:column;padding:1rem}:host>header{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem;margin-block-end:1rem}:host>header .close{margin:-.5rem -.5rem -.5rem .5rem}:host>*:not(header,footer){flex:1 1 auto}:host>footer{margin-top:.75rem}@media (min-width: 36em){:host>footer{display:flex;justify-content:flex-end}}@media (max-width: 35.98em){:host>footer button:not(.link)+button,:host>footer button:not(.link)+.button,:host>footer .button:not(.link)+button,:host>footer .button:not(.link)+.button{margin-top:.75rem}}@media (min-width: 36em){:host>footer button:not(.link)+button,:host>footer button:not(.link)+.button,:host>footer .button:not(.link)+button,:host>footer .button:not(.link)+.button{margin-left:.75rem}}:host:has(.card-row){display:table;width:inherit;box-sizing:border-box}:host ::ng-deep .card-row{display:table-row}:host ::ng-deep .card-row *{padding-bottom:.5rem}:host ::ng-deep .card-row:last-child *{padding-bottom:0}:host ::ng-deep .card-row.divider *{border-top:1px solid #d8d8d8;padding-top:.375rem}:host ::ng-deep .card-column{display:table-cell;text-align:start}:host ::ng-deep .card-column:first-child{text-align:start}:host ::ng-deep .card-column:not(:first-child):not(:last-child){text-align:center}:host ::ng-deep .card-column:last-child{text-align:end}\n"] }]
+        }] });
+
+class NgvCardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NgvCardModule, declarations: [NgvCardComponent], imports: [CommonModule], exports: [NgvCardComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvCardModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvCardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NgvCardComponent],
+                    imports: [CommonModule],
+                    exports: [NgvCardComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgvCardComponent, NgvCardModule };
+//# sourceMappingURL=sebgroup-green-angular-src-v-angular-card.mjs.map

package/fesm2022/sebgroup-green-angular-src-v-angular-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sebgroup-green-angular-src-v-angular-card.mjs","sources":["../../../../libs/angular/src/v-angular/card/card.component.ts","../../../../libs/angular/src/v-angular/card/card.module.ts","../../../../libs/angular/src/v-angular/card/sebgroup-green-angular-src-v-angular-card.ts"],"sourcesContent":["import { Component } from '@angular/core'\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'ngv-card',\n  template: ` <ng-content></ng-content> `,\n  styleUrls: ['./card.component.scss'],\n})\nexport class NgvCardComponent {}\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\n\nimport { NgvCardComponent } from './card.component'\n\n@NgModule({\n  declarations: [NgvCardComponent],\n  imports: [CommonModule],\n  exports: [NgvCardComponent],\n})\nexport class NgvCardModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAQa,gBAAgB,CAAA;+GAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;AAAhB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,gBAAgB,gDAHjB,CAA6B,2BAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0gDAAA,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAG5B,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAN5B,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,YACV,CAA6B,2BAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0gDAAA,CAAA,EAAA,CAAA;;;MCK5B,aAAa,CAAA;+GAAb,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA,EAAA;AAAb,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,EAJT,YAAA,EAAA,CAAA,gBAAgB,CACrB,EAAA,OAAA,EAAA,CAAA,YAAY,aACZ,gBAAgB,CAAA,EAAA,CAAA,CAAA,EAAA;AAEf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,aAAa,YAHd,YAAY,CAAA,EAAA,CAAA,CAAA,EAAA;;4FAGX,aAAa,EAAA,UAAA,EAAA,CAAA;kBALzB,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACR,YAAY,EAAE,CAAC,gBAAgB,CAAC;oBAChC,OAAO,EAAE,CAAC,YAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,gBAAgB,CAAC;AAC5B,iBAAA,CAAA;;;ACTD;;AAEG;;;;"}

package/fesm2022/sebgroup-green-angular-src-v-angular-character-countdown.mjs

@@ -0,0 +1,73 @@
+import * as i0 from '@angular/core';
+import { Directive, Input, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+class CharacterCountdownDirective {
+    set maxlength(value) {
+        if (!!value && !Number.isNaN(value)) {
+            this._maxlength = value;
+            this.updateContext();
+            if (!this.isViewCreated) {
+                this.viewContainerRef.createEmbeddedView(this.templateRef, this.context);
+                this.isViewCreated = true;
+            }
+        }
+        else {
+            if (this.isViewCreated) {
+                this.viewContainerRef.clear();
+                this.isViewCreated = false;
+            }
+        }
+    }
+    set currentLength(value) {
+        this._currentLength = value ?? 0;
+        this.updateContext();
+    }
+    constructor(viewContainerRef, templateRef) {
+        this.viewContainerRef = viewContainerRef;
+        this.templateRef = templateRef;
+        this._maxlength = Number.MAX_SAFE_INTEGER;
+        this._currentLength = 0;
+        this.isViewCreated = false;
+        this.context = { charactersLeft: 0 };
+        this.calculateCharactersLeft = (max, current) => max - current;
+    }
+    updateContext() {
+        this.context.charactersLeft = this.calculateCharactersLeft(this._maxlength, this._currentLength);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CharacterCountdownDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CharacterCountdownDirective, selector: "[ngvCharacterCountdown]", inputs: { maxlength: ["ngvCharacterCountdown", "maxlength"], currentLength: ["ngvCharacterCountdownCurrentLength", "currentLength"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CharacterCountdownDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngvCharacterCountdown]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }]; }, propDecorators: { maxlength: [{
+                type: Input,
+                args: ['ngvCharacterCountdown']
+            }], currentLength: [{
+                type: Input,
+                args: ['ngvCharacterCountdownCurrentLength']
+            }] } });
+
+class NggCharacterCountdownDirectiveModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggCharacterCountdownDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NggCharacterCountdownDirectiveModule, declarations: [CharacterCountdownDirective], imports: [CommonModule], exports: [CharacterCountdownDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggCharacterCountdownDirectiveModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NggCharacterCountdownDirectiveModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [CharacterCountdownDirective],
+                    imports: [CommonModule],
+                    exports: [CharacterCountdownDirective],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CharacterCountdownDirective, NggCharacterCountdownDirectiveModule };
+//# sourceMappingURL=sebgroup-green-angular-src-v-angular-character-countdown.mjs.map

package/fesm2022/sebgroup-green-angular-src-v-angular-character-countdown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sebgroup-green-angular-src-v-angular-character-countdown.mjs","sources":["../../../../libs/angular/src/v-angular/character-countdown/character-countdown.directive.ts","../../../../libs/angular/src/v-angular/character-countdown/character-countdown.module.ts","../../../../libs/angular/src/v-angular/character-countdown/sebgroup-green-angular-src-v-angular-character-countdown.ts"],"sourcesContent":["import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'\n\n@Directive({\n  selector: '[ngvCharacterCountdown]',\n})\nexport class CharacterCountdownDirective {\n  @Input('ngvCharacterCountdown')\n  set maxlength(value: number | undefined) {\n    if (!!value && !Number.isNaN(value)) {\n      this._maxlength = value\n      this.updateContext()\n      if (!this.isViewCreated) {\n        this.viewContainerRef.createEmbeddedView(this.templateRef, this.context)\n        this.isViewCreated = true\n      }\n    } else {\n      if (this.isViewCreated) {\n        this.viewContainerRef.clear()\n        this.isViewCreated = false\n      }\n    }\n  }\n\n  @Input('ngvCharacterCountdownCurrentLength')\n  set currentLength(value: number) {\n    this._currentLength = value ?? 0\n    this.updateContext()\n  }\n\n  private _maxlength: number = Number.MAX_SAFE_INTEGER\n  private _currentLength = 0\n  private isViewCreated = false\n  private context = { charactersLeft: 0 }\n\n  constructor(\n    private readonly viewContainerRef: ViewContainerRef,\n    private readonly templateRef: TemplateRef<any>,\n  ) {}\n\n  updateContext() {\n    this.context.charactersLeft = this.calculateCharactersLeft(\n      this._maxlength,\n      this._currentLength,\n    )\n  }\n\n  calculateCharactersLeft = (max: number, current: number): number =>\n    max - current\n}\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\n\nimport { CharacterCountdownDirective } from './character-countdown.directive'\n\n@NgModule({\n  declarations: [CharacterCountdownDirective],\n  imports: [CommonModule],\n  exports: [CharacterCountdownDirective],\n})\nexport class NggCharacterCountdownDirectiveModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sebgroup-green-angular-src-v-angular-checkbox.mjs

@@ -0,0 +1,94 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, Self, Optional, Inject, HostBinding, Input, Output, NgModule } from '@angular/core';
+import * as i1 from '@angular/forms';
+import * as i3 from '@ngneat/transloco';
+import { TRANSLOCO_SCOPE } from '@ngneat/transloco';
+import { NgvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { NgvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n';
+
+/**
+ * Checkboxes allow a user to toggle an option on or off, or make multiple choices in a set of available options.
+ * https://designlibrary.sebgroup.com/components/component-checkbox
+ */
+class NgvCheckboxComponent extends NgvBaseControlValueAccessorComponent {
+    constructor(ngControl, translocoScope, cdr) {
+        super(ngControl, translocoScope, cdr);
+        this.ngControl = ngControl;
+        this.translocoScope = translocoScope;
+        this.cdr = cdr;
+        /** Special property used for selecting DOM elements during automated UI testing. */
+        this.thook = 'checkbox';
+        this.optionalLabel = 'Optional';
+        this.valueChange = new EventEmitter();
+    }
+    /** @internal */
+    onInputChange(event) {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.state = !this.state;
+        this.onTouched();
+        this.onChange(this.state);
+    }
+    /** Writes a new value of true or false based on if argument matches this components value property. */
+    writeValue(value) {
+        // Phantom null value on first load https://github.com/angular/angular/pull/38140
+        super.writeValue(value === this.value);
+    }
+    /** Registers a callback function that is called when the child input element's value changes. */
+    registerOnChange(fn) {
+        // Override default to update registry
+        this.onChange = (checked) => {
+            const output = checked ? this.value : null;
+            fn(output);
+            this.valueChange.emit(output);
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvCheckboxComponent, deps: [{ token: i1.NgControl, optional: true, self: true }, { token: TRANSLOCO_SCOPE, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NgvCheckboxComponent, selector: "ngv-checkbox", inputs: { thook: "thook", optionalLabel: "optionalLabel" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-thook": "this.thook" } }, usesInheritance: true, ngImport: i0, template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\" class=\"sdv-field-checkbox-wrap\">\n  <div\n    [id]=\"id + '-checkbox'\"\n    class=\"ngv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    <ng-container *ngIf=\"!labelContentTpl\">\n      {{ label }}\n    </ng-container>\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n    ></ng-template>\n  </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"sdv-field-checkbox-wrap\">\n    <!-- CHECKBOX FIELD -->\n    <label\n      [id]=\"id + '-label'\"\n      [attr.for]=\"id + '-checkbox'\"\n      class=\"form-control\"\n      *transloco=\"let t; read: scope\"\n    >\n      <input\n        #input\n        type=\"checkbox\"\n        [id]=\"id + '-checkbox'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [autofocus]=\"autofocus\"\n        [attr.aria-label]=\"description\"\n        [checked]=\"state\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onInputChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n      <!-- LABEL -->\n      <ng-template\n        *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n      ></ng-template>\n      <ng-template #basicLabelContentTpl>\n        <!-- to trigger css:empty if no label was added -->\n        <ng-container *ngIf=\"label\">\n          <span\n            *ngIf=\"\n              optional === true || (required !== true && optional !== false)\n            \"\n            class=\"sdv-field-label--optional\"\n          >\n            ({{ t('label.optional') }})\n          </span>\n          <span>{{ label }}</span>\n        </ng-container>\n      </ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <label\n      class=\"sdv-field-notice sdv-field-notice--error\"\n      [attr.for]=\"id + '-checkbox'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </label>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-surface);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: var(--gds-sys-color-base);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-surface);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2)}:host label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control{align-items:flex-start}:host label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=checkbox]:focus-visible):focus,:host label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color);position:relative;border-radius:var(--gds-comp-checkbox-border-radius);background-color:var(--gds-comp-checkbox-container-color);flex:0 0 auto;height:var(--gds-comp-checkbox-container-width, 1rem);width:var(--gds-comp-checkbox-container-width, 1rem);transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]~i:after{transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color-focus)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{border-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control:hover input[type=checkbox]:not(:checked,:indeterminate,:disabled,.disabled)~i:after{border-color:var(--gds-comp-checkbox-hover-border-color);opacity:1}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control:hover input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.form-control.is-invalid{border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control.is-invalid{border:none;margin:0}}:host label.form-control input[type=checkbox]:disabled~i,:host label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~i::placeholder,:host label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i,:host label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i:after,:host label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~span,:host label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=checkbox]:disabled~span::placeholder,:host label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}:host label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}:host label.form-control input[type=checkbox]:checked~i:after{opacity:1}:host .form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}:host .form-control:has(input:disabled){cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoLang", "translocoLoadingTpl"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ngv-checkbox', template: "<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\" class=\"sdv-field-checkbox-wrap\">\n  <div\n    [id]=\"id + '-checkbox'\"\n    class=\"ngv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    <ng-container *ngIf=\"!labelContentTpl\">\n      {{ label }}\n    </ng-container>\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n    ></ng-template>\n  </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"sdv-field-checkbox-wrap\">\n    <!-- CHECKBOX FIELD -->\n    <label\n      [id]=\"id + '-label'\"\n      [attr.for]=\"id + '-checkbox'\"\n      class=\"form-control\"\n      *transloco=\"let t; read: scope\"\n    >\n      <input\n        #input\n        type=\"checkbox\"\n        [id]=\"id + '-checkbox'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [autofocus]=\"autofocus\"\n        [attr.aria-label]=\"description\"\n        [checked]=\"state\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onInputChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n      <!-- LABEL -->\n      <ng-template\n        *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n      ></ng-template>\n      <ng-template #basicLabelContentTpl>\n        <!-- to trigger css:empty if no label was added -->\n        <ng-container *ngIf=\"label\">\n          <span\n            *ngIf=\"\n              optional === true || (required !== true && optional !== false)\n            \"\n            class=\"sdv-field-label--optional\"\n          >\n            ({{ t('label.optional') }})\n          </span>\n          <span>{{ label }}</span>\n        </ng-container>\n      </ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <label\n      class=\"sdv-field-notice sdv-field-notice--error\"\n      [attr.for]=\"id + '-checkbox'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </label>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n", styles: [":host{--gds-comp-checkbox-container-height: 1rem;--gds-comp-checkbox-container-width: 1rem;--gds-comp-checkbox-container-color: var(--gds-sys-color-surface);--gds-comp-checkbox-container-color-disabled: var(--gds-ref-pallet-base200);--gds-comp-checkbox-border-color: var(--gds-sys-color-base);--gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);--gds-comp-checkbox-hover-border-color: var(--gds-ref-pallet-base600);--gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base);--gds-comp-checkbox-border-color-selected: var(--gds-sys-color-surface);--gds-comp-checkbox-border-color-focus: var(--gds-sys-color-blue-dark-2)}:host label.form-control input[type=checkbox]{cursor:pointer;height:0;opacity:0;position:absolute;width:0;z-index:-1}:host label.form-control{align-items:flex-start}:host label.form-control:has(input[type=checkbox]){padding:.6875rem 1rem .5625rem}:host label.form-control:has(input[type=checkbox]:focus-visible):focus:not(:focus-visible){box-shadow:none;outline:0}:host label.form-control:has(input[type=checkbox]:focus-visible):focus,:host label.form-control:has(input[type=checkbox]:focus-visible):focus-within{outline-color:var(--gds-sys-color-focus-outline);outline-style:solid;outline-width:.125rem;outline-offset:.125rem}:host label.form-control input[type=checkbox]~i{margin-right:.75rem;margin-top:.0625rem;flex-shrink:0;box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color);position:relative;border-radius:var(--gds-comp-checkbox-border-radius);background-color:var(--gds-comp-checkbox-container-color);flex:0 0 auto;height:var(--gds-comp-checkbox-container-width, 1rem);width:var(--gds-comp-checkbox-container-width, 1rem);transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]~i:after{transition:color .3s ease-in-out,all .3s ease-in-out}:host label.form-control input[type=checkbox]:not(:checked):focus-visible~i{box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-border-color-focus)}:host label.form-control:hover input[type=checkbox]:not(.disabled,:disabled,:checked,:indeterminate)~i{border-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control:hover input[type=checkbox]:not(:checked,:indeterminate,:disabled,.disabled)~i:after{border-color:var(--gds-comp-checkbox-hover-border-color);opacity:1}:host label.form-control input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control:hover input[type=checkbox]:checked~i{background-color:var(--gds-comp-checkbox-hover-border-color);box-shadow:inset 0 0 0 1px var(--gds-comp-checkbox-hover-border-color)}:host label.form-control input[type=checkbox]:indeterminate~i{background-color:var(--gds-comp-checkbox-container-color-selected)}:host label.form-control input[type=checkbox]:indeterminate~i:after{border-bottom:2px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:none;transform:scale(1) rotate(0);opacity:1}:host label.form-control:has(input[type=checkbox].is-invalid){border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control:has(input[type=checkbox].is-invalid){border:none;margin:0}@supports (-moz-appearance: none){:host label.form-control.is-invalid{border:.0625rem solid var(--intent-danger-background);margin-bottom:.5rem}:host .is-invalid label.form-control.is-invalid{border:none;margin:0}}:host label.form-control input[type=checkbox]:disabled~i,:host label.form-control input[type=checkbox].disabled~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~i::placeholder,:host label.form-control input[type=checkbox].disabled~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i,:host label.form-control input[type=checkbox].disabled:checked~i{background:var(--sg-form-control-bg-disabled)!important;border-color:var(--border-disabled-color)!important;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i::placeholder,:host label.form-control input[type=checkbox].disabled:checked~i::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]:disabled:checked~i:after,:host label.form-control input[type=checkbox].disabled:checked~i:after{border-color:var(--border-disabled-color)}:host label.form-control input[type=checkbox]:disabled~span,:host label.form-control input[type=checkbox].disabled~span{color:var(--text-disabled-color)!important;cursor:not-allowed}:host label.form-control input[type=checkbox]:disabled~span::placeholder,:host label.form-control input[type=checkbox].disabled~span::placeholder{color:var(--text-disabled-color)}:host label.form-control input[type=checkbox]~i:after{content:\"\";opacity:0;position:absolute}:host label.form-control input[type=checkbox]~i:after{border-bottom:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);border-left:3px solid var(--gds-comp-checkbox-border-color-selected, #fff);height:.5rem;width:1rem;left:0;top:.1875rem;transform:scale(.601) rotate(-45deg);transform-origin:center}:host label.form-control input[type=checkbox]:checked~i:after{opacity:1}:host .form-control{padding:.75rem 1rem;border:1px solid transparent;border-radius:var(--gds-sys-shape-corner-medium);align-items:center;cursor:pointer;display:flex;flex-direction:row-reverse;font:inherit;justify-content:flex-end;position:relative;user-select:none;-webkit-user-select:none}:host .form-control:has(input:disabled){cursor:not-allowed}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
+                    type: Self
+                }, {
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [TRANSLOCO_SCOPE]
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { thook: [{
+                type: HostBinding,
+                args: ['attr.data-thook']
+            }, {
+                type: Input
+            }], optionalLabel: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }] } });
+
+class NgvCheckboxModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvCheckboxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: NgvCheckboxModule, declarations: [NgvCheckboxComponent], imports: [CommonModule, NgvI18nModule], exports: [NgvCheckboxComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvCheckboxModule, imports: [CommonModule, NgvI18nModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NgvCheckboxModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [NgvCheckboxComponent],
+                    imports: [CommonModule, NgvI18nModule],
+                    exports: [NgvCheckboxComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgvCheckboxComponent, NgvCheckboxModule };
+//# sourceMappingURL=sebgroup-green-angular-src-v-angular-checkbox.mjs.map

package/fesm2022/sebgroup-green-angular-src-v-angular-checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sebgroup-green-angular-src-v-angular-checkbox.mjs","sources":["../../../../libs/angular/src/v-angular/checkbox/checkbox.component.ts","../../../../libs/angular/src/v-angular/checkbox/checkbox.component.html","../../../../libs/angular/src/v-angular/checkbox/checkbox.module.ts","../../../../libs/angular/src/v-angular/checkbox/sebgroup-green-angular-src-v-angular-checkbox.ts"],"sourcesContent":["import {\n  ChangeDetectorRef,\n  Component,\n  EventEmitter,\n  HostBinding,\n  Inject,\n  Input,\n  Optional,\n  Output,\n  Self,\n  OnChanges,\n  SimpleChanges,\n} from '@angular/core'\nimport { NgControl } from '@angular/forms'\nimport { TRANSLOCO_SCOPE, TranslocoScope } from '@ngneat/transloco'\nimport { NgvBaseControlValueAccessorComponent } from '@sebgroup/green-angular/src/v-angular/base-control-value-accessor'\n\n/**\n * Checkboxes allow a user to toggle an option on or off, or make multiple choices in a set of available options.\n * https://designlibrary.sebgroup.com/components/component-checkbox\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'ngv-checkbox',\n  templateUrl: './checkbox.component.html',\n  styleUrls: ['./checkbox.component.scss'],\n})\nexport class NgvCheckboxComponent extends NgvBaseControlValueAccessorComponent {\n  /** Special property used for selecting DOM elements during automated UI testing. */\n  @HostBinding('attr.data-thook') @Input() thook = 'checkbox'\n  @Input() optionalLabel = 'Optional'\n\n  @Output() readonly valueChange: EventEmitter<string> =\n    new EventEmitter<string>()\n\n  constructor(\n    @Self()\n    @Optional()\n    public ngControl: NgControl,\n    @Optional()\n    @Inject(TRANSLOCO_SCOPE)\n    protected translocoScope: TranslocoScope,\n    protected cdr: ChangeDetectorRef,\n  ) {\n    super(ngControl, translocoScope, cdr)\n  }\n\n  /** @internal */\n  onInputChange(event: Event) {\n    event.stopPropagation()\n    if (this.disabled) return\n    this.state = !this.state\n    this.onTouched()\n    this.onChange(this.state)\n  }\n\n  /** Writes a new value of true or false based on if argument matches this components value property. */\n  writeValue(value: any): void {\n    // Phantom null value on first load https://github.com/angular/angular/pull/38140\n    super.writeValue(value === this.value)\n  }\n\n  /** Registers a callback function that is called when the child input element's value changes. */\n  registerOnChange(fn: (checked: any) => any) {\n    // Override default to update registry\n    this.onChange = (checked) => {\n      const output = checked ? this.value : null\n      fn(output)\n      this.valueChange.emit(output)\n    }\n  }\n}\n","<!-- LOCKED INPUT -->\n<div *ngIf=\"locked && state\" class=\"sdv-field-checkbox-wrap\">\n  <div\n    [id]=\"id + '-checkbox'\"\n    class=\"ngv-field--locked\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n  >\n    <ng-container *ngIf=\"!labelContentTpl\">\n      {{ label }}\n    </ng-container>\n    <ng-template\n      *ngTemplateOutlet=\"labelContentTpl ?? null; context: { $implicit: value }\"\n    ></ng-template>\n  </div>\n</div>\n\n<!-- INPUT WRAPPER -->\n<ng-container *ngIf=\"!locked\">\n  <div class=\"sdv-field-checkbox-wrap\">\n    <!-- CHECKBOX FIELD -->\n    <label\n      [id]=\"id + '-label'\"\n      [attr.for]=\"id + '-checkbox'\"\n      class=\"form-control\"\n      *transloco=\"let t; read: scope\"\n    >\n      <input\n        #input\n        type=\"checkbox\"\n        [id]=\"id + '-checkbox'\"\n        [attr.name]=\"name\"\n        [attr.value]=\"value\"\n        [attr.required]=\"required\"\n        [disabled]=\"disabled\"\n        [autofocus]=\"autofocus\"\n        [attr.aria-label]=\"description\"\n        [checked]=\"state\"\n        (click)=\"$event.stopPropagation()\"\n        (change)=\"onInputChange($event)\"\n        (focus)=\"onFocus($event)\"\n        (blur)=\"onBlur($event)\"\n      />\n      <!-- LABEL -->\n      <ng-template\n        *ngTemplateOutlet=\"labelContentTpl || basicLabelContentTpl\"\n      ></ng-template>\n      <ng-template #basicLabelContentTpl>\n        <!-- to trigger css:empty if no label was added -->\n        <ng-container *ngIf=\"label\">\n          <span\n            *ngIf=\"\n              optional === true || (required !== true && optional !== false)\n            \"\n            class=\"sdv-field-label--optional\"\n          >\n            ({{ t('label.optional') }})\n          </span>\n          <span>{{ label }}</span>\n        </ng-container>\n      </ng-template>\n      <i></i>\n    </label>\n  </div>\n\n  <!-- ERRORS -->\n  <ng-container *transloco=\"let t; read: scope\">\n    <label\n      class=\"sdv-field-notice sdv-field-notice--error\"\n      [attr.for]=\"id + '-checkbox'\"\n      *ngIf=\"invalid && (error || ngControl?.invalid)\"\n    >\n      <span *ngIf=\"error; else errorsRef\">{{ error }}</span>\n      <ng-template #errorsRef>\n        <span *ngIf=\"firstError as error\">\n          {{ t('error.field' + error?.code, error?.params) }}\n        </span>\n      </ng-template>\n    </label>\n  </ng-container>\n\n  <!-- CHILDREN -->\n  <ng-content></ng-content>\n</ng-container>\n","import { NgModule } from '@angular/core'\nimport { CommonModule } from '@angular/common'\n\nimport { NgvCheckboxComponent } from './checkbox.component'\nimport { NgvI18nModule } from '@sebgroup/green-angular/src/v-angular/i18n'\n\n@NgModule({\n  declarations: [NgvCheckboxComponent],\n  imports: [CommonModule, NgvI18nModule],\n  exports: [NgvCheckboxComponent],\n})\nexport class NgvCheckboxModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/sebgroup-green-angular-src-v-angular-core.mjs

@@ -0,0 +1,51 @@
+import * as i0 from '@angular/core';
+import { Injectable } from '@angular/core';
+
+(() => {
+    // Make sure there is an incremental ID each component can use
+    if (typeof window !== 'undefined' && !window.ngv) {
+        window.ngv = {
+            ids: { default: -1 },
+            nextId(namespace = 'default') {
+                let id = this.ids[namespace] || 0;
+                if (typeof this.ids[namespace] === 'number')
+                    id++;
+                this.ids[namespace] = id;
+                return namespace === 'default' ? `ngv-${id}` : `ngv-${namespace}-${id}`;
+            },
+        };
+    }
+})();
+
+class DropdownUtils {
+    flattenOptions(options, mustHaveLabel) {
+        if (!options)
+            return [];
+        return options.reduce((acc, current) => {
+            if (this.isGroup(current))
+                return acc.concat(this.flattenOptions(current.options, mustHaveLabel));
+            if (!current.disabled && !(mustHaveLabel && !current.label))
+                acc.push(current); // skip disabled
+            return acc;
+        }, []);
+    }
+    /**
+     * Returns true if argument is an {@link OptionGroup}.
+     * @param option the object to check.
+     */
+    isGroup(option) {
+        return 'options' in option;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownUtils, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownUtils }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownUtils, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DropdownUtils };
+//# sourceMappingURL=sebgroup-green-angular-src-v-angular-core.mjs.map

package/fesm2022/sebgroup-green-angular-src-v-angular-core.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"sebgroup-green-angular-src-v-angular-core.mjs","sources":["../../../../libs/angular/src/v-angular/core/core.globals.ts","../../../../libs/angular/src/v-angular/core/core.utils.ts","../../../../libs/angular/src/v-angular/core/sebgroup-green-angular-src-v-angular-core.ts"],"sourcesContent":["// We must force tsc to interpret this file as a module, resolves\n// \"Augmentations for the global scope can only be directly nested in external modules or ambient module declarations.\"\nexport {};\n\ndeclare global {\n  interface Window {\n    /** Counter for unique identifiers */\n    ngv: {\n      ids: { [namespace: string]: number; default: number };\n      nextId: (namespace?: string) => string;\n    };\n  }\n}\n\n(() => {\n  // Make sure there is an incremental ID each component can use\n  if (typeof window !== 'undefined' && !window.ngv) {\n    window.ngv = {\n      ids: { default: -1 },\n      nextId(namespace = 'default'): string {\n        let id = this.ids[namespace] || 0;\n        if (typeof this.ids[namespace] === 'number') id++;\n        this.ids[namespace] = id;\n        return namespace === 'default' ? `ngv-${id}` : `ngv-${namespace}-${id}`;\n      },\n    };\n  }\n})();\n","import { Injectable } from '@angular/core';\n\nexport interface Option<K, V> {\n  key: K;\n  label: V;\n  disabled?: boolean;\n}\n\nexport interface OptionGroup<T extends Option<any, any>> {\n  label: string;\n  options: T[];\n  disabled?: boolean;\n}\n\nexport type OptionBase<T extends Option<any, any>> = T | OptionGroup<T>;\n\n@Injectable()\nexport class DropdownUtils<K = string | null, V = string, T extends Option<K, V> = Option<K, V>> {\n  public flattenOptions(options: OptionBase<T>[] | undefined, mustHaveLabel: boolean): T[] {\n    if (!options) return [] as T[];\n    return options.reduce((acc, current) => {\n      if (this.isGroup(current)) return acc.concat(this.flattenOptions(current.options, mustHaveLabel));\n      if (!current.disabled && !(mustHaveLabel && !current.label)) acc.push(current); // skip disabled\n      return acc;\n    }, [] as T[]);\n  }\n\n  /**\n   * Returns true if argument is an {@link OptionGroup}.\n   * @param option the object to check.\n   */\n  public isGroup(\n    option: OptionBase<T>,\n  ): option is OptionGroup<T> {\n    return 'options' in option;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;AAcA,CAAC,MAAK;;IAEJ,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;QAChD,MAAM,CAAC,GAAG,GAAG;AACX,YAAA,GAAG,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE;YACpB,MAAM,CAAC,SAAS,GAAG,SAAS,EAAA;gBAC1B,IAAI,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;gBAClC,IAAI,OAAO,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,KAAK,QAAQ;AAAE,oBAAA,EAAE,EAAE,CAAC;AAClD,gBAAA,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC;AACzB,gBAAA,OAAO,SAAS,KAAK,SAAS,GAAG,CAAO,IAAA,EAAA,EAAE,CAAE,CAAA,GAAG,CAAA,IAAA,EAAO,SAAS,CAAI,CAAA,EAAA,EAAE,EAAE,CAAC;aACzE;SACF,CAAC;AACH,KAAA;AACH,CAAC,GAAG;;MCVS,aAAa,CAAA;IACjB,cAAc,CAAC,OAAoC,EAAE,aAAsB,EAAA;AAChF,QAAA,IAAI,CAAC,OAAO;AAAE,YAAA,OAAO,EAAS,CAAC;QAC/B,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO,KAAI;AACrC,YAAA,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;AAAE,gBAAA,OAAO,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC;AAClG,YAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,IAAI,EAAE,aAAa,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;AAAE,gBAAA,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAC/E,YAAA,OAAO,GAAG,CAAC;SACZ,EAAE,EAAS,CAAC,CAAC;KACf;AAED;;;AAGG;AACI,IAAA,OAAO,CACZ,MAAqB,EAAA;QAErB,OAAO,SAAS,IAAI,MAAM,CAAC;KAC5B;+GAlBU,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA,EAAA;mHAAb,aAAa,EAAA,CAAA,CAAA,EAAA;;4FAAb,aAAa,EAAA,UAAA,EAAA,CAAA;kBADzB,UAAU;;;AChBX;;AAEG;;;;"}