@agorapulse/ui-components 0.0.3 → 1.0.0-SNAPSHOT-YOUTUBE.2

package/fesm2022/agorapulse-ui-components-stepper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-stepper.mjs","sources":["../../../libs/ui-components/stepper/src/stepper.component.ts","../../../libs/ui-components/stepper/src/stepper.component.html","../../../libs/ui-components/stepper/src/agorapulse-ui-components-stepper.ts"],"sourcesContent":["import { SymbolComponent } from '@agorapulse/ui-symbol';\nimport { NgClass } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';\nimport { Step } from './step.model';\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-stepper',\n    templateUrl: './stepper.component.html',\n    styleUrls: ['./stepper.component.scss'],\n    standalone: true,\n    imports: [SymbolComponent, NgClass],\n})\nexport class StepperComponent implements OnChanges {\n    @Input() currentStep: Step | undefined = undefined;\n    @Input({\n        required: true,\n    })\n    steps: Step[] = []; // Immutable after init.\n    @Output() stepClicked: EventEmitter<Step> = new EventEmitter<Step>();\n\n    stepTexts: { [index: number]: string } = {};\n    currentIndex = 0;\n\n    ngOnChanges(): void {\n        if (this.steps?.length > 0 && this.currentStep) {\n            this.currentIndex = this.steps.findIndex(step => step.id === this.currentStep?.id);\n        } else {\n            this.currentIndex = 0;\n        }\n    }\n\n    clickCurrentStep(step: Step): void {\n        this.stepClicked.emit(step);\n    }\n}\n","<div class=\"main\">\n    @for (step of steps; track step; let index = $index; let last = $last) {\n        <span class=\"item\">\n            <span\n                [ngClass]=\"{\n                    number: true,\n                    active: index === currentIndex,\n                    'no-more-active': currentIndex > index || (index !== currentIndex && step.visited),\n                    'not-yet-active': currentIndex < index && !step.visited\n                }\">\n                {{ index + 1 }}\n            </span>\n            <span\n                class=\"text\"\n                [ngClass]=\"{ clickable: step.clickable }\"\n                (click)=\"step.clickable ? clickCurrentStep(step) : false\">\n                {{ step.name }}\n            </span>\n            @if (!last) {\n                <ap-symbol\n                    symbolId=\"chevron-right\"\n                    size=\"sm\" />\n            }\n        </span>\n    }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;MAaa,gBAAgB,CAAA;IAChB,WAAW,GAAqB,SAAS,CAAC;AAInD,IAAA,KAAK,GAAW,EAAE,CAAC;AACT,IAAA,WAAW,GAAuB,IAAI,YAAY,EAAQ,CAAC;IAErE,SAAS,GAAgC,EAAE,CAAC;IAC5C,YAAY,GAAG,CAAC,CAAC;IAEjB,WAAW,GAAA;AACP,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE;YAC5C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,IAAI,IAAI,CAAC,EAAE,KAAK,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;SACtF;aAAM;AACH,YAAA,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;SACzB;KACJ;AAED,IAAA,gBAAgB,CAAC,IAAU,EAAA;AACvB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC/B;uGArBQ,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,ECb7B,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,aAAA,EAAA,IAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,+7BA0BA,EDfc,MAAA,EAAA,CAAA,4uMAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,eAAe,6FAAE,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAEzB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAR5B,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,YAAY,EAAA,UAAA,EAGV,IAAI,EAAA,OAAA,EACP,CAAC,eAAe,EAAE,OAAO,CAAC,EAAA,QAAA,EAAA,+7BAAA,EAAA,MAAA,EAAA,CAAA,4uMAAA,CAAA,EAAA,CAAA;8BAG1B,WAAW,EAAA,CAAA;sBAAnB,KAAK;gBAIN,KAAK,EAAA,CAAA;sBAHJ,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,QAAQ,EAAE,IAAI;AACjB,qBAAA,CAAA;gBAES,WAAW,EAAA,CAAA;sBAApB,MAAM;;;AEnBX;;AAEG;;;;"}

package/fesm2022/agorapulse-ui-components-tag.mjs

@@ -0,0 +1,42 @@
+import { SymbolRegistry, apDeleteNoCircle, SymbolComponent } from '@agorapulse/ui-symbol';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, EventEmitter, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output } from '@angular/core';
+
+class TagComponent {
+    elementRef = inject(ElementRef);
+    symbolRegistry = inject(SymbolRegistry);
+    constructor() {
+        this.symbolRegistry.registerSymbols([apDeleteNoCircle]);
+    }
+    clearable = false;
+    color = 'blue';
+    mini = false;
+    clear = new EventEmitter();
+    onClear($event) {
+        $event.stopImmediatePropagation();
+        this.elementRef.nativeElement.remove();
+        this.clear.emit({ $event });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: TagComponent, isStandalone: true, selector: "ap-tag", inputs: { clearable: ["clearable", "clearable", booleanAttribute], color: "color", mini: "mini" }, outputs: { clear: "clear" }, ngImport: i0, template: "<div\n    [class.blue]=\"color === 'blue'\"\n    [class.menthol]=\"color === 'menthol'\"\n    [class.grey]=\"color === 'grey'\"\n    [class.tagOrange]=\"color === 'tagOrange'\"\n    [class.green]=\"color === 'green'\"\n    [class.red]=\"color === 'red'\"\n    [class.clearable]=\"clearable\"\n    [class.mini]=\"mini\">\n    <ng-content select=\"ap-symbol\"></ng-content>\n    <ng-content select=\"ap-avatar\"></ng-content>\n\n    <span>\n        <ng-content></ng-content>\n    </span>\n    @if (clearable) {\n        @if (clearable) {\n            <button\n                type=\"button\"\n                class=\"delete-button\"\n                (click)=\"onClear($event)\">\n                <ap-symbol\n                    symbolId=\"delete-no-circle\"\n                    size=\"xs\" />\n            </button>\n        }\n    }\n</div>", styles: ["ap-tag{--avatar-size: 16px;--button-size: 20px;display:inline-flex;vertical-align:middle}ap-tag>div{display:flex;align-items:center;justify-content:center;height:var(--comp-tag-height);max-height:var(--height);box-sizing:border-box;border-width:1px;border-style:solid;padding:0 var(--comp-tag-padding-right) 0 var(--comp-tag-padding-left);border-radius:var(--comp-tag-border-radius);gap:var(--ref-spacing-xxxs)}ap-tag>div.clearable{padding:0 calc(var(--comp-tag-closable-padding-right) - 1px) 0 var(--comp-tag-padding-left)}ap-tag>div.mini{height:var(--comp-tag-mini-height);padding:0 var(--comp-tag-mini-padding-right) 0 var(--comp-tag-mini-padding-left)}ap-tag>div span{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--comp-tag-text-style-size);line-height:var(--comp-tag-text-style-line-height);font-weight:var(--comp-tag-text-style-font-weight);font-family:var(--comp-tag-text-style-font-family)}ap-tag>div ap-avatar{min-width:var(--avatar-size);width:var(--avatar-size);max-width:var(--avatar-size);min-height:var(--avatar-size);height:var(--avatar-size);max-height:var(--avatar-size)}ap-tag>div ap-avatar img{width:var(--avatar-size);height:var(--avatar-size)}ap-tag>div button{display:flex;align-items:center;justify-content:center;border:none;background:transparent;align-self:center;cursor:pointer;max-width:var(--button-size);width:var(--button-size);height:var(--button-size);border-radius:var(--ref-spacing-xxxs)}ap-tag>div button ap-symbol{color:var(--ref-color-grey-80)}ap-tag>div button:hover{background-color:#3445631a}ap-tag>div button:hover ap-symbol{color:var(--ref-color-grey-100)}ap-tag>div button:focus{-webkit-box-shadow:0px 0px 0px 1px var(--ref-color-white),0px 0px 0px 3px var(--ref-color-electric-blue-100);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}ap-tag>div button:active{background-color:#34456333}ap-tag>div button:active ap-symbol{color:var(--ref-color-grey-100)}ap-tag>div.blue{background-color:var(--comp-tag-blue-background-color);border-color:var(--comp-tag-blue-border-color);color:var(--comp-tag-blue-text-color)}ap-tag>div.grey{background-color:var(--comp-tag-grey-background-color);border-color:var(--comp-tag-grey-border-color);color:var(--comp-tag-grey-text-color)}ap-tag>div.tagOrange{background-color:var(--comp-tag-tag-orange-background-color);border-color:var(--comp-tag-tag-orange-border-color);color:var(--comp-tag-tag-orange-text-color)}ap-tag>div.menthol{background-color:var(--comp-tag-menthol-background-color);border-color:var(--comp-tag-menthol-border-color);color:var(--comp-tag-menthol-text-color)}ap-tag>div.green{background-color:var(--comp-tag-green-background-color);border-color:var(--comp-tag-green-border-color);color:var(--comp-tag-green-text-color)}ap-tag>div.red{background-color:var(--comp-tag-red-background-color);border-color:var(--comp-tag-red-border-color);color:var(--comp-tag-red-text-color)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TagComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-tag', standalone: true, imports: [SymbolComponent], encapsulation: ViewEncapsulation.None, template: "<div\n    [class.blue]=\"color === 'blue'\"\n    [class.menthol]=\"color === 'menthol'\"\n    [class.grey]=\"color === 'grey'\"\n    [class.tagOrange]=\"color === 'tagOrange'\"\n    [class.green]=\"color === 'green'\"\n    [class.red]=\"color === 'red'\"\n    [class.clearable]=\"clearable\"\n    [class.mini]=\"mini\">\n    <ng-content select=\"ap-symbol\"></ng-content>\n    <ng-content select=\"ap-avatar\"></ng-content>\n\n    <span>\n        <ng-content></ng-content>\n    </span>\n    @if (clearable) {\n        @if (clearable) {\n            <button\n                type=\"button\"\n                class=\"delete-button\"\n                (click)=\"onClear($event)\">\n                <ap-symbol\n                    symbolId=\"delete-no-circle\"\n                    size=\"xs\" />\n            </button>\n        }\n    }\n</div>", styles: ["ap-tag{--avatar-size: 16px;--button-size: 20px;display:inline-flex;vertical-align:middle}ap-tag>div{display:flex;align-items:center;justify-content:center;height:var(--comp-tag-height);max-height:var(--height);box-sizing:border-box;border-width:1px;border-style:solid;padding:0 var(--comp-tag-padding-right) 0 var(--comp-tag-padding-left);border-radius:var(--comp-tag-border-radius);gap:var(--ref-spacing-xxxs)}ap-tag>div.clearable{padding:0 calc(var(--comp-tag-closable-padding-right) - 1px) 0 var(--comp-tag-padding-left)}ap-tag>div.mini{height:var(--comp-tag-mini-height);padding:0 var(--comp-tag-mini-padding-right) 0 var(--comp-tag-mini-padding-left)}ap-tag>div span{max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--comp-tag-text-style-size);line-height:var(--comp-tag-text-style-line-height);font-weight:var(--comp-tag-text-style-font-weight);font-family:var(--comp-tag-text-style-font-family)}ap-tag>div ap-avatar{min-width:var(--avatar-size);width:var(--avatar-size);max-width:var(--avatar-size);min-height:var(--avatar-size);height:var(--avatar-size);max-height:var(--avatar-size)}ap-tag>div ap-avatar img{width:var(--avatar-size);height:var(--avatar-size)}ap-tag>div button{display:flex;align-items:center;justify-content:center;border:none;background:transparent;align-self:center;cursor:pointer;max-width:var(--button-size);width:var(--button-size);height:var(--button-size);border-radius:var(--ref-spacing-xxxs)}ap-tag>div button ap-symbol{color:var(--ref-color-grey-80)}ap-tag>div button:hover{background-color:#3445631a}ap-tag>div button:hover ap-symbol{color:var(--ref-color-grey-100)}ap-tag>div button:focus{-webkit-box-shadow:0px 0px 0px 1px var(--ref-color-white),0px 0px 0px 3px var(--ref-color-electric-blue-100);box-shadow:0 0 0 1px var(--ref-color-white),0 0 0 3px var(--ref-color-electric-blue-100)}ap-tag>div button:active{background-color:#34456333}ap-tag>div button:active ap-symbol{color:var(--ref-color-grey-100)}ap-tag>div.blue{background-color:var(--comp-tag-blue-background-color);border-color:var(--comp-tag-blue-border-color);color:var(--comp-tag-blue-text-color)}ap-tag>div.grey{background-color:var(--comp-tag-grey-background-color);border-color:var(--comp-tag-grey-border-color);color:var(--comp-tag-grey-text-color)}ap-tag>div.tagOrange{background-color:var(--comp-tag-tag-orange-background-color);border-color:var(--comp-tag-tag-orange-border-color);color:var(--comp-tag-tag-orange-text-color)}ap-tag>div.menthol{background-color:var(--comp-tag-menthol-background-color);border-color:var(--comp-tag-menthol-border-color);color:var(--comp-tag-menthol-text-color)}ap-tag>div.green{background-color:var(--comp-tag-green-background-color);border-color:var(--comp-tag-green-border-color);color:var(--comp-tag-green-text-color)}ap-tag>div.red{background-color:var(--comp-tag-red-background-color);border-color:var(--comp-tag-red-border-color);color:var(--comp-tag-red-text-color)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { clearable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], color: [{
+                type: Input
+            }], mini: [{
+                type: Input
+            }], clear: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TagComponent };
+//# sourceMappingURL=agorapulse-ui-components-tag.mjs.map

package/fesm2022/agorapulse-ui-components-tag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-tag.mjs","sources":["../../../libs/ui-components/tag/src/tag.component.ts","../../../libs/ui-components/tag/src/tag.component.html","../../../libs/ui-components/tag/src/agorapulse-ui-components-tag.ts"],"sourcesContent":["import { SymbolComponent, SymbolRegistry, apDeleteNoCircle } from '@agorapulse/ui-symbol';\n\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    Input,\n    Output,\n    ViewEncapsulation,\n    booleanAttribute,\n    inject,\n} from '@angular/core';\n\nexport type TagColor = 'blue' | 'grey' | 'menthol' | 'tagOrange' | 'red' | 'green';\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-tag',\n    standalone: true,\n    templateUrl: './tag.component.html',\n    imports: [SymbolComponent],\n    styleUrls: ['./tag.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n})\nexport class TagComponent {\n    private readonly elementRef: ElementRef = inject(ElementRef);\n    private readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n\n    constructor() {\n        this.symbolRegistry.registerSymbols([apDeleteNoCircle]);\n    }\n\n    @Input({ transform: booleanAttribute }) clearable: boolean = false;\n    @Input() color: TagColor = 'blue';\n    @Input() mini = false;\n\n    @Output() clear = new EventEmitter<{ $event: MouseEvent | PointerEvent }>();\n\n    onClear($event: MouseEvent | PointerEvent): void {\n        $event.stopImmediatePropagation();\n        this.elementRef.nativeElement.remove();\n        this.clear.emit({ $event });\n    }\n}\n","<div\n    [class.blue]=\"color === 'blue'\"\n    [class.menthol]=\"color === 'menthol'\"\n    [class.grey]=\"color === 'grey'\"\n    [class.tagOrange]=\"color === 'tagOrange'\"\n    [class.green]=\"color === 'green'\"\n    [class.red]=\"color === 'red'\"\n    [class.clearable]=\"clearable\"\n    [class.mini]=\"mini\">\n    <ng-content select=\"ap-symbol\"></ng-content>\n    <ng-content select=\"ap-avatar\"></ng-content>\n\n    <span>\n        <ng-content></ng-content>\n    </span>\n    @if (clearable) {\n        @if (clearable) {\n            <button\n                type=\"button\"\n                class=\"delete-button\"\n                (click)=\"onClear($event)\">\n                <ap-symbol\n                    symbolId=\"delete-no-circle\"\n                    size=\"xs\" />\n            </button>\n        }\n    }\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;MAyBa,YAAY,CAAA;AACJ,IAAA,UAAU,GAAe,MAAM,CAAC,UAAU,CAAC,CAAC;AAC5C,IAAA,cAAc,GAAmB,MAAM,CAAC,cAAc,CAAC,CAAC;AAEzE,IAAA,WAAA,GAAA;QACI,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC;KAC3D;IAEuC,SAAS,GAAY,KAAK,CAAC;IAC1D,KAAK,GAAa,MAAM,CAAC;IACzB,IAAI,GAAG,KAAK,CAAC;AAEZ,IAAA,KAAK,GAAG,IAAI,YAAY,EAAyC,CAAC;AAE5E,IAAA,OAAO,CAAC,MAAiC,EAAA;QACrC,MAAM,CAAC,wBAAwB,EAAE,CAAC;AAClC,QAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;QACvC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;KAC/B;uGAlBQ,YAAY,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAZ,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAY,EAQD,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,EAAA,SAAA,EAAA,CAAA,WAAA,EAAA,WAAA,EAAA,gBAAgB,CCjCxC,EAAA,KAAA,EAAA,OAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,00BA2BM,s8FDNQ,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAIhB,YAAY,EAAA,UAAA,EAAA,CAAA;kBATxB,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EACrC,QAAA,EAAA,QAAQ,EACN,UAAA,EAAA,IAAI,EAEP,OAAA,EAAA,CAAC,eAAe,CAAC,EAEX,aAAA,EAAA,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,00BAAA,EAAA,MAAA,EAAA,CAAA,84FAAA,CAAA,EAAA,CAAA;wDAUG,SAAS,EAAA,CAAA;sBAAhD,KAAK;uBAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAA;gBAC7B,KAAK,EAAA,CAAA;sBAAb,KAAK;gBACG,IAAI,EAAA,CAAA;sBAAZ,KAAK;gBAEI,KAAK,EAAA,CAAA;sBAAd,MAAM;;;AErCX;;AAEG;;;;"}

