@propbinder/mobile-design 0.2.89 → 0.2.90

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 (4) hide show
  1. package/fesm2022/propbinder-mobile-design.mjs +23 -5
  2. package/fesm2022/propbinder-mobile-design.mjs.map +1 -1
  3. package/index.d.ts +7 -6
  4. package/package.json +1 -1
package/fesm2022/propbinder-mobile-design.mjs CHANGED
@@ -6286,17 +6286,26 @@ class DsMobileInlineTabsComponent {
6286
6286
  [attr.aria-label]="tab.label"
6287
6287
  [attr.aria-selected]="activeTab() === tab.id">
6288
6288
  {{ tab.label }}
6289
- @if (tab.badge && tab.badge > 0) {
6289
+ @if (tab.badgeType === 'envelope') {
6290
+ <div class="envelope-wrapper">
6291
+ <ds-icon name="remixMailFill" size="20px" class="tw-text-current"></ds-icon>
6292
+ @if (tab.badge && tab.badge > 0) {
6293
+ <span class="envelope-badge">
6294
+ {{ tab.badge }}
6295
+ </span>
6296
+ }
6297
+ </div>
6298
+ } @else if (tab.badge && tab.badge > 0) {
6290
6299
  <span class="tab-badge">{{ tab.badge }}</span>
6291
6300
  }
6292
6301
  </button>
6293
6302
  }
6294
6303
  </div>
6295
- `, isInline: true, styles: [".filter-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;height:40px}.filter-tab{min-width:48px;justify-content:center;padding:0 12px;height:32px;border-radius:20px;background:transparent;border:none;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:rgba(var(--header-content-color-rgb, 255, 255, 255),.6);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-header-accent, #5d5fef);color:var(--color-on-header-accent, white)}.filter-tab:hover:not(.active){background:rgba(var(--header-content-color-rgb, 255, 255, 255),.1)}.tab-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:rgba(var(--header-content-color-rgb, 255, 255, 255),.2);color:var(--header-content-color, white);font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}.filter-tab.active .tab-badge{background:rgba(var(--color-on-header-accent-rgb, 255, 255, 255),.3);color:var(--color-on-header-accent, white)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
6304
+ `, isInline: true, styles: [".filter-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;height:40px}.filter-tab{min-width:48px;justify-content:center;padding:0 12px;height:32px;border-radius:20px;background:transparent;border:none;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:rgba(var(--header-content-color-rgb, 255, 255, 255),.6);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-header-accent, #5d5fef);color:var(--color-on-header-accent, white)}.filter-tab:hover:not(.active){background:rgba(var(--header-content-color-rgb, 255, 255, 255),.1)}.tab-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:rgba(var(--header-content-color-rgb, 255, 255, 255),.2);color:var(--header-content-color, white);font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}.filter-tab.active .tab-badge{background:rgba(var(--color-on-header-accent-rgb, 255, 255, 255),.3);color:var(--color-on-header-accent, white)}.envelope-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-left:4px}.envelope-badge{position:absolute;top:-3px;right:-5px;background-color:#ff3b30;color:#fff;font-size:10px;font-weight:700;border-radius:9999px;min-width:12px;height:12px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;box-shadow:0 1px 2px #00000026;z-index:10}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
6296
6305
  }
6297
6306
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileInlineTabsComponent, decorators: [{
6298
6307
  type: Component,
6299
- args: [{ selector: 'ds-mobile-inline-tabs', standalone: true, imports: [CommonModule], template: `
6308
+ args: [{ selector: 'ds-mobile-inline-tabs', standalone: true, imports: [CommonModule, DsIconComponent], template: `
6300
6309
  <div class="filter-tabs">
6301
6310
  @for (tab of tabs(); track tab.id) {
6302
6311
  <button
@@ -6306,13 +6315,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
6306
6315
  [attr.aria-label]="tab.label"
6307
6316
  [attr.aria-selected]="activeTab() === tab.id">
6308
6317
  {{ tab.label }}
6309
- @if (tab.badge && tab.badge > 0) {
6318
+ @if (tab.badgeType === 'envelope') {
6319
+ <div class="envelope-wrapper">
6320
+ <ds-icon name="remixMailFill" size="20px" class="tw-text-current"></ds-icon>
6321
+ @if (tab.badge && tab.badge > 0) {
6322
+ <span class="envelope-badge">
6323
+ {{ tab.badge }}
6324
+ </span>
6325
+ }
6326
+ </div>
6327
+ } @else if (tab.badge && tab.badge > 0) {
6310
6328
  <span class="tab-badge">{{ tab.badge }}</span>
6311
6329
  }
6312
6330
  </button>
6313
6331
  }
6314
6332
  </div>
6315
- `, styles: [".filter-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;height:40px}.filter-tab{min-width:48px;justify-content:center;padding:0 12px;height:32px;border-radius:20px;background:transparent;border:none;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:rgba(var(--header-content-color-rgb, 255, 255, 255),.6);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-header-accent, #5d5fef);color:var(--color-on-header-accent, white)}.filter-tab:hover:not(.active){background:rgba(var(--header-content-color-rgb, 255, 255, 255),.1)}.tab-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:rgba(var(--header-content-color-rgb, 255, 255, 255),.2);color:var(--header-content-color, white);font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}.filter-tab.active .tab-badge{background:rgba(var(--color-on-header-accent-rgb, 255, 255, 255),.3);color:var(--color-on-header-accent, white)}\n"] }]
6333
+ `, styles: [".filter-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;height:40px}.filter-tab{min-width:48px;justify-content:center;padding:0 12px;height:32px;border-radius:20px;background:transparent;border:none;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:rgba(var(--header-content-color-rgb, 255, 255, 255),.6);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px;white-space:nowrap}.filter-tab.active{background:var(--color-header-accent, #5d5fef);color:var(--color-on-header-accent, white)}.filter-tab:hover:not(.active){background:rgba(var(--header-content-color-rgb, 255, 255, 255),.1)}.tab-badge{min-width:24px;height:16px;padding:0 6px;border-radius:10px;background:rgba(var(--header-content-color-rgb, 255, 255, 255),.2);color:var(--header-content-color, white);font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}.filter-tab.active .tab-badge{background:rgba(var(--color-on-header-accent-rgb, 255, 255, 255),.3);color:var(--color-on-header-accent, white)}.envelope-wrapper{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-left:4px}.envelope-badge{position:absolute;top:-3px;right:-5px;background-color:#ff3b30;color:#fff;font-size:10px;font-weight:700;border-radius:9999px;min-width:12px;height:12px;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;box-shadow:0 1px 2px #00000026;z-index:10}\n"] }]
6316
6334
  }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: true }] }], tabChange: [{ type: i0.Output, args: ["tabChange"] }] } });
6317
6335
 
6318
6336
  /**