verstak 0.24.268 → 0.24.269

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.
Files changed (3) hide show
  1. package/build/dist/source/html/El.d.ts +23 -20
  2. package/build/dist/source/html/El.js +318 -188
  3. package/package.json +2 -2
package/build/dist/source/html/El.d.ts CHANGED
@@ -4,6 +4,7 @@ export declare class ElDriver<T extends Element, M = unknown> extends BaseDriver
4
4
  }
5
5
  export type El<T = any, M = any> = {
6
6
  readonly node: RxNode<El<T, M>>;
7
+ readonly index: number;
7
8
  native: T;
8
9
  model: M;
9
10
  kind: ElKind;
@@ -37,15 +38,15 @@ export type ElCoords = {
37
38
  export declare enum Align {
38
39
  default = 0,
39
40
  left = 4,
40
- centerWidth = 5,
41
+ centerX = 5,
41
42
  right = 6,
42
- stretchWidth = 7,
43
+ stretchX = 7,
43
44
  top = 32,
44
- centerHeight = 40,
45
+ centerY = 40,
45
46
  bottom = 48,
46
- stretchHeight = 56,
47
- center = 45,
48
- stretch = 63
47
+ stretchY = 56,
48
+ centerXY = 45,
49
+ stretchXY = 63
49
50
  }
50
51
  export type Range = {
51
52
  readonly min?: string;
@@ -79,6 +80,7 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
79
80
  private _hasStylingPresets;
80
81
  constructor(node: RxNode<El<T, M>>);
81
82
  prepareForUpdate(): void;
83
+ get index(): number;
82
84
  get isSection(): boolean;
83
85
  get isTable(): boolean;
84
86
  get isAuxiliary(): boolean;
@@ -104,13 +106,28 @@ export declare class ElImpl<T extends Element = any, M = any> implements El<T, M
104
106
  set overlayVisible(value: boolean | undefined);
105
107
  get style(): CSSStyleDeclaration;
106
108
  useStylingPreset(stylingPresetName: string, enabled?: boolean): void;
109
+ protected children(onlyAfter?: ElImpl): Generator<ElImpl>;
107
110
  private rowBreak;
111
+ private static applyKind;
112
+ private static applyCoords;
113
+ private static applyMinWidth;
114
+ private static applyMaxWidth;
115
+ private static applyMinHeight;
116
+ private static applyMaxHeight;
117
+ private static applyAlignment;
118
+ private static applyStretchingStrengthX;
119
+ private static applyStretchingStrengthY;
120
+ private static applyContentWrapping;
121
+ private static applyOverlayVisible;
122
+ private static applyStylingPreset;
108
123
  }
109
124
  declare class ElLayoutInfo {
110
125
  x: number;
111
126
  y: number;
112
127
  runningMaxX: number;
113
128
  runningMaxY: number;
129
+ alignerX?: ElImpl;
130
+ alignerY?: ElImpl;
114
131
  flags: ElLayoutInfoFlags;
115
132
  constructor(prev: ElLayoutInfo);
116
133
  }
@@ -128,20 +145,6 @@ export declare class CursorCommand {
128
145
  export declare class CursorCommandDriver extends ElDriver<Element, unknown> {
129
146
  constructor();
130
147
  }
131
- export declare class Apply {
132
- static kind<T extends Element>(element: ElImpl<T, any>, value: ElKind): void;
133
- static coords<T extends Element>(element: ElImpl<T, any>, value: ElCoords | undefined): void;
134
- static minWidth<T extends Element>(element: ElImpl<T, any>, value: string): void;
135
- static maxWidth<T extends Element>(element: ElImpl<T, any>, value: string): void;
136
- static minHeight<T extends Element>(element: ElImpl<T, any>, value: string): void;
137
- static maxHeight<T extends Element>(element: ElImpl<T, any>, value: string): void;
138
- static alignment<T extends Element>(element: ElImpl<T, any>, primary: Align, extra: Align, strengthX: number | undefined, strengthY: number | undefined): void;
139
- static stretchingStrengthX<T extends Element>(element: ElImpl<T, any>, value: number): void;
140
- static stretchingStrengthY<T extends Element>(element: ElImpl<T, any>, value: number): void;
141
- static contentWrapping<T extends Element>(element: ElImpl<T, any>, value: boolean): void;
142
- static overlayVisible<T extends Element>(element: ElImpl<T, any>, value: boolean | undefined): void;
143
- static stylingPreset<T extends Element>(element: ElImpl<T, any>, secondary: boolean, styleName: string, enabled?: boolean): void;
144
- }
145
148
  export declare const Constants: {
146
149
  element: string;
147
150
  partition: string;
package/build/dist/source/html/El.js CHANGED
@@ -19,15 +19,15 @@ export var Align;
19
19
  (function (Align) {
20
20
  Align[Align["default"] = 0] = "default";
21
21
  Align[Align["left"] = 4] = "left";
22
- Align[Align["centerWidth"] = 5] = "centerWidth";
22
+ Align[Align["centerX"] = 5] = "centerX";
23
23
  Align[Align["right"] = 6] = "right";
24
- Align[Align["stretchWidth"] = 7] = "stretchWidth";
24
+ Align[Align["stretchX"] = 7] = "stretchX";
25
25
  Align[Align["top"] = 32] = "top";
26
- Align[Align["centerHeight"] = 40] = "centerHeight";
26
+ Align[Align["centerY"] = 40] = "centerY";
27
27
  Align[Align["bottom"] = 48] = "bottom";
28
- Align[Align["stretchHeight"] = 56] = "stretchHeight";
29
- Align[Align["center"] = 45] = "center";
30
- Align[Align["stretch"] = 63] = "stretch";
28
+ Align[Align["stretchY"] = 56] = "stretchY";
29
+ Align[Align["centerXY"] = 45] = "centerXY";
30
+ Align[Align["stretchXY"] = 63] = "stretchXY";
31
31
  })(Align || (Align = {}));
32
32
  export class ElImpl {
33
33
  constructor(node) {
@@ -54,6 +54,7 @@ export class ElImpl {
54
54
  this._area = undefined;
55
55
  this._hasStylingPresets = false;
56
56
  }
57
+ get index() { return this.node.seat.index; }
57
58
  get isSection() { return this.kind === ElKind.section; }
58
59
  get isTable() { return this.kind === ElKind.table; }
59
60
  get isAuxiliary() { return this.kind > ElKind.note; }
@@ -61,7 +62,7 @@ export class ElImpl {
61
62
  set kind(value) {
62
63
  if (value !== this._kind || this.node.stamp >= Number.MAX_SAFE_INTEGER - 1) {
63
64
  if (this.native !== undefined)
64
- Apply.kind(this, value);
65
+ ElImpl.applyKind(this, value);
65
66
  this._kind = value;
66
67
  }
67
68
  }
@@ -80,7 +81,7 @@ export class ElImpl {
80
81
  const coords = getElCoordsAndAdjustLayoutInfo(!isCursorElement, value, ownerEl.maxColumnCount, ownerEl.maxRowCount, prevElLayoutInfo, layoutInfo);
81
82
  if (!equalElCoords(coords, this._coords)) {
82
83
  if (this.native !== undefined)
83
- Apply.coords(this, coords);
84
+ ElImpl.applyCoords(this, coords);
84
85
  this._coords = coords;
85
86
  }
86
87
  this._area = value !== null && value !== void 0 ? value : {};
@@ -94,11 +95,11 @@ export class ElImpl {
94
95
  const w = this._width;
95
96
  let updated = false;
96
97
  if (value.min !== w.min) {
97
- Apply.minWidth(this, (_a = value.min) !== null && _a !== void 0 ? _a : "");
98
+ ElImpl.applyMinWidth(this, (_a = value.min) !== null && _a !== void 0 ? _a : "");
98
99
  updated = true;
99
100
  }
100
101
  if (value.max !== w.max) {
101
- Apply.maxWidth(this, (_b = value.max) !== null && _b !== void 0 ? _b : "");
102
+ ElImpl.applyMaxWidth(this, (_b = value.max) !== null && _b !== void 0 ? _b : "");
102
103
  updated = true;
103
104
  }
104
105
  if (updated)
@@ -110,11 +111,11 @@ export class ElImpl {
110
111
  const w = this._height;
111
112
  let updated = false;
112
113
  if (value.min !== w.min) {
113
- Apply.minHeight(this, (_a = value.min) !== null && _a !== void 0 ? _a : "");
114
+ ElImpl.applyMinHeight(this, (_a = value.min) !== null && _a !== void 0 ? _a : "");
114
115
  updated = true;
115
116
  }
116
117
  if (value.max !== w.max) {
117
- Apply.maxHeight(this, (_b = value.max) !== null && _b !== void 0 ? _b : "");
118
+ ElImpl.applyMaxHeight(this, (_b = value.max) !== null && _b !== void 0 ? _b : "");
118
119
  updated = true;
119
120
  }
120
121
  if (updated)
@@ -122,51 +123,60 @@ export class ElImpl {
122
123
  }
123
124
  get alignment() { return this._alignment; }
124
125
  set alignment(value) {
125
- if (value !== this._alignment) {
126
- Apply.alignment(this, value, this._extraAlignment, this._stretchingStrengthX, this._stretchingStrengthY);
126
+ const existing = this._alignment;
127
+ if (value !== existing) {
128
+ ElImpl.applyAlignment(this, existing, value, this._extraAlignment, this._extraAlignment, this._stretchingStrengthX, this._stretchingStrengthY);
127
129
  this._alignment = value;
128
130
  }
129
131
  }
130
132
  get extraAlignment() { return this._extraAlignment; }
131
133
  set extraAlignment(value) {
132
- if (value !== this._extraAlignment) {
133
- Apply.alignment(this, this._alignment, value, this._stretchingStrengthX, this._stretchingStrengthY);
134
+ const existing = this._extraAlignment;
135
+ if (value !== existing) {
136
+ ElImpl.applyAlignment(this, this._alignment, this._alignment, existing, value, this._stretchingStrengthX, this._stretchingStrengthY);
134
137
  this._extraAlignment = value;
135
138
  }
136
139
  }
137
140
  get stretchingStrengthX() { return this._stretchingStrengthX; }
138
141
  set stretchingStrengthX(value) {
139
- if (value !== this._stretchingStrengthX) {
140
- Apply.stretchingStrengthX(this, value !== null && value !== void 0 ? value : 0);
142
+ const existing = this._stretchingStrengthX;
143
+ if (value !== existing) {
144
+ ElImpl.applyStretchingStrengthX(this, existing !== null && existing !== void 0 ? existing : 0, value !== null && value !== void 0 ? value : 0);
141
145
  this._stretchingStrengthX = value;
142
146
  }
143
147
  }
144
148
  get stretchingStrengthY() { return this._stretchingStrengthY; }
145
149
  set stretchingStrengthY(value) {
146
- if (value !== this._stretchingStrengthY) {
147
- Apply.stretchingStrengthY(this, value !== null && value !== void 0 ? value : 0);
150
+ const existing = this._stretchingStrengthY;
151
+ if (value !== existing) {
152
+ ElImpl.applyStretchingStrengthY(this, existing !== null && existing !== void 0 ? existing : 0, value !== null && value !== void 0 ? value : 0);
148
153
  this._stretchingStrengthY = value;
149
154
  }
150
155
  }
151
156
  get contentWrapping() { return this._contentWrapping; }
152
157
  set contentWrapping(value) {
153
158
  if (value !== this._contentWrapping) {
154
- Apply.contentWrapping(this, value);
159
+ ElImpl.applyContentWrapping(this, value);
155
160
  this._contentWrapping = value;
156
161
  }
157
162
  }
158
163
  get overlayVisible() { return this._overlayVisible; }
159
164
  set overlayVisible(value) {
160
165
  if (value !== this._overlayVisible) {
161
- Apply.overlayVisible(this, value);
166
+ ElImpl.applyOverlayVisible(this, value);
162
167
  this._overlayVisible = value;
163
168
  }
164
169
  }
165
170
  get style() { return this.native.style; }
166
171
  useStylingPreset(stylingPresetName, enabled) {
167
- Apply.stylingPreset(this, this._hasStylingPresets, stylingPresetName, enabled);
172
+ ElImpl.applyStylingPreset(this, this._hasStylingPresets, stylingPresetName, enabled);
168
173
  this._hasStylingPresets = true;
169
174
  }
175
+ *children(onlyAfter) {
176
+ const after = onlyAfter === null || onlyAfter === void 0 ? void 0 : onlyAfter.node.seat;
177
+ for (const child of this.node.children.items(after))
178
+ yield child.instance.element;
179
+ }
170
180
  rowBreak() {
171
181
  var _a, _b;
172
182
  const node = this.node;
@@ -176,6 +186,285 @@ export class ElImpl {
176
186
  layoutInfo.x = 1;
177
187
  layoutInfo.y = layoutInfo.runningMaxY + 1;
178
188
  }
189
+ static applyKind(element, value) {
190
+ const kind = Constants.layouts[value];
191
+ kind && element.native.setAttribute(Constants.kindAttrName, kind);
192
+ VerstakDriversByLayout[value](element);
193
+ }
194
+ static applyCoords(element, value) {
195
+ const s = element.style;
196
+ if (value) {
197
+ const x1 = value.x1 || 1;
198
+ const y1 = value.y1 || 1;
199
+ const x2 = value.x2 || x1;
200
+ const y2 = value.y2 || y1;
201
+ s.gridArea = `${y1} / ${x1} / span ${y2 - y1 + 1} / span ${x2 - x1 + 1}`;
202
+ }
203
+ else
204
+ s.gridArea = "";
205
+ }
206
+ static applyMinWidth(element, value) {
207
+ element.style.minWidth = `${value}`;
208
+ }
209
+ static applyMaxWidth(element, value) {
210
+ element.style.maxWidth = `${value}`;
211
+ }
212
+ static applyMinHeight(element, value) {
213
+ element.style.minHeight = `${value}`;
214
+ }
215
+ static applyMaxHeight(element, value) {
216
+ element.style.maxHeight = `${value}`;
217
+ }
218
+ static applyAlignment(element, oldPrimary, newPrimary, oldExtra, newExtra, strengthX, strengthY) {
219
+ var _a;
220
+ const css = element.style;
221
+ let hostLayout = undefined;
222
+ let hostCss = undefined;
223
+ if (element.node.host.driver.isPartition) {
224
+ const hostEl = element.node.host.element;
225
+ hostCss = hostEl.style;
226
+ hostLayout = hostEl.layoutInfo;
227
+ if (hostLayout === undefined)
228
+ hostLayout = hostEl.layoutInfo = new ElLayoutInfo(InitialElLayoutInfo);
229
+ }
230
+ if (newExtra === Align.default)
231
+ newExtra = newPrimary;
232
+ let isEffectiveAlignerX = false;
233
+ if (hostLayout) {
234
+ const isAligner = alignIs(newPrimary, Align.centerX) ||
235
+ alignIs(newPrimary, Align.right);
236
+ isEffectiveAlignerX = isAligner && (hostLayout.alignerX === undefined ||
237
+ element.index <= hostLayout.alignerX.index);
238
+ if (hostLayout.alignerX === element) {
239
+ if (!isEffectiveAlignerX) {
240
+ css.marginLeft = "";
241
+ throw new Error("changing alignment leader is not implemented yet");
242
+ }
243
+ }
244
+ else {
245
+ if (isEffectiveAlignerX) {
246
+ const existingAlignerCss = (_a = hostLayout.alignerX) === null || _a === void 0 ? void 0 : _a.style;
247
+ if (existingAlignerCss)
248
+ existingAlignerCss.marginLeft = "";
249
+ hostLayout.alignerX = element;
250
+ }
251
+ }
252
+ }
253
+ switch (newPrimary & 0b00000111) {
254
+ default:
255
+ case Align.left:
256
+ css.justifySelf = "start";
257
+ if (alignIs(oldPrimary, Align.centerX)) {
258
+ css.marginLeft = "";
259
+ css.marginRight = "";
260
+ }
261
+ else if ((oldPrimary & Align.right) === Align.right)
262
+ css.marginLeft = "";
263
+ break;
264
+ case Align.centerX:
265
+ css.justifySelf = "center";
266
+ if (hostLayout)
267
+ css.marginLeft = isEffectiveAlignerX ? "auto" : "";
268
+ css.marginRight = "auto";
269
+ break;
270
+ case Align.right:
271
+ css.justifySelf = "end";
272
+ if (hostLayout)
273
+ css.marginLeft = isEffectiveAlignerX ? "auto" : "";
274
+ if (alignIs(oldPrimary, Align.centerX))
275
+ css.marginRight = "";
276
+ break;
277
+ case Align.stretchX:
278
+ css.justifySelf = "stretch";
279
+ if (alignIs(oldPrimary, Align.centerX)) {
280
+ css.marginLeft = "";
281
+ css.marginRight = "";
282
+ }
283
+ else if (alignIs(oldPrimary, Align.right))
284
+ css.marginLeft = "";
285
+ break;
286
+ }
287
+ switch (newExtra & 0b00000111) {
288
+ default:
289
+ case Align.left:
290
+ css.alignItems = "start";
291
+ css.textAlign = "left";
292
+ break;
293
+ case Align.centerX:
294
+ css.alignItems = "center";
295
+ css.textAlign = "center";
296
+ break;
297
+ case Align.right:
298
+ css.alignItems = "end";
299
+ css.textAlign = "right";
300
+ break;
301
+ case Align.stretchX:
302
+ css.alignItems = "stretch";
303
+ css.textAlign = "justify";
304
+ break;
305
+ }
306
+ let isEffectiveAlignerY = false;
307
+ if (hostLayout) {
308
+ const isAligner = alignIs(newPrimary, Align.centerY) ||
309
+ alignIs(newPrimary, Align.bottom);
310
+ isEffectiveAlignerY = isAligner && (hostLayout.alignerY === undefined ||
311
+ !alignIs(hostLayout.alignerY.alignment, Align.centerY));
312
+ if (hostLayout.alignerY === element) {
313
+ if (!isEffectiveAlignerY) {
314
+ hostCss.marginTop = "";
315
+ throw new Error("changing alignment leader is not implemented yet");
316
+ }
317
+ }
318
+ else {
319
+ if (isEffectiveAlignerY) {
320
+ hostCss.marginTop = "auto";
321
+ hostLayout.alignerY = element;
322
+ }
323
+ }
324
+ }
325
+ switch (newPrimary & 0b00111000) {
326
+ default:
327
+ case Align.top:
328
+ css.alignSelf = "start";
329
+ break;
330
+ case Align.centerY:
331
+ css.alignSelf = "center";
332
+ break;
333
+ case Align.bottom:
334
+ css.alignSelf = "end";
335
+ break;
336
+ case Align.stretchY:
337
+ css.alignSelf = "stretch";
338
+ break;
339
+ }
340
+ switch (newExtra & 0b00111000) {
341
+ default:
342
+ case Align.top:
343
+ css.justifyContent = "start";
344
+ break;
345
+ case Align.centerY:
346
+ css.justifyContent = "center";
347
+ break;
348
+ case Align.bottom:
349
+ css.justifyContent = "end";
350
+ break;
351
+ case Align.stretchY:
352
+ css.justifyContent = "stretch";
353
+ break;
354
+ }
355
+ if (alignIs(newPrimary, Align.stretchX) && strengthX === undefined)
356
+ ElImpl.applyStretchingStrengthX(element, 0, 1);
357
+ if (alignIs(newPrimary, Align.stretchY) && strengthY === undefined)
358
+ ElImpl.applyStretchingStrengthY(element, 0, 1);
359
+ }
360
+ static applyStretchingStrengthX(element, existing, value) {
361
+ var _a;
362
+ const s = element.style;
363
+ if (value > 0) {
364
+ s.flexGrow = `${value}`;
365
+ s.flexBasis = "0";
366
+ }
367
+ else {
368
+ s.flexGrow = "";
369
+ s.flexBasis = "";
370
+ }
371
+ const host = element.node.host;
372
+ if (host.driver.isPartition) {
373
+ let delta = 0;
374
+ if (existing === 0) {
375
+ if (value !== 0)
376
+ delta = 1;
377
+ }
378
+ else if (value === 0) {
379
+ if (existing !== 0)
380
+ delta = -1;
381
+ }
382
+ if (delta !== 0) {
383
+ const hostEl = host.element;
384
+ const count = (_a = hostEl._stretchingStrengthX) !== null && _a !== void 0 ? _a : 0 + delta;
385
+ if (count === 1)
386
+ s.alignSelf = "stretch";
387
+ else if (count === 0)
388
+ s.alignSelf = "";
389
+ }
390
+ }
391
+ }
392
+ static applyStretchingStrengthY(element, existing, value) {
393
+ var _a;
394
+ const host = element.node.host;
395
+ if (host.driver.isPartition) {
396
+ let delta = 0;
397
+ if (existing === 0) {
398
+ if (value !== 0)
399
+ delta = 1;
400
+ }
401
+ else if (value === 0) {
402
+ if (existing !== 0)
403
+ delta = -1;
404
+ }
405
+ if (delta !== 0) {
406
+ const hostElement = host.element;
407
+ const count = (_a = hostElement._stretchingStrengthY) !== null && _a !== void 0 ? _a : 0 + delta;
408
+ const s = hostElement.style;
409
+ if (count === 1)
410
+ s.flexGrow = `${value}`;
411
+ else if (count === 0)
412
+ s.flexGrow = "";
413
+ }
414
+ }
415
+ }
416
+ static applyContentWrapping(element, value) {
417
+ const s = element.style;
418
+ if (value) {
419
+ s.flexFlow = "wrap";
420
+ s.overflow = "";
421
+ s.textOverflow = "";
422
+ s.whiteSpace = "";
423
+ }
424
+ else {
425
+ s.flexFlow = "";
426
+ s.overflow = "hidden";
427
+ s.textOverflow = "ellipsis";
428
+ s.whiteSpace = "nowrap";
429
+ }
430
+ }
431
+ static applyOverlayVisible(element, value) {
432
+ const s = element.style;
433
+ const host = RxNode.findMatchingHost(element.node, n => n.element.native instanceof HTMLElement || n.element.native instanceof SVGElement);
434
+ const nativeHost = host === null || host === void 0 ? void 0 : host.element.native;
435
+ if (value === true) {
436
+ const doc = document.body;
437
+ const rect = nativeHost.getBoundingClientRect();
438
+ if (doc.offsetWidth - rect.left > rect.right)
439
+ s.left = "0", s.right = "";
440
+ else
441
+ s.left = "", s.right = "0";
442
+ if (doc.clientHeight - rect.top > rect.bottom)
443
+ s.top = "100%", s.bottom = "";
444
+ else
445
+ s.top = "", s.bottom = "100%";
446
+ s.display = "";
447
+ s.position = "absolute";
448
+ s.minWidth = "100%";
449
+ s.boxSizing = "border-box";
450
+ nativeHost.style.position = "relative";
451
+ }
452
+ else {
453
+ nativeHost.style.position = "";
454
+ if (value === false)
455
+ s.display = "none";
456
+ else
457
+ s.position = s.display = s.left = s.right = s.top = s.bottom = "";
458
+ }
459
+ }
460
+ static applyStylingPreset(element, secondary, styleName, enabled) {
461
+ const native = element.native;
462
+ enabled !== null && enabled !== void 0 ? enabled : (enabled = true);
463
+ if (secondary)
464
+ native.classList.toggle(styleName, enabled);
465
+ else
466
+ native.className = enabled ? styleName : "";
467
+ }
179
468
  }
180
469
  class ElLayoutInfo {
181
470
  constructor(prev) {
@@ -183,6 +472,8 @@ class ElLayoutInfo {
183
472
  this.y = prev.y;
184
473
  this.runningMaxX = prev.runningMaxX;
185
474
  this.runningMaxY = prev.runningMaxY;
475
+ this.alignerX = undefined;
476
+ this.alignerY = undefined;
186
477
  this.flags = prev.flags & ~ElLayoutInfoFlags.ownCursorPosition;
187
478
  }
188
479
  }
@@ -303,169 +594,6 @@ export class CursorCommandDriver extends ElDriver {
303
594
  super("cursor", false, el => el.kind = ElKind.cursor);
304
595
  }
305
596
  }
306
- export class Apply {
307
- static kind(element, value) {
308
- const kind = Constants.layouts[value];
309
- kind && element.native.setAttribute(Constants.kindAttrName, kind);
310
- VerstakDriversByLayout[value](element);
311
- }
312
- static coords(element, value) {
313
- if (element.native instanceof HTMLElement) {
314
- const s = element.native.style;
315
- if (value) {
316
- const x1 = value.x1 || 1;
317
- const y1 = value.y1 || 1;
318
- const x2 = value.x2 || x1;
319
- const y2 = value.y2 || y1;
320
- s.gridArea = `${y1} / ${x1} / span ${y2 - y1 + 1} / span ${x2 - x1 + 1}`;
321
- }
322
- else
323
- s.gridArea = "";
324
- }
325
- }
326
- static minWidth(element, value) {
327
- if (element.native instanceof HTMLElement)
328
- element.native.style.minWidth = `${value}`;
329
- }
330
- static maxWidth(element, value) {
331
- if (element.native instanceof HTMLElement)
332
- element.native.style.maxWidth = `${value}`;
333
- }
334
- static minHeight(element, value) {
335
- if (element.native instanceof HTMLElement)
336
- element.native.style.minHeight = `${value}`;
337
- }
338
- static maxHeight(element, value) {
339
- if (element.native instanceof HTMLElement)
340
- element.native.style.maxHeight = `${value}`;
341
- }
342
- static alignment(element, primary, extra, strengthX, strengthY) {
343
- if (element.native instanceof HTMLElement) {
344
- const s = element.native.style;
345
- let v1 = "";
346
- let h1 = "";
347
- let t1 = "";
348
- if (primary !== Align.default) {
349
- v1 = AlignToCss[(primary >> 3) & 0b11];
350
- h1 = AlignToCss[primary & 0b11];
351
- t1 = TextAlignCss[primary & 0b11];
352
- }
353
- s.alignSelf = v1;
354
- s.justifySelf = h1;
355
- if ((primary & Align.left) !== 0 && strengthX === undefined)
356
- Apply.stretchingStrengthX(element, 1);
357
- if ((primary & Align.top) !== 0 && strengthY === undefined)
358
- Apply.stretchingStrengthY(element, 1);
359
- let v2 = "";
360
- let h2 = "";
361
- let t2 = "";
362
- if (extra !== Align.default) {
363
- v2 = AlignToCss[(extra >> 3) & 0b11];
364
- h2 = AlignToCss[extra & 0b11];
365
- t2 = TextAlignCss[extra & 0b11];
366
- }
367
- else {
368
- v2 = v1;
369
- h2 = h1;
370
- t2 = t1;
371
- }
372
- s.justifyContent = v2;
373
- s.alignItems = h2;
374
- s.textAlign = t2;
375
- }
376
- }
377
- static stretchingStrengthX(element, value) {
378
- if (element.native instanceof HTMLElement) {
379
- const s = element.native.style;
380
- if (value > 0) {
381
- s.flexGrow = `${value}`;
382
- s.flexBasis = "0";
383
- }
384
- else {
385
- s.flexGrow = "";
386
- s.flexBasis = "";
387
- }
388
- }
389
- }
390
- static stretchingStrengthY(element, value) {
391
- const bNode = element.node;
392
- const driver = bNode.driver;
393
- if (driver.isPartition) {
394
- if (element.native instanceof HTMLElement) {
395
- const s = element.native.style;
396
- if (value > 0)
397
- s.flexGrow = `${value}`;
398
- else
399
- s.flexGrow = "";
400
- }
401
- }
402
- else {
403
- const hostDriver = bNode.host.driver;
404
- if (hostDriver.isPartition) {
405
- const host = bNode.host.seat.instance;
406
- Apply.alignment(host.element, Align.stretchHeight, Align.default, undefined, undefined);
407
- Apply.stretchingStrengthY(host.element, value);
408
- }
409
- }
410
- }
411
- static contentWrapping(element, value) {
412
- if (element.native instanceof HTMLElement) {
413
- const s = element.native.style;
414
- if (value) {
415
- s.flexFlow = "wrap";
416
- s.overflow = "";
417
- s.textOverflow = "";
418
- s.whiteSpace = "";
419
- }
420
- else {
421
- s.flexFlow = "";
422
- s.overflow = "hidden";
423
- s.textOverflow = "ellipsis";
424
- s.whiteSpace = "nowrap";
425
- }
426
- }
427
- }
428
- static overlayVisible(element, value) {
429
- const e = element.native;
430
- if (e instanceof HTMLElement) {
431
- const s = e.style;
432
- const host = RxNode.findMatchingHost(element.node, n => n.element.native instanceof HTMLElement || n.element.native instanceof SVGElement);
433
- const nativeHost = host === null || host === void 0 ? void 0 : host.element.native;
434
- if (value === true) {
435
- const doc = document.body;
436
- const rect = nativeHost.getBoundingClientRect();
437
- if (doc.offsetWidth - rect.left > rect.right)
438
- s.left = "0", s.right = "";
439
- else
440
- s.left = "", s.right = "0";
441
- if (doc.clientHeight - rect.top > rect.bottom)
442
- s.top = "100%", s.bottom = "";
443
- else
444
- s.top = "", s.bottom = "100%";
445
- s.display = "";
446
- s.position = "absolute";
447
- s.minWidth = "100%";
448
- s.boxSizing = "border-box";
449
- nativeHost.style.position = "relative";
450
- }
451
- else {
452
- nativeHost.style.position = "";
453
- if (value === false)
454
- s.display = "none";
455
- else
456
- s.position = s.display = s.left = s.right = s.top = s.bottom = "";
457
- }
458
- }
459
- }
460
- static stylingPreset(element, secondary, styleName, enabled) {
461
- const native = element.native;
462
- enabled !== null && enabled !== void 0 ? enabled : (enabled = true);
463
- if (secondary)
464
- native.classList.toggle(styleName, enabled);
465
- else
466
- native.className = enabled ? styleName : "";
467
- }
468
- }
469
597
  export const Constants = {
470
598
  element: "el",
471
599
  partition: "part",
@@ -511,11 +639,13 @@ const VerstakDriversByLayout = [
511
639
  const s = el.native.style;
512
640
  s.display = owner.isTable ? "contents" : "flex";
513
641
  s.flexDirection = "row";
642
+ s.gap = "inherit";
514
643
  },
515
644
  el => {
516
645
  },
517
646
  el => {
518
647
  },
519
648
  ];
520
- const AlignToCss = ["start", "center", "end", "stretch"];
521
- const TextAlignCss = ["left", "center", "right", "justify"];
649
+ function alignIs(align, like) {
650
+ return (align & like) == like;
651
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "verstak",
3
- "version": "0.24.268",
3
+ "version": "0.24.269",
4
4
  "description": "Verstak - Front-End Library",
5
5
  "publisher": "Nezaboodka Software",
6
6
  "license": "Apache-2.0",
@@ -31,7 +31,7 @@
31
31
  },
32
32
  "homepage": "https://github.com/nezaboodka/verstak/blob/master/README.md#readme",
33
33
  "dependencies": {
34
- "reactronic": "^0.24.265"
34
+ "reactronic": "^0.24.268"
35
35
  },
36
36
  "devDependencies": {
37
37
  "@types/node": "20.11.17",