@colijnit/transaction 300.1.19 → 300.1.21

package/index.d.ts

@@ -298,6 +298,7 @@ import { SuggestedReceiptLocation } from '@colijnit/transactionapi/build/model/s
 import { PdfHistoricPosReceiptRequest } from '@colijnit/transactionapi/build/model/pdf-historic-pos-receipt-request';
 import { CreatePublicQuoteRequest } from '@colijnit/transactionapi/build/model/create-public-quote-request';
 import { UpsertTransactionStandardTextRequest } from '@colijnit/transactionapi/build/model/upsert-transaction-standard-text-request';
+import { ChangeHeaderExtraDocRequest } from '@colijnit/transactionapi/build/model/change-header-extra-doc-request';
 import { BusinessObjectIDType } from '@colijnit/ioneconnector/build/type/business-object-id-type';
 import { RelationKind as RelationKind$1 } from '@colijnit/articleapi/build/enum/relation-kind.enum';
 import { Relation } from '@colijnit/relationapi/build/model/relation.bo';
@@ -365,6 +366,7 @@ import { PlanningTask } from '@colijnit/transactionapi/build/model/planning-task
 import { LayoutCode as LayoutCode$1 } from '@colijnit/mainapi/build/enum/layout-code.enum';
 import { SearchType } from '@colijnit/transactionapi/build/enum/search-type.enum';
 import { QuantityInHistoricState } from '@colijnit/transactionapi/build/enum/quantity-in-historic-state.enum';
+import { ExtraDocValues } from '@colijnit/transactionapi/build/enum/extra-doc-values.enum';
 import { LogisticStickerRequest } from '@colijnit/transactionapi/build/model/logistic-sticker-request';
 import { Payment } from '@colijnit/transactionapi/build/model/payment.bo';
 import { WorkflowCategoryType } from '@colijnit/mainapi/build/enum/workflow-category.enum';
