@webilix/ngx-helper-m3 0.0.19 → 0.0.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/fesm2022/webilix-ngx-helper-m3.mjs +48 -4
  2. package/fesm2022/webilix-ngx-helper-m3.mjs.map +1 -1
  3. package/lib/components/card/ngx-helper-card.component.d.ts +11 -3
  4. package/lib/components/card/ngx-helper-card.interface.d.ts +10 -1
  5. package/lib/components/component.service.d.ts +1 -0
  6. package/ngx-helper-m3.css +36 -0
  7. package/package.json +1 -1
package/fesm2022/webilix-ngx-helper-m3.mjs CHANGED
@@ -174,7 +174,7 @@ class NgxHelperDurationPipe {
174
174
  const join = hasDays && hasTime ? (!!options?.english ? ', ' : ' و ') : '';
175
175
  return (day + join + (!hasDays || hasTime ? time : '')).trim();
176
176
  case 'FULL':
177
- return (hasDays ? Helper.NUMBER.format(days, 'EN') + ':' : '') + time;
177
+ return (hasDays ? '(' + Helper.NUMBER.format(days, 'EN') + ') ' : '') + time;
178
178
  case 'DAY':
179
179
  return Helper.NUMBER.format(days + (hours !== 0 || minutes !== 0 ? 1 : 0), !!options?.english ? 'EN' : 'FA');
180
180
  case 'HOUR':
@@ -400,6 +400,17 @@ class ComponentService {
400
400
  : undefined,
401
401
  };
402
402
  }
403
+ isRTL(value) {
404
+ switch (value.type) {
405
+ case 'BANK-CARD':
406
+ case 'MOBILE':
407
+ case 'NUMBER':
408
+ return true;
409
+ case 'DURATION':
410
+ return value.format === 'FULL';
411
+ }
412
+ return false;
413
+ }
403
414
  getValueData(values) {
404
415
  const pipeTransform = new NgxHelperValuePipe().transform;
405
416
  const ltrValues = ['BANK-CARD', 'MOBILE', 'NUMBER'];
@@ -415,7 +426,7 @@ class ComponentService {
415
426
  color: item.color,
416
427
  action: item.action,
417
428
  copyToClipboard: item.copyToClipboard,
418
- ltr: ltrValues.includes(value.type),
429
+ ltr: this.isRTL(value),
419
430
  english: 'english' in value && !!value.english,
420
431
  };
421
432
  });
