@mk-kit/ui 0.34.1 → 0.35.0

package/README.md

@@ -9,7 +9,7 @@ Angular 22 with signals and `OnPush` from day one. Every visual value is a
 is the target, not the marketing. MIT licensed. Zero runtime dependencies
 beyond Angular.
 
-- **Docs & live demos:** <https://github.com/mk-kit/mk-kit> (site: mk-kit.dev — coming soon)
+- **Docs & live demos:** <https://mk-kit.dev>
 - **Changelog:** [CHANGELOG.md](https://github.com/mk-kit/mk-kit/blob/main/CHANGELOG.md)
 - **Issues:** <https://github.com/mk-kit/mk-kit/issues>
 

package/fesm2022/mk-kit-ui-core.mjs

@@ -678,7 +678,7 @@ function sideOf(placement) {
         return 'top';
     if (placement.startsWith('bottom'))
         return 'bottom';
-    return placement;
+    return placement.startsWith('left') ? 'left' : 'right';
 }
 function alignOf(placement) {
     if (placement.endsWith('-start'))
@@ -740,8 +740,14 @@ function mkComputeAnchoredPosition(anchor, panel, viewport, opts) {
             left = anchor.left + anchor.width / 2 - w / 2;
     }
     else {
-        // Left/right: centre on the cross (vertical) axis.
-        top = anchor.top + anchor.height / 2 - h / 2;
+        // Left/right: the cross axis is vertical. `-start` tops the panel with the
+        // anchor (a submenu beside its item), `-end` bottoms it, else centre.
+        if (align === 'start')
+            top = anchor.top;
+        else if (align === 'end')
+            top = anchor.bottom - h;
+        else
+            top = anchor.top + anchor.height / 2 - h / 2;
     }
     if (clamp) {
         left = Math.max(gap, Math.min(left, vw - w - gap));
@@ -793,6 +799,13 @@ class MkAnchoredPanel {
     /** Clamp the panel inside the viewport. */
     clamp = input(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "clamp" }] : /* istanbul ignore next */ []));
+    /**
+     * Predicate consulted before an outside pointerdown dismisses the panel.
+     * Return `true` for targets that must keep it open — e.g. a nested panel
+     * (a submenu) that lives in the top layer outside this element.
+     */
+    keepOpenWhen = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "keepOpenWhen" }] : /* istanbul ignore next */ []));
     /** Emitted on an outside pointerdown or when the window loses focus. */
     dismiss = output();
     popover = false;
@@ -828,6 +841,8 @@ class MkAnchoredPanel {
         const anchorEl = this.resolveAnchorEl();
         if (anchorEl?.contains(target))
             return;
+        if (this.keepOpenWhen()?.(target))
+            return;
         this.dismiss.emit();
     };
     onWindowBlur = () => this.dismiss.emit();
@@ -1022,7 +1037,7 @@ class MkAnchoredPanel {
         el.remove();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAnchoredPanel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkAnchoredPanel, isStandalone: true, selector: "[mkAnchoredPanel]", inputs: { anchor: { classPropertyName: "anchor", publicName: "mkAnchoredPanelFor", isSignal: true, isRequired: false, transformFunction: null }, anchorRect: { classPropertyName: "anchorRect", publicName: "anchorRect", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, matchWidth: { classPropertyName: "matchWidth", publicName: "matchWidth", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, clamp: { classPropertyName: "clamp", publicName: "clamp", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, exportAs: ["mkAnchoredPanel"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MkAnchoredPanel, isStandalone: true, selector: "[mkAnchoredPanel]", inputs: { anchor: { classPropertyName: "anchor", publicName: "mkAnchoredPanelFor", isSignal: true, isRequired: false, transformFunction: null }, anchorRect: { classPropertyName: "anchorRect", publicName: "anchorRect", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, matchWidth: { classPropertyName: "matchWidth", publicName: "matchWidth", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, clamp: { classPropertyName: "clamp", publicName: "clamp", isSignal: true, isRequired: false, transformFunction: null }, keepOpenWhen: { classPropertyName: "keepOpenWhen", publicName: "keepOpenWhen", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, exportAs: ["mkAnchoredPanel"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkAnchoredPanel, decorators: [{
             type: Directive,
@@ -1030,7 +1045,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                     selector: '[mkAnchoredPanel]',
                     exportAs: 'mkAnchoredPanel',
                 }]
-        }], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkAnchoredPanelFor", required: false }] }], anchorRect: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorRect", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], matchWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchWidth", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], clamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "clamp", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
+        }], propDecorators: { anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "mkAnchoredPanelFor", required: false }] }], anchorRect: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorRect", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], matchWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchWidth", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], clamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "clamp", required: false }] }], keepOpenWhen: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepOpenWhen", required: false }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }] } });
 
 /** The built-in English validation messages. */
 const MK_DEFAULT_VALIDATION = {
@@ -1132,6 +1147,11 @@ const MK_DEFAULT_I18N = {
     chooseWeek: 'Choose week',
     openCalendar: 'Open calendar',
     openTimeList: 'Open time list',
+    moreActions: 'More actions',
+    selectDateTime: 'Select date and time…',
+    chooseDateTime: 'Choose date and time',
+    chooseTime: 'Choose time',
+    openDateTimePicker: 'Open date and time picker',
     daySegment: 'Day',
     monthSegment: 'Month',
     yearSegment: 'Year',