@rt-tools/ui-kit-v2 0.23.4 → 0.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/rt-tools-ui-kit-v2-bottom-sheet.mjs +2 -2
- package/fesm2022/rt-tools-ui-kit-v2-bottom-sheet.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-core.mjs +12 -0
- package/fesm2022/rt-tools-ui-kit-v2-core.mjs.map +1 -1
- package/fesm2022/rt-tools-ui-kit-v2-profile-menu.mjs +295 -0
- package/fesm2022/rt-tools-ui-kit-v2-profile-menu.mjs.map +1 -0
- package/package.json +5 -1
- package/src/lib/components/bottom-sheet/rt-bottom-sheet.component.scss +2 -1
- package/src/lib/components/profile-menu/CONTEXT.md +32 -0
- package/src/lib/components/profile-menu/rt-profile-menu.component.scss +104 -0
- package/src/styles/_semantic.scss +5 -0
- package/styles/tokens.css +40 -0
- package/types/rt-tools-ui-kit-v2-core.d.ts +8 -2
- package/types/rt-tools-ui-kit-v2-profile-menu.d.ts +103 -0
|
@@ -89,7 +89,7 @@ var RtBottomSheetComponent = class RtBottomSheetComponent {
|
|
|
89
89
|
}],
|
|
90
90
|
ngImport: i0,
|
|
91
91
|
template: "<ng-container rtBlock=\"rt-bottom-sheet\">\n <button\n type=\"button\"\n rtElem=\"backdrop\"\n qa-dataid=\"bottom-sheet-backdrop\"\n [attr.aria-label]=\"t().bottomSheetClose\"\n (click)=\"dismiss()\"></button>\n <div\n rtElem=\"panel\"\n qa-dataid=\"bottom-sheet-panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n [rtMod]=\"{ dragging: dragging() }\"\n [style.transform]=\"dragging() ? 'translateY(' + dragDeltaY() + 'px)' : null\">\n <div rtElem=\"handle\" qa-dataid=\"bottom-sheet-handle\" (pointerdown)=\"onDragStart($event)\"></div>\n <div rtElem=\"header\" qa-dataid=\"bottom-sheet-header\">\n <ng-content select=\"[sheetHeader]\" />\n </div>\n <div rtElem=\"body\" qa-dataid=\"bottom-sheet-body\">\n <ng-content />\n </div>\n <div rtElem=\"footer\" qa-dataid=\"bottom-sheet-footer\">\n <ng-content select=\"[sheetFooter]\" />\n </div>\n </div>\n</ng-container>\n",
|
|
92
|
-
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-bottom-sheet{--rt-bottom-sheet-radius: var(--rt-radius-2xl);--rt-bottom-sheet-handle-radius: var(--rt-radius-xs);--rt-bottom-sheet-shadow: var(--rt-shadow-card-soft);--rt-bottom-sheet-transition-duration: var(--rt-duration-base);position:fixed;z-index:1000;inset:0;pointer-events:none}.rt-bottom-sheet__backdrop{position:absolute;padding:0;border:none;background:var(--rt-overlay-black-50);cursor:pointer;inset:0;opacity:0;transition:opacity var(--rt-bottom-sheet-transition-duration) ease}.rt-bottom-sheet__panel{position:absolute;right:0;bottom:0;left:0;display:flex;max-height:var(--rt-bottom-sheet-max-height, 80vh);flex-direction:column;border-radius:var(--rt-bottom-sheet-radius) var(--rt-bottom-sheet-radius) 0 0;background:var(--rt-color-bg-surface);box-shadow:var(--rt-bottom-sheet-shadow);transform:translateY(100%);transition:transform var(--rt-bottom-sheet-transition-duration) ease}.rt-bottom-sheet__panel--dragging{transition:none}.rt-bottom-sheet__handle{width:40px;height:4px;align-self:center;border-radius:var(--rt-bottom-sheet-handle-radius);margin:var(--rt-space-4) 0;background:var(--rt-color-border-default);cursor:grab;touch-action:none}.rt-bottom-sheet__header{display:flex;justify-content:center;padding:0 var(--rt-space-5) var(--rt-space-4);color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold)}.rt-bottom-sheet__body{display:flex;min-width:0;min-height:0;flex:1 1 auto;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}.rt-bottom-sheet__footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;padding:var(--rt-space-4) var(--rt-space-5) calc(var(--rt-space-4) + env(safe-area-inset-bottom));border-top:var(--rt-border-width
|
|
92
|
+
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-bottom-sheet{--rt-bottom-sheet-radius: var(--rt-radius-2xl);--rt-bottom-sheet-handle-radius: var(--rt-radius-xs);--rt-bottom-sheet-shadow: var(--rt-shadow-card-soft);--rt-bottom-sheet-transition-duration: var(--rt-duration-base);--rt-bottom-sheet-footer-border-width: var(--rt-border-width-thin);position:fixed;z-index:1000;inset:0;pointer-events:none}.rt-bottom-sheet__backdrop{position:absolute;padding:0;border:none;background:var(--rt-overlay-black-50);cursor:pointer;inset:0;opacity:0;transition:opacity var(--rt-bottom-sheet-transition-duration) ease}.rt-bottom-sheet__panel{position:absolute;right:0;bottom:0;left:0;display:flex;max-height:var(--rt-bottom-sheet-max-height, 80vh);flex-direction:column;border-radius:var(--rt-bottom-sheet-radius) var(--rt-bottom-sheet-radius) 0 0;background:var(--rt-color-bg-surface);box-shadow:var(--rt-bottom-sheet-shadow);transform:translateY(100%);transition:transform var(--rt-bottom-sheet-transition-duration) ease}.rt-bottom-sheet__panel--dragging{transition:none}.rt-bottom-sheet__handle{width:40px;height:4px;align-self:center;border-radius:var(--rt-bottom-sheet-handle-radius);margin:var(--rt-space-4) 0;background:var(--rt-color-border-default);cursor:grab;touch-action:none}.rt-bottom-sheet__header{display:flex;justify-content:center;padding:0 var(--rt-space-5) var(--rt-space-4);color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold)}.rt-bottom-sheet__body{display:flex;min-width:0;min-height:0;flex:1 1 auto;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}.rt-bottom-sheet__footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;padding:var(--rt-space-4) var(--rt-space-5) calc(var(--rt-space-4) + env(safe-area-inset-bottom));border-top:var(--rt-bottom-sheet-footer-border-width) solid var(--rt-color-border-default);gap:var(--rt-space-2)}.rt-bottom-sheet__footer:empty{display:none}.rt-bottom-sheet--open{pointer-events:auto}.rt-bottom-sheet--open .rt-bottom-sheet__backdrop{opacity:1}.rt-bottom-sheet--open .rt-bottom-sheet__panel{transform:translateY(0)}.rt-bottom-sheet[data-rt-radius=none]{--rt-bottom-sheet-radius: var(--rt-radius-none)}.rt-bottom-sheet[data-rt-radius=xs]{--rt-bottom-sheet-radius: var(--rt-radius-xs)}.rt-bottom-sheet[data-rt-radius=sm]{--rt-bottom-sheet-radius: var(--rt-radius-sm)}.rt-bottom-sheet[data-rt-radius=ms]{--rt-bottom-sheet-radius: var(--rt-radius-ms)}.rt-bottom-sheet[data-rt-radius=md]{--rt-bottom-sheet-radius: var(--rt-radius-md)}.rt-bottom-sheet[data-rt-radius=lg]{--rt-bottom-sheet-radius: var(--rt-radius-lg)}.rt-bottom-sheet[data-rt-radius=xl]{--rt-bottom-sheet-radius: var(--rt-radius-xl)}.rt-bottom-sheet[data-rt-radius=\"2xl\"]{--rt-bottom-sheet-radius: var(--rt-radius-2xl)}.rt-bottom-sheet[data-rt-radius=full]{--rt-bottom-sheet-radius: var(--rt-radius-full)}}\n"],
|
|
93
93
|
dependencies: [
|
|
94
94
|
{
|
|
95
95
|
kind: "directive",
|
|
@@ -140,7 +140,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
140
140
|
"[attr.inert]": "open() ? null : \"\""
|
|
141
141
|
},
|
|
142
142
|
template: "<ng-container rtBlock=\"rt-bottom-sheet\">\n <button\n type=\"button\"\n rtElem=\"backdrop\"\n qa-dataid=\"bottom-sheet-backdrop\"\n [attr.aria-label]=\"t().bottomSheetClose\"\n (click)=\"dismiss()\"></button>\n <div\n rtElem=\"panel\"\n qa-dataid=\"bottom-sheet-panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n [rtMod]=\"{ dragging: dragging() }\"\n [style.transform]=\"dragging() ? 'translateY(' + dragDeltaY() + 'px)' : null\">\n <div rtElem=\"handle\" qa-dataid=\"bottom-sheet-handle\" (pointerdown)=\"onDragStart($event)\"></div>\n <div rtElem=\"header\" qa-dataid=\"bottom-sheet-header\">\n <ng-content select=\"[sheetHeader]\" />\n </div>\n <div rtElem=\"body\" qa-dataid=\"bottom-sheet-body\">\n <ng-content />\n </div>\n <div rtElem=\"footer\" qa-dataid=\"bottom-sheet-footer\">\n <ng-content select=\"[sheetFooter]\" />\n </div>\n </div>\n</ng-container>\n",
|
|
143
|
-
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-bottom-sheet{--rt-bottom-sheet-radius: var(--rt-radius-2xl);--rt-bottom-sheet-handle-radius: var(--rt-radius-xs);--rt-bottom-sheet-shadow: var(--rt-shadow-card-soft);--rt-bottom-sheet-transition-duration: var(--rt-duration-base);position:fixed;z-index:1000;inset:0;pointer-events:none}.rt-bottom-sheet__backdrop{position:absolute;padding:0;border:none;background:var(--rt-overlay-black-50);cursor:pointer;inset:0;opacity:0;transition:opacity var(--rt-bottom-sheet-transition-duration) ease}.rt-bottom-sheet__panel{position:absolute;right:0;bottom:0;left:0;display:flex;max-height:var(--rt-bottom-sheet-max-height, 80vh);flex-direction:column;border-radius:var(--rt-bottom-sheet-radius) var(--rt-bottom-sheet-radius) 0 0;background:var(--rt-color-bg-surface);box-shadow:var(--rt-bottom-sheet-shadow);transform:translateY(100%);transition:transform var(--rt-bottom-sheet-transition-duration) ease}.rt-bottom-sheet__panel--dragging{transition:none}.rt-bottom-sheet__handle{width:40px;height:4px;align-self:center;border-radius:var(--rt-bottom-sheet-handle-radius);margin:var(--rt-space-4) 0;background:var(--rt-color-border-default);cursor:grab;touch-action:none}.rt-bottom-sheet__header{display:flex;justify-content:center;padding:0 var(--rt-space-5) var(--rt-space-4);color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold)}.rt-bottom-sheet__body{display:flex;min-width:0;min-height:0;flex:1 1 auto;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}.rt-bottom-sheet__footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;padding:var(--rt-space-4) var(--rt-space-5) calc(var(--rt-space-4) + env(safe-area-inset-bottom));border-top:var(--rt-border-width
|
|
143
|
+
styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-bottom-sheet{--rt-bottom-sheet-radius: var(--rt-radius-2xl);--rt-bottom-sheet-handle-radius: var(--rt-radius-xs);--rt-bottom-sheet-shadow: var(--rt-shadow-card-soft);--rt-bottom-sheet-transition-duration: var(--rt-duration-base);--rt-bottom-sheet-footer-border-width: var(--rt-border-width-thin);position:fixed;z-index:1000;inset:0;pointer-events:none}.rt-bottom-sheet__backdrop{position:absolute;padding:0;border:none;background:var(--rt-overlay-black-50);cursor:pointer;inset:0;opacity:0;transition:opacity var(--rt-bottom-sheet-transition-duration) ease}.rt-bottom-sheet__panel{position:absolute;right:0;bottom:0;left:0;display:flex;max-height:var(--rt-bottom-sheet-max-height, 80vh);flex-direction:column;border-radius:var(--rt-bottom-sheet-radius) var(--rt-bottom-sheet-radius) 0 0;background:var(--rt-color-bg-surface);box-shadow:var(--rt-bottom-sheet-shadow);transform:translateY(100%);transition:transform var(--rt-bottom-sheet-transition-duration) ease}.rt-bottom-sheet__panel--dragging{transition:none}.rt-bottom-sheet__handle{width:40px;height:4px;align-self:center;border-radius:var(--rt-bottom-sheet-handle-radius);margin:var(--rt-space-4) 0;background:var(--rt-color-border-default);cursor:grab;touch-action:none}.rt-bottom-sheet__header{display:flex;justify-content:center;padding:0 var(--rt-space-5) var(--rt-space-4);color:var(--rt-color-text-primary);font-weight:var(--rt-font-weight-semibold)}.rt-bottom-sheet__body{display:flex;min-width:0;min-height:0;flex:1 1 auto;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}.rt-bottom-sheet__footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;padding:var(--rt-space-4) var(--rt-space-5) calc(var(--rt-space-4) + env(safe-area-inset-bottom));border-top:var(--rt-bottom-sheet-footer-border-width) solid var(--rt-color-border-default);gap:var(--rt-space-2)}.rt-bottom-sheet__footer:empty{display:none}.rt-bottom-sheet--open{pointer-events:auto}.rt-bottom-sheet--open .rt-bottom-sheet__backdrop{opacity:1}.rt-bottom-sheet--open .rt-bottom-sheet__panel{transform:translateY(0)}.rt-bottom-sheet[data-rt-radius=none]{--rt-bottom-sheet-radius: var(--rt-radius-none)}.rt-bottom-sheet[data-rt-radius=xs]{--rt-bottom-sheet-radius: var(--rt-radius-xs)}.rt-bottom-sheet[data-rt-radius=sm]{--rt-bottom-sheet-radius: var(--rt-radius-sm)}.rt-bottom-sheet[data-rt-radius=ms]{--rt-bottom-sheet-radius: var(--rt-radius-ms)}.rt-bottom-sheet[data-rt-radius=md]{--rt-bottom-sheet-radius: var(--rt-radius-md)}.rt-bottom-sheet[data-rt-radius=lg]{--rt-bottom-sheet-radius: var(--rt-radius-lg)}.rt-bottom-sheet[data-rt-radius=xl]{--rt-bottom-sheet-radius: var(--rt-radius-xl)}.rt-bottom-sheet[data-rt-radius=\"2xl\"]{--rt-bottom-sheet-radius: var(--rt-radius-2xl)}.rt-bottom-sheet[data-rt-radius=full]{--rt-bottom-sheet-radius: var(--rt-radius-full)}}\n"]
|
|
144
144
|
}]
|
|
145
145
|
}],
|
|
146
146
|
propDecorators: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rt-tools-ui-kit-v2-bottom-sheet.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/bottom-sheet/rt-bottom-sheet.logic.ts","../../../projects/ui-kit-v2/src/lib/components/bottom-sheet/rt-bottom-sheet.component.ts","../../../projects/ui-kit-v2/src/lib/components/bottom-sheet/rt-bottom-sheet.component.html"],"sourcesContent":["export const DRAG_DISMISS_THRESHOLD_PX: number = 80;\n\nexport function clampDragDelta(deltaY: number): number {\n return Math.max(0, deltaY);\n}\n\nexport function shouldDismissDrag(deltaY: number): boolean {\n return deltaY > DRAG_DISMISS_THRESHOLD_PX;\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { DOCUMENT } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n inject,\n input,\n InputSignalWithTransform,\n output,\n OutputEmitterRef,\n signal,\n Signal,\n ViewEncapsulation,\n WritableSignal,\n} from '@angular/core';\n\n// rt-tools\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap } from '@rt-tools/ui-kit-v2/core';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { clampDragDelta, shouldDismissDrag } from './rt-bottom-sheet.logic';\n\nconst BEM_BLOCK: string = 'rt-bottom-sheet';\n\n@Component({\n selector: 'rt-bottom-sheet',\n templateUrl: './rt-bottom-sheet.component.html',\n styleUrl: './rt-bottom-sheet.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [\n // rt-tools\n BlockDirective,\n ElemDirective,\n ModDirective,\n\n // transloco\n ],\n hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n host: {\n class: BEM_BLOCK,\n '[class.rt-bottom-sheet--open]': 'open()',\n // Закрытый лист остаётся в разметке ради анимации, и спрятан он только\n // стилями — а `opacity`/`pointer-events` не убирают узел ни из порядка\n // табуляции, ни из дерева доступности. Без `inert` страница с закрытым\n // листом держала бы в табуляции невидимую кнопку «Закрыть», а\n // скринридер объявлял бы модальный диалог, которого не видно.\n '[attr.inert]': 'open() ? null : \"\"',\n },\n})\nexport class RtBottomSheetComponent {\n readonly #document: Document = inject(DOCUMENT);\n readonly #onDragMove: (event: PointerEvent) => void = (event: PointerEvent): void => this.#handleDragMove(event);\n readonly #onDragEnd: () => void = (): void => this.#handleDragEnd();\n\n #dragStartY: number = 0;\n\n protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n protected readonly dragDeltaY: WritableSignal<number> = signal<number>(0);\n protected readonly dragging: WritableSignal<boolean> = signal<boolean>(false);\n\n public readonly open: InputSignalWithTransform<boolean, BooleanInput> = input.required<boolean, BooleanInput>({\n transform: booleanAttribute,\n });\n public readonly openChange: OutputEmitterRef<boolean> = output<boolean>();\n\n protected onDragStart(event: PointerEvent): void {\n this.#dragStartY = event.clientY;\n this.dragging.set(true);\n this.dragDeltaY.set(0);\n this.#document.addEventListener('pointermove', this.#onDragMove);\n this.#document.addEventListener('pointerup', this.#onDragEnd);\n }\n\n protected dismiss(): void {\n this.openChange.emit(false);\n }\n\n #handleDragMove(event: PointerEvent): void {\n this.dragDeltaY.set(clampDragDelta(event.clientY - this.#dragStartY));\n }\n\n #handleDragEnd(): void {\n this.dragging.set(false);\n this.#document.removeEventListener('pointermove', this.#onDragMove);\n this.#document.removeEventListener('pointerup', this.#onDragEnd);\n if (shouldDismissDrag(this.dragDeltaY())) {\n this.openChange.emit(false);\n }\n this.dragDeltaY.set(0);\n }\n}\n","<ng-container rtBlock=\"rt-bottom-sheet\">\n <button\n type=\"button\"\n rtElem=\"backdrop\"\n qa-dataid=\"bottom-sheet-backdrop\"\n [attr.aria-label]=\"t().bottomSheetClose\"\n (click)=\"dismiss()\"></button>\n <div\n rtElem=\"panel\"\n qa-dataid=\"bottom-sheet-panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n [rtMod]=\"{ dragging: dragging() }\"\n [style.transform]=\"dragging() ? 'translateY(' + dragDeltaY() + 'px)' : null\">\n <div rtElem=\"handle\" qa-dataid=\"bottom-sheet-handle\" (pointerdown)=\"onDragStart($event)\"></div>\n <div rtElem=\"header\" qa-dataid=\"bottom-sheet-header\">\n <ng-content select=\"[sheetHeader]\" />\n </div>\n <div rtElem=\"body\" qa-dataid=\"bottom-sheet-body\">\n <ng-content />\n </div>\n <div rtElem=\"footer\" qa-dataid=\"bottom-sheet-footer\">\n <ng-content select=\"[sheetFooter]\" />\n </div>\n </div>\n</ng-container>\n"],"mappings":";;;;;;;AAEA,SAAgB,eAAe,QAAc;CACzC,OAAO,KAAK,IAAI,GAAG,MAAM;AAC7B;AAEA,SAAgB,kBAAkB,QAAc;CAC5C,OAAO,SAAA;AACX;ACgBA,MAAM,YAAoB;AA4B1B,IAAa,yBAAb,MAAa,uBAAsB;CA1BnC,cAAA;EA2Ba,KAAA,YAAsB,OAAO,QAAQ;EACrC,KAAA,eAA8C,UAA8B,KAAK,gBAAgB,KAAK;EACtG,KAAA,mBAAqC,KAAK,eAAc;EAEjE,KAAA,cAAsB;EAEH,KAAA,IAA4B,OAAO,aAAa;EAEhD,KAAA,aAAqC,OAAe,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;EACtD,KAAA,WAAoC,OAAgB,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;EAE7D,KAAA,OAAwD,MAAM,SAAQ;GAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;GAClF,WAAW;EAAgB,CAAA;EAEf,KAAA,aAAwC,OAAM;CA2BjE;CAzCY;CACA;CACA;CAET;CAYU,YAAY,OAAmB;EACrC,KAAK,cAAc,MAAM;EACzB,KAAK,SAAS,IAAI,IAAI;EACtB,KAAK,WAAW,IAAI,CAAC;EACrB,KAAK,UAAU,iBAAiB,eAAe,KAAK,WAAW;EAC/D,KAAK,UAAU,iBAAiB,aAAa,KAAK,UAAU;CAChE;CAEU,UAAO;EACb,KAAK,WAAW,KAAK,KAAK;CAC9B;CAEA,gBAAgB,OAAmB;EAC/B,KAAK,WAAW,IAAI,eAAe,MAAM,UAAU,KAAK,WAAW,CAAC;CACxE;CAEA,iBAAc;EACV,KAAK,SAAS,IAAI,KAAK;EACvB,KAAK,UAAU,oBAAoB,eAAe,KAAK,WAAW;EAClE,KAAK,UAAU,oBAAoB,aAAa,KAAK,UAAU;EAC/D,IAAI,kBAAkB,KAAK,WAAU,CAAE,GACnC,KAAK,WAAW,KAAK,KAAK;EAE9B,KAAK,WAAW,IAAI,CAAC;CACzB;CAzCS;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAsB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAtB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAsB,cAAA;GAAA,UAAA;GAAA,QAAA,EAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA,EAAA;GAAA,SAAA,EAAA,YAAA,aAAA;GAAA,MAAA;IAAA,YAAA;KAAA,+BAAA;KAAA,cAAA;IAAA;IAAA,gBAAA;GAAA;GAAA,gBAAA,CAAA;IAAA,WAAA,GAAA;IAAA,QAAA,CAAA,UAAA,QAAA;GAAA,CAAA;GAAA,UAAA;GAAA,UCpDnC;GA0BA,QAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"rt-tools-ui-kit-v2-bottom-sheet.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/bottom-sheet/rt-bottom-sheet.logic.ts","../../../projects/ui-kit-v2/src/lib/components/bottom-sheet/rt-bottom-sheet.component.ts","../../../projects/ui-kit-v2/src/lib/components/bottom-sheet/rt-bottom-sheet.component.html"],"sourcesContent":["export const DRAG_DISMISS_THRESHOLD_PX: number = 80;\n\nexport function clampDragDelta(deltaY: number): number {\n return Math.max(0, deltaY);\n}\n\nexport function shouldDismissDrag(deltaY: number): boolean {\n return deltaY > DRAG_DISMISS_THRESHOLD_PX;\n}\n","import { BooleanInput } from '@angular/cdk/coercion';\nimport { DOCUMENT } from '@angular/common';\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n inject,\n input,\n InputSignalWithTransform,\n output,\n OutputEmitterRef,\n signal,\n Signal,\n ViewEncapsulation,\n WritableSignal,\n} from '@angular/core';\n\n// rt-tools\nimport { BlockDirective, ElemDirective, ModDirective } from '@rt-tools/core';\n\nimport { RT_KIT_LABELS, TRtKitLabelMap } from '@rt-tools/ui-kit-v2/core';\nimport { RtRadiusDirective } from '@rt-tools/ui-kit-v2/radius';\nimport { clampDragDelta, shouldDismissDrag } from './rt-bottom-sheet.logic';\n\nconst BEM_BLOCK: string = 'rt-bottom-sheet';\n\n@Component({\n selector: 'rt-bottom-sheet',\n templateUrl: './rt-bottom-sheet.component.html',\n styleUrl: './rt-bottom-sheet.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n imports: [\n // rt-tools\n BlockDirective,\n ElemDirective,\n ModDirective,\n\n // transloco\n ],\n hostDirectives: [{ directive: RtRadiusDirective, inputs: ['radius'] }],\n host: {\n class: BEM_BLOCK,\n '[class.rt-bottom-sheet--open]': 'open()',\n // Закрытый лист остаётся в разметке ради анимации, и спрятан он только\n // стилями — а `opacity`/`pointer-events` не убирают узел ни из порядка\n // табуляции, ни из дерева доступности. Без `inert` страница с закрытым\n // листом держала бы в табуляции невидимую кнопку «Закрыть», а\n // скринридер объявлял бы модальный диалог, которого не видно.\n '[attr.inert]': 'open() ? null : \"\"',\n },\n})\nexport class RtBottomSheetComponent {\n readonly #document: Document = inject(DOCUMENT);\n readonly #onDragMove: (event: PointerEvent) => void = (event: PointerEvent): void => this.#handleDragMove(event);\n readonly #onDragEnd: () => void = (): void => this.#handleDragEnd();\n\n #dragStartY: number = 0;\n\n protected readonly t: Signal<TRtKitLabelMap> = inject(RT_KIT_LABELS);\n\n protected readonly dragDeltaY: WritableSignal<number> = signal<number>(0);\n protected readonly dragging: WritableSignal<boolean> = signal<boolean>(false);\n\n public readonly open: InputSignalWithTransform<boolean, BooleanInput> = input.required<boolean, BooleanInput>({\n transform: booleanAttribute,\n });\n public readonly openChange: OutputEmitterRef<boolean> = output<boolean>();\n\n protected onDragStart(event: PointerEvent): void {\n this.#dragStartY = event.clientY;\n this.dragging.set(true);\n this.dragDeltaY.set(0);\n this.#document.addEventListener('pointermove', this.#onDragMove);\n this.#document.addEventListener('pointerup', this.#onDragEnd);\n }\n\n protected dismiss(): void {\n this.openChange.emit(false);\n }\n\n #handleDragMove(event: PointerEvent): void {\n this.dragDeltaY.set(clampDragDelta(event.clientY - this.#dragStartY));\n }\n\n #handleDragEnd(): void {\n this.dragging.set(false);\n this.#document.removeEventListener('pointermove', this.#onDragMove);\n this.#document.removeEventListener('pointerup', this.#onDragEnd);\n if (shouldDismissDrag(this.dragDeltaY())) {\n this.openChange.emit(false);\n }\n this.dragDeltaY.set(0);\n }\n}\n","<ng-container rtBlock=\"rt-bottom-sheet\">\n <button\n type=\"button\"\n rtElem=\"backdrop\"\n qa-dataid=\"bottom-sheet-backdrop\"\n [attr.aria-label]=\"t().bottomSheetClose\"\n (click)=\"dismiss()\"></button>\n <div\n rtElem=\"panel\"\n qa-dataid=\"bottom-sheet-panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n [rtMod]=\"{ dragging: dragging() }\"\n [style.transform]=\"dragging() ? 'translateY(' + dragDeltaY() + 'px)' : null\">\n <div rtElem=\"handle\" qa-dataid=\"bottom-sheet-handle\" (pointerdown)=\"onDragStart($event)\"></div>\n <div rtElem=\"header\" qa-dataid=\"bottom-sheet-header\">\n <ng-content select=\"[sheetHeader]\" />\n </div>\n <div rtElem=\"body\" qa-dataid=\"bottom-sheet-body\">\n <ng-content />\n </div>\n <div rtElem=\"footer\" qa-dataid=\"bottom-sheet-footer\">\n <ng-content select=\"[sheetFooter]\" />\n </div>\n </div>\n</ng-container>\n"],"mappings":"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"}
|
|
@@ -129,6 +129,12 @@ const RT_KIT_LABELS_EN = {
|
|
|
129
129
|
photoViewerClose: "Close viewer",
|
|
130
130
|
photoViewerNext: "Next photo",
|
|
131
131
|
photoViewerPrev: "Previous photo",
|
|
132
|
+
profileMenuChangeOrganization: "Change organization",
|
|
133
|
+
profileMenuChangeOrganizationDenied: "The organization comes from the membership: there is nothing to choose.",
|
|
134
|
+
profileMenuChangePassword: "Change password",
|
|
135
|
+
profileMenuOrganization: "— organization",
|
|
136
|
+
profileMenuSignOut: "Sign out",
|
|
137
|
+
profileMenuSwitchTheme: "Switch theme",
|
|
132
138
|
sideMenuBack: "Main menu",
|
|
133
139
|
sideMenuFavoriteAdd: "Add to favourites",
|
|
134
140
|
sideMenuFavoriteDrag: "Hold button to drag",
|
|
@@ -1278,18 +1284,23 @@ const RT_DESIGN_TOKEN_NAMES = [
|
|
|
1278
1284
|
"--rt-pagination-per-page-gap",
|
|
1279
1285
|
"--rt-pagination-per-page-label-white-space",
|
|
1280
1286
|
"--rt-pagination-range-display",
|
|
1287
|
+
"--rt-profile-avatar-border-width",
|
|
1281
1288
|
"--rt-profile-avatar-font-size",
|
|
1289
|
+
"--rt-profile-avatar-radius",
|
|
1282
1290
|
"--rt-profile-avatar-size",
|
|
1283
1291
|
"--rt-profile-item-content-gap",
|
|
1284
1292
|
"--rt-profile-item-font-size",
|
|
1285
1293
|
"--rt-profile-item-font-weight",
|
|
1286
1294
|
"--rt-profile-item-padding-y",
|
|
1287
1295
|
"--rt-profile-item-radius",
|
|
1296
|
+
"--rt-profile-menu-border-width",
|
|
1288
1297
|
"--rt-profile-menu-min-width",
|
|
1289
1298
|
"--rt-profile-menu-padding",
|
|
1299
|
+
"--rt-profile-menu-radius",
|
|
1290
1300
|
"--rt-profile-menu-shadow",
|
|
1291
1301
|
"--rt-profile-row-inset",
|
|
1292
1302
|
"--rt-profile-theme-icon-padding",
|
|
1303
|
+
"--rt-profile-theme-icon-radius",
|
|
1293
1304
|
"--rt-radius-2xl",
|
|
1294
1305
|
"--rt-radius-control",
|
|
1295
1306
|
"--rt-radius-full",
|
|
@@ -1448,6 +1459,7 @@ const RT_CONSUMER_HANDLE_NAMES = [
|
|
|
1448
1459
|
"--rt-aside-header-title-size",
|
|
1449
1460
|
"--rt-aside-header-title-weight",
|
|
1450
1461
|
"--rt-aside-width",
|
|
1462
|
+
"--rt-bottom-sheet-max-height",
|
|
1451
1463
|
"--rt-data-table-scrollbar-color",
|
|
1452
1464
|
"--rt-data-table-scrollbar-horizontal-height",
|
|
1453
1465
|
"--rt-data-table-scrollbar-vertical-width",
|