@dnd-mapp/shared-ui 0.1.0 โ 1.1.0
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.
- package/README.md +44 -64
- package/assets/images/404.png +0 -0
- package/assets/images/apple-touch-icon.png +0 -0
- package/assets/images/favicon-16.png +0 -0
- package/assets/images/favicon-32.png +0 -0
- package/assets/images/favicon-512.png +0 -0
- package/assets/images/favicon.ico +0 -0
- package/assets/styles/main.css +6 -0
- package/fesm2022/dnd-mapp-shared-ui.mjs +389 -8
- package/fesm2022/dnd-mapp-shared-ui.mjs.map +1 -1
- package/package.json +22 -16
- package/src/lib/button/README.md +131 -0
- package/src/lib/dropdown/README.md +127 -0
- package/src/lib/forms/input/README.md +105 -0
- package/src/lib/nav/active-marker/README.md +102 -0
- package/src/lib/nav/app-top-bar/README.md +113 -0
- package/src/lib/nav/navbar/README.md +98 -0
- package/src/lib/nav/navbar-brand/README.md +77 -0
- package/src/lib/nav/navbar-link/README.md +65 -0
- package/src/lib/nav/navbar-menu/README.md +125 -0
- package/src/lib/vertical-rule/README.md +97 -0
- package/types/dnd-mapp-shared-ui.d.ts +150 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dnd-mapp-shared-ui.mjs","sources":["../../../projects/shared-ui/src/lib/shared-ui.ts","../../../projects/shared-ui/src/public-api.ts","../../../projects/shared-ui/src/dnd-mapp-shared-ui.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'dma-shared-ui',\n template: `<p>shared-ui works!</p>`,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [],\n})\nexport class SharedUi {}\n","/**\n * Public API Surface of @dnd-mapp/shared-ui\n */\nexport * from './lib';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAQa,QAAQ,CAAA;uGAAR,QAAQ,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAR,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,QAAQ,yEAJP,CAAA,uBAAA,CAAyB,EAAA,QAAA,EAAA,IAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAI1B,QAAQ,EAAA,UAAA,EAAA,CAAA;kBANpB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,eAAe;AACzB,oBAAA,QAAQ,EAAE,CAAA,uBAAA,CAAyB;oBACnC,eAAe,EAAE,uBAAuB,CAAC,MAAM;AAC/C,oBAAA,OAAO,EAAE,EAAE;AACd,iBAAA;;;ACPD;;AAEG;;ACFH;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"dnd-mapp-shared-ui.mjs","sources":["../../../projects/shared-ui/src/lib/button/button-color.ts","../../../projects/shared-ui/src/lib/button/button.component.ts","../../../projects/shared-ui/src/lib/button/button.component.html","../../../projects/shared-ui/src/lib/dropdown/positions.ts","../../../projects/shared-ui/src/lib/dropdown/dropdown-anchor.directive.ts","../../../projects/shared-ui/src/lib/dropdown/dropdown-container.component.ts","../../../projects/shared-ui/src/lib/forms/value-accessor.ts","../../../projects/shared-ui/src/lib/forms/input/input.component.ts","../../../projects/shared-ui/src/lib/forms/input/input.component.html","../../../projects/shared-ui/src/lib/icons/solid/circle-user/circle-user.icon.ts","../../../projects/shared-ui/src/lib/icons/solid/circle-user/circle-user.icon.svg","../../../projects/shared-ui/src/lib/nav/active-marker/active-marker.component.ts","../../../projects/shared-ui/src/lib/nav/active-marker/active-marker.component.html","../../../projects/shared-ui/src/lib/nav/app-top-bar/section-position.ts","../../../projects/shared-ui/src/lib/nav/app-top-bar/app-top-bar-section.component.ts","../../../projects/shared-ui/src/lib/nav/app-top-bar/app-top-bar.component.ts","../../../projects/shared-ui/src/lib/nav/navbar-brand/navbar-brand.component.ts","../../../projects/shared-ui/src/lib/nav/navbar-brand/navbar-brand.component.html","../../../projects/shared-ui/src/lib/nav/navbar-link/navbar-link.component.ts","../../../projects/shared-ui/src/lib/nav/navbar-link/navbar-link.component.html","../../../projects/shared-ui/src/lib/nav/navbar-menu/navbar-menu.component.ts","../../../projects/shared-ui/src/lib/nav/navbar-menu/navbar-menu.component.html","../../../projects/shared-ui/src/lib/nav/navbar/navbar.component.ts","../../../projects/shared-ui/src/lib/vertical-rule/vertical-rule.component.ts","../../../projects/shared-ui/src/public-api.ts","../../../projects/shared-ui/src/dnd-mapp-shared-ui.ts"],"sourcesContent":["import { AttributeInput } from '../attribute-input';\n\nexport const ButtonColors = {\n PRIMARY: 'primary',\n BASE: 'base',\n DANGER: 'danger',\n} as const;\n\nexport type ButtonColor = (typeof ButtonColors)[keyof typeof ButtonColors];\n\nexport const DEFAULT_BUTTON_COLOR: ButtonColor = ButtonColors.BASE;\n\nexport function buttonColorAttribute(value: AttributeInput<ButtonColor>) {\n return Object.values(ButtonColors).find((color) => value === color) ?? DEFAULT_BUTTON_COLOR;\n}\n","import { Component, computed, input } from '@angular/core';\nimport { buttonColorAttribute, ButtonColors, DEFAULT_BUTTON_COLOR } from './button-color';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'button[dma-button]',\n templateUrl: './button.component.html',\n host: {\n 'class': 'font-semibold cursor-pointer py-2 px-4 rounded-md',\n '[class.text-neutral-900]': 'isBase()',\n '[class.bg-neutral-100]': 'isBase()',\n '[class.hover:bg-neutral-200]': 'isBase()',\n '[class.active:bg-neutral-300]': 'isBase()',\n '[class.text-neutral-100]': 'isPrimary()',\n '[class.bg-blue-400]': 'isPrimary()',\n '[class.hover:bg-blue-500]': 'isPrimary()',\n '[class.active:bg-blue-600]': 'isPrimary()',\n '[class.text-red-600]': 'isDanger()',\n '[class.hover:bg-red-50]': 'isDanger()',\n '[class.active:bg-red-100]': 'isDanger()',\n },\n imports: [],\n})\nexport class ButtonComponent {\n public readonly color = input(DEFAULT_BUTTON_COLOR, { transform: buttonColorAttribute, alias: 'dma-button' });\n\n protected readonly isBase = computed(() => this.color() === ButtonColors.BASE);\n\n protected readonly isPrimary = computed(() => this.color() === ButtonColors.PRIMARY);\n\n protected readonly isDanger = computed(() => this.color() === ButtonColors.DANGER);\n}\n","<div class=\"flex gap-2 items-center justify-center\">\n <ng-content select=\"dma-leading-icon\" />\n <ng-content />\n</div>\n","import { ConnectedPosition } from '@angular/cdk/overlay';\n\nexport const DEFAULT_DROPDOWN_POSITIONS: ConnectedPosition[] = [\n {\n originX: 'start',\n originY: 'bottom',\n overlayX: 'start',\n overlayY: 'top',\n offsetY: 4,\n },\n {\n originX: 'start',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetY: -4,\n },\n];\n","import { ConnectedPosition, Overlay, OverlayRef } from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport {\n booleanAttribute,\n DestroyRef,\n Directive,\n ElementRef,\n inject,\n input,\n output,\n TemplateRef,\n ViewContainerRef,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { debounceTime, filter, Subject } from 'rxjs';\nimport { DEFAULT_DROPDOWN_POSITIONS } from './positions';\n\n@Directive({\n selector: '[dmaDropdownAnchor]',\n exportAs: 'dmaDropdownAnchor',\n host: {\n '(click)': 'onClick()',\n '(mouseenter)': 'onMouseenter()',\n '(mouseleave)': 'onMouseleave()',\n },\n})\nexport class DropdownAnchorDirective {\n private readonly overlay = inject(Overlay);\n private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n private readonly viewContainerRef = inject(ViewContainerRef);\n private readonly destroyRef = inject(DestroyRef);\n\n public readonly dropdownContainerTemplateRef = input.required<TemplateRef<unknown>>({ alias: 'dmaDropdownAnchor' });\n\n public readonly positions = input<ConnectedPosition[]>(DEFAULT_DROPDOWN_POSITIONS);\n\n public readonly toggleOnHover = input(false, { transform: booleanAttribute });\n\n public readonly dropdownToggle = output<boolean>();\n\n private readonly hideScheduler = new Subject<boolean>();\n\n private overlayRef: OverlayRef | null = null;\n\n constructor() {\n this.hideScheduler\n .asObservable()\n .pipe(debounceTime(100), filter(Boolean), takeUntilDestroyed())\n .subscribe({\n next: () => {\n if (!this.toggleOnHover()) return;\n this.hide();\n },\n });\n }\n\n public show() {\n this.hideScheduler.next(false);\n if (this.overlayRef) return;\n\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(this.elementRef)\n .withPositions(this.positions());\n\n this.overlayRef = this.overlay.create({\n positionStrategy: positionStrategy,\n scrollStrategy: this.overlay.scrollStrategies.close(),\n disposeOnNavigation: true,\n width: getComputedStyle(this.elementRef.nativeElement).width,\n });\n\n this.overlayRef.attach(new TemplatePortal(this.dropdownContainerTemplateRef(), this.viewContainerRef));\n\n this.overlayRef\n .detachments()\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe({\n next: () => this.hide(),\n });\n\n this.dropdownToggle.emit(true);\n }\n\n public scheduleHide(shouldHide: boolean) {\n this.hideScheduler.next(shouldHide);\n }\n\n protected onClick() {\n if (this.toggleOnHover()) return;\n this.toggle();\n }\n\n protected onMouseenter() {\n if (!this.toggleOnHover()) return;\n this.show();\n }\n\n protected onMouseleave() {\n if (!this.toggleOnHover()) return;\n this.hideScheduler.next(true);\n }\n\n private toggle() {\n if (this.overlayRef) this.hide();\n else this.show();\n }\n\n private hide() {\n if (this.overlayRef === null) return;\n this.overlayRef.dispose();\n this.overlayRef = null;\n\n this.dropdownToggle.emit(false);\n }\n}\n","import { ChangeDetectionStrategy, Component, output } from '@angular/core';\n\n@Component({\n selector: 'dma-dropdown-container',\n template: `<ng-content />`,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'block w-full shadow-md border border-neutral-200 rounded-md bg-neutral-50 p-1',\n '(mouseenter)': 'onMouseenter()',\n '(mouseleave)': 'onMouseleave()',\n },\n})\nexport class DropdownContainerComponent {\n public readonly hover = output<boolean>();\n\n protected onMouseenter() {\n this.hover.emit(true);\n }\n\n protected onMouseleave() {\n this.hover.emit(false);\n }\n}\n","import { ExistingProvider, Type } from '@angular/core';\nimport { NG_VALUE_ACCESSOR } from '@angular/forms';\n\nexport function provideValueAccessor<T>(component: Type<T>): ExistingProvider {\n return {\n provide: NG_VALUE_ACCESSOR,\n useExisting: component,\n multi: true,\n };\n}\n\nexport type NgOnChange<T> = (value: T) => void;\n\nexport type NgOnTouched = () => void;\n","import { booleanAttribute, ChangeDetectionStrategy, Component, input, model } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { debounceTime, Subject } from 'rxjs';\nimport { NgOnChange, NgOnTouched, provideValueAccessor } from '../value-accessor';\n\n@Component({\n selector: 'dma-input',\n templateUrl: './input.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'group',\n },\n imports: [],\n providers: [provideValueAccessor(InputComponent)],\n})\nexport class InputComponent implements ControlValueAccessor {\n public readonly inputId = input.required<string>();\n\n public readonly label = input.required<string>();\n\n public readonly placeholder = input<string>('');\n\n public readonly readonly = input(false, { transform: booleanAttribute });\n\n public readonly value = model<string>('');\n\n public readonly disabled = model<boolean>(false);\n\n private readonly inputSubject = new Subject<string>();\n\n private ngOnTouched: NgOnTouched;\n\n private ngOnChange: NgOnChange<string>;\n\n constructor() {\n this.inputSubject\n .asObservable()\n .pipe(debounceTime(500), takeUntilDestroyed())\n .subscribe({\n next: (value) => this.onChange(value),\n });\n }\n\n public writeValue(value: string) {\n this.value.set(value);\n }\n\n public registerOnChange(fn: NgOnChange<string>) {\n this.ngOnChange = fn;\n }\n\n public registerOnTouched(fn: NgOnTouched) {\n this.ngOnTouched = fn;\n }\n\n public setDisabledState(isDisabled: boolean) {\n this.disabled.set(isDisabled);\n }\n\n protected onInput(value: string) {\n this.inputSubject.next(value);\n }\n\n protected onFocus() {\n if (!this.ngOnTouched) return;\n this.ngOnTouched();\n }\n\n private onChange(value: string) {\n this.value.set(value);\n\n if (this.ngOnChange) {\n this.ngOnChange(value);\n }\n }\n}\n","<label class=\"inline-block text-sm text-neutral-900 font-semibold mb-2\" [for]=\"inputId()\">{{ label() }}</label>\n<input\n class=\"block w-full disabled:opacity-35 border text-neutral-900 group-[.ng-invalid.ng-touched]:text-red-500 border-neutral-300 not-disabled:not-group-[.ng-invalid.ng-touched]:not-group-[.ng-valid.ng-touched]:hover:border-neutral-500 disabled:bg-neutral-300 group-[.ng-invalid.ng-touched]:border-red-500 group-[.ng-valid.ng-touched]:border-green-500 rounded-xl py-2 px-4 not-group-[.ng-invalid.ng-touched]:not-group-[.ng-valid.ng-touched]:focus:outline-blue-400 read-only:outline-0 group-[.ng-invalid.ng-touched]:outline-red-500 group-[.ng-valid.ng-touched]:outline-green-500 disabled:cursor-default read-only:cursor-default\"\n type=\"text\"\n #input\n [id]=\"inputId()\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readonly()\"\n (focus)=\"onFocus()\"\n (input)=\"onInput(input.value)\"\n/>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'dma-icon[dma-circle-user-icon]',\n templateUrl: './circle-user.icon.svg',\n styleUrl: '../../icon.css',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CircleUserIcon {}\n","<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 640 640\">\n <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->\n <path\n d=\"M463 448.2C440.9 409.8 399.4 384 352 384L288 384C240.6 384 199.1 409.8 177 448.2C212.2 487.4 263.2 512 320 512C376.8 512 427.8 487.3 463 448.2zM64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C178.6 576 64 461.4 64 320zM320 336C359.8 336 392 303.8 392 264C392 224.2 359.8 192 320 192C280.2 192 248 224.2 248 264C248 303.8 280.2 336 320 336z\"\n />\n</svg>\n","import { booleanAttribute, ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\n@Component({\n selector: 'dma-active-marker',\n templateUrl: './active-marker.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'block',\n '[class.text-neutral-600]': 'inactive()',\n '[class.font-normal]': 'inactive()',\n '[class.font-semibold]': 'active()',\n },\n imports: [],\n})\nexport class ActiveMarkerComponent {\n public readonly label = input.required<string>();\n\n public readonly active = input(false, { transform: booleanAttribute });\n\n protected readonly inactive = computed(() => !this.active());\n}\n","<!--\n Using an invisible element with the label set to the active state so that\n the element already takes all the space it needs and doesn't shift other elements around when it becomes active\n-->\n<div class=\"grid grid-cols-1 grid-rows-1 place-items-center\">\n <span class=\"font-bold invisible col-1 row-1\">{{ label() }}</span>\n <span class=\"col-1 row-1\">{{ label() }}</span>\n</div>\n","import { AttributeInput } from '../../attribute-input';\n\nexport const SectionPositions = {\n START: 'start',\n END: 'end',\n} as const;\n\nexport type SectionPosition = (typeof SectionPositions)[keyof typeof SectionPositions];\n\nexport const DEFAULT_SECTION_POSITION: SectionPosition = SectionPositions.START;\n\nexport function sectionPositionAttribute(value: AttributeInput<SectionPosition>) {\n return Object.values(SectionPositions).find((position) => position === value) ?? DEFAULT_SECTION_POSITION;\n}\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { sectionPositionAttribute, SectionPositions } from './section-position';\n\n@Component({\n selector: 'dma-app-top-bar-section',\n template: `<ng-content />`,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class': 'flex items-center gap-3',\n '[class.grow-1]': 'positionedAtStart()',\n },\n imports: [],\n})\nexport class AppTopBarSectionComponent {\n public readonly position = input(SectionPositions.START, { transform: sectionPositionAttribute });\n\n protected readonly positionedAtStart = computed(() => this.position() === SectionPositions.START);\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'dma-app-top-bar',\n template: `<ng-content select=\"dma-app-top-bar-section\" />`,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'px-3 py-2 flex justify-between items-center border-b border-b-neutral-200 bg-neutral-100',\n },\n imports: [],\n})\nexport class AppTopBarComponent {}\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { RouterLink } from '@angular/router';\n\n@Component({\n selector: 'dma-navbar-brand',\n templateUrl: './navbar-brand.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [RouterLink],\n})\nexport class NavbarBrandComponent {\n public readonly imgSrc = input.required<string>();\n\n public readonly brandName = input.required<string>();\n}\n","<a class=\"flex items-center gap-2\" routerLink=\"/\">\n <img [src]=\"imgSrc()\" alt=\"Brand logo\" width=\"32\" height=\"32\" />\n <span class=\"font-semibold text-2xl\">{{ brandName() }}</span>\n</a>\n","import { ChangeDetectionStrategy, Component, DestroyRef, inject, input, OnInit, Signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { isActive, Router, RouterLink } from '@angular/router';\nimport { from } from 'rxjs';\nimport { ActiveMarkerComponent } from '../active-marker/active-marker.component';\n\n@Component({\n selector: 'dma-navbar-link',\n templateUrl: './navbar-link.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n 'class':\n 'block rounded-md p-2 hover:bg-neutral-200 hover:text-neutral-900 active:bg-neutral-300 cursor-pointer',\n '(click)': 'onClick()',\n },\n imports: [RouterLink, ActiveMarkerComponent],\n})\nexport class NavbarLinkComponent implements OnInit {\n private readonly router = inject(Router);\n private readonly destroyRef = inject(DestroyRef);\n\n public readonly label = input.required<string>();\n\n public readonly route = input.required<string>();\n\n protected isActive: Signal<boolean>;\n\n public ngOnInit() {\n this.isActive = isActive(this.route(), this.router, {\n paths: 'subset',\n queryParams: 'subset',\n fragment: 'ignored',\n matrixParams: 'ignored',\n });\n }\n\n protected onClick() {\n from(this.router.navigateByUrl(this.route())).pipe(takeUntilDestroyed(this.destroyRef)).subscribe();\n }\n}\n","<a [routerLink]=\"route()\">\n <dma-active-marker [label]=\"label()\" [active]=\"isActive()\" />\n</a>\n","import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';\nimport { ButtonComponent } from '../../button';\nimport { DropdownAnchorDirective, DropdownContainerComponent } from '../../dropdown';\nimport { ActiveMarkerComponent } from '../active-marker/active-marker.component';\n\n@Component({\n selector: 'dma-navbar-menu',\n templateUrl: './navbar-menu.component.html',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [ButtonComponent, DropdownAnchorDirective, DropdownContainerComponent, ActiveMarkerComponent],\n})\nexport class NavbarMenuComponent {\n public readonly toggleOnHover = input(false, { transform: booleanAttribute });\n}\n","<button\n type=\"button\"\n dma-button\n #anchor=\"dmaDropdownAnchor\"\n [toggleOnHover]=\"toggleOnHover()\"\n [dmaDropdownAnchor]=\"dropdownContainer\"\n>\n <ng-content select=\"dropdown-trigger\" />\n</button>\n\n<ng-template #dropdownContainer>\n <dma-dropdown-container (hover)=\"anchor.scheduleHide(!$event)\">\n <ng-content select=\"dropdown-menu\" />\n </dma-dropdown-container>\n</ng-template>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'nav[dma-navbar]',\n template: `<ng-content />`,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'flex items-center gap-4',\n },\n imports: [],\n})\nexport class NavbarComponent {}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n selector: 'dma-vr',\n template: '',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'inline-block h-[stretch] border-s border-s-neutral-500',\n },\n imports: [],\n})\nexport class VerticalRuleComponent {}\n","/**\n * Public API Surface of @dnd-mapp/shared-ui\n */\nexport * from './lib';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dnd-mapp/shared-ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Official Angular component library for the D&D Mapp platform.",
|
|
5
5
|
"author": "NoNamer777",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -19,29 +19,35 @@
|
|
|
19
19
|
"bugs": {
|
|
20
20
|
"url": "https://github.com/dnd-mapp/shared-ui"
|
|
21
21
|
},
|
|
22
|
-
"sideEffects":
|
|
22
|
+
"sideEffects": [
|
|
23
|
+
"*.css"
|
|
24
|
+
],
|
|
25
|
+
"exports": {
|
|
26
|
+
"./assets/*": "./assets/*",
|
|
27
|
+
"./package.json": {
|
|
28
|
+
"default": "./package.json"
|
|
29
|
+
},
|
|
30
|
+
".": {
|
|
31
|
+
"types": "./types/dnd-mapp-shared-ui.d.ts",
|
|
32
|
+
"default": "./fesm2022/dnd-mapp-shared-ui.mjs"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
23
35
|
"type": "module",
|
|
24
36
|
"engines": {
|
|
25
|
-
"node": ">=24.
|
|
26
|
-
"pnpm": ">=10.
|
|
37
|
+
"node": ">=24.14.0",
|
|
38
|
+
"pnpm": ">=10.30.3"
|
|
27
39
|
},
|
|
28
40
|
"peerDependencies": {
|
|
29
|
-
"@angular/
|
|
30
|
-
"@angular/
|
|
41
|
+
"@angular/cdk": "~21.2",
|
|
42
|
+
"@angular/common": "~21.2",
|
|
43
|
+
"@angular/core": "~21.2",
|
|
44
|
+
"@angular/forms": "~21.2",
|
|
45
|
+
"@angular/router": "~21.2",
|
|
31
46
|
"tailwindcss": "~4.1"
|
|
32
47
|
},
|
|
33
48
|
"dependencies": {
|
|
34
49
|
"tslib": "~2.8"
|
|
35
50
|
},
|
|
36
51
|
"module": "fesm2022/dnd-mapp-shared-ui.mjs",
|
|
37
|
-
"typings": "types/dnd-mapp-shared-ui.d.ts"
|
|
38
|
-
"exports": {
|
|
39
|
-
"./package.json": {
|
|
40
|
-
"default": "./package.json"
|
|
41
|
-
},
|
|
42
|
-
".": {
|
|
43
|
-
"types": "./types/dnd-mapp-shared-ui.d.ts",
|
|
44
|
-
"default": "./fesm2022/dnd-mapp-shared-ui.mjs"
|
|
45
|
-
}
|
|
46
|
-
}
|
|
52
|
+
"typings": "types/dnd-mapp-shared-ui.d.ts"
|
|
47
53
|
}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
[โ Back to Library Overview](../../../README.md#-component-library)
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Button Component (`dma-button`)
|
|
6
|
+
|
|
7
|
+
The `ButtonComponent` is a versatile UI element designed for the **D&D Mapp** design system. It is implemented as an attribute selector for standard HTML `<button>` elements, ensuring native accessibility and browser behavior while providing consistent styling.
|
|
8
|
+
|
|
9
|
+
## ๐ฐ Overview
|
|
10
|
+
|
|
11
|
+
- **Selector**: `button[dma-button]`
|
|
12
|
+
- **Format**: Attribute-based standalone component.
|
|
13
|
+
- **Compatibility**: Works with all standard HTML button attributes (e.g., `type`, `disabled`, `(click)`).
|
|
14
|
+
- **Features**: Supports a leading icon via content projection and multiple semantic color variants.
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
## ๐ Usage
|
|
19
|
+
|
|
20
|
+
Add `ButtonComponent` to your standalone component's `imports` array:
|
|
21
|
+
|
|
22
|
+
```typescript
|
|
23
|
+
import { Component } from '@angular/core';
|
|
24
|
+
import { ButtonComponent } from '@dnd-mapp/shared-ui';
|
|
25
|
+
|
|
26
|
+
@Component({
|
|
27
|
+
selector: 'app-encounter-action',
|
|
28
|
+
template: `
|
|
29
|
+
<!-- Defaults to 'base' style -->
|
|
30
|
+
<button type="button" dma-button>Base Action</button>
|
|
31
|
+
|
|
32
|
+
<!-- Explicit 'primary' style -->
|
|
33
|
+
<button type="button" dma-button="primary">Roll Initiative</button>
|
|
34
|
+
|
|
35
|
+
<!-- Danger style -->
|
|
36
|
+
<button type="button" dma-button="danger">Delete Character</button>
|
|
37
|
+
|
|
38
|
+
<!-- With a leading icon -->
|
|
39
|
+
<button type="button" dma-button>
|
|
40
|
+
<dma-icon dma-user-circle-icon ngProjectAs="dma-leading-icon" />
|
|
41
|
+
Username
|
|
42
|
+
</button>
|
|
43
|
+
`,
|
|
44
|
+
imports: [ButtonComponent],
|
|
45
|
+
})
|
|
46
|
+
export class EncounterActionComponent {}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
---
|
|
50
|
+
|
|
51
|
+
## ๐จ API Reference
|
|
52
|
+
|
|
53
|
+
### Inputs
|
|
54
|
+
|
|
55
|
+
| Input | Attribute | Type | Default | Description |
|
|
56
|
+
|---------|--------------|-----------------------------------|----------|--------------------------------------------|
|
|
57
|
+
| `color` | `dma-button` | `'base' \| 'primary' \| 'danger'` | `'base'` | Determines the visual style of the button. |
|
|
58
|
+
|
|
59
|
+
### Content Projection
|
|
60
|
+
|
|
61
|
+
The component uses `<ng-content>` to allow for flexible labeling and icon placement:
|
|
62
|
+
|
|
63
|
+
- **`<dma-leading-icon>`**: Use this element tag (or `ngProjectAs="dma-leading-icon"`) to project an icon or element at the start of the button.
|
|
64
|
+
- **Default Slot**: Any other content provided inside the button tag will be rendered as the button label.
|
|
65
|
+
|
|
66
|
+
---
|
|
67
|
+
|
|
68
|
+
## ๐ Color Variants
|
|
69
|
+
|
|
70
|
+
1. **Base (`base`)**
|
|
71
|
+
|
|
72
|
+
- **Usage**: `<button dma-button>` or `<button dma-button="base">`
|
|
73
|
+
- **Description**: A neutral style for secondary actions or standard UI tasks.
|
|
74
|
+
- **Appearance**: Light neutral (`neutral-100`) background with dark text.
|
|
75
|
+
|
|
76
|
+
2. **Primary (`primary`)**
|
|
77
|
+
|
|
78
|
+
- **Usage**: `<button dma-button="primary">`
|
|
79
|
+
- **Description**: High-emphasis style for main actions and "Call to Action" buttons.
|
|
80
|
+
- **Appearance**: Vibrant blue (`blue-400`) background with light text.
|
|
81
|
+
|
|
82
|
+
3. **Danger (`danger`)**
|
|
83
|
+
|
|
84
|
+
- **Usage**: `<button dma-button="danger">`
|
|
85
|
+
- **Description**: Used for destructive actions (e.g., deleting, removing, or canceling high-stakes operations).
|
|
86
|
+
- **Appearance**: Transparent background with red text (`red-600`) and light red hover/active states.
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## ๐งช Examples
|
|
91
|
+
|
|
92
|
+
### Leading Icon (Profile)
|
|
93
|
+
|
|
94
|
+
Project a specialized icon element into the `dma-leading-icon` slot.
|
|
95
|
+
|
|
96
|
+
```html
|
|
97
|
+
<button type="button" dma-button>
|
|
98
|
+
<dma-icon dma-user-circle-icon ngProjectAs="dma-leading-icon" />
|
|
99
|
+
Username
|
|
100
|
+
</button>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Secondary Action (Cancel)
|
|
104
|
+
|
|
105
|
+
Use the default `base` variant for less prominent actions.
|
|
106
|
+
|
|
107
|
+
```html
|
|
108
|
+
<button dma-button (click)="closeModal()">Dismiss</button>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### Destructive Action
|
|
112
|
+
|
|
113
|
+
Use the `danger` variant for deletions.
|
|
114
|
+
|
|
115
|
+
```html
|
|
116
|
+
<button dma-button="danger" (click)="deleteEntry()">Delete Entry</button>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### Standard Button Behavior
|
|
120
|
+
|
|
121
|
+
Since this is an attribute selector, you can use all standard button features like `type="submit"` or the `disabled` state:
|
|
122
|
+
|
|
123
|
+
```html
|
|
124
|
+
<button type="submit" dma-button="primary" [disabled]="isSubmitting()">Save Character</button>
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
## ๐ License
|
|
130
|
+
|
|
131
|
+
This component is part of the `@dnd-mapp/shared-ui` proprietary library. Refer to the root [LICENSE](https://github.com/dnd-mapp/shared-ui/blob/main/LICENSE) for usage restrictions.
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
[โ Back to Library Overview](../../../README.md#-component-library)
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Dropdown Anchor
|
|
6
|
+
|
|
7
|
+
The `DropdownAnchor` is a powerful directive that provides a flexible way to attach and manage overlays (dropdowns, menus, or tooltips) to any DOM element. It leverages the `@angular/cdk/overlay` to handle complex positioning and lifecycle management.
|
|
8
|
+
|
|
9
|
+
While it is often used in conjunction with the `DropdownContainerComponent` for a consistent look and feel, it can be used with any `TemplateRef`.
|
|
10
|
+
|
|
11
|
+
## ๐ฐ Overview
|
|
12
|
+
|
|
13
|
+
- **Selector:** `[dmaDropdownAnchor]`
|
|
14
|
+
- **Export As:** `dmaDropdownAnchor`
|
|
15
|
+
- **Format:** Angular Attribute Directive
|
|
16
|
+
|
|
17
|
+
## Installation
|
|
18
|
+
|
|
19
|
+
The component is part of the `@dnd-mapp/shared-ui` library.
|
|
20
|
+
|
|
21
|
+
```typescript
|
|
22
|
+
import { DropdownAnchorDirective, DropdownContainerComponent } from '@dnd-mapp/shared-ui';
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## ๐ Usage
|
|
26
|
+
|
|
27
|
+
To use the dropdown, define a template for your content and attach the `dmaDropdownAnchor` directive to your trigger element (like a button).
|
|
28
|
+
|
|
29
|
+
### Basic Template Usage
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<!-- The Trigger -->
|
|
33
|
+
<button [dmaDropdownAnchor]="myDropdown">Click me</button>
|
|
34
|
+
|
|
35
|
+
<!-- The Dropdown Content -->
|
|
36
|
+
<ng-template #myDropdown>
|
|
37
|
+
<dma-dropdown-container>
|
|
38
|
+
<ul>
|
|
39
|
+
<li>Option 1</li>
|
|
40
|
+
<li>Option 2</li>
|
|
41
|
+
</ul>
|
|
42
|
+
</dma-dropdown-container>
|
|
43
|
+
</ng-template>
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Hover Mode
|
|
47
|
+
|
|
48
|
+
The `DropdownAnchor` supports a hover-to-open mode. It includes a built-in 100ms debounce timer to prevent the dropdown from flickering or closing immediately when moving the mouse between the anchor and the container.
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<button [dmaDropdownAnchor]="myDropdown" [toggleOnHover]="true" #anchor="dmaDropdownAnchor">Hover me</button>
|
|
52
|
+
|
|
53
|
+
<ng-template #myDropdown>
|
|
54
|
+
<!--
|
|
55
|
+
The DropdownContainer provides the (hover) output
|
|
56
|
+
to help keep the anchor open while interacting with the menu
|
|
57
|
+
-->
|
|
58
|
+
<dma-dropdown-container (hover)="anchor.scheduleHide(!$event)">
|
|
59
|
+
<p>Hovering over this element keeps the menu open!</p>
|
|
60
|
+
</dma-dropdown-container>
|
|
61
|
+
</ng-template>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## ๐จ API Reference
|
|
65
|
+
|
|
66
|
+
### DropdownAnchorDirective
|
|
67
|
+
|
|
68
|
+
#### Inputs
|
|
69
|
+
|
|
70
|
+
| Name | Type | Default | Description |
|
|
71
|
+
|---------------------|------------------------|------------------------------|-------------------------------------------------------------|
|
|
72
|
+
| `dmaDropdownAnchor` | `TemplateRef<unknown>` | *Required* | The template to be rendered inside the overlay. |
|
|
73
|
+
| `positions` | `ConnectedPosition[]` | `DEFAULT_DROPDOWN_POSITIONS` | Array of preferred positions for the overlay. |
|
|
74
|
+
| `toggleOnHover` | `boolean` | `false` | Whether the dropdown should open on hover instead of click. |
|
|
75
|
+
|
|
76
|
+
#### Outputs
|
|
77
|
+
|
|
78
|
+
| Name | Type | Description |
|
|
79
|
+
|------------------|-----------|------------------------------------------------------------------|
|
|
80
|
+
| `dropdownToggle` | `boolean` | Emits `true` when the dropdown opens and `false` when it closes. |
|
|
81
|
+
|
|
82
|
+
#### Methods
|
|
83
|
+
|
|
84
|
+
| Name | Parameters | Description |
|
|
85
|
+
|-------------------------------------|------------|-------------------------------------------------------------------------------|
|
|
86
|
+
| `show()` | None | Programmatically opens the dropdown. |
|
|
87
|
+
| `scheduleHide(shouldHide: boolean)` | `boolean` | Schedules a hide action with a 500ms debounce. Useful for hover interactions. |
|
|
88
|
+
|
|
89
|
+
---
|
|
90
|
+
|
|
91
|
+
### DropdownContainerComponent
|
|
92
|
+
|
|
93
|
+
A presentational component with predefined styling (shadows, borders, and background).
|
|
94
|
+
|
|
95
|
+
#### Outputs
|
|
96
|
+
|
|
97
|
+
| Name | Type | Description |
|
|
98
|
+
|---------|-----------|-----------------------------------------------------------|
|
|
99
|
+
| `hover` | `boolean` | Emits `true` on `mouseenter` and `false` on `mouseleave`. |
|
|
100
|
+
|
|
101
|
+
## ๐งช Examples
|
|
102
|
+
|
|
103
|
+
### Custom Positioning
|
|
104
|
+
|
|
105
|
+
You can pass a custom configuration to control where the dropdown appears relative to the anchor.
|
|
106
|
+
|
|
107
|
+
```typescript
|
|
108
|
+
import { ConnectedPosition } from '@angular/cdk/overlay';
|
|
109
|
+
|
|
110
|
+
export const MY_CUSTOM_POSITION: ConnectedPosition[] = [
|
|
111
|
+
{
|
|
112
|
+
originX: 'end',
|
|
113
|
+
originY: 'top',
|
|
114
|
+
overlayX: 'start',
|
|
115
|
+
overlayY: 'top',
|
|
116
|
+
offsetX: 10
|
|
117
|
+
}
|
|
118
|
+
];
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
```html
|
|
122
|
+
<button [dmaDropdownAnchor]="myDropdown" [positions]="MY_CUSTOM_POSITION">Right Aligned</button>
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
## ๐ License
|
|
126
|
+
|
|
127
|
+
This component is part of the `@dnd-mapp/shared-ui` proprietary library. Refer to the root [LICENSE](https://github.com/dnd-mapp/shared-ui/blob/main/LICENSE) for usage restrictions.
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
[โ Back to Library Overview](../../../../README.md#-component-library)
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Input Component `dma-input`
|
|
6
|
+
|
|
7
|
+
A versatile, accessible text input component designed for the `@dnd-mapp` ecosystem. It features built-in support for Angular Forms (ControlValueAccessor), custom validation styling, and debounced input handling to optimize performance.
|
|
8
|
+
|
|
9
|
+
## ๐ฐ Overview
|
|
10
|
+
|
|
11
|
+
The `InputComponent` provides a styled wrapper around the native HTML input element. It includes integrated label handling, status-based border coloring (valid/invalid/touched), and a 500 ms debounce on value changes to prevent excessive form updates during rapid typing.
|
|
12
|
+
|
|
13
|
+
- **Selector**: `dma-input`
|
|
14
|
+
- **Format**: Standalone Component
|
|
15
|
+
- **Change Detection**: OnPush
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## ๐ Usage
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
import { InputComponent } from '@dnd-mapp/shared-ui';
|
|
23
|
+
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
24
|
+
|
|
25
|
+
@Component({
|
|
26
|
+
selector: 'app-root',
|
|
27
|
+
template: `
|
|
28
|
+
<dma-input
|
|
29
|
+
inputId="username"
|
|
30
|
+
label="Username"
|
|
31
|
+
placeholder="Enter your character name"
|
|
32
|
+
[(value)]="userName"
|
|
33
|
+
/>
|
|
34
|
+
`,
|
|
35
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
36
|
+
imports: [InputComponent],
|
|
37
|
+
})
|
|
38
|
+
export class MyComponent {}
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
---
|
|
42
|
+
|
|
43
|
+
## ๐จ API Reference
|
|
44
|
+
|
|
45
|
+
### Inputs
|
|
46
|
+
|
|
47
|
+
| Name | Type | Default | Description |
|
|
48
|
+
|---------------|-----------|------------|-------------------------------------------------------------|
|
|
49
|
+
| `inputId` | `string` | `required` | The unique ID for the internal input and label association. |
|
|
50
|
+
| `label` | `string` | `required` | The text label displayed above the input field. |
|
|
51
|
+
| `placeholder` | `string` | `''` | The hint text displayed when the input is empty. |
|
|
52
|
+
| `readonly` | `boolean` | `false` | If true, the input is present but non-editable. |
|
|
53
|
+
|
|
54
|
+
### Models (Two-way Data Binding)
|
|
55
|
+
|
|
56
|
+
| Name | Type | Default | Description |
|
|
57
|
+
|------------|-----------|---------|------------------------------------------------------------|
|
|
58
|
+
| `value` | `string` | `''` | The current text value of the input. Supports `[(value)]`. |
|
|
59
|
+
| `disabled` | `boolean` | `false` | Controls the disabled state of the input. |
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## ๐งช Examples
|
|
64
|
+
|
|
65
|
+
### 1. Reactive Forms Integration
|
|
66
|
+
|
|
67
|
+
Since the component implements `ControlValueAccessor`, it integrates seamlessly with `FormControl`.
|
|
68
|
+
|
|
69
|
+
```ts
|
|
70
|
+
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
|
71
|
+
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
72
|
+
import { InputComponent } from '@dnd-mapp/shared-ui';
|
|
73
|
+
|
|
74
|
+
@Component({
|
|
75
|
+
selector: 'app-profile-form',
|
|
76
|
+
template: `
|
|
77
|
+
<form [formGroup]="form">
|
|
78
|
+
<dma-input
|
|
79
|
+
label="Username"
|
|
80
|
+
inputId="username-field"
|
|
81
|
+
formControlName="username"
|
|
82
|
+
/>
|
|
83
|
+
</form>
|
|
84
|
+
`,
|
|
85
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
86
|
+
imports: [ReactiveFormsModule, InputComponent],
|
|
87
|
+
})
|
|
88
|
+
export class ProfileFormComponent {
|
|
89
|
+
username = new FormControl('', [Validators.required, Validators.minLength(3)]);
|
|
90
|
+
}
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### 2. Read-only State
|
|
94
|
+
|
|
95
|
+
Useful for displaying data that was previously entered but cannot be changed in the current context.
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<dma-input readonly inputId="char-id-001" label="Character ID" value="#88219" />
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
---
|
|
102
|
+
|
|
103
|
+
## ๐ License
|
|
104
|
+
|
|
105
|
+
This component is part of the `@dnd-mapp/shared-ui` proprietary library. All rights reserved.
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
[โ Back to Library Overview](../../../../README.md#-component-library)
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Active Marker
|
|
6
|
+
|
|
7
|
+
A specialized text component designed to prevent layout shifts (CLS) when toggling between normal and bold font weights. It achieves this by rendering an invisible, bold version of the label to reserve the maximum required space in the DOM grid.
|
|
8
|
+
|
|
9
|
+
## ๐ฐ Overview
|
|
10
|
+
|
|
11
|
+
| Feature | Details |
|
|
12
|
+
|----------------------|----------------------|
|
|
13
|
+
| **Selector** | `dma-active-marker` |
|
|
14
|
+
| **Format** | Standalone Component |
|
|
15
|
+
| **Change Detection** | `OnPush` |
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## ๐ Usage
|
|
20
|
+
|
|
21
|
+
```ts
|
|
22
|
+
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
23
|
+
import { ActiveMarkerComponent } from '@dnd-mapp/shared-ui';
|
|
24
|
+
|
|
25
|
+
@Component({
|
|
26
|
+
selector: 'app-root',
|
|
27
|
+
template: `<dma-active-marker label="Dashboard" active />`,
|
|
28
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
29
|
+
imports: [ActiveMarkerComponent],
|
|
30
|
+
})
|
|
31
|
+
export class RootComponent {}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
---
|
|
35
|
+
|
|
36
|
+
## ๐จ API Reference
|
|
37
|
+
|
|
38
|
+
### Inputs
|
|
39
|
+
|
|
40
|
+
| Name | Type | Default | Description |
|
|
41
|
+
|----------|-----------|------------|------------------------------------------------------------------------|
|
|
42
|
+
| `label` | `string` | `required` | The text content to be displayed. |
|
|
43
|
+
| `active` | `boolean` | `false` | Controls the active (bold) state. Uses `booleanAttribute` transformer. |
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## ๐งช Examples
|
|
48
|
+
|
|
49
|
+
### Navigation Menu
|
|
50
|
+
|
|
51
|
+
Use the component in a sidebar or menu to highlight the current route without causing the menu width to "jitter" when the font weight increases.
|
|
52
|
+
|
|
53
|
+
```ts
|
|
54
|
+
import { ChangeDetectionStrategy, Component } from '@angular/core';
|
|
55
|
+
import { ActiveMarkerComponent } from '@dnd-mapp/shared-ui';
|
|
56
|
+
|
|
57
|
+
@Component({
|
|
58
|
+
selector: 'app-nav-list',
|
|
59
|
+
template: `
|
|
60
|
+
<nav>
|
|
61
|
+
@for (item of menuItems; track item.id) {
|
|
62
|
+
<a (click)="select(item.id)">
|
|
63
|
+
<dma-active-marker [label]="item.name" [active]="selectedId === item.id" />
|
|
64
|
+
</a>
|
|
65
|
+
}
|
|
66
|
+
</nav>
|
|
67
|
+
`,
|
|
68
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
69
|
+
imports: [ActiveMarkerComponent],
|
|
70
|
+
})
|
|
71
|
+
export class NavListComponent {
|
|
72
|
+
protected selectedId = 1;
|
|
73
|
+
protected menuItems = [
|
|
74
|
+
{ id: 1, name: 'Overview' },
|
|
75
|
+
{ id: 2, name: 'Analytics' },
|
|
76
|
+
{ id: 3, name: 'Settings' }
|
|
77
|
+
];
|
|
78
|
+
|
|
79
|
+
protected select(id: number) {
|
|
80
|
+
this.selectedId = id;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Tab Indicators
|
|
86
|
+
|
|
87
|
+
Ideal for tab headers where centered text must remain perfectly centered regardless of its active state.
|
|
88
|
+
|
|
89
|
+
```html
|
|
90
|
+
<div class="flex gap-4">
|
|
91
|
+
<dma-active-marker label="Profile" [active]="tab === 'profile'" />
|
|
92
|
+
<dma-active-marker label="Security" [active]="tab === 'security'" />
|
|
93
|
+
</div>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
---
|
|
97
|
+
|
|
98
|
+
## ๐ License
|
|
99
|
+
|
|
100
|
+
Internal use only. Copyright ยฉ 2026 DnD Mapp. All rights reserved.
|
|
101
|
+
|
|
102
|
+
[โ Back to Library Overview](../../../../README.md#-component-library)
|