package/fesm2022/agorapulse-ui-components-text-measurement.mjs

@@ -0,0 +1,36 @@
+import * as i0 from '@angular/core';
+import { Injectable } from '@angular/core';
+
+class TextMeasurementService {
+    textDiv;
+    constructor() {
+        const lDiv = document.createElement('div');
+        document.body.appendChild(lDiv);
+        lDiv.style.color = 'transparent';
+        lDiv.style.position = 'absolute';
+        lDiv.style.left = '-1000';
+        lDiv.style.top = '-1000';
+        this.textDiv = lDiv;
+    }
+    calculateTextWidth(text, fontSize, fontFamily) {
+        this.textDiv.textContent = text;
+        this.textDiv.style.fontSize = fontSize + 'px';
+        this.textDiv.style.fontFamily = fontFamily;
+        return this.textDiv.getBoundingClientRect().width;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TextMeasurementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TextMeasurementService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TextMeasurementService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TextMeasurementService };
+//# sourceMappingURL=agorapulse-ui-components-text-measurement.mjs.map

package/fesm2022/agorapulse-ui-components-text-measurement.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-text-measurement.mjs","sources":["../../../libs/ui-components/text-measurement/src/text-measurement.service.ts","../../../libs/ui-components/text-measurement/src/agorapulse-ui-components-text-measurement.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n    providedIn: 'root',\n})\nexport class TextMeasurementService {\n    private textDiv: HTMLDivElement;\n\n    constructor() {\n        const lDiv = document.createElement('div');\n\n        document.body.appendChild(lDiv);\n        lDiv.style.color = 'transparent';\n        lDiv.style.position = 'absolute';\n        lDiv.style.left = '-1000';\n        lDiv.style.top = '-1000';\n\n        this.textDiv = lDiv;\n    }\n\n    public calculateTextWidth(text: string, fontSize: number, fontFamily: string) {\n        this.textDiv.textContent = text;\n        this.textDiv.style.fontSize = fontSize + 'px';\n        this.textDiv.style.fontFamily = fontFamily;\n        return this.textDiv.getBoundingClientRect().width;\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAKa,sBAAsB,CAAA;AACvB,IAAA,OAAO,CAAiB;AAEhC,IAAA,WAAA,GAAA;QACI,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;AAE3C,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;AAChC,QAAA,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,aAAa,CAAC;AACjC,QAAA,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;AACjC,QAAA,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,OAAO,CAAC;AAC1B,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,OAAO,CAAC;AAEzB,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;KACvB;AAEM,IAAA,kBAAkB,CAAC,IAAY,EAAE,QAAgB,EAAE,UAAkB,EAAA;AACxE,QAAA,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC;QAChC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC;QAC9C,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;QAC3C,OAAO,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;KACrD;uGApBQ,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,sBAAsB,cAFnB,MAAM,EAAA,CAAA,CAAA;;2FAET,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAHlC,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,UAAU,EAAE,MAAM;AACrB,iBAAA,CAAA;;;ACJD;;AAEG;;;;"}

package/fesm2022/agorapulse-ui-components-textarea.mjs

@@ -0,0 +1,44 @@
+import * as i1 from '@agorapulse/ui-components/input';
+import { InputDirective } from '@agorapulse/ui-components/input';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Renderer2, booleanAttribute, Directive, HostBinding, Input } from '@angular/core';
+
+class TextareaDirective {
+    resizable = false;
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    constructor() {
+        const textarea = this.elementRef.nativeElement;
+        if (!textarea.rows || textarea.rows < 3) {
+            textarea.rows = 3;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TextareaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: TextareaDirective, isStandalone: true, selector: "[apTextarea]", inputs: { resizable: ["resizable", "resizable", booleanAttribute] }, host: { properties: { "class.resizable": "this.resizable" }, classAttribute: "ap-textarea" }, hostDirectives: [{ directive: i1.InputDirective }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: TextareaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[apTextarea]',
+                    standalone: true,
+                    hostDirectives: [InputDirective],
+                    host: {
+                        class: 'ap-textarea',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { resizable: [{
+                type: HostBinding,
+                args: ['class.resizable']
+            }, {
+                type: Input,
+                args: [{
+                        transform: booleanAttribute,
+                    }]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TextareaDirective };
+//# sourceMappingURL=agorapulse-ui-components-textarea.mjs.map

package/fesm2022/agorapulse-ui-components-textarea.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-textarea.mjs","sources":["../../../libs/ui-components/textarea/src/textarea.directive.ts","../../../libs/ui-components/textarea/src/agorapulse-ui-components-textarea.ts"],"sourcesContent":["import { InputDirective } from '@agorapulse/ui-components/input';\nimport { Directive, ElementRef, HostBinding, Input, Renderer2, booleanAttribute, inject } from '@angular/core';\n\n@Directive({\n    selector: '[apTextarea]',\n    standalone: true,\n    hostDirectives: [InputDirective],\n    host: {\n        class: 'ap-textarea',\n    },\n})\nexport class TextareaDirective {\n    @HostBinding('class.resizable')\n    @Input({\n        transform: booleanAttribute,\n    })\n    resizable: boolean = false;\n\n    private elementRef = inject(ElementRef);\n    private renderer = inject(Renderer2);\n\n    constructor() {\n        const textarea = this.elementRef.nativeElement as HTMLTextAreaElement;\n        if (!textarea.rows || textarea.rows < 3) {\n            textarea.rows = 3;\n        }\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;MAWa,iBAAiB,CAAA;IAK1B,SAAS,GAAY,KAAK,CAAC;AAEnB,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AAChC,IAAA,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;AAErC,IAAA,WAAA,GAAA;AACI,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAoC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,GAAG,CAAC,EAAE;AACrC,YAAA,QAAQ,CAAC,IAAI,GAAG,CAAC,CAAC;SACrB;KACJ;uGAfQ,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAjB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,iBAAiB,gGAGX,gBAAgB,CAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,EAAA,cAAA,EAAA,aAAA,EAAA,EAAA,cAAA,EAAA,CAAA,EAAA,SAAA,EAAA,EAAA,CAAA,cAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAHtB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAR7B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,cAAc;AACxB,oBAAA,UAAU,EAAE,IAAI;oBAChB,cAAc,EAAE,CAAC,cAAc,CAAC;AAChC,oBAAA,IAAI,EAAE;AACF,wBAAA,KAAK,EAAE,aAAa;AACvB,qBAAA;AACJ,iBAAA,CAAA;wDAMG,SAAS,EAAA,CAAA;sBAJR,WAAW;uBAAC,iBAAiB,CAAA;;sBAC7B,KAAK;AAAC,gBAAA,IAAA,EAAA,CAAA;AACH,wBAAA,SAAS,EAAE,gBAAgB;AAC9B,qBAAA,CAAA;;;ACfL;;AAEG;;;;"}

package/fesm2022/agorapulse-ui-components-toggle.mjs

@@ -0,0 +1,215 @@
+import * as i0 from '@angular/core';
+import { forwardRef, inject, ChangeDetectorRef, EventEmitter, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, Input, Output } from '@angular/core';
+import { ConfirmModalComponent } from '@agorapulse/ui-components/confirm-modal';
+import { SymbolRegistry, apCheck, SymbolComponent } from '@agorapulse/ui-symbol';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { first } from 'rxjs/operators';
+
+const AP_CHECKBOX_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => ToggleComponent),
+    multi: true,
+};
+class ToggleComponent {
+    symbolRegistry = inject(SymbolRegistry);
+    dialog = inject(MatDialog);
+    cdr = inject(ChangeDetectorRef);
+    inputElement;
+    labelElement;
+    ariaLabel = '';
+    ariaLabelledby = null;
+    ariaDescribedby = null;
+    labelPosition = 'right';
+    disabled = false;
+    checked = false;
+    required = false;
+    confirm = false;
+    confirmMessage = 'If you toggle this, it will affect other things. Are you sure';
+    confirmOk = 'Confirm';
+    confirmCancel = 'Cancel';
+    confirmTitle = 'Are you sure?';
+    set name(name) {
+        if (!name.endsWith('Checkbox')) {
+            this._name = name + 'Checkbox';
+        }
+        else {
+            this._name = name;
+        }
+    }
+    get name() {
+        return this._name;
+    }
+    // eslint-disable-next-line
+    change = new EventEmitter();
+    hasLabel = false;
+    _name = '';
+    _controlValueAccessorChangeFn;
+    onTouched;
+    ngOnChanges() {
+        if (this.labelElement) {
+            this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();
+        }
+    }
+    ngOnInit() {
+        this.symbolRegistry.registerSymbols([apCheck]);
+    }
+    ngAfterContentInit() {
+        if (this.labelElement) {
+            this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();
+        }
+    }
+    onValueChange() {
+        if (!this.disabled) {
+            if (!this.confirm) {
+                if (this.onTouched) {
+                    this.onTouched();
+                }
+                this.changeValue();
+            }
+            else {
+                const toggleConfirmModal = {
+                    contentText: this.confirmMessage,
+                    headerTitle: this.confirmTitle,
+                    footerCancelButtonLabel: this.confirmCancel,
+                    footerConfirmButtonLabel: this.confirmOk,
+                    footerConfirmButtonId: 'confirm',
+                    footerCancelButtonId: 'cancel',
+                };
+                const modalConfig = {
+                    matDialogConfig: {
+                        panelClass: 'design-system',
+                        width: '550px',
+                    },
+                };
+                const dialogRef = ConfirmModalComponent.open(this.dialog, toggleConfirmModal, modalConfig);
+                dialogRef
+                    .afterClosed()
+                    .pipe(first())
+                    .subscribe(result => {
+                    if (result) {
+                        if (this.onTouched) {
+                            this.onTouched();
+                        }
+                        this.changeValue();
+                    }
+                });
+            }
+        }
+    }
+    changeValue() {
+        this.checked = !this.checked;
+        this.focus();
+        this.change.emit(this.checked);
+        if (this._controlValueAccessorChangeFn) {
+            this._controlValueAccessorChangeFn(this.checked);
+        }
+        // Assigning the value again here is redundant, but we have to do it in case it was
+        // changed inside the `change` listener which will cause the input to be out of sync.
+        if (this.inputElement) {
+            this.inputElement.nativeElement.checked = this.checked;
+        }
+        this.cdr.markForCheck();
+    }
+    focus() {
+        this.inputElement.nativeElement.focus();
+    }
+    writeValue(value) {
+        this.checked = value;
+    }
+    registerOnChange(fn) {
+        this._controlValueAccessorChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    validate({ value }) {
+        return (this.required &&
+            !value && {
+            invalid: true,
+        });
+    }
+    _preventBubblingFromLabel(event) {
+        if (!!event.target && this.labelElement.nativeElement.contains(event.target)) {
+            event.stopPropagation();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "17.3.3", type: ToggleComponent, isStandalone: true, selector: "ap-toggle", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], ariaDescribedby: ["aria-describedby", "ariaDescribedby"], labelPosition: "labelPosition", disabled: ["disabled", "disabled", booleanAttribute], checked: "checked", required: ["required", "required", booleanAttribute], confirm: "confirm", confirmMessage: "confirmMessage", confirmOk: "confirmOk", confirmCancel: "confirmCancel", confirmTitle: "confirmTitle", name: "name" }, outputs: { change: "change" }, providers: [
+            AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,
+            {
+                provide: NG_VALIDATORS,
+                useExisting: ToggleComponent,
+                multi: true,
+            },
+            MatDialog,
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "labelElement", first: true, predicate: ["label"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"toggle\"\n    (click)=\"_preventBubblingFromLabel($event)\">\n    <input\n        #input\n        class=\"hidden\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [id]=\"name\"\n        [name]=\"name\"\n        [checked]=\"checked\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [attr.data-test]=\"name\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-checked]=\"checked\"\n        (click)=\"onValueChange()\" />\n    <div\n        class=\"switch-container\"\n        [class.label-left]=\"labelPosition === 'left'\">\n        <div\n            class=\"switch\"\n            [class.checked]=\"checked\"\n            (click)=\"onValueChange()\">\n            <div class=\"knob\"></div>\n        </div>\n        <label\n            #label\n            [class.disabled]=\"disabled\"\n            [for]=\"name\">\n            <ng-content />\n        </label>\n    </div>\n</div>\n", styles: ["ap-toggle{position:relative}ap-toggle .toggle{display:flex;gap:8px;align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100)}ap-toggle .toggle input.hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}ap-toggle .toggle input[type=checkbox]{margin:0;padding:0;width:0;height:0;transform:scale(0)}@media (hover: hover){ap-toggle .toggle input[type=checkbox]:focus:not(.disabled)~.switch-container .switch{outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-toggle .toggle input[type=checkbox]:disabled~.switch-container .switch{background:var(--ref-color-grey-20);pointer-events:none;cursor:default}ap-toggle .toggle .switch-container{display:flex;gap:var(--ref-spacing-xs);align-items:center}ap-toggle .toggle .switch-container.label-left{flex-direction:row-reverse}ap-toggle .toggle .switch-container .switch{box-sizing:content-box;position:relative;display:flex;align-items:center;padding:2px;width:28px;height:12px;border-radius:16px;background:var(--ref-color-grey-40);transition:background-color .25s}ap-toggle .toggle .switch-container .switch:hover{cursor:pointer;background:var(--ref-color-grey-60)}ap-toggle .toggle .switch-container .switch:active:not(.checked){background:var(--ref-color-grey-80)}ap-toggle .toggle .switch-container .switch.checked{background:var(--ref-color-electric-blue-100)}ap-toggle .toggle .switch-container .switch.checked:active{background:var(--ref-color-electric-blue-60)}ap-toggle .toggle .switch-container .switch.checked .knob{left:18px}ap-toggle .toggle .switch-container .switch .knob{width:12px;height:12px;background:#fff;border-radius:100%;position:absolute;transition:left .25s;left:2px}ap-toggle .toggle .switch-container label{display:flex;align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height)}ap-toggle .toggle .switch-container label:empty{display:none}ap-toggle .toggle .switch-container label.disabled{color:var(--ref-color-grey-60)}ap-toggle .toggle .switch-container label:hover:not(.disabled){cursor:pointer}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ToggleComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-toggle', standalone: true, imports: [SymbolComponent], providers: [
+                        AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: ToggleComponent,
+                            multi: true,
+                        },
+                        MatDialog,
+                    ], encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"toggle\"\n    (click)=\"_preventBubblingFromLabel($event)\">\n    <input\n        #input\n        class=\"hidden\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [id]=\"name\"\n        [name]=\"name\"\n        [checked]=\"checked\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [attr.data-test]=\"name\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-checked]=\"checked\"\n        (click)=\"onValueChange()\" />\n    <div\n        class=\"switch-container\"\n        [class.label-left]=\"labelPosition === 'left'\">\n        <div\n            class=\"switch\"\n            [class.checked]=\"checked\"\n            (click)=\"onValueChange()\">\n            <div class=\"knob\"></div>\n        </div>\n        <label\n            #label\n            [class.disabled]=\"disabled\"\n            [for]=\"name\">\n            <ng-content />\n        </label>\n    </div>\n</div>\n", styles: ["ap-toggle{position:relative}ap-toggle .toggle{display:flex;gap:8px;align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);line-height:var(--sys-text-style-body-line-height);color:var(--ref-color-grey-100)}ap-toggle .toggle input.hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}ap-toggle .toggle input[type=checkbox]{margin:0;padding:0;width:0;height:0;transform:scale(0)}@media (hover: hover){ap-toggle .toggle input[type=checkbox]:focus:not(.disabled)~.switch-container .switch{outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-toggle .toggle input[type=checkbox]:disabled~.switch-container .switch{background:var(--ref-color-grey-20);pointer-events:none;cursor:default}ap-toggle .toggle .switch-container{display:flex;gap:var(--ref-spacing-xs);align-items:center}ap-toggle .toggle .switch-container.label-left{flex-direction:row-reverse}ap-toggle .toggle .switch-container .switch{box-sizing:content-box;position:relative;display:flex;align-items:center;padding:2px;width:28px;height:12px;border-radius:16px;background:var(--ref-color-grey-40);transition:background-color .25s}ap-toggle .toggle .switch-container .switch:hover{cursor:pointer;background:var(--ref-color-grey-60)}ap-toggle .toggle .switch-container .switch:active:not(.checked){background:var(--ref-color-grey-80)}ap-toggle .toggle .switch-container .switch.checked{background:var(--ref-color-electric-blue-100)}ap-toggle .toggle .switch-container .switch.checked:active{background:var(--ref-color-electric-blue-60)}ap-toggle .toggle .switch-container .switch.checked .knob{left:18px}ap-toggle .toggle .switch-container .switch .knob{width:12px;height:12px;background:#fff;border-radius:100%;position:absolute;transition:left .25s;left:2px}ap-toggle .toggle .switch-container label{display:flex;align-items:center;font-family:var(--sys-text-style-body-font-family);font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height)}ap-toggle .toggle .switch-container label:empty{display:none}ap-toggle .toggle .switch-container label.disabled{color:var(--ref-color-grey-60)}ap-toggle .toggle .switch-container label:hover:not(.disabled){cursor:pointer}\n"] }]
+        }], propDecorators: { inputElement: [{
+                type: ViewChild,
+                args: ['input']
+            }], labelElement: [{
+                type: ViewChild,
+                args: ['label']
+            }], ariaLabel: [{
+                type: Input,
+                args: ['aria-label']
+            }], ariaLabelledby: [{
+                type: Input,
+                args: ['aria-labelledby']
+            }], ariaDescribedby: [{
+                type: Input,
+                args: ['aria-describedby']
+            }], labelPosition: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{
+                        transform: booleanAttribute,
+                    }]
+            }], checked: [{
+                type: Input
+            }], required: [{
+                type: Input,
+                args: [{
+                        transform: booleanAttribute,
+                    }]
+            }], confirm: [{
+                type: Input
+            }], confirmMessage: [{
+                type: Input
+            }], confirmOk: [{
+                type: Input
+            }], confirmCancel: [{
+                type: Input
+            }], confirmTitle: [{
+                type: Input
+            }], name: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], change: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AP_CHECKBOX_CONTROL_VALUE_ACCESSOR, ToggleComponent };
+//# sourceMappingURL=agorapulse-ui-components-toggle.mjs.map

package/fesm2022/agorapulse-ui-components-toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-toggle.mjs","sources":["../../../libs/ui-components/toggle/src/toggle.component.ts","../../../libs/ui-components/toggle/src/toggle.component.html","../../../libs/ui-components/toggle/src/agorapulse-ui-components-toggle.ts"],"sourcesContent":["import {\n    AfterContentInit,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    inject,\n    Input,\n    OnChanges,\n    OnInit,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n} from '@angular/core';\n\nimport { ConfirmModalComponent } from '@agorapulse/ui-components/confirm-modal';\nimport { apCheck, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { ControlValueAccessor, FormControl, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { MatDialog } from '@angular/material/dialog';\nimport { first } from 'rxjs/operators';\n\nexport const AP_CHECKBOX_CONTROL_VALUE_ACCESSOR = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => ToggleComponent),\n    multi: true,\n};\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-toggle',\n    styleUrls: ['./toggle.component.scss'],\n    standalone: true,\n    imports: [SymbolComponent],\n    providers: [\n        AP_CHECKBOX_CONTROL_VALUE_ACCESSOR,\n        {\n            provide: NG_VALIDATORS,\n            useExisting: ToggleComponent,\n            multi: true,\n        },\n        MatDialog,\n    ],\n    templateUrl: './toggle.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class ToggleComponent implements ControlValueAccessor, AfterContentInit, OnChanges, OnInit {\n    private readonly symbolRegistry = inject(SymbolRegistry);\n    private readonly dialog = inject(MatDialog);\n    private readonly cdr = inject(ChangeDetectorRef);\n\n    @ViewChild('input') inputElement!: ElementRef<HTMLInputElement>;\n    @ViewChild('label') labelElement!: ElementRef<HTMLInputElement>;\n    @Input('aria-label') ariaLabel: string = '';\n    @Input('aria-labelledby') ariaLabelledby: string | null = null;\n    @Input('aria-describedby') ariaDescribedby: string | null = null;\n    @Input() labelPosition: 'left' | 'right' = 'right';\n    @Input({\n        transform: booleanAttribute,\n    })\n    disabled = false;\n    @Input() checked = false;\n    @Input({\n        transform: booleanAttribute,\n    })\n    required = false;\n    @Input() confirm = false;\n    @Input() confirmMessage = 'If you toggle this, it will affect other things. Are you sure';\n    @Input() confirmOk = 'Confirm';\n    @Input() confirmCancel = 'Cancel';\n    @Input() confirmTitle = 'Are you sure?';\n    @Input({\n        required: true,\n    })\n    set name(name: string) {\n        if (!name.endsWith('Checkbox')) {\n            this._name = name + 'Checkbox';\n        } else {\n            this._name = name;\n        }\n    }\n    get name(): string {\n        return this._name;\n    }\n    // eslint-disable-next-line\n    @Output() readonly change: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    hasLabel: boolean = false;\n    private _name = '';\n    private _controlValueAccessorChangeFn!: (value: boolean) => void;\n    onTouched!: () => void;\n\n    ngOnChanges(): void {\n        if (this.labelElement) {\n            this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n        }\n    }\n\n    ngOnInit() {\n        this.symbolRegistry.registerSymbols([apCheck]);\n    }\n\n    ngAfterContentInit(): void {\n        if (this.labelElement) {\n            this.hasLabel = !!this.labelElement.nativeElement.textContent?.trim();\n        }\n    }\n\n    onValueChange() {\n        if (!this.disabled) {\n            if (!this.confirm) {\n                if (this.onTouched) {\n                    this.onTouched();\n                }\n                this.changeValue();\n            } else {\n                const toggleConfirmModal = {\n                    contentText: this.confirmMessage,\n                    headerTitle: this.confirmTitle,\n                    footerCancelButtonLabel: this.confirmCancel,\n                    footerConfirmButtonLabel: this.confirmOk,\n                    footerConfirmButtonId: 'confirm',\n                    footerCancelButtonId: 'cancel',\n                };\n                const modalConfig = {\n                    matDialogConfig: {\n                        panelClass: 'design-system',\n                        width: '550px',\n                    },\n                };\n\n                const dialogRef = ConfirmModalComponent.open(this.dialog, toggleConfirmModal, modalConfig);\n                dialogRef\n                    .afterClosed()\n                    .pipe(first())\n                    .subscribe(result => {\n                        if (result) {\n                            if (this.onTouched) {\n                                this.onTouched();\n                            }\n                            this.changeValue();\n                        }\n                    });\n            }\n        }\n    }\n\n    changeValue(): void {\n        this.checked = !this.checked;\n        this.focus();\n        this.change.emit(this.checked);\n        if (this._controlValueAccessorChangeFn) {\n            this._controlValueAccessorChangeFn(this.checked);\n        }\n\n        // Assigning the value again here is redundant, but we have to do it in case it was\n        // changed inside the `change` listener which will cause the input to be out of sync.\n        if (this.inputElement) {\n            this.inputElement.nativeElement.checked = this.checked;\n        }\n        this.cdr.markForCheck();\n    }\n\n    focus() {\n        this.inputElement.nativeElement.focus();\n    }\n\n    writeValue(value: boolean): void {\n        this.checked = value;\n    }\n    registerOnChange(fn: (value: boolean) => void): void {\n        this._controlValueAccessorChangeFn = fn;\n    }\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    validate({ value }: FormControl) {\n        return (\n            this.required &&\n            !value && {\n                invalid: true,\n            }\n        );\n    }\n\n    _preventBubblingFromLabel(event: MouseEvent) {\n        if (!!event.target && this.labelElement.nativeElement.contains(event.target as HTMLElement)) {\n            event.stopPropagation();\n        }\n    }\n}\n","<div\n    class=\"toggle\"\n    (click)=\"_preventBubblingFromLabel($event)\">\n    <input\n        #input\n        class=\"hidden\"\n        type=\"checkbox\"\n        role=\"switch\"\n        [id]=\"name\"\n        [name]=\"name\"\n        [checked]=\"checked\"\n        [required]=\"required\"\n        [disabled]=\"disabled\"\n        [attr.data-test]=\"name\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-describedby]=\"ariaDescribedby\"\n        [attr.aria-checked]=\"checked\"\n        (click)=\"onValueChange()\" />\n    <div\n        class=\"switch-container\"\n        [class.label-left]=\"labelPosition === 'left'\">\n        <div\n            class=\"switch\"\n            [class.checked]=\"checked\"\n            (click)=\"onValueChange()\">\n            <div class=\"knob\"></div>\n        </div>\n        <label\n            #label\n            [class.disabled]=\"disabled\"\n            [for]=\"name\">\n            <ng-content />\n        </label>\n    </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}