@colijnit/transaction 262.1.45 → 262.1.47

package/index.d.ts

@@ -867,7 +867,7 @@ declare class TransactionEventService {
     readonly transactionCopyNavigation: Subject<string>;
     readonly transactionDeleted: Subject<void>;
     readonly transactionPaymentDone: Subject<void>;
-    readonly transactionLoaded: Subject<void>;
+    readonly transactionLoaded: Subject<TransactionInfoResponse>;
     readonly copyOrder: Subject<void>;
     readonly updateTransactionReferences: Subject<void>;
     readonly transactionLineVisibilityChange: BehaviorSubject<{
@@ -2105,6 +2105,7 @@ declare enum Icon {
     CloseDialog = "close_dialog",
     CodeRegular = "code_regular",
     ContainerStorageRegularFull = "container_storage_regular_full",
+    CopyRegularFull = "copy_regular_full",
     CreditCardRegular = "credit_card_regular",
     CreditCardRegularCheck = "credit_card_regular_check",
     CreditCardSolid = "credit_card_solid",
@@ -13824,7 +13825,6 @@ declare class TransactionHeaderBlockComponent {
     secondBlockTemplate: TemplateRef<any>;
     thirdBlockTemplate: TemplateRef<any>;
     hiddenBlockTemplate: TemplateRef<any>;
-    dontShowEditIcon: boolean;
     headerClick: EventEmitter<MouseEvent>;
     showClass(): boolean;
     handleHostClick(event: MouseEvent): void;
@@ -13832,7 +13832,7 @@ declare class TransactionHeaderBlockComponent {
     constructor(iconCacheService: IconCacheService);
     onHeaderClick(event: MouseEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TransactionHeaderBlockComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TransactionHeaderBlockComponent, "co-transaction-header-block", never, { "headerBlockTemplate": { "alias": "headerBlockTemplate"; "required": false; }; "firstBlockTemplate": { "alias": "firstBlockTemplate"; "required": false; }; "secondBlockTemplate": { "alias": "secondBlockTemplate"; "required": false; }; "thirdBlockTemplate": { "alias": "thirdBlockTemplate"; "required": false; }; "hiddenBlockTemplate": { "alias": "hiddenBlockTemplate"; "required": false; }; "dontShowEditIcon": { "alias": "dontShowEditIcon"; "required": false; }; }, { "headerClick": "headerClick"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TransactionHeaderBlockComponent, "co-transaction-header-block", never, { "headerBlockTemplate": { "alias": "headerBlockTemplate"; "required": false; }; "firstBlockTemplate": { "alias": "firstBlockTemplate"; "required": false; }; "secondBlockTemplate": { "alias": "secondBlockTemplate"; "required": false; }; "thirdBlockTemplate": { "alias": "thirdBlockTemplate"; "required": false; }; "hiddenBlockTemplate": { "alias": "hiddenBlockTemplate"; "required": false; }; }, { "headerClick": "headerClick"; }, never, never, false, never>;
 }
 
 declare class TransactionHeaderBlockModule {
@@ -14178,8 +14178,14 @@ declare class TransactionHeaderComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<TransactionHeaderComponent, "co-transaction-header", never, { "transaction": { "alias": "transaction"; "required": false; }; }, {}, never, never, false, never>;
 }
 
+declare enum ContactValueKind {
+    Email = "email",
+    Phone = "phone"
+}
+
 declare class TransactionHeaderRelationComponent extends TransactionHeaderBaseComponent implements OnInit, OnDestroy {
     readonly icons: typeof Icon;
+    readonly contactKinds: typeof ContactValueKind;
     showClass(): boolean;
     firstAddress: string;
     firstPostal: string;
@@ -14201,9 +14207,49 @@ declare class TransactionHeaderRelationComponent extends TransactionHeaderBaseCo
     static ɵcmp: i0.ɵɵComponentDeclaration<TransactionHeaderRelationComponent, "co-transaction-header-relation", never, {}, {}, never, never, false, never>;
 }
 
+declare class TransactionHeaderContactComponent implements OnInit, OnDestroy {
+    iconCacheService: IconCacheService;
+    private _changeDetector;
+    value: string;
+    kind: ContactValueKind;
+    showClass(): boolean;
+    readonly icons: typeof Icon;
+    copied: boolean;
+    /**
+     * Href of the `mailto:` / `tel:` link, or `undefined` when the value must render as plain text.
+     * Only touch-only devices get a link: there a tap to call or to mail is what the user wants, and a
+     * long press hands them the operating system's own "copy" menu. With a mouse the same link would
+     * hijack the click and open an unwanted mail client.
+     */
+    get href(): string;
+    private _touchOnlyDevice;
+    private _copyResetTimeoutId;
+    constructor(iconCacheService: IconCacheService, _changeDetector: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    handleValueClick(event: MouseEvent): void;
+    handleCopyClick(event: MouseEvent): void;
+    private _isTouchOnlyDevice;
+    private _copyUsingFallback;
+    private _confirmCopy;
+    /**
+     * Fallback for the pages where `navigator.clipboard` is missing — it needs a secure context, so it is
+     * simply absent when iOne is served over plain http.
+     */
+    private _copyUsingSelection;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TransactionHeaderContactComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TransactionHeaderContactComponent, "co-transaction-header-contact", never, { "value": { "alias": "value"; "required": false; }; "kind": { "alias": "kind"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+declare class TransactionHeaderContactModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TransactionHeaderContactModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TransactionHeaderContactModule, [typeof TransactionHeaderContactComponent], [typeof i2.CommonModule, typeof i3.IconModule, typeof PipeModule], [typeof TransactionHeaderContactComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<TransactionHeaderContactModule>;
+}
+
 declare class TransactionHeaderRelationModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TransactionHeaderRelationModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TransactionHeaderRelationModule, [typeof TransactionHeaderRelationComponent], [typeof i2.CommonModule, typeof TransactionHeaderBlockModule, typeof CheckoutModule, typeof RelationTypeModule, typeof CoreModule, typeof RelationGeneralModule, typeof RelationAddressModule, typeof RelationAddressesModule, typeof i3.InputCheckboxModule, typeof RelationContactDetailsModule, typeof RelationPreferencesModule, typeof PipeModule, typeof i3.CoDialogModule, typeof TransactionFilterCategoriesModule, typeof i3.ButtonModule, typeof i3.FormModule, typeof TransactionHeaderPopupModule, typeof i3.IconModule, typeof AvatarModule, typeof i3.ScreenConfigurationModule], [typeof TransactionHeaderRelationComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TransactionHeaderRelationModule, [typeof TransactionHeaderRelationComponent], [typeof i2.CommonModule, typeof TransactionHeaderBlockModule, typeof TransactionHeaderContactModule, typeof CheckoutModule, typeof RelationTypeModule, typeof CoreModule, typeof RelationGeneralModule, typeof RelationAddressModule, typeof RelationAddressesModule, typeof i3.InputCheckboxModule, typeof RelationContactDetailsModule, typeof RelationPreferencesModule, typeof PipeModule, typeof i3.CoDialogModule, typeof TransactionFilterCategoriesModule, typeof i3.ButtonModule, typeof i3.FormModule, typeof TransactionHeaderPopupModule, typeof i3.IconModule, typeof AvatarModule, typeof i3.ScreenConfigurationModule], [typeof TransactionHeaderRelationComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TransactionHeaderRelationModule>;
 }
 

package/lib/component/core/base/components/transaction-header-block/style/_layout.scss

@@ -17,10 +17,6 @@
       border-radius: $tp-transaction-header-block-border-radius $tp-transaction-header-block-border-radius 0 0;
       z-index: 100;
     }
-    &.no-pointer {
-      pointer-events: none;
-      cursor: initial;
-    }
     .transaction-header-block-header {
       font-family: $tp-transaction-header-block-label-font-family;
       display: flex;

package/lib/component/core/base/components/transaction-header-contact/style/_layout.scss

@@ -0,0 +1,65 @@
+@include export-module('co-transaction-header-contact-layout') {
+  .co-transaction-header-contact {
+    display: flex;
+    align-items: center;
+    column-gap: var(--co-transaction-header-contact-column-gap);
+    min-width: 0;
+
+    .transaction-header-contact-value {
+      flex: 1 1 auto;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      text-decoration: none;
+    }
+
+    .transaction-header-contact-copy {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: var(--co-transaction-header-contact-copy-hit-size);
+      height: var(--co-transaction-header-contact-copy-hit-size);
+      cursor: pointer;
+      // Always visible, so the option is discoverable without a hovering pointer.
+      opacity: var(--co-transaction-header-contact-copy-idle-opacity);
+      transition: var(--co-transaction-header-contact-copy-transition);
+
+      &:hover, &.copied {
+        opacity: 1;
+      }
+
+      .co-icon {
+        width: var(--co-transaction-header-contact-copy-icon-size);
+        height: var(--co-transaction-header-contact-copy-icon-size);
+      }
+    }
+
+    // Deliberately not the screen-mobile mixin: the target has to grow wherever a finger is doing the
+    // tapping, which is the same condition under which the component renders a mailto: / tel: link.
+    // A tablet in landscape is wider than the mobile breakpoint and still needs the bigger target.
+    @media only screen and (max-width: 700px), (hover: none) and (pointer: coarse) {
+      min-height: var(--co-transaction-header-contact-copy-hit-size-touch);
+
+      .transaction-header-contact-copy {
+        width: var(--co-transaction-header-contact-copy-hit-size-touch);
+        height: var(--co-transaction-header-contact-copy-hit-size-touch);
+      }
+    }
+  }
+
+  .transaction-header-contact-clipboard-proxy {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border-width: 0;
+    // iOS zooms in on a focused field below 16px, even one it cannot see.
+    font-size: 16px;
+    opacity: 0;
+    pointer-events: none;
+  }
+}

package/lib/component/core/base/components/transaction-header-contact/style/_material-definition.scss

@@ -0,0 +1,25 @@
+$tp-transaction-header-contact-column-gap: 4px !default;
+$tp-transaction-header-contact-copy-icon-size: 11px !default;
+$tp-transaction-header-contact-copy-hit-size: 16px !default;
+// A finger needs a target of its own; on touch the contact row grows to fit it.
+$tp-transaction-header-contact-copy-hit-size-touch: 32px !default;
+$tp-transaction-header-contact-copy-idle-opacity: 0.45 !default;
+$tp-transaction-header-contact-copy-transition: opacity 0.2s !default;
+
+$tp-transaction-header-contact-copy-color: $tp-color-text-grey !default;
+$tp-transaction-header-contact-copy-hover-color: $tp-color-action !default;
+$tp-transaction-header-contact-copied-color: $tp-color-active !default;
+
+@include export-module('co-transaction-header-contact-tokens') {
+  :root {
+    --co-transaction-header-contact-column-gap: #{$tp-transaction-header-contact-column-gap};
+    --co-transaction-header-contact-copy-icon-size: #{$tp-transaction-header-contact-copy-icon-size};
+    --co-transaction-header-contact-copy-hit-size: #{$tp-transaction-header-contact-copy-hit-size};
+    --co-transaction-header-contact-copy-hit-size-touch: #{$tp-transaction-header-contact-copy-hit-size-touch};
+    --co-transaction-header-contact-copy-idle-opacity: #{$tp-transaction-header-contact-copy-idle-opacity};
+    --co-transaction-header-contact-copy-transition: #{$tp-transaction-header-contact-copy-transition};
+    --co-transaction-header-contact-copy-color: #{$tp-transaction-header-contact-copy-color};
+    --co-transaction-header-contact-copy-hover-color: #{$tp-transaction-header-contact-copy-hover-color};
+    --co-transaction-header-contact-copied-color: #{$tp-transaction-header-contact-copied-color};
+  }
+}

package/lib/component/core/base/components/transaction-header-contact/style/_theme.scss

@@ -0,0 +1,34 @@
+@include export-module('co-transaction-header-contact-theme') {
+  .co-transaction-header-contact {
+    .transaction-header-contact-value {
+      color: inherit;
+    }
+
+    .transaction-header-contact-copy {
+      svg {
+        fill: var(--co-transaction-header-contact-copy-color);
+      }
+      [fill] {
+        fill: var(--co-transaction-header-contact-copy-color);
+      }
+
+      &:hover {
+        svg {
+          fill: var(--co-transaction-header-contact-copy-hover-color);
+        }
+        [fill] {
+          fill: var(--co-transaction-header-contact-copy-hover-color);
+        }
+      }
+
+      &.copied {
+        svg {
+          fill: var(--co-transaction-header-contact-copied-color);
+        }
+        [fill] {
+          fill: var(--co-transaction-header-contact-copied-color);
+        }
+      }
+    }
+  }
+}

package/lib/component/core/base/components/transaction-header-contact/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";

package/lib/component/transaction-header/transaction-header-relation/style/_layout.scss

@@ -125,7 +125,7 @@
         .header-relation-email {
           margin: $tp-co-transaction-header-relation-content-email-margin;
         }
-        .text-overflow {
+        .text-overflow, .co-transaction-header-contact .transaction-header-contact-value {
           max-height: $tp-co-transaction-header-relation-content-line-height;
           text-overflow: ellipsis;
           overflow: hidden;

package/lib/component/transaction-header/transaction-header-relation/style/material.scss

@@ -2,6 +2,7 @@
 @import "./layout";
 @import "./theme";
 @import "../../../core/base/components/transaction-header-block/style/material";
+@import "../../../core/base/components/transaction-header-contact/style/material";
 @import "../../../relation/relation-type/style/material";
 @import "../../../relation/relation-addresses/style/material";
 @import "../../../relation/relation-address/style/material";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/transaction",
-  "version": "262.1.45",
+  "version": "262.1.47",
   "description": "Colijn IT transaction module for Angular 20",
   "repository": "npm/npm",
   "author": "Colijn IT",