@@ -866,7 +868,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<{
@@ -1333,6 +1335,7 @@ declare class TransactionConnectorAdapterService {
     getDropshipmentInfosByRelationId(relationId: number): Promise<DropshipmentInfo[]>;
     insertNewDropshipmentInfo(request: DropshipmentInfo): Promise<void>;
     changeHeaderDropshipmentInfo(request: ChangeHeaderDropshipmentInfoRequest): Promise<TransactionInfoResponse>;
+    changeHeaderExtraDoc(request: ChangeHeaderExtraDocRequest): Promise<TransactionInfoResponse>;
     pdfPosReceipt(pdfPosReceiptRequest: PdfPosReceiptRequest, localPrint: boolean): Promise<boolean>;
     pdfHistoricPosReceipt(pdfHistoricPosReceiptRequest: PdfHistoricPosReceiptRequest, localPrint: boolean): Promise<boolean>;
     printPosReceipt(printPosReceiptRequest: PrintPosReceiptRequest): Promise<boolean>;
@@ -1841,6 +1844,7 @@ declare class TransactionConnectorService {
     getDropshipmentInfosByRelationId(relationId: number): Promise<DropshipmentInfo[]>;
     insertNewDropshipmentInfo(request: DropshipmentInfo): Promise<void>;
     changeHeaderDropshipmentInfo(request: ChangeHeaderDropshipmentInfoRequest): Promise<TransactionInfoResponse>;
+    changeHeaderExtraDoc(request: ChangeHeaderExtraDocRequest): Promise<TransactionInfoResponse>;
     pdfPosReceipt(pdfPosReceiptRequest: PdfPosReceiptRequest, localPrint: boolean): Promise<boolean>;
     pdfHistoricPosReceipt(pdfHistoricPosReceiptRequest: PdfHistoricPosReceiptRequest, localPrint: boolean): Promise<boolean>;
     printPosReceipt(printPosReceiptRequest: PrintPosReceiptRequest): Promise<boolean>;
@@ -2114,6 +2118,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",
@@ -2733,6 +2738,7 @@ declare class TransactionService extends PendingReasonService {
     getDropshipmentInfosByRelationId(relationId: number): Promise<DropshipmentInfo[]>;
     insertNewDropshipmentInfo(request: DropshipmentInfo): Promise<void>;
     changeHeaderDropshipmentInfo(request: ChangeHeaderDropshipmentInfoRequest): Promise<TransactionInfoResponse>;
+    changeHeaderExtraDoc(request: ChangeHeaderExtraDocRequest, saveTransaction: boolean): Promise<boolean>;
     pdfPosReceipt(pdfPosReceiptRequest: PdfPosReceiptRequest, localPrint?: boolean): Promise<boolean>;
     pdfHistoricPosReceipt(pdfHistoricPosReceiptRequest: PdfHistoricPosReceiptRequest, localPrint?: boolean): Promise<boolean>;
     printPosReceipt(printPosReceiptRequest: PrintPosReceiptRequest): Promise<boolean>;
@@ -4775,7 +4781,9 @@ declare class TransactionMappingService {
     private _cardConfig;
     private _sidePanelConfig;
     private _quickAccessConfig;
+    private _handledByDescription;
     constructor(_buttonBarConfig: TransactionButtonBarMappingConfig, _filterConfig: TransactionFilterMappingConfig, _searchConfig: TransactionSearchMappingConfig, _lineConfig: TransactionLineMappingConfig, _cardConfig: TransactionCardMappingConfig, _sidePanelConfig: TransactionSidePanelMappingConfig, _quickAccessConfig: TransactionQuickAccessMappingConfig);
+    getHandledByDescription(type: TransactionKind): string;
     getButtonBar(type: TransactionKind): TransactionBarButton[];
     getSidePanelComponent(type: TransactionKind): any;
     getQuickAccessComponent(type: TransactionKind, category: TransactionTypeCategory): any;
@@ -7679,12 +7687,16 @@ declare class AvatarComponent implements OnInit {
     get image(): CoDocument;
     set relationId(value: number);
     get relationId(): number;
+    tooltipTitle: string;
     set relation(value: RelationListObject);
     get relation(): RelationListObject;
-    showBranchNr: boolean;
+    showRelationNr: boolean;
     showClass(): boolean;
-    imageSrc: string;
     backgroundColor: string;
+    imageSrc: string;
+    relationName: string;
+    tooltip: string;
+    initialsFontSize: number;
     set initials(value: string);
     get initials(): string;
     private _initials;
@@ -7699,14 +7711,24 @@ declare class AvatarComponent implements OnInit {
     private _setRelationInitials;
     private _getImageContent;
     private _setBackgroundColor;
+    private _handleRelationSet;
+    /**
+     * Returns the font size (in SVG user units) at which the initials still fit inside the round avatar.
+     *
+     * The widest text that fits a circle depends on how tall that text is: for a centred single line with cap height
+     * `h` the usable chord is `2 * sqrt(r^2 - (h / 2)^2)`. Estimating the text width as
+     * `length * AVATAR_GLYPH_ADVANCE_RATIO * fontSize` and the cap height as `AVATAR_CAP_HEIGHT_RATIO * fontSize` and solving for the
+     * font size gives the expression below, capped at `AVATAR_MAX_FONT_SIZE` so short initials keep their normal size.
+     */
+    private _calculateFontSize;
     private _detectChanges;
     static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "co-avatar", never, { "image": { "alias": "image"; "required": false; }; "relationId": { "alias": "relationId"; "required": false; }; "relation": { "alias": "relation"; "required": false; }; "showBranchNr": { "alias": "showBranchNr"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "co-avatar", never, { "image": { "alias": "image"; "required": false; }; "relationId": { "alias": "relationId"; "required": false; }; "tooltipTitle": { "alias": "tooltipTitle"; "required": false; }; "relation": { "alias": "relation"; "required": false; }; "showRelationNr": { "alias": "showRelationNr"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 declare class AvatarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AvatarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AvatarModule, [typeof AvatarComponent], [typeof i2.CommonModule, typeof CoreModule], [typeof AvatarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AvatarModule, [typeof AvatarComponent], [typeof i2.CommonModule, typeof CoreModule, typeof i3.TooltipDirectiveModule], [typeof AvatarComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AvatarModule>;
 }
 
@@ -10105,7 +10127,7 @@ declare class TransactionSalesOverviewButtonBarButtonComponent extends Transacti
     showCategories: boolean;
     constructor(iconCacheService: IconCacheService, changeDetector: ChangeDetectorRef, _transactionEventService: TransactionEventService, _mappingService: TransactionMappingService, _dictionaryService: DictionaryService, _screenConfigService: TransactionScreenConfigurationService, _transactionService: TransactionService, _elementRef: ElementRef, _renderer: Renderer2, _transactionBaseService: TransactionService);
     currentIcon(): Icon.CartShoppingRegular | Icon.ChartPieSimpleRegular;
-    currentTitle(): "OVERVIEW" | "MARGINS";
+    currentTitle(): "MARGINS" | "OVERVIEW";
     ngOnDestroy(): void;
     handleClickWrapper(event: MouseEvent): void;
     handleMarginClicked(event: MouseEvent, category: TransactionTypeCategory): void;
@@ -10131,7 +10153,7 @@ declare class TransactionPurchaseOverviewButtonBarButtonComponent extends Transa
     constructor(iconCacheService: IconCacheService, transactionHeaderService: TransactionHeaderService, transactionEventService: TransactionEventService, changeDetector: ChangeDetectorRef, _mappingService: TransactionMappingService, _transactionService: TransactionService, _elementRef: ElementRef);
     ngOnDestroy(): void;
     currentIcon(): Icon.CartShoppingRegular | Icon.ChartPieSimpleRegular;
-    currentTitle(): "OVERVIEW" | "MARGINS";
+    currentTitle(): "MARGINS" | "OVERVIEW";
     handleClickWrapper(event: MouseEvent): void;
     handleMarginClicked(event: MouseEvent, category: TransactionTypeCategory): Promise<void>;
     private handleDocumentClick;
@@ -10183,7 +10205,7 @@ declare class TransactionSalesQuotationButtonBarButtonComponent extends Transact
     showCategories: boolean;
     constructor(iconCacheService: IconCacheService, changeDetector: ChangeDetectorRef, _transactionEventService: TransactionEventService, _mappingService: TransactionMappingService, _dictionaryService: DictionaryService, _screenConfigService: TransactionScreenConfigurationService, _transactionService: TransactionService, _elementRef: ElementRef, _renderer: Renderer2, _transactionBaseService: TransactionService);
     currentIcon(): Icon.CartShoppingRegular | Icon.ChartPieSimpleRegular;
-    currentTitle(): "OVERVIEW" | "MARGINS";
+    currentTitle(): "MARGINS" | "OVERVIEW";
     ngOnDestroy(): void;
     handleClickWrapper(event: MouseEvent): void;
     handleMarginClicked(event: MouseEvent, category: TransactionTypeCategory): void;
@@ -13954,7 +13976,6 @@ declare class TransactionHeaderBlockComponent {
     secondBlockTemplate: TemplateRef<any>;
     thirdBlockTemplate: TemplateRef<any>;
     hiddenBlockTemplate: TemplateRef<any>;
-    dontShowEditIcon: boolean;
     headerClick: EventEmitter<MouseEvent>;
     showClass(): boolean;
     handleHostClick(event: MouseEvent): void;
@@ -13962,7 +13983,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 {
@@ -14334,8 +14355,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;
@@ -14357,9 +14384,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>;
 }
 
@@ -14744,6 +14811,7 @@ declare class TransactionQuickAccessOverviewModule {
 }
 
 declare class TransactionQuickAccessOrderDeliveryComponent extends TransactionQuickAccessSendMethodBaseComponent implements OnInit, AfterViewInit, OnDestroy {
+    protected readonly ExtraDocValues: typeof ExtraDocValues;
     showClass(): boolean;
     reportDocumentEmailRequest: ReportingDocumentEmailSignDocBaseRequest;
     reportDocumentPrintRequest: ReportingDocumentPrintSignDocBaseRequest;
@@ -14758,6 +14826,7 @@ declare class TransactionQuickAccessOrderDeliveryComponent extends TransactionQu
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     handleSelectAllLines(value: boolean): void;
+    handleNoDeliveryNoteChanged(value: boolean): Promise<void>;
     protected getDefaultEmailAddressList(): Promise<string[]>;
     protected getDefaultSendMethod(): Promise<number>;
     protected getEmailLayouts(): Promise<ReportLayoutSelectionEmail[]>;
@@ -16772,7 +16841,9 @@ declare class TransactionSalesPersonInputModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<TransactionSalesPersonInputModule>;
 }
 
-declare class TransactionHeaderHandledByComponent implements ScreenConfigAdapterComponent {
+declare class TransactionHeaderHandledByComponent implements ScreenConfigAdapterComponent, OnInit {
+    private _mappingService;
+    private _dictionary;
     transaction: TransactionInfoResponse;
     showClass(): boolean;
     objectConfigName: string;
@@ -16783,13 +16854,18 @@ declare class TransactionHeaderHandledByComponent implements ScreenConfigAdapter
     maxLength: number;
     decimals: number;
     redErrorBackground: boolean;
+    relationName: string;
+    handledByDescription: string;
+    tooltip: string;
+    constructor(_mappingService: TransactionMappingService, _dictionary: DictionaryService);
+    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TransactionHeaderHandledByComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TransactionHeaderHandledByComponent, "co-transaction-header-handled-by", never, { "transaction": { "alias": "transaction"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 declare class TransactionHeaderHandledByModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TransactionHeaderHandledByModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TransactionHeaderHandledByModule, [typeof TransactionHeaderHandledByComponent], [typeof i2.CommonModule, typeof AvatarModule], [typeof TransactionHeaderHandledByComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TransactionHeaderHandledByModule, [typeof TransactionHeaderHandledByComponent], [typeof i2.CommonModule, typeof AvatarModule, typeof i3.TooltipDirectiveModule], [typeof TransactionHeaderHandledByComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TransactionHeaderHandledByModule>;
 }
 

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/lib/component/transaction-quick-access/transaction-quick-access-order-delivery/style/_layout.scss

@@ -1,12 +1,17 @@
 @include export-module('co-transaction-quick-access-order-delivery-layout') {
   .co-transaction-quick-access-order-delivery {
-    .select-all-wrapper {
+    .quick-access-content-wrapper {
       display: flex;
-      align-items: center;
-    }
+      row-gap: 10px;
+      align-items: start;
+      flex-direction: column;
 
-    .hidden {
-      display: none;
+      .sub-section {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        column-gap: 10px;
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/transaction",
-  "version": "300.1.19",
+  "version": "300.1.21",
   "description": "Colijn IT transaction module for Angular 20",
   "repository": "npm/npm",
   "author": "Colijn IT",
@@ -13,13 +13,13 @@
     "@colijnit/catalog": ">=300.1.0",
     "@colijnit/corecomponents_v12": ">=300.1.4",
     "@colijnit/ioneconnector": ">=300.1.0",
-    "@colijnit/mainapi": ">=300.1.10",
+    "@colijnit/mainapi": ">=300.1.11",
     "@colijnit/product": ">=300.1.0",
     "@colijnit/relation": ">=300.1.0",
     "@colijnit/relationapi": ">=300.1.1",
     "@colijnit/sharedapi": ">=1.0.20",
-    "@colijnit/sharedcomponents": ">=300.1.8",
-    "@colijnit/transactionapi": ">=300.1.8"
+    "@colijnit/sharedcomponents": ">=300.1.13",
+    "@colijnit/transactionapi": ">=300.1.11"
   },
   "dependencies": {
     "tslib": "^2.8.1"