valtech-components 4.0.951 → 4.0.952

package/fesm2022/valtech-components.mjs

@@ -67,7 +67,7 @@ import fixWebmDuration from 'fix-webm-duration';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.951';
+const VERSION = '4.0.952';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -34866,6 +34866,8 @@ class MemberCardComponent {
         this.props = input({});
         /** Emitted when the trailing action button is clicked. */
         this.onAction = new EventEmitter();
+        /** Emitted when the second trailing action button is clicked. */
+        this.onSecondaryAction = new EventEmitter();
         this.config = computed(() => ({
             ...MEMBER_CARD_DEFAULTS,
             ...this.props(),
@@ -34885,8 +34887,11 @@ class MemberCardComponent {
     emitAction() {
         this.onAction.emit(this.config().id);
     }
+    emitSecondaryAction() {
+        this.onSecondaryAction.emit(this.config().id);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MemberCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MemberCardComponent, isStandalone: true, selector: "val-member-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: MemberCardComponent, isStandalone: true, selector: "val-member-card", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction", onSecondaryAction: "onSecondaryAction" }, ngImport: i0, template: `
     <div class="member-card">
       <val-user-avatar
         [props]="{
@@ -34905,18 +34910,33 @@ class MemberCardComponent {
           <span class="member-card__role">{{ config().roleLabel }}</span>
         }
       </div>
-      @if (config().showAction) {
-        <button
-          type="button"
-          class="member-card__action"
-          [attr.aria-label]="config().actionAriaLabel"
-          (click)="emitAction()"
-        >
-          <ion-icon [name]="config().actionIcon" />
-        </button>
+      @if (config().showAction || config().showSecondaryAction) {
+        <div class="member-card__actions">
+          @if (config().showAction) {
+            <button
+              type="button"
+              class="member-card__action"
+              [attr.aria-label]="config().actionAriaLabel"
+              (click)="emitAction()"
+            >
+              <ion-icon [name]="config().actionIcon" />
+            </button>
+          }
+          @if (config().showSecondaryAction) {
+            <button
+              type="button"
+              class="member-card__action"
+              [class.member-card__action--danger]="config().secondaryActionDanger"
+              [attr.aria-label]="config().secondaryActionAriaLabel"
+              (click)="emitSecondaryAction()"
+            >
+              <ion-icon [name]="config().secondaryActionIcon" />
+            </button>
+          }
+        </div>
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}.member-card{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--ion-color-light, #f4f5f8)}:host-context(body.dark) .member-card,:host-context(html.ion-palette-dark) .member-card,:host-context([data-theme=dark]) .member-card{background:#ffffff0d}.member-card__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.member-card__name{font-weight:600;font-size:.9rem;color:var(--ion-color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-card__sub{font-size:.78rem;color:rgba(var(--ion-color-dark-rgb),.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-card__role{margin-top:4px;align-self:flex-start;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:20px;background:color-mix(in srgb,var(--ion-color-primary) 12%,transparent);color:var(--ion-color-primary)}.member-card__action{border:none;background:none;cursor:pointer;font-size:1.35rem;line-height:1;color:var(--ion-color-dark);padding:6px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}.member-card__action:hover{background:rgba(var(--ion-color-dark-rgb),.08)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: UserAvatarComponent, selector: "val-user-avatar", inputs: ["props"], outputs: ["onClick"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.member-card{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--ion-color-light, #f4f5f8)}:host-context(body.dark) .member-card,:host-context(html.ion-palette-dark) .member-card,:host-context([data-theme=dark]) .member-card{background:#ffffff0d}.member-card__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.member-card__name{font-weight:600;font-size:.9rem;color:var(--ion-color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-card__sub{font-size:.78rem;color:rgba(var(--ion-color-dark-rgb),.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-card__role{margin-top:4px;align-self:flex-start;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:20px;background:color-mix(in srgb,var(--ion-color-primary) 12%,transparent);color:var(--ion-color-primary)}.member-card__actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.member-card__action{border:none;background:none;cursor:pointer;font-size:1.35rem;line-height:1;color:var(--ion-color-dark);padding:6px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}.member-card__action:hover{background:rgba(var(--ion-color-dark-rgb),.08)}.member-card__action--danger{color:var(--ion-color-danger)}.member-card__action--danger:hover{background:rgba(var(--ion-color-danger-rgb),.1)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: UserAvatarComponent, selector: "val-user-avatar", inputs: ["props"], outputs: ["onClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MemberCardComponent, decorators: [{
             type: Component,
@@ -34939,20 +34959,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <span class="member-card__role">{{ config().roleLabel }}</span>
         }
       </div>
-      @if (config().showAction) {
-        <button
-          type="button"
-          class="member-card__action"
-          [attr.aria-label]="config().actionAriaLabel"
-          (click)="emitAction()"
-        >
-          <ion-icon [name]="config().actionIcon" />
-        </button>
+      @if (config().showAction || config().showSecondaryAction) {
+        <div class="member-card__actions">
+          @if (config().showAction) {
+            <button
+              type="button"
+              class="member-card__action"
+              [attr.aria-label]="config().actionAriaLabel"
+              (click)="emitAction()"
+            >
+              <ion-icon [name]="config().actionIcon" />
+            </button>
+          }
+          @if (config().showSecondaryAction) {
+            <button
+              type="button"
+              class="member-card__action"
+              [class.member-card__action--danger]="config().secondaryActionDanger"
+              [attr.aria-label]="config().secondaryActionAriaLabel"
+              (click)="emitSecondaryAction()"
+            >
+              <ion-icon [name]="config().secondaryActionIcon" />
+            </button>
+          }
+        </div>
       }
     </div>
-  `, styles: [":host{display:block}.member-card{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--ion-color-light, #f4f5f8)}:host-context(body.dark) .member-card,:host-context(html.ion-palette-dark) .member-card,:host-context([data-theme=dark]) .member-card{background:#ffffff0d}.member-card__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.member-card__name{font-weight:600;font-size:.9rem;color:var(--ion-color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-card__sub{font-size:.78rem;color:rgba(var(--ion-color-dark-rgb),.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-card__role{margin-top:4px;align-self:flex-start;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:20px;background:color-mix(in srgb,var(--ion-color-primary) 12%,transparent);color:var(--ion-color-primary)}.member-card__action{border:none;background:none;cursor:pointer;font-size:1.35rem;line-height:1;color:var(--ion-color-dark);padding:6px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}.member-card__action:hover{background:rgba(var(--ion-color-dark-rgb),.08)}\n"] }]
+  `, styles: [":host{display:block}.member-card{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--ion-color-light, #f4f5f8)}:host-context(body.dark) .member-card,:host-context(html.ion-palette-dark) .member-card,:host-context([data-theme=dark]) .member-card{background:#ffffff0d}.member-card__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.member-card__name{font-weight:600;font-size:.9rem;color:var(--ion-color-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-card__sub{font-size:.78rem;color:rgba(var(--ion-color-dark-rgb),.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-card__role{margin-top:4px;align-self:flex-start;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:3px 8px;border-radius:20px;background:color-mix(in srgb,var(--ion-color-primary) 12%,transparent);color:var(--ion-color-primary)}.member-card__actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.member-card__action{border:none;background:none;cursor:pointer;font-size:1.35rem;line-height:1;color:var(--ion-color-dark);padding:6px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}.member-card__action:hover{background:rgba(var(--ion-color-dark-rgb),.08)}.member-card__action--danger{color:var(--ion-color-danger)}.member-card__action--danger:hover{background:rgba(var(--ion-color-danger-rgb),.1)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onAction: [{
                 type: Output
+            }], onSecondaryAction: [{
+                type: Output
             }] } });
 
 const DEFAULT_NAMESPACE$n = 'PermissionSelector';
@@ -63483,7 +63520,7 @@ class OrganizationViewComponent {
         />
       </div>
     </val-container>
-  `, isInline: true, styles: [".page{padding:16px 0}.org-more-info-link{background:none;border:none;padding:4px 0;margin-top:4px;font-size:13px;font-weight:600;color:var(--ion-color-primary, #7026df);cursor:pointer;text-align:left}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;gap:8px}.invite-cta{display:flex;flex-direction:column;gap:16px}.invite-cta__text{display:flex;flex-direction:column;gap:4px}.invite-cta__actions{display:flex;gap:12px;flex-wrap:wrap}.org-info-card{border-radius:14px;background:var(--ion-color-light, #f4f5f8);overflow:hidden}.org-info-logo{display:flex;justify-content:center;padding:8px 0 16px}.org-logo-img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--ion-color-light)}:host-context(body.dark) .org-info-card,:host-context(html.ion-palette-dark) .org-info-card,:host-context([data-theme=\"dark\"]) .org-info-card{background:#ffffff0d}.org-info-field{padding:12px 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--val-border-color, rgba(0, 0, 0, .06))}.org-info-field:last-child{border-bottom:none}.org-info-label{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ion-color-medium)}.org-info-value{font-size:.95rem;font-weight:500;color:var(--ion-color-dark)}.org-info-value--muted{color:var(--ion-color-medium);font-weight:400}.plan-badge{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:20px;width:fit-content}.plan-badge--free{background:var(--ion-color-light-shade, #d7d8da);color:var(--ion-color-dark)}.plan-badge--pro{background:var(--ion-color-primary);color:#fff}.plan-badge--enterprise{background:#f5c542;color:#222}.members-list{display:flex;flex-direction:column;gap:8px}.members-show-more{background:none;border:none;color:var(--ion-color-primary);font-size:14px;font-weight:500;cursor:pointer;padding:8px 0}.rbac-debug{opacity:.7}.rbac-debug__body{display:flex;flex-direction:column;gap:6px;font-family:monospace;font-size:.78rem}.rbac-debug__row{display:flex;gap:8px;align-items:flex-start}.rbac-debug__label{color:var(--ion-color-medium);min-width:72px;flex-shrink:0}.rbac-debug__value{color:var(--ion-color-dark);word-break:break-all}.rbac-debug__value--perms{color:var(--ion-color-medium)}val-danger-section{margin:0 -4px}.settings-section+val-danger-section,val-danger-section+val-danger-section,val-danger-section+.settings-section{margin-top:12px}\n"], dependencies: [{ kind: "component", type: CreateOrgModalComponent, selector: "val-create-org-modal", inputs: ["i18nNamespace", "isOpen"], outputs: ["dismissed", "created"] }, { kind: "component", type: CtaCardComponent, selector: "val-cta-card", inputs: ["props"], outputs: ["onAction"] }, { kind: "component", type: DangerSectionComponent, selector: "val-danger-section", inputs: ["props"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "directive", type: HasPermissionDirective, selector: "[valHasPermission]", inputs: ["valHasPermission"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: MemberCardComponent, selector: "val-member-card", inputs: ["props"], outputs: ["onAction"] }, { kind: "component", type: PermissionsModalComponent, selector: "val-permissions-modal", inputs: ["isOpen", "config"], outputs: ["dismissed"] }, { kind: "component", type: SectionHeaderComponent, selector: "val-section-header", inputs: ["props"], outputs: ["actionClick"] }, { kind: "component", type: ContainerComponent, selector: "val-container", inputs: ["props"] }] }); }
+  `, isInline: true, styles: [".page{padding:16px 0}.org-more-info-link{background:none;border:none;padding:4px 0;margin-top:4px;font-size:13px;font-weight:600;color:var(--ion-color-primary, #7026df);cursor:pointer;text-align:left}.page-header{margin-bottom:16px}.settings-section{padding:16px 0}.settings-section+.settings-section{border-top:1px solid var(--val-border-color, rgba(0, 0, 0, .08))}.section-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.section-body{display:flex;flex-direction:column;gap:10px}.row-actions{margin-top:12px}.row-actions--gap{display:flex;gap:8px}.invite-cta{display:flex;flex-direction:column;gap:16px}.invite-cta__text{display:flex;flex-direction:column;gap:4px}.invite-cta__actions{display:flex;gap:12px;flex-wrap:wrap}.org-info-card{border-radius:14px;background:var(--ion-color-light, #f4f5f8);overflow:hidden}.org-info-logo{display:flex;justify-content:center;padding:8px 0 16px}.org-logo-img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--ion-color-light)}:host-context(body.dark) .org-info-card,:host-context(html.ion-palette-dark) .org-info-card,:host-context([data-theme=\"dark\"]) .org-info-card{background:#ffffff0d}.org-info-field{padding:12px 16px;display:flex;flex-direction:column;gap:4px;border-bottom:1px solid var(--val-border-color, rgba(0, 0, 0, .06))}.org-info-field:last-child{border-bottom:none}.org-info-label{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ion-color-medium)}.org-info-value{font-size:.95rem;font-weight:500;color:var(--ion-color-dark)}.org-info-value--muted{color:var(--ion-color-medium);font-weight:400}.plan-badge{display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:20px;width:fit-content}.plan-badge--free{background:var(--ion-color-light-shade, #d7d8da);color:var(--ion-color-dark)}.plan-badge--pro{background:var(--ion-color-primary);color:#fff}.plan-badge--enterprise{background:#f5c542;color:#222}.members-list{display:flex;flex-direction:column;gap:8px}.members-show-more{background:none;border:none;color:var(--ion-color-primary);font-size:14px;font-weight:500;cursor:pointer;padding:8px 0}.rbac-debug{opacity:.7}.rbac-debug__body{display:flex;flex-direction:column;gap:6px;font-family:monospace;font-size:.78rem}.rbac-debug__row{display:flex;gap:8px;align-items:flex-start}.rbac-debug__label{color:var(--ion-color-medium);min-width:72px;flex-shrink:0}.rbac-debug__value{color:var(--ion-color-dark);word-break:break-all}.rbac-debug__value--perms{color:var(--ion-color-medium)}val-danger-section{margin:0 -4px}.settings-section+val-danger-section,val-danger-section+val-danger-section,val-danger-section+.settings-section{margin-top:12px}\n"], dependencies: [{ kind: "component", type: CreateOrgModalComponent, selector: "val-create-org-modal", inputs: ["i18nNamespace", "isOpen"], outputs: ["dismissed", "created"] }, { kind: "component", type: CtaCardComponent, selector: "val-cta-card", inputs: ["props"], outputs: ["onAction"] }, { kind: "component", type: DangerSectionComponent, selector: "val-danger-section", inputs: ["props"] }, { kind: "component", type: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "directive", type: HasPermissionDirective, selector: "[valHasPermission]", inputs: ["valHasPermission"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextComponent, selector: "val-text", inputs: ["props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: MemberCardComponent, selector: "val-member-card", inputs: ["props"], outputs: ["onAction", "onSecondaryAction"] }, { kind: "component", type: PermissionsModalComponent, selector: "val-permissions-modal", inputs: ["isOpen", "config"], outputs: ["dismissed"] }, { kind: "component", type: SectionHeaderComponent, selector: "val-section-header", inputs: ["props"], outputs: ["actionClick"] }, { kind: "component", type: ContainerComponent, selector: "val-container", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OrganizationViewComponent, decorators: [{
             type: Component,