@dereekb/dbx-web 9.23.3 → 9.23.4

package/fesm2020/dereekb-dbx-web-mapbox.mjs

@@ -931,25 +931,30 @@ class DbxMapboxMarkerComponent {
         let width = 0;
         let height = 0;
         const size = this._marker?.size || 'medium';
-        if (typeof size === 'number') {
-            width = size;
-        }
-        else {
-            switch (size) {
-                case 'small':
-                    width = 18;
-                    break;
-                case 'medium':
-                    width = 24;
-                    break;
-                case 'large':
-                    width = 32;
-                    break;
-                case 'tall':
-                    width = 24;
-                    height = 32;
+        switch (this.presentation) {
+            case 'normal':
+                if (typeof size === 'number') {
+                    width = size;
+                }
+                else {
+                    switch (size) {
+                        case 'small':
+                            width = 18;
+                            break;
+                        case 'medium':
+                            width = 24;
+                            break;
+                        case 'large':
+                            width = 32;
+                            break;
+                        case 'tall':
+                            width = 24;
+                            height = 32;
+                            break;
+                    }
                     break;
-            }
+                }
+                break;
         }
         if (!height) {
             height = width;
@@ -958,13 +963,39 @@ class DbxMapboxMarkerComponent {
         const image = imageInput ? (typeof imageInput === 'string' ? imageInput : getValueFromGetter(imageInput, width)) : undefined;
         const style = {
             ...this._marker?.style,
-            width: width + 'px',
-            height: height + 'px',
-            'font-size': width + 'px',
             'background-image': image
         };
+        if (width && height) {
+            style.width = width + 'px';
+            style.height = height + 'px';
+            style['font-size'] = width + 'px';
+        }
         return style;
     }
+    get presentation() {
+        return this._marker.presentation ?? 'normal';
+    }
+    get presentationClasses() {
+        const presentation = this.presentation;
+        const markerClasses = this._marker.markerClasses;
+        let cssClasses = '';
+        switch (presentation) {
+            case 'chip':
+            case 'chip-small':
+                cssClasses = 'dbx-mapbox-marker-chip dbx-chip mat-standard-chip dbx-bg';
+                if (presentation === 'chip-small') {
+                    cssClasses += ' dbx-chip-small';
+                }
+                break;
+        }
+        if (!this.icon) {
+            cssClasses += ' dbx-mapbox-marker-no-icon';
+        }
+        if (markerClasses) {
+            cssClasses += markerClasses;
+        }
+        return cssClasses;
+    }
     ngOnDestroy() {
         this._dbxMapboxChangeService?.emitMarkerDestroyed();
     }
@@ -974,29 +1005,29 @@ DbxMapboxMarkerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0",
 DbxMapboxMarkerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.12", type: DbxMapboxMarkerComponent, selector: "dbx-mapbox-marker", inputs: { marker: "marker" }, ngImport: i0, template: `
     <mgl-marker [lngLat]="latLng">
       <dbx-anchor [anchor]="anchor">
-        <div class="dbx-mapbox-marker">
-          <div class="dbx-mapbox-marker-content" [ngStyle]="style">
+        <div class="dbx-mapbox-marker" [ngClass]="presentationClasses">
+          <div class="dbx-mapbox-marker-icon-content" [ngStyle]="style">
             <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
           </div>
           <div class="dbx-mapbox-marker-label dbx-outlined-text" *ngIf="label">{{ label }}</div>
         </div>
       </dbx-anchor>
     </mgl-marker>
-  `, isInline: true, styles: [".dbx-mapbox-marker{display:flex;align-items:center;flex-direction:column}.dbx-mapbox-marker .dbx-mapbox-marker-content{display:flex;align-items:center;justify-content:center}.dbx-mapbox-marker .dbx-mapbox-marker-content mat-icon{width:100%;height:100%;font-size:inherit}.dbx-mapbox-marker .dbx-mapbox-marker-label{font-size:.9em}\n"], dependencies: [{ kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: i1.MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag", "dragStart", "dragEnd", "drag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".dbx-mapbox-marker{display:flex;align-items:center;flex-direction:column}.dbx-mapbox-marker .dbx-mapbox-marker-icon-content{display:flex;align-items:center;justify-content:center}.dbx-mapbox-marker .dbx-mapbox-marker-icon-content mat-icon{width:100%;height:100%;font-size:inherit}.dbx-mapbox-marker .dbx-mapbox-marker-label{font-size:.9em}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip{flex-direction:row;font-size:1em}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip .dbx-mapbox-marker-icon-content{width:18px;height:18px;font-size:18px}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip.dbx-chip-small .dbx-mapbox-marker-label{padding-left:3px}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip.dbx-chip-small .dbx-mapbox-marker-icon-content{padding:0!important;width:16px;height:16px;font-size:16px}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip .dbx-mapbox-marker-label{padding-left:4px}.dbx-mapbox-marker-no-icon>.dbx-mapbox-marker-icon-content{display:none}.dbx-mapbox-marker-no-icon>.dbx-mapbox-marker-icon-content .dbx-mapbox-marker-label{padding-left:0}\n"], dependencies: [{ kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.DbxAnchorComponent, selector: "dbx-anchor, [dbx-anchor]", inputs: ["block"] }, { kind: "component", type: i1.MarkerComponent, selector: "mgl-marker", inputs: ["offset", "anchor", "clickTolerance", "feature", "lngLat", "draggable", "popupShown", "className", "pitchAlignment", "rotationAlignment"], outputs: ["markerDragStart", "markerDragEnd", "markerDrag", "dragStart", "dragEnd", "drag"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.12", ngImport: i0, type: DbxMapboxMarkerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dbx-mapbox-marker', template: `
     <mgl-marker [lngLat]="latLng">
       <dbx-anchor [anchor]="anchor">
-        <div class="dbx-mapbox-marker">
-          <div class="dbx-mapbox-marker-content" [ngStyle]="style">
+        <div class="dbx-mapbox-marker" [ngClass]="presentationClasses">
+          <div class="dbx-mapbox-marker-icon-content" [ngStyle]="style">
             <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
           </div>
           <div class="dbx-mapbox-marker-label dbx-outlined-text" *ngIf="label">{{ label }}</div>
         </div>
       </dbx-anchor>
     </mgl-marker>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".dbx-mapbox-marker{display:flex;align-items:center;flex-direction:column}.dbx-mapbox-marker .dbx-mapbox-marker-content{display:flex;align-items:center;justify-content:center}.dbx-mapbox-marker .dbx-mapbox-marker-content mat-icon{width:100%;height:100%;font-size:inherit}.dbx-mapbox-marker .dbx-mapbox-marker-label{font-size:.9em}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".dbx-mapbox-marker{display:flex;align-items:center;flex-direction:column}.dbx-mapbox-marker .dbx-mapbox-marker-icon-content{display:flex;align-items:center;justify-content:center}.dbx-mapbox-marker .dbx-mapbox-marker-icon-content mat-icon{width:100%;height:100%;font-size:inherit}.dbx-mapbox-marker .dbx-mapbox-marker-label{font-size:.9em}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip{flex-direction:row;font-size:1em}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip .dbx-mapbox-marker-icon-content{width:18px;height:18px;font-size:18px}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip.dbx-chip-small .dbx-mapbox-marker-label{padding-left:3px}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip.dbx-chip-small .dbx-mapbox-marker-icon-content{padding:0!important;width:16px;height:16px;font-size:16px}.dbx-mapbox-marker.dbx-mapbox-marker-chip.dbx-chip .dbx-mapbox-marker-label{padding-left:4px}.dbx-mapbox-marker-no-icon>.dbx-mapbox-marker-icon-content{display:none}.dbx-mapbox-marker-no-icon>.dbx-mapbox-marker-icon-content .dbx-mapbox-marker-label{padding-left:0}\n"] }]
         }], ctorParameters: function () { return [{ type: DbxMapboxChangeService, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { marker: [{
@@ -1148,7 +1179,7 @@ function dbxMapboxColoredDotStyle(background, color) {
     return {
         background,
         padding: '2px',
-        color: color || 'white',
+        color: color ?? background ? 'white' : undefined,
         'border-radius': '50%'
     };
 }