@retalia/pos-components 0.0.12 → 0.0.14
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/README.md +410 -442
- package/fesm2022/retalia-pos-components.mjs +58 -23
- package/fesm2022/retalia-pos-components.mjs.map +1 -1
- package/package.json +1 -5
- package/types/retalia-pos-components.d.ts +7 -0
- package/fesm2022/retalia-pos-components-services.mjs +0 -203
- package/fesm2022/retalia-pos-components-services.mjs.map +0 -1
- package/types/retalia-pos-components-services.d.ts +0 -179
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, output, signal, computed, ChangeDetectionStrategy, Component, viewChild, afterNextRender, InjectionToken,
|
|
2
|
+
import { input, output, signal, computed, ChangeDetectionStrategy, Component, viewChild, inject, DestroyRef, afterNextRender, InjectionToken, booleanAttribute, ElementRef, contentChildren, linkedSignal, effect, untracked, forwardRef } from '@angular/core';
|
|
3
3
|
|
|
4
4
|
const DEFAULT_SESSION = { status: 'signedOut' };
|
|
5
5
|
const DIGIT_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
|
|
@@ -212,20 +212,42 @@ class PosHeader {
|
|
|
212
212
|
canSignOut = input(true, ...(ngDevMode ? [{ debugName: "canSignOut" }] : /* istanbul ignore next */ []));
|
|
213
213
|
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
214
214
|
action = output();
|
|
215
|
+
sessionRef = viewChild('session', ...(ngDevMode ? [{ debugName: "sessionRef" }] : /* istanbul ignore next */ []));
|
|
216
|
+
destroyRef = inject(DestroyRef);
|
|
215
217
|
menuOpen = signal(false, ...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
|
|
218
|
+
menuTop = signal('0px', ...(ngDevMode ? [{ debugName: "menuTop" }] : /* istanbul ignore next */ []));
|
|
219
|
+
menuRight = signal('0px', ...(ngDevMode ? [{ debugName: "menuRight" }] : /* istanbul ignore next */ []));
|
|
216
220
|
initial = computed(() => {
|
|
217
221
|
const name = this.clerkName().trim();
|
|
218
222
|
return name ? name.charAt(0).toUpperCase() : '';
|
|
219
223
|
}, ...(ngDevMode ? [{ debugName: "initial" }] : /* istanbul ignore next */ []));
|
|
224
|
+
constructor() {
|
|
225
|
+
afterNextRender(() => {
|
|
226
|
+
const onScroll = () => this.onViewportChange();
|
|
227
|
+
document.addEventListener('scroll', onScroll, true);
|
|
228
|
+
this.destroyRef.onDestroy(() => {
|
|
229
|
+
document.removeEventListener('scroll', onScroll, true);
|
|
230
|
+
});
|
|
231
|
+
});
|
|
232
|
+
}
|
|
220
233
|
toggleMenu() {
|
|
221
234
|
if (this.disabled() || !this.canSignOut()) {
|
|
222
235
|
return;
|
|
223
236
|
}
|
|
224
|
-
this.menuOpen
|
|
237
|
+
const next = !this.menuOpen();
|
|
238
|
+
if (next) {
|
|
239
|
+
this.placeMenu();
|
|
240
|
+
}
|
|
241
|
+
this.menuOpen.set(next);
|
|
225
242
|
}
|
|
226
243
|
closeMenu() {
|
|
227
244
|
this.menuOpen.set(false);
|
|
228
245
|
}
|
|
246
|
+
onViewportChange() {
|
|
247
|
+
if (this.menuOpen()) {
|
|
248
|
+
this.placeMenu();
|
|
249
|
+
}
|
|
250
|
+
}
|
|
229
251
|
onSignOut() {
|
|
230
252
|
if (this.disabled() || !this.canSignOut()) {
|
|
231
253
|
return;
|
|
@@ -233,16 +255,26 @@ class PosHeader {
|
|
|
233
255
|
this.menuOpen.set(false);
|
|
234
256
|
this.action.emit({ type: 'header.signOut' });
|
|
235
257
|
}
|
|
258
|
+
placeMenu() {
|
|
259
|
+
const session = this.sessionRef()?.nativeElement;
|
|
260
|
+
if (!session) {
|
|
261
|
+
return;
|
|
262
|
+
}
|
|
263
|
+
const rect = session.getBoundingClientRect();
|
|
264
|
+
this.menuTop.set(`calc(${rect.bottom}px + var(--pos-space-xs))`);
|
|
265
|
+
this.menuRight.set(`${Math.max(0, window.innerWidth - rect.right)}px`);
|
|
266
|
+
}
|
|
236
267
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
237
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosHeader, isStandalone: true, selector: "pos-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, showBrandImage: { classPropertyName: "showBrandImage", publicName: "showBrandImage", isSignal: true, isRequired: false, transformFunction: null }, brandImage: { classPropertyName: "brandImage", publicName: "brandImage", isSignal: true, isRequired: false, transformFunction: null }, brandLabel: { classPropertyName: "brandLabel", publicName: "brandLabel", isSignal: true, isRequired: false, transformFunction: null }, clerkName: { classPropertyName: "clerkName", publicName: "clerkName", isSignal: true, isRequired: false, transformFunction: null }, clerkRole: { classPropertyName: "clerkRole", publicName: "clerkRole", isSignal: true, isRequired: false, transformFunction: null }, signOutLabel: { classPropertyName: "signOutLabel", publicName: "signOutLabel", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: true, isRequired: false, transformFunction: null }, canSignOut: { classPropertyName: "canSignOut", publicName: "canSignOut", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { attributes: { "role": "banner" }, classAttribute: "pos-header" }, ngImport: i0, template: "<div class=\"pos-header__identity\">\r\n @if (showBrandImage() || brandLabel()) {\r\n <div class=\"pos-header__brand\">\r\n @if (showBrandImage()) {\r\n @if (brandImage()) {\r\n <img\r\n class=\"pos-header__brand-image\"\r\n [src]=\"brandImage()\"\r\n [alt]=\"brandLabel() ? '' : 'Brand'\"\r\n />\r\n } @else {\r\n <svg\r\n class=\"pos-header__brand-image\"\r\n viewBox=\"492.40 241.70 51.34 54.94\"\r\n [attr.aria-hidden]=\"brandLabel() ? true : null\"\r\n [attr.aria-label]=\"brandLabel() ? null : 'Retalia'\"\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M 522.628906 291.910156 C 522.636719 293.0625 523.441406 293.511719 524.425781 292.914062 L 540.464844 283.207031 C 541.449219 282.613281 542.246094 281.195312 542.246094 280.046875 L 542.246094 261.132812 C 542.246094 259.980469 541.441406 259.523438 540.453125 260.113281 L 524.292969 269.691406 C 523.300781 270.277344 522.503906 271.683594 522.511719 272.835938 Z M 522.628906 291.910156\"\r\n />\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M 539.097656 253.351562 L 517.101562 243.664062 C 516.066406 243.203125 514.417969 243.265625 513.421875 243.804688 L 495.835938 253.308594 C 494.839844 253.847656 494.027344 255.214844 494.023438 256.367188 L 493.910156 280.140625 C 493.902344 281.292969 494.699219 282.679688 495.683594 283.234375 L 501.734375 286.640625 C 502.71875 287.199219 503.503906 286.71875 503.480469 285.566406 L 503.214844 271.488281 C 503.207031 271.082031 503.492188 270.894531 503.855469 271.066406 L 506.128906 272.148438 C 507.152344 272.636719 507.980469 273.960938 507.980469 275.113281 L 507.980469 287.839844 C 507.980469 288.992188 508.773438 290.394531 509.746094 290.972656 L 515.777344 294.5625 C 516.753906 295.140625 517.554688 294.679688 517.566406 293.527344 L 517.800781 273.300781 C 517.808594 272.488281 517.539062 271.238281 517.195312 270.503906 L 515.460938 266.789062 C 515.292969 266.421875 515.476562 266.109375 515.871094 266.089844 L 518.925781 265.941406 C 520.050781 265.886719 521.761719 265.378906 522.738281 264.808594 L 539.195312 255.21875 C 540.175781 254.648438 540.132812 253.8125 539.097656 253.351562 M 520.609375 255.050781 L 518.019531 256.585938 C 516.914062 257.125 515.734375 257.289062 514.710938 256.804688 L 511.078125 255.101562 C 510.054688 254.621094 510.023438 253.773438 511.003906 253.210938 L 513.835938 251.597656 C 514.53125 251.203125 515.691406 251.132812 516.425781 251.445312 L 520.449219 253.128906 C 521.488281 253.570312 521.5625 254.429688 520.609375 255.050781\"\r\n />\r\n </svg>\r\n }\r\n }\r\n @if (brandLabel()) {\r\n <span class=\"pos-header__brand-label\">{{ brandLabel() }}</span>\r\n }\r\n </div>\r\n }\r\n @if (title()) {\r\n <h1 class=\"pos-header__title\">{{ title() }}</h1>\r\n }\r\n @if (context()) {\r\n <p class=\"pos-header__context\">{{ context() }}</p>\r\n }\r\n</div>\r\n\r\n<div class=\"pos-header__session\">\r\n @if (clerkName()) {\r\n <div class=\"pos-header__clerk\">\r\n @if (canSignOut()) {\r\n <div class=\"pos-header__menu-anchor\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-header__menu-button\"\r\n [attr.aria-label]=\"menuLabel()\"\r\n [attr.aria-expanded]=\"menuOpen()\"\r\n aria-haspopup=\"menu\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"toggleMenu()\"\r\n >\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <circle cx=\"5\" cy=\"12\" r=\"1.6\" />\r\n <circle cx=\"12\" cy=\"12\" r=\"1.6\" />\r\n <circle cx=\"19\" cy=\"12\" r=\"1.6\" />\r\n </svg>\r\n </button>\r\n </div>\r\n }\r\n <span class=\"pos-header__avatar\" aria-hidden=\"true\">{{ initial() }}</span>\r\n <span class=\"pos-header__clerk-text\">\r\n <span class=\"pos-header__clerk-name\">{{ clerkName() }}</span>\r\n @if (clerkRole()) {\r\n <span class=\"pos-header__clerk-role\">{{ clerkRole() }}</span>\r\n }\r\n </span>\r\n </div>\r\n }\r\n @if (menuOpen()) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-header__backdrop\"\r\n aria-label=\"Close menu\"\r\n (click)=\"closeMenu()\"\r\n ></button>\r\n <div
|
|
268
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosHeader, isStandalone: true, selector: "pos-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null }, showBrandImage: { classPropertyName: "showBrandImage", publicName: "showBrandImage", isSignal: true, isRequired: false, transformFunction: null }, brandImage: { classPropertyName: "brandImage", publicName: "brandImage", isSignal: true, isRequired: false, transformFunction: null }, brandLabel: { classPropertyName: "brandLabel", publicName: "brandLabel", isSignal: true, isRequired: false, transformFunction: null }, clerkName: { classPropertyName: "clerkName", publicName: "clerkName", isSignal: true, isRequired: false, transformFunction: null }, clerkRole: { classPropertyName: "clerkRole", publicName: "clerkRole", isSignal: true, isRequired: false, transformFunction: null }, signOutLabel: { classPropertyName: "signOutLabel", publicName: "signOutLabel", isSignal: true, isRequired: false, transformFunction: null }, menuLabel: { classPropertyName: "menuLabel", publicName: "menuLabel", isSignal: true, isRequired: false, transformFunction: null }, canSignOut: { classPropertyName: "canSignOut", publicName: "canSignOut", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, host: { attributes: { "role": "banner" }, listeners: { "window:resize": "onViewportChange()" }, classAttribute: "pos-header" }, viewQueries: [{ propertyName: "sessionRef", first: true, predicate: ["session"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"pos-header__identity\">\r\n @if (showBrandImage() || brandLabel()) {\r\n <div class=\"pos-header__brand\">\r\n @if (showBrandImage()) {\r\n @if (brandImage()) {\r\n <img\r\n class=\"pos-header__brand-image\"\r\n [src]=\"brandImage()\"\r\n [alt]=\"brandLabel() ? '' : 'Brand'\"\r\n />\r\n } @else {\r\n <svg\r\n class=\"pos-header__brand-image\"\r\n viewBox=\"492.40 241.70 51.34 54.94\"\r\n [attr.aria-hidden]=\"brandLabel() ? true : null\"\r\n [attr.aria-label]=\"brandLabel() ? null : 'Retalia'\"\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M 522.628906 291.910156 C 522.636719 293.0625 523.441406 293.511719 524.425781 292.914062 L 540.464844 283.207031 C 541.449219 282.613281 542.246094 281.195312 542.246094 280.046875 L 542.246094 261.132812 C 542.246094 259.980469 541.441406 259.523438 540.453125 260.113281 L 524.292969 269.691406 C 523.300781 270.277344 522.503906 271.683594 522.511719 272.835938 Z M 522.628906 291.910156\"\r\n />\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M 539.097656 253.351562 L 517.101562 243.664062 C 516.066406 243.203125 514.417969 243.265625 513.421875 243.804688 L 495.835938 253.308594 C 494.839844 253.847656 494.027344 255.214844 494.023438 256.367188 L 493.910156 280.140625 C 493.902344 281.292969 494.699219 282.679688 495.683594 283.234375 L 501.734375 286.640625 C 502.71875 287.199219 503.503906 286.71875 503.480469 285.566406 L 503.214844 271.488281 C 503.207031 271.082031 503.492188 270.894531 503.855469 271.066406 L 506.128906 272.148438 C 507.152344 272.636719 507.980469 273.960938 507.980469 275.113281 L 507.980469 287.839844 C 507.980469 288.992188 508.773438 290.394531 509.746094 290.972656 L 515.777344 294.5625 C 516.753906 295.140625 517.554688 294.679688 517.566406 293.527344 L 517.800781 273.300781 C 517.808594 272.488281 517.539062 271.238281 517.195312 270.503906 L 515.460938 266.789062 C 515.292969 266.421875 515.476562 266.109375 515.871094 266.089844 L 518.925781 265.941406 C 520.050781 265.886719 521.761719 265.378906 522.738281 264.808594 L 539.195312 255.21875 C 540.175781 254.648438 540.132812 253.8125 539.097656 253.351562 M 520.609375 255.050781 L 518.019531 256.585938 C 516.914062 257.125 515.734375 257.289062 514.710938 256.804688 L 511.078125 255.101562 C 510.054688 254.621094 510.023438 253.773438 511.003906 253.210938 L 513.835938 251.597656 C 514.53125 251.203125 515.691406 251.132812 516.425781 251.445312 L 520.449219 253.128906 C 521.488281 253.570312 521.5625 254.429688 520.609375 255.050781\"\r\n />\r\n </svg>\r\n }\r\n }\r\n @if (brandLabel()) {\r\n <span class=\"pos-header__brand-label\">{{ brandLabel() }}</span>\r\n }\r\n </div>\r\n }\r\n @if (title()) {\r\n <h1 class=\"pos-header__title\">{{ title() }}</h1>\r\n }\r\n @if (context()) {\r\n <p class=\"pos-header__context\">{{ context() }}</p>\r\n }\r\n</div>\r\n\r\n<div #session class=\"pos-header__session\">\r\n @if (clerkName()) {\r\n <div class=\"pos-header__clerk\">\r\n @if (canSignOut()) {\r\n <div class=\"pos-header__menu-anchor\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-header__menu-button\"\r\n [attr.aria-label]=\"menuLabel()\"\r\n [attr.aria-expanded]=\"menuOpen()\"\r\n aria-haspopup=\"menu\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"toggleMenu()\"\r\n >\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <circle cx=\"5\" cy=\"12\" r=\"1.6\" />\r\n <circle cx=\"12\" cy=\"12\" r=\"1.6\" />\r\n <circle cx=\"19\" cy=\"12\" r=\"1.6\" />\r\n </svg>\r\n </button>\r\n </div>\r\n }\r\n <span class=\"pos-header__avatar\" aria-hidden=\"true\">{{ initial() }}</span>\r\n <span class=\"pos-header__clerk-text\">\r\n <span class=\"pos-header__clerk-name\">{{ clerkName() }}</span>\r\n @if (clerkRole()) {\r\n <span class=\"pos-header__clerk-role\">{{ clerkRole() }}</span>\r\n }\r\n </span>\r\n </div>\r\n }\r\n @if (menuOpen()) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-header__backdrop\"\r\n aria-label=\"Close menu\"\r\n (click)=\"closeMenu()\"\r\n ></button>\r\n <div\r\n class=\"pos-header__menu\"\r\n role=\"menu\"\r\n [style.top]=\"menuTop()\"\r\n [style.right]=\"menuRight()\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"pos-header__logout\"\r\n role=\"menuitem\"\r\n (click)=\"onSignOut()\"\r\n >\r\n {{ signOutLabel() }}\r\n </button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--pos-space-sm) var(--pos-space-md);box-sizing:border-box;width:100%;min-width:0;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}.pos-header__identity,.pos-header__session{display:flex;flex-wrap:wrap;align-items:center;gap:var(--pos-space-sm) var(--pos-space-md);min-width:0}.pos-header__session{position:relative;margin-left:auto}.pos-header__brand{display:flex;align-items:center;gap:var(--pos-space-sm);min-width:0}.pos-header__brand-image{flex:0 0 auto;width:auto;height:var(--pos-space-xl);color:var(--pos-color-ink)}.pos-header__brand-label{font-family:var(--pos-font-family-display);font-weight:var(--pos-font-weight-bold);letter-spacing:var(--pos-letter-spacing-brand)}.pos-header__title{margin:0;font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold)}.pos-header__context{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-header__clerk{display:flex;align-items:center;gap:var(--pos-space-sm);min-width:0}.pos-header__avatar{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:var(--pos-button-min-height);height:var(--pos-button-min-height);border-radius:var(--pos-radius-pill);background:var(--pos-color-primary);color:var(--pos-color-on-primary);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold)}.pos-header__clerk-text{display:flex;flex-direction:column;min-width:0}.pos-header__clerk-name{font-weight:var(--pos-font-weight-bold);line-height:1.2}.pos-header__clerk-role{color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);line-height:1.2;text-transform:lowercase}.pos-header__menu-anchor{position:relative;flex:0 0 auto}.pos-header__menu-button{display:inline-flex;align-items:center;justify-content:center;width:var(--pos-button-min-height);height:var(--pos-button-min-height);padding:0;border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-pill);background:var(--pos-color-surface);color:var(--pos-color-text-muted);cursor:pointer}.pos-header__menu-button svg{width:1.25rem;height:1.25rem;fill:currentColor}.pos-header__menu-button:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:default}.pos-header__backdrop{position:fixed;inset:0;z-index:20;border:0;background:transparent;cursor:default}.pos-header__menu{position:fixed;z-index:21;box-sizing:border-box;width:16rem;padding:var(--pos-space-sm);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface);box-shadow:var(--pos-shadow-overlay)}.pos-header__logout{display:flex;align-items:center;width:100%;min-height:var(--pos-button-min-height);padding:0 var(--pos-space-md);border:0;border-radius:var(--pos-radius-md);background:transparent;color:var(--pos-color-danger);font:inherit;font-weight:var(--pos-font-weight-semibold);text-align:left;cursor:pointer}.pos-header__logout:hover{background:color-mix(in srgb,var(--pos-color-danger) 12%,var(--pos-color-surface))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
238
269
|
}
|
|
239
270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosHeader, decorators: [{
|
|
240
271
|
type: Component,
|
|
241
272
|
args: [{ selector: 'pos-header', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
242
273
|
class: 'pos-header',
|
|
243
274
|
role: 'banner',
|
|
244
|
-
|
|
245
|
-
|
|
275
|
+
'(window:resize)': 'onViewportChange()',
|
|
276
|
+
}, template: "<div class=\"pos-header__identity\">\r\n @if (showBrandImage() || brandLabel()) {\r\n <div class=\"pos-header__brand\">\r\n @if (showBrandImage()) {\r\n @if (brandImage()) {\r\n <img\r\n class=\"pos-header__brand-image\"\r\n [src]=\"brandImage()\"\r\n [alt]=\"brandLabel() ? '' : 'Brand'\"\r\n />\r\n } @else {\r\n <svg\r\n class=\"pos-header__brand-image\"\r\n viewBox=\"492.40 241.70 51.34 54.94\"\r\n [attr.aria-hidden]=\"brandLabel() ? true : null\"\r\n [attr.aria-label]=\"brandLabel() ? null : 'Retalia'\"\r\n >\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M 522.628906 291.910156 C 522.636719 293.0625 523.441406 293.511719 524.425781 292.914062 L 540.464844 283.207031 C 541.449219 282.613281 542.246094 281.195312 542.246094 280.046875 L 542.246094 261.132812 C 542.246094 259.980469 541.441406 259.523438 540.453125 260.113281 L 524.292969 269.691406 C 523.300781 270.277344 522.503906 271.683594 522.511719 272.835938 Z M 522.628906 291.910156\"\r\n />\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M 539.097656 253.351562 L 517.101562 243.664062 C 516.066406 243.203125 514.417969 243.265625 513.421875 243.804688 L 495.835938 253.308594 C 494.839844 253.847656 494.027344 255.214844 494.023438 256.367188 L 493.910156 280.140625 C 493.902344 281.292969 494.699219 282.679688 495.683594 283.234375 L 501.734375 286.640625 C 502.71875 287.199219 503.503906 286.71875 503.480469 285.566406 L 503.214844 271.488281 C 503.207031 271.082031 503.492188 270.894531 503.855469 271.066406 L 506.128906 272.148438 C 507.152344 272.636719 507.980469 273.960938 507.980469 275.113281 L 507.980469 287.839844 C 507.980469 288.992188 508.773438 290.394531 509.746094 290.972656 L 515.777344 294.5625 C 516.753906 295.140625 517.554688 294.679688 517.566406 293.527344 L 517.800781 273.300781 C 517.808594 272.488281 517.539062 271.238281 517.195312 270.503906 L 515.460938 266.789062 C 515.292969 266.421875 515.476562 266.109375 515.871094 266.089844 L 518.925781 265.941406 C 520.050781 265.886719 521.761719 265.378906 522.738281 264.808594 L 539.195312 255.21875 C 540.175781 254.648438 540.132812 253.8125 539.097656 253.351562 M 520.609375 255.050781 L 518.019531 256.585938 C 516.914062 257.125 515.734375 257.289062 514.710938 256.804688 L 511.078125 255.101562 C 510.054688 254.621094 510.023438 253.773438 511.003906 253.210938 L 513.835938 251.597656 C 514.53125 251.203125 515.691406 251.132812 516.425781 251.445312 L 520.449219 253.128906 C 521.488281 253.570312 521.5625 254.429688 520.609375 255.050781\"\r\n />\r\n </svg>\r\n }\r\n }\r\n @if (brandLabel()) {\r\n <span class=\"pos-header__brand-label\">{{ brandLabel() }}</span>\r\n }\r\n </div>\r\n }\r\n @if (title()) {\r\n <h1 class=\"pos-header__title\">{{ title() }}</h1>\r\n }\r\n @if (context()) {\r\n <p class=\"pos-header__context\">{{ context() }}</p>\r\n }\r\n</div>\r\n\r\n<div #session class=\"pos-header__session\">\r\n @if (clerkName()) {\r\n <div class=\"pos-header__clerk\">\r\n @if (canSignOut()) {\r\n <div class=\"pos-header__menu-anchor\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-header__menu-button\"\r\n [attr.aria-label]=\"menuLabel()\"\r\n [attr.aria-expanded]=\"menuOpen()\"\r\n aria-haspopup=\"menu\"\r\n [disabled]=\"disabled()\"\r\n (click)=\"toggleMenu()\"\r\n >\r\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\r\n <circle cx=\"5\" cy=\"12\" r=\"1.6\" />\r\n <circle cx=\"12\" cy=\"12\" r=\"1.6\" />\r\n <circle cx=\"19\" cy=\"12\" r=\"1.6\" />\r\n </svg>\r\n </button>\r\n </div>\r\n }\r\n <span class=\"pos-header__avatar\" aria-hidden=\"true\">{{ initial() }}</span>\r\n <span class=\"pos-header__clerk-text\">\r\n <span class=\"pos-header__clerk-name\">{{ clerkName() }}</span>\r\n @if (clerkRole()) {\r\n <span class=\"pos-header__clerk-role\">{{ clerkRole() }}</span>\r\n }\r\n </span>\r\n </div>\r\n }\r\n @if (menuOpen()) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-header__backdrop\"\r\n aria-label=\"Close menu\"\r\n (click)=\"closeMenu()\"\r\n ></button>\r\n <div\r\n class=\"pos-header__menu\"\r\n role=\"menu\"\r\n [style.top]=\"menuTop()\"\r\n [style.right]=\"menuRight()\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"pos-header__logout\"\r\n role=\"menuitem\"\r\n (click)=\"onSignOut()\"\r\n >\r\n {{ signOutLabel() }}\r\n </button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--pos-space-sm) var(--pos-space-md);box-sizing:border-box;width:100%;min-width:0;color:var(--pos-color-text);font-family:var(--pos-font-family);font-size:var(--pos-font-size-md)}.pos-header__identity,.pos-header__session{display:flex;flex-wrap:wrap;align-items:center;gap:var(--pos-space-sm) var(--pos-space-md);min-width:0}.pos-header__session{position:relative;margin-left:auto}.pos-header__brand{display:flex;align-items:center;gap:var(--pos-space-sm);min-width:0}.pos-header__brand-image{flex:0 0 auto;width:auto;height:var(--pos-space-xl);color:var(--pos-color-ink)}.pos-header__brand-label{font-family:var(--pos-font-family-display);font-weight:var(--pos-font-weight-bold);letter-spacing:var(--pos-letter-spacing-brand)}.pos-header__title{margin:0;font-size:var(--pos-font-size-xl);font-weight:var(--pos-font-weight-bold)}.pos-header__context{margin:0;color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm)}.pos-header__clerk{display:flex;align-items:center;gap:var(--pos-space-sm);min-width:0}.pos-header__avatar{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:var(--pos-button-min-height);height:var(--pos-button-min-height);border-radius:var(--pos-radius-pill);background:var(--pos-color-primary);color:var(--pos-color-on-primary);font-size:var(--pos-font-size-lg);font-weight:var(--pos-font-weight-bold)}.pos-header__clerk-text{display:flex;flex-direction:column;min-width:0}.pos-header__clerk-name{font-weight:var(--pos-font-weight-bold);line-height:1.2}.pos-header__clerk-role{color:var(--pos-color-text-muted);font-size:var(--pos-font-size-sm);line-height:1.2;text-transform:lowercase}.pos-header__menu-anchor{position:relative;flex:0 0 auto}.pos-header__menu-button{display:inline-flex;align-items:center;justify-content:center;width:var(--pos-button-min-height);height:var(--pos-button-min-height);padding:0;border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-pill);background:var(--pos-color-surface);color:var(--pos-color-text-muted);cursor:pointer}.pos-header__menu-button svg{width:1.25rem;height:1.25rem;fill:currentColor}.pos-header__menu-button:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:default}.pos-header__backdrop{position:fixed;inset:0;z-index:20;border:0;background:transparent;cursor:default}.pos-header__menu{position:fixed;z-index:21;box-sizing:border-box;width:16rem;padding:var(--pos-space-sm);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-lg);background:var(--pos-color-surface);box-shadow:var(--pos-shadow-overlay)}.pos-header__logout{display:flex;align-items:center;width:100%;min-height:var(--pos-button-min-height);padding:0 var(--pos-space-md);border:0;border-radius:var(--pos-radius-md);background:transparent;color:var(--pos-color-danger);font:inherit;font-weight:var(--pos-font-weight-semibold);text-align:left;cursor:pointer}.pos-header__logout:hover{background:color-mix(in srgb,var(--pos-color-danger) 12%,var(--pos-color-surface))}\n"] }]
|
|
277
|
+
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], showBrandImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBrandImage", required: false }] }], brandImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandImage", required: false }] }], brandLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandLabel", required: false }] }], clerkName: [{ type: i0.Input, args: [{ isSignal: true, alias: "clerkName", required: false }] }], clerkRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "clerkRole", required: false }] }], signOutLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "signOutLabel", required: false }] }], menuLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuLabel", required: false }] }], canSignOut: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSignOut", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], action: [{ type: i0.Output, args: ["action"] }], sessionRef: [{ type: i0.ViewChild, args: ['session', { isSignal: true }] }] } });
|
|
246
278
|
|
|
247
279
|
class PosTransactionActionBar {
|
|
248
280
|
/** Envelope action names. `clearBasket` shows Cancel. `tender` shows Cash. */
|
|
@@ -861,11 +893,9 @@ function setPaneFullWidth(layout, id, enabled) {
|
|
|
861
893
|
return pane;
|
|
862
894
|
}
|
|
863
895
|
if (!enabled) {
|
|
864
|
-
|
|
865
|
-
return rest;
|
|
896
|
+
return copyPaneWithout(pane, 'span', 'fullWidth');
|
|
866
897
|
}
|
|
867
|
-
|
|
868
|
-
return { ...rest, fullWidth: true };
|
|
898
|
+
return { ...copyPaneWithout(pane, 'span'), fullWidth: true };
|
|
869
899
|
}),
|
|
870
900
|
};
|
|
871
901
|
}
|
|
@@ -892,8 +922,7 @@ function setPaneVisible(layout, id, visible) {
|
|
|
892
922
|
return pane;
|
|
893
923
|
}
|
|
894
924
|
if (visible) {
|
|
895
|
-
|
|
896
|
-
return shown;
|
|
925
|
+
return copyPaneWithout(pane, 'visible');
|
|
897
926
|
}
|
|
898
927
|
return { ...pane, visible: false };
|
|
899
928
|
}),
|
|
@@ -939,19 +968,25 @@ function placedPanes(layout, present) {
|
|
|
939
968
|
}
|
|
940
969
|
return panes;
|
|
941
970
|
}
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
const
|
|
945
|
-
|
|
946
|
-
|
|
971
|
+
/** Rebuilds a pane without the named optional flags so they stay absent from the layout object. */
|
|
972
|
+
function copyPaneWithout(pane, ...drop) {
|
|
973
|
+
const omit = new Set(drop);
|
|
974
|
+
let next = {
|
|
975
|
+
id: pane.id,
|
|
976
|
+
column: pane.column,
|
|
977
|
+
order: pane.order,
|
|
978
|
+
weight: pane.weight,
|
|
979
|
+
};
|
|
980
|
+
if (!omit.has('fullWidth') && pane.fullWidth === true) {
|
|
981
|
+
next = { ...next, fullWidth: true };
|
|
947
982
|
}
|
|
948
|
-
if (
|
|
949
|
-
|
|
983
|
+
if (!omit.has('span') && pane.span != null) {
|
|
984
|
+
next = { ...next, span: pane.span };
|
|
950
985
|
}
|
|
951
|
-
if (
|
|
952
|
-
|
|
986
|
+
if (!omit.has('visible') && pane.visible === false) {
|
|
987
|
+
next = { ...next, visible: false };
|
|
953
988
|
}
|
|
954
|
-
return
|
|
989
|
+
return next;
|
|
955
990
|
}
|
|
956
991
|
/** On a narrow screen, keep the header at the top and the action bar at the bottom. */
|
|
957
992
|
function compactStack(left, right) {
|
|
@@ -2062,7 +2097,7 @@ class PosWorkspace {
|
|
|
2062
2097
|
}
|
|
2063
2098
|
}
|
|
2064
2099
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosWorkspace, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2065
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosWorkspace, isStandalone: true, selector: "pos-workspace", inputs: { editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange", layoutExport: "layoutExport" }, host: { properties: { "class.pos-workspace--editing": "editing()", "class.pos-workspace--dragging": "draggingPane() !== null" }, classAttribute: "pos-workspace" }, providers: [{ provide: POS_WORKSPACE, useExisting: forwardRef(() => PosWorkspace) }], queries: [{ propertyName: "paneRefs", predicate: PosWorkspacePane, isSignal: true }], viewQueries: [{ propertyName: "frameRef", first: true, predicate: ["frame"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (editing()) {\r\n <div class=\"pos-workspace__tools\">\r\n <div class=\"pos-workspace__palette\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__palette-toggle\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-expanded]=\"paletteOpen()\"\r\n (click)=\"togglePalette()\"\r\n >\r\n Components\r\n </button>\r\n @if (paletteOpen()) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__palette-backdrop\"\r\n tabindex=\"-1\"\r\n aria-label=\"Close components\"\r\n (click)=\"closePalette()\"\r\n ></button>\r\n <div\r\n class=\"pos-workspace__palette-menu\"\r\n [class.pos-workspace__palette-menu--lifted]=\"paletteMenuLifted()\"\r\n role=\"menu\"\r\n aria-label=\"Components\"\r\n (keydown)=\"onPaletteMenuKeydown($event)\"\r\n >\r\n @for (id of palette(); track id) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__palette-item\"\r\n role=\"menuitem\"\r\n [attr.data-palette]=\"id\"\r\n (pointerdown)=\"onPalettePointerDown(id, $event)\"\r\n (pointermove)=\"onPalettePointerMove($event)\"\r\n (pointerup)=\"onPalettePointerUp($event)\"\r\n (pointercancel)=\"onPalettePointerCancel()\"\r\n (click)=\"onPaletteClick(id)\"\r\n >\r\n {{ paneLabel(id) }}\r\n </button>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__palette-item\"\r\n role=\"menuitem\"\r\n data-palette=\"empty\"\r\n (pointerdown)=\"onPalettePointerDown('empty', $event)\"\r\n (pointermove)=\"onPalettePointerMove($event)\"\r\n (pointerup)=\"onPalettePointerUp($event)\"\r\n (pointercancel)=\"onPalettePointerCancel()\"\r\n (click)=\"onPaletteClick('empty')\"\r\n >\r\n Custom container\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"pos-workspace__actions\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__undo\"\r\n [disabled]=\"!canUndo()\"\r\n (click)=\"undoLayout()\"\r\n >\r\n Undo\r\n </button>\r\n <button type=\"button\" class=\"pos-workspace__new\" (click)=\"resetLayout()\">New</button>\r\n <button type=\"button\" class=\"pos-workspace__default\" (click)=\"applyDefaultLayout()\">\r\n Default layout\r\n </button>\r\n <button type=\"button\" class=\"pos-workspace__import\" (click)=\"layoutFile.click()\">\r\n Import layout\r\n </button>\r\n <button type=\"button\" class=\"pos-workspace__export\" (click)=\"exportLayout()\">\r\n Export layout\r\n </button>\r\n <input\r\n #layoutFile\r\n class=\"pos-workspace__file\"\r\n type=\"file\"\r\n accept=\"application/json,.json\"\r\n aria-label=\"Import layout file\"\r\n (change)=\"importLayoutFile($event)\"\r\n />\r\n </div>\r\n </div>\r\n}\r\n\r\n<div\r\n #frame\r\n class=\"pos-workspace__grid\"\r\n [style.grid-template-columns]=\"grid().columns\"\r\n [style.grid-template-rows]=\"grid().rows\"\r\n>\r\n <ng-content />\r\n @for (slot of emptySlots(); track slot) {\r\n <pos-workspace-pane [paneId]=\"slot\" [placeholder]=\"true\" />\r\n }\r\n @if (showSplitter()) {\r\n <div\r\n class=\"pos-workspace__splitter\"\r\n role=\"separator\"\r\n aria-orientation=\"vertical\"\r\n aria-label=\"Resize columns\"\r\n aria-valuemin=\"28\"\r\n aria-valuemax=\"72\"\r\n [attr.aria-valuenow]=\"ratioPercent()\"\r\n tabindex=\"0\"\r\n [style.grid-row]=\"splitterRow()\"\r\n [style.left]=\"splitterLeft()\"\r\n (pointerdown)=\"onSplitterDown($event)\"\r\n (pointermove)=\"onSplitterMove($event)\"\r\n (pointerup)=\"onSplitterUp()\"\r\n (pointercancel)=\"onSplitterUp()\"\r\n (keydown)=\"onSplitterKeydown($event)\"\r\n ></div>\r\n }\r\n</div>\r\n\r\n@for (hint of dropHints(); track hint.kind) {\r\n <div\r\n class=\"pos-workspace__hint\"\r\n [class.pos-workspace__hint--top]=\"hint.kind === 'top'\"\r\n [class.pos-workspace__hint--bottom]=\"hint.kind === 'bottom'\"\r\n [class.pos-workspace__hint--dock]=\"hint.kind === 'dock'\"\r\n [style.top.px]=\"hint.top\"\r\n [style.left.px]=\"hint.left\"\r\n [style.width.px]=\"hint.width\"\r\n [style.height.px]=\"hint.height\"\r\n aria-hidden=\"true\"\r\n ></div>\r\n}\r\n\r\n@if (dropIndicator(); as indicator) {\r\n <div\r\n class=\"pos-workspace__drop\"\r\n [class.pos-workspace__drop--line]=\"indicator.line\"\r\n [style.top.px]=\"indicator.top\"\r\n [style.left.px]=\"indicator.left\"\r\n [style.width.px]=\"indicator.width\"\r\n [style.height.px]=\"indicator.height\"\r\n aria-hidden=\"true\"\r\n ></div>\r\n}\r\n\r\n<div class=\"pos-workspace__status\" aria-live=\"polite\">{{ status() }}</div>\r\n", styles: [":host{display:flex;position:relative;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;color:var(--pos-color-text);font-family:var(--pos-font-family)}.pos-workspace__tools{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--pos-space-sm);padding:var(--pos-space-sm) var(--pos-space-lg) 0}.pos-workspace__palette{position:relative}.pos-workspace__palette-toggle{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:1px dashed var(--pos-color-primary);border-radius:var(--pos-radius-md);background:var(--pos-color-surface);color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);cursor:pointer}.pos-workspace__palette-backdrop{position:fixed;z-index:5;inset:0;padding:0;border:0;background:transparent}.pos-workspace__palette-menu{position:absolute;z-index:6;top:calc(100% + var(--pos-space-xs));left:0;display:flex;flex-direction:column;min-width:14rem;max-height:min(20rem,70vh);overflow:auto;padding:var(--pos-space-xs);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface)}.pos-workspace__palette-menu--lifted{visibility:hidden}.pos-workspace__palette-item{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-md);border:0;border-radius:var(--pos-radius-sm);background:transparent;color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);text-align:left;cursor:grab;touch-action:none}.pos-workspace__palette-item:hover{background:color-mix(in srgb,var(--pos-color-primary) 12%,var(--pos-color-surface))}.pos-workspace__palette-toggle:focus-visible,.pos-workspace__palette-item:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}.pos-workspace__actions{display:flex;flex-wrap:wrap;gap:var(--pos-space-sm)}.pos-workspace__undo,.pos-workspace__new,.pos-workspace__default,.pos-workspace__export,.pos-workspace__import{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:1px solid var(--pos-color-key-border);border-radius:var(--pos-radius-md);background:var(--pos-color-key);color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);cursor:pointer}.pos-workspace__file{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.pos-workspace__undo:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:default}.pos-workspace__undo:focus-visible,.pos-workspace__new:focus-visible,.pos-workspace__default:focus-visible,.pos-workspace__export:focus-visible,.pos-workspace__import:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}:host(.pos-workspace--dragging){cursor:grabbing;-webkit-user-select:none;user-select:none}.pos-workspace__grid{display:grid;position:relative;flex:1 1 auto;box-sizing:border-box;min-height:0;padding:var(--pos-space-lg);gap:var(--pos-space-md)}.pos-workspace__hint{position:absolute;z-index:2;box-sizing:border-box;border:2px dashed color-mix(in srgb,var(--pos-color-primary) 55%,transparent);border-radius:var(--pos-radius-md);background:color-mix(in srgb,var(--pos-color-primary) 8%,transparent);pointer-events:none}.pos-workspace__drop{position:absolute;z-index:3;box-sizing:border-box;border:2px dashed var(--pos-color-primary);border-radius:var(--pos-radius-md);background:color-mix(in srgb,var(--pos-color-primary) 24%,transparent);pointer-events:none}.pos-workspace__drop--line{border:0;border-radius:var(--pos-radius-pill);background:var(--pos-color-primary)}.pos-workspace__splitter{position:absolute;z-index:4;top:0;bottom:0;grid-column:1/-1;width:var(--pos-space-xl);padding:0;border:0;background:transparent;cursor:ew-resize;touch-action:none;transform:translate(-50%)}.pos-workspace__splitter:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;width:var(--pos-space-xs);border-radius:var(--pos-radius-pill);background:var(--pos-color-primary);transform:translate(-50%)}.pos-workspace__splitter:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}.pos-workspace__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: PosWorkspacePane, selector: "pos-workspace-pane", inputs: ["paneId", "placeholder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2100
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: PosWorkspace, isStandalone: true, selector: "pos-workspace", inputs: { editing: { classPropertyName: "editing", publicName: "editing", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { layoutChange: "layoutChange", layoutExport: "layoutExport" }, host: { properties: { "class.pos-workspace--editing": "editing()", "class.pos-workspace--dragging": "draggingPane() !== null" }, classAttribute: "pos-workspace" }, providers: [{ provide: POS_WORKSPACE, useExisting: forwardRef(() => PosWorkspace) }], queries: [{ propertyName: "paneRefs", predicate: PosWorkspacePane, isSignal: true }], viewQueries: [{ propertyName: "frameRef", first: true, predicate: ["frame"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (editing()) {\r\n <div class=\"pos-workspace__tools\">\r\n <div class=\"pos-workspace__palette\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__palette-toggle\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-expanded]=\"paletteOpen()\"\r\n (click)=\"togglePalette()\"\r\n >\r\n Components\r\n </button>\r\n @if (paletteOpen()) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__palette-backdrop\"\r\n tabindex=\"-1\"\r\n aria-label=\"Close components\"\r\n (click)=\"closePalette()\"\r\n ></button>\r\n <div\r\n class=\"pos-workspace__palette-menu\"\r\n [class.pos-workspace__palette-menu--lifted]=\"paletteMenuLifted()\"\r\n role=\"menu\"\r\n tabindex=\"-1\"\r\n aria-label=\"Components\"\r\n (keydown)=\"onPaletteMenuKeydown($event)\"\r\n >\r\n @for (id of palette(); track id) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__palette-item\"\r\n role=\"menuitem\"\r\n [attr.data-palette]=\"id\"\r\n (pointerdown)=\"onPalettePointerDown(id, $event)\"\r\n (pointermove)=\"onPalettePointerMove($event)\"\r\n (pointerup)=\"onPalettePointerUp($event)\"\r\n (pointercancel)=\"onPalettePointerCancel()\"\r\n (click)=\"onPaletteClick(id)\"\r\n >\r\n {{ paneLabel(id) }}\r\n </button>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__palette-item\"\r\n role=\"menuitem\"\r\n data-palette=\"empty\"\r\n (pointerdown)=\"onPalettePointerDown('empty', $event)\"\r\n (pointermove)=\"onPalettePointerMove($event)\"\r\n (pointerup)=\"onPalettePointerUp($event)\"\r\n (pointercancel)=\"onPalettePointerCancel()\"\r\n (click)=\"onPaletteClick('empty')\"\r\n >\r\n Custom container\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"pos-workspace__actions\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__undo\"\r\n [disabled]=\"!canUndo()\"\r\n (click)=\"undoLayout()\"\r\n >\r\n Undo\r\n </button>\r\n <button type=\"button\" class=\"pos-workspace__new\" (click)=\"resetLayout()\">New</button>\r\n <button type=\"button\" class=\"pos-workspace__default\" (click)=\"applyDefaultLayout()\">\r\n Default layout\r\n </button>\r\n <button type=\"button\" class=\"pos-workspace__import\" (click)=\"layoutFile.click()\">\r\n Import layout\r\n </button>\r\n <button type=\"button\" class=\"pos-workspace__export\" (click)=\"exportLayout()\">\r\n Export layout\r\n </button>\r\n <input\r\n #layoutFile\r\n class=\"pos-workspace__file\"\r\n type=\"file\"\r\n accept=\"application/json,.json\"\r\n aria-label=\"Import layout file\"\r\n (change)=\"importLayoutFile($event)\"\r\n />\r\n </div>\r\n </div>\r\n}\r\n\r\n<div\r\n #frame\r\n class=\"pos-workspace__grid\"\r\n [style.grid-template-columns]=\"grid().columns\"\r\n [style.grid-template-rows]=\"grid().rows\"\r\n>\r\n <ng-content />\r\n @for (slot of emptySlots(); track slot) {\r\n <pos-workspace-pane [paneId]=\"slot\" [placeholder]=\"true\" />\r\n }\r\n @if (showSplitter()) {\r\n <div\r\n class=\"pos-workspace__splitter\"\r\n role=\"separator\"\r\n aria-orientation=\"vertical\"\r\n aria-label=\"Resize columns\"\r\n aria-valuemin=\"28\"\r\n aria-valuemax=\"72\"\r\n [attr.aria-valuenow]=\"ratioPercent()\"\r\n tabindex=\"0\"\r\n [style.grid-row]=\"splitterRow()\"\r\n [style.left]=\"splitterLeft()\"\r\n (pointerdown)=\"onSplitterDown($event)\"\r\n (pointermove)=\"onSplitterMove($event)\"\r\n (pointerup)=\"onSplitterUp()\"\r\n (pointercancel)=\"onSplitterUp()\"\r\n (keydown)=\"onSplitterKeydown($event)\"\r\n ></div>\r\n }\r\n</div>\r\n\r\n@for (hint of dropHints(); track hint.kind) {\r\n <div\r\n class=\"pos-workspace__hint\"\r\n [class.pos-workspace__hint--top]=\"hint.kind === 'top'\"\r\n [class.pos-workspace__hint--bottom]=\"hint.kind === 'bottom'\"\r\n [class.pos-workspace__hint--dock]=\"hint.kind === 'dock'\"\r\n [style.top.px]=\"hint.top\"\r\n [style.left.px]=\"hint.left\"\r\n [style.width.px]=\"hint.width\"\r\n [style.height.px]=\"hint.height\"\r\n aria-hidden=\"true\"\r\n ></div>\r\n}\r\n\r\n@if (dropIndicator(); as indicator) {\r\n <div\r\n class=\"pos-workspace__drop\"\r\n [class.pos-workspace__drop--line]=\"indicator.line\"\r\n [style.top.px]=\"indicator.top\"\r\n [style.left.px]=\"indicator.left\"\r\n [style.width.px]=\"indicator.width\"\r\n [style.height.px]=\"indicator.height\"\r\n aria-hidden=\"true\"\r\n ></div>\r\n}\r\n\r\n<div class=\"pos-workspace__status\" aria-live=\"polite\">{{ status() }}</div>\r\n", styles: [":host{display:flex;position:relative;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;color:var(--pos-color-text);font-family:var(--pos-font-family)}.pos-workspace__tools{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--pos-space-sm);padding:var(--pos-space-sm) var(--pos-space-lg) 0}.pos-workspace__palette{position:relative}.pos-workspace__palette-toggle{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:1px dashed var(--pos-color-primary);border-radius:var(--pos-radius-md);background:var(--pos-color-surface);color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);cursor:pointer}.pos-workspace__palette-backdrop{position:fixed;z-index:5;inset:0;padding:0;border:0;background:transparent}.pos-workspace__palette-menu{position:absolute;z-index:6;top:calc(100% + var(--pos-space-xs));left:0;display:flex;flex-direction:column;min-width:14rem;max-height:min(20rem,70vh);overflow:auto;padding:var(--pos-space-xs);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface)}.pos-workspace__palette-menu--lifted{visibility:hidden}.pos-workspace__palette-item{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-md);border:0;border-radius:var(--pos-radius-sm);background:transparent;color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);text-align:left;cursor:grab;touch-action:none}.pos-workspace__palette-item:hover{background:color-mix(in srgb,var(--pos-color-primary) 12%,var(--pos-color-surface))}.pos-workspace__palette-toggle:focus-visible,.pos-workspace__palette-item:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}.pos-workspace__actions{display:flex;flex-wrap:wrap;gap:var(--pos-space-sm)}.pos-workspace__undo,.pos-workspace__new,.pos-workspace__default,.pos-workspace__export,.pos-workspace__import{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:1px solid var(--pos-color-key-border);border-radius:var(--pos-radius-md);background:var(--pos-color-key);color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);cursor:pointer}.pos-workspace__file{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.pos-workspace__undo:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:default}.pos-workspace__undo:focus-visible,.pos-workspace__new:focus-visible,.pos-workspace__default:focus-visible,.pos-workspace__export:focus-visible,.pos-workspace__import:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}:host(.pos-workspace--dragging){cursor:grabbing;-webkit-user-select:none;user-select:none}.pos-workspace__grid{display:grid;position:relative;flex:1 1 auto;box-sizing:border-box;min-height:0;padding:var(--pos-space-lg);gap:var(--pos-space-md)}.pos-workspace__hint{position:absolute;z-index:2;box-sizing:border-box;border:2px dashed color-mix(in srgb,var(--pos-color-primary) 55%,transparent);border-radius:var(--pos-radius-md);background:color-mix(in srgb,var(--pos-color-primary) 8%,transparent);pointer-events:none}.pos-workspace__drop{position:absolute;z-index:3;box-sizing:border-box;border:2px dashed var(--pos-color-primary);border-radius:var(--pos-radius-md);background:color-mix(in srgb,var(--pos-color-primary) 24%,transparent);pointer-events:none}.pos-workspace__drop--line{border:0;border-radius:var(--pos-radius-pill);background:var(--pos-color-primary)}.pos-workspace__splitter{position:absolute;z-index:4;top:0;bottom:0;grid-column:1/-1;width:var(--pos-space-xl);padding:0;border:0;background:transparent;cursor:ew-resize;touch-action:none;transform:translate(-50%)}.pos-workspace__splitter:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;width:var(--pos-space-xs);border-radius:var(--pos-radius-pill);background:var(--pos-color-primary);transform:translate(-50%)}.pos-workspace__splitter:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}.pos-workspace__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "component", type: PosWorkspacePane, selector: "pos-workspace-pane", inputs: ["paneId", "placeholder"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2066
2101
|
}
|
|
2067
2102
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: PosWorkspace, decorators: [{
|
|
2068
2103
|
type: Component,
|
|
@@ -2070,7 +2105,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
|
|
|
2070
2105
|
class: 'pos-workspace',
|
|
2071
2106
|
'[class.pos-workspace--editing]': 'editing()',
|
|
2072
2107
|
'[class.pos-workspace--dragging]': 'draggingPane() !== null',
|
|
2073
|
-
}, template: "@if (editing()) {\r\n <div class=\"pos-workspace__tools\">\r\n <div class=\"pos-workspace__palette\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__palette-toggle\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-expanded]=\"paletteOpen()\"\r\n (click)=\"togglePalette()\"\r\n >\r\n Components\r\n </button>\r\n @if (paletteOpen()) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__palette-backdrop\"\r\n tabindex=\"-1\"\r\n aria-label=\"Close components\"\r\n (click)=\"closePalette()\"\r\n ></button>\r\n <div\r\n class=\"pos-workspace__palette-menu\"\r\n [class.pos-workspace__palette-menu--lifted]=\"paletteMenuLifted()\"\r\n role=\"menu\"\r\n aria-label=\"Components\"\r\n (keydown)=\"onPaletteMenuKeydown($event)\"\r\n >\r\n @for (id of palette(); track id) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__palette-item\"\r\n role=\"menuitem\"\r\n [attr.data-palette]=\"id\"\r\n (pointerdown)=\"onPalettePointerDown(id, $event)\"\r\n (pointermove)=\"onPalettePointerMove($event)\"\r\n (pointerup)=\"onPalettePointerUp($event)\"\r\n (pointercancel)=\"onPalettePointerCancel()\"\r\n (click)=\"onPaletteClick(id)\"\r\n >\r\n {{ paneLabel(id) }}\r\n </button>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__palette-item\"\r\n role=\"menuitem\"\r\n data-palette=\"empty\"\r\n (pointerdown)=\"onPalettePointerDown('empty', $event)\"\r\n (pointermove)=\"onPalettePointerMove($event)\"\r\n (pointerup)=\"onPalettePointerUp($event)\"\r\n (pointercancel)=\"onPalettePointerCancel()\"\r\n (click)=\"onPaletteClick('empty')\"\r\n >\r\n Custom container\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"pos-workspace__actions\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__undo\"\r\n [disabled]=\"!canUndo()\"\r\n (click)=\"undoLayout()\"\r\n >\r\n Undo\r\n </button>\r\n <button type=\"button\" class=\"pos-workspace__new\" (click)=\"resetLayout()\">New</button>\r\n <button type=\"button\" class=\"pos-workspace__default\" (click)=\"applyDefaultLayout()\">\r\n Default layout\r\n </button>\r\n <button type=\"button\" class=\"pos-workspace__import\" (click)=\"layoutFile.click()\">\r\n Import layout\r\n </button>\r\n <button type=\"button\" class=\"pos-workspace__export\" (click)=\"exportLayout()\">\r\n Export layout\r\n </button>\r\n <input\r\n #layoutFile\r\n class=\"pos-workspace__file\"\r\n type=\"file\"\r\n accept=\"application/json,.json\"\r\n aria-label=\"Import layout file\"\r\n (change)=\"importLayoutFile($event)\"\r\n />\r\n </div>\r\n </div>\r\n}\r\n\r\n<div\r\n #frame\r\n class=\"pos-workspace__grid\"\r\n [style.grid-template-columns]=\"grid().columns\"\r\n [style.grid-template-rows]=\"grid().rows\"\r\n>\r\n <ng-content />\r\n @for (slot of emptySlots(); track slot) {\r\n <pos-workspace-pane [paneId]=\"slot\" [placeholder]=\"true\" />\r\n }\r\n @if (showSplitter()) {\r\n <div\r\n class=\"pos-workspace__splitter\"\r\n role=\"separator\"\r\n aria-orientation=\"vertical\"\r\n aria-label=\"Resize columns\"\r\n aria-valuemin=\"28\"\r\n aria-valuemax=\"72\"\r\n [attr.aria-valuenow]=\"ratioPercent()\"\r\n tabindex=\"0\"\r\n [style.grid-row]=\"splitterRow()\"\r\n [style.left]=\"splitterLeft()\"\r\n (pointerdown)=\"onSplitterDown($event)\"\r\n (pointermove)=\"onSplitterMove($event)\"\r\n (pointerup)=\"onSplitterUp()\"\r\n (pointercancel)=\"onSplitterUp()\"\r\n (keydown)=\"onSplitterKeydown($event)\"\r\n ></div>\r\n }\r\n</div>\r\n\r\n@for (hint of dropHints(); track hint.kind) {\r\n <div\r\n class=\"pos-workspace__hint\"\r\n [class.pos-workspace__hint--top]=\"hint.kind === 'top'\"\r\n [class.pos-workspace__hint--bottom]=\"hint.kind === 'bottom'\"\r\n [class.pos-workspace__hint--dock]=\"hint.kind === 'dock'\"\r\n [style.top.px]=\"hint.top\"\r\n [style.left.px]=\"hint.left\"\r\n [style.width.px]=\"hint.width\"\r\n [style.height.px]=\"hint.height\"\r\n aria-hidden=\"true\"\r\n ></div>\r\n}\r\n\r\n@if (dropIndicator(); as indicator) {\r\n <div\r\n class=\"pos-workspace__drop\"\r\n [class.pos-workspace__drop--line]=\"indicator.line\"\r\n [style.top.px]=\"indicator.top\"\r\n [style.left.px]=\"indicator.left\"\r\n [style.width.px]=\"indicator.width\"\r\n [style.height.px]=\"indicator.height\"\r\n aria-hidden=\"true\"\r\n ></div>\r\n}\r\n\r\n<div class=\"pos-workspace__status\" aria-live=\"polite\">{{ status() }}</div>\r\n", styles: [":host{display:flex;position:relative;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;color:var(--pos-color-text);font-family:var(--pos-font-family)}.pos-workspace__tools{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--pos-space-sm);padding:var(--pos-space-sm) var(--pos-space-lg) 0}.pos-workspace__palette{position:relative}.pos-workspace__palette-toggle{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:1px dashed var(--pos-color-primary);border-radius:var(--pos-radius-md);background:var(--pos-color-surface);color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);cursor:pointer}.pos-workspace__palette-backdrop{position:fixed;z-index:5;inset:0;padding:0;border:0;background:transparent}.pos-workspace__palette-menu{position:absolute;z-index:6;top:calc(100% + var(--pos-space-xs));left:0;display:flex;flex-direction:column;min-width:14rem;max-height:min(20rem,70vh);overflow:auto;padding:var(--pos-space-xs);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface)}.pos-workspace__palette-menu--lifted{visibility:hidden}.pos-workspace__palette-item{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-md);border:0;border-radius:var(--pos-radius-sm);background:transparent;color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);text-align:left;cursor:grab;touch-action:none}.pos-workspace__palette-item:hover{background:color-mix(in srgb,var(--pos-color-primary) 12%,var(--pos-color-surface))}.pos-workspace__palette-toggle:focus-visible,.pos-workspace__palette-item:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}.pos-workspace__actions{display:flex;flex-wrap:wrap;gap:var(--pos-space-sm)}.pos-workspace__undo,.pos-workspace__new,.pos-workspace__default,.pos-workspace__export,.pos-workspace__import{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:1px solid var(--pos-color-key-border);border-radius:var(--pos-radius-md);background:var(--pos-color-key);color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);cursor:pointer}.pos-workspace__file{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.pos-workspace__undo:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:default}.pos-workspace__undo:focus-visible,.pos-workspace__new:focus-visible,.pos-workspace__default:focus-visible,.pos-workspace__export:focus-visible,.pos-workspace__import:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}:host(.pos-workspace--dragging){cursor:grabbing;-webkit-user-select:none;user-select:none}.pos-workspace__grid{display:grid;position:relative;flex:1 1 auto;box-sizing:border-box;min-height:0;padding:var(--pos-space-lg);gap:var(--pos-space-md)}.pos-workspace__hint{position:absolute;z-index:2;box-sizing:border-box;border:2px dashed color-mix(in srgb,var(--pos-color-primary) 55%,transparent);border-radius:var(--pos-radius-md);background:color-mix(in srgb,var(--pos-color-primary) 8%,transparent);pointer-events:none}.pos-workspace__drop{position:absolute;z-index:3;box-sizing:border-box;border:2px dashed var(--pos-color-primary);border-radius:var(--pos-radius-md);background:color-mix(in srgb,var(--pos-color-primary) 24%,transparent);pointer-events:none}.pos-workspace__drop--line{border:0;border-radius:var(--pos-radius-pill);background:var(--pos-color-primary)}.pos-workspace__splitter{position:absolute;z-index:4;top:0;bottom:0;grid-column:1/-1;width:var(--pos-space-xl);padding:0;border:0;background:transparent;cursor:ew-resize;touch-action:none;transform:translate(-50%)}.pos-workspace__splitter:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;width:var(--pos-space-xs);border-radius:var(--pos-radius-pill);background:var(--pos-color-primary);transform:translate(-50%)}.pos-workspace__splitter:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}.pos-workspace__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
|
|
2108
|
+
}, template: "@if (editing()) {\r\n <div class=\"pos-workspace__tools\">\r\n <div class=\"pos-workspace__palette\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__palette-toggle\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-expanded]=\"paletteOpen()\"\r\n (click)=\"togglePalette()\"\r\n >\r\n Components\r\n </button>\r\n @if (paletteOpen()) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__palette-backdrop\"\r\n tabindex=\"-1\"\r\n aria-label=\"Close components\"\r\n (click)=\"closePalette()\"\r\n ></button>\r\n <div\r\n class=\"pos-workspace__palette-menu\"\r\n [class.pos-workspace__palette-menu--lifted]=\"paletteMenuLifted()\"\r\n role=\"menu\"\r\n tabindex=\"-1\"\r\n aria-label=\"Components\"\r\n (keydown)=\"onPaletteMenuKeydown($event)\"\r\n >\r\n @for (id of palette(); track id) {\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__palette-item\"\r\n role=\"menuitem\"\r\n [attr.data-palette]=\"id\"\r\n (pointerdown)=\"onPalettePointerDown(id, $event)\"\r\n (pointermove)=\"onPalettePointerMove($event)\"\r\n (pointerup)=\"onPalettePointerUp($event)\"\r\n (pointercancel)=\"onPalettePointerCancel()\"\r\n (click)=\"onPaletteClick(id)\"\r\n >\r\n {{ paneLabel(id) }}\r\n </button>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__palette-item\"\r\n role=\"menuitem\"\r\n data-palette=\"empty\"\r\n (pointerdown)=\"onPalettePointerDown('empty', $event)\"\r\n (pointermove)=\"onPalettePointerMove($event)\"\r\n (pointerup)=\"onPalettePointerUp($event)\"\r\n (pointercancel)=\"onPalettePointerCancel()\"\r\n (click)=\"onPaletteClick('empty')\"\r\n >\r\n Custom container\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"pos-workspace__actions\">\r\n <button\r\n type=\"button\"\r\n class=\"pos-workspace__undo\"\r\n [disabled]=\"!canUndo()\"\r\n (click)=\"undoLayout()\"\r\n >\r\n Undo\r\n </button>\r\n <button type=\"button\" class=\"pos-workspace__new\" (click)=\"resetLayout()\">New</button>\r\n <button type=\"button\" class=\"pos-workspace__default\" (click)=\"applyDefaultLayout()\">\r\n Default layout\r\n </button>\r\n <button type=\"button\" class=\"pos-workspace__import\" (click)=\"layoutFile.click()\">\r\n Import layout\r\n </button>\r\n <button type=\"button\" class=\"pos-workspace__export\" (click)=\"exportLayout()\">\r\n Export layout\r\n </button>\r\n <input\r\n #layoutFile\r\n class=\"pos-workspace__file\"\r\n type=\"file\"\r\n accept=\"application/json,.json\"\r\n aria-label=\"Import layout file\"\r\n (change)=\"importLayoutFile($event)\"\r\n />\r\n </div>\r\n </div>\r\n}\r\n\r\n<div\r\n #frame\r\n class=\"pos-workspace__grid\"\r\n [style.grid-template-columns]=\"grid().columns\"\r\n [style.grid-template-rows]=\"grid().rows\"\r\n>\r\n <ng-content />\r\n @for (slot of emptySlots(); track slot) {\r\n <pos-workspace-pane [paneId]=\"slot\" [placeholder]=\"true\" />\r\n }\r\n @if (showSplitter()) {\r\n <div\r\n class=\"pos-workspace__splitter\"\r\n role=\"separator\"\r\n aria-orientation=\"vertical\"\r\n aria-label=\"Resize columns\"\r\n aria-valuemin=\"28\"\r\n aria-valuemax=\"72\"\r\n [attr.aria-valuenow]=\"ratioPercent()\"\r\n tabindex=\"0\"\r\n [style.grid-row]=\"splitterRow()\"\r\n [style.left]=\"splitterLeft()\"\r\n (pointerdown)=\"onSplitterDown($event)\"\r\n (pointermove)=\"onSplitterMove($event)\"\r\n (pointerup)=\"onSplitterUp()\"\r\n (pointercancel)=\"onSplitterUp()\"\r\n (keydown)=\"onSplitterKeydown($event)\"\r\n ></div>\r\n }\r\n</div>\r\n\r\n@for (hint of dropHints(); track hint.kind) {\r\n <div\r\n class=\"pos-workspace__hint\"\r\n [class.pos-workspace__hint--top]=\"hint.kind === 'top'\"\r\n [class.pos-workspace__hint--bottom]=\"hint.kind === 'bottom'\"\r\n [class.pos-workspace__hint--dock]=\"hint.kind === 'dock'\"\r\n [style.top.px]=\"hint.top\"\r\n [style.left.px]=\"hint.left\"\r\n [style.width.px]=\"hint.width\"\r\n [style.height.px]=\"hint.height\"\r\n aria-hidden=\"true\"\r\n ></div>\r\n}\r\n\r\n@if (dropIndicator(); as indicator) {\r\n <div\r\n class=\"pos-workspace__drop\"\r\n [class.pos-workspace__drop--line]=\"indicator.line\"\r\n [style.top.px]=\"indicator.top\"\r\n [style.left.px]=\"indicator.left\"\r\n [style.width.px]=\"indicator.width\"\r\n [style.height.px]=\"indicator.height\"\r\n aria-hidden=\"true\"\r\n ></div>\r\n}\r\n\r\n<div class=\"pos-workspace__status\" aria-live=\"polite\">{{ status() }}</div>\r\n", styles: [":host{display:flex;position:relative;flex-direction:column;box-sizing:border-box;height:100%;min-height:0;color:var(--pos-color-text);font-family:var(--pos-font-family)}.pos-workspace__tools{display:flex;flex:0 0 auto;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--pos-space-sm);padding:var(--pos-space-sm) var(--pos-space-lg) 0}.pos-workspace__palette{position:relative}.pos-workspace__palette-toggle{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:1px dashed var(--pos-color-primary);border-radius:var(--pos-radius-md);background:var(--pos-color-surface);color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);cursor:pointer}.pos-workspace__palette-backdrop{position:fixed;z-index:5;inset:0;padding:0;border:0;background:transparent}.pos-workspace__palette-menu{position:absolute;z-index:6;top:calc(100% + var(--pos-space-xs));left:0;display:flex;flex-direction:column;min-width:14rem;max-height:min(20rem,70vh);overflow:auto;padding:var(--pos-space-xs);border:1px solid var(--pos-color-border);border-radius:var(--pos-radius-md);background:var(--pos-color-surface)}.pos-workspace__palette-menu--lifted{visibility:hidden}.pos-workspace__palette-item{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-md);border:0;border-radius:var(--pos-radius-sm);background:transparent;color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);text-align:left;cursor:grab;touch-action:none}.pos-workspace__palette-item:hover{background:color-mix(in srgb,var(--pos-color-primary) 12%,var(--pos-color-surface))}.pos-workspace__palette-toggle:focus-visible,.pos-workspace__palette-item:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}.pos-workspace__actions{display:flex;flex-wrap:wrap;gap:var(--pos-space-sm)}.pos-workspace__undo,.pos-workspace__new,.pos-workspace__default,.pos-workspace__export,.pos-workspace__import{min-height:var(--pos-button-min-height);padding:0 var(--pos-space-lg);border:1px solid var(--pos-color-key-border);border-radius:var(--pos-radius-md);background:var(--pos-color-key);color:var(--pos-color-text);font:inherit;font-size:var(--pos-font-size-md);cursor:pointer}.pos-workspace__file{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.pos-workspace__undo:disabled{background:var(--pos-color-disabled);color:var(--pos-color-on-disabled);cursor:default}.pos-workspace__undo:focus-visible,.pos-workspace__new:focus-visible,.pos-workspace__default:focus-visible,.pos-workspace__export:focus-visible,.pos-workspace__import:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}:host(.pos-workspace--dragging){cursor:grabbing;-webkit-user-select:none;user-select:none}.pos-workspace__grid{display:grid;position:relative;flex:1 1 auto;box-sizing:border-box;min-height:0;padding:var(--pos-space-lg);gap:var(--pos-space-md)}.pos-workspace__hint{position:absolute;z-index:2;box-sizing:border-box;border:2px dashed color-mix(in srgb,var(--pos-color-primary) 55%,transparent);border-radius:var(--pos-radius-md);background:color-mix(in srgb,var(--pos-color-primary) 8%,transparent);pointer-events:none}.pos-workspace__drop{position:absolute;z-index:3;box-sizing:border-box;border:2px dashed var(--pos-color-primary);border-radius:var(--pos-radius-md);background:color-mix(in srgb,var(--pos-color-primary) 24%,transparent);pointer-events:none}.pos-workspace__drop--line{border:0;border-radius:var(--pos-radius-pill);background:var(--pos-color-primary)}.pos-workspace__splitter{position:absolute;z-index:4;top:0;bottom:0;grid-column:1/-1;width:var(--pos-space-xl);padding:0;border:0;background:transparent;cursor:ew-resize;touch-action:none;transform:translate(-50%)}.pos-workspace__splitter:before{content:\"\";position:absolute;top:0;bottom:0;left:50%;width:var(--pos-space-xs);border-radius:var(--pos-radius-pill);background:var(--pos-color-primary);transform:translate(-50%)}.pos-workspace__splitter:focus-visible{outline:2px solid var(--pos-color-ink);outline-offset:2px}.pos-workspace__status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}\n"] }]
|
|
2074
2109
|
}], ctorParameters: () => [], propDecorators: { paneRefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => PosWorkspacePane), { isSignal: true }] }], frameRef: [{ type: i0.ViewChild, args: ['frame', { isSignal: true }] }], editing: [{ type: i0.Input, args: [{ isSignal: true, alias: "editing", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], layoutChange: [{ type: i0.Output, args: ["layoutChange"] }], layoutExport: [{ type: i0.Output, args: ["layoutExport"] }] } });
|
|
2075
2110
|
|
|
2076
2111
|
const COIN_AMOUNTS = [0.01, 0.02, 0.05, 0.1, 0.2, 0.5, 1, 2];
|