@daffodil/design 0.40.1 → 0.42.1

package/fesm2015/daffodil-design.mjs

@@ -1521,10 +1521,12 @@ class DaffQuantityInputComponent {
          * Instead, we listen for the change event and manually patch form control values.
          */
         this._inputControl = new FormControl();
-        // TODO: should this not use this.input as the source of truth for focused?
-        this.focused = false;
         this._destroyed = new Subject();
     }
+    get focused() {
+        var _a;
+        return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focused;
+    }
     get value() {
         return this.ngControl.control.value;
     }
@@ -1548,15 +1550,12 @@ class DaffQuantityInputComponent {
         this._destroyed.next(true);
     }
     focus() {
-        this.focused = true;
         this.input.focus();
     }
     onFocus() {
-        this.focused = true;
         this.ngControl.control.markAsTouched();
     }
     onBlur() {
-        // TODO: this.focused = false ?
         if (this.value === null || this.value === undefined) {
             this.value = 1;
             this.changeDetectorRef.markForCheck();
@@ -1641,6 +1640,9 @@ class DaffQuantitySelectComponent {
     focus() {
         this.select.focus();
     }
+    onFocus() {
+        this.ngControl.control.markAsTouched();
+    }
     /**
      * A helper function for easily making options for the `select`.
      */
@@ -1649,10 +1651,10 @@ class DaffQuantitySelectComponent {
     }
 }
 /** @nocollapse */ /** @nocollapse */ DaffQuantitySelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffQuantitySelectComponent, deps: [{ token: i1$2.NgControl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ DaffQuantitySelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffQuantitySelectComponent, selector: "daff-quantity-select", inputs: { min: "min", max: "max", extendable: "extendable" }, viewQueries: [{ propertyName: "select", first: true, predicate: DaffNativeSelectComponent, descendants: true }], ngImport: i0, template: "<select daff-native-select [formControl]=\"ngControl.control\">\n  <option *ngFor=\"let item of valueArray\" [value]=\"item\">{{ item }}</option>\n  <option [value]=\"max\" *ngIf=\"extendable\">{{ max }}+</option>\n  <option [value]=\"max\" *ngIf=\"!extendable\">{{ max }}</option>\n</select>\n", components: [{ type: DaffNativeSelectComponent, selector: "select[daff-native-select]", inputs: ["formSubmitted"] }], directives: [{ type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+/** @nocollapse */ /** @nocollapse */ DaffQuantitySelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffQuantitySelectComponent, selector: "daff-quantity-select", inputs: { min: "min", max: "max", extendable: "extendable" }, viewQueries: [{ propertyName: "select", first: true, predicate: DaffNativeSelectComponent, descendants: true }], ngImport: i0, template: "<select daff-native-select\n  [formControl]=\"ngControl.control\"\n  (focus)=\"onFocus()\"\n>\n  <option *ngFor=\"let item of valueArray\" [value]=\"item\">{{ item }}</option>\n  <option [value]=\"max\" *ngIf=\"extendable\">{{ max }}+</option>\n  <option [value]=\"max\" *ngIf=\"!extendable\">{{ max }}</option>\n</select>\n", components: [{ type: DaffNativeSelectComponent, selector: "select[daff-native-select]", inputs: ["formSubmitted"] }], directives: [{ type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffQuantitySelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-quantity-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<select daff-native-select [formControl]=\"ngControl.control\">\n  <option *ngFor=\"let item of valueArray\" [value]=\"item\">{{ item }}</option>\n  <option [value]=\"max\" *ngIf=\"extendable\">{{ max }}+</option>\n  <option [value]=\"max\" *ngIf=\"!extendable\">{{ max }}</option>\n</select>\n" }]
+            args: [{ selector: 'daff-quantity-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<select daff-native-select\n  [formControl]=\"ngControl.control\"\n  (focus)=\"onFocus()\"\n>\n  <option *ngFor=\"let item of valueArray\" [value]=\"item\">{{ item }}</option>\n  <option [value]=\"max\" *ngIf=\"extendable\">{{ max }}+</option>\n  <option [value]=\"max\" *ngIf=\"!extendable\">{{ max }}</option>\n</select>\n" }]
         }], ctorParameters: function () { return [{ type: i1$2.NgControl }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { select: [{
                 type: ViewChild,
                 args: [DaffNativeSelectComponent]
@@ -1686,7 +1688,6 @@ class DaffQuantityFieldComponent {
          * before it becomes an input element.
          */
         this.selectMax = 10;
-        this.focused = false;
         this.disabled = false;
         this._quantity = 1;
         this._inputHasBeenShown = false;
@@ -1694,6 +1695,10 @@ class DaffQuantityFieldComponent {
             this.ngControl.valueAccessor = this;
         }
     }
+    get focused() {
+        var _a, _b;
+        return !!(((_a = this.input) === null || _a === void 0 ? void 0 : _a.focused) || ((_b = this.select) === null || _b === void 0 ? void 0 : _b.focused));
+    }
     get quantity() {
         return this._quantity;
     }
@@ -1748,7 +1753,6 @@ class DaffQuantityFieldComponent {
         if (this.input) {
             this.input.focus();
         }
-        this.focused = true;
     }
 }
 /** @nocollapse */ /** @nocollapse */ DaffQuantityFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffQuantityFieldComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
@@ -2639,10 +2643,10 @@ class DaffArticleComponent {
     }
 }
 /** @nocollapse */ /** @nocollapse */ DaffArticleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffArticleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ DaffArticleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffArticleComponent, selector: "daff-article", host: { properties: { "class.daff-article": "this.class", "attr.role": "this.role" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".daff-article{display:block}.daff-article a:not(.daff-ae *,.daff-ae){font-weight:600;text-decoration:none}.daff-article a:not(.daff-ae *,.daff-ae):hover{text-decoration:underline}.daff-article h1:not(.daff-ae *,.daff-ae),.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-bottom:.5rem}.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-top:2rem}.daff-article h1:not(.daff-ae *,.daff-ae){font-weight:700;font-size:2rem;line-height:2.25rem}@media (min-width: 768px){.daff-article h1:not(.daff-ae *,.daff-ae){font-size:3rem;line-height:3.5rem}}.daff-article h2:not(.daff-ae *,.daff-ae){font-size:2rem;line-height:2.5rem}.daff-article h3:not(.daff-ae *,.daff-ae){font-size:1.5rem;line-height:2rem}.daff-article h4:not(.daff-ae *,.daff-ae){font-size:1.25rem;line-height:1.5rem}.daff-article h5:not(.daff-ae *,.daff-ae){font-size:1.125rem;line-height:1.5rem}.daff-article h6:not(.daff-ae *,.daff-ae){font-size:1rem;line-height:1.5rem}.daff-article p:not(.daff-ae *,.daff-ae){margin:0 0 1rem}.daff-article strong{font-weight:700}.daff-article pre{display:block;border-radius:4px;font-size:.875rem;line-height:1.5rem;margin:0;padding:1.5rem;overflow:auto;white-space:pre-wrap}.daff-article pre code{display:block;padding:0}.daff-article code{display:inline-block;border-radius:4px;font-size:.875rem;line-height:1rem;padding:.25rem}.daff-article__title{font-weight:700;font-size:2rem;line-height:2.25rem}@media (min-width: 768px){.daff-article__title{font-size:3rem;line-height:3.5rem}}.daff-article__lead{font-size:1.25rem;line-height:1.75rem;font-weight:400;margin:0}.daff-article__lead code{font-size:1.25rem;line-height:1.5rem;font-weight:400}.daff-article__meta{font-size:.875rem}.daff-article hr{border:0;height:1px;margin:2rem 0}.daff-article blockquote{border-radius:4px;margin:0;padding:1rem 1.5rem}.daff-article blockquote cite{font-size:.875rem;font-weight:400;line-height:1.25rem;display:block;margin-top:1rem}.daff-article table{display:block;border-collapse:collapse;margin:1.5rem 0;overflow:auto;width:100%}.daff-article table th{font-weight:600;outline:0;padding:1rem;text-align:left;vertical-align:bottom;box-sizing:border-box}.daff-article table td{padding:.5rem 1rem;vertical-align:top;box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+/** @nocollapse */ /** @nocollapse */ DaffArticleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.0", type: DaffArticleComponent, selector: "daff-article", host: { properties: { "class.daff-article": "this.class", "attr.role": "this.role" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [".daff-article{display:block}.daff-article a:not(.daff-ae *,.daff-ae){font-weight:600;text-decoration:none}.daff-article a:not(.daff-ae *,.daff-ae):hover{text-decoration:underline}.daff-article h1:not(.daff-ae *,.daff-ae),.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-bottom:1.5rem}.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-top:2.5rem}.daff-article h1:not(.daff-ae *,.daff-ae){font-weight:700;font-size:2rem;line-height:2.25rem}@media (min-width: 768px){.daff-article h1:not(.daff-ae *,.daff-ae){font-size:3rem;line-height:3.5rem}}.daff-article h2:not(.daff-ae *,.daff-ae){font-size:2rem;line-height:2.5rem}.daff-article h3:not(.daff-ae *,.daff-ae){font-size:1.5rem;line-height:2rem}.daff-article h4:not(.daff-ae *,.daff-ae){font-size:1.25rem;line-height:1.5rem}.daff-article h5:not(.daff-ae *,.daff-ae){font-size:1.125rem;line-height:1.5rem}.daff-article h6:not(.daff-ae *,.daff-ae){font-size:1rem;line-height:1.5rem}.daff-article p:not(.daff-ae *,.daff-ae){margin:0 0 1rem}.daff-article strong{font-weight:700}.daff-article pre{display:block;border-radius:4px;font-size:.875rem;line-height:1.5rem;margin:1.5rem 0;padding:1.5rem;overflow:auto;white-space:pre-wrap}.daff-article pre code{display:block;padding:0}.daff-article pre:last-child{margin-bottom:0}.daff-article code{display:inline-block;border-radius:4px;font-size:.875rem;line-height:1rem;padding:.25rem}.daff-article__title{font-weight:700;font-size:2rem;line-height:2.25rem}@media (min-width: 768px){.daff-article__title{font-size:3rem;line-height:3.5rem}}.daff-article__lead{font-size:1.25rem;line-height:1.75rem;font-weight:400;margin:0}.daff-article__lead code{font-size:1.25rem;line-height:1.5rem;font-weight:400}.daff-article__meta{font-size:.875rem}.daff-article hr{border:0;height:1px;margin:2rem 0}.daff-article blockquote{border-radius:4px;margin:1.5rem 0;padding:1rem 1.5rem}.daff-article blockquote:last-child{margin-bottom:0}.daff-article blockquote cite{font-size:.875rem;font-weight:400;line-height:1.25rem;display:block;margin-top:1rem}.daff-article blockquote p:last-of-type{margin:0}.daff-article table{display:block;border-collapse:collapse;margin:1.5rem 0;overflow:auto;width:100%}.daff-article table:last-child{margin-bottom:0}.daff-article table th{font-weight:600;outline:0;padding:1rem;text-align:left;vertical-align:bottom;box-sizing:border-box}.daff-article table td{padding:.5rem 1rem;vertical-align:top;box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.0", ngImport: i0, type: DaffArticleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'daff-article', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".daff-article{display:block}.daff-article a:not(.daff-ae *,.daff-ae){font-weight:600;text-decoration:none}.daff-article a:not(.daff-ae *,.daff-ae):hover{text-decoration:underline}.daff-article h1:not(.daff-ae *,.daff-ae),.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-bottom:.5rem}.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-top:2rem}.daff-article h1:not(.daff-ae *,.daff-ae){font-weight:700;font-size:2rem;line-height:2.25rem}@media (min-width: 768px){.daff-article h1:not(.daff-ae *,.daff-ae){font-size:3rem;line-height:3.5rem}}.daff-article h2:not(.daff-ae *,.daff-ae){font-size:2rem;line-height:2.5rem}.daff-article h3:not(.daff-ae *,.daff-ae){font-size:1.5rem;line-height:2rem}.daff-article h4:not(.daff-ae *,.daff-ae){font-size:1.25rem;line-height:1.5rem}.daff-article h5:not(.daff-ae *,.daff-ae){font-size:1.125rem;line-height:1.5rem}.daff-article h6:not(.daff-ae *,.daff-ae){font-size:1rem;line-height:1.5rem}.daff-article p:not(.daff-ae *,.daff-ae){margin:0 0 1rem}.daff-article strong{font-weight:700}.daff-article pre{display:block;border-radius:4px;font-size:.875rem;line-height:1.5rem;margin:0;padding:1.5rem;overflow:auto;white-space:pre-wrap}.daff-article pre code{display:block;padding:0}.daff-article code{display:inline-block;border-radius:4px;font-size:.875rem;line-height:1rem;padding:.25rem}.daff-article__title{font-weight:700;font-size:2rem;line-height:2.25rem}@media (min-width: 768px){.daff-article__title{font-size:3rem;line-height:3.5rem}}.daff-article__lead{font-size:1.25rem;line-height:1.75rem;font-weight:400;margin:0}.daff-article__lead code{font-size:1.25rem;line-height:1.5rem;font-weight:400}.daff-article__meta{font-size:.875rem}.daff-article hr{border:0;height:1px;margin:2rem 0}.daff-article blockquote{border-radius:4px;margin:0;padding:1rem 1.5rem}.daff-article blockquote cite{font-size:.875rem;font-weight:400;line-height:1.25rem;display:block;margin-top:1rem}.daff-article table{display:block;border-collapse:collapse;margin:1.5rem 0;overflow:auto;width:100%}.daff-article table th{font-weight:600;outline:0;padding:1rem;text-align:left;vertical-align:bottom;box-sizing:border-box}.daff-article table td{padding:.5rem 1rem;vertical-align:top;box-sizing:border-box}\n"] }]
+            args: [{ selector: 'daff-article', template: '<ng-content></ng-content>', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".daff-article{display:block}.daff-article a:not(.daff-ae *,.daff-ae){font-weight:600;text-decoration:none}.daff-article a:not(.daff-ae *,.daff-ae):hover{text-decoration:underline}.daff-article h1:not(.daff-ae *,.daff-ae),.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-bottom:1.5rem}.daff-article h2:not(.daff-ae *,.daff-ae),.daff-article h3:not(.daff-ae *,.daff-ae),.daff-article h4:not(.daff-ae *,.daff-ae),.daff-article h5:not(.daff-ae *,.daff-ae),.daff-article h6:not(.daff-ae *,.daff-ae){margin-top:2.5rem}.daff-article h1:not(.daff-ae *,.daff-ae){font-weight:700;font-size:2rem;line-height:2.25rem}@media (min-width: 768px){.daff-article h1:not(.daff-ae *,.daff-ae){font-size:3rem;line-height:3.5rem}}.daff-article h2:not(.daff-ae *,.daff-ae){font-size:2rem;line-height:2.5rem}.daff-article h3:not(.daff-ae *,.daff-ae){font-size:1.5rem;line-height:2rem}.daff-article h4:not(.daff-ae *,.daff-ae){font-size:1.25rem;line-height:1.5rem}.daff-article h5:not(.daff-ae *,.daff-ae){font-size:1.125rem;line-height:1.5rem}.daff-article h6:not(.daff-ae *,.daff-ae){font-size:1rem;line-height:1.5rem}.daff-article p:not(.daff-ae *,.daff-ae){margin:0 0 1rem}.daff-article strong{font-weight:700}.daff-article pre{display:block;border-radius:4px;font-size:.875rem;line-height:1.5rem;margin:1.5rem 0;padding:1.5rem;overflow:auto;white-space:pre-wrap}.daff-article pre code{display:block;padding:0}.daff-article pre:last-child{margin-bottom:0}.daff-article code{display:inline-block;border-radius:4px;font-size:.875rem;line-height:1rem;padding:.25rem}.daff-article__title{font-weight:700;font-size:2rem;line-height:2.25rem}@media (min-width: 768px){.daff-article__title{font-size:3rem;line-height:3.5rem}}.daff-article__lead{font-size:1.25rem;line-height:1.75rem;font-weight:400;margin:0}.daff-article__lead code{font-size:1.25rem;line-height:1.5rem;font-weight:400}.daff-article__meta{font-size:.875rem}.daff-article hr{border:0;height:1px;margin:2rem 0}.daff-article blockquote{border-radius:4px;margin:1.5rem 0;padding:1rem 1.5rem}.daff-article blockquote:last-child{margin-bottom:0}.daff-article blockquote cite{font-size:.875rem;font-weight:400;line-height:1.25rem;display:block;margin-top:1rem}.daff-article blockquote p:last-of-type{margin:0}.daff-article table{display:block;border-collapse:collapse;margin:1.5rem 0;overflow:auto;width:100%}.daff-article table:last-child{margin-bottom:0}.daff-article table th{font-weight:600;outline:0;padding:1rem;text-align:left;vertical-align:bottom;box-sizing:border-box}.daff-article table td{padding:.5rem 1rem;vertical-align:top;box-sizing:border-box}\n"] }]
         }], propDecorators: { class: [{
                 type: HostBinding,
                 args: ['class.daff-article']
@@ -5223,7 +5227,9 @@ class DaffThemeStorageService {
         this.storage = storage;
         this.storage$ = new Subject();
         this.doc = _doc;
-        this.theme$ = merge(this.storage$, fromEvent(this.doc.defaultView, 'storage').pipe(startWith(storageEventBuilder(this.storage.getItem(THEME_STORAGE_KEY))), catchError((e) => EMPTY))).pipe(filter((e) => e.key === THEME_STORAGE_KEY), map((e) => coerceValue(e.newValue)), shareReplay(1));
+        this.theme$ = merge(this.storage$, this.doc.defaultView
+            ? fromEvent(this.doc.defaultView, 'storage').pipe(startWith(storageEventBuilder(this.storage.getItem(THEME_STORAGE_KEY))), catchError((e) => EMPTY))
+            : of(storageEventBuilder(this.storage.getItem(THEME_STORAGE_KEY)))).pipe(filter((e) => e.key === THEME_STORAGE_KEY), map((e) => coerceValue(e.newValue)), shareReplay(1));
     }
     /**
      * Given that Safari doesn't respect in-tab storage events, we have to manually