initial commit of directory for gcds-map component

Dynamically render layers based on passed props

Add gcds-map-layer, update gcds-map to use it.  Update index.html with
example map.  Need to figure out how to get a storybook together.

Update gcds-map.stories.tsx

Add dependency on @maps4html/mapml

Updates for gcds-map

Remove dep on npm @maps4html/mapml

Add <Host>, load mapml-viewer via script tag, per Ethan Wallace suggestion

Basic functional story, needs work
Sync package.json with upstream

Update packages/web/src/components/gcds-map/gcds-map.tsx

Use suggested integrity SHA for mapml.js temporarily until it can be included in dist

Co-authored-by: Pierre Dubois <[email protected]>

Generated packages ?

Update default story - overview.mdx is the focus for examples of
gcds-map attributes effects.  To do: add examples for gcds-map-layer
properties, probably by renaming properties.mdx and using that as the
menu item for "Map Layer"

Add zoomTo method definition to ts class definition

Update component render method to get mapml.js from ./dist/gcds/gcds-map
Still need to create that or equivalent location during build process
Update map to have controls by default

Rename layer- to map-layer

Add @maps4html/mapml as dependency. Add copy script, update stencil
config to invoke copy of mapml artifacts to dist output directory.

Get rid of comment in component that is rendering
Change default controls from false to true

Make mapml a dependency, not a devDependency, since it must be present
at runtime / installed with product

Revert <layer-> to <map-layer> refactoring, because that code has not
been released yet

Make copyMapMLFiles.js into a stencil.config.js plugin thingy, in line
with other imported plugins.

non-idempotency in copy mapml plugin

Replace unreliable custom stencil plugin with stencil copy option

Make move <script> creation into componentWillLoad lifecycle method,
test for it's previous existence.

Add ts-loader to devDependencies (maybe this is not correct, but I couldn't
get storybook to compile otherwise).

Add dist/gcds/gcds-map as static resource directory for storybook.

Add caption attribute to gcds-map

Rename title to caption. Update @watches to handle one Prop each.

Add caption to index.html gcds-map instance

Fix a bunch of compile-time errors
Update title -> caption in story

Change how controls is implemented by stencil to make it consistent
with boolean attribute with default of false when not present

Attempt to mitigate problems caused by story rendering component many
times with each keystroke

Make controlslist a multi-select in storybook

Update mapml to 0.16.0

packages/angular/src/lib/stencil-generated/components.ts

@@ -796,6 +796,50 @@ export declare interface GcdsLink extends Components.GcdsLink {
 }
 
 
+@ProxyCmp({
+  inputs: ['controls', 'controlslist', 'height', 'lat', 'lon', 'projection', 'width', 'zoom']
+})
+@Component({
+  selector: 'gcds-map',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['controls', 'controlslist', 'height', 'lat', 'lon', 'projection', 'width', 'zoom'],
+})
+export class GcdsMap {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface GcdsMap extends Components.GcdsMap {}
+
+
+@ProxyCmp({
+  inputs: ['checked', 'label', 'opacity', 'src']
+})
+@Component({
+  selector: 'gcds-map-layer',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['checked', 'label', 'opacity', 'src'],
+})
+export class GcdsMapLayer {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface GcdsMapLayer extends Components.GcdsMapLayer {}
+
+
 @ProxyCmp({
   inputs: ['closeTrigger', 'menuLabel', 'open', 'openTrigger'],
   methods: ['focusTrigger', 'toggleNav'],

packages/angular/src/lib/stencil-generated/index.ts

@@ -27,6 +27,8 @@ export const DIRECTIVES = [
   d.GcdsLabel,
   d.GcdsLangToggle,
   d.GcdsLink,
+  d.GcdsMap,
+  d.GcdsMapLayer,
   d.GcdsNavGroup,
   d.GcdsNavLink,
   d.GcdsNotice,

packages/react/src/components/stencil-generated/index.ts

@@ -33,6 +33,8 @@ export const GcdsInput = /*@__PURE__*/createReactComponent<JSX.GcdsInput, HTMLGc
 export const GcdsLabel = /*@__PURE__*/createReactComponent<JSX.GcdsLabel, HTMLGcdsLabelElement>('gcds-label');
 export const GcdsLangToggle = /*@__PURE__*/createReactComponent<JSX.GcdsLangToggle, HTMLGcdsLangToggleElement>('gcds-lang-toggle');
 export const GcdsLink = /*@__PURE__*/createReactComponent<JSX.GcdsLink, HTMLGcdsLinkElement>('gcds-link');
+export const GcdsMap = /*@__PURE__*/createReactComponent<JSX.GcdsMap, HTMLGcdsMapElement>('gcds-map');
+export const GcdsMapLayer = /*@__PURE__*/createReactComponent<JSX.GcdsMapLayer, HTMLGcdsMapLayerElement>('gcds-map-layer');
 export const GcdsNavGroup = /*@__PURE__*/createReactComponent<JSX.GcdsNavGroup, HTMLGcdsNavGroupElement>('gcds-nav-group');
 export const GcdsNavLink = /*@__PURE__*/createReactComponent<JSX.GcdsNavLink, HTMLGcdsNavLinkElement>('gcds-nav-link');
 export const GcdsNotice = /*@__PURE__*/createReactComponent<JSX.GcdsNotice, HTMLGcdsNoticeElement>('gcds-notice');

packages/vue/lib/components.ts

@@ -298,6 +298,26 @@ export const GcdsLink = /*@__PURE__*/ defineContainer<JSX.GcdsLink>('gcds-link',
 ]);
 
 
+export const GcdsMap = /*@__PURE__*/ defineContainer<JSX.GcdsMap>('gcds-map', undefined, [
+  'lat',
+  'lon',
+  'zoom',
+  'projection',
+  'controls',
+  'controlslist',
+  'width',
+  'height'
+]);
+
+
+export const GcdsMapLayer = /*@__PURE__*/ defineContainer<JSX.GcdsMapLayer>('gcds-map-layer', undefined, [
+  'label',
+  'src',
+  'checked',
+  'opacity'
+]);
+
+
 export const GcdsNavGroup = /*@__PURE__*/ defineContainer<JSX.GcdsNavGroup>('gcds-nav-group', undefined, [
   'closeTrigger',
   'menuLabel',

packages/web/.storybook/main.js

@@ -19,10 +19,30 @@ const config = {
     name: getAbsolutePath("@storybook/html-webpack5"),
     options: {},
   },
+  staticDirs: [{ from: '../dist/gcds/gcds-map', to: '/dist/gcds/gcds-map' }],
   docs: {
     autodocs: false,
     defaultName: 'Stories'
   },
+  webpackFinal: async (config) => {
+    // Use ts-loader for .ts and .tsx files
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+          options: {
+            transpileOnly: true,
+          },
+        },
+      ],
+    });
+
+    config.resolve.extensions.push('.ts', '.tsx');
+
+
+    return config;
+  }
 };
 export default config;