@eui/mobile-core 18.0.2-snapshot-1744027641422 → 18.0.3-snapshot-1744692867885
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/docs/directives/EuimToolbarTransparentDirective.html +162 -0
- package/docs/js/search/search_index.js +2 -2
- package/esm2022/lib/components/directives/euim-toolbar-transparent/euim-toolbar-transparent.directive.mjs +27 -4
- package/fesm2022/eui-mobile-core.mjs +25 -2
- package/fesm2022/eui-mobile-core.mjs.map +1 -1
- package/lib/components/directives/euim-toolbar-transparent/euim-toolbar-transparent.directive.d.ts +4 -1
- package/lib/components/directives/euim-toolbar-transparent/euim-toolbar-transparent.directive.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,11 +1,29 @@
|
|
|
1
|
-
import { Directive, HostBinding } from '@angular/core';
|
|
1
|
+
import { Directive, HostBinding, HostListener, Input } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class EuimToolbarTransparentDirective {
|
|
4
4
|
constructor() {
|
|
5
|
+
this.scrollThreshold = 150;
|
|
5
6
|
this.className = 'euim-toolbar--transparent';
|
|
6
7
|
}
|
|
8
|
+
onContentScroll($event) {
|
|
9
|
+
const scrollTop = $event.detail.scrollTop;
|
|
10
|
+
this.updateToolbar(scrollTop);
|
|
11
|
+
}
|
|
12
|
+
updateToolbar(scrollTop) {
|
|
13
|
+
const toolbar = document.querySelector('ion-toolbar');
|
|
14
|
+
if (!toolbar)
|
|
15
|
+
return;
|
|
16
|
+
if (scrollTop > this.scrollThreshold) {
|
|
17
|
+
toolbar.classList.add('euim-toolbar--solid');
|
|
18
|
+
toolbar.classList.remove('euim-toolbar--transparent');
|
|
19
|
+
}
|
|
20
|
+
else {
|
|
21
|
+
toolbar.classList.add('euim-toolbar--transparent');
|
|
22
|
+
toolbar.classList.remove('euim-toolbar--solid');
|
|
23
|
+
}
|
|
24
|
+
}
|
|
7
25
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuimToolbarTransparentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
8
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: EuimToolbarTransparentDirective, isStandalone: true, selector: "[euimToolbarTransparent]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
|
|
26
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: EuimToolbarTransparentDirective, isStandalone: true, selector: "[euimToolbarTransparent]", inputs: { scrollThreshold: "scrollThreshold" }, host: { listeners: { "ionScroll": "onContentScroll($event)" }, properties: { "class": "this.className" } }, ngImport: i0 }); }
|
|
9
27
|
}
|
|
10
28
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuimToolbarTransparentDirective, decorators: [{
|
|
11
29
|
type: Directive,
|
|
@@ -13,8 +31,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
13
31
|
selector: '[euimToolbarTransparent]',
|
|
14
32
|
standalone: true,
|
|
15
33
|
}]
|
|
16
|
-
}], propDecorators: {
|
|
34
|
+
}], propDecorators: { scrollThreshold: [{
|
|
35
|
+
type: Input
|
|
36
|
+
}], className: [{
|
|
17
37
|
type: HostBinding,
|
|
18
38
|
args: ['class']
|
|
39
|
+
}], onContentScroll: [{
|
|
40
|
+
type: HostListener,
|
|
41
|
+
args: ['ionScroll', ['$event']]
|
|
19
42
|
}] } });
|
|
20
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
43
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZXVpbS10b29sYmFyLXRyYW5zcGFyZW50LmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9kaXJlY3RpdmVzL2V1aW0tdG9vbGJhci10cmFuc3BhcmVudC9ldWltLXRvb2xiYXItdHJhbnNwYXJlbnQuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsV0FBVyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBSzVFLE1BQU0sT0FBTywrQkFBK0I7SUFKNUM7UUFLYSxvQkFBZSxHQUFHLEdBQUcsQ0FBQztRQUVULGNBQVMsR0FBRywyQkFBMkIsQ0FBQztLQW9CakU7SUFqQkcsZUFBZSxDQUFDLE1BQU07UUFDbEIsTUFBTSxTQUFTLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxTQUFTLENBQUM7UUFDMUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUNsQyxDQUFDO0lBRU8sYUFBYSxDQUFDLFNBQWlCO1FBQ25DLE1BQU0sT0FBTyxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDdEQsSUFBSSxDQUFDLE9BQU87WUFBRSxPQUFPO1FBRXJCLElBQUksU0FBUyxHQUFHLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztZQUNuQyxPQUFPLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDO1lBQzdDLE9BQU8sQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLDJCQUEyQixDQUFDLENBQUM7UUFDMUQsQ0FBQzthQUFNLENBQUM7WUFDSixPQUFPLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQywyQkFBMkIsQ0FBQyxDQUFDO1lBQ25ELE9BQU8sQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLHFCQUFxQixDQUFDLENBQUM7UUFDcEQsQ0FBQztJQUNMLENBQUM7a0lBdEJRLCtCQUErQjtzSEFBL0IsK0JBQStCOzs0RkFBL0IsK0JBQStCO2tCQUozQyxTQUFTO21CQUFDO29CQUNQLFFBQVEsRUFBRSwwQkFBMEI7b0JBQ3BDLFVBQVUsRUFBRSxJQUFJO2lCQUNuQjs4QkFFWSxlQUFlO3NCQUF2QixLQUFLO2dCQUVnQixTQUFTO3NCQUE5QixXQUFXO3VCQUFDLE9BQU87Z0JBR3BCLGVBQWU7c0JBRGQsWUFBWTt1QkFBQyxXQUFXLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEhvc3RCaW5kaW5nLCBIb3N0TGlzdGVuZXIsIElucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5ARGlyZWN0aXZlKHtcbiAgICBzZWxlY3RvcjogJ1tldWltVG9vbGJhclRyYW5zcGFyZW50XScsXG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcbn0pXG5leHBvcnQgY2xhc3MgRXVpbVRvb2xiYXJUcmFuc3BhcmVudERpcmVjdGl2ZSB7XG4gICAgQElucHV0KCkgc2Nyb2xsVGhyZXNob2xkID0gMTUwO1xuXG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcycpIGNsYXNzTmFtZSA9ICdldWltLXRvb2xiYXItLXRyYW5zcGFyZW50JztcblxuICAgIEBIb3N0TGlzdGVuZXIoJ2lvblNjcm9sbCcsIFsnJGV2ZW50J10pXG4gICAgb25Db250ZW50U2Nyb2xsKCRldmVudCk6IHZvaWQge1xuICAgICAgICBjb25zdCBzY3JvbGxUb3AgPSAkZXZlbnQuZGV0YWlsLnNjcm9sbFRvcDtcbiAgICAgICAgdGhpcy51cGRhdGVUb29sYmFyKHNjcm9sbFRvcCk7XG4gICAgfVxuXG4gICAgcHJpdmF0ZSB1cGRhdGVUb29sYmFyKHNjcm9sbFRvcDogbnVtYmVyKTogdm9pZCB7XG4gICAgICAgIGNvbnN0IHRvb2xiYXIgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCdpb24tdG9vbGJhcicpO1xuICAgICAgICBpZiAoIXRvb2xiYXIpIHJldHVybjtcblxuICAgICAgICBpZiAoc2Nyb2xsVG9wID4gdGhpcy5zY3JvbGxUaHJlc2hvbGQpIHtcbiAgICAgICAgICAgIHRvb2xiYXIuY2xhc3NMaXN0LmFkZCgnZXVpbS10b29sYmFyLS1zb2xpZCcpO1xuICAgICAgICAgICAgdG9vbGJhci5jbGFzc0xpc3QucmVtb3ZlKCdldWltLXRvb2xiYXItLXRyYW5zcGFyZW50Jyk7XG4gICAgICAgIH0gZWxzZSB7XG4gICAgICAgICAgICB0b29sYmFyLmNsYXNzTGlzdC5hZGQoJ2V1aW0tdG9vbGJhci0tdHJhbnNwYXJlbnQnKTtcbiAgICAgICAgICAgIHRvb2xiYXIuY2xhc3NMaXN0LnJlbW92ZSgnZXVpbS10b29sYmFyLS1zb2xpZCcpO1xuICAgICAgICB9XG4gICAgfVxufVxuIl19
|
|
@@ -4268,10 +4268,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4268
4268
|
|
|
4269
4269
|
class EuimToolbarTransparentDirective {
|
|
4270
4270
|
constructor() {
|
|
4271
|
+
this.scrollThreshold = 150;
|
|
4271
4272
|
this.className = 'euim-toolbar--transparent';
|
|
4272
4273
|
}
|
|
4274
|
+
onContentScroll($event) {
|
|
4275
|
+
const scrollTop = $event.detail.scrollTop;
|
|
4276
|
+
this.updateToolbar(scrollTop);
|
|
4277
|
+
}
|
|
4278
|
+
updateToolbar(scrollTop) {
|
|
4279
|
+
const toolbar = document.querySelector('ion-toolbar');
|
|
4280
|
+
if (!toolbar)
|
|
4281
|
+
return;
|
|
4282
|
+
if (scrollTop > this.scrollThreshold) {
|
|
4283
|
+
toolbar.classList.add('euim-toolbar--solid');
|
|
4284
|
+
toolbar.classList.remove('euim-toolbar--transparent');
|
|
4285
|
+
}
|
|
4286
|
+
else {
|
|
4287
|
+
toolbar.classList.add('euim-toolbar--transparent');
|
|
4288
|
+
toolbar.classList.remove('euim-toolbar--solid');
|
|
4289
|
+
}
|
|
4290
|
+
}
|
|
4273
4291
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuimToolbarTransparentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
4274
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: EuimToolbarTransparentDirective, isStandalone: true, selector: "[euimToolbarTransparent]", host: { properties: { "class": "this.className" } }, ngImport: i0 }); }
|
|
4292
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: EuimToolbarTransparentDirective, isStandalone: true, selector: "[euimToolbarTransparent]", inputs: { scrollThreshold: "scrollThreshold" }, host: { listeners: { "ionScroll": "onContentScroll($event)" }, properties: { "class": "this.className" } }, ngImport: i0 }); }
|
|
4275
4293
|
}
|
|
4276
4294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuimToolbarTransparentDirective, decorators: [{
|
|
4277
4295
|
type: Directive,
|
|
@@ -4279,9 +4297,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
4279
4297
|
selector: '[euimToolbarTransparent]',
|
|
4280
4298
|
standalone: true,
|
|
4281
4299
|
}]
|
|
4282
|
-
}], propDecorators: {
|
|
4300
|
+
}], propDecorators: { scrollThreshold: [{
|
|
4301
|
+
type: Input
|
|
4302
|
+
}], className: [{
|
|
4283
4303
|
type: HostBinding,
|
|
4284
4304
|
args: ['class']
|
|
4305
|
+
}], onContentScroll: [{
|
|
4306
|
+
type: HostListener,
|
|
4307
|
+
args: ['ionScroll', ['$event']]
|
|
4285
4308
|
}] } });
|
|
4286
4309
|
|
|
4287
4310
|
class EuimMinWidthDirective {
|