@ascentgl/ads-ui 0.0.106 → 0.0.108

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.
@@ -5995,13 +5995,13 @@ class AdsTableComponent {
5995
5995
  }
5996
5996
  /** @ignore */
5997
5997
  getBreakpoint(width) {
5998
- if (width < 321)
5998
+ if (width < 202)
5999
5999
  return TableBreakpoint.XS;
6000
- if (width < 482)
6000
+ if (width < 367)
6001
6001
  return TableBreakpoint.SM;
6002
- if (width < 770)
6002
+ if (width < 649)
6003
6003
  return TableBreakpoint.MD;
6004
- if (width < 1201)
6004
+ if (width < 1081)
6005
6005
  return TableBreakpoint.LG;
6006
6006
  return TableBreakpoint.XL;
6007
6007
  }
@@ -6478,29 +6478,32 @@ class AdsNumericStepComponent {
6478
6478
  this.isDelivery = input.required();
6479
6479
  this.index = input.required();
6480
6480
  this.distance = input();
6481
+ this.isMobile = input.required();
6481
6482
  }
6482
6483
  get isFirst() {
6483
6484
  return this.index() === 0;
6484
6485
  }
6485
6486
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsNumericStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6486
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsNumericStepComponent, isStandalone: true, selector: "ads-numeric-step", inputs: { isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: true, transformFunction: null }, isDelivery: { classPropertyName: "isDelivery", publicName: "isDelivery", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, distance: { classPropertyName: "distance", publicName: "distance", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"circle-container\"\n [ngClass]=\"{\n 'dash-line': true,\n outermost: isFirst || isLast(),\n }\"\n>\n <div\n class=\"dash-line top\"\n [ngClass]=\"{\n top: isLast(),\n bottom: isFirst,\n }\"\n ></div>\n @if (!isLast() && distance()) {\n <div class=\"distance-text\">\n {{ distance() }}\n </div>\n }\n <div class=\"stop-circle\" [ngClass]=\"{ delivery: isDelivery() }\">{{ index() + 1 }}</div>\n</div>\n", styles: [".circle-container{height:100%;display:flex;align-items:center;justify-content:center;position:relative;pointer-events:none;width:60px}.circle-container.outermost{align-items:flex-start}.circle-container.outermost .stop-circle{margin-top:16px}.circle-container .stop-circle{border:2px solid var(--color-light);color:var(--color-dark);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;box-sizing:border-box;background-color:var(--color-white);z-index:2}.circle-container .stop-circle.delivery{background-color:var(--color-muted)}.circle-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:calc(100% - 9px);left:50%;transform:translate(-50%);z-index:1;box-sizing:unset}.circle-container .dash-line.top{top:2px;height:20px}.circle-container .dash-line.bottom{top:48px;height:calc(100% - 48px)}.circle-container .distance-text{font-size:12px;line-height:16px;color:var(--color-dark);position:absolute;bottom:-25px;background-color:var(--color-light);border:1px solid var(--color-light);border-radius:5px;z-index:2;display:flex;align-items:center;justify-content:center;padding:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
6487
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsNumericStepComponent, isStandalone: true, selector: "ads-numeric-step", inputs: { isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: true, transformFunction: null }, isDelivery: { classPropertyName: "isDelivery", publicName: "isDelivery", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: true, transformFunction: null }, distance: { classPropertyName: "distance", publicName: "distance", isSignal: true, isRequired: false, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"circle-container\"\n [ngClass]=\"{\n 'dash-line': !isMobile(),\n outermost: isFirst || isLast() || isMobile(),\n 'circle-container-mobile': isMobile(),\n }\"\n>\n @if(!isMobile()) {\n <div\n class=\"dash-line top\"\n [ngClass]=\"{\n top: isLast(),\n bottom: isFirst,\n }\"\n ></div>\n @if (!isLast() && distance()) {\n <div class=\"distance-text\">\n {{ distance() }}\n </div>\n }\n }\n <div class=\"stop-circle\" [ngClass]=\"{ delivery: isDelivery() }\">{{ index() + 1 }}</div>\n</div>\n", styles: [".circle-container{height:100%;display:flex;align-items:center;justify-content:center;position:relative;pointer-events:none;width:60px}.circle-container.outermost{align-items:flex-start}.circle-container.outermost .stop-circle{margin-top:16px}.circle-container .stop-circle{border:2px solid var(--color-light);color:var(--color-dark);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;box-sizing:border-box;background-color:var(--color-white);z-index:2}.circle-container .stop-circle.delivery{background-color:var(--color-muted)}.circle-container.circle-container-mobile{width:18px}.circle-container.circle-container-mobile .stop-circle{position:absolute;left:0;margin-top:9px}.circle-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:calc(100% - 9px);left:50%;transform:translate(-50%);z-index:1;box-sizing:unset}.circle-container .dash-line.top{top:2px;height:20px}.circle-container .dash-line.bottom{top:48px;height:calc(100% - 48px)}.circle-container .distance-text{font-size:12px;line-height:16px;color:var(--color-dark);position:absolute;bottom:-25px;background-color:var(--color-light);border:1px solid var(--color-light);border-radius:5px;z-index:2;display:flex;align-items:center;justify-content:center;padding:4px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
6487
6488
  }
6488
6489
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsNumericStepComponent, decorators: [{
6489
6490
  type: Component,
6490
- args: [{ selector: 'ads-numeric-step', imports: [NgClass], template: "<div\n class=\"circle-container\"\n [ngClass]=\"{\n 'dash-line': true,\n outermost: isFirst || isLast(),\n }\"\n>\n <div\n class=\"dash-line top\"\n [ngClass]=\"{\n top: isLast(),\n bottom: isFirst,\n }\"\n ></div>\n @if (!isLast() && distance()) {\n <div class=\"distance-text\">\n {{ distance() }}\n </div>\n }\n <div class=\"stop-circle\" [ngClass]=\"{ delivery: isDelivery() }\">{{ index() + 1 }}</div>\n</div>\n", styles: [".circle-container{height:100%;display:flex;align-items:center;justify-content:center;position:relative;pointer-events:none;width:60px}.circle-container.outermost{align-items:flex-start}.circle-container.outermost .stop-circle{margin-top:16px}.circle-container .stop-circle{border:2px solid var(--color-light);color:var(--color-dark);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;box-sizing:border-box;background-color:var(--color-white);z-index:2}.circle-container .stop-circle.delivery{background-color:var(--color-muted)}.circle-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:calc(100% - 9px);left:50%;transform:translate(-50%);z-index:1;box-sizing:unset}.circle-container .dash-line.top{top:2px;height:20px}.circle-container .dash-line.bottom{top:48px;height:calc(100% - 48px)}.circle-container .distance-text{font-size:12px;line-height:16px;color:var(--color-dark);position:absolute;bottom:-25px;background-color:var(--color-light);border:1px solid var(--color-light);border-radius:5px;z-index:2;display:flex;align-items:center;justify-content:center;padding:4px}\n"] }]
6491
+ args: [{ selector: 'ads-numeric-step', imports: [NgClass], template: "<div\n class=\"circle-container\"\n [ngClass]=\"{\n 'dash-line': !isMobile(),\n outermost: isFirst || isLast() || isMobile(),\n 'circle-container-mobile': isMobile(),\n }\"\n>\n @if(!isMobile()) {\n <div\n class=\"dash-line top\"\n [ngClass]=\"{\n top: isLast(),\n bottom: isFirst,\n }\"\n ></div>\n @if (!isLast() && distance()) {\n <div class=\"distance-text\">\n {{ distance() }}\n </div>\n }\n }\n <div class=\"stop-circle\" [ngClass]=\"{ delivery: isDelivery() }\">{{ index() + 1 }}</div>\n</div>\n", styles: [".circle-container{height:100%;display:flex;align-items:center;justify-content:center;position:relative;pointer-events:none;width:60px}.circle-container.outermost{align-items:flex-start}.circle-container.outermost .stop-circle{margin-top:16px}.circle-container .stop-circle{border:2px solid var(--color-light);color:var(--color-dark);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;box-sizing:border-box;background-color:var(--color-white);z-index:2}.circle-container .stop-circle.delivery{background-color:var(--color-muted)}.circle-container.circle-container-mobile{width:18px}.circle-container.circle-container-mobile .stop-circle{position:absolute;left:0;margin-top:9px}.circle-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:calc(100% - 9px);left:50%;transform:translate(-50%);z-index:1;box-sizing:unset}.circle-container .dash-line.top{top:2px;height:20px}.circle-container .dash-line.bottom{top:48px;height:calc(100% - 48px)}.circle-container .distance-text{font-size:12px;line-height:16px;color:var(--color-dark);position:absolute;bottom:-25px;background-color:var(--color-light);border:1px solid var(--color-light);border-radius:5px;z-index:2;display:flex;align-items:center;justify-content:center;padding:4px}\n"] }]
6491
6492
  }] });
6492
6493
 
6493
6494
  class AdsNumericStepperComponent {
6494
6495
  constructor() {
6495
6496
  /** Steps array */
6496
6497
  this.steps = input.required();
6498
+ /** Is mobile stepper */
6499
+ this.isMobile = input(false);
6497
6500
  }
6498
6501
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsNumericStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
6499
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsNumericStepperComponent, isStandalone: false, selector: "ads-numeric-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-accordion multi=\"true\" class=\"stepper-container\">\n @for (step of steps(); track i; let i = $index) {\n <div class=\"step-item\">\n <ads-numeric-step\n [isLast]=\"i === steps().length - 1\"\n [index]=\"i\"\n [isDelivery]=\"step.isDelivery\"\n [distance]=\"step.distance\"\n />\n <ng-container *ngTemplateOutlet=\"step.template; context: { data: step.templateData }\" />\n </div>\n @if (!$last) {\n <div class=\"dash-container\">\n <div class=\"dash-line\"></div>\n </div>\n }\n }\n</mat-accordion>\n", styles: [".stepper-container{display:grid;grid-column-gap:16px;grid-template-rows:1fr;grid-template-columns:1fr}.stepper-container .step-item{display:grid;grid-gap:16px;grid-template-columns:min-content 1fr}.stepper-container .step-item ::ng-deep .mat-expansion-panel{margin:0!important}.stepper-container .dash-container{height:24px;position:relative}.stepper-container .dash-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:20px;left:30px;transform:translate(-50%);z-index:1;box-sizing:unset}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdsNumericStepComponent, selector: "ads-numeric-step", inputs: ["isLast", "isDelivery", "index", "distance"] }, { kind: "directive", type: i6$2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }] }); }
6502
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.5", type: AdsNumericStepperComponent, isStandalone: false, selector: "ads-numeric-stepper", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: true, transformFunction: null }, isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-accordion multi=\"true\" class=\"stepper-container\">\n @for (step of steps(); track i; let i = $index) {\n <div class=\"step-item\" [class.step-item-mobile]=\"isMobile()\">\n <ads-numeric-step\n [isLast]=\"i === steps().length - 1\"\n [index]=\"i\"\n [isDelivery]=\"step.isDelivery\"\n [distance]=\"step.distance\"\n [isMobile]=\"isMobile()\"\n />\n <ng-container *ngTemplateOutlet=\"step.template; context: { data: step.templateData }\" />\n </div>\n @if (!$last) {\n <div class=\"dash-container\" [class.dash-container-mobile]=\"isMobile()\">\n <div class=\"dash-line\"></div>\n </div>\n }\n }\n</mat-accordion>\n", styles: [".stepper-container{display:grid;grid-column-gap:16px;grid-template-rows:1fr;grid-template-columns:1fr}.stepper-container .step-item{display:grid;grid-gap:16px;grid-template-columns:min-content 1fr}.stepper-container .step-item ::ng-deep .mat-expansion-panel{margin:0!important}.stepper-container .step-item.step-item-mobile{grid-gap:0}.stepper-container .dash-container{height:24px;position:relative}.stepper-container .dash-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:20px;left:30px;transform:translate(-50%);z-index:1;box-sizing:unset}.stepper-container .dash-container.dash-container-mobile{display:flex;justify-content:center}.stepper-container .dash-container.dash-container-mobile .dash-line{position:static;transform:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AdsNumericStepComponent, selector: "ads-numeric-step", inputs: ["isLast", "isDelivery", "index", "distance", "isMobile"] }, { kind: "directive", type: i6$2.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }] }); }
6500
6503
  }
6501
6504
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.5", ngImport: i0, type: AdsNumericStepperComponent, decorators: [{
6502
6505
  type: Component,
6503
- args: [{ selector: 'ads-numeric-stepper', standalone: false, template: "<mat-accordion multi=\"true\" class=\"stepper-container\">\n @for (step of steps(); track i; let i = $index) {\n <div class=\"step-item\">\n <ads-numeric-step\n [isLast]=\"i === steps().length - 1\"\n [index]=\"i\"\n [isDelivery]=\"step.isDelivery\"\n [distance]=\"step.distance\"\n />\n <ng-container *ngTemplateOutlet=\"step.template; context: { data: step.templateData }\" />\n </div>\n @if (!$last) {\n <div class=\"dash-container\">\n <div class=\"dash-line\"></div>\n </div>\n }\n }\n</mat-accordion>\n", styles: [".stepper-container{display:grid;grid-column-gap:16px;grid-template-rows:1fr;grid-template-columns:1fr}.stepper-container .step-item{display:grid;grid-gap:16px;grid-template-columns:min-content 1fr}.stepper-container .step-item ::ng-deep .mat-expansion-panel{margin:0!important}.stepper-container .dash-container{height:24px;position:relative}.stepper-container .dash-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:20px;left:30px;transform:translate(-50%);z-index:1;box-sizing:unset}\n"] }]
6506
+ args: [{ selector: 'ads-numeric-stepper', standalone: false, template: "<mat-accordion multi=\"true\" class=\"stepper-container\">\n @for (step of steps(); track i; let i = $index) {\n <div class=\"step-item\" [class.step-item-mobile]=\"isMobile()\">\n <ads-numeric-step\n [isLast]=\"i === steps().length - 1\"\n [index]=\"i\"\n [isDelivery]=\"step.isDelivery\"\n [distance]=\"step.distance\"\n [isMobile]=\"isMobile()\"\n />\n <ng-container *ngTemplateOutlet=\"step.template; context: { data: step.templateData }\" />\n </div>\n @if (!$last) {\n <div class=\"dash-container\" [class.dash-container-mobile]=\"isMobile()\">\n <div class=\"dash-line\"></div>\n </div>\n }\n }\n</mat-accordion>\n", styles: [".stepper-container{display:grid;grid-column-gap:16px;grid-template-rows:1fr;grid-template-columns:1fr}.stepper-container .step-item{display:grid;grid-gap:16px;grid-template-columns:min-content 1fr}.stepper-container .step-item ::ng-deep .mat-expansion-panel{margin:0!important}.stepper-container .step-item.step-item-mobile{grid-gap:0}.stepper-container .dash-container{height:24px;position:relative}.stepper-container .dash-container .dash-line{border:dashed 2px var(--color-light);width:0;position:absolute;height:20px;left:30px;transform:translate(-50%);z-index:1;box-sizing:unset}.stepper-container .dash-container.dash-container-mobile{display:flex;justify-content:center}.stepper-container .dash-container.dash-container-mobile .dash-line{position:static;transform:none}\n"] }]
6504
6507
  }] });
6505
6508
 
6506
6509
  class AdsNumericStepperModule {