@masterteam/components 0.0.15 → 0.0.17

package/fesm2022/masterteam-components-radio-button-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masterteam-components-radio-button-field.mjs","sources":["../../../../packages/masterteam/components/radio-button-field/radio-button-field.ts","../../../../packages/masterteam/components/radio-button-field/radio-button-field.html","../../../../packages/masterteam/components/radio-button-field/masterteam-components-radio-button-field.ts"],"sourcesContent":["import {\n  Component,\n  signal,\n  input,\n  output,\n  inject,\n  ChangeDetectionStrategy,\n  computed,\n  effect,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormsModule,\n  NgControl,\n  Validators,\n} from '@angular/forms';\nimport { RadioButton, RadioButtonModule } from 'primeng/radiobutton';\nimport { FieldValidation } from '@masterteam/components/field-validation';\nimport { isInvalid } from '@masterteam/components';\n\nexport interface radioOptions {\n  label: string;\n  value: string;\n}\n\n@Component({\n  selector: 'mt-radio-button-field',\n  standalone: true,\n  imports: [FormsModule, RadioButtonModule, FieldValidation],\n  templateUrl: './radio-button-field.html',\n  styleUrls: ['./radio-button-field.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'grid gap-1',\n  },\n})\nexport class RadioButtonField implements ControlValueAccessor {\n  radioButton: RadioButton;\n  labelPosition = input<'top' | 'start' | 'end' | 'bottom'>('end');\n  readonly = input<boolean>(false);\n  pInputs = input<Partial<RadioButton>>();\n  required = input<boolean>(false);\n  options = input<radioOptions[]>([]);\n  size = input<'small' | 'large' | undefined>();\n  label = input<string>();\n  onChange = output<string>();\n\n  public ngControl = inject(NgControl, { self: true });\n\n  isInvalid = isInvalid;\n\n  isVertical = computed(\n    () => this.labelPosition() === 'top' || this.labelPosition() === 'bottom',\n  );\n\n  requiredValidator = Validators.required;\n  value = signal<string | null>(null);\n  disabled = signal<boolean>(false);\n\n  onTouched: () => void = () => {};\n  onModelChange: (value: string | null) => void = () => {};\n\n  constructor() {\n    if (this.ngControl) {\n      this.ngControl.valueAccessor = this;\n    }\n\n    // Effect to apply pInputs reactively when the pInputs signal changes\n    effect(() => {\n      const currentPInputs = this.pInputs();\n\n      if (this.radioButton && currentPInputs) {\n        this.applyInputsToRadioButton();\n      }\n    });\n\n    // Effect to add required validator if required input is true\n    effect(() => {\n      if (this.ngControl?.control && this.required()) {\n        this.ngControl.control.addValidators(Validators.required);\n        this.ngControl.control.updateValueAndValidity();\n      }\n    });\n  }\n\n  applyInputsToRadioButton() {\n    const currentPInputs = this.pInputs();\n    if (currentPInputs) {\n      Object.assign(this.radioButton, currentPInputs);\n    }\n  }\n\n  onValueChange(value: string | null) {\n    this.onModelChange(value);\n    this.value.set(value);\n  }\n\n  writeValue(value: string | null) {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: any) {\n    this.onModelChange = fn;\n  }\n\n  registerOnTouched(fn: any) {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(disabled: boolean) {\n    this.disabled.set(disabled);\n  }\n}\n","@if (label()) {\n  <label\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n    >{{ label() }}</label\n  >\n}\n\n@for (option of options(); track option) {\n  <div\n    class=\"flex gap-1\"\n    [class.items-center]=\"!isVertical()\"\n    [class.gap-2]=\"!isVertical()\"\n    [class.flex-col]=\"isVertical()\"\n    [class.flex-col-reverse]=\"labelPosition() === 'top'\"\n    [class.flex-row-reverse]=\"labelPosition() === 'start'\"\n    [class.justify-end]=\"labelPosition() === 'start'\"\n  >\n    <p-radiobutton\n      [size]=\"size()\"\n      #radiobutton\n      [ngModel]=\"value()\"\n      [value]=\"option.value\"\n      [inputId]=\"option?.label\"\n      (ngModelChange)=\"onValueChange($event)\"\n      (onClick)=\"onChange.emit($event)\"\n      (onBlur)=\"onTouched()\"\n      [disabled]=\"disabled() || readonly()\"\n      [invalid]=\"isInvalid(ngControl?.control)\"\n      class=\"leading-none\"\n    ></p-radiobutton>\n\n    @if (option?.label) {\n      <label [for]=\"option?.label\">{{ option?.label }}</label>\n    }\n  </div>\n}\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;MAoCa,gBAAgB,CAAA;AAC3B,IAAA,WAAW;AACX,IAAA,aAAa,GAAG,KAAK,CAAqC,KAAK,yDAAC;AAChE,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC;IAChC,OAAO,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,SAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAwB;AACvC,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC;AAChC,IAAA,OAAO,GAAG,KAAK,CAAiB,EAAE,mDAAC;IACnC,IAAI,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,MAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAiC;IAC7C,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;IACvB,QAAQ,GAAG,MAAM,EAAU;IAEpB,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAEpD,SAAS,GAAG,SAAS;IAErB,UAAU,GAAG,QAAQ,CACnB,MAAM,IAAI,CAAC,aAAa,EAAE,KAAK,KAAK,IAAI,IAAI,CAAC,aAAa,EAAE,KAAK,QAAQ,sDAC1E;AAED,IAAA,iBAAiB,GAAG,UAAU,CAAC,QAAQ;AACvC,IAAA,KAAK,GAAG,MAAM,CAAgB,IAAI,iDAAC;AACnC,IAAA,QAAQ,GAAG,MAAM,CAAU,KAAK,oDAAC;AAEjC,IAAA,SAAS,GAAe,MAAK,EAAE,CAAC;AAChC,IAAA,aAAa,GAAmC,MAAK,EAAE,CAAC;AAExD,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,YAAA,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI;QACrC;;QAGA,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,EAAE;AAErC,YAAA,IAAI,IAAI,CAAC,WAAW,IAAI,cAAc,EAAE;gBACtC,IAAI,CAAC,wBAAwB,EAAE;YACjC;AACF,QAAA,CAAC,CAAC;;QAGF,MAAM,CAAC,MAAK;YACV,IAAI,IAAI,CAAC,SAAS,EAAE,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;gBAC9C,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,QAAQ,CAAC;AACzD,gBAAA,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,sBAAsB,EAAE;YACjD;AACF,QAAA,CAAC,CAAC;IACJ;IAEA,wBAAwB,GAAA;AACtB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,OAAO,EAAE;QACrC,IAAI,cAAc,EAAE;YAClB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,EAAE,cAAc,CAAC;QACjD;IACF;AAEA,IAAA,aAAa,CAAC,KAAoB,EAAA;AAChC,QAAA,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;AACzB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;IACvB;AAEA,IAAA,UAAU,CAAC,KAAoB,EAAA;AAC7B,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;IACvB;AAEA,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,aAAa,GAAG,EAAE;IACzB;AAEA,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,gBAAgB,CAAC,QAAiB,EAAA;AAChC,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,CAAC;IAC7B;uGA3EW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,gBAAgB,miCCpC7B,moCAqCA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDTY,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAE,iBAAiB,kTAAE,eAAe,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAQ9C,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAX5B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,uBAAuB,EAAA,UAAA,EACrB,IAAI,EAAA,OAAA,EACP,CAAC,WAAW,EAAE,iBAAiB,EAAE,eAAe,CAAC,EAAA,eAAA,EAGzC,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,KAAK,EAAE,YAAY;AACpB,qBAAA,EAAA,QAAA,EAAA,moCAAA,EAAA;;;AElCH;;AAEG;;;;"}

package/fesm2022/masterteam-components-radio-cards-field.mjs

@@ -0,0 +1,70 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, contentChild, TemplateRef, signal, inject, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Validators, NgControl, FormsModule } from '@angular/forms';
+import { RadioCards } from '@masterteam/components/radio-cards';
+import { FieldValidation } from '@masterteam/components/field-validation';
+
+class RadioCardsField {
+    circle = input(false, ...(ngDevMode ? [{ debugName: "circle", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
+    itemTemplate = contentChild('option', ...(ngDevMode ? [{ debugName: "itemTemplate", read: TemplateRef }] : [{ read: TemplateRef }]));
+    selectedId = signal(null, ...(ngDevMode ? [{ debugName: "selectedId" }] : []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    requiredValidator = Validators.required;
+    ngControl = null;
+    constructor() {
+        try {
+            this.ngControl = inject(NgControl, { self: true, optional: true });
+            if (this.ngControl) {
+                this.ngControl.valueAccessor = this;
+            }
+        }
+        catch (_e) {
+            this.ngControl = null;
+        }
+    }
+    // --- CVA Methods ---
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.selectedId.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    onSelectionChange(selectedItem) {
+        if (!this.isDisabled()) {
+            const newId = selectedItem.id;
+            this.selectedId.set(newId);
+            this.onChange(newId);
+            this.onTouched();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RadioCardsField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: RadioCardsField, isStandalone: true, selector: "mt-radio-cards-field", inputs: { circle: { classPropertyName: "circle", publicName: "circle", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "grid gap-1" }, providers: [], queries: [{ propertyName: "itemTemplate", first: true, predicate: ["option"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n  <label\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n    [for]=\"ngControl?.name || label()\"\n    >{{ label() }}</label\n  >\n}\n<div\n  class=\"relative\"\n  [class.opacity-50]=\"isDisabled()\"\n  [class.pointer-events-none]=\"isDisabled()\"\n  [id]=\"ngControl?.name || label()\"\n>\n  <mt-radio-cards\n    [options]=\"options()\"\n    [activeId]=\"selectedId()\"\n    [color]=\"color()\"\n    [size]=\"size()\"\n    [circle]=\"circle()\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [itemTemplate]=\"itemTemplate()\"\n  ></mt-radio-cards>\n</div>\n\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: RadioCards, selector: "mt-radio-cards", inputs: ["circle", "color", "size", "options", "activeId", "itemTemplate"], outputs: ["optionsChange", "activeIdChange", "selectionChange"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RadioCardsField, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-radio-cards-field', standalone: true, imports: [FormsModule, RadioCards, FieldValidation], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'grid gap-1',
+                    }, providers: [], template: "@if (label()) {\n  <label\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n    [for]=\"ngControl?.name || label()\"\n    >{{ label() }}</label\n  >\n}\n<div\n  class=\"relative\"\n  [class.opacity-50]=\"isDisabled()\"\n  [class.pointer-events-none]=\"isDisabled()\"\n  [id]=\"ngControl?.name || label()\"\n>\n  <mt-radio-cards\n    [options]=\"options()\"\n    [activeId]=\"selectedId()\"\n    [color]=\"color()\"\n    [size]=\"size()\"\n    [circle]=\"circle()\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [itemTemplate]=\"itemTemplate()\"\n  ></mt-radio-cards>\n</div>\n\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RadioCardsField };
+//# sourceMappingURL=masterteam-components-radio-cards-field.mjs.map

package/fesm2022/masterteam-components-radio-cards-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masterteam-components-radio-cards-field.mjs","sources":["../../../../packages/masterteam/components/radio-cards-field/radio-cards-field.ts","../../../../packages/masterteam/components/radio-cards-field/radio-cards-field.html","../../../../packages/masterteam/components/radio-cards-field/masterteam-components-radio-cards-field.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  signal,\n  TemplateRef,\n  contentChild,\n  inject,\n  booleanAttribute,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  FormsModule,\n  NgControl,\n  Validators,\n} from '@angular/forms';\nimport { RadioCards, RadioItem } from '@masterteam/components/radio-cards';\nimport { FieldValidation } from '@masterteam/components/field-validation';\n\n@Component({\n  selector: 'mt-radio-cards-field',\n  standalone: true,\n  imports: [FormsModule, RadioCards, FieldValidation],\n  templateUrl: './radio-cards-field.html',\n  styleUrl: './radio-cards-field.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'grid gap-1',\n  },\n  providers: [],\n})\nexport class RadioCardsField implements ControlValueAccessor {\n  readonly circle = input<boolean, unknown>(false, {\n    transform: booleanAttribute,\n  });\n  readonly label = input<string>();\n  readonly required = input<boolean>(false);\n  readonly color = input<string>('primary');\n  readonly size = input<'small' | 'medium' | 'large'>('medium');\n  readonly options = input.required<RadioItem[]>();\n  readonly itemTemplate = contentChild('option', { read: TemplateRef });\n\n  protected selectedId = signal<string | number | null>(null);\n  protected isDisabled = signal(false);\n\n  requiredValidator = Validators.required;\n\n  public ngControl: NgControl | null = null;\n\n  constructor() {\n    try {\n      this.ngControl = inject(NgControl, { self: true, optional: true });\n      if (this.ngControl) {\n        this.ngControl.valueAccessor = this;\n      }\n    } catch (_e) {\n      this.ngControl = null;\n    }\n  }\n\n  // --- CVA Methods ---\n  private onChange: (value: string | number) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  writeValue(value: string | number): void {\n    this.selectedId.set(value);\n  }\n\n  registerOnChange(fn: (value: string | number) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.isDisabled.set(isDisabled);\n  }\n\n  onSelectionChange(selectedItem: RadioItem): void {\n    if (!this.isDisabled()) {\n      const newId = selectedItem.id;\n      this.selectedId.set(newId);\n      this.onChange(newId);\n      this.onTouched();\n    }\n  }\n}\n","@if (label()) {\n  <label\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\n    [for]=\"ngControl?.name || label()\"\n    >{{ label() }}</label\n  >\n}\n<div\n  class=\"relative\"\n  [class.opacity-50]=\"isDisabled()\"\n  [class.pointer-events-none]=\"isDisabled()\"\n  [id]=\"ngControl?.name || label()\"\n>\n  <mt-radio-cards\n    [options]=\"options()\"\n    [activeId]=\"selectedId()\"\n    [color]=\"color()\"\n    [size]=\"size()\"\n    [circle]=\"circle()\"\n    (selectionChange)=\"onSelectionChange($event)\"\n    [itemTemplate]=\"itemTemplate()\"\n  ></mt-radio-cards>\n</div>\n\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MA+Ba,eAAe,CAAA;IACjB,MAAM,GAAG,KAAK,CAAmB,KAAK,0CAC7C,SAAS,EAAE,gBAAgB,EAAA,CAAA,GAAA,CADoB;AAC/C,YAAA,SAAS,EAAE,gBAAgB;AAC5B,SAAA,CAAA,CAAA,CAAC;IACO,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAU;AACvB,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,oDAAC;AAChC,IAAA,KAAK,GAAG,KAAK,CAAS,SAAS,iDAAC;AAChC,IAAA,IAAI,GAAG,KAAK,CAA+B,QAAQ,gDAAC;AACpD,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,kDAAe;AACvC,IAAA,YAAY,GAAG,YAAY,CAAC,QAAQ,gDAAI,IAAI,EAAE,WAAW,EAAA,CAAA,GAAA,CAAnB,EAAE,IAAI,EAAE,WAAW,EAAE,GAAC;AAE3D,IAAA,UAAU,GAAG,MAAM,CAAyB,IAAI,sDAAC;AACjD,IAAA,UAAU,GAAG,MAAM,CAAC,KAAK,sDAAC;AAEpC,IAAA,iBAAiB,GAAG,UAAU,CAAC,QAAQ;IAEhC,SAAS,GAAqB,IAAI;AAEzC,IAAA,WAAA,GAAA;AACE,QAAA,IAAI;AACF,YAAA,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAClE,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE;AAClB,gBAAA,IAAI,CAAC,SAAS,CAAC,aAAa,GAAG,IAAI;YACrC;QACF;QAAE,OAAO,EAAE,EAAE;AACX,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;QACvB;IACF;;AAGQ,IAAA,QAAQ,GAAqC,MAAK,EAAE,CAAC;AACrD,IAAA,SAAS,GAAe,MAAK,EAAE,CAAC;AAExC,IAAA,UAAU,CAAC,KAAsB,EAAA;AAC/B,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;IAC5B;AAEA,IAAA,gBAAgB,CAAC,EAAoC,EAAA;AACnD,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC9B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,UAAU,CAAC;IACjC;AAEA,IAAA,iBAAiB,CAAC,YAAuB,EAAA;AACvC,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE;AACtB,YAAA,MAAM,KAAK,GAAG,YAAY,CAAC,EAAE;AAC7B,YAAA,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;AAC1B,YAAA,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC;YACpB,IAAI,CAAC,SAAS,EAAE;QAClB;IACF;uGAxDW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAf,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,cAAA,EAAA,YAAA,EAAA,EAAA,SAAA,EAFf,EAAE,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,QAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAW0C,WAAW,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxCpE,2rBAyBA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDHY,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,UAAU,EAAA,QAAA,EAAA,gBAAA,EAAA,MAAA,EAAA,CAAA,QAAA,EAAA,OAAA,EAAA,MAAA,EAAA,SAAA,EAAA,UAAA,EAAA,cAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,EAAA,gBAAA,EAAA,iBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,eAAe,EAAA,QAAA,EAAA,qBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FASvC,eAAe,EAAA,UAAA,EAAA,CAAA;kBAZ3B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,sBAAsB,EAAA,UAAA,EACpB,IAAI,EAAA,OAAA,EACP,CAAC,WAAW,EAAE,UAAU,EAAE,eAAe,CAAC,EAAA,eAAA,EAGlC,uBAAuB,CAAC,MAAM,EAAA,IAAA,EACzC;AACJ,wBAAA,KAAK,EAAE,YAAY;AACpB,qBAAA,EAAA,SAAA,EACU,EAAE,EAAA,QAAA,EAAA,2rBAAA,EAAA;;;AE7Bf;;AAEG;;;;"}

package/fesm2022/masterteam-components-radio-cards.mjs

@@ -0,0 +1,116 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, model, output, contentChild, TemplateRef, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Avatar } from '@masterteam/components/avatar';
+import { NgTemplateOutlet } from '@angular/common';
+
+class RadioCards {
+    circle = input(false, ...(ngDevMode ? [{ debugName: "circle", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color", transform: (value) => {
+                if (value) {
+                    return value;
+                }
+                return 'primary';
+            } }] : [{
+            transform: (value) => {
+                if (value) {
+                    return value;
+                }
+                return 'primary';
+            },
+        }]));
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size", transform: (value) => {
+                if (value) {
+                    switch (value) {
+                        case 'small':
+                            return 'xs';
+                        case 'medium':
+                            return 'base';
+                        case 'large':
+                            return '2xl';
+                    }
+                }
+                return 'base';
+            } }] : [{
+            transform: (value) => {
+                if (value) {
+                    switch (value) {
+                        case 'small':
+                            return 'xs';
+                        case 'medium':
+                            return 'base';
+                        case 'large':
+                            return '2xl';
+                    }
+                }
+                return 'base';
+            },
+        }]));
+    avatarSize = computed(() => {
+        switch (this.size()) {
+            case 'xs':
+                return 'normal';
+            case 'base':
+                return 'large';
+            case '2xl':
+                return 'xlarge';
+            default:
+                return 'normal';
+        }
+    }, ...(ngDevMode ? [{ debugName: "avatarSize" }] : []));
+    options = model.required(...(ngDevMode ? [{ debugName: "options" }] : []));
+    activeId = model(...(ngDevMode ? [undefined, { debugName: "activeId" }] : []));
+    selectionChange = output();
+    itemTemplate = input(null, ...(ngDevMode ? [{ debugName: "itemTemplate" }] : []));
+    itemTemplateContent = contentChild('option', ...(ngDevMode ? [{ debugName: "itemTemplateContent", read: TemplateRef }] : [{ read: TemplateRef }]));
+    /**
+     * A computed signal that generates the dynamic Tailwind CSS classes
+     * for the active state based on the color input.
+     */
+    activeColorClasses = computed(() => {
+        const color = this.color();
+        return {
+            [`bg-${color}-50`]: true,
+            [`dark:bg-${color}-800`]: true,
+            [`border-${color}-400`]: true,
+            [`ring-${color}-200`]: true,
+        };
+    }, ...(ngDevMode ? [{ debugName: "activeColorClasses" }] : []));
+    constructor() {
+        effect(() => {
+            const active = this.activeId();
+            console.log('Active ID changed to:', active);
+            this.options.update((options) => {
+                return options.map((option) => {
+                    option.active = option.id === active;
+                    return option;
+                });
+            });
+        });
+    }
+    selectItem(item) {
+        if (this.activeId() !== item.id) {
+            this.activeId.set(item.id);
+            this.selectionChange.emit(item);
+        }
+        const options = this.options();
+        options.map((option) => {
+            const active = option.id === this.activeId();
+            option.active = active;
+            return option;
+        });
+        this.options.set(options);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RadioCards, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: RadioCards, isStandalone: true, selector: "mt-radio-cards", inputs: { circle: { classPropertyName: "circle", publicName: "circle", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, activeId: { classPropertyName: "activeId", publicName: "activeId", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { options: "optionsChange", activeId: "activeIdChange", selectionChange: "selectionChange" }, queries: [{ propertyName: "itemTemplateContent", first: true, predicate: ["option"], descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: "<div>\n  <div class=\"flex flex-wrap gap-3\">\n    @for (item of options(); track item.id) {\n      <div\n        (click)=\"selectItem(item)\"\n        class=\"flex items-center space-x-4 p-4 rounded-lg cursor-pointer border-2 border-dashed transition-all ease-in-out duration-300\"\n        [class]=\"\n          item.active\n            ? activeColorClasses()\n            : 'border-gray-300 hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-100 '\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate() || itemTemplateContent() || defaultTemplate;\n            context: {\n              $implicit: item,\n              active: item.active,\n              color: color(),\n              size: size(),\n            }\n          \"\n        >\n        </ng-container>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template\n  #defaultTemplate\n  let-template\n  let-active=\"active\"\n  let-color=\"color\"\n  let-size=\"size\"\n>\n  @if (template.icon) {\n    <mt-avatar\n      [shape]=\"circle() ? 'circle' : 'square'\"\n      [size]=\"avatarSize()\"\n      [icon]=\"template.icon\"\n    ></mt-avatar>\n  }\n  @if (template.name) {\n    <span\n      class=\"font-semibold\"\n      [class]=\"\n        'text-' +\n        size +\n        ' ' +\n        (active\n          ? 'text-' + color + '-500'\n          : 'dark:text-gray-100 text-gray-600 ')\n      \"\n    >\n      {{ template.name }}\n    </span>\n  }\n</ng-template>\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: RadioCards, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-radio-cards', standalone: true, imports: [NgTemplateOutlet, Avatar], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  <div class=\"flex flex-wrap gap-3\">\n    @for (item of options(); track item.id) {\n      <div\n        (click)=\"selectItem(item)\"\n        class=\"flex items-center space-x-4 p-4 rounded-lg cursor-pointer border-2 border-dashed transition-all ease-in-out duration-300\"\n        [class]=\"\n          item.active\n            ? activeColorClasses()\n            : 'border-gray-300 hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-100 '\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate() || itemTemplateContent() || defaultTemplate;\n            context: {\n              $implicit: item,\n              active: item.active,\n              color: color(),\n              size: size(),\n            }\n          \"\n        >\n        </ng-container>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template\n  #defaultTemplate\n  let-template\n  let-active=\"active\"\n  let-color=\"color\"\n  let-size=\"size\"\n>\n  @if (template.icon) {\n    <mt-avatar\n      [shape]=\"circle() ? 'circle' : 'square'\"\n      [size]=\"avatarSize()\"\n      [icon]=\"template.icon\"\n    ></mt-avatar>\n  }\n  @if (template.name) {\n    <span\n      class=\"font-semibold\"\n      [class]=\"\n        'text-' +\n        size +\n        ' ' +\n        (active\n          ? 'text-' + color + '-500'\n          : 'dark:text-gray-100 text-gray-600 ')\n      \"\n    >\n      {{ template.name }}\n    </span>\n  }\n</ng-template>\n", styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RadioCards };
+//# sourceMappingURL=masterteam-components-radio-cards.mjs.map

package/fesm2022/masterteam-components-radio-cards.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masterteam-components-radio-cards.mjs","sources":["../../../../packages/masterteam/components/radio-cards/radio-cards.ts","../../../../packages/masterteam/components/radio-cards/radio-cards.html","../../../../packages/masterteam/components/radio-cards/masterteam-components-radio-cards.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  contentChild,\n  input,\n  output,\n  TemplateRef,\n  computed,\n  model,\n  effect,\n  booleanAttribute,\n} from '@angular/core';\nimport { MTIcon } from '@masterteam/icons';\nimport { Avatar } from '@masterteam/components/avatar';\nimport { NgTemplateOutlet } from '@angular/common';\n\nexport interface RadioItem {\n  id: string | number;\n  name?: string;\n  active?: boolean;\n  icon?: MTIcon;\n  [key: string]: any;\n}\n\n@Component({\n  selector: 'mt-radio-cards',\n  standalone: true,\n  imports: [NgTemplateOutlet, Avatar],\n  templateUrl: './radio-cards.html',\n  styleUrl: './radio-cards.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class RadioCards {\n  circle = input<boolean, unknown>(false, { transform: booleanAttribute });\n  color = input('primary', {\n    transform: (value: string) => {\n      if (value) {\n        return value;\n      }\n      return 'primary';\n    },\n  });\n  size = input('medium', {\n    transform: (value: 'small' | 'medium' | 'large') => {\n      if (value) {\n        switch (value) {\n          case 'small':\n            return 'xs';\n          case 'medium':\n            return 'base';\n          case 'large':\n            return '2xl';\n        }\n      }\n      return 'base';\n    },\n  });\n  avatarSize = computed(() => {\n    switch (this.size()) {\n      case 'xs':\n        return 'normal';\n      case 'base':\n        return 'large';\n      case '2xl':\n        return 'xlarge';\n      default:\n        return 'normal';\n    }\n  });\n  options = model.required<RadioItem[]>();\n  activeId = model<string | number>();\n  selectionChange = output<RadioItem>();\n\n  itemTemplate = input<TemplateRef<any> | null>(null);\n  itemTemplateContent = contentChild('option', { read: TemplateRef });\n\n  /**\n   * A computed signal that generates the dynamic Tailwind CSS classes\n   * for the active state based on the color input.\n   */\n  protected activeColorClasses = computed(() => {\n    const color = this.color();\n    return {\n      [`bg-${color}-50`]: true,\n      [`dark:bg-${color}-800`]: true,\n      [`border-${color}-400`]: true,\n      [`ring-${color}-200`]: true,\n    };\n  });\n\n  constructor() {\n    effect(() => {\n      const active = this.activeId();\n      console.log('Active ID changed to:', active);\n      this.options.update((options) => {\n        return options.map((option) => {\n          option.active = option.id === active;\n          return option;\n        });\n      });\n    });\n  }\n\n  public selectItem(item: RadioItem): void {\n    if (this.activeId() !== item.id) {\n      this.activeId.set(item.id);\n      this.selectionChange.emit(item);\n    }\n    const options = this.options();\n    options.map((option) => {\n      const active = option.id === this.activeId();\n      option.active = active;\n      return option;\n    });\n    this.options.set(options);\n  }\n}\n","<div>\n  <div class=\"flex flex-wrap gap-3\">\n    @for (item of options(); track item.id) {\n      <div\n        (click)=\"selectItem(item)\"\n        class=\"flex items-center space-x-4 p-4 rounded-lg cursor-pointer border-2 border-dashed transition-all ease-in-out duration-300\"\n        [class]=\"\n          item.active\n            ? activeColorClasses()\n            : 'border-gray-300 hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-gray-600 dark:hover:text-gray-100 '\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            itemTemplate() || itemTemplateContent() || defaultTemplate;\n            context: {\n              $implicit: item,\n              active: item.active,\n              color: color(),\n              size: size(),\n            }\n          \"\n        >\n        </ng-container>\n      </div>\n    }\n  </div>\n</div>\n\n<ng-template\n  #defaultTemplate\n  let-template\n  let-active=\"active\"\n  let-color=\"color\"\n  let-size=\"size\"\n>\n  @if (template.icon) {\n    <mt-avatar\n      [shape]=\"circle() ? 'circle' : 'square'\"\n      [size]=\"avatarSize()\"\n      [icon]=\"template.icon\"\n    ></mt-avatar>\n  }\n  @if (template.name) {\n    <span\n      class=\"font-semibold\"\n      [class]=\"\n        'text-' +\n        size +\n        ' ' +\n        (active\n          ? 'text-' + color + '-500'\n          : 'dark:text-gray-100 text-gray-600 ')\n      \"\n    >\n      {{ template.name }}\n    </span>\n  }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/masterteam-components-tabs.mjs

@@ -0,0 +1,45 @@
+import * as i0 from '@angular/core';
+import { input, model, output, booleanAttribute, effect, Component } from '@angular/core';
+import { SelectButton } from 'primeng/selectbutton';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+class Tabs {
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
+    optionValue = input('value', ...(ngDevMode ? [{ debugName: "optionValue" }] : []));
+    active = model(null, ...(ngDevMode ? [{ debugName: "active" }] : []));
+    onChange = output();
+    size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
+    fluid = input(false, ...(ngDevMode ? [{ debugName: "fluid", transform: booleanAttribute }] : [{
+            transform: booleanAttribute,
+        }]));
+    // TODO: make a decision about this maybe we should remove it
+    constructor() {
+        effect(() => {
+            const options = this.options();
+            if (options && options.length > 0 && !this.active()) {
+                this.active.set(options[0].value);
+            }
+        });
+    }
+    onTabChange(value) {
+        this.onChange.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: Tabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.1.3", type: Tabs, isStandalone: true, selector: "mt-tabs", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fluid: { classPropertyName: "fluid", publicName: "fluid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { active: "activeChange", onChange: "onChange" }, host: { properties: { "class.w-full": "fluid()" }, classAttribute: "grid gap-1" }, ngImport: i0, template: "<p-selectbutton\n  [options]=\"options()\"\n  [(ngModel)]=\"active\"\n  (ngModelChange)=\"onTabChange($event)\"\n  [optionLabel]=\"optionLabel()\"\n  [optionValue]=\"optionValue()\"\n  styleClass=\"my-tabs-button\"\n  [size]=\"size()\"\n  [fluid]=\"fluid()\"\n  unselectable\n/>\n", styles: [""], dependencies: [{ kind: "component", type: SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: Tabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-tabs', standalone: true, imports: [SelectButton, FormsModule], host: {
+                        class: 'grid gap-1',
+                        '[class.w-full]': 'fluid()',
+                    }, template: "<p-selectbutton\n  [options]=\"options()\"\n  [(ngModel)]=\"active\"\n  (ngModelChange)=\"onTabChange($event)\"\n  [optionLabel]=\"optionLabel()\"\n  [optionValue]=\"optionValue()\"\n  styleClass=\"my-tabs-button\"\n  [size]=\"size()\"\n  [fluid]=\"fluid()\"\n  unselectable\n/>\n" }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Tabs };
+//# sourceMappingURL=masterteam-components-tabs.mjs.map

package/fesm2022/masterteam-components-tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masterteam-components-tabs.mjs","sources":["../../../../packages/masterteam/components/tabs/tabs.ts","../../../../packages/masterteam/components/tabs/tabs.html","../../../../packages/masterteam/components/tabs/masterteam-components-tabs.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  Component,\n  input,\n  effect,\n  output,\n  model,\n} from '@angular/core';\nimport { SelectButton } from 'primeng/selectbutton';\nimport { FormsModule } from '@angular/forms';\n\nexport interface OptionItem {\n  label: string;\n  value: any;\n}\n\n@Component({\n  selector: 'mt-tabs',\n  standalone: true,\n  imports: [SelectButton, FormsModule],\n  templateUrl: './tabs.html',\n  styleUrls: ['./tabs.scss'],\n  host: {\n    class: 'grid gap-1',\n    '[class.w-full]': 'fluid()',\n  },\n})\nexport class Tabs {\n  options = input<any[]>([]);\n  optionLabel = input<string>('label');\n  optionValue = input<string>('value');\n\n  active = model<any>(null);\n\n  onChange = output<any>();\n\n  readonly size = input<'small' | 'large' | undefined>();\n  readonly fluid = input<boolean, unknown>(false, {\n    transform: booleanAttribute,\n  });\n\n  // TODO: make a decision about this maybe we should remove it\n  constructor() {\n    effect(() => {\n      const options = this.options();\n      if (options && options.length > 0 && !this.active()) {\n        this.active.set(options[0].value);\n      }\n    });\n  }\n\n  onTabChange(value: any) {\n    this.onChange.emit(value);\n  }\n}\n","<p-selectbutton\n  [options]=\"options()\"\n  [(ngModel)]=\"active\"\n  (ngModelChange)=\"onTabChange($event)\"\n  [optionLabel]=\"optionLabel()\"\n  [optionValue]=\"optionValue()\"\n  styleClass=\"my-tabs-button\"\n  [size]=\"size()\"\n  [fluid]=\"fluid()\"\n  unselectable\n/>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/masterteam-components.mjs

@@ -197,6 +197,162 @@ const MTPreset = (primaryColor) => definePreset(Aura, {
                 },
             },
         },
+        togglebutton: {
+            root: {
+                padding: '1px',
+                sm: {
+                    padding: '1px',
+                },
+                lg: {
+                    padding: '1px',
+                },
+            },
+            colorScheme: {
+                light: {
+                    root: {
+                        checkedColor: '{primary.500}',
+                    },
+                },
+                dark: {
+                    root: {
+                        checkedColor: '{primary.400}',
+                    },
+                },
+            },
+        },
+        selectbutton: {
+            root: {
+                borderRadius: '{border.radius.lg}',
+            },
+        },
+        breadcrumb: {
+            root: {
+                padding: '0.5rem 1rem',
+            },
+            item: {
+                color: '{surface.700}',
+                hoverColor: '{primary.600}',
+                focusRing: {
+                    color: '{primary.700}',
+                },
+                borderRadius: '0',
+            },
+            separator: {
+                color: '{surface.500}',
+            },
+            css: () => `
+          .p-breadcrumb-list .p-breadcrumb-item-link {
+            font-size: 0.9rem;
+          }
+
+          .p-breadcrumb-list .p-breadcrumb-separator {
+            width: 12px
+          }
+
+          .p-breadcrumb-list .p-breadcrumb-item:last-child .p-breadcrumb-item-link {
+            color: var(--p-primary-400);
+            background: var(--p-primary-50);
+            cursor: default;
+            pointer-events: none;
+            padding: 0 0.4rem
+          }
+        `,
+        },
+        paginator: {
+            root: {
+                borderRadius: '{border.radius.lg}',
+                padding: '0 .5rem',
+            },
+            navButton: {
+                borderRadius: '0',
+            },
+            colorScheme: {
+                light: {
+                    navButton: {
+                        color: '{surface.600}',
+                        hoverBackground: '#fff',
+                        selectedBackground: '{surface.200}',
+                        selectedColor: '{surface.600}',
+                        focusRing: {
+                            color: '{surface.200}',
+                        },
+                    },
+                },
+                dark: {
+                    navButton: {
+                        color: '{surface.200}',
+                        hoverBackground: 'transparent',
+                        selectedBackground: 'transparent',
+                        selectedColor: '#fff',
+                        focusRing: {
+                            color: '#fff',
+                        },
+                    },
+                },
+            },
+            css: () => `
+          .p-paginator {
+            --p-paginator-gap: 0;
+            --p-paginator-nav-button-width: 2.2rem;
+            --p-paginator-nav-button-height: 2.2rem;
+            width: fit-content;
+            border: 1px solid var(--p-surface-200);
+            overflow: hidden;
+            font-size: .95rem;
+          }
+
+          .p-paginator-pages button,
+          .p-paginator-prev,
+          .p-paginator-next {
+            border-color: var(--p-surface-200);
+          }
+
+          .p-paginator-pages button {
+            border-style: solid;
+            border-width: 0 0 0 1px;
+          }
+
+          .p-paginator-pages button:first-child {
+            border-left: none;
+          }
+
+          .p-paginator-prev {
+            border-right: 1px solid var(--p-surface-200);
+          }
+
+          .p-paginator-next {
+            border-left: 1px solid var(--p-surface-200);
+          }
+
+          .p-paginator .p-select {
+            border: 0;
+            background: transparent;
+          }
+
+          .p-paginator .p-select .p-select-label {
+            padding: 0;
+          }
+
+          /* Dark Mode Styles */
+          .dark .p-paginator {
+            border-color: var(--p-surface-500);
+          }
+
+          .dark .p-paginator-pages button,
+          .dark .p-paginator-prev,
+          .dark .p-paginator-next {
+            border-color: var(--p-surface-500);
+          }
+
+          .dark .p-paginator-prev {
+            border-right-color: var(--p-surface-500);
+          }
+
+          .dark .p-paginator-next {
+            border-left-color: var(--p-surface-500);
+          }
+        `,
+        },
         // steps: {
         //   item: {
         //     link: {