@masterteam/components 0.0.127 → 0.0.129

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

@@ -0,0 +1,123 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, contentChild, TemplateRef, signal, computed, inject, effect, 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 });
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    optionLabel = input('label', ...(ngDevMode ? [{ debugName: "optionLabel" }] : []));
+    optionValue = input('value', ...(ngDevMode ? [{ debugName: "optionValue" }] : []));
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : []));
+    itemTemplate = contentChild('option', { ...(ngDevMode ? { debugName: "itemTemplate" } : {}), read: TemplateRef });
+    selectedId = signal(null, ...(ngDevMode ? [{ debugName: "selectedId" }] : []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    normalizedOptions = computed(() => this.options()
+        .map((option) => normalizeRadioItem(option, this.optionLabel(), this.optionValue()))
+        .filter((option) => option !== null), ...(ngDevMode ? [{ debugName: "normalizedOptions" }] : []));
+    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;
+        }
+        effect(() => {
+            if (this.ngControl?.control && this.required()) {
+                this.ngControl.control.addValidators(Validators.required);
+                this.ngControl.control.updateValueAndValidity({ emitEvent: false });
+            }
+        });
+    }
+    // --- CVA Methods ---
+    onChange = () => { };
+    onTouched = () => { };
+    writeValue(value) {
+        this.selectedId.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+    }
+    onSelectionChange(selectedItem) {
+        if (this.isDisabled() || this.readonly()) {
+            return;
+        }
+        const newId = selectedItem.id;
+        this.selectedId.set(newId);
+        const control = this.ngControl?.control;
+        if (control) {
+            control.setValue(newId);
+            control.markAsDirty();
+            control.markAsTouched();
+            control.updateValueAndValidity({ emitEvent: false });
+            return;
+        }
+        this.onChange(newId);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: RadioCardsField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, readonly: { classPropertyName: "readonly", publicName: "readonly", 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 }, optionLabel: { classPropertyName: "optionLabel", publicName: "optionLabel", isSignal: true, isRequired: false, transformFunction: null }, optionValue: { classPropertyName: "optionValue", publicName: "optionValue", 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()) {\r\n  <label\r\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n    [for]=\"ngControl?.name || label()\"\r\n    >{{ label() }}</label\r\n  >\r\n}\r\n<div\r\n  class=\"relative\"\r\n  [class.opacity-50]=\"isDisabled()\"\r\n  [class.pointer-events-none]=\"isDisabled()\"\r\n  [id]=\"ngControl?.name || label()\"\r\n>\r\n  <mt-radio-cards\r\n    [options]=\"normalizedOptions()\"\r\n    [activeId]=\"selectedId()\"\r\n    [color]=\"color()\"\r\n    [size]=\"size()\"\r\n    [circle]=\"circle()\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n    [itemTemplate]=\"itemTemplate()\"\r\n  ></mt-radio-cards>\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: RadioCards, selector: "mt-radio-cards", inputs: ["circle", "color", "size", "columns", "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: "21.0.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()) {\r\n  <label\r\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n    [for]=\"ngControl?.name || label()\"\r\n    >{{ label() }}</label\r\n  >\r\n}\r\n<div\r\n  class=\"relative\"\r\n  [class.opacity-50]=\"isDisabled()\"\r\n  [class.pointer-events-none]=\"isDisabled()\"\r\n  [id]=\"ngControl?.name || label()\"\r\n>\r\n  <mt-radio-cards\r\n    [options]=\"normalizedOptions()\"\r\n    [activeId]=\"selectedId()\"\r\n    [color]=\"color()\"\r\n    [size]=\"size()\"\r\n    [circle]=\"circle()\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n    [itemTemplate]=\"itemTemplate()\"\r\n  ></mt-radio-cards>\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { circle: [{ type: i0.Input, args: [{ isSignal: true, alias: "circle", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], optionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionLabel", required: false }] }], optionValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionValue", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], itemTemplate: [{ type: i0.ContentChild, args: ['option', { ...{ read: TemplateRef }, isSignal: true }] }] } });
+function normalizeRadioItem(option, optionLabel, optionValue) {
+    if (option === null || option === undefined) {
+        return null;
+    }
+    if (typeof option === 'string' || typeof option === 'number') {
+        return {
+            id: option,
+            name: String(option),
+        };
+    }
+    if (typeof option !== 'object') {
+        return null;
+    }
+    const source = option;
+    const id = readRadioItemValue(source, optionValue, ['id', 'value']);
+    if (typeof id !== 'string' && typeof id !== 'number') {
+        return null;
+    }
+    const name = readRadioItemValue(source, optionLabel, ['name', 'label']);
+    return {
+        ...source,
+        id,
+        name: typeof name === 'string' ? name : String(name ?? id),
+    };
+}
+function readRadioItemValue(source, preferredKey, fallbackKeys) {
+    const candidateKeys = [preferredKey, ...fallbackKeys].filter(Boolean);
+    for (const key of candidateKeys) {
+        if (key in source) {
+            return source[key];
+        }
+    }
+    return undefined;
+}
+
+/**
+ * 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 {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  computed,\r\n  effect,\r\n  input,\r\n  signal,\r\n  TemplateRef,\r\n  contentChild,\r\n  inject,\r\n  booleanAttribute,\r\n} from '@angular/core';\r\nimport {\r\n  ControlValueAccessor,\r\n  FormsModule,\r\n  NgControl,\r\n  Validators,\r\n} from '@angular/forms';\r\nimport { RadioCards, RadioItem } from '@masterteam/components/radio-cards';\r\nimport { FieldValidation } from '@masterteam/components/field-validation';\r\n\r\n@Component({\r\n  selector: 'mt-radio-cards-field',\r\n  standalone: true,\r\n  imports: [FormsModule, RadioCards, FieldValidation],\r\n  templateUrl: './radio-cards-field.html',\r\n  styleUrl: './radio-cards-field.css',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'grid gap-1',\r\n  },\r\n  providers: [],\r\n})\r\nexport class RadioCardsField implements ControlValueAccessor {\r\n  readonly circle = input<boolean, unknown>(false, {\r\n    transform: booleanAttribute,\r\n  });\r\n  readonly label = input<string>();\r\n  readonly readonly = input<boolean>(false);\r\n  readonly required = input<boolean>(false);\r\n  readonly color = input<string>('primary');\r\n  readonly size = input<'small' | 'medium' | 'large'>('medium');\r\n  readonly optionLabel = input<string>('label');\r\n  readonly optionValue = input<string>('value');\r\n  readonly options = input.required<unknown[]>();\r\n  readonly itemTemplate = contentChild('option', { read: TemplateRef });\r\n\r\n  protected selectedId = signal<string | number | null>(null);\r\n  protected isDisabled = signal(false);\r\n  protected readonly normalizedOptions = computed<RadioItem[]>(() =>\r\n    this.options()\r\n      .map((option) =>\r\n        normalizeRadioItem(option, this.optionLabel(), this.optionValue()),\r\n      )\r\n      .filter((option): option is RadioItem => option !== null),\r\n  );\r\n\r\n  requiredValidator = Validators.required;\r\n\r\n  public ngControl: NgControl | null = null;\r\n\r\n  constructor() {\r\n    try {\r\n      this.ngControl = inject(NgControl, { self: true, optional: true });\r\n      if (this.ngControl) {\r\n        this.ngControl.valueAccessor = this;\r\n      }\r\n    } catch (_e) {\r\n      this.ngControl = null;\r\n    }\r\n\r\n    effect(() => {\r\n      if (this.ngControl?.control && this.required()) {\r\n        this.ngControl.control.addValidators(Validators.required);\r\n        this.ngControl.control.updateValueAndValidity({ emitEvent: false });\r\n      }\r\n    });\r\n  }\r\n\r\n  // --- CVA Methods ---\r\n  private onChange: (value: string | number | null) => void = () => {};\r\n  private onTouched: () => void = () => {};\r\n\r\n  writeValue(value: string | number | null): void {\r\n    this.selectedId.set(value ?? null);\r\n  }\r\n\r\n  registerOnChange(fn: (value: string | number | null) => void): void {\r\n    this.onChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: () => void): void {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  setDisabledState(isDisabled: boolean): void {\r\n    this.isDisabled.set(isDisabled);\r\n  }\r\n\r\n  onSelectionChange(selectedItem: RadioItem): void {\r\n    if (this.isDisabled() || this.readonly()) {\r\n      return;\r\n    }\r\n\r\n    const newId = selectedItem.id;\r\n    this.selectedId.set(newId);\r\n\r\n    const control = this.ngControl?.control;\r\n    if (control) {\r\n      control.setValue(newId);\r\n      control.markAsDirty();\r\n      control.markAsTouched();\r\n      control.updateValueAndValidity({ emitEvent: false });\r\n      return;\r\n    }\r\n\r\n    this.onChange(newId);\r\n    this.onTouched();\r\n  }\r\n}\r\n\r\nfunction normalizeRadioItem(\r\n  option: unknown,\r\n  optionLabel: string,\r\n  optionValue: string,\r\n): RadioItem | null {\r\n  if (option === null || option === undefined) {\r\n    return null;\r\n  }\r\n\r\n  if (typeof option === 'string' || typeof option === 'number') {\r\n    return {\r\n      id: option,\r\n      name: String(option),\r\n    };\r\n  }\r\n\r\n  if (typeof option !== 'object') {\r\n    return null;\r\n  }\r\n\r\n  const source = option as Record<string, unknown>;\r\n  const id = readRadioItemValue(source, optionValue, ['id', 'value']);\r\n  if (typeof id !== 'string' && typeof id !== 'number') {\r\n    return null;\r\n  }\r\n\r\n  const name = readRadioItemValue(source, optionLabel, ['name', 'label']);\r\n\r\n  return {\r\n    ...source,\r\n    id,\r\n    name: typeof name === 'string' ? name : String(name ?? id),\r\n  };\r\n}\r\n\r\nfunction readRadioItemValue(\r\n  source: Record<string, unknown>,\r\n  preferredKey: string,\r\n  fallbackKeys: string[],\r\n): unknown {\r\n  const candidateKeys = [preferredKey, ...fallbackKeys].filter(Boolean);\r\n\r\n  for (const key of candidateKeys) {\r\n    if (key in source) {\r\n      return source[key];\r\n    }\r\n  }\r\n\r\n  return undefined;\r\n}\r\n","@if (label()) {\r\n  <label\r\n    [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n    [for]=\"ngControl?.name || label()\"\r\n    >{{ label() }}</label\r\n  >\r\n}\r\n<div\r\n  class=\"relative\"\r\n  [class.opacity-50]=\"isDisabled()\"\r\n  [class.pointer-events-none]=\"isDisabled()\"\r\n  [id]=\"ngControl?.name || label()\"\r\n>\r\n  <mt-radio-cards\r\n    [options]=\"normalizedOptions()\"\r\n    [activeId]=\"selectedId()\"\r\n    [color]=\"color()\"\r\n    [size]=\"size()\"\r\n    [circle]=\"circle()\"\r\n    (selectionChange)=\"onSelectionChange($event)\"\r\n    [itemTemplate]=\"itemTemplate()\"\r\n  ></mt-radio-cards>\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\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-radio-cards.mjs

@@ -0,0 +1,74 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, model, output, contentChild, TemplateRef, 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 });
+    color = input('primary', ...(ngDevMode ? [{ debugName: "color" }] : []));
+    size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Number of columns for grid layout. If not set, uses flex wrap. */
+    columns = input(null, ...(ngDevMode ? [{ debugName: "columns" }] : []));
+    avatarSize = computed(() => {
+        switch (this.size()) {
+            case 'small':
+                return 'normal';
+            case 'medium':
+                return 'large';
+            case 'large':
+                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 });
+    textSizeClass = computed(() => {
+        switch (this.size()) {
+            case 'small':
+                return 'text-xs';
+            case 'large':
+                return 'text-2xl';
+            default:
+                return 'text-base';
+        }
+    }, ...(ngDevMode ? [{ debugName: "textSizeClass" }] : []));
+    /** Container classes based on columns setting */
+    containerClasses = computed(() => {
+        const cols = this.columns();
+        if (cols) {
+            return `grid gap-2 grid-cols-${cols}`;
+        }
+        return 'flex flex-wrap gap-3';
+    }, ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
+    activeColorClasses = computed(() => {
+        return [
+            'bg-primary-50',
+            'dark:bg-primary-800',
+            'border-primary-400',
+            'ring-primary-200',
+        ];
+    }, ...(ngDevMode ? [{ debugName: "activeColorClasses" }] : []));
+    selectItem(item) {
+        if (this.activeId() !== item.id) {
+            this.activeId.set(item.id);
+            this.selectionChange.emit(item);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: RadioCards, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, columns: { classPropertyName: "columns", publicName: "columns", 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>\r\n  <div [class]=\"containerClasses()\">\r\n    @for (item of options(); track item.id) {\r\n      @let active = item.id === activeId();\r\n      <div\r\n        (click)=\"selectItem(item)\"\r\n        class=\"flex items-center space-x-2 px-3 py-2 rounded-lg cursor-pointer border-2 border-dashed transition-all ease-in-out duration-300\"\r\n        [class]=\"\r\n          active\r\n            ? 'bg-primary-50 dark:bg-primary-800 border-primary-400 ring-primary-200'\r\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'\r\n        \"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            itemTemplate() || itemTemplateContent() || defaultTemplate;\r\n            context: {\r\n              $implicit: item,\r\n              active: active,\r\n              size: size(),\r\n            }\r\n          \"\r\n        >\r\n        </ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultTemplate let-template let-active=\"active\" let-size=\"size\">\r\n  @if (template.icon) {\r\n    <mt-avatar\r\n      [shape]=\"circle() ? 'circle' : 'square'\"\r\n      [size]=\"avatarSize()\"\r\n      [icon]=\"template.icon\"\r\n      [style.--p-avatar-background]=\"\r\n        active ? 'var(--p-primary-color)' : 'var(--p-surface-100)'\r\n      \"\r\n      [style.--p-avatar-color]=\"active ? '#ffffff' : ''\"\r\n    ></mt-avatar>\r\n  }\r\n  @if (template.name) {\r\n    <span\r\n      [class]=\"[\r\n        'font-semibold',\r\n        textSizeClass(),\r\n        'dark:text-gray-100',\r\n        'text-gray-600',\r\n      ]\"\r\n    >\r\n      {{ template.name }}\r\n    </span>\r\n  }\r\n</ng-template>\r\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", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: RadioCards, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-radio-cards', standalone: true, imports: [NgTemplateOutlet, Avatar], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\r\n  <div [class]=\"containerClasses()\">\r\n    @for (item of options(); track item.id) {\r\n      @let active = item.id === activeId();\r\n      <div\r\n        (click)=\"selectItem(item)\"\r\n        class=\"flex items-center space-x-2 px-3 py-2 rounded-lg cursor-pointer border-2 border-dashed transition-all ease-in-out duration-300\"\r\n        [class]=\"\r\n          active\r\n            ? 'bg-primary-50 dark:bg-primary-800 border-primary-400 ring-primary-200'\r\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'\r\n        \"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            itemTemplate() || itemTemplateContent() || defaultTemplate;\r\n            context: {\r\n              $implicit: item,\r\n              active: active,\r\n              size: size(),\r\n            }\r\n          \"\r\n        >\r\n        </ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultTemplate let-template let-active=\"active\" let-size=\"size\">\r\n  @if (template.icon) {\r\n    <mt-avatar\r\n      [shape]=\"circle() ? 'circle' : 'square'\"\r\n      [size]=\"avatarSize()\"\r\n      [icon]=\"template.icon\"\r\n      [style.--p-avatar-background]=\"\r\n        active ? 'var(--p-primary-color)' : 'var(--p-surface-100)'\r\n      \"\r\n      [style.--p-avatar-color]=\"active ? '#ffffff' : ''\"\r\n    ></mt-avatar>\r\n  }\r\n  @if (template.name) {\r\n    <span\r\n      [class]=\"[\r\n        'font-semibold',\r\n        textSizeClass(),\r\n        'dark:text-gray-100',\r\n        'text-gray-600',\r\n      ]\"\r\n    >\r\n      {{ template.name }}\r\n    </span>\r\n  }\r\n</ng-template>\r\n", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { circle: [{ type: i0.Input, args: [{ isSignal: true, alias: "circle", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }, { type: i0.Output, args: ["optionsChange"] }], activeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeId", required: false }] }, { type: i0.Output, args: ["activeIdChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], itemTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemTemplate", required: false }] }], itemTemplateContent: [{ type: i0.ContentChild, args: ['option', { ...{ read: TemplateRef }, isSignal: true }] }] } });
+
+/**
+ * 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 {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  contentChild,\r\n  input,\r\n  output,\r\n  TemplateRef,\r\n  computed,\r\n  model,\r\n  booleanAttribute,\r\n} from '@angular/core';\r\nimport { MTIcon } from '@masterteam/icons';\r\nimport { Avatar } from '@masterteam/components/avatar';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\n\r\nexport interface RadioItem {\r\n  id: string | number;\r\n  name?: string;\r\n  icon?: MTIcon;\r\n  [key: string]: any;\r\n}\r\n\r\n@Component({\r\n  selector: 'mt-radio-cards',\r\n  standalone: true,\r\n  imports: [NgTemplateOutlet, Avatar],\r\n  templateUrl: './radio-cards.html',\r\n  styleUrl: './radio-cards.css',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n})\r\nexport class RadioCards {\r\n  circle = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  color = input<string>('primary');\r\n  size = input<'small' | 'medium' | 'large'>('medium');\r\n  /** Number of columns for grid layout. If not set, uses flex wrap. */\r\n  columns = input<number | null>(null);\r\n  avatarSize = computed(() => {\r\n    switch (this.size()) {\r\n      case 'small':\r\n        return 'normal';\r\n      case 'medium':\r\n        return 'large';\r\n      case 'large':\r\n        return 'xlarge';\r\n      default:\r\n        return 'normal';\r\n    }\r\n  });\r\n  options = model.required<RadioItem[]>();\r\n  activeId = model<string | number>();\r\n  selectionChange = output<RadioItem>();\r\n\r\n  itemTemplate = input<TemplateRef<any> | null>(null);\r\n  itemTemplateContent = contentChild('option', { read: TemplateRef });\r\n\r\n  textSizeClass = computed(() => {\r\n    switch (this.size()) {\r\n      case 'small':\r\n        return 'text-xs';\r\n\r\n      case 'large':\r\n        return 'text-2xl';\r\n\r\n      default:\r\n        return 'text-base';\r\n    }\r\n  });\r\n  /** Container classes based on columns setting */\r\n  containerClasses = computed(() => {\r\n    const cols = this.columns();\r\n    if (cols) {\r\n      return `grid gap-2 grid-cols-${cols}`;\r\n    }\r\n    return 'flex flex-wrap gap-3';\r\n  });\r\n\r\n  protected activeColorClasses = computed(() => {\r\n    return [\r\n      'bg-primary-50',\r\n      'dark:bg-primary-800',\r\n      'border-primary-400',\r\n      'ring-primary-200',\r\n    ];\r\n  });\r\n\r\n  public selectItem(item: RadioItem): void {\r\n    if (this.activeId() !== item.id) {\r\n      this.activeId.set(item.id);\r\n      this.selectionChange.emit(item);\r\n    }\r\n  }\r\n}\r\n","<div>\r\n  <div [class]=\"containerClasses()\">\r\n    @for (item of options(); track item.id) {\r\n      @let active = item.id === activeId();\r\n      <div\r\n        (click)=\"selectItem(item)\"\r\n        class=\"flex items-center space-x-2 px-3 py-2 rounded-lg cursor-pointer border-2 border-dashed transition-all ease-in-out duration-300\"\r\n        [class]=\"\r\n          active\r\n            ? 'bg-primary-50 dark:bg-primary-800 border-primary-400 ring-primary-200'\r\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'\r\n        \"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            itemTemplate() || itemTemplateContent() || defaultTemplate;\r\n            context: {\r\n              $implicit: item,\r\n              active: active,\r\n              size: size(),\r\n            }\r\n          \"\r\n        >\r\n        </ng-container>\r\n      </div>\r\n    }\r\n  </div>\r\n</div>\r\n\r\n<ng-template #defaultTemplate let-template let-active=\"active\" let-size=\"size\">\r\n  @if (template.icon) {\r\n    <mt-avatar\r\n      [shape]=\"circle() ? 'circle' : 'square'\"\r\n      [size]=\"avatarSize()\"\r\n      [icon]=\"template.icon\"\r\n      [style.--p-avatar-background]=\"\r\n        active ? 'var(--p-primary-color)' : 'var(--p-surface-100)'\r\n      \"\r\n      [style.--p-avatar-color]=\"active ? '#ffffff' : ''\"\r\n    ></mt-avatar>\r\n  }\r\n  @if (template.name) {\r\n    <span\r\n      [class]=\"[\r\n        'font-semibold',\r\n        textSizeClass(),\r\n        'dark:text-gray-100',\r\n        'text-gray-600',\r\n      ]\"\r\n    >\r\n      {{ template.name }}\r\n    </span>\r\n  }\r\n</ng-template>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MA8Ba,UAAU,CAAA;IACrB,MAAM,GAAG,KAAK,CAAmB,KAAK,mDAAI,SAAS,EAAE,gBAAgB,EAAA,CAAG;AACxE,IAAA,KAAK,GAAG,KAAK,CAAS,SAAS,iDAAC;AAChC,IAAA,IAAI,GAAG,KAAK,CAA+B,QAAQ,gDAAC;;AAEpD,IAAA,OAAO,GAAG,KAAK,CAAgB,IAAI,mDAAC;AACpC,IAAA,UAAU,GAAG,QAAQ,CAAC,MAAK;AACzB,QAAA,QAAQ,IAAI,CAAC,IAAI,EAAE;AACjB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,QAAQ;AACjB,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,OAAO;AAChB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,QAAQ;AACjB,YAAA;AACE,gBAAA,OAAO,QAAQ;;AAErB,IAAA,CAAC,sDAAC;AACF,IAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,kDAAe;IACvC,QAAQ,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAmB;IACnC,eAAe,GAAG,MAAM,EAAa;AAErC,IAAA,YAAY,GAAG,KAAK,CAA0B,IAAI,wDAAC;IACnD,mBAAmB,GAAG,YAAY,CAAC,QAAQ,gEAAI,IAAI,EAAE,WAAW,EAAA,CAAG;AAEnE,IAAA,aAAa,GAAG,QAAQ,CAAC,MAAK;AAC5B,QAAA,QAAQ,IAAI,CAAC,IAAI,EAAE;AACjB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,SAAS;AAElB,YAAA,KAAK,OAAO;AACV,gBAAA,OAAO,UAAU;AAEnB,YAAA;AACE,gBAAA,OAAO,WAAW;;AAExB,IAAA,CAAC,yDAAC;;AAEF,IAAA,gBAAgB,GAAG,QAAQ,CAAC,MAAK;AAC/B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,EAAE;QAC3B,IAAI,IAAI,EAAE;YACR,OAAO,CAAA,qBAAA,EAAwB,IAAI,CAAA,CAAE;QACvC;AACA,QAAA,OAAO,sBAAsB;AAC/B,IAAA,CAAC,4DAAC;AAEQ,IAAA,kBAAkB,GAAG,QAAQ,CAAC,MAAK;QAC3C,OAAO;YACL,eAAe;YACf,qBAAqB;YACrB,oBAAoB;YACpB,kBAAkB;SACnB;AACH,IAAA,CAAC,8DAAC;AAEK,IAAA,UAAU,CAAC,IAAe,EAAA;QAC/B,IAAI,IAAI,CAAC,QAAQ,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;YAC/B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;AAC1B,YAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;QACjC;IACF;uGA5DW,UAAU,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAV,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAU,ooCAuBgC,WAAW,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrDlE,quDAsDA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,ED7BY,gBAAgB,oJAAE,MAAM,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,YAAA,EAAA,MAAA,EAAA,OAAA,EAAA,OAAA,EAAA,WAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAKvB,UAAU,EAAA,UAAA,EAAA,CAAA;kBARtB,SAAS;+BACE,gBAAgB,EAAA,UAAA,EACd,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,EAAE,MAAM,CAAC,EAAA,eAAA,EAGlB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,quDAAA,EAAA,MAAA,EAAA,CAAA,wBAAA,CAAA,EAAA;AAyBZ,SAAA,CAAA,EAAA,cAAA,EAAA,EAAA,MAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,QAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,KAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,MAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,OAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,eAAA,CAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,UAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,gBAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,MAAA,EAAA,IAAA,EAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,KAAA,EAAA,cAAA,EAAA,QAAA,EAAA,KAAA,EAAA,CAAA,EAAA,CAAA,EAAA,mBAAA,EAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,IAAA,EAAA,CAAA,QAAQ,EAAA,EAAA,GAAE,EAAE,IAAI,EAAE,WAAW,EAAE,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AErDpE;;AAEG;;;;"}

package/fesm2022/masterteam-components-sidebar.mjs

@@ -0,0 +1,36 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, signal, output, Component } from '@angular/core';
+import { Icon } from '@masterteam/icons';
+import { RouterLinkActive, RouterLink } from '@angular/router';
+import { Tooltip } from '@masterteam/components/tooltip';
+
+class Sidebar {
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    logo = input(...(ngDevMode ? [undefined, { debugName: "logo" }] : []));
+    logoLink = input(...(ngDevMode ? [undefined, { debugName: "logoLink" }] : []));
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+    subTitle = input(...(ngDevMode ? [undefined, { debugName: "subTitle" }] : []));
+    bgColor = input(...(ngDevMode ? [undefined, { debugName: "bgColor" }] : []));
+    bgImage = input(...(ngDevMode ? [undefined, { debugName: "bgImage" }] : []));
+    bgRepeat = input(false, { ...(ngDevMode ? { debugName: "bgRepeat" } : {}), transform: booleanAttribute });
+    iconsColor = input('var(--p-text-color)', ...(ngDevMode ? [{ debugName: "iconsColor" }] : []));
+    expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+    expandedChange = output();
+    toggleSidebar() {
+        this.expanded.update((v) => !v);
+        this.expandedChange.emit(this.expanded());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: Sidebar, isStandalone: true, selector: "mt-sidebar", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, logoLink: { classPropertyName: "logoLink", publicName: "logoLink", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subTitle: { classPropertyName: "subTitle", publicName: "subTitle", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, bgImage: { classPropertyName: "bgImage", publicName: "bgImage", isSignal: true, isRequired: false, transformFunction: null }, bgRepeat: { classPropertyName: "bgRepeat", publicName: "bgRepeat", isSignal: true, isRequired: false, transformFunction: null }, iconsColor: { classPropertyName: "iconsColor", publicName: "iconsColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandedChange: "expandedChange" }, ngImport: i0, template: "<div\r\n  class=\"flex h-full min-h-0 flex-col overflow-hidden border-e-1 border-surface-300 bg-surface-200 transition-all duration-400 ease-in-out dark:bg-surface-800\"\r\n  [style.width]=\"expanded() ? '16rem' : '4rem'\"\r\n>\r\n  <div\r\n    class=\"flex h-full min-h-0 flex-col gap-3 px-2 py-4\"\r\n    [style.backgroundColor]=\"bgColor()\"\r\n    [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n    [class.bg-no-repeat]=\"!bgRepeat()\"\r\n    [class.bg-repeat-y]=\"bgRepeat()\"\r\n  >\r\n    <!-- Toggle Button & Branding -->\r\n    <div class=\"flex shrink-0 items-center gap-2\">\r\n      <button\r\n        type=\"button\"\r\n        size=\"large\"\r\n        class=\"flex items-center justify-center w-[47px] h-[40px] hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors rounded-xl cursor-pointer shrink-0\"\r\n        [style.color]=\"iconsColor()\"\r\n        (click)=\"toggleSidebar()\"\r\n      >\r\n        <mt-icon\r\n          icon=\"general.menu-01\"\r\n          class=\"text-lg transition-transform duration-400 ease-in-out\"\r\n          [class.rotate-180]=\"expanded()\"\r\n        />\r\n      </button>\r\n\r\n      @if (logo() || title()) {\r\n        <div\r\n          class=\"flex items-center gap-2 overflow-hidden transition-all duration-400 ease-in-out\"\r\n          [class.max-w-0]=\"!expanded()\"\r\n          [class.opacity-0]=\"!expanded()\"\r\n          [class.max-w-xs]=\"expanded()\"\r\n          [class.opacity-100]=\"expanded()\"\r\n        >\r\n          @if (logo()) {\r\n            <img\r\n              [src]=\"logo()\"\r\n              alt=\"Logo\"\r\n              class=\"h-8 shrink-0\"\r\n              [routerLink]=\"logoLink()\"\r\n              [class.cursor-pointer]=\"logoLink()\"\r\n            />\r\n          }\r\n          @if (logo() && (title() || subTitle())) {\r\n            <div\r\n              class=\"h-6 w-[1px] bg-current opacity-30 shrink-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            ></div>\r\n          }\r\n          @if (title() || subTitle()) {\r\n            <div\r\n              class=\"flex flex-col gap-0.5 min-w-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            >\r\n              <span class=\"text-sm font-semibold truncate\">{{ title() }}</span>\r\n              @if (subTitle()) {\r\n                <span class=\"text-xs opacity-70 truncate\">{{\r\n                  subTitle()\r\n                }}</span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div\r\n      class=\"mt-sidebar-menu flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto overscroll-contain\"\r\n      [class.mt-sidebar-menu-collapsed]=\"!expanded()\"\r\n      [class.pr-1]=\"expanded()\"\r\n      [class.pr-px]=\"!expanded()\"\r\n    >\r\n      @for (item of items(); track item.id) {\r\n        <a\r\n          [routerLink]=\"item.routerLink\"\r\n          routerLinkActive=\"bg-primary-50 dark:bg-primary-900\"\r\n          #rla=\"routerLinkActive\"\r\n          class=\"flex items-center gap-3 h-[47px] min-w-[47px] shrink-0 dark:hover:bg-surface-900 hover:bg-primary-50 transition-colors rounded-xl overflow-hidden\"\r\n          mtTooltip=\"{{ item.title }}\"\r\n          [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n        >\r\n          <div class=\"px-4\">\r\n            <mt-icon [icon]=\"item.icon\" class=\"shrink-0\" />\r\n          </div>\r\n          <div\r\n            class=\"whitespace-nowrap text-sm font-medium transition-all duration-400 ease-in-out overflow-hidden\"\r\n            [class.opacity-0]=\"!expanded()\"\r\n            [class.max-w-xs]=\"expanded()\"\r\n            [class.opacity-100]=\"expanded()\"\r\n          >\r\n            {{ item.title }}\r\n          </div>\r\n        </a>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;height:100%;min-height:0}.mt-sidebar-menu{scrollbar-width:thin;scrollbar-color:var(--p-surface-400) transparent}.mt-sidebar-menu::-webkit-scrollbar{width:6px}.mt-sidebar-menu::-webkit-scrollbar-track{background:transparent}.mt-sidebar-menu::-webkit-scrollbar-thumb{border-radius:9999px;background:color-mix(in srgb,var(--p-surface-500) 58%,transparent)}.mt-sidebar-menu::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-surface-600) 72%,transparent)}.mt-sidebar-menu-collapsed{scrollbar-color:var(--p-surface-500) transparent}.mt-sidebar-menu-collapsed::-webkit-scrollbar{width:2px}.mt-sidebar-menu-collapsed::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-surface-600) 82%,transparent)}\n"], dependencies: [{ kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: Icon, selector: "mt-icon", inputs: ["icon"] }, { kind: "directive", type: Tooltip, selector: "[mtTooltip]" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: Sidebar, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-sidebar', standalone: true, imports: [RouterLinkActive, RouterLink, Icon, Tooltip], template: "<div\r\n  class=\"flex h-full min-h-0 flex-col overflow-hidden border-e-1 border-surface-300 bg-surface-200 transition-all duration-400 ease-in-out dark:bg-surface-800\"\r\n  [style.width]=\"expanded() ? '16rem' : '4rem'\"\r\n>\r\n  <div\r\n    class=\"flex h-full min-h-0 flex-col gap-3 px-2 py-4\"\r\n    [style.backgroundColor]=\"bgColor()\"\r\n    [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n    [class.bg-no-repeat]=\"!bgRepeat()\"\r\n    [class.bg-repeat-y]=\"bgRepeat()\"\r\n  >\r\n    <!-- Toggle Button & Branding -->\r\n    <div class=\"flex shrink-0 items-center gap-2\">\r\n      <button\r\n        type=\"button\"\r\n        size=\"large\"\r\n        class=\"flex items-center justify-center w-[47px] h-[40px] hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors rounded-xl cursor-pointer shrink-0\"\r\n        [style.color]=\"iconsColor()\"\r\n        (click)=\"toggleSidebar()\"\r\n      >\r\n        <mt-icon\r\n          icon=\"general.menu-01\"\r\n          class=\"text-lg transition-transform duration-400 ease-in-out\"\r\n          [class.rotate-180]=\"expanded()\"\r\n        />\r\n      </button>\r\n\r\n      @if (logo() || title()) {\r\n        <div\r\n          class=\"flex items-center gap-2 overflow-hidden transition-all duration-400 ease-in-out\"\r\n          [class.max-w-0]=\"!expanded()\"\r\n          [class.opacity-0]=\"!expanded()\"\r\n          [class.max-w-xs]=\"expanded()\"\r\n          [class.opacity-100]=\"expanded()\"\r\n        >\r\n          @if (logo()) {\r\n            <img\r\n              [src]=\"logo()\"\r\n              alt=\"Logo\"\r\n              class=\"h-8 shrink-0\"\r\n              [routerLink]=\"logoLink()\"\r\n              [class.cursor-pointer]=\"logoLink()\"\r\n            />\r\n          }\r\n          @if (logo() && (title() || subTitle())) {\r\n            <div\r\n              class=\"h-6 w-[1px] bg-current opacity-30 shrink-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            ></div>\r\n          }\r\n          @if (title() || subTitle()) {\r\n            <div\r\n              class=\"flex flex-col gap-0.5 min-w-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            >\r\n              <span class=\"text-sm font-semibold truncate\">{{ title() }}</span>\r\n              @if (subTitle()) {\r\n                <span class=\"text-xs opacity-70 truncate\">{{\r\n                  subTitle()\r\n                }}</span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div\r\n      class=\"mt-sidebar-menu flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto overscroll-contain\"\r\n      [class.mt-sidebar-menu-collapsed]=\"!expanded()\"\r\n      [class.pr-1]=\"expanded()\"\r\n      [class.pr-px]=\"!expanded()\"\r\n    >\r\n      @for (item of items(); track item.id) {\r\n        <a\r\n          [routerLink]=\"item.routerLink\"\r\n          routerLinkActive=\"bg-primary-50 dark:bg-primary-900\"\r\n          #rla=\"routerLinkActive\"\r\n          class=\"flex items-center gap-3 h-[47px] min-w-[47px] shrink-0 dark:hover:bg-surface-900 hover:bg-primary-50 transition-colors rounded-xl overflow-hidden\"\r\n          mtTooltip=\"{{ item.title }}\"\r\n          [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n        >\r\n          <div class=\"px-4\">\r\n            <mt-icon [icon]=\"item.icon\" class=\"shrink-0\" />\r\n          </div>\r\n          <div\r\n            class=\"whitespace-nowrap text-sm font-medium transition-all duration-400 ease-in-out overflow-hidden\"\r\n            [class.opacity-0]=\"!expanded()\"\r\n            [class.max-w-xs]=\"expanded()\"\r\n            [class.opacity-100]=\"expanded()\"\r\n          >\r\n            {{ item.title }}\r\n          </div>\r\n        </a>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:block;height:100%;min-height:0}.mt-sidebar-menu{scrollbar-width:thin;scrollbar-color:var(--p-surface-400) transparent}.mt-sidebar-menu::-webkit-scrollbar{width:6px}.mt-sidebar-menu::-webkit-scrollbar-track{background:transparent}.mt-sidebar-menu::-webkit-scrollbar-thumb{border-radius:9999px;background:color-mix(in srgb,var(--p-surface-500) 58%,transparent)}.mt-sidebar-menu::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--p-surface-600) 72%,transparent)}.mt-sidebar-menu-collapsed{scrollbar-color:var(--p-surface-500) transparent}.mt-sidebar-menu-collapsed::-webkit-scrollbar{width:2px}.mt-sidebar-menu-collapsed::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-surface-600) 82%,transparent)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], logoLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoLink", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subTitle", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], bgImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgImage", required: false }] }], bgRepeat: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgRepeat", required: false }] }], iconsColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconsColor", required: false }] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Sidebar };
+//# sourceMappingURL=masterteam-components-sidebar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masterteam-components-sidebar.mjs","sources":["../../../../packages/masterteam/components/sidebar/sidebar.ts","../../../../packages/masterteam/components/sidebar/sidebar.html","../../../../packages/masterteam/components/sidebar/masterteam-components-sidebar.ts"],"sourcesContent":["import {\r\n  booleanAttribute,\r\n  Component,\r\n  input,\r\n  output,\r\n  signal,\r\n} from '@angular/core';\r\nimport { Icon, MTIcon } from '@masterteam/icons';\r\nimport { RouterLink, RouterLinkActive } from '@angular/router';\r\nimport { Tooltip } from '@masterteam/components/tooltip';\r\n\r\nexport interface SidebarItem {\r\n  id: string | number;\r\n  title: string;\r\n  icon?: MTIcon;\r\n  routerLink?: any[] | string;\r\n}\r\n\r\n@Component({\r\n  selector: 'mt-sidebar',\r\n  standalone: true,\r\n  imports: [RouterLinkActive, RouterLink, Icon, Tooltip],\r\n  templateUrl: './sidebar.html',\r\n  styles: [\r\n    `\r\n      :host {\r\n        display: block;\r\n        height: 100%;\r\n        min-height: 0;\r\n      }\r\n\r\n      .mt-sidebar-menu {\r\n        scrollbar-width: thin;\r\n        scrollbar-color: var(--p-surface-400) transparent;\r\n      }\r\n\r\n      .mt-sidebar-menu::-webkit-scrollbar {\r\n        width: 6px;\r\n      }\r\n\r\n      .mt-sidebar-menu::-webkit-scrollbar-track {\r\n        background: transparent;\r\n      }\r\n\r\n      .mt-sidebar-menu::-webkit-scrollbar-thumb {\r\n        border-radius: 9999px;\r\n        background: color-mix(in srgb, var(--p-surface-500) 58%, transparent);\r\n      }\r\n\r\n      .mt-sidebar-menu::-webkit-scrollbar-thumb:hover {\r\n        background: color-mix(in srgb, var(--p-surface-600) 72%, transparent);\r\n      }\r\n\r\n      .mt-sidebar-menu-collapsed {\r\n        scrollbar-color: var(--p-surface-500) transparent;\r\n      }\r\n\r\n      .mt-sidebar-menu-collapsed::-webkit-scrollbar {\r\n        width: 2px;\r\n      }\r\n\r\n      .mt-sidebar-menu-collapsed::-webkit-scrollbar-thumb {\r\n        background: color-mix(in srgb, var(--p-surface-600) 82%, transparent);\r\n      }\r\n    `,\r\n  ],\r\n})\r\nexport class Sidebar {\r\n  items = input<SidebarItem[]>([]);\r\n\r\n  logo = input<string>();\r\n  logoLink = input<string | any[]>();\r\n  title = input<string>();\r\n  subTitle = input<string>();\r\n\r\n  bgColor = input<string>();\r\n  bgImage = input<string>();\r\n  bgRepeat = input<boolean, unknown>(false, { transform: booleanAttribute });\r\n  iconsColor = input<string>('var(--p-text-color)');\r\n\r\n  expanded = signal(false);\r\n  expandedChange = output<boolean>();\r\n\r\n  toggleSidebar(): void {\r\n    this.expanded.update((v) => !v);\r\n    this.expandedChange.emit(this.expanded());\r\n  }\r\n}\r\n","<div\r\n  class=\"flex h-full min-h-0 flex-col overflow-hidden border-e-1 border-surface-300 bg-surface-200 transition-all duration-400 ease-in-out dark:bg-surface-800\"\r\n  [style.width]=\"expanded() ? '16rem' : '4rem'\"\r\n>\r\n  <div\r\n    class=\"flex h-full min-h-0 flex-col gap-3 px-2 py-4\"\r\n    [style.backgroundColor]=\"bgColor()\"\r\n    [style.backgroundImage]=\"bgImage() ? 'url(' + bgImage() + ')' : null\"\r\n    [class.bg-no-repeat]=\"!bgRepeat()\"\r\n    [class.bg-repeat-y]=\"bgRepeat()\"\r\n  >\r\n    <!-- Toggle Button & Branding -->\r\n    <div class=\"flex shrink-0 items-center gap-2\">\r\n      <button\r\n        type=\"button\"\r\n        size=\"large\"\r\n        class=\"flex items-center justify-center w-[47px] h-[40px] hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors rounded-xl cursor-pointer shrink-0\"\r\n        [style.color]=\"iconsColor()\"\r\n        (click)=\"toggleSidebar()\"\r\n      >\r\n        <mt-icon\r\n          icon=\"general.menu-01\"\r\n          class=\"text-lg transition-transform duration-400 ease-in-out\"\r\n          [class.rotate-180]=\"expanded()\"\r\n        />\r\n      </button>\r\n\r\n      @if (logo() || title()) {\r\n        <div\r\n          class=\"flex items-center gap-2 overflow-hidden transition-all duration-400 ease-in-out\"\r\n          [class.max-w-0]=\"!expanded()\"\r\n          [class.opacity-0]=\"!expanded()\"\r\n          [class.max-w-xs]=\"expanded()\"\r\n          [class.opacity-100]=\"expanded()\"\r\n        >\r\n          @if (logo()) {\r\n            <img\r\n              [src]=\"logo()\"\r\n              alt=\"Logo\"\r\n              class=\"h-8 shrink-0\"\r\n              [routerLink]=\"logoLink()\"\r\n              [class.cursor-pointer]=\"logoLink()\"\r\n            />\r\n          }\r\n          @if (logo() && (title() || subTitle())) {\r\n            <div\r\n              class=\"h-6 w-[1px] bg-current opacity-30 shrink-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            ></div>\r\n          }\r\n          @if (title() || subTitle()) {\r\n            <div\r\n              class=\"flex flex-col gap-0.5 min-w-0\"\r\n              [style.color]=\"iconsColor()\"\r\n            >\r\n              <span class=\"text-sm font-semibold truncate\">{{ title() }}</span>\r\n              @if (subTitle()) {\r\n                <span class=\"text-xs opacity-70 truncate\">{{\r\n                  subTitle()\r\n                }}</span>\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n\r\n    <div\r\n      class=\"mt-sidebar-menu flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto overscroll-contain\"\r\n      [class.mt-sidebar-menu-collapsed]=\"!expanded()\"\r\n      [class.pr-1]=\"expanded()\"\r\n      [class.pr-px]=\"!expanded()\"\r\n    >\r\n      @for (item of items(); track item.id) {\r\n        <a\r\n          [routerLink]=\"item.routerLink\"\r\n          routerLinkActive=\"bg-primary-50 dark:bg-primary-900\"\r\n          #rla=\"routerLinkActive\"\r\n          class=\"flex items-center gap-3 h-[47px] min-w-[47px] shrink-0 dark:hover:bg-surface-900 hover:bg-primary-50 transition-colors rounded-xl overflow-hidden\"\r\n          mtTooltip=\"{{ item.title }}\"\r\n          [style.color]=\"rla.isActive ? 'var(--p-primary-500)' : iconsColor()\"\r\n        >\r\n          <div class=\"px-4\">\r\n            <mt-icon [icon]=\"item.icon\" class=\"shrink-0\" />\r\n          </div>\r\n          <div\r\n            class=\"whitespace-nowrap text-sm font-medium transition-all duration-400 ease-in-out overflow-hidden\"\r\n            [class.opacity-0]=\"!expanded()\"\r\n            [class.max-w-xs]=\"expanded()\"\r\n            [class.opacity-100]=\"expanded()\"\r\n          >\r\n            {{ item.title }}\r\n          </div>\r\n        </a>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\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-slider-field.mjs

@@ -0,0 +1,104 @@
+import * as i0 from '@angular/core';
+import { input, numberAttribute, booleanAttribute, EventEmitter, signal, computed, inject, effect, HostBinding, Output, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { Validators, NgControl, FormsModule } from '@angular/forms';
+import * as i2 from 'primeng/slider';
+import { SliderModule } from 'primeng/slider';
+import { FieldValidation } from '@masterteam/components/field-validation';
+import { isInvalid } from '@masterteam/components';
+
+class SliderField {
+    input;
+    field = input(true, ...(ngDevMode ? [{ debugName: "field" }] : []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+    animate = input(false, ...(ngDevMode ? [{ debugName: "animate" }] : []));
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    min = input(0, { ...(ngDevMode ? { debugName: "min" } : {}), transform: numberAttribute });
+    max = input(100, { ...(ngDevMode ? { debugName: "max" } : {}), transform: numberAttribute });
+    step = input(undefined, { ...(ngDevMode ? { debugName: "step" } : {}), transform: numberAttribute });
+    hideNumber = input(false, { ...(ngDevMode ? { debugName: "hideNumber" } : {}), transform: booleanAttribute });
+    unit = input('%', ...(ngDevMode ? [{ debugName: "unit" }] : []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+    pInputs = input(...(ngDevMode ? [undefined, { debugName: "pInputs" }] : []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    onChange = new EventEmitter();
+    onSlideEnd = new EventEmitter();
+    styleClass;
+    requiredValidator = Validators.required;
+    value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    displayValue = computed(() => {
+        const value = this.value();
+        if (value === null || value === undefined) {
+            return '-';
+        }
+        return `${value}${this.unit()}`;
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
+    onTouched = () => { };
+    onModelChange = () => { };
+    ngControl = inject(NgControl, { self: true });
+    isInvalid = isInvalid;
+    constructor() {
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        effect(() => {
+            if (this.ngControl.control && this.required()) {
+                this.ngControl.control.addValidators(Validators.required);
+                this.ngControl.control.updateValueAndValidity();
+            }
+        });
+    }
+    applyInputsToInput() {
+        Object.assign(this.input, this.pInputs());
+    }
+    ngOnInit() {
+        this.styleClass = this.class();
+    }
+    onValueChange(value) {
+        this.onModelChange(value);
+        this.value.set(value);
+    }
+    ngOnChanges(changes) {
+        if (changes['pInputs']) {
+            this.applyInputsToInput();
+        }
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onModelChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled.set(disabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SliderField, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: SliderField, isStandalone: true, selector: "mt-slider-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, hideNumber: { classPropertyName: "hideNumber", publicName: "hideNumber", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, pInputs: { classPropertyName: "pInputs", publicName: "pInputs", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChange: "onChange", onSlideEnd: "onSlideEnd" }, host: { properties: { "class": "this.styleClass" }, classAttribute: "grid gap-1" }, viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "@if (label() || !hideNumber()) {\r\n  <div class=\"flex items-end justify-between gap-3\">\r\n    @if (label()) {\r\n      <label\r\n        class=\"leading-none\"\r\n        [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n        [for]=\"ngControl?.name || label()\"\r\n        >{{ label() }}</label\r\n      >\r\n    }\r\n    @if (!hideNumber()) {\r\n      <span\r\n        class=\"min-w-12 text-right text-sm font-medium leading-none text-muted-color tabular-nums\"\r\n      >\r\n        {{ displayValue() }}\r\n      </span>\r\n    }\r\n  </div>\r\n}\r\n<div class=\"w-full my-2\">\r\n  <p-slider\r\n    #input\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (onChange)=\"onChange.emit($event)\"\r\n    (onSlideEnd)=\"onTouched(); onSlideEnd.emit($event)\"\r\n    [disabled]=\"disabled() || readonly()\"\r\n    [animate]=\"animate()\"\r\n    [id]=\"ngControl?.name || label()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [step]=\"step()\"\r\n    [invalid]=\"isInvalid(ngControl?.control)\"\r\n    class=\"block w-full\"\r\n  ></p-slider>\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [":host{--p-slider-track-size: .75rem}:host ::ng-deep .p-slider{background:var(--p-surface-200);border-radius:9999px}:host ::ng-deep .p-slider.p-slider-horizontal{height:var(--p-slider-track-size)}:host ::ng-deep .p-slider-range{border-radius:inherit}\n"], dependencies: [{ 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"] }, { kind: "ngmodule", type: SliderModule }, { kind: "component", type: i2.Slider, selector: "p-slider", inputs: ["animate", "min", "max", "orientation", "step", "range", "styleClass", "ariaLabel", "ariaLabelledBy", "tabindex", "autofocus"], outputs: ["onChange", "onSlideEnd"] }, { kind: "component", type: FieldValidation, selector: "mt-field-validation", inputs: ["control", "touched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: SliderField, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-slider-field', standalone: true, imports: [FormsModule, SliderModule, FieldValidation], changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'grid gap-1',
+                    }, template: "@if (label() || !hideNumber()) {\r\n  <div class=\"flex items-end justify-between gap-3\">\r\n    @if (label()) {\r\n      <label\r\n        class=\"leading-none\"\r\n        [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n        [for]=\"ngControl?.name || label()\"\r\n        >{{ label() }}</label\r\n      >\r\n    }\r\n    @if (!hideNumber()) {\r\n      <span\r\n        class=\"min-w-12 text-right text-sm font-medium leading-none text-muted-color tabular-nums\"\r\n      >\r\n        {{ displayValue() }}\r\n      </span>\r\n    }\r\n  </div>\r\n}\r\n<div class=\"w-full my-2\">\r\n  <p-slider\r\n    #input\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (onChange)=\"onChange.emit($event)\"\r\n    (onSlideEnd)=\"onTouched(); onSlideEnd.emit($event)\"\r\n    [disabled]=\"disabled() || readonly()\"\r\n    [animate]=\"animate()\"\r\n    [id]=\"ngControl?.name || label()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [step]=\"step()\"\r\n    [invalid]=\"isInvalid(ngControl?.control)\"\r\n    class=\"block w-full\"\r\n  ></p-slider>\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\n", styles: [":host{--p-slider-track-size: .75rem}:host ::ng-deep .p-slider{background:var(--p-surface-200);border-radius:9999px}:host ::ng-deep .p-slider.p-slider-horizontal{height:var(--p-slider-track-size)}:host ::ng-deep .p-slider-range{border-radius:inherit}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { input: [{
+                type: ViewChild,
+                args: ['input', { static: true }]
+            }], field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], hideNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideNumber", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], pInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "pInputs", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], onChange: [{
+                type: Output
+            }], onSlideEnd: [{
+                type: Output
+            }], styleClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SliderField };
+//# sourceMappingURL=masterteam-components-slider-field.mjs.map

package/fesm2022/masterteam-components-slider-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masterteam-components-slider-field.mjs","sources":["../../../../packages/masterteam/components/slider-field/slider-field.ts","../../../../packages/masterteam/components/slider-field/slider-field.html","../../../../packages/masterteam/components/slider-field/masterteam-components-slider-field.ts"],"sourcesContent":["import {\r\n  Component,\r\n  EventEmitter,\r\n  HostBinding,\r\n  Output,\r\n  SimpleChanges,\r\n  ViewChild,\r\n  booleanAttribute,\r\n  computed,\r\n  input,\r\n  numberAttribute,\r\n  signal,\r\n  OnInit,\r\n  OnChanges,\r\n  inject,\r\n  ChangeDetectionStrategy,\r\n  effect,\r\n} from '@angular/core';\r\nimport {\r\n  ControlValueAccessor,\r\n  FormsModule,\r\n  NgControl,\r\n  Validators,\r\n} from '@angular/forms';\r\nimport {\r\n  Slider,\r\n  SliderChangeEvent,\r\n  SliderSlideEndEvent,\r\n  SliderModule,\r\n} from 'primeng/slider';\r\nimport { FieldValidation } from '@masterteam/components/field-validation';\r\nimport { isInvalid } from '@masterteam/components';\r\n\r\n@Component({\r\n  selector: 'mt-slider-field',\r\n  standalone: true,\r\n  imports: [FormsModule, SliderModule, FieldValidation],\r\n  templateUrl: './slider-field.html',\r\n  styleUrls: ['./slider-field.scss'],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'grid gap-1',\r\n  },\r\n})\r\nexport class SliderField implements ControlValueAccessor, OnInit, OnChanges {\r\n  @ViewChild('input', { static: true })\r\n  input: Slider;\r\n\r\n  readonly field = input<boolean>(true);\r\n  readonly label = input<string>();\r\n  readonly animate = input<boolean>(false);\r\n  readonly class = input<string>('');\r\n  readonly min = input<number, unknown>(0, { transform: numberAttribute });\r\n  readonly max = input<number, unknown>(100, { transform: numberAttribute });\r\n  readonly step = input<number, unknown>(undefined, {\r\n    transform: numberAttribute,\r\n  });\r\n  readonly hideNumber = input<boolean, unknown>(false, {\r\n    transform: booleanAttribute,\r\n  });\r\n  readonly unit = input<string>('%');\r\n  readonly readonly = input<boolean>(false);\r\n  readonly pInputs = input<Partial<Slider>>();\r\n  readonly required = input<boolean>(false);\r\n\r\n  @Output() onChange: EventEmitter<SliderChangeEvent> = new EventEmitter();\r\n  @Output() onSlideEnd: EventEmitter<SliderSlideEndEvent> = new EventEmitter();\r\n\r\n  @HostBinding('class') styleClass: string;\r\n\r\n  requiredValidator = Validators.required;\r\n  value = signal<number | null>(null);\r\n  disabled = signal<boolean>(false);\r\n  displayValue = computed(() => {\r\n    const value = this.value();\r\n    if (value === null || value === undefined) {\r\n      return '-';\r\n    }\r\n    return `${value}${this.unit()}`;\r\n  });\r\n\r\n  onTouched: () => void = () => {};\r\n  onModelChange: (value: number | null) => void = () => {};\r\n\r\n  public ngControl = inject(NgControl, { self: true });\r\n\r\n  isInvalid = isInvalid;\r\n\r\n  constructor() {\r\n    if (this.ngControl) {\r\n      this.ngControl.valueAccessor = this;\r\n    }\r\n    effect(() => {\r\n      if (this.ngControl.control && this.required()) {\r\n        this.ngControl.control.addValidators(Validators.required);\r\n        this.ngControl.control.updateValueAndValidity();\r\n      }\r\n    });\r\n  }\r\n\r\n  applyInputsToInput() {\r\n    Object.assign(this.input, this.pInputs());\r\n  }\r\n\r\n  ngOnInit() {\r\n    this.styleClass = this.class();\r\n  }\r\n  onValueChange(value: number | null) {\r\n    this.onModelChange(value);\r\n    this.value.set(value);\r\n  }\r\n  ngOnChanges(changes: SimpleChanges) {\r\n    if (changes['pInputs']) {\r\n      this.applyInputsToInput();\r\n    }\r\n  }\r\n\r\n  writeValue(value: number) {\r\n    this.value.set(value);\r\n  }\r\n\r\n  registerOnChange(fn: any) {\r\n    this.onModelChange = fn;\r\n  }\r\n\r\n  registerOnTouched(fn: any) {\r\n    this.onTouched = fn;\r\n  }\r\n\r\n  setDisabledState(disabled: boolean) {\r\n    this.disabled.set(disabled);\r\n  }\r\n}\r\n","@if (label() || !hideNumber()) {\r\n  <div class=\"flex items-end justify-between gap-3\">\r\n    @if (label()) {\r\n      <label\r\n        class=\"leading-none\"\r\n        [class.required]=\"ngControl?.control?.hasValidator(requiredValidator)\"\r\n        [for]=\"ngControl?.name || label()\"\r\n        >{{ label() }}</label\r\n      >\r\n    }\r\n    @if (!hideNumber()) {\r\n      <span\r\n        class=\"min-w-12 text-right text-sm font-medium leading-none text-muted-color tabular-nums\"\r\n      >\r\n        {{ displayValue() }}\r\n      </span>\r\n    }\r\n  </div>\r\n}\r\n<div class=\"w-full my-2\">\r\n  <p-slider\r\n    #input\r\n    [ngModel]=\"value()\"\r\n    (ngModelChange)=\"onValueChange($event)\"\r\n    (onChange)=\"onChange.emit($event)\"\r\n    (onSlideEnd)=\"onTouched(); onSlideEnd.emit($event)\"\r\n    [disabled]=\"disabled() || readonly()\"\r\n    [animate]=\"animate()\"\r\n    [id]=\"ngControl?.name || label()\"\r\n    [min]=\"min()\"\r\n    [max]=\"max()\"\r\n    [step]=\"step()\"\r\n    [invalid]=\"isInvalid(ngControl?.control)\"\r\n    class=\"block w-full\"\r\n  ></p-slider>\r\n</div>\r\n\r\n<mt-field-validation [control]=\"ngControl?.control\"></mt-field-validation>\r\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-statistic-card.mjs

@@ -0,0 +1,22 @@
+import * as i0 from '@angular/core';
+import { input, Component } from '@angular/core';
+import { Card } from '@masterteam/components/card';
+import { Avatar } from '@masterteam/components/avatar';
+
+class StatisticCard {
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    cardClass = input('shadow-md', ...(ngDevMode ? [{ debugName: "cardClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StatisticCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.3", type: StatisticCard, isStandalone: true, selector: "mt-statistic-card", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, cardClass: { classPropertyName: "cardClass", publicName: "cardClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mt-card headless class=\"shadow-sm\">\r\n  <div class=\"flex items-center gap-3 p-2\">\r\n    <mt-avatar\r\n      [style.--p-avatar-background]=\"'var(--p-' + data().color + '-100)'\"\r\n      [style.--p-avatar-color]=\"'var(--p-' + data().color + '-600)'\"\r\n      [icon]=\"data().icon\"\r\n      size=\"large\"\r\n      shape=\"square\"\r\n    ></mt-avatar>\r\n\r\n    <div class=\"flex flex-col gap-0.5\">\r\n      <span\r\n        class=\"text-lg font-semibold\"\r\n        [style.color]=\"'var(--p-' + data().color + '-600)'\"\r\n      >\r\n        {{ data().title }}\r\n      </span>\r\n      <span class=\"text-sm text-surface-500\">\r\n        {{ data().subTitle }}\r\n      </span>\r\n    </div>\r\n  </div>\r\n</mt-card>\r\n", styles: [""], dependencies: [{ kind: "component", type: Card, selector: "mt-card", inputs: ["class", "title", "paddingless"] }, { kind: "component", type: Avatar, selector: "mt-avatar", inputs: ["label", "icon", "image", "styleClass", "size", "shape", "badge", "badgeSize", "badgeSeverity"], outputs: ["onImageError"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: StatisticCard, decorators: [{
+            type: Component,
+            args: [{ selector: 'mt-statistic-card', standalone: true, imports: [Card, Avatar], template: "<mt-card headless class=\"shadow-sm\">\r\n  <div class=\"flex items-center gap-3 p-2\">\r\n    <mt-avatar\r\n      [style.--p-avatar-background]=\"'var(--p-' + data().color + '-100)'\"\r\n      [style.--p-avatar-color]=\"'var(--p-' + data().color + '-600)'\"\r\n      [icon]=\"data().icon\"\r\n      size=\"large\"\r\n      shape=\"square\"\r\n    ></mt-avatar>\r\n\r\n    <div class=\"flex flex-col gap-0.5\">\r\n      <span\r\n        class=\"text-lg font-semibold\"\r\n        [style.color]=\"'var(--p-' + data().color + '-600)'\"\r\n      >\r\n        {{ data().title }}\r\n      </span>\r\n      <span class=\"text-sm text-surface-500\">\r\n        {{ data().subTitle }}\r\n      </span>\r\n    </div>\r\n  </div>\r\n</mt-card>\r\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], cardClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardClass", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { StatisticCard };
+//# sourceMappingURL=masterteam-components-statistic-card.mjs.map

package/fesm2022/masterteam-components-statistic-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"masterteam-components-statistic-card.mjs","sources":["../../../../packages/masterteam/components/statistic-card/statistic-card.ts","../../../../packages/masterteam/components/statistic-card/statistic-card.html","../../../../packages/masterteam/components/statistic-card/masterteam-components-statistic-card.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\r\nimport { Card } from '@masterteam/components/card';\r\nimport { Avatar } from '@masterteam/components/avatar';\r\nimport { MTIcon } from '@masterteam/icons';\r\n\r\nexport interface StatisticCardData {\r\n  title: string;\r\n  subTitle: string;\r\n  icon: MTIcon;\r\n  color: string;\r\n}\r\n\r\n@Component({\r\n  selector: 'mt-statistic-card',\r\n  standalone: true,\r\n  templateUrl: './statistic-card.html',\r\n  styleUrl: './statistic-card.scss',\r\n  imports: [Card, Avatar],\r\n})\r\nexport class StatisticCard {\r\n  readonly data = input.required<StatisticCardData>();\r\n  readonly cardClass = input('shadow-md');\r\n}\r\n","<mt-card headless class=\"shadow-sm\">\r\n  <div class=\"flex items-center gap-3 p-2\">\r\n    <mt-avatar\r\n      [style.--p-avatar-background]=\"'var(--p-' + data().color + '-100)'\"\r\n      [style.--p-avatar-color]=\"'var(--p-' + data().color + '-600)'\"\r\n      [icon]=\"data().icon\"\r\n      size=\"large\"\r\n      shape=\"square\"\r\n    ></mt-avatar>\r\n\r\n    <div class=\"flex flex-col gap-0.5\">\r\n      <span\r\n        class=\"text-lg font-semibold\"\r\n        [style.color]=\"'var(--p-' + data().color + '-600)'\"\r\n      >\r\n        {{ data().title }}\r\n      </span>\r\n      <span class=\"text-sm text-surface-500\">\r\n        {{ data().subTitle }}\r\n      </span>\r\n    </div>\r\n  </div>\r\n</mt-card>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;MAmBa,aAAa,CAAA;AACf,IAAA,IAAI,GAAG,KAAK,CAAC,QAAQ,+CAAqB;AAC1C,IAAA,SAAS,GAAG,KAAK,CAAC,WAAW,qDAAC;uGAF5B,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAb,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnB1B,kuBAuBA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDNY,IAAI,+FAAE,MAAM,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,EAAA,YAAA,EAAA,MAAA,EAAA,OAAA,EAAA,OAAA,EAAA,WAAA,EAAA,eAAA,CAAA,EAAA,OAAA,EAAA,CAAA,cAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAEX,aAAa,EAAA,UAAA,EAAA,CAAA;kBAPzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,mBAAmB,cACjB,IAAI,EAAA,OAAA,EAGP,CAAC,IAAI,EAAE,MAAM,CAAC,EAAA,QAAA,EAAA,kuBAAA,EAAA;;;AEjBzB;;AAEG;;;;"}