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

package/fesm2022/agorapulse-ui-components-form-message.mjs

@@ -0,0 +1,41 @@
+import { SymbolRegistry, apErrorFill, apRoundedCheckFill, SymbolComponent } from '@agorapulse/ui-symbol';
+import * as i0 from '@angular/core';
+import { signal, computed, inject, Component, ChangeDetectionStrategy, ViewEncapsulation, Input } from '@angular/core';
+
+class FormMessageComponent {
+    set messageType(messageType) {
+        this.messageTypeSignal.set(messageType);
+    }
+    message;
+    messageTypeSignal = signal('error');
+    symbolIdSignal = computed(() => {
+        return this.messageTypeSignal() === 'error' ? 'error_fill' : 'rounded-check_fill';
+    });
+    symbolRegistry = inject(SymbolRegistry);
+    constructor() {
+        this.symbolRegistry.registerSymbols([apErrorFill, apRoundedCheckFill]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: FormMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: FormMessageComponent, isStandalone: true, selector: "ap-form-message", inputs: { messageType: "messageType", message: "message" }, host: { properties: { "class.error": "messageTypeSignal() === 'error'", "class.success": "messageTypeSignal() === 'success'" }, classAttribute: "ap-form-message" }, ngImport: i0, template: "<ap-symbol\n    size=\"sm\"\n    [symbolId]=\"symbolIdSignal()\" />\n<span>\n    {{ message }}\n</span>\n", styles: [".ap-form-message{font-size:var(--comp-forms-status-text-size);font-weight:var(--comp-forms-status-text-font-weight);line-height:var(--comp-forms-status-text-line-height);font-family:var(--comp-forms-status-text-font-family);margin:0;display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ap-form-message.error{color:var(--comp-forms-status-text-error-color)}.ap-form-message.error ap-symbol{color:var(--comp-forms-status-icon-error-color)}.ap-form-message.success{color:var(--comp-forms-status-text-success-color)}.ap-form-message.success ap-symbol{color:var(--ref-color-green-150)}\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: FormMessageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-form-message', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent], host: {
+                        class: 'ap-form-message',
+                        '[class.error]': "messageTypeSignal() === 'error'",
+                        '[class.success]': "messageTypeSignal() === 'success'",
+                    }, template: "<ap-symbol\n    size=\"sm\"\n    [symbolId]=\"symbolIdSignal()\" />\n<span>\n    {{ message }}\n</span>\n", styles: [".ap-form-message{font-size:var(--comp-forms-status-text-size);font-weight:var(--comp-forms-status-text-font-weight);line-height:var(--comp-forms-status-text-line-height);font-family:var(--comp-forms-status-text-font-family);margin:0;display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ap-form-message.error{color:var(--comp-forms-status-text-error-color)}.ap-form-message.error ap-symbol{color:var(--comp-forms-status-icon-error-color)}.ap-form-message.success{color:var(--comp-forms-status-text-success-color)}.ap-form-message.success ap-symbol{color:var(--ref-color-green-150)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { messageType: [{
+                type: Input,
+                args: [{ required: true }]
+            }], message: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FormMessageComponent };
+//# sourceMappingURL=agorapulse-ui-components-form-message.mjs.map

package/fesm2022/agorapulse-ui-components-form-message.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-form-message.mjs","sources":["../../../libs/ui-components/form-message/src/form-message.component.ts","../../../libs/ui-components/form-message/src/form-message.component.html","../../../libs/ui-components/form-message/src/agorapulse-ui-components-form-message.ts"],"sourcesContent":["import { SymbolComponent, SymbolRegistry, apErrorFill, apRoundedCheckFill } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, computed, inject, signal } from '@angular/core';\n\nexport type MessageType = 'error' | 'success';\n\n@Component({\n    selector: 'ap-form-message',\n    templateUrl: './form-message.component.html',\n    styleUrls: ['./form-message.component.scss'],\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [SymbolComponent],\n    host: {\n        class: 'ap-form-message',\n        '[class.error]': \"messageTypeSignal() === 'error'\",\n        '[class.success]': \"messageTypeSignal() === 'success'\",\n    },\n})\nexport class FormMessageComponent {\n    @Input({ required: true })\n    set messageType(messageType: MessageType) {\n        this.messageTypeSignal.set(messageType);\n    }\n\n    @Input({ required: true })\n    message!: string;\n\n    messageTypeSignal = signal<MessageType>('error');\n\n    symbolIdSignal = computed(() => {\n        return this.messageTypeSignal() === 'error' ? 'error_fill' : 'rounded-check_fill';\n    });\n\n    private symbolRegistry = inject(SymbolRegistry);\n\n    constructor() {\n        this.symbolRegistry.registerSymbols([apErrorFill, apRoundedCheckFill]);\n    }\n}\n","<ap-symbol\n    size=\"sm\"\n    [symbolId]=\"symbolIdSignal()\" />\n<span>\n    {{ message }}\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;MAmBa,oBAAoB,CAAA;IAC7B,IACI,WAAW,CAAC,WAAwB,EAAA;AACpC,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;KAC3C;AAGD,IAAA,OAAO,CAAU;AAEjB,IAAA,iBAAiB,GAAG,MAAM,CAAc,OAAO,CAAC,CAAC;AAEjD,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;AAC3B,QAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE,KAAK,OAAO,GAAG,YAAY,GAAG,oBAAoB,CAAC;AACtF,KAAC,CAAC,CAAC;AAEK,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AAEhD,IAAA,WAAA,GAAA;QACI,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC,CAAC;KAC1E;uGAnBQ,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;2FAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,aAAA,EAAA,iCAAA,EAAA,eAAA,EAAA,mCAAA,EAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnBjC,2GAMA,EAAA,MAAA,EAAA,CAAA,glBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDMc,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;;2FAOhB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAdhC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAGf,UAAA,EAAA,IAAI,EACC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B,CAAC,eAAe,CAAC,EACpB,IAAA,EAAA;AACF,wBAAA,KAAK,EAAE,iBAAiB;AACxB,wBAAA,eAAe,EAAE,iCAAiC;AAClD,wBAAA,iBAAiB,EAAE,mCAAmC;AACzD,qBAAA,EAAA,QAAA,EAAA,2GAAA,EAAA,MAAA,EAAA,CAAA,glBAAA,CAAA,EAAA,CAAA;wDAIG,WAAW,EAAA,CAAA;sBADd,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;gBAMzB,OAAO,EAAA,CAAA;sBADN,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;;;AEzB7B;;AAEG;;;;"}

package/fesm2022/agorapulse-ui-components-icon-button.mjs

@@ -0,0 +1,131 @@
+import * as i1 from '@agorapulse/ui-symbol';
+import { apPremiumStar, SymbolComponent } from '@agorapulse/ui-symbol';
+import * as i0 from '@angular/core';
+import { EventEmitter, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Output, ContentChild, ViewChild, HostListener } from '@angular/core';
+import * as i2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+
+// import { LoaderComponent } from '@agorapulse/ui-animations';
+class IconButtonComponent {
+    symbolRegistry;
+    elementRef;
+    ariaLabel = '';
+    name = '';
+    color = 'none';
+    disabled = false;
+    menuTrigger = null;
+    set locked(locked) {
+        this._locked = locked;
+        if (locked) {
+            this.color = 'none';
+            this.disabled = false;
+            this.loading = false;
+        }
+    }
+    get locked() {
+        return this._locked;
+    }
+    set loading(loading) {
+        if (!this.locked) {
+            this._loading = loading;
+        }
+    }
+    get loading() {
+        return this._loading;
+    }
+    type = 'flat';
+    // eslint-disable-next-line
+    onClick = new EventEmitter();
+    // eslint-disable-next-line
+    onFocus = new EventEmitter();
+    // eslint-disable-next-line
+    onBlur = new EventEmitter();
+    menuOpened = new EventEmitter();
+    menuClosed = new EventEmitter();
+    symbolComponent;
+    buttonElement;
+    _loading = false;
+    _locked = false;
+    hostDataTest = undefined;
+    focused = false;
+    constructor(symbolRegistry, elementRef) {
+        this.symbolRegistry = symbolRegistry;
+        this.elementRef = elementRef;
+        this.symbolRegistry.registerSymbols([apPremiumStar]);
+        this.hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');
+    }
+    onClickHandle($event) {
+        this.buttonElement.nativeElement.blur();
+        this.onClick.emit($event);
+        this.onFocus.emit($event);
+    }
+    onBlurHandle($event) {
+        this.focused = false;
+        this.onBlur.emit($event);
+    }
+    onFocusHandle($event) {
+        this.focused = true;
+        this.onFocus.emit($event);
+    }
+    onSpaceKeyUp(event) {
+        if (this.focused) {
+            event.preventDefault();
+            this.buttonElement.nativeElement.click();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: IconButtonComponent, deps: [{ token: i1.SymbolRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: IconButtonComponent, isStandalone: true, selector: "ap-icon-button", inputs: { ariaLabel: "ariaLabel", name: "name", color: "color", disabled: ["disabled", "disabled", booleanAttribute], menuTrigger: "menuTrigger", locked: "locked", loading: "loading", type: "type" }, outputs: { onClick: "onClick", onFocus: "onFocus", onBlur: "onBlur", menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { listeners: { "window:keyup.space": "onSpaceKeyUp($event)" } }, queries: [{ propertyName: "symbolComponent", first: true, predicate: SymbolComponent, descendants: true }], viewQueries: [{ propertyName: "buttonElement", first: true, predicate: ["button"], descendants: true }], ngImport: i0, template: "<button\n    #button\n    #trigger=\"matMenuTrigger\"\n    class=\"icon-button\"\n    type=\"button\"\n    [name]=\"name\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.data-test]=\"hostDataTest ?? name\"\n    [disabled]=\"disabled\"\n    [class.blue]=\"color === 'blue'\"\n    [class.green]=\"color === 'green'\"\n    [class.red]=\"color === 'red'\"\n    [class.flat]=\"type === 'flat'\"\n    [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n    [class.transparent]=\"type === 'stroked-transparent'\"\n    [class.loading]=\"loading\"\n    [class.locked]=\"locked\"\n    (click)=\"onClickHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    @if (!loading) {\n        <ng-content />\n    }\n    @if (loading) {\n        <!-- <ap-loader\n            color=\"white\"\n            [diameter]=\"16\" /> -->\n    }\n    @if (locked) {\n        <div class=\"locked-symbol\">\n            <ap-symbol\n                symbolId=\"premium-star\"\n                size=\"sm\" />\n        </div>\n    }\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button[disabled]{pointer-events:none}ap-icon-button button.icon-button{margin:0;display:flex;justify-content:center;align-items:center;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;position:relative;transition:border .25s;padding:var(--comp-icon-button-padding)}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:inline-flex;justify-content:center;align-items:center;width:100%;height:100%;padding:0;margin:0;color:var(--ref-color-grey-60);min-width:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2);min-height:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2)}ap-icon-button button.icon-button ap-symbol .svg{display:inline-flex!important;justify-content:center;align-items:center}ap-icon-button button.icon-button ap-symbol .svg svg{height:100%;width:100%}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:#fff}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "ngmodule", type: 
+                // LoaderComponent,
+                MatMenuModule }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: IconButtonComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-icon-button', standalone: true, imports: [SymbolComponent,
+                        // LoaderComponent,
+                        MatMenuModule], encapsulation: ViewEncapsulation.None, template: "<button\n    #button\n    #trigger=\"matMenuTrigger\"\n    class=\"icon-button\"\n    type=\"button\"\n    [name]=\"name\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.data-test]=\"hostDataTest ?? name\"\n    [disabled]=\"disabled\"\n    [class.blue]=\"color === 'blue'\"\n    [class.green]=\"color === 'green'\"\n    [class.red]=\"color === 'red'\"\n    [class.flat]=\"type === 'flat'\"\n    [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n    [class.transparent]=\"type === 'stroked-transparent'\"\n    [class.loading]=\"loading\"\n    [class.locked]=\"locked\"\n    (click)=\"onClickHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    @if (!loading) {\n        <ng-content />\n    }\n    @if (loading) {\n        <!-- <ap-loader\n            color=\"white\"\n            [diameter]=\"16\" /> -->\n    }\n    @if (locked) {\n        <div class=\"locked-symbol\">\n            <ap-symbol\n                symbolId=\"premium-star\"\n                size=\"sm\" />\n        </div>\n    }\n</button>\n", styles: ["ap-icon-button{display:flex;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height)}ap-icon-button[disabled]{pointer-events:none}ap-icon-button button.icon-button{margin:0;display:flex;justify-content:center;align-items:center;width:var(--comp-icon-button-width);max-width:var(--comp-icon-button-width);height:var(--comp-icon-button-height);max-height:var(--comp-icon-button-height);border-radius:var(--comp-icon-button-border-radius);background:transparent;border:none;position:relative;transition:border .25s;padding:var(--comp-icon-button-padding)}@media (hover: hover){ap-icon-button button.icon-button:focus:not(.disabled):not(:active){outline:2px solid var(--ref-color-electric-blue-100);outline-offset:1px}}ap-icon-button button.icon-button:hover{cursor:pointer}ap-icon-button button.icon-button:hover:not(.stroked):not(.locked){background:var(--ref-color-grey-05)}ap-icon-button button.icon-button:active:not(.stroked):not(.locked){background:var(--ref-color-grey-10)}ap-icon-button button.icon-button ap-symbol{display:inline-flex;justify-content:center;align-items:center;width:100%;height:100%;padding:0;margin:0;color:var(--ref-color-grey-60);min-width:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2);min-height:calc(var(--comp-icon-button-height) - var(--comp-icon-button-padding) * 2)}ap-icon-button button.icon-button ap-symbol .svg{display:inline-flex!important;justify-content:center;align-items:center}ap-icon-button button.icon-button ap-symbol .svg svg{height:100%;width:100%}ap-icon-button button.icon-button:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button:disabled ap-symbol{color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.blue:hover{cursor:pointer}ap-icon-button button.icon-button.blue:hover:not(.stroked){background:var(--ref-color-electric-blue-05)}ap-icon-button button.icon-button.blue:active:not(.stroked){background:var(--ref-color-electric-blue-10)}ap-icon-button button.icon-button.blue:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.blue:disabled ap-symbol{color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.blue ap-symbol{color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.green:hover{cursor:pointer}ap-icon-button button.icon-button.green:hover:not(.stroked){background:var(--ref-color-green-10)}ap-icon-button button.icon-button.green:active:not(.stroked){background:var(--ref-color-green-20)}ap-icon-button button.icon-button.green:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.green:disabled ap-symbol{color:var(--ref-color-green-20)}ap-icon-button button.icon-button.green ap-symbol{color:var(--ref-color-green-100)}ap-icon-button button.icon-button.red:hover{cursor:pointer}ap-icon-button button.icon-button.red:hover:not(.stroked){background:var(--ref-color-red-10)}ap-icon-button button.icon-button.red:active:not(.stroked){background:var(--ref-color-red-20)}ap-icon-button button.icon-button.red:disabled{cursor:default;pointer-events:none}ap-icon-button button.icon-button.red:disabled ap-symbol{color:var(--ref-color-red-20)}ap-icon-button button.icon-button.red ap-symbol{color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked{border-width:1px;border-style:solid;background:#fff}ap-icon-button button.icon-button.stroked:not(.loading):not(.locked){border-color:var(--ref-color-grey-20)}ap-icon-button button.icon-button.stroked:hover:not(.locked){border-color:var(--ref-color-grey-40)}ap-icon-button button.icon-button.stroked:active:not(.locked){border-color:var(--ref-color-grey-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-electric-blue-60)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):disabled{border-color:var(--ref-color-electric-blue-20)}ap-icon-button button.icon-button.stroked.blue:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-electric-blue-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-green-60)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):disabled{border-color:var(--ref-color-green-20)}ap-icon-button button.icon-button.stroked.green:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-green-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):hover:not(.locked){border-color:var(--ref-color-red-60)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):disabled{border-color:var(--ref-color-red-20)}ap-icon-button button.icon-button.stroked.red:not(.loading):not(.locked):active:not(.locked){border-color:var(--ref-color-red-100)}ap-icon-button button.icon-button.stroked.transparent:not(.loading):not(.locked){background:transparent}ap-icon-button button.icon-button.loading{background:var(--ref-color-grey-20);border:none;pointer-events:none}ap-icon-button button.icon-button.locked{background:var(--ref-color-purple-10);color:var(--ref-color-purple-80);border:1px solid var(--ref-color-purple-20)}ap-icon-button button.icon-button.locked:hover{border-color:var(--ref-color-purple-40)}ap-icon-button button.icon-button.locked:active{border-color:var(--ref-color-purple-60)}ap-icon-button button.icon-button.locked ap-symbol{color:var(--ref-color-purple-100)}ap-icon-button button.icon-button.locked .locked-symbol{position:absolute;top:-6px;right:-6px}ap-icon-button button.icon-button.locked .locked-symbol ap-symbol{border-radius:100%;background:var(--ref-color-white)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.SymbolRegistry }, { type: i0.ElementRef }], propDecorators: { ariaLabel: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{
+                        transform: booleanAttribute,
+                    }]
+            }], menuTrigger: [{
+                type: Input
+            }], locked: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }], onFocus: [{
+                type: Output
+            }], onBlur: [{
+                type: Output
+            }], menuOpened: [{
+                type: Output
+            }], menuClosed: [{
+                type: Output
+            }], symbolComponent: [{
+                type: ContentChild,
+                args: [SymbolComponent]
+            }], buttonElement: [{
+                type: ViewChild,
+                args: ['button']
+            }], onSpaceKeyUp: [{
+                type: HostListener,
+                args: ['window:keyup.space', ['$event']]
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IconButtonComponent };
+//# sourceMappingURL=agorapulse-ui-components-icon-button.mjs.map

package/fesm2022/agorapulse-ui-components-icon-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-icon-button.mjs","sources":["../../../libs/ui-components/icon-button/src/icon-button.component.ts","../../../libs/ui-components/icon-button/src/icon-button.component.html","../../../libs/ui-components/icon-button/src/agorapulse-ui-components-icon-button.ts"],"sourcesContent":["// import { LoaderComponent } from '@agorapulse/ui-animations';\nimport { apPremiumStar, SymbolComponent, SymbolRegistry } from '@agorapulse/ui-symbol';\n\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChild,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    Input,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { MatMenuModule, MatMenuPanel } from '@angular/material/menu';\n\nexport type ButtonType = 'flat' | 'stroked-transparent' | 'stroked';\nexport type ButtonColor = 'none' | 'blue' | 'red' | 'green';\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-icon-button',\n    styleUrls: ['./icon-button.component.scss'],\n    standalone: true,\n    imports: [SymbolComponent, \n        // LoaderComponent,\n         MatMenuModule],\n    templateUrl: './icon-button.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class IconButtonComponent {\n    @Input() ariaLabel = '';\n    @Input() name = '';\n    @Input() color: ButtonColor = 'none';\n    @Input({\n        transform: booleanAttribute,\n    })\n    disabled: boolean = false;\n    @Input() menuTrigger: MatMenuPanel | null = null;\n\n    @Input() set locked(locked: boolean) {\n        this._locked = locked;\n        if (locked) {\n            this.color = 'none';\n            this.disabled = false;\n            this.loading = false;\n        }\n    }\n\n    get locked(): boolean {\n        return this._locked;\n    }\n\n    @Input() set loading(loading: boolean) {\n        if (!this.locked) {\n            this._loading = loading;\n        }\n    }\n\n    get loading(): boolean {\n        return this._loading;\n    }\n\n    @Input() type: ButtonType = 'flat';\n\n    // eslint-disable-next-line\n    @Output() onClick: EventEmitter<MouseEvent> = new EventEmitter();\n\n    // eslint-disable-next-line\n    @Output() onFocus: EventEmitter<FocusEvent> = new EventEmitter();\n\n    // eslint-disable-next-line\n    @Output() onBlur: EventEmitter<FocusEvent> = new EventEmitter();\n    @Output() menuOpened: EventEmitter<void> = new EventEmitter();\n    @Output() menuClosed: EventEmitter<void> = new EventEmitter();\n\n    @ContentChild(SymbolComponent) symbolComponent!: SymbolComponent;\n\n    @ViewChild('button') buttonElement!: ElementRef<HTMLButtonElement>;\n\n    private _loading: boolean = false;\n    private _locked: boolean = false;\n    hostDataTest: string | undefined = undefined;\n    focused: boolean = false;\n\n    constructor(\n        private symbolRegistry: SymbolRegistry,\n        private elementRef: ElementRef\n    ) {\n        this.symbolRegistry.registerSymbols([apPremiumStar]);\n        this.hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');\n    }\n\n    onClickHandle($event: MouseEvent): void {\n        this.buttonElement.nativeElement.blur();\n        this.onClick.emit($event);\n        this.onFocus.emit($event);\n    }\n\n    onBlurHandle($event: FocusEvent): void {\n        this.focused = false;\n        this.onBlur.emit($event);\n    }\n\n    onFocusHandle($event: FocusEvent): void {\n        this.focused = true;\n        this.onFocus.emit($event);\n    }\n\n    @HostListener('window:keyup.space', ['$event'])\n    onSpaceKeyUp(event: KeyboardEvent) {\n        if (this.focused) {\n            event.preventDefault();\n            this.buttonElement.nativeElement.click();\n        }\n    }\n}\n","<button\n    #button\n    #trigger=\"matMenuTrigger\"\n    class=\"icon-button\"\n    type=\"button\"\n    [name]=\"name\"\n    [matMenuTriggerFor]=\"menuTrigger\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.data-test]=\"hostDataTest ?? name\"\n    [disabled]=\"disabled\"\n    [class.blue]=\"color === 'blue'\"\n    [class.green]=\"color === 'green'\"\n    [class.red]=\"color === 'red'\"\n    [class.flat]=\"type === 'flat'\"\n    [class.stroked]=\"type === 'stroked' || type === 'stroked-transparent'\"\n    [class.transparent]=\"type === 'stroked-transparent'\"\n    [class.loading]=\"loading\"\n    [class.locked]=\"locked\"\n    (click)=\"onClickHandle($event)\"\n    (blur)=\"onBlurHandle($event)\"\n    (focus)=\"onFocusHandle($event)\"\n    (menuOpened)=\"menuOpened.emit()\"\n    (menuClosed)=\"menuClosed.emit()\">\n    @if (!loading) {\n        <ng-content />\n    }\n    @if (loading) {\n        <!-- <ap-loader\n            color=\"white\"\n            [diameter]=\"16\" /> -->\n    }\n    @if (locked) {\n        <div class=\"locked-symbol\">\n            <ap-symbol\n                symbolId=\"premium-star\"\n                size=\"sm\" />\n        </div>\n    }\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,85 @@
+import { ButtonComponent } from '@agorapulse/ui-components/button';
+import { SymbolRegistry, apInfoFill, apErrorFill, apWarningFill, apRemoveCircle, apRoundedCheckFill, apClose, apDeleteNoCircle, SymbolComponent } from '@agorapulse/ui-symbol';
+import { NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, EventEmitter, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, Input, Output } from '@angular/core';
+
+// Increasing integer for generating unique ids for infobox components.
+let nextUniqueId = 0;
+class InfoboxComponent {
+    symbolRegistry = inject(SymbolRegistry);
+    elementRef = inject(ElementRef);
+    fullWidth = false;
+    buttonId = null;
+    buttonLabel = undefined;
+    buttonDataTrack = null;
+    closable = false;
+    title;
+    type = 'info';
+    set width(width) {
+        this._width = width;
+        this.fullWidth = width === 'full-width';
+    }
+    get width() {
+        return this._width;
+    }
+    _width = 'fit';
+    buttonClicked = new EventEmitter();
+    closed = new EventEmitter();
+    displayDirection = 'horizontal';
+    defaultButtonId = '';
+    symbolIds = {
+        info: 'info_fill',
+        warning: 'warning_fill',
+        error: 'error_fill',
+        success: 'rounded-check_fill',
+    };
+    constructor() {
+        this.symbolRegistry.registerSymbols([apInfoFill, apErrorFill, apWarningFill, apRemoveCircle, apRoundedCheckFill, apClose, apDeleteNoCircle]);
+        this.defaultButtonId = `infobox-button-${++nextUniqueId}`;
+    }
+    onClickButton() {
+        this.buttonClicked.emit();
+    }
+    onCloseInfobox() {
+        this.elementRef.nativeElement.remove();
+        this.closed.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InfoboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: InfoboxComponent, isStandalone: true, selector: "ap-infobox", inputs: { buttonId: "buttonId", buttonLabel: "buttonLabel", buttonDataTrack: "buttonDataTrack", closable: ["closable", "closable", booleanAttribute], title: "title", type: "type", width: "width" }, outputs: { buttonClicked: "buttonClicked", closed: "closed" }, host: { properties: { "class.full-width": "this.fullWidth" } }, ngImport: i0, template: "<div\n    class=\"main\"\n    [class.info]=\"type === 'info'\"\n    [class.warning]=\"type === 'warning'\"\n    [class.error]=\"type === 'error'\"\n    [class.success]=\"type === 'success'\"\n    [class.has-title]=\"!!title\">\n    <div class=\"status-banner\"></div>\n    <div class=\"wrapper\">\n        <div class=\"symbol-content\">\n            <div class=\"symbol-wrapper\">\n                <ap-symbol\n                    class=\"status\"\n                    size=\"sm\"\n                    [symbolId]=\"symbolIds[type]\" />\n            </div>\n            <div class=\"content\">\n                <div class=\"texts\">\n                    @if (title) {\n                        <span class=\"title\">\n                            {{ title }}\n                        </span>\n                    }\n                    <span class=\"text\">\n                        <ng-content />\n                    </span>\n                </div>\n                @if (buttonLabel) {\n                    <ap-button\n                        name=\"infobox-button\"\n                        [id]=\"buttonId ?? defaultButtonId\"\n                        [attr.data-track]=\"buttonDataTrack\"\n                        [config]=\"{\n                            style: 'stroked',\n                            color: 'grey'\n                        }\"\n                        (click)=\"onClickButton()\">\n                        {{ buttonLabel }}\n                    </ap-button>\n                }\n            </div>\n        </div>\n        @if (closable) {\n            <button\n                class=\"closable-button\"\n                (click)=\"onCloseInfobox()\">\n                <ap-symbol\n                aria-label=\"close-snackbar\"\n                symbolId=\"delete-no-circle\"\n                size=\"xs\"/>\n            </button>\n        }\n    </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 20px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:center}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items:flex-start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:flex-start;flex:1}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items:flex-start;flex:1;justify-content:space-between;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content .content ap-button button{width:unset}ap-infobox .main .wrapper .symbol-content .content .texts{display:flex;flex-direction:column;overflow-wrap:anywhere}ap-infobox .main .wrapper .symbol-content .content .texts .title{font-weight:var(--comp-infobox-text-title-weight);font-family:var(--comp-infobox-text-title-font-family);font-size:var(--comp-infobox-text-title-size);line-height:var(--comp-infobox-text-title-line-height)}ap-infobox .main.info{background-color:var(--comp-infobox-info-background-color)}ap-infobox .main.info ap-symbol.status{align-self:baseline;color:var(--comp-infobox-info-icon-color)}ap-infobox .main.info .status-banner{background-color:var(--comp-infobox-info-border-left-color)}ap-infobox .main.warning{background-color:var(--comp-infobox-warning-background-color)}ap-infobox .main.warning ap-symbol.status{color:var(--comp-infobox-warning-icon-color)}ap-infobox .main.warning .status-banner{background-color:var(--comp-infobox-warning-border-left-color)}ap-infobox .main.error{background-color:var(--comp-infobox-error-background-color)}ap-infobox .main.error ap-symbol.status{color:var(--comp-infobox-error-icon-color)}ap-infobox .main.error .status-banner{background-color:var(--comp-infobox-error-border-left-color)}ap-infobox .main.success{background-color:var(--comp-infobox-success-background-color)}ap-infobox .main.success ap-symbol.status{color:var(--comp-infobox-success-icon-color)}ap-infobox .main.success .status-banner{background-color:var(--comp-infobox-success-border-left-color)}@container infobox (min-width: 588px){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: ButtonComponent, selector: "ap-button", inputs: ["ariaLabel", "disabled", "name", "form", "config", "loading", "locked", "menuTrigger", "symbolPosition", "ionicModalEnabled"], outputs: ["menuOpened", "menuClosed", "click", "focus", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InfoboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-infobox', standalone: true, imports: [SymbolComponent, NgClass, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"main\"\n    [class.info]=\"type === 'info'\"\n    [class.warning]=\"type === 'warning'\"\n    [class.error]=\"type === 'error'\"\n    [class.success]=\"type === 'success'\"\n    [class.has-title]=\"!!title\">\n    <div class=\"status-banner\"></div>\n    <div class=\"wrapper\">\n        <div class=\"symbol-content\">\n            <div class=\"symbol-wrapper\">\n                <ap-symbol\n                    class=\"status\"\n                    size=\"sm\"\n                    [symbolId]=\"symbolIds[type]\" />\n            </div>\n            <div class=\"content\">\n                <div class=\"texts\">\n                    @if (title) {\n                        <span class=\"title\">\n                            {{ title }}\n                        </span>\n                    }\n                    <span class=\"text\">\n                        <ng-content />\n                    </span>\n                </div>\n                @if (buttonLabel) {\n                    <ap-button\n                        name=\"infobox-button\"\n                        [id]=\"buttonId ?? defaultButtonId\"\n                        [attr.data-track]=\"buttonDataTrack\"\n                        [config]=\"{\n                            style: 'stroked',\n                            color: 'grey'\n                        }\"\n                        (click)=\"onClickButton()\">\n                        {{ buttonLabel }}\n                    </ap-button>\n                }\n            </div>\n        </div>\n        @if (closable) {\n            <button\n                class=\"closable-button\"\n                (click)=\"onCloseInfobox()\">\n                <ap-symbol\n                aria-label=\"close-snackbar\"\n                symbolId=\"delete-no-circle\"\n                size=\"xs\"/>\n            </button>\n        }\n    </div>\n</div>\n", styles: ["ap-infobox{--comp-icon-size: 20px;container:infobox/inline-size;display:block;width:100%;max-width:100%}ap-infobox .main{display:flex;font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);align-items:center;color:var(--ref-color-grey-100);padding:var(--comp-infobox-padding-top) var(--comp-infobox-padding-right) var(--comp-infobox-padding-bottom) var(--comp-infobox-padding-left);border-radius:var(--comp-infobox-border-radius);overflow:hidden;font-family:var(--comp-infobox-text-title-font-family);box-sizing:border-box;position:relative;gap:var(--comp-infobox-button-margin-left)}ap-infobox .main .status-banner{position:absolute;left:0;top:0;width:4px;height:100%}ap-infobox .main ap-symbol{align-self:center}ap-infobox .main .symbol-wrapper{margin-top:1px}ap-infobox .main.has-title .symbol-wrapper{margin-top:var(--ref-spacing-xxxs)}ap-infobox .main button.closable-button{border:none;background-color:transparent;height:var(--comp-icon-size);width:var(--comp-icon-size);border-radius:100%;display:flex;align-items:center;justify-content:center;cursor:pointer}ap-infobox .main button.closable-button svg{margin:0;color:var(--ref-color-grey-60)}ap-infobox .main button.closable-button:hover{background-color:#3445631a}ap-infobox .main button.closable-button:hover svg{color:var(--ref-color-grey-80)}ap-infobox .main button.closable-button:active{background-color:#34456333}ap-infobox .main button.closable-button:active svg{color:var(--ref-color-grey-100)}ap-infobox .main .wrapper{display:flex;justify-content:space-between;width:100%;align-items:flex-start;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content{display:flex;gap:var(--ref-spacing-xs);align-items:flex-start;flex:1}ap-infobox .main .wrapper .symbol-content .content{display:flex;flex-direction:column;align-items:flex-start;flex:1;justify-content:space-between;gap:var(--ref-spacing-xxs)}ap-infobox .main .wrapper .symbol-content .content ap-button button{width:unset}ap-infobox .main .wrapper .symbol-content .content .texts{display:flex;flex-direction:column;overflow-wrap:anywhere}ap-infobox .main .wrapper .symbol-content .content .texts .title{font-weight:var(--comp-infobox-text-title-weight);font-family:var(--comp-infobox-text-title-font-family);font-size:var(--comp-infobox-text-title-size);line-height:var(--comp-infobox-text-title-line-height)}ap-infobox .main.info{background-color:var(--comp-infobox-info-background-color)}ap-infobox .main.info ap-symbol.status{align-self:baseline;color:var(--comp-infobox-info-icon-color)}ap-infobox .main.info .status-banner{background-color:var(--comp-infobox-info-border-left-color)}ap-infobox .main.warning{background-color:var(--comp-infobox-warning-background-color)}ap-infobox .main.warning ap-symbol.status{color:var(--comp-infobox-warning-icon-color)}ap-infobox .main.warning .status-banner{background-color:var(--comp-infobox-warning-border-left-color)}ap-infobox .main.error{background-color:var(--comp-infobox-error-background-color)}ap-infobox .main.error ap-symbol.status{color:var(--comp-infobox-error-icon-color)}ap-infobox .main.error .status-banner{background-color:var(--comp-infobox-error-border-left-color)}ap-infobox .main.success{background-color:var(--comp-infobox-success-background-color)}ap-infobox .main.success ap-symbol.status{color:var(--comp-infobox-success-icon-color)}ap-infobox .main.success .status-banner{background-color:var(--comp-infobox-success-border-left-color)}@container infobox (min-width: 588px){.main .wrapper{align-items:center!important}.main .wrapper .symbol-wrapper{margin-top:0!important}.main .wrapper .symbol-content{align-items:center!important}.main .wrapper .symbol-content .content{flex-direction:row!important;align-items:center!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { fullWidth: [{
+                type: HostBinding,
+                args: ['class.full-width']
+            }], buttonId: [{
+                type: Input
+            }], buttonLabel: [{
+                type: Input
+            }], buttonDataTrack: [{
+                type: Input
+            }], closable: [{
+                type: Input,
+                args: [{
+                        transform: booleanAttribute,
+                    }]
+            }], title: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], buttonClicked: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InfoboxComponent };
+//# sourceMappingURL=agorapulse-ui-components-infobox.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-infobox.mjs","sources":["../../../libs/ui-components/infobox/src/infobox.component.ts","../../../libs/ui-components/infobox/src/infobox.component.html","../../../libs/ui-components/infobox/src/agorapulse-ui-components-infobox.ts"],"sourcesContent":["import { ButtonComponent } from '@agorapulse/ui-components/button';\nimport {\n    SymbolComponent,\n    SymbolRegistry,\n    agorapulseSymbol,\n    apErrorFill,\n    apRoundedCheckFill,\n    apClose,\n    apInfoFill,\n    apRemoveCircle,\n    apWarningFill,\n    apDeleteNoCircle,\n} from '@agorapulse/ui-symbol';\nimport { NgClass } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    HostBinding,\n    Input,\n    Output,\n    ViewEncapsulation,\n    booleanAttribute,\n    inject,\n} from '@angular/core';\nexport type InfoboxDirection = 'column' | 'row';\nexport type InfoboxWidth = 'fit' | 'full-width';\n\n// Increasing integer for generating unique ids for infobox components.\nlet nextUniqueId = 0;\n\n@Component({\n    selector: 'ap-infobox',\n    templateUrl: './infobox.component.html',\n    styleUrls: ['./infobox.component.scss'],\n    standalone: true,\n    imports: [SymbolComponent, NgClass, ButtonComponent],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n})\nexport class InfoboxComponent {\n    private readonly symbolRegistry = inject(SymbolRegistry);\n    private readonly elementRef = inject(ElementRef);\n\n    @HostBinding('class.full-width') fullWidth: boolean = false;\n\n    @Input() buttonId: string | null = null;\n    @Input() buttonLabel: string | undefined = undefined;\n    @Input() buttonDataTrack: string | null = null;\n    @Input({\n        transform: booleanAttribute,\n    })\n    closable = false;\n    @Input() title?: string;\n    @Input() type: 'info' | 'warning' | 'error' | 'success' = 'info';\n\n    @Input() set width(width: InfoboxWidth) {\n        this._width = width;\n        this.fullWidth = width === 'full-width';\n    }\n    get width(): InfoboxWidth {\n        return this._width;\n    }\n    private _width: InfoboxWidth = 'fit';\n\n    @Output() buttonClicked = new EventEmitter<void>();\n    @Output() closed = new EventEmitter<void>();\n\n    displayDirection: 'horizontal' | 'vertical' = 'horizontal';\n    defaultButtonId: string = '';\n\n\n    readonly symbolIds: { [k: string]: agorapulseSymbol } = {\n        info: 'info_fill',\n        warning: 'warning_fill',\n        error: 'error_fill',\n        success: 'rounded-check_fill',\n    };\n\n    constructor() {\n        this.symbolRegistry.registerSymbols([apInfoFill, apErrorFill, apWarningFill, apRemoveCircle, apRoundedCheckFill, apClose, apDeleteNoCircle]);\n        this.defaultButtonId = `infobox-button-${++nextUniqueId}`\n    }\n\n    onClickButton(): void {\n        this.buttonClicked.emit();\n    }\n\n    onCloseInfobox(): void {\n        this.elementRef.nativeElement.remove();\n        this.closed.emit();\n    }\n}\n","<div\n    class=\"main\"\n    [class.info]=\"type === 'info'\"\n    [class.warning]=\"type === 'warning'\"\n    [class.error]=\"type === 'error'\"\n    [class.success]=\"type === 'success'\"\n    [class.has-title]=\"!!title\">\n    <div class=\"status-banner\"></div>\n    <div class=\"wrapper\">\n        <div class=\"symbol-content\">\n            <div class=\"symbol-wrapper\">\n                <ap-symbol\n                    class=\"status\"\n                    size=\"sm\"\n                    [symbolId]=\"symbolIds[type]\" />\n            </div>\n            <div class=\"content\">\n                <div class=\"texts\">\n                    @if (title) {\n                        <span class=\"title\">\n                            {{ title }}\n                        </span>\n                    }\n                    <span class=\"text\">\n                        <ng-content />\n                    </span>\n                </div>\n                @if (buttonLabel) {\n                    <ap-button\n                        name=\"infobox-button\"\n                        [id]=\"buttonId ?? defaultButtonId\"\n                        [attr.data-track]=\"buttonDataTrack\"\n                        [config]=\"{\n                            style: 'stroked',\n                            color: 'grey'\n                        }\"\n                        (click)=\"onClickButton()\">\n                        {{ buttonLabel }}\n                    </ap-button>\n                }\n            </div>\n        </div>\n        @if (closable) {\n            <button\n                class=\"closable-button\"\n                (click)=\"onCloseInfobox()\">\n                <ap-symbol\n                aria-label=\"close-snackbar\"\n                symbolId=\"delete-no-circle\"\n                size=\"xs\"/>\n            </button>\n        }\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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"}

package/fesm2022/agorapulse-ui-components-input-group.mjs

@@ -0,0 +1,30 @@
+import * as i0 from '@angular/core';
+import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input } from '@angular/core';
+
+class InputGroupComponent {
+    symbolPosition = 'left';
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InputGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: InputGroupComponent, isStandalone: true, selector: "ap-input-group", inputs: { symbolPosition: "symbolPosition" }, ngImport: i0, template: "<div\n    class=\"ap-input-group\"\n    [class.inverse]=\"symbolPosition === 'right'\">\n    <ng-content select=\"ap-input-prefix\" />\n    <ng-content select=\"ap-symbol\" />\n    <ng-content />\n</div>\n", styles: ["ap-input-group.valid .ap-input-group{border-color:var(--comp-input-border-success-color)}ap-input-group.invalid .ap-input-group{border-color:var(--comp-input-border-error-color)}ap-input-group .ap-input-group{width:100%;display:inline-flex;align-items:center;height:var(--comp-input-height);border:1px solid var(--comp-input-border-default-color);box-sizing:border-box;border-radius:var(--comp-input-border-radius);overflow:hidden;background-color:var(--comp-input-fill-color);gap:var(--ref-spacing-xxs);padding:0 var(--ref-spacing-xs)}ap-input-group .ap-input-group:has(input[disabled]){background-color:var(--comp-input-fill-disabled-color);color:var(--comp-input-text-disabled-color)}ap-input-group .ap-input-group:has(input.valid){border-color:var(--comp-input-border-success-color)}ap-input-group .ap-input-group:has(input.invalid),ap-input-group .ap-input-group:has(input.ng-invalid.ng-dirty.ng-touched){border-color:var(--comp-input-border-error-color)}ap-input-group .ap-input-group:hover:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-hover-color)}ap-input-group .ap-input-group:focus-within:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-focused-color)}ap-input-group .ap-input-group:focus-visible:not(.disabled):not(:has(input[disabled])){outline:none}ap-input-group .ap-input-group:active:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-focused-color)}ap-input-group .ap-input-group.disabled{background-color:var(--comp-input-fill-disabled-color);color:var(--comp-input-text-disabled-color)}ap-input-group .ap-input-group.inverse{flex-direction:row-reverse}ap-input-group .ap-input-group input.ap-input{flex:1;padding-left:0;padding-right:0}ap-input-group .ap-input-group input.ap-input.valid:not([disabled]):not(:focus):not(:hover){border:none}ap-input-group .ap-input-group input.ap-input.invalid:not([disabled]):not(:focus):not(:hover),ap-input-group .ap-input-group input.ap-input.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(:focus):not(:hover){border:none}ap-input-group .ap-input-group ap-symbol{max-height:var(--comp-input-icon-size);max-width:var(--comp-input-icon-size);color:var(--comp-input-icon-color);pointer-events:none;box-sizing:content-box}ap-input-group .ap-input-group ap-symbol:hover{cursor:text}ap-input-group .ap-input-group .ap-input{border:none;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InputGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-input-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"ap-input-group\"\n    [class.inverse]=\"symbolPosition === 'right'\">\n    <ng-content select=\"ap-input-prefix\" />\n    <ng-content select=\"ap-symbol\" />\n    <ng-content />\n</div>\n", styles: ["ap-input-group.valid .ap-input-group{border-color:var(--comp-input-border-success-color)}ap-input-group.invalid .ap-input-group{border-color:var(--comp-input-border-error-color)}ap-input-group .ap-input-group{width:100%;display:inline-flex;align-items:center;height:var(--comp-input-height);border:1px solid var(--comp-input-border-default-color);box-sizing:border-box;border-radius:var(--comp-input-border-radius);overflow:hidden;background-color:var(--comp-input-fill-color);gap:var(--ref-spacing-xxs);padding:0 var(--ref-spacing-xs)}ap-input-group .ap-input-group:has(input[disabled]){background-color:var(--comp-input-fill-disabled-color);color:var(--comp-input-text-disabled-color)}ap-input-group .ap-input-group:has(input.valid){border-color:var(--comp-input-border-success-color)}ap-input-group .ap-input-group:has(input.invalid),ap-input-group .ap-input-group:has(input.ng-invalid.ng-dirty.ng-touched){border-color:var(--comp-input-border-error-color)}ap-input-group .ap-input-group:hover:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-hover-color)}ap-input-group .ap-input-group:focus-within:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-focused-color)}ap-input-group .ap-input-group:focus-visible:not(.disabled):not(:has(input[disabled])){outline:none}ap-input-group .ap-input-group:active:not(.disabled):not(:has(input[disabled])){border-color:var(--comp-input-border-focused-color)}ap-input-group .ap-input-group.disabled{background-color:var(--comp-input-fill-disabled-color);color:var(--comp-input-text-disabled-color)}ap-input-group .ap-input-group.inverse{flex-direction:row-reverse}ap-input-group .ap-input-group input.ap-input{flex:1;padding-left:0;padding-right:0}ap-input-group .ap-input-group input.ap-input.valid:not([disabled]):not(:focus):not(:hover){border:none}ap-input-group .ap-input-group input.ap-input.invalid:not([disabled]):not(:focus):not(:hover),ap-input-group .ap-input-group input.ap-input.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(:focus):not(:hover){border:none}ap-input-group .ap-input-group ap-symbol{max-height:var(--comp-input-icon-size);max-width:var(--comp-input-icon-size);color:var(--comp-input-icon-color);pointer-events:none;box-sizing:content-box}ap-input-group .ap-input-group ap-symbol:hover{cursor:text}ap-input-group .ap-input-group .ap-input{border:none;outline:none}\n"] }]
+        }], propDecorators: { symbolPosition: [{
+                type: Input
+            }] } });
+
+class InputPrefixComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InputPrefixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", type: InputPrefixComponent, isStandalone: true, selector: "ap-input-prefix", ngImport: i0, template: "<ng-content/>\n", styles: ["ap-input-prefix{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-right:var(--ref-spacing-xxs);border-right:1px solid var(--ref-color-grey-20);color:var(--comp-input-text-default-color);font-family:var(--comp-input-text-font-family);font-size:var(--comp-input-text-size);font-weight:var(--comp-input-text-font-weight)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InputPrefixComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-input-prefix', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content/>\n", styles: ["ap-input-prefix{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-right:var(--ref-spacing-xxs);border-right:1px solid var(--ref-color-grey-20);color:var(--comp-input-text-default-color);font-family:var(--comp-input-text-font-family);font-size:var(--comp-input-text-size);font-weight:var(--comp-input-text-font-weight)}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InputGroupComponent, InputPrefixComponent };
+//# sourceMappingURL=agorapulse-ui-components-input-group.mjs.map

package/fesm2022/agorapulse-ui-components-input-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-input-group.mjs","sources":["../../../libs/ui-components/input-group/src/input-group.component.ts","../../../libs/ui-components/input-group/src/input-group.component.html","../../../libs/ui-components/input-group/src/input-prefix/input-prefix.component.ts","../../../libs/ui-components/input-group/src/input-prefix/input-prefix.component.html","../../../libs/ui-components/input-group/src/agorapulse-ui-components-input-group.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\n\n@Component({\n    selector: 'ap-input-group',\n    templateUrl: './input-group.component.html',\n    styleUrls: ['./input-group.component.scss'],\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n})\nexport class InputGroupComponent {\n    @Input() symbolPosition: 'left' | 'right' = 'left';\n}\n","<div\n    class=\"ap-input-group\"\n    [class.inverse]=\"symbolPosition === 'right'\">\n    <ng-content select=\"ap-input-prefix\" />\n    <ng-content select=\"ap-symbol\" />\n    <ng-content />\n</div>\n","import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';\n\n@Component({\n    selector: 'ap-input-prefix',\n    templateUrl: './input-prefix.component.html',\n    styleUrls: ['./input-prefix.component.scss'],\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n})\nexport class InputPrefixComponent {\n}\n","<ng-content/>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MAUa,mBAAmB,CAAA;IACnB,cAAc,GAAqB,MAAM,CAAC;uGAD1C,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,wHCVhC,+MAOA,EAAA,MAAA,EAAA,CAAA,g2EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDGa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAR/B,SAAS;+BACI,gBAAgB,EAAA,UAAA,EAGd,IAAI,EACC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,+MAAA,EAAA,MAAA,EAAA,CAAA,g2EAAA,CAAA,EAAA,CAAA;8BAG5B,cAAc,EAAA,CAAA;sBAAtB,KAAK;;;MEDG,oBAAoB,CAAA;uGAApB,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,2ECVjC,iBACA,EAAA,MAAA,EAAA,CAAA,kWAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FDSa,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBARhC,SAAS;+BACI,iBAAiB,EAAA,UAAA,EAGf,IAAI,EACC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,kWAAA,CAAA,EAAA,CAAA;;;AERzC;;AAEG;;;;"}

