@radix-ng/primitives 0.20.0 → 0.20.2
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/compodoc/documentation.json +327 -96
- package/esm2022/popover/src/popover-arrow.directive.mjs +1 -1
- package/esm2022/popover/src/popover-close.directive.mjs +2 -2
- package/esm2022/popover/src/popover-content.directive.mjs +9 -17
- package/esm2022/popover/src/popover-root.directive.mjs +9 -4
- package/esm2022/popover/src/popover-trigger.directive.mjs +10 -9
- package/esm2022/popover/src/popover.constants.mjs +2 -2
- package/esm2022/radio/src/radio-indicator.directive.mjs +3 -3
- package/fesm2022/radix-ng-primitives-popover.mjs +26 -28
- package/fesm2022/radix-ng-primitives-popover.mjs.map +1 -1
- package/fesm2022/radix-ng-primitives-radio.mjs +2 -2
- package/fesm2022/radix-ng-primitives-radio.mjs.map +1 -1
- package/package.json +7 -7
- package/popover/src/popover-close.directive.d.ts +1 -1
- package/popover/src/popover-content.directive.d.ts +0 -2
- package/popover/src/popover-root.directive.d.ts +2 -0
- package/popover/src/popover-trigger.directive.d.ts +6 -4
- package/popover/src/popover.constants.d.ts +1 -1
@@ -7742,12 +7742,12 @@
|
|
7742
7742
|
},
|
7743
7743
|
{
|
7744
7744
|
"name": "RdxPopoverArrowDirective",
|
7745
|
-
"id": "directive-RdxPopoverArrowDirective-
|
7745
|
+
"id": "directive-RdxPopoverArrowDirective-d05177319f8976c7b4ccfb63296f30cfd9b3d018f8c4845132effe4d67bfdbeefd61da5d07831b4b180cd0a4d4098562ce2deb401b1c7df4ab4007b848dcff52",
|
7746
7746
|
"file": "popover/src/popover-arrow.directive.ts",
|
7747
7747
|
"type": "directive",
|
7748
7748
|
"description": "",
|
7749
7749
|
"rawdescription": "\n",
|
7750
|
-
"sourceCode": "import { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';\nimport {\n AfterViewInit,\n computed,\n Directive,\n effect,\n ElementRef,\n forwardRef,\n inject,\n input,\n Renderer2,\n signal,\n untracked\n} from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { RdxPopoverArrowToken } from './popover-arrow.token';\nimport { injectPopoverRoot } from './popover-root.inject';\nimport { getArrowPositionParams, getSideAndAlignFromAllPossibleConnectedPositions } from './popover.utils';\n\n@Directive({\n selector: '[rdxPopoverArrow]',\n standalone: true,\n providers: [\n {\n provide: RdxPopoverArrowToken,\n useExisting: forwardRef(() => RdxPopoverArrowDirective)\n }\n ]\n})\nexport class RdxPopoverArrowDirective implements AfterViewInit {\n /** @ignore */\n private readonly renderer = inject(Renderer2);\n /** @ignore */\n private readonly popoverRoot = injectPopoverRoot();\n /** @ignore */\n private readonly elementRef = inject
|
7750
|
+
"sourceCode": "import { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';\nimport {\n AfterViewInit,\n computed,\n Directive,\n effect,\n ElementRef,\n forwardRef,\n inject,\n input,\n Renderer2,\n signal,\n untracked\n} from '@angular/core';\nimport { toSignal } from '@angular/core/rxjs-interop';\nimport { RdxPopoverArrowToken } from './popover-arrow.token';\nimport { injectPopoverRoot } from './popover-root.inject';\nimport { getArrowPositionParams, getSideAndAlignFromAllPossibleConnectedPositions } from './popover.utils';\n\n@Directive({\n selector: '[rdxPopoverArrow]',\n standalone: true,\n providers: [\n {\n provide: RdxPopoverArrowToken,\n useExisting: forwardRef(() => RdxPopoverArrowDirective)\n }\n ]\n})\nexport class RdxPopoverArrowDirective implements AfterViewInit {\n /** @ignore */\n private readonly renderer = inject(Renderer2);\n /** @ignore */\n private readonly popoverRoot = injectPopoverRoot();\n /** @ignore */\n private readonly elementRef = inject(ElementRef);\n\n /**\n * The width of the arrow in pixels.\n */\n readonly width = input<number>(10);\n\n /**\n * The height of the arrow in pixels.\n */\n readonly height = input<number>(5);\n\n /** @ignore */\n readonly arrowSvgElement = computed<HTMLElement>(() => {\n const width = this.width();\n const height = this.height();\n\n const svgElement = this.renderer.createElement('svg', 'svg');\n this.renderer.setAttribute(svgElement, 'viewBox', '0 0 30 10');\n this.renderer.setAttribute(svgElement, 'width', String(width));\n this.renderer.setAttribute(svgElement, 'height', String(height));\n const polygonElement = this.renderer.createElement('polygon', 'svg');\n this.renderer.setAttribute(polygonElement, 'points', '0,0 30,0 15,10');\n this.renderer.setAttribute(svgElement, 'preserveAspectRatio', 'none');\n this.renderer.appendChild(svgElement, polygonElement);\n\n return svgElement;\n });\n\n /** @ignore */\n private readonly currentArrowSvgElement = signal<HTMLOrSVGElement | undefined>(void 0);\n /** @ignore */\n private readonly position = toSignal(this.popoverRoot.popoverContentDirective().positionChange());\n\n /** @ignore */\n private triggerRect: DOMRect;\n\n constructor() {\n this.onArrowSvgElementChangeEffect();\n this.onContentPositionChangeEffect();\n }\n\n /** @ignore */\n ngAfterViewInit() {\n if (this.elementRef.nativeElement.parentElement) {\n this.renderer.setStyle(this.elementRef.nativeElement.parentElement, 'position', 'relative');\n }\n this.renderer.setStyle(this.elementRef.nativeElement, 'position', 'absolute');\n this.renderer.setStyle(this.elementRef.nativeElement, 'boxSizing', '');\n this.renderer.setStyle(this.elementRef.nativeElement, 'fontSize', '0px');\n this.triggerRect = this.popoverRoot.popoverTriggerDirective().elementRef.nativeElement.getBoundingClientRect();\n }\n\n /** @ignore */\n private setPosition(position: ConnectedOverlayPositionChange) {\n const posParams = getArrowPositionParams(\n getSideAndAlignFromAllPossibleConnectedPositions(position.connectionPair),\n { width: this.width(), height: this.height() },\n { width: this.triggerRect.width, height: this.triggerRect.height }\n );\n\n this.renderer.setStyle(this.elementRef.nativeElement, 'top', posParams.top);\n this.renderer.setStyle(this.elementRef.nativeElement, 'bottom', posParams.bottom);\n this.renderer.setStyle(this.elementRef.nativeElement, 'left', posParams.left);\n this.renderer.setStyle(this.elementRef.nativeElement, 'right', posParams.right);\n this.renderer.setStyle(this.elementRef.nativeElement, 'transform', posParams.transform);\n }\n\n /** @ignore */\n private onArrowSvgElementChangeEffect() {\n effect(() => {\n const arrowElement = this.arrowSvgElement();\n untracked(() => {\n const currentArrowSvgElement = this.currentArrowSvgElement();\n if (currentArrowSvgElement) {\n this.renderer.removeChild(this.elementRef.nativeElement, currentArrowSvgElement);\n }\n this.currentArrowSvgElement.set(arrowElement);\n this.renderer.setStyle(this.elementRef.nativeElement, 'width', `${this.width()}px`);\n this.renderer.setStyle(this.elementRef.nativeElement, 'height', `${this.height()}px`);\n this.renderer.appendChild(this.elementRef.nativeElement, this.currentArrowSvgElement());\n });\n });\n }\n\n /** @ignore */\n private onContentPositionChangeEffect() {\n effect(() => {\n const position = this.position();\n untracked(() => {\n if (!position) {\n return;\n }\n this.setPosition(position);\n });\n });\n }\n}\n",
|
7751
7751
|
"selector": "[rdxPopoverArrow]",
|
7752
7752
|
"providers": [
|
7753
7753
|
{
|
@@ -7846,12 +7846,12 @@
|
|
7846
7846
|
},
|
7847
7847
|
{
|
7848
7848
|
"name": "RdxPopoverCloseDirective",
|
7849
|
-
"id": "directive-RdxPopoverCloseDirective-
|
7849
|
+
"id": "directive-RdxPopoverCloseDirective-79ab5fb443749547b59965502f770901f6620b3d5e42830b0c91261c56329c6cae5a195ee62dbd98b0e88a0a7e94c2de8560f684dafcc86c705a3e4386f82693",
|
7850
7850
|
"file": "popover/src/popover-close.directive.ts",
|
7851
7851
|
"type": "directive",
|
7852
7852
|
"description": "",
|
7853
7853
|
"rawdescription": "\n",
|
7854
|
-
"sourceCode": "import { Directive, effect, ElementRef, inject, Renderer2, untracked } from '@angular/core';\nimport { injectPopoverRoot } from './popover-root.inject';\n\n@Directive({\n selector: '[rdxPopoverClose]',\n standalone: true,\n host: {\n type: 'button',\n '(click)': 'popoverRoot.handleClose()'\n }\n})\nexport class RdxPopoverCloseDirective {\n /** @ignore */\n readonly popoverRoot = injectPopoverRoot();\n /** @ignore */\n readonly elementRef = inject
|
7854
|
+
"sourceCode": "import { Directive, effect, ElementRef, inject, Renderer2, untracked } from '@angular/core';\nimport { injectPopoverRoot } from './popover-root.inject';\n\n@Directive({\n selector: '[rdxPopoverClose]',\n standalone: true,\n host: {\n type: 'button',\n '(click)': 'popoverRoot.handleClose()'\n }\n})\nexport class RdxPopoverCloseDirective {\n /** @ignore */\n readonly popoverRoot = injectPopoverRoot();\n /** @ignore */\n readonly elementRef = inject(ElementRef);\n /** @ignore */\n private readonly renderer = inject(Renderer2);\n\n constructor() {\n this.onIsControlledExternallyEffect();\n }\n\n /** @ignore */\n private onIsControlledExternallyEffect() {\n effect(() => {\n const isControlledExternally = this.popoverRoot.controlledExternally()();\n\n untracked(() => {\n this.renderer.setStyle(\n this.elementRef.nativeElement,\n 'display',\n isControlledExternally ? 'none' : null\n );\n });\n });\n }\n}\n",
|
7855
7855
|
"selector": "[rdxPopoverClose]",
|
7856
7856
|
"providers": [],
|
7857
7857
|
"hostDirectives": [],
|
@@ -7876,19 +7876,17 @@
|
|
7876
7876
|
},
|
7877
7877
|
{
|
7878
7878
|
"name": "RdxPopoverContentDirective",
|
7879
|
-
"id": "directive-RdxPopoverContentDirective-
|
7879
|
+
"id": "directive-RdxPopoverContentDirective-8788479e1ad7d9e3ee8851ea33529382deeecf396a3f9d7b2cbc1a4f09e35c82dae8b2940b1cc6ed85b4f16dac40dbc68906102af5859a47cffa6322ac6c8881",
|
7880
7880
|
"file": "popover/src/popover-content.directive.ts",
|
7881
7881
|
"type": "directive",
|
7882
7882
|
"description": "",
|
7883
7883
|
"rawdescription": "\n",
|
7884
|
-
"sourceCode": "import { CdkConnectedOverlay, Overlay } from '@angular/cdk/overlay';\nimport {\n computed,\n DestroyRef,\n Directive,\n effect,\n inject,\n input,\n OnInit,\n output,\n SimpleChange,\n TemplateRef,\n untracked\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { filter, tap } from 'rxjs';\nimport { injectPopoverRoot } from './popover-root.inject';\nimport { DEFAULTS } from './popover.constants';\nimport { RdxPopoverAlign, RdxPopoverSide, RdxSideAndAlignOffsets } from './popover.types';\nimport { getAllPossibleConnectedPositions, getContentPosition } from './popover.utils';\n\n@Directive({\n selector: '[rdxPopoverContent]',\n standalone: true,\n hostDirectives: [\n
|
7884
|
+
"sourceCode": "import { CdkConnectedOverlay, Overlay } from '@angular/cdk/overlay';\nimport {\n computed,\n DestroyRef,\n Directive,\n effect,\n inject,\n input,\n OnInit,\n output,\n SimpleChange,\n TemplateRef,\n untracked\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { filter, tap } from 'rxjs';\nimport { injectPopoverRoot } from './popover-root.inject';\nimport { DEFAULTS } from './popover.constants';\nimport { RdxPopoverAlign, RdxPopoverSide, RdxSideAndAlignOffsets } from './popover.types';\nimport { getAllPossibleConnectedPositions, getContentPosition } from './popover.utils';\n\n@Directive({\n selector: '[rdxPopoverContent]',\n standalone: true,\n hostDirectives: [\n CdkConnectedOverlay\n ]\n})\nexport class RdxPopoverContentDirective implements OnInit {\n /** @ignore */\n readonly popoverRoot = injectPopoverRoot();\n /** @ignore */\n readonly templateRef = inject(TemplateRef);\n /** @ignore */\n readonly overlay = inject(Overlay);\n /** @ignore */\n readonly destroyRef = inject(DestroyRef);\n /** @ignore */\n private readonly connectedOverlay = inject(CdkConnectedOverlay);\n\n /**\n * The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.\n */\n readonly side = input<RdxPopoverSide>(RdxPopoverSide.Top);\n /**\n * The distance in pixels from the trigger.\n */\n readonly sideOffset = input<number | undefined>(void 0);\n\n /**\n * The preferred alignment against the trigger. May change when collisions occur.\n */\n readonly align = input<RdxPopoverAlign>(RdxPopoverAlign.Center);\n /**\n * An offset in pixels from the \"start\" or \"end\" alignment options.\n */\n readonly alignOffset = input<number | undefined>(void 0);\n\n /**\n * Whether to add some alternate positions of the content.\n */\n readonly disableAlternatePositions = input(false);\n\n /** @ingore */\n readonly positions = computed(() => {\n const greatestDimensionFromTheArrow = Math.max(\n this.popoverRoot.popoverArrowDirective()?.width() ?? 0,\n this.popoverRoot.popoverArrowDirective()?.height() ?? 0\n );\n const offsets: RdxSideAndAlignOffsets = {\n sideOffset: this.sideOffset() ?? (greatestDimensionFromTheArrow || DEFAULTS.offsets.side),\n alignOffset: this.alignOffset() ?? DEFAULTS.offsets.align\n };\n const basePosition = getContentPosition({\n side: this.side(),\n align: this.align(),\n sideOffset: offsets.sideOffset,\n alignOffset: offsets.alignOffset\n });\n const positions = [basePosition];\n if (!this.disableAlternatePositions()) {\n /**\n * Alternate positions for better user experience along the X/Y axis (e.g. vertical/horizontal scrolling)\n */\n const allPossibleConnectedPositions = getAllPossibleConnectedPositions();\n allPossibleConnectedPositions.forEach((_, key) => {\n const sideAndAlignArray = key.split('|');\n if (\n (sideAndAlignArray[0] as RdxPopoverSide) !== this.side() ||\n (sideAndAlignArray[1] as RdxPopoverAlign) !== this.align()\n ) {\n positions.push(\n getContentPosition({\n side: sideAndAlignArray[0] as RdxPopoverSide,\n align: sideAndAlignArray[1] as RdxPopoverAlign,\n sideOffset: offsets.sideOffset,\n alignOffset: offsets.alignOffset\n })\n );\n }\n });\n }\n return positions;\n });\n\n /**\n * Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.\n */\n readonly onEscapeKeyDown = output<KeyboardEvent>();\n\n /**\n * Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.\n */\n readonly onPointerDownOutside = output<MouseEvent>();\n\n /**\n * Event handler called when the overlay is atached\n */\n readonly onShow = output<void>();\n /**\n * Event handler called when the overlay is detached\n */\n readonly onHide = output<void>();\n\n constructor() {\n this.onPositionChangeEffect();\n }\n\n /** @ignore */\n ngOnInit() {\n this.setOrigin();\n this.setScrollStrategy();\n this.setDisableClose();\n this.onAttach();\n this.onDetach();\n this.connectKeydownEscape();\n this.connectOutsideClick();\n }\n\n /** @ignore */\n show() {\n const prevOpen = this.connectedOverlay.open;\n this.connectedOverlay.open = true;\n if (!prevOpen) {\n this.connectedOverlay.ngOnChanges({ open: new SimpleChange(prevOpen, true, false) });\n }\n }\n\n /** @ignore */\n hide() {\n const prevOpen = this.connectedOverlay.open;\n this.connectedOverlay.open = false;\n if (prevOpen) {\n this.connectedOverlay.ngOnChanges({ open: new SimpleChange(prevOpen, false, false) });\n }\n }\n\n /** @ignore */\n positionChange() {\n return this.connectedOverlay.positionChange.asObservable();\n }\n\n /** @ignore */\n private connectKeydownEscape() {\n this.connectedOverlay.overlayKeydown\n .asObservable()\n .pipe(\n filter((event) => event.key === 'Escape'),\n tap((event) => {\n this.onEscapeKeyDown.emit(event);\n if (!event.defaultPrevented) {\n this.popoverRoot.handleClose();\n }\n }),\n takeUntilDestroyed(this.destroyRef)\n )\n .subscribe();\n }\n\n /** @ignore */\n private connectOutsideClick() {\n this.connectedOverlay.overlayOutsideClick\n .asObservable()\n .pipe(\n tap((event) => {\n this.onPointerDownOutside.emit(event);\n if (!event.defaultPrevented) {\n this.popoverRoot.handleClose();\n }\n }),\n takeUntilDestroyed(this.destroyRef)\n )\n .subscribe();\n }\n\n /** @ignore */\n private onAttach() {\n this.connectedOverlay.attach\n .asObservable()\n .pipe(\n tap(() => {\n this.onShow.emit();\n }),\n takeUntilDestroyed(this.destroyRef)\n )\n .subscribe();\n }\n\n /** @ignore */\n private onDetach() {\n this.connectedOverlay.detach\n .asObservable()\n .pipe(\n tap(() => {\n this.onHide.emit();\n }),\n takeUntilDestroyed(this.destroyRef)\n )\n .subscribe();\n }\n\n /** @ignore */\n private setScrollStrategy() {\n const prevScrollStrategy = this.connectedOverlay.scrollStrategy;\n this.connectedOverlay.scrollStrategy = this.overlay.scrollStrategies.reposition();\n this.connectedOverlay.ngOnChanges({\n scrollStrategy: new SimpleChange(prevScrollStrategy, this.connectedOverlay.scrollStrategy, false)\n });\n }\n\n /** @ignore */\n private setDisableClose() {\n const prevDisableClose = this.connectedOverlay.disableClose;\n this.connectedOverlay.disableClose = true;\n this.connectedOverlay.ngOnChanges({\n disableClose: new SimpleChange(prevDisableClose, this.connectedOverlay.disableClose, false)\n });\n }\n\n /** @ignore */\n private setOrigin() {\n const prevOrigin = this.connectedOverlay.origin;\n this.connectedOverlay.origin = this.popoverRoot.popoverTriggerDirective().overlayOrigin;\n this.connectedOverlay.ngOnChanges({\n origin: new SimpleChange(prevOrigin, this.connectedOverlay.origin, false)\n });\n }\n\n /** @ignore */\n private onPositionChangeEffect() {\n effect(() => {\n const positions = this.positions();\n this.disableAlternatePositions();\n untracked(() => {\n const prevPositions = this.connectedOverlay.positions;\n this.connectedOverlay.positions = positions;\n this.connectedOverlay.ngOnChanges({\n positions: new SimpleChange(prevPositions, this.connectedOverlay.positions, false)\n });\n this.connectedOverlay.overlayRef?.updatePosition();\n });\n });\n }\n}\n",
|
7885
7885
|
"selector": "[rdxPopoverContent]",
|
7886
7886
|
"providers": [],
|
7887
7887
|
"hostDirectives": [
|
7888
7888
|
{
|
7889
|
-
"name": "CdkConnectedOverlay"
|
7890
|
-
"inputs": [],
|
7891
|
-
"outputs": []
|
7889
|
+
"name": "CdkConnectedOverlay"
|
7892
7890
|
}
|
7893
7891
|
],
|
7894
7892
|
"standalone": true,
|
@@ -7902,7 +7900,7 @@
|
|
7902
7900
|
"indexKey": "",
|
7903
7901
|
"optional": false,
|
7904
7902
|
"description": "<p>Whether to add some alternate positions of the content.</p>\n",
|
7905
|
-
"line":
|
7903
|
+
"line": 62,
|
7906
7904
|
"rawdescription": "\n\nWhether to add some alternate positions of the content.\n",
|
7907
7905
|
"modifierKind": [
|
7908
7906
|
148
|
@@ -7925,7 +7923,7 @@
|
|
7925
7923
|
"indexKey": "",
|
7926
7924
|
"optional": false,
|
7927
7925
|
"description": "<p>The preferred alignment against the trigger. May change when collisions occur.</p>\n",
|
7928
|
-
"line":
|
7926
|
+
"line": 53,
|
7929
7927
|
"rawdescription": "\n\nThe preferred alignment against the trigger. May change when collisions occur.\n",
|
7930
7928
|
"modifierKind": [
|
7931
7929
|
148
|
@@ -7940,7 +7938,7 @@
|
|
7940
7938
|
"indexKey": "",
|
7941
7939
|
"optional": false,
|
7942
7940
|
"description": "<p>An offset in pixels from the "start" or "end" alignment options.</p>\n",
|
7943
|
-
"line":
|
7941
|
+
"line": 57,
|
7944
7942
|
"rawdescription": "\n\nAn offset in pixels from the \"start\" or \"end\" alignment options.\n",
|
7945
7943
|
"modifierKind": [
|
7946
7944
|
148
|
@@ -7955,7 +7953,7 @@
|
|
7955
7953
|
"indexKey": "",
|
7956
7954
|
"optional": false,
|
7957
7955
|
"description": "<p>Whether to add some alternate positions of the content.</p>\n",
|
7958
|
-
"line":
|
7956
|
+
"line": 62,
|
7959
7957
|
"rawdescription": "\n\nWhether to add some alternate positions of the content.\n",
|
7960
7958
|
"modifierKind": [
|
7961
7959
|
148
|
@@ -7971,7 +7969,7 @@
|
|
7971
7969
|
"indexKey": "",
|
7972
7970
|
"optional": false,
|
7973
7971
|
"description": "<p>Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.</p>\n",
|
7974
|
-
"line":
|
7972
|
+
"line": 109,
|
7975
7973
|
"rawdescription": "\n\nEvent handler called when the escape key is down. It can be prevented by calling event.preventDefault.\n",
|
7976
7974
|
"modifierKind": [
|
7977
7975
|
148
|
@@ -7986,7 +7984,7 @@
|
|
7986
7984
|
"indexKey": "",
|
7987
7985
|
"optional": false,
|
7988
7986
|
"description": "<p>Event handler called when the overlay is detached</p>\n",
|
7989
|
-
"line":
|
7987
|
+
"line": 123,
|
7990
7988
|
"rawdescription": "\n\nEvent handler called when the overlay is detached\n",
|
7991
7989
|
"modifierKind": [
|
7992
7990
|
148
|
@@ -8001,7 +7999,7 @@
|
|
8001
7999
|
"indexKey": "",
|
8002
8000
|
"optional": false,
|
8003
8001
|
"description": "<p>Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.</p>\n",
|
8004
|
-
"line":
|
8002
|
+
"line": 114,
|
8005
8003
|
"rawdescription": "\n\nEvent handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.\n",
|
8006
8004
|
"modifierKind": [
|
8007
8005
|
148
|
@@ -8016,7 +8014,7 @@
|
|
8016
8014
|
"indexKey": "",
|
8017
8015
|
"optional": false,
|
8018
8016
|
"description": "<p>Event handler called when the overlay is atached</p>\n",
|
8019
|
-
"line":
|
8017
|
+
"line": 119,
|
8020
8018
|
"rawdescription": "\n\nEvent handler called when the overlay is atached\n",
|
8021
8019
|
"modifierKind": [
|
8022
8020
|
148
|
@@ -8024,30 +8022,30 @@
|
|
8024
8022
|
},
|
8025
8023
|
{
|
8026
8024
|
"name": "positions",
|
8027
|
-
"defaultValue": "computed(() => {\n const greatestDimensionFromTheArrow = Math.max(\n this.popoverRoot.popoverArrowDirective()?.width() ?? 0,\n this.popoverRoot.popoverArrowDirective()?.height() ?? 0\n );\n const offsets: RdxSideAndAlignOffsets = {\n sideOffset: this.sideOffset() ?? (greatestDimensionFromTheArrow || DEFAULTS.offsets.side),\n alignOffset: this.alignOffset() ??
|
8025
|
+
"defaultValue": "computed(() => {\n const greatestDimensionFromTheArrow = Math.max(\n this.popoverRoot.popoverArrowDirective()?.width() ?? 0,\n this.popoverRoot.popoverArrowDirective()?.height() ?? 0\n );\n const offsets: RdxSideAndAlignOffsets = {\n sideOffset: this.sideOffset() ?? (greatestDimensionFromTheArrow || DEFAULTS.offsets.side),\n alignOffset: this.alignOffset() ?? DEFAULTS.offsets.align\n };\n const basePosition = getContentPosition({\n side: this.side(),\n align: this.align(),\n sideOffset: offsets.sideOffset,\n alignOffset: offsets.alignOffset\n });\n const positions = [basePosition];\n if (!this.disableAlternatePositions()) {\n /**\n * Alternate positions for better user experience along the X/Y axis (e.g. vertical/horizontal scrolling)\n */\n const allPossibleConnectedPositions = getAllPossibleConnectedPositions();\n allPossibleConnectedPositions.forEach((_, key) => {\n const sideAndAlignArray = key.split('|');\n if (\n (sideAndAlignArray[0] as RdxPopoverSide) !== this.side() ||\n (sideAndAlignArray[1] as RdxPopoverAlign) !== this.align()\n ) {\n positions.push(\n getContentPosition({\n side: sideAndAlignArray[0] as RdxPopoverSide,\n align: sideAndAlignArray[1] as RdxPopoverAlign,\n sideOffset: offsets.sideOffset,\n alignOffset: offsets.alignOffset\n })\n );\n }\n });\n }\n return positions;\n })",
|
8028
8026
|
"deprecated": false,
|
8029
8027
|
"deprecationMessage": "",
|
8030
8028
|
"type": "",
|
8031
8029
|
"indexKey": "",
|
8032
8030
|
"optional": false,
|
8033
8031
|
"description": "",
|
8034
|
-
"line":
|
8032
|
+
"line": 65,
|
8035
8033
|
"rawdescription": "",
|
8036
8034
|
"modifierKind": [
|
8037
8035
|
148
|
8038
8036
|
],
|
8039
8037
|
"jsdoctags": [
|
8040
8038
|
{
|
8041
|
-
"pos":
|
8042
|
-
"end":
|
8039
|
+
"pos": 1992,
|
8040
|
+
"end": 2000,
|
8043
8041
|
"kind": 327,
|
8044
8042
|
"id": 0,
|
8045
8043
|
"flags": 16842752,
|
8046
8044
|
"modifierFlagsCache": 0,
|
8047
8045
|
"transformFlags": 0,
|
8048
8046
|
"tagName": {
|
8049
|
-
"pos":
|
8050
|
-
"end":
|
8047
|
+
"pos": 1993,
|
8048
|
+
"end": 1999,
|
8051
8049
|
"kind": 80,
|
8052
8050
|
"id": 0,
|
8053
8051
|
"flags": 16842752,
|
@@ -8067,7 +8065,7 @@
|
|
8067
8065
|
"indexKey": "",
|
8068
8066
|
"optional": false,
|
8069
8067
|
"description": "<p>The preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.</p>\n",
|
8070
|
-
"line":
|
8068
|
+
"line": 44,
|
8071
8069
|
"rawdescription": "\n\nThe preferred side of the trigger to render against when open. Will be reversed when collisions occur and avoidCollisions is enabled.\n",
|
8072
8070
|
"modifierKind": [
|
8073
8071
|
148
|
@@ -8082,7 +8080,7 @@
|
|
8082
8080
|
"indexKey": "",
|
8083
8081
|
"optional": false,
|
8084
8082
|
"description": "<p>The distance in pixels from the trigger.</p>\n",
|
8085
|
-
"line":
|
8083
|
+
"line": 48,
|
8086
8084
|
"rawdescription": "\n\nThe distance in pixels from the trigger.\n",
|
8087
8085
|
"modifierKind": [
|
8088
8086
|
148
|
@@ -8100,17 +8098,17 @@
|
|
8100
8098
|
"deprecated": false,
|
8101
8099
|
"deprecationMessage": "",
|
8102
8100
|
"args": [],
|
8103
|
-
"line":
|
8101
|
+
"line": 123
|
8104
8102
|
}
|
8105
8103
|
},
|
8106
8104
|
{
|
8107
8105
|
"name": "RdxPopoverRootDirective",
|
8108
|
-
"id": "directive-RdxPopoverRootDirective-
|
8106
|
+
"id": "directive-RdxPopoverRootDirective-e96e8026ed28e058a5551f6e6f830db4faeaec3fda88d2bc6a884cb06ac90fe0dd7643a4f86e87e68b19b858e3b6d0e3dce4636a9cd07617aff207acbf7d84b8",
|
8109
8107
|
"file": "popover/src/popover-root.directive.ts",
|
8110
8108
|
"type": "directive",
|
8111
8109
|
"description": "",
|
8112
8110
|
"rawdescription": "\n",
|
8113
|
-
"sourceCode": "import { DOCUMENT } from '@angular/common';\nimport {\n computed,\n contentChild,\n Directive,\n effect,\n forwardRef,\n inject,\n input,\n OnInit,\n output,\n signal,\n untracked,\n ViewContainerRef\n} from '@angular/core';\nimport { RdxPopoverArrowToken } from './popover-arrow.token';\nimport { RdxPopoverContentDirective } from './popover-content.directive';\nimport { RdxPopoverRootToken } from './popover-root.token';\nimport { RdxPopoverTriggerDirective } from './popover-trigger.directive';\nimport { RdxPopoverState } from './popover.types';\n\n@Directive({\n selector: '[rdxPopoverRoot]',\n standalone: true,\n providers: [\n {\n provide: RdxPopoverRootToken,\n useExisting: forwardRef(() => RdxPopoverRootDirective)\n }\n ],\n exportAs: 'rdxPopoverRoot'\n})\nexport class RdxPopoverRootDirective implements OnInit {\n /**\n * The open state of the popover when it is initially rendered. Use when you do not need to control its open state.\n */\n readonly defaultOpen = input<boolean>(false);\n /**\n * The controlled open state of the popover. Must be used in conjunction with onOpenChange.\n */\n readonly open = input<boolean | undefined>();\n\n /**\n * Event handler called when the open state of the popover changes.\n */\n readonly onOpenChange = output<boolean>();\n\n /** @ignore */\n readonly popoverContentDirective = contentChild.required(RdxPopoverContentDirective);\n /** @ignore */\n readonly popoverTriggerDirective = contentChild.required(RdxPopoverTriggerDirective);\n /** @ignore */\n readonly popoverArrowDirective = contentChild(RdxPopoverArrowToken);\n\n /** @ignore */\n readonly viewContainerRef = inject(ViewContainerRef);\n /** @ignore */\n private readonly document = inject(DOCUMENT);\n\n /** @ignore */\n readonly isOpen = signal<boolean>(this.defaultOpen());\n /** @ignore */\n readonly state = computed<RdxPopoverState>(() => {\n const currentIsOpen = this.isOpen();\n if (currentIsOpen) {\n return 'open';\n }\n return 'closed';\n });\n\n /** @ignore */\n private isControlledExternally = computed(() => signal(this.open() !== void 0));\n\n constructor() {\n this.onOpenChangeEffect();\n this.onIsOpenChangeEffect();\n }\n\n /** @ignore */\n ngOnInit(): void {\n if (this.defaultOpen()) {\n this.handleOpen();\n }\n }\n\n /** @ignore */\n controlledExternally() {\n return this.isControlledExternally().asReadonly();\n }\n\n /** @ignore */\n handleOpen(): void {\n if (this.isControlledExternally()()) {\n return;\n }\n this.setOpen(true);\n }\n\n /** @ignore */\n handleClose(): void {\n if (this.isControlledExternally()()) {\n return;\n }\n this.setOpen(false);\n }\n\n /** @ignore */\n handleToggle(): void {\n if (this.isControlledExternally()()) {\n return;\n }\n this.isOpen() ? this.handleClose() : this.handleOpen();\n }\n\n /** @ignore */\n private setOpen(open = false): void {\n
|
8111
|
+
"sourceCode": "import { DOCUMENT } from '@angular/common';\nimport {\n computed,\n contentChild,\n Directive,\n effect,\n forwardRef,\n inject,\n input,\n OnInit,\n output,\n signal,\n untracked,\n ViewContainerRef\n} from '@angular/core';\nimport { RdxPopoverArrowToken } from './popover-arrow.token';\nimport { RdxPopoverContentDirective } from './popover-content.directive';\nimport { RdxPopoverRootToken } from './popover-root.token';\nimport { RdxPopoverTriggerDirective } from './popover-trigger.directive';\nimport { RdxPopoverState } from './popover.types';\n\nlet nextId = 0;\n\n@Directive({\n selector: '[rdxPopoverRoot]',\n standalone: true,\n providers: [\n {\n provide: RdxPopoverRootToken,\n useExisting: forwardRef(() => RdxPopoverRootDirective)\n }\n ],\n exportAs: 'rdxPopoverRoot'\n})\nexport class RdxPopoverRootDirective implements OnInit {\n readonly uniqueId = signal(++nextId);\n readonly name = computed(() => `rdx-popover-root-${this.uniqueId()}`);\n\n /**\n * The open state of the popover when it is initially rendered. Use when you do not need to control its open state.\n */\n readonly defaultOpen = input<boolean>(false);\n /**\n * The controlled open state of the popover. Must be used in conjunction with onOpenChange.\n */\n readonly open = input<boolean | undefined>();\n\n /**\n * Event handler called when the open state of the popover changes.\n */\n readonly onOpenChange = output<boolean>();\n\n /** @ignore */\n readonly popoverContentDirective = contentChild.required(RdxPopoverContentDirective);\n /** @ignore */\n readonly popoverTriggerDirective = contentChild.required(RdxPopoverTriggerDirective);\n /** @ignore */\n readonly popoverArrowDirective = contentChild(RdxPopoverArrowToken);\n\n /** @ignore */\n readonly viewContainerRef = inject(ViewContainerRef);\n /** @ignore */\n private readonly document = inject(DOCUMENT);\n\n /** @ignore */\n readonly isOpen = signal<boolean>(this.defaultOpen());\n /** @ignore */\n readonly state = computed<RdxPopoverState>(() => {\n const currentIsOpen = this.isOpen();\n if (currentIsOpen) {\n return 'open';\n }\n return 'closed';\n });\n\n /** @ignore */\n private isControlledExternally = computed(() => signal(this.open() !== void 0));\n\n constructor() {\n this.onOpenChangeEffect();\n this.onIsOpenChangeEffect();\n }\n\n /** @ignore */\n ngOnInit(): void {\n if (this.defaultOpen()) {\n this.handleOpen();\n }\n }\n\n /** @ignore */\n controlledExternally() {\n return this.isControlledExternally().asReadonly();\n }\n\n /** @ignore */\n handleOpen(): void {\n if (this.isControlledExternally()()) {\n return;\n }\n this.setOpen(true);\n }\n\n /** @ignore */\n handleClose(): void {\n if (this.isControlledExternally()()) {\n return;\n }\n this.setOpen(false);\n }\n\n /** @ignore */\n handleToggle(): void {\n if (this.isControlledExternally()()) {\n return;\n }\n this.isOpen() ? this.handleClose() : this.handleOpen();\n }\n\n /** @ignore */\n private setOpen(open = false): void {\n this.document.dispatchEvent(\n new CustomEvent(`popover.${open ? 'open' : 'close'}`, {\n detail: {\n id: this.name()\n }\n })\n );\n\n this.isOpen.set(open);\n this.onOpenChange.emit(open);\n }\n\n /** @ignore */\n private show(): void {\n this.popoverContentDirective().show();\n }\n\n /** @ignore */\n private hide(): void {\n this.popoverContentDirective().hide();\n }\n\n /** @ignore */\n private onIsOpenChangeEffect() {\n effect(() => {\n const isOpen = this.isOpen();\n\n untracked(() => {\n if (isOpen) {\n this.show();\n } else {\n this.hide();\n }\n });\n });\n }\n\n /** @ignore */\n private onOpenChangeEffect() {\n effect(() => {\n const currentOpen = this.open();\n\n untracked(() => {\n this.isControlledExternally().set(currentOpen !== void 0);\n if (this.isControlledExternally()()) {\n this.setOpen(currentOpen);\n }\n });\n });\n }\n}\n",
|
8114
8112
|
"selector": "[rdxPopoverRoot]",
|
8115
8113
|
"providers": [
|
8116
8114
|
{
|
@@ -8131,7 +8129,7 @@
|
|
8131
8129
|
"indexKey": "",
|
8132
8130
|
"optional": false,
|
8133
8131
|
"description": "<p>The open state of the popover when it is initially rendered. Use when you do not need to control its open state.</p>\n",
|
8134
|
-
"line":
|
8132
|
+
"line": 42,
|
8135
8133
|
"rawdescription": "\n\nThe open state of the popover when it is initially rendered. Use when you do not need to control its open state.\n",
|
8136
8134
|
"modifierKind": [
|
8137
8135
|
148
|
@@ -8154,13 +8152,27 @@
|
|
8154
8152
|
"indexKey": "",
|
8155
8153
|
"optional": false,
|
8156
8154
|
"description": "<p>The open state of the popover when it is initially rendered. Use when you do not need to control its open state.</p>\n",
|
8157
|
-
"line":
|
8155
|
+
"line": 42,
|
8158
8156
|
"rawdescription": "\n\nThe open state of the popover when it is initially rendered. Use when you do not need to control its open state.\n",
|
8159
8157
|
"modifierKind": [
|
8160
8158
|
148
|
8161
8159
|
],
|
8162
8160
|
"required": false
|
8163
8161
|
},
|
8162
|
+
{
|
8163
|
+
"name": "name",
|
8164
|
+
"defaultValue": "computed(() => `rdx-popover-root-${this.uniqueId()}`)",
|
8165
|
+
"deprecated": false,
|
8166
|
+
"deprecationMessage": "",
|
8167
|
+
"type": "",
|
8168
|
+
"indexKey": "",
|
8169
|
+
"optional": false,
|
8170
|
+
"description": "",
|
8171
|
+
"line": 37,
|
8172
|
+
"modifierKind": [
|
8173
|
+
148
|
8174
|
+
]
|
8175
|
+
},
|
8164
8176
|
{
|
8165
8177
|
"name": "onOpenChange",
|
8166
8178
|
"defaultValue": "output<boolean>()",
|
@@ -8170,7 +8182,7 @@
|
|
8170
8182
|
"indexKey": "",
|
8171
8183
|
"optional": false,
|
8172
8184
|
"description": "<p>Event handler called when the open state of the popover changes.</p>\n",
|
8173
|
-
"line":
|
8185
|
+
"line": 51,
|
8174
8186
|
"rawdescription": "\n\nEvent handler called when the open state of the popover changes.\n",
|
8175
8187
|
"modifierKind": [
|
8176
8188
|
148
|
@@ -8185,11 +8197,25 @@
|
|
8185
8197
|
"indexKey": "",
|
8186
8198
|
"optional": false,
|
8187
8199
|
"description": "<p>The controlled open state of the popover. Must be used in conjunction with onOpenChange.</p>\n",
|
8188
|
-
"line":
|
8200
|
+
"line": 46,
|
8189
8201
|
"rawdescription": "\n\nThe controlled open state of the popover. Must be used in conjunction with onOpenChange.\n",
|
8190
8202
|
"modifierKind": [
|
8191
8203
|
148
|
8192
8204
|
]
|
8205
|
+
},
|
8206
|
+
{
|
8207
|
+
"name": "uniqueId",
|
8208
|
+
"defaultValue": "signal(++nextId)",
|
8209
|
+
"deprecated": false,
|
8210
|
+
"deprecationMessage": "",
|
8211
|
+
"type": "",
|
8212
|
+
"indexKey": "",
|
8213
|
+
"optional": false,
|
8214
|
+
"description": "",
|
8215
|
+
"line": 36,
|
8216
|
+
"modifierKind": [
|
8217
|
+
148
|
8218
|
+
]
|
8193
8219
|
}
|
8194
8220
|
],
|
8195
8221
|
"methodsClass": [],
|
@@ -8203,17 +8229,17 @@
|
|
8203
8229
|
"deprecated": false,
|
8204
8230
|
"deprecationMessage": "",
|
8205
8231
|
"args": [],
|
8206
|
-
"line":
|
8232
|
+
"line": 77
|
8207
8233
|
}
|
8208
8234
|
},
|
8209
8235
|
{
|
8210
8236
|
"name": "RdxPopoverTriggerDirective",
|
8211
|
-
"id": "directive-RdxPopoverTriggerDirective-
|
8237
|
+
"id": "directive-RdxPopoverTriggerDirective-8084bcc26be6cb9672051a844f54a1733d56d3bec5cbc590ff97647a21492b8ad6f131c7461e43663de8a6ad29409d748c48e8daabffec5165653e90080a34d8",
|
8212
8238
|
"file": "popover/src/popover-trigger.directive.ts",
|
8213
8239
|
"type": "directive",
|
8214
8240
|
"description": "",
|
8215
8241
|
"rawdescription": "\n",
|
8216
|
-
"sourceCode": "import { CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport { computed, Directive, ElementRef, inject
|
8242
|
+
"sourceCode": "import { CdkOverlayOrigin } from '@angular/cdk/overlay';\nimport { computed, Directive, ElementRef, inject } from '@angular/core';\nimport { injectPopoverRoot } from './popover-root.inject';\n\n@Directive({\n selector: '[rdxPopoverTrigger]',\n standalone: true,\n hostDirectives: [CdkOverlayOrigin],\n host: {\n type: 'button',\n '[attr.id]': 'name()',\n '[attr.aria-haspopup]': '\"dialog\"',\n '[attr.aria-expanded]': 'popoverRoot.isOpen()',\n '[attr.aria-controls]': 'controlsId()',\n '[attr.data-state]': 'popoverRoot.state()',\n '(click)': 'onClick()'\n }\n})\nexport class RdxPopoverTriggerDirective {\n /** @ignore */\n readonly popoverRoot = injectPopoverRoot();\n /** @ignore */\n readonly elementRef = inject(ElementRef);\n /** @ignore */\n readonly overlayOrigin = inject(CdkOverlayOrigin);\n\n /** @ignore */\n readonly name = computed(() => `rdx-popover-trigger-${this.popoverRoot.uniqueId()}`);\n /** @ignore */\n readonly controlsId = computed(() => `rdx-popover-trigger-controls-${this.popoverRoot.uniqueId()}`);\n\n /** @ignore */\n onClick(): void {\n this.popoverRoot.handleToggle();\n }\n}\n",
|
8217
8243
|
"selector": "[rdxPopoverTrigger]",
|
8218
8244
|
"providers": [],
|
8219
8245
|
"hostDirectives": [
|
@@ -8228,36 +8254,7 @@
|
|
8228
8254
|
"deprecationMessage": "",
|
8229
8255
|
"hostBindings": [],
|
8230
8256
|
"hostListeners": [],
|
8231
|
-
"propertiesClass": [
|
8232
|
-
{
|
8233
|
-
"name": "id",
|
8234
|
-
"defaultValue": "input(`rdx-popover-root-${nextId++}`)",
|
8235
|
-
"deprecated": false,
|
8236
|
-
"deprecationMessage": "",
|
8237
|
-
"type": "",
|
8238
|
-
"indexKey": "",
|
8239
|
-
"optional": false,
|
8240
|
-
"description": "",
|
8241
|
-
"line": 22,
|
8242
|
-
"modifierKind": [
|
8243
|
-
148
|
8244
|
-
]
|
8245
|
-
},
|
8246
|
-
{
|
8247
|
-
"name": "popoverId",
|
8248
|
-
"defaultValue": "computed(() => `rdx-popover-${this.id()}`)",
|
8249
|
-
"deprecated": false,
|
8250
|
-
"deprecationMessage": "",
|
8251
|
-
"type": "",
|
8252
|
-
"indexKey": "",
|
8253
|
-
"optional": false,
|
8254
|
-
"description": "",
|
8255
|
-
"line": 23,
|
8256
|
-
"modifierKind": [
|
8257
|
-
148
|
8258
|
-
]
|
8259
|
-
}
|
8260
|
-
],
|
8257
|
+
"propertiesClass": [],
|
8261
8258
|
"methodsClass": [],
|
8262
8259
|
"extends": []
|
8263
8260
|
},
|
@@ -8615,12 +8612,12 @@
|
|
8615
8612
|
},
|
8616
8613
|
{
|
8617
8614
|
"name": "RdxRadioIndicatorDirective",
|
8618
|
-
"id": "directive-RdxRadioIndicatorDirective-
|
8615
|
+
"id": "directive-RdxRadioIndicatorDirective-5b355eb159bab75305137248aa6fa8e888bc5283ce5c65219443ce36d763a10a531a27df786b02f76115bf5e0e4cc05f45abfca0029506f22d9572e5831de4f5",
|
8619
8616
|
"file": "radio/src/radio-indicator.directive.ts",
|
8620
8617
|
"type": "directive",
|
8621
8618
|
"description": "",
|
8622
8619
|
"rawdescription": "\n",
|
8623
|
-
"sourceCode": "import { Directive, inject } from '@angular/core';\nimport { RdxRadioItemDirective } from './radio-item.directive';\nimport { RDX_RADIO_GROUP, RadioGroupDirective } from './radio-tokens';\n\n@Directive({\n selector: '[rdxRadioIndicator]',\n exportAs: 'rdxRadioIndicator',\n standalone: true,\n host: {\n '[attr.data-state]': 'radioItem.
|
8620
|
+
"sourceCode": "import { Directive, inject } from '@angular/core';\nimport { RdxRadioItemDirective } from './radio-item.directive';\nimport { RDX_RADIO_GROUP, RadioGroupDirective } from './radio-tokens';\n\n@Directive({\n selector: '[rdxRadioIndicator]',\n exportAs: 'rdxRadioIndicator',\n standalone: true,\n host: {\n '[attr.data-state]': 'radioItem.checkedState() ? \"checked\" : \"unchecked\"',\n '[attr.data-disabled]': 'radioItem.disabled ? \"\" : null'\n }\n})\nexport class RdxRadioIndicatorDirective {\n protected readonly radioGroup: RadioGroupDirective = inject(RDX_RADIO_GROUP);\n protected readonly radioItem: RdxRadioItemDirective = inject(RdxRadioItemDirective);\n}\n",
|
8624
8621
|
"selector": "[rdxRadioIndicator]",
|
8625
8622
|
"providers": [],
|
8626
8623
|
"exportAs": "rdxRadioIndicator",
|
@@ -13150,9 +13147,88 @@
|
|
13150
13147
|
"stylesData": "\n .CollapsibleRoot {\n width: 300px;\n }\n\n .ExternalTrigger {\n font-family: inherit;\n border-radius: 8px;\n\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n box-shadow: 0 2px 10px var(--black-a7);\n margin-bottom: 10px;\n padding: 4px;\n }\n\n .ExternalTrigger[data-state='closed'] {\n background-color: white;\n }\n\n .ExternalTrigger[data-state='open'] {\n background-color: var(--violet-3);\n }\n\n .ExternalTrigger:hover {\n background-color: var(--violet-3);\n }\n\n .ExternalTrigger:focus {\n box-shadow: 0 0 0 2px black;\n }\n\n .Text {\n color: var(--violet-11);\n font-size: 15px;\n line-height: 25px;\n }\n\n .Repository {\n background-color: white;\n border-radius: 4px;\n margin: 10px 0;\n padding: 10px;\n box-shadow: 0 2px 10px var(--black-a7);\n }\n \n",
|
13151
13148
|
"extends": []
|
13152
13149
|
},
|
13150
|
+
{
|
13151
|
+
"name": "RdxPopoverDefaultComponent",
|
13152
|
+
"id": "component-RdxPopoverDefaultComponent-e542e582f4271fb22525f4ccfe02376250bca3d1c822960d8768e0b14ebe6f296c65303f7a9b9bdef1470f426e173a0f387fb4fcbf8d349ad5a33f15626d4622",
|
13153
|
+
"file": "popover/stories/popover-default.component.ts",
|
13154
|
+
"encapsulation": [],
|
13155
|
+
"entryComponents": [],
|
13156
|
+
"inputs": [],
|
13157
|
+
"outputs": [],
|
13158
|
+
"providers": [],
|
13159
|
+
"selector": "rdx-popover-default",
|
13160
|
+
"styleUrls": [],
|
13161
|
+
"styles": [
|
13162
|
+
"\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n button,\n fieldset,\n input {\n all: unset;\n }\n\n .PopoverContent {\n border-radius: 4px;\n padding: 20px;\n width: 260px;\n background-color: white;\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n }\n\n .PopoverContent:focus {\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n 0 0 0 2px var(--violet-7);\n }\n\n .PopoverContent[data-state='open'][data-side='top'] {\n animation-name: slideDownAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='right'] {\n animation-name: slideLeftAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='bottom'] {\n animation-name: slideUpAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='left'] {\n animation-name: slideRightAndFade;\n }\n\n .PopoverArrow {\n fill: white;\n }\n\n .PopoverClose {\n font-family: inherit;\n border-radius: 100%;\n height: 25px;\n width: 25px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n position: absolute;\n top: 5px;\n right: 5px;\n }\n\n .PopoverClose:hover {\n background-color: var(--violet-4);\n }\n\n .PopoverClose:focus {\n box-shadow: 0 0 0 2px var(--violet-7);\n }\n\n .IconButton {\n font-family: inherit;\n border-radius: 100%;\n height: 35px;\n width: 35px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n background-color: white;\n box-shadow: 0 2px 10px var(--black-a7);\n }\n\n .IconButton:hover {\n background-color: var(--violet-3);\n }\n\n .IconButton:focus {\n box-shadow: 0 0 0 2px black;\n }\n\n .Fieldset {\n display: flex;\n gap: 20px;\n align-items: center;\n }\n\n .Label {\n font-size: 13px;\n color: var(--violet-11);\n width: 75px;\n }\n\n .Input {\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n border-radius: 4px;\n padding: 0 10px;\n font-size: 13px;\n line-height: 1;\n color: var(--violet-11);\n box-shadow: 0 0 0 1px var(--violet-7);\n height: 25px;\n }\n\n .Input:focus {\n box-shadow: 0 0 0 2px var(--violet-8);\n }\n\n .Text {\n margin: 0;\n color: var(--mauve-12);\n font-size: 15px;\n line-height: 19px;\n font-weight: 500;\n }\n\n @keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n "
|
13163
|
+
],
|
13164
|
+
"template": "<div class=\"container\">\n <ng-container rdxPopoverRoot>\n <button class=\"IconButton\" rdxPopoverTrigger>\n <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n\n <ng-template rdxPopoverContent>\n <div class=\"PopoverContent\">\n <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n <div style=\"display: flex; flex-direction: column; gap: 10px\">\n <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"width\">Width</label>\n <input class=\"Input\" id=\"width\" value=\"100%\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"height\">Height</label>\n <input class=\"Input\" id=\"height\" value=\"25px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n </fieldset>\n </div>\n <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n </div>\n </ng-template>\n </ng-container>\n</div>\n",
|
13165
|
+
"templateUrl": [],
|
13166
|
+
"viewProviders": [],
|
13167
|
+
"hostDirectives": [],
|
13168
|
+
"inputsClass": [],
|
13169
|
+
"outputsClass": [],
|
13170
|
+
"propertiesClass": [
|
13171
|
+
{
|
13172
|
+
"name": "MountainSnowIcon",
|
13173
|
+
"defaultValue": "MountainSnowIcon",
|
13174
|
+
"deprecated": false,
|
13175
|
+
"deprecationMessage": "",
|
13176
|
+
"type": "",
|
13177
|
+
"indexKey": "",
|
13178
|
+
"optional": false,
|
13179
|
+
"description": "",
|
13180
|
+
"line": 234,
|
13181
|
+
"modifierKind": [
|
13182
|
+
148
|
13183
|
+
]
|
13184
|
+
},
|
13185
|
+
{
|
13186
|
+
"name": "XIcon",
|
13187
|
+
"defaultValue": "X",
|
13188
|
+
"deprecated": false,
|
13189
|
+
"deprecationMessage": "",
|
13190
|
+
"type": "",
|
13191
|
+
"indexKey": "",
|
13192
|
+
"optional": false,
|
13193
|
+
"description": "",
|
13194
|
+
"line": 235,
|
13195
|
+
"modifierKind": [
|
13196
|
+
148
|
13197
|
+
]
|
13198
|
+
}
|
13199
|
+
],
|
13200
|
+
"methodsClass": [],
|
13201
|
+
"deprecated": false,
|
13202
|
+
"deprecationMessage": "",
|
13203
|
+
"hostBindings": [],
|
13204
|
+
"hostListeners": [],
|
13205
|
+
"standalone": true,
|
13206
|
+
"imports": [
|
13207
|
+
{
|
13208
|
+
"name": "FormsModule",
|
13209
|
+
"type": "module"
|
13210
|
+
},
|
13211
|
+
{
|
13212
|
+
"name": "RdxPopoverModule",
|
13213
|
+
"type": "module"
|
13214
|
+
},
|
13215
|
+
{
|
13216
|
+
"name": "LucideAngularModule",
|
13217
|
+
"type": "module"
|
13218
|
+
}
|
13219
|
+
],
|
13220
|
+
"description": "",
|
13221
|
+
"rawdescription": "\n",
|
13222
|
+
"type": "component",
|
13223
|
+
"sourceCode": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { LucideAngularModule, MountainSnowIcon, X } from 'lucide-angular';\nimport { RdxPopoverModule } from '../index';\n\n@Component({\n selector: 'rdx-popover-default',\n standalone: true,\n imports: [\n FormsModule,\n RdxPopoverModule,\n LucideAngularModule\n ],\n styles: `\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n button,\n fieldset,\n input {\n all: unset;\n }\n\n .PopoverContent {\n border-radius: 4px;\n padding: 20px;\n width: 260px;\n background-color: white;\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n }\n\n .PopoverContent:focus {\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n 0 0 0 2px var(--violet-7);\n }\n\n .PopoverContent[data-state='open'][data-side='top'] {\n animation-name: slideDownAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='right'] {\n animation-name: slideLeftAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='bottom'] {\n animation-name: slideUpAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='left'] {\n animation-name: slideRightAndFade;\n }\n\n .PopoverArrow {\n fill: white;\n }\n\n .PopoverClose {\n font-family: inherit;\n border-radius: 100%;\n height: 25px;\n width: 25px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n position: absolute;\n top: 5px;\n right: 5px;\n }\n\n .PopoverClose:hover {\n background-color: var(--violet-4);\n }\n\n .PopoverClose:focus {\n box-shadow: 0 0 0 2px var(--violet-7);\n }\n\n .IconButton {\n font-family: inherit;\n border-radius: 100%;\n height: 35px;\n width: 35px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n background-color: white;\n box-shadow: 0 2px 10px var(--black-a7);\n }\n\n .IconButton:hover {\n background-color: var(--violet-3);\n }\n\n .IconButton:focus {\n box-shadow: 0 0 0 2px black;\n }\n\n .Fieldset {\n display: flex;\n gap: 20px;\n align-items: center;\n }\n\n .Label {\n font-size: 13px;\n color: var(--violet-11);\n width: 75px;\n }\n\n .Input {\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n border-radius: 4px;\n padding: 0 10px;\n font-size: 13px;\n line-height: 1;\n color: var(--violet-11);\n box-shadow: 0 0 0 1px var(--violet-7);\n height: 25px;\n }\n\n .Input:focus {\n box-shadow: 0 0 0 2px var(--violet-8);\n }\n\n .Text {\n margin: 0;\n color: var(--mauve-12);\n font-size: 15px;\n line-height: 19px;\n font-weight: 500;\n }\n\n @keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n `,\n template: `\n <div class=\"container\">\n <ng-container rdxPopoverRoot>\n <button class=\"IconButton\" rdxPopoverTrigger>\n <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n\n <ng-template rdxPopoverContent>\n <div class=\"PopoverContent\">\n <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n <div style=\"display: flex; flex-direction: column; gap: 10px\">\n <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"width\">Width</label>\n <input class=\"Input\" id=\"width\" value=\"100%\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"height\">Height</label>\n <input class=\"Input\" id=\"height\" value=\"25px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n </fieldset>\n </div>\n <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n </div>\n </ng-template>\n </ng-container>\n </div>\n `\n})\nexport class RdxPopoverDefaultComponent {\n readonly MountainSnowIcon = MountainSnowIcon;\n readonly XIcon = X;\n}\n",
|
13224
|
+
"assetsDirs": [],
|
13225
|
+
"styleUrlsData": "",
|
13226
|
+
"stylesData": "\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n button,\n fieldset,\n input {\n all: unset;\n }\n\n .PopoverContent {\n border-radius: 4px;\n padding: 20px;\n width: 260px;\n background-color: white;\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n }\n\n .PopoverContent:focus {\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n 0 0 0 2px var(--violet-7);\n }\n\n .PopoverContent[data-state='open'][data-side='top'] {\n animation-name: slideDownAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='right'] {\n animation-name: slideLeftAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='bottom'] {\n animation-name: slideUpAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='left'] {\n animation-name: slideRightAndFade;\n }\n\n .PopoverArrow {\n fill: white;\n }\n\n .PopoverClose {\n font-family: inherit;\n border-radius: 100%;\n height: 25px;\n width: 25px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n position: absolute;\n top: 5px;\n right: 5px;\n }\n\n .PopoverClose:hover {\n background-color: var(--violet-4);\n }\n\n .PopoverClose:focus {\n box-shadow: 0 0 0 2px var(--violet-7);\n }\n\n .IconButton {\n font-family: inherit;\n border-radius: 100%;\n height: 35px;\n width: 35px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n background-color: white;\n box-shadow: 0 2px 10px var(--black-a7);\n }\n\n .IconButton:hover {\n background-color: var(--violet-3);\n }\n\n .IconButton:focus {\n box-shadow: 0 0 0 2px black;\n }\n\n .Fieldset {\n display: flex;\n gap: 20px;\n align-items: center;\n }\n\n .Label {\n font-size: 13px;\n color: var(--violet-11);\n width: 75px;\n }\n\n .Input {\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n border-radius: 4px;\n padding: 0 10px;\n font-size: 13px;\n line-height: 1;\n color: var(--violet-11);\n box-shadow: 0 0 0 1px var(--violet-7);\n height: 25px;\n }\n\n .Input:focus {\n box-shadow: 0 0 0 2px var(--violet-8);\n }\n\n .Text {\n margin: 0;\n color: var(--mauve-12);\n font-size: 15px;\n line-height: 19px;\n font-weight: 500;\n }\n\n @keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n \n",
|
13227
|
+
"extends": []
|
13228
|
+
},
|
13153
13229
|
{
|
13154
13230
|
"name": "RdxPopoverEventsComponent",
|
13155
|
-
"id": "component-RdxPopoverEventsComponent-
|
13231
|
+
"id": "component-RdxPopoverEventsComponent-76bf523e63e4e8ecc64adaaedc8f0c342bac94fa618271b210bd9a121cbe16956f4883384ec25c741b94fd6c5f5e4a2825455f8cef12e5afa8497c5589b23ec0",
|
13156
13232
|
"file": "popover/stories/popover-events.components.ts",
|
13157
13233
|
"encapsulation": [],
|
13158
13234
|
"entryComponents": [],
|
@@ -13162,15 +13238,44 @@
|
|
13162
13238
|
"selector": "rdx-popover-events",
|
13163
13239
|
"styleUrls": [],
|
13164
13240
|
"styles": [
|
13165
|
-
"\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n
|
13241
|
+
"\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n .reset {\n all: unset;\n }\n\n .PopoverContent {\n border-radius: 4px;\n padding: 20px;\n width: 260px;\n background-color: white;\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n }\n\n .PopoverContent:focus {\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n 0 0 0 2px var(--violet-7);\n }\n\n .PopoverContent[data-state='open'][data-side='top'] {\n animation-name: slideDownAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='right'] {\n animation-name: slideLeftAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='bottom'] {\n animation-name: slideUpAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='left'] {\n animation-name: slideRightAndFade;\n }\n\n .PopoverArrow {\n fill: white;\n }\n\n .PopoverClose {\n font-family: inherit;\n border-radius: 100%;\n height: 25px;\n width: 25px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n position: absolute;\n top: 5px;\n right: 5px;\n }\n\n .PopoverClose:hover {\n background-color: var(--violet-4);\n }\n\n .PopoverClose:focus {\n box-shadow: 0 0 0 2px var(--violet-7);\n }\n\n .IconButton {\n font-family: inherit;\n border-radius: 100%;\n height: 35px;\n width: 35px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n background-color: white;\n box-shadow: 0 2px 10px var(--black-a7);\n }\n\n .IconButton:hover {\n background-color: var(--violet-3);\n }\n\n .IconButton:focus {\n box-shadow: 0 0 0 2px black;\n }\n\n .Fieldset {\n display: flex;\n gap: 20px;\n align-items: center;\n }\n\n .Label {\n font-size: 13px;\n color: var(--violet-11);\n width: 75px;\n }\n\n .Input {\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n border-radius: 4px;\n padding: 0 10px;\n font-size: 13px;\n line-height: 1;\n color: var(--violet-11);\n box-shadow: 0 0 0 1px var(--violet-7);\n height: 25px;\n }\n\n .Input:focus {\n box-shadow: 0 0 0 2px var(--violet-8);\n }\n\n .Text {\n margin: 0;\n color: var(--mauve-12);\n font-size: 15px;\n line-height: 19px;\n font-weight: 500;\n }\n\n .MessagesContainer {\n padding: 20px;\n }\n\n .Message {\n color: var(--white-a12);\n font-size: 15px;\n line-height: 19px;\n font-weight: bolder;\n }\n\n @keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n /* =============== Params layout =============== */\n\n .ParamsContainer {\n display: flex;\n column-gap: 8px;\n color: var(--white-a12);\n margin-bottom: 32px;\n }\n "
|
13166
13242
|
],
|
13167
|
-
"template": "<div class=\"container\" #eventsContainer>\n <ng-container rdxPopoverRoot>\n <button class=\"IconButton\" #triggerElement rdxPopoverTrigger>\n <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n\n <ng-template\n [sideOffset]=\"8\"\n (onEscapeKeyDown)=\"onEscapeKeyDown($event)\"\n (onPointerDownOutside)=\"onPointerDownOutside($event)\"\n (onShow)=\"onShow()\"\n (onHide)=\"onHide()\"\n rdxPopoverContent\n >\n <div class=\"PopoverContent\">\n <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n <div style=\"display: flex; flex-direction: column; gap: 10px\">\n <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"width\">Width</label>\n <input class=\"Input\" id=\"width\" value=\"100%\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"height\">Height</label>\n <input class=\"Input\" id=\"height\" value=\"25px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n </fieldset>\n </div>\n <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n </div>\n </ng-template>\n </ng-container>\n</div>\n",
|
13243
|
+
"template": "<div class=\"ParamsContainer\">\n (onEscapeKeyDown) prevent default:\n <input\n [ngModel]=\"onEscapeKeyDownPreventDefault()\"\n (ngModelChange)=\"onEscapeKeyDownPreventDefault.set($event)\"\n type=\"checkbox\"\n />\n (onPointerDownOutside) prevent default:\n <input\n [ngModel]=\"onPointerDownOutsidePreventDefault()\"\n (ngModelChange)=\"onPointerDownOutsidePreventDefault.set($event)\"\n type=\"checkbox\"\n />\n</div>\n\n<div class=\"container\" #eventsContainer>\n <ng-container rdxPopoverRoot>\n <button class=\"reset IconButton\" #triggerElement rdxPopoverTrigger>\n <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n\n <ng-template\n [sideOffset]=\"8\"\n (onEscapeKeyDown)=\"onEscapeKeyDown($event)\"\n (onPointerDownOutside)=\"onPointerDownOutside($event)\"\n (onShow)=\"onShow()\"\n (onHide)=\"onHide()\"\n rdxPopoverContent\n >\n <div class=\"PopoverContent\">\n <button class=\"reset PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n <div style=\"display: flex; flex-direction: column; gap: 10px\">\n <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n <fieldset class=\"reset Fieldset\">\n <label class=\"Label\" for=\"width\">Width</label>\n <input class=\"reset Input\" id=\"width\" value=\"100%\" />\n </fieldset>\n <fieldset class=\"reset Fieldset\">\n <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n <input class=\"reset Input\" id=\"maxWidth\" value=\"300px\" />\n </fieldset>\n <fieldset class=\"reset Fieldset\">\n <label class=\"Label\" for=\"height\">Height</label>\n <input class=\"reset Input\" id=\"height\" value=\"25px\" />\n </fieldset>\n <fieldset class=\"reset Fieldset\">\n <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n <input class=\"reset Input\" id=\"maxHeight\" value=\"none\" />\n </fieldset>\n </div>\n <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n </div>\n </ng-template>\n </ng-container>\n</div>\n@if (messages().length) {\n <div class=\"MessagesContainer\">\n @for (message of messages(); track message; let i = $index) {\n <p class=\"Message\">{{ messages().length - i }}. {{ message }}</p>\n }\n </div>\n}\n",
|
13168
13244
|
"templateUrl": [],
|
13169
13245
|
"viewProviders": [],
|
13170
13246
|
"hostDirectives": [],
|
13171
13247
|
"inputsClass": [],
|
13172
13248
|
"outputsClass": [],
|
13173
13249
|
"propertiesClass": [
|
13250
|
+
{
|
13251
|
+
"name": "aligns",
|
13252
|
+
"defaultValue": "RdxPopoverAlign",
|
13253
|
+
"deprecated": false,
|
13254
|
+
"deprecationMessage": "",
|
13255
|
+
"type": "",
|
13256
|
+
"indexKey": "",
|
13257
|
+
"optional": false,
|
13258
|
+
"description": "",
|
13259
|
+
"line": 322,
|
13260
|
+
"modifierKind": [
|
13261
|
+
124,
|
13262
|
+
148
|
13263
|
+
]
|
13264
|
+
},
|
13265
|
+
{
|
13266
|
+
"name": "messages",
|
13267
|
+
"defaultValue": "signal<string[]>([])",
|
13268
|
+
"deprecated": false,
|
13269
|
+
"deprecationMessage": "",
|
13270
|
+
"type": "",
|
13271
|
+
"indexKey": "",
|
13272
|
+
"optional": false,
|
13273
|
+
"description": "",
|
13274
|
+
"line": 289,
|
13275
|
+
"modifierKind": [
|
13276
|
+
148
|
13277
|
+
]
|
13278
|
+
},
|
13174
13279
|
{
|
13175
13280
|
"name": "MountainSnowIcon",
|
13176
13281
|
"defaultValue": "MountainSnowIcon",
|
@@ -13180,11 +13285,54 @@
|
|
13180
13285
|
"indexKey": "",
|
13181
13286
|
"optional": false,
|
13182
13287
|
"description": "",
|
13183
|
-
"line":
|
13288
|
+
"line": 286,
|
13289
|
+
"modifierKind": [
|
13290
|
+
148
|
13291
|
+
]
|
13292
|
+
},
|
13293
|
+
{
|
13294
|
+
"name": "onEscapeKeyDownPreventDefault",
|
13295
|
+
"defaultValue": "signal(false)",
|
13296
|
+
"deprecated": false,
|
13297
|
+
"deprecationMessage": "",
|
13298
|
+
"type": "",
|
13299
|
+
"indexKey": "",
|
13300
|
+
"optional": false,
|
13301
|
+
"description": "",
|
13302
|
+
"line": 291,
|
13184
13303
|
"modifierKind": [
|
13185
13304
|
148
|
13186
13305
|
]
|
13187
13306
|
},
|
13307
|
+
{
|
13308
|
+
"name": "onPointerDownOutsidePreventDefault",
|
13309
|
+
"defaultValue": "signal(false)",
|
13310
|
+
"deprecated": false,
|
13311
|
+
"deprecationMessage": "",
|
13312
|
+
"type": "",
|
13313
|
+
"indexKey": "",
|
13314
|
+
"optional": false,
|
13315
|
+
"description": "",
|
13316
|
+
"line": 292,
|
13317
|
+
"modifierKind": [
|
13318
|
+
148
|
13319
|
+
]
|
13320
|
+
},
|
13321
|
+
{
|
13322
|
+
"name": "sides",
|
13323
|
+
"defaultValue": "RdxPopoverSide",
|
13324
|
+
"deprecated": false,
|
13325
|
+
"deprecationMessage": "",
|
13326
|
+
"type": "",
|
13327
|
+
"indexKey": "",
|
13328
|
+
"optional": false,
|
13329
|
+
"description": "",
|
13330
|
+
"line": 321,
|
13331
|
+
"modifierKind": [
|
13332
|
+
124,
|
13333
|
+
148
|
13334
|
+
]
|
13335
|
+
},
|
13188
13336
|
{
|
13189
13337
|
"name": "XIcon",
|
13190
13338
|
"defaultValue": "X",
|
@@ -13194,7 +13342,7 @@
|
|
13194
13342
|
"indexKey": "",
|
13195
13343
|
"optional": false,
|
13196
13344
|
"description": "",
|
13197
|
-
"line":
|
13345
|
+
"line": 287,
|
13198
13346
|
"modifierKind": [
|
13199
13347
|
148
|
13200
13348
|
]
|
@@ -13214,7 +13362,7 @@
|
|
13214
13362
|
"optional": false,
|
13215
13363
|
"returnType": "void",
|
13216
13364
|
"typeParameters": [],
|
13217
|
-
"line":
|
13365
|
+
"line": 294,
|
13218
13366
|
"deprecated": false,
|
13219
13367
|
"deprecationMessage": "",
|
13220
13368
|
"jsdoctags": [
|
@@ -13235,7 +13383,7 @@
|
|
13235
13383
|
"optional": false,
|
13236
13384
|
"returnType": "void",
|
13237
13385
|
"typeParameters": [],
|
13238
|
-
"line":
|
13386
|
+
"line": 313,
|
13239
13387
|
"deprecated": false,
|
13240
13388
|
"deprecationMessage": ""
|
13241
13389
|
},
|
@@ -13252,7 +13400,7 @@
|
|
13252
13400
|
"optional": false,
|
13253
13401
|
"returnType": "void",
|
13254
13402
|
"typeParameters": [],
|
13255
|
-
"line":
|
13403
|
+
"line": 299,
|
13256
13404
|
"deprecated": false,
|
13257
13405
|
"deprecationMessage": "",
|
13258
13406
|
"jsdoctags": [
|
@@ -13273,7 +13421,7 @@
|
|
13273
13421
|
"optional": false,
|
13274
13422
|
"returnType": "void",
|
13275
13423
|
"typeParameters": [],
|
13276
|
-
"line":
|
13424
|
+
"line": 309,
|
13277
13425
|
"deprecated": false,
|
13278
13426
|
"deprecationMessage": ""
|
13279
13427
|
}
|
@@ -13284,6 +13432,89 @@
|
|
13284
13432
|
"hostListeners": [],
|
13285
13433
|
"standalone": true,
|
13286
13434
|
"imports": [
|
13435
|
+
{
|
13436
|
+
"name": "RdxPopoverModule",
|
13437
|
+
"type": "module"
|
13438
|
+
},
|
13439
|
+
{
|
13440
|
+
"name": "LucideAngularModule",
|
13441
|
+
"type": "module"
|
13442
|
+
},
|
13443
|
+
{
|
13444
|
+
"name": "FormsModule",
|
13445
|
+
"type": "module"
|
13446
|
+
}
|
13447
|
+
],
|
13448
|
+
"description": "",
|
13449
|
+
"rawdescription": "\n",
|
13450
|
+
"type": "component",
|
13451
|
+
"sourceCode": "import { Component, ElementRef, inject, signal, viewChild } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { LucideAngularModule, MountainSnowIcon, X } from 'lucide-angular';\nimport { RdxPopoverAlign, RdxPopoverModule, RdxPopoverSide } from '../index';\n\n@Component({\n selector: 'rdx-popover-events',\n standalone: true,\n imports: [\n RdxPopoverModule,\n LucideAngularModule,\n FormsModule\n ],\n styles: `\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n .reset {\n all: unset;\n }\n\n .PopoverContent {\n border-radius: 4px;\n padding: 20px;\n width: 260px;\n background-color: white;\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n }\n\n .PopoverContent:focus {\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n 0 0 0 2px var(--violet-7);\n }\n\n .PopoverContent[data-state='open'][data-side='top'] {\n animation-name: slideDownAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='right'] {\n animation-name: slideLeftAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='bottom'] {\n animation-name: slideUpAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='left'] {\n animation-name: slideRightAndFade;\n }\n\n .PopoverArrow {\n fill: white;\n }\n\n .PopoverClose {\n font-family: inherit;\n border-radius: 100%;\n height: 25px;\n width: 25px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n position: absolute;\n top: 5px;\n right: 5px;\n }\n\n .PopoverClose:hover {\n background-color: var(--violet-4);\n }\n\n .PopoverClose:focus {\n box-shadow: 0 0 0 2px var(--violet-7);\n }\n\n .IconButton {\n font-family: inherit;\n border-radius: 100%;\n height: 35px;\n width: 35px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n background-color: white;\n box-shadow: 0 2px 10px var(--black-a7);\n }\n\n .IconButton:hover {\n background-color: var(--violet-3);\n }\n\n .IconButton:focus {\n box-shadow: 0 0 0 2px black;\n }\n\n .Fieldset {\n display: flex;\n gap: 20px;\n align-items: center;\n }\n\n .Label {\n font-size: 13px;\n color: var(--violet-11);\n width: 75px;\n }\n\n .Input {\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n border-radius: 4px;\n padding: 0 10px;\n font-size: 13px;\n line-height: 1;\n color: var(--violet-11);\n box-shadow: 0 0 0 1px var(--violet-7);\n height: 25px;\n }\n\n .Input:focus {\n box-shadow: 0 0 0 2px var(--violet-8);\n }\n\n .Text {\n margin: 0;\n color: var(--mauve-12);\n font-size: 15px;\n line-height: 19px;\n font-weight: 500;\n }\n\n .MessagesContainer {\n padding: 20px;\n }\n\n .Message {\n color: var(--white-a12);\n font-size: 15px;\n line-height: 19px;\n font-weight: bolder;\n }\n\n @keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n /* =============== Params layout =============== */\n\n .ParamsContainer {\n display: flex;\n column-gap: 8px;\n color: var(--white-a12);\n margin-bottom: 32px;\n }\n `,\n template: `\n <div class=\"ParamsContainer\">\n (onEscapeKeyDown) prevent default:\n <input\n [ngModel]=\"onEscapeKeyDownPreventDefault()\"\n (ngModelChange)=\"onEscapeKeyDownPreventDefault.set($event)\"\n type=\"checkbox\"\n />\n (onPointerDownOutside) prevent default:\n <input\n [ngModel]=\"onPointerDownOutsidePreventDefault()\"\n (ngModelChange)=\"onPointerDownOutsidePreventDefault.set($event)\"\n type=\"checkbox\"\n />\n </div>\n\n <div class=\"container\" #eventsContainer>\n <ng-container rdxPopoverRoot>\n <button class=\"reset IconButton\" #triggerElement rdxPopoverTrigger>\n <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n\n <ng-template\n [sideOffset]=\"8\"\n (onEscapeKeyDown)=\"onEscapeKeyDown($event)\"\n (onPointerDownOutside)=\"onPointerDownOutside($event)\"\n (onShow)=\"onShow()\"\n (onHide)=\"onHide()\"\n rdxPopoverContent\n >\n <div class=\"PopoverContent\">\n <button class=\"reset PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n <div style=\"display: flex; flex-direction: column; gap: 10px\">\n <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n <fieldset class=\"reset Fieldset\">\n <label class=\"Label\" for=\"width\">Width</label>\n <input class=\"reset Input\" id=\"width\" value=\"100%\" />\n </fieldset>\n <fieldset class=\"reset Fieldset\">\n <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n <input class=\"reset Input\" id=\"maxWidth\" value=\"300px\" />\n </fieldset>\n <fieldset class=\"reset Fieldset\">\n <label class=\"Label\" for=\"height\">Height</label>\n <input class=\"reset Input\" id=\"height\" value=\"25px\" />\n </fieldset>\n <fieldset class=\"reset Fieldset\">\n <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n <input class=\"reset Input\" id=\"maxHeight\" value=\"none\" />\n </fieldset>\n </div>\n <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n </div>\n </ng-template>\n </ng-container>\n </div>\n @if (messages().length) {\n <div class=\"MessagesContainer\">\n @for (message of messages(); track message; let i = $index) {\n <p class=\"Message\">{{ messages().length - i }}. {{ message }}</p>\n }\n </div>\n }\n `\n})\nexport class RdxPopoverEventsComponent {\n private elementRef = inject(ElementRef);\n\n private readonly triggerElement = viewChild<ElementRef<HTMLElement>>('triggerElement');\n private readonly eventsContainer = viewChild<ElementRef<HTMLElement>>('eventsContainer');\n\n readonly MountainSnowIcon = MountainSnowIcon;\n readonly XIcon = X;\n\n readonly messages = signal<string[]>([]);\n\n readonly onEscapeKeyDownPreventDefault = signal(false);\n readonly onPointerDownOutsidePreventDefault = signal(false);\n\n onEscapeKeyDown(event: KeyboardEvent) {\n this.addMessage(`Escape clicked! (preventDefault: ${this.onEscapeKeyDownPreventDefault()})`);\n this.onEscapeKeyDownPreventDefault() && event.preventDefault();\n }\n\n onPointerDownOutside(event: MouseEvent): void {\n if (!event.target || !this.elementRef.nativeElement.contains(event.target as HTMLElement)) {\n return;\n }\n this.addMessage(\n `Mouse clicked outside the popover! (preventDefault: ${this.onPointerDownOutsidePreventDefault()})`\n );\n this.onPointerDownOutsidePreventDefault() && event.preventDefault();\n }\n\n onShow() {\n this.addMessage('Popover shown!');\n }\n\n onHide() {\n this.addMessage('Popover hidden!');\n }\n\n private addMessage(message: string) {\n this.messages.update((messages) => [message, ...messages]);\n }\n\n protected readonly sides = RdxPopoverSide;\n protected readonly aligns = RdxPopoverAlign;\n}\n",
|
13452
|
+
"assetsDirs": [],
|
13453
|
+
"styleUrlsData": "",
|
13454
|
+
"stylesData": "\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n .reset {\n all: unset;\n }\n\n .PopoverContent {\n border-radius: 4px;\n padding: 20px;\n width: 260px;\n background-color: white;\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n }\n\n .PopoverContent:focus {\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n 0 0 0 2px var(--violet-7);\n }\n\n .PopoverContent[data-state='open'][data-side='top'] {\n animation-name: slideDownAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='right'] {\n animation-name: slideLeftAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='bottom'] {\n animation-name: slideUpAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='left'] {\n animation-name: slideRightAndFade;\n }\n\n .PopoverArrow {\n fill: white;\n }\n\n .PopoverClose {\n font-family: inherit;\n border-radius: 100%;\n height: 25px;\n width: 25px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n position: absolute;\n top: 5px;\n right: 5px;\n }\n\n .PopoverClose:hover {\n background-color: var(--violet-4);\n }\n\n .PopoverClose:focus {\n box-shadow: 0 0 0 2px var(--violet-7);\n }\n\n .IconButton {\n font-family: inherit;\n border-radius: 100%;\n height: 35px;\n width: 35px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n background-color: white;\n box-shadow: 0 2px 10px var(--black-a7);\n }\n\n .IconButton:hover {\n background-color: var(--violet-3);\n }\n\n .IconButton:focus {\n box-shadow: 0 0 0 2px black;\n }\n\n .Fieldset {\n display: flex;\n gap: 20px;\n align-items: center;\n }\n\n .Label {\n font-size: 13px;\n color: var(--violet-11);\n width: 75px;\n }\n\n .Input {\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n border-radius: 4px;\n padding: 0 10px;\n font-size: 13px;\n line-height: 1;\n color: var(--violet-11);\n box-shadow: 0 0 0 1px var(--violet-7);\n height: 25px;\n }\n\n .Input:focus {\n box-shadow: 0 0 0 2px var(--violet-8);\n }\n\n .Text {\n margin: 0;\n color: var(--mauve-12);\n font-size: 15px;\n line-height: 19px;\n font-weight: 500;\n }\n\n .MessagesContainer {\n padding: 20px;\n }\n\n .Message {\n color: var(--white-a12);\n font-size: 15px;\n line-height: 19px;\n font-weight: bolder;\n }\n\n @keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n /* =============== Params layout =============== */\n\n .ParamsContainer {\n display: flex;\n column-gap: 8px;\n color: var(--white-a12);\n margin-bottom: 32px;\n }\n \n",
|
13455
|
+
"extends": []
|
13456
|
+
},
|
13457
|
+
{
|
13458
|
+
"name": "RdxPopoverMultipleComponent",
|
13459
|
+
"id": "component-RdxPopoverMultipleComponent-d7220d54fd49c5984573ea3a5d1b6d46eb0cd01d779d0ae32b6970cd761a954f2f10f6a9def2f599ba53e437007be35b0fecdaeb10cb5715d00b287d7f213a54",
|
13460
|
+
"file": "popover/stories/popover-multiple.component.ts",
|
13461
|
+
"encapsulation": [],
|
13462
|
+
"entryComponents": [],
|
13463
|
+
"inputs": [],
|
13464
|
+
"outputs": [],
|
13465
|
+
"providers": [],
|
13466
|
+
"selector": "rdx-popover-multiple",
|
13467
|
+
"styleUrls": [],
|
13468
|
+
"styles": [
|
13469
|
+
"\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n button,\n fieldset,\n input {\n all: unset;\n }\n\n .PopoverContent {\n border-radius: 4px;\n padding: 20px;\n width: 260px;\n background-color: white;\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n }\n\n .PopoverContent:focus {\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n 0 0 0 2px var(--violet-7);\n }\n\n .PopoverContent[data-state='open'][data-side='top'] {\n animation-name: slideDownAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='right'] {\n animation-name: slideLeftAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='bottom'] {\n animation-name: slideUpAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='left'] {\n animation-name: slideRightAndFade;\n }\n\n .PopoverArrow {\n fill: white;\n }\n\n .PopoverClose {\n font-family: inherit;\n border-radius: 100%;\n height: 25px;\n width: 25px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n position: absolute;\n top: 5px;\n right: 5px;\n }\n\n .PopoverClose:hover {\n background-color: var(--violet-4);\n }\n\n .PopoverClose:focus {\n box-shadow: 0 0 0 2px var(--violet-7);\n }\n\n .IconButton {\n font-family: inherit;\n border-radius: 100%;\n height: 35px;\n width: 35px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n background-color: white;\n box-shadow: 0 2px 10px var(--black-a7);\n }\n\n .IconButton:hover {\n background-color: var(--violet-3);\n }\n\n .IconButton:focus {\n box-shadow: 0 0 0 2px black;\n }\n\n .Fieldset {\n display: flex;\n gap: 20px;\n align-items: center;\n }\n\n .Label {\n font-size: 13px;\n color: var(--violet-11);\n width: 75px;\n }\n\n .Input {\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n border-radius: 4px;\n padding: 0 10px;\n font-size: 13px;\n line-height: 1;\n color: var(--violet-11);\n box-shadow: 0 0 0 1px var(--violet-7);\n height: 25px;\n }\n\n .Input:focus {\n box-shadow: 0 0 0 2px var(--violet-8);\n }\n\n .Text {\n margin: 0;\n color: var(--mauve-12);\n font-size: 15px;\n line-height: 19px;\n font-weight: 500;\n }\n\n @keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n "
|
13470
|
+
],
|
13471
|
+
"template": "<div class=\"container\">\n <ng-container rdxPopoverRoot>\n <button class=\"IconButton\" rdxPopoverTrigger>\n <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n\n <ng-template rdxPopoverContent>\n <div class=\"PopoverContent\">\n <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n <div style=\"display: flex; flex-direction: column; gap: 10px\">\n <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"width\">Width</label>\n <input class=\"Input\" id=\"width\" value=\"100%\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"height\">Height</label>\n <input class=\"Input\" id=\"height\" value=\"25px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n </fieldset>\n </div>\n <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n </div>\n </ng-template>\n </ng-container>\n</div>\n\n<div class=\"container\">\n <ng-container rdxPopoverRoot>\n <button class=\"IconButton\" rdxPopoverTrigger>\n <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n\n <ng-template [sideOffset]=\"16\" [alignOffset]=\"16\" rdxPopoverContent>\n <div class=\"PopoverContent\">\n <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n <div style=\"display: flex; flex-direction: column; gap: 10px\">\n <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"width\">Width</label>\n <input class=\"Input\" id=\"width\" value=\"100%\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"height\">Height</label>\n <input class=\"Input\" id=\"height\" value=\"25px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n </fieldset>\n </div>\n <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n </div>\n </ng-template>\n </ng-container>\n</div>\n\n<div class=\"container\">\n <ng-container rdxPopoverRoot>\n <button class=\"IconButton\" rdxPopoverTrigger>\n <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n\n <ng-template [sideOffset]=\"60\" [alignOffset]=\"60\" rdxPopoverContent>\n <div class=\"PopoverContent\">\n <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n <div style=\"display: flex; flex-direction: column; gap: 10px\">\n <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"width\">Width</label>\n <input class=\"Input\" id=\"width\" value=\"100%\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"height\">Height</label>\n <input class=\"Input\" id=\"height\" value=\"25px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n </fieldset>\n </div>\n <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n </div>\n </ng-template>\n </ng-container>\n</div>\n",
|
13472
|
+
"templateUrl": [],
|
13473
|
+
"viewProviders": [],
|
13474
|
+
"hostDirectives": [],
|
13475
|
+
"inputsClass": [],
|
13476
|
+
"outputsClass": [],
|
13477
|
+
"propertiesClass": [
|
13478
|
+
{
|
13479
|
+
"name": "MountainSnowIcon",
|
13480
|
+
"defaultValue": "MountainSnowIcon",
|
13481
|
+
"deprecated": false,
|
13482
|
+
"deprecationMessage": "",
|
13483
|
+
"type": "",
|
13484
|
+
"indexKey": "",
|
13485
|
+
"optional": false,
|
13486
|
+
"description": "",
|
13487
|
+
"line": 306,
|
13488
|
+
"modifierKind": [
|
13489
|
+
148
|
13490
|
+
]
|
13491
|
+
},
|
13492
|
+
{
|
13493
|
+
"name": "XIcon",
|
13494
|
+
"defaultValue": "X",
|
13495
|
+
"deprecated": false,
|
13496
|
+
"deprecationMessage": "",
|
13497
|
+
"type": "",
|
13498
|
+
"indexKey": "",
|
13499
|
+
"optional": false,
|
13500
|
+
"description": "",
|
13501
|
+
"line": 307,
|
13502
|
+
"modifierKind": [
|
13503
|
+
148
|
13504
|
+
]
|
13505
|
+
}
|
13506
|
+
],
|
13507
|
+
"methodsClass": [],
|
13508
|
+
"deprecated": false,
|
13509
|
+
"deprecationMessage": "",
|
13510
|
+
"hostBindings": [],
|
13511
|
+
"hostListeners": [],
|
13512
|
+
"standalone": true,
|
13513
|
+
"imports": [
|
13514
|
+
{
|
13515
|
+
"name": "FormsModule",
|
13516
|
+
"type": "module"
|
13517
|
+
},
|
13287
13518
|
{
|
13288
13519
|
"name": "RdxPopoverModule",
|
13289
13520
|
"type": "module"
|
@@ -13296,7 +13527,7 @@
|
|
13296
13527
|
"description": "",
|
13297
13528
|
"rawdescription": "\n",
|
13298
13529
|
"type": "component",
|
13299
|
-
"sourceCode": "import { Component, ElementRef, viewChild } from '@angular/core';\nimport { LucideAngularModule, MountainSnowIcon, X } from 'lucide-angular';\nimport { RdxPopoverModule } from '../index';\n\n@Component({\n selector: 'rdx-popover-events',\n standalone: true,\n imports: [\n RdxPopoverModule,\n LucideAngularModule\n ],\n styles: `\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n button,\n fieldset,\n input {\n all: unset;\n }\n\n .PopoverContent {\n border-radius: 4px;\n padding: 20px;\n width: 260px;\n background-color: white;\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n }\n\n .PopoverContent:focus {\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n 0 0 0 2px var(--violet-7);\n }\n\n .PopoverContent[data-state='open'][data-side='top'] {\n animation-name: slideDownAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='right'] {\n animation-name: slideLeftAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='bottom'] {\n animation-name: slideUpAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='left'] {\n animation-name: slideRightAndFade;\n }\n\n .PopoverArrow {\n fill: white;\n }\n\n .PopoverClose {\n font-family: inherit;\n border-radius: 100%;\n height: 25px;\n width: 25px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n position: absolute;\n top: 5px;\n right: 5px;\n }\n\n .PopoverClose:hover {\n background-color: var(--violet-4);\n }\n\n .PopoverClose:focus {\n box-shadow: 0 0 0 2px var(--violet-7);\n }\n\n .IconButton {\n font-family: inherit;\n border-radius: 100%;\n height: 35px;\n width: 35px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n background-color: white;\n box-shadow: 0 2px 10px var(--black-a7);\n }\n\n .IconButton:hover {\n background-color: var(--violet-3);\n }\n\n .IconButton:focus {\n box-shadow: 0 0 0 2px black;\n }\n\n .Fieldset {\n display: flex;\n gap: 20px;\n align-items: center;\n }\n\n .Label {\n font-size: 13px;\n color: var(--violet-11);\n width: 75px;\n }\n\n .Input {\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n border-radius: 4px;\n padding: 0 10px;\n font-size: 13px;\n line-height: 1;\n color: var(--violet-11);\n box-shadow: 0 0 0 1px var(--violet-7);\n height: 25px;\n }\n\n .Input:focus {\n box-shadow: 0 0 0 2px var(--violet-8);\n }\n\n .Text {\n margin: 0;\n color: var(--mauve-12);\n font-size: 15px;\n line-height: 19px;\n font-weight: 500;\n }\n\n @keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n `,\n template: `\n <div class=\"container\" #eventsContainer>\n <ng-container rdxPopoverRoot>\n <button class=\"IconButton\" #triggerElement rdxPopoverTrigger>\n <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n\n <ng-template\n [sideOffset]=\"8\"\n (onEscapeKeyDown)=\"onEscapeKeyDown($event)\"\n (onPointerDownOutside)=\"onPointerDownOutside($event)\"\n (onShow)=\"onShow()\"\n (onHide)=\"onHide()\"\n rdxPopoverContent\n >\n <div class=\"PopoverContent\">\n <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n <div style=\"display: flex; flex-direction: column; gap: 10px\">\n <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"width\">Width</label>\n <input class=\"Input\" id=\"width\" value=\"100%\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"height\">Height</label>\n <input class=\"Input\" id=\"height\" value=\"25px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n </fieldset>\n </div>\n <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n </div>\n </ng-template>\n </ng-container>\n </div>\n `\n})\nexport class RdxPopoverEventsComponent {\n private readonly triggerElement = viewChild<ElementRef<HTMLElement>>('triggerElement');\n private readonly eventsContainer = viewChild<ElementRef<HTMLElement>>('eventsContainer');\n\n readonly MountainSnowIcon = MountainSnowIcon;\n readonly XIcon = X;\n\n onEscapeKeyDown(event: KeyboardEvent) {\n alert('Escape clicked!');\n event.preventDefault();\n }\n\n onPointerDownOutside(event: MouseEvent): void {\n if (!event.target || !this.eventsContainer()?.nativeElement.contains(event.target as HTMLElement)) {\n return;\n }\n alert('Mouse clicked outside the popover!');\n if (event.target === this.triggerElement()?.nativeElement) {\n event.stopPropagation();\n }\n event.preventDefault();\n }\n\n onShow() {\n alert('Popover shown!');\n }\n\n onHide() {\n alert('Popover hidden!');\n }\n}\n",
|
13530
|
+
"sourceCode": "import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { LucideAngularModule, MountainSnowIcon, X } from 'lucide-angular';\nimport { RdxPopoverModule } from '../index';\n\n@Component({\n selector: 'rdx-popover-multiple',\n standalone: true,\n imports: [\n FormsModule,\n RdxPopoverModule,\n LucideAngularModule\n ],\n styles: `\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n button,\n fieldset,\n input {\n all: unset;\n }\n\n .PopoverContent {\n border-radius: 4px;\n padding: 20px;\n width: 260px;\n background-color: white;\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n }\n\n .PopoverContent:focus {\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n 0 0 0 2px var(--violet-7);\n }\n\n .PopoverContent[data-state='open'][data-side='top'] {\n animation-name: slideDownAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='right'] {\n animation-name: slideLeftAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='bottom'] {\n animation-name: slideUpAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='left'] {\n animation-name: slideRightAndFade;\n }\n\n .PopoverArrow {\n fill: white;\n }\n\n .PopoverClose {\n font-family: inherit;\n border-radius: 100%;\n height: 25px;\n width: 25px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n position: absolute;\n top: 5px;\n right: 5px;\n }\n\n .PopoverClose:hover {\n background-color: var(--violet-4);\n }\n\n .PopoverClose:focus {\n box-shadow: 0 0 0 2px var(--violet-7);\n }\n\n .IconButton {\n font-family: inherit;\n border-radius: 100%;\n height: 35px;\n width: 35px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n background-color: white;\n box-shadow: 0 2px 10px var(--black-a7);\n }\n\n .IconButton:hover {\n background-color: var(--violet-3);\n }\n\n .IconButton:focus {\n box-shadow: 0 0 0 2px black;\n }\n\n .Fieldset {\n display: flex;\n gap: 20px;\n align-items: center;\n }\n\n .Label {\n font-size: 13px;\n color: var(--violet-11);\n width: 75px;\n }\n\n .Input {\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n border-radius: 4px;\n padding: 0 10px;\n font-size: 13px;\n line-height: 1;\n color: var(--violet-11);\n box-shadow: 0 0 0 1px var(--violet-7);\n height: 25px;\n }\n\n .Input:focus {\n box-shadow: 0 0 0 2px var(--violet-8);\n }\n\n .Text {\n margin: 0;\n color: var(--mauve-12);\n font-size: 15px;\n line-height: 19px;\n font-weight: 500;\n }\n\n @keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n `,\n template: `\n <div class=\"container\">\n <ng-container rdxPopoverRoot>\n <button class=\"IconButton\" rdxPopoverTrigger>\n <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n\n <ng-template rdxPopoverContent>\n <div class=\"PopoverContent\">\n <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n <div style=\"display: flex; flex-direction: column; gap: 10px\">\n <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"width\">Width</label>\n <input class=\"Input\" id=\"width\" value=\"100%\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"height\">Height</label>\n <input class=\"Input\" id=\"height\" value=\"25px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n </fieldset>\n </div>\n <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n </div>\n </ng-template>\n </ng-container>\n </div>\n\n <div class=\"container\">\n <ng-container rdxPopoverRoot>\n <button class=\"IconButton\" rdxPopoverTrigger>\n <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n\n <ng-template [sideOffset]=\"16\" [alignOffset]=\"16\" rdxPopoverContent>\n <div class=\"PopoverContent\">\n <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n <div style=\"display: flex; flex-direction: column; gap: 10px\">\n <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"width\">Width</label>\n <input class=\"Input\" id=\"width\" value=\"100%\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"height\">Height</label>\n <input class=\"Input\" id=\"height\" value=\"25px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n </fieldset>\n </div>\n <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n </div>\n </ng-template>\n </ng-container>\n </div>\n\n <div class=\"container\">\n <ng-container rdxPopoverRoot>\n <button class=\"IconButton\" rdxPopoverTrigger>\n <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n\n <ng-template [sideOffset]=\"60\" [alignOffset]=\"60\" rdxPopoverContent>\n <div class=\"PopoverContent\">\n <button class=\"PopoverClose\" rdxPopoverClose aria-label=\"Close\">\n <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n <div style=\"display: flex; flex-direction: column; gap: 10px\">\n <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"width\">Width</label>\n <input class=\"Input\" id=\"width\" value=\"100%\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n <input class=\"Input\" id=\"maxWidth\" value=\"300px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"height\">Height</label>\n <input class=\"Input\" id=\"height\" value=\"25px\" />\n </fieldset>\n <fieldset class=\"Fieldset\">\n <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n <input class=\"Input\" id=\"maxHeight\" value=\"none\" />\n </fieldset>\n </div>\n <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n </div>\n </ng-template>\n </ng-container>\n </div>\n `\n})\nexport class RdxPopoverMultipleComponent {\n readonly MountainSnowIcon = MountainSnowIcon;\n readonly XIcon = X;\n}\n",
|
13300
13531
|
"assetsDirs": [],
|
13301
13532
|
"styleUrlsData": "",
|
13302
13533
|
"stylesData": "\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n button,\n fieldset,\n input {\n all: unset;\n }\n\n .PopoverContent {\n border-radius: 4px;\n padding: 20px;\n width: 260px;\n background-color: white;\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n }\n\n .PopoverContent:focus {\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n 0 0 0 2px var(--violet-7);\n }\n\n .PopoverContent[data-state='open'][data-side='top'] {\n animation-name: slideDownAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='right'] {\n animation-name: slideLeftAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='bottom'] {\n animation-name: slideUpAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='left'] {\n animation-name: slideRightAndFade;\n }\n\n .PopoverArrow {\n fill: white;\n }\n\n .PopoverClose {\n font-family: inherit;\n border-radius: 100%;\n height: 25px;\n width: 25px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n position: absolute;\n top: 5px;\n right: 5px;\n }\n\n .PopoverClose:hover {\n background-color: var(--violet-4);\n }\n\n .PopoverClose:focus {\n box-shadow: 0 0 0 2px var(--violet-7);\n }\n\n .IconButton {\n font-family: inherit;\n border-radius: 100%;\n height: 35px;\n width: 35px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n background-color: white;\n box-shadow: 0 2px 10px var(--black-a7);\n }\n\n .IconButton:hover {\n background-color: var(--violet-3);\n }\n\n .IconButton:focus {\n box-shadow: 0 0 0 2px black;\n }\n\n .Fieldset {\n display: flex;\n gap: 20px;\n align-items: center;\n }\n\n .Label {\n font-size: 13px;\n color: var(--violet-11);\n width: 75px;\n }\n\n .Input {\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n border-radius: 4px;\n padding: 0 10px;\n font-size: 13px;\n line-height: 1;\n color: var(--violet-11);\n box-shadow: 0 0 0 1px var(--violet-7);\n height: 25px;\n }\n\n .Input:focus {\n box-shadow: 0 0 0 2px var(--violet-8);\n }\n\n .Text {\n margin: 0;\n color: var(--mauve-12);\n font-size: 15px;\n line-height: 19px;\n font-weight: 500;\n }\n\n @keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n \n",
|
@@ -13304,7 +13535,7 @@
|
|
13304
13535
|
},
|
13305
13536
|
{
|
13306
13537
|
"name": "RdxPopoverPositioningComponent",
|
13307
|
-
"id": "component-RdxPopoverPositioningComponent-
|
13538
|
+
"id": "component-RdxPopoverPositioningComponent-d72f8e2425ab204cfb02370235c579615dba1035c7e5bae07c32906714ec483978db4dc95b752db2b97fddd5150eafbae3921a13c7e5307e6c1fc2de72f6a071",
|
13308
13539
|
"file": "popover/stories/popover-positioning.component.ts",
|
13309
13540
|
"encapsulation": [],
|
13310
13541
|
"entryComponents": [],
|
@@ -13314,9 +13545,9 @@
|
|
13314
13545
|
"selector": "rdx-popover-positioning",
|
13315
13546
|
"styleUrls": [],
|
13316
13547
|
"styles": [
|
13317
|
-
"\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n
|
13548
|
+
"\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n .reset {\n all: unset;\n }\n\n .PopoverContent {\n border-radius: 4px;\n padding: 20px;\n width: 260px;\n background-color: white;\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n }\n\n .PopoverContent:focus {\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n 0 0 0 2px var(--violet-7);\n }\n\n .PopoverContent[data-state='open'][data-side='top'] {\n animation-name: slideDownAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='right'] {\n animation-name: slideLeftAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='bottom'] {\n animation-name: slideUpAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='left'] {\n animation-name: slideRightAndFade;\n }\n\n .PopoverArrow {\n fill: white;\n }\n\n .PopoverClose {\n font-family: inherit;\n border-radius: 100%;\n height: 25px;\n width: 25px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n position: absolute;\n top: 5px;\n right: 5px;\n }\n\n .PopoverClose:hover {\n background-color: var(--violet-4);\n }\n\n .PopoverClose:focus {\n box-shadow: 0 0 0 2px var(--violet-7);\n }\n\n .IconButton {\n font-family: inherit;\n border-radius: 100%;\n height: 35px;\n width: 35px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n background-color: white;\n box-shadow: 0 2px 10px var(--black-a7);\n }\n\n .IconButton:hover {\n background-color: var(--violet-3);\n }\n\n .IconButton:focus {\n box-shadow: 0 0 0 2px black;\n }\n\n .Fieldset {\n display: flex;\n gap: 20px;\n align-items: center;\n }\n\n .Label {\n font-size: 13px;\n color: var(--violet-11);\n width: 75px;\n }\n\n .Input {\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n border-radius: 4px;\n padding: 0 10px;\n font-size: 13px;\n line-height: 1;\n color: var(--violet-11);\n box-shadow: 0 0 0 1px var(--violet-7);\n height: 25px;\n }\n\n .Input:focus {\n box-shadow: 0 0 0 2px var(--violet-8);\n }\n\n .Text {\n margin: 0;\n color: var(--mauve-12);\n font-size: 15px;\n line-height: 19px;\n font-weight: 500;\n }\n\n @keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n /* =============== Params layout =============== */\n\n .ParamsContainer {\n display: flex;\n column-gap: 8px;\n color: var(--white-a12);\n margin-bottom: 32px;\n }\n "
|
13318
13549
|
],
|
13319
|
-
"template": "<div class=\"ParamsContainer\">\n Side:\n <select [ngModel]=\"selectedSide()\" (ngModelChange)=\"selectedSide.set($event)\">\n <option [value]=\"sides.Top\">{{ sides.Top }}</option>\n <option [value]=\"sides.Bottom\">{{ sides.Bottom }}</option>\n <option [value]=\"sides.Left\">{{ sides.Left }}</option>\n <option [value]=\"sides.Right\">{{ sides.Right }}</option>\n </select>\n Align:\n <select [ngModel]=\"selectedAlign()\" (ngModelChange)=\"selectedAlign.set($event)\">\n <option [value]=\"aligns.Center\">{{ aligns.Center }}</option>\n <option [value]=\"aligns.Start\">{{ aligns.Start }}</option>\n <option [value]=\"aligns.End\">{{ aligns.End }}</option>\n </select>\n SideOffset:\n <input
|
13550
|
+
"template": "<div class=\"ParamsContainer\">\n Side:\n <select [ngModel]=\"selectedSide()\" (ngModelChange)=\"selectedSide.set($event)\">\n <option [value]=\"sides.Top\">{{ sides.Top }}</option>\n <option [value]=\"sides.Bottom\">{{ sides.Bottom }}</option>\n <option [value]=\"sides.Left\">{{ sides.Left }}</option>\n <option [value]=\"sides.Right\">{{ sides.Right }}</option>\n </select>\n Align:\n <select [ngModel]=\"selectedAlign()\" (ngModelChange)=\"selectedAlign.set($event)\">\n <option [value]=\"aligns.Center\">{{ aligns.Center }}</option>\n <option [value]=\"aligns.Start\">{{ aligns.Start }}</option>\n <option [value]=\"aligns.End\">{{ aligns.End }}</option>\n </select>\n SideOffset:\n <input [ngModel]=\"sideOffset()\" (ngModelChange)=\"sideOffset.set($event)\" type=\"number\" />\n AlignOffset:\n <input [ngModel]=\"alignOffset()\" (ngModelChange)=\"alignOffset.set($event)\" type=\"number\" />\n Alternate positions:\n <input\n [ngModel]=\"disableAlternatePositions()\"\n (ngModelChange)=\"disableAlternatePositions.set($event)\"\n type=\"checkbox\"\n />\n</div>\n\n<div class=\"container\">\n <ng-container rdxPopoverRoot>\n <button class=\"IconButton reset\" rdxPopoverTrigger>\n <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n\n <ng-template\n [sideOffset]=\"sideOffset()\"\n [alignOffset]=\"alignOffset()\"\n [side]=\"selectedSide()\"\n [align]=\"selectedAlign()\"\n [disableAlternatePositions]=\"disableAlternatePositions()\"\n rdxPopoverContent\n >\n <div class=\"PopoverContent\">\n <button class=\"PopoverClose reset\" rdxPopoverClose aria-label=\"Close\">\n <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n <div style=\"display: flex; flex-direction: column; gap: 10px\">\n <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n <fieldset class=\"reset Fieldset\">\n <label class=\"Label\" for=\"width\">Width</label>\n <input class=\"reset Input\" id=\"width\" value=\"100%\" />\n </fieldset>\n <fieldset class=\"reset Fieldset\">\n <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n <input class=\"reset Input\" id=\"maxWidth\" value=\"300px\" />\n </fieldset>\n <fieldset class=\"reset Fieldset\">\n <label class=\"Label\" for=\"height\">Height</label>\n <input class=\"reset Input\" id=\"height\" value=\"25px\" />\n </fieldset>\n <fieldset class=\"reset Fieldset\">\n <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n <input class=\"reset Input\" id=\"maxHeight\" value=\"none\" />\n </fieldset>\n </div>\n <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n </div>\n </ng-template>\n </ng-container>\n</div>\n",
|
13320
13551
|
"templateUrl": [],
|
13321
13552
|
"viewProviders": [],
|
13322
13553
|
"hostDirectives": [],
|
@@ -13332,7 +13563,7 @@
|
|
13332
13563
|
"indexKey": "",
|
13333
13564
|
"optional": false,
|
13334
13565
|
"description": "",
|
13335
|
-
"line":
|
13566
|
+
"line": 281
|
13336
13567
|
},
|
13337
13568
|
{
|
13338
13569
|
"name": "aligns",
|
@@ -13343,7 +13574,7 @@
|
|
13343
13574
|
"indexKey": "",
|
13344
13575
|
"optional": false,
|
13345
13576
|
"description": "",
|
13346
|
-
"line":
|
13577
|
+
"line": 285,
|
13347
13578
|
"modifierKind": [
|
13348
13579
|
148
|
13349
13580
|
]
|
@@ -13357,7 +13588,7 @@
|
|
13357
13588
|
"indexKey": "",
|
13358
13589
|
"optional": false,
|
13359
13590
|
"description": "",
|
13360
|
-
"line":
|
13591
|
+
"line": 282
|
13361
13592
|
},
|
13362
13593
|
{
|
13363
13594
|
"name": "MountainSnowIcon",
|
@@ -13368,7 +13599,7 @@
|
|
13368
13599
|
"indexKey": "",
|
13369
13600
|
"optional": false,
|
13370
13601
|
"description": "",
|
13371
|
-
"line":
|
13602
|
+
"line": 275,
|
13372
13603
|
"modifierKind": [
|
13373
13604
|
148
|
13374
13605
|
]
|
@@ -13382,7 +13613,7 @@
|
|
13382
13613
|
"indexKey": "",
|
13383
13614
|
"optional": false,
|
13384
13615
|
"description": "",
|
13385
|
-
"line":
|
13616
|
+
"line": 279
|
13386
13617
|
},
|
13387
13618
|
{
|
13388
13619
|
"name": "selectedSide",
|
@@ -13393,7 +13624,7 @@
|
|
13393
13624
|
"indexKey": "",
|
13394
13625
|
"optional": false,
|
13395
13626
|
"description": "",
|
13396
|
-
"line":
|
13627
|
+
"line": 278
|
13397
13628
|
},
|
13398
13629
|
{
|
13399
13630
|
"name": "sideOffset",
|
@@ -13404,7 +13635,7 @@
|
|
13404
13635
|
"indexKey": "",
|
13405
13636
|
"optional": false,
|
13406
13637
|
"description": "",
|
13407
|
-
"line":
|
13638
|
+
"line": 280
|
13408
13639
|
},
|
13409
13640
|
{
|
13410
13641
|
"name": "sides",
|
@@ -13415,7 +13646,7 @@
|
|
13415
13646
|
"indexKey": "",
|
13416
13647
|
"optional": false,
|
13417
13648
|
"description": "",
|
13418
|
-
"line":
|
13649
|
+
"line": 284,
|
13419
13650
|
"modifierKind": [
|
13420
13651
|
148
|
13421
13652
|
]
|
@@ -13429,7 +13660,7 @@
|
|
13429
13660
|
"indexKey": "",
|
13430
13661
|
"optional": false,
|
13431
13662
|
"description": "",
|
13432
|
-
"line":
|
13663
|
+
"line": 276,
|
13433
13664
|
"modifierKind": [
|
13434
13665
|
148
|
13435
13666
|
]
|
@@ -13458,10 +13689,10 @@
|
|
13458
13689
|
"description": "",
|
13459
13690
|
"rawdescription": "\n",
|
13460
13691
|
"type": "component",
|
13461
|
-
"sourceCode": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { LucideAngularModule, MountainSnowIcon, X } from 'lucide-angular';\nimport { RdxPopoverModule } from '../index';\nimport { RdxPopoverAlign, RdxPopoverSide } from '../src/popover.types';\n\n@Component({\n selector: 'rdx-popover-positioning',\n standalone: true,\n imports: [\n FormsModule,\n RdxPopoverModule,\n LucideAngularModule\n ],\n styles: `\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n
|
13692
|
+
"sourceCode": "import { Component, signal } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { LucideAngularModule, MountainSnowIcon, X } from 'lucide-angular';\nimport { RdxPopoverModule } from '../index';\nimport { RdxPopoverAlign, RdxPopoverSide } from '../src/popover.types';\n\n@Component({\n selector: 'rdx-popover-positioning',\n standalone: true,\n imports: [\n FormsModule,\n RdxPopoverModule,\n LucideAngularModule\n ],\n styles: `\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n .reset {\n all: unset;\n }\n\n .PopoverContent {\n border-radius: 4px;\n padding: 20px;\n width: 260px;\n background-color: white;\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n }\n\n .PopoverContent:focus {\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n 0 0 0 2px var(--violet-7);\n }\n\n .PopoverContent[data-state='open'][data-side='top'] {\n animation-name: slideDownAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='right'] {\n animation-name: slideLeftAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='bottom'] {\n animation-name: slideUpAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='left'] {\n animation-name: slideRightAndFade;\n }\n\n .PopoverArrow {\n fill: white;\n }\n\n .PopoverClose {\n font-family: inherit;\n border-radius: 100%;\n height: 25px;\n width: 25px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n position: absolute;\n top: 5px;\n right: 5px;\n }\n\n .PopoverClose:hover {\n background-color: var(--violet-4);\n }\n\n .PopoverClose:focus {\n box-shadow: 0 0 0 2px var(--violet-7);\n }\n\n .IconButton {\n font-family: inherit;\n border-radius: 100%;\n height: 35px;\n width: 35px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n background-color: white;\n box-shadow: 0 2px 10px var(--black-a7);\n }\n\n .IconButton:hover {\n background-color: var(--violet-3);\n }\n\n .IconButton:focus {\n box-shadow: 0 0 0 2px black;\n }\n\n .Fieldset {\n display: flex;\n gap: 20px;\n align-items: center;\n }\n\n .Label {\n font-size: 13px;\n color: var(--violet-11);\n width: 75px;\n }\n\n .Input {\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n border-radius: 4px;\n padding: 0 10px;\n font-size: 13px;\n line-height: 1;\n color: var(--violet-11);\n box-shadow: 0 0 0 1px var(--violet-7);\n height: 25px;\n }\n\n .Input:focus {\n box-shadow: 0 0 0 2px var(--violet-8);\n }\n\n .Text {\n margin: 0;\n color: var(--mauve-12);\n font-size: 15px;\n line-height: 19px;\n font-weight: 500;\n }\n\n @keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n /* =============== Params layout =============== */\n\n .ParamsContainer {\n display: flex;\n column-gap: 8px;\n color: var(--white-a12);\n margin-bottom: 32px;\n }\n `,\n template: `\n <div class=\"ParamsContainer\">\n Side:\n <select [ngModel]=\"selectedSide()\" (ngModelChange)=\"selectedSide.set($event)\">\n <option [value]=\"sides.Top\">{{ sides.Top }}</option>\n <option [value]=\"sides.Bottom\">{{ sides.Bottom }}</option>\n <option [value]=\"sides.Left\">{{ sides.Left }}</option>\n <option [value]=\"sides.Right\">{{ sides.Right }}</option>\n </select>\n Align:\n <select [ngModel]=\"selectedAlign()\" (ngModelChange)=\"selectedAlign.set($event)\">\n <option [value]=\"aligns.Center\">{{ aligns.Center }}</option>\n <option [value]=\"aligns.Start\">{{ aligns.Start }}</option>\n <option [value]=\"aligns.End\">{{ aligns.End }}</option>\n </select>\n SideOffset:\n <input [ngModel]=\"sideOffset()\" (ngModelChange)=\"sideOffset.set($event)\" type=\"number\" />\n AlignOffset:\n <input [ngModel]=\"alignOffset()\" (ngModelChange)=\"alignOffset.set($event)\" type=\"number\" />\n Alternate positions:\n <input\n [ngModel]=\"disableAlternatePositions()\"\n (ngModelChange)=\"disableAlternatePositions.set($event)\"\n type=\"checkbox\"\n />\n </div>\n\n <div class=\"container\">\n <ng-container rdxPopoverRoot>\n <button class=\"IconButton reset\" rdxPopoverTrigger>\n <lucide-angular [img]=\"MountainSnowIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n\n <ng-template\n [sideOffset]=\"sideOffset()\"\n [alignOffset]=\"alignOffset()\"\n [side]=\"selectedSide()\"\n [align]=\"selectedAlign()\"\n [disableAlternatePositions]=\"disableAlternatePositions()\"\n rdxPopoverContent\n >\n <div class=\"PopoverContent\">\n <button class=\"PopoverClose reset\" rdxPopoverClose aria-label=\"Close\">\n <lucide-angular [img]=\"XIcon\" size=\"16\" style=\"display: flex\" />\n </button>\n <div style=\"display: flex; flex-direction: column; gap: 10px\">\n <p class=\"Text\" style=\"margin-bottom: 10px\">Dimensions</p>\n <fieldset class=\"reset Fieldset\">\n <label class=\"Label\" for=\"width\">Width</label>\n <input class=\"reset Input\" id=\"width\" value=\"100%\" />\n </fieldset>\n <fieldset class=\"reset Fieldset\">\n <label class=\"Label\" for=\"maxWidth\">Max. width</label>\n <input class=\"reset Input\" id=\"maxWidth\" value=\"300px\" />\n </fieldset>\n <fieldset class=\"reset Fieldset\">\n <label class=\"Label\" for=\"height\">Height</label>\n <input class=\"reset Input\" id=\"height\" value=\"25px\" />\n </fieldset>\n <fieldset class=\"reset Fieldset\">\n <label class=\"Label\" for=\"maxHeight\">Max. height</label>\n <input class=\"reset Input\" id=\"maxHeight\" value=\"none\" />\n </fieldset>\n </div>\n <div class=\"PopoverArrow\" rdxPopoverArrow></div>\n </div>\n </ng-template>\n </ng-container>\n </div>\n `\n})\nexport class RdxPopoverPositioningComponent {\n readonly MountainSnowIcon = MountainSnowIcon;\n readonly XIcon = X;\n\n selectedSide = signal(RdxPopoverSide.Top);\n selectedAlign = signal(RdxPopoverAlign.Center);\n sideOffset = signal(8);\n alignOffset = signal(8);\n disableAlternatePositions = signal(false);\n\n readonly sides = RdxPopoverSide;\n readonly aligns = RdxPopoverAlign;\n}\n",
|
13462
13693
|
"assetsDirs": [],
|
13463
13694
|
"styleUrlsData": "",
|
13464
|
-
"stylesData": "\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n
|
13695
|
+
"stylesData": "\n .container {\n height: 150px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n /* reset */\n .reset {\n all: unset;\n }\n\n .PopoverContent {\n border-radius: 4px;\n padding: 20px;\n width: 260px;\n background-color: white;\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px;\n animation-duration: 400ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n will-change: transform, opacity;\n }\n\n .PopoverContent:focus {\n box-shadow:\n hsl(206 22% 7% / 35%) 0px 10px 38px -10px,\n hsl(206 22% 7% / 20%) 0px 10px 20px -15px,\n 0 0 0 2px var(--violet-7);\n }\n\n .PopoverContent[data-state='open'][data-side='top'] {\n animation-name: slideDownAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='right'] {\n animation-name: slideLeftAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='bottom'] {\n animation-name: slideUpAndFade;\n }\n\n .PopoverContent[data-state='open'][data-side='left'] {\n animation-name: slideRightAndFade;\n }\n\n .PopoverArrow {\n fill: white;\n }\n\n .PopoverClose {\n font-family: inherit;\n border-radius: 100%;\n height: 25px;\n width: 25px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n position: absolute;\n top: 5px;\n right: 5px;\n }\n\n .PopoverClose:hover {\n background-color: var(--violet-4);\n }\n\n .PopoverClose:focus {\n box-shadow: 0 0 0 2px var(--violet-7);\n }\n\n .IconButton {\n font-family: inherit;\n border-radius: 100%;\n height: 35px;\n width: 35px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n color: var(--violet-11);\n background-color: white;\n box-shadow: 0 2px 10px var(--black-a7);\n }\n\n .IconButton:hover {\n background-color: var(--violet-3);\n }\n\n .IconButton:focus {\n box-shadow: 0 0 0 2px black;\n }\n\n .Fieldset {\n display: flex;\n gap: 20px;\n align-items: center;\n }\n\n .Label {\n font-size: 13px;\n color: var(--violet-11);\n width: 75px;\n }\n\n .Input {\n width: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 1;\n border-radius: 4px;\n padding: 0 10px;\n font-size: 13px;\n line-height: 1;\n color: var(--violet-11);\n box-shadow: 0 0 0 1px var(--violet-7);\n height: 25px;\n }\n\n .Input:focus {\n box-shadow: 0 0 0 2px var(--violet-8);\n }\n\n .Text {\n margin: 0;\n color: var(--mauve-12);\n font-size: 15px;\n line-height: 19px;\n font-weight: 500;\n }\n\n @keyframes slideUpAndFade {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideRightAndFade {\n from {\n opacity: 0;\n transform: translateX(-2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n @keyframes slideDownAndFade {\n from {\n opacity: 0;\n transform: translateY(-2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n @keyframes slideLeftAndFade {\n from {\n opacity: 0;\n transform: translateX(2px);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n }\n\n /* =============== Params layout =============== */\n\n .ParamsContainer {\n display: flex;\n column-gap: 8px;\n color: var(--white-a12);\n margin-bottom: 32px;\n }\n \n",
|
13465
13696
|
"extends": []
|
13466
13697
|
},
|
13467
13698
|
{
|
@@ -16665,7 +16896,7 @@
|
|
16665
16896
|
"deprecated": false,
|
16666
16897
|
"deprecationMessage": "",
|
16667
16898
|
"type": "",
|
16668
|
-
"defaultValue": "{\n offsets: {\n side: 10,\n align:
|
16899
|
+
"defaultValue": "{\n offsets: {\n side: 10,\n align: 0\n }\n} as const"
|
16669
16900
|
},
|
16670
16901
|
{
|
16671
16902
|
"name": "defaultTooltipConfig",
|
@@ -16871,7 +17102,7 @@
|
|
16871
17102
|
"name": "nextId",
|
16872
17103
|
"ctype": "miscellaneous",
|
16873
17104
|
"subtype": "variable",
|
16874
|
-
"file": "popover/src/popover-
|
17105
|
+
"file": "popover/src/popover-root.directive.ts",
|
16875
17106
|
"deprecated": false,
|
16876
17107
|
"deprecationMessage": "",
|
16877
17108
|
"type": "number",
|
@@ -20906,7 +21137,7 @@
|
|
20906
21137
|
"deprecated": false,
|
20907
21138
|
"deprecationMessage": "",
|
20908
21139
|
"type": "",
|
20909
|
-
"defaultValue": "{\n offsets: {\n side: 10,\n align:
|
21140
|
+
"defaultValue": "{\n offsets: {\n side: 10,\n align: 0\n }\n} as const"
|
20910
21141
|
},
|
20911
21142
|
{
|
20912
21143
|
"name": "POPOVER_POSITIONS",
|
@@ -21187,12 +21418,12 @@
|
|
21187
21418
|
"description": "<p>Counter used to set a unique id and name for a selectable item</p>\n"
|
21188
21419
|
}
|
21189
21420
|
],
|
21190
|
-
"popover/src/popover-
|
21421
|
+
"popover/src/popover-root.directive.ts": [
|
21191
21422
|
{
|
21192
21423
|
"name": "nextId",
|
21193
21424
|
"ctype": "miscellaneous",
|
21194
21425
|
"subtype": "variable",
|
21195
|
-
"file": "popover/src/popover-
|
21426
|
+
"file": "popover/src/popover-root.directive.ts",
|
21196
21427
|
"deprecated": false,
|
21197
21428
|
"deprecationMessage": "",
|
21198
21429
|
"type": "number",
|