@thl-ui/angular 0.1.0 → 0.1.1

package/fesm2022/thl-ui-angular.mjs

@@ -4951,41 +4951,43 @@ class ThlPricingTableComponent {
         return this.cfg.bem('pricing-plan')({ featured: f });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.26", ngImport: i0, type: ThlPricingTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.26", type: ThlPricingTableComponent, isStandalone: true, selector: "thl-pricing-table", inputs: { plans: { classPropertyName: "plans", publicName: "plans", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selected: "selected" }, host: { properties: { "class": "cfg.prefix() + \"-pricing\"" } }, ngImport: i0, template: `@for (pl of plans(); track $index; let i = $index) {
-    <div [class]="planCls(pl.featured)">
-      @if (pl.tag) {
-        <div [class]="b('tag')">{{ pl.tag }}</div>
-      }
-      <div [class]="b('header')">
-        <h2>{{ pl.name }}</h2>
-        <div [class]="b('price')">
-          <sup>{{ pl.currency ?? '$' }}</sup
-          >{{ pl.price }}
-        </div>
-        <p [class]="b('period')">{{ pl.period ?? ('pages.pricing.perMonth' | thlT) }}</p>
-      </div>
-      <ul [class]="b('features')">
-        @for (f of pl.features; track $index) {
-          <li [class]="b('feature')">
-            @if (f.icon) {
-              <thl-icon [name]="f.icon" />
-            }
-            {{ f.text }}
-          </li>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.26", type: ThlPricingTableComponent, isStandalone: true, selector: "thl-pricing-table", inputs: { plans: { classPropertyName: "plans", publicName: "plans", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selected: "selected" }, host: { properties: { "class": "cfg.prefix() + \"-pricing-wrap\"" } }, ngImport: i0, template: `<div [class]="cfg.prefix() + '-pricing'" [style.--_n]="plans().length">
+    @for (pl of plans(); track $index; let i = $index) {
+      <div [class]="planCls(pl.featured)">
+        @if (pl.tag) {
+          <div [class]="b('tag')">{{ pl.tag }}</div>
         }
-      </ul>
-      <div [class]="b('action')">
-        <button
-          thl-button
-          [variant]="pl.ctaVariant ?? (pl.featured ? 'danger' : 'success')"
-          [size]="pl.featured ? 'lg' : undefined"
-          (click)="selected.emit(pl)"
-        >
-          {{ pl.cta ?? ('pages.pricing.signUp' | thlT) }}
-        </button>
+        <div [class]="b('header')">
+          <h2>{{ pl.name }}</h2>
+          <div [class]="b('price')">
+            <sup>{{ pl.currency ?? '$' }}</sup
+            >{{ pl.price }}
+          </div>
+          <p [class]="b('period')">{{ pl.period ?? ('pages.pricing.perMonth' | thlT) }}</p>
+        </div>
+        <ul [class]="b('features')">
+          @for (f of pl.features; track $index) {
+            <li [class]="b('feature')">
+              @if (f.icon) {
+                <thl-icon [name]="f.icon" />
+              }
+              {{ f.text }}
+            </li>
+          }
+        </ul>
+        <div [class]="b('action')">
+          <button
+            thl-button
+            [variant]="pl.ctaVariant ?? (pl.featured ? 'danger' : 'success')"
+            [size]="pl.featured ? 'lg' : undefined"
+            (click)="selected.emit(pl)"
+          >
+            {{ pl.cta ?? ('pages.pricing.signUp' | thlT) }}
+          </button>
+        </div>
       </div>
-    </div>
-  }`, isInline: true, dependencies: [{ kind: "component", type: ThlIconComponent, selector: "thl-icon", inputs: ["name", "size", "label", "strokeWidth"] }, { kind: "component", type: ThlButtonComponent, selector: "button[thl-button], a[thl-button]", inputs: ["variant", "size", "outline", "rounded", "circle", "block", "loading", "disabled", "noRipple", "icon", "iconRight", "label"] }, { kind: "pipe", type: ThlTranslatePipe, name: "thlT" }] }); }
+    }
+  </div>`, isInline: true, dependencies: [{ kind: "component", type: ThlIconComponent, selector: "thl-icon", inputs: ["name", "size", "label", "strokeWidth"] }, { kind: "component", type: ThlButtonComponent, selector: "button[thl-button], a[thl-button]", inputs: ["variant", "size", "outline", "rounded", "circle", "block", "loading", "disabled", "noRipple", "icon", "iconRight", "label"] }, { kind: "pipe", type: ThlTranslatePipe, name: "thlT" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.26", ngImport: i0, type: ThlPricingTableComponent, decorators: [{
             type: Component,
@@ -4993,42 +4995,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.26", ngImpo
                     ...base$1,
                     selector: 'thl-pricing-table',
                     imports: [ThlIconComponent, ThlButtonComponent, ThlTranslatePipe],
-                    host: { '[class]': 'cfg.prefix() + "-pricing"' },
-                    template: `@for (pl of plans(); track $index; let i = $index) {
-    <div [class]="planCls(pl.featured)">
-      @if (pl.tag) {
-        <div [class]="b('tag')">{{ pl.tag }}</div>
-      }
-      <div [class]="b('header')">
-        <h2>{{ pl.name }}</h2>
-        <div [class]="b('price')">
-          <sup>{{ pl.currency ?? '$' }}</sup
-          >{{ pl.price }}
-        </div>
-        <p [class]="b('period')">{{ pl.period ?? ('pages.pricing.perMonth' | thlT) }}</p>
-      </div>
-      <ul [class]="b('features')">
-        @for (f of pl.features; track $index) {
-          <li [class]="b('feature')">
-            @if (f.icon) {
-              <thl-icon [name]="f.icon" />
-            }
-            {{ f.text }}
-          </li>
+                    host: { '[class]': 'cfg.prefix() + "-pricing-wrap"' },
+                    template: `<div [class]="cfg.prefix() + '-pricing'" [style.--_n]="plans().length">
+    @for (pl of plans(); track $index; let i = $index) {
+      <div [class]="planCls(pl.featured)">
+        @if (pl.tag) {
+          <div [class]="b('tag')">{{ pl.tag }}</div>
         }
-      </ul>
-      <div [class]="b('action')">
-        <button
-          thl-button
-          [variant]="pl.ctaVariant ?? (pl.featured ? 'danger' : 'success')"
-          [size]="pl.featured ? 'lg' : undefined"
-          (click)="selected.emit(pl)"
-        >
-          {{ pl.cta ?? ('pages.pricing.signUp' | thlT) }}
-        </button>
+        <div [class]="b('header')">
+          <h2>{{ pl.name }}</h2>
+          <div [class]="b('price')">
+            <sup>{{ pl.currency ?? '$' }}</sup
+            >{{ pl.price }}
+          </div>
+          <p [class]="b('period')">{{ pl.period ?? ('pages.pricing.perMonth' | thlT) }}</p>
+        </div>
+        <ul [class]="b('features')">
+          @for (f of pl.features; track $index) {
+            <li [class]="b('feature')">
+              @if (f.icon) {
+                <thl-icon [name]="f.icon" />
+              }
+              {{ f.text }}
+            </li>
+          }
+        </ul>
+        <div [class]="b('action')">
+          <button
+            thl-button
+            [variant]="pl.ctaVariant ?? (pl.featured ? 'danger' : 'success')"
+            [size]="pl.featured ? 'lg' : undefined"
+            (click)="selected.emit(pl)"
+          >
+            {{ pl.cta ?? ('pages.pricing.signUp' | thlT) }}
+          </button>
+        </div>
       </div>
-    </div>
-  }`,
+    }
+  </div>`,
                 }]
         }], propDecorators: { plans: [{ type: i0.Input, args: [{ isSignal: true, alias: "plans", required: true }] }], selected: [{ type: i0.Output, args: ["selected"] }] } });
 class ThlUserCardComponent {