@mk-kit/ui 0.43.0 → 0.44.0

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

@@ -4699,7 +4699,7 @@ class MkRepeater {
                 useExisting: forwardRef(() => MkRepeater),
                 multi: true,
             },
-        ], queries: [{ propertyName: "rowTemplate", first: true, predicate: MkRepeaterRow, descendants: true, isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: MkRepeaterEmpty, descendants: true, isSignal: true }], ngImport: i0, template: "@if (items().length > 0) {\n  @if (reorderable()) {\n    <ul\n      class=\"mk-repeater__rows\"\n      mkDropList\n      [mkDropListData]=\"items()\"\n      [mkDropListDisabled]=\"isDisabled()\"\n      (mkDropListDropped)=\"onDrop($event)\"\n    >\n      @for (item of items(); track item) {\n        <li class=\"mk-repeater__row\" mkDrag [mkDragData]=\"item\">\n          <button\n            type=\"button\"\n            class=\"mk-repeater__handle\"\n            mkDragHandle\n            [attr.aria-label]=\"i18n.repeaterReorderRow($index + 1)\"\n            [disabled]=\"isDisabled()\"\n          >\n            <span aria-hidden=\"true\">\u283F</span>\n          </button>\n          <ng-container\n            [ngTemplateOutlet]=\"rowInner\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, index: $index }\"\n          />\n        </li>\n      }\n    </ul>\n  } @else {\n    <ul class=\"mk-repeater__rows\">\n      @for (item of items(); track item) {\n        <li class=\"mk-repeater__row\">\n          <ng-container\n            [ngTemplateOutlet]=\"rowInner\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, index: $index }\"\n          />\n        </li>\n      }\n    </ul>\n  }\n} @else {\n  @if (emptyTemplate(); as empty) {\n    <div class=\"mk-repeater__empty\">\n      <ng-container [ngTemplateOutlet]=\"empty.template\" />\n    </div>\n  }\n}\n\n<button\n  mkButton\n  variant=\"outline\"\n  size=\"sm\"\n  type=\"button\"\n  class=\"mk-repeater__add\"\n  [disabled]=\"isDisabled() || atMax()\"\n  (click)=\"add()\"\n>\n  {{ effectiveAddLabel() }}\n</button>\n\n<!-- Shared row body: projected content + remove button (both branches). -->\n<ng-template #rowInner let-item let-i=\"index\">\n  <div class=\"mk-repeater__content\" (keydown)=\"onContentKeydown($event)\">\n    <ng-container\n      [ngTemplateOutlet]=\"rowTemplate().template\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\"\n    />\n  </div>\n  <button\n    mkButton\n    variant=\"ghost\"\n    tone=\"neutral\"\n    size=\"sm\"\n    iconOnly\n    type=\"button\"\n    class=\"mk-repeater__remove\"\n    [attr.aria-label]=\"i18n.repeaterRemoveRow(i + 1)\"\n    [disabled]=\"isDisabled() || atMin()\"\n    (click)=\"removeAt(i)\"\n    (keydown)=\"onContentKeydown($event)\"\n  >\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mk-space-2);width:100%;font-family:var(--mk-font-sans)}.mk-repeater__rows{display:flex;flex-direction:column;gap:var(--mk-space-2);width:100%;margin:0;padding:0;list-style:none}.mk-repeater__row{display:flex;align-items:flex-start;gap:var(--mk-space-2);padding:var(--mk-space-2);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md)}.mk-repeater__row:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-repeater__content{flex:1;min-width:0}.mk-repeater__handle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);padding:0;border:0;background:none;color:var(--mk-text-muted);font-size:var(--mk-font-size-md);border-radius:var(--mk-radius-sm)}@media(pointer:coarse){.mk-repeater__handle{position:relative}.mk-repeater__handle:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-repeater__handle:hover:not(:disabled){color:var(--mk-text);background-color:var(--mk-surface-2)}.mk-repeater__handle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-repeater__handle:disabled{cursor:default;opacity:.5}.mk-repeater__remove{flex:none}.mk-repeater__empty{width:100%;color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}:host(.mk-repeater--disabled) .mk-repeater__row{opacity:.7}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MkButton, selector: "button[mkButton], a[mkButton]", inputs: ["variant", "tone", "size", "loading", "fullWidth", "iconOnly", "disabled"] }, { kind: "component", type: MkDropList, selector: "[mkDropList]", inputs: ["mkDropListData", "mkDropListId", "mkDropListConnectedTo", "mkDropListLabel", "mkDropListOrientation", "mkDropListDisabled"], outputs: ["mkDropListDropped"], exportAs: ["mkDropList"] }, { kind: "component", type: MkDrag, selector: "[mkDrag]", inputs: ["mkDragData", "mkDragDisabled", "mkDragTouchDelay"], exportAs: ["mkDrag"] }, { kind: "directive", type: MkDragHandle, selector: "[mkDragHandle]", exportAs: ["mkDragHandle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], queries: [{ propertyName: "rowTemplate", first: true, predicate: MkRepeaterRow, descendants: true, isSignal: true }, { propertyName: "emptyTemplate", first: true, predicate: MkRepeaterEmpty, descendants: true, isSignal: true }], ngImport: i0, template: "@if (items().length > 0) {\n  @if (reorderable()) {\n    <ul\n      class=\"mk-repeater__rows\"\n      mkDropList\n      [mkDropListData]=\"items()\"\n      [mkDropListDisabled]=\"isDisabled()\"\n      (mkDropListDropped)=\"onDrop($event)\"\n    >\n      @for (item of items(); track item) {\n        <li class=\"mk-repeater__row\" mkDrag [mkDragData]=\"item\">\n          <button\n            type=\"button\"\n            class=\"mk-repeater__handle\"\n            mkDragHandle\n            [attr.aria-label]=\"i18n.repeaterReorderRow($index + 1)\"\n            [disabled]=\"isDisabled()\"\n          >\n            <span aria-hidden=\"true\">\u283F</span>\n          </button>\n          <ng-container\n            [ngTemplateOutlet]=\"rowInner\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, index: $index }\"\n          />\n        </li>\n      }\n    </ul>\n  } @else {\n    <ul class=\"mk-repeater__rows\">\n      @for (item of items(); track item) {\n        <li class=\"mk-repeater__row\">\n          <ng-container\n            [ngTemplateOutlet]=\"rowInner\"\n            [ngTemplateOutletContext]=\"{ $implicit: item, index: $index }\"\n          />\n        </li>\n      }\n    </ul>\n  }\n} @else {\n  @if (emptyTemplate(); as empty) {\n    <div class=\"mk-repeater__empty\">\n      <ng-container [ngTemplateOutlet]=\"empty.template\" />\n    </div>\n  }\n}\n\n<button\n  mkButton\n  variant=\"outline\"\n  size=\"sm\"\n  type=\"button\"\n  class=\"mk-repeater__add\"\n  [disabled]=\"isDisabled() || atMax()\"\n  (click)=\"add()\"\n>\n  {{ effectiveAddLabel() }}\n</button>\n\n<!-- Shared row body: projected content + remove button (both branches). -->\n<ng-template #rowInner let-item let-i=\"index\">\n  <div class=\"mk-repeater__content\" (keydown)=\"onContentKeydown($event)\">\n    <ng-container\n      [ngTemplateOutlet]=\"rowTemplate().template\"\n      [ngTemplateOutletContext]=\"{ $implicit: item, index: i }\"\n    />\n  </div>\n  <button\n    mkButton\n    variant=\"ghost\"\n    tone=\"neutral\"\n    size=\"sm\"\n    iconOnly\n    type=\"button\"\n    class=\"mk-repeater__remove\"\n    [attr.aria-label]=\"i18n.repeaterRemoveRow(i + 1)\"\n    [disabled]=\"isDisabled() || atMin()\"\n    (click)=\"removeAt(i)\"\n    (keydown)=\"onContentKeydown($event)\"\n  >\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mk-space-2);width:100%;font-family:var(--mk-font-sans)}.mk-repeater__rows{display:flex;flex-direction:column;gap:var(--mk-space-2);width:100%;margin:0;padding:0;list-style:none}.mk-repeater__row{display:flex;align-items:flex-start;gap:var(--mk-space-2);padding:var(--mk-space-2);background-color:var(--mk-surface);border:var(--mk-border-width) solid var(--mk-border);border-radius:var(--mk-radius-md)}.mk-repeater__row:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-repeater__content{flex:1;min-width:0}.mk-repeater__handle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--mk-control-height-sm);height:var(--mk-control-height-sm);padding:0;border:0;background:none;color:var(--mk-text-muted);font-size:var(--mk-font-size-md);border-radius:var(--mk-radius-sm)}@media(pointer:coarse){.mk-repeater__handle{position:relative}.mk-repeater__handle:before{content:\"\";position:absolute;inset:min(0px,(100% - 24px) / 2)}}.mk-repeater__handle:hover:not(:disabled){color:var(--mk-text);background-color:var(--mk-surface-2)}.mk-repeater__handle:focus-visible{outline:var(--mk-focus-ring-width) solid var(--mk-focus-ring);outline-offset:var(--mk-focus-ring-offset)}.mk-repeater__handle:disabled{cursor:default;opacity:.5}.mk-repeater__remove{flex:none}.mk-repeater__empty{width:100%;color:var(--mk-text-muted);font-size:var(--mk-font-size-sm)}:host(.mk-repeater--disabled) .mk-repeater__row{opacity:.7}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MkButton, selector: "button[mkButton], a[mkButton]", inputs: ["variant", "tone", "size", "loading", "fullWidth", "iconOnly", "disabled"] }, { kind: "component", type: MkDropList, selector: "[mkDropList]", inputs: ["mkDropListData", "mkDropListId", "mkDropListConnectedTo", "mkDropListLabel", "mkDropListLabelledBy", "mkDropListOrientation", "mkDropListDisabled"], outputs: ["mkDropListDropped"], exportAs: ["mkDropList"] }, { kind: "component", type: MkDrag, selector: "[mkDrag]", inputs: ["mkDragData", "mkDragDisabled", "mkDragTouchDelay"], exportAs: ["mkDrag"] }, { kind: "directive", type: MkDragHandle, selector: "[mkDragHandle]", exportAs: ["mkDragHandle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MkRepeater, decorators: [{
             type: Component,