package/fesm2022/agorapulse-ui-components-input-search.mjs

@@ -0,0 +1,84 @@
+import { InputDirective } from '@agorapulse/ui-components/input';
+import { InputGroupComponent } from '@agorapulse/ui-components/input-group';
+import { SymbolRegistry, apSearch, apDeleteNoCircle, SymbolComponent } from '@agorapulse/ui-symbol';
+import * as i0 from '@angular/core';
+import { input, output, viewChild, signal, computed, inject, forwardRef, Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+
+let inputSearchId = 0;
+class InputSearchComponent {
+    id = input('');
+    placeholder = input('');
+    clearable = input(true);
+    focus = output();
+    blur = output();
+    keyup = output();
+    inputElement = viewChild.required('input');
+    value = signal('');
+    defaultInputId = `ap-input-search-${inputSearchId++}`;
+    inputId = computed(() => this.id() ?? this.defaultInputId);
+    disabled = signal(false);
+    onTouched = () => { };
+    onChanged = () => { };
+    symbolRegistry = inject(SymbolRegistry);
+    constructor() {
+        this.symbolRegistry.registerSymbols([apSearch, apDeleteNoCircle]);
+    }
+    registerOnChange(fn) {
+        this.onChanged = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    onValueChange(value) {
+        this.writeValue(value);
+        this.onChanged(value);
+    }
+    focusInput() {
+        this.inputElement().nativeElement.focus();
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    onClear() {
+        this.onValueChange(null);
+    }
+    onFocusHandle($event) {
+        this.focus.emit($event);
+    }
+    onBlurHandle($event) {
+        this.blur.emit($event);
+    }
+    onKeyup($event) {
+        this.keyup.emit($event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: InputSearchComponent, isStandalone: true, selector: "ap-input-search", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { focus: "focus", blur: "blur", keyup: "keyup" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => InputSearchComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<ap-input-group>\n    <ap-symbol symbolId=\"search\" />\n    <input\n        #input\n        apInput\n        [id]=\"inputId()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [ngModel]=\"value()\"\n        (blur)=\"onBlurHandle($event)\"\n        (focus)=\"onFocusHandle($event)\"\n        (keyup)=\"onKeyup($event)\"\n        (ngModelChange)=\"onValueChange($event)\" />\n    @if (clearable() && value()) {\n        <div\n            class=\"close\"\n            tabindex=\"0\"\n            (click)=\"onClear()\"\n            (keyup)=\"onClear()\">\n            <ap-symbol\n                aria-label=\"close-snackbar\"\n                symbolId=\"delete-no-circle\"\n                size=\"xs\"\n                 />\n        </div>\n    }\n</ap-input-group>\n", styles: ["ap-input-search ap-input-group .ap-input-group .close{height:20px;width:20px;display:flex;justify-content:center;align-items:center;border-radius:50%}ap-input-search ap-input-group .ap-input-group .close ap-symbol{color:var(--ref-color-grey-100);align-self:center}ap-input-search ap-input-group .ap-input-group .close:hover{background:#3445631a;border-radius:50%;cursor:pointer}ap-input-search ap-input-group .ap-input-group input{width:100%}\n"], dependencies: [{ kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: InputSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-input-search', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [InputGroupComponent, InputDirective, FormsModule, SymbolComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => InputSearchComponent),
+                            multi: true,
+                        },
+                    ], template: "<ap-input-group>\n    <ap-symbol symbolId=\"search\" />\n    <input\n        #input\n        apInput\n        [id]=\"inputId()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [ngModel]=\"value()\"\n        (blur)=\"onBlurHandle($event)\"\n        (focus)=\"onFocusHandle($event)\"\n        (keyup)=\"onKeyup($event)\"\n        (ngModelChange)=\"onValueChange($event)\" />\n    @if (clearable() && value()) {\n        <div\n            class=\"close\"\n            tabindex=\"0\"\n            (click)=\"onClear()\"\n            (keyup)=\"onClear()\">\n            <ap-symbol\n                aria-label=\"close-snackbar\"\n                symbolId=\"delete-no-circle\"\n                size=\"xs\"\n                 />\n        </div>\n    }\n</ap-input-group>\n", styles: ["ap-input-search ap-input-group .ap-input-group .close{height:20px;width:20px;display:flex;justify-content:center;align-items:center;border-radius:50%}ap-input-search ap-input-group .ap-input-group .close ap-symbol{color:var(--ref-color-grey-100);align-self:center}ap-input-search ap-input-group .ap-input-group .close:hover{background:#3445631a;border-radius:50%;cursor:pointer}ap-input-search ap-input-group .ap-input-group input{width:100%}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InputSearchComponent };
+//# sourceMappingURL=agorapulse-ui-components-input-search.mjs.map

package/fesm2022/agorapulse-ui-components-input-search.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-input-search.mjs","sources":["../../../libs/ui-components/input-search/src/input-search.component.ts","../../../libs/ui-components/input-search/src/input-search.component.html","../../../libs/ui-components/input-search/src/agorapulse-ui-components-input-search.ts"],"sourcesContent":["import { InputDirective } from '@agorapulse/ui-components/input';\nimport { InputGroupComponent } from '@agorapulse/ui-components/input-group';\nimport { SymbolComponent, SymbolRegistry, apDeleteNoCircle, apSearch } from '@agorapulse/ui-symbol';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    ViewEncapsulation,\n    computed,\n    forwardRef,\n    inject,\n    input,\n    output,\n    signal,\n    viewChild,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nlet inputSearchId = 0;\n\n@Component({\n    selector: 'ap-input-search',\n    templateUrl: './input-search.component.html',\n    styleUrls: ['./input-search.component.scss'],\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [InputGroupComponent, InputDirective, FormsModule, SymbolComponent],\n\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => InputSearchComponent),\n            multi: true,\n        },\n    ],\n})\nexport class InputSearchComponent implements ControlValueAccessor {\n    id = input<string>('');\n    placeholder = input<string>('');\n    clearable = input(true);\n\n    focus = output<FocusEvent>();\n    blur = output<FocusEvent>();\n    keyup = output<KeyboardEvent>();\n\n    inputElement = viewChild.required<ElementRef>('input');\n\n    value = signal<string | null>('');\n    defaultInputId = `ap-input-search-${inputSearchId++}`;\n\n    inputId = computed(() => this.id() ?? this.defaultInputId);\n\n    disabled = signal(false);\n\n    onTouched: () => void = () => {};\n\n    onChanged: (value: any) => void = () => {};\n\n    private symbolRegistry = inject(SymbolRegistry);\n\n    constructor() {\n        this.symbolRegistry.registerSymbols([apSearch, apDeleteNoCircle]);\n    }\n\n    registerOnChange(fn: (value: string | null) => void): void {\n        this.onChanged = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    onValueChange(value: string | null) {\n        this.writeValue(value);\n        this.onChanged(value);\n    }\n\n    focusInput(): void {\n        this.inputElement().nativeElement.focus();\n    }\n\n    writeValue(value: string | null): void {\n        this.value.set(value);\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled.set(isDisabled);\n    }\n\n    onClear(): void {\n        this.onValueChange(null);\n    }\n\n    onFocusHandle($event: FocusEvent): void {\n        this.focus.emit($event);\n    }\n\n    onBlurHandle($event: FocusEvent): void {\n        this.blur.emit($event);\n    }\n\n    onKeyup($event: KeyboardEvent): void {\n        this.keyup.emit($event);\n    }\n}\n","<ap-input-group>\n    <ap-symbol symbolId=\"search\" />\n    <input\n        #input\n        apInput\n        [id]=\"inputId()\"\n        [placeholder]=\"placeholder()\"\n        [disabled]=\"disabled()\"\n        [ngModel]=\"value()\"\n        (blur)=\"onBlurHandle($event)\"\n        (focus)=\"onFocusHandle($event)\"\n        (keyup)=\"onKeyup($event)\"\n        (ngModelChange)=\"onValueChange($event)\" />\n    @if (clearable() && value()) {\n        <div\n            class=\"close\"\n            tabindex=\"0\"\n            (click)=\"onClear()\"\n            (keyup)=\"onClear()\">\n            <ap-symbol\n                aria-label=\"close-snackbar\"\n                symbolId=\"delete-no-circle\"\n                size=\"xs\"\n                 />\n        </div>\n    }\n</ap-input-group>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,26 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Directive } from '@angular/core';
+
+class InputDirective {
+    elementRef = inject(ElementRef);
+    input = this.elementRef.nativeElement;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: InputDirective, isStandalone: true, selector: "[apInput]", host: { classAttribute: "ap-input" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: InputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[apInput]',
+                    standalone: true,
+                    host: {
+                        class: 'ap-input',
+                    },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InputDirective };
+//# sourceMappingURL=agorapulse-ui-components-input.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"agorapulse-ui-components-input.mjs","sources":["../../../libs/ui-components/input/src/input.directive.ts","../../../libs/ui-components/input/src/agorapulse-ui-components-input.ts"],"sourcesContent":["import { Directive, ElementRef, inject } from '@angular/core';\n\n@Directive({\n    selector: '[apInput]',\n    standalone: true,\n    host: {\n        class: 'ap-input',\n    },\n})\nexport class InputDirective {\n    private elementRef = inject(ElementRef);\n\n    input: HTMLInputElement = this.elementRef.nativeElement;\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;MASa,cAAc,CAAA;AACf,IAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;AAExC,IAAA,KAAK,GAAqB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;uGAH/C,cAAc,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;2FAAd,cAAc,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,UAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAd,cAAc,EAAA,UAAA,EAAA,CAAA;kBAP1B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,WAAW;AACrB,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACF,wBAAA,KAAK,EAAE,UAAU;AACpB,qBAAA;AACJ,iBAAA,CAAA;;;ACRD;;AAEG;;;;"}