@@ -435,12 +446,16 @@ class NgxHelperCardComponent {
435
446
  subTitle;
436
447
  icon;
437
448
  actions = [];
449
+ option;
438
450
  padding = '1rem';
439
451
  backgroundColor;
440
452
  hasShadow = false;
441
453
  isMobile = false;
442
454
  buttons = [];
443
455
  componentConfig;
456
+ optionId;
457
+ optionTitle;
458
+ optionItems = [];
444
459
  constructor(componentService, config) {
445
460
  this.componentService = componentService;
446
461
  this.config = config;
@@ -454,16 +469,42 @@ class NgxHelperCardComponent {
454
469
  this.buttons = this.actions.map((action) => {
455
470
  return 'buttons' in action ? { type: 'MENU', ...action } : { type: 'BUTTON', ...action };
456
471
  });
472
+ this.optionId = undefined;
473
+ this.optionItems = [];
474
+ if (this.option) {
475
+ this.option.items.forEach((item) => {
476
+ if (item === 'DIVIDER') {
477
+ if (this.optionItems.length !== 0 && this.optionItems[this.optionItems.length - 1] !== 'DIVIDER')
478
+ this.optionItems.push('DIVIDER');
479
+ }
480
+ else
481
+ this.optionItems.push(item);
482
+ });
483
+ while (this.optionItems[this.optionItems.length - 1] === 'DIVIDER')
484
+ this.optionItems.splice(this.optionItems.length - 1);
485
+ this.setOption(this.optionId || '', true);
486
+ }
457
487
  }
458
488
  onResize() {
459
489
  this.isMobile = window.innerWidth <= this.componentConfig.mobileWidth;
460
490
  }
491
+ setOption(id, firstCheck) {
492
+ if (!this.option || this.optionItems.length === 0)
493
+ return;
494
+ const ids = this.optionItems.filter((item) => item !== 'DIVIDER').map((item) => item.id);
495
+ this.optionId = id && ids.includes(id) ? id : ids[0];
496
+ this.optionTitle = this.optionItems
497
+ .filter((item) => item !== 'DIVIDER')
498
+ .find((item) => item.id === this.optionId)?.title;
499
+ if (!firstCheck)
500
+ this.option.action(this.optionId);
501
+ }
461
502
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperCardComponent, deps: [{ token: ComponentService }, { token: NGX_HELPER_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
462
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: NgxHelperCardComponent, isStandalone: true, selector: "ngx-helper-card", inputs: { title: "title", subTitle: "subTitle", icon: "icon", actions: "actions", padding: "padding", backgroundColor: "backgroundColor", hasShadow: "hasShadow" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "className": "this.className" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "<div class=\"card-header\" [class.has-sub-title]=\"subTitle\">\n <!-- ICON -->\n @if (icon) { <mat-icon>{{ icon }}</mat-icon> }\n\n <!-- TITLE -->\n <div class=\"content\">\n <div class=\"title\">{{ title }}</div>\n <!-- SUB TITLE -->\n @if (subTitle) {\n <div class=\"sub-title\">{{ subTitle }}</div>\n }\n </div>\n\n <!-- BUTTONS -->\n @if (buttons.length > 0) {\n <div class=\"buttons\" [ngClass]=\"isMobile ? 'mobile-view' : ''\">\n @for (item of buttons; track $index) {\n <!-- TYPE -->\n @switch (item.type) {\n\n <!-- BUTTON -->\n @case('BUTTON') {\n <button mat-button type=\"button\" [style.color]=\"item.color\" (click)=\"item.action()\">\n @if (!isMobile) {\n <div class=\"title\">{{ item.title }}</div>\n }\n <!-- ICON -->\n @if (isMobile || item.showIcon) {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n </button>\n }\n\n <!-- MENU -->\n @case('MENU') {\n <button mat-button type=\"button\" [style.color]=\"item.color\" [matMenuTriggerFor]=\"actionMenu\">\n @if (!isMobile) {\n <div class=\"title\">{{ item.title }}</div>\n }\n <!-- ICON -->\n @if (isMobile || item.showIcon) {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n </button>\n <mat-menu #actionMenu=\"matMenu\" class=\"ngx-helper-card-action-menu\" [xPosition]=\"'before'\">\n @for (menu of item.buttons; track $index) {\n <!-- DIVIDER -->\n @if (menu === 'DIVIDER') { <mat-divider></mat-divider> }\n <!-- BUTTON -->\n @else {\n <button mat-menu-item type=\"button\" (click)=\"menu.action()\" [style.color]=\"menu.color\">\n <div class=\"title\">{{ menu.title }}</div>\n <mat-icon [style.color]=\"menu.color\">{{ menu.icon }}</mat-icon>\n </button>\n } }\n </mat-menu>\n } } }\n </div>\n }\n</div>\n\n<div class=\"card-content\" [style.padding]=\"padding\" [style.background-color]=\"backgroundColor\">\n <ng-content></ng-content>\n</div>\n", styles: ["::ng-deep .ngx-helper-card-action-menu button mat-icon{font-size:115%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-card-action-menu button .title{font-size:90%!important}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-card-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
503
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: NgxHelperCardComponent, isStandalone: true, selector: "ngx-helper-card", inputs: { title: "title", subTitle: "subTitle", icon: "icon", actions: "actions", option: "option", padding: "padding", backgroundColor: "backgroundColor", hasShadow: "hasShadow" }, host: { listeners: { "window:resize": "onResize($event)" }, properties: { "className": "this.className" } }, providers: [ComponentService], usesOnChanges: true, ngImport: i0, template: "<div class=\"card-header\" [class.has-sub-title]=\"subTitle\">\n <!-- ICON -->\n @if (icon) { <mat-icon>{{ icon }}</mat-icon> }\n\n <!-- TITLE -->\n <div class=\"content\">\n <div class=\"title\">{{ title }}</div>\n <!-- SUB TITLE -->\n @if (subTitle) {\n <div class=\"sub-title\">{{ subTitle }}</div>\n }\n </div>\n\n <!-- BUTTONS -->\n @if (buttons.length > 0) {\n <div class=\"buttons\" [ngClass]=\"isMobile ? 'mobile-view' : ''\">\n @for (item of buttons; track $index) {\n <!-- TYPE -->\n @switch (item.type) {\n\n <!-- BUTTON -->\n @case('BUTTON') {\n <button mat-button type=\"button\" [style.color]=\"item.color\" (click)=\"item.action()\">\n @if (!isMobile) {\n <div class=\"title\">{{ item.title }}</div>\n }\n <!-- ICON -->\n @if (isMobile || item.showIcon) {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n </button>\n }\n\n <!-- MENU -->\n @case('MENU') {\n <button mat-button type=\"button\" [style.color]=\"item.color\" [matMenuTriggerFor]=\"actionMenu\">\n @if (!isMobile) {\n <div class=\"title\">{{ item.title }}</div>\n }\n <!-- ICON -->\n @if (isMobile || item.showIcon) {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n </button>\n <mat-menu #actionMenu=\"matMenu\" class=\"ngx-helper-card-action-menu\" [xPosition]=\"'before'\">\n @for (menu of item.buttons; track $index) {\n <!-- DIVIDER -->\n @if (menu === 'DIVIDER') { <mat-divider></mat-divider> }\n <!-- BUTTON -->\n @else {\n <button mat-menu-item type=\"button\" (click)=\"menu.action()\" [style.color]=\"menu.color\">\n <div class=\"title\">{{ menu.title }}</div>\n <mat-icon [style.color]=\"menu.color\">{{ menu.icon }}</mat-icon>\n </button>\n } }\n </mat-menu>\n } } }\n </div>\n }\n\n <!-- OPTION -->\n @if (option && optionItems.length > 0) {\n <div class=\"option\" [ngClass]=\"isMobile ? 'mobile-view' : ''\">\n <button mat-button type=\"button\" [matMenuTriggerFor]=\"optionMenu\">\n @if (!isMobile) {\n <div class=\"title\">{{ optionTitle }}</div>\n }\n <mat-icon [class.mobile-view]=\"isMobile\">{{ option.icon }}</mat-icon>\n </button>\n <mat-menu #optionMenu=\"matMenu\" class=\"ngx-helper-card-action-option\" [xPosition]=\"'before'\">\n @for (item of optionItems; track $index) {\n <!-- DIVIDER -->\n @if (item === 'DIVIDER') { <mat-divider></mat-divider> }\n <!-- BUTTON -->\n @else {\n <button mat-menu-item type=\"button\" [disabled]=\"optionId === item.id\" (click)=\"setOption(item.id)\">\n <div class=\"title\">{{ item.title }}</div>\n <mat-icon [style.opacity]=\"optionId === item.id ? 1 : 0\">done_all</mat-icon>\n </button>\n } }\n </mat-menu>\n </div>\n }\n</div>\n\n<div class=\"card-content\" [style.padding]=\"padding\" [style.background-color]=\"backgroundColor\">\n <ng-content></ng-content>\n</div>\n", styles: ["::ng-deep .ngx-helper-card-action-menu button mat-icon{font-size:115%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-card-action-menu button .title{font-size:90%!important}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-card-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}::ng-deep .ngx-helper-card-action-option button{flex-direction:row-reverse}::ng-deep .ngx-helper-card-action-option button mat-icon{font-size:115%;margin:0 .75rem 0 0!important}::ng-deep .ngx-helper-card-action-option button .title{flex:1;font-size:90%!important}::ng-deep .ngx-helper-card-action-option .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-card-action-option .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-card-action-option .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] });
463
504
  }
464
505
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxHelperCardComponent, decorators: [{
465
506
  type: Component,
466
- args: [{ selector: 'ngx-helper-card', host: { '(window:resize)': 'onResize($event)' }, imports: [NgClass, MatButton, MatDivider, MatIcon, MatMenuModule], providers: [ComponentService], template: "<div class=\"card-header\" [class.has-sub-title]=\"subTitle\">\n <!-- ICON -->\n @if (icon) { <mat-icon>{{ icon }}</mat-icon> }\n\n <!-- TITLE -->\n <div class=\"content\">\n <div class=\"title\">{{ title }}</div>\n <!-- SUB TITLE -->\n @if (subTitle) {\n <div class=\"sub-title\">{{ subTitle }}</div>\n }\n </div>\n\n <!-- BUTTONS -->\n @if (buttons.length > 0) {\n <div class=\"buttons\" [ngClass]=\"isMobile ? 'mobile-view' : ''\">\n @for (item of buttons; track $index) {\n <!-- TYPE -->\n @switch (item.type) {\n\n <!-- BUTTON -->\n @case('BUTTON') {\n <button mat-button type=\"button\" [style.color]=\"item.color\" (click)=\"item.action()\">\n @if (!isMobile) {\n <div class=\"title\">{{ item.title }}</div>\n }\n <!-- ICON -->\n @if (isMobile || item.showIcon) {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n </button>\n }\n\n <!-- MENU -->\n @case('MENU') {\n <button mat-button type=\"button\" [style.color]=\"item.color\" [matMenuTriggerFor]=\"actionMenu\">\n @if (!isMobile) {\n <div class=\"title\">{{ item.title }}</div>\n }\n <!-- ICON -->\n @if (isMobile || item.showIcon) {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n </button>\n <mat-menu #actionMenu=\"matMenu\" class=\"ngx-helper-card-action-menu\" [xPosition]=\"'before'\">\n @for (menu of item.buttons; track $index) {\n <!-- DIVIDER -->\n @if (menu === 'DIVIDER') { <mat-divider></mat-divider> }\n <!-- BUTTON -->\n @else {\n <button mat-menu-item type=\"button\" (click)=\"menu.action()\" [style.color]=\"menu.color\">\n <div class=\"title\">{{ menu.title }}</div>\n <mat-icon [style.color]=\"menu.color\">{{ menu.icon }}</mat-icon>\n </button>\n } }\n </mat-menu>\n } } }\n </div>\n }\n</div>\n\n<div class=\"card-content\" [style.padding]=\"padding\" [style.background-color]=\"backgroundColor\">\n <ng-content></ng-content>\n</div>\n", styles: ["::ng-deep .ngx-helper-card-action-menu button mat-icon{font-size:115%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-card-action-menu button .title{font-size:90%!important}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-card-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"] }]
507
+ args: [{ selector: 'ngx-helper-card', host: { '(window:resize)': 'onResize($event)' }, imports: [NgClass, MatButton, MatDivider, MatIcon, MatMenuModule], providers: [ComponentService], template: "<div class=\"card-header\" [class.has-sub-title]=\"subTitle\">\n <!-- ICON -->\n @if (icon) { <mat-icon>{{ icon }}</mat-icon> }\n\n <!-- TITLE -->\n <div class=\"content\">\n <div class=\"title\">{{ title }}</div>\n <!-- SUB TITLE -->\n @if (subTitle) {\n <div class=\"sub-title\">{{ subTitle }}</div>\n }\n </div>\n\n <!-- BUTTONS -->\n @if (buttons.length > 0) {\n <div class=\"buttons\" [ngClass]=\"isMobile ? 'mobile-view' : ''\">\n @for (item of buttons; track $index) {\n <!-- TYPE -->\n @switch (item.type) {\n\n <!-- BUTTON -->\n @case('BUTTON') {\n <button mat-button type=\"button\" [style.color]=\"item.color\" (click)=\"item.action()\">\n @if (!isMobile) {\n <div class=\"title\">{{ item.title }}</div>\n }\n <!-- ICON -->\n @if (isMobile || item.showIcon) {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n </button>\n }\n\n <!-- MENU -->\n @case('MENU') {\n <button mat-button type=\"button\" [style.color]=\"item.color\" [matMenuTriggerFor]=\"actionMenu\">\n @if (!isMobile) {\n <div class=\"title\">{{ item.title }}</div>\n }\n <!-- ICON -->\n @if (isMobile || item.showIcon) {\n <mat-icon>{{ item.icon }}</mat-icon>\n }\n </button>\n <mat-menu #actionMenu=\"matMenu\" class=\"ngx-helper-card-action-menu\" [xPosition]=\"'before'\">\n @for (menu of item.buttons; track $index) {\n <!-- DIVIDER -->\n @if (menu === 'DIVIDER') { <mat-divider></mat-divider> }\n <!-- BUTTON -->\n @else {\n <button mat-menu-item type=\"button\" (click)=\"menu.action()\" [style.color]=\"menu.color\">\n <div class=\"title\">{{ menu.title }}</div>\n <mat-icon [style.color]=\"menu.color\">{{ menu.icon }}</mat-icon>\n </button>\n } }\n </mat-menu>\n } } }\n </div>\n }\n\n <!-- OPTION -->\n @if (option && optionItems.length > 0) {\n <div class=\"option\" [ngClass]=\"isMobile ? 'mobile-view' : ''\">\n <button mat-button type=\"button\" [matMenuTriggerFor]=\"optionMenu\">\n @if (!isMobile) {\n <div class=\"title\">{{ optionTitle }}</div>\n }\n <mat-icon [class.mobile-view]=\"isMobile\">{{ option.icon }}</mat-icon>\n </button>\n <mat-menu #optionMenu=\"matMenu\" class=\"ngx-helper-card-action-option\" [xPosition]=\"'before'\">\n @for (item of optionItems; track $index) {\n <!-- DIVIDER -->\n @if (item === 'DIVIDER') { <mat-divider></mat-divider> }\n <!-- BUTTON -->\n @else {\n <button mat-menu-item type=\"button\" [disabled]=\"optionId === item.id\" (click)=\"setOption(item.id)\">\n <div class=\"title\">{{ item.title }}</div>\n <mat-icon [style.opacity]=\"optionId === item.id ? 1 : 0\">done_all</mat-icon>\n </button>\n } }\n </mat-menu>\n </div>\n }\n</div>\n\n<div class=\"card-content\" [style.padding]=\"padding\" [style.background-color]=\"backgroundColor\">\n <ng-content></ng-content>\n</div>\n", styles: ["::ng-deep .ngx-helper-card-action-menu button mat-icon{font-size:115%;margin:0 0 0 .75rem!important}::ng-deep .ngx-helper-card-action-menu button .title{font-size:90%!important}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-card-action-menu .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-card-action-menu .mat-divider{margin:0;border-top-color:var(--outline-variant)}::ng-deep .ngx-helper-card-action-option button{flex-direction:row-reverse}::ng-deep .ngx-helper-card-action-option button mat-icon{font-size:115%;margin:0 .75rem 0 0!important}::ng-deep .ngx-helper-card-action-option button .title{flex:1;font-size:90%!important}::ng-deep .ngx-helper-card-action-option .mat-mdc-menu-content{padding:0}::ng-deep .ngx-helper-card-action-option .mat-mdc-menu-item{direction:rtl;text-align:right}::ng-deep .ngx-helper-card-action-option .mat-divider{margin:0;border-top-color:var(--outline-variant)}\n"] }]
467
508
  }], ctorParameters: () => [{ type: ComponentService }, { type: undefined, decorators: [{
468
509
  type: Optional
469
510
  }, {
@@ -484,6 +525,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
484
525
  }], actions: [{
485
526
  type: Input,
486
527
  args: [{ required: false }]
528
+ }], option: [{
529
+ type: Input,
530
+ args: [{ required: false }]
487
531
  }], padding: [{
488
532
  type: Input,
489
533
  args: [{ required: false }]