[FEAT] Add truncated design and support for injecting the `DaffMenuModule` to `DaffBreadcrumbComponent`

[xelaint]

💡 Feature request

Feature Name

Add truncated design and support for injecting the DaffMenuModule to DaffBreadcrumbComponent

The Desired Behavior

• Provide the UI for full breadcrumb list
• The UI can show a truncated design (i.e. dots) if it's too long
• On desktop/mobile, truncated design opens a little menu (using the DaffMenuModule)
• Breadcrumb accepts a "char count" for total breadcrumb length

Your Use Case

Prior Work

Environment

Daffodil version: X.Y.Z
Angular version: X.Y.Z 

 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[xelaint]

<ng-template #menu>
	<daff-menu>
		@for (breadcrumbItem of breadcrumbItems; track breadcrumbItem) {
			<button daff-menu-item>
				<ng-container *ngTemplateOutlet="breadcrumbItem.itemRef"></ng-container>
			</button>
		}
	</daff-menu>	
</ng-template>

@for (breadcrumbItem of breadcrumbItems; track breadcrumbItem) {
	<li class="daff-breadcrumb__item">
		<ng-container *ngTemplateOutlet="breadcrumbItem.itemRef"></ng-container>
	</li>
}

Breadcrumbs outside of menu disappear when menu activator is clicked.

Mobile

• Show ellipsis to open menu + last breadcrumb item

Tablet/Desktop

• Show all breadcrumb items if there are 5 or less.
• Truncate when there are 6 or more breadcrumb items.
• Show first two and last two with a menu button in between when truncated.
• Menu shows all the breadcrumb items in between first and